/* AUDITA — estilos estructurales de la aplicación real.
   Usa exclusivamente los tokens de tokens.css; no se definen colores,
   tipografías, espaciados ni radios nuevos aquí. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--marca); text-underline-offset: 3px; }
a:hover { opacity: .75; }
::selection { background: var(--marca); color: #fff; }
:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; border-radius: 2px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

.lang-switch {
  position: fixed; z-index: 95; top: 14px; right: 14px;
  display: flex; gap: 0; background: var(--papel); border: 1px solid var(--linea);
  border-radius: 99px; padding: 3px; box-shadow: var(--sh1);
}
.lang-btn {
  border: none; cursor: pointer; text-decoration: none;
  font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .06em;
  padding: 6px 14px; border-radius: 99px; background: transparent; color: var(--tinta-50);
}
.lang-btn.activo { background: var(--marca); color: #fff; }

.header { border-bottom: 1px solid var(--linea); background: var(--papel); }
.header-inner {
  max-width: 960px; margin: 0 auto; padding: 18px var(--s4);
  display: flex; align-items: center; justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tinta); }
.brand-mark {
  width: 26px; height: 26px; background: var(--marca); border-radius: var(--r1);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--mono); font-weight: 600; font-size: 15px;
}
.brand-name { font-family: var(--mono); font-weight: 500; letter-spacing: .06em; font-size: 15px; }
.nav-faq { font-family: var(--mono); font-size: 13px; color: var(--tinta-50); text-decoration: none; }

/* En móvil el header-inner ocupa todo el ancho de la pantalla, así que
   su lado derecho queda justo debajo del selector de idioma (fixed,
   top:14px/right:14px) y se solapan. Forzamos que las acciones de la
   derecha (píldora + login) bajen a su propia fila para que quede
   siempre por debajo del selector, nunca detrás. */
@media (max-width: 640px) {
  .header-inner { flex-wrap: wrap; row-gap: 10px; }
}

.main { max-width: 640px; margin: 0 auto; padding: var(--s7) var(--s4) var(--s8); }
.eyebrow {
  font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--marca); margin-bottom: var(--s3);
}
.hero-title {
  margin: 0 0 var(--s4); font-weight: 800; font-size: clamp(30px, 7vw, 44px);
  line-height: 1.05; letter-spacing: -.025em; text-wrap: pretty;
}
.hero-sub { margin: 0 0 var(--s6); font-size: 18px; line-height: 1.55; color: var(--tinta-70); max-width: 34em; }

.form { display: flex; flex-direction: column; gap: var(--s6); }
.field-label { display: block; font-weight: 700; font-size: 15px; margin-bottom: var(--s2); }
.url-wrap { position: relative; }
.input {
  width: 100%; height: var(--ctrl); padding: 0 44px 0 14px;
  font-family: var(--mono); font-size: 16px; color: var(--tinta);
  background: var(--papel-2); border: 1.5px solid var(--linea); border-radius: var(--r2);
}
.input.es-valida { border-color: var(--exito); }
.input.es-invalida { border-color: var(--critico); }
.input-icon { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; }
.spinner {
  width: 16px; height: 16px; border: 2px solid var(--niebla); border-top-color: var(--marca);
  border-radius: 50%; animation: spin .7s linear infinite; display: block;
}
.icono-ok { color: var(--exito); font-size: 18px; font-weight: 700; }
.icono-error { color: var(--critico); font-size: 18px; font-weight: 700; }
.msg { min-height: 20px; margin-top: var(--s2); font-size: 13px; font-family: var(--mono); }
.msg.error { color: var(--critico); }

.fieldset { border: none; margin: 0; padding: 0; }
.fieldset-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: var(--s4); flex-wrap: wrap;
}
.legend { font-weight: 700; font-size: 15px; padding: 0; }
.counter { font-family: var(--mono); font-size: 13px; color: var(--tinta-50); white-space: nowrap; }
.counter.vacio { color: var(--critico); }
.alert-empty {
  margin-bottom: var(--s4); border-left: 3px solid var(--critico); background: var(--critico-tint);
  padding: 10px 14px; font-size: 13.5px; color: var(--critico); border-radius: 0 var(--r1) var(--r1) 0;
  display: none;
}
.alert-empty.visible { display: block; }

.familias { display: flex; flex-direction: column; gap: var(--s5); }
.familia-head { display: flex; align-items: center; gap: 10px; margin-bottom: var(--s3); }
.familia-nombre {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-50);
}
.familia-linea { flex: 1; height: 1px; background: var(--linea); }
.items { display: flex; flex-direction: column; gap: var(--s2); }
.item {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px;
  background: var(--papel-2); border: 1px solid var(--linea); border-radius: var(--r2); cursor: pointer;
  transition: opacity .2s;
}
.item.desmarcado { opacity: .5; }
.item input { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--marca); flex: none; cursor: pointer; }
.item-nombre { display: block; font-weight: 600; font-size: 14.5px; line-height: 1.35; }
.item-desc { display: block; font-size: 13px; color: var(--tinta-50); line-height: 1.4; margin-top: 2px; }

.turnstile-wrap { min-height: 65px; }
.turnstile-err { color: var(--critico); font-size: 13px; font-family: var(--mono); margin-top: var(--s2); display: none; }
.turnstile-err.visible { display: block; }

.pagelimit {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px;
  background: var(--marca-tint); border-radius: var(--r2);
}
.pagelimit-num { font-family: var(--mono); font-weight: 600; color: var(--marca); font-size: 13px; flex: none; }
.pagelimit p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--tinta-70); }

.uso-detalle { margin-top: var(--s3); }
.uso-detalle summary { font-size: 13px; color: var(--tinta-50); cursor: pointer; }
.uso-detalle ul { margin: var(--s3) 0 0; padding-left: 18px; }
.uso-detalle li { font-size: 13.5px; color: var(--tinta-70); line-height: 1.55; margin-bottom: 8px; }
.uso-detalle p { margin: var(--s2) 0 0; font-size: 13px; color: var(--tinta-50); }

.submit-btn {
  height: var(--ctrl); border: none; border-radius: var(--r2);
  font-family: var(--sans); font-weight: 700; font-size: 16px;
  background: var(--niebla); color: var(--tinta-30); cursor: not-allowed;
  transition: background .2s;
}
.submit-btn.activo { background: var(--marca); color: #fff; cursor: pointer; }

.resultado {
  border: 1px solid var(--linea); border-left: 4px solid var(--exito); border-radius: 0 var(--r2) var(--r2) 0;
  padding: 20px 22px; background: var(--papel-2);
}
.resultado h2 { margin: 0 0 var(--s2); font-weight: 800; font-size: 20px; }
.resultado p { margin: 0 0 var(--s3); color: var(--tinta-70); font-size: 14.5px; line-height: 1.5; }
.resultado .ref { font-family: var(--mono); font-size: 12.5px; color: var(--tinta-50); }

.section { margin-top: var(--s8); padding-top: var(--s7); border-top: 1px solid var(--linea); }
.section-title { margin: 0 0 var(--s5); font-weight: 800; font-size: 26px; letter-spacing: -.02em; }
.grid-includes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s4); }
.include-card { border: 1px solid var(--linea); border-radius: var(--r2); padding: 18px; background: var(--papel-2); }
.include-tag { font-family: var(--mono); font-size: 11px; color: var(--marca); margin-bottom: 8px; }
.include-title { font-weight: 700; margin-bottom: 4px; }
.include-desc { font-size: 13.5px; color: var(--tinta-50); line-height: 1.45; }

.price-section {
  margin-top: var(--s7); border: 1.5px solid var(--tinta); border-radius: var(--r3);
  padding: 28px; background: var(--papel-2);
}
.price-eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinta-50); margin-bottom: 10px;
}
.price-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: var(--s4); }
.price-amount { font-weight: 800; font-size: 44px; letter-spacing: -.03em; }
.price-unit { color: var(--tinta-50); font-size: 15px; }
.price-pitch { margin: 0; color: var(--tinta-70); font-size: 15px; line-height: 1.55; }

.faq-item { border-top: 1px solid var(--linea); padding: 16px 0; }
.faq-item summary { font-weight: 700; cursor: pointer; list-style: none; font-size: 16px; }
.faq-item p { margin: 10px 0 0; color: var(--tinta-70); font-size: 14.5px; line-height: 1.55; }

@media (max-width: 480px) {
  .price-amount { font-size: 36px; }
}

/* ===== Progreso ===== */
.progreso-main { max-width: 520px; }
.progress-head { display: flex; align-items: baseline; justify-content: flex-end; margin-bottom: var(--s2); }
.progress-pct { font-family: var(--mono); font-weight: 600; font-size: 15px; }
.progress-bar { height: 8px; background: var(--niebla); border-radius: 99px; overflow: hidden; margin-bottom: var(--s6); }
.progress-fill { height: 100%; width: 0%; background: var(--marca); border-radius: 99px; transition: width .5s ease; }
.progress-steps { display: flex; flex-direction: column; gap: var(--s1); }
.step { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--linea); border-radius: var(--r2); color: var(--tinta-50); }
.step-icon { flex: none; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; }
.step-icon::before { content: '○'; }
.step.hecho { border-color: var(--linea); color: var(--tinta); }
.step.hecho .step-icon::before { content: '✓'; color: var(--exito); }
.step.actual { background: var(--papel-2); border-color: var(--marca); color: var(--tinta); font-weight: 600; }
.step.actual .step-icon::before { content: none; }
.step.actual .step-icon {
  width: 16px; height: 16px;
  border: 2px solid var(--niebla); border-top-color: var(--marca);
  border-radius: 50%; animation: spin .7s linear infinite;
}
.step-nombre { font-size: 14.5px; }
.progress-email-note { margin-top: var(--s6); display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; background: var(--papel-2); border: 1px solid var(--linea); border-radius: var(--r2); }
.progress-email-check { font-family: var(--mono); color: var(--marca); font-size: 13px; flex: none; }
.progress-email-note p { margin: 0; font-size: 13.5px; color: var(--tinta-70); line-height: 1.5; }

.progreso-error-icon { width: 44px; height: 44px; border-radius: var(--r2); background: var(--critico-tint); color: var(--critico); display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; margin-bottom: var(--s5); }
.progreso-error-steps { border: 1px solid var(--linea); border-radius: var(--r2); background: var(--papel-2); padding: 16px 18px; margin-bottom: var(--s5); }
.progreso-error-heading { font-family: var(--mono); font-size: 12px; color: var(--tinta-50); margin-bottom: 8px; }
.progreso-error-steps ul { margin: 0; padding-left: 18px; font-size: 14px; color: var(--tinta-70); line-height: 1.7; }
.progreso-error-btn { display: block; text-align: center; text-decoration: none; line-height: var(--ctrl); }

/* ===== Informe gratuito ===== */
.informe-main { max-width: 720px; }
.informe-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s5); flex-wrap: wrap; gap: 12px; }
.badge-free { font-family: var(--mono); font-size: 12px; color: var(--tinta-50); background: var(--papel-3); padding: 5px 10px; border-radius: 99px; }
.informe-url-card { border: 1px solid var(--linea); border-left: 4px solid var(--marca); border-radius: 0 var(--r2) var(--r2) 0; padding: 20px 22px; background: var(--papel-2); margin-bottom: var(--s6); }
.informe-url { font-family: var(--mono); font-size: 15px; font-weight: 500; word-break: break-all; }
.informe-meta { font-family: var(--mono); font-size: 12.5px; color: var(--tinta-50); margin-top: 6px; }

.score-block { margin-bottom: var(--s7); }

/* Hero de gravedad: elemento protagonista del informe (sustituye al
   antiguo número /100 grande -- ver nota de producto 2026-08-24: un
   "0/100" en un sitio sin problemas críticos generaba desconfianza y no
   ayudaba a la conversión; el recuento por gravedad es siempre un hecho
   verificable, nunca "se ve roto"). */
.sev-hero { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s3); margin-bottom: var(--s5); }
.sev-tile { border-radius: var(--r3); padding: 22px var(--s4) 18px; text-align: center; }
.sev-tile-num { font-family: var(--mono); font-weight: 800; font-size: 44px; line-height: 1; letter-spacing: -.02em; }
.sev-tile-label { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; margin-top: 8px; }
.sev-tile-sub { font-size: 12.5px; margin-top: 4px; }
.sev-tile.exito { background: var(--exito-tint); }
.sev-tile.exito .sev-tile-num, .sev-tile.exito .sev-tile-sub { color: var(--exito); }
.sev-tile.exito .sev-tile-label { color: var(--exito); opacity: .8; }
.sev-tile.critico { background: var(--critico-tint); }
.sev-tile.critico .sev-tile-num, .sev-tile.critico .sev-tile-sub { color: var(--critico); }
.sev-tile.critico .sev-tile-label { color: var(--critico); opacity: .85; }
.sev-tile.importante { background: var(--importante-tint); }
.sev-tile.importante .sev-tile-num, .sev-tile.importante .sev-tile-sub { color: var(--importante); }
.sev-tile.importante .sev-tile-label { color: var(--importante); opacity: .85; }
.sev-tile.menor { background: var(--menor-tint); }
.sev-tile.menor .sev-tile-num, .sev-tile.menor .sev-tile-sub { color: var(--menor); }
.sev-tile.menor .sev-tile-label { color: var(--menor); opacity: .85; }

/* Estado general: ya no muestra el número /100 (decisión de producto
   2026-08-24, ambos informes) -- solo la etiqueta cualitativa, calculada
   con audita_clase_puntuacion() (informe_utils.php), y las barras por
   familia, que sí aportan detalle útil por bloque. */
.score-estado { display: flex; flex-direction: column; gap: var(--s4); padding: var(--s4) 0 var(--s6); border-bottom: 1px solid var(--linea); margin-bottom: var(--s6); }
.score-mini-num-wrap { display: flex; align-items: center; gap: 10px; }
.score-estado-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-50); }
.score-tag { font-family: var(--mono); font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 99px; }
.score-tag.critico { background: var(--critico-tint); color: var(--critico); }
.score-tag.importante { background: var(--importante-tint); color: var(--importante); }
.score-tag.exito { background: var(--exito-tint); color: var(--exito); }
.familias-scores { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.familia-score-row { display: flex; align-items: center; gap: 10px; }
.familia-score-nombre { font-size: 13px; color: var(--tinta-70); flex: none; width: 180px; }
.familia-score-barra { flex: 1; height: 8px; background: var(--niebla); border-radius: 99px; overflow: hidden; }
.familia-score-fill { display: block; height: 100%; background: var(--marca); border-radius: 99px; min-width: 3px; }
.familia-score-num { font-family: var(--mono); font-size: 12.5px; color: var(--tinta-50); width: 28px; text-align: right; }

/* Comparativa sectorial: antes una frase suelta (compContextFreeTemplate,
   que se mantiene como pie de este bloque), ahora también un par de
   barras visuales -- solo en el informe gratuito. */
.sector-block { margin-bottom: var(--s7); }
.sector-title { font-weight: 700; font-size: 15px; margin: 0 0 var(--s4); }
.sector-row { display: flex; align-items: center; gap: var(--s3); margin-bottom: 10px; }
.sector-row-label { font-size: 13px; color: var(--tinta-70); flex: none; width: 130px; }
.sector-row-bar-wrap { flex: 1; height: 22px; background: var(--papel-3); border-radius: 6px; overflow: hidden; }
.sector-row-bar { display: block; height: 100%; border-radius: 6px; }
.sector-row-bar.tuweb { background: var(--marca); }
.sector-row-bar.sector { background: var(--tinta-30); }
.sector-row-val { font-family: var(--mono); font-size: 12.5px; color: var(--tinta-50); flex: none; width: 92px; text-align: right; }

.proof-title { margin: 0 0 var(--s2); font-weight: 800; font-size: 22px; letter-spacing: -.02em; }
.proof-sub { margin: 0 0 var(--s5); color: var(--tinta-50); font-size: 14px; }
.finding-card { border: 1px solid var(--linea); border-radius: var(--r2); padding: 20px 22px; margin-bottom: var(--s4); background: var(--papel); }
.finding-head { display: flex; align-items: center; gap: 10px; margin-bottom: var(--s2); }
.finding-sev { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .06em; padding: 3px 8px; border-radius: 4px; }
.finding-sev.critico { background: var(--critico-tint); color: var(--critico); }
.finding-sev.importante { background: var(--papel-3); color: var(--tinta-70); }
.finding-sev.menor { background: var(--papel-3); color: var(--tinta-50); }
.finding-familia { font-family: var(--mono); font-size: 12px; color: var(--tinta-50); }
.finding-titulo { font-weight: 700; font-size: 16px; margin: 0 0 8px; }
.finding-url { font-family: var(--mono); font-size: 12.5px; color: var(--marca); word-break: break-all; margin-bottom: 10px; }
.finding-nota { margin: 0; color: var(--tinta-70); font-size: 14px; line-height: 1.55; }

.comp-context { font-size: 13.5px; color: var(--tinta-50); margin-top: var(--s3); }

.locked-card { border: 1px dashed var(--niebla); border-radius: var(--r2); padding: var(--s5) var(--s5) var(--s4); margin-top: var(--s6); background: var(--papel-2); }
.locked-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: var(--s4); }
.locked-tag { font-family: var(--mono); font-size: 11px; color: var(--tinta-50); background: var(--papel-3); padding: 3px 8px; border-radius: 99px; white-space: nowrap; }
.locked-list { display: flex; flex-direction: column; }
.locked-row { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid var(--linea-2); }
.locked-row:first-child { border-top: none; }
.locked-icon { flex: none; color: var(--tinta-30); }
.locked-cat { flex: 1; font-size: 13.5px; color: var(--tinta-70); }
.locked-count { font-family: var(--mono); font-size: 12.5px; color: var(--tinta-50); }

.paginas-analizadas { list-style: none; margin: 0; padding: 0; }
.paginas-analizadas li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--linea-2); }
.paginas-analizadas li:first-child { border-top: none; }
.pagina-url { font-family: var(--mono); font-size: 12.5px; color: var(--tinta-70); word-break: break-all; flex: 1; }

.cta-block { margin-top: var(--s8); padding: var(--s6); border: 1px solid var(--linea); border-radius: var(--r2); background: var(--papel-2); }
.cta-bullets { margin: var(--s4) 0; padding-left: 18px; }
.cta-bullets li { margin-bottom: 8px; font-size: 14.5px; color: var(--tinta-70); line-height: 1.5; }
.cta-button { display: inline-block; margin-top: var(--s3); padding: 0 20px; height: var(--ctrl); line-height: var(--ctrl); border-radius: var(--r2); background: var(--marca); color: #fff; font-weight: 700; text-decoration: none; border: none; cursor: pointer; font-family: inherit; font-size: 15px; }
.cta-codigo-details { margin-top: var(--s3); }
.cta-codigo-details summary { font-size: 13.5px; color: var(--tinta-50); cursor: pointer; }
.cta-codigo-input {
  display: block; margin-top: 8px; width: 100%; max-width: 260px; height: 40px; padding: 0 12px;
  border: 1px solid var(--linea); border-radius: var(--r2); background: var(--papel); font-family: var(--sans); font-size: 14px;
}

/* ===== Referencia cruzada a la auditoría de seguridad (Opción B) ===== */
.crosssell-card {
  display: flex; gap: var(--s4); align-items: flex-start; margin-top: var(--s6);
  padding: var(--s5); border: 1px solid var(--marca-70); border-radius: var(--r2); background: var(--marca-tint);
}
.crosssell-icon { font-size: 26px; line-height: 1; flex: none; }
.crosssell-card h3 { margin: 0 0 6px; font-size: 16px; font-weight: 800; }
.crosssell-card p { margin: 0; font-size: 13.5px; color: var(--tinta-70); line-height: 1.5; }
.crosssell-descuento {
  display: inline-block; margin-top: 8px !important; font-family: var(--mono); font-size: 12.5px;
  color: var(--exito); background: var(--exito-tint); padding: 5px 10px; border-radius: var(--r1);
}
.crosssell-btn {
  display: inline-block; margin-top: var(--s3); padding: 0 16px; height: 40px; line-height: 40px;
  border-radius: var(--r2); background: var(--marca); color: #fff; font-weight: 700; text-decoration: none; font-size: 13.5px;
}
@media (max-width: 480px) {
  .crosssell-card { flex-direction: column; }
}

/* ===== Informe completo ===== */
.toolbar-btn { font-family: var(--mono); font-size: 12.5px; border: 1px solid var(--linea); background: var(--papel); color: var(--tinta); padding: 6px 12px; border-radius: var(--r2); cursor: pointer; }
.toolbar-btn:hover { background: var(--papel-2); }
.print-header, .print-footer { display: none; }

.plan-card { border: 1px solid var(--linea); border-radius: var(--r2); padding: 20px 22px; margin-bottom: var(--s4); }
.plan-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: var(--s2); flex-wrap: wrap; }
.plan-num { font-family: var(--mono); font-size: 13px; color: var(--tinta-50); flex: none; }
.plan-titulo { font-weight: 700; font-size: 16px; margin: 0; flex: 1; min-width: 200px; }
.plan-familia-titulo {
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-50);
  margin: var(--s6) 0 var(--s3); padding-bottom: 6px; border-bottom: 1px solid var(--linea);
}
.plan-familia-titulo:first-of-type { margin-top: var(--s3); }
.plan-meta { display: flex; gap: var(--s5); font-size: 13px; color: var(--tinta-70); margin-bottom: var(--s3); }
.plan-objetivo, .plan-motivo { margin: 0 0 8px; font-size: 13.5px; color: var(--tinta-70); line-height: 1.5; }
.plan-objetivo strong, .plan-motivo strong { color: var(--tinta); }
.plan-pasos { margin: 0; padding-left: 20px; }
.plan-pasos li { font-size: 14px; color: var(--tinta-70); line-height: 1.6; margin-bottom: 4px; }

.calendario-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s4); }
.calendario-col { border: 1px solid var(--linea); border-radius: var(--r2); padding: 16px 18px; background: var(--papel-2); }
.calendario-ventana { font-family: var(--mono); font-size: 12px; color: var(--marca); font-weight: 600; margin-bottom: var(--s3); }
.calendario-col ul { margin: 0; padding-left: 18px; }
.calendario-col li { font-size: 13.5px; color: var(--tinta-70); line-height: 1.6; margin-bottom: 4px; }

.evidence-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; color: var(--tinta-50); margin: 10px 0 4px; }
.evidence-lista { margin: 0; padding: 0; list-style: none; }
.evidence-lista li { font-size: 13.5px; color: var(--tinta-70); line-height: 1.6; padding: 4px 0 4px 14px; position: relative; }
.evidence-lista li::before { content: ''; position: absolute; left: 0; top: 12px; width: 5px; height: 5px; border-radius: 99px; background: var(--niebla); }
.evidence-nota { margin: 8px 0 0; font-size: 13px; color: var(--tinta-50); font-style: italic; }
.finding-accion-link { margin-top: 10px; font-size: 12.5px; color: var(--marca); font-weight: 600; }

@media print {
  @page { size: A4; margin: 16mm 14mm 20mm; }

  /* Los navegadores no imprimen fondos/colores por defecto -- sin esto,
     todo el trabajo de color de marca de abajo se quedaría en blanco y
     negro al imprimir/exportar a PDF. */
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; color-adjust: exact !important; }

  .no-imprimir, .lang-switch { display: none !important; }
  body { background: #fff; font-size: 12.5px; }
  .informe-main { max-width: none; padding: 0; }

  /* Cabecera de marca real para el documento impreso -- en pantalla el
     logo vive en .informe-top, que se oculta al imprimir (no-imprimir),
     así que sin esto la portada del PDF no llevaba ningún logo. */
  .print-header {
    display: flex; align-items: center; gap: 10px;
    padding-bottom: 16px; margin-bottom: 26px; border-bottom: 2px solid var(--marca);
  }
  .print-header .print-logo {
    width: 28px; height: 28px; background: var(--marca); border-radius: 6px; flex: none;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-family: var(--mono); font-weight: 700; font-size: 15px;
  }
  .print-header .print-brand { font-family: var(--mono); font-weight: 700; font-size: 15px; letter-spacing: .06em; color: var(--tinta); }
  .print-header .print-meta { margin-left: auto; text-align: right; font-family: var(--mono); font-size: 10.5px; color: var(--tinta-50); line-height: 1.6; }

  .print-footer {
    display: block; margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--linea);
    text-align: center; font-family: var(--mono); font-size: 10.5px; color: var(--tinta-30);
  }

  .eyebrow { color: var(--marca); }
  .informe-url-card { background: var(--marca-tint); }

  .proof-title { border-left: 4px solid var(--marca); padding-left: 12px; }
  .plan-familia-titulo { color: var(--marca); border-bottom-color: var(--marca-tint); }
  .plan-card { background: var(--papel-2); }

  h1, h2, h3, h4, .plan-familia-titulo { break-after: avoid; page-break-after: avoid; }
  .score-block, .plan-card, .finding-card, .calendario-col, .legal-tabla, .paginas-analizadas { break-inside: avoid; page-break-inside: avoid; }

  a { color: var(--tinta); }
  .finding-sev.critico { background: var(--critico-tint) !important; color: var(--critico) !important; }
}

/* ===== Legal (aviso legal / privacidad / cookies) ===== */
.legal-main { max-width: 720px; }
.legal-main h2 { font-size: 18px; font-weight: 700; margin: var(--s6) 0 var(--s2); }
.legal-main p { color: var(--tinta-70); font-size: 14.5px; line-height: 1.6; margin: 0 0 var(--s3); }
.legal-main ul { padding-left: 20px; margin: 0 0 var(--s3); }
.legal-main li { color: var(--tinta-70); font-size: 14.5px; line-height: 1.6; margin-bottom: 6px; }
.legal-fecha { font-family: var(--mono); font-size: 12px; color: var(--tinta-50); margin-bottom: var(--s6); }
.legal-tabla { width: 100%; border-collapse: collapse; margin: var(--s4) 0; font-size: 13px; }
.legal-tabla th, .legal-tabla td { border: 1px solid var(--linea); padding: 8px 10px; text-align: left; vertical-align: top; }
.legal-tabla th { background: var(--papel-2); font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }

/* ===== Pie de pagina ===== */
.pie-pagina { border-top: 1px solid var(--linea); margin-top: var(--s8); padding: var(--s6) var(--s4); }
.pie-pagina-inner { max-width: 720px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.pie-pagina-copy { font-family: var(--mono); font-size: 12px; color: var(--tinta-50); }
.pie-pagina-links { display: flex; gap: 18px; flex-wrap: wrap; }
.pie-pagina-links a { font-size: 12.5px; color: var(--tinta-50); text-decoration: none; }
.pie-pagina-links a:hover { color: var(--tinta); text-decoration: underline; }

/* ===== Cookie banner ===== */
.cookie-banner { position: fixed; z-index: 80; bottom: 20px; left: 14px; right: 14px; max-width: 480px; margin: 0 auto; background: var(--tinta); color: var(--papel); border-radius: var(--r3); padding: 18px 20px; box-shadow: 0 8px 24px rgba(0,0,0,.2); }
.cookie-banner p { margin: 0 0 var(--s3); font-size: 13px; line-height: 1.5; color: #E9E9E4; }
.cookie-banner a { color: var(--marca); }
.cookie-banner-botones { display: flex; gap: 8px; flex-wrap: wrap; }
.cookie-btn { flex: 1; min-width: 100px; height: 40px; border: 1px solid rgba(255,255,255,.25); border-radius: var(--r2); background: transparent; color: var(--papel); font-weight: 600; font-size: 13px; cursor: pointer; font-family: var(--sans); }
.cookie-btn-principal { border: none; background: var(--marca); color: #fff; }

/* ===== Panel de administracion ===== */
.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s4); margin: var(--s6) 0 var(--s7); }
.admin-stat { border: 1px solid var(--linea); border-radius: var(--r2); padding: 16px 18px; background: var(--papel-2); }
.admin-stat-num { font-weight: 800; font-size: 28px; letter-spacing: -.02em; }
.admin-stat-label { font-size: 12px; color: var(--tinta-50); margin-top: 4px; }
.admin-badge { font-family: var(--mono); font-size: 11px; padding: 2px 8px; border-radius: 99px; background: var(--papel-3); }
.admin-badge-completado { background: var(--exito-tint, var(--papel-3)); color: var(--exito); }
.admin-badge-fallido { background: var(--critico-tint); color: var(--critico); }
.admin-badge-procesando { background: var(--papel-3); color: var(--tinta-70); }
.admin-badge-pendiente { background: var(--papel-3); color: var(--tinta-50); }