:root {
  --fondo: #f5f6f8;
  --tarjeta: #ffffff;
  --texto: #1d2330;
  --suave: #5c6577;
  --borde: #dfe3ea;
  --acento: #2457d6;
  --acento-texto: #ffffff;
  --error-fondo: #fdecec;
  --error-texto: #a1261f;
  --ok-fondo: #e8f6ee;
  --ok-texto: #1d6b3f;
  /* Gráfica: huecos 1 y 2 de la paleta de referencia, validados contra la
     superficie de la tarjeta (scripts/validate_palette.js, todo PASS). */
  --serie-1: #2a78d6; /* medido */
  --serie-2: #eb6834; /* estimado con el método antiguo */
  --rejilla: #e8ebf0;
  /* Franja horaria: dentro de horario = serie 1, fuera = serie 2 (mismo par
     validado). Fondos neutros para el horario y la noche. */
  --horario: #eef3fb;
  --noche: #e9e9ee;
  /* Estado de aviso (reservado: siempre con icono y texto, nunca solo color). */
  --alerta: #9a5b00;
  --alerta-fondo: #fff4e0;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #12151b;
    --tarjeta: #1b2029;
    --texto: #e6e9ef;
    --suave: #9aa3b5;
    --borde: #2c333f;
    --acento: #6e98ff;
    --acento-texto: #0b1020;
    --error-fondo: #3a1d1c;
    --error-texto: #ffb4ab;
    --ok-fondo: #173226;
    --ok-texto: #8fdcae;
    --serie-1: #3987e5;
    --serie-2: #d95926;
    --rejilla: #262c37;
    --horario: #1f2a3c;
    --noche: #151920;
    --alerta: #ffc266;
    --alerta-fondo: #3a2c12;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--fondo);
  color: var(--texto);
}
a { color: var(--acento); }
.cabecera {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px; background: var(--tarjeta); border-bottom: 1px solid var(--borde);
}
.marca { font-weight: 700; font-size: 18px; text-decoration: none; color: var(--texto); }
.usuario { display: flex; align-items: center; gap: 12px; color: var(--suave); }
.usuario form { margin: 0; }
.contenido { max-width: 960px; margin: 0 auto; padding: 24px 16px; }
.tarjeta {
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 10px;
  padding: 24px; margin-bottom: 20px;
}
.estrecha { max-width: 460px; margin-left: auto; margin-right: auto; }
.estrecha.ancha { max-width: 640px; }
.pasos { padding-left: 20px; }
.pasos li { margin-bottom: 8px; }
.codigo { background: var(--fondo); border: 1px solid var(--borde); border-radius: 8px; padding: 10px 12px; overflow-x: auto; font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
.huella { word-break: break-all; white-space: pre-wrap; }
h1 { font-size: 24px; margin: 0 0 16px; }
h2 { font-size: 16px; margin: 16px 0 8px; }
label { display: block; font-weight: 600; margin: 14px 0 6px; }
input {
  width: 100%; padding: 10px 12px; font: inherit; color: var(--texto);
  background: var(--fondo); border: 1px solid var(--borde); border-radius: 8px;
}
input:focus { outline: 2px solid var(--acento); outline-offset: 1px; }
.boton {
  display: inline-block; margin-top: 18px; padding: 10px 18px; font: inherit; font-weight: 600;
  color: var(--acento-texto); background: var(--acento); border: 0; border-radius: 8px;
  cursor: pointer; text-decoration: none;
}
.boton.secundario { color: var(--texto); background: transparent; border: 1px solid var(--borde); }
.boton.pequeno { margin: 0; padding: 6px 12px; font-size: 14px; }
.enlace { background: none; border: 0; padding: 0; font: inherit; color: var(--acento); cursor: pointer; }
.acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.aviso { padding: 10px 12px; border-radius: 8px; }
.aviso.error { background: var(--error-fondo); color: var(--error-texto); }
.aviso.ok { background: var(--ok-fondo); color: var(--ok-texto); }
.nota { color: var(--suave); font-size: 14px; }
.caja { border: 1px solid var(--borde); border-radius: 8px; padding: 4px 16px; margin: 16px 0; }
.caja ul { margin: 0 0 8px; padding-left: 20px; }
code { font-family: ui-monospace, Consolas, monospace; font-size: 15px; }
.fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.tabla { width: 100%; border-collapse: collapse; margin-top: 12px; }
.tabla th, .tabla td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--borde); }
.tabla th { font-size: 13px; color: var(--suave); font-weight: 600; }
.etiqueta { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 13px; }
.etiqueta.verde { background: var(--ok-fondo); color: var(--ok-texto); }
.etiqueta.gris { background: var(--fondo); color: var(--suave); }
.pie { text-align: center; color: var(--suave); font-size: 13px; padding: 24px 16px; }
@media (max-width: 600px) {
  .equipos th:nth-child(3), .equipos td:nth-child(3) { display: none; } /* Organización */
}

/* ─── Panel de horas ─────────────────────────────────────────────────── */
.rango { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rango input { width: auto; padding: 6px 8px; }
label.enlinea { display: inline; margin: 0; font-weight: 500; color: var(--suave); }
.atajos { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 4px 0 16px; font-size: 14px; }
.atajos a { text-decoration: none; }
.atajos a.actual { color: var(--texto); font-weight: 600; text-decoration: underline; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 20px; }
.kpi { border: 1px solid var(--borde); border-radius: 8px; padding: 14px 16px; }
.kpi-valor { font-size: 26px; font-weight: 700; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; }
.kpi-nombre { color: var(--suave); font-size: 13px; }
.grafica { margin: 0 0 12px; }
.grafica svg { width: 100%; height: auto; display: block; }
/* En pantallas estrechas la gráfica no se encoge hasta ser ilegible: se
   desplaza dentro de su caja (la página no). */
.lienzo { overflow-x: auto; }
@media (max-width: 640px) {
  .grafica svg { min-width: 560px; }
  .kpi-valor { font-size: 22px; }
}
.leyenda { list-style: none; display: flex; gap: 18px; padding: 0; margin: 8px 0; font-size: 14px; color: var(--suave); }
.leyenda li { display: flex; align-items: center; gap: 6px; }
.muestra { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.muestra.preciso { background: var(--serie-1); }
.muestra.estimado { background: var(--serie-2); }
.rejilla { stroke: var(--rejilla); stroke-width: 1; }
.base { stroke: var(--borde); stroke-width: 1; }
.eje { fill: var(--suave); font-size: 11px; font-variant-numeric: tabular-nums; }
.seg.preciso { fill: var(--serie-1); }
.seg.estimado { fill: var(--serie-2); }
.zona { fill: transparent; }
.dia:hover .zona { fill: var(--rejilla); }
.dia:hover .seg { filter: brightness(1.1); }
.periodos { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.detalle { margin-top: 16px; }
.detalle summary { cursor: pointer; color: var(--acento); }
@media (forced-colors: active) {
  .seg.preciso { fill: CanvasText; }
  .seg.estimado { fill: GrayText; }
}

/* ─── ¿Desconectas? ──────────────────────────────────────────────────── */
.senales { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 8px; }
.senal { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 8px; }
.senal strong { display: block; }
.senal .nota { display: block; }
.senal .icono {
  flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: 13px; font-weight: 700; background: var(--ok-fondo); color: var(--ok-texto);
}
.senal.alerta { background: var(--alerta-fondo); border-color: transparent; }
.senal.alerta .icono { background: var(--alerta); color: var(--tarjeta); }
.marca-alerta { font-size: 12px; color: var(--alerta); font-weight: 600; white-space: nowrap; }
.muestra.dentro { background: var(--serie-1); }
.muestra.fuera { background: var(--serie-2); }
.tl-horario { fill: var(--horario); }
.tl-noche { fill: var(--noche); }
.tl-dentro { fill: var(--serie-1); }
.tl-fuera { fill: var(--serie-2); }
.fila-dia:hover .tl-dentro, .fila-dia:hover .tl-fuera { filter: brightness(1.12); }
.dia-etiqueta { font-size: 11px; }
.dia-etiqueta.finde { font-weight: 700; }
@media (forced-colors: active) {
  .tl-dentro { fill: CanvasText; }
  .tl-fuera { fill: Highlight; }
  .tl-horario, .tl-noche { fill: Canvas; }
}