/* DataCity — el sitio público.
 *
 * Fondo blanco, tónico azul y complementos en blanco y negro. La tabla se
 * aprieta en cuanto empiezan los datos: el cliente ha venido a recorrer
 * filas y cuantas más quepan de un vistazo, mejor hace su trabajo.
 *
 * A propósito un solo tema, el claro. La pantalla se mira en obra y a
 * pleno sol, donde el fondo claro se lee mejor.
 */

/* Archivo para los titulares. Se sirve desde aquí y no desde Google: es la
 * única forma de que el titular se vea igual en cualquier equipo, que era el
 * problema de tirar de la tipografía del sistema.
 * `swap` para que el texto se lea desde el primer momento aunque la fuente
 * aún esté bajando. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/estaticos/fuentes/archivo-600.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/estaticos/fuentes/archivo-700.woff2") format("woff2");
}

:root {
  /* Fondo blanco, tónico azul y todo lo demás en gris: lo que se ve a
   * color son los datos y los botones, no la decoración. Los grises van
   * ligeramente hacia el azul para que no chirríen con el tónico. */
  --crema:  #FFFFFF;
  --papel:  #F7F8FA;
  --tinta:  #14181F;
  --humo:   #5B6472;
  --tenue:  #8B93A1;
  --linea:  #E2E6EC;
  --tonico: #1A65D8;
  --tonico-alto: #124BA6;
  --suave:  #EAF1FD;
  --alerta: #C0392B;

  --titular: "Archivo", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

  --ancho: 68rem;
}

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

body {
  margin: 0;
  background: var(--crema);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--tonico); }
h1, h2, h3 { text-wrap: balance; }

.centro { max-width: var(--ancho); margin: 0 auto; padding: 0 1.25rem; }

/* ── cabecera ─────────────────────────────────────────────── */
/* La cabecera, blanca del todo. Debajo, un degradado muy corto que hace de
 * separación sin llegar a ser una línea. */
/* Franja de la prueba gratis: una línea, todo el ancho y el alto mínimo que
 * deje leerla. Va encima de la cabecera porque es estado de la cuenta y no
 * de la página. */
.franja-prueba {
  margin: 0;
  background: #FFFFBB;
  border-bottom: 1px solid color-mix(in srgb, #FFFFBB 70%, var(--tinta) 8%);
  color: var(--tinta);
  font-size: 0.8rem;
  line-height: 1.3;
  text-align: center;
  padding: 0.3rem 1.25rem;
  /* En una sola línea aunque no quepa: partirla la convertiría justo en el
   * bloque que estorbaba. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.franja-prueba a { color: var(--tonico-alto); margin-left: 0.35rem; }

/* La misma franja mínima que la de la prueba, en azul suave para que no se
 * confundan cuando salgan las dos a la vez. Lleva un botón porque aquí no se
 * informa de un estado: se pide un acto. */
.franja-legal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin: 0;
  background: var(--suave);
  border-bottom: 1px solid color-mix(in srgb, var(--suave) 60%, var(--tonico) 25%);
  color: var(--tinta);
  font-size: 0.8rem;
  line-height: 1.3;
  padding: 0.3rem 1.25rem;
}
.franja-legal a { color: var(--tonico-alto); }
.franja-legal button {
  font: inherit;
  font-weight: 600;
  color: var(--crema);
  background: var(--tonico);
  border: 1px solid var(--tonico);
  border-radius: 3px;
  padding: 0.1rem 0.7rem;
  cursor: pointer;
}
.franja-legal button:hover { background: var(--tonico-alto); border-color: var(--tonico-alto); }
.franja-legal button:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }

/* La casilla de aceptación del registro. Va con la retícula del formulario,
 * pero en fila: el texto al lado y no debajo, y la casilla alineada con la
 * primera línea aunque el texto ocupe tres. */
.ficha .acepto {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--humo);
}
/* Los cuadros de texto del formulario ocupan todo el ancho y llevan marco;
 * una casilla es lo contrario de eso. */
.ficha .acepto input {
  width: auto;
  flex: none;
  padding: 0;
  border: none;
  accent-color: var(--tonico);
  margin: 0.18rem 0 0;
}

.cabecera { background: #FFFFFF; position: relative; z-index: 3; }

/* El degradado va en el contenido y no fijo arriba: puesto arriba quedaba
 * casi todo tapado por la cabecera, que es opaca, y no se veía. Aquí empieza
 * justo donde acaba ella.
 *
 * Solo en `main`, que ya cubre el lateral. Ponerlo también en el lateral
 * sumaba los dos y ese lado salía más oscuro. */
main {
  background-image: linear-gradient(rgba(20, 24, 31, 0.022), rgba(20, 24, 31, 0));
  background-repeat: no-repeat;
  background-size: 100% 6vh;
}
.cabecera .centro {
  /* La cabecera no se ciñe al ancho del contenido: con el margen del resto,
   * el logo quedaba flotando muy adentro en pantallas anchas. */
  max-width: none;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.6rem 1.4rem;
  flex-wrap: wrap;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}
.marca {
  font-family: var(--titular);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.012em;
  text-decoration: none;
  color: var(--tinta);
}
.marca span { color: var(--tonico); }
.cabecera nav {
  display: flex;
  gap: 1.1rem;
  font-size: 0.89rem;
  margin-right: auto;
  flex-wrap: wrap;
}
.cabecera nav a { color: var(--humo); text-decoration: none; }
.cabecera nav a:hover, .cabecera nav a[aria-current] { color: var(--tinta); }
.cabecera nav a[aria-current] { font-weight: 600; }

/* ── botones ──────────────────────────────────────────────── */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: var(--tonico);
  color: var(--papel);
  border: 1px solid var(--tonico);
  border-radius: 3px;
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.3;
  padding: 0.5rem 1rem;
  text-decoration: none;
  cursor: pointer;
}
.boton:hover { background: var(--tonico-alto); border-color: var(--tonico-alto); }
.boton:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.boton--linea { background: none; color: var(--tonico); border-color: var(--linea); }
.boton--linea:hover {
  background: var(--suave);
  border-color: var(--tonico);
  color: var(--tonico-alto);
}
.boton--grande { font-size: 0.95rem; padding: 0.65rem 1.35rem; }

/* ── portada ──────────────────────────────────────────────── */
/* La frase va encima de la foto. La foto se pinta en blanco y negro y se
 * oscurece por debajo: es lo que permite que el texto blanco se lea sea
 * cual sea la imagen que se ponga, sin tener que retocarla antes.
 *
 * El gris de reserva es oscuro a propósito: si un día falta la foto, el
 * texto blanco tiene que seguir leyéndose. */
.portada {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: clamp(19rem, 44vw, 31rem);
  padding: clamp(2.5rem, 6vw, 4rem) 0;
  text-align: center;
  border-bottom: 1px solid var(--linea);
  --foto: none;
}
.portada::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: #4A5058;
  background-image: var(--foto);
  background-size: cover;
  /* Anclada arriba: al centrarla se perdía la parte de arriba de la foto,
   * que suele ser la que el admin encuadra a propósito. */
  background-position: center top;
  background-repeat: no-repeat;
  /* Sin retocar de ninguna manera: ni aclarada, ni oscurecida, ni pasada a
   * gris. Quien sube la foto decide cómo tiene que verse, y el contraste
   * con el texto lo resuelve la sombra de las letras. */
}
.portada .centro { position: relative; z-index: 2; }

.portada h1 {
  font-family: var(--titular);
  font-weight: 700;
  font-size: clamp(1.9rem, 5vw, 2.9rem);
  line-height: 1.13;
  letter-spacing: -0.022em;
  margin: 0 auto 1.1rem;
  /* Ancha de verdad: encajonar la frase en 20ch la hacía parecer una
   * pastilla dentro de la foto en vez de el titular de la página. */
  max-width: 30ch;
  color: #FFFFFF;
  /* Sombra corta y cerrada en vez de un halo difuso: perfila el borde de
   * la letra, que es lo que hace legible el texto sobre una foto clara. */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 2px 10px rgba(0, 0, 0, 0.45);
}
.portada p {
  margin: 0 auto 1.7rem;
  max-width: 62ch;
  color: #FFFFFF;
  font-size: clamp(1.05rem, 2.4vw, 1.28rem);
  line-height: 1.5;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 2px 9px rgba(0, 0, 0, 0.4);
}

.puertas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.5rem;
  padding: clamp(1.75rem, 4vw, 2.5rem) 0 clamp(2.5rem, 5vw, 3.5rem);
}

/* Cada producto con su acento. Es el único sitio de la web donde el color no
 * es el tónico: aquí lo que distingue una tarjeta de otra es de qué producto
 * habla, y tres azules iguales no lo decían. */
.puerta--precios       { --acento: #1A65D8; --acento-piel: #DCE9FC; }
.puerta--empresas      { --acento: #C2571F; --acento-piel: #FBE3D8; }
.puerta--horas-hombre  { --acento: #2E7D52; --acento-piel: #DDEFE4; }

.puerta {
  position: relative;
  /* La lámina del fondo se sale de la tarjeta por los cuatro lados: sin esto
   * asomaría por fuera del borde redondeado. */
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--crema);
  border: 1px solid var(--linea);
  border-radius: 10px;
  padding: 1.6rem 1.5rem 1.7rem;
  transition: border-color 140ms, box-shadow 140ms, transform 140ms;
}
.puerta:hover {
  border-color: var(--acento);
  box-shadow: 0 6px 20px -12px rgba(20, 24, 31, 0.35);
  transform: translateY(-2px);
}

/* Tres capas: la lámina al fondo, el velo que despeja el texto, y el
 * contenido encima. Sin el velo, el párrafo gris sobre la acuarela se leía
 * mal justo donde se explica el producto. */
.puerta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Sin archivo no hay imagen y la tarjeta se queda blanca. */
  background-image: var(--obra, none);
  background-repeat: no-repeat;
  background-size: 230%;
  opacity: 0.3;
}
.puerta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.55) 38%,
    rgba(255, 255, 255, 0.88) 62%
  );
}
/* Cada producto enseña un objeto distinto de la lámina: con el mismo
 * encuadre en las tres se notaba que es una sola imagen. */
.puerta--precios::before      { background-position: 30% 18%; }  /* el rollo de cable */
.puerta--empresas::before     { background-position: 82% 20%; }  /* los tubos */
.puerta--horas-hombre::before { background-position: 83% 80%; }  /* las varillas */

.puerta > * { position: relative; z-index: 2; }
.puerta .dibujo { display: block; margin-bottom: 1.1rem; }
.puerta .dibujo svg { display: block; width: 4.65rem; height: 4.65rem; }
/* Los tres iconos se dibujan igual: una pieza maciza del color del producto
 * apoyada sobre otra del mismo color muy rebajado, y los detalles calados en
 * blanco. */
.icono-fondo  { fill: var(--acento-piel); }
.icono-solido { fill: var(--acento); }
.icono-trazo  { stroke: #FFFFFF; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.icono-texto  { fill: #FFFFFF; font-family: var(--titular); font-weight: 700; }

.puerta h2 {
  font-family: var(--titular);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.2;
  margin: 0 0 0.55rem;
  letter-spacing: -0.012em;
}
.puerta:hover h2 { color: var(--acento); }

.puerta p { margin: 0; color: var(--humo); font-size: 0.93rem; }
/* Las cifras son el argumento de venta de la tarjeta: se leen antes que la
 * frase que las rodea. */
.puerta .cifra {
  color: var(--tinta);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.franja {
  border-top: 1px solid var(--linea);
  padding: 2.5rem 0 3.5rem;
  text-align: center;
}
.franja h2 {
  font-family: var(--titular);
  font-weight: 700;
  font-size: 1.6rem;
  margin: 0 0 0.5rem;
}
.franja p { margin: 0 auto 1.3rem; max-width: 46ch; color: var(--humo); }

/* ── páginas de contenido ─────────────────────────────────── */
main { padding-bottom: 4rem; }

.titulo { padding: 2.1rem 0 1.2rem; }
.titulo h1 {
  font-family: var(--titular);
  font-weight: 700;
  /* El mismo que los títulos de las tablas. Más grande pesaba más que el
   * propio contenido de la página, que aquí es un formulario o una lista. */
  font-size: 1.5rem;
  letter-spacing: -0.018em;
  margin: 0 0 0.3rem;
}
.titulo .apunte { margin: 0; color: var(--humo); font-size: 0.95rem; }

/* ── avisos ───────────────────────────────────────────────── */
.aviso, .error {
  border: 1px solid var(--tonico);
  background: var(--suave);
  border-radius: 3px;
  padding: 0.8rem 1rem;
  margin: 0 0 1.2rem;
  font-size: 0.92rem;
}
.error { border-color: var(--alerta); background: #FDEEEC; color: var(--alerta); }
.error b { color: var(--alerta); }

/* ═══════════════════════════════════════════════════════════
   La pantalla de datos.

   Ocupa el alto de la ventana y el documento no scrollea: los dos
   scrolls viven dentro de la tabla, que es la unica forma de que la
   barra horizontal este siempre a la vista y no al final de la
   pagina. Todo lo que no es tabla se va a la izquierda, que es
   donde no cuesta alto.
   ═══════════════════════════════════════════════════════════ */
body.pantalla {
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
body.pantalla .franja-prueba,
body.pantalla .cabecera { flex: 0 0 auto; }
body.pantalla main { flex: 1 1 auto; min-height: 0; padding: 0; }

.tablero {
  height: 100%;
  display: grid;
  grid-template-columns: 15.5rem 1fr;
  min-height: 0;
}

/* ── barra lateral ────────────────────────────────────────── */
.panel {
  overflow-y: auto;
  padding: 1.1rem 1.15rem 2rem;
  min-height: 0;
}
.panel form { display: flex; flex-direction: column; gap: 0.6rem; }

/* Todos los campos del lateral se ven igual: buscador y filtros. */
.panel input[type="search"], .panel input[type="text"] {
  font: inherit;
  font-size: 0.88rem;
  padding: 0.45rem 0.6rem;
  width: 100%;
  background: var(--papel);
  color: var(--tinta);
  border: 1px solid var(--linea);
  border-radius: 3px;
}
.panel input[type="search"]:focus {
  outline: none;
  border-color: var(--tonico);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--tonico) 22%, transparent);
}
.panel .boton { width: 100%; justify-content: center; }

/* ── la K de dificultad, en el lateral ─────────────────────── */
.kdif { display: flex; flex-direction: column; gap: 0.35rem; }

/* Explicación que se despliega en su sitio. Nativa y sin JavaScript a
 * propósito: un cuadro flotante depende del orden de capas y deja de verse
 * dentro de un diálogo, que se dibuja por encima de todo. Esto funciona
 * igual en los dos sitios. */
.nota { font-size: 0.85rem; color: var(--humo); }
.nota > summary {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
  list-style: none;
}
.nota > summary::-webkit-details-marker { display: none; }
/* Un ángulo hacia abajo, dibujado con dos bordes. Achatado con `scaleY`
 * después de girarlo, que es lo que le da la forma de uve abierta en vez del
 * pico cerrado que sale de girar un cuadrado 45 grados.
 *
 * Un ángulo y no un interrogante: no se está preguntando nada, se está
 * diciendo que debajo hay más. Y girado cuando está abierto, que es lo que
 * hace que se entienda sin leer nada. */
.nota > summary .angulo {
  flex: none;
  width: 0.46em;
  height: 0.46em;
  margin-bottom: 0.18em;
  border-right: 1.5px solid var(--tenue);
  border-bottom: 1.5px solid var(--tenue);
  transform: scaleY(0.62) rotate(45deg);
  transition: transform 140ms, border-color 140ms;
}
.nota > summary:hover .angulo,
.nota > summary:focus-visible .angulo {
  border-right-color: var(--tonico);
  border-bottom-color: var(--tonico);
}
.nota[open] > summary .angulo {
  border-right-color: var(--tonico);
  border-bottom-color: var(--tonico);
  transform: scaleY(0.62) rotate(-135deg);
  margin-bottom: 0;
  margin-top: 0.18em;
}
.nota > p {
  margin: 0.35rem 0 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--tenue);
}
.kdif input {
  font: inherit;
  font-size: 0.88rem;
  padding: 0.45rem 0.6rem;
  width: 100%;
  background: var(--papel);
  color: var(--tinta);
  border: 1px solid var(--linea);
  border-radius: 3px;
  font-variant-numeric: tabular-nums;
}
.kdif input:focus {
  outline: none;
  border-color: var(--tonico);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--tonico) 22%, transparent);
}
.kdif input:disabled { color: var(--tenue); cursor: not-allowed; }
.kdif .calcular {
  font: inherit;
  font-size: 0.8rem;
  text-align: left;
  padding: 0;
  border: 0;
  background: none;
  color: var(--tonico);
  text-decoration: none;
  cursor: pointer;
}
.kdif .calcular:hover { color: var(--tonico-alto); }

/* Texto normal, sin burbuja: son un filtro, no botones. */
.pastillas { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin-left: auto; }
.pastilla { font-size: 0.88rem; color: var(--humo); text-decoration: none; }
.pastilla:hover { color: var(--tonico); }
/* Una especialidad que el plan no cubre. Sigue siendo un enlace: entrar y
 * verla cortada es lo que empuja a subir de plan. */
.pastilla.cerrada { color: var(--tenue); }
.pastilla.cerrada:hover { color: var(--tonico); }
/* Candado dibujado: el cuerpo con el borde de la caja y el arco encima. */
.pastilla .candado {
  display: inline-block;
  position: relative;
  width: 0.52em;
  height: 0.42em;
  border: 1.4px solid currentColor;
  border-radius: 1px;
  margin-left: 0.1em;
  vertical-align: -0.02em;
}
.pastilla .candado::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 0.34em;
  height: 0.24em;
  transform: translateX(-50%);
  border: 1.4px solid currentColor;
  border-bottom: 0;
  border-radius: 0.2em 0.2em 0 0;
}
.pastilla.elegida {
  color: var(--tinta);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--tonico);
}

.opciones { display: flex; flex-direction: column; gap: 0.18rem; }

.columnas { display: flex; flex-direction: column; gap: 0.18rem; margin-top: 0.35rem; }
.limpiar { font-size: 0.8rem; color: var(--humo); text-align: center; margin-top: 0.2rem; }

/* Lo que le queda de cortesía, en el propio lateral: enterarse al agotarlo
 * es peor que verlo venir. */
.cupo {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--humo);
  background: var(--papel);
  border-radius: 3px;
  padding: 0.5rem 0.6rem;
}
.cupo .cuantas { color: var(--tinta); font-variant-numeric: tabular-nums; }
.cupo.poco { background: var(--suave); color: var(--tonico-alto); }
.cupo.poco .cuantas { color: var(--tonico-alto); }

/* ── palanca de IGV ───────────────────────────────────────── */
.palanca {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--humo);
  padding: 0.25rem 0;
}
.palanca input { position: absolute; opacity: 0; pointer-events: none; }
.palanca .carril {
  flex: 0 0 auto;
  width: 2.1rem;
  height: 1.15rem;
  border-radius: 999px;
  background: var(--linea);
  position: relative;
  transition: background 140ms;
}
.palanca .carril::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(1.15rem - 4px);
  height: calc(1.15rem - 4px);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 140ms;
}
.palanca input:checked + .carril { background: var(--tonico); }
.palanca input:checked + .carril::after { transform: translateX(0.95rem); }
.palanca input:focus-visible + .carril { box-shadow: 0 0 0 2px var(--tinta); }
.palanca input:checked ~ .que { color: var(--tinta); font-weight: 500; }

.opcion {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
  color: var(--humo);
  cursor: pointer;
}
.opcion input { accent-color: var(--tonico); margin: 0; }
.opcion:hover { color: var(--tinta); }

/* ── el lienzo: titulo, tabla y paginacion ────────────────── */
.lienzo { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.encabezado {
  flex: 0 0 auto;
  padding: 0.9rem 1.25rem 0.7rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1.5rem;
}
.encabezado .quees { display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; }
/* Qué se está viendo ahora, al lado del total de siempre. */
.encabezado .viendo { color: var(--tonico); }
.encabezado h1 {
  font-family: var(--titular);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.018em;
  margin: 0;
}
/* Que las horas van multiplicadas por la K. Va en el apunte y no en el
 * rótulo de la columna: ahí ensancharía la columna y se partiría en dos
 * líneas. En una sola línea y del color del tónico, que es lo que hace que
 * se note sin ocupar. */
.encabezado .ajustadas {
  color: var(--tonico);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Discreto: el numero acompana, no compite con el titulo. */
.encabezado .apunte {
  margin: 0;
  color: var(--tenue);
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
}

/* ── la tabla ─────────────────────────────────────────────── */
.marco {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}
/* Reparto automático, con la descripción acotada por dentro.
 *
 * El reparto fijo repartía a la fuerza: cuando el espacio apretaba le quitaba
 * ancho a Fabricante por mucho que se le pusiera, y su rótulo salía como
 * 'Fabrica…'. Con el automático, cada columna pide lo que necesita para su
 * contenido y ninguna se queda corta.
 *
 * Lo que descontrolaba el ancho antes era la descripción, y ya no: su tope
 * vive en el envoltorio de dentro de la celda, no en la celda. `max-width`
 * en un `td` se ignora; en un `span` de dentro, no. Ese era el fallo de
 * origen, y arreglarlo permite volver al reparto que respeta el contenido.
 *
 * Los anchos de abajo son una pista y no una imposición: si el contenido
 * necesita más, manda el contenido; si sobra sitio, se reparte. */
table {
  border-collapse: collapse;
  font-size: 0.85rem;
  width: 100%;
  table-layout: auto;
}

th.ancho-precio  { width: 7rem; }
th.ancho-fecha   { width: 6rem; }
th.ancho-codigo  { width: 6.5rem; }
th.ancho-marca   { width: 9rem; }
th.ancho-enlace  { width: 6rem; }
th.ancho-corto   { width: 5rem; }
/* Las de texto piden lo mismo, así que se reparten a partes iguales cuando
 * hay varias: sin esto, encender Detalle dejaba la descripción más estrecha
 * que él, y las dos llevan la misma clase de contenido. */
th.ancho-texto   { width: 22rem; }
/* Las de agrupar van estrechas: como casi todas sus celdas quedan en blanco,
 * el ancho solo lo pide la primera de cada grupo. */
th.ancho-grupo   { width: 9rem; }
/* El directorio tiene que caber entero sin barra horizontal, también con
 * Dirección encendida, así que sus dos columnas de texto van más cortas que
 * una descripción: se leen de un vistazo y el resto sale en el cuadro
 * flotante. Por debajo no bajan del suelo de `.recorte`. */
th.ancho-empresa   { width: 14rem; }
th.ancho-direccion { width: 12rem; }
/* Distrito y provincia son nombres cortos y conocidos. */
th.ancho-lugar   { width: 7.5rem; }
/* Como las cortas, pero con sitio para el símbolo de ayuda del rótulo: en
 * 5.75rem, con reparto automático, el navegador seguía encogiendo la columna
 * hasta partir la línea en dos. */
th.ancho-dato    { width: 7.25rem; }
/* Las dos más estrechas de la tabla: sus valores son '1.35' y 'm2', y el
 * ancho que les sobraba se lo quitaba a la descripción. */
th.ancho-hh      { width: 4.75rem; }
th.ancho-um      { width: 4.25rem; }

/* Misma letra que los datos: el versalitas monoespaciado sonaba a
 * herramienta de programador, no a lista de precios. */
thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  /* Todos los rótulos centrados: la cabecera se lee como una banda y no
   * arrastra la vista hacia la izquierda de cada columna. */
  text-align: center;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--humo);
  padding: 0.5rem 0.85rem;
  background: var(--crema);
  border-bottom: 1px solid var(--linea);
  white-space: nowrap;
}
/* Todas las celdas iguales: misma letra, mismo cuerpo, mismo color. Lo
 * unico que cambia es la alineacion de los numeros, que no es estilo sino
 * poder compararlos de un vistazo. */
tbody td {
  padding: 0.256rem 0.85rem;
  border-bottom: 1px solid color-mix(in srgb, var(--linea) 55%, transparent);
  white-space: nowrap;
  /* Gris oscuro y no negro: son cientos de filas seguidas y el negro puro
   * las hace pesadas de recorrer. */
  color: #3A4150;
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
tbody tr:hover td { background: var(--papel); }
td.numero { text-align: right; font-variant-numeric: tabular-nums; }

/* Símbolo de ayuda del rótulo: explica de dónde sale un dato sin alargar la
 * cabecera. Discreto hasta que se busca, y con el mismo cuadro flotante que
 * usan las celdas cortadas, que va en `position: fixed` y por tanto no lo
 * recorta el marco con scroll de la tabla.
 *
 * En flujo normal caía siempre a la línea de abajo, ensanchar la columna o
 * quitar espacios no lo evitaba: `thead th > a` es `display: block`, y un
 * bloque termina la línea donde está y todo lo que le sigue empieza en una
 * nueva, sea cual sea su propio `display`. Sacándolo del flujo con
 * `position: absolute` dentro de la cabecera —que ya es `position: sticky`,
 * así que hace de referencia igual que para `.tirador`— deja de estar sujeto
 * a esa regla y no hace falta tocar el enlace ni su estilo. */
thead th .ayuda {
  position: absolute;
  top: 50%;
  /* Antes del tirador, que ocupa los últimos 6px. */
  right: 0.55rem;
  transform: translateY(-50%);
  font: inherit;
  font-size: 0.66rem;
  line-height: 1;
  width: 1.3em;
  height: 1.3em;
  padding: 0;
  border: 1px solid var(--linea);
  border-radius: 50%;
  background: var(--crema);
  color: var(--tenue);
  cursor: help;
}
thead th .ayuda:hover,
thead th .ayuda:focus-visible {
  border-color: var(--tonico);
  color: var(--tonico);
  outline: none;
}
/* Las columnas cortas, centradas: sueltas a la izquierda de una columna
 * ancha quedaban descolgadas del rótulo. */
td.centrado { text-align: center; }
td.marca { text-align: center; }

/* Las columnas de texto largo se comian el ancho entero. Se cortan a dos
 * lineas con puntos suspensivos y se despliegan al pulsarlas: el texto
 * completo sigue estando, pero no a costa de las demas columnas.
 *
 * El tope es lo que impide que aparezca barra horizontal: sin el, una sola
 * descripcion larga estira la tabla mas alla de la pantalla. */
/* Las únicas que ocupan dos líneas. El recorte va en un envoltorio dentro
 * de la celda y no en la celda misma: `display: -webkit-box` saca al `td`
 * del reparto de la tabla, y entonces su borde inferior deja de cuadrar con
 * el de las demás en cuanto una fila crece. */
td.texto { white-space: normal; }
td.texto .recorte {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.32;
  /* El tope va aquí y no en la celda: es lo que impide que la descripción
   * estire la tabla más allá de la pantalla. Si el sitio aprieta, esta
   * columna encoge antes que las demás, que es lo que se quiere: un
   * fabricante a medias no identifica nada, una descripción a medias sí.
   *
   * El suelo evita que se quede en un canal de dos palabras cuando se
   * encienden varias columnas de texto a la vez. */
  max-width: 26rem;
  min-width: 11rem;
}

/* Columnas agrupadas: el valor se repite en todas las filas del grupo, pero
 * apagado salvo en la que lo abre. Dejarlas en blanco se leía como un dato
 * que falta; en gris claro se sigue sabiendo a qué sección pertenece la fila
 * y el negro marca dónde empieza el grupo siguiente. */
td.agrupada { white-space: normal; line-height: 1.3; }
/* Muy claro a propósito: tiene que dejarse leer si se busca, pero no competir
 * con la fila que abre el grupo ni con la descripción, que es lo que se lee. */
td.callada { color: color-mix(in srgb, var(--tenue) 45%, var(--crema)); }

/* Llevan ancho de sobra para su contenido, así que no se cortan: un
 * fabricante a medias no identifica nada y un precio a medias es peor que
 * no enseñarlo. */
td.entero { white-space: nowrap; }

/* Cualquier celda cortada enseña su texto entero al pulsarla, en un cuadro
 * flotante. Estirar la fila descuadraba las líneas de las celdas vecinas, y
 * además movía todo lo de debajo justo cuando se está leyendo. */
tbody td { cursor: pointer; }

.globo {
  position: fixed;
  z-index: 40;
  max-width: min(34rem, 90vw);
  /* En blanco y no en oscuro: el cuadro sale sobre la tabla y un rectángulo
   * negro en medio de una lista clara pesa demasiado. El borde y la sombra
   * son los que lo despegan del fondo. */
  background: var(--crema);
  color: var(--tinta);
  font-size: 0.85rem;
  line-height: 1.45;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--linea);
  border-radius: 4px;
  box-shadow: 0 6px 24px rgba(20, 24, 31, 0.16);
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}
.globo[hidden] { display: none; }
.globo .de {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tenue);
  margin-bottom: 0.15rem;
}

/* Columnas fijas al desplazarse de lado: sin ellas, al llegar al precio ya
 * no se sabe de que producto es. Cuantas y su posicion las pone tabla.js,
 * que es quien sabe lo que mide cada una. */
tbody td.pegada { position: sticky; z-index: 1; background: var(--crema); }
thead th.pegada { z-index: 4; }
tbody tr:hover td.pegada { background: var(--papel); }
/* Una linea que marca donde acaba lo fijo y empieza lo que se desplaza. */
th.ultima-pegada, td.ultima-pegada { box-shadow: 1px 0 0 var(--linea); }

/* ── cabeceras: ordenar y ajustar ─────────────────────────── */
thead th { position: sticky; padding: 0; }
thead th > a {
  display: block;
  padding: 0.5rem 0.5rem;
  color: inherit;
  text-decoration: none;
  /* De una línea siempre: cada columna tiene ancho para su rótulo entero. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
thead th > a:hover { color: var(--tonico); }
thead th .flecha { color: var(--tonico); font-size: 0.9em; }


/* El tirador es una franja invisible sobre el borde derecho. Ancha para
 * poder agarrarla, pero sin dibujarse hasta que se pasa por encima. */
.tirador {
  position: absolute;
  top: 0;
  /* Dentro de la celda y no asomando: sobresalir 3px de la última columna
   * era lo que sacaba la barra horizontal aunque todo cupiera. */
  right: 0;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  z-index: 5;
  touch-action: none;
}
.tirador:hover { background: var(--tonico); }
body.ajustando { cursor: col-resize; user-select: none; }
body.ajustando .tirador { background: var(--tonico); }

tbody tr.esfuma td { opacity: 0.45; }
tbody tr.esfuma + tr.esfuma td { opacity: 0.28; }
tbody tr.esfuma + tr.esfuma + tr.esfuma td { opacity: 0.14; }

.corte td {
  border-bottom: 0;
  padding: 0;
  white-space: normal;
  max-width: none;
  position: static;
  background: linear-gradient(to bottom, transparent, var(--suave));
}
/* Pegado a la izquierda del area visible. Centrado en una tabla de dos
 * metros de ancho, el aviso se quedaba fuera de pantalla justo cuando es
 * lo unico que hay que leer. */
.corte .pegado {
  position: sticky;
  left: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.8rem;
  width: fit-content;
  padding: 0.9rem 1.25rem 1rem;
}
.corte .cuantas {
  font-family: var(--titular);
  font-weight: 700;
  font-size: 1rem;
}

.paginas {
  flex: 0 0 auto;
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 0;
  font-size: 0.85rem;
  color: var(--humo);
  border-top: 1px solid var(--linea);
}
.vacio { text-align: center; color: var(--humo); padding: 3rem 1rem; }

/* ── la calculadora de la K ────────────────────────────────── */
.dialogo {
  border: 1px solid var(--linea);
  border-radius: 5px;
  padding: 0;
  width: min(38rem, 92vw);
  max-height: 88vh;
  background: var(--crema);
  color: var(--tinta);
}
.dialogo::backdrop { background: rgba(20, 24, 31, 0.42); }
.calculadora { display: flex; flex-direction: column; max-height: 88vh; }
.calculadora header { padding: 1.3rem 1.5rem 0.9rem; }
.calculadora h2 {
  font-family: var(--titular);
  font-weight: 700;
  font-size: 1.2rem;
  margin: 0 0 0.3rem;
}
.calculadora header p { margin: 0; color: var(--humo); font-size: 0.88rem; }

/* Las trece juntas se leen como un ecualizador, así que van pegadas y con
 * las barras alineadas: lo que se mira es el perfil del conjunto. */
.calculadora .condiciones {
  overflow-y: auto;
  padding: 0.4rem 1.5rem 1rem;
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
}
/* Sin línea entre condiciones: las trece barras ya se leen como un bloque y
 * la separación solo añadía ruido. */
.condicion { padding: 0.45rem 0; }
.condicion .nota { color: var(--tinta); font-size: 0.88rem; }
.condicion .nota > p { margin-bottom: 0.35rem; }
.condicion input[type="range"] { margin-top: 0.3rem; }

/* La barra se pinta de tónico hasta donde llega. `--parte` va de 0 a 1 y la
 * pone el JS al deslizar. */
.condicion input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 0.27rem;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--tonico) calc(var(--parte, 0) * 100%),
    var(--linea) calc(var(--parte, 0) * 100%)
  );
  cursor: pointer;
}
.condicion input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--tonico);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
}
.condicion input[type="range"]::-moz-range-thumb {
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--tonico);
}
.condicion input[type="range"]:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }

/* Los botones a la derecha: sin la K delante, el pie se queda solo con
 * ellos. */
.calculadora footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
  padding: 1rem 1.5rem 1.2rem;
}

/* ── planes ───────────────────────────────────────────────── */
.filtros { margin: 0 0 1.3rem; }

.rejilla-planes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
  padding-bottom: 2.5rem;
}
.plan {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 4px;
  padding: 1.5rem 1.5rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.plan--destacado { border-color: var(--tonico); box-shadow: inset 0 0 0 1px var(--tonico); }
.plan h2 {
  font-family: var(--titular);
  font-size: 1.25rem;
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--tinta);
  margin: 0 0 0.4rem;
  font-weight: 700;
  text-wrap: balance;
}
.plan .importe {
  font-family: var(--titular);
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.plan .importe small { font-family: var(--sans); font-size: 0.85rem; color: var(--humo); }
.plan .ahorro { font-size: 0.82rem; color: var(--tonico); min-height: 1.2em; }
/* Lo que incluye el plan, tal como se escribe en el panel. Los saltos de
 * línea del ajuste se respetan aquí y no metiendo etiquetas en el texto. */
.plan .incluye {
  white-space: pre-line;
  margin: 0.9rem 0 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--linea);
  color: var(--humo);
  font-size: 0.9rem;
}
.plan .incluye .cifra { color: var(--tinta); font-weight: 600; font-variant-numeric: tabular-nums; }
.plan .boton { margin-top: auto; }

/* ── formularios ──────────────────────────────────────────── */
.ficha {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 4px;
  padding: 1.6rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
  max-width: 44rem;
}
.ficha label { display: flex; flex-direction: column; gap: 0.28rem; }
.ficha .ancho { grid-column: 1 / -1; }
.ficha input {
  font: inherit;
  font-size: 0.95rem;
  padding: 0.5rem 0.65rem;
  background: var(--papel);
  color: var(--tinta);
  border: 1px solid var(--linea);
  border-radius: 3px;
  width: 100%;
}
.ficha input:focus {
  outline: none;
  border-color: var(--tonico);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--tonico) 22%, transparent);
}
.ficha .pista { font-size: 0.78rem; color: var(--tenue); }
.ficha .obligatorios { margin: 0; font-size: 0.8rem; color: var(--humo); }
/* El texto del cuadro hace de rótulo, así que tiene que leerse: el gris de
 * un marcador de posición corriente es demasiado claro para eso. */
.ficha input::placeholder { color: var(--humo); opacity: 1; }

/* El dd/mm/aaaa de un campo de fecha no es un marcador de posición sino texto
 * del propio campo, así que sale en negro y no acompaña a los demás cuadros.
 * Mientras esté vacío el campo es inválido —es obligatorio—, y eso permite
 * darle el mismo gris; al escribir la fecha pasa a válido y vuelve al color
 * normal, que es justo lo que se quiere. */
.ficha input[type="date"]:invalid { color: var(--humo); }
.ficha .acciones { grid-column: 1 / -1; display: flex; gap: 0.7rem; align-items: center; flex-wrap: wrap; }

/* Los desplegables y los campos de varias líneas del Libro de Reclamaciones:
 * el mismo cuadro que los de una línea, para que el formulario se lea como
 * una sola pieza. */
.ficha select, .ficha textarea {
  font: inherit;
  font-size: 0.95rem;
  padding: 0.5rem 0.65rem;
  background: var(--papel);
  color: var(--tinta);
  border: 1px solid var(--linea);
  border-radius: 3px;
  width: 100%;
}
.ficha textarea { resize: vertical; line-height: 1.5; }
.ficha textarea::placeholder { color: var(--humo); opacity: 1; }
.ficha select:focus, .ficha textarea:focus {
  outline: none;
  border-color: var(--tonico);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--tonico) 22%, transparent);
}

/* El rótulo que separa los tres bloques del formulario. Sin él, veinte
 * cuadros seguidos no se distinguen unos de otros. */
.ficha .grupo {
  grid-column: 1 / -1;
  margin: 0.7rem 0 0;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tenue);
}
.ficha .grupo:first-of-type { margin-top: 0; }
.ficha .pista { grid-column: 1 / -1; margin: 0; }
/* Reclamo o queja: en fila, que son dos. */
.tipos { display: flex; gap: 1.4rem; }
.tipos .opcion input { width: auto; padding: 0; border: none; accent-color: var(--tonico); }

/* Anchos de bloque. Dos medidas y no una por página: un texto suelto se lee
 * peor cuanto más ancho, y la que hace falta es siempre la misma. */
.estrecho { max-width: 30rem; }   /* formulario de una sola columna */
.lectura  { max-width: 38rem; }   /* tarjeta o aviso por su cuenta */

/* Una aclaración pequeña al pie de algo: la letra chica de la página. */
.pista { font-size: 0.85rem; color: var(--tenue); }

/* ── ficha de la cuenta ───────────────────────────────────── */
.tarjeta {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 4px;
  padding: 1.4rem 1.5rem;
  margin-bottom: 1rem;
}
.tarjeta h2 {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tenue);
  margin: 0 0 0.6rem;
  font-weight: 500;
}
.tarjeta .grande {
  font-family: var(--titular);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.2;
  display: block;
}
/* Un código se lee carácter a carácter, así que va en monoespaciada y algo
 * más separado: es como se copia sin equivocarse. */
.tarjeta .grande.codigo { font-family: var(--mono); letter-spacing: 0.05em; }

/* Lo que explica el dato grande de la tarjeta, pegado a él. */
.tarjeta p { margin: 0.4rem 0 0; color: var(--humo); font-size: 0.92rem; }
/* El párrafo que solo lleva un botón: se despega para que se vea aparte. */
.tarjeta .accion { margin: 0.9rem 0 0; }
.tarjeta .pista { margin: 0.9rem 0 0; }
.tarjeta .error { margin: 0; color: var(--alerta); }
.tarjeta dl { margin: 0; }
/* El mensaje que el cliente va a enviar: es el contenido de la tarjeta, no
 * un pie, así que va del color y el cuerpo del texto normal. */
.tarjeta .mensaje { margin: 0 0 1rem; color: var(--tinta); font-size: 0.95rem; }

.dato { display: flex; gap: 0.6rem; font-size: 0.92rem; padding: 0.2rem 0; }
.dato dt { color: var(--tenue); flex: 0 0 8.5rem; }
.dato dd { margin: 0; }

/* ── documentos legales ───────────────────────────────────── */
/* Más estrecho que el resto de la web y con la línea más suelta: son textos
 * largos que hay que poder leer de corrido, no consultar de un vistazo como
 * una tabla. */
.legal {
  max-width: 42rem;
  color: var(--humo);
  font-size: 0.95rem;
  line-height: 1.7;
}
/* El hueco entre cláusulas lo pone el propio bloque y no los márgenes de los
 * párrafos, que se colapsan entre sí y dejan separaciones desiguales. */
.legal section { padding: 1.6rem 0 0; }
.legal section + section { border-top: 1px solid var(--linea); margin-top: 1.6rem; }
.legal h2 {
  font-family: var(--titular);
  font-weight: 600;
  font-size: 1.12rem;
  line-height: 1.3;
  color: var(--tinta);
  margin: 0 0 0.7rem;
}
.legal p { margin: 0 0 0.85rem; }
.legal p:last-child { margin-bottom: 0; }
/* La negrita marca el número de apartado y los términos que definen la
 * obligación: es lo que se busca al releer el documento. */
.legal b { color: var(--tinta); font-weight: 600; }
.legal ul, .legal ol { margin: 0 0 0.85rem; padding-left: 1.4rem; }
.legal li { margin-bottom: 0.4rem; }
.legal > .pista { margin: 2.2rem 0 0; }

/* El nombre exacto de una cookie o de un campo: se lee carácter a carácter,
 * como el código de la suscripción. */
.codigo-en-linea {
  font-family: var(--mono);
  font-size: 0.88em;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 3px;
  padding: 0.05em 0.3em;
}

/* ── pie ──────────────────────────────────────────────────── */
.pie {
  border-top: 1px solid var(--linea);
  padding: 2rem 0 3rem;
  color: var(--tenue);
  font-size: 0.85rem;
}
.pie .centro { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; align-items: baseline; }
.pie a { color: var(--humo); text-decoration: none; }
.pie a:hover { color: var(--tinta); }
.pie .lejos { margin-left: auto; }

/* ── anticopia ────────────────────────────────────────────── */
/* La tabla no se selecciona. No impide una foto con el movil, pero si el
 * arrastrar-copiar-pegar a un Excel, que es como se llevaria la base
 * entera en un minuto. */
.marco, .marco * {
  user-select: none;
  -webkit-user-select: none;
}

/* Mientras llega la tabla nueva, la vieja se apaga un poco. */
.marco.cargando { opacity: 0.55; }

@media print {
  /* Imprimir es la otra forma cómoda de llevárselo. */
  body > * { display: none !important; }
  body::after {
    content: "Los datos de DataCity no se imprimen. datacity.site";
    font-family: Georgia, serif;
    font-size: 14pt;
    display: block;
    padding: 3cm 2cm;
  }
}

/* ── móvil: la tabla se convierte en fichas ───────────────── */
@media (max-width: 46rem) {
  /* En pantalla pequena no hay sitio para dos columnas: los filtros pasan
   * arriba y la pagina vuelve a scrollear como cualquier otra. */
  body.pantalla { height: auto; overflow: visible; }
  .tablero { grid-template-columns: 1fr; height: auto; }
  .panel { border-right: 0; border-bottom: 1px solid var(--linea); overflow: visible; }
  tbody td.pegada, thead th.pegada { position: static; left: auto; box-shadow: none; }
  .tirador { display: none; }
  td.texto { max-width: none; -webkit-line-clamp: none; display: block; }
  thead th { position: static; }

  .marco { border: 0; background: none; overflow: visible; }
  table, tbody, tr, td { display: block; width: 100%; }
  thead { display: none; }

  tbody tr {
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: 4px;
    margin-bottom: 0.6rem;
    padding: 0.9rem 1rem;
  }
  tbody tr:hover td { background: none; }

  tbody td {
    border: 0;
    padding: 0.1rem 0;
    white-space: normal;
    display: flex;
    gap: 0.75rem;
    align-items: baseline;
    justify-content: space-between;
  }
  /* El rótulo de la columna se pinta delante del dato: sin cabecera de
   * tabla, un '4.19' suelto no dice nada. */
  tbody td::before {
    content: attr(data-titulo);
    font-family: var(--mono);
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tenue);
    flex: 0 0 auto;
  }
  td.principal {
    min-width: 0;
    font-size: 1rem;
    font-weight: 600;
    display: block;
    margin-bottom: 0.5rem;
  }
  td.principal::before { display: none; }
  td.numero { text-align: right; }

  .dato { flex-direction: column; gap: 0; }
  .dato dt { flex: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}