/* Local AI Scope — Model Finder
 *
 * Concepto visual del plan §6: instrumento de laboratorio accesible, no «web
 * futurista de IA». Cifras en monoespaciada tabular, reglas finas, un solo color
 * de acento y los estados de evidencia distinguidos por texto+icono, nunca solo
 * por color.
 *
 * Los tokens se declaran dentro de .las-finder, no en :root, para que la
 * herramienta no le pise las variables al tema de la web.
 */
.las-finder{
  --marfil:#F4F6F4; --superficie:#FFFFFF; --tinta:#142321; --tinta-suave:#4A5C58;
  --petroleo:#0E5F63; --azul:#246B9E; --ambar:#C9791C; --verde:#2C7A50; --rojo:#A7463A;
  /* 🔴 `--ambar` (#C9791C) es el ÚNICO color de la paleta aprobada que no llega a
     AA sobre marfil: da 3,10:1 y el mínimo para texto es 4,5:1 (medido en el
     navegador el 2026-08-25; los otros seis tokens van de 4,83 a 14,96). Se queda
     tal cual para lo que NO es texto —barras, bordes, tramos del medidor—, donde
     3:1 basta, y el texto usa esta variante oscurecida: 4,50 sobre marfil y 4,89
     sobre blanco, mismo tono. El sello ya se distinguía por texto+icono, así que
     esto no cambia el significado, solo lo hace legible. */
  --ambar-texto:#A26217;
  --linea:#D5DEDB; --linea-fuerte:#B9C7C3; --realce:#E8EEEC;
  --fondo:var(--marfil); --panel:var(--superficie);
  --r-s:10px; --r-l:16px;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
}
/* 🔴 Aquí había un `@media (prefers-color-scheme:dark)` que volcaba la herramienta
   a la paleta oscura por su cuenta. Retirado el 2026-08-25 tras verlo en el
   navegador: el resto de la página —encabezado, hero, procedencia, pie, hubs y
   fichas, que son Bricks y `site.css`— NO tiene paleta oscura, así que con el
   sistema en modo oscuro salía media página en marfil y la herramienta en negro.
   Una web mitad clara y mitad oscura está peor que una web solo clara, y el
   diseño que Miguel aprobó es el claro.
   La paleta oscura NO se borra: sigue viva debajo bajo `[data-theme="dark"]`,
   que es una elección explícita. El día que la web entera tenga modo oscuro
   —tokens de Bricks incluidos— se vuelve a enganchar aquí en una línea. */
[data-theme="dark"] .las-finder{
  --marfil:#0F1614; --superficie:#161F1D; --tinta:#E4EDEA; --tinta-suave:#9AACA7;
  --petroleo:#4FB3B7; --azul:#6BA9D6; --ambar:#E0A057; --verde:#5FB585; --rojo:#D9776B;
  /* Sobre fondo oscuro el problema se invierte: el ámbar claro contrasta de sobra y
     el oscurecido no. Por eso aquí `--ambar-texto` vuelve a ser el mismo ámbar. */
  --ambar-texto:#E0A057;
  --linea:#283633; --linea-fuerte:#3A4C48; --realce:#1D2926;
  --fondo:var(--marfil); --panel:var(--superficie);
}

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

/* ---------- disposición ---------- */
/* 🔴 Reserva de espacio para que la herramienta no empuje a la página al pintarse.
   La herramienta se calcula en el navegador (esa ES la promesa del producto), así
   que su contenedor nace vacío y, al llenarse, desplazaba hacia abajo la sección
   de procedencia. Medido con PageSpeed el 2026-08-25 sobre la página inglesa:
   UN solo desplazamiento, de 0,348 — y el contrato del plan §6 es CLS < 0,1.
   🔴 RE-MEDIDA el 2026-08-25 tras el rediseño. La reserva anterior (900/1400/1900)
   salía de un render con OTRA envoltura y, sobre todo, **de una sola lengua**. Con
   el sistema visual puesto, el alto real de `#las-finder` (medido con
   `min-height:0` en los cuatro idiomas, en el sitio de producción) es:

       ancho │  EN    ES    FR    DE  │ máximo
       ──────┼────────────────────────┼───────
        360  │ 1887  1969  2020  2112 │ 2112
        478  │   ·     ·   1633  1768 │ 1768
        601  │   ·     ·   1490  1625 │ 1625
        768  │ 1402  1421  1421  1445 │ 1445
        860  │ 1323  1355  1355  1348 │ 1355
       1280  │  930   982   982   972 │  982

   La reserva es el MÁXIMO de cada banda, no la media ni «algo por debajo»: quedarse
   corto es un desplazamiento, y pasarse solo es un hueco. Con 900 px, el alemán a
   1280 daba un salto de 72 px que la medición en un solo idioma no veía.
   Las bandas son las de la propia herramienta (860 y 600, donde cambia su rejilla)
   más las dos de Bricks (767 y 478). Si se rediseña, hay que volver a medirlas:
   una reserva desfasada es la mitad de un arreglo. */
#las-finder{min-height:980px}
@media (max-width:860px){#las-finder{min-height:1450px}}
@media (max-width:767px){#las-finder{min-height:1780px}}
@media (max-width:478px){#las-finder{min-height:2120px}}

.taller{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:24px;align-items:start}
@media (max-width:860px){.taller{grid-template-columns:minmax(0,1fr)}}
/* 🔴 `minmax(0,1fr)` y no `1fr`: un item de grid trae `min-width:auto`, así que
   NO baja de su contenido mínimo por mucho `overflow-x:auto` que tenga el
   envoltorio. Con la tabla de `min-width:520px` dentro, la rejilla se plantaba
   en 558 px y la PÁGINA se desplazaba en horizontal por debajo de ~560 px de
   ancho. Medido en navegador el 2026-08-25. */
.taller>*{min-width:0}
.tabla-envuelta{min-width:0}
.panel{background:var(--panel);border:1px solid var(--linea);border-radius:var(--r-l);padding:20px}
.panel.pegado{position:sticky;top:16px}
@media (max-width:860px){.panel.pegado{position:static}}

/* ---------- controles ---------- */
.rotulo{font-family:var(--mono);font-size:.68rem;text-transform:uppercase;
  letter-spacing:.12em;color:var(--tinta-suave);margin:0 0 7px;display:block}
.campo+.campo{margin-top:18px}
.las-finder select,.las-finder input[type=range]{width:100%;font-family:inherit}
.las-finder select{padding:9px 10px;border:1px solid var(--linea-fuerte);border-radius:var(--r-s);
  background:var(--fondo);color:var(--tinta);font-size:.92rem}
.las-finder select:focus-visible,button:focus-visible,.opt:focus-visible{outline:2px solid var(--azul);outline-offset:2px}
.opciones{display:flex;flex-wrap:wrap;gap:6px}
.opt{font-family:var(--sans);font-size:.82rem;padding:6px 11px;border-radius:999px;cursor:pointer;
  border:1px solid var(--linea-fuerte);background:var(--fondo);color:var(--tinta-suave)}
.opt[aria-pressed="true"]{background:var(--petroleo);border-color:var(--petroleo);color:var(--superficie);font-weight:550}
.las-finder input[type=range]{accent-color:var(--petroleo);margin:6px 0 0}
.cifra{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:.86rem;color:var(--tinta)}

/* ---------- veredicto ---------- */
.veredicto{border-left:4px solid var(--petroleo);padding:2px 0 2px 16px;margin-bottom:22px}
.veredicto .via{font-size:1.5rem;font-weight:640;letter-spacing:-.01em;margin:0 0 6px;line-height:1.2}
.veredicto p{margin:0;color:var(--tinta-suave);font-size:.94rem;max-width:62ch}
.veredicto.aviso{border-left-color:var(--ambar)}
.veredicto.limite{border-left-color:var(--rojo)}

/* ---------- ficha del modelo ---------- */
.ficha{border:1px solid var(--linea);border-radius:var(--r-l);overflow:hidden}
.ficha-cab{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  flex-wrap:wrap;padding:14px 16px;background:var(--realce);border-bottom:1px solid var(--linea)}
.ficha-cab b{font-size:1.02rem;font-weight:620}
.ficha-cab .lic{font-family:var(--mono);font-size:.72rem;color:var(--tinta-suave)}
.ficha-cuerpo{padding:16px}

/* medidor de memoria */
.medidor{margin:0 0 6px}
.medidor .pista{display:flex;height:26px;border-radius:6px;overflow:hidden;
  border:1px solid var(--linea-fuerte);background:var(--fondo)}
.medidor .tramo{height:100%}
.t-pesos{background:var(--petroleo)}
.t-kv{background:var(--azul)}
.t-extra{background:var(--linea-fuerte)}
.leyenda{display:flex;flex-wrap:wrap;gap:14px;margin-top:9px;font-size:.78rem;color:var(--tinta-suave)}
.leyenda i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:baseline}
.leyenda b{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--tinta);font-weight:500}

.rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:2px;
  margin-top:18px;background:var(--linea);border:1px solid var(--linea);border-radius:var(--r-s);overflow:hidden}
.dato{background:var(--panel);padding:11px 13px}
.dato .v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:1.12rem;
  font-weight:550;letter-spacing:-.02em;display:block;line-height:1.3}
.dato .k{font-size:.72rem;color:var(--tinta-suave);display:block}

/* sellos de evidencia */
.sello{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.04em;padding:2px 7px;border-radius:4px;border:1px solid currentColor;white-space:nowrap}
.s-medido{color:var(--verde)} .s-estimado{color:var(--ambar-texto)} .s-declarado{color:var(--azul)}
.sellos{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}

/* ---------- comparativa de idiomas ---------- */
.franja{margin-top:34px;border:1px solid var(--linea);border-radius:var(--r-l);
  background:var(--panel);overflow:hidden}
.franja h2{margin:0;padding:15px 18px;font-size:.98rem;font-weight:620;
  border-bottom:1px solid var(--linea);background:var(--realce)}
.franja .interior{padding:16px 18px}
.franja p.intro{margin:0 0 14px;color:var(--tinta-suave);font-size:.9rem;max-width:70ch}
.tabla-envuelta{overflow-x:auto}
.las-finder table{border-collapse:collapse;width:100%;font-size:.86rem;min-width:520px}
.las-finder th,.las-finder td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--linea)}
.las-finder th{font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--tinta-suave);font-weight:500}
.las-finder td.num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right}
.las-finder tr.actual td{background:var(--realce)}
.las-finder tr.difiere td:nth-child(4){color:var(--ambar-texto);font-weight:600}
.las-finder .no-cabe{color:var(--rojo)}

/* alternativas */
.las-finder details{margin-top:18px;border-top:1px solid var(--linea);padding-top:14px}
.las-finder summary{cursor:pointer;font-size:.88rem;color:var(--petroleo);font-weight:550}
.las-finder summary::marker{color:var(--linea-fuerte)}

@media (prefers-reduced-motion:no-preference){
  .tramo{transition:width .25s ease}
}

/* Texto solo para lectores de pantalla: la región que anuncia el resultado.
   `clip-path` y no `display:none`, porque lo que no se pinta tampoco se anuncia. */
.las-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}