/* ============================================================
   Florida 2026 — hoja única de estilos
   Dirección: editorial de datos. Tinta sobre fondo neutro, tipografía
   de sistema pesada, alineación a la izquierda. Los colores partidarios
   son color de DATO, no decoración; el único bloque centrado es la
   convergencia, porque ahí el diseño es el argumento.
   Si mañana hay una segunda página, hereda esta hoja.
   ============================================================ */

/* ---------- variables: color y tipografía ---------- */
:root {
  /* neutros */
  --fondo: #fbfbf9;
  --tinta: #191b1f;
  --tinta-suave: #5a5e66;
  --linea: #d8d8d3;
  --panel: #f1f1ed;

  /* partidarios (color de dato) */
  --rojo: #a8232f;
  --rojo-tinte: #f6e9e9;
  --azul: #1f4e96;
  --azul-tinte: #e7edf6;

  /* convergencia: rojo y azul mezclados a propósito */
  --sintesis: #5c3a75;

  /* tipografía: sistema, sin red */
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ritmo */
  --ancho: 68rem;
  --paso: clamp(1rem, 3vw, 2rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #16181c;
    --tinta: #e7e8ea;
    --tinta-suave: #9aa0a9;
    --linea: #33363c;
    --panel: #1d2025;

    --rojo: #e05561;
    --rojo-tinte: #2a1d1f;
    --azul: #6d9be0;
    --azul-tinte: #1b2230;

    --sintesis: #b08ad0;
  }
}

/* ---------- base ---------- */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--sans);
  line-height: 1.55;
  font-size: 1.0625rem;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { line-height: 1.15; margin: 0 0 0.6em; }
p { margin: 0 0 1em; }
a { color: inherit; text-decoration-color: var(--tinta-suave); text-underline-offset: 2px; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--sintesis); outline-offset: 2px; }
code { font-family: var(--mono); font-size: 0.9em; background: var(--panel); padding: 0.1em 0.35em; border-radius: 3px; }

.contenedor {
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--paso);
}

.salto {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--tinta);
  color: var(--fondo);
  padding: 0.5rem 1rem;
  z-index: 10;
}
.salto:focus { left: 0; }

/* etiquetas pequeñas sobre los títulos */
.kicker {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin: 0 0 0.75rem;
}
.kicker-r { color: var(--rojo); }
.kicker-d { color: var(--azul); }

/* ---------- cabecera ---------- */
.cabecera { padding-block: clamp(2.5rem, 7vw, 5rem) 1.5rem; }

.cabecera h1 {
  font-size: clamp(2.4rem, 7vw, 4.5rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  max-width: 18ch;
}

.bajada {
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  color: var(--tinta-suave);
  max-width: 46ch;
}

/* ---------- aviso: no hay nominados ---------- */
.aviso {
  border-block: 3px solid var(--tinta);
  padding-block: 1.25rem;
  margin-block: 1.5rem 3rem;
}
.aviso h2 { font-size: 1.5rem; font-weight: 900; }
.aviso p { max-width: 62ch; margin-bottom: 1.25rem; }

.cinta-datos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  font-size: 0.95rem;
  color: var(--tinta-suave);
}
.cinta-datos strong {
  color: var(--tinta);
  font-size: 1.15em;
  font-variant-numeric: tabular-nums;
}

/* ---------- el debate: dos columnas ---------- */
.debate {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-bottom: 0;
}

.lado { border-top: 6px solid; padding-top: 1.25rem; }
.lado-r { border-color: var(--rojo); }
.lado-d { border-color: var(--azul); }
.lado h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 800; }

.argumento { margin-block: 1.5rem; }
.argumento .cifra {
  font-size: clamp(1.9rem, 4.5vw, 2.6rem);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  margin-bottom: 0.15em;
}
.lado-r .cifra { color: var(--rojo); }
.lado-d .cifra { color: var(--azul); }
.argumento p:last-child { margin-bottom: 0; color: var(--tinta-suave); max-width: 40ch; }
.argumento strong { color: var(--tinta); }

.concesion {
  background: var(--panel);
  border-left: 4px solid var(--sintesis);
  padding: 0.9rem 1.1rem;
  margin-top: 2rem;
  font-size: 0.95rem;
}
.concesion h3 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--sintesis);
  margin-bottom: 0.4rem;
}
.concesion p { margin: 0; }

/* ---------- la convergencia ---------- */
.convergencia {
  margin-top: 0;
  text-align: center; /* único bloque centrado: es el punto de encuentro */
}

/* dos cunas que confluyen hacia el número */
.cunas {
  height: clamp(70px, 12vw, 130px);
  position: relative;
  overflow: hidden;
}
.cunas::before, .cunas::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50.5%;
}
.cunas::before {
  left: 0;
  background: var(--rojo);
  clip-path: polygon(0 0, 0 18%, 100% 100%, 100% 82%);
}
.cunas::after {
  right: 0;
  background: var(--azul);
  clip-path: polygon(100% 0, 100% 18%, 0 100%, 0 82%);
}

.convergencia-cuerpo { padding-block: 1.5rem 3.5rem; }

.numero {
  font-size: clamp(3rem, 11vw, 6.5rem);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0.5rem 0 0.75rem;
}
.num-r { color: var(--rojo); }
.num-d { color: var(--azul); }
.num-sep { color: var(--tinta-suave); margin-inline: 0.3em; font-weight: 400; }

.numero-nota {
  color: var(--tinta-suave);
  max-width: 52ch;
  margin-inline: auto;
  margin-bottom: 2.5rem;
}

/* barras: los valores espejan el contenido (claude 70/30, codex 65/35,
   síntesis 67/33). Si cambia el dato en ESTADO.md, se cambia acá. */
.barras { max-width: 40rem; margin-inline: auto; display: grid; gap: 0.7rem; }

.barra-fila {
  display: grid;
  grid-template-columns: 5rem 1fr 8rem;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.9rem;
  color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
}
.barra-quien { text-align: right; }
.barra-valor { text-align: left; white-space: nowrap; }

.barra { display: grid; height: 9px; border-radius: 2px; overflow: hidden; }
.barra-claude   { grid-template-columns: 70fr 30fr; }
.barra-codex    { grid-template-columns: 65fr 35fr; }
.barra-sintesis { grid-template-columns: 67fr 33fr; }
.seg-r { background: var(--rojo); }
.seg-d { background: var(--azul); }

.barra-fila-sintesis { color: var(--tinta); font-weight: 700; }
.barra-fila-sintesis .barra { height: 16px; }

.rango { margin-top: 1.25rem; color: var(--tinta-suave); }

.sintesis-porque {
  max-width: 58ch;
  margin: 2rem auto 0;
  text-align: left;
  border-top: 1px solid var(--linea);
  padding-top: 1.5rem;
}

/* ---------- secciones de prosa ---------- */
.factores, .vuelta, .fuentes, .no-verificado { margin-block: 3.5rem; }
.factores h2, .vuelta h2, .fuentes h2, .no-verificado h2, .metodo h2 {
  font-size: clamp(1.5rem, 3.5vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.lista-factores {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  counter-reset: factor;
  display: grid;
  gap: 2rem;
}
.lista-factores li {
  counter-increment: factor;
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 1rem;
}
.lista-factores li::before {
  content: counter(factor, decimal-leading-zero);
  font-size: 2rem;
  font-weight: 900;
  color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
/* el li tiene TRES ítems de grilla (::before, h3, p) y DOS columnas: sin
   colocación explícita, el p caía en fila 2 columna 1 (la pista angosta).
   Bug reportado por Rob el 11-ago; el contenido va siempre a la columna 2. */
.lista-factores h3 { grid-column: 2; font-size: 1.15rem; margin-bottom: 0.4rem; }
.lista-factores p { grid-column: 2; margin: 0; max-width: 62ch; color: var(--tinta-suave); }
.lista-factores strong { color: var(--tinta); }

/* ---------- qué lo daría vuelta ---------- */
.vuelta-lados {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-top: 1.5rem;
}
.vuelta-lado { background: var(--panel); padding: 1.25rem 1.4rem; border-top: 4px solid; }
.vuelta-d { border-color: var(--azul); }
.vuelta-r { border-color: var(--rojo); }
.vuelta-lado h3 { font-size: 1.05rem; }
.vuelta-lado h3 span { font-weight: 400; color: var(--tinta-suave); }
.vuelta-lado p { margin: 0; color: var(--tinta-suave); }
.vuelta-lado strong { color: var(--tinta); }

.vuelta-resolucion {
  margin-top: 1.5rem;
  max-width: 62ch;
  border-left: 4px solid var(--sintesis);
  padding-left: 1.1rem;
}

/* ---------- fuentes ---------- */
.tabla-scroll {
  overflow-x: auto;
  border: 1px solid var(--linea);
  margin-top: 1.5rem;
}
.tabla-scroll:focus-visible { outline-offset: -2px; }

.fuentes table {
  border-collapse: collapse;
  width: 100%;
  min-width: 44rem;
  font-size: 0.9rem;
}
.fuentes th, .fuentes td {
  text-align: left;
  vertical-align: top;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--linea);
}
.fuentes th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--tinta-suave);
  background: var(--panel);
}
.fuentes tbody tr:last-child td { border-bottom: none; }
.fuentes td:last-child { white-space: nowrap; color: var(--tinta-suave); }

/* ---------- no verificado ---------- */
.no-verificado ol { margin: 1.5rem 0 0; padding-left: 1.4rem; display: grid; gap: 0.6rem; }
.no-verificado li { max-width: 66ch; color: var(--tinta-suave); }
.no-verificado strong, .no-verificado em { color: var(--tinta); }

/* ---------- nota de método ---------- */
.metodo {
  border-top: 1px solid var(--linea);
  margin-top: 4rem;
  padding-block: 2rem 3rem;
  font-size: 0.9rem;
  color: var(--tinta-suave);
}
.metodo h2 { font-size: 1rem; color: var(--tinta); }
.metodo p { max-width: 70ch; }
.metodo strong { color: var(--tinta); }

/* ---------- teléfono ---------- */
@media (max-width: 44rem) {
  .debate, .vuelta-lados { grid-template-columns: 1fr; }
  .lista-factores li { grid-template-columns: 2.5rem 1fr; }
  .lista-factores li::before { font-size: 1.4rem; }
  .barra-fila { grid-template-columns: 4rem 1fr; }
  .barra-valor { grid-column: 2; }
  .cabecera h1 br { display: none; }
}