/*
 * Modo oscuro de Sanapp.
 * El tema (Bootstrap 5.3 + Minible) ya trae el modo oscuro para sus componentes; este archivo
 * cubre lo que no: colores fijos de Sanapp (base.css, estilos en línea, bloques <style> de las
 * vistas) y librerías externas (select2, FullCalendar, SweetAlert2, DataTables, selector de hora).
 * Se carga al final del <head>. Todo va bajo [data-bs-theme=dark] para no tocar el tema claro.
 */

/* ---------- Controles de apariencia (ambos temas) ---------- */
.ui-choice-group { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ui-choice { position: relative; margin: 0; cursor: pointer; }
.ui-choice input { position: absolute; opacity: 0; pointer-events: none; }
.ui-choice span {
    display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border-radius: 10px;
    border: 1px solid var(--bs-border-color); font-size: 13px; text-align: center; transition: border-color .15s, background .15s;
}
.ui-choice span i { font-size: 20px; }
.ui-choice input:checked + span { border-color: #1428D2; background: rgba(20, 40, 210, .08); color: #1428D2; font-weight: 600; }
.ui-choice input:focus-visible + span { outline: 2px solid #1428D2; outline-offset: 2px; }
.ui-swatch { width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--bs-border-color); display: inline-block; }
.ui-icon-dark { display: none; }
[data-bs-theme=dark] .ui-icon-dark { display: inline-block; }
[data-bs-theme=dark] .ui-icon-light { display: none; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .25s; }
/* Tarjetas de color con .text-white: base.css pinta títulos en azul y párrafos en gris con
   !important y dejaba el texto invisible sobre el fondo de color (en los dos temas). */
.text-white h1, .text-white h2, .text-white h3, .text-white h4, .text-white h5, .text-white h6,
.text-white p, .text-white span, .text-white label, .text-white i { color: #fff !important; }

/* ---------- Paleta del modo oscuro ---------- */
[data-bs-theme=dark] {
    --sanapp-brand: #8c9bff;          /* azul de marca legible sobre fondo oscuro */
    --sanapp-brand-strong: #1428D2;   /* fondos de botones: el azul original */
    --sanapp-surface: #2b2e3b;        /* tarjetas, modales, menús */
    --sanapp-surface-2: #323646;      /* encabezados de tabla, campos de solo lectura */
    --sanapp-border: #3b4054;
    --sanapp-text: #c9ced9;
    --sanapp-muted: #929bb0;
    --bs-link-color: #8c9bff;
    --bs-link-color-rgb: 140, 155, 255;
    --bs-link-hover-color: #b3bdff;
    --bs-link-hover-color-rgb: 179, 189, 255;
}

/* ---------- base.css: títulos azules y texto gris fijo ---------- */
[data-bs-theme=dark] h1, [data-bs-theme=dark] h2, [data-bs-theme=dark] h3,
[data-bs-theme=dark] h4, [data-bs-theme=dark] h5, [data-bs-theme=dark] h6 { color: var(--sanapp-brand); }
[data-bs-theme=dark] p, [data-bs-theme=dark] label, [data-bs-theme=dark] input, [data-bs-theme=dark] li,
[data-bs-theme=dark] td, [data-bs-theme=dark] th, [data-bs-theme=dark] option { color: var(--sanapp-text) !important; }
[data-bs-theme=dark] a:not(.btn):not(.dropdown-item):not(.nav-link):not(.badge) { color: var(--sanapp-brand) !important; }
[data-bs-theme=dark] .text-muted, [data-bs-theme=dark] small.text-muted, [data-bs-theme=dark] .text-secondary { color: var(--sanapp-muted) !important; }
[data-bs-theme=dark] .text-primary { color: var(--sanapp-brand) !important; }
/* dashboard.css y appointments.css ponen .card-title en azul con !important. */
[data-bs-theme=dark] .card-title, [data-bs-theme=dark] h4.card-title, [data-bs-theme=dark] h5.card-title { color: var(--sanapp-brand) !important; }
[data-bs-theme=dark] .text-dark:not(.bg-light):not(.bg-warning):not(.bg-white):not([class*="bg-"]) { color: var(--sanapp-text) !important; }
[data-bs-theme=dark] .text-body, [data-bs-theme=dark] .text-black { color: var(--sanapp-text) !important; }

/* base.css pone todos los <a> en #555 !important: los botones y pestañas que son enlaces
   recuperan el color que les da Bootstrap. */
[data-bs-theme=dark] a.btn { color: var(--bs-btn-color) !important; }
[data-bs-theme=dark] a.btn:hover, [data-bs-theme=dark] a.btn:focus-visible { color: var(--bs-btn-hover-color) !important; }
[data-bs-theme=dark] a.btn.active { color: var(--bs-btn-active-color) !important; }
[data-bs-theme=dark] a.nav-link { color: var(--sanapp-text) !important; }
[data-bs-theme=dark] a.nav-link.active { color: var(--sanapp-brand) !important; }
[data-bs-theme=dark] a.dropdown-item { color: var(--sanapp-text) !important; }
[data-bs-theme=dark] a.dropdown-item:hover { color: #fff !important; }

/* Botones de marca: se mantiene el azul con texto blanco. */
[data-bs-theme=dark] .btn-sanapp, [data-bs-theme=dark] .btn-brand-primary { color: #fff !important; }
[data-bs-theme=dark] .btn-sanapp i, [data-bs-theme=dark] .btn-primary i { color: #fff; }
[data-bs-theme=dark] .btn-outline-primary { --bs-btn-color: var(--sanapp-brand); --bs-btn-border-color: var(--sanapp-brand); --bs-btn-hover-bg: var(--sanapp-brand-strong); --bs-btn-hover-border-color: var(--sanapp-brand-strong); }
[data-bs-theme=dark] .btn-light { --bs-btn-bg: var(--sanapp-surface-2); --bs-btn-border-color: var(--sanapp-border); --bs-btn-color: var(--sanapp-text); --bs-btn-hover-bg: var(--sanapp-border); --bs-btn-hover-color: #fff; }
[data-bs-theme=dark] .btn-outline-secondary, [data-bs-theme=dark] .btn-outline-dark { --bs-btn-color: var(--sanapp-text); --bs-btn-border-color: var(--sanapp-border); }

/* ---------- Superficies con blanco fijo ---------- */
[data-bs-theme=dark] .bg-white,
[data-bs-theme=dark] .card,
[data-bs-theme=dark] .modal-content,
[data-bs-theme=dark] .dropdown-menu,
[data-bs-theme=dark] .offcanvas,
[data-bs-theme=dark] .right-bar,
[data-bs-theme=dark] .list-group-item,
[data-bs-theme=dark] [style*="background-color: #fff"], [data-bs-theme=dark] [style*="background-color:#fff"],
[data-bs-theme=dark] [style*="background: #fff"], [data-bs-theme=dark] [style*="background:#fff"],
[data-bs-theme=dark] [style*="background-color: white"], [data-bs-theme=dark] [style*="background: white"],
[data-bs-theme=dark] [style*="background-color: #ffffff"], [data-bs-theme=dark] [style*="background:#ffffff"],
[data-bs-theme=dark] [style*="background: #ffffff"] {
    background-color: var(--sanapp-surface) !important;
    color: var(--sanapp-text);
}
[data-bs-theme=dark] .card-header, [data-bs-theme=dark] .card-footer, [data-bs-theme=dark] .modal-header, [data-bs-theme=dark] .modal-footer {
    background-color: transparent; border-color: var(--sanapp-border);
}
[data-bs-theme=dark] .bg-light:not(.badge),
[data-bs-theme=dark] .table-light, [data-bs-theme=dark] .table-light > th, [data-bs-theme=dark] .table-light > td,
[data-bs-theme=dark] thead.table-light th,
[data-bs-theme=dark] [style*="background-color: #f8f9fa"], [data-bs-theme=dark] [style*="background:#f8f9fa"], [data-bs-theme=dark] [style*="background: #f8f9fa"],
[data-bs-theme=dark] [style*="background-color: #f5f6f8"], [data-bs-theme=dark] [style*="background: #f5f6f8"],
[data-bs-theme=dark] [style*="background: #f8fafc"], [data-bs-theme=dark] [style*="background:#f8fafc"],
[data-bs-theme=dark] [style*="background-color: #f1f5f9"], [data-bs-theme=dark] [style*="background: #f1f5f9"] {
    background-color: var(--sanapp-surface-2) !important;
    color: var(--sanapp-text) !important;
    --bs-table-bg: var(--sanapp-surface-2);
    --bs-table-color: var(--sanapp-text);
}
[data-bs-theme=dark] .badge.bg-light { background-color: var(--sanapp-surface-2) !important; color: var(--sanapp-text) !important; }
[data-bs-theme=dark] [style*="color: #1428D2"], [data-bs-theme=dark] [style*="color:#1428D2"],
[data-bs-theme=dark] [style*="color: #1428d2"], [data-bs-theme=dark] [style*="color:#1428d2"] { color: var(--sanapp-brand) !important; }
[data-bs-theme=dark] [style*="color: #333"], [data-bs-theme=dark] [style*="color:#333"],
[data-bs-theme=dark] [style*="color: #555"], [data-bs-theme=dark] [style*="color:#555"],
[data-bs-theme=dark] [style*="color: #000"], [data-bs-theme=dark] [style*="color:#000"],
[data-bs-theme=dark] [style*="color: #212529"] { color: var(--sanapp-text) !important; }
[data-bs-theme=dark] hr { border-color: var(--sanapp-border); opacity: 1; }
[data-bs-theme=dark] .border, [data-bs-theme=dark] .border-top, [data-bs-theme=dark] .border-bottom { border-color: var(--sanapp-border) !important; }

/* ---------- Tablas ---------- */
[data-bs-theme=dark] .table { --bs-table-color: var(--sanapp-text); --bs-table-border-color: var(--sanapp-border); --bs-table-striped-bg: rgba(255, 255, 255, .03); --bs-table-hover-bg: rgba(255, 255, 255, .05); }
[data-bs-theme=dark] .table > thead th { color: #e3e6ee !important; }

/* ---------- Formularios ---------- */
/* app.css fuerza fondo blanco con !important en input.form-control, select.form-select y textarea. */
[data-bs-theme=dark] input.form-control, [data-bs-theme=dark] select.form-select, [data-bs-theme=dark] textarea.form-control,
[data-bs-theme=dark] .form-control, [data-bs-theme=dark] .form-select, [data-bs-theme=dark] .input-group-text {
    background-color: #262a36 !important; border-color: var(--sanapp-border) !important; color: var(--sanapp-text) !important;
}
[data-bs-theme=dark] input.form-control:focus, [data-bs-theme=dark] select.form-select:focus, [data-bs-theme=dark] textarea.form-control:focus { border-color: var(--sanapp-brand) !important; color: #fff !important; }
[data-bs-theme=dark] .form-control::placeholder { color: #7d869b; }
[data-bs-theme=dark] .form-control:disabled, [data-bs-theme=dark] input.form-control[readonly]:not(.flatpickr-input):not(#start_time):not(#end_time), [data-bs-theme=dark] .form-select:disabled { background-color: var(--sanapp-surface-2) !important; }
[data-bs-theme=dark] .form-check-input { background-color: #262a36; border-color: #59607a; }
[data-bs-theme=dark] .form-check-input:checked { background-color: var(--sanapp-brand-strong); border-color: var(--sanapp-brand-strong); }

/* ---------- Pestañas y paginación ---------- */
[data-bs-theme=dark] .nav-tabs { border-color: var(--sanapp-border); }
[data-bs-theme=dark] .nav-tabs .nav-link { color: var(--sanapp-muted); }
[data-bs-theme=dark] .nav-tabs .nav-link.active { background-color: var(--sanapp-surface); color: var(--sanapp-brand); border-color: var(--sanapp-border) var(--sanapp-border) var(--sanapp-surface); }
[data-bs-theme=dark] .nav-pills .nav-link:not(.active) { color: var(--sanapp-text); }
[data-bs-theme=dark] .page-link { background-color: var(--sanapp-surface); border-color: var(--sanapp-border); color: var(--sanapp-text); }
[data-bs-theme=dark] .page-item.active .page-link { background-color: var(--sanapp-brand-strong); border-color: var(--sanapp-brand-strong); color: #fff; }

/* ---------- select2 ---------- */
[data-bs-theme=dark] .select2-container--default .select2-selection--single,
[data-bs-theme=dark] .select2-container--default .select2-selection--multiple { background-color: #262a36 !important; border-color: var(--sanapp-border) !important; }
[data-bs-theme=dark] .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--sanapp-text); }
[data-bs-theme=dark] .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #7d869b; }
[data-bs-theme=dark] .select2-dropdown { background-color: var(--sanapp-surface); border-color: var(--sanapp-border); color: var(--sanapp-text); }
[data-bs-theme=dark] .select2-search__field { background-color: #262a36 !important; color: var(--sanapp-text) !important; border-color: var(--sanapp-border) !important; }
[data-bs-theme=dark] .select2-results__option { color: var(--sanapp-text) !important; }
[data-bs-theme=dark] .select2-container--default .select2-results__option--highlighted[aria-selected],
[data-bs-theme=dark] .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background-color: var(--sanapp-brand-strong); color: #fff !important; }
[data-bs-theme=dark] .select2-container--default .select2-results__option[aria-selected=true],
[data-bs-theme=dark] .select2-container--default .select2-results__option--selected { background-color: var(--sanapp-surface-2); }
[data-bs-theme=dark] .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: var(--sanapp-surface-2); border-color: var(--sanapp-border); color: var(--sanapp-text); }

/* ---------- FullCalendar ---------- */
[data-bs-theme=dark] .fc { --fc-border-color: var(--sanapp-border); --fc-page-bg-color: var(--sanapp-surface); --fc-neutral-bg-color: var(--sanapp-surface-2); --fc-today-bg-color: rgba(140, 155, 255, .12); --fc-list-event-hover-bg-color: var(--sanapp-surface-2); }
[data-bs-theme=dark] .fc .fc-col-header-cell, [data-bs-theme=dark] .fc .fc-col-header-cell-cushion,
[data-bs-theme=dark] .fc .fc-daygrid-day-number, [data-bs-theme=dark] .fc .fc-toolbar-title,
[data-bs-theme=dark] .fc .fc-timegrid-slot-label-cushion, [data-bs-theme=dark] .fc .fc-list-day-cushion a { color: var(--sanapp-text) !important; }
[data-bs-theme=dark] .fc .fc-col-header-cell, [data-bs-theme=dark] .fc .fc-list-day-cushion { background-color: var(--sanapp-surface-2) !important; }
[data-bs-theme=dark] .fc .fc-day-other .fc-daygrid-day-number { color: #6b7387 !important; }
/* dashboard.css y appointments.css: botones claros y el día de hoy en blanco, con !important. */
[data-bs-theme=dark] button.fc-button.fc-button-primary { background-color: var(--sanapp-surface-2) !important; border-color: var(--sanapp-border) !important; color: var(--sanapp-text) !important; }
[data-bs-theme=dark] button.fc-button.fc-button-primary:hover { background-color: var(--sanapp-border) !important; color: #fff !important; }
[data-bs-theme=dark] .fc .fc-button-primary:not(:disabled).fc-button-active, [data-bs-theme=dark] .fc .fc-button-primary:not(:disabled):active,
[data-bs-theme=dark] .fc .fc-button-primary:disabled { background-color: var(--sanapp-brand-strong) !important; border-color: var(--sanapp-brand-strong) !important; color: #fff !important; }
[data-bs-theme=dark] .fc .fc-daygrid-day.fc-day-today { background-color: transparent !important; }
[data-bs-theme=dark] .fc-day-today .fc-daygrid-day-frame { background-color: rgba(140, 155, 255, .12) !important; border-color: rgba(140, 155, 255, .45) !important; }
[data-bs-theme=dark] .fc-day-today .fc-daygrid-day-number { color: var(--sanapp-brand) !important; }
[data-bs-theme=dark] a.fc-col-header-cell-cushion, [data-bs-theme=dark] a.fc-daygrid-more-link.fc-more-link { color: var(--sanapp-text) !important; }
[data-bs-theme=dark] .fc-popover { background-color: var(--sanapp-surface) !important; border-color: var(--sanapp-border); }
[data-bs-theme=dark] .fc-popover-header { background-color: var(--sanapp-surface-2) !important; color: var(--sanapp-text); }

/* ---------- SweetAlert2 ---------- */
[data-bs-theme=dark] .swal2-popup { background: var(--sanapp-surface); color: var(--sanapp-text); }
[data-bs-theme=dark] .swal2-title { color: #e8eaf2; }
[data-bs-theme=dark] .swal2-html-container { color: var(--sanapp-text); }
[data-bs-theme=dark] .swal2-input, [data-bs-theme=dark] .swal2-textarea, [data-bs-theme=dark] .swal2-select { background: #262a36; color: var(--sanapp-text); border-color: var(--sanapp-border); }
[data-bs-theme=dark] .swal2-icon.swal2-success [class^=swal2-success-circular-line], [data-bs-theme=dark] .swal2-icon.swal2-success .swal2-success-fix { background-color: var(--sanapp-surface) !important; }

/* ---------- DataTables ---------- */
[data-bs-theme=dark] .dataTables_wrapper .dataTables_length, [data-bs-theme=dark] .dataTables_wrapper .dataTables_filter,
[data-bs-theme=dark] .dataTables_wrapper .dataTables_info, [data-bs-theme=dark] .dataTables_wrapper .dataTables_paginate { color: var(--sanapp-text) !important; }
[data-bs-theme=dark] .dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--sanapp-text) !important; }
[data-bs-theme=dark] .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--sanapp-brand-strong) !important; color: #fff !important; border-color: var(--sanapp-brand-strong) !important; }
[data-bs-theme=dark] table.dataTable tbody tr { background-color: transparent; }
[data-bs-theme=dark] .dataTables_wrapper select, [data-bs-theme=dark] .dataTables_wrapper input { background-color: #262a36; color: var(--sanapp-text); border: 1px solid var(--sanapp-border); }

/* ---------- Selector de hora (mdtimepicker) ---------- */
[data-bs-theme=dark] .mdtp__wrapper, [data-bs-theme=dark] .mdtimepicker .mdtp__wrapper { background: var(--sanapp-surface); }
[data-bs-theme=dark] .mdtp__clock_holder { background: var(--sanapp-surface); }
[data-bs-theme=dark] .mdtp__clock { background: var(--sanapp-surface-2); }
[data-bs-theme=dark] .mdtp__digit span { color: var(--sanapp-text); }
[data-bs-theme=dark] .mdtp__button { color: var(--sanapp-brand); }

/* ---------- Editor de texto (documento de procedimiento) ---------- */
[data-bs-theme=dark] .ql-toolbar, [data-bs-theme=dark] .ql-container { border-color: var(--sanapp-border) !important; }
[data-bs-theme=dark] .ql-toolbar .ql-stroke { stroke: var(--sanapp-text); }
[data-bs-theme=dark] .ql-toolbar .ql-fill { fill: var(--sanapp-text); }
[data-bs-theme=dark] .ql-toolbar .ql-picker { color: var(--sanapp-text); }

/* ---------- Barra superior y menú lateral ---------- */
/* El menú lateral sigue al tema. En oscuro el texto va en blanco: base.css pone todos los <a>
   en #555 y la regla de enlaces de arriba los pondría en azul. */
[data-bs-theme=dark] .vertical-menu, [data-bs-theme=dark] .vertical-menu .navbar-brand-box { background-color: #2b2e3b !important; }
[data-bs-theme=dark] #sidebar-menu ul li a, [data-bs-theme=dark] #sidebar-menu ul li a i,
[data-bs-theme=dark] #sidebar-menu ul li a span { color: rgba(255, 255, 255, .88) !important; }
[data-bs-theme=dark] #sidebar-menu ul li ul.sub-menu li a { color: rgba(255, 255, 255, .72) !important; }
[data-bs-theme=dark] #sidebar-menu ul li a:hover, [data-bs-theme=dark] #sidebar-menu ul li a:hover i,
[data-bs-theme=dark] #sidebar-menu ul li a:hover span { color: #fff !important; }
[data-bs-theme=dark] #sidebar-menu .mm-active > a, [data-bs-theme=dark] #sidebar-menu .mm-active > a i,
[data-bs-theme=dark] #sidebar-menu .mm-active > a span, [data-bs-theme=dark] #sidebar-menu ul li a.active { color: #fff !important; }
[data-bs-theme=dark] #sidebar-menu .mm-active > a { background-color: rgba(255, 255, 255, .08) !important; }
[data-bs-theme=dark] #sidebar-menu .menu-title { color: rgba(255, 255, 255, .5) !important; }
[data-bs-theme=dark] .vertical-menu-btn, [data-bs-theme=dark] .vertical-menu-btn i { color: rgba(255, 255, 255, .8) !important; }
[data-bs-theme=dark] #page-topbar { background-color: #2b2e3b; }
[data-bs-theme=dark] .header-item, [data-bs-theme=dark] .noti-icon i { color: var(--sanapp-text) !important; }
[data-bs-theme=dark] .footer { background-color: transparent; color: var(--sanapp-muted); }
[data-bs-theme=dark] .rightbar-title { background-color: var(--sanapp-surface-2) !important; }
[data-bs-theme=dark] .rightbar-title .right-bar-toggle { background-color: transparent !important; }
[data-bs-theme=dark] .ui-choice input:checked + span { border-color: var(--sanapp-brand); background: rgba(140, 155, 255, .12); color: var(--sanapp-brand); }