@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/instrument-serif-regular.woff2") format("woff2"); }
/* Panel de AuditQ / Local Growth System.
   Dirección: docs/frontend-lgs.md §2 («la oficina de obra a las seis de la
   mañana»). Misma identidad que la landing (backend/app/publico/styles.css):
   negro con rejilla, mono para datos, sans para títulos, verde=OK /
   ámbar=aviso / rojo=crítico, y UN acento nuevo, el hi-vis, reservado a la
   única cosa que toca hacer ahora.

   Los tokens de :root son la única fuente de color, tamaño y espacio (ADR
   0007). Un color escrito a mano en una regla es un bug. Los nombres de
   clase que lee panel.js no se renombran. */

:root {
  --negro: #000000;
  --panel: #0a0e0d;
  --panel-2: #0f1513;
  --panel-3: #141c19;
  --borde: #1b2422;
  --borde-2: #2a3633;
  --tinta: #e6edf3;      /* 16.4:1 sobre --panel-2 */
  --tenue: #9aa7a3;      /* 6.96:1 sobre --panel-2 */
  --ok: #00FFAA;
  --ok-tinta: #001b12;   /* texto sobre --ok: 13.9:1 */
  --hivis: #FFD400;      /* 14.2:1 sobre --panel-2. Solo el siguiente paso. */
  --hivis-tinta: #1a1600;
  --ambar: #FFAA00;
  --naranja: #FF8A3D;
  --rojo: #FF7A7A;       /* AAA sobre los tres fondos: 7.31:1 sobre --panel-2 */
  --radio: 10px;
  --radio-2: 14px;
  --sombra: 0 6px 24px rgba(0, 0, 0, .45);
  --sans: system-ui, -apple-system, "Segoe UI Variable", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;
  /* La serif de display del sitio, mismo fichero y mismo origen (/assets/fonts):
     solo para el titulo del dia y la cifra que manda (docs/gramatica-lgs.md). */
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --ancho: 1100px;
  --t: 150ms;
}

*, *::before, *::after { box-sizing: border-box; }

/* El atributo `hidden` gana SIEMPRE. Sin esto, `.tarjeta { display: grid }`
   pisaba al `[hidden]` del navegador y la caja de la prueba de 7 días salía
   vacía con la cuenta suscrita (E-56). */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: 72px; }
#principal, .seccion, [id] { scroll-margin-top: 72px; }

body {
  margin: 0;
  font-family: var(--sans);
  line-height: 1.6;
  color: var(--tinta);
  background-color: var(--negro);
  background-image:
    linear-gradient(rgba(0,255,170,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,170,0.035) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

.contenedor { width: min(var(--ancho), 94vw); margin-inline: auto; }

/* --- Cabecera --------------------------------------------------------------- */
.cabecera { border-bottom: 1px solid var(--borde); background: rgba(0,0,0,.72);
            position: sticky; top: 0; z-index: 40; backdrop-filter: blur(6px); }
.barra { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
         gap: .5rem 1rem; padding-block: .7rem; min-height: 56px; }
.marca { font-family: var(--mono); font-size: 1.05rem; letter-spacing: -.01em;
         color: var(--tinta); text-decoration: none; display: inline-flex;
         align-items: center; gap: .55rem; min-height: 44px; }
.marca svg { width: 22px; height: 22px; flex: 0 0 auto; }
.marca b { color: var(--ok); font-weight: 700; }
.nav-panel { display: flex; gap: .25rem; flex-wrap: wrap; }
.nav-panel a { color: var(--tenue); text-decoration: none; font-size: .95rem;
               padding: .45rem .7rem; border-radius: var(--radio); min-height: 44px;
               display: inline-flex; align-items: center;
               transition: color var(--t), background-color var(--t); }
.nav-panel a:hover, .nav-panel a:focus-visible { color: var(--tinta); background: var(--panel-2); }
.nav-panel a[aria-current="page"] { color: var(--tinta); background: var(--panel-2); }
.sesion { display: flex; align-items: center; gap: .5rem; font-size: .9rem;
          color: var(--tenue); min-width: 0; }
.sesion .boton { flex: 0 0 auto; white-space: nowrap; }
/* El unico aviso de onboarding fuera de /app/setup: discreto, en hi-vis. */
.enlace-setup { color: var(--hivis); text-decoration: none; font-family: var(--mono);
                font-size: .85rem; padding: .45rem .6rem; border: 1px solid var(--hivis);
                border-radius: 999px; min-height: 44px; display: inline-flex; align-items: center;
                white-space: nowrap; transition: background-color var(--t); }
.enlace-setup:hover, .enlace-setup:focus-visible { background: rgba(255, 212, 0, .12); }
.plan-cabecera { color: var(--tenue); text-decoration: none; font-family: var(--mono); font-size: .85rem;
                 padding: .45rem .6rem; border-radius: var(--radio); min-height: 44px;
                 display: inline-flex; align-items: center; white-space: nowrap;
                 transition: color var(--t), background-color var(--t); }
.plan-cabecera:hover, .plan-cabecera:focus-visible { color: var(--tinta); background: var(--panel-2); }
.menu-cuenta { position: relative; }
.menu-cuenta > summary { list-style: none; cursor: pointer; min-height: 44px; display: inline-flex;
                         align-items: center; gap: .4rem; padding: .45rem .7rem; border-radius: var(--radio);
                         color: var(--tinta); max-width: 14rem; transition: background-color var(--t); }
.menu-cuenta > summary::-webkit-details-marker { display: none; }
.menu-cuenta > summary::after { content: ""; width: 8px; height: 8px; flex: 0 0 auto;
  border-right: 2px solid var(--tenue); border-bottom: 2px solid var(--tenue); transform: rotate(45deg); }
.menu-cuenta > summary:hover, .menu-cuenta > summary:focus-visible { background: var(--panel-2); }
.menu-cuenta > summary #quien { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-cuenta ul { position: absolute; right: 0; top: calc(100% + 6px); list-style: none; margin: 0;
                  padding: .4rem; min-width: 13rem; background: var(--panel-2); border: 1px solid var(--borde-2);
                  border-radius: var(--radio-2); box-shadow: var(--sombra); z-index: 50; display: grid; gap: .2rem; }
.menu-cuenta ul a, .menu-cuenta ul .boton { display: flex; width: 100%; min-height: 44px; align-items: center;
  padding: .5rem .7rem; color: var(--tinta); text-decoration: none; border-radius: var(--radio); }
.menu-cuenta ul a:hover, .menu-cuenta ul a:focus-visible { background: var(--panel-3); }
.menu-cuenta ul .boton { justify-content: flex-start; margin-top: .2rem; }
@media (max-width: 640px) {
  .nav-panel { display: none; }
  .plan-cabecera { display: none; }
}

main { padding-block: 1.5rem 3.5rem; }
h1 { font-size: 1.75rem; margin-block: .25rem 1rem; letter-spacing: -.015em; line-height: 1.15; }
h2 { font-size: 1.15rem; margin-block: 2rem .6rem; letter-spacing: -.01em; }
h3 { font-size: 1rem; margin-block: 1.25rem .4rem; }
a { color: var(--ok); }
p { margin-block: 0 .75rem; }
code { font-family: var(--mono); font-size: .92em; }

.saltar {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--ok); color: var(--ok-tinta); padding: 8px 16px; font-weight: 700;
  border-radius: 0 0 8px 0;
}
.saltar:focus { left: 0; }
:focus-visible { outline: 3px solid var(--ok); outline-offset: 2px; }

/* --- Acceso ------------------------------------------------------------------ */
#vista-auth { max-width: 27rem; margin-inline: auto; padding-top: 2.5rem; }
#vista-auth h1 { text-align: center; margin-bottom: .35rem; }
#vista-auth .lema { text-align: center; color: var(--tenue); margin-bottom: 1.25rem; }
#vista-auth .tarjeta { max-width: none; }
#vista-auth .acciones { margin-top: .25rem; }
#vista-auth .boton { flex: 1 1 100%; justify-content: center; text-align: center; }

/* --- Tarjetas y formularios --------------------------------------------------- */
.tarjeta { border: 1px solid var(--borde); border-radius: var(--radio-2);
           background: var(--panel-2); padding: 1.25rem;
           display: grid; gap: 1rem; max-width: 34rem;
           transition: border-color var(--t), box-shadow var(--t), transform var(--t); }
.tarjeta.fila { max-width: none; grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
@container (max-width: 520px) { .tarjeta.fila { grid-template-columns: 1fr; } }
.tarjeta.ancha { max-width: none; }

.campo { display: grid; gap: .35rem; }
.campo.crece { min-width: 0; }
.fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .8rem; }
label { font-weight: 600; font-size: .92rem; }

input:not([type=checkbox]):not([type=radio]), textarea, select {
  font: inherit; font-size: .95rem;
  padding: .6rem .8rem; width: 100%;
  border: 1px solid var(--borde); border-radius: var(--radio);
  background: var(--panel); color: var(--tinta);
  transition: border-color var(--t), box-shadow var(--t);
}
input[type=email], input[type=password], input[type=url], input[type=tel],
input[inputmode=numeric], textarea { font-family: var(--mono); }
input::placeholder, textarea::placeholder { color: #5c6a66; }
input:focus, textarea:focus, select:focus { border-color: var(--ok);
  box-shadow: 0 0 0 3px rgba(0,255,170,.12); outline: none; }
select { appearance: none; background-image:
  linear-gradient(45deg, transparent 50%, var(--tenue) 50%),
  linear-gradient(135deg, var(--tenue) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2.2rem; }
textarea { resize: vertical; min-height: 6rem; }
input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--ok); }

.ayuda { font-size: 0.875rem; color: var(--tenue); margin: 0; }
.acciones { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.inline { font-weight: 400; display: inline-flex; gap: .45rem; align-items: center; }

/* --- Botones ------------------------------------------------------------------- */
.boton { font: inherit; font-weight: 700; padding: .6rem 1.15rem; cursor: pointer;
         border-radius: var(--radio); border: 1px solid var(--hivis);
         background: var(--hivis); color: var(--hivis-tinta);
         display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
         text-decoration: none; min-height: 48px;
         transition: filter var(--t), transform var(--t), background-color var(--t),
                     color var(--t), border-color var(--t); }
.boton:hover { filter: brightness(1.08); }
.boton:active { transform: translateY(1px); }
.boton.secundario { background: transparent; color: var(--tinta); border-color: var(--borde-2); }
.boton.secundario:hover { background: rgba(230,237,243,.06); border-color: var(--tinta); }
.boton.hivis { background: var(--hivis); border-color: var(--hivis); color: var(--hivis-tinta); }
.boton.pequeno { min-height: 40px; padding: .35rem .8rem; font-size: .9rem; }
.boton[disabled] { opacity: .5; cursor: progress; filter: none; transform: none; }
.boton-google { display: block; text-align: center; text-decoration: none; }
.o-separador { text-align: center; margin: .2rem 0; text-transform: uppercase;
  letter-spacing: .08em; font-size: 0.875rem; }

/* --- Avisos ------------------------------------------------------------------- */
.aviso { border: 1px solid var(--rojo); border-left: 3px solid var(--rojo);
         border-radius: var(--radio); padding: .7rem .95rem;
         margin-block: 0 1.1rem; font-size: .93rem;
         background: rgba(255, 122, 122, .10); color: #ffd9d9; }
.aviso.ok { border-color: var(--ok); border-left-color: var(--ok);
            background: rgba(0, 255, 170, .10); color: #cfffee; }

/* --- «Today»: saludo y UNA linea de contexto -------------------------------- */
.hoy { display: grid; gap: .25rem; margin-bottom: 1rem; }
.hoy h1 { margin: 0; font: 400 clamp(2rem, 1.4rem + 2vw, 3rem)/1.05 var(--serif); letter-spacing: -.01em; }
.contexto { color: var(--tenue); font-size: 1.05rem; max-width: 60ch; margin: 0 0 .5rem; }

/* La herramienta principal: la unica cosa en hi-vis del panel. */
.auditar { display: grid; gap: .75rem; margin-bottom: 1.5rem; }
.auditar .auditar-form { border-color: var(--borde-2); background: var(--panel-2);
                         padding: 1.1rem 1.25rem; grid-template-columns: minmax(0, 1fr) auto; }
.auditar .auditar-form label { font-size: 1rem; }
.auditar .auditar-form input { font-size: 1.1rem; min-height: 56px; }
.boton.grande { min-height: 56px; padding-inline: 1.6rem; font-size: 1.1rem; }
.auditar #opciones { padding: .6rem 1rem; }
.auditar #opciones > summary { color: var(--tenue); font-size: .9rem; cursor: pointer; }
@media (max-width: 640px) {
  .auditar .auditar-form { grid-template-columns: 1fr; }
  .boton.grande { width: 100%; }
}

/* El resumen: cuatro frases separadas por lineas. No son tarjetas. */
.resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
           border: 1px solid var(--borde); border-radius: var(--radio-2); background: var(--panel-2);
           margin: 0 0 1.5rem; padding: 0; list-style: none; overflow: hidden; min-height: 4.5rem; }
.resumen li { min-width: 0; border-right: 1px solid var(--borde); border-bottom: 1px solid var(--borde); }
.resumen a { display: block; padding: .85rem 1.1rem; color: inherit; text-decoration: none; height: 100%;
             transition: background-color var(--t); }
.resumen a:hover, .resumen a:focus-visible { background: var(--panel-3); }
.resumen-texto { display: flex; align-items: center; gap: .5rem; margin: 0; font-weight: 700;
                 font-size: 1.05rem; letter-spacing: -.01em; }
.resumen-texto.atencion { color: var(--hivis); }
.resumen-nota { font-size: .85rem; color: var(--tenue); margin: .2rem 0 0; }

/* El mapa lateral: las secciones en orden de uso, con su estado en una palabra. */
.etiqueta-mapa { font-family: var(--mono); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
                 color: var(--tenue); margin: 0 0 .5rem; }
.mapa ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.mapa a { display: flex; justify-content: space-between; align-items: center; gap: .6rem; min-height: 44px;
          padding: .45rem .7rem; border-radius: var(--radio); color: var(--tinta); text-decoration: none;
          border: 1px solid transparent; transition: background-color var(--t), border-color var(--t); }
.mapa a:hover, .mapa a:focus-visible { background: var(--panel-2); border-color: var(--borde); }
.mapa-estado { font-family: var(--mono); font-size: .8rem; color: var(--tenue); white-space: nowrap;
               overflow: hidden; text-overflow: ellipsis; max-width: 10rem; }
.mapa-estado.atencion { color: var(--hivis); font-weight: 700; }
.mapa-estado.configurar { color: var(--ok); }
@media (max-width: 1023px) {
  .lateral { display: grid; gap: .75rem; margin-bottom: 1rem; }
  .mapa ul { display: flex; flex-wrap: wrap; gap: .4rem; }
  .mapa a { border-color: var(--borde); background: var(--panel-2); font-size: .9rem; }
}

/* Contenedores para las @container de tablas y formularios fuera de una seccion. */
#vista-auditorias, .auditar { container-type: inline-size; }
.cab-bloque { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.cab-bloque a { font-size: .95rem; }
.seccion.bloque > .cuerpo.abierto { padding-top: 1.1rem; }
.volver { display: inline-flex; align-items: center; min-height: 44px; color: var(--tenue);
          text-decoration: none; margin-bottom: .5rem; }
.volver:hover, .volver:focus-visible { color: var(--tinta); }

/* --- /app/setup: los siete pasos, y una accion ------------------------------- */
.setup { display: grid; gap: 1rem; max-width: 46rem; }
.setup h1 { margin: 0; }
.setup .lema-setup { color: var(--tenue); font-size: 1.05rem; margin: 0; }
.setup .acciones { margin-top: .5rem; }
.etiqueta-hivis { font-family: var(--mono); font-size: .8rem; letter-spacing: .08em;
                  text-transform: uppercase; color: var(--hivis); margin: 0; }
.progreso { display: grid; gap: .5rem; }
.progreso-linea { display: flex; justify-content: space-between; gap: 1rem;
                  font-size: .9rem; color: var(--tenue); }
.progreso-linea strong { color: var(--tinta); font-family: var(--mono); }
.segmentos { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
             list-style: none; margin: 0; padding: 0; }
.segmentos li { height: 8px; border-radius: 4px; background: var(--borde-2);
                transition: background-color var(--t); }
.segmentos li.hecho { background: var(--ok); }
.segmentos li.siguiente { background: var(--hivis); }
.progreso progress { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.siguiente-paso { display: grid; grid-template-columns: 1fr auto; gap: 1rem;
                  align-items: center; border: 1px solid var(--hivis);
                  border-left-width: 6px; border-radius: var(--radio-2);
                  background: var(--panel-2); padding: 1rem 1.25rem; }
.siguiente-paso .etiqueta-hivis { font-family: var(--mono); font-size: .8rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--hivis); margin: 0 0 .2rem; }
.siguiente-paso p { margin: 0; }
.siguiente-paso strong { font-size: 1.1rem; }
.siguiente-paso.listo { border-color: var(--ok); }
.siguiente-paso.listo .etiqueta-hivis { color: var(--ok); }
@media (max-width: 640px) {
  .siguiente-paso { grid-template-columns: 1fr; }
  .siguiente-paso .boton { width: 100%; }
}

.ico { width: 18px; height: 18px; flex: 0 0 auto; stroke: currentColor; fill: none;
       stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* --- Secciones (details con h2 dentro del summary) ------------------------------ */
.seccion { border: 1px solid var(--borde); border-radius: var(--radio-2);
           background: var(--panel-2); margin: 0 0 1rem; padding: 0;
           transition: border-color var(--t); }
.seccion:hover { border-color: var(--borde-2); }
.seccion > summary { list-style: none; cursor: pointer; padding: .95rem 1.25rem;
                     display: flex; align-items: center; gap: .7rem; min-height: 56px;
                     border-radius: var(--radio-2); }
.seccion > summary::-webkit-details-marker { display: none; }
.seccion > summary::after { content: ""; margin-left: auto; width: 10px; height: 10px;
  border-right: 2px solid var(--tenue); border-bottom: 2px solid var(--tenue);
  transform: rotate(-45deg); transition: transform var(--t); flex: 0 0 auto; }
.seccion[open] > summary::after { transform: rotate(45deg); }
.seccion > summary h2 { margin: 0; font-size: 1.05rem; display: inline; }
.seccion > summary .contador { font-family: var(--mono); font-size: .85rem;
  color: var(--tenue); background: var(--panel-3); border-radius: 999px; padding: .1rem .55rem; }
.seccion > summary .contador.atencion { color: var(--hivis-tinta); background: var(--hivis); font-weight: 700; }
.seccion > .cuerpo { padding: 0 1.25rem 1.25rem; display: grid; gap: 1rem; min-width: 0;
                     container-type: inline-size; overflow-wrap: anywhere; }
.seccion form { display: grid; gap: .9rem; }
.seccion > .cuerpo.abierto { padding-top: 1.1rem; }
.sin-margen { margin: 0; }

/* La caja de la prueba de 7 días: verde, es una oferta, no un error. */
.tarjeta.prueba { max-width: none; border-color: var(--ok);
  background: rgba(0, 255, 170, .06); grid-template-columns: 1fr auto; align-items: center; }
.prueba-titulo { margin: 0 0 .25rem; font-weight: 700; font-size: 1rem; }
.tarjeta.prueba .boton { white-space: nowrap; }
@media (max-width: 640px) { .tarjeta.prueba { grid-template-columns: 1fr; } }

.cuota { margin: 0 0 .5rem; font-size: .92rem; color: var(--tenue); display: grid; gap: .35rem;
         border: 1px solid var(--borde); border-radius: var(--radio); padding: .7rem .8rem; background: var(--panel-2); }
.cuota #cuota-linea { color: var(--tinta); font-family: var(--mono); font-size: .85rem; }
.cuota .boton { justify-self: start; }

/* --- El plan: eleccion, candados y trial ------------------------------------- */
.elegir-plan { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
               gap: .5rem; margin: .75rem 0 .5rem; }
.elegir-plan button { font: inherit; text-align: left; cursor: pointer; padding: .6rem .8rem;
                      border: 1px solid var(--borde-2); border-radius: var(--radio);
                      background: var(--panel); color: var(--tinta); min-height: 48px;
                      transition: border-color var(--t), background-color var(--t); }
.elegir-plan button[aria-checked="true"] { border-color: var(--ok); background: rgba(0,255,170,.08); }
.elegir-plan button strong { display: block; }
.elegir-plan button span { font-family: var(--mono); font-size: .85rem; color: var(--tenue); }
.plan-resumen .plan-nombre { font-size: 1.15rem; margin: 0 0 .2rem; }
.funciones { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem;
             grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.funciones li { display: flex; gap: .5rem; align-items: baseline; padding: .35rem .5rem;
                border: 1px solid var(--borde); border-radius: var(--radio); font-size: .95rem; }
.funciones li.si::before { content: "✓"; color: var(--ok); font-weight: 700; }
.funciones li.no::before { content: "🔒"; }
.funciones li.no { color: var(--tenue); }
.funciones li .limite { font-family: var(--mono); color: var(--tenue); margin-left: auto; font-size: .85rem; }
.candado { font-size: .8rem; color: var(--hivis); font-family: var(--mono); }
.seccion.bloqueada > .cuerpo > .vacio { border-color: var(--hivis); }
.aviso-candado { border: 1px solid var(--hivis); border-left-width: 4px; border-radius: var(--radio);
                 padding: .7rem .95rem; display: grid; gap: .5rem; }
.aviso-candado .boton { justify-self: start; }

/* --- Tablas: tabla de verdad en escritorio, tarjetas de fila en móvil --------- */
.tabla { width: 100%; border-collapse: collapse; margin-top: .5rem; font-size: .93rem; }
.tabla th, .tabla td { text-align: left; padding: .6rem .7rem;
                       border-bottom: 1px solid var(--borde); vertical-align: top; }
.tabla th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: .06em;
            color: var(--tenue); font-weight: 600; }
.tabla td { font-family: var(--mono); font-size: .88rem; overflow-wrap: anywhere; }
.tabla tbody tr { transition: background-color var(--t); }
.tabla tbody tr:hover { background: rgba(255,255,255,.025); }
.tabla .acciones { gap: .4rem; }
@container (max-width: 760px) {
  .tabla.filas thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabla.filas, .tabla.filas tbody, .tabla.filas tr, .tabla.filas td { display: block; }
  .tabla.filas tr { border: 1px solid var(--borde); border-radius: var(--radio);
                    padding: .6rem .8rem; margin-bottom: .6rem; background: var(--panel); }
  .tabla.filas td { border: 0; padding: .25rem 0; display: grid;
                    grid-template-columns: minmax(5rem, 7.5rem) minmax(0, 1fr); gap: .5rem; align-items: baseline;
                    overflow-wrap: anywhere; }
  .tabla.filas td::before { content: attr(data-etiqueta); font-family: var(--sans);
    font-size: .8rem; color: var(--tenue); text-transform: uppercase; letter-spacing: .06em; }
  .tabla.filas td > .nota, .tabla.filas td > .estado { justify-self: start; }
  .tabla.filas td.sin-etiqueta { display: block; padding-top: .5rem; }
  .tabla.filas td.sin-etiqueta::before { content: none; }
  .tabla.filas td.nota-fila { display: block; }
}

.estado { font-family: var(--mono); font-weight: 700; font-size: 0.8rem;
          text-transform: uppercase; letter-spacing: .05em; }
.estado-done { color: var(--ok); }
.estado-failed { color: var(--rojo); }
.estado-running, .estado-queued { color: var(--ambar); }

.paginacion { display: flex; gap: .75rem; align-items: center; margin-top: 1rem;
              color: var(--tenue); font-size: .9rem; }

/* Notas 0-100: una píldora con el color de la severidad que ya usa el informe. */
.nota { display: inline-block; font-family: var(--mono); font-weight: 700;
        padding: .1rem .5rem; border-radius: 999px; border: 1px solid currentColor;
        font-size: .85rem; }
.nota-alta { color: var(--ok); }
.nota-media { color: var(--ambar); }
.nota-baja { color: var(--rojo); }
.nota-nd { color: var(--tenue); }

/* --- Listas de elementos (cotizaciones, reseñas, garantías, hallazgos) --------- */
.hallazgos { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; }
.hallazgos li { border-left: 3px solid var(--borde); padding: .1rem 0 .1rem .85rem; }
.hallazgos li[data-sev="critical"] { border-color: var(--rojo); }
.hallazgos li[data-sev="high"] { border-color: var(--naranja); }
.hallazgos li[data-sev="medium"] { border-color: var(--ambar); }
.hallazgos li[data-sev="low"] { border-color: #4b8a4f; }
.hallazgos .meta { font-size: 0.875rem; color: var(--tenue); font-family: var(--mono); }

.lista { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.lista > li { min-width: 0; overflow-wrap: anywhere; border: 1px solid var(--borde); border-left-width: 4px; border-radius: var(--radio);
              background: var(--panel); padding: .85rem 1rem; display: grid; gap: .4rem;
              transition: border-color var(--t), transform var(--t), box-shadow var(--t); }
.lista > li:hover { border-color: var(--borde-2); }
.lista > li[data-sev="critical"] { border-left-color: var(--rojo); }
.lista > li[data-sev="high"] { border-left-color: var(--naranja); }
.lista > li[data-sev="medium"] { border-left-color: var(--ambar); }
.lista > li[data-sev="ok"] { border-left-color: var(--ok); }
.lista > li[data-sev="atencion"] { border-left-color: var(--hivis); }
.lista .cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .7rem; }
.lista .cab strong { font-size: 1rem; }
.lista .cab .ayuda { font-family: var(--mono); }
.lista ul { margin: 0; padding-left: 1.1rem; }
.lista .acciones { margin-top: .25rem; }
.pill { display: inline-block; font-family: var(--mono); font-size: .75rem; font-weight: 700;
        letter-spacing: .05em; text-transform: uppercase; padding: .1rem .5rem;
        border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; }
.pill-ok { color: var(--ok); }
.pill-atencion { color: var(--hivis); }
.pill-aviso { color: var(--ambar); }
.pill-critico { color: var(--rojo); }
.pill-tenue { color: var(--tenue); }
.estrellas { font-family: var(--mono); letter-spacing: .1em; color: var(--ambar); }
.estrellas.baja { color: var(--rojo); }

/* Vacíos con la siguiente acción, no un «nada que ver». */
.vacio { border: 1px dashed var(--borde-2); border-radius: var(--radio); padding: 1rem 1.1rem;
         color: var(--tenue); display: grid; gap: .5rem; }
.vacio .boton { justify-self: start; }

/* Las cinco miradas que decidieron el hallazgo. */
.perspectivas { margin-top: .45rem; font-size: 0.875rem; }
.perspectivas > summary { color: var(--tenue); cursor: pointer; }
.perspectivas > summary:focus-visible { outline: 2px solid var(--ok);
                                        outline-offset: 2px; border-radius: 3px; }
.perspectivas ul { list-style: none; margin: .45rem 0 0; padding: 0; display: grid; gap: .2rem; }
.perspectivas li { color: var(--tenue); padding-left: 1.1rem; position: relative; }
.perspectivas li::before { content: "•"; position: absolute; left: 0; }
.perspectivas li[data-voto="relevante"]::before { content: "•"; color: var(--naranja); }
.perspectivas li[data-voto="no_relevante"]::before { content: "\00d7"; }
.perspectivas li strong { color: var(--tinta); font-weight: 600; }

.diff { border: 1px solid var(--borde); border-radius: var(--radio); padding: 1rem;
        overflow-x: auto; font-size: 0.875rem; white-space: pre;
        font-family: var(--mono); background: var(--panel); color: var(--tinta); }

.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden;
                      clip: rect(0 0 0 0); white-space: nowrap; }

/* --- Maquetación en dos columnas a partir de 1024 px ---------------------------- */
@media (min-width: 1024px) {
  .rejilla-panel { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
                   gap: 1.25rem; align-items: start; }
  .rejilla-panel > .cuerpo-panel { order: 1; }
  .rejilla-panel > .lateral { order: 2; position: sticky; top: 72px; display: grid; gap: 1rem; }
}

/* --- Movimiento: sólo con permiso ----------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .entra { animation: entrar 240ms ease-out both; }
  .entra:nth-child(2) { animation-delay: 40ms; }
  .entra:nth-child(3) { animation-delay: 80ms; }
  .entra:nth-child(4) { animation-delay: 120ms; }
  .entra:nth-child(5) { animation-delay: 160ms; }
  .entra:nth-child(n+6) { animation-delay: 200ms; }
  @keyframes entrar { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  .lista > li:hover, .tarjeta.interactiva:hover { transform: translateY(-1px); box-shadow: var(--sombra); }
  .esqueleto { animation: latido 1.2s ease-in-out infinite; }
  @keyframes latido { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}
.esqueleto { height: 1em; border-radius: 4px; background: var(--borde-2); display: inline-block; min-width: 3ch; }

/* Mismo suelo que en la landing: 16 px de 768 px para arriba en el texto que se
   lee. El cromo (etiquetas, cabeceras de tabla, insignias) se queda en 14. */
@media (min-width: 768px) {
  .ayuda, .cuota, .hallazgos .meta, .estado, .tabla td, .perspectivas { font-size: 1rem; }
  .tabla th { font-size: .8rem; }
}
@media (pointer: coarse) { .perspectivas > summary { padding: .65rem 0; } }

/* 48 px de alto en lo que se toca (nuestro propio módulo móvil lo exige). */
.boton, input:not([type=checkbox]):not([type=radio]), select, textarea { min-height: 48px; }
.boton.pequeno { min-height: 44px; }

@media (min-width: 1600px) { .contenedor { width: min(1240px, 94vw); } }
@media (min-width: 1920px) { .contenedor { width: min(1440px, 94vw); } html { font-size: 106.25%; } }
@media (min-width: 2560px) { .contenedor { width: min(1600px, 94vw); } html { font-size: 118.75%; } }
@media (min-width: 3440px) { .contenedor { width: min(1900px, 94vw); } html { font-size: 131.25%; } }

/* --- Banner de consentimiento ----------------------------------------------------
   Se renderiza con `hidden` y lo enseña panel.js. Los dos botones miden lo mismo
   a propósito: hacer el «rechazar» más pequeño es patrón oscuro. */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--panel-2); border-top: 1px solid var(--borde);
  padding: 16px 16px; padding-bottom: max(14px, env(safe-area-inset-bottom));
}
.cookie-banner-inner { max-width: var(--ancho); margin: 0 auto; display: flex; flex-wrap: wrap;
  gap: 12px 20px; align-items: center; justify-content: space-between; }
.cookie-banner-label { font-family: var(--mono); font-size: 0.875rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ok); margin: 0 0 4px; }
.cookie-banner-body { margin: 0; font-size: 0.875rem; color: var(--tinta); max-width: 60ch; }
.cookie-banner-body a { color: var(--ok); }
.cookie-banner-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.cookie-banner-acciones button { min-height: 48px; padding: 0 18px; border-radius: 10px;
  font: inherit; font-weight: 700; cursor: pointer; }
@media (max-width: 560px) {
  .cookie-banner-acciones { width: 100%; }
  .cookie-banner-acciones button { flex: 1 1 0; }
}

/* Pie legal: desde dentro de la aplicación también se llega a la privacidad. */
.pie-panel { border-top: 1px solid var(--borde); margin-top: 48px; padding: 20px; text-align: center; }
.pie-panel p { margin: 0; color: var(--tenue); font-size: .875rem; }
.pie-panel a { color: var(--tenue); }
.pie-panel a:hover, .pie-panel a:focus-visible { color: var(--tinta); }

/* --- La cola de revisión de parches (detalle) ------------------------------------
   El diff se pinta línea a línea (`span.diff-linea`), no con marcado construido. */
.parches { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.parche { border: 1px solid var(--borde); border-left: 4px solid var(--borde);
          border-radius: 8px; padding: 12px 14px; background: var(--panel); }
.parche-pending      { border-left-color: var(--ambar); }
.parche-needs_review { border-left-color: var(--rojo); }
.parche-approved     { border-left-color: #6fb3ff; }
.parche-applied      { border-left-color: #b48cff; }
.parche-verified     { border-left-color: var(--ok); }
.parche-rejected, .parche-rolled_back { border-left-color: var(--tenue); opacity: .75; }
.parche-cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 6px; }
.parche-cabecera strong { font-family: var(--mono); font-size: .95rem; }
.etiqueta { font-size: .75rem; padding: 2px 8px; border-radius: 999px;
            background: rgba(255, 255, 255, .08); white-space: nowrap; }
.etiqueta-pending      { background: rgba(255, 170, 0, .22); }
.etiqueta-needs_review { background: rgba(255, 122, 122, .22); }
.etiqueta-verified     { background: rgba(0, 255, 170, .18); }
.parche-motivo { margin: 4px 0; font-style: italic; }
.parche-reauditoria { margin: 4px 0; font-size: .9rem; }
.parche-aviso { margin: 4px 0; font-size: .85rem; color: var(--ambar); }
.parche-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.cola-resumen { font-size: .9rem; opacity: .85; }
.parche .diff { max-height: 340px; overflow: auto; margin: 8px 0 0; font-size: .8rem; line-height: 1.45; }
.diff-linea { display: block; white-space: pre-wrap; word-break: break-word; }
.diff-mas   { background: rgba(0, 255, 170, .14); }
.diff-menos { background: rgba(255, 122, 122, .16); }
.diff-tramo { opacity: .7; }

#dlg-rechazo { border: 1px solid var(--borde); border-radius: var(--radio); padding: 18px;
  max-width: 32rem; width: calc(100% - 2rem); background: var(--panel-2); color: inherit; }
#dlg-rechazo::backdrop { background: rgba(0, 0, 0, .55); }
#dlg-rechazo textarea { width: 100%; font: inherit; padding: 8px; border-radius: 6px;
  border: 1px solid var(--borde); background: var(--panel); color: inherit; }
#dlg-rechazo menu { display: flex; gap: 8px; justify-content: flex-end; padding: 0; margin: 14px 0 0; }
@media (max-width: 480px) {
  .parche-acciones { flex-direction: column; align-items: stretch; }
  .parche-acciones .boton { width: 100%; }
  #dlg-rechazo menu { flex-direction: column-reverse; }
  #dlg-rechazo menu .boton { width: 100%; }
}

/* Los siete pasos en la sección «Get set up» (la lista larga; la barra va arriba). */
.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; counter-reset: paso; }
.pasos li { display: flex; align-items: center; gap: .6rem; border: 1px solid var(--borde);
            border-radius: var(--radio); padding: .55rem .75rem; min-height: 44px;
            transition: border-color var(--t), background-color var(--t); }
.pasos li.hecho { border-color: rgba(0,255,170,.45); }
.pasos li.siguiente { border-width: 2px; border-color: var(--hivis); background: var(--panel-3); }
.pasos .marca { font-family: var(--mono); width: 1.4rem; text-align: center; color: var(--tenue); }
.pasos li.hecho .marca { color: var(--ok); }
.pasos li.siguiente .marca { color: var(--hivis); }
.pasos a { color: var(--tinta); text-decoration: underline; text-underline-offset: .15em; }
.pasos a:hover, .pasos a:focus-visible { text-decoration-thickness: 2px; }
.siguiente { margin: .75rem 0 0; font-weight: 600; }

/* El historico del score por sitio (docs/motor-coherente.md §3): una linea, eje fijo 0-100.
   Sin movimiento: es un dato. */
.historial-nota { margin: 12px 0 0; }
.historial-nota svg { display: block; width: 100%; height: 72px; background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); }
.historial-nota polyline { fill: none; stroke: var(--ok); stroke-width: 2; vector-effect: non-scaling-stroke; }
.historial-nota circle { fill: var(--hivis); }

/* El benchmark competitivo: una tabla, un sitio por columna (docs/diferenciadores-v1.md). */
.benchmark { margin-top: 24px; }
.benchmark .tabla th:first-child { text-align: left; color: var(--tenue); font-weight: 600; }
.benchmark ol, .benchmark ul { padding-left: 1.2rem; }