/* ==========================================================================
   CLÍNICA ESPAÑA - ESTILOS GLOBALES
   --------------------------------------------------------------------------
   Única fuente de colores, tipografía y componentes del proyecto.
   Paleta monocromática tomada del logo (azules). Los colores de estado
   (éxito / alerta / peligro) se usan SOLO en insignias, alertas y botones
   de acción, nunca como decoración.
   Para cambiar el aspecto del proyecto edita únicamente las variables :root.
   ========================================================================== */

:root {
    color-scheme: light;

    /* ---- Paleta del logo ---- */
    --ce-navy-900: #061C45;
    --ce-navy-800: #0A2A66;
    --ce-navy-700: #0D3B8C;
    --ce-blue-600: #1260B5;
    --ce-blue-500: #1B7FD1;
    --ce-sky-400: #2A9BDD;
    --ce-sky-200: #B9DBF5;
    --ce-sky-100: #DCEEFB;
    --ce-sky-50: #F2F8FD;

    /* ---- Estados (uso restringido) ---- */
    --ce-success: #1E7F5C;
    --ce-success-bg: #DDF3EA;
    --ce-warning: #8A5A00;
    --ce-warning-bg: #FFF1CC;
    --ce-danger: #B3261E;
    --ce-danger-bg: #FADDDA;

    /* ---- Roles ---- */
    --ce-primary: var(--ce-blue-600);
    --ce-primary-hover: var(--ce-navy-700);
    --ce-accent: var(--ce-sky-400);
    --ce-bg: var(--ce-sky-50);
    --ce-surface: #FFFFFF;
    --ce-border: #D3E3F3;

    /* ---- Texto (contraste AA sobre blanco y sobre --ce-bg) ---- */
    --ce-heading: var(--ce-navy-800);     /* títulos y subtítulos  ~12:1 */
    --ce-text: #14284B;                   /* texto base            ~15:1 */
    --ce-text-soft: #3B4F73;              /* texto secundario      ~8:1  */
    --ce-text-muted: #55698C;             /* ayudas, etiquetas     ~5.4:1 */
    --ce-on-dark: #FFFFFF;
    --ce-on-dark-muted: #C6DDF4;

    /* ---- Tipografía ---- */
    --ce-font: 'Source Sans 3', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --ce-fs-base: 1rem;
    --ce-fs-small: .875rem;
    --ce-fw-title: 700;

    /* ---- Sidebar ---- */
    --ce-sidebar-bg: linear-gradient(180deg, var(--ce-navy-800) 0%, var(--ce-navy-900) 100%);
    --ce-sidebar-brand-bg: var(--ce-navy-900);
    --ce-sidebar-hover: rgba(42, 155, 221, .20);
    --ce-sidebar-active-bg: var(--ce-blue-500);

    /* ---- Efectos ---- */
    --ce-radius: 12px;
    --ce-shadow: 0 3px 14px rgba(13, 59, 140, .08);
    --ce-shadow-hover: 0 8px 24px rgba(13, 59, 140, .16);
    --ce-hero-bg: linear-gradient(135deg, var(--ce-navy-800) 0%, var(--ce-blue-600) 100%);

    /* ---- Variables de Bootstrap 5 / AdminLTE 4 ---- */
    --bs-body-bg: var(--ce-bg);
    --bs-body-color: var(--ce-text);
    --bs-secondary-color: var(--ce-text-muted);
    --bs-tertiary-color: var(--ce-text-muted);
    --bs-emphasis-color: var(--ce-heading);
    --bs-heading-color: var(--ce-heading);
    --bs-border-color: var(--ce-border);
    --bs-link-color: var(--ce-primary);
    --bs-link-hover-color: var(--ce-primary-hover);
    --bs-primary: var(--ce-blue-600);
    --bs-primary-rgb: 18, 96, 181;
    --bs-info: var(--ce-sky-400);
    --bs-info-rgb: 42, 155, 221;
    --bs-success: var(--ce-success);
    --bs-warning: #E0A100;
    --bs-danger: var(--ce-danger);
}

/* ---------- Base y tipografía ---------- */
body,
.app-wrapper,
.app-main,
.app-content,
.content-wrapper {
    background-color: var(--ce-bg) !important;
    color: var(--ce-text);
    font-family: var(--ce-font);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.content-header h1 {
    color: var(--ce-heading);
    font-weight: var(--ce-fw-title);
}

p, li, td, label, .form-label {
    color: var(--ce-text);
}

.text-muted,
.text-secondary,
small,
.small {
    color: var(--ce-text-muted) !important;
}

/* El subtítulo bajo el título de página */
.content-header p,
.app-content-header p {
    color: var(--ce-text-soft) !important;
}

a { color: var(--ce-primary); }
a:hover { color: var(--ce-primary-hover); }

/* ---------- Sidebar ---------- */
.app-sidebar,
.main-sidebar {
    background: var(--ce-sidebar-bg) !important;
    color: var(--ce-on-dark) !important;
    box-shadow: 2px 0 14px rgba(6, 28, 69, .25) !important;
}

.app-sidebar .sidebar-wrapper,
.main-sidebar .sidebar {
    background: transparent !important;
}

.app-sidebar .sidebar-brand,
.main-sidebar .brand-link {
    background: var(--ce-sidebar-brand-bg) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .12) !important;
}

.app-sidebar .nav-link,
.app-sidebar .nav-link p,
.app-sidebar .nav-link i,
.app-sidebar .nav-icon,
.main-sidebar .nav-link,
.main-sidebar .nav-link p {
    color: var(--ce-on-dark-muted) !important;
}

.app-sidebar .nav-header,
.main-sidebar .nav-header {
    color: var(--ce-sky-200) !important;
    letter-spacing: .08em;
    font-weight: 700;
}

.app-sidebar .nav-link,
.main-sidebar .nav-link {
    border-radius: 8px;
    transition: background .15s ease, color .15s ease;
}

.app-sidebar .nav-link:hover,
.main-sidebar .nav-link:hover {
    background: var(--ce-sidebar-hover) !important;
}

.app-sidebar .nav-link:hover,
.app-sidebar .nav-link:hover p,
.app-sidebar .nav-link:hover i,
.main-sidebar .nav-link:hover,
.main-sidebar .nav-link:hover p {
    color: var(--ce-on-dark) !important;
}

.app-sidebar .nav-link.active,
.main-sidebar .nav-link.active {
    background: var(--ce-sidebar-active-bg) !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .25);
    font-weight: 600;
}

.app-sidebar .nav-link.active,
.app-sidebar .nav-link.active p,
.app-sidebar .nav-link.active i,
.main-sidebar .nav-link.active,
.main-sidebar .nav-link.active p {
    color: var(--ce-on-dark) !important;
}

/* ---------- Barra superior ---------- */
.app-header,
.main-header,
.navbar {
    background: var(--ce-surface) !important;
    border-bottom: 1px solid var(--ce-border) !important;
}

.app-header .nav-link,
.app-header .navbar-nav .nav-link,
.navbar .nav-link {
    color: var(--ce-heading) !important;
}

.app-header .nav-link:hover,
.navbar .nav-link:hover {
    color: var(--ce-primary) !important;
}

.app-header input::placeholder,
.navbar input::placeholder {
    color: var(--ce-text-muted);
}

/* ---------- Tarjetas ---------- */
.card,
.custom-card {
    background: var(--ce-surface);
    border: 1px solid var(--ce-border);
    border-radius: var(--ce-radius);
    box-shadow: var(--ce-shadow);
    overflow: hidden;
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--ce-border);
    color: var(--ce-heading);
}

.card-primary:not(.card-outline) > .card-header,
.card-header.bg-primary {
    background: var(--ce-hero-bg) !important;
    color: var(--ce-on-dark);
}

.card-primary:not(.card-outline) > .card-header .card-title,
.card-header.bg-primary .card-title {
    color: var(--ce-on-dark);
}

/* ---------- Botones ---------- */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ce-blue-600);
    --bs-btn-border-color: var(--ce-blue-600);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ce-navy-700);
    --bs-btn-hover-border-color: var(--ce-navy-700);
    --bs-btn-active-bg: var(--ce-navy-800);
    --bs-btn-active-border-color: var(--ce-navy-800);
    --bs-btn-disabled-bg: var(--ce-blue-600);
    --bs-btn-disabled-border-color: var(--ce-blue-600);
}

.btn-outline-primary {
    --bs-btn-color: var(--ce-blue-600);
    --bs-btn-border-color: var(--ce-blue-600);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ce-blue-600);
    --bs-btn-hover-border-color: var(--ce-blue-600);
    --bs-btn-active-bg: var(--ce-navy-700);
}

.btn-info,
.btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ce-blue-500);
    --bs-btn-border-color: var(--ce-blue-500);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ce-navy-700);
    --bs-btn-hover-border-color: var(--ce-navy-700);
}

.btn-light {
    --bs-btn-color: var(--ce-navy-800);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #fff;
    --bs-btn-hover-color: var(--ce-navy-800);
    --bs-btn-hover-bg: var(--ce-sky-100);
    --bs-btn-hover-border-color: var(--ce-sky-100);
    font-weight: 600;
}

.btn-success {
    --bs-btn-bg: var(--ce-success);
    --bs-btn-border-color: var(--ce-success);
    --bs-btn-hover-bg: #17664A;
    --bs-btn-hover-border-color: #17664A;
}

.btn-danger {
    --bs-btn-bg: var(--ce-danger);
    --bs-btn-border-color: var(--ce-danger);
    --bs-btn-hover-bg: #8F1E18;
    --bs-btn-hover-border-color: #8F1E18;
}

.btn-warning {
    --bs-btn-color: #3A2600;
    --bs-btn-bg: #F2B418;
    --bs-btn-border-color: #F2B418;
    --bs-btn-hover-color: #3A2600;
    --bs-btn-hover-bg: #D99E0B;
    --bs-btn-hover-border-color: #D99E0B;
}

.bg-primary { background-color: var(--ce-blue-600) !important; color: #fff; }
.bg-info { background-color: var(--ce-blue-500) !important; color: #fff; }
.bg-secondary { background-color: var(--ce-navy-700) !important; color: #fff; }
.bg-success { background-color: var(--ce-success) !important; color: #fff; }
.bg-danger { background-color: var(--ce-danger) !important; color: #fff; }
.bg-warning { background-color: #F2B418 !important; color: #3A2600; }
.text-primary { color: var(--ce-blue-600) !important; }
.text-info { color: var(--ce-blue-500) !important; }
.text-success { color: var(--ce-success) !important; }
.text-warning { color: var(--ce-warning) !important; }
.text-danger { color: var(--ce-danger) !important; }
.border-primary { border-color: var(--ce-blue-600) !important; }

/* ---------- Formularios ---------- */
.form-control,
.form-select {
    color: var(--ce-text);
    background-color: #fff;
    border-color: var(--ce-border);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--ce-sky-400);
    box-shadow: 0 0 0 .2rem rgba(42, 155, 221, .22);
}

.form-control::placeholder { color: var(--ce-text-muted); }

/* ---------- Tablas ---------- */
.table {
    --bs-table-color: var(--ce-text);
    --bs-table-border-color: var(--ce-border);
}

.table thead th {
    background-color: var(--ce-navy-800);
    color: var(--ce-on-dark);
    border-color: var(--ce-navy-700);
    font-size: var(--ce-fs-small);
    text-transform: uppercase;
    letter-spacing: .03em;
}

.table td { vertical-align: middle; }

.table-hover > tbody > tr:hover > * {
    --bs-table-bg-state: var(--ce-sky-100);
}

.page-link { color: var(--ce-blue-600); }
.page-item.active .page-link {
    background-color: var(--ce-blue-600);
    border-color: var(--ce-blue-600);
    color: #fff;
}

/* ---------- Insignias (compatibles con clases Bootstrap 4 y 5) ---------- */
.badge,
.badge-primary, .badge-info, .badge-secondary,
.badge-success, .badge-warning, .badge-danger {
    display: inline-block;
    padding: .38em .7em;
    border-radius: 999px;
    font-weight: 600;
    font-size: .78rem;
}

.badge-primary, .badge-info, .badge.bg-primary, .badge.bg-info {
    background: var(--ce-sky-100) !important;
    color: var(--ce-navy-700) !important;
}
.badge-secondary, .badge.bg-secondary {
    background: #E4EAF3 !important;
    color: var(--ce-text-soft) !important;
}
.badge-success, .badge.bg-success {
    background: var(--ce-success-bg) !important;
    color: var(--ce-success) !important;
}
.badge-warning, .badge.bg-warning {
    background: var(--ce-warning-bg) !important;
    color: var(--ce-warning) !important;
}
.badge-danger, .badge.bg-danger {
    background: var(--ce-danger-bg) !important;
    color: var(--ce-danger) !important;
}

/* ---------- Alertas ---------- */
.alert-success { background: var(--ce-success-bg); color: var(--ce-success); border-color: #B7E3D1; }
.alert-warning { background: var(--ce-warning-bg); color: var(--ce-warning); border-color: #F3DE9C; }
.alert-danger  { background: var(--ce-danger-bg);  color: var(--ce-danger);  border-color: #F2BDB8; }
.alert-info    { background: var(--ce-sky-100);    color: var(--ce-navy-700); border-color: var(--ce-sky-200); }

/* ---------- Info boxes ---------- */
.info-box {
    background: var(--ce-surface) !important;
    color: var(--ce-text) !important;
    border: 1px solid var(--ce-border);
    border-radius: var(--ce-radius);
    box-shadow: var(--ce-shadow) !important;
}

.info-box .info-box-text { color: var(--ce-heading) !important; font-weight: 600; }
.info-box .info-box-number { color: var(--ce-heading) !important; font-weight: 700; }
.info-box .info-box-icon {
    background: var(--ce-hero-bg) !important;
    color: #fff !important;
    border-radius: 10px;
}

/* ---------- Login / registro ---------- */
.login-page,
.register-page {
    background: var(--ce-hero-bg) !important;
}

.login-box .card,
.register-box .card {
    border: 0;
}

/* ==========================================================================
   COMPONENTES DEL PANEL (dashboard)
   ========================================================================== */

/* Utilidades Bootstrap 4 usadas en las vistas */
.mr-1 { margin-right: .25rem; }
.mr-2 { margin-right: .5rem; }
.ml-1 { margin-left: .25rem; }
.ml-2 { margin-left: .5rem; }
.ml-auto { margin-left: auto; }
.text-right { text-align: right; }
.font-weight-bold { font-weight: 700; }
.border-right { border-right: 1px solid var(--ce-border); }

/* Bienvenida */
.welcome-card {
    background: var(--ce-hero-bg);
    border-radius: 16px;
    color: var(--ce-on-dark);
    overflow: hidden;
    box-shadow: 0 6px 22px rgba(10, 42, 102, .22);
}

.welcome-content {
    padding: 30px 35px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.welcome-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--ce-sky-200);
}

.welcome-card h2 {
    color: #fff;
    font-size: 28px;
    margin: 8px 0;
}

.welcome-card p {
    color: #E6F1FC !important;
    margin-bottom: 20px;
}

.welcome-icon {
    font-size: 100px;
    opacity: .15;
    padding-right: 30px;
}

/* Tarjetas de estadísticas */
.stat-card {
    position: relative;
    background: var(--ce-surface);
    border: 1px solid var(--ce-border);
    border-top: 4px solid var(--ce-blue-600);
    border-radius: var(--ce-radius);
    padding: 22px;
    margin-bottom: 25px;
    min-height: 180px;
    overflow: hidden;
    box-shadow: var(--ce-shadow);
    transition: transform .25s ease, box-shadow .25s ease;
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ce-shadow-hover);
}

.stat-icon {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ce-hero-bg);
    color: #fff;
    font-size: 23px;
}

.stat-content span { color: var(--ce-text-soft); font-size: 15px; font-weight: 600; }
.stat-content h2 { color: var(--ce-heading); font-size: 34px; margin: 8px 0; }
.stat-content small { color: var(--ce-text-muted) !important; }

.stat-link { font-weight: 600; color: var(--ce-primary); }

/* Cabecera de tarjetas propias */
.custom-card { margin-bottom: 25px; }

.custom-card-header {
    padding: 20px 22px;
    border-bottom: 1px solid var(--ce-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.custom-card-header h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    color: var(--ce-heading);
}

.custom-card-header p {
    color: var(--ce-text-muted);
    margin: 5px 0 0;
    font-size: 13px;
}

.custom-card-body { padding: 22px; }

/* Módulos */
.module-card {
    display: flex;
    align-items: center;
    padding: 17px;
    background: var(--ce-surface);
    border: 1px solid var(--ce-border);
    border-radius: var(--ce-radius);
    margin-bottom: 15px;
    color: var(--ce-text);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.module-card:hover {
    text-decoration: none;
    transform: translateX(4px);
    border-color: var(--ce-sky-400);
    box-shadow: var(--ce-shadow-hover);
}

/* Todos los iconos de módulo comparten el mismo azul de marca */
.module-icon,
.quick-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ce-hero-bg) !important;
    color: #fff !important;
}

.module-icon {
    min-width: 50px;
    height: 50px;
    border-radius: 10px;
    font-size: 20px;
    margin-right: 15px;
}

.module-card h5 { margin: 0 0 3px; font-weight: 700; color: var(--ce-heading); }
.module-card p { margin: 0; font-size: 13px; color: var(--ce-text-muted); }
.module-arrow { margin-left: auto; color: var(--ce-sky-400); }

/* Acciones rápidas */
.quick-action {
    display: flex;
    align-items: center;
    padding: 13px;
    border-radius: 10px;
    margin-bottom: 12px;
    background: var(--ce-sky-50);
    border: 1px solid var(--ce-border);
    color: var(--ce-heading);
    font-weight: 600;
    transition: background .2s ease, transform .2s ease;
}

.quick-action:hover {
    text-decoration: none;
    background: var(--ce-sky-100);
    transform: translateX(4px);
}

.quick-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    margin-right: 12px;
}

.summary-icon { font-size: 28px; margin-bottom: 8px; color: var(--ce-blue-600) !important; }

/* Pacientes recientes */
.patient-item {
    display: flex;
    align-items: center;
    padding: 12px 5px;
    border-bottom: 1px solid var(--ce-border);
    color: var(--ce-text);
}

.patient-item:last-child { border-bottom: none; }
.patient-item:hover { text-decoration: none; background: var(--ce-sky-50); }

.patient-avatar,
.user-avatar {
    border-radius: 50%;
    background: var(--ce-hero-bg);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.patient-avatar { width: 42px; height: 42px; min-width: 42px; margin-right: 12px; }
.user-avatar { width: 48px; height: 48px; margin-right: 15px; }

.patient-data { display: flex; flex-direction: column; flex: 1; }
.patient-data strong { font-size: 14px; color: var(--ce-heading); }
.patient-data small { color: var(--ce-text-muted); font-size: 12px; }

/* Estados vacíos */
.empty-state { text-align: center; padding: 35px 20px; color: var(--ce-text-muted); }
.empty-state i { font-size: 40px; margin-bottom: 12px; color: var(--ce-sky-200); }

/* Estado del sistema */
.system-status,
.user-info { display: flex; align-items: center; }

.status-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--ce-success-bg);
    color: var(--ce-success);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
}

@media (max-width: 768px) {
    .welcome-content { padding: 25px; }
    .welcome-icon { display: none; }
    .border-right {
        border-right: none;
        border-bottom: 1px solid var(--ce-border);
        padding: 15px;
    }
}


/* ==========================================================================
   REGLA DE CONTRASTE: nunca texto blanco sobre fondo claro
   --------------------------------------------------------------------------
   Si un elemento tiene fondo blanco / claro (bg-white, bg-light, badge-light,
   tarjetas, modales...) su texto usa --ce-text (azul oscuro). El texto blanco
   (--ce-on-dark) solo es válido sobre fondos oscuros o de color sólido
   (bg-primary, btn-primary, sidebar, encabezados azules).
   ========================================================================== */

.bg-white,
.bg-light,
.bg-body,
.bg-body-secondary,
.bg-body-tertiary,
.card,
.modal-body,
.dropdown-menu,
.list-group-item,
.form-control,
.form-select {
    color: var(--ce-text);
}

/* Elementos claros que además llevan text-white: se corrige el texto */
.bg-white.text-white,
.bg-light.text-white,
.bg-body.text-white,
.badge-light.text-white,
.badge.bg-light.text-white,
.badge.text-bg-light.text-white {
    color: var(--ce-text) !important;
}

/* Hijos con text-white dentro de contenedores claros (excepto botones o
   elementos con su propio fondo de color) */
.bg-white .text-white:not([class*="bg-"]):not(.btn),
.bg-light .text-white:not([class*="bg-"]):not(.btn) {
    color: var(--ce-text) !important;
}

/* Insignias claras (p. ej. "Miércoles 08:00 - 17:00" del calendario) */
.badge-light,
.badge.bg-light,
.badge.bg-white,
.badge.text-bg-light,
.badge.badge-white {
    background: var(--ce-surface) !important;
    color: var(--ce-text) !important;
    border: 1px solid var(--ce-border);
}

/* Insignia sin variante de color: fondo suave y texto oscuro */
.badge:not([class*="bg-"]):not([class*="badge-"]):not([class*="text-bg-"]) {
    background: var(--ce-sky-100);
    color: var(--ce-navy-700);
}

/* Selección de texto legible en cualquier fondo */
::selection {
    background: var(--ce-blue-600);
    color: #fff;
}


/* ==========================================================================
   MODO OSCURO
   --------------------------------------------------------------------------
   AdminLTE 4 aplica data-bs-theme="dark" en <html> con el botón del sol.
   Solo se redefinen las variables y los componentes con colores fijos.
   ========================================================================== */

[data-bs-theme="dark"] {
    color-scheme: dark;

    --ce-bg: #0B1426;
    --ce-surface: #13203A;
    --ce-border: #26385C;

    --ce-heading: #E6F0FC;
    --ce-text: #D5E2F5;
    --ce-text-soft: #B3C5E0;
    --ce-text-muted: #93A8C9;
    --ce-on-dark: #FFFFFF;
    --ce-on-dark-muted: #C6DDF4;

    --ce-primary: #5AAEF0;
    --ce-primary-hover: #8CC8F7;
    --ce-shadow: 0 3px 14px rgba(0, 0, 0, .35);
    --ce-shadow-hover: 0 8px 24px rgba(0, 0, 0, .5);

    --ce-success-bg: #12382B;
    --ce-success: #5FD3A5;
    --ce-warning-bg: #3D2F0A;
    --ce-warning: #F2C45A;
    --ce-danger-bg: #3F1714;
    --ce-danger: #FF8F86;

    --bs-body-bg: var(--ce-bg);
    --bs-body-color: var(--ce-text);
    --bs-emphasis-color: var(--ce-heading);
    --bs-heading-color: var(--ce-heading);
    --bs-border-color: var(--ce-border);
    --bs-secondary-color: var(--ce-text-muted);
    --bs-tertiary-color: var(--ce-text-muted);
    --bs-link-color: var(--ce-primary);
    --bs-link-hover-color: var(--ce-primary-hover);
}

/* Superficies */
[data-bs-theme="dark"] .app-header,
[data-bs-theme="dark"] .main-header,
[data-bs-theme="dark"] .navbar,
[data-bs-theme="dark"] .app-footer,
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .dropdown-menu,
[data-bs-theme="dark"] .list-group-item,
[data-bs-theme="dark"] .bg-white,
[data-bs-theme="dark"] .bg-light,
[data-bs-theme="dark"] .bg-body,
[data-bs-theme="dark"] .empty-state {
    background-color: var(--ce-surface) !important;
    color: var(--ce-text);
    border-color: var(--ce-border);
}

[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .card-footer,
[data-bs-theme="dark"] .modal-footer {
    background-color: transparent;
    border-color: var(--ce-border);
}

/* Formularios */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .input-group-text,
[data-bs-theme="dark"] textarea,
[data-bs-theme="dark"] select {
    background-color: #0F1A31;
    color: var(--ce-text);
    border-color: var(--ce-border);
}

[data-bs-theme="dark"] .form-control::placeholder,
[data-bs-theme="dark"] textarea::placeholder {
    color: var(--ce-text-muted);
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background-color: #0F1A31;
    color: var(--ce-text);
    border-color: var(--ce-primary);
}

/* Tablas */
[data-bs-theme="dark"] .table {
    --bs-table-color: var(--ce-text);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--ce-border);
    --bs-table-striped-bg: rgba(255, 255, 255, .03);
    --bs-table-hover-bg: rgba(90, 174, 240, .10);
    --bs-table-bg-state: rgba(90, 174, 240, .10);
    color: var(--ce-text);
}

[data-bs-theme="dark"] .thead-light th,
[data-bs-theme="dark"] .table-light,
[data-bs-theme="dark"] .table-light th {
    background-color: #1A2B4D !important;
    color: var(--ce-heading) !important;
    border-color: var(--ce-border) !important;
}

/* Insignias y alertas */
[data-bs-theme="dark"] .badge-primary,
[data-bs-theme="dark"] .badge-info,
[data-bs-theme="dark"] .badge.bg-primary,
[data-bs-theme="dark"] .badge.bg-info,
[data-bs-theme="dark"] .badge:not([class*="bg-"]):not([class*="badge-"]):not([class*="text-bg-"]) {
    background: #17375F !important;
    color: #9FD0F7 !important;
}

[data-bs-theme="dark"] .badge-secondary,
[data-bs-theme="dark"] .badge.bg-secondary {
    background: #26385C !important;
    color: var(--ce-text-soft) !important;
}

[data-bs-theme="dark"] .badge-light,
[data-bs-theme="dark"] .badge.bg-light,
[data-bs-theme="dark"] .badge.bg-white,
[data-bs-theme="dark"] .badge.text-bg-light {
    background: #1A2B4D !important;
    color: var(--ce-text) !important;
    border-color: var(--ce-border);
}

[data-bs-theme="dark"] .alert-success { border-color: #1E5A44; }
[data-bs-theme="dark"] .alert-warning { border-color: #6B5214; }
[data-bs-theme="dark"] .alert-danger  { border-color: #7A2A25; }
[data-bs-theme="dark"] .alert-info {
    background: #17375F;
    color: #9FD0F7;
    border-color: #1F4B7E;
}

/* Paginación */
[data-bs-theme="dark"] .page-link {
    background-color: var(--ce-surface);
    border-color: var(--ce-border);
    color: var(--ce-primary);
}

/* Botones claros */
[data-bs-theme="dark"] .btn-light,
[data-bs-theme="dark"] .btn-outline-secondary {
    --bs-btn-color: var(--ce-text);
    --bs-btn-bg: #1A2B4D;
    --bs-btn-border-color: var(--ce-border);
    --bs-btn-hover-bg: #26385C;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-border-color: #36507F;
}

/* Textos con utilidades fijas */
[data-bs-theme="dark"] .text-dark,
[data-bs-theme="dark"] .text-body {
    color: var(--ce-text) !important;
}

[data-bs-theme="dark"] .border,
[data-bs-theme="dark"] .border-top,
[data-bs-theme="dark"] .border-bottom,
[data-bs-theme="dark"] hr {
    border-color: var(--ce-border) !important;
}

/* Elementos con fondo azul claro fijo (avatar del médico, pacientes) */
[data-bs-theme="dark"] .doctor-avatar,
[data-bs-theme="dark"] .patient-item:hover {
    background: #17375F;
    color: #9FD0F7;
}

/* Calendario (FullCalendar) */
[data-bs-theme="dark"] .fc {
    --fc-page-bg-color: var(--ce-surface);
    --fc-neutral-bg-color: #1A2B4D;
    --fc-neutral-text-color: var(--ce-text-muted);
    --fc-border-color: var(--ce-border);
    --fc-today-bg-color: rgba(242, 196, 90, .12);
    --fc-list-event-hover-bg-color: #1A2B4D;
    --fc-highlight-color: rgba(90, 174, 240, .18);
    --fc-non-business-color: rgba(0, 0, 0, .25);
    color: var(--ce-text);
}

[data-bs-theme="dark"] .fc .fc-col-header-cell-cushion,
[data-bs-theme="dark"] .fc .fc-timegrid-slot-label-cushion,
[data-bs-theme="dark"] .fc .fc-toolbar-title,
[data-bs-theme="dark"] .fc a {
    color: var(--ce-text);
}


/* ==========================================================================
   NOTIFICACIONES Y PANTALLA DE CARGA (componente global shared/notificaciones)
   --------------------------------------------------------------------------
   Solo usa variables de color de este archivo. El texto va siempre sobre la
   superficie (--ce-surface), por lo que cumple la regla de contraste y sigue
   el modo oscuro automáticamente.
   ========================================================================== */

:root {
    --ce-info: var(--ce-navy-700);
    --ce-info-bg: var(--ce-sky-100);
    --ce-overlay: rgba(6, 28, 69, .45);
}

[data-bs-theme="dark"] {
    --ce-info: #9FD0F7;
    --ce-info-bg: #17375F;
    --ce-overlay: rgba(2, 8, 20, .65);
}

/* ---------- Mensajes ---------- */
.ce-toast-stack {
    position: fixed;
    bottom: 20px;
    right: 16px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(390px, calc(100vw - 32px));
    pointer-events: none;
}

.ce-toast {
    --ce-toast-color: var(--ce-info);
    --ce-toast-bg: var(--ce-info-bg);

    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 40px 16px 14px;
    background: var(--ce-surface);
    color: var(--ce-text);
    border: 1px solid var(--ce-border);
    border-left: 5px solid var(--ce-toast-color);
    border-radius: var(--ce-radius);
    box-shadow: var(--ce-shadow-hover);
    overflow: hidden;
    pointer-events: auto;
    animation: ce-toast-entrada .25s ease-out;
}

.ce-toast--exito { --ce-toast-color: var(--ce-success); --ce-toast-bg: var(--ce-success-bg); }
.ce-toast--error { --ce-toast-color: var(--ce-danger);  --ce-toast-bg: var(--ce-danger-bg); }
.ce-toast--aviso { --ce-toast-color: var(--ce-warning); --ce-toast-bg: var(--ce-warning-bg); }
.ce-toast--info  { --ce-toast-color: var(--ce-info);    --ce-toast-bg: var(--ce-info-bg); }

.ce-toast--saliendo { animation: ce-toast-salida .2s ease-in forwards; }

.ce-toast__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--ce-toast-bg);
    color: var(--ce-toast-color);
    font-size: 1rem;
}

.ce-toast__body { flex: 1 1 auto; min-width: 0; }

.ce-toast__title {
    display: block;
    color: var(--ce-heading);
    font-weight: var(--ce-fw-title);
    line-height: 1.25;
}

.ce-toast__msg {
    margin: 2px 0 0;
    color: var(--ce-text);
    font-size: var(--ce-fs-small);
    overflow-wrap: anywhere;
}

.ce-toast__list {
    margin: 6px 0 0;
    padding-left: 18px;
    color: var(--ce-text);
    font-size: var(--ce-fs-small);
}

.ce-toast__close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ce-text-muted);
    cursor: pointer;
}
.ce-toast__close:hover,
.ce-toast__close:focus-visible {
    background: var(--ce-toast-bg);
    color: var(--ce-toast-color);
    outline: none;
}

.ce-toast__progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background: var(--ce-toast-color);
    transform-origin: left;
    animation-name: ce-toast-progreso;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}
.ce-toast:hover .ce-toast__progress { animation-play-state: paused; }

@keyframes ce-toast-entrada {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes ce-toast-salida {
    to { opacity: 0; transform: translateY(16px); }
}
@keyframes ce-toast-progreso {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

/* ---------- Pantalla de carga ---------- */
.ce-loading {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ce-overlay);
    backdrop-filter: blur(2px);
}
.ce-loading[hidden] { display: none; }

.ce-loading__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    min-width: 200px;
    padding: 26px 34px;
    background: var(--ce-surface);
    border: 1px solid var(--ce-border);
    border-radius: var(--ce-radius);
    box-shadow: var(--ce-shadow-hover);
}

.ce-loading__spinner {
    width: 46px;
    height: 46px;
    border: 4px solid var(--ce-border);
    border-top-color: var(--ce-primary);
    border-radius: 50%;
    animation: ce-giro .8s linear infinite;
}

.ce-loading__text {
    margin: 0;
    color: var(--ce-heading);
    font-weight: 600;
}

html.ce-loading-activo { cursor: progress; }

@keyframes ce-giro { to { transform: rotate(360deg); } }

@media (max-width: 575.98px) {
    .ce-toast-stack { bottom: 16px; right: 16px; left: 16px; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .ce-toast,
    .ce-toast--saliendo { animation: none; }
    .ce-toast__progress { animation: none; display: none; }
    .ce-loading__spinner { animation-duration: 2.4s; }
}


/* ==========================================================================
   BOTONES DE ACCIÓN DE LAS TABLAS (ver / editar / eliminar / imprimir)
   --------------------------------------------------------------------------
   Uso en cualquier tabla (solo icono + title; el title también es el nombre
   accesible):
     <a href="..." class="ce-action ce-action--ver" title="Ver" aria-label="Ver">
         <i class="fas fa-eye"></i>
     </a>
   Variantes: ver, editar, eliminar, imprimir.
   Colores: solo variables de este archivo (modo claro y oscuro).
   En reposo: fondo suave + icono de color. En hover/foco: fondo sólido.
   ========================================================================== */

.ce-action {
    --ce-action-color: var(--ce-info);
    --ce-action-bg: var(--ce-info-bg);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 0 2px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 9px;
    background: var(--ce-action-bg);
    color: var(--ce-action-color);
    font-size: .9rem;
    line-height: 1;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s, transform .1s;
}

.ce-action--ver      { --ce-action-color: var(--ce-primary);  --ce-action-bg: var(--ce-info-bg); }
.ce-action--editar   { --ce-action-color: var(--ce-warning);  --ce-action-bg: var(--ce-warning-bg); }
.ce-action--eliminar { --ce-action-color: var(--ce-danger);   --ce-action-bg: var(--ce-danger-bg); }
.ce-action--imprimir { --ce-action-color: var(--ce-text-soft); --ce-action-bg: var(--ce-sky-50); border-color: var(--ce-border); }

[data-bs-theme="dark"] .ce-action--imprimir { --ce-action-bg: #1A2B4D; }

.ce-action:hover,
.ce-action:focus-visible {
    background: var(--ce-action-color);
    border-color: var(--ce-action-color);
    color: var(--ce-surface);
    text-decoration: none;
    outline: none;
}

.ce-action:focus-visible {
    box-shadow: 0 0 0 3px var(--ce-action-bg), 0 0 0 5px var(--ce-action-color);
}

.ce-action:active { transform: scale(.94); }

.ce-action i { pointer-events: none; }

/* Los formularios de eliminar quedan en línea con el resto de botones */
td form:has(> .ce-action) { display: inline; margin: 0; }

/* Las celdas con acciones no se parten en varias líneas */
td:has(.ce-action) { white-space: nowrap; }

/* Botón con texto dentro de una tabla (p. ej. "Registrar pago") */
td .btn-sm { border-radius: 9px; font-weight: 600; }


/* ==========================================================================
   TARJETAS DE COLOR (small-box): texto claro sobre fondos de color sólido
   --------------------------------------------------------------------------
   Aplica la regla de contraste: texto blanco solo sobre colores oscuros.
   El fondo amarillo (warning) mantiene texto oscuro.
   ========================================================================== */
.small-box.bg-primary,
.small-box.bg-info,
.small-box.bg-success,
.small-box.bg-danger,
.small-box.bg-secondary {
    --ce-on-box: #fff;
}

.small-box.bg-warning {
    --ce-on-box: var(--ce-navy-900);
}

.small-box[class*="bg-"] .inner,
.small-box[class*="bg-"] .inner h3,
.small-box[class*="bg-"] .inner p,
.small-box[class*="bg-"] .small-box-footer {
    color: var(--ce-on-box, inherit) !important;
}

.small-box[class*="bg-"] .small-box-icon,
.small-box[class*="bg-"] .icon {
    color: var(--ce-on-box, inherit);
    opacity: .35;
}

/* En modo oscuro los colores de estado se aclaran: el texto de la tarjeta pasa a oscuro */
[data-bs-theme="dark"] .small-box.bg-success,
[data-bs-theme="dark"] .small-box.bg-danger {
    --ce-on-box: var(--ce-navy-900);
}