/* Portal Vifer v3 · TEMA OSCURO (Ajustes > Apariencia). El claro es el de serie; este cambia solo los tokens:
   azul noche profundo, tarjetas que se separan por luz y no por sombra, y los colores de estado aclarados para
   que se lean sobre oscuro. Lo eligio Sergio el 2026-10-12: "que se pueda cambiar a negro tambien". */
:root[data-theme="oscuro"] {
  --scheme: dark;
  --bg: #0a0f19;
  --surface-1: #111827;
  --surface-2: #162032;
  --surface-3: #1c283d;
  --fg: #eef2f8;
  --fg-muted: #b0bacb;
  --fg-dim: #949fb2;
  --fg-on-cyan: #04181b;
  --cyan: #35c8d4;
  --cyan-bright: #6ad9e2;
  --cyan-deep: #5fd3dd;
  --cyan-tint-08: rgba(53, 200, 212, 0.08);
  --cyan-tint-12: rgba(53, 200, 212, 0.13);
  --cyan-tint-20: rgba(53, 200, 212, 0.2);
  --success: #4fd69a;
  --warning: #f2b55e;
  --danger: #ff8080;
  --border-subtle: rgba(226, 233, 244, 0.08);
  --border-mid: rgba(226, 233, 244, 0.14);
  --border-strong: rgba(226, 233, 244, 0.26);
  --border-cyan: rgba(53, 200, 212, 0.35);
  --border-cyan-strong: rgba(53, 200, 212, 0.65);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);
  --glow-cyan-sm: 0 0 0 1px rgba(53, 200, 212, 0.3), 0 6px 20px rgba(53, 200, 212, 0.14);
  --card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 1px 2px rgba(0, 0, 0, 0.45), 0 12px 32px rgba(0, 0, 0, 0.32);
  --ink-rgb: 226, 233, 244;
  --paper-rgb: 17, 24, 39;
  --hue-k: 62%;
  --hue-base: #ffffff;
  --glow-top: rgba(53, 200, 212, 0.13);
  --ghost: #4a5770;
  --cyan-wash: rgba(53, 200, 212, 0.12);
  --ej-ok: var(--success);
  --ej-okbg: rgba(79, 214, 154, 0.14);
  --ej-warnbg: rgba(242, 181, 94, 0.14);
  --ej-winbg: rgba(79, 214, 154, 0.1);
  --ej-badbg: rgba(255, 128, 128, 0.14);
}
:root[data-theme="oscuro"] .pill--construccion, :root[data-theme="oscuro"] .pill--st-construccion { color: #c4b5fd; }
/* el informe del mes y los documentos siguen siendo papel: se leen como un impreso tambien en oscuro */

/* Ajustes > Apariencia: tres opciones con una miniatura del portal en cada tema (colores fijos: es una muestra) */
.look { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.look__o { display: grid; gap: 12px; padding: 12px; border: 1px solid var(--border-mid); border-radius: 18px; background: var(--surface-1); color: var(--fg); text-align: left; transition: border-color var(--dur-fast), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast); }
.look__o:hover { transform: translateY(-2px); box-shadow: var(--card-shadow); }
.look__o[aria-checked="true"] { border-color: var(--cyan); box-shadow: 0 0 0 2px var(--cyan); }
.look__t { display: grid; gap: 4px; padding: 0 4px 4px; } .look__t b { font-size: 16px; font-weight: 600; } .look__t .dim { font-size: 13.5px; line-height: 1.45; }
.look__mini { --m-bg: #f3f5f8; --m-side: #ffffff; --m-card: #ffffff; --m-line: #dfe4ec; --m-acc: #00717d; display: grid; grid-template-columns: 26% 1fr; height: 116px; overflow: hidden; border-radius: 12px; background: var(--m-bg); border: 1px solid var(--m-line); }
.look__mini--oscuro { --m-bg: #0a0f19; --m-side: #111827; --m-card: #162032; --m-line: #243049; --m-acc: #35c8d4; }
.look__mini--auto { background: linear-gradient(115deg, #f3f5f8 50%, #0a0f19 50%); }
.look__mini--auto .look__side { background: #ffffff; } .look__mini--auto .look__card--b { background: #162032; border-color: #243049; }
.look__side { background: var(--m-side); border-right: 1px solid var(--m-line); }
.look__main { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 10px 1fr; gap: 8px; padding: 10px; }
.look__bar { grid-column: 1 / -1; width: 46%; border-radius: 4px; background: var(--m-acc); }
.look__card { border-radius: 8px; background: var(--m-card); border: 1px solid var(--m-line); }
@media (prefers-reduced-motion: reduce) { .look__o:hover { transform: none; } }