/* =====================================================================
   Modo claro / oscuro — ajustes a mano y selector sol/luna.
   El grueso del modo oscuro está en theme-dark.css (se GENERA con tools/theme/build-dark-theme.js);
   aquí solo van los retoques: fondo de página, menú lateral, selector, logotipos y controles nativos.
   ===================================================================== */

/* ---------- Selector sol / luna ---------- */
.theme-toggle{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:999px;background:#eef1f8;border:1px solid #dbe1ef;flex:0 0 auto;}
.theme-toggle button{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:30px;height:28px;border-radius:999px;cursor:pointer;color:#7a86a6;transition:background .15s,color .15s,box-shadow .15s;}
.theme-toggle button svg{width:17px;height:17px;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.theme-toggle button:hover{color:#1c2333;}
.theme-toggle button:focus-visible{outline:2px solid var(--brand-teal,#2aa6bd);outline-offset:1px;}
.theme-toggle button.is-on[data-set-theme="light"]{background:#fff;color:#e08a00;box-shadow:0 1px 4px rgba(20,30,90,.18);}
.theme-toggle button.is-on[data-set-theme="dark"]{background:#fff;color:#123f6d;box-shadow:0 1px 4px rgba(20,30,90,.18);}
/* sobre la barra azul oscura de visitantes y las pantallas de acceso con fondo de color */
.theme-toggle--onbrand{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28);}
.theme-toggle--onbrand button{color:rgba(255,255,255,.75);}
.theme-toggle--onbrand button:hover{color:#fff;}
.theme-toggle--float{position:fixed;top:14px;right:14px;z-index:60;box-shadow:0 4px 14px rgba(10,20,66,.22);}
@media (max-width:700px){.theme-toggle button{width:28px;height:26px;}}

html[data-theme="dark"] .theme-toggle{background:#161b29;border-color:#2b3345;}
html[data-theme="dark"] .theme-toggle button{color:#8d99b8;}
html[data-theme="dark"] .theme-toggle button:hover{color:#e6eaf6;}
html[data-theme="dark"] .theme-toggle button.is-on[data-set-theme="light"]{background:#2a3350;color:#ffc94d;box-shadow:none;}
html[data-theme="dark"] .theme-toggle button.is-on[data-set-theme="dark"]{background:#2a3350;color:#b9c8ff;box-shadow:none;}
html[data-theme="dark"] .theme-toggle--onbrand{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.22);}

/* ---------- Base oscura ---------- */
html[data-theme="dark"]{color-scheme:dark;--bg:#0d111b;--surface:#151a27;--surface-2:#1b2132;}
html[data-theme="dark"] body{background:#0d111b;color:#d7dce7;}
html[data-theme="dark"] ::placeholder{color:#7d88a3;opacity:1;}
html[data-theme="dark"] ::selection{background:#3b4f8f;color:#fff;}
html[data-theme="dark"] hr{border-color:#2b3345;}
html[data-theme="dark"] a{color:#8fc3ea;}
html[data-theme="dark"] input,html[data-theme="dark"] select,html[data-theme="dark"] textarea{background-color:#10151f;color:#e1e5f0;border-color:#323b52;}
html[data-theme="dark"] input:disabled,html[data-theme="dark"] select:disabled,html[data-theme="dark"] textarea:disabled,html[data-theme="dark"] input[readonly]{background-color:#171c29;color:#9099b3;}
html[data-theme="dark"] option{background:#151a27;color:#e1e5f0;}
html[data-theme="dark"] input[type=checkbox],html[data-theme="dark"] input[type=radio]{accent-color:#7c5cd6;}
html[data-theme="dark"] pre,html[data-theme="dark"] code{background-color:#10151f;color:#cfd6ea;}
html[data-theme="dark"] ::-webkit-scrollbar{width:11px;height:11px;}
html[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2f3850;border-radius:8px;border:2px solid #0d111b;}
html[data-theme="dark"] ::-webkit-scrollbar-track{background:#0d111b;}

/* ---------- Menú lateral: azul muy oscuro en lugar del azul de marca ---------- */
html[data-theme="dark"] .sidebar{--navy-900:#0a1626;--navy-800:#0f1f35;--navy-700:#17304d;--navy-600:#1d3f63;border-right:1px solid #1d2840;}
html[data-theme="dark"] body.portal{--portal-side:#0f1f35;}

/* ---------- Logotipos pensados para fondo claro ---------- */
html[data-theme="dark"] .topbar .topbar__logo,html[data-theme="dark"] .lg-logo{filter:brightness(1.6) contrast(.95);}
html[data-theme="dark"] body.portal{--portal-bg:#0d111b;background:#0d111b;}

/* ---------- Pantallas de acceso / registro: fondo azul noche en lugar del degradado azul claro ---------- */
html[data-theme="dark"] body.lg-body{background:linear-gradient(160deg,#08121f 0%,#0d1d33 55%,#12294a 100%);}
html[data-theme="dark"] body:not(.lg-body):not(.portal):not(.embed):not(:has(.app)){--navy-900:#0a1626;--navy-800:#0f1f35;}

/* ---------- Legibilidad (modo claro y oscuro): texto blanco sobre fondos de color con contraste suficiente (WCAG AA) ---------- */
/* Tarjetas de resumen (stat-tile): degradados un poco más profundos; el ámbar lleva texto oscuro. */
.stat-tile--navy,html[data-theme="dark"] .stat-tile--navy{background:linear-gradient(135deg,#1f6fae,#12527A)}
.stat-tile--blue,html[data-theme="dark"] .stat-tile--blue{background:linear-gradient(135deg,#1c7aa8,#1C73AC)}
.stat-tile--coral,html[data-theme="dark"] .stat-tile--coral{background:linear-gradient(135deg,#d83a43,#b3202b)}
.stat-tile--green,html[data-theme="dark"] .stat-tile--green{background:linear-gradient(135deg,#0b8460,#08805a)}
.stat-tile--magenta,html[data-theme="dark"] .stat-tile--magenta{background:linear-gradient(135deg,#b8329f,#8a1a8c)}
.stat-tile--pink,html[data-theme="dark"] .stat-tile--pink{background:linear-gradient(135deg,#d02680,#a31c68)}
.stat-tile--teal,html[data-theme="dark"] .stat-tile--teal{background:linear-gradient(135deg,#0a8577,#07766a)}
.stat-tile--amber,html[data-theme="dark"] .stat-tile--amber{background:linear-gradient(135deg,#ffc94d,#ff9500);color:#2b1a00}
.stat-tile--amber .stat-tile__icon,.stat-tile--amber .stat-tile__value,.stat-tile--amber .stat-tile__label,.stat-tile--amber .stat-tile__foot{color:#2b1a00;opacity:1}
.stat-tile--amber .stat-tile__foot{border-top-color:rgba(43,26,0,.28)}
/* Verde/rojo de estados: un tono más profundo para que el texto blanco (botones) y el texto sobre fondo claro (etiquetas) se lean bien. */
html:root{--success:#14815a;--danger:#c23549;--btn-success:#14815a;--btn-danger:#c23549}
html:root:not([data-theme="dark"]){--text-muted:#5b6370}
html:not([data-theme="dark"]) .badge-muted{color:#4b5563}
html:not([data-theme="dark"]) .badge-danger{color:#a82a3c}
html:not([data-theme="dark"]) .badge-success{color:#0f6b49}
/* Botón «.btn» sin variante (p. ej. «Enviar correo de prueba»): antes quedaba blanco sobre gris claro. */
.btn:not([class*="btn-"]){background:var(--primary,#1C73AC);color:#fff}
/* Enlaces «píldora», títulos de sección y tarjetas de inicio del portal: más contraste. */
.pill-link,html[data-theme="dark"] .pill-link{background:#66708c}
.form-section{color:#5d6785}
html:not([data-theme="dark"]) .hm-card__go{color:color-mix(in srgb,var(--c) 68%,#000)}
html[data-theme="dark"] .hm-card__go{color:color-mix(in srgb,var(--c) 55%,#fff)}