/* =============================================================================
 * Intelli-Dental · modo oscuro del panel
 * -----------------------------------------------------------------------------
 * Los colores del tema (fondo, superficie, texto, borde, acento) los define
 * `ThemePalette::cssPanel()` dentro del `<style>` que inyecta `partials/tema`,
 * en el bloque `html[data-tema="oscuro"]`. Casi todo el panel ya lee de esas
 * variables, así que con cambiarlas se voltea solo.
 *
 * Este archivo es SÓLO para los renglones que quedaron con un blanco o un gris
 * escrito a mano en `app.css`, `admiro.css` y `bloques.css`. Va cargado al
 * final para ganarles por orden, sin `!important`.
 *
 * NO toca el sitio público ni el portal del paciente: ahí manda `site.css` y
 * el paciente no tiene dónde elegir tema.
 *
 * Lo que se imprime SIEMPRE sale claro — al final del archivo.
 * ========================================================================== */

/* `color-scheme` hace la mitad del trabajo gratis: barras de desplazamiento,
   menús nativos de los `<select>`, el calendario de los `<input type=date>` y
   el relleno automático del navegador se vuelven oscuros sin una regla más. */
html[data-tema="oscuro"] { color-scheme: dark; }

html[data-tema="oscuro"],
html[data-tema="oscuro"] body { background: var(--pc-bg); color: var(--pc-text); }

/* --- Superficies que tenían el blanco escrito a mano ---------------------- */
html[data-tema="oscuro"] .account-card,
html[data-tema="oscuro"] .schedule-toolbar,
html[data-tema="oscuro"] .schedule-summary div,
html[data-tema="oscuro"] .day-timeline > li > article,
html[data-tema="oscuro"] .appointment-actions details form,
html[data-tema="oscuro"] .clinical-alerts,
html[data-tema="oscuro"] .signed-note,
html[data-tema="oscuro"] .periodontal-metrics article,
html[data-tema="oscuro"] .decision-receipt,
html[data-tema="oscuro"] .receipt-grid article,
html[data-tema="oscuro"] .billing-metrics article,
html[data-tema="oscuro"] .billing-action form,
html[data-tema="oscuro"] .reverse-payment form,
html[data-tema="oscuro"] .billing-eligible form,
html[data-tema="oscuro"] .quote-card,
html[data-tema="oscuro"] .user-actions-menu > div,
html[data-tema="oscuro"] .callout .button--secondary {
    background: var(--pc-surface);
    border-color: var(--pc-border);
    color: var(--pc-text);
}

/* El odontograma y el periodontograma son dibujos: el diente y la línea media
   se quedan claros a propósito —son la pieza, no el fondo—, pero el borde se
   apaga para que no brillen sobre el oscuro. */
html[data-tema="oscuro"] .tooth-shape,
html[data-tema="oscuro"] .midline span,
html[data-tema="oscuro"] .perio-site.is-empty { border-color: var(--pc-border); }

/* --- Campos de formulario ------------------------------------------------- */
html[data-tema="oscuro"] .stacked-form input,
html[data-tema="oscuro"] .stacked-form select,
html[data-tema="oscuro"] .patient-search input,
html[data-tema="oscuro"] .patient-form input,
html[data-tema="oscuro"] .patient-form select,
html[data-tema="oscuro"] .consent-form input,
html[data-tema="oscuro"] .consent-form select,
html[data-tema="oscuro"] .appointment-form input,
html[data-tema="oscuro"] .appointment-form select,
html[data-tema="oscuro"] .continuity-form input,
html[data-tema="oscuro"] .continuity-form select,
html[data-tema="oscuro"] .clinical-alert select,
html[data-tema="oscuro"] .access-user-tools select,
html[data-tema="oscuro"] .table-search,
html[data-tema="oscuro"] .topbar .context-switcher select,
html[data-tema="oscuro"] .cfg-input,
html[data-tema="oscuro"] input[type="text"],
html[data-tema="oscuro"] input[type="email"],
html[data-tema="oscuro"] input[type="tel"],
html[data-tema="oscuro"] input[type="password"],
html[data-tema="oscuro"] input[type="number"],
html[data-tema="oscuro"] input[type="date"],
html[data-tema="oscuro"] input[type="search"],
html[data-tema="oscuro"] textarea,
html[data-tema="oscuro"] select {
    background: #121821;
    border-color: var(--pc-border);
    color: var(--pc-text);
}

html[data-tema="oscuro"] ::placeholder { color: var(--pc-text-muted); opacity: 1; }

/* --- Banner de encabezado (bloques.css) ----------------------------------- */
/* El degradado del banner ya sale del acento, que en oscuro se aclara; lo que
   hay que apagar es el botón blanco, que sobre el banner oscuro deslumbra. */
html[data-tema="oscuro"] .page-heading .button--primary,
html[data-tema="oscuro"] .access-page-head .button--primary,
html[data-tema="oscuro"] .page-heading .heading-actions .button--secondary:last-child,
html[data-tema="oscuro"] .page-heading .page-heading-actions .button--secondary:last-child {
    background: rgba(255, 255, 255, .92);
    color: #12181f;
}

/* --- Barra lateral y cajón del celular ------------------------------------ */
html[data-tema="oscuro"] .side-menu-btn,
html[data-tema="oscuro"] .side-drawer { background: var(--pc-surface); }
html[data-tema="oscuro"] .side-backdrop { background: rgba(0, 0, 0, .6); }

/* --- Tablas y renglones alternos ------------------------------------------ */
html[data-tema="oscuro"] table tbody tr:nth-child(even),
html[data-tema="oscuro"] .crm-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, .03); }
html[data-tema="oscuro"] thead th { background: var(--pc-surface); color: var(--pc-text); }

/* --- El interruptor de tema ----------------------------------------------- */
.tema-switch {
    display: grid; place-content: center; flex: none;
    width: 38px; height: 38px; padding: 0;
    border: 1px solid rgba(255, 255, 255, .28); border-radius: 12px;
    background: rgba(255, 255, 255, .12); color: #fff;
    cursor: pointer; transition: background .15s, border-color .15s;
}
.tema-switch:hover { background: rgba(255, 255, 255, .22); }
.tema-switch:focus-visible { outline: 0; box-shadow: var(--pc-focus); }
.tema-switch svg { width: 18px; height: 18px; }

/* Se enseña el icono de a DÓNDE vas, no el de dónde estás: en claro se ve la
   luna, que es lo que te vas a llevar si le picas. */
html[data-tema="claro"]  .tema-switch [data-tema-claro],
html[data-tema="oscuro"] .tema-switch [data-tema-oscuro] { display: none; }

/* --- Lo que se imprime SIEMPRE sale claro --------------------------------- */
/* Un recibo, una nota firmada o un ticket acaban en papel: en oscuro saldrían
   con el fondo desperdiciando tinta y la letra clara ilegible. */
@media print {
    html[data-tema="oscuro"] { color-scheme: light; }
    html[data-tema="oscuro"],
    html[data-tema="oscuro"] body,
    html[data-tema="oscuro"] .receipt-page,
    html[data-tema="oscuro"] .signed-note,
    html[data-tema="oscuro"] .decision-receipt,
    html[data-tema="oscuro"] .receipt-grid article {
        background: #fff !important;
        color: #000 !important;
    }
}