/* ==========================================================================
   Portal de factibilidad — sistema visual
   --------------------------------------------------------------------------
   Dos hues que significan cosas distintas, tomados del propio problema:
     teal   = lo nuestro (la población que tenemos)
     índigo = la demanda (los ensayos que buscan)
     ámbar  = lo no reclamado (sin sede en Florida)
   El ámbar es el único color de alerta y por eso salta; si se usara para
   decorar, dejaría de significar algo.

   Los números van SIEMPRE en mono con cifras tabulares: es lo que separa un
   instrumento de una hoja de cálculo.
   ========================================================================== */

:root {
  --fondo:     #f4f6f7;
  --panel:     #ffffff;
  --panel-2:   #eef1f2;
  --linea:     #dde3e5;
  --linea-2:   #eceff0;
  --tinta:     #0e1719;
  --tinta-2:   #5a686d;
  --tinta-3:   #8b989c;

  --nuestro:   #0c6b6e;
  --nuestro-t: #e0efef;
  --demanda:   #3c4a9e;
  --demanda-t: #e6e8f6;
  --libre:     #8f5c0c;
  --libre-t:   #fbf0dd;
  --critico:   #a1382a;
  --critico-t: #fae9e6;

  --r:  6px;
  --r2: 10px;
  --sombra: 0 1px 1px rgba(14, 23, 25, .04), 0 6px 18px -8px rgba(14, 23, 25, .18);

  --sans: "IBM Plex Sans", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --serif: "IBM Plex Serif", Georgia, serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo:     #0c1113;
    --panel:     #131a1d;
    --panel-2:   #1a2327;
    --linea:     #232e32;
    --linea-2:   #1b2427;
    --tinta:     #e7eef0;
    --tinta-2:   #92a3a8;
    --tinta-3:   #6a797e;

    --nuestro:   #57c0bb;
    --nuestro-t: #10312f;
    --demanda:   #8e99ec;
    --demanda-t: #1d2145;
    --libre:     #d5a04d;
    --libre-t:   #35280f;
    --critico:   #e58a78;
    --critico-t: #3a1d18;
    --sombra: 0 1px 1px rgba(0, 0, 0, .3), 0 6px 18px -8px rgba(0, 0, 0, .5);
  }
}

:root[data-theme="dark"] {
  --fondo:     #0c1113;
  --panel:     #131a1d;
  --panel-2:   #1a2327;
  --linea:     #232e32;
  --linea-2:   #1b2427;
  --tinta:     #e7eef0;
  --tinta-2:   #92a3a8;
  --tinta-3:   #6a797e;
  --nuestro:   #57c0bb;
  --nuestro-t: #10312f;
  --demanda:   #8e99ec;
  --demanda-t: #1d2145;
  --libre:     #d5a04d;
  --libre-t:   #35280f;
  --critico:   #e58a78;
  --critico-t: #3a1d18;
  --sombra: 0 1px 1px rgba(0, 0, 0, .3), 0 6px 18px -8px rgba(0, 0, 0, .5);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: 400 15px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

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

header.barra {
  background: var(--panel);
  border-bottom: 1px solid var(--linea);
  position: sticky; top: 0; z-index: 20;
}
.barra-interior {
  max-width: 1120px; margin: 0 auto;
  padding: 0 26px;
  display: flex; align-items: center; gap: 30px;
  height: 56px;
}
.marca {
  font-weight: 600; letter-spacing: -.015em; font-size: 15px;
  display: flex; align-items: baseline; gap: 10px;
}
.marca span {
  font: 500 10.5px/1 var(--mono);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta-3);
}
.barra-interior nav { display: flex; gap: 4px; margin-left: auto; }
.barra-interior nav a {
  color: var(--tinta-2); text-decoration: none;
  font-size: 13.5px; font-weight: 500;
  padding: 6px 11px; border-radius: var(--r);
}
.barra-interior nav a:hover { color: var(--tinta); background: var(--panel-2); }
.barra-interior nav a.activo { color: var(--tinta); background: var(--panel-2); }

/* conmutador de idioma: dos pastillas, la activa en tinta plena */
.idioma {
  display: flex; margin-left: 14px;
  border: 1px solid var(--linea); border-radius: var(--r);
  overflow: hidden;
}
/* en la portada no hay nav, así que el conmutador es quien empuja a la derecha */
.barra-interior > .idioma:nth-child(2) { margin-left: auto; }
.idioma button {
  background: none; border: none; cursor: pointer;
  font: 500 11px/1 var(--mono); letter-spacing: .06em;
  color: var(--tinta-3); padding: 7px 9px; height: auto;
}
.idioma button + button { border-left: 1px solid var(--linea); }
.idioma button:hover { color: var(--tinta-2); background: var(--panel-2); }
.idioma button.activo { color: var(--tinta); background: var(--panel-2); }

/* El botón de tema reutiliza la caja del conmutador de idioma para que los dos
   controles de la barra se lean como un grupo. */
#tema button {
  display: flex; align-items: center; justify-content: center;
  padding: 6px 8px; color: var(--tinta-3);
}
#tema button:hover { color: var(--tinta); background: var(--panel-2); }

main { max-width: 1120px; margin: 0 auto; padding: 34px 26px 90px; }

/* ---------- tipografía ---------- */

h1 {
  font: 600 30px/1.2 var(--serif);
  letter-spacing: -.015em; margin: 0 0 10px;
  text-wrap: balance;
}
h2 {
  font: 600 15px/1.3 var(--sans);
  letter-spacing: -.005em; margin: 0 0 4px;
}
.rotulo {
  font: 500 10.5px/1 var(--mono);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinta-3);
  display: flex; align-items: center; gap: 10px;
  margin: 44px 0 14px;
}
.rotulo::after {
  content: ''; flex: 1; height: 1px; background: var(--linea);
}
.sub { color: var(--tinta-2); margin: 0 0 22px; max-width: 66ch; font-size: 14px; }
.tenue { color: var(--tinta-2); font-size: 13px; }
.dato { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------- panel de estado ---------- */

.estado {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  background: var(--linea);
  border: 1px solid var(--linea);
  border-radius: var(--r2);
  overflow: hidden;
  margin-bottom: 8px;
}
.estado > div { background: var(--panel); padding: 16px 18px 15px; }
.estado .n {
  font: 500 27px/1 var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.estado .n.acento { color: var(--nuestro); }
.estado .n.libre  { color: var(--libre); }
.estado .n.demanda { color: var(--demanda); }
.estado .r {
  font: 500 10.5px/1.4 var(--mono);
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--tinta-3); margin-top: 8px;
}

/* Sello bajo el conteo: dice si la cifra es un cruce preliminar o el resultado
   de aplicar el protocolo entero. Sin esto los dos números se leen igual. */
.sello {
  margin-top: 7px;
  font: 500 9.5px/1 var(--mono);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta-3);
  border: 1px solid var(--linea); border-radius: 3px;
  padding: 4px 6px; display: inline-block;
  cursor: help;
}
.sello.ok { color: var(--nuestro); border-color: var(--nuestro); }

/* ---------- oportunidad: el medidor es la visualización ---------- */

.op {
  display: grid;
  grid-template-columns: 108px 1fr auto;
  gap: 22px; align-items: start;
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--r2);
  padding: 17px 20px;
  margin-bottom: 9px;
}
.op:hover { border-color: var(--tinta-3); }

.op-n {
  font: 500 33px/1 var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em; color: var(--nuestro);
}
.op-n small {
  display: block; margin-top: 7px;
  font: 500 9.5px/1.3 var(--mono);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta-3);
}

/* medidor: candidatos contra el cupo que pide una sede */
.medidor { margin-top: 10px; }
.medidor-pista {
  height: 4px; background: var(--linea); border-radius: 2px;
  position: relative; overflow: visible;
}
.medidor-relleno {
  height: 100%; background: var(--nuestro); border-radius: 2px;
}
.medidor-marca {
  position: absolute; top: -4px; width: 1px; height: 12px;
  background: var(--tinta-2);
}
.medidor-pie {
  display: flex; justify-content: space-between;
  margin-top: 5px;
  font: 400 11px/1 var(--mono);
  color: var(--tinta-3);
}

.op-titulo { font-weight: 500; line-height: 1.4; margin: 7px 0 5px; font-size: 14.5px; }
.op-meta { font-size: 12.5px; color: var(--tinta-2); }
.op-meta .dato { color: var(--tinta); }
.chips { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.op-acciones { display: flex; flex-direction: column; gap: 7px; }

/* ---------- fichas ---------- */

.ficha {
  font: 500 10px/1.6 var(--mono);
  letter-spacing: .07em; text-transform: uppercase;
  padding: 1px 7px; border-radius: 3px;
  background: var(--panel-2); color: var(--tinta-2);
  white-space: nowrap;
}
.ficha.nuestro { background: var(--nuestro-t); color: var(--nuestro); }
.ficha.demanda { background: var(--demanda-t); color: var(--demanda); }
.ficha.libre   { background: var(--libre-t);   color: var(--libre); }
.ficha.critico { background: var(--critico-t); color: var(--critico); }

/* ---------- superficies ---------- */

.caja {
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--r2);
  padding: 18px 20px;
}
.rejilla { display: grid; gap: 14px; }
.rejilla.c2 { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.rejilla.c3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.caja h3 {
  font: 500 10.5px/1 var(--mono);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta-3); margin: 0 0 14px;
}

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

.envoltura-tabla { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th {
  text-align: left;
  font: 500 10px/1 var(--mono);
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--tinta-3);
  padding: 0 10px 9px; border-bottom: 1px solid var(--linea);
}
td { padding: 8px 10px; border-bottom: 1px solid var(--linea-2); }
tbody tr:last-child td { border-bottom: none; }
td.num, th.num {
  text-align: right;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
th.num { font-family: var(--mono); }
tbody tr.clicable { cursor: pointer; }
tbody tr.clicable:hover td { background: var(--panel-2); }

.barra-fondo { background: var(--linea); border-radius: 2px; height: 4px; min-width: 54px; }
.barra-relleno { background: var(--nuestro); height: 100%; border-radius: 2px; }

/* ---------- demanda: barras pareadas ---------- */

.dem {
  display: grid; grid-template-columns: 1fr 54px 1fr 54px;
  gap: 14px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--linea-2);
}
.dem:last-child { border-bottom: none; }
.dem-nom { font-size: 13.5px; }
.dem-val {
  font: 400 12.5px/1 var(--mono); font-variant-numeric: tabular-nums;
  text-align: right; color: var(--tinta-2);
}
.dem-val.fuerte { color: var(--tinta); }
.dem-barra { height: 4px; border-radius: 2px; background: var(--linea); }
.dem-barra > i { display: block; height: 100%; border-radius: 2px; }
.dem-barra.nuestro > i { background: var(--nuestro); }
.dem-barra.demanda > i { background: var(--demanda); }
.dem-cab {
  font: 500 10px/1 var(--mono); letter-spacing: .09em;
  text-transform: uppercase; color: var(--tinta-3);
  padding-bottom: 10px; border-bottom: 1px solid var(--linea);
}

/* ---------- embudo ---------- */

.paso {
  display: grid; grid-template-columns: 1fr 62px 58px;
  gap: 14px; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--linea-2);
}
.paso:last-child { border-bottom: none; }
.paso-desc { font-size: 13.5px; }
.paso-original { font-size: 12px; color: var(--tinta-3); margin-top: 2px; line-height: 1.45; }
.paso-n {
  font: 500 16px/1 var(--mono); font-variant-numeric: tabular-nums;
  text-align: right;
}
.paso-baja {
  font: 400 12px/1 var(--mono); font-variant-numeric: tabular-nums;
  text-align: right; color: var(--critico);
}
.paso.exclusion .paso-desc { color: var(--critico); }

/* ---------- controles ---------- */

button, .boton {
  font: 500 13.5px/1 var(--sans);
  background: var(--nuestro); color: #fff;
  border: 1px solid transparent; border-radius: var(--r);
  padding: 9px 15px; cursor: pointer;
  text-decoration: none; display: inline-block; text-align: center;
  transition: filter .12s;
}
button:hover, .boton:hover { filter: brightness(1.1); }
button:disabled { opacity: .45; cursor: default; filter: none; }
button.plano, .boton.plano {
  background: var(--panel); color: var(--tinta); border-color: var(--linea);
}
button.plano:hover, .boton.plano:hover { background: var(--panel-2); filter: none; }

:where(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--nuestro); outline-offset: 2px;
}

input[type=text], input[type=search], input[type=password], textarea, select {
  font: 400 14px/1.4 var(--sans);
  width: 100%; padding: 9px 11px;
  border: 1px solid var(--linea); border-radius: var(--r);
  background: var(--panel); color: var(--tinta);
}
textarea {
  min-height: 190px; resize: vertical;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.6;
}
label {
  display: block; margin-bottom: 6px;
  font: 500 10.5px/1 var(--mono);
  letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3);
}

.zona-archivo {
  border: 1px dashed var(--linea); border-radius: var(--r2);
  padding: 38px 20px; text-align: center; cursor: pointer;
  background: var(--panel);
}
.zona-archivo:hover, .zona-archivo.encima {
  border-color: var(--nuestro); background: var(--nuestro-t);
}

.pestanas {
  display: flex; gap: 2px; margin-bottom: 16px;
  border-bottom: 1px solid var(--linea);
}
.pestanas button {
  background: none; color: var(--tinta-3); border: none; border-radius: 0;
  border-bottom: 2px solid transparent;
  padding: 8px 13px;
  font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
}
.pestanas button.activo { color: var(--tinta); border-bottom-color: var(--nuestro); }
.pestanas button:hover { color: var(--tinta); filter: none; }

/* ---------- avisos ---------- */

.aviso {
  border: 1px solid var(--linea); border-radius: var(--r2);
  background: var(--panel);
  padding: 14px 16px; font-size: 13.5px; margin: 16px 0;
  border-left: 2px solid var(--libre);
}
.aviso.info { border-left-color: var(--nuestro); }
/* Solo el título del aviso va en su propia línea. Aplicarlo a todo <strong>
   partía en tres las frases que resaltan una cifra en medio del texto. */
.aviso > strong:first-child { display: block; margin-bottom: 3px; }
.aviso strong { font-weight: 600; }

.cargando {
  color: var(--tinta-3); padding: 40px 0; text-align: center;
  font: 400 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
}
.cargando::after { content: '·'; animation: p 1.2s steps(3) infinite; }
@keyframes p { 0% { content: '·'; } 33% { content: '··'; } 66% { content: '···'; } }

.oculto { display: none !important; }

footer {
  max-width: 1120px; margin: 40px auto 0; padding: 18px 26px 60px;
  border-top: 1px solid var(--linea);
  color: var(--tinta-3); font-size: 12px; line-height: 1.6;
}

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

@media (max-width: 680px) {
  .op { grid-template-columns: 1fr; gap: 12px; }
  .op-acciones { flex-direction: row; }
  .dem { grid-template-columns: 1fr 46px; }
  .dem-barra, .dem-cab:nth-child(3), .dem-cab:nth-child(4), .dem .dem-val:last-child { display: none; }
}