/* Fix for duplicate titles and subtitles in sidebar */

/* Force only full-text to show in normal state */
.collapsible-section .full-text,
.collapsible-subsection .full-text {
  display: flex !important;
}

.collapsible-section .short-text,
.collapsible-subsection .short-text {
  display: none !important;
}

/* Override for shrunken sidebar - show only short-text */
.sidebar.shrink .collapsible-section .full-text,
.sidebar.shrink .collapsible-subsection .full-text {
  display: none !important;
}

.sidebar.shrink .collapsible-section .short-text,
.sidebar.shrink .collapsible-subsection .short-text {
  display: flex !important;
}

/* Override for mobile - show only short-text */
@media (max-width: 800.98px) {
  .sidebar .collapsible-section .full-text,
  .sidebar .collapsible-subsection .full-text {
    display: none !important;
  }
  
  .sidebar .collapsible-section .short-text,
  .sidebar .collapsible-subsection .short-text {
    display: flex !important;
    justify-content: space-between !important; /* Cambio: espacio entre texto y flecha */
    align-items: center !important;
    flex-direction: row !important; /* Cambio: en fila, no columna */
    padding: 8px 10px !important; /* Cambio: reducido de 15px a 8px */
    font-size: 0.9rem !important; /* Cambio: reducido de 1rem a 0.9rem */
    line-height: 1.2 !important;
    text-align: left !important; /* Cambio: alineado a la izquierda */
  }
  
  /* Ensure menu items are visible and have proper layout */
  .sidebar .sidebar-link {
    display: flex !important;
    flex-direction: row !important; /* Cambio: en fila, no columna */
    align-items: center !important;
    text-align: left !important; /* Cambio: alineado a la izquierda */
    padding: 12px 10px !important; /* Cambio: menos padding izquierdo (20px -> 10px) */
    width: 100% !important; /* Asegurar que ocupe todo el ancho disponible */
    max-width: none !important; /* Sin límite de ancho */
    overflow: visible !important; /* Permitir que el contenido se vea */
    white-space: nowrap !important; /* Forzar una sola línea */
  }
  
  /* Agregar margin-top al primer elemento del menú (Agenda) */
  .sidebar .sidebar-menu > li:first-child .sidebar-link {
    margin-top: 8px !important; /* Reducido de 10px a 8px */
  }
  
  /* Icon column styling - keep icons to the left */
  .sidebar .sidebar-link .col-3 {
    flex: 0 0 35px !important; /* Cambio: reducido de 40px a 35px para más espacio al texto */
    display: flex !important;
    justify-content: flex-start !important; /* Cambio: iconos a la izquierda */
    align-items: center !important;
    margin-right: 10px !important; /* Cambio: reducido de 15px a 10px */
  }
  
  /* Text column styling */
  .sidebar .sidebar-link .col-9 {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important; /* Permitir que el texto se ajuste */
    max-width: none !important; /* Sin límite máximo de ancho */
    overflow: visible !important; /* Permitir que el contenido se vea */
    word-wrap: normal !important; /* Sin división de palabras */
  }
  
  .sidebar .sidebar-link span {
    display: block !important;
    visibility: visible !important;
    font-size: 0.85rem !important; /* Cambio: reducido de 0.9rem a 0.85rem para igualar con subtítulos */
    margin-top: 0 !important; /* Cambio: sin margen superior */
    line-height: 1.4 !important;
    word-break: normal !important; /* Cambio: normal en lugar de break-word */
    word-wrap: normal !important; /* Forzar que no se corte */
    hyphens: none !important; /* Sin guiones */
    opacity: 1 !important;
    text-align: left !important; /* Cambio: texto alineado a la izquierda */
    white-space: nowrap !important; /* Cambio: forzar que el texto esté en una sola línea */
    overflow: visible !important; /* Permitir que se vea todo el texto */
    max-width: none !important; /* Sin límite de ancho */
    width: auto !important; /* Ancho automático */
  }
}

/* Ensure proper alignment for collapsible elements */
.collapsible-section .d-flex,
.collapsible-subsection .d-flex {
  align-items: center;
  justify-content: space-between;
  padding-right: 15px !important; /* Add consistent right padding */
}

.collapsible-section .d-flex span,
.collapsible-subsection .d-flex span {
  flex: 1;
}

/* Align chevron icons consistently for both titles and subtitles */
.collapsible-section .collapse-icon,
.collapsible-subsection .collapse-icon {
  margin-left: auto;
  font-size: 0.8em;
  margin-right: 0 !important; /* Remove any right margin */
  align-self: center !important; /* Ensure vertical alignment */
}

/* Mobile specific chevron alignment */
@media (max-width: 800.98px) {
  .sidebar .collapsible-section .short-text .collapse-icon,
  .sidebar .collapsible-subsection .short-text .collapse-icon {
    margin-left: auto !important;
    margin-right: 0 !important;
    align-self: center !important;
    font-size: 0.8em !important;
  }
  
  /* Ensure chevron icons are properly aligned in headers */
  .sidebar .collapse-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* Specific adjustment for main section titles to match subtitle alignment */
.collapsible-section.text-center .d-flex {
  padding-left: 15px !important;
  padding-right: 15px !important;
}

/* Ensure subtitles maintain their current padding */
.collapsible-subsection .d-flex {
  padding-left: 24px !important; /* px-3 equivalent */
  padding-right: 15px !important; /* Match the main titles */
}

/* Mobile header fixes */
@media (max-width: 991.98px) {
  /* ULTRA-ESPECÍFICO: Forzar fondo blanco en sidebar móvil */
  body .sidebar,
  body .sidebar.show,
  html body .sidebar,
  html body .sidebar.show {
    background: #ffffff !important;
    background-color: #ffffff !important;
  }
  
  /* Fix logo overlapping hamburger button - keep header in one line */
  .navbar .navbar-brand {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin-left: 15px !important; /* Reduced margin to keep in one line */
    max-width: 6rem !important; /* Smaller logo to fit better */
    flex-shrink: 0 !important; /* Prevent logo from shrinking */
  }
  
  /* Ensure hamburger button is visible and clickable */
  .sidebar-toggler {
    position: relative !important;
    z-index: 1001 !important; /* Higher z-index for overlay */
    display: inline-block !important;
    padding: 10px !important;
    background-color: transparent !important;
    border: none !important;
    flex-shrink: 0 !important; /* Prevent button from shrinking */
    margin-right: 0 !important;
  }
  
  /* Make sure the navbar has proper flex layout - one line */
  .navbar {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important; /* Prevent wrapping to new line */
    min-height: auto !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    position: relative !important;
    z-index: 1001 !important; /* Keep navbar above sidebar overlay */
  }
  
  /* Ensure right side items stay on same line */
  .navbar .ml-auto {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
  }
  
  /* Mobile sidebar as overlay modal */
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: -100% !important; /* Start completely hidden */
    width: 320px !important; /* Cambio: Más ancho para evitar cortes de texto (280px -> 320px) */
    height: 100vh !important;
    background-color: #ffffff !important; /* White background */
    background: #ffffff !important; /* Doble declaración para asegurar */
    box-shadow: 0 0 20px rgba(0,0,0,0.3) !important;
    z-index: 1000 !important;
    transition: left 0.3s ease !important;
    overflow-y: auto !important;
    text-align: left !important; /* Left align for better readability */
    padding-top: 70px !important; /* Space for header */
    padding-bottom: 20px !important; /* Asegurar que el fondo blanco cubra hasta abajo */
  }
  
  /* Forzar fondo blanco en el contenedor principal del menú */
  .sidebar .sidebar-menu {
    background-color: #ffffff !important;
    background: #ffffff !important;
    min-height: calc(100vh - 90px) !important; /* Cubrir toda la altura disponible */
    padding-bottom: 50px !important; /* Espacio extra para asegurar fondo blanco */
  }
  
  /* Force WHITE background for all sidebar content in mobile */
  .sidebar .sidebar-wrapper,
  .sidebar .sidebar-content,
  .sidebar .sidebar-list,
  .sidebar .sidebar-link,
  body .sidebar .sidebar-wrapper,
  body .sidebar .sidebar-content,
  body .sidebar .sidebar-list,
  body .sidebar .sidebar-link,
  html body .sidebar .sidebar-wrapper,
  html body .sidebar .sidebar-content,
  html body .sidebar .sidebar-list,
  html body .sidebar .sidebar-link {
    background-color: #ffffff !important;
    background: #ffffff !important;
  }
  
  /* Force WHITE background for headers inside sidebar */
  .sidebar ul .sidebar-header,
  .sidebar .sidebar-menu .sidebar-header,
  .sidebar li .sidebar-header,
  .sidebar .sidebar-header,
  body .sidebar ul .sidebar-header,
  body .sidebar .sidebar-menu .sidebar-header,
  body .sidebar li .sidebar-header,
  body .sidebar .sidebar-header,
  html body .sidebar ul .sidebar-header,
  html body .sidebar .sidebar-menu .sidebar-header,
  html body .sidebar li .sidebar-header,
  html body .sidebar .sidebar-header {
    background-color: #ffffff !important;
    background: #ffffff !important;
  }
  
  /* Force WHITE background for list items inside the sidebar */
  .sidebar ul .sidebar-list-item,
  .sidebar .sidebar-menu .sidebar-list-item,
  .sidebar .sidebar-list-item,
  body .sidebar ul .sidebar-list-item,
  body .sidebar .sidebar-menu .sidebar-list-item,
  body .sidebar .sidebar-list-item,
  html body .sidebar ul .sidebar-list-item,
  html body .sidebar .sidebar-menu .sidebar-list-item,
  html body .sidebar .sidebar-list-item {
    background-color: #ffffff !important;
    background: #ffffff !important;
  }
  
  /* Force WHITE background for HR elements inside the sidebar */
  .sidebar hr,
  body .sidebar hr,
  html body .sidebar hr {
    background-color: #ffffff !important;
    background: #ffffff !important;
    border-color: #e9ecef !important;
  }
  
  /* Force WHITE background for ALL possible containers around HR */
  .sidebar ul,
  .sidebar .sidebar-menu,
  .sidebar .list-unstyled,
  body .sidebar ul,
  body .sidebar .sidebar-menu,
  body .sidebar .list-unstyled,
  html body .sidebar ul,
  html body .sidebar .sidebar-menu,
  html body .sidebar .list-unstyled {
    background-color: #ffffff !important;
    background: #ffffff !important;
  }
  
  /* Nuclear option: force white on EVERYTHING inside sidebar */
  .sidebar *,
  body .sidebar *,
  html body .sidebar * {
    background-color: #ffffff !important;
    background: #ffffff !important;
  }
  
  /* Separación sutil solo entre secciones principales diferentes */
  .sidebar hr {
    margin: 5px 0 !important; /* Reducir margin del HR */
    border: none !important;
    border-top: 1px solid #f0f0f0 !important; /* Línea muy sutil */
    background: transparent !important;
  }
  
  .sidebar,
  body .sidebar,
  html body .sidebar {
    background-color: #ffffff !important; /* Ensure sidebar itself is white */
    background: #ffffff !important;
  }
  
  /* Show sidebar overlay when toggled */
  .sidebar.show {
    left: 0 !important;
  }
  
  /* Backdrop overlay */
  .sidebar.show::before {
    content: '';
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0,0,0,0.5) !important;
    z-index: -1 !important;
  }
  
  /* Show full text in modal sidebar - TÍTULOS PRINCIPALES (azules) */
  .sidebar .collapsible-section .full-text {
    display: flex !important;
    padding: 8px 10px !important; /* Reducido padding */
    font-size: 0.9rem !important; /* Reducido tamaño */
    font-weight: 600 !important;
    color: #5576d1 !important; /* Azul para títulos principales */
    background-color: transparent !important;
  }
  
  /* Show full text in modal sidebar - SUBTÍTULOS (negros con bold) */
  .sidebar .collapsible-subsection .full-text {
    display: flex !important;
    padding: 6px 10px !important; /* Menor padding para subtítulos */
    font-size: 0.85rem !important; /* Menor tamaño para subtítulos */
    font-weight: 600 !important; /* Restaurar bold para que destaquen */
    color: #333333 !important; /* Negro para subtítulos */
    background-color: transparent !important;
  }
  
  .sidebar .collapsible-section .short-text,
  .sidebar .collapsible-subsection .short-text {
    display: none !important;
  }
  
  /* Force visibility of title text (azul) */
  .sidebar .collapsible-section span {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #5576d1 !important; /* Azul para títulos */
    font-weight: 600 !important;
  }
  
  /* Force visibility of subtitle text (negro con bold) */
  .sidebar .collapsible-subsection span {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #333333 !important; /* Negro para subtítulos */
    font-weight: 600 !important; /* Restaurar bold para que destaquen */
  }
  
  /* Style collapsible headers - TÍTULOS PRINCIPALES */
  .sidebar .sidebar-header.collapsible-section {
    padding: 8px 10px !important; /* Reducido padding */
    background-color: transparent !important;
    border-bottom: none !important; /* Eliminar border para evitar doble separador */
    margin-bottom: 0 !important;
    margin-top: 0 !important; /* Sin margin superior */
    cursor: pointer !important;
  }
  
  /* Style collapsible headers - SUBTÍTULOS */
  .sidebar .sidebar-header.collapsible-subsection {
    padding: 6px 10px !important; /* Menor padding que títulos */
    padding-left: 20px !important; /* Menos indentación */
    background-color: #ffffff !important;
    border-bottom: none !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important; /* Sin margin superior */
    cursor: pointer !important;
  }
  
  /* Ensure chevron icons are visible */
  .sidebar .collapse-icon {
    display: inline-block !important;
    color: #5576d1 !important;
    font-size: 0.8em !important;
    margin-left: auto !important;
  }
  
  /* Style menu items for modal */
  .sidebar .sidebar-list-item {
    margin-bottom: 0 !important;
    border-bottom: none !important;
  }
  
  .sidebar .sidebar-link {
    display: flex !important;
    align-items: center !important;
    padding: 12px 20px !important;
    padding-left: 40px !important; /* Indent menu items */
    text-decoration: none !important;
    color: #666 !important;
    transition: background-color 0.2s ease !important;
    border: none !important;
  }
  
  .sidebar .sidebar-link:hover {
    background-color: rgba(85, 118, 209, 0.1) !important;
    color: #5576d1 !important;
    text-decoration: none !important;
  }
  
  .sidebar .sidebar-link .col-3 {
    flex: 0 0 40px !important;
    margin-right: 15px !important;
  }
  
  .sidebar .sidebar-link .col-9 {
    flex: 1 !important;
    padding: 0 !important;
  }
  
  .sidebar .sidebar-link span {
    display: block !important;
    visibility: visible !important;
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
    opacity: 1 !important;
    color: #666 !important;
    font-weight: normal !important;
  }
  
  .sidebar .sidebar-link:hover span {
    color: #5576d1 !important;
  }
  
  /* Close button area - tap anywhere outside to close */
  body.sidebar-open {
    overflow: hidden !important;
  }
}

/* REGLAS GLOBALES ULTRA-ESPECÍFICAS PARA FONDO BLANCO */
@media (max-width: 991.98px) {
  /* LA REGLA MÁS ESPECÍFICA POSIBLE */
  body.d-flex .sidebar,
  body.d-flex .sidebar.show,
  html body.d-flex .sidebar,
  html body.d-flex .sidebar.show,
  .d-flex .sidebar,
  .d-flex .sidebar.show {
    background: white !important;
    background-color: white !important;
  }
  
  /* Sobreescribir cualquier clase del tema que pueda estar causando el fondo gris */
  .sidebar.bg-primary,
  .sidebar.bg-secondary,
  .sidebar.bg-dark,
  .sidebar.bg-light,
  body .sidebar.bg-primary,
  body .sidebar.bg-secondary,
  body .sidebar.bg-dark,
  body .sidebar.bg-light,
  html body .sidebar.bg-primary,
  html body .sidebar.bg-secondary,
  html body .sidebar.bg-dark,
  html body .sidebar.bg-light {
    background: #ffffff !important;
    background-color: #ffffff !important;
  }
  
  /* Sobreescribir cualquier gradiente o imagen de fondo */
  .sidebar,
  body .sidebar,
  html body .sidebar {
    background-image: none !important;
  }
}

/* Simple white background for all sidebar states */
.sidebar {
  background-color: #ffffff !important;
}