@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

/* ============================================================================
   QUIRU-THEME.CSS  ·  Sistema de diseño canónico — Clínica Quiru+
   Cirujanos Generales y Oncológicos
   ----------------------------------------------------------------------------
   Enlazar SIEMPRE DESPUÉS de bootstrap.min.css en includes/header.php.
   No rompe clases de Bootstrap 5: sobre-escribe tokens (--bs-*) y componentes.

   Tipografía:
     · Plus Jakarta Sans  → marca, títulos, encabezados, stat-cards.
       Geométrica y moderna, hace eco de las mayúsculas del logotipo.
     · Inter              → cuerpo, tablas, formularios, cifras.
       Diseñada para pantalla y datos densos; cifras tabulares nítidas
       (montos, dosis, correlativos) para uso clínico intensivo todo el día.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1) TOKENS
   -------------------------------------------------------------------------- */
:root {
    /* --- Azul de marca (primario) --- */
    --q-blue-50:  #EEF0FB;
    --q-blue-100: #D8DCF4;
    --q-blue-200: #B3BAEB;
    --q-blue-300: #8A95DE;
    --q-blue-400: #5E6CCB;
    --q-blue-500: #3A48B4;
    --q-blue-600: #2A37A6;
    --q-blue-700: #1E2A9C;   /* marca */
    --q-blue-800: #18237E;
    --q-blue-900: #121A5E;

    /* --- Verde médico (acento / acción clínica) --- */
    --q-green-50:  #EAF8F0;
    --q-green-100: #D0F0DE;
    --q-green-200: #A5E4C1;
    --q-green-300: #74D4A0;
    --q-green-400: #4FC684;
    --q-green-500: #3FB871;  /* acento */
    --q-green-600: #2FA15F;
    --q-green-700: #26854E;
    --q-green-800: #20683F;
    --q-green-900: #184E30;

    /* --- Neutros fríos (slate) --- */
    --q-slate-50:  #F6F8FB;
    --q-slate-100: #EEF1F6;
    --q-slate-200: #E2E7EF;
    --q-slate-300: #CBD3DF;
    --q-slate-400: #94A1B2;
    --q-slate-500: #64748B;
    --q-slate-600: #475569;
    --q-slate-700: #334155;
    --q-slate-800: #1E293B;
    --q-slate-900: #0F172A;

    --q-white: #FFFFFF;

    /* --- Roles semánticos --- */
    --q-primary:        var(--q-blue-700);
    --q-primary-hover:  var(--q-blue-800);
    --q-primary-active: var(--q-blue-900);
    --q-accent:         var(--q-green-500);
    --q-accent-hover:   var(--q-green-600);

    /* --- Estados (afinados a la marca, no los defaults crudos) --- */
    --q-success:   #2FA15F;   --q-success-bg: var(--q-green-50);
    --q-warning:   #D98B0A;   --q-warning-bg: #FDF3E0;
    --q-danger:    #D83A4E;   --q-danger-bg:  #FCECEE;
    --q-info:      #0E7FA8;   --q-info-bg:    #E5F4FA;

    /* --- Texto y superficies --- */
    --q-text:        var(--q-slate-800);
    --q-text-soft:   var(--q-slate-500);
    --q-text-faint:  var(--q-slate-400);
    --q-bg:          var(--q-slate-50);
    --q-surface:     var(--q-white);
    --q-border:      var(--q-slate-200);
    --q-border-soft: var(--q-slate-100);

    /* --- Radios --- */
    --q-radius-sm: 6px;
    --q-radius:    10px;
    --q-radius-lg: 14px;
    --q-radius-pill: 999px;

    /* --- Sombras (tintadas con slate/azul, nunca el gris genérico) --- */
    --q-shadow-xs: 0 1px 2px rgba(15, 23, 42, .06);
    --q-shadow-sm: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04);
    --q-shadow:    0 4px 14px rgba(30, 42, 156, .08), 0 1px 3px rgba(15, 23, 42, .06);
    --q-shadow-lg: 0 12px 32px rgba(18, 26, 94, .14), 0 4px 10px rgba(15, 23, 42, .06);
    --q-ring:      0 0 0 .22rem rgba(30, 42, 156, .22);

    /* --- Espaciado base --- */
    --q-space-1: .25rem;
    --q-space-2: .5rem;
    --q-space-3: .75rem;
    --q-space-4: 1rem;
    --q-space-5: 1.5rem;
    --q-space-6: 2rem;

    /* --- Tipografía --- */
    --q-font-ui:      'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --q-font-display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;

    /* --- Puente hacia los tokens de Bootstrap 5.3+ --- */
    --bs-primary:      var(--q-primary);
    --bs-primary-rgb:  30, 42, 156;
    --bs-success:      var(--q-success);
    --bs-success-rgb:  47, 161, 95;
    --bs-danger:       var(--q-danger);
    --bs-danger-rgb:   216, 58, 78;
    --bs-warning:      var(--q-warning);
    --bs-warning-rgb:  217, 139, 10;
    --bs-info:         var(--q-info);
    --bs-info-rgb:     14, 127, 168;
    --bs-link-color:         var(--q-primary);
    --bs-link-color-rgb:     30, 42, 156;
    --bs-link-hover-color:   var(--q-primary-hover);
    --bs-border-color:       var(--q-border);
    --bs-body-color:         var(--q-text);
    --bs-body-bg:            var(--q-bg);
    --bs-body-font-family:   var(--q-font-ui);
    --bs-font-sans-serif:    var(--q-font-ui);
}

/* ----------------------------------------------------------------------------
   2) BASE / TIPOGRAFÍA
   -------------------------------------------------------------------------- */
body {
    background-color: var(--q-bg);
    font-family: var(--q-font-ui);
    color: var(--q-text);
    font-size: .9375rem;        /* 15px: cómodo para jornadas largas */
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--q-font-display);
    font-weight: 700;
    color: var(--q-slate-900);
    letter-spacing: -.01em;
}
h1, .h1 { font-size: 1.75rem; }
h2, .h2 { font-size: 1.4rem; }
h3, .h3 { font-size: 1.2rem; }
h4, .h4 { font-size: 1.05rem; }

a { color: var(--q-primary); text-decoration: none; }
a:hover { color: var(--q-primary-hover); text-decoration: underline; }

.text-muted { color: var(--q-text-soft) !important; }

/* Cifras tabulares para datos clínicos / montos / correlativos */
.table, .stat-card__value, .badge, td, th,
input, .form-control, .form-select,
.dataTables_info, .dt-amount, .num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "cv01" 1;
}

/* Foco de teclado visible y consistente en toda la app (AA) */
:focus-visible {
    outline: 2px solid var(--q-blue-500);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Barra de selección con la marca */
::selection { background: var(--q-blue-200); color: var(--q-blue-900); }

/* ----------------------------------------------------------------------------
   3) SIDEBAR  (rebrand del slate genérico #2c3e50 → azul de marca)
   -------------------------------------------------------------------------- */
.sidebar {
    background: linear-gradient(185deg, var(--q-blue-800) 0%, var(--q-blue-900) 100%) !important;
    box-shadow: 1px 0 0 rgba(255, 255, 255, .04), 4px 0 24px rgba(15, 23, 42, .16) !important;
    width: 250px;
}
.sidebar .sidebar-brand,
.sidebar .brand {
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.sidebar .nav-link {
    color: rgba(255, 255, 255, .82);
    font-weight: 500;
    border-radius: var(--q-radius-sm);
    position: relative;
}
.sidebar .nav-link:hover {
    background-color: rgba(255, 255, 255, .08);
    color: #fff;
}
.sidebar .nav-link.active {
    background-color: rgba(63, 184, 113, .16);   /* verde médico translúcido */
    color: #fff;
    font-weight: 600;
}
.sidebar .nav-link.active::before {
    content: "";
    position: absolute;
    left: 2px; top: 20%; bottom: 20%;
    width: 3px;
    border-radius: var(--q-radius-pill);
    background: var(--q-green-500);            /* acento clínico en el ítem activo */
}
.sidebar .nav-link i { color: inherit; opacity: .92; }
.sidebar .menu-header {
    color: rgba(255, 255, 255, .45);
    font-weight: 600;
    letter-spacing: .08em;
}
.sidebar .submenu .nav-link.active {
    background-color: rgba(255, 255, 255, .07);
}
.sidebar .submenu .nav-link.active::before { top: 30%; bottom: 30%; }

/* ----------------------------------------------------------------------------
   4) NAVBAR SUPERIOR
   -------------------------------------------------------------------------- */
.navbar.bg-white {
    border: 1px solid var(--q-border-soft);
    box-shadow: var(--q-shadow-sm) !important;
}
.navbar .navbar-brand {
    font-family: var(--q-font-display);
    font-weight: 700;
    color: var(--q-slate-900);
}

/* ----------------------------------------------------------------------------
   5) BOTONES
   -------------------------------------------------------------------------- */
.btn {
    --bs-btn-font-family: var(--q-font-ui);
    font-weight: 600;
    border-radius: var(--q-radius-sm);
    letter-spacing: .005em;
    transition: background-color .15s ease, border-color .15s ease,
                box-shadow .15s ease, transform .04s ease;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { box-shadow: var(--q-ring); }

/* Primario = azul de marca (plano, sin el gradiente anterior) */
.btn-primary {
    --bs-btn-bg: var(--q-primary);
    --bs-btn-border-color: var(--q-primary);
    --bs-btn-hover-bg: var(--q-primary-hover);
    --bs-btn-hover-border-color: var(--q-primary-hover);
    --bs-btn-active-bg: var(--q-primary-active);
    --bs-btn-active-border-color: var(--q-primary-active);
    --bs-btn-disabled-bg: var(--q-blue-300);
    --bs-btn-disabled-border-color: var(--q-blue-300);
    background: var(--q-primary);           /* anula gradiente heredado del header */
    border-color: var(--q-primary);
}
.btn-primary:hover { background: var(--q-primary-hover); border-color: var(--q-primary-hover); }

/* Acciones médicas / confirmar = verde */
.btn-success {
    --bs-btn-bg: var(--q-accent);
    --bs-btn-border-color: var(--q-accent);
    --bs-btn-hover-bg: var(--q-accent-hover);
    --bs-btn-hover-border-color: var(--q-accent-hover);
    --bs-btn-active-bg: var(--q-green-700);
    --bs-btn-active-border-color: var(--q-green-700);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
}
.btn-outline-primary {
    --bs-btn-color: var(--q-primary);
    --bs-btn-border-color: var(--q-blue-300);
    --bs-btn-hover-bg: var(--q-primary);
    --bs-btn-hover-border-color: var(--q-primary);
    --bs-btn-active-bg: var(--q-primary-active);
}
.btn-outline-success {
    --bs-btn-color: var(--q-green-700);
    --bs-btn-border-color: var(--q-green-300);
    --bs-btn-hover-bg: var(--q-accent);
    --bs-btn-hover-border-color: var(--q-accent);
}
.btn-danger  { --bs-btn-bg: var(--q-danger);  --bs-btn-border-color: var(--q-danger);  --bs-btn-hover-bg:#C32E42; --bs-btn-hover-border-color:#C32E42; }
.btn-warning { --bs-btn-bg: var(--q-warning); --bs-btn-border-color: var(--q-warning); --bs-btn-color:#fff; --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#C07C06; --bs-btn-hover-border-color:#C07C06; }
.btn-info    { --bs-btn-bg: var(--q-info);    --bs-btn-border-color: var(--q-info);    --bs-btn-color:#fff; --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#0B6B8F; --bs-btn-hover-border-color:#0B6B8F; }
.btn-light   { --bs-btn-bg: var(--q-white); --bs-btn-border-color: var(--q-border); --bs-btn-hover-bg: var(--q-slate-100); --bs-btn-hover-border-color: var(--q-slate-300); }

.btn-outline-secondary {
    --bs-btn-color: var(--q-slate-600);
    --bs-btn-border-color: var(--q-slate-300);
    --bs-btn-hover-bg: var(--q-slate-100);
    --bs-btn-hover-color: var(--q-slate-800);
    --bs-btn-hover-border-color: var(--q-slate-400);
}

/* ----------------------------------------------------------------------------
   6) CARDS  (reemplaza el gradiente del card-header por una cabecera sobria)
   -------------------------------------------------------------------------- */
.card {
    --bs-card-border-color: var(--q-border-soft);
    border: 1px solid var(--q-border-soft);
    border-radius: var(--q-radius);
    box-shadow: var(--q-shadow-sm);
    background: var(--q-surface);
}
.card-header {
    background: var(--q-surface) !important;
    color: var(--q-slate-900) !important;
    font-family: var(--q-font-display);
    font-weight: 700;
    font-size: 1rem;
    border-bottom: 1px solid var(--q-border) !important;
    border-radius: var(--q-radius) var(--q-radius) 0 0 !important;
    padding: var(--q-space-4) var(--q-space-5);
    display: flex;
    align-items: center;
    gap: var(--q-space-2);
}
/* Franja de acento a la izquierda de la cabecera */
.card-header::before {
    content: "";
    width: 4px; height: 1.15em;
    border-radius: var(--q-radius-pill);
    background: var(--q-primary);
}
.card-header i { color: var(--q-primary); }

/* Cabeceras de color explícitas siguen siendo útiles (resumen/alertas) */
.card-header.bg-primary { background: var(--q-primary) !important; color: #fff !important; }
.card-header.bg-success { background: var(--q-accent)  !important; color: #fff !important; }
.card-header.bg-primary::before,
.card-header.bg-success::before,
.card-header.bg-danger::before,
.card-header.bg-warning::before,
.card-header.bg-info::before { background: rgba(255, 255, 255, .7); }
.card-header.bg-primary i,
.card-header.bg-success i { color: #fff; }

/* ----------------------------------------------------------------------------
   7) TABLAS
   -------------------------------------------------------------------------- */
.table {
    --bs-table-color: var(--q-text);
    --bs-table-border-color: var(--q-border-soft);
    vertical-align: middle;
}
.table > thead th,
.table thead th {
    background: var(--q-slate-50);
    color: var(--q-slate-600);
    font-family: var(--q-font-ui);
    font-weight: 600;
    font-size: .78rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--q-border) !important;
    white-space: nowrap;
    padding-top: .7rem;
    padding-bottom: .7rem;
}
.table tbody td { border-bottom-color: var(--q-border-soft); }
.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-bg-type: var(--q-slate-50);        /* zebra sutil */
}
.table-hover > tbody > tr:hover > * {
    --bs-table-bg-state: var(--q-blue-50);
}
/* Rebrand del thead oscuro heredado */
.table thead.table-dark th,
.table > :not(caption) > * > .table-dark {
    background-color: var(--q-blue-800) !important;
    color: #fff !important;
    text-transform: uppercase;
    border-color: var(--q-blue-900) !important;
}

/* ----------------------------------------------------------------------------
   8) FORMULARIOS
   -------------------------------------------------------------------------- */
.form-label { font-weight: 600; color: var(--q-slate-700); font-size: .85rem; margin-bottom: .35rem; }
.form-control, .form-select {
    border-color: var(--q-border);
    border-radius: var(--q-radius-sm);
    color: var(--q-text);
    background-color: var(--q-surface);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control::placeholder { color: var(--q-text-faint); }
.form-control:focus, .form-select:focus {
    border-color: var(--q-blue-400);
    box-shadow: var(--q-ring);
}
.form-control:disabled, .form-select:disabled { background-color: var(--q-slate-100); color: var(--q-text-soft); }
.input-group-text {
    background-color: var(--q-slate-50);
    border-color: var(--q-border);
    color: var(--q-slate-600);
    border-radius: var(--q-radius-sm);
}
.form-check-input:checked { background-color: var(--q-primary); border-color: var(--q-primary); }
.form-check-input:focus { border-color: var(--q-blue-400); box-shadow: var(--q-ring); }
.form-switch .form-check-input:checked { background-color: var(--q-accent); border-color: var(--q-accent); }
.was-validated .form-control:invalid, .form-control.is-invalid { border-color: var(--q-danger); }
.was-validated .form-control:valid, .form-control.is-valid { border-color: var(--q-success); }

/* ----------------------------------------------------------------------------
   9) MODALES
   -------------------------------------------------------------------------- */
.modal-content {
    border: none;
    border-radius: var(--q-radius-lg);
    box-shadow: var(--q-shadow-lg);
    overflow: hidden;
}
.modal-header {
    background: var(--q-surface);
    border-bottom: 1px solid var(--q-border);
    padding: var(--q-space-4) var(--q-space-5);
}
.modal-header .modal-title {
    font-family: var(--q-font-display);
    font-weight: 700;
    color: var(--q-slate-900);
}
.modal-header.bg-primary, .modal-header.bg-success {
    color: #fff;
}
.modal-header.bg-primary { background: var(--q-primary) !important; }
.modal-header.bg-primary .btn-close, .modal-header.bg-success .btn-close { filter: brightness(0) invert(1); }
.modal-footer { border-top: 1px solid var(--q-border-soft); }

/* ----------------------------------------------------------------------------
   10) BADGES  +  estados clínicos
   -------------------------------------------------------------------------- */
.badge { font-weight: 600; letter-spacing: .01em; border-radius: var(--q-radius-sm); padding: .4em .6em; }
.text-bg-primary { background-color: var(--q-primary) !important; }
.text-bg-success { background-color: var(--q-success) !important; }
.badge.bg-primary { background-color: var(--q-primary) !important; }
.badge.bg-success { background-color: var(--q-success) !important; }
.badge.bg-danger  { background-color: var(--q-danger)  !important; }
.badge.bg-warning { background-color: var(--q-warning) !important; color: #fff !important; }
.badge.bg-info    { background-color: var(--q-info)    !important; }

/* Chips de estado clínico — suaves, legibles, con punto indicador */
.q-status {
    display: inline-flex; align-items: center; gap: .4em;
    font-family: var(--q-font-ui);
    font-size: .76rem; font-weight: 600;
    padding: .28em .7em;
    border-radius: var(--q-radius-pill);
    line-height: 1.2;
    border: 1px solid transparent;
}
.q-status::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: currentColor; }
.q-status--programado { color: var(--q-blue-700);  background: var(--q-blue-50);   border-color: var(--q-blue-100); }
.q-status--espera     { color: var(--q-warning);   background: var(--q-warning-bg); border-color: #F6E2BD; }
.q-status--proceso    { color: var(--q-info);      background: var(--q-info-bg);   border-color: #C4E7F2; }
.q-status--atendido   { color: var(--q-green-700); background: var(--q-green-50);  border-color: var(--q-green-100); }
.q-status--alta       { color: var(--q-green-800); background: var(--q-green-100); border-color: var(--q-green-200); }
.q-status--urgente    { color: var(--q-danger);    background: var(--q-danger-bg); border-color: #F4C8CE; }
.q-status--anulado    { color: var(--q-slate-500); background: var(--q-slate-100); border-color: var(--q-slate-200); }

/* ----------------------------------------------------------------------------
   11) ALERTAS
   -------------------------------------------------------------------------- */
.alert { border: 1px solid transparent; border-radius: var(--q-radius); border-left-width: 4px; }
.alert-primary { color: var(--q-blue-900);  background: var(--q-blue-50);   border-color: var(--q-blue-100);  border-left-color: var(--q-primary); }
.alert-success { color: var(--q-green-900); background: var(--q-green-50);  border-color: var(--q-green-100); border-left-color: var(--q-accent); }
.alert-danger  { color: #7A1F2A;            background: var(--q-danger-bg); border-color: #F4C8CE;            border-left-color: var(--q-danger); }
.alert-warning { color: #7A4E07;            background: var(--q-warning-bg);border-color: #F6E2BD;            border-left-color: var(--q-warning); }
.alert-info    { color: #0A5571;            background: var(--q-info-bg);   border-color: #C4E7F2;            border-left-color: var(--q-info); }

/* ----------------------------------------------------------------------------
   12) PESTAÑAS / PÍLDORAS / PAGINACIÓN
   -------------------------------------------------------------------------- */
.nav-tabs {
    --bs-nav-tabs-border-color: var(--q-border);
    border-bottom: 1px solid var(--q-border);
}
.nav-tabs .nav-link {
    color: var(--q-slate-600);
    font-weight: 600;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.nav-tabs .nav-link:hover { color: var(--q-primary); border-bottom-color: var(--q-blue-200); background: transparent; }
.nav-tabs .nav-link.active {
    color: var(--q-primary);
    background: transparent;
    border-bottom-color: var(--q-primary);
}
.nav-pills .nav-link { color: var(--q-slate-600); font-weight: 600; border-radius: var(--q-radius-sm); }
.nav-pills .nav-link.active { background-color: var(--q-primary); color: #fff; }

.page-link { color: var(--q-primary); border-color: var(--q-border); }
.page-link:hover { background: var(--q-blue-50); color: var(--q-primary-hover); border-color: var(--q-blue-200); }
.page-link:focus { box-shadow: var(--q-ring); }
.page-item.active .page-link { background-color: var(--q-primary); border-color: var(--q-primary); }
.page-item.disabled .page-link { color: var(--q-text-faint); }

.dropdown-item.active, .dropdown-item:active { background-color: var(--q-primary); }
.list-group-item.active { background-color: var(--q-primary); border-color: var(--q-primary); }
.progress-bar { background-color: var(--q-primary); }
.spinner-border.text-primary, .text-primary { color: var(--q-primary) !important; }
.bg-primary { background-color: var(--q-primary) !important; }
.bg-success { background-color: var(--q-accent) !important; }
.border-primary { border-color: var(--q-primary) !important; }

/* ----------------------------------------------------------------------------
   13) PLUGINS
   -------------------------------------------------------------------------- */

/* --- DataTables --- */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--q-border);
    border-radius: var(--q-radius-sm);
    padding: .35rem .6rem;
    background: var(--q-surface);
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--q-blue-400); outline: none; box-shadow: var(--q-ring);
}
.dataTables_wrapper .dataTables_info { color: var(--q-text-soft); font-size: .85rem; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: var(--q-radius-sm) !important;
    border: 1px solid transparent !important;
    color: var(--q-primary) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--q-blue-50) !important;
    border-color: var(--q-blue-200) !important;
    color: var(--q-primary-hover) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--q-primary) !important;
    border-color: var(--q-primary) !important;
    color: #fff !important;
}
table.dataTable > thead .sorting:before, table.dataTable > thead .sorting:after,
table.dataTable > thead .sorting_asc:after, table.dataTable > thead .sorting_desc:after { opacity: .4; }
/* Botones de exportación (Buttons) con la marca */
.dt-buttons .dt-button {
    background: var(--q-surface) !important;
    border: 1px solid var(--q-border) !important;
    border-radius: var(--q-radius-sm) !important;
    color: var(--q-slate-700) !important;
    font-weight: 600;
}
.dt-buttons .dt-button:hover { background: var(--q-slate-100) !important; border-color: var(--q-slate-300) !important; }

/* --- Select2 (tema bootstrap-5) --- */
.select2-container--bootstrap-5 .select2-selection {
    border-color: var(--q-border);
    border-radius: var(--q-radius-sm);
    min-height: calc(1.5em + .75rem + 2px);
}
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: var(--q-blue-400);
    box-shadow: var(--q-ring);
}
.select2-container--bootstrap-5 .select2-dropdown { border-color: var(--q-blue-200); border-radius: var(--q-radius-sm); box-shadow: var(--q-shadow); }
.select2-container--bootstrap-5 .select2-results__option--highlighted,
.select2-container--bootstrap-5 .select2-results__option--highlighted[aria-selected] {
    background-color: var(--q-primary) !important; color: #fff !important;
}
.select2-container--bootstrap-5 .select2-results__option--selected { background-color: var(--q-blue-50); color: var(--q-blue-900); }
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
    background-color: var(--q-blue-50);
    border-color: var(--q-blue-200);
    color: var(--q-blue-800);
    border-radius: var(--q-radius-sm);
}

/* --- SweetAlert2 --- */
.swal2-popup { border-radius: var(--q-radius-lg); font-family: var(--q-font-ui); box-shadow: var(--q-shadow-lg); }
.swal2-title { font-family: var(--q-font-display); color: var(--q-slate-900); }
.swal2-html-container { color: var(--q-slate-600); }
.swal2-styled.swal2-confirm {
    background-color: var(--q-primary) !important;
    border-radius: var(--q-radius-sm) !important;
    font-weight: 600;
    box-shadow: none !important;
}
.swal2-styled.swal2-confirm:focus-visible { box-shadow: var(--q-ring) !important; }
.swal2-styled.swal2-deny   { background-color: var(--q-danger) !important; border-radius: var(--q-radius-sm) !important; }
.swal2-styled.swal2-cancel {
    background-color: var(--q-slate-100) !important;
    color: var(--q-slate-700) !important;
    border-radius: var(--q-radius-sm) !important;
    font-weight: 600;
}
.swal2-icon.swal2-success { border-color: var(--q-green-200); color: var(--q-accent); }
.swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: var(--q-accent); }
.swal2-icon.swal2-success .swal2-success-ring { border-color: var(--q-green-200); }
.swal2-icon.swal2-info { border-color: var(--q-info); color: var(--q-info); }
.swal2-icon.swal2-question { border-color: var(--q-blue-300); color: var(--q-primary); }

/* --- Flatpickr --- */
.flatpickr-calendar { border-radius: var(--q-radius); box-shadow: var(--q-shadow-lg); border: 1px solid var(--q-border); }
.flatpickr-months, .flatpickr-month { color: var(--q-slate-800); fill: var(--q-slate-800); }
.flatpickr-current-month .flatpickr-monthDropdown-months, .flatpickr-current-month input.cur-year { font-family: var(--q-font-display); font-weight: 600; }
span.flatpickr-weekday { color: var(--q-slate-500); font-weight: 600; }
.flatpickr-day:hover { background: var(--q-blue-50); border-color: var(--q-blue-50); }
.flatpickr-day.selected, .flatpickr-day.selected:hover {
    background: var(--q-primary); border-color: var(--q-primary); color: #fff;
}
.flatpickr-day.today { border-color: var(--q-green-400); }
.flatpickr-day.today:hover { background: var(--q-green-500); border-color: var(--q-green-500); color: #fff; }
.flatpickr-day.inRange { background: var(--q-blue-50); border-color: var(--q-blue-50); box-shadow: -5px 0 0 var(--q-blue-50), 5px 0 0 var(--q-blue-50); }

/* ----------------------------------------------------------------------------
   14) UTILIDADES DE LA CLÍNICA
   -------------------------------------------------------------------------- */

/* Encabezado de página */
.q-page-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--q-space-4); flex-wrap: wrap;
    margin-bottom: var(--q-space-5);
    padding-bottom: var(--q-space-3);
    border-bottom: 1px solid var(--q-border);
}
.q-page-header__title {
    font-family: var(--q-font-display);
    font-weight: 700; font-size: 1.4rem; margin: 0;
    color: var(--q-slate-900);
    display: flex; align-items: center; gap: .5rem;
}
.q-page-header__title i { color: var(--q-primary); }
.q-page-header__subtitle { color: var(--q-text-soft); font-size: .88rem; margin: .1rem 0 0; }

/* Tarjetas de estadística del dashboard */
.stat-card {
    position: relative;
    background: var(--q-surface);
    border: 1px solid var(--q-border-soft);
    border-radius: var(--q-radius);
    padding: var(--q-space-5);
    box-shadow: var(--q-shadow-sm);
    overflow: hidden;
    transition: box-shadow .18s ease, transform .18s ease;
    height: 100%;
}
.stat-card:hover { box-shadow: var(--q-shadow); transform: translateY(-2px); }
.stat-card::after {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: var(--q-primary);
}
.stat-card__label {
    font-size: .76rem; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: var(--q-text-soft); margin: 0 0 .4rem;
}
.stat-card__value {
    font-family: var(--q-font-display);
    font-size: 2rem; font-weight: 800; line-height: 1;
    color: var(--q-slate-900); margin: 0;
}
.stat-card__meta { font-size: .82rem; color: var(--q-text-soft); margin: .45rem 0 0; display: flex; align-items: center; gap: .3rem; }
.stat-card__icon {
    position: absolute; top: var(--q-space-4); right: var(--q-space-4);
    width: 44px; height: 44px; border-radius: var(--q-radius-sm);
    display: grid; place-items: center;
    background: var(--q-blue-50); color: var(--q-primary); font-size: 1.25rem;
}
.stat-card__trend--up   { color: var(--q-green-600); }
.stat-card__trend--down { color: var(--q-danger); }

/* Variantes de acento por tipo de métrica */
.stat-card--accent::after  { background: var(--q-accent); }
.stat-card--accent .stat-card__icon  { background: var(--q-green-50);  color: var(--q-green-700); }
.stat-card--warning::after { background: var(--q-warning); }
.stat-card--warning .stat-card__icon { background: var(--q-warning-bg); color: var(--q-warning); }
.stat-card--danger::after  { background: var(--q-danger); }
.stat-card--danger .stat-card__icon  { background: var(--q-danger-bg);  color: var(--q-danger); }
.stat-card--info::after    { background: var(--q-info); }
.stat-card--info .stat-card__icon    { background: var(--q-info-bg);    color: var(--q-info); }

/* Texto de marca reutilizable */
.q-text-brand  { color: var(--q-primary) !important; }
.q-text-accent { color: var(--q-green-700) !important; }
.q-bg-brand    { background: var(--q-primary) !important; color: #fff; }
.q-bg-accent   { background: var(--q-accent) !important; color: #fff; }

/* ----------------------------------------------------------------------------
   15) LOGIN  ·  logotipo animado (marca "se dibuja" al cargar)
   Uso sugerido: envolver el <img>/SVG del logo en .q-login-logo.
   -------------------------------------------------------------------------- */
.q-login {
    min-height: 100vh;
    display: grid; place-items: center;
    background:
        radial-gradient(1200px 600px at 15% -10%, rgba(63,184,113,.14), transparent 60%),
        linear-gradient(160deg, var(--q-blue-800) 0%, var(--q-blue-900) 100%);
    padding: var(--q-space-5);
}
.q-login__card {
    width: 100%; max-width: 420px;
    background: var(--q-surface);
    border-radius: var(--q-radius-lg);
    box-shadow: var(--q-shadow-lg);
    padding: clamp(1.5rem, 4vw, 2.5rem);
}
.q-login-logo {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 1rem 1.25rem;
    border-radius: var(--q-radius);
    background: var(--q-blue-700);
    box-shadow: var(--q-shadow);
    animation: q-logo-in .7s cubic-bezier(.2,.7,.2,1) both;
}
.q-login-logo img, .q-login-logo svg { display: block; max-height: 72px; width: auto; }
/* Halo/respiración continua del verde médico alrededor del logo */
.q-login-logo::after {
    content: ""; position: absolute; inset: -6px; border-radius: inherit;
    box-shadow: 0 0 0 0 rgba(63,184,113,.45);
    animation: q-logo-pulse 2.8s ease-out infinite;
    pointer-events: none;
}
.q-login-logo { position: relative; }

@keyframes q-logo-in {
    from { opacity: 0; transform: translateY(10px) scale(.96); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}
@keyframes q-logo-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(63,184,113,.40); }
    70%  { box-shadow: 0 0 0 18px rgba(63,184,113,0); }
    100% { box-shadow: 0 0 0 0   rgba(63,184,113,0); }
}
/* Si el logo se implementa como SVG con trazos, esta clase los "dibuja" */
.q-login-logo--draw path, .q-login-logo--draw line, .q-login-logo--draw polyline {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: q-logo-draw 1.6s ease forwards .25s;
    pathLength: 1;
}
@keyframes q-logo-draw { to { stroke-dashoffset: 0; } }

/* ----------------------------------------------------------------------------
   16) ACCESIBILIDAD — respeta prefers-reduced-motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .q-login-logo::after { animation: none; }
}

/* ----------------------------------------------------------------------------
   17) SCROLLBAR sutil (navegadores WebKit) — coherente con slate
   -------------------------------------------------------------------------- */
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: var(--q-radius-pill); }
.main-content ::-webkit-scrollbar { width: 10px; height: 10px; }
.main-content ::-webkit-scrollbar-thumb { background: var(--q-slate-300); border-radius: var(--q-radius-pill); }
.main-content ::-webkit-scrollbar-thumb:hover { background: var(--q-slate-400); }

/* ============================================================================
   [AUDITORIA 2026-10] CONTRASTE / CONSISTENCIA DE COLOR
   Corrige: titulos h5/h6 y .modal-title ilegibles sobre cabeceras de color,
   sobreuso del slate oscuro (thead.table-dark), y chips/badge warning AA.
   Bloque al final para ganar por orden de origen.
   ============================================================================ */

/* 1) Cabeceras de color: fondo solido + TODO el texto en blanco ------------- */
.card-header.bg-info,     .modal-header.bg-info     { background: var(--q-info)      !important; }
.card-header.bg-danger,   .modal-header.bg-danger   { background: var(--q-danger)    !important; }
.card-header.bg-warning,  .modal-header.bg-warning  { background: var(--q-warning)   !important; }
.card-header.bg-secondary,.modal-header.bg-secondary{ background: var(--q-slate-600) !important; }

.card-header[class*="bg-"]:not(.bg-light):not(.bg-white):not(.bg-transparent):not(.bg-body),
.modal-header[class*="bg-"]:not(.bg-light):not(.bg-white):not(.bg-transparent):not(.bg-body) {
    color: #fff !important;
}
.card-header[class*="bg-"]:not(.bg-light):not(.bg-white):not(.bg-transparent):not(.bg-body) :where(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,.card-title,.modal-title,small,span,i,a,label,strong,b),
.modal-header[class*="bg-"]:not(.bg-light):not(.bg-white):not(.bg-transparent):not(.bg-body) :where(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,.card-title,.modal-title,small,span,i,a,label,strong,b) {
    color: #fff !important;
}
.card-header[class*="bg-"]:not(.bg-light):not(.bg-white):not(.bg-transparent):not(.bg-body) .btn-close,
.modal-header[class*="bg-"]:not(.bg-light):not(.bg-white):not(.bg-transparent):not(.bg-body) .btn-close {
    filter: brightness(0) invert(1);
}
.card-header.bg-secondary::before { background: rgba(255,255,255,.7); }

/* 2) Rebrand del thead oscuro -> encabezado claro del tema (consistencia) --- */
.table thead.table-dark th,
.table > :not(caption) > * > .table-dark {
    background-color: var(--q-slate-50) !important;
    color: var(--q-slate-600) !important;
    border-color: var(--q-border) !important;
    text-transform: uppercase;
}

/* 3) Warning: texto oscuro para pasar contraste AA (blanco sobre ambar fallaba) */
.badge.bg-warning, .text-bg-warning, .badge.text-bg-warning {
    color: var(--q-slate-900) !important;
}