/* TEMA CLARO DEL PANEL ("fondo blanco").
 *
 * El tema oscuro es el de siempre y sigue siendo el que se ve por defecto: este
 * archivo solo cambia algo cuando <html> lleva data-theme="light", que se pone
 * unicamente si la persona toca el boton "Fondo blanco" de la barra de arriba.
 * Si este archivo no cargara, el panel se ve exactamente como antes.
 *
 * POR QUE SOBRE-ESCRIBIR Y NO REEMPLAZAR LOS COLORES. Los otros cinco archivos de
 * estilo tienen unos 170 colores escritos a mano. Pasarlos todos a variables seria
 * tocar lo que hoy anda para cambiar lo que hoy no se ve. Aca cada regla oscura
 * tiene su par claro, con mayor especificidad, y el orden de carga no importa.
 *
 * EL DORADO. --lime (#d6ad4b) se usa para RELLENOS (botones) y tambien para TEXTO
 * (etiquetas, numeros, solapa activa). Como relleno sirve en los dos fondos; como
 * texto sobre blanco no se lee (contraste ~2,2:1). Por eso los textos en dorado
 * pasan a --gold-text (#7f6727, el mismo tono que ya usa la app en fondo claro,
 * contraste ~5,6:1 sobre blanco) y los rellenos quedan como estan.
 */

/* ---- siempre (los dos temas): el boton y su lugar en la barra ---- */
.topbar-actions { display: flex; align-items: center; gap: 10px; }
#theme-toggle { padding: 10px 14px; font-size: 0.82rem; white-space: nowrap; }

/* ---- solo tema claro ---- */
:root[data-theme="light"] {
  color-scheme: light;
  color: #171715;
  background: #f6f4ee;
  --ink: #111111;
  --panel: #ffffff;
  --panel-2: #faf8f2;
  --line: #ddd8c9;
  --muted: #5f625b;
  --gold-text: #7f6727;
}
:root[data-theme="light"] body {
  background:
    radial-gradient(circle at 82% -15%, rgba(214, 173, 75, 0.22) 0, transparent 30rem),
    radial-gradient(circle at -10% 35%, rgba(214, 173, 75, 0.08) 0, transparent 25rem),
    #f6f4ee;
}

/* Texto sobre fondo claro */
:root[data-theme="light"] .brand,
:root[data-theme="light"] .status-grid strong,
:root[data-theme="light"] .account-card strong,
:root[data-theme="light"] .map-modal-head,
:root[data-theme="light"] .alarm-row span:nth-child(2),
:root[data-theme="light"] .health-row span,
:root[data-theme="light"] .face-match-row p { color: #171715; }

:root[data-theme="light"] .onboarding li span,
:root[data-theme="light"] .setup-steps,
:root[data-theme="light"] .face-search-message,
:root[data-theme="light"] .face-best-toggle,
:root[data-theme="light"] .scan-loading,
:root[data-theme="light"] .account-state,
:root[data-theme="light"] .location-history li,
:root[data-theme="light"] footer strong,
:root[data-theme="light"] .feature-status-block strong { color: #3a3b36; }

:root[data-theme="light"] .hero small,
:root[data-theme="light"] .hero form small,
:root[data-theme="light"] .recovery-copy,
:root[data-theme="light"] .access-separator span,
:root[data-theme="light"] .summary-grid span:last-child,
:root[data-theme="light"] .actions small,
:root[data-theme="light"] .waiting-command small,
:root[data-theme="light"] .status-grid span,
:root[data-theme="light"] .evidence-placeholder > span,
:root[data-theme="light"] footer,
:root[data-theme="light"] .scan-image-label,
:root[data-theme="light"] .add-device-grid p,
:root[data-theme="light"] .bottom-tab,
:root[data-theme="light"] .alarm-row time,
:root[data-theme="light"] .health-row time,
:root[data-theme="light"] .empty-row,
:root[data-theme="light"] .watch-health-note,
:root[data-theme="light"] .face-search-block small,
:root[data-theme="light"] .location-accuracy-note,
:root[data-theme="light"] .feature-status,
:root[data-theme="light"] .evidence-audio small { color: #66675f; }

/* Dorado como TEXTO (los rellenos siguen en --lime) */
:root[data-theme="light"] .ms-mark { color: var(--gold-text); border-color: var(--gold-text); }
:root[data-theme="light"] .eyebrow,
:root[data-theme="light"] .message,
:root[data-theme="light"] .summary-grid strong,
:root[data-theme="light"] .summary-icon,
:root[data-theme="light"] .list-card > strong,
:root[data-theme="light"] .privacy-note strong,
:root[data-theme="light"] .empty-icon,
:root[data-theme="light"] .evidence-tags,
:root[data-theme="light"] .status-tag { color: var(--gold-text); }
:root[data-theme="light"] .app-link { color: var(--gold-text); border-color: var(--gold-text); }
:root[data-theme="light"] .bottom-tab.active { background: #f6edcf; color: var(--gold-text); }
:root[data-theme="light"] .direction-arrow { color: #8a6d1f; }

/* Tarjetas y superficies */
:root[data-theme="light"] .card {
  background: #ffffff;
  border-color: #e2ddcd;
  box-shadow: 0 18px 50px rgba(70, 58, 20, 0.10);
}
:root[data-theme="light"] .dashboard-title { border-bottom-color: #e2ddcd; }
:root[data-theme="light"] footer { border-top-color: #e2ddcd; }
:root[data-theme="light"] .access-separator { background: #ddd8c9; }
:root[data-theme="light"] .access-separator span { background: #ffffff; }
:root[data-theme="light"] .summary-grid button { background: #ffffff; color: #171715; border-color: #ddd8c9; }
:root[data-theme="light"] .summary-icon { background: #efe9d6; }
:root[data-theme="light"] .status-grid span,
:root[data-theme="light"] .onboarding li,
:root[data-theme="light"] .location-history li,
:root[data-theme="light"] .add-device-grid article,
:root[data-theme="light"] .alarm-row,
:root[data-theme="light"] .health-row,
:root[data-theme="light"] .face-search-block,
:root[data-theme="light"] .evidence-audio,
:root[data-theme="light"] .feature-status,
:root[data-theme="light"] .feature-status-block { background: #faf8f2; border-color: #e2ddcd; }
:root[data-theme="light"] .account-state { background: #faf8f2; border-color: #d6d0bd; }
:root[data-theme="light"] .empty-state { background: #faf8f2; border-color: #c9c4b4; }
:root[data-theme="light"] .empty-icon { background: #efe9d6; }
:root[data-theme="light"] .empty-row { border-color: #c9c4b4; }
:root[data-theme="light"] .feature-status-block { border-color: #c9c4b4; }
:root[data-theme="light"] .evidence-image,
:root[data-theme="light"] .evidence-placeholder { background: #efede6; border-color: #ddd8c9; }
:root[data-theme="light"] .evidence-placeholder.pending-file { background: linear-gradient(145deg, #f3efe0, #e9e4d2); }
:root[data-theme="light"] .secure-badge { border-color: #c9c4b4; color: #4c5648; }
:root[data-theme="light"] .face-refund-offer { border-top-color: #e2ddcd; }
:root[data-theme="light"] .privacy-note { background: #fbf3da; border-color: #e4cf93; color: #5a4a1c; }
:root[data-theme="light"] .bottom-tabs {
  background: rgba(255, 255, 255, 0.94);
  border-color: #ddd8c9;
  box-shadow: 0 14px 40px rgba(70, 58, 20, 0.16);
}
:root[data-theme="light"] .bottom-tab:hover { background: #f1ede0; }

/* Campos y botones neutros */
:root[data-theme="light"] input { background: #ffffff; color: #171715; border-color: #c9c4b4; }
:root[data-theme="light"] .ghost { background: transparent; color: #171715; border-color: #bdb7a4; }
:root[data-theme="light"] .danger { background: #ffffff; color: #171715; border-color: #8f8a78; }
:root[data-theme="light"] .demo-button { background: #f1ede0; color: #171715; border-color: #d6d0bd; }
:root[data-theme="light"] .actions button.is-recent-action { color: #66675f; border-color: #c9c4b4; background: transparent; }

/* Alarmas, avisos y estados */
:root[data-theme="light"] .alarm-row.alarm-danger { background: #fdecec; border-color: #e3b1b1; }
:root[data-theme="light"] .alarm-row.alarm-danger span:nth-child(2) { color: #9a2020; }
:root[data-theme="light"] .alarm-row.alarm-warn span:nth-child(2) { color: #7a5a0a; }
:root[data-theme="light"] .face-refund-button { border-color: #c98a8a; color: #8a1f1f; }
:root[data-theme="light"] .face-refund-note { color: #1f6b2a; }
:root[data-theme="light"] .emergency-banner { background: #fff4d6; border-color: #d9b24c; color: #5a4310; }
:root[data-theme="light"] .emergency-banner span { color: #5a4310; }
:root[data-theme="light"] .evidence-audio .audio-error { color: #8a5a00; }

/* Ventanas (mapa y escaneo). El visor de fotos y de video queda oscuro a proposito:
   una foto se ve mejor sobre fondo oscuro, y ese fondo no tiene texto. */
:root[data-theme="light"] .map-modal-card { background: #ffffff; border-color: #ddd8c9; }
:root[data-theme="light"] .map-modal-head { border-bottom-color: #ddd8c9; }
:root[data-theme="light"] .scan-radar { background: conic-gradient(from 0deg, #d9b24c, #f6f4ee 65%); }
:root[data-theme="light"] .scan-radar::after { background: #ffffff; }