/* ***********************************************************************
   Modo oscuro (sep-2026).

   Todo el modo vive en ESTE archivo y cada regla va bajo
   `html[data-tema="oscuro"]`: el modo claro no se tocó, sigue saliendo de
   los mismos CSS de siempre. Así, si algo se ve raro en oscuro, se arregla
   acá sin riesgo de romper el claro.

   Quién pone el atributo:
     - el <script> chico del <head> de html/index.html, ANTES de que se pinte
       nada (si no, la página parpadea en blanco al entrar);
     - el botón de la luna/sol de la barra de arriba (js/tema.js).
   La preferencia se guarda en localStorage ('unet-tema'). Si el usuario
   nunca tocó el botón, se sigue al sistema operativo (prefers-color-scheme).

   Por qué el prefijo y no variables en cada CSS: el prefijo suma (0,1,1) de
   especificidad, así que estas reglas le ganan a las de sección aunque el
   router cargue menu.css / diagnostico.css / footer.css DESPUÉS que esta
   hoja. Donde el original trae !important, acá también hace falta.

   Lo que NO cambia a propósito:
     - las tarjetas de servicios con foto y el banner de reprogramaciones (ya
       son oscuros);
     - la patente dibujada: es una chapa, blanca en la vida real;
     - el rojo de los botones llenos (#bb1e1e con texto blanco se lee igual);
       lo que sí se aclara es el rojo usado como COLOR DE TEXTO, que sobre
       fondo oscuro quedaba apagado;
     - la planilla PDF: es una hoja, se ve blanca.
   *********************************************************************** */

html[data-tema="oscuro"] {
    /* controles nativos (select, scrollbars, autocompletado) en oscuro */
    color-scheme: dark;

    --o-fondo: #151413;        /* fondo de la página (era #f4f3ef) */
    --o-superficie: #1f1d1b;   /* tarjetas, sidebar, panel del menú */
    --o-superficie-2: #262421; /* detalle desplegado, barras de ventanas */
    --o-hover: #2c2a27;
    --o-borde: #353230;
    --o-borde-2: #46423d;      /* bordes de campos y botones */
    --o-texto: #ebe8e4;
    --o-texto-2: #b9b3ab;
    --o-texto-3: #8e8880;
    --o-rojo: #f26d6d;         /* rojo de la marca usado como texto */
    --o-rojo-suave: rgba(239, 68, 68, .14);
    --o-sombra: 0 2px 8px rgba(0, 0, 0, .45);

    background-color: var(--o-fondo);
}

html[data-tema="oscuro"] body {
    background-color: var(--o-fondo);
    color: var(--o-texto);
}

/* =====================================================================
   Shell: fondo, sidebar, barra de arriba, panel hamburguesa, pie
   ===================================================================== */

html[data-tema="oscuro"] .main-panel {
    background-color: var(--o-fondo);
}

html[data-tema="oscuro"] .sidebar[data-color="white"]::after {
    background: var(--o-superficie);
}

html[data-tema="oscuro"] .sidebar {
    border-right-color: var(--o-borde);
}

html[data-tema="oscuro"] .sidebar[data-color="white"] .logo::after {
    background-color: var(--o-borde-2);
    opacity: 1;
}

html[data-tema="oscuro"] #nombre-usuario {
    color: var(--o-texto);
}

html[data-tema="oscuro"] .unet-usuario-rol {
    color: var(--o-texto-3);
}

html[data-tema="oscuro"] #sidebar .nav li > a {
    color: var(--o-texto-2);
}

html[data-tema="oscuro"] #sidebar .nav li:not(.active) > a:hover {
    color: var(--o-rojo);
}

/* La solapa del activo toma el color del FONDO de la página (es lo que la
   "une" con el contenido), igual que en claro toma el #f4f3ef. Los dos
   originales llevan !important en el color. */
html[data-tema="oscuro"] #sidebar .nav li.active > a,
html[data-tema="oscuro"] #sidebar[data-active-color="danger"] .nav li.active > a {
    background-color: var(--o-fondo);
    color: var(--o-rojo) !important;
}

html[data-tema="oscuro"] #sidebar .nav li.active > a::before {
    background: radial-gradient(circle at 0 0, transparent 14px, var(--o-fondo) 14.5px);
}

html[data-tema="oscuro"] #sidebar .sidebar-wrapper li.active > a:not([data-toggle="collapse"])::after {
    background: radial-gradient(circle at 0 100%, transparent 14px, var(--o-fondo) 14.5px);
}

html[data-tema="oscuro"] .unet-salir {
    color: var(--o-texto-2);
}

html[data-tema="oscuro"] .unet-salir:hover {
    color: var(--o-rojo);
}

html[data-tema="oscuro"] .unet-pie-salir {
    border-bottom-color: var(--o-borde);
}

/* El logo de Supra está pensado para fondo blanco (la "S" verde/celeste y
   el "Supra SOFT" en verde): sobre el oscuro se apagaba. Va sobre una placa
   clara redondeada, así se ve igual que en el modo claro. */
html[data-tema="oscuro"] #imagen-supra {
    padding: 6px;
    border-radius: 14px;
    background-color: #f4f3ef;
}

/* ---------- Barra de arriba ---------- */

html[data-tema="oscuro"] .navbar,
html[data-tema="oscuro"] .navbar.navbar-transparent {
    border-bottom-color: var(--o-borde);
}

html[data-tema="oscuro"] .navbar .navbar-toggler-bar {
    background-color: var(--o-texto-2);
}

html[data-tema="oscuro"] #navbar-container a.unet-logo-barra .unet-logo-marca,
html[data-tema="oscuro"] #navbar-container a.unet-logo-barra:hover .unet-logo-marca {
    color: var(--o-texto);
}

html[data-tema="oscuro"] .unet-cto-texto b {
    color: var(--o-texto-2);
}

html[data-tema="oscuro"] #navbar-container a.unet-cto-dir,
html[data-tema="oscuro"] #navbar-container a.unet-cto-dir:link,
html[data-tema="oscuro"] #navbar-container a.unet-cto-dir:visited,
html[data-tema="oscuro"] #navbar-container a.unet-cto-dir:focus,
html[data-tema="oscuro"] #navbar-container a.unet-cto-dir:active {
    color: var(--o-texto-3);
}

html[data-tema="oscuro"] #navbar-container a.unet-cto-dir:hover {
    color: var(--o-rojo);
}

html[data-tema="oscuro"] #navbar-container a.unet-cto-pill:not(.unet-cto-wsp),
html[data-tema="oscuro"] #navbar-container a.unet-cto-pill:not(.unet-cto-wsp):link,
html[data-tema="oscuro"] #navbar-container a.unet-cto-pill:not(.unet-cto-wsp):visited,
html[data-tema="oscuro"] #navbar-container a.unet-cto-pill:not(.unet-cto-wsp):focus,
html[data-tema="oscuro"] #navbar-container a.unet-cto-pill:not(.unet-cto-wsp):active {
    border-color: var(--o-borde-2);
    background-color: var(--o-superficie);
    color: var(--o-texto-2);
}

html[data-tema="oscuro"] #navbar-container a.unet-cto-pill:not(.unet-cto-wsp):hover {
    border-color: var(--o-rojo);
    color: var(--o-rojo);
}

/* ---------- Panel del menú hamburguesa ---------- */

html[data-tema="oscuro"] #navigation {
    background-color: var(--o-superficie);
    box-shadow: 0 0 24px rgba(0, 0, 0, .6);
}

html[data-tema="oscuro"] .nav-cabecera,
html[data-tema="oscuro"] .nav-pie {
    border-color: var(--o-borde);
}

html[data-tema="oscuro"] .close-btn {
    color: var(--o-texto-3);
}

html[data-tema="oscuro"] .close-btn:hover {
    background-color: var(--o-hover);
    color: var(--o-rojo);
}

html[data-tema="oscuro"] #navbar-links .enlace a {
    color: var(--o-texto-2);
}

html[data-tema="oscuro"] #navbar-links .enlace a:hover,
html[data-tema="oscuro"] #navbar-links .enlace a.active {
    color: var(--o-rojo);
}

html[data-tema="oscuro"] #navbar-links .enlace a.active {
    background-color: var(--o-fondo);
}

html[data-tema="oscuro"] #navbar-links .enlace a.active::before {
    background: radial-gradient(circle at 0 0, transparent 14px, var(--o-fondo) 14.5px);
}

html[data-tema="oscuro"] #navbar-links .enlace a.active::after {
    background: radial-gradient(circle at 0 100%, transparent 14px, var(--o-fondo) 14.5px);
}

/* ---------- Pie ---------- */

html[data-tema="oscuro"] #footer-container footer,
html[data-tema="oscuro"] #footer-container .text-muted {
    color: var(--o-texto-3) !important;
}

html[data-tema="oscuro"] #footer-container h6 {
    color: var(--o-texto-2);
}

/* las píldoras de contacto del pie, como las de la barra */
html[data-tema="oscuro"] #footer-container a.pie-cto,
html[data-tema="oscuro"] #footer-container a.pie-cto:link,
html[data-tema="oscuro"] #footer-container a.pie-cto:visited,
html[data-tema="oscuro"] #footer-container a.pie-cto:focus,
html[data-tema="oscuro"] #footer-container a.pie-cto:active {
    border-color: var(--o-borde-2);
    background-color: var(--o-superficie);
    color: var(--o-texto-2);
}

html[data-tema="oscuro"] #footer-container a.pie-cto:hover {
    border-color: var(--o-rojo);
    color: var(--o-rojo);
}

html[data-tema="oscuro"] #footer-container a.pie-cto-wsp .unet-svg {
    color: #3fb573;
}

/* el logo del pie: en oscuro va la versión con las letras blancas */
html[data-tema="oscuro"] #footer-container img.pie-logo-claro {
    display: none;
}

html[data-tema="oscuro"] #footer-container img.pie-logo-oscuro {
    display: block;
}

html[data-tema="oscuro"] #footer-container .border-bottom {
    border-bottom-color: var(--o-borde) !important;
}

/* la franja del copyright trae el fondo en un style inline */
html[data-tema="oscuro"] #footer-container footer > div:last-child {
    background-color: rgba(255, 255, 255, .04) !important;
}

/* =====================================================================
   Botón del modo (luna / sol), en la barra de arriba.

   Se dibuja como las píldoras de contacto pero redondo y sólo con el
   icono. Muestra lo que VA A PASAR al tocarlo: la luna en claro, el sol en
   oscuro. Esto vale para los dos modos, por eso no lleva el prefijo.
   ===================================================================== */

.unet-tema {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid #e0dcd6;
    border-radius: 50%;
    background-color: #ffffff;
    color: #4a4642;
    cursor: pointer;
    transition: color .15s ease-in-out, border-color .15s ease-in-out, background-color .15s ease-in-out;
}

.unet-tema .unet-svg {
    width: 17px;
    height: 17px;
}

.unet-tema:hover {
    border-color: #bb1e1e;
    color: #bb1e1e;
}

.unet-tema:focus {
    outline: none;
}

.unet-tema:focus-visible {
    outline: 2px solid #bb1e1e;
    outline-offset: 2px;
}

.unet-tema .unet-tema-sol {
    display: none;
}

html[data-tema="oscuro"] .unet-tema {
    border-color: var(--o-borde-2);
    background-color: var(--o-superficie);
    color: #f5c451;   /* el sol, amarillo */
}

html[data-tema="oscuro"] .unet-tema:hover {
    border-color: #f5c451;
}

html[data-tema="oscuro"] .unet-tema .unet-tema-luna {
    display: none;
}

html[data-tema="oscuro"] .unet-tema .unet-tema-sol {
    display: block;
}

/* en el celular, del mismo tamaño que las píldoras de contacto (que ahí
   quedan sólo con el ícono) */
@media (max-width: 600px) {
    .unet-tema {
        width: 38px;
        height: 38px;
    }
}

/* =====================================================================
   Inicio (menu.css)
   ===================================================================== */

html[data-tema="oscuro"] #carouselInner {
    background-color: var(--o-superficie);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .5);
}

html[data-tema="oscuro"] .servicios-mensaje {
    border-color: var(--o-borde);
    background-color: var(--o-superficie);
    color: var(--o-texto-3);
}

html[data-tema="oscuro"] h2.servicios-rotulo {
    color: var(--o-texto);
}

html[data-tema="oscuro"] h2.servicios-rotulo::before {
    background-color: var(--o-rojo);
}

html[data-tema="oscuro"] h3.servicios-rotulo {
    color: var(--o-texto-2);
}

html[data-tema="oscuro"] .servicio-card {
    border-color: var(--o-borde);
}

html[data-tema="oscuro"] .servicio-card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, .55);
}

html[data-tema="oscuro"] .servicios-accesorios li {
    border-color: var(--o-borde);
    background-color: var(--o-superficie);
    color: var(--o-texto);
}

html[data-tema="oscuro"] .servicios-accesorios li::before {
    background-color: var(--o-rojo);
}

/* Aviso del próximo service. Los colores de estado son los mismos pero
   más claros: el ámbar y el rojo oscuros del modo claro no se leen sobre
   fondo oscuro. */
html[data-tema="oscuro"] .aviso-service {
    --aviso-color: var(--o-texto);
    --aviso-barra: #3fb573;
    border-color: var(--o-borde);
    background-color: var(--o-superficie);
    color: var(--o-texto);
}

html[data-tema="oscuro"] .aviso-service-proximo {
    --aviso-color: #f0b441;
    --aviso-barra: #e3a008;
}

html[data-tema="oscuro"] .aviso-service-vencido {
    --aviso-color: var(--o-rojo);
    --aviso-barra: #e0483a;
}

html[data-tema="oscuro"] .aviso-service-rotulo,
html[data-tema="oscuro"] .aviso-service-dato,
html[data-tema="oscuro"] .aviso-service-escala {
    color: var(--o-texto-2);
}

html[data-tema="oscuro"] .aviso-service-dato b {
    color: var(--o-texto);
}

html[data-tema="oscuro"] .aviso-service-riel {
    background-color: var(--o-borde);
}

html[data-tema="oscuro"] .aviso-service-hoy {
    background-color: var(--o-texto);
}

/* la patente queda blanca (es una chapa), sólo se le baja el borde negro,
   que sobre el fondo oscuro no se veía */
html[data-tema="oscuro"] .aviso-patente {
    border-color: #d9d6d0;
}

html[data-tema="oscuro"] a.aviso-service-link:focus-visible {
    outline-color: var(--o-texto);
}

/* =====================================================================
   Service (diagnostico.css)
   ===================================================================== */

html[data-tema="oscuro"] #content-area {
    background-color: var(--o-fondo);
}

html[data-tema="oscuro"] .diag-titulo,
html[data-tema="oscuro"] .diag-veh-patente,
html[data-tema="oscuro"] .diag-card-patente,
html[data-tema="oscuro"] .diag-card-fecha .diag-dia,
html[data-tema="oscuro"] .diag-dato-valor,
html[data-tema="oscuro"] .diag-tabla td,
html[data-tema="oscuro"] .diag-marcado-nombre,
html[data-tema="oscuro"] .diag-leyenda b {
    color: var(--o-texto);
}

html[data-tema="oscuro"] .diag-subtitulo,
html[data-tema="oscuro"] .diag-veh-modelo,
html[data-tema="oscuro"] .diag-card-modelo,
html[data-tema="oscuro"] .diag-col-obs,
html[data-tema="oscuro"] .diag-semaforo-cab span,
html[data-tema="oscuro"] .diag-leyenda,
html[data-tema="oscuro"] .diag-marcado-nombre em,
html[data-tema="oscuro"] .diag-detalle-titulo,
html[data-tema="oscuro"] .diag-ventana-titulo {
    color: var(--o-texto-2);
}

html[data-tema="oscuro"] .diag-seccion-titulo,
html[data-tema="oscuro"] .diag-seccion-contador,
html[data-tema="oscuro"] .diag-veh-resumen,
html[data-tema="oscuro"] .diag-buscador-campo label,
html[data-tema="oscuro"] .diag-filtro label,
html[data-tema="oscuro"] .diag-resultados-header,
html[data-tema="oscuro"] .diag-card-fecha .diag-hora,
html[data-tema="oscuro"] .diag-dato-label,
html[data-tema="oscuro"] .diag-card-flecha,
html[data-tema="oscuro"] .diag-tabla th,
html[data-tema="oscuro"] .diag-col-orden,
html[data-tema="oscuro"] .diag-detalle-vacio,
html[data-tema="oscuro"] .diag-tira-nros span,
html[data-tema="oscuro"] .diag-marcado-nombre small,
html[data-tema="oscuro"] .diag-pdf-barra,
html[data-tema="oscuro"] .diag-pdf-cerrar,
html[data-tema="oscuro"] .diag-ventana-cerrar {
    color: var(--o-texto-3);
}

/* superficies: tarjetas, buscador, mensajes */
html[data-tema="oscuro"] .diag-veh-card,
html[data-tema="oscuro"] .diag-buscador,
html[data-tema="oscuro"] .diag-mensaje,
html[data-tema="oscuro"] .diag-card {
    background-color: var(--o-superficie);
    box-shadow: var(--o-sombra);
}

html[data-tema="oscuro"] .diag-veh-card:hover,
html[data-tema="oscuro"] .diag-veh-card-sinpat:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, .6);
}

html[data-tema="oscuro"] .diag-veh-card-activa {
    border-color: #ef4444;
}

html[data-tema="oscuro"] .diag-veh-icono {
    background-color: var(--o-rojo-suave);
    color: var(--o-rojo);
}

html[data-tema="oscuro"] .diag-veh-card-activa .diag-veh-icono {
    background-color: #ef4444;
    color: #fff;
}

html[data-tema="oscuro"] .diag-mensaje.diag-mensaje-error {
    color: var(--o-rojo);
}

/* campos */
html[data-tema="oscuro"] .diag-buscador-campo input,
html[data-tema="oscuro"] .diag-buscador-campo select,
html[data-tema="oscuro"] .diag-filtro select {
    border-color: var(--o-borde-2);
    background-color: var(--o-fondo);
    color: var(--o-texto);
}

html[data-tema="oscuro"] .diag-buscador-campo input::placeholder {
    color: var(--o-texto-3);
}

html[data-tema="oscuro"] .diag-buscador-campo input:focus,
html[data-tema="oscuro"] .diag-buscador-campo select:focus,
html[data-tema="oscuro"] .diag-filtro select:focus {
    border-color: #ef4444;
}

html[data-tema="oscuro"] .diag-btn-secundario {
    border-color: var(--o-borde-2);
    background-color: var(--o-superficie);
    color: var(--o-texto-2);
}

html[data-tema="oscuro"] .diag-btn-secundario:hover {
    background-color: var(--o-hover);
}

/* tarjeta de cada service */
html[data-tema="oscuro"] .diag-card-cab:hover {
    background-color: var(--o-hover);
}

html[data-tema="oscuro"] .diag-card-detalle {
    border-top-color: var(--o-borde);
    background-color: var(--o-superficie-2);
}

html[data-tema="oscuro"] .diag-tabla th {
    border-bottom-color: var(--o-borde);
}

html[data-tema="oscuro"] .diag-tabla td {
    border-bottom-color: var(--o-borde);
}

html[data-tema="oscuro"] .diag-obs-texto {
    border-color: var(--o-borde);
    background-color: var(--o-superficie);
    color: var(--o-texto);
}

/* Badges, chips y estados: en claro son fondos pastel con texto oscuro;
   en oscuro, el mismo tono translúcido con el texto claro. */
html[data-tema="oscuro"] .diag-badge-0,
html[data-tema="oscuro"] .diag-estado-regular,
html[data-tema="oscuro"] .diag-chip-proximo,
html[data-tema="oscuro"] .diag-marcado-regular {
    background-color: rgba(245, 158, 11, .16);
    color: #fbcb5c;
}

html[data-tema="oscuro"] .diag-badge-1 {
    background-color: rgba(59, 130, 246, .18);
    color: #93c5fd;
}

html[data-tema="oscuro"] .diag-badge-2 {
    background-color: rgba(99, 102, 241, .22);
    color: #b4bcfd;
}

html[data-tema="oscuro"] .diag-badge-3,
html[data-tema="oscuro"] .diag-estado-bien {
    background-color: rgba(16, 185, 129, .16);
    color: #6ee7b7;
}

html[data-tema="oscuro"] .diag-estado-mal,
html[data-tema="oscuro"] .diag-chip-vencido,
html[data-tema="oscuro"] .diag-marcado-mal {
    background-color: rgba(239, 68, 68, .18);
    color: #fca5a5;
}

html[data-tema="oscuro"] .diag-badge-x,
html[data-tema="oscuro"] .diag-estado-sd {
    background-color: rgba(255, 255, 255, .08);
    color: var(--o-texto-3);
}

/* resumen de la visita (la tira de 14 puntos) */
html[data-tema="oscuro"] .diag-semaforo {
    --sem-color: #5cc98a;
    border-color: var(--o-borde);
    background-color: var(--o-superficie);
}

html[data-tema="oscuro"] .diag-semaforo-regular { --sem-color: #f0b441; }
html[data-tema="oscuro"] .diag-semaforo-mal { --sem-color: var(--o-rojo); }

html[data-tema="oscuro"] .diag-tira-sin {
    background: repeating-linear-gradient(135deg, #4a4540 0 3px, #2c2926 3px 6px);
}

html[data-tema="oscuro"] .diag-marcados {
    border-top-color: var(--o-borde-2);
}

/* botones PDF y ojito */
html[data-tema="oscuro"] .diag-btn-pdf,
html[data-tema="oscuro"] .diag-btn-ojo {
    border-color: var(--o-borde-2);
    background-color: var(--o-superficie);
    color: var(--o-texto-2);
}

html[data-tema="oscuro"] .diag-btn-pdf:hover,
html[data-tema="oscuro"] .diag-btn-ojo:hover,
html[data-tema="oscuro"] .diag-btn-ojo-activo,
html[data-tema="oscuro"] .diag-btn-ojo-activo:hover {
    border-color: rgba(242, 109, 109, .5);
    background-color: var(--o-rojo-suave);
    color: var(--o-rojo);
}

html[data-tema="oscuro"] .diag-btn-pdf-listo,
html[data-tema="oscuro"] .diag-btn-pdf-listo:hover {
    border-color: #bb1e1e;
    background-color: #bb1e1e;
    color: #fff;
}

html[data-tema="oscuro"] .diag-btn-pdf-listo:hover {
    border-color: #ee2121;
    background-color: #ee2121;
}

html[data-tema="oscuro"] .diag-btn-pdf-bloqueado,
html[data-tema="oscuro"] .diag-btn-pdf-bloqueado:hover {
    border-color: var(--o-borde);
    background-color: var(--o-superficie-2);
    color: var(--o-texto-3);
}

html[data-tema="oscuro"] .diag-card-pdf {
    border-top-color: var(--o-borde);
    background-color: var(--o-superficie-2);
}

html[data-tema="oscuro"] .diag-pdf-cerrar:hover,
html[data-tema="oscuro"] .diag-ventana-cerrar:hover {
    color: var(--o-rojo);
}

/* la ventana de la planilla: el marco oscuro, la hoja sigue blanca */
html[data-tema="oscuro"] .diag-ventana {
    background-color: rgba(0, 0, 0, .72);
}

html[data-tema="oscuro"] .diag-ventana-caja {
    background-color: var(--o-superficie);
}

html[data-tema="oscuro"] .diag-ventana-barra {
    border-bottom-color: var(--o-borde);
    background-color: var(--o-superficie-2);
}

/* En el celular la tabla de puntos pasa a bloques (ver diagnostico.css) */
@media (max-width: 768px) {
    html[data-tema="oscuro"] .diag-tabla tr {
        border-color: var(--o-borde);
        background-color: var(--o-superficie);
    }

    html[data-tema="oscuro"] .diag-tabla td::before {
        color: var(--o-texto-3);
    }

    html[data-tema="oscuro"] .diag-tabla td[data-label="Detalle"],
    html[data-tema="oscuro"] .diag-tabla td[data-label="Trabajo"] {
        color: var(--o-texto);
    }
}

/* =====================================================================
   Login (login.css). El panel de datos de la derecha ya es oscuro: sólo
   cambia la columna del formulario.
   ===================================================================== */

html[data-tema="oscuro"] .login-container {
    background: var(--o-superficie);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .6);
}

html[data-tema="oscuro"] body::before {
    background: rgba(10, 10, 10, .7);
}

html[data-tema="oscuro"] .login-title {
    color: var(--o-texto);
}

html[data-tema="oscuro"] .login-subtitle,
html[data-tema="oscuro"] .login-campo label {
    color: var(--o-texto-3);
}

html[data-tema="oscuro"] .login-input {
    border-color: var(--o-borde-2);
    background-color: var(--o-fondo);
}

html[data-tema="oscuro"] .login-input:focus-within {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .18);
}

html[data-tema="oscuro"] .login-input input {
    color: var(--o-texto);
}

html[data-tema="oscuro"] .login-input input::placeholder {
    color: var(--o-texto-3);
}

html[data-tema="oscuro"] .login-input input:-webkit-autofill,
html[data-tema="oscuro"] .login-input input:-webkit-autofill:hover,
html[data-tema="oscuro"] .login-input input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 60px var(--o-fondo) inset;
    -webkit-text-fill-color: var(--o-texto);
}

html[data-tema="oscuro"] .login-ver-pass:hover {
    background-color: var(--o-hover);
}

/* =====================================================================
   Carteles de SweetAlert2 (se bajan bajo demanda, ver html/index.html).
   Su CSS se inyecta después que éste, pero el prefijo le gana.
   ===================================================================== */

html[data-tema="oscuro"] .swal2-popup {
    background: var(--o-superficie);
    color: var(--o-texto);
}

html[data-tema="oscuro"] .swal2-title {
    color: var(--o-texto);
}

html[data-tema="oscuro"] .swal2-html-container {
    color: var(--o-texto-2);
}
