/* El modo oscuro de SUN (Camila, 22-10). Se elige en «Yo › Cómo se ve» y queda guardado en ese teléfono o computador;
   base.html pone html[data-tema="oscuro"] antes de dibujar, así no parpadea en claro.
   Aquí van las variables de estilo.css en su versión oscura y lo poco que no sale solo; los colores fijos de cada hoja
   los traduce sun/tema_oscuro.py en tema-oscuro-auto.css. */
/* Solo en la pantalla: lo impreso (la NE, los informes) sale siempre en claro. */
@media screen {
html[data-tema="oscuro"] {
  color-scheme: dark;
  /* El grafito de la barra y el encabezado ya es oscuro: queda igual. */
  --fondo: #121417; --papel: #1b1f24; --tinta: #e4e8ec; --suave: #a4adb6; --tenue: #8a939c;
  --linea: #2b3138; --linea-fuerte: #3a424b; --gris: #242a30; --gris-cab: #1f2429;
  --primario: #3d4650; --primario-hover: #4b5561; --primario-texto: #fff;
  --ok: #6cc590; --ok-suave: #152a1d; --alerta: #e8ad55; --alerta-suave: #30240f; --alerta-borde: #5a4319;
  --error: #f08178; --error-suave: #351816; --sube: #86b4ee; --sube-suave: #16273d;
  /* La empresa: su color, aclarado para leerse sobre lo oscuro (--marca-c lo pone base.html, el de la empresa tal cual). */
  --marca: color-mix(in srgb, var(--marca-c, #8d969f) 80%, #6b747e);   /* de fondo, con letra blanca encima */
  --marca-fuerte: color-mix(in srgb, var(--marca-c, #8d969f) 45%, #e4e8ec);
  --marca-suave: color-mix(in srgb, var(--marca-c, #8d969f) 22%, #1b1f24);
  --sombra: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 16px rgba(0, 0, 0, .3);
  --sombra2: 0 2px 6px rgba(0, 0, 0, .4), 0 16px 40px rgba(0, 0, 0, .5);
}
html[data-tema="oscuro"] body { background: var(--fondo); color: var(--tinta); }
/* Los logos de las empresas son para fondo claro: van sobre un cuadrito claro. Las fotos, igual. */
html[data-tema="oscuro"] body .emp-logo.con-img { background-color: #fff; box-shadow: none; }
/* Ingresar: los logos de las empresas, en sus botones claros; la elegida, con el borde claro. */
html[data-tema="oscuro"] body .entrar-emp { background: #f4f5f7; border-color: #f4f5f7; color: #1d2126; }
html[data-tema="oscuro"] body .entrar-emp[aria-checked="true"] { border-color: var(--marca-fuerte); box-shadow: 0 0 0 3px rgba(255, 255, 255, .35); }
html[data-tema="oscuro"] input, html[data-tema="oscuro"] select, html[data-tema="oscuro"] textarea {
  background-color: var(--papel); color: var(--tinta); border-color: var(--linea-fuerte); }
html[data-tema="oscuro"] ::placeholder { color: var(--tenue); }
}

/* Yo › Cómo se ve: el selector de tema. */
.yo-tema { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.yo-tema label { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; cursor: pointer;
  border: 1px solid var(--linea); border-radius: var(--radio-chico); background: var(--papel); font-size: 14px; text-align: center; }
.yo-tema input { position: absolute; opacity: 0; pointer-events: none; }
.yo-tema input:checked + label { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); font-weight: 600; }
.yo-tema input:focus-visible + label { outline: 3px solid var(--marca-fuerte); outline-offset: 2px; }
.yo-tema i { width: 44px; height: 30px; border-radius: 7px; border: 1px solid var(--linea-fuerte); display: block; }
.yo-tema .t-claro { background: linear-gradient(180deg, #1d2126 0 32%, #f4f5f7 32%); }
.yo-tema .t-oscuro { background: linear-gradient(180deg, #1d2126 0 32%, #121417 32%); }
.yo-tema .t-auto { background: linear-gradient(90deg, #f4f5f7 50%, #121417 50%); }