/* Analizador de Prensa — tinta de diario sobre papel frío, con marcador amarillo
   reservado para lo verificado (citas halladas, paso activo). */
:root {
  --tinta: #1c2733;
  --tinta-2: #475463;
  --tinta-3: #7a8693;
  --papel: #f6f7f5;
  --hoja: #ffffff;
  --regla: #d8dde2;
  --regla-suave: #e9ecef;
  --marcador: #f6d84a;
  --marcador-suave: #fbefb0;
  --ok: #2e7d5b;
  --medio: #b7791f;
  --mal: #b4382c;
  --t-muy-pos: #1f6b4a;
  --t-pos: #5c9e7c;
  --t-neu: #b5bcc3;
  --t-neg: #d0776b;
  --t-muy-neg: #9c2b20;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r: 4px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tinta: #e7ebef; --tinta-2: #b6c0ca; --tinta-3: #8792a0; --papel: #12181f; --hoja: #1a222b;
    --regla: #2f3b47; --regla-suave: #242e39; --marcador: #e6c63c; --marcador-suave: #4a4320;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--papel); color: var(--tinta); font: 15px/1.5 var(--sans); }
h1, h2, h3 { font-family: var(--serif); font-weight: 650; line-height: 1.2; margin: 0 0 .4em; }
h2 { font-size: 1.9rem; }
h3 { font-size: 1.25rem; margin-top: 1.6em; }
p { margin: 0 0 .8em; max-width: 75ch; }
code { font-size: .9em; background: var(--regla-suave); padding: 1px 4px; border-radius: 3px; }
:focus-visible { outline: 3px solid var(--marcador); outline-offset: 2px; }
[hidden] { display: none !important; }

/* Acceso */
.acceso { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.acceso-caja { width: min(420px, 100%); background: var(--hoja); border: 1px solid var(--regla); padding: 32px; border-radius: var(--r); }
.acceso-caja h1 { font-size: 2rem; }
.error { color: var(--mal); min-height: 1.4em; }

/* Estructura */
.app { display: grid; grid-template-columns: 280px 1fr; min-height: 100vh; }
.riel { background: var(--tinta); color: #eef1f4; padding: 24px 16px; display: flex; flex-direction: column; gap: 24px; position: sticky; top: 0; height: 100vh; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .riel { background: #0c1117; } }
.marca { padding: 0 8px; }
.marca-nombre { display: block; font: 650 1.35rem/1.2 var(--serif); }
.marca-cliente { display: block; color: #aeb8c2; font-size: .9rem; margin-top: 4px; }
.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.paso { all: unset; box-sizing: border-box; width: 100%; display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 10px 8px; border-radius: var(--r); cursor: pointer; color: #cfd6dd; }
.paso b { display: block; font-weight: 600; color: #fff; }
.paso small { display: block; color: #9eaab6; font-size: .82rem; }
.paso-n { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid #6c7a88; display: grid; place-items: center; font-size: .85rem; }
.paso:hover { background: rgba(255, 255, 255, .06); }
.paso[aria-current="step"] { background: rgba(255, 255, 255, .09); }
.paso.hecho .paso-n { background: transparent; border-color: #9fd0b8; color: #9fd0b8; }
.paso[aria-current="step"] .paso-n { background: var(--marcador); border-color: var(--marcador); color: #1c2733; font-weight: 600; }
.paso:focus-visible { outline: 3px solid var(--marcador); }
.riel-pie { margin-top: auto; display: grid; gap: 8px; }
.riel-pie .nota { color: #9eaab6; margin: 0; }
.riel .secundario { background: transparent; color: #fff; border-color: #6c7a88; }
.riel .enlace { color: #aeb8c2; }
.principal { min-width: 0; padding: 40px clamp(16px, 4vw, 56px) 80px; max-width: 1240px; width: 100%; }
.vista-cab { margin-bottom: 24px; }
.vista-cab p { color: var(--tinta-2); }

/* Formularios */
label, .etiqueta { display: block; font-weight: 500; font-size: .92rem; margin: 12px 0 4px; }
input, select, textarea { font: inherit; color: var(--tinta); background: var(--hoja); border: 1px solid var(--regla); border-radius: var(--r); padding: 8px 10px; width: 100%; }
textarea { font-size: .88rem; line-height: 1.45; }
input[type="checkbox"], input[type="radio"] { width: auto; margin: 0 8px 0 0; accent-color: var(--tinta); }
.casilla { display: flex; align-items: flex-start; font-weight: 400; }
.rejilla-dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
.rejilla-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 16px; }
.rejilla-campos label { font-weight: 400; }
.fila-opciones { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 8px 0; }
.opciones-apiladas { display: grid; gap: 6px; margin-top: 6px; }
.opciones-apiladas label { margin: 0; font-weight: 400; display: flex; align-items: center; }
.fichas { display: flex; flex-wrap: wrap; gap: 6px; }
.ficha { font: inherit; font-size: .88rem; border: 1px solid var(--regla); background: var(--hoja); color: var(--tinta); padding: 5px 12px; border-radius: 999px; cursor: pointer; }
.ficha[aria-pressed="true"] { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.nota { color: var(--tinta-3); font-size: .86rem; }

/* Botones */
button { font: inherit; }
.primario, .secundario, .boton-archivo { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: var(--r); cursor: pointer; font-weight: 500; border: 1px solid var(--tinta); }
.primario { background: var(--tinta); color: var(--papel); }
.primario:hover { filter: brightness(1.15); }
.secundario, .boton-archivo { background: var(--hoja); color: var(--tinta); }
.boton-archivo { margin: 0; font-size: 1rem; }
button:disabled { opacity: .45; cursor: not-allowed; }
.enlace { all: unset; cursor: pointer; text-decoration: underline; font-size: .9rem; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; }

/* Carga */
.zona-carga { display: grid; place-items: center; gap: 6px; border: 2px dashed var(--regla); border-radius: var(--r); padding: 48px 16px; background: var(--hoja); cursor: pointer; text-align: center; margin: 0; }
.zona-carga.sobre, .zona-carga:hover { border-color: var(--tinta-2); }
.zona-titulo { font: 500 1.15rem var(--serif); }
.plegable { border-top: 1px solid var(--regla); padding: 12px 0; margin-top: 16px; }
.plegable summary { cursor: pointer; font-weight: 500; }

/* Cifras */
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; background: var(--regla); border: 1px solid var(--regla); margin: 16px 0; }
.cifra { background: var(--hoja); padding: 14px 16px; }
.cifra-valor { font: 650 2rem/1.1 var(--serif); }
.cifra-et { font-size: .86rem; color: var(--tinta-2); margin-top: 4px; }
.cifra-sub { font-size: .8rem; color: var(--tinta-3); }
.cifra.alerta .cifra-valor { color: var(--mal); }
.cifra.bien .cifra-valor { color: var(--ok); }

/* Tablas */
.tabla-caja { overflow: auto; max-height: 460px; border: 1px solid var(--regla); background: var(--hoja); margin: 8px 0 16px; }
table { border-collapse: collapse; width: 100%; font-size: .86rem; }
th, td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--regla-suave); vertical-align: top; }
th { position: sticky; top: 0; background: var(--hoja); font-weight: 600; border-bottom: 1px solid var(--regla); white-space: nowrap; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:hover { background: var(--regla-suave); }
td select { padding: 2px 4px; font-size: .85rem; }

/* Citas: el marcador solo cuando la cita está completa en la nota */
.cita { font-family: var(--serif); font-size: 1.02rem; }
.cita.si { background: linear-gradient(transparent 55%, var(--marcador-suave) 55%); }
.cita.parcial { text-decoration: underline dashed var(--medio); text-underline-offset: 3px; }
.cita.no { text-decoration: line-through; color: var(--tinta-3); }
.sello { display: inline-block; font-size: .75rem; padding: 1px 7px; border-radius: 999px; border: 1px solid currentColor; }
.sello.si { color: var(--ok); } .sello.parcial { color: var(--medio); } .sello.no { color: var(--mal); }

/* Progreso y feed */
.barra-estado { margin: 8px 0 16px; }
.barra { height: 8px; background: var(--regla-suave); border-radius: 999px; overflow: hidden; }
.barra > i { display: block; height: 100%; background: var(--tinta); transition: width .3s; }
.barra-texto { font-size: .86rem; color: var(--tinta-2); margin-top: 6px; }
.feed .tabla-caja { max-height: 320px; }

/* Pestañas */
.pestanas { display: flex; gap: 4px; border-bottom: 1px solid var(--regla); margin-bottom: 20px; flex-wrap: wrap; }
.pestanas button { all: unset; cursor: pointer; padding: 10px 14px; border-bottom: 3px solid transparent; font-weight: 500; color: var(--tinta-2); }
.pestanas button[aria-selected="true"] { color: var(--tinta); border-bottom-color: var(--marcador); }
.pestanas button:focus-visible { outline: 3px solid var(--marcador); }
.lead { font: 500 1.2rem/1.45 var(--serif); max-width: 70ch; margin: 8px 0 20px; }
.grafico { background: var(--hoja); border: 1px solid var(--regla); padding: 12px; margin: 12px 0 20px; overflow-x: auto; }
.grafico.vega-embed, .grafico .vega-embed { display: block !important; width: 100%; box-sizing: border-box; }
.grafico.vega-embed summary { display: none; }
td { min-width: 64px; max-width: 460px; }
.bloque-sintesis { background: var(--hoja); border-left: 3px solid var(--marcador); padding: 16px 20px; margin: 12px 0; }
.bloque-sintesis h4 { font: 600 .95rem var(--sans); margin: 12px 0 2px; }
.interpretacion { color: var(--tinta-2); font-style: italic; }

.aviso { position: fixed; bottom: 20px; right: 20px; background: var(--tinta); color: var(--papel); padding: 12px 18px; border-radius: var(--r); max-width: 420px; z-index: 10; }
.aviso.mal { background: var(--mal); color: #fff; }

@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .riel { position: static; height: auto; }
  .pasos { grid-template-columns: repeat(2, 1fr); }
  .rejilla-dos { grid-template-columns: 1fr; gap: 0; }
  h2 { font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }