/* Entorno de Inversión v2 — pantalla de lectura.
   Una columna, tipografía del sistema, sin fuentes ni librerías externas.

   Reglas de color (medidas, no supuestas):
   · Neutros para todo. Verde y rojo SOLO para P&L y semáforo, y SIEMPRE
     acompañados de signo o glifo: verde↔rojo separan ΔE 8,7 (claro) y 17,6
     (oscuro) bajo deuteranopia — suficiente para el objetivo del validador,
     insuficiente para confiar el dato al color a secas.
   · Todo par texto/fondo cumple AA (≥ 4,5:1) en los dos modos.
   · Verde y rojo solo se pintan sobre --papel (5,09:1 y 10,45:1 en claro).

   Movimiento: la pantalla se recarga sola cada 30 s. Una entrada animada se
   vería más de cien veces al día, así que no existe (regla de frecuencia).
   Lo único que se mueve es la respuesta al toque de los botones. */

:root {
  color-scheme: light;

  --plano: #eeeeeb;   /* plano de la página */
  --papel: #ffffff;   /* superficie de tarjeta */
  --cab:   #f6f6f4;   /* cabecera, pie y encabezados de tabla */
  --tinta: #14161a;   /* tinta primaria */
  --texto: #2a2d33;   /* cuerpo */
  --texto-2: #5b5f66; /* secundaria */
  --suave: #666a72;   /* rótulos, ejes, huecos */
  --borde: #e4e4e0;   /* filete de 1 px */
  --raya:  #ebebe7;   /* separador interno, rejilla */
  --verde: #064a22;
  --rojo:  #c93a2e;

  /* Alto real de la tira de anclas, que es pegajosa: lo que hay que descontar
     para que un título no aterrice debajo de ella. Dos filas de 390 a 639 px,
     una desde 820. Medido en Chrome, no supuesto: pasarse solo da aire de más,
     quedarse corto esconde el título debajo de la tira. */
  --alto-anclas: 66px;

  --radio-tarjeta: 14px;
  --radio-pieza: 10px;
  --ease-salida: cubic-bezier(0.23, 1, 0.32, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --plano: #0d0f12;
    --papel: #17191d;
    --cab:   #1d1f24;
    --tinta: #f4f5f7;
    --texto: #dcdee3;
    --texto-2: #a8acb4;
    --suave: #8f939b;
    --borde: #2a2d33;
    --raya:  #24272c;
    --verde: #7ce0a4;
    --rojo:  #ef5046;
  }
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  background: var(--plano);
}

body {
  margin: 0;
  padding: 0 16px 40px;
  background: var(--plano);
  color: var(--texto);
  font: 1rem/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;   /* la pantalla se repinta sola: las cifras no bailan */
  overflow-wrap: break-word;
  text-rendering: optimizeLegibility;
}

main, .cabecera, .pie { max-width: 1040px; margin: 0 auto; }

a { color: var(--tinta); text-underline-offset: 2px; }

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

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

.cabecera {
  display: flex; flex-wrap: wrap; gap: 10px 20px;
  align-items: center; justify-content: space-between;
  padding: 18px 0 14px;
  border-bottom: 1px solid var(--borde);
}
.cabecera h1 {
  margin: 0;
  font-size: 1.0625rem; font-weight: 600; line-height: 1.2;
  letter-spacing: -0.012em; color: var(--tinta);
}
.sesion { margin: 0; color: var(--texto-2); font-size: .8125rem; letter-spacing: .005em; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border: 1px solid var(--borde); border-radius: 999px;
  background: var(--cab); font-size: .75rem; letter-spacing: .01em; color: var(--texto-2);
}
.chip b { font-weight: 600; color: var(--tinta); }

/* --- anclas: dónde estoy y adónde puedo ir -------------------------------
   Nueve bloques en una sola columna y ninguna pista de dónde está uno
   (estudio UX/UI §2, H8 · P3.1). Una tira bajo la cabecera, pegajosa, sin
   una línea de JavaScript.

   El enlace del bloque apuntado se marca con `:target` desde el CSS. El
   `:has()` es obligatorio: los enlaces van ANTES de las secciones y ningún
   combinador de hermanos mira hacia atrás. `aria-current` no se puede
   escribir sin JS, así que la marca es visual — y no viaja sola en el color:
   lleva subrayado, que es el segundo canal. */

.anclas {
  position: sticky; top: 0; z-index: 10;
  margin: 0 -16px;            /* sangra sobre el acolchado del body: sin esto el fondo
                                 pegajoso deja ver el contenido por los dos costados */
  padding: 0 16px;
  background: var(--plano);
  border-bottom: 1px solid var(--borde);
}
.anclas-tira {
  display: flex; flex-wrap: wrap; gap: 0 10px;
  max-width: 1040px; margin: 0 auto; padding: 1px 0;
}
.anclas a {
  padding: 8px 0;                            /* diana de 30 px de alto (AA 2.5.8 pide 24) */
  border-bottom: 2px solid transparent;      /* el sitio del subrayado, reservado siempre */
  color: var(--texto-2); text-decoration: none;
  font-size: .625rem; font-weight: 600; line-height: 1.2;
  text-transform: uppercase; letter-spacing: .04em;  /* texto pequeño, tracking positivo */
}
.anclas a:hover { color: var(--tinta); }
/* v2.5.1: el camino a `/validacion` no es un bloque de esta página, así que se distingue
   por peso y tinta (tinta/plano ≥ 16:1) en vez de por color. */
.anclas a.ancla-validacion { color: var(--tinta); font-weight: 700; }

/* Pegajosa solo donde está medido que cabe: dos filas a 390 px, una desde 640.
   Por debajo de 390 se va a tres filas, y 97 px clavados en la pantalla de un
   teléfono estorban más de lo que ayudan: ahí la tira se queda quieta. */
@media (max-width: 389px) {
  .anclas { position: static; }
  :root { --alto-anclas: 0px; }
}
/* v2.5.1: con «Validar señales (N)» la tira pasa a TRES filas entre 390 y ~440 px
   (93 px medidos en Chrome; a 455 px vuelve a dos). Sin este tramo el salto a un bloque
   dejaría el título debajo de la tira. Sin scroll horizontal: scrollWidth == clientWidth. */
@media (min-width: 390px) and (max-width: 459px) {
  :root { --alto-anclas: 96px; }
}
body:has(#veredicto:target) .anclas a[href="#veredicto"],
body:has(#posiciones:target) .anclas a[href="#posiciones"],
body:has(#curva:target) .anclas a[href="#curva"],
body:has(#operaciones:target) .anclas a[href="#operaciones"],
body:has(#estadistica:target) .anclas a[href="#estadistica"],
body:has(#fidelidad:target) .anclas a[href="#fidelidad"],
body:has(#exposicion:target) .anclas a[href="#exposicion"],
body:has(#embudo:target) .anclas a[href="#embudo"],
body:has(#estado:target) .anclas a[href="#estado"] {
  color: var(--tinta); border-bottom-color: var(--tinta);
}
/* La 2.ª tanda va en su propia regla y no dentro del grupo de arriba: el grupo se
   mide en test por su ÚLTIMO selector, que tiene que seguir pegado a su llave. */
body:has(#segunda-tanda:target) .anclas a[href="#segunda-tanda"] {
  color: var(--tinta); border-bottom-color: var(--tinta);
}

/* El ancla no ocupa nada: lo único que aporta es dónde se para el scroll. El
   descuento es la tira pegajosa + el acolchado de la tarjeta + un respiro. */
.ancla { display: block; height: 0; scroll-margin-top: calc(var(--alto-anclas) + 32px); }

/* --- tarjetas ------------------------------------------------------------ */

.bloque {
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
  padding: 18px;
  margin: 14px 0;
}
.bloque h2 {
  margin: 0 0 14px;
  font-size: .6875rem; font-weight: 600; line-height: 1.2;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--texto-2);
}
.bloque h3 {
  margin: 22px 0 8px;
  font-size: .6875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--suave);
}

/* --- cifra héroe y su contexto ------------------------------------------- */

.rotulo-heroe {
  display: block; margin: 0 0 2px;
  font-size: .6875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em; color: var(--suave);
}
.cifra {
  display: block; margin: 0;
  font-size: clamp(2.5rem, 9vw, 3.5rem); font-weight: 700;
  line-height: 1.02; letter-spacing: -0.028em;   /* tracking negativo: el texto grande se lee suelto */
  color: var(--tinta);
}
.delta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  margin: 8px 0 0; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.004em;
}
.delta .apunte { margin: 0; }
/* El hoy es la misma frase medio escalón por debajo del «desde el día 1»: dos líneas de la
   misma forma se leen como una pareja, y el tamaño dice cuál manda. */
.delta-hoy { margin-top: 4px; font-size: .9375rem; }
.glifo { font-size: .8em; line-height: 1; }

/* --- el riesgo abierto, en la cabecera del veredicto ----------------------
   La cifra que asusta no puede vivir a cinco pantallazos de scroll. Sube SOLO la cifra;
   el desglose por sector y por día se queda en Exposición (una fuente por hecho). El
   color de la cifra vive en `.riesgo-cifra`, nunca en el `.v` que hay dentro: si lo
   pusiera ahí (0,2,0) ganaría a `.nada` (0,1,0) y una raya saldría en tinta de dato. */

.riesgo {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  margin: 15px 0 0; padding-top: 13px; border-top: 1px solid var(--raya);
  color: var(--texto-2); font-size: .8125rem; letter-spacing: .006em;
}
.riesgo .et {
  color: var(--suave); font-size: .6875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
}
.riesgo-cifra { color: var(--tinta); font-size: 1rem; font-weight: 600; letter-spacing: -0.004em; }

.semaforo {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 0 0 12px; font-size: .8125rem; letter-spacing: .005em; color: var(--texto-2);
}
.semaforo b { font-weight: 600; color: var(--tinta); }

/* El recuento de la 2.ª tanda: «50 ejecuciones del escáner sobre 25 ideas». Es la
   frase que deshace la confusión entre filas e ideas, así que se lee, no se busca. */
.recuento {
  margin: 2px 0 0; color: var(--tinta);
  font-size: 1rem; font-weight: 600; letter-spacing: -0.006em;
}

.apunte { margin: 6px 0 0; color: var(--texto-2); font-size: .8125rem; letter-spacing: .006em; }
.motivo { margin: 10px 0 0; color: var(--suave); font-size: .8125rem; letter-spacing: .006em; }
.dato .motivo { margin: 4px 0 0; font-size: .75rem; }

.punto {
  width: 10px; height: 10px; border-radius: 50%;
  display: inline-block; flex: 0 0 auto; background: var(--suave);
}
.punto-verde { background: var(--verde); }
.punto-rojo { background: var(--rojo); }
/* Borde de verdad, no una sombra interior: en `forced-colors` las sombras se
   descartan y el punto desaparecía de la pantalla (estudio UX/UI §2, H11). Un
   `border` sí sobrevive — el modo forzado le impone su propio color. */
.punto-gris { background: transparent; border: 2px solid var(--suave); }
.chip .punto { width: 8px; height: 8px; }

/* Kill activo no es un P&L: es un estado crítico, y un color de estado viaja
   SIEMPRE con palabra y punto, nunca solo. Kill apagado y armado se quedan en
   neutro; del «armado sí» solo se tiñe el punto. */
.alarma { color: var(--rojo); }
.chip.alarma { color: var(--rojo); border-color: var(--rojo); }
.chip.alarma b { color: var(--rojo); }

/* --- rejilla de cifras (stat tiles) -------------------------------------- */

.datos {
  display: grid; gap: 10px; margin-top: 16px;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
}
/* El color de la cifra vive en la tarjeta, no en el `.v`: si lo pusiera en
   `.dato .v` (0,2,0) ganaría a `.negativo` (0,1,0) y un P&L en rojo saldría
   en tinta. La herencia es lo que deja pasar el color semántico. */
.dato {
  min-width: 0; color: var(--tinta);
  border: 1px solid var(--borde); border-radius: var(--radio-pieza);
  padding: 11px 12px 12px; background: var(--papel);
}
.dato .et {
  display: block;
  color: var(--suave); font-size: .6875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;  /* tracking positivo: el texto pequeño se lee apretado */
}
.dato .v {
  display: block; margin-top: 3px;
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.004em;
}

.positivo { color: var(--verde); }
.negativo { color: var(--rojo); }
.nada { color: var(--suave); font-weight: 500; }

/* --- posiciones: la escalera de cada una ---------------------------------
   Una tarjeta por posición viva. El dibujo SEÑALA (marcas) y el texto DICE
   (rótulos y leyenda). Todo el texto es HTML, ninguno es `<text>` de SVG: con
   `viewBox` el texto escala con el dibujo y saldría a 8 px en el móvil y a 26
   en escritorio. Con `preserveAspectRatio: none` la x del viewBox y el % del
   ancho son el mismo punto, así que los rótulos caen sobre su marca.

   El stop de catástrofe hereda `.negativo` y tiñe con `currentColor`: mismo
   token rojo, misma semántica de pérdida, sin abrir un consumidor nuevo de
   `--rojo`. Y nunca viaja solo: lleva su nombre, su precio y su % al lado. */

.posiciones { display: grid; gap: 12px; }
.posicion {
  min-width: 0; background: var(--papel);
  border: 1px solid var(--borde); border-radius: var(--radio-pieza);
  padding: 14px 14px 12px;
}
.posicion .posicion-que {
  margin: 0; color: var(--texto);
  font-size: .9375rem; font-weight: 500; line-height: 1.3;
  letter-spacing: -0.006em; text-transform: none;
}
.posicion .posicion-que b { font-weight: 700; color: var(--tinta); letter-spacing: -0.012em; }
/* la estrategia de la operación (contrato 18): discreta, sin color propio */
.estrategia {
  display: inline-block; margin-left: 4px; padding: 1px 7px;
  border: 1px solid var(--borde); border-radius: 999px; background: var(--cab);
  color: var(--texto-2); font-size: .6875rem; font-weight: 500; letter-spacing: .01em;
  vertical-align: 1px; white-space: nowrap;
}
.posicion-cuanto { margin: 2px 0 0; color: var(--texto-2); font-size: .8125rem; letter-spacing: .006em; }
.posicion-pnl { margin-top: 7px; font-size: 1rem; }

/* la pista */
.pista { margin-top: 15px; }
.pista-rotulos { position: relative; height: 19px; }
.llamada {
  position: absolute; bottom: 0; white-space: nowrap;
  color: var(--tinta); font-size: .75rem; font-weight: 600; letter-spacing: .004em;
}
.rail { display: block; width: 100%; height: 48px; overflow: visible; }
.rail .riel { stroke: var(--raya); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rail .banda { fill: var(--raya); }
.rail .peldano { stroke: var(--borde); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rail .peldano-tocado { stroke: var(--suave); }
.rail .tope, .rail .meta { stroke: var(--suave); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rail .entrada { stroke: var(--suave); stroke-width: 2; vector-effect: non-scaling-stroke; }
.rail .pico { stroke: var(--suave); stroke-width: 2; vector-effect: non-scaling-stroke; }
/* el aro de superficie deja el bid legible aunque caiga sobre otra marca */
.rail .halo { stroke: var(--papel); stroke-width: 7; vector-effect: non-scaling-stroke; }
.rail .bid { stroke: var(--tinta); stroke-width: 3; vector-effect: non-scaling-stroke; }
.rail .stop { stroke: currentColor; stroke-width: 4; vector-effect: non-scaling-stroke; }

.escala { position: relative; height: 15px; margin-top: 3px; }
.escala span {
  position: absolute; top: 0; display: flex; align-items: center; gap: 5px;
  white-space: nowrap; transform: translateX(-50%);
  color: var(--suave); font-size: .6875rem; letter-spacing: .04em;
}
.escala .borde-izq { transform: none; }
.escala .borde-der, .escala .en-entrada { transform: translateX(-100%); }
/* A 390 px «+10» y «+25» chocan con «entrada»: sus cifras viven en la leyenda. */
.escala .apretado { display: none; }

/* la leyenda: el dibujo señala, esto dice los números */
.leyenda-pista {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px;
  margin: 9px 0 0; color: var(--texto-2); font-size: .75rem; letter-spacing: .01em;
}
.leyenda-pista span { display: inline-flex; align-items: center; gap: 6px; }
.leyenda-pista i { display: inline-block; flex: 0 0 auto; }
.k-bid { width: 3px; height: 13px; background: var(--tinta); }
.k-pico { width: 2px; height: 13px; background: var(--suave); }
.k-aseg { width: 16px; height: 9px; background: var(--raya); border: 1px solid var(--borde); }
.k-stop { width: 4px; height: 11px; background: currentColor; }
.k-meta {
  width: 0; height: 0;
  border-top: 6px solid transparent; border-bottom: 6px solid transparent;
  border-right: 9px solid var(--tinta);
}

/* el tiempo */
.tiempo {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  margin: 11px 0 0; color: var(--texto-2); font-size: .75rem; letter-spacing: .01em;
}
.barra {
  flex: 0 0 104px; height: 6px; border-radius: 999px;
  background: var(--raya); overflow: hidden;
}
.barra i { display: block; height: 100%; background: var(--suave); }
.barra-apagada { background: var(--raya); opacity: .55; }

/* el camino del bid */
.camino { display: block; width: 100%; height: 36px; margin-top: 11px; overflow: visible; }
.camino .camino-linea {
  fill: none; stroke: var(--suave); stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke;
}
.camino .camino-ref { stroke: var(--raya); stroke-width: 1; vector-effect: non-scaling-stroke; }

.posicion .apunte { font-size: .75rem; }
.posicion .motivo { font-size: .75rem; }

/* --- gráfica ------------------------------------------------------------- */

.grafica-caja { margin-top: 4px; }
.extremos {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px; margin-bottom: 6px;
}
.extremo { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.extremo-fin { text-align: right; }
.extremo .cuanto { font-size: .9375rem; font-weight: 600; color: var(--tinta); letter-spacing: -0.004em; }
.extremo .cuando { font-size: .6875rem; color: var(--suave); letter-spacing: .05em; text-transform: uppercase; }

/* `overflow: visible` para que el aro del punto final no se recorte en móvil;
   cabe de sobra dentro del acolchado de la tarjeta. */
.grafica { width: 100%; height: auto; display: block; overflow: visible; }
.grafica .linea {
  fill: none; stroke: var(--tinta); stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.grafica .eje { stroke: var(--borde); stroke-width: 1; vector-effect: non-scaling-stroke; }
.grafica .referencia { stroke: var(--raya); stroke-width: 1; vector-effect: non-scaling-stroke; }
.grafica .aro { stroke: var(--papel); stroke-width: 13; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.grafica .fin { stroke: var(--tinta); stroke-width: 9; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.grafica .zona { fill: transparent; }
/* El dato se lee siempre en la tabla; esto solo lo señala bajo el puntero. */
.grafica .cruz { stroke: var(--suave); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0; }
.grafica .marca { stroke: var(--tinta); stroke-width: 9; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: 0; }
/* Con el puntero el detalle sale al pasar por encima; con el teclado no salía
   en ningún sitio (estudio UX/UI §2, H9). Cada banda es ahora un parador de
   tabulación y al enfocarla se enciende la MISMA cruz que el hover. `:has()`
   porque la banda es el último hermano y la cruz va delante de ella. */
.grafica .punto-dato:hover .cruz,
.grafica .punto-dato:hover .marca,
.grafica .punto-dato:has(.zona:focus-visible) .cruz,
.grafica .punto-dato:has(.zona:focus-visible) .marca { opacity: 1; }

.leyenda-grafica {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  margin: 8px 0 0; color: var(--suave); font-size: .75rem; letter-spacing: .01em;
}
.llave { display: inline-flex; align-items: center; gap: 6px; }
.llave i {
  display: inline-block; width: 16px; height: 0;
  border-top: 1px solid var(--raya); flex: 0 0 auto;
}
.llave-serie i { border-top: 2px solid var(--tinta); }

/* --- tablas -------------------------------------------------------------- */

.envoltura {
  overflow-x: auto; margin-top: 10px;
  border: 1px solid var(--borde); border-radius: var(--radio-pieza);
  -webkit-overflow-scrolling: touch;
}
table { border-collapse: collapse; width: 100%; font-size: .8125rem; }
th, td { padding: 9px 12px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--raya); }
th {
  background: var(--cab); color: var(--suave);
  font-weight: 600; font-size: .6875rem;
  text-transform: uppercase; letter-spacing: .06em;
}
td { color: var(--texto); }
tbody tr:last-child td { border-bottom: 0; }

/* --- el embudo en cascada y la 2.ª tanda ---------------------------------
   Una barra de porcentaje en CSS puro: un `width` en línea sobre una vía gris,
   exactamente como la barra de tiempo de una posición. Sin JavaScript, que aquí
   está prohibido por contrato. La barra NO lleva el dato: la cifra va al lado.
   El color tampoco entra — verde y rojo son solo del P&L y del semáforo. */

.via {
  display: inline-block; vertical-align: middle;
  width: 56px; height: 6px; margin-right: 9px;
  border-radius: 999px; background: var(--raya); overflow: hidden;
}
.via i { display: block; height: 100%; background: var(--suave); }
.casc-cifra { vertical-align: middle; }
/* Las cifras, alineadas a la derecha: una columna de números que no cuadra se
   compara peor, y la pantalla ya es toda `tabular-nums`. */
.casc-n, .casc-pct { text-align: right; }
.casc-pct { min-width: 112px; }
.casc-nota { white-space: normal; min-width: 240px; color: var(--texto-2); }

/* El primer campo de cada tanda abre grupo: un filete separa «1.ª pasada» de
   «2.ª pasada» sin necesidad de una segunda fila de encabezados. */
th.grupo, td.grupo { border-left: 1px solid var(--borde); }
.tanda-ticker { font-weight: 600; color: var(--tinta); }
.tanda-vacia { color: var(--suave); }
.tanda-cambio { color: var(--tinta); }
.tanda-veredicto { color: var(--texto-2); }
tr.abierta td { background: var(--cab); }
tr.abierta td.marca-fila { font-weight: 600; color: var(--tinta); box-shadow: inset 2px 0 0 var(--tinta); }

/* El archivo completo, plegado: la tabla de veinte columnas sigue estando —es donde el
   dato se lee exacto y se copia— pero deja de ser lo primero que se ve. `<details>` es
   HTML nativo: no hace falta una línea de JavaScript para plegar nada. */
.detalle { margin-top: 16px; }
.detalle > summary {
  display: flex; align-items: center; gap: 9px;
  min-height: 44px;                                  /* diana de toque */
  cursor: pointer; color: var(--texto-2);
  font-size: .8125rem; letter-spacing: .006em;
  list-style: none;                                  /* el triángulo lo dibujamos nosotros */
}
.detalle > summary::-webkit-details-marker { display: none; }
/* Sin triángulo, un `summary` se lee como un párrafo suelto y nadie lo pulsa. Se dibuja
   con bordes —cerrado apunta a la derecha, abierto hacia abajo— sin rotación ni
   transición: la pantalla se recarga sola cada 30 s y aquí no se anima nada. */
.detalle > summary::before {
  content: ""; flex: 0 0 auto;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
  border-left: 7px solid var(--suave);
}
.detalle[open] > summary { color: var(--tinta); }
.detalle[open] > summary::before {
  border: 0;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 7px solid var(--tinta);
}

/* --- mandos -------------------------------------------------------------- */

.mandos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.mandos form { margin: 0; }

button {
  font: inherit; font-size: .875rem; font-weight: 600; letter-spacing: -0.004em;
  cursor: pointer; min-height: 44px; padding: 11px 18px;
  border-radius: var(--radio-pieza); border: 1px solid var(--tinta);
  background: var(--tinta); color: var(--papel);
  transition: transform 100ms var(--ease-salida);
}
button.grave { background: var(--papel); color: var(--tinta); border-width: 2px; padding: 10px 17px; }
button:active { transform: scale(0.97); }   /* la respuesta va en la pulsación, no en la soltada */

/* --- pie ----------------------------------------------------------------- */

.pie {
  color: var(--texto-2); font-size: .75rem; letter-spacing: .01em;
  padding: 18px 0 0; text-align: center;
}

/* --- login --------------------------------------------------------------- */

.cuerpo-login {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; min-height: 100svh; padding: 24px 0;
}
.tarjeta-login {
  width: 100%; max-width: 360px; background: var(--papel);
  border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); padding: 24px;
}
.tarjeta-login h1 {
  margin: 0; font-size: 1.125rem; font-weight: 600;
  letter-spacing: -0.014em; color: var(--tinta);
}
.tarjeta-login form { margin-top: 22px; }
label {
  display: block; margin-bottom: 5px;
  font-size: .6875rem; font-weight: 600; color: var(--suave);
  text-transform: uppercase; letter-spacing: .06em;
}
input {
  width: 100%; font: inherit; font-size: 1rem; padding: 11px 12px; margin-bottom: 16px;
  min-height: 44px;
  border: 1px solid var(--borde); border-radius: var(--radio-pieza);
  background: var(--papel); color: var(--texto);
}
.tarjeta-login button { width: 100%; margin-top: 4px; }
.error {
  margin: 16px 0 0; padding: 11px 12px; border-radius: var(--radio-pieza);
  border: 1px solid var(--borde); background: var(--cab);
  color: var(--texto); font-size: .8125rem;
}
.tarjeta-login .pie { text-align: left; padding: 18px 0 0; }

/* --- respiración en pantalla ancha --------------------------------------- */

@media (min-width: 640px) {
  body { padding: 0 24px 56px; }
  .bloque { padding: 22px 24px; margin: 16px 0; }
  .cabecera { padding: 22px 0 16px; }
  .posicion { padding: 16px 18px 14px; }
  .anclas { margin: 0 -24px; padding: 0 24px; }
  .anclas-tira { gap: 0 14px; }
  .anclas a { font-size: .6875rem; letter-spacing: .06em; }
  /* aquí sí caben los dos primeros peldaños sin pisar a «entrada» */
  .escala .apretado { display: flex; }
}

/* --- la tira de anclas, en una sola fila ---------------------------------
   Los nueve enlaces caben en una fila a partir de 776 px medidos; el corte se
   pone en 820 para no jugársela con otra pila de fuentes. */

@media (min-width: 820px) {
  :root { --alto-anclas: 36px; }
}

/* --- movimiento reducido -------------------------------------------------
   No se quita el acuse de la pulsación: se cambia por uno que no desplaza
   nada. Menos movimiento, no menos respuesta. */

@media (prefers-reduced-motion: reduce) {
  button { transition: background-color 100ms var(--ease-salida), color 100ms var(--ease-salida); }
  button:active { transform: none; background: var(--texto-2); border-color: var(--texto-2); color: var(--papel); }
  button.grave:active { background: var(--cab); color: var(--tinta); border-color: var(--tinta); }
}

/* --- validación manual (v2.5.0, contrato 16) -------------------------------
   Una casilla por idea en `/validacion`. Neutros: verde y rojo siguen siendo solo del
   P&L y del semáforo, así que la marca vigente se dice con tinta invertida, con «✓» y
   con `aria-pressed` — nunca con el color a secas. Contraste medido (AA, ≥ 4,5:1):
   botón normal tinta/papel 18,1 claro · 16,1 oscuro; encima (hover) tinta/cab 16,7 ·
   15,1; vigente papel/tinta 18,1 · 16,1; «Quitar marca» texto-2/papel 6,4 · 7,7. El
   borde del botón es --suave (5,4 · 5,7 contra el papel; WCAG 1.4.11 pide 3:1). */

.idea { padding: 16px 0 14px; border-top: 1px solid var(--raya); scroll-margin-top: 16px; }
.idea:target { box-shadow: inset 3px 0 0 var(--tinta); padding-left: 12px; }
.idea-cabeza { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.idea-ticker { font-size: 1.0625rem; font-weight: 600; color: var(--tinta); letter-spacing: -0.004em; }
.idea-dir {
  font-size: .6875rem; font-weight: 600; color: var(--texto-2);
  text-transform: uppercase; letter-spacing: .06em;
}
.idea-meta { color: var(--texto-2); font-size: .8125rem; }
.idea-marca { font-size: .8125rem; font-weight: 600; color: var(--tinta); }
.idea-marca.sin { color: var(--suave); font-weight: 500; }
.idea-app { margin: 8px 0 0; color: var(--texto); font-size: .875rem; }
.idea-app .et {
  margin-right: 4px; color: var(--suave); font-size: .6875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
}
.idea-detalle { display: block; margin-top: 2px; color: var(--texto-2); font-size: .8125rem; }
.votos { margin: 12px 0 0; }
.votos input { margin-bottom: 10px; }
.votos-botones { display: flex; flex-wrap: wrap; gap: 8px; }
button.voto {
  background: var(--papel); color: var(--tinta); border-color: var(--suave);
  padding: 10px 14px;
}
button.voto:hover { background: var(--cab); }
button.voto.vigente { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
button.voto-quitar {
  background: var(--papel); color: var(--texto-2); border-color: transparent;
  padding: 10px 8px; text-decoration: underline; text-underline-offset: 2px;
}
button.voto-quitar:hover { color: var(--tinta); }

/* --- comparativa A | B (v2.8.0, contrato 20) -------------------------------
   Las dos cuentas mitad y mitad: A a la izquierda, B a la derecha; en el móvil, una
   encima de otra. Mismas piezas que la pantalla (tarjeta, rejilla de cifras, tabla con
   su envoltura que desliza): aquí solo se añade la rejilla de dos columnas y la franja.
   `minmax(0, 1fr)` y `min-width: 0` son lo que impide que una tabla ancha empuje su
   columna y abra scroll horizontal en la página: la tabla desliza dentro de su envoltura. */

.ancho main, .ancho .cabecera, .ancho .pie { max-width: 1320px; }

.mitades { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); align-items: start; margin: 14px 0; }
.mitades > .bloque { margin: 0; min-width: 0; }
@media (min-width: 960px) {
  .mitades { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 16px 0; }
}

.mitad .mitad-titulo {
  margin: 0; color: var(--tinta);
  font-size: 1rem; font-weight: 600; line-height: 1.25;
  text-transform: none; letter-spacing: -0.008em;
}
.mitad-opera { margin-top: 4px; }
.mitad-opera b { font-weight: 600; color: var(--tinta); }
.mitad-falta {
  margin: 14px 0 0; padding: 14px; border: 1px dashed var(--borde);
  border-radius: var(--radio-pieza); color: var(--tinta); font-weight: 600;
}

/* Media columna da menos aire: celdas un punto más prietas para que la tabla de hoy quepa
   sin deslizar a 1440 px. */
.mitad th, .mitad td, .franja th, .franja td { padding: 8px 9px; }

/* Lo secundario dentro de una celda (dirección, hora, precio del peldaño): apagado. */
td .sub { color: var(--suave); font-size: .75rem; font-weight: 500; }
.tabla-cifras td:not(:first-child), .tabla-cifras th:not(:first-child) { text-align: right; }

.juicio { margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--raya); }
.juicio-cabeza {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  margin: 0; color: var(--texto-2); font-size: .875rem;
}
.juicio-cabeza .et {
  color: var(--suave); font-size: .6875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
}
.juicio-cabeza b { color: var(--tinta); font-weight: 600; }
/* La media de B es tinta; si es P&L con signo, el color lo pone un `.positivo`/`.negativo`
   de dentro (los únicos que gastan verde y rojo), y el signo va siempre escrito. */
.juicio-media { font-weight: 600; color: var(--tinta); }
.juicio-lectura { margin: 6px 0 0; color: var(--texto); font-size: .9375rem; }
.juicio-lectura b { color: var(--tinta); font-weight: 600; }
.bandas {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none;
}
.bandas li {
  padding: 4px 10px; border: 1px solid var(--borde); border-radius: 999px;
  background: var(--cab); color: var(--texto-2); font-size: .75rem; letter-spacing: .01em;
}
/* La banda que rige se dice con tinta y borde, no con color (como la marca vigente de /validacion). */
.bandas li.vigente { border-color: var(--tinta); color: var(--tinta); font-weight: 600; }

.aviso {
  margin: 14px 0 0; padding: 12px 14px; border: 1px solid var(--borde);
  border-radius: var(--radio-pieza); background: var(--cab);
  color: var(--texto); font-size: .8125rem;
}