/* =====================================================================
   Modo oscuro: pisa los tokens de tema.css. Se activa con html[data-tema="oscuro"]
   (por defecto sigue al sistema; el botón del menú de usuario lo fija por navegador).
   ===================================================================== */
html[data-tema="oscuro"]{
  color-scheme:dark;
  --tinta:#F4F4F5; --tinta-suave:#A1A1AA; --muted:#27272A; --muted-2:#1C1C20;
  --fondo:#111114; --fondo-base:#111114; --superficie:#19191D; --linea:#2B2B31; --linea-fuerte:#3F3F46;
  --mezcla-claro:#19191D; --mezcla-oscuro:#FFFFFF;
  --error:#F87171;
  --sombra:0 1px 2px rgb(0 0 0 / .5);
  --sombra-md:0 4px 14px -2px rgb(0 0 0 / .55), 0 2px 4px -2px rgb(0 0 0 / .4);
  --acento-claro:color-mix(in srgb,var(--acento) 70%,#fff);
}
html[data-tema="oscuro"] body{background:var(--fondo)}
html[data-tema="oscuro"] img.marca-logo{background:#fff}
html[data-tema="oscuro"] input,html[data-tema="oscuro"] select,html[data-tema="oscuro"] textarea{background:var(--muted-2);color:var(--tinta);border-color:var(--linea-fuerte)}
html[data-tema="oscuro"] input::placeholder,html[data-tema="oscuro"] textarea::placeholder{color:#71717A}
html[data-tema="oscuro"] .btn-sec,html[data-tema="oscuro"] .btn-icono{background:var(--superficie);color:var(--tinta);border-color:var(--linea-fuerte)}
html[data-tema="oscuro"] dialog,html[data-tema="oscuro"] .dialogo{background:var(--superficie);color:var(--tinta)}
html[data-tema="oscuro"] dialog::backdrop{background:rgb(0 0 0 / .65)}
html[data-tema="oscuro"] .tabla th{background:var(--muted-2)}
html[data-tema="oscuro"] .tabla tr:nth-child(even) td,html[data-tema="oscuro"] .zebra{background:color-mix(in srgb,var(--superficie) 70%,#000)}
html[data-tema="oscuro"] .fila-link:hover td{background:var(--muted)}
html[data-tema="oscuro"] .login-globo,html[data-tema="oscuro"] .login-globo::after{background:var(--superficie)}
html[data-tema="oscuro"] .ofi-globo{background:#27272A;color:#F4F4F5;border-color:#3F3F46}
html[data-tema="oscuro"] .ofi-cafe .ofi-globo{background:#3F2E0E;border-color:#7A5200}
html[data-tema="oscuro"] .boceto-color{border-color:var(--superficie)}
html[data-tema="oscuro"] .ticket-impresion{color:#000;background:#fff}
/* Estados y avisos: mismos colores, fondo oscuro */
html[data-tema="oscuro"] .aviso-error,html[data-tema="oscuro"] #vLogin .error,html[data-tema="oscuro"] .alerta-datos,html[data-tema="oscuro"] .estado-error,html[data-tema="oscuro"] .indice-error,html[data-tema="oscuro"] .coinc-mal,html[data-tema="oscuro"] .mat-var.sube{background:#3B1212;border-color:#7F1D1D;color:#FCA5A5}
html[data-tema="oscuro"] .tabla tr.alerta td{background:#2A1414}
html[data-tema="oscuro"] .tn-x:hover{background:#3B1212;color:#FCA5A5}
html[data-tema="oscuro"] .coinc-ok,html[data-tema="oscuro"] .mat-var.baja,html[data-tema="oscuro"] .tn-estado-chequeado,html[data-tema="oscuro"] .estado-instalado,html[data-tema="oscuro"] .estado-el-terminado,html[data-tema="oscuro"] .indice-listo{background:#0F2E1C;color:#86EFAC}
html[data-tema="oscuro"] .coinc-media,html[data-tema="oscuro"] .tn-estado-pendiente,html[data-tema="oscuro"] .estado-el-a_definir,html[data-tema="oscuro"] .indice-pendiente,html[data-tema="oscuro"] .indice-procesando,html[data-tema="oscuro"] .estado-en_taller,html[data-tema="oscuro"] .tabla-compra tr.sin-producto td{background:#3A2A08;color:#FCD34D}
html[data-tema="oscuro"] .elemento-pend{background:#2E2410;border-color:#6B4E12}
html[data-tema="oscuro"] .estado-aprobado,html[data-tema="oscuro"] .estado-el-definido{background:#122A45;color:#93C5FD}
html[data-tema="oscuro"] .estado-cerrado,html[data-tema="oscuro"] .estado-el-descartado,html[data-tema="oscuro"] .tn-estado-sin_revisar{background:#27272A;color:#A1A1AA}
html[data-tema="oscuro"] .punto-verde{box-shadow:0 0 0 3px #14532D}
html[data-tema="oscuro"] .rojo{color:#F87171}
html[data-tema="oscuro"] .naranja{color:#FBBF24}
html[data-tema="oscuro"] .tn-pend-sug{background:color-mix(in srgb,var(--acento) 18%,var(--superficie))}
html[data-tema="oscuro"] .tn-barra-vis{background:#3F3F46}
html[data-tema="oscuro"] .hero-cifra,html[data-tema="oscuro"] .tn-sobrante,html[data-tema="oscuro"] .tn-pend-item{background:var(--muted-2)}