/* =========================================================
   NOVANET Ayuda — estilos (v3)
   Sobrio y con aire: fondo liso, superficies apenas más claras,
   bordes casi invisibles, letra del sistema y un solo acento (cian).
   Orden: variables · base · estructura · componentes · pantallas ·
          legal · escritorio · accesibilidad
   ========================================================= */

/* ---------- Variables ---------- */
:root {
  /* Superficies (sólidas) */
  --fondo: #0b0f17;
  --tarjeta: #121826;
  --tarjeta-2: #1a2131;       /* hover y bloques internos */
  --hundido: #0e131d;         /* campos de texto y diagramas */
  --borde: rgba(255, 255, 255, 0.06);   /* borde de tarjetas: casi invisible */
  --linea: rgba(255, 255, 255, 0.08);   /* divisiones dentro de listas */
  --borde-control: #636e82;   /* borde de controles: 3:1 o más */

  /* Texto */
  --texto: #f2f4f7;
  --texto-2: #b4bcc8;
  --texto-3: #8a93a3;

  /* Un solo acento (cian de NOVANET), usado poco */
  --acento: #38c6ee;

  /* Botón principal: blanco sólido con texto oscuro */
  --boton: #f2f4f7;
  --boton-hover: #ffffff;
  --boton-activo: #d9dee6;
  --sobre-boton: #0b0f17;

  /* Estados del medidor (siempre con texto, nunca solo color) */
  --bien: #4fcf9f;
  --regular: #e8b65c;
  --mal: #f08585;

  /* Tipografía: la del sistema */
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Medidas */
  --r: 16px;
  --r-sm: 10px;
  --pildora: 999px;
  --margen: 20px;
  --seccion: 40px;            /* aire entre secciones */
  --barra-alto: 72px;
  --tabs-alto: 66px;
  --rapido: 160ms;
  --pantalla: 180ms;
}

/* ---------- Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--fondo);
  color-scheme: dark;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, p, ul, ol, figure { margin: 0; }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.015em; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  border-radius: 4px;
}
h1:focus { outline: none; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.saltar {
  position: fixed;
  top: 8px; left: 8px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--boton);
  color: var(--sobre-boton);
  font-weight: 600;
  border-radius: var(--pildora);
  transform: translateY(-150%);
}
.saltar:focus { transform: none; }

/* Números de medición: misma letra, cifras del mismo ancho */
.cifra,
.contador,
.n-lista,
.dato-txt,
.riel-zona { font-variant-numeric: tabular-nums; }

.ico {
  width: 22px;
  height: 22px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico--sm { width: 18px; height: 18px; }

/* ---------- Estructura ---------- */
.app { min-height: 100vh; min-height: 100dvh; }

.barra {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: calc(var(--barra-alto) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) var(--margen) 0;
  background: var(--fondo);
  border-bottom: 1px solid var(--linea);
}

/* Logo oficial: horizontal, sin estirar ni recolorear */
.marca { display: inline-flex; align-items: center; min-height: 44px; }
.marca img { width: 148px; height: auto; }

/* Navegación: barra inferior en celular, menú lateral en escritorio */
.nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  min-height: calc(var(--tabs-alto) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--fondo);
  border-top: 1px solid var(--linea);
}
.nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  color: var(--texto-3);
  font-size: 0.72rem;
  font-weight: 400;
  transition: color var(--rapido);
}
.nav a span { max-width: 100%; overflow-wrap: anywhere; text-align: center; line-height: 1.1; }
.nav a[aria-current="page"] { color: var(--texto); font-weight: 600; }
.nav a[aria-current="page"] .ico { color: var(--acento); }
.nav a:focus-visible { outline-offset: -4px; }

.barra-acciones { display: flex; align-items: center; gap: 8px; }

main {
  position: relative;
  padding: 8px var(--margen) calc(var(--tabs-alto) + env(safe-area-inset-bottom) + 32px);
  max-width: 1120px;
}

/* ---------- Componentes ---------- */

/* Tarjeta: superficie sólida, borde casi invisible, esquinas de 16px */
.tarjeta {
  position: relative;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--r);
}

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--texto-3);
}

/* Botones: píldora; principal blanco, secundario solo contorno */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: var(--pildora);
  font-weight: 600;
  font-size: 0.97rem;
  white-space: nowrap;
  transition: background-color var(--rapido), border-color var(--rapido), color var(--rapido);
  touch-action: manipulation;
}
.btn .ico { width: 19px; height: 19px; }

.btn--primario { color: var(--sobre-boton); background: var(--boton); }
.btn--primario:hover { background: var(--boton-hover); }
.btn--primario:active,
.btn--primario.tocado { background: var(--boton-activo); }

.btn--secundario { color: var(--texto); background: transparent; border-color: var(--borde-control); }
.btn--secundario:hover { border-color: var(--texto-2); }
.btn--secundario:active,
.btn--secundario.tocado { background: var(--tarjeta-2); }

.btn--chico { min-height: 44px; padding: 0 18px; font-size: 0.92rem; }
.btn--ancho { width: 100%; min-height: 52px; font-size: 1rem; white-space: normal; text-align: center; }
.btn[aria-disabled="true"] { opacity: 0.7; cursor: progress; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn--primario:disabled:hover { background: var(--boton); }

/* Títulos */
.titulo-pantalla {
  font-size: clamp(1.85rem, 6.5vw, 2.6rem);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.entrada {
  margin-top: 12px;
  max-width: 60ch;
  color: var(--texto-2);
  font-size: 1.0625rem;
  line-height: 1.55;
}
.encabezado { padding: 32px 0 var(--seccion); }

/* Enlaces dentro de texto: el acento, subrayado discreto */
.enlace,
.nota-legal a,
.legal a {
  color: var(--acento);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Bloque de foto (con respaldo si la foto no existe) */
.foto {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--tarjeta);
  border-radius: var(--r);
}
.foto picture { display: block; height: 100%; }
.foto img { width: 100%; height: 100%; object-fit: cover; }
/* Foto del inicio: vertical (4/5 en celular, 3/4 en compu) para ver antena, cielo y pueblo */
.foto.foto--inicio { aspect-ratio: 4 / 5; }
.foto--inicio img { object-position: center; }
.foto--inicio figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 16px;
  background: rgba(11, 15, 23, 0.72);
  color: var(--texto);
  font-size: 0.85rem;
}
.foto-vacia {
  display: grid;
  place-items: center;
  height: 100%;
  padding: 16px;
  color: var(--texto-3);
  font-size: 0.9rem;
  text-align: center;
}

/* Aviso corto junto a botones que envían datos */
.nota-legal { margin-top: 12px; font-size: 0.85rem; color: var(--texto-3); }

/* Pie: enlaces legales y firma, centrados y discretos */
.pie {
  display: grid;
  justify-items: center;
  gap: 4px;
  margin-top: 72px;
  padding-top: 28px;
  border-top: 1px solid var(--linea);
  color: var(--texto-3);
  font-size: 0.85rem;
  text-align: center;
}
.pie-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 24px; }
.pie-legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--texto-3);
  transition: color var(--rapido);
}
.pie-legal a:hover { color: var(--texto); }
.pie-legal a[aria-current="page"] { color: var(--texto-2); }
.firma {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 8px;
  color: var(--texto);
  font-size: 0.8rem;
  opacity: 0.5;
  transition: opacity var(--rapido);
}
.firma:hover,
.firma:focus-visible { opacity: 0.85; }
.firma img { height: 20px; width: auto; }

/* =========================================================
   PANTALLA: INICIO
   ========================================================= */
.hero { display: grid; gap: 28px; padding: 36px 0 var(--seccion); }
.hero h1 {
  font-size: clamp(2.4rem, 10vw, 3.75rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  font-weight: 700;
}
.hero h1 em { font-style: normal; }
.hero h1 span {
  display: block;
  margin-top: 12px;
  font-size: 0.46em;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--texto-2);
  font-weight: 600;
  text-wrap: balance;
}
.hero .entrada { margin-top: 18px; }
.hero .etiqueta { margin-bottom: 16px; }

/* Renglones de confianza: ícono de línea y texto gris claro, sin tarjetas */
.confianza { display: grid; gap: 12px; margin-top: 28px; max-width: 60ch; }
.confianza li { display: flex; align-items: flex-start; gap: 12px; color: var(--texto-2); }
.confianza .ico { width: 20px; height: 20px; margin-top: 2px; color: var(--texto-3); }

/* Gráfica de la filosofía */
.traza { padding: 24px 20px 20px; margin-bottom: var(--seccion); }
.traza-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.traza-cab h2 { font-size: 1.0625rem; }
.traza-cab .etiqueta { white-space: nowrap; }
.traza svg { width: 100%; height: auto; overflow: visible; }
.traza .eje { stroke: var(--linea); stroke-width: 1; }
.traza .eje-txt { fill: var(--texto-3); font: 400 10.5px var(--sans); font-variant-numeric: tabular-nums; }
.traza .eje-nota { fill: var(--texto-3); font: 400 10.5px var(--sans); }
.traza polyline { fill: none; stroke-width: 1.1; stroke-linejoin: round; stroke-linecap: round; }
.traza .l-estable { stroke: var(--acento); stroke-width: 1.5; }
.traza .l-inestable { stroke: var(--texto-3); }

.leyenda {
  display: grid;
  align-items: start;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 20px;
}
.leyenda li { display: grid; gap: 2px; font-size: 0.9rem; color: var(--texto-2); }
.leyenda b { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--texto); }
.leyenda b::before { content: ""; width: 14px; height: 2px; border-radius: 1px; background: currentColor; }
.leyenda .estable b::before { background: var(--acento); }
.leyenda .inestable b::before { background: var(--texto-3); }
.leyenda .dato-txt { color: var(--texto-3); }

/* Accesos */
.seccion-cab { margin: 0 0 20px; }
.seccion-cab h2 { font-size: 1.5rem; letter-spacing: -0.02em; }

.accesos { display: grid; gap: 16px; }

.acceso {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px;
  transition: background-color var(--rapido);
}
a.acceso:hover { background: var(--tarjeta-2); }
.acceso h3 { font-size: 1.25rem; line-height: 1.25; }
.acceso p { margin-top: 8px; color: var(--texto-2); font-size: 1rem; }
.acceso .ir {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  color: var(--texto);
  font-weight: 600;
  font-size: 0.97rem;
}
.acceso .ir .ico { width: 18px; height: 18px; color: var(--texto-2); }

/* Botón principal de Inicio (dentro de la tarjeta de diagnóstico) */
.acceso .ir--boton {
  min-height: 48px;
  margin-top: auto;
  padding: 0 24px;
  border-radius: var(--pildora);
  color: var(--sobre-boton);
  background: var(--boton);
  transition: background-color var(--rapido);
}
.acceso--diag p { margin-bottom: 28px; }
.acceso .ir--boton .ico { color: var(--sobre-boton); }
a.acceso:hover .ir--boton { background: var(--boton-hover); }
a.acceso:active .ir--boton { background: var(--boton-activo); }

.acceso--medidor { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center; }
.acceso--medidor .ir { grid-column: 1 / -1; }
.mini-gauge { width: 96px; }
.mini-gauge svg { width: 100%; height: auto; }
.mini-gauge .pista { stroke: #2a3242; }
.mini-gauge .valor-arco[stroke-dasharray="0 100"] { opacity: 0; }
.mini-gauge .valor-arco { stroke: var(--acento); }
.mini-gauge text { fill: var(--texto); font: 600 17px var(--sans); font-variant-numeric: tabular-nums; }
.mini-gauge .unidad { fill: var(--texto-3); font: 400 10px var(--sans); }
.ultima {
  grid-column: 1 / -1;
  align-self: stretch;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--linea);
  font-size: 0.875rem;
  color: var(--texto-3);
}
.ultima b { color: var(--texto-2); font-weight: 600; }

.acceso--lista { padding: 24px 12px 12px; }
.acceso--lista > h3 { margin: 0 12px; }
.temas-mini { margin-top: 12px; align-self: stretch; }
.temas-mini a {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 6px 12px;
  border-radius: var(--r-sm);
  color: var(--texto);
  font-size: 1rem;
  transition: background-color var(--rapido);
}
.temas-mini li + li { border-top: 1px solid var(--linea); }
.temas-mini a:hover { background: var(--tarjeta-2); }
.temas-mini .n-lista { font-size: 0.85rem; color: var(--texto-3); }
.temas-mini .ico { width: 16px; height: 16px; color: var(--texto-3); }

.col-derecha { display: grid; gap: 16px; align-content: start; }

.vista-mini { width: 100%; max-width: 320px; height: auto; margin-top: 20px; overflow: visible; }
.vista-mini path { fill: none; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.vista-mini .suelo { stroke: var(--borde-control); }
.vista-mini .torre, .vista-mini .casa { stroke: var(--texto-3); }
.vista-mini .arbol { stroke: var(--texto-2); }
.vista-mini .emisor { fill: var(--acento); }
.vista-mini .haz { stroke: var(--acento); stroke-dasharray: 3 4; }
.vista-mini .haz--cortado { stroke: var(--texto-3); }
.vista-mini text { fill: var(--texto-3); font-family: var(--sans); font-size: 9px; font-weight: 400; }

/* Instagram: fila simple */
.fila-social {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 0 20px;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--r);
  color: var(--texto);
  transition: background-color var(--rapido);
}
.fila-social:hover { background: var(--tarjeta-2); }
.fila-social span { flex: 1; font-weight: 600; }
.fila-social small { display: block; color: var(--texto-3); font-size: 0.875rem; font-weight: 400; }
.fila-social .ico { color: var(--texto-2); }

/* =========================================================
   PANTALLA: DIAGNÓSTICO
   ========================================================= */
.diag-layout { display: grid; gap: var(--seccion); align-items: start; }
.diag { padding: 24px; }
.diag-progreso {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.diag-progreso .contador { font-size: 0.9rem; color: var(--texto-3); }
.segmentos { display: flex; gap: 4px; }
.segmentos span { width: 24px; height: 3px; border-radius: 2px; background: var(--tarjeta-2); }
.segmentos .hecho { background: var(--texto-3); }
.segmentos .actual { background: var(--acento); }

.diag-pregunta,
.diag-resultado {
  font-size: clamp(1.35rem, 5vw, 1.75rem);
  line-height: 1.22;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.diag-pregunta:focus,
.diag-resultado:focus { outline: none; }
.diag-resultado { margin-top: 8px; }
.diag-ayuda { margin-top: 10px; color: var(--texto-2); max-width: 60ch; }

.respuestas { display: grid; gap: 12px; margin-top: 28px; }
.respuesta {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  padding: 0 20px;
  border: 1px solid var(--borde-control);
  border-radius: var(--r-sm);
  background: transparent;
  text-align: left;
  font-weight: 600;
  font-size: 1rem;
  transition: background-color var(--rapido), border-color var(--rapido);
  touch-action: manipulation;
}
.respuesta:hover { border-color: var(--texto-2); }
.respuesta:active,
.respuesta.tocado { background: var(--tarjeta-2); border-color: var(--texto-2); }
.tecla { width: 22px; height: 22px; color: var(--texto-2); }

.enlace-atras {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 20px;
  color: var(--texto-2);
  font-size: 0.94rem;
  font-weight: 400;
  transition: color var(--rapido);
}
.enlace-atras:hover { color: var(--texto); }

.sub { margin: 28px 0 10px; font-size: 1.0625rem; color: var(--texto); }
.diag-aparte .sub,
.vista-previa .sub,
.muestras .sub { margin: 0; }
.muestras .sub { font-size: 0.97rem; }
.resultado-t { font-size: 0.9rem; font-weight: 400; color: var(--texto-3); }

.pasos li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 8px;
  padding: 14px 0;
  border-top: 1px solid var(--linea);
}
.pasos li span:last-child { text-wrap: pretty; }
.pasos li .n-lista { color: var(--texto-3); font-size: 0.9rem; font-weight: 400; }
.extra li {
  position: relative;
  padding: 12px 14px 12px 30px;
  margin-bottom: 8px;
  border-radius: var(--r-sm);
  background: var(--tarjeta-2);
  color: var(--texto-2);
  font-size: 1rem;
}
.extra li::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 21px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--texto-3);
}

.acciones { display: grid; gap: 12px; margin-top: 28px; }
.acciones .btn { white-space: normal; text-align: center; padding-top: 10px; padding-bottom: 10px; }

.resumen { margin-top: 24px; border-top: 1px solid var(--linea); }
.resumen summary {
  display: flex;
  align-items: center;
  min-height: 48px;
  cursor: pointer;
  color: var(--texto-2);
  font-size: 0.94rem;
  font-weight: 400;
  list-style: none;
}
.resumen summary::-webkit-details-marker { display: none; }
.resumen summary::after { content: "+"; margin-left: auto; color: var(--texto-3); }
.resumen[open] summary::after { content: "−"; }
.resumen li {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-top: 1px solid var(--linea);
  font-size: 0.94rem;
  color: var(--texto-2);
}
.resumen li b { color: var(--texto); font-weight: 600; }

/* "Antes de empezar": lista simple */
.diag-aparte { padding: 0 4px; }
.checklist { margin-top: 12px; padding-left: 18px; list-style: disc; }
.checklist li { padding: 8px 0; font-size: 1rem; color: var(--texto-2); }
.checklist li::marker { color: var(--texto-3); }
.checklist b { display: block; color: var(--texto); font-weight: 600; }

/* =========================================================
   PANTALLA: MEDIDOR
   ========================================================= */
.medidor-layout { display: grid; gap: 16px; align-items: start; }
.medidor { padding: 24px 20px; }
.gauge { position: relative; max-width: 320px; margin: 0 auto; }
.gauge svg { width: 100%; height: auto; overflow: visible; }
.gauge path { fill: none; }
.g-zona { stroke-width: 1.5; opacity: 0.35; stroke-linecap: round; }
.g-pista { stroke: var(--tarjeta-2); stroke-width: 6; stroke-linecap: round; }
.g-valor {
  stroke: var(--acento);
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke-dasharray 200ms ease-out, stroke var(--rapido);
}
.g-valor[stroke-dasharray="0.00 100"] { opacity: 0; }
.g-marca { stroke: var(--borde-control); stroke-width: 1; }
.g-marca.mayor { stroke: var(--texto-3); stroke-width: 1.25; }
.g-num { fill: var(--texto-3); font: 400 10px var(--sans); font-variant-numeric: tabular-nums; }
.g-aguja {
  opacity: 0;
  transform-box: view-box;
  transform-origin: 150px 150px;
  transition: transform 200ms ease-out, opacity var(--rapido);
}
.g-aguja.activa { opacity: 1; }
.g-aguja line { stroke: var(--texto); stroke-width: 1.5; stroke-linecap: round; }
.g-aguja circle { fill: var(--tarjeta); stroke: var(--texto); stroke-width: 1.5; }

.gauge-lectura {
  position: absolute;
  left: 0;
  right: 0;
  top: 66%;
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 6px;
}
.gauge-lectura .valor { font-size: 3rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.gauge-lectura .unidad { font-size: 0.95rem; color: var(--texto-3); }

.m-estado-fila {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  font-size: 0.94rem;
}
.m-estado-fila .contador { color: var(--texto-3); font-size: 0.9rem; }
.estado { display: inline-flex; align-items: center; gap: 8px; color: var(--texto-2); font-weight: 600; }
.estado::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--texto-3); }
.estado[data-estado="bien"]::before { background: var(--bien); }
.estado[data-estado="regular"]::before { background: var(--regular); }
.estado[data-estado="mal"]::before { background: var(--mal); }
.estado[data-estado="mal"] { color: var(--texto); }

.m-barra { height: 3px; margin: 12px 0 24px; border-radius: 2px; background: var(--tarjeta-2); overflow: hidden; }
.m-servidor,
.m-nota { margin-top: 12px; font-size: 0.85rem; color: var(--texto-3); text-align: center; }
.m-servidor + .m-nota { margin-top: 4px; }
.m-barra span { display: block; width: 0; height: 100%; background: var(--acento); transition: width 200ms linear; }

.lecturas-col { display: grid; gap: 16px; }
.lecturas { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: 10px; margin: 0; }
.lectura { padding: 16px 14px; min-width: 0; }
.lectura dt { font-size: 0.94rem; font-weight: 600; color: var(--texto); }
.lectura dt span { display: block; margin-top: 1px; color: var(--texto-3); font-size: 0.78rem; font-weight: 400; }
.lectura dd { margin: 0; }
.lectura dd:nth-of-type(1) { display: flex; align-items: baseline; gap: 4px; margin-top: 12px; }
.lectura dd b { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: var(--texto); }
.lectura dd b + span { font-size: 0.78rem; color: var(--texto-3); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px !important;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--texto-3);
}
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
[data-estado="bien"] .chip { color: var(--bien); }
[data-estado="regular"] .chip { color: var(--regular); }
[data-estado="mal"] .chip { color: var(--mal); }

.muestras { padding: 18px 18px 16px; }
.muestras figcaption { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.muestras figcaption .contador { font-size: 0.875rem; color: var(--texto-3); }
.muestras svg { width: 100%; height: 70px; }
.b-vacia { fill: var(--tarjeta-2); }
.b-bien { fill: var(--bien); }
.b-regular { fill: var(--regular); }
.b-mal { fill: var(--mal); }
.b-perdida { fill: none; stroke: var(--mal); stroke-dasharray: 2 3; }

.explicacion {
  padding: 20px;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--r);
}
.explicacion h2 { font-size: 1.125rem; }
.explicacion ul { margin-top: 10px; }
.explicacion li { padding: 6px 0; color: var(--texto-2); font-size: 1rem; }
.explicacion li b { color: var(--texto); font-weight: 600; }
.explicacion li[data-estado] { position: relative; padding-left: 16px; }
.explicacion li[data-estado]::before { content: ""; position: absolute; left: 0; top: 15px; width: 6px; height: 6px; border-radius: 50%; }
.explicacion li[data-estado="bien"]::before { background: var(--bien); }
.explicacion li[data-estado="regular"]::before { background: var(--regular); }
.explicacion li[data-estado="mal"]::before { background: var(--mal); }
.explicacion .nota { margin: 12px 0 16px; font-size: 0.94rem; color: var(--texto-3); }
.explicacion .nota a { color: var(--acento); text-decoration: underline; text-underline-offset: 3px; }

.aviso {
  margin-top: var(--seccion);
  max-width: 68ch;
  font-size: 0.9rem;
  color: var(--texto-3);
}
.aviso b { color: var(--texto-2); font-weight: 600; }
.aviso--nota { margin-top: 8px; font-size: 0.875rem; }

/* =========================================================
   PANTALLA: APRENDE
   ========================================================= */
.temas { display: grid; gap: 12px; max-width: 880px; }
.tema { scroll-margin-top: calc(var(--barra-alto) + 16px); }
.tema summary {
  display: grid;
  grid-template-columns: 32px 1fr 24px;
  align-items: start;
  gap: 12px;
  min-height: 76px;
  padding: 18px 20px;
  cursor: pointer;
  list-style: none;
  border-radius: var(--r);
  transition: background-color var(--rapido);
}
.tema summary:hover { background: var(--tarjeta-2); }
.tema summary::-webkit-details-marker { display: none; }
.tema summary:focus-visible { outline-offset: -2px; }
.tema .num { padding-top: 2px; font-size: 0.9rem; font-weight: 400; font-variant-numeric: tabular-nums; color: var(--texto-3); }
.tema-tit { display: grid; gap: 2px; }
.tema-tit .h { margin: 0; font-size: 1.125rem; line-height: 1.3; }
.tema-tit .s { font-size: 0.9rem; color: var(--texto-3); }
/* "+" simple, sin caja */
.mas { position: relative; width: 24px; height: 24px; margin-top: 1px; }
.mas::before,
.mas::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 1.5px;
  margin: -0.75px 0 0 -6px;
  border-radius: 1px;
  background: var(--texto-2);
  transition: transform var(--rapido);
}
.mas::after { transform: rotate(90deg); }
.tema[open] .mas::after { transform: rotate(0deg); }

.tema-cuerpo { display: grid; gap: 20px; padding: 0 20px 24px 64px; }
.tema-texto { max-width: 68ch; }
.tema-texto p { color: var(--texto-2); font-size: 1rem; text-wrap: pretty; }
.tema-texto p + p { margin-top: 12px; }
.tema-texto b { color: var(--texto); font-weight: 600; }
/* Consejo NOVANET: discreto, solo una línea gris a la izquierda */
.tema-texto .en-corto { margin-top: 18px; padding: 2px 0 2px 14px; border-left: 2px solid var(--borde-control); }
.en-corto-t { display: block; margin-bottom: 2px; font-size: 0.9rem; font-weight: 600; color: var(--texto); }

/* Diagramas: trazo fino, grises y el acento solo para la señal */
.diagrama {
  width: 100%;
  max-width: 340px;
  height: auto;
  padding: 16px;
  border-radius: var(--r-sm);
  background: var(--hundido);
}
.diagrama * { vector-effect: non-scaling-stroke; }
.diagrama path,
.diagrama rect,
.diagrama circle,
.diagrama ellipse { fill: none; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.diagrama .t { stroke: var(--texto-3); }
.diagrama .muro { stroke-dasharray: 2 4; }
.diagrama .c { stroke: var(--acento); }
.diagrama .c2 { stroke: var(--texto-2); }
.diagrama .dash { stroke-dasharray: 4 5; }
.diagrama .am { stroke: var(--texto-2); }
.diagrama .x { stroke: var(--texto); stroke-width: 1.75; }
.diagrama .f { fill: var(--texto-3); stroke: none; }
.diagrama .cyf { fill: var(--acento); stroke: none; }
.diagrama .cz { fill: none; stroke: var(--texto-3); stroke-dasharray: 3 4; }
.diagrama .pq rect { stroke: none; }
.diagrama .am-f rect { fill: var(--texto-3); }
.diagrama .cy-f rect { fill: var(--acento); }
.diagrama text { fill: var(--texto-3); font-family: var(--sans); font-size: 9.5px; font-weight: 400; }
.diagrama .cy { fill: var(--texto-2); }
.diagrama .am-t { fill: var(--texto-2); }
.diagrama .big { fill: var(--texto); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* =========================================================
   PANTALLA: COBERTURA
   ========================================================= */
.cob-layout { display: grid; gap: var(--seccion); align-items: start; }
.cob-form { padding: 24px; }

.campo { margin: 0 0 24px; padding: 0; border: 0; min-width: 0; }
.campo label,
.campo legend {
  display: block;
  margin-bottom: 8px;
  padding: 0;
  font-size: 0.97rem;
  font-weight: 600;
}
.campo input[type="text"] {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid var(--borde-control);
  border-radius: var(--r-sm);
  background: var(--hundido);
  font-size: 1rem;
  transition: border-color var(--rapido);
}
.campo input[type="text"]:hover { border-color: var(--texto-3); }
.campo input[type="text"]:focus { outline: 2px solid var(--acento); outline-offset: 1px; border-color: var(--acento); }
.campo input[type="text"][aria-invalid="true"] { border-color: var(--mal); }
.ayuda { margin-top: 6px; font-size: 0.875rem; color: var(--texto-3); }
.error { margin-top: 6px; font-size: 0.9rem; color: var(--mal); }
.error::before { content: "! "; font-weight: 700; }

.opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.campo .opcion {
  position: relative;
  display: grid;
  justify-items: start;
  gap: 10px;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--borde-control);
  border-radius: var(--r-sm);
  background: var(--hundido);
  cursor: pointer;
  font-weight: 400;
  transition: border-color var(--rapido), background-color var(--rapido);
}
.opcion input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opcion svg { width: 48px; height: 40px; fill: none; stroke: var(--texto-3); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.opcion span { display: grid; font-size: 0.9rem; color: var(--texto-3); }
.opcion b { font-size: 1rem; color: var(--texto); font-weight: 600; }
.opcion:hover { border-color: var(--texto-3); }
.campo .opcion:has(input:checked) { border-color: var(--acento); background: var(--tarjeta-2); }
.opcion:has(input:checked) svg { stroke: var(--texto); }
.opcion:has(input:focus-visible) { outline: 2px solid var(--acento); outline-offset: 2px; }
.opcion::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 16px;
  height: 16px;
  border: 1px solid var(--borde-control);
  border-radius: 50%;
}
.opcion:has(input:checked)::after { border: 5px solid var(--acento); }
.campo[data-invalido] .opcion { border-color: var(--mal); }

.cob-pie { margin-top: 12px; font-size: 0.875rem; color: var(--texto-3); text-align: center; }
.cob-pie + .nota-legal { margin-top: 4px; text-align: center; }

.cob-lado { display: flex; flex-direction: column; gap: 16px; }
.vista-previa { padding: 4px 0 6px; }
.burbuja {
  position: relative;
  margin: 12px 0 0;
  padding: 16px 18px 30px;
  background: var(--tarjeta);
  border-radius: var(--r);
  color: var(--texto-2);
  font-family: var(--sans);
  font-size: 0.94rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}
.burbuja::after {
  content: "vista previa";
  position: absolute;
  right: 14px;
  bottom: 10px;
  font-size: 0.78rem;
  color: var(--texto-3);
}
.burbuja .vacio { color: var(--texto-3); }
.burbuja .dato-u { color: var(--texto); font-weight: 600; }

.cob-porque {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--r);
  color: var(--texto-3);
  font-size: 0.92rem;
  transition: background-color var(--rapido);
}
.cob-porque:hover { background: var(--tarjeta-2); }
.cob-porque b { display: block; color: var(--texto); font-weight: 600; font-size: 0.97rem; }
.cob-porque .ico { color: var(--texto-2); }

/* =========================================================
   LEGAL: Aviso de privacidad y Términos de uso
   ========================================================= */
.legal { max-width: 68ch; }
.legal h2 { margin: 40px 0 10px; font-size: 1.25rem; line-height: 1.3; }
.legal h2:first-child { margin-top: 0; }
.legal p,
.legal li { color: var(--texto-2); text-wrap: pretty; }
.legal p + p { margin-top: 12px; }
.legal ul { margin-top: 10px; padding-left: 20px; list-style: disc; }
.legal li { padding: 4px 0; }
.legal li::marker { color: var(--texto-3); }
.legal b { color: var(--texto); font-weight: 600; }
.legal .fecha { color: var(--texto-3); font-size: 0.9rem; }
.legal .btn { margin-top: 16px; }
.legal .borrar-estado { margin-top: 10px; font-size: 0.9rem; color: var(--texto-3); }
/* Datos que faltan: visibles a propósito hasta que se llenen */
.pendiente {
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(232, 182, 92, 0.12);
  color: var(--regular);
  font-weight: 600;
}

/* =========================================================
   PWA: aviso sin red y diálogo de iPhone
   ========================================================= */
.sin-red:empty { display: none; }
.sin-red {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--borde-control);
  border-radius: var(--pildora);
  font-size: 0.8rem;
  color: var(--texto-2);
}
.sin-red::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--texto-3); }

.dialogo {
  position: fixed;
  inset: 0;
  margin: auto;
  height: fit-content;
  width: min(420px, calc(100vw - 32px));
  padding: 28px;
  color: var(--texto);
}
.dialogo::backdrop { background: rgba(5, 8, 13, 0.8); }
.dialogo h2 { font-size: 1.25rem; }
.dialogo .pasos { margin: 16px 0 24px; }
.dialogo b { font-weight: 600; color: var(--texto); }
.dialogo .pasos span:last-child { color: var(--texto-2); }

/* =========================================================
   MOVIMIENTO: solo un fundido corto al cambiar de pantalla
   ========================================================= */
.pantalla.entrando { animation: entrar var(--pantalla) ease-out both; }
@keyframes entrar { from { opacity: 0; } to { opacity: 1; } }

/* =========================================================
   TABLETA Y ESCRITORIO
   ========================================================= */
@media (min-width: 700px) {
  :root { --margen: 32px; --seccion: 56px; }
  .accesos { grid-template-columns: repeat(12, 1fr); gap: 20px; }
  .acceso--diag { grid-column: span 7; }
  .acceso--medidor { grid-column: span 5; }
  .acceso--lista { grid-column: span 7; }
  .col-derecha { grid-column: span 5; grid-template-rows: 1fr auto; gap: 20px; }
  .respuestas { grid-template-columns: 1fr 1fr; }
  .acciones { grid-template-columns: auto auto; justify-content: start; }
  .foto.foto--inicio { width: 100%; max-width: 440px; }
}

@media (min-width: 1000px) {
  :root { --margen: 56px; --seccion: 64px; }

  .app { display: grid; grid-template-columns: 248px minmax(0, 1fr); }

  .barra {
    position: sticky;
    top: 0;
    height: 100vh;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 32px 16px 24px;
    border-bottom: 0;
    border-right: 1px solid var(--linea);
  }
  .marca { padding: 0 12px; margin-bottom: 40px; }
  .marca img { width: 184px; }

  .nav {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 0;
    padding: 0;
    background: none;
    border: 0;
  }
  .nav a {
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    min-height: 46px;
    padding: 0 12px;
    border-radius: var(--r-sm);
    font-size: 0.97rem;
    color: var(--texto-2);
    transition: background-color var(--rapido), color var(--rapido);
  }
  .nav a span { text-align: left; }
  .nav a:hover { background: var(--tarjeta); color: var(--texto); }
  .nav a[aria-current="page"] { background: var(--tarjeta); color: var(--texto); }

  .barra-acciones { margin-top: 16px; flex-direction: column; align-items: stretch; }

  main { padding: 48px var(--margen) 40px; }

  .hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 56px; padding: 32px 0 var(--seccion); }
  .hero .foto { aspect-ratio: 4 / 3; }
  /* 3/4 con alto máximo de 560 px (420 × 560) */
  .hero .foto.foto--inicio { aspect-ratio: 3 / 4; max-width: 420px; justify-self: end; }
  .traza { padding: 28px 32px 24px; }
  .acceso { padding: 32px; }
  .acceso--lista { padding: 32px 20px 16px; }

  .diag-layout { grid-template-columns: minmax(0, 1fr) 280px; gap: 48px; }
  .diag { padding: 32px 36px; }

  .medidor-layout { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr); gap: 24px; }
  .medidor { padding: 32px; }
  .lectura { padding: 20px; }
  .lectura dd b { font-size: 2.1rem; }

  .tema summary { padding: 20px 28px; min-height: 84px; grid-template-columns: 40px 1fr 24px; }
  .tema-cuerpo { grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; padding: 0 28px 28px 80px; }
  .tema-cuerpo .diagrama { order: 2; align-self: start; }

  .cob-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: 32px; }
  .cob-form { padding: 32px; }
  /* Las dos columnas terminan al mismo nivel: la vista previa crece hasta el alto del formulario */
  .cob-layout { align-items: stretch; }
  .cob-lado .vista-previa { flex: 1; display: flex; flex-direction: column; }
  .cob-lado .burbuja { flex: 1; }

  /* Soporte al pie del menú lateral */
  .riel-soporte {
    display: grid;
    gap: 6px;
    margin-top: auto;
    padding: 0 12px;
    font-size: 0.9rem;
  }
  .riel-soporte a { color: var(--texto-2); text-decoration: underline; text-decoration-color: var(--borde-control); text-underline-offset: 4px; }
  .riel-soporte a:hover { color: var(--texto); }
  .riel-soporte .riel-zona { font-size: 0.875rem; color: var(--texto-3); }
}
.riel-soporte { display: none; }
@media (min-width: 1000px) { .riel-soporte { display: grid; } }

@media (max-width: 520px) {
  .tema-cuerpo { padding-left: 20px; }
}

/* =========================================================
   ACCESIBILIDAD
   ========================================================= */
h1, h2, h3 { overflow-wrap: break-word; }
.hero h1 { overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Modo de alto contraste de Windows */
@media (forced-colors: active) {
  .tarjeta,
  .btn,
  .respuesta,
  .campo .opcion,
  .campo input[type="text"] { border: 1px solid CanvasText; }
  .opcion:has(input:checked) { outline: 3px solid Highlight; }
  .nav a[aria-current="page"] { outline: 2px solid Highlight; }
}