/*
 * Landing y wizard. Se carga después de `styles.css`, que sigue siendo la
 * base compartida —variables, campos, botones, diálogos, mapa— y que no se
 * reordena: la sirve también `herramientas.html`, con las cuatro herramientas
 * que todavía no se han migrado.
 */

:root {
  /* Ni error ni acierto: "esto se puede calcular, pero míralo". */
  --aviso: #d29922;
}

.principal {
  background: var(--acento);
  color: #fff;
  border-color: var(--acento);
}
.principal:hover { filter: brightness(1.1); border-color: var(--acento); }
.principal:disabled { opacity: .55; cursor: progress; }

/* ---------------------------------------------------------------- cabecera */

.cabecera {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 20px;
  background: var(--panel);
  border-bottom: 1px solid var(--borde);
  flex-wrap: wrap;
}

.marca {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  font-size: 14px;
  color: var(--texto);
  text-decoration: none;
  flex-shrink: 0;
}
.marca-icono { font-size: 16px; }

.nav-herramientas {
  display: flex;
  gap: 2px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
}
.nav-herramientas a {
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12.5px;
  color: var(--suave);
  text-decoration: none;
  white-space: nowrap;
}
.nav-herramientas a:hover { color: var(--texto); }
.nav-herramientas a.activo { background: var(--fondo); color: var(--texto); }

.cabecera .cuenta {
  margin: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Pruebas gratuitas que quedan. Solo aparece si el servidor declara un
   límite (ver `services/rf-core/app/trial.py`); mientras el contador está
   apagado, este elemento existe pero nunca se muestra. */
.chip-pruebas {
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--borde);
  color: var(--suave);
  white-space: nowrap;
}
.chip-pruebas.agotadas {
  color: var(--error);
  border-color: color-mix(in srgb, var(--error) 45%, transparent);
}
.cabecera .cuenta-anonima,
.cabecera .cuenta-activa { display: flex; align-items: center; gap: 8px; }
.cabecera .cuenta .ayuda { margin: 0; }

/* Selector ES/EN: mismo `.segmentado` de las pestañas de sesión, pero sin su
   margen de bloque — aquí va en línea, junto a la cuenta. */
.cabecera #idioma-toggle {
  margin: 0;
  flex-shrink: 0;
  padding: 2px;
}
.cabecera #idioma-toggle button { padding: 4px 8px; font-size: 11.5px; }

/* ------------------------------------------------------- el cálculo inverso

   El techo de potencia que sale del análisis de interferencia. Se le da
   presencia de titular porque es el número que se copia al expediente: la
   tabla dice si cumples, esto dice qué puedes pedir. */

.techo {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 12px 14px;
  margin-bottom: 14px;
}
.techo h3 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase;
            letter-spacing: 0.04em; color: var(--suave); }
.techo .ayuda { margin: 4px 0 0; }
.techo-cifra { margin: 0; font-size: 22px; font-weight: 600; line-height: 1.2; }
.techo-cifra .ayuda {
  display: block;
  font-size: 11.5px;
  font-weight: normal;
}
.techo.ok { border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.techo.ok .techo-cifra { color: var(--ok); }
.techo.mal { border-color: color-mix(in srgb, var(--error) 40%, transparent); }
.techo.mal .techo-cifra { color: var(--error); }
.techo .datos { margin: 8px 0 0; }
/* «No se arregla por ese extremo» no es un número: no debe leerse como uno. */
.techo .imposible { color: var(--suave); font-size: 13px; font-weight: normal; }

/* ----------------------------------------------------------------- landing */

.landing {
  max-width: 980px;
  margin: 0 auto;
  padding: 40px 20px 60px;
}

.portada { margin-bottom: 34px; }
.portada h1 { margin: 0 0 8px; font-size: 26px; letter-spacing: -.01em; }
.portada p {
  margin: 0;
  max-width: 62ch;
  color: var(--suave);
  font-size: 14px;
  line-height: 1.6;
}

.rejilla-herramientas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

.tarjeta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  color: inherit;
  text-decoration: none;
}
.tarjeta:hover { border-color: var(--acento); }
.tarjeta h2 { margin: 0; font-size: 15px; }
.tarjeta .resumen { margin: 0; font-size: 12.5px; line-height: 1.5; }
.tarjeta dl { margin: 0; display: grid; gap: 6px; }
.tarjeta dt {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--suave);
}
.tarjeta dd { margin: 2px 0 0; font-size: 12px; color: var(--suave); line-height: 1.45; }
.tarjeta .entrar { margin-top: auto; font-size: 12.5px; color: var(--acento); }

.rigor {
  margin-top: 34px;
  padding: 20px;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.rigor h2 { margin: 0 0 8px; font-size: 15px; }
.rigor p { margin: 0 0 10px; font-size: 12.5px; color: var(--suave); line-height: 1.6; max-width: 70ch; }
.rigor p:last-child { margin-bottom: 0; }
.rigor code {
  font-size: 11.5px;
  padding: 1px 4px;
  border-radius: 4px;
  background: var(--fondo);
}
.ejemplo {
  margin: 0 0 10px;
  padding: 10px 12px;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  font-size: 12px;
  line-height: 1.5;
  overflow-x: auto;
}
.ejemplo:last-child { margin-bottom: 0; }

/* ------------------------------------------------------ página de herramienta */

.herramienta {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100vh;
}
.herramienta .app {
  height: auto;
  min-height: 0;
}
@media (max-width: 900px) {
  .herramienta { height: auto; }
}

/* ------------------------------------------------------------------ wizard */

.wizard { list-style: none; margin: 0; padding: 0; }

.paso { border-bottom: 1px solid var(--borde); }
.paso:last-child { border-bottom: none; }

.paso-cabecera {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 20px;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.paso-cabecera:disabled { cursor: default; opacity: .5; }
.paso.hecho .paso-cabecera:hover { background: var(--fondo); }

.paso-numero {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--borde);
  font-size: 11px;
  color: var(--suave);
}
.paso.actual .paso-numero {
  background: var(--acento);
  border-color: var(--acento);
  color: #fff;
}
.paso.hecho .paso-numero { border-color: var(--ok); color: var(--ok); }

.paso-etiqueta { min-width: 0; }
.paso-titulo { display: block; font-size: 13px; }
.paso.actual .paso-titulo { font-weight: 600; }
.paso.pendiente .paso-titulo { color: var(--suave); }
.paso-resumen {
  display: block;
  font-size: 11.5px;
  color: var(--suave);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.paso-cuerpo { padding: 0 20px 18px; }
.paso-descripcion { margin: -2px 0 14px; }
.paso-campos fieldset:first-of-type { padding-top: 0; }

/* Los atajos del primer paso van en una línea, separados por un punto.
   `.enlace` es `display: block` porque nació para el «¿olvidaste tu
   contraseña?» del diálogo de sesión, que sí ocupa su propio renglón; aquí
   son dos y apilados parecen dos secciones distintas. */
.paso-campos p .enlace {
  display: inline;
  margin: 0;
  vertical-align: baseline;
}

.paso-navegacion { display: flex; gap: 8px; margin-top: 18px; }
.paso-navegacion button { padding: 9px 14px; border-radius: 6px; border: 1px solid transparent; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.paso-navegacion [data-siguiente] { flex: 1; }

/* ------------------------------------------------------------- validación */

.campo-fallo {
  margin: 4px 0 0;
  font-size: 11.5px;
  line-height: 1.4;
}
.campo-fallo.es-error { color: var(--error); }
.campo-fallo.es-aviso { color: var(--aviso); }

label.con-fallo input,
label.con-fallo select { border-color: var(--error); }
label.con-aviso input,
label.con-aviso select { border-color: var(--aviso); }

.paso-avisos:not(:empty) { margin-top: 12px; }

/* --------------------------------------------------------------- glosario */

[data-glosario] {
  border: none;
  background: none;
  padding: 0 0 0 4px;
  font: inherit;
  font-size: 11px;
  color: var(--acento);
  cursor: help;
}

.glosario-nota {
  position: fixed;
  z-index: 40;
  width: min(300px, calc(100vw - 24px));
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: 0 8px 24px rgb(0 0 0 / .35);
}
.glosario-nota strong { display: block; font-size: 12.5px; margin-bottom: 5px; }
.glosario-nota p { margin: 0; font-size: 12px; color: var(--suave); line-height: 1.5; }
.glosario-nota .glosario-cita {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--borde);
  font-size: 11px;
}

/* ------------------------------------------------------------------ citas */

.cita {
  margin: 8px 0 0;
  padding: 9px 11px;
  border-left: 2px solid var(--borde);
  background: var(--fondo);
  border-radius: 0 6px 6px 0;
  font-size: 11.5px;
  color: var(--suave);
  line-height: 1.5;
}
.cita strong { color: var(--texto); font-weight: 600; }
.cita .articulo {
  font-variant-numeric: tabular-nums;
  color: var(--texto);
}
.cita.discrepa { border-left-color: var(--aviso); }
.cita .alerta { display: block; margin-top: 5px; color: var(--aviso); }

.citas-lista { display: grid; gap: 8px; margin: 10px 0 4px; }

/* Fila de contorno del resultado: el umbral y su origen, juntos. */
.contorno-cita {
  display: block;
  font-size: 11px;
  color: var(--suave);
}

/* --------------------------------------------------------------- sitios */

/* Va antes de las coordenadas: elegir un sitio guardado tiene que ser lo
   primero que se vea, porque es lo que evita teclear. */
.sitios:not(:empty) {
  margin-bottom: 14px;
  padding: 11px 12px;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.sitios label { margin: 0; }
.sitios-acciones { display: flex; gap: 8px; margin-top: 9px; }
.sitios-estado:empty { display: none; }
.sitios-estado { margin: 8px 0 0; }
.sitios-oferta { margin: 0; }
.sitios-oferta strong { color: var(--texto); }
.sitios-vacio { margin: 0 0 4px; }

/* El alta manual del diálogo "Mis sitios" — no hay formulario detrás del que
   tomar coordenadas, así que se piden directamente, con el mismo módulo
   `Coordenadas` (decimal/DMS/DDM) que ya usa cada herramienta — de ahí que
   sea una columna normal y no la rejilla de cinco campos que era cuando
   lat/lon eran dos números sueltos. */
.sitios-alta .fila { align-items: end; }
.sitios-alta button { height: 34px; }
.sitios-alta-estado:empty { display: none; }
.sitios-alta-estado { margin: 0 0 14px; }

/* ------------------------------------------------------------ coordenadas */

/* Tres botones cortos —DD, DDM, DMS— en vez de dos etiquetas largas: caben
   en una línea y dejan sitio a los campos, que es lo que importa. */
.formato-coords { display: inline-flex; margin-bottom: 10px; }
.formato-coords button { padding: 5px 12px; font-size: 12px; }

/* Latitud y longitud en la misma fila solo en DD, que son dos campos. Con
   grados/minutos/segundos son ocho campos y media columna del panel deja cada
   uno en unos 35 px: los dígitos se recortan y el formulario parece vacío
   aunque esté lleno. En esos formatos van uno debajo del otro. */
.coords-campos { align-items: start; }
.coords-campos:not(.fila) > label + label { margin-top: 10px; }
.nota-datum { margin-top: 8px; }
.nota-datum strong { color: var(--texto); }

/* ------------------------------------------------------ puntería del mapa */

/*
 * Cruz fina en vez de la manita del mapa. Medio milímetro de error de
 * puntería son decenas de metros en el terreno, y con la manita no se sabe
 * qué píxel exacto se está señalando: el punto caliente del cursor queda
 * escondido bajo el dibujo de la mano.
 *
 * Se aplica solo cuando la página pide una coordenada (`.fijando`), para que
 * el resto del tiempo el mapa siga arrastrándose con la mano de siempre.
 */
.mapa-zona.fijando .maplibregl-canvas-container,
.mapa-zona.fijando .maplibregl-canvas {
  cursor: crosshair;
}

/* --------------------------------------------------- perfil del trayecto */

/* El SVG que devuelve el servidor viene con `width="640"` fijo. En la columna
   del panel —unos 300 px— desbordaba y se veía cortado, con barra horizontal.
   Aquí se le quita la anchura fija: como trae `viewBox`, escala solo. */
.perfil-trayecto svg,
.patrones-arreglo svg {
  max-width: 100%;
  height: auto;
}

.perfil-trayecto {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 5;
  margin: 0;
  padding: 10px 14px 12px;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: 0 6px 22px rgb(0 0 0 / .3);
  max-height: 55%;
  overflow-y: auto;
}
.perfil-trayecto figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  font-size: 12.5px;
}
.perfil-trayecto figcaption button {
  border: none;
  background: none;
  color: var(--suave);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.perfil-trayecto figcaption button:hover { color: var(--texto); }
.perfil-trayecto .ayuda { margin: 4px 0 0; }

/* En pantalla estrecha el mapa es corto: el perfil ocuparía casi todo. */
@media (max-width: 900px) {
  .perfil-trayecto { max-height: 70%; }
}

/* ----------------------------------------------------------- patrón polar */

.patron-polar { color: var(--texto); display: block; margin: 6px auto 4px; }
.patron-vista { text-align: center; }

/* --------------------------------------------------------------- revisión */

.revision { display: grid; gap: 2px; margin-bottom: 4px; }
.revision-fila {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--borde);
  font-size: 12.5px;
}
.revision-fila:last-child { border-bottom: none; }
.revision-fila dt { color: var(--suave); flex-shrink: 0; }
.revision-fila dd { margin: 0; text-align: right; }
.revision-fila button {
  border: none;
  background: none;
  color: var(--acento);
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
  padding: 0;
}

.va-a-calcular {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.va-a-calcular h3 {
  margin: 0 0 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--suave);
}

/* ------------------------------------------------------------- resultado */

.resultado-acciones { display: flex; gap: 8px; margin-top: 16px; }
.resultado-acciones button { flex: 1; }

/* El puente entre herramientas: de tu contorno a a quién molestas. */
.siguiente-paso {
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  line-height: 1.55;
}
.siguiente-paso .enlace { display: inline; margin: 0; }

/* Chat del asistente — burbuja flotante, fija sobre toda la página (ver
   asistente-chat.js). Independiente del flujo del formulario a propósito:
   antes vivía dentro de #resultado y no existía para nadie hasta calcular
   un estudio y bajar toda la tabla. z-index por encima de .glosario-nota
   (40): si las dos coinciden abiertas, gana el asistente. */
.asistente-flotante {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  font-size: 13px;
}

.asistente-burbuja {
  display: none; /* .minimizado la muestra — ver más abajo */
  width: 52px;
  height: 52px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--borde);
  background: var(--acento);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 24px rgb(0 0 0 / .35);
}

.asistente-panel {
  width: min(360px, calc(100vw - 32px));
  max-height: min(70vh, 560px);
  display: flex;
  flex-direction: column;
  padding: 14px;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: 0 8px 24px rgb(0 0 0 / .35);
}

.asistente-flotante.minimizado .asistente-burbuja { display: flex; }
.asistente-flotante.minimizado .asistente-panel { display: none; }

.asistente-panel-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}
.asistente-panel-cabecera h3 {
  margin: 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--suave);
}
.asistente-minimizar {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: 4px;
  background: none;
  color: var(--suave);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.asistente-minimizar:hover { border-color: var(--acento); color: var(--acento); }

.chat-mensajes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  margin: 10px 0;
}
.chat-mensajes:empty { display: none; }
.chat-mensaje {
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 12.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  max-width: 90%;
}
.chat-mensaje.usuario {
  align-self: flex-end;
  background: var(--acento);
  color: #fff;
}
.chat-mensaje.asistente {
  align-self: flex-start;
  background: var(--fondo);
  border: 1px solid var(--borde);
}
.chat-mensaje.pensando { color: var(--suave); font-style: italic; }
.chat-mensaje.error { color: var(--error); }
.chat-form { display: flex; gap: 8px; align-items: flex-end; flex-shrink: 0; }
.chat-form textarea {
  flex: 1;
  resize: vertical;
  min-height: 38px;
  font: inherit;
  font-size: 12.5px;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--borde);
  background: var(--panel);
  color: var(--texto);
}
.chat-form button { align-self: flex-end; }

/* --------------------------------------------------------- interferencia */

/* «Traer de un estudio» es el camino bueno, no una opción escondida entre
   los campos: ocupa el ancho y va antes que nada. */
.acciones.traer { margin: 0 0 6px; }
.acciones.traer button { flex: 1; }

.tabla-vecinas-envoltorio + .acciones-vecinas { margin-top: 8px; }
.paso-campos .tabla-vecinas { font-size: 12px; }

/* ------------------------------------------------------------ TV digital */

/* El motor de propagación no es un desplegable: es la decisión que hay que
   poder defender, así que cada opción enseña lo que cuesta y lo que da. */
.motores { display: grid; gap: 8px; margin-bottom: 16px; }

.motor {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  padding: 11px 12px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  cursor: pointer;
}
.motor:hover { border-color: var(--acento); }
.motor.elegido { border-color: var(--acento); background: var(--fondo); }
.motor input { width: auto; margin: 3px 0 0; flex-shrink: 0; }
.motor strong { display: block; font-size: 13px; color: var(--texto); }
.motor .ayuda { display: block; margin: 3px 0 0; }

/* Las clases de recepción también describen, no solo marcan. */
.paso-campos label.linea span .ayuda { display: block; margin: 2px 0 0; }

/* --------------------------------------------------------- arreglo UHF */

#cobertura-cabecera { border-top: 3px solid var(--acento); padding-bottom: 0; }
#cobertura-cabecera strong { font-size: 14px; }
#cobertura-cabecera .ayuda { margin: 6px 0 0; }

/* --------------------------------------------------------- enlaces PtP */

/* Cada análisis de la P.530 es una tarjeta con lo suyo dentro. Antes eran
   sesenta campos seguidos donde no se sabía qué pertenecía a qué. */
.analisis { display: grid; gap: 10px; }

.analisis-tarjeta {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 11px 12px;
}
.analisis-tarjeta.encendido { border-color: var(--acento); background: var(--fondo); }
.analisis-titulo { margin: 0; }
.analisis-titulo strong { display: block; font-size: 13px; color: var(--texto); }
.analisis-titulo .ayuda { display: block; margin: 3px 0 0; }
.analisis-campos { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--borde); }
.analisis-campos label:last-child { margin-bottom: 0; }
.analisis-aviso:not(:empty) { margin-top: 8px; }
/* Deliberadamente no es `.campo-fallo`: esa clase la administra el molde y la
   borra al repintar. Mismo aspecto, dueño distinto. */
.analisis-nota { margin: 0; font-size: 11.5px; line-height: 1.4; }
.analisis-nota.es-error { color: var(--error); }
.analisis-nota.es-aviso { color: var(--aviso); }

.raster-dvbt { margin-top: 16px; }
.raster-dvbt button { width: 100%; }
.raster-dvbt .ayuda { margin: 8px 0 0; }

/* El cálculo inverso de la cobertura: tres objetivos, tres potencias. */
.techo table { margin-top: 8px; }
.techo .cifra { font-weight: 600; white-space: nowrap; }
.objetivo { display: block; }
/* La tabla de tamaños del arreglo: la fila que decide, destacada. */
.techo tr.destacada td { font-weight: 600; }
.techo tr.ok td:last-child { color: var(--ok); }
.techo .etiqueta { font-size: 10px; color: var(--ok); }

/* -------------------------------------------------------- comparar escenarios

   La tabla de comparación. Lo que importa que salte a la vista es la columna
   de diferencias: es la razón de estar aquí. Lo que no cambió se atenúa, para
   que las tres filas que sí cambiaron no haya que buscarlas. */

.comparacion { width: 100%; }
.comparacion th { text-align: left; font-size: 11px; }
.comparacion td small { color: var(--suave); font-weight: normal; }
.comparacion tr.igual td { color: var(--suave); }
.comp-nombre { display: block; font-size: 12.5px; }
.comp-delta { font-weight: 600; text-align: right; white-space: nowrap; }
.comparacion tr.igual .comp-delta { font-weight: normal; }

.leyenda { list-style: none; margin: 6px 0 0; padding: 0; font-size: 12px; }
.leyenda li { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }

.estudio-marca { flex-shrink: 0; }
.barra-comparar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--borde);
}
.barra-comparar .ayuda { margin: 0; }

/* ------------------------------------------------------ panel de estadísticas

   Se lee de arriba abajo: primero el embudo, que dice si el negocio funciona,
   y solo después el detalle. */

.periodo { margin-bottom: 20px; }
.bloque {
  margin-bottom: 22px;
  padding: 18px;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.bloque h2 { margin: 0 0 12px; font-size: 15px; }
.bloque table { width: 100%; }
.bloque .ayuda { margin: 10px 0 0; }
.bloque td.mal { color: var(--error); font-weight: 600; }

.embudo { display: flex; align-items: stretch; gap: 6px; flex-wrap: wrap; }
.embudo-paso { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 150px; }
.embudo-paso .dato { flex: 1; }
.embudo-paso .dato dd { font-size: 22px; }
.embudo-paso .ayuda { display: block; margin: 2px 0 0; font-size: 11px; }
/* La conversión entre escalones: es el número que se busca, no el adorno. */
.embudo-flecha {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--acento);
  white-space: nowrap;
}
.embudo-flecha::before { content: "→ "; color: var(--suave); font-weight: normal; }

.serie { width: 100%; height: 160px; display: block; }
.serie rect:hover { opacity: .75; }

.aviso-caja {
  padding: 14px 16px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  color: var(--suave);
  font-size: 13px;
}

/* El botón de estadísticas es un enlace, no un <button>: lleva a otra página.
   Se le da el mismo aspecto para que no desentone en la cabecera. */
a.boton {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

/* Cohortes: la intensidad del color es la retención, para leerla de un vistazo. */
.cohortes td:first-child { white-space: nowrap; }
.cohortes .ayuda { display: inline; margin-left: 4px; }
.cohorte-celda { text-align: center; font-size: 11.5px; }

#mapa-estudios { min-height: 60px; }
#mapa-lienzo { height: 380px; border-radius: var(--radio); overflow: hidden; }

/* Las dos formas de cerrar sesión, cada una con lo que implica debajo. Un
   botón con su consecuencia escrita se elige mejor que dos con nombres
   parecidos. */
.opciones-salir { display: grid; gap: 8px; margin: 12px 0; }
.opciones-salir button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  font-size: 13px;
}
.opciones-salir .ayuda {
  display: block;
  margin: 4px 0 0;
  font-weight: normal;
  white-space: normal;
}

/* -------------------------------------------------------------------- red SFN

   Una tarjeta por localidad, con la tabla de sitios que la alimentan debajo:
   qué se sumó y qué se trató como interferencia intersímbolo, sin tener que
   abrir el JSON crudo para saberlo. */

.lista-config-multiplex { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; }
.lista-config-multiplex button { width: 100%; text-align: left; }
.lista-config-multiplex button.activo {
  border-color: var(--acento);
  color: var(--acento);
}

.localidad-sfn {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 12px 14px;
  margin-bottom: 10px;
}
.localidad-sfn h4 { margin: 0 0 4px; display: flex; align-items: center; gap: 8px; }
.localidad-sfn > p.ayuda { margin: 0 0 8px; }

.badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--borde);
}
.localidad-sfn.cubierta .badge { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.localidad-sfn.no-cubierta .badge { color: var(--error); border-color: color-mix(in srgb, var(--error) 45%, transparent); }

.tabla-sfn-transmisores { width: 100%; font-size: 12px; }
.tabla-sfn-transmisores th { text-align: left; font-size: 10.5px; color: var(--suave); }
.tabla-sfn-transmisores tr.isi td { color: var(--suave); }
.tabla-sfn-transmisores tr.isi td:last-child { color: var(--aviso); }
.tabla-sfn-transmisores tr.constructivo td:last-child { color: var(--ok); }

.patron-editor {
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--fondo);
}
.patron-editor > .ayuda:first-child { margin-top: 0; }

/* ------------------------------------------------- secciones de la portada

   Seis herramientas en una rejilla plana son una lista que hay que leer
   entera para saber si hay algo que te sirva. Agrupadas por el servicio al
   que sirven, se descarta lo que no es tuyo de un vistazo. */

.seccion-herramientas { margin-bottom: 34px; }
.seccion-herramientas:last-child { margin-bottom: 0; }

.seccion-cabecera {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--borde);
}
.seccion-cabecera h2 { margin: 0; font-size: 16px; letter-spacing: -.01em; }
.seccion-cabecera p {
  margin: 0;
  flex: 1;
  min-width: 240px;
  font-size: 12.5px;
  color: var(--suave);
  line-height: 1.5;
}

/* El nombre de la herramienta pasa de h2 a h3 al entrar en una sección: el
   h2 es ahora el área. Mismo tamaño de antes, que la jerarquía la marca el
   encabezado de sección y no el tamaño de letra de la tarjeta. */
.tarjeta h3 { margin: 0; font-size: 15px; }

/* Separador entre áreas en el nav. Fino y sin texto: solo tiene que dejar
   ver que hay tres bloques, no explicar cuáles. */
.nav-sep {
  flex-shrink: 0;
  width: 1px;
  align-self: stretch;
  margin: 4px 6px;
  background: var(--borde);
}

/* --------------------------------------------------------- normas.html

   Cita del artículo, sin depender de estar dentro de `.cita`: esta página
   la usa suelta en celdas de tabla. Mismo aspecto que la versión anidada. */
.articulo {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--texto);
  white-space: nowrap;
}

.normas-paises { display: grid; gap: 14px; margin-top: 10px; }
.norma-pais {
  padding: 14px 16px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.norma-pais h3 { margin: 0 0 4px; font-size: 14px; }
.norma-pais h3 .ayuda { font-weight: normal; margin-left: 6px; }
.norma-pais table { margin: 10px 0; }
.norma-pais-detalle { margin-top: 10px; }

/* Un grupo por continente, plegado hasta que se busca algo — mismo criterio
   que .norma-estandar de aquí abajo, para el mismo problema: 198 países de
   golpe es tan ilegible como la rejilla plana que reemplaza. */
.norma-continente {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  margin-bottom: 8px;
  padding: 10px 14px;
}
.norma-continente summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
}
.norma-continente summary .ayuda { font-weight: normal; margin-left: 6px; }
.norma-continente .normas-paises { margin-top: 10px; }

/* Un grupo por norma de TV digital, plegado hasta que se busca algo. Con
   ochenta países en total, todo desplegado a la vez es tan ilegible como
   la rejilla plana que este documento evita en otros sitios.
   `.norma-continente-tv` es la misma tabla de países (Cobertura), agrupada
   por continente en vez de por estándar — mismo aspecto, clase distinta
   para que el buscador de cada tabla no interfiera con el de la otra. */
.norma-estandar, .norma-continente-tv {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  margin-bottom: 8px;
  padding: 10px 14px;
}
.norma-estandar summary, .norma-continente-tv summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
}
.norma-estandar summary .ayuda, .norma-continente-tv summary .ayuda { font-weight: normal; margin-left: 6px; }
.norma-estandar table, .norma-continente-tv table { margin-top: 10px; }
.fila-detalle td { background: var(--fondo); padding: 10px 12px; }
.fila-detalle .ayuda:first-child { margin-top: 0; }

.buscar-normas {
  display: block;
  width: 100%;
  max-width: 360px;
  margin: 4px 0 12px;
  padding: 7px 10px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--panel);
  color: var(--texto);
  font: inherit;
  font-size: 12.5px;
}

/* --------------------------------------------------------- Multienlaces
   El editor de salto pinta el transmisor y el receptor uno junto al otro
   (`.fila` ya es una rejilla de dos columnas, reusada tal cual) y cada uno
   necesita su propia caja — sin ella, los dos `fieldset` se confunden con
   el resto del formulario, que es una sola columna. */
#zona-proyecto {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 16px;
}
#zona-proyecto label { flex: 1; margin-bottom: 0; }
.extremo-salto {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 12px 14px;
  margin-bottom: 10px;
}
.extremo-salto fieldset:first-of-type { border-top: none; padding-top: 4px; }
@media (max-width: 640px) {
  #zona-proyecto { flex-direction: column; align-items: stretch; }
}

/* Foto del equipo físico al elegir un panel del catálogo (Arreglo TV
   Digital / Arreglo FM) — ver docs/validacion-arreglo.md §66. Oculta por
   defecto (`hidden` en el HTML) mientras la mayoría de los paneles del
   catálogo no tienen foto todavía. */
.antena-foto {
  margin: 8px 0 4px;
  text-align: center;
}
.antena-foto img {
  max-width: 180px;
  max-height: 180px;
  width: auto;
  height: auto;
  object-fit: contain;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 6px;
  background: #fff;
}

/* Panel denso de parámetros junto al resultado (§82). Al estilo del
   configurador de Kathrein: todo a la vista, etiqueta | campo | unidad,
   para cambiar un número y recalcular sin recorrer el asistente. Va en
   un <details> porque no todo el mundo lo necesita en cada cálculo. */
.panel-parametros { margin-top: 20px; border: 1px solid var(--borde, #d8d8d8); border-radius: 6px; padding: 10px 14px; }
.panel-parametros > summary { cursor: pointer; font-weight: 600; }
.panel-parametros .ayuda { margin: 8px 0 4px; }
.panel-tabla { width: 100%; border-collapse: collapse; }
.panel-tabla th { text-align: left; font-weight: 400; padding: 3px 8px 3px 0; white-space: normal; }
.panel-tabla td { padding: 3px 0; }
.panel-tabla input { width: 100%; box-sizing: border-box; padding: 3px 6px; }
.panel-tabla .panel-unidad { width: 3.5em; padding-left: 8px; color: var(--tenue, #666); }
@media (max-width: 560px) {
  .panel-tabla th, .panel-tabla td { display: block; width: auto; }
  .panel-tabla .panel-unidad { padding-left: 0; }
}

/* Selección de gráficos del reporte (§82.4). */
.graficos-reporte { border: 1px solid var(--borde, #d8d8d8); border-radius: 6px; padding: 8px 12px 10px; margin: 14px 0; }
.graficos-reporte legend { padding: 0 6px; font-weight: 600; }
.graficos-reporte .ayuda { margin: 2px 0 8px; }
.graficos-reporte .casilla { display: block; margin: 3px 0; }