/*
 * Omeigo Medición · hoja de estilos única del panel y de los informes (gestion.omeigo.net).
 *
 * Marca Omeigo (omeigocontrol/docs/marca.md): paleta cerrada (tinta #181818, piedra #8A8780, línea #D9D5CC,
 * papel #F4F1EA, blanco), Hanken Grotesk para leer, Georgia SOLO en los titulares (nunca en cifras, listas ni botones)
 * y el verde de Informes #17693A reservado a lo que sube (la flecha ↑ y la cifra «después»). Nunca solo el color.
 * Lectura fácil: 18 px para leer y nada por debajo de 16 px; botones y campos de 56 px.
 * Móvil primero (320-390 px sin desbordes). Sin nada en línea (CSP): los gráficos son SVG con clases de aquí.
 * El modo oscuro sale solo con los tokens (los mismos que omeigocontrol).
 */

@font-face {
  font-family: "Hanken Grotesk";
  src: url("fuentes/HankenGrotesk-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("fuentes/HankenGrotesk-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
/* Reserva medida (brand.json): el texto no salta cuando llega la letra. */
@font-face {
  font-family: "Hanken Reserva";
  src: local("Arial");
  size-adjust: 99.41%;
  ascent-override: 100.59%;
  descent-override: 30.48%;
  line-gap-override: 0%;
}

:root {
  --c-tinta: #181818;
  --c-piedra: #8A8780;
  --c-linea: #D9D5CC;
  --c-papel: #F4F1EA;
  --c-blanco: #FFFFFF;

  --c-fondo: var(--c-papel);
  --c-superficie: var(--c-blanco);
  --c-texto: var(--c-tinta);
  --c-borde: var(--c-linea);
  --c-borde-fuerte: var(--c-piedra);
  --c-foco: #1F4FD1;
  --c-primario: var(--c-tinta);
  --c-primario-texto: var(--c-papel);
  --c-subida: #17693A;           /* solo Informes: 6,7:1 sobre blanco, 6:1 sobre papel */
  --c-aviso-fondo: #F6DE7E;      /* franja PILOTO, texto en tinta */
  --c-peligro: #A8231A;
  --c-peligro-fondo: #F8E1DE;
  --c-naranja: #9A4A10;
  --c-naranja-fondo: #F9E6D6;
  --c-exito: #24613A;
  --c-exito-fondo: #DFEEE3;
  --c-info-fondo: #E1E8F5;

  --f-texto: "Hanken Grotesk", "Hanken Reserva", Arial, Helvetica, sans-serif;
  --f-titular: Georgia, "Times New Roman", Times, serif;
  --fw-normal: 400;
  --fw-fuerte: 500;

  --t-s: 1rem;          /* 16 px: el mínimo */
  --t-m: 1.125rem;      /* 18 px: para leer */
  --t-l: 1.5rem;        /* 24 px: título de bloque (Georgia) */
  --t-xl: 2rem;         /* 32 px: titular */
  --t-cifra: 2.5rem;    /* 40 px: una ficha de cifra */

  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --r-m: 8px;
  --r-l: 14px;
  --toque: 56px;
  --ancho: 46rem;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --c-fondo: #161615;
    --c-superficie: #201F1D;
    --c-texto: #F4F1EA;
    --c-borde: #3A3935;
    --c-borde-fuerte: #6E6B64;
    --c-foco: #8FB0FF;
    --c-primario: #F4F1EA;
    --c-primario-texto: #181818;
    --c-subida: #8FD6A5;
    --c-aviso-fondo: #5A4A10;
    --c-peligro: #FF9C92;
    --c-peligro-fondo: #4A1C18;
    --c-naranja: #FFB27A;
    --c-naranja-fondo: #45280F;
    --c-exito: #8FD6A5;
    --c-exito-fondo: #1B3624;
    --c-info-fondo: #1C2A45;
  }
}

/* ───────────────────────────── Base ───────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--c-fondo);
  color: var(--c-texto);
  font-family: var(--f-texto);
  font-size: var(--t-m);
  font-weight: var(--fw-normal);
  line-height: 1.6;
  overflow-wrap: anywhere;
}
h1, h2, h3 { margin: 0 0 var(--e-3); line-height: 1.2; font-weight: var(--fw-normal); }
p, ul, ol, dl, table { margin: 0 0 var(--e-4); }
strong, b { font-weight: var(--fw-fuerte); }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--c-foco); outline-offset: 2px; border-radius: 4px; }
svg { max-width: 100%; }
code { font-size: var(--t-s); overflow-wrap: anywhere; }

.oculto {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important;
  margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}
.saltar { position: absolute; left: var(--e-4); top: -4rem; padding: var(--e-2) var(--e-3); background: var(--c-primario); color: var(--c-primario-texto); border-radius: var(--r-m); z-index: 10; }
.saltar:focus { top: var(--e-2); }

/* ───────────────────────────── Maqueta ───────────────────────────── */
.franja { margin: 0; padding: var(--e-3) var(--e-4); font-size: var(--t-s); line-height: 1.5; }
.franja--piloto { background: var(--c-aviso-fondo); color: var(--c-texto); border-bottom: 3px solid var(--c-texto); }
.franja--cliente { background: var(--c-info-fondo); color: var(--c-texto); border-bottom: 1px solid var(--c-borde); }

.cabecera, .contenido, .pie { width: min(var(--ancho), 100%); margin: 0 auto; padding-left: var(--e-4); padding-right: var(--e-4); }
.cabecera { padding-top: var(--e-4); }
.cabecera__fila {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
  padding-bottom: var(--e-3); border-bottom: 2px solid var(--c-texto);
}
.cabecera__marca { display: inline-flex; color: var(--c-texto); line-height: 0; }
.logo { width: 6.5rem; height: 2.83rem; color: var(--c-texto); } /* 45 px de alto: el mínimo del manual es 32 */
.cabecera__salir { margin: 0; }
.cabecera__web { margin: var(--e-3) 0 var(--e-2); font-size: var(--t-s); }

.pestanas { margin: var(--e-2) 0 0; }
.pestanas ul { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: 0; padding: 0; list-style: none; }
.pestanas a {
  display: inline-flex; align-items: center; min-height: 44px; padding: var(--e-1) var(--e-3);
  border: 1px solid var(--c-borde-fuerte); border-radius: 999px; font-size: var(--t-s); text-decoration: none; background: var(--c-superficie);
}
.pestanas a:hover { border-color: var(--c-texto); }
.pestanas a[aria-current="page"] { background: var(--c-primario); color: var(--c-primario-texto); border-color: var(--c-primario); font-weight: var(--fw-fuerte); }

.contenido { padding-top: var(--e-5); padding-bottom: var(--e-6); }
.pie { padding-top: var(--e-4); padding-bottom: var(--e-6); border-top: 1px solid var(--c-borde); font-size: var(--t-s); }
.pie p { margin: 0; }

/* ───────────────────────────── Textos ───────────────────────────── */
.etiqueta { margin: 0 0 var(--e-2); font-size: var(--t-s); font-weight: var(--fw-fuerte); letter-spacing: 0.04em; text-transform: uppercase; }
.titular { font-family: var(--f-titular); font-size: var(--t-xl); line-height: 1.15; text-wrap: balance; }
.titular--grande { font-size: 1.875rem; line-height: 1.2; }
.titular .cifra { font-family: var(--f-texto); font-weight: var(--fw-fuerte); font-size: 1.2em; letter-spacing: -0.02em; white-space: nowrap; }
.subtitular { font-family: var(--f-titular); font-size: var(--t-l); line-height: 1.25; }
.mini { margin: var(--e-5) 0 var(--e-2); font-size: var(--t-m); font-weight: var(--fw-fuerte); }
.entradilla { font-size: var(--t-m); }
.frase-grande { font-size: 1.375rem; line-height: 1.4; }
.comparacion { font-size: var(--t-m); }
.sube, .despues-sube { color: var(--c-subida); font-weight: var(--fw-fuerte); }
.nota { font-size: var(--t-s); }
.fuente { margin-top: var(--e-3); font-size: var(--t-s); }
.fuente::before { content: "◷ "; content: "◷ " / ""; }
.mas { margin-top: var(--e-3); font-size: var(--t-s); }
.num { font-family: var(--f-texto); font-weight: var(--fw-normal); }  /* cifras de un titular: nunca en Georgia */

.heroe { margin-bottom: var(--e-5); }
.bloque { margin: 0 0 var(--e-6); padding-top: var(--e-4); border-top: 1px solid var(--c-borde); }
.semanas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-3); margin-top: var(--e-4); font-size: var(--t-s); }
.semanas a, .elegir a { display: inline-flex; align-items: center; min-height: 44px; }

.aviso { padding: var(--e-3) var(--e-4); border-radius: var(--r-m); border-left: 4px solid currentColor; }
.aviso--bien { background: var(--c-exito-fondo); color: var(--c-texto); border-left-color: var(--c-exito); }
.aviso--mal { background: var(--c-peligro-fondo); color: var(--c-texto); border-left-color: var(--c-peligro); }

.lista-simple { padding-left: 1.25em; }
.lista-simple li + li { margin-top: var(--e-2); }
.lista-enlaces { padding: 0; list-style: none; }
.lista-enlaces a { display: flex; align-items: center; min-height: var(--toque); }

/* ───────────────────────────── Fichas de cifras ───────────────────────────── */
.fichas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-2); padding: 0; list-style: none; }
.ficha { display: grid; align-content: start; gap: var(--e-1); padding: var(--e-3); background: var(--c-superficie); border: 1px solid var(--c-borde); border-radius: 12px; }
.ficha p { margin: 0; }
.ficha__que { font-size: var(--t-s); line-height: 1.35; }
.ficha__cifra { font-size: var(--t-cifra); font-weight: var(--fw-fuerte); line-height: 1.1; letter-spacing: -0.02em; }
.ficha__detalle { font-size: var(--t-s); line-height: 1.35; }
@media (min-width: 40rem) { .fichas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ───────────────────────────── De dónde vinieron ───────────────────────────── */
.canales { display: grid; gap: var(--e-2); padding: 0; list-style: none; }
.canal { padding: var(--e-3); background: var(--c-superficie); border: 1px solid var(--c-borde); border-radius: 12px; }
.canal p { margin: 0; }
.canal__frase { font-size: var(--t-s); }
.solo-ancho { display: none; }
@media (min-width: 40rem) {
  .solo-movil { display: none; }
  .solo-ancho { display: block; }
}

.tabla-envoltorio { max-width: 100%; overflow-x: auto; margin: 0 0 var(--e-4); }
.tabla { width: 100%; border-collapse: collapse; background: var(--c-superficie); font-size: var(--t-s); margin: 0; }
.tabla th, .tabla td { padding: var(--e-2) var(--e-3); border-top: 1px solid var(--c-borde); text-align: left; vertical-align: top; }
.tabla thead th { border-top: 0; font-weight: var(--fw-fuerte); }
.tabla tfoot th, .tabla tfoot td { border-top: 2px solid var(--c-texto); }
.tabla th[scope="row"] { font-weight: var(--fw-normal); }
.tabla--canales td, .tabla--canales thead th:not(:first-child) { text-align: right; white-space: nowrap; }
.tabla--datos th { width: 45%; overflow-wrap: anywhere; }
.tabla--eventos td { white-space: nowrap; }
.tabla--antes { width: auto; min-width: 12rem; margin: var(--e-2) 0; }
.tabla--antes td { text-align: right; font-weight: var(--fw-fuerte); font-size: var(--t-m); }

/* ───────────────────────────── Listas uno a uno ───────────────────────────── */
.dia-titulo { margin: var(--e-5) 0 var(--e-2); font-size: var(--t-m); font-weight: var(--fw-fuerte); }
.contactos { padding: 0; list-style: none; border-top: 1px solid var(--c-borde); }
.contacto { padding: var(--e-2) 0; border-bottom: 1px solid var(--c-borde); line-height: 1.5; }
.contacto__hora { font-weight: var(--fw-fuerte); font-variant-numeric: tabular-nums; }
.contacto__que { font-weight: var(--fw-fuerte); }

.elegir { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); margin: 0 0 var(--e-3); }
.elegir__texto { margin: 0; font-size: var(--t-s); }
.elegir ul { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: 0; padding: 0; list-style: none; }
.elegir a { padding: 0 var(--e-3); border: 1px solid var(--c-borde-fuerte); border-radius: 999px; text-decoration: none; font-size: var(--t-s); background: var(--c-superficie); }
.elegir a[aria-current="page"] { background: var(--c-primario); color: var(--c-primario-texto); border-color: var(--c-primario); }

/* ───────────────────────────── Gráficos (SVG) ───────────────────────────── */
.barras { display: grid; gap: var(--e-3); padding: 0; list-style: none; }
.barras__fila {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "que cifra" "barra barra" "marca marca";
  column-gap: var(--e-3); row-gap: var(--e-1); align-items: center;
}
.barras__que { grid-area: que; font-size: var(--t-s); }
.barras__cifra { grid-area: cifra; font-weight: var(--fw-fuerte); font-variant-numeric: tabular-nums; text-align: right; font-size: var(--t-s); }
.barras__fila .barra { grid-area: barra; display: block; width: 100%; height: 14px; }
.barras__marca { grid-column: 1 / -1; font-size: var(--t-s); }
@media (min-width: 40rem) {
  .barras__fila { grid-template-columns: 11rem minmax(0, 1fr) 8rem; grid-template-areas: "que barra cifra" "marca marca marca"; }
  .barras--meses .barras__fila { grid-template-columns: 13rem minmax(0, 1fr) 8rem; }
}
.barra__fondo { fill: var(--c-borde); }
.barra__valor { fill: var(--c-texto); }
.barra__hueco { fill: none; stroke: var(--c-borde-fuerte); stroke-width: 1; stroke-dasharray: 3 2; vector-effect: non-scaling-stroke; }

/* Las esquinas redondas las pone el CSS (con preserveAspectRatio="none" un rx del SVG saldría estirado). */
.avance { display: block; width: 100%; height: 12px; margin: var(--e-2) 0; border-radius: 6px; overflow: hidden; }
.avance__fondo { fill: var(--c-borde); }
.avance__hecho { fill: var(--c-texto); }

/* ───────────────────────────── Trabajos ───────────────────────────── */
.hechos, .midiendo { display: grid; gap: var(--e-3); padding: 0; list-style: none; }
.hecho, .midiendo__trabajo { padding: var(--e-3) var(--e-4); background: var(--c-superficie); border: 1px solid var(--c-borde); border-radius: 12px; }
.hecho p, .midiendo__trabajo p { margin: 0 0 var(--e-2); }
.hecho p:last-child, .midiendo__trabajo p:last-child { margin-bottom: 0; }
.hecho__cuando { font-size: var(--t-s); }
.hecho__titulo { font-weight: var(--fw-fuerte); }

.linea { display: grid; gap: var(--e-5); padding: 0; list-style: none; }
.trabajo { padding: 0 0 0 var(--e-4); border-left: 3px solid var(--c-texto); }
.trabajo__fecha { margin: 0 0 var(--e-1); font-size: var(--t-s); }
.trabajo__titulo { font-family: var(--f-titular); font-size: 1.375rem; line-height: 1.25; }
.pasos { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: 0 0 var(--e-3); padding: 0; list-style: none; font-size: var(--t-s); }
.paso { display: inline-flex; align-items: center; gap: var(--e-1); padding: 2px var(--e-3); border: 1px solid var(--c-borde-fuerte); border-radius: 999px; background: var(--c-superficie); }
.paso--actual { border: 2px solid var(--c-texto); font-weight: var(--fw-fuerte); }
.paso--pendiente { border-style: dashed; }
.medicion, .evaluacion { margin: var(--e-3) 0; padding: var(--e-3) var(--e-4); background: var(--c-superficie); border: 1px solid var(--c-borde); border-radius: 12px; }
.medicion p, .evaluacion p { margin: 0 0 var(--e-2); }
.evaluacion__titulo { font-weight: var(--fw-fuerte); letter-spacing: 0.03em; }

/* ───────────────────────────── Vigilada ───────────────────────────── */
.dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--e-1); max-width: 26rem; padding: 0; list-style: none; }
.dia { display: grid; justify-items: center; gap: 2px; padding: var(--e-2) 0; background: var(--c-superficie); border: 1px solid var(--c-borde); border-radius: var(--r-m); }
.dia__letra { font-size: var(--t-s); }
.dia__marca { font-size: 1.25rem; font-weight: var(--fw-fuerte); line-height: 1.2; min-height: 1.5rem; }
.dia--fallo { border: 2px solid var(--c-texto); }
.dia--antes { background: transparent; border-style: dashed; }

/* ───────────────────────────── Vista de Juan ───────────────────────────── */
.webs { display: grid; gap: var(--e-4); padding: 0; list-style: none; }
.web { padding: var(--e-4); background: var(--c-superficie); border: 1px solid var(--c-borde); border-radius: var(--r-l); }
.web__nombre { margin: 0 0 var(--e-1); font-size: 1.25rem; font-weight: var(--fw-fuerte); }
.web__detalle, .web__enlaces { font-size: var(--t-s); margin-bottom: var(--e-3); }
.web__enlaces { margin: var(--e-3) 0 0; }

.semaforos { display: grid; gap: var(--e-2); margin: var(--e-3) 0 0; padding: 0; list-style: none; }
@media (min-width: 40rem) { .semaforos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.semaforo { display: flex; align-items: flex-start; gap: var(--e-2); padding: var(--e-2) var(--e-3); border-radius: var(--r-m); font-size: var(--t-s); line-height: 1.4; border: 1px solid var(--c-borde); }
.semaforo__marca { flex: none; display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; font-weight: var(--fw-fuerte); border: 2px solid currentColor; }
.semaforo--bien { background: var(--c-exito-fondo); }
.semaforo--bien .semaforo__marca { color: var(--c-exito); }
.semaforo--aviso { background: var(--c-naranja-fondo); }
.semaforo--aviso .semaforo__marca { color: var(--c-naranja); }
.semaforo--mal { background: var(--c-peligro-fondo); }
.semaforo--mal .semaforo__marca { color: var(--c-peligro); }
.semaforo--nada { background: var(--c-superficie); }

.alarmas { display: grid; gap: var(--e-2); padding: 0; list-style: none; }
.alarma { padding: var(--e-3) var(--e-4); background: var(--c-superficie); border: 1px solid var(--c-borde); border-left: 5px solid var(--c-naranja); border-radius: var(--r-m); }
.alarma--grave { border-left-color: var(--c-peligro); }
.alarma p { margin: 0 0 var(--e-1); }
.alarma__gravedad { display: inline-block; margin-right: var(--e-2); padding: 0 var(--e-2); border: 1px solid currentColor; border-radius: 4px; font-size: var(--t-s); font-weight: var(--fw-fuerte); letter-spacing: 0.04em; }
.alarma__detalle, .alarma__cuando { font-size: var(--t-s); }

.comprobaciones { display: grid; gap: var(--e-1); padding: 0; list-style: none; font-size: var(--t-s); }
.comprobacion { display: flex; gap: var(--e-2); align-items: baseline; }
.comprobacion__marca { flex: none; font-weight: var(--fw-fuerte); }
.comprobacion--mal { color: var(--c-peligro); }

.datos { display: grid; gap: var(--e-2); }
.datos div { display: grid; gap: 0; padding-bottom: var(--e-2); border-bottom: 1px solid var(--c-borde); }
.datos dt { font-size: var(--t-s); font-weight: var(--fw-fuerte); }
.datos dd { margin: 0; font-size: var(--t-s); }
@media (min-width: 40rem) { .datos div { grid-template-columns: 14rem minmax(0, 1fr); gap: var(--e-3); } }

.tarjeta { margin: 0 0 var(--e-4); padding: var(--e-4); background: var(--c-superficie); border: 1px solid var(--c-borde); border-radius: var(--r-l); }
.publicados { display: grid; gap: var(--e-2); padding: 0; list-style: none; }
.publicado { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2); padding: var(--e-2) 0; border-bottom: 1px solid var(--c-borde); font-size: var(--t-s); }
.desplegable summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-size: var(--t-s); }

/* ───────────────────────────── Formularios y botones ───────────────────────────── */
.entrar { max-width: 28rem; }
.formulario { display: grid; gap: var(--e-4); margin: 0 0 var(--e-4); }
.formulario--suelto { margin: 0; }
.campo { display: grid; gap: var(--e-1); }
.campo label { font-weight: var(--fw-fuerte); }
input[type="text"], input[type="password"], textarea {
  width: 100%; min-height: var(--toque); padding: var(--e-3); font: inherit; font-size: var(--t-m); color: var(--c-texto);
  background: var(--c-superficie); border: 2px solid var(--c-borde-fuerte); border-radius: var(--r-m);
}
textarea { min-height: 7rem; resize: vertical; line-height: 1.5; }
input:focus-visible, textarea:focus-visible { border-color: var(--c-texto); }
.boton {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--toque); padding: var(--e-3) var(--e-5);
  font: inherit; font-size: var(--t-m); font-weight: var(--fw-fuerte); line-height: 1.3; text-align: center; text-decoration: none;
  border-radius: var(--r-m); cursor: pointer; border: 2px solid transparent;
}
.boton--primario { background: var(--c-primario); color: var(--c-primario-texto); border-color: var(--c-primario); width: 100%; }
.boton--secundario { background: transparent; color: var(--c-texto); border-color: var(--c-texto); width: 100%; }
@media (min-width: 40rem) { .boton--primario, .boton--secundario { width: auto; } }
.boton--enlace { min-height: 44px; padding: var(--e-1) var(--e-2); background: transparent; color: var(--c-texto); text-decoration: underline; text-underline-offset: 0.2em; font-weight: var(--fw-normal); font-size: var(--t-s); }

/* ───────────────────────────── Escritorio ───────────────────────────── */
@media (min-width: 48rem) {
  .titular { font-size: 2.25rem; }
  .titular--grande { font-size: 2.5rem; }
  .contenido { padding-top: var(--e-6); }
}

@media print {
  .pestanas, .cabecera__salir, .saltar, .semanas, .elegir { display: none; }
  body { background: #fff; color: #000; }
}