/* Modo oscuro - OrfeoMedico (gris carbón con un toque del azul de la marca, no negro: menos duro de noche)
   Se activa con data-bs-theme="dark" en <html> (js/tema.js). Bootstrap 5.3 oscurece sus componentes;
   aquí se redefinen las variables propias de modern.css y lo que llevaba colores fijos. */

[data-bs-theme=dark] {
    --primary: #9cadd4;
    --primary-dark: #a3b2d4;
    --primary-light: #6c7ba0;
    --primary-bg: #3a4560;
    --secondary: #9aa3b2;
    --success: #8fd0b0;
    --success-bg: #2e4339;
    --warning: #e6c38c;
    --warning-bg: #473c2b;
    --danger: #eaa99c;
    --danger-bg: #4b3430;
    --bg-main: #2a2e36;
    --bg-card: #333842;
    --bg-soft: #3a3f4a;
    --text-primary: #e4e7ec;
    --text-secondary: #c2c7d2;
    --text-muted: #a3a9b6;
    --border: #4a505d;
    --border-light: #424854;
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.25);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);

    --bs-body-bg: var(--bg-main);
    --bs-body-color: var(--text-primary);
    --bs-secondary-color: var(--text-secondary);
    --bs-tertiary-bg: var(--bg-soft);
    --bs-border-color: var(--border);
    --bs-card-bg: var(--bg-card);
    color-scheme: dark;
}

[data-bs-theme=dark] body { background: var(--bg-main); color: var(--text-primary); }

/* Tarjetas, modales, tablas y formularios con el fondo de tarjeta */
[data-bs-theme=dark] .card,
[data-bs-theme=dark] .modal-content,
[data-bs-theme=dark] .dropdown-menu,
[data-bs-theme=dark] .list-group-item { background-color: var(--bg-card); color: var(--text-primary); border-color: var(--border); }
[data-bs-theme=dark] .card-header,
[data-bs-theme=dark] .card-footer { background-color: var(--bg-soft); border-color: var(--border); }
[data-bs-theme=dark] .table { --bs-table-bg: transparent; --bs-table-color: var(--text-primary); --bs-table-border-color: var(--border); --bs-table-hover-bg: var(--bg-soft); }
[data-bs-theme=dark] .form-control,
[data-bs-theme=dark] .form-select { background-color: var(--bg-soft); color: var(--text-primary); border-color: var(--border); }
[data-bs-theme=dark] .form-control:disabled,
[data-bs-theme=dark] .form-select:disabled { background-color: #3c414c; color: var(--text-secondary); }
[data-bs-theme=dark] .form-control::placeholder { color: var(--text-muted); }
[data-bs-theme=dark] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
[data-bs-theme=dark] .bg-light { background-color: var(--bg-soft) !important; }
[data-bs-theme=dark] .text-dark { color: var(--text-primary) !important; }
[data-bs-theme=dark] .btn-outline-secondary { color: var(--text-secondary); border-color: var(--border); }
[data-bs-theme=dark] .btn-outline-secondary:hover { background-color: var(--bg-soft); color: var(--text-primary); }
[data-bs-theme=dark] .alert-info { background-color: #2e3c51; color: #c6d8f0; border-color: #3f536d; }
[data-bs-theme=dark] .alert-warning { background-color: #473c2b; color: #f1dab2; border-color: #625036; }
[data-bs-theme=dark] .alert-danger { background-color: #4b3430; color: #f4c9c0; border-color: #67433b; }
[data-bs-theme=dark] .alert-success { background-color: #2e4339; color: #c3e6d2; border-color: #3f5e4d; }

/* Acceso */
[data-bs-theme=dark] .login-page { background-color: #262a31; }

/* Barras de desplazamiento */
[data-bs-theme=dark] ::-webkit-scrollbar-thumb { background: #59606f; }
[data-bs-theme=dark] ::-webkit-scrollbar-thumb:hover { background: #6a7284; }

/* Editor de notas (Quill) */
[data-bs-theme=dark] .ql-toolbar.ql-snow,
[data-bs-theme=dark] .ql-container.ql-snow { border-color: var(--border); }
[data-bs-theme=dark] .ql-snow .ql-stroke { stroke: var(--text-secondary); }
[data-bs-theme=dark] .ql-snow .ql-fill { fill: var(--text-secondary); }
[data-bs-theme=dark] .ql-snow .ql-picker { color: var(--text-secondary); }
[data-bs-theme=dark] .ql-snow .ql-picker-options { background-color: var(--bg-card); }
[data-bs-theme=dark] .ql-editor.ql-blank::before { color: var(--text-muted); }

/* Bloques del calendario y etiquetas con fondo pastel escrito a mano: se invierte la luz conservando el
   tono (fondo oscuro del mismo color y texto claro). No se aplica dentro de otro bloque ya invertido. */
[data-bs-theme=dark] :is([style*="background:#f"], [style*="background: #f"], [style*="background:#e"], [style*="background: #e"], [style*="background:#c"], [style*="background:#d"]):not(:is([style*="background:#f"], [style*="background: #f"], [style*="background:#e"], [style*="background: #e"], [style*="background:#c"], [style*="background:#d"]) *):not(.qr-blanco) {
    filter: invert(0.8) hue-rotate(180deg);
}

/* Calendario: días de otro mes, en un gris un poco más oscuro que la tarjeta (invertido salían verdosos) */
[data-bs-theme=dark] td[style*="background:#fafbfc"] { filter: none !important; background: #2e323b !important; }

/* Correo */
[data-bs-theme=dark] .mail-shell { --o-bg: var(--bg-main); --o-border: var(--border); }
[data-bs-theme=dark] .mail-folders__item:hover,
[data-bs-theme=dark] .mail-item:hover { background: var(--bg-soft); }
[data-bs-theme=dark] .mail-item.selected { background: var(--primary-bg); }
[data-bs-theme=dark] .mail-item,
[data-bs-theme=dark] .mail-list__head,
[data-bs-theme=dark] .mail-reader__head,
[data-bs-theme=dark] .compose-input,
[data-bs-theme=dark] .compose-panel__foot,
[data-bs-theme=dark] .compose-body .ql-toolbar.ql-snow { border-color: var(--border) !important; }
[data-bs-theme=dark] .mail-list__head,
[data-bs-theme=dark] .mail-reader__meta,
[data-bs-theme=dark] .mail-item__date,
[data-bs-theme=dark] .mail-reader__empty { color: var(--text-muted); }
[data-bs-theme=dark] .btn-mail { background: var(--bg-soft); border-color: var(--border); color: var(--text-primary); }
[data-bs-theme=dark] .btn-mail:hover { background: var(--primary-bg); }
[data-bs-theme=dark] .compose-panel { background: var(--bg-card); color: var(--text-primary); }
[data-bs-theme=dark] .compose-input { background: transparent; color: var(--text-primary); }

/* Ayuda */
[data-bs-theme=dark] .ayuda-hero { background-color: #323846; }
[data-bs-theme=dark] .ayuda-sugerencias button { background: var(--bg-soft); }

/* Lo que debe seguir en blanco: el código QR (para que se pueda escanear) y el lector de correo
   (los correos vienen diseñados para fondo blanco) */
[data-bs-theme=dark] .qr-blanco { filter: none !important; background: #fff !important; }
[data-bs-theme=dark] iframe[srcdoc] { background: #fff; color-scheme: light; border-radius: 6px; }