/* Heyconi · Taller, segunda pasada (Paso 10.4b, F1b). Los valores viven en tokens.css (claro y oscuro); aquí solo se usan.
   Reglas: líneas de 1 px; radios 8 (control) / 10 (panel) / pastilla; pesos 430 · 600 · 720; tamaños solo desde --t-*
   (nada bajo 15 px; campos a 17 px o más); espacio desde --e-*; sombras solo --elev-*; sin degradados; duraciones solo
   desde --d-*. Un solo botón en tinta llena por pantalla (el principal); secundario con borde; silencioso sin borde.
   Dos tintas con significado: --nota (ayuda, recomendado, foco) y --pend (pendiente, sin fondo). Fallos técnicos: --alerta
   sobre su fondo, siempre con texto.
   Bricolage Grotesque se sirve desde la app (static/fuentes, licencia OFL; Paso 10.4): sin internet y sin Google Fonts. */
@font-face{font-family:"Bricolage Grotesque";src:url("/static/fuentes/BricolageGrotesque-variable.ttf") format("truetype");
  font-weight:200 800;font-stretch:75% 100%;font-style:normal;font-display:swap}

*{box-sizing:border-box}
html,body{margin:0}
html{background:var(--superficie)}
button,input,textarea,select{font:inherit;color:inherit}
h1,h2,h3{line-height:var(--lh-titulo);margin:0;font-weight:var(--w-titulo);letter-spacing:-.015em;text-wrap:balance}
h1{font-size:var(--t-portada);letter-spacing:-.025em}
h2{font-size:var(--t-titulo)}
h3{font-size:var(--t-lead)}
b,strong{font-weight:var(--w-enfasis)}
p{margin:0}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}
.oculto{display:none !important}
.visualmente-oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
::selection{background:var(--nota-suave);color:var(--tinta)}

/* ---- estructura ---- */
.app{display:grid;grid-template-columns:var(--lateral) minmax(0,1fr);min-height:100vh;align-content:start}
.lateral{border-right:var(--linea);padding:var(--e-5) var(--e-3) var(--e-4);display:flex;flex-direction:column;gap:var(--e-1);
  position:sticky;top:0;height:100vh;background:var(--superficie)}
.logo{font-weight:var(--w-titulo);font-size:var(--t-titulo);letter-spacing:-.03em;text-decoration:none;color:var(--tinta);
  background:none;border:0;padding:var(--e-1) var(--e-3);text-align:left;cursor:pointer;border-radius:var(--r-control);margin-bottom:var(--e-4)}
.logo em{font-style:normal;color:var(--nota)}
nav{display:grid;gap:2px}
.nav-item{position:relative;display:block;width:100%;text-align:left;background:none;border:0;padding:var(--e-2) var(--e-3);
  border-radius:var(--r-control);font-size:var(--t-cuerpo);font-weight:var(--w-texto);color:var(--tinta-2);cursor:pointer;
  transition:background-color var(--d-rapido) var(--c-salida),color var(--d-rapido) var(--c-salida)}
.nav-item.activo{color:var(--tinta);font-weight:var(--w-enfasis);background:var(--superficie-2)}
.nav-item.activo::before{content:"";position:absolute;left:0;top:var(--e-2);bottom:var(--e-2);width:2px;border-radius:2px;background:var(--nota)}
.lateral-pie{margin-top:auto;display:grid;gap:var(--e-2);color:var(--tinta-2);font-size:var(--t-meta);padding:0 var(--e-3)}
.lateral-pie .lateral-salir{justify-self:start;min-height:44px;padding:0 var(--e-2);margin-left:calc(-1 * var(--e-2));font-size:var(--t-meta)}   /* S8: «Salir», solo con cuentas */
.barra-movil{display:none}
.principal{padding:var(--e-6) var(--e-6) var(--e-8);max-width:920px;width:100%;margin:0 auto}

/* botón claro/oscuro: un interruptor con nombre ("Modo oscuro") y aria-pressed */
.tema-boton{display:flex;align-items:center;justify-content:space-between;gap:var(--e-3);width:100%;background:none;border:0;
  padding:var(--e-2) 0;color:var(--tinta-2);font-size:var(--t-meta);cursor:pointer;text-align:left;border-radius:var(--r-control)}
.tema-interruptor{position:relative;flex:none;width:34px;height:20px;border-radius:var(--r-pastilla);border:var(--linea-control);
  background:var(--papel);transition:background-color var(--d-rapido) var(--c-salida),border-color var(--d-rapido) var(--c-salida)}
.tema-interruptor::after{content:"";position:absolute;top:3px;left:3px;width:12px;height:12px;border-radius:50%;background:var(--tinta-2);
  transition:transform var(--d-medio) var(--c-salida),background-color var(--d-rapido) var(--c-salida)}
/* el dibujo sale del tema ya fijado en el <head> (no de aria-pressed, que app.js pone después de pintar): al recargar en
   oscuro el interruptor no se desliza */
html[data-tema="oscuro"] .tema-interruptor{background:var(--nota);border-color:var(--nota)}
html[data-tema="oscuro"] .tema-interruptor::after{transform:translateX(14px);background:var(--sobre-tinta)}
.tema-compacto{width:44px;height:44px;justify-content:center;padding:0}
.tema-icono{position:relative;overflow:hidden;width:18px;height:18px;border-radius:50%;border:1.5px solid currentColor}
.tema-icono::after{content:"";position:absolute;top:0;bottom:0;left:0;width:50%;background:currentColor}
@media (hover:hover){
  .nav-item:hover{background:var(--superficie-2);color:var(--tinta)}
  .tema-boton:hover{color:var(--tinta)}
}

@media (max-width:820px){
  .app{grid-template-columns:minmax(0,1fr)}
  .lateral{display:none;position:static;height:auto;border-right:0;border-bottom:var(--linea);padding:var(--e-3) var(--e-4) var(--e-4)}
  .lateral .logo{display:none}
  .app.menu-abierto .lateral{display:flex}
  .lateral-pie{margin-top:var(--e-3);padding:0 var(--e-3)}
  .lateral-pie .tema-boton{display:none}
  .barra-movil{display:flex;align-items:center;justify-content:space-between;padding:var(--e-2) var(--e-4);border-bottom:var(--linea);
    position:sticky;top:0;z-index:30;background:var(--superficie);min-height:var(--alto-barra);view-transition-name:barra-movil}
  /* la barra fija no tapa lo que recibe el foco ni lo que se desplaza a la vista */
  html{scroll-padding-top:calc(var(--alto-barra) + var(--e-2))}
  .barra-movil .logo{margin:0;font-size:var(--t-lead)}
  .barra-movil-acciones{display:flex;align-items:center;gap:var(--e-1)}
  .principal{padding:var(--e-5) var(--e-4) var(--e-8)}
}

/* ---- botón: principal (tinta llena, uno por pantalla) · secundario (borde) · silencioso (sin borde) ---- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--e-2);
  min-height:44px;padding:0 var(--e-4);border-radius:var(--r-control);border:var(--linea-control);
  background:var(--papel);color:var(--tinta);font:var(--w-enfasis) var(--t-cuerpo)/1.2 var(--f-app);
  text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background-color var(--d-rapido) var(--c-salida),border-color var(--d-rapido) var(--c-salida),
             color var(--d-rapido) var(--c-salida),transform var(--d-press) var(--c-salida)}
.btn.primario{background:var(--tinta);border-color:var(--tinta);color:var(--sobre-tinta)}
.btn.suave{background:transparent;border-color:transparent;color:var(--tinta-2);font-weight:var(--w-texto)}
.btn.enlace{background:transparent;border-color:transparent;min-height:0;padding:var(--e-1) 2px;color:var(--nota);font-weight:var(--w-enfasis)}
@media (hover:hover){
  .btn:hover{background:var(--superficie-2)}
  .btn.primario:hover{background:var(--tinta-hover);border-color:var(--tinta-hover)}
  .btn.suave:hover{background:var(--superficie-2);color:var(--tinta)}
  .btn.enlace:hover{background:transparent;text-decoration:underline}
}
.btn:active:not(:disabled):not([aria-disabled="true"]){transform:translateY(1px);transition:none}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.btn[aria-busy="true"]{opacity:1;cursor:progress}
.acciones{display:flex;gap:var(--e-2);flex-wrap:wrap;margin-top:var(--e-5);align-items:center}

/* ---- piezas comunes ---- */
.chips{display:flex;gap:var(--e-2);flex-wrap:wrap;align-items:center}
.chip{display:inline-flex;align-items:center;font-size:var(--t-meta);font-weight:var(--w-texto);line-height:1.3;padding:2px var(--e-3);
  border-radius:var(--r-pastilla);border:var(--linea);color:var(--tinta-2);background:transparent}
.chip.teal{color:var(--nota);border-color:var(--nota)}
.chip.supuesto{border-style:dashed}
.etiqueta{display:inline-block;font-size:var(--t-meta);font-weight:var(--w-texto);color:var(--tinta-2);border:var(--linea);
  border-radius:var(--r-pastilla);padding:0 var(--e-2);margin-left:var(--e-2);vertical-align:.1em;line-height:1.4}
.rotulo{display:block;font-size:var(--t-meta);font-weight:var(--w-enfasis);color:var(--tinta-2);margin-bottom:var(--e-1)}
.suave-texto{color:var(--tinta-2)}
.razon{color:var(--nota)}
.razon b{color:var(--nota)}
/* los «¿Por qué?»: la raya lateral fina de las notas de Tinta */
p.razon,.cambio .razon,.por-que-pregunto[open]>p{border-left:1px solid var(--nota);padding-left:var(--e-3)}
.aviso{background:var(--alerta-suave);color:var(--alerta);border-radius:var(--r-panel);padding:var(--e-3) var(--e-4);margin-bottom:var(--e-4);
  display:flex;gap:var(--e-3);align-items:flex-start;justify-content:space-between}
.aviso p{color:var(--tinta)}
.aviso b{color:var(--alerta)}
.aviso .btn{color:var(--alerta)}
.nota{background:var(--superficie-2);border-radius:var(--r-panel);padding:var(--e-3) var(--e-4);margin-bottom:var(--e-4)}
.codigo{font-size:var(--t-meta);color:var(--tinta-2);font-variant-numeric:tabular-nums;word-break:break-all}
.ocupado{color:var(--tinta-2);font-variant-numeric:tabular-nums}
.ocupado:not(:empty){background:var(--superficie-2);border-radius:var(--r-control);padding:var(--e-2) var(--e-3);color:var(--tinta);margin-bottom:var(--e-3)}
textarea,input[type=text],input[type=number],input[type=date],select{width:100%;border:var(--linea-control);border-radius:var(--r-control);
  padding:var(--e-3) var(--e-3);background:var(--papel);color:var(--tinta);font-size:var(--t-cuerpo);line-height:var(--lh-cuerpo);
  transition:border-color var(--d-rapido) var(--c-salida)}
textarea::placeholder,input::placeholder{color:var(--tinta-2)}
textarea{min-height:120px;resize:vertical}
/* los campos chicos muestran tres líneas enteras y crecen con lo escrito donde el navegador lo permite */
textarea.chica{min-height:calc(3lh + 2 * var(--e-3) + 2px);field-sizing:content;max-height:60vh}
input[type=number]{width:120px}
select{min-height:44px}
.campo{display:grid;gap:var(--e-1);margin-bottom:var(--e-4)}
.campo label{font-weight:var(--w-enfasis);font-size:var(--t-meta);color:var(--tinta-2)}
.fila{display:flex;gap:var(--e-2);flex-wrap:wrap;align-items:center}
details>summary{cursor:pointer;font-weight:var(--w-enfasis);list-style:none;display:inline-flex;gap:var(--e-1);align-items:center;
  border-radius:var(--r-control);color:var(--tinta)}
details>summary::-webkit-details-marker{display:none}
@media (hover:hover){details>summary:hover{color:var(--nota)}}
details.teal summary{color:var(--nota)}
.definiciones{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--e-1) var(--e-4);margin:var(--e-3) 0 0}
.definiciones dt{color:var(--tinta-2)}
.definiciones dd{margin:0}
ul.lista{margin:var(--e-2) 0 0;padding-left:var(--e-5)}
ul.lista li{margin-bottom:var(--e-1)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--e-4) var(--e-5)}
@media (max-width:720px){.grid-2{grid-template-columns:1fr}}

/* ---- bienvenida ---- */
.bienvenida{padding-block:var(--e-5) var(--e-2);max-width:var(--ancho-lectura)}
.bienvenida h1{margin-bottom:var(--e-3)}
.bienvenida textarea{min-height:160px;font-size:var(--t-campo);padding:var(--e-4)}
.bienvenida #pides-como{margin-top:var(--e-1)}
.fichas{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--e-2);margin-top:var(--e-3)}
.ficha{text-align:left;background:var(--papel);border:var(--linea);border-radius:var(--r-panel);padding:var(--e-4);cursor:pointer;
  display:grid;gap:var(--e-1);align-content:start;transition:border-color var(--d-rapido) var(--c-salida)}
@media (hover:hover){.ficha:hover{border-color:var(--borde-control)}}
.ficha .detalle{display:block;color:var(--tinta);line-height:1.4}
#ideas-ejemplo>summary{color:var(--tinta-2);font-weight:var(--w-texto)}

/* ---- conversación ---- */
.encargo-cabecera{display:flex;justify-content:space-between;gap:var(--e-3);flex-wrap:wrap;align-items:baseline;
  padding-bottom:var(--e-4);margin-bottom:var(--e-5);border-bottom:var(--linea)}
.encargo-cabecera h1{font-size:var(--t-lead);letter-spacing:-.01em}
.mensajes{display:grid;gap:var(--e-5);margin-bottom:var(--e-5)}
.mensaje{max-width:var(--ancho-lectura);line-height:var(--lh-cuerpo)}
.mensaje .quien{display:block;font-size:var(--t-meta);font-weight:var(--w-enfasis);color:var(--tinta-2);text-transform:uppercase;
  letter-spacing:.05em;margin-bottom:var(--e-1)}
.mensaje.usuario{justify-self:end;background:var(--superficie-2);border-radius:var(--r-panel);padding:var(--e-3) var(--e-4);max-width:min(560px,100%)}
.mensaje.heyconi:focus-visible{border-radius:var(--r-control)}
.respondida{font-size:var(--t-meta)}
.respondida b{color:var(--tinta)}
/* la pregunta activa: sin marco; la pregunta, su porqué plegado y una lista numerada de filas */
.tarjeta{display:grid;gap:var(--e-3);margin-bottom:var(--e-5);padding-top:var(--e-2)}
.tarjeta h3{font-size:var(--t-titulo);max-width:var(--ancho-lectura);text-wrap:pretty}
.por-que-pregunto>summary{color:var(--tinta-2);font-weight:var(--w-texto);font-size:var(--t-meta)}
.por-que-pregunto[open]>p{margin-top:var(--e-2);max-width:var(--ancho-lectura)}
.opciones{display:grid;gap:var(--e-2);margin-top:var(--e-2)}
.opcion{display:flex;gap:var(--e-3);align-items:flex-start;width:100%;min-height:48px;text-align:left;cursor:pointer;
  background:var(--papel);border:var(--linea-control);border-radius:var(--r-control);padding:var(--e-3) var(--e-4) var(--e-3) var(--e-3);
  font-size:var(--t-cuerpo);font-weight:var(--w-texto);color:var(--tinta);line-height:1.4;
  transition:background-color var(--d-rapido) var(--c-salida),border-color var(--d-rapido) var(--c-salida)}
@media (hover:hover){.opcion:hover{background:var(--superficie-2)}}
.opcion .num{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;margin-top:-1px;
  border:var(--linea);border-radius:var(--r-control);font-size:var(--t-meta);font-weight:var(--w-enfasis);color:var(--tinta-2);
  font-variant-numeric:tabular-nums;line-height:1}
.opcion-cuerpo{display:grid;gap:2px;min-width:0;flex:1}
/* recomendada: sin fondo; la palabra en --nota con la rayita fina de Tinta, y media línea con el porqué */
.opcion .recomendada{justify-self:start;font-size:var(--t-meta);font-weight:var(--w-enfasis);color:var(--nota);
  text-decoration:underline;text-decoration-color:var(--nota);text-decoration-thickness:1px;text-underline-offset:4px}
.opcion .razon{font-size:var(--t-meta);border-left:0;padding-left:0}
.opcion-libre .opcion-texto{color:var(--tinta-2)}
/* la última fila, vuelta campo: el borde de la fila es el límite; el anillo sale solo con el cursor en el campo (no se suma
   al del botón «Enviar»); una línea fina bajo el texto dice dónde se escribe */
.opcion-campo{cursor:default}
@media (hover:hover){.opcion-campo:hover{background:var(--papel)}}
.opcion-campo:has(textarea:focus-visible){outline:var(--anillo);outline-offset:var(--anillo-sep)}
.opcion-campo textarea{border:0;border-bottom:var(--linea-control);padding:0 0 var(--e-2);min-height:72px;background:transparent;
  font-size:var(--t-cuerpo);border-radius:0;resize:none}
.confirmar-libre{display:grid;gap:var(--e-2);margin-top:var(--e-2)}
.confirmar-libre p{font-weight:var(--w-enfasis)}
.opcion-campo textarea:focus-visible{outline:none}
.opcion-campo .fila{margin-top:var(--e-2)}
.ayuda-campo{font-size:var(--t-meta);color:var(--tinta-2)}
.opcion-silenciosa{background:transparent;border-color:transparent;color:var(--tinta-2);min-height:44px;padding-left:calc(var(--e-3) + 26px + var(--e-3))}
/* mientras Heyconi piensa: la opción pulsada queda marcada y el resto de la tarjeta, apagado */
.opcion.elegida,.btn.elegida{background:var(--nota-suave);border-color:var(--nota);color:var(--tinta);opacity:1}
.opcion.elegida .num{border-color:var(--nota);color:var(--nota)}
/* solo se apaga lo deshabilitado: la pregunta, su porqué (que se sigue pudiendo abrir) y lo elegido quedan a contraste completo */
.tarjeta.pensando :disabled:not(.elegida),.propuesta.pensando :disabled:not(.elegida),
.mensaje-libre.pensando :disabled:not(.elegida),.bienvenida.pensando :disabled:not(.elegida){opacity:.6}
/* El aviso de espera va junto a lo que se acaba de responder; la pastilla fija aparece solo si eso queda fuera de pantalla. */
.pensando-inline{margin:var(--e-3) 0 var(--e-1);color:var(--tinta-2);font-variant-numeric:tabular-nums;font-size:var(--t-meta)}
.pensando-flotante{position:fixed;left:50%;bottom:var(--e-5);transform:translateX(-50%);z-index:40;max-width:min(520px,calc(100vw - 32px));
  background:var(--papel);color:var(--tinta);border:var(--linea);border-radius:var(--r-pastilla);padding:var(--e-2) var(--e-4);
  font-size:var(--t-meta);font-variant-numeric:tabular-nums;text-align:center;box-shadow:var(--elev-flota)}
.pensando-flotante.oculto{display:none}
.tarjeta.pensando .opcion:not(.elegida),.propuesta.pensando .btn:not(.elegida){cursor:default}
.ya-se{padding-top:var(--e-1);margin-bottom:var(--e-4);display:grid;gap:var(--e-3)}
.ya-se>details>summary{color:var(--tinta-2);font-weight:var(--w-texto);font-size:var(--t-meta)}
.ya-se details[open]>*:not(summary){margin-top:var(--e-2)}
.entradilla{max-width:var(--ancho-lectura);text-wrap:pretty;color:var(--tinta-2)}
.mensaje-libre{display:grid;gap:var(--e-2);margin-top:var(--e-2)}
.mensaje-libre .rotulo{font-size:var(--t-cuerpo);color:var(--tinta)}

/* ---- propuesta ---- */
.propuesta{background:var(--papel);border:var(--linea);border-radius:var(--r-panel);padding:var(--e-6);display:grid;gap:var(--e-5);margin-bottom:var(--e-5)}
.propuesta .bloque{display:grid;gap:var(--e-1);align-content:start}
.propuesta .bloque p{font-size:var(--t-cuerpo);line-height:var(--lh-cuerpo)}
/* el filete de la sinopsis de Tinta, junto a «Cómo lo enfocamos» */
.propuesta .bloque p.sinopsis{border-left:1.2pt solid var(--nota);padding-left:var(--e-3)}
.propuesta .nota,.propuesta .cambio{background:var(--superficie)}
.radios{display:grid;gap:var(--e-2)}
.radio{display:flex;gap:var(--e-3);align-items:center;min-height:48px;padding:var(--e-2) var(--e-4);border:var(--linea-control);border-radius:var(--r-control);
  cursor:pointer;background:var(--papel);transition:background-color var(--d-rapido) var(--c-salida),border-color var(--d-rapido) var(--c-salida)}
@media (hover:hover){.radio:hover{background:var(--superficie-2)}}
.radio input{width:18px;height:18px;accent-color:var(--tinta);margin:0}
.radio.marcado{border-color:var(--nota);background:var(--nota-suave)}
.radio .etiqueta{color:var(--nota);border-color:transparent;font-weight:var(--w-enfasis);padding:0;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.duracion{display:flex;gap:var(--e-4);flex-wrap:wrap;align-items:center}
.trabajar-con{display:inline-flex;gap:var(--e-2);align-items:center;white-space:nowrap}
.duracion .grande{font-size:var(--t-titulo);font-weight:var(--w-titulo);font-variant-numeric:tabular-nums}
.cambios{display:grid;gap:var(--e-2)}
.cambio{background:var(--superficie-2);border-radius:var(--r-control);padding:var(--e-3) var(--e-4);display:grid;gap:2px}
.cambio .razon{margin-top:var(--e-1)}

/* ---- generando ---- */
.etapas{display:grid;gap:var(--e-1);margin:var(--e-5) 0}
.etapa{display:flex;gap:var(--e-3);align-items:center;padding:var(--e-2) 0;color:var(--tinta-2)}
.etapa .estado{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--borde-control);display:inline-block;flex:none}
.etapa.en_curso{color:var(--tinta)}
.etapa.en_curso .estado{border-color:var(--tinta);border-top-color:transparent;animation:girar var(--d-giro) linear infinite}
.etapa.ok{color:var(--tinta)}
.etapa.ok .estado{background:var(--tinta);border-color:var(--tinta)}
.etapa.fallo .estado{background:var(--alerta);border-color:var(--alerta)}
.etapa.ok,.etapa.fallo{font-weight:var(--w-enfasis)}
@keyframes girar{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.etapa.en_curso .estado{animation:none;border-top-color:var(--tinta)}}

/* ---- guion ---- */
.guion-cabecera{padding-block:0 var(--e-4)}
.guion-cabecera.mas-version{padding-block:var(--e-4) 0}
.guion-cabecera .chips{margin-bottom:var(--e-3)}
.guion-cabecera h2.titulo-guion{font-size:var(--t-titulo);margin-bottom:var(--e-3)}
.guion-cabecera .acciones{margin-top:0}
.guion-cabecera .enfoque{font-size:var(--t-campo);color:var(--tinta-2);max-width:60ch}
.guion-cabecera details{margin-top:var(--e-3)}
.plano{border-top:var(--linea);padding-block:var(--e-5);display:grid;grid-template-columns:150px minmax(0,1fr);gap:var(--e-4) var(--e-5)}
.plano:last-of-type{border-bottom:var(--linea)}
@media (max-width:640px){.plano{grid-template-columns:minmax(0,1fr)}}
.tiempo{display:grid;gap:2px;align-content:start}
.tiempo b{font-size:var(--t-titulo);font-weight:var(--w-titulo);letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.tiempo span{font-size:var(--t-meta);color:var(--tinta-2)}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--e-5)}
@media (max-width:720px){.cols{grid-template-columns:1fr}}
.col .detalle{font-size:var(--t-meta);color:var(--tinta-2);margin-top:var(--e-1)}
.rat{margin-top:var(--e-5);background:var(--papel);border:var(--linea);border-radius:var(--r-panel);padding:var(--e-5);display:grid;gap:var(--e-2)}
.rat p{line-height:var(--lh-cuerpo);max-width:60ch}
.rat p .razon{border-left:0;padding-left:0}
/* en celular, una palabra larga sin cortes (un enlace, una clave) no ensancha la columna ni desplaza la página a los lados */
.rat>*{min-width:0}
.rat p,.rat li,.rat dd{overflow-wrap:anywhere}
.comprobaciones{margin-top:var(--e-5);display:grid;gap:var(--e-3)}
.resumen-revision{padding:var(--e-2) var(--e-3);border-radius:var(--r-control);background:var(--superficie-2)}
/* pendiente: en la tinta de Tinta para lo pendiente, sin fondo (texto --pend nunca sobre --superficie-2) */
.resumen-revision.pendiente{background:transparent;border:1px solid var(--pend);color:var(--pend)}
.resumen-revision.pendiente b{color:var(--pend)}
.bloque-comprobaciones{display:grid;gap:var(--e-1)}
.bloque-comprobaciones h3{font-size:var(--t-cuerpo);margin-bottom:2px}
.comprobaciones .nota{margin-bottom:0}
.comprobaciones .nota h3{font-size:var(--t-cuerpo);margin-bottom:var(--e-1)}
.revision-editorial{background:var(--superficie-2);border-radius:var(--r-panel);padding:var(--e-3) var(--e-4)}
.revision-editorial summary{white-space:normal}
.revision-editorial .definiciones{margin-top:var(--e-3)}
.comprobacion{display:flex;gap:var(--e-2);align-items:baseline}
.comprobacion .marca{font-weight:var(--w-titulo);flex:none;width:22px}
.comprobacion.ok .marca{color:var(--tinta)}
.comprobacion.no .marca{color:var(--alerta)}
.pie{margin-top:var(--e-6);color:var(--tinta-2);font-size:var(--t-meta)}

/* ---- listas ---- */
.lista-encargos{display:grid;gap:var(--e-2);margin-top:var(--e-4)}
.encargo-fila{text-align:left;width:100%;background:var(--papel);border:var(--linea);border-radius:var(--r-panel);padding:var(--e-3) var(--e-4);
  cursor:pointer;display:grid;gap:var(--e-1);transition:border-color var(--d-rapido) var(--c-salida)}
@media (hover:hover){.encargo-fila:hover{border-color:var(--borde-control)}}
.encargo-fila b{font-size:var(--t-cuerpo)}
.encargo-fila .fila{color:var(--tinta-2);font-size:var(--t-meta);font-variant-numeric:tabular-nums}
.encargo-fila .detalle{display:block}

/* ---- bóveda ---- */
.boveda-seccion{border-top:var(--linea);padding-block:var(--e-4) var(--e-5)}
.boveda-seccion h2{font-size:var(--t-lead);margin-bottom:var(--e-2)}
.boveda-seccion .definiciones{grid-template-columns:minmax(120px,220px) minmax(0,1fr)}
/* una lista dentro de otra (Plataforma: cuenta, seguidores, línea base) no ensancha la página */
.boveda-seccion .definiciones dd{min-width:0;overflow-wrap:anywhere}
.boveda-seccion dd .boveda-uso{font-size:var(--t-meta);margin-top:2px}
.boveda-seccion .definiciones.anidado{grid-template-columns:minmax(0,auto) minmax(0,1fr)}
@media (max-width:640px){.boveda-seccion .definiciones{grid-template-columns:1fr}.boveda-seccion dt{margin-top:var(--e-2)}}
.anidado{border-left:var(--linea);padding-left:var(--e-3);margin-top:var(--e-1)}

/* comprobación que el código no puede asegurar: ni verde ni roja */
.comprobacion.pendiente .marca{color:var(--tinta-2)}
.comprobacion.pendiente{color:var(--tinta-2)}
/* la lectura humana (D-33): la revisa la persona; no es un pendiente que dejó el código */
.comprobacion.tuya .marca{color:var(--tinta)}
/* comprobación que no aplica en esta pieza (acuerdo con null): ni verde, ni roja, ni pendiente */
.comprobacion.no-aplica .marca{color:var(--tinta-2)}
.comprobacion.no-aplica{color:var(--tinta-2)}

/* ---- guion para grabar (Paso 10.4) ----
   El documento es el mismo del PDF, en un iframe sin bordes; su alto lo pone app.js cuando el documento termina de maquetarse.
   Con 820 px de ancho o más muestra páginas (sus hojas se apoyan en la superficie de la app, en los dos temas); por debajo,
   texto corrido en una hoja clara de borde a borde. color-scheme:light en el iframe: el guion es siempre hoja clara y el
   navegador no pinta un fondo opaco detrás cuando la app está en oscuro. */
.marco-guion{display:block;width:100%;border:0;min-height:320px;height:70vh;margin-top:var(--e-2);background:transparent;color-scheme:light;
  transition:opacity var(--d-entra) var(--c-salida)}
.marco-guion.cargando{opacity:0}
@media (max-width:820px){.marco-guion{width:calc(100% + 2 * var(--e-4));margin-inline:calc(-1 * var(--e-4))}}
.exportes{display:flex;gap:var(--e-2);flex-wrap:wrap;align-items:center;margin-top:var(--e-3)}
.exportes .enlace-md{color:var(--tinta-2);font-size:var(--t-meta)}
.detalle-revision{margin-top:var(--e-5);border-top:var(--linea);padding-top:var(--e-4)}
.detalle-revision>summary{font-size:var(--t-cuerpo);white-space:normal}
.detalle-revision[open]>summary{margin-bottom:var(--e-4)}
#panel-resultado>summary{white-space:normal}
#panel-resultado[open]>summary{margin-bottom:var(--e-3)}

/* ---- cambio de pantalla (View Transition; movimiento.js decide cuándo). La barra lateral no se mueve. ---- */
#principal{view-transition-name:principal}
::view-transition{pointer-events:none}
::view-transition-old(root),::view-transition-new(root){animation:none}
::view-transition-group(principal){animation:none}
/* la barra fija del celular queda encima del contenido que cambia */
::view-transition-group(barra-movil){animation:none;z-index:1}
::view-transition-old(barra-movil),::view-transition-new(barra-movil){animation:none}
::view-transition-old(principal){animation:var(--d-rapido) var(--c-entrada) both vt-sale}
::view-transition-new(principal){animation:var(--d-entra) var(--c-salida) both vt-entra}
@keyframes vt-sale{to{opacity:0}}
@keyframes vt-entra{from{opacity:0;transform:translateY(8px)}}

/* celular: paneles con menos margen interior (van después de sus reglas base) */
@media (max-width:640px){.propuesta{padding:var(--e-5) var(--e-4)}.rat{padding:var(--e-4)}}

/* objetivos táctiles de 44 px en celular (y en escritorio con zoom al 200 %): relleno vertical, sin cambio de dibujo */
@media (max-width:820px){
  details>summary{min-height:44px}
  .btn.enlace{min-height:44px}
  .exportes .enlace-md{display:inline-flex;align-items:center;min-height:44px}
  .nav-item{display:flex;align-items:center;min-height:44px}
  .barra-movil .logo{display:inline-flex;align-items:center;min-height:44px}
}
.casilla{min-height:44px}
.casilla input[type=checkbox]{width:18px;height:18px;margin:0;accent-color:var(--tinta)}
.casilla label{padding-block:var(--e-3);cursor:pointer}

/* propuesta breve del recorrido adaptativo (Paso 10.4c): «Así lo contaríamos» y tres decisiones con «Cambiar» */
.propuesta-breve .que-contamos{font-size:var(--t-titulo);font-weight:var(--w-enfasis);line-height:1.3;margin:0}
.propuesta-breve .decisiones{display:grid;gap:var(--e-3)}
.propuesta-breve .decision{border-top:var(--linea);padding-top:var(--e-3);display:grid;gap:var(--e-2)}
.propuesta-breve .decision-fila{display:flex;flex-wrap:wrap;gap:var(--e-2) var(--e-3);align-items:baseline}
.propuesta-breve .decision-fila .btn{margin-left:auto}
.propuesta-breve .decision-editor{display:grid;gap:var(--e-2)}
.propuesta-breve .decision-editor input[type=text]{flex:1;min-width:0}
.propuesta-breve .antes-de-aprobar{display:grid;gap:var(--e-3)}
.propuesta-breve .antes-de-aprobar h3{margin:0}

/* la espera con dirección creativa del recorrido adaptativo (Paso 10.4c, sesión 3). Las dos líneas de arriba no se parten
   (así el reloj no mueve lo de abajo); el hueco de la dirección tiene alto reservado desde el inicio y nunca baja; el aviso
   «Guion listo» va fijo arriba, fuera del flujo, para no mover lo que se está leyendo */
.espera{overflow-anchor:auto}
.espera-cabecera{display:grid;gap:2px;margin:var(--e-2) 0 var(--e-4)}
.espera-linea{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:1.5em;font-variant-numeric:tabular-nums}
/* en el celular el estado («Está tardando más de lo normal», «El proceso sigue abierto») no se corta: la línea salta y
   reserva dos renglones desde el principio, así el reloj no mueve lo de abajo */
@media (max-width:640px){.espera-linea{white-space:normal;overflow:visible;text-overflow:clip;min-height:3em}}
.espera-usando,.espera-direccion{background:var(--papel);border:var(--linea);border-radius:var(--r-panel);padding:var(--e-4) var(--e-5);
  margin-bottom:var(--e-4)}
.espera-usando h3,.espera-direccion h3{font-size:var(--t-cuerpo);margin:0 0 var(--e-2)}
.espera-usando .rotulo{margin-top:var(--e-2)}
.espera-direccion{min-height:15rem}
.espera-direccion .fila{margin-bottom:var(--e-1)}
.espera-direccion .fila h3{margin:0}
.espera-direccion .definiciones{grid-template-columns:minmax(0,11rem) minmax(0,1fr)}
.espera-direccion .definiciones dd{overflow-wrap:anywhere}
.espera-direccion .pie-direccion{margin-top:var(--e-3)}
.espera-direccion.cortada .definiciones{color:var(--tinta-2)}
.pend-texto{color:var(--pend);font-weight:var(--w-enfasis)}
.guion-listo{position:fixed;z-index:40;bottom:calc(var(--e-4) + env(safe-area-inset-bottom, 0px));left:50%;transform:translateX(-50%);display:flex;gap:var(--e-3);align-items:center;
  flex-wrap:wrap;justify-content:center;max-width:calc(100vw - 2 * var(--e-4));background:var(--papel);border:var(--linea);
  border-radius:var(--r-panel);padding:var(--e-2) var(--e-3) var(--e-2) var(--e-4);box-shadow:var(--elev-flota)}
@media (max-width:820px){
  .guion-listo{width:calc(100vw - 2 * var(--e-4))}
  .espera-usando,.espera-direccion{padding:var(--e-4)}
  .espera-direccion{min-height:20rem}
  .espera-direccion .definiciones{grid-template-columns:minmax(0,1fr)}
  .espera-direccion .definiciones dt{margin-top:var(--e-2)}
}
.nota-borrador{margin-bottom:var(--e-2)}
.nota-borrador .suave-texto{margin:0 0 var(--e-1)}
/* la línea de estado de «Lo que ya sé de esta pieza» (reloj de la lectura o de la propuesta) ocupa siempre una línea: que
   cambie su texto no mueve la tarjeta de abajo */
#pieza-leyendo{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sin-cortar{white-space:nowrap}      /* S10 (10.4d): una fecha 27-09-2026 no se parte por sus guiones */