:root {
  --color-primary: #2563eb;
  --color-secondary: #f3f4f6;
  --color-success: #22c55e;
  --color-danger: #ef4444;
  --color-warning: #facc15;
  --color-bg: #fff;
  --color-text: #222;
  --font-main: 'Segoe UI', Arial, sans-serif;
  /*--color-bg-header: #d3d3d3;*/
    --color-bg-header: rgba(211, 211, 211, 0.3);
    /* gris con opacidad */
  --color-bg-header-hover: #8990a2;
  --color-bg-circle: #ffffff;
  --color-bg-circle-active: #b5bac9;

}


body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-main);
}

.btn,
.btn-primary {
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: var(--font-main);
}

.btn-success {
  background: var(--color-success);
  color: #fff;
}

.btn-danger {
  background: var(--color-danger);
  color: #fff;
}

.btn-warning {
  background: var(--color-warning);
  color: #fff;
}

.btn-secondary {
  background: var(--color-secondary);
  color: var(--color-text);
}

.btn:hover,
.btn-primary:hover {
  background: #1d4ed8;
}

.theme-dark {
  --color-bg: #18181b;
  --color-text: #f3f4f6;
  --color-primary: #0ea5e9;
  --color-secondary: #27272a;
}

.theme-green {
  --color-primary: #22c55e;
  --color-bg: #f0fdf4;
}

.theme-red {
  --color-primary: #ef4444;
  --color-bg: #fef2f2;
}

.theme-font-serif {
  --font-main: 'Georgia', serif;
}

/* Toast styles */
.toast {
  min-width: 280px;
  max-width: 350px;
  padding: 1rem 1.5rem;
  border-radius: 10px;
  box-shadow: 0 4px 24px #0002;
  color: var(--color-text);
  background: var(--color-bg);
  font-family: var(--font-main);
  font-size: 1rem;
  position: fixed;
  z-index: 100;
  right: 2rem;
  top: 2rem;
  opacity: 0;
  transform: translateY(-30px);
  transition: opacity 0.3s, transform 0.3s;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.toast-success {
  background: var(--color-success);
  color: #fff;
}

.toast-error {
  background: var(--color-danger);
  color: #fff;
}

.toast-warning {
  background: var(--color-warning);
  color: #fff;
}

.toast-dark {
  background: #222;
  color: #f3f4f6;
}

.toast .toast-icon {
  font-size: 1.3rem;
  margin-right: 0.5rem;
}

.month_default_main {
  --dp-month-border-color: #c0c0c0;
  --dp-month-font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --dp-month-font-size: 15px;
  --dp-month-cell-border-color: #ddd;
  --dp-month-cell-bg-color: #fdfdfd;
  --dp-month-cell-business-bg-color: #ffffff;
  --dp-month-event-color: #333;
  --dp-month-event-border-color: #999;
  --dp-month-event-border: 1px solid var(--dp-month-event-border-color);
  --dp-month-event-bg-top-color: #ffffff;
  --dp-month-event-bg-bottom-color: #eeeeee;
  --dp-month-event-background: linear-gradient(to bottom, var(--dp-month-event-bg-top-color) 0%, var(--dp-month-event-bg-bottom-color) 100%);
  --dp-month-event-horizontal-align: flex-start;
  --dp-month-event-vertical-align: center;
  --dp-month-event-padding: 2px;
  --dp-month-event-padding-left: 10px;
  --dp-month-event-padding-rtl: 2px 10px 2px 1px;
  --dp-month-event-border-radius: 0px;
  --dp-month-event-box-shadow: none;
  --dp-month-event-bar-top: 1px;
  --dp-month-event-bar-left: 2px;
  --dp-month-event-bar-bottom: 1px;
  --dp-month-event-bar-width: 6px;
  --dp-month-event-bar-color: #1066a8;
  --dp-month-event-bar-display: block;
  --dp-month-header-bg-color: #f3f3f3;
  --dp-month-header-color: #333;
  --dp-month-header-horizontal-align: center;
  --dp-month-header-vertical-align: center;
  --dp-month-header-padding: 0px;
  --dp-month-message-bg-color: #ffa216;
  --dp-month-message-color: #ffffff;
  --dp-month-message-padding: 10px;
  --dp-month-selected-event-bg-color: #ddd;
  --dp-month-shadow-color: #bbbbbb;
  --dp-month-shadow-border-color: #888888;
}

/* Header de tarjetas/acordeones en formularios HC.
   Azul institucional #1e3a5f. La variable --color-bg-header se mantiene
   intacta para no afectar páginas de error y otros componentes que la
   usan como gris claro. */
.header-acordion-bg {
  background-color: #1e3a5f !important;
  color: #ffffff !important;
  cursor: pointer !important;
  padding: 0.5rem 1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  transition: background-color 0.2s ease !important;
}

.header-acordion-bg:hover {
  background-color: #16294a !important;
}

.header-acordion-bg label {
  color: #ffffff !important;
  margin: 0 !important;
  flex-grow: 1 !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px !important;
}

/* Forzar blanco para CUALQUIER descendiente textual del header (span, p, h*,
   text-dark, text-muted, etc.) — algunas vistas legacy usan utilidades de
   Bootstrap que sobrescribirían el color del label. */
.header-acordion-bg span,
.header-acordion-bg p,
.header-acordion-bg strong,
.header-acordion-bg b,
.header-acordion-bg .fw-bold,
.header-acordion-bg h1,
.header-acordion-bg h2,
.header-acordion-bg h3,
.header-acordion-bg h4,
.header-acordion-bg h5,
.header-acordion-bg h6,
.header-acordion-bg .text-dark,
.header-acordion-bg .text-muted,
.header-acordion-bg .text-secondary,
.header-acordion-bg .text-body,
.header-acordion-bg .text-black {
  color: #ffffff !important;
}

/* Centrado vertical para iconos en cabeceras colapsables */
.header-acordion-bg i {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  font-size: 1.1em !important;
  color: #ffffff !important;
  transition: transform 0.3s ease !important;
}

/* Efecto hover para iconos */
.header-acordion-bg:hover i {
  transform: scale(1.1) !important;
}

/* Estilos específicos para iconos de chevron */
.header-acordion-bg .fa-chevron-up,
.header-acordion-bg .fa-chevron-down {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 20px !important;
  min-width: 20px !important;
}



/* Botón estándar para formularios - basado en btnNuevaCita */
.btn-standard {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    color: #374151;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    min-width: 100px;
    justify-content: center;
    width: 100%;
}

.btn-standard:hover {
    background: #f9fafb;
    border-color: #d1d5db;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
    color: #374151;
    text-decoration: none;
}

.btn-standard:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.btn-standard:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.btn-standard i {
    font-size: 0.875rem;
    color: #6b7280;
}

.btn-standard span {
    font-weight: 500;
    color: #374151;
}

.btn-standard:hover i {
    color: #6b7280;
}

.btn-standard:hover span {
    color: #374151;
}

/* Variante primaria del botón estándar - estilo sutil como el de referencia */
.btn-standard-primary {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    color: #374151;
}

.btn-standard-primary:hover {
    background: #f9fafb;
    border-color: #d1d5db;
    color: #374151;
}

.btn-standard-primary i,
.btn-standard-primary span {
    color: #374151;
}

.btn-standard-primary:hover i,
.btn-standard-primary:hover span {
    color: #374151;
}

/* Botón para almacenar/guardar - estilo oscuro */
.btn-almacenar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #2c3e50;
    border: 1px solid #2c3e50;
    border-radius: 12px;
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    min-width: 100px;
    justify-content: center;
    width: 100%;
}

.btn-almacenar:hover {
    background: #1a1d21;
    border-color: #1a1d21;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    transform: translateY(-1px);
    color: #ffffff;
    text-decoration: none;
}

.btn-almacenar:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.btn-almacenar:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(33, 37, 41, 0.3);
}

.btn-almacenar i {
    font-size: 0.875rem;
    color: #ffffff;
}

.btn-almacenar span {
    font-weight: 500;
    color: #ffffff;
}

.btn-almacenar:hover i {
    color: #ffffff;
}

.btn-almacenar:hover span {
    color: #ffffff;
}

/* Botones de tabla - fondo transparente con íconos gris oscuro */
.btn-table {
    background: transparent !important;
    border: 1px solid transparent !important;
    color: #6b7280 !important;
    padding: 6px 8px !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
}

.btn-table:hover {
    background: #f3f4f6 !important;
    border-color: #d1d5db !important;
    color: #374151 !important;
    transform: translateY(-1px) !important;
}

.btn-table:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(107, 114, 128, 0.2) !important;
}

.btn-table i {
    color: inherit !important;
}

/* Botón de cancelar - estilo gris oscuro */
.btn-cancelar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #6a6e73;
    border: 1px solid #6a6e73;
    border-radius: 12px;
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    min-width: 100px;
    justify-content: center;
    width: 100%;
}

.btn-cancelar:hover {
    background: #5a5e63;
    border-color: #5a5e63;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
    color: #ffffff;
    text-decoration: none;
}

.btn-cancelar:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.btn-cancelar:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(106, 110, 115, 0.3);
}

.btn-cancelar i {
    font-size: 0.875rem;
    color: #ffffff;
}

.btn-cancelar span {
    font-weight: 500;
    color: #ffffff;
}

.btn-cancelar:hover i {
    color: #ffffff;
}

.btn-cancelar:hover span {
    color: #ffffff;
}

/* ===== SIDEBAR CON SCROLL INDEPENDIENTE Y POSICIÓN FIJA ===== */

/* Ocultar la barra de scroll del body/html */
/*  CAUSA DUPLICIDAD EN EL SCROLL Y EN ALGUNAS PLANTILLAS 
html,
body {
    overflow-x: hidden !important;
    
}


*/ 

/* Hacer que la sidebar tenga posición fija */
.main-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    overflow: hidden !important;
    z-index: 1000 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Hacer que el brand-link (logo/icono) sea estático */
.main-sidebar .brand-link {
    flex-shrink: 0 !important;
    position: relative !important;
}

/* Hacer que solo el menú de navegación sea scrolleable */
.main-sidebar .sidebar {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: calc(100vh - 60px) !important;
    /* Restar altura del brand-link */
}

/* Ajustar el contenido principal para compensar la sidebar fija */
.content-wrapper {
    margin-left: 250px !important;
    transition: margin-left 0.3s ease-in-out !important;
}

/* Cuando la sidebar está colapsada, ajustar el margen */
.sidebar-collapse .content-wrapper {
    margin-left: 4.6rem !important;
}

/* Ajustar el header para que también sea fijo */
.main-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 999 !important;
    margin-left: 250px !important;
    transition: margin-left 0.3s ease-in-out !important;
}

/* Cuando la sidebar está colapsada, ajustar el margen del header */
.sidebar-collapse .main-header {
    margin-left: 4.6rem !important;
}

/* Ajustar el footer */
.main-footer {
    margin-left: 250px !important;
    transition: margin-left 0.3s ease-in-out !important;
}

/* Cuando la sidebar está colapsada, ajustar el margen del footer */
.sidebar-collapse .main-footer {
    margin-left: 4.6rem !important;
}

/* Ajustar el contenido para que no se oculte detrás del header fijo */
.content-wrapper {
    margin-top: 3.5rem !important;
    min-height: calc(100vh - 3.5rem) !important;
}

/* Ocultar completamente la barra de scroll del menú de navegación */
.main-sidebar .sidebar::-webkit-scrollbar {
    width: 0px !important;
    background: transparent !important;
}

.main-sidebar .sidebar::-webkit-scrollbar-track {
    background: transparent !important;
}

.main-sidebar .sidebar::-webkit-scrollbar-thumb {
    background: transparent !important;
}

/* Para Firefox - ocultar scrollbar del menú */
.main-sidebar .sidebar {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

/* Asegurar que la sidebar mantenga su ancho fijo */
.sidebar-mini.sidebar-collapse .main-sidebar {
    width: 4.6rem !important;
}

.sidebar-mini:not(.sidebar-collapse) .main-sidebar {
    width: 250px !important;
}

/* ===== BÚSQUEDA EN NAVBAR PARA MENÚS ===== */

/* Contenedor del buscador en navbar */
.navbar-search-container {
    position: relative;
    margin: 0 10px;
}

/* Input del buscador en navbar */
.navbar-search-input {
    width: 250px;
    padding: 8px 35px 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 0.875rem;
    transition: all 0.3s ease;
}

.navbar-search-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.navbar-search-input:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.4);
    background-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
    width: 300px;
}

/* Icono de búsqueda en navbar */
.navbar-search-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.875rem;
    pointer-events: none;
}

/* Contenedor de resultados de búsqueda en navbar */
.navbar-search-results {
    position: fixed;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    max-height: 400px;
    overflow-y: auto;
    z-index: 9999;
    min-width: 300px;
}

/* Elementos de resultado en navbar */
.navbar-search-item {
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.navbar-search-item:last-child {
    border-bottom: none;
}

.navbar-search-item:hover,
.navbar-search-item.active {
    background-color: #f8f9fa;
}

/* Contenido del elemento de resultado */
.navbar-search-item-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Icono del elemento de resultado */
.navbar-search-item-icon {
    color: #6c757d;
    font-size: 1rem;
    width: 20px;
    text-align: center;
}

/* Texto del elemento de resultado */
.navbar-search-item-text {
    flex: 1;
    min-width: 0;
}

.navbar-search-item-title {
    color: #333;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 2px;
}

.navbar-search-item-parent {
    color: #6c757d;
    font-size: 0.75rem;
    font-style: italic;
}

/* Badge para distinguir tipo de menú */
.navbar-search-item-badge {
    flex-shrink: 0;
}

.navbar-search-item-badge .badge {
    font-size: 0.7rem;
    padding: 2px 6px;
}

/* Mensaje de "no encontrado" */
.navbar-search-no-results {
    padding: 20px;
    text-align: center;
    color: #6c757d;
    font-size: 0.875rem;
}

.navbar-search-no-results i {
    display: block;
    font-size: 1.5rem;
    margin-bottom: 8px;
    opacity: 0.5;
}

/* Highlight para texto coincidente */
.navbar-search-item-title mark {
    background-color: #fff3cd;
    color: #856404;
    padding: 0;
    border-radius: 2px;
}

/* Highlight para elementos del menú cuando se hace hover en resultados */
.navbar-search-highlight {
    background-color: rgba(255, 193, 7, 0.2) !important;
    border-left: 3px solid #ffc107 !important;
}

/* Responsive para móviles */
@media (max-width: 768px) {
    .navbar-search-input {
        width: 200px;
    }
    
    .navbar-search-input:focus {
        width: 250px;
    }
    
    .navbar-search-results {
        min-width: 250px;
        max-height: 300px;
    }
}

/* Estilos para cuando la navbar es oscura */
.navbar-dark .navbar-search-input {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.navbar-dark .navbar-search-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.navbar-dark .navbar-search-input:focus {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
}

.navbar-dark .navbar-search-icon {
    color: rgba(255, 255, 255, 0.6);
}

/* ===== PREVENCIÓN DE CACHÉ DESPUÉS DEL LOGOUT ===== */

/* Estilos para indicar que la página no debe ser cachead */
body {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Prevenir que el navegador guarde la página en caché */
html {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Estilos para el indicador de autenticación */
.auth-indicator {
    display: none;
}

.auth-indicator.authenticated {
    display: inline-block;
    color: #28a745;
    font-size: 0.8rem;
}

.auth-indicator.not-authenticated {
    display: inline-block;
    color: #dc3545;
    font-size: 0.8rem;
}

/* Estilos para el botón de logout mejorado */
.logout-btn {
    position: relative;
    overflow: hidden;
}

.logout-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.logout-btn:hover::before {
    left: 100%;
}

/* Estilos para mensajes de sesión expirada */
.session-expired-message {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #dc3545;
    color: white;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 99;
    animation: slideInRight 0.3s ease;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Estilos para el indicador de carga durante logout */
.logout-loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    color: white;
    font-size: 1.2rem;
}

.logout-loading::after {
    content: '';
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-left: 15px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}




/* ===== SISTEMA DE LETRAS PARA SUBMENÚS COLAPSADO =====  ESTILOS GENERALES PARA CAMBVIAR EL COMPORTAMIENTO DEL MMENU */ 


/*Cambio del sidebar - color uniforme #1e3a5f en todas las pantallas */

.main-sidebar,
.main-sidebar::before,
.main-sidebar .sidebar,
.main-sidebar .brand-link,
.main-sidebar .user-panel,
[class*="sidebar-dark"],
[class*="sidebar-dark"] .brand-link,
[class*="sidebar-dark"] .user-panel,
.layout-navbar-fixed .wrapper .sidebar-dark-primary .brand-link:not([class*="navbar"]),
.layout-navbar-fixed .dark-mode .wrapper .sidebar-dark-primary .brand-link:not([class*="navbar"]),
.layout-sm-navbar-fixed .wrapper .sidebar-dark-primary .brand-link:not([class*="navbar"]),
.layout-md-navbar-fixed .wrapper .sidebar-dark-primary .brand-link:not([class*="navbar"]),
.layout-lg-navbar-fixed .wrapper .sidebar-dark-primary .brand-link:not([class*="navbar"]),
.layout-xl-navbar-fixed .wrapper .sidebar-dark-primary .brand-link:not([class*="navbar"]) {
    background-color: #1e3a5f !important;
}

/* Quitar la línea divisoria del brand-link y user-panel para que el sidebar se vea uniforme */
[class*="sidebar-dark"] .brand-link,
[class*="sidebar-dark"] .user-panel {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

/* ===== INDENTACIÓN DE NIVELES DEL MENÚ (sólo cuando el sidebar NO está colapsado) ===== */

/* Nivel 2: submenú primer nivel */
body:not(.sidebar-collapse) .main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link {
    padding-left: 2.25rem !important;
    font-size: 0.92rem;
}

/* Nivel 3: submenú segundo nivel */
body:not(.sidebar-collapse) .main-sidebar .nav-sidebar .nav-treeview .nav-treeview > .nav-item > .nav-link {
    padding-left: 3.25rem !important;
    font-size: 0.88rem;
}

/* Nivel 4: submenú tercer nivel */
body:not(.sidebar-collapse) .main-sidebar .nav-sidebar .nav-treeview .nav-treeview .nav-treeview > .nav-item > .nav-link {
    padding-left: 4.25rem !important;
    font-size: 0.85rem;
}

/* Fondo más oscuro para los submenús expandidos -> diferencia visual entre niveles */
body:not(.sidebar-collapse) .main-sidebar .nav-sidebar .nav-treeview {
    position: relative;
    background-color: rgba(0, 0, 0, 0.15);
}

/* Línea guía vertical para indicar jerarquía en submenús */
body:not(.sidebar-collapse) .main-sidebar .nav-sidebar .nav-treeview::before {
    content: "";
    position: absolute;
    left: 1.4rem;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: rgba(255, 255, 255, 0.18);
}

body:not(.sidebar-collapse) .main-sidebar .nav-sidebar .nav-treeview .nav-treeview::before {
    left: 2.4rem;
}

body:not(.sidebar-collapse) .main-sidebar .nav-sidebar .nav-treeview .nav-treeview .nav-treeview::before {
    left: 3.4rem;
}

/* Resaltar el item activo dentro de un submenú expandido para ubicar al usuario */
.main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link.active {
    background-color: #2563eb !important;
    color: #fff !important;
    font-weight: 600;
}

/* Cuando un item padre tiene un hijo activo (menu-open), darle un estilo distinto al padre */
.main-sidebar .nav-sidebar > .nav-item.menu-open > .nav-link:not(.active) {
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: #fff !important;
}

/* Desactivar el comportamiento de hover de la sidebar cuando está colapsada */
.sidebar-mini.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover,
.sidebar-mini-md.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover,
.sidebar-mini-xs.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover {
    width: 4.6rem !important;
    /* Mantener el ancho colapsado */
}

.sidebar-mini.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover .brand-link,
.sidebar-mini-md.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover .brand-link,
.sidebar-mini-xs.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover .brand-link {
    width: 4.6rem !important;
    /* Mantener el ancho del brand-link colapsado */
}

/* Desactivar la expansión de elementos internos al hacer hover */
.sidebar-mini.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover .user-panel,
.sidebar-mini-md.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover .user-panel,
.sidebar-mini-xs.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover .user-panel {
    text-align: center !important;
    /* Mantener centrado */
}

.sidebar-mini.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover .user-panel .image,
.sidebar-mini-md.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover .user-panel .image,
.sidebar-mini-xs.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover .user-panel .image {
    float: none !important;
    /* Mantener sin flotar */
}

.sidebar-mini.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover .user-panel>.info,
.sidebar-mini.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover .sidebar .nav-sidebar .nav-link p,
.sidebar-mini.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover .brand-text,
.sidebar-mini.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover .logo-xl,
.sidebar-mini-md.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover .user-panel>.info,
.sidebar-mini-md.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover .sidebar .nav-sidebar .nav-link p,
.sidebar-mini-md.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover .brand-text,
.sidebar-mini-md.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover .logo-xl,
.sidebar-mini-xs.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover .user-panel>.info,
.sidebar-mini-xs.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover .sidebar .nav-sidebar .nav-link p,
.sidebar-mini-xs.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover .brand-text,
.sidebar-mini-xs.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover .logo-xl {
    display: none !important;
    /* Ocultar texto y elementos que se muestran al expandir */
}

.sidebar-mini.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover .logo-xs,
.sidebar-mini-md.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover .logo-xs,
.sidebar-mini-xs.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover .logo-xs {
    display: inline-block !important;
    /* Mantener visible el logo pequeño */
    visibility: visible !important;
}

.sidebar-mini.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover .brand-image,
.sidebar-mini-md.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover .brand-image,
.sidebar-mini-xs.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover .brand-image {
    margin-right: 0 !important;
    /* Sin margen derecho */
}

.sidebar-mini.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover .sidebar-form,
.sidebar-mini.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover .user-panel>.info,
.sidebar-mini-md.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover .sidebar-form,
.sidebar-mini-md.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover .user-panel>.info,
.sidebar-mini-xs.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover .sidebar-form,
.sidebar-mini-xs.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover .user-panel>.info {
    display: none !important;
    /* Ocultar formularios y info del usuario */
}

.sidebar-mini.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover .nav-sidebar>.nav-item>.nav-link>span,
.sidebar-mini-md.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover .nav-sidebar>.nav-item>.nav-link>span,
.sidebar-mini-xs.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover .nav-sidebar>.nav-item>.nav-link>span {
    display: none !important;
    /* Ocultar texto de los enlaces de navegación */
}

/* Desactivar hover para layouts específicos */
.layout-navbar-fixed .wrapper.sidebar-collapse .main-sidebar:hover .brand-link,
.layout-sm-navbar-fixed .wrapper.sidebar-collapse .main-sidebar:hover .brand-link,
.layout-md-navbar-fixed .wrapper.sidebar-collapse .main-sidebar:hover .brand-link,
.layout-lg-navbar-fixed .wrapper.sidebar-collapse .main-sidebar:hover .brand-link,
.layout-xl-navbar-fixed .wrapper.sidebar-collapse .main-sidebar:hover .brand-link {
    width: 4.6rem !important;
    /* Mantener ancho colapsado */
}

/* Desactivar hover para layout-fixed */
.sidebar-mini.sidebar-collapse.layout-fixed .main-sidebar:hover .brand-link {
    width: 4.6rem !important;
    /* Mantener ancho colapsado */
}

/* Desactivar expansión cuando la sidebar está enfocada (sidebar-focused) */
.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused:not(.sidebar-no-expand),
.sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused:not(.sidebar-no-expand),
.sidebar-mini-xs.sidebar-collapse .main-sidebar.sidebar-focused:not(.sidebar-no-expand) {
    width: 4.6rem !important;
    /* Mantener ancho colapsado */
}

.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused:not(.sidebar-no-expand) .brand-link,
.sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused:not(.sidebar-no-expand) .brand-link,
.sidebar-mini-xs.sidebar-collapse .main-sidebar.sidebar-focused:not(.sidebar-no-expand) .brand-link {
    width: 4.6rem !important;
    /* Mantener ancho del brand-link colapsado */
}

/* Desactivar expansión de elementos internos cuando está enfocada */
.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused:not(.sidebar-no-expand) .user-panel,
.sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused:not(.sidebar-no-expand) .user-panel,
.sidebar-mini-xs.sidebar-collapse .main-sidebar.sidebar-focused:not(.sidebar-no-expand) .user-panel {
    text-align: center !important;
    /* Mantener centrado */
}

.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused:not(.sidebar-no-expand) .user-panel .image,
.sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused:not(.sidebar-no-expand) .user-panel .image,
.sidebar-mini-xs.sidebar-collapse .main-sidebar.sidebar-focused:not(.sidebar-no-expand) .user-panel .image {
    float: none !important;
    /* Mantener sin flotar */
}

.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused:not(.sidebar-no-expand) .user-panel>.info,
.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused:not(.sidebar-no-expand) .sidebar .nav-sidebar .nav-link p,
.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused:not(.sidebar-no-expand) .brand-text,
.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused:not(.sidebar-no-expand) .logo-xl,
.sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused:not(.sidebar-no-expand) .user-panel>.info,
.sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused:not(.sidebar-no-expand) .sidebar .nav-sidebar .nav-link p,
.sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused:not(.sidebar-no-expand) .brand-text,
.sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused:not(.sidebar-no-expand) .logo-xl,
.sidebar-mini-xs.sidebar-collapse .main-sidebar.sidebar-focused:not(.sidebar-no-expand) .user-panel>.info,
.sidebar-mini-xs.sidebar-collapse .main-sidebar.sidebar-focused:not(.sidebar-no-expand) .sidebar .nav-sidebar .nav-link p,
.sidebar-mini-xs.sidebar-collapse .main-sidebar.sidebar-focused:not(.sidebar-no-expand) .brand-text,
.sidebar-mini-xs.sidebar-collapse .main-sidebar.sidebar-focused:not(.sidebar-no-expand) .logo-xl {
    display: none !important;
    /* Ocultar texto y elementos que se muestran al expandir */
}

.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused:not(.sidebar-no-expand) .logo-xs,
.sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused:not(.sidebar-no-expand) .logo-xs,
.sidebar-mini-xs.sidebar-collapse .main-sidebar.sidebar-focused:not(.sidebar-no-expand) .logo-xs {
    display: inline-block !important;
    /* Mantener visible el logo pequeño */
    visibility: visible !important;
}

.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused:not(.sidebar-no-expand) .brand-image,
.sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused:not(.sidebar-no-expand) .brand-image,
.sidebar-mini-xs.sidebar-collapse .main-sidebar.sidebar-focused:not(.sidebar-no-expand) .brand-image {
    margin-right: 0 !important;
    /* Sin margen derecho */
}

.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused:not(.sidebar-no-expand) .sidebar-form,
.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused:not(.sidebar-no-expand) .user-panel>.info,
.sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused:not(.sidebar-no-expand) .sidebar-form,
.sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused:not(.sidebar-no-expand) .user-panel>.info,
.sidebar-mini-xs.sidebar-collapse .main-sidebar.sidebar-focused:not(.sidebar-no-expand) .sidebar-form,
.sidebar-mini-xs.sidebar-collapse .main-sidebar.sidebar-focused:not(.sidebar-no-expand) .user-panel>.info {
    display: none !important;
    /* Ocultar formularios y info del usuario */
}

.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused:not(.sidebar-no-expand) .nav-sidebar>.nav-item>.nav-link>span,
.sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused:not(.sidebar-no-expand) .nav-sidebar>.nav-item>.nav-link>span,
.sidebar-mini-xs.sidebar-collapse .main-sidebar.sidebar-focused:not(.sidebar-no-expand) .nav-sidebar>.nav-item>.nav-link>span {
    display: none !important;
    /* Ocultar texto de los enlaces de navegación */
}

/* Desactivar la searchbar (form-control-sidebar) cuando está colapsada */
.sidebar-mini.sidebar-collapse .main-sidebar:not(.sidebar-no-expand) .form-control-sidebar,
.sidebar-mini-md.sidebar-collapse .main-sidebar:not(.sidebar-no-expand) .form-control-sidebar,
.sidebar-mini-xs.sidebar-collapse .main-sidebar:not(.sidebar-no-expand) .form-control-sidebar {
    display: none !important;
    /* Ocultar la searchbar */
}

.sidebar-mini.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover .form-control-sidebar,
.sidebar-mini-md.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover .form-control-sidebar,
.sidebar-mini-xs.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover .form-control-sidebar {
    display: none !important;
    /* Ocultar la searchbar al hacer hover */
}

.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused:not(.sidebar-no-expand) .form-control-sidebar,
.sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused:not(.sidebar-no-expand) .form-control-sidebar,
.sidebar-mini-xs.sidebar-collapse .main-sidebar.sidebar-focused:not(.sidebar-no-expand) .form-control-sidebar {
    display: none !important;
    /* Ocultar la searchbar cuando está enfocada */
}

/* Desactivar elementos relacionados con la searchbar */
.sidebar-mini.sidebar-collapse .main-sidebar:not(.sidebar-no-expand) .form-control-sidebar~.input-group-append,
.sidebar-mini-md.sidebar-collapse .main-sidebar:not(.sidebar-no-expand) .form-control-sidebar~.input-group-append,
.sidebar-mini-xs.sidebar-collapse .main-sidebar:not(.sidebar-no-expand) .form-control-sidebar~.input-group-append {
    display: none !important;
    /* Ocultar botones de la searchbar */
}

.sidebar-mini.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover .form-control-sidebar~.input-group-append,
.sidebar-mini-md.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover .form-control-sidebar~.input-group-append,
.sidebar-mini-xs.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover .form-control-sidebar~.input-group-append {
    display: none !important;
    /* Ocultar botones de la searchbar al hacer hover */
}

.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused:not(.sidebar-no-expand) .form-control-sidebar~.input-group-append,
.sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused:not(.sidebar-no-expand) .form-control-sidebar~.input-group-append,
.sidebar-mini-xs.sidebar-collapse .main-sidebar.sidebar-focused:not(.sidebar-no-expand) .form-control-sidebar~.input-group-append {
    display: none !important;
    /* Ocultar botones de la searchbar cuando está enfocada */
}

/* Desactivar resultados de búsqueda */
.sidebar-mini.sidebar-collapse .main-sidebar:not(.sidebar-no-expand) .sidebar-search-open .sidebar-search-results,
.sidebar-mini-md.sidebar-collapse .main-sidebar:not(.sidebar-no-expand) .sidebar-search-open .sidebar-search-results,
.sidebar-mini-xs.sidebar-collapse .main-sidebar:not(.sidebar-no-expand) .sidebar-search-open .sidebar-search-results {
    display: none !important;
    /* Ocultar resultados de búsqueda */
}

.sidebar-mini.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover .sidebar-search-open .sidebar-search-results,
.sidebar-mini-md.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover .sidebar-search-open .sidebar-search-results,
.sidebar-mini-xs.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover .sidebar-search-open .sidebar-search-results {
    display: none !important;
    /* Ocultar resultados de búsqueda al hacer hover */
}

.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused:not(.sidebar-no-expand) .sidebar-search-open .sidebar-search-results,
.sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused:not(.sidebar-no-expand) .sidebar-search-open .sidebar-search-results,
.sidebar-mini-xs.sidebar-collapse .main-sidebar.sidebar-focused:not(.sidebar-no-expand) .sidebar-search-open .sidebar-search-results {
    display: none !important;
    /* Ocultar resultados de búsqueda cuando está enfocada */
}

.sidebar-collapse.sidebar-mini .main-sidebar .nav-sidebar .nav-link,
.sidebar-collapse.sidebar-mini-md .main-sidebar .nav-sidebar .nav-link,
.sidebar-collapse.sidebar-mini-xs .main-sidebar .nav-sidebar .nav-link {
    width: 95% !important;
}
.nav-sidebar>.nav-item {
    margin-bottom: 0;
    width: 95% !important;
}

.form-control-sidebar {
    background-color: #fff !important;
    color: #1e3a5f !important;
}

.brand-link {
    padding: .8125rem 1.8rem !important;
}


/* Estilos para letras de submenús colapsado - SOLO LETRA SIN CÍRCULO */
.nav-sidebar .nav-item .nav-link .menu-letter {
    display: none;
    font-size: 14px;
    font-weight: bold;
    color: #6c757d;
    margin-left: 5px;
    flex-shrink: 0;
    line-height: 1.2;
    text-align: left;
    /* Sin background, sin border-radius, sin efectos */
}

/* Mostrar letras solo en submenús cuando el sidebar está colapsado */
.sidebar-collapse .nav-sidebar .nav-item .nav-treeview .nav-item .nav-link .menu-letter {
    display: block;
}

/* Ocultar iconos de submenús cuando el sidebar está colapsado */
.sidebar-collapse .nav-sidebar .nav-item .nav-treeview .nav-item .nav-link .nav-icon,
.sidebar-collapse .nav-sidebar .nav-item .nav-treeview .nav-item .nav-link i,
.sidebar-collapse .nav-sidebar .nav-item .nav-treeview .nav-item .nav-link .fas,
.sidebar-collapse .nav-sidebar .nav-item .nav-treeview .nav-item .nav-link .far,
.sidebar-collapse .nav-sidebar .nav-item .nav-treeview .nav-item .nav-link .fab,
.sidebar-collapse .nav-sidebar .nav-item .nav-treeview .nav-item .nav-link .fa,
.sidebar-collapse .nav-sidebar .nav-item .nav-treeview .nav-item .nav-link [class*="fa-"] {
    display: none !important;
}

/* Asegurar que el texto del submenú esté oculto cuando está colapsado */
.sidebar-collapse .nav-sidebar .nav-item .nav-treeview .nav-item .nav-link .nav-link-text {
    display: none;
}

/* Mantener espaciado consistente en submenús colapsados */
.sidebar-collapse .nav-sidebar .nav-item .nav-treeview .nav-item .nav-link {
    padding: 0.5rem 0.75rem !important;
    height: auto !important;
    min-height: 2.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

/* Evitar expansión vertical del sidebar en submenús */
.sidebar-collapse .nav-sidebar .nav-item .nav-treeview {
    max-height: none !important;
    overflow: visible !important;
}

.sidebar-collapse .nav-sidebar .nav-item .nav-treeview .nav-item {
    margin: 0 !important;
    padding: 0 !important;
}

/* Asegurar que las letras mantengan su posición */
.sidebar-collapse .nav-sidebar .nav-item .nav-treeview .nav-item .nav-link .menu-letter {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
}

/* ===== SISTEMA DE TOOLTIPS PARA SIDEBAR COLAPSADO ===== */

/* Asegurar que los elementos del menú tengan posición relativa para los tooltips */
.main-sidebar .nav-sidebar .nav-item > .nav-link,
.main-sidebar .nav-sidebar .nav-item .nav-treeview .nav-item .nav-link {
    position: relative !important;
}

/* RESPONSIVIDAD - Eliminar margen izquierdo en pantallas pequeñas pero mantener sidebar funcional */
@media (max-width: 991px) {
    /* ELIMINAR MARGEN IZQUIERDO EN PANTALLAS PEQUEÑAS */
    .content-wrapper {
        margin-left: 0 !important;
    }
    
    .sidebar-collapse .content-wrapper {
        margin-left: 0 !important;
    }
    
    /* Asegurar que el contenido principal ocupe todo el ancho */
    .main-content {
        margin-left: 0 !important;
    }
    
    .sidebar-collapse .main-content {
        margin-left: 0 !important;
    }
    
    /* Asegurar que todos los contenedores principales no tengan margen izquierdo */
    .wrapper {
        margin-left: 0 !important;
    }
    
    .sidebar-collapse .wrapper {
        margin-left: 0 !important;
    }
    
    /* Asegurar que el contenido de las páginas ocupe todo el ancho */
    .content {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }
    
    .sidebar-collapse .content {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }
    
    /* Asegurar que los contenedores fluidos no tengan margen */
    .container-fluid {
        margin-left: 0 !important;
        padding-left: 15px !important;
    }
    
    .sidebar-collapse .container-fluid {
        margin-left: 0 !important;
        padding-left: 15px !important;
    }
    
    /* Asegurar que el navbar no tenga margen izquierdo */
    .main-header {
        margin-left: 0 !important;
    }
    
    .sidebar-collapse .main-header {
        margin-left: 0 !important;
    }
    
    /* Asegurar que el footer no tenga margen izquierdo */
    .main-footer {
        margin-left: 0 !important;
    }
    
    .sidebar-collapse .main-footer {
        margin-left: 0 !important;
    }
    
    /* Sidebar overlay en pantallas pequeñas - se muestra como overlay */
    .main-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        height: 100vh !important;
        z-index: 99999 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease-in-out !important;
    }
    
    /* Mostrar sidebar cuando se presiona el botón */
    .sidebar-open .main-sidebar {
        transform: translateX(0) !important;
    }
    
    /* Overlay de fondo cuando la sidebar está abierta */
    .sidebar-open::before {
    content: '' !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0, 0, 0, 0.5) !important;
        z-index: 99999 !important;
    }
    
    /* Ocultar tooltips en pantallas pequeñas ya que la sidebar es overlay */
    .main-sidebar .nav-sidebar .nav-item > .nav-link[data-tooltip]:hover::after,
    .main-sidebar .nav-sidebar .nav-item .nav-treeview .nav-item .nav-link[data-tooltip]:hover::after {
        display: none !important;
    }
    
    .main-sidebar .nav-sidebar .nav-item > .nav-link[data-tooltip]:hover::before,
    .main-sidebar .nav-sidebar .nav-item .nav-treeview .nav-item .nav-link[data-tooltip]:hover::before {
        display: none !important;
    }
}

/* TOOLTIPS CSS DESHABILITADOS - Ahora usamos tooltips JavaScript dinámicos */
/* Los tooltips CSS pueden causar conflictos de posicionamiento */
.sidebar-collapse .main-sidebar .nav-sidebar .nav-item > .nav-link[data-tooltip]:hover::after,
.sidebar-collapse .main-sidebar .nav-sidebar .nav-item .nav-treeview .nav-item .nav-link[data-tooltip]:hover::after {
    display: none !important;
}

.sidebar-collapse .main-sidebar .nav-sidebar .nav-item > .nav-link[data-tooltip]:hover::before,
.sidebar-collapse .main-sidebar .nav-sidebar .nav-item .nav-treeview .nav-item .nav-link[data-tooltip]:hover::before {
    display: none !important;
}

/* ANIMACIÓN */
@keyframes tooltipFadeIn {
    from {
        opacity: 0;
        transform: translateY(-50%) translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }
}

/* OCULTAR TOOLTIPS CUANDO EL SIDEBAR ESTÁ EXPANDIDO */
.main-sidebar:not(.sidebar-collapse) .nav-sidebar .nav-item > .nav-link[data-tooltip]:hover::after,
.main-sidebar:not(.sidebar-collapse) .nav-sidebar .nav-item > .nav-link[data-tooltip]:hover::before,
.main-sidebar:not(.sidebar-collapse) .nav-sidebar .nav-item .nav-treeview .nav-item .nav-link[data-tooltip]:hover::after,
.main-sidebar:not(.sidebar-collapse) .nav-sidebar .nav-item .nav-treeview .nav-item .nav-link[data-tooltip]:hover::before {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* TOOLTIPS ALTERNATIVOS DESHABILITADOS - Usamos JavaScript dinámico */
body.sidebar-collapse .main-sidebar .nav-sidebar .nav-item > .nav-link[data-tooltip]:hover::after,
body.sidebar-collapse .main-sidebar .nav-sidebar .nav-item .nav-treeview .nav-item .nav-link[data-tooltip]:hover::after {
    display: none !important;
}

body.sidebar-collapse .main-sidebar .nav-sidebar .nav-item > .nav-link[data-tooltip]:hover::before,
body.sidebar-collapse .main-sidebar .nav-sidebar .nav-item .nav-treeview .nav-item .nav-link[data-tooltip]:hover::before {
    display: none !important;
}

/* ESTILOS PARA PESTAÑAS DEL DRAWER DE FORMULACIONES */
#formulacionesSubTabs .nav-link {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    color: #495057;
    font-weight: 500;
    transition: all 0.3s ease;
    border-radius: 8px 8px 0 0;
    margin-right: 2px;
}

#formulacionesSubTabs .nav-link:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
    color: #212529;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

#formulacionesSubTabs .nav-link.active {
    background-color: #007bff;
    border-color: #007bff;
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0,123,255,0.3);
}

#formulacionesSubTabs .nav-link.active:hover {
    background-color: #0056b3;
    border-color: #0056b3;
    color: #ffffff;
}

#formulacionesSubTabs .nav-link i {
    font-size: 0.9em;
}

#formulacionesSubTabs .badge {
    background-color: rgba(255,255,255,0.2);
    color: inherit;
    font-size: 0.75em;
    padding: 0.25em 0.5em;
}

#formulacionesSubTabs .nav-link.active .badge {
    background-color: rgba(255,255,255,0.3);
    color: #ffffff;
}

/* Estilos para filas anuladas */
.table tbody tr.anulado {
    background-color: #ffebee !important;
    color: #c62828;
}

.table tbody tr.anulado td {
    background-color: #ffebee !important;
    color: #c62828;
    text-decoration: line-through;
    opacity: 0.7;
}

.table tbody tr.anulado .badge {
    background-color: #d32f2f !important;
    color: white;
}

/* DRAWER GLOBAL */



/* Drawer personalizado - Estilos mejorados basados en paciente_header.blade.php */
.custom-drawer {
    width: 40% !important;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.2);
}

@media (min-width: 768px) and (max-width: 1280px) {
    .custom-drawer {
        width: 60% !important;
    }
}

/* Estilos para el header del drawer */
.custom-drawer .offcanvas-header {
    background: #1e3a5f;
    color: white;
    padding: 20px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.custom-drawer .offcanvas-title {
    margin: 0;
    font-weight: 600;
    font-size: 1.2rem;
    color: white;
}

/* Estilos para el botón de cerrar */
.custom-drawer .btn-close {
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
    opacity: 1;
    filter: brightness(0) invert(1);
}

.custom-drawer .btn-close:hover {
    background: rgba(255, 255, 255, 0.1);
    opacity: 1;
}

/* Estilos para el body del drawer */
.custom-drawer .offcanvas-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
    background: #f8f9fa;
    -webkit-overflow-scrolling: touch;
}

/* Prevenir scroll del body cuando el drawer está abierto */
body.drawer-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

/* Estilos para secciones dentro del drawer */
.drawer-section {
    background: white;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.drawer-section h6 {
    font-weight: 600;
    margin-bottom: 10px;
    color: #154360;
    border-bottom: 2px solid #154360;
    padding-bottom: 5px;
}

.drawer-section .info-row {
    margin-bottom: 8px;
    display: flex;
    flex-wrap: wrap;
}

.drawer-section .info-label {
    font-weight: 600;
    color: #495057;
    min-width: 150px;
    margin-right: 10px;
}

.drawer-section .info-value {
    color: #212529;
    flex: 1;
}

.drawer-section .diagnostico-item {
    padding: 8px;
    margin-bottom: 5px;
    background: #f8f9fa;
    border-left: 3px solid #154360;
    border-radius: 4px;
}

.drawer-section .diagnostico-principal {
    background: #e7f3ff;
    border-left-color: #0066cc;
    font-weight: 600;
}

/* Estilos para footer del drawer si existe */
.custom-drawer .drawer-footer {
    padding: 15px 20px;
    background: white;
    border-top: 1px solid #dee2e6;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* Responsive para móviles */
@media (max-width: 768px) {
    .custom-drawer {
        width: 100% !important;
    }
}

#context-menu button {
    display: block;
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    padding: 8px 16px;
    cursor: pointer;
    color: black;
}

#context-menu button:hover {
    background: #f0f0f0;
}

@media (max-width: 991px) {
    #mes-actual {
        font-size: 16px;
    }

    .custom-drawer {
        width: 100% !important;
        /* móvil por defecto */
        max-width: 100vw !important;
    }
}


/* =====================================================================
   PATRONES VISUALES ESTÁNDAR DE LA APLICACIÓN
   Documentados en DESIGN_PATTERNS.md — NO modificar sin actualizar
   también esa referencia.
   ===================================================================== */

/* ---------- Page Header (encabezado superior de cada vista) ---------- */
/* Se "rompe" del .container-fluid (15px) y de section.content (.5rem = 8px)
   para extenderse de borde a borde y pegarse al navbar fijo. */
.page-header {
    background-color: #1e3a5f;
    color: #fff;
    padding: 18px 28px 22px;
    margin: 0 -23px 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    border-bottom: 3px solid #16294a;
    position: relative;
    z-index: 1;
}

/* Cuando se usa .page-header, eliminar cualquier margen/padding heredado
   del content-header vacío de AdminLTE para que el header llegue al navbar. */
.content-wrapper > .content-header:empty,
.content-wrapper > section.content-header:empty {
    display: none !important;
}

.page-header-left { min-width: 0; }

.page-header-breadcrumb {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 4px;
    letter-spacing: 0.2px;
}

/* Cuando el breadcrumb va solo (sin título) destacarlo un poco más */
.page-header-left > .page-header-breadcrumb:only-child {
    font-size: 15px;
    font-weight: 500;
    color: #fff;
    margin-bottom: 0;
    letter-spacing: 0.3px;
}

.page-header-breadcrumb a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
}

.page-header-breadcrumb a:hover {
    color: #fff;
    text-decoration: underline;
}

.page-header-title {
    margin: 0;
    color: #fff;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.2;
}

.page-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* ---------- Botón estándar para acciones del header ---------- */
.btn-page-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background-color: rgba(255, 255, 255, 0.92);
    color: #1e3a5f;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.btn-page-action:hover {
    background-color: #fff;
    color: #1e3a5f;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    text-decoration: none;
}

.btn-page-action i { font-size: 0.85rem; }

/* ---------- Tabla estándar (.app-table) ---------- */
.app-table {
    width: 100%;
    background: #fff;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    font-size: 0.875rem;
}

.app-table thead th {
    background-color: #f3f4f6 !important;
    color: #374151;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: none;
    padding: 12px 14px;
    border-bottom: 1px solid #e5e7eb;
    border-top: none;
    vertical-align: middle;
}

.app-table tbody td {
    padding: 12px 14px;
    border-top: 1px solid #f1f3f5;
    vertical-align: middle;
    color: #374151;
}

.app-table tbody tr:hover { background-color: #f8fafc; }

/* Fila inactiva: tinte rojo pastel suave */
.app-table tbody tr.row-inactive {
    background-color: #fdecee !important;
}

.app-table tbody tr.row-inactive:hover {
    background-color: #fbdde1 !important;
}

/* ---------- Badges pastel (estados) ---------- */
.badge-pastel {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    border: 1px solid transparent;
}

.badge-pastel-success {
    background-color: #d4edda;
    color: #1e7e34;
    border-color: #c3e6cb;
}

.badge-pastel-danger {
    background-color: #f8d7da;
    color: #b02a37;
    border-color: #f1aeb5;
}

.badge-pastel-info {
    background-color: #cfe2ff;
    color: #084298;
    border-color: #b6d4fe;
}

.badge-pastel-warning {
    background-color: #fff3cd;
    color: #856404;
    border-color: #ffeeba;
}

.badge-pastel-secondary {
    background-color: #e9ecef;
    color: #495057;
    border-color: #dee2e6;
}

.badge-pastel-orange {
    background-color: #ffe5cc;
    color: #a85e1f;
    border-color: #f5c89c;
}

.badge-pastel-purple {
    background-color: #e6d6ff;
    color: #5a2a8b;
    border-color: #c8b3f5;
}

.badge-pastel-teal {
    background-color: #d6f5ec;
    color: #1f6b58;
    border-color: #b3e5d4;
}

/* ---------- Botones auxiliares pastel (.btn-pastel-*) ----------
   Para acciones secundarias / utilitarias dentro de un formulario
   (ej. probar consulta, abrir constructor). Reutilizan la paleta
   pastel de los badges para mantener una identidad de "secundario suave".
   No usar para la acción primaria del form — esa lleva .btn-form-primary. */
.btn-pastel-info,
.btn-pastel-warning {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .85rem;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: .85rem;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition: filter .15s ease, box-shadow .15s ease;
}

.btn-pastel-info {
    background-color: #cfe2ff;
    color: #084298;
    border-color: #b6d4fe;
}

.btn-pastel-info:hover,
.btn-pastel-info:focus {
    filter: brightness(.96);
    color: #084298;
    text-decoration: none;
    box-shadow: 0 0 0 2px rgba(8, 66, 152, 0.12);
}

.btn-pastel-warning {
    background-color: #fff3cd;
    color: #856404;
    border-color: #ffeeba;
}

.btn-pastel-warning:hover,
.btn-pastel-warning:focus {
    filter: brightness(.97);
    color: #856404;
    text-decoration: none;
    box-shadow: 0 0 0 2px rgba(133, 100, 4, 0.12);
}

/* ---------- Iconos de acción en tablas (.btn-icon-action) ----------
   Botones cuadrados uniformes, borde azul institucional, ícono azul.
   Tamaño fijo para que todos se vean idénticos sin importar el tag (a/button). */
.btn-icon-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    min-width: 32px;
    flex: 0 0 32px;
    border: 1px solid #1e3a5f;
    background: #fff;
    color: #1e3a5f;
    border-radius: 6px;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    margin: 0 2px 0 0;
    cursor: pointer;
    padding: 0;
    font-size: 0.85rem;
    line-height: 1;
    vertical-align: middle;
}

.btn-icon-action:last-child { margin-right: 0; }

.btn-icon-action i {
    color: inherit;
    font-size: 0.85rem;
    line-height: 1;
}

.btn-icon-action:hover,
.btn-icon-action:focus {
    background: #1e3a5f;
    color: #fff;
    text-decoration: none;
    outline: none;
    box-shadow: 0 1px 3px rgba(30, 58, 95, 0.25);
}

/* Variante destructiva (eliminar): borde e ícono rojos */
.btn-icon-action.btn-icon-danger {
    border-color: #dc2626;
    color: #dc2626;
}

.btn-icon-action.btn-icon-danger:hover,
.btn-icon-action.btn-icon-danger:focus {
    background: #dc2626;
    color: #fff;
    box-shadow: 0 1px 3px rgba(220, 38, 38, 0.3);
}

/* Que el <form> que envuelve un botón de acción no rompa la alineación
   ni añada espacios extra entre íconos. */
.app-table td form,
.app-table td form.d-inline {
    display: inline-flex !important;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}

/* ---------- Texto auxiliar para celdas ---------- */
.app-table .cell-muted { color: #9ca3af; font-style: italic; font-size: 0.8rem; }

/* ---------- Paginación DataTables (alineada a la derecha, azul institucional) ---------- */
.dataTables_wrapper .dataTables_paginate {
    text-align: right !important;
    float: right !important;
    margin: 18px 0 6px !important;
    padding: 0 !important;
}

.dataTables_wrapper .dataTables_paginate .pagination {
    display: inline-flex !important;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
    padding: 0;
}

.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_paginate .paginate_button.page-link,
.dataTables_wrapper .pagination .page-item .page-link {
    color: #fff !important;
    background-color: #1e3a5f !important;
    border: 1px solid #1e3a5f !important;
    border-radius: 6px !important;
    margin: 0 !important;
    padding: 6px 12px !important;
    min-width: 34px;
    text-align: center;
    line-height: 1.25 !important;
    font-weight: 500;
    text-decoration: none !important;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.page-link:hover,
.dataTables_wrapper .pagination .page-item .page-link:hover {
    background-color: #16294a !important;
    color: #fff !important;
    border-color: #16294a !important;
    transform: translateY(-1px);
}

/* Página activa: tono más oscuro y borde resaltado */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current.page-link,
.dataTables_wrapper .pagination .page-item.active .page-link {
    background-color: #16294a !important;
    color: #fff !important;
    border-color: #0d1a30 !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Botones deshabilitados (prev/next en extremos) */
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled.page-link,
.dataTables_wrapper .pagination .page-item.disabled .page-link {
    background-color: #e5e7eb !important;
    color: #9ca3af !important;
    border-color: #e5e7eb !important;
    cursor: not-allowed !important;
    transform: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled.page-link:hover,
.dataTables_wrapper .pagination .page-item.disabled .page-link:hover {
    background-color: #e5e7eb !important;
    color: #9ca3af !important;
    border-color: #e5e7eb !important;
    transform: none !important;
}

/* Outline al hacer focus por accesibilidad pero sin caja Bootstrap fea */
.dataTables_wrapper .dataTables_paginate .paginate_button:focus,
.dataTables_wrapper .pagination .page-link:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(30, 58, 95, 0.25) !important;
}

/* Buscador y selector de longitud (estilo uniforme con el resto) */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.875rem;
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    outline: none;
    border-color: #1e3a5f;
    box-shadow: 0 0 0 2px rgba(30, 58, 95, 0.15);
}

/* "Mostrando N de X" alineado a la izquierda en su propia línea */
.dataTables_wrapper .dataTables_info {
    padding-top: 12px;
    color: #6b7280;
    font-size: 0.8rem;
}

/* ---------- Tarjeta contenedora de formulario (.form-card) ---------- */
.form-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 24px 28px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    margin-bottom: 24px;
}

.form-card .form-label {
    color: #374151;
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 6px;
    letter-spacing: 0.2px;
}

.form-card .form-control,
.form-card .form-select {
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.9rem;
    color: #111827;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-card .form-control:focus,
.form-card .form-select:focus {
    border-color: #1e3a5f;
    box-shadow: 0 0 0 2px rgba(30, 58, 95, 0.18);
    outline: none;
}

.form-card textarea.form-control {
    min-height: 80px;
    resize: vertical;
}

.form-card .form-check-input:checked {
    background-color: #1e3a5f;
    border-color: #1e3a5f;
}

.form-card .form-check-input:focus {
    border-color: #1e3a5f;
    box-shadow: 0 0 0 2px rgba(30, 58, 95, 0.18);
}

.form-card .form-check-label {
    color: #374151;
    font-weight: 500;
    font-size: 0.9rem;
}

/* Espaciado vertical generoso entre filas y campos del formulario.
   Aplica por defecto a cualquier .row dentro de .form-card sin tener
   que repetir g-4 en cada vista. Usamos row-gap (CSS nativo sobre flex)
   en lugar de --bs-gutter-y porque AdminLTE carga BS4 + BS5 y las
   reglas .row > * de BS5 no siempre se aplican consistentemente. */
.form-card .row {
    --bs-gutter-y: 1.5rem;
    row-gap: 1.5rem !important;
}

/* Sección con encabezado interno opcional dentro del form-card */
.form-card-section {
    margin-bottom: 18px;
}

.form-card-section-title {
    color: #1e3a5f;
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid #eef2f7;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* ---------- Pie de acciones del formulario (.form-actions) ---------- */
.form-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding-top: 18px;
    margin-top: 24px;
    border-top: 1px solid #e5e7eb;
}

/* ---------- Botones de formulario ---------- */
.btn-form-primary,
.btn-form-secondary,
.btn-form-danger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 22px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
    border: 1px solid transparent;
    line-height: 1.2;
}

.btn-form-primary {
    background-color: #1e3a5f;
    color: #fff;
    border-color: #1e3a5f;
    box-shadow: 0 1px 3px rgba(30, 58, 95, 0.25);
}

.btn-form-primary:hover,
.btn-form-primary:focus {
    background-color: #16294a;
    border-color: #16294a;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(30, 58, 95, 0.35);
    transform: translateY(-1px);
}

.btn-form-secondary {
    background-color: #fff;
    color: #6b7280;
    border-color: #d1d5db;
}

.btn-form-secondary:hover,
.btn-form-secondary:focus {
    background-color: #f9fafb;
    color: #374151;
    border-color: #9ca3af;
    text-decoration: none;
}

/* Acción destructiva / irreversible (rojo institucional, mismo tono que .btn-icon-danger). */
.btn-form-danger {
    background-color: #dc2626;
    color: #fff;
    border-color: #dc2626;
    box-shadow: 0 1px 3px rgba(220, 38, 38, 0.22);
}

.btn-form-danger:hover,
.btn-form-danger:focus {
    background-color: #b91c1c;
    border-color: #b91c1c;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.32);
    transform: translateY(-1px);
}

.btn-form-primary:disabled,
.btn-form-secondary:disabled,
.btn-form-danger:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Bloque de errores de validación con estética coherente */
.form-errors {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #991b1b;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 18px;
    font-size: 0.875rem;
}

.form-errors ul { margin: 0; padding-left: 18px; }
.form-errors strong { display: block; margin-bottom: 4px; }

/* ---------- Sistema de toasts global (.app-toast) ----------
   Notificaciones flotantes que aparecen arriba a la derecha y se
   auto-cierran. Variantes: success / error / warning / info.
   Se invocan desde JS (window.AppToast) o automáticamente al cargar
   la página leyendo los flashes de sesión inyectados por el middleware
   InjectFlashToasts. */
.app-toast-container {
    position: fixed;
    top: 80px;
    right: 24px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    max-width: 380px;
    width: calc(100% - 48px);
}

.app-toast {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    border-left: 4px solid #6b7280;
    color: #111827;
    font-size: 0.875rem;
    pointer-events: auto;
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.app-toast.show {
    opacity: 1;
    transform: translateX(0);
}

.app-toast-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    font-size: 0.85rem;
}

.app-toast-msg {
    flex: 1;
    line-height: 1.4;
    color: #1f2937;
    word-break: break-word;
}

.app-toast-close {
    border: none;
    background: transparent;
    color: #9ca3af;
    font-size: 1.1rem;
    cursor: pointer;
    line-height: 1;
    padding: 0 2px;
    margin-left: 4px;
    transition: color 0.15s ease;
}

.app-toast-close:hover { color: #374151; }

/* Variantes */
.app-toast.app-toast-success { border-left-color: #16a34a; }
.app-toast.app-toast-success .app-toast-icon { background: #16a34a; }

.app-toast.app-toast-error   { border-left-color: #dc2626; }
.app-toast.app-toast-error   .app-toast-icon { background: #dc2626; }

.app-toast.app-toast-warning { border-left-color: #d97706; }
.app-toast.app-toast-warning .app-toast-icon { background: #d97706; }

.app-toast.app-toast-info    { border-left-color: #1e3a5f; }
.app-toast.app-toast-info    .app-toast-icon { background: #1e3a5f; }

/* ---------- Tarjeta del header del paciente (.paciente-card) ----------
   Card con sombra elevada y avatar circular que cabalga la frontera entre
   .card-header (banda superior) y .card-body — la mitad superior del avatar
   queda sobre el header y la mitad inferior sobre el body. */
.paciente-card {
    position: relative;
    border: none !important;
    border-radius: 12px !important;
    overflow: visible !important;   /* el avatar absoluto necesita salirse del overflow */
    box-shadow:
        0 10px 25px -5px rgba(30, 58, 95, 0.20),
        0 6px 10px -4px rgba(30, 58, 95, 0.10) !important;
    transition: box-shadow 0.2s ease;
}

.paciente-card:hover {
    box-shadow:
        0 14px 32px -6px rgba(30, 58, 95, 0.26),
        0 8px 14px -4px rgba(30, 58, 95, 0.12) !important;
}

.paciente-card > .card-header {
    background-color: #1e3a5f !important;
    color: #fff !important;
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
    padding: 0.55rem 1rem !important;
    border-bottom: none !important;
}

.paciente-card > .card-header,
.paciente-card > .card-header .paciente-tipo-atencion-inner {
    color: rgba(255, 255, 255, 0.92) !important;
}

.paciente-card > .card-header .btn {
    /* botones IHCE / Imprimir sobre el header oscuro */
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
}

.paciente-card > .card-header .btn:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: #fff;
    color: #fff;
}

.paciente-card > .card-body {
    position: relative;
    padding-left: 10.5rem !important;   /* deja espacio al avatar absoluto */
    padding-top: 1.5rem !important;
    border-bottom-left-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
}

/* Avatar absoluto a la izquierda, dentro del card-body (sin solapamiento al header) */
.paciente-card .paciente-avatar-overlap {
    position: absolute;
    top: 1.25rem;
    left: 1.5rem;
    width: 7.5rem;         /* 120px — más grande */
    height: 7.5rem;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    background: #fff;
    box-shadow:
        0 6px 14px -2px rgba(30, 58, 95, 0.30),
        0 2px 4px rgba(0, 0, 0, 0.10);
    z-index: 5;
}

/* Nombre y edad del paciente en azul institucional */
.paciente-card #nombre-paciente {
    color: #1e3a5f !important;
    font-weight: 700;
}

.paciente-card #edad-paciente,
.paciente-card .paciente-info-content > p:nth-of-type(2),
.paciente-card .paciente-info-content > p:nth-of-type(2) b {
    color: #1e3a5f !important;
    font-weight: 600;
}

/* En pantallas muy estrechas: avatar centrado arriba, contenido debajo */
@media (max-width: 575.98px) {
    .paciente-card > .card-body {
        padding-left: 1rem !important;
        padding-top: 9rem !important;
    }
    .paciente-card .paciente-avatar-overlap {
        top: 1rem;
        left: 50%;
        transform: translateX(-50%);
        width: 6rem;
        height: 6rem;
    }
}

/* ---------- Dual Listbox personalizado (.duallist-wrapper) ----------
   Pinta un bootstrap4-duallistbox con apariencia institucional:
   - Header oscuro #1e3a5f con título
   - Body gris claro con dos paneles blancos y columna central con flechas
   - JS asociado (en la vista) mueve los botones de la librería a una
     columna central para conseguir el layout estilo "transfer list". */
.duallist-wrapper {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    border: 1px solid #e5e7eb;
    overflow: hidden;
    margin-bottom: 1rem;
}

.duallist-header {
    background: #1e3a5f;
    color: #fff;
    padding: 0.7rem 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-size: 0.88rem;
}

.duallist-body {
    background: #eef2f7;
    padding: 1.1rem 1.1rem 0.9rem;
}

.duallist-body .bootstrap-duallistbox-container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 14px;
    align-items: stretch;
}

.duallist-body .box1,
.duallist-body .box2 {
    width: 100% !important;
    max-width: none !important;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
}

.duallist-body .duallist-label {
    color: #1e3a5f;
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

.duallist-body .filter {
    border: 1px solid #d1d5db;
    border-radius: 5px;
    padding: 0.38rem 0.6rem;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    width: 100%;
}

.duallist-body .filter:focus {
    border-color: #1e3a5f;
    outline: none;
    box-shadow: 0 0 0 2px rgba(30, 58, 95, 0.15);
}

.duallist-body select[multiple] {
    border: 1px solid #e5e7eb !important;
    border-radius: 5px !important;
    background: #fff;
    flex: 1;
    min-height: 200px !important;
    font-size: 0.85rem;
    padding: 4px;
}

.duallist-body select[multiple] option {
    padding: 4px 8px;
    border-radius: 3px;
}

.duallist-body select[multiple] option:checked {
    background-color: #1e3a5f linear-gradient(0deg, #1e3a5f, #1e3a5f);
    color: #fff;
}

/* Contador "X disponibles" / "X seleccionados" debajo de cada lista */
.duallist-body .info-container {
    margin-top: 0.5rem;
    text-align: left;
    color: #6b7280;
    font-size: 0.75rem;
}

.duallist-body .info-container .info {
    display: inline-block;
    color: inherit;
    background: transparent;
    padding: 0;
}

/* Columna central con los 4 botones de transferencia */
.duallist-body .duallist-middle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 0 4px;
    align-self: center;
}

.duallist-body .duallist-middle .btn {
    width: 42px !important;
    height: 34px !important;
    padding: 0 !important;
    background: #1e3a5f !important;
    color: #fff !important;
    border: 1px solid #1e3a5f !important;
    border-radius: 5px !important;
    font-weight: 700;
    font-size: 0.85rem;
    line-height: 1;
    transition: background-color 0.15s ease, transform 0.1s ease;
}

.duallist-body .duallist-middle .btn:hover {
    background: #16294a !important;
    border-color: #16294a !important;
    transform: translateY(-1px);
}

.duallist-body .duallist-middle .btn:active {
    transform: translateY(0);
}

.duallist-body .duallist-middle .btn:disabled,
.duallist-body .duallist-middle .btn.disabled {
    background: #cbd5e0 !important;
    border-color: #cbd5e0 !important;
    cursor: not-allowed;
    transform: none;
}

/* Esconder el botón "selectall" debajo de la lista (la lib lo crea pero
   con nuestra columna central ya no se necesita) */
.duallist-body .bootstrap-duallistbox-container .buttons {
    display: none !important;
}

/* Responsive — apilar verticalmente en pantallas estrechas */
@media (max-width: 575.98px) {
    .duallist-body .bootstrap-duallistbox-container {
        grid-template-columns: 1fr;
    }
    .duallist-body .duallist-middle {
        flex-direction: row;
        justify-content: center;
    }
}

/* ---------- Editor de texto enriquecido (Summernote auto-init) ----------
   Todo <textarea> se convierte automáticamente en editor (ver
   public/js/rich-text-init.js). Estos estilos alinean Summernote con el
   resto del tema: fondo blanco en la zona de edición, borde gris suave,
   focus azul institucional. Para hacer opt-out en un textarea concreto
   añadir clase `.no-rich-text` o atributo `data-no-rich="true"`. */
.note-editor.note-frame {
    border: 1px solid #d1d5db;
    border-radius: 6px;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.note-editor.note-frame.fullscreen {
    border-radius: 0;
}

.note-editor.note-frame:focus-within {
    border-color: #1e3a5f;
    box-shadow: 0 0 0 2px rgba(30, 58, 95, 0.15);
}

.note-editor.note-frame .note-toolbar {
    background-color: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    padding: 4px 6px;
}

.note-editor.note-frame .note-toolbar .note-btn {
    background-color: transparent;
    border: 1px solid transparent;
    color: #374151;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.note-editor.note-frame .note-toolbar .note-btn:hover {
    background-color: #e5e7eb;
    color: #1e3a5f;
}

.note-editor.note-frame .note-toolbar .note-btn.active,
.note-editor.note-frame .note-toolbar .note-btn:active {
    background-color: #1e3a5f;
    color: #fff;
    border-color: #1e3a5f;
}

.note-editor.note-frame .note-editing-area {
    background-color: #ffffff;
}

.note-editor.note-frame .note-editing-area .note-editable {
    background-color: #ffffff !important;
    color: #111827;
    font-size: 0.9rem;
    line-height: 1.5;
    padding: 10px 12px;
    min-height: 80px;
}

.note-editor.note-frame .note-editing-area .note-editable[contenteditable="false"],
.note-editor.note-frame.note-disabled .note-editing-area .note-editable {
    background-color: #f8f9fa !important;
    color: #6b7280;
    cursor: not-allowed;
}

.note-editor.note-frame .note-statusbar {
    background-color: #f9fafb;
    border-top: 1px solid #e5e7eb;
}

.note-editor.note-frame .note-placeholder {
    color: #9ca3af;
    font-style: italic;
    padding: 10px 12px;
}

.note-editor.note-frame .note-codable {
    background-color: #1f2937;
    color: #e5e7eb;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.85rem;
}

/* ---------- Línea de Tiempo del Paciente (.timeline-card) ----------
   Card oscuro grisáceo-azul a la derecha del header del paciente que
   resume las secciones (Análisis inicial, Historial, Contenido multimedia)
   con ícono + título + bullets + fecha. Cada item es clickeable. */
.timeline-card {
    background: #2d3a52;
    border-radius: 12px !important;
    padding: 1rem 1.1rem 1.1rem;
    color: #fff;
    box-shadow:
        0 10px 25px -5px rgba(30, 58, 95, 0.25),
        0 6px 10px -4px rgba(30, 58, 95, 0.10);
    border: none !important;
    min-height: 100%;
}

.timeline-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #cbd5e0;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    margin-bottom: 0.85rem;
    padding-left: 0.25rem;
}

.timeline-card-header i {
    color: #93c5fd;
    font-size: 0.95rem;
}

/* Item individual */
.timeline-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: #1f2942;
    border-radius: 10px;
    padding: 0.8rem 0.95rem;
    margin-bottom: 0.55rem;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.1s ease;
    position: relative;
}

.timeline-item:last-child { margin-bottom: 0; }

.timeline-item:hover {
    background: #283557;
    transform: translateY(-1px);
}

.timeline-item-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #cbd5e0;
    font-size: 0.9rem;
}

.timeline-item-content {
    flex: 1;
    min-width: 0;
}

.timeline-item-title {
    font-weight: 700;
    color: #ffffff;
    font-size: 0.92rem;
    line-height: 1.25;
    margin: 0 0 0.35rem;
}

.timeline-item-desc {
    margin: 0;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.78rem;
    line-height: 1.4;
}

/* Indicador chevron a la derecha — refuerza la affordance de "clickeable" */
.timeline-item-chevron {
    flex-shrink: 0;
    align-self: center;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.85rem;
    margin-left: 0.5rem;
    transition: transform 0.18s ease, color 0.18s ease;
}

.timeline-item:hover .timeline-item-chevron,
.timeline-item:focus-visible .timeline-item-chevron {
    color: rgba(255, 255, 255, 0.95);
    transform: translateX(4px);
}

.timeline-item:focus-visible {
    outline: 2px solid rgba(147, 197, 253, 0.55);
    outline-offset: 2px;
}

/* ---------- Divisor de sub-sección (.section-divider) ----------
   Título con línea inferior azul que marca el inicio de una sub-sección
   dentro de un card padre, sin necesidad de anidar otra tarjeta.
   Útil para mantener la jerarquía visual sin "tarjetas dentro de tarjetas".

   Si lleva atributo `data-target="#xxx"` se vuelve colapsable: al hacer
   click oculta/muestra el contenedor `.section-content` con ese id. */
.section-divider {
    font-size: 1rem;
    font-weight: 700;
    color: #1e3a5f;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin: 1.75rem 0 1rem;
    padding-bottom: 0.55rem;
    border-bottom: 2px solid #1e3a5f;
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-divider i {
    color: #1e3a5f;
    font-size: 0.95rem;
}

/* Variante colapsable */
.section-divider[data-target] {
    cursor: pointer;
    user-select: none;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.section-divider[data-target]:hover {
    color: #16294a;
    border-bottom-color: #16294a;
}

.section-divider-chevron {
    margin-left: auto;
    font-size: 0.85rem !important;
    transition: transform 0.2s ease;
}

/* Cuando la sección está colapsada, el chevron apunta a la derecha */
.section-divider.collapsed .section-divider-chevron {
    transform: rotate(-90deg);
}

/* Contenedor del contenido colapsable */
.section-content {
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.2s ease, margin 0.3s ease, padding 0.3s ease;
    max-height: 6000px;
    opacity: 1;
}

.section-content.collapsed {
    max-height: 0 !important;
    opacity: 0;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* La primera .section-divider de un contenedor no necesita margen-top
   tan grande (ya hay padding del card padre). */
.card-body > .section-divider:first-child,
.form-card > .section-divider:first-child {
    margin-top: 0.5rem;
}

/* ---------- Preloader (spinner de carga de AdminLTE) ---------- */
/* AdminLTE renderiza <div class="preloader"><img class="..."></div>.
   Sustituimos el logo institucional por nuestro SVG animado y dejamos
   el fondo blanco/gris claro suave para que el spinner sea legible. */
.preloader {
    background-color: #f8fafc !important;
    transition: opacity 0.25s ease !important;
}

.preloader img {
    width: 64px !important;
    height: 64px !important;
    /* anular cualquier animación residual (animation__shake, etc.) que
       AdminLTE pudiera haber aplicado al <img>, porque el SVG ya tiene
       su propia animación interna */
    animation: none !important;
}