/* Hoja de /caracteristicas/. Vive aparte porque sólo esa página la usa y
   cargarla en las otras trece sería peso sin motivo. */

.fx-intro{padding:3rem 0 0}
.fx-intro h1{margin:.8rem 0 .6rem}
.fx-actualizado{font-size:.88rem;color:var(--mute);margin:.2rem 0 0}

/* La leyenda no es decoración: sin ella una etiqueta verde y una azul se leen
   igual, y la diferencia entre «anda» y «anda cuando conectes tu cuenta» es
   justamente lo que una emisora necesita saber antes de firmar. */
.fx-leyenda{margin:1.8rem 0 0;padding:1.2rem 1.3rem;background:var(--bg2);
  border:1px solid var(--line);border-radius:16px;max-width:64rem}
.fx-leyenda h2{font-size:1.05rem;margin:0 0 .8rem;letter-spacing:0}
.fx-leyenda dl{margin:0;display:grid;gap:.7rem}
@media(min-width:760px){.fx-leyenda dl{grid-template-columns:auto 1fr;gap:.7rem 1rem;align-items:baseline}}
.fx-leyenda dt{margin:0}
.fx-leyenda dd{margin:0;color:var(--mute);font-size:.95rem}

.et{display:inline-flex;align-items:center;gap:.4rem;font:700 .78rem/1.2 var(--font);
  padding:.32rem .68rem;border-radius:999px;border:1px solid transparent;white-space:nowrap}
.et::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:currentColor;flex:none}
/* Colores fijos, no fichas del tema: la etiqueta trae su propio fondo y así
   contrasta igual en claro y en oscuro. Es el mismo criterio que ya usa
   `.beta-estado` en beta.css. */
.et-si{color:#0D5B42;background:#BDF4DC;border-color:#8BDFC0}
.et-cfg{color:#183553;background:#DAE9FF;border-color:#A7C7F4}
.et-parcial{color:#5A4407;background:#FFE9AF;border-color:#E7CB80}
.et-no{color:#6A1F1F;background:#FFD8D8;border-color:#EFAAAA}

.fx-grupo{padding:2.6rem 0 0}
.fx-grupo h2{font-size:clamp(1.4rem,3vw,1.95rem);margin:0 0 .35rem;letter-spacing:-.03em}
.fx-grupo>p{color:var(--mute);margin:0 0 1.1rem;max-width:62ch}
.fx-lista{display:grid;gap:.7rem;margin:0;padding:0;list-style:none}
.fx-item{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:1rem 1.15rem;display:grid;gap:.6rem}
@media(min-width:720px){
  .fx-item{grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:.5rem 1.2rem}
  .fx-item .et{grid-column:2;grid-row:1;justify-self:end}
  .fx-item .fx-txt{grid-column:1;grid-row:1}
}
.fx-item h3{margin:0;font-size:1.06rem}
.fx-item p{margin:.3rem 0 0;color:var(--mute);font-size:.95rem}
.fx-item .fx-falta{margin:.45rem 0 0;font-size:.9rem;color:var(--ink);opacity:.82}
.fx-item .fx-falta b{font-weight:700}

.fx-cierre{margin:3rem 0 0;padding:1.5rem 1.4rem;background:var(--bg2);
  border:1px solid var(--line);border-radius:16px;max-width:64rem}
.fx-cierre h2{font-size:1.3rem;margin:0 0 .5rem}
.fx-cierre p{color:var(--mute);margin:0 0 1rem;max-width:62ch}
.fx-cierre .cta{margin:0}

/* Acá vivía `.fx-indice`, el índice de enlaces de la página. Lo reemplazó la
   barra de pestañas el 2026-09-20 y ya no lo usa nadie: se saca para que
   nadie lo encuentre y crea que hay dos índices. */
.fx-grupo{scroll-margin-top:1.5rem}

/* La bajada usaba el ancho general de `.lead` (48ch) y quedaba angosta al lado
   de una leyenda de 64rem. Acá tiene sitio para respirar. */
.fx-intro .lead{max-width:62ch}

/* ── LA TABLA DE FUNCIONES ──────────────────────────────────────────────
   Dos columnas y no tres: a 360 px una tercera obliga a desplazar de lado, y
   una tabla que se desplaza de lado no se lee. El estado va como pastilla
   dentro de la primera celda, donde además se lee junto al nombre.

   Se queda como <table> de verdad —con `th scope`— en todos los anchos: pasar
   las celdas a `display:block` en el teléfono le saca las relaciones de tabla
   a quien usa lector de pantalla, y eso es peor que una columna angosta. */
.fx-tabla-caja{margin-top:1.4rem;border:1px solid var(--line);border-radius:14px;
  overflow:hidden;background:var(--card)}
.fx-tabla{width:100%;border-collapse:collapse;font-size:.95rem;text-align:left;table-layout:fixed}
.fx-tabla col.c1{width:30%}
.fx-tabla col.c2{width:70%}
.fx-tabla thead th{background:var(--bg2);color:var(--mute);font:700 .72rem/1 var(--font);
  letter-spacing:.11em;text-transform:uppercase;padding:.75rem .9rem;
  border-bottom:1px solid var(--line);white-space:nowrap}
.fx-tabla tbody th,.fx-tabla tbody td{padding:.8rem .9rem;vertical-align:top;
  border-bottom:1px solid var(--line)}
.fx-tabla tbody tr:last-child th,.fx-tabla tbody tr:last-child td{border-bottom:0}
.fx-tabla tbody th{font-weight:700;color:var(--ink);vertical-align:top}
.fx-tabla tbody td{color:var(--mute);line-height:1.55}
.fx-t-nom{display:block;margin-bottom:.45rem}
.fx-tabla tbody th .et{white-space:normal}
.fx-t-falta{display:block;margin-top:.4rem;color:var(--ink);opacity:.82;font-size:.9rem}
/* El renglón que separa grupos: es un encabezado de sección dentro de la tabla,
   no una fila de datos. */
.fx-tabla .fx-t-grupo th{background:var(--bg2);color:var(--aire);
  font:700 .74rem/1 var(--font);letter-spacing:.12em;text-transform:uppercase;
  padding:.7rem .9rem;width:auto;display:table-cell}
.fx-tabla tbody tr:hover td,.fx-tabla tbody tr:hover th{background:var(--bg2)}
.fx-tabla .fx-t-grupo:hover th{background:var(--bg2)}
@media(max-width:620px){
  .fx-tabla{font-size:.9rem}
  .fx-tabla tbody th,.fx-tabla tbody td{padding:.7rem .7rem}
  .fx-tabla col.c1{width:40%}
  .fx-tabla col.c2{width:60%}
}

/* Un grupo de funciones adentro de un panel de pestañas: el aire ya lo pone
   el panel, y sumado al del grupo quedaba un hueco de dos dedos arriba. */
.pest-caja .fx-grupo{padding-top:0}
.fx-aviso-pest{color:var(--mute);font-size:.95rem;max-width:62ch;margin:1.4rem 0 0}