/* ── Kontrol · maqueta v2 ────────────────────────────────────────────────
   Dirección estética: EDITORIAL PRECISO. Nada de esquinas redondeadas
   —delatan trabajo de IA (DrMoon, SES-CMR-510)—. La jerarquía la hacen la
   tipografía, el espacio en blanco y la línea de 1px; no las cajas.
   La marca entra como DATO (objeto MARCAS abajo): ni un color de cliente
   escrito aquí. PRH-7 punto 2.
   ──────────────────────────────────────────────────────────────────────── */
:root{
  --fondo: oklch(0.972 0.008 85);
  --tinta: oklch(0.22 0.02 60);
  --acento: oklch(0.52 0.15 40);
  --acento-texto: oklch(0.98 0.01 85);
  --ok: oklch(0.44 0.11 145);
  --aviso-txt: oklch(0.47 0.11 70);
  --alto: oklch(0.49 0.18 25);

  --papel: color-mix(in oklch, var(--fondo) 92%, white);
  --linea: color-mix(in oklch, var(--tinta) 18%, var(--fondo));
  --linea-fina: color-mix(in oklch, var(--tinta) 11%, var(--fondo));
  --suave: color-mix(in oklch, var(--tinta) 72%, var(--fondo));
  --tenue: color-mix(in oklch, var(--acento) 9%, var(--fondo));

  --s1:.35rem; --s2:.7rem; --s3:1.15rem; --s4:2rem; --s5:3.4rem;
  --display: "Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --texto: ui-sans-serif,"Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;
  --cifra: "Iowan Old Style","Palatino Linotype",Georgia,serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --fondo: oklch(0.185 0.014 60);
    --tinta: oklch(0.94 0.012 85);
    --papel: color-mix(in oklch, var(--fondo) 92%, white);
    --linea: color-mix(in oklch, var(--tinta) 24%, var(--fondo));
    --linea-fina: color-mix(in oklch, var(--tinta) 14%, var(--fondo));
    --suave: color-mix(in oklch, var(--tinta) 70%, var(--fondo));
    --tenue: color-mix(in oklch, var(--acento) 14%, var(--fondo));
    --acento: oklch(0.70 0.13 40);
    --acento-texto: oklch(0.17 0.02 60);
    --ok: oklch(0.74 0.13 145);
    --aviso-txt: oklch(0.78 0.11 75);
    --alto: oklch(0.72 0.16 25);
  }
}
*{box-sizing:border-box; border-radius:0}
html,body{margin:0; padding:0}
body{
  background:var(--fondo); color:var(--tinta);
  font-family:var(--texto); font-size:16px; line-height:1.55;
  -webkit-text-size-adjust:100%;
}
h1,h2,h3{font-family:var(--display); font-weight:600; line-height:1.1; margin:0}
h1{font-size:clamp(1.5rem,4.6vw,2rem); letter-spacing:-.01em}
h2{font-size:clamp(1.5rem,4.4vw,2.1rem); letter-spacing:-.015em}
h3{font-family:var(--texto); font-size:.72rem; font-weight:700;
   text-transform:uppercase; letter-spacing:.14em; color:var(--suave)}
p{margin:0 0 var(--s2); max-width:64ch}
a{color:var(--acento); text-underline-offset:3px}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--acento); outline-offset:3px;
}
.envoltura{max-width:80rem; margin-inline:auto; padding-inline:clamp(1.15rem,4vw,3rem)}

/* ── Cintas superiores ────────────────────────────────────────── */
.cinta{
  background:var(--tinta); color:var(--fondo);
  font-size:.7rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  padding:.55rem var(--s3); text-align:center;
}
.banda-soporte{
  display:none; background:var(--alto); color:oklch(0.99 0.01 25);
  padding:var(--s2) var(--s3); font-size:.85rem; font-weight:600;
  border-bottom:3px solid oklch(0.3 0.12 25);
}
body[data-soporte="si"] .banda-soporte{display:block}
body[data-soporte="si"] .escribible{opacity:.4; pointer-events:none}
.banda-soporte span{display:block; font-weight:400; opacity:.95; font-size:.8rem; letter-spacing:.01em}

/* ── Cabecera ─────────────────────────────────────────────────── */
header.principal{border-bottom:1px solid var(--tinta)}
.fila-marca{display:flex; align-items:flex-end; gap:var(--s3);
  padding-block:var(--s4) var(--s3); flex-wrap:wrap}
.sello{
  width:52px; height:52px; flex:0 0 52px;
  background:var(--acento); color:var(--acento-texto);
  display:grid; place-items:center; font-family:var(--display);
  font-size:1.25rem; font-weight:700; letter-spacing:.01em;
}
.marca-txt{flex:1 1 14rem; min-width:0}
.marca-txt .sub{font-size:.72rem; color:var(--suave); display:block;
  text-transform:uppercase; letter-spacing:.14em; margin-top:.3rem}
.herramientas{display:flex; gap:var(--s3); align-items:flex-end; flex-wrap:wrap}
label.mini{font-size:.65rem; color:var(--suave); display:block; margin-bottom:.25rem;
  text-transform:uppercase; letter-spacing:.12em}
select,input,textarea{
  font:inherit; font-size:.92rem; color:var(--tinta); background:transparent;
  border:0; border-bottom:1px solid var(--linea); padding:.5rem .1rem; min-height:44px;
}
select:hover,input:hover,textarea:hover{border-bottom-color:var(--acento)}
textarea{
  min-height:5rem; width:100%; resize:vertical; line-height:1.55;
  field-sizing:content; border:1px solid var(--linea); padding:var(--s2) var(--s3);
  background:var(--papel);
}
@supports not (field-sizing:content){ textarea{min-height:9.5rem} }
input[type=text],input:not([type]){width:100%}

/* ── Navegación ───────────────────────────────────────────────── */
nav.modulos{border-bottom:1px solid var(--linea); position:sticky; top:0; z-index:5;
  background:var(--fondo)}
nav.modulos ul{display:flex; list-style:none; margin:0; padding:0;
  overflow-x:auto; scrollbar-width:thin}
nav.modulos button{
  appearance:none; background:none; border:0; border-bottom:2px solid transparent;
  color:var(--suave); font:inherit; font-size:.72rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.12em;
  padding:1.1rem var(--s3) .95rem; min-height:48px; white-space:nowrap; cursor:pointer;
  display:flex; align-items:baseline; gap:.5rem;
}
nav.modulos button .idx{font-family:var(--cifra); font-size:.8rem; letter-spacing:0;
  color:var(--linea); font-weight:400}
nav.modulos button:hover{color:var(--tinta)}
nav.modulos button[aria-current="page"]{color:var(--tinta); border-bottom-color:var(--acento)}
nav.modulos button[aria-current="page"] .idx{color:var(--acento)}

/* ── Contenido ────────────────────────────────────────────────── */
main{padding-block:var(--s5) var(--s5)}
section[hidden]{display:none}
.encabezado-mod{margin-bottom:var(--s4); padding-bottom:var(--s3);
  border-bottom:1px solid var(--linea); display:grid; gap:var(--s2)}
.encabezado-mod .folio{font-family:var(--cifra); font-size:.85rem; color:var(--acento);
  letter-spacing:.04em}
.encabezado-mod p{color:var(--suave); margin:0}

.rejilla{display:grid; gap:var(--s4)}
@media (min-width:56rem){ .rejilla.dos{grid-template-columns:1.5fr 1fr; align-items:start; gap:var(--s5)} }

/* bloque: sin caja, con una regla arriba. La jerarquía es la línea, no la sombra */
.bloque{border-top:2px solid var(--tinta); padding-top:var(--s3)}
.bloque > h3{margin-bottom:var(--s3)}
.bloque + .bloque{margin-top:var(--s4)}
.bloque.tenue{border-top-color:var(--linea)}

/* ── Estado del asistente: la banda que responde sin un clic ──── */
.estado{
  border-top:2px solid var(--tinta); border-bottom:1px solid var(--linea);
  padding-block:var(--s3) var(--s4); margin-bottom:var(--s5);
  display:grid; gap:var(--s4);
}
/* en móvil la frase entera se comprimía a dos líneas por competir con la hora:
   el estado va en su renglón y el detalle debajo */
.estado .vive{display:grid; grid-template-columns:auto 1fr; align-items:baseline;
  column-gap:.6rem; row-gap:.15rem}
.estado .vive strong{font-family:var(--display); font-size:1.35rem; font-weight:600}
.estado .vive span{color:var(--suave); font-size:.9rem; grid-column:2}
@media (min-width:40rem){
  .estado .vive{display:flex; align-items:baseline; gap:.6rem}
  .estado .vive span{grid-column:auto}
}
.cifras{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3)}
@media (min-width:56rem){
  .estado{grid-template-columns:1fr auto auto; align-items:end}
  .cifras{grid-template-columns:repeat(3,minmax(7rem,auto)); gap:var(--s5)}
}
.cifra{display:block}
.cifra b{font-family:var(--cifra); font-size:clamp(2.4rem,7vw,3.4rem); font-weight:400;
  line-height:.9; display:block; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.cifra small{display:block; font-size:.68rem; color:var(--suave); margin-top:.5rem;
  text-transform:uppercase; letter-spacing:.11em; line-height:1.3}
.pulso{width:.5rem; height:.5rem; background:var(--ok); flex:0 0 auto;
  align-self:center; box-shadow:0 0 0 0 color-mix(in oklch, var(--ok) 55%, transparent);
  animation:late 2.6s ease-out infinite}
@keyframes late{70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){ .pulso{animation:none} }

/* ── Etiquetas de estado: rectas, en versalitas, con barra de color ── */
.marca-estado{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em;
}
.marca-estado::before{content:""; width:.55rem; height:.55rem; background:currentColor; flex:0 0 auto}
.m-ok{color:var(--ok)} .m-esp{color:var(--aviso-txt)} .m-alto{color:var(--alto)} .m-neu{color:var(--suave)}

/* ── Botones: rectángulos con desplazamiento sólido, sin sombra difusa ── */
.boton{
  appearance:none; display:inline-block; text-decoration:none; text-align:center;
  font:inherit; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em;
  cursor:pointer; min-height:44px; padding:.85rem var(--s3);
  background:var(--acento); color:var(--acento-texto); border:1px solid var(--acento);
  transition:transform .16s cubic-bezier(.2,.8,.3,1), box-shadow .16s cubic-bezier(.2,.8,.3,1);
}
.boton:hover{transform:translate(-2px,-2px); box-shadow:4px 4px 0 0 var(--tinta)}
.boton:active{transform:translate(0,0); box-shadow:0 0 0 0 var(--tinta)}
.boton.calmo{background:transparent; color:var(--tinta); border-color:var(--tinta)}
.boton.calmo:hover{box-shadow:4px 4px 0 0 var(--acento)}
.boton[disabled]{opacity:.45; cursor:not-allowed; transform:none; box-shadow:none}

/* ── Conversaciones ───────────────────────────────────────────── */
.charlas{list-style:none; margin:0; padding:0}
.charlas li{display:grid; grid-template-columns:1fr auto; gap:.2rem var(--s3);
  padding:var(--s3) 0; border-bottom:1px solid var(--linea-fina)}
.charlas li:first-child{border-top:1px solid var(--linea-fina)}
.charlas .quien{font-weight:600; font-size:.88rem; font-variant-numeric:tabular-nums}
.charlas .cuando{font-family:var(--cifra); font-size:.85rem; color:var(--suave);
  white-space:nowrap; text-align:right}
.charlas .dice{grid-column:1/-1; color:var(--suave); font-size:1rem; margin:.15rem 0 .5rem;
  font-family:var(--display); font-style:italic}
.charlas .marca-estado{grid-column:1/-1}

/* ── Campos editables ─────────────────────────────────────────── */
.campo{border-bottom:1px solid var(--linea-fina); padding-block:var(--s4)}
.campo:first-of-type{padding-top:var(--s3)}
.campo:last-child{border-bottom:0}
.campo .que{font-family:var(--display); font-size:1.2rem; font-weight:600; margin-bottom:.2rem}
.campo .porque{font-size:.88rem; color:var(--suave); margin-bottom:var(--s3); max-width:60ch}
.historial{font-size:.75rem; color:var(--suave); margin-top:var(--s2);
  text-transform:uppercase; letter-spacing:.08em}
.historial b{font-weight:700; color:var(--tinta)}

/* ── Pasos ────────────────────────────────────────────────────── */
ol.pasos{list-style:none; counter-reset:p; margin:0; padding:0}
ol.pasos > li{counter-increment:p; display:grid; grid-template-columns:3.2rem 1fr; gap:var(--s3);
  padding-block:var(--s4); border-bottom:1px solid var(--linea-fina)}
ol.pasos > li:first-child{border-top:1px solid var(--linea)}
ol.pasos > li::before{
  content:"0" counter(p); font-family:var(--cifra); font-weight:400; font-size:1.6rem;
  color:var(--linea); line-height:1; letter-spacing:-.02em;
}
ol.pasos > li[data-hecho="si"]::before{content:"✓"; color:var(--ok); font-size:1.5rem}
ol.pasos .titulo{font-family:var(--display); font-size:1.2rem; font-weight:600}
ol.pasos .detalle{font-size:.92rem; color:var(--suave); margin:.35rem 0 var(--s3); max-width:62ch}
ol.pasos .acciones{display:flex; gap:var(--s3); align-items:center; flex-wrap:wrap}
.tiempo{font-size:.72rem; color:var(--suave); text-transform:uppercase; letter-spacing:.1em}
.ojo{background:var(--tenue); border-left:3px solid var(--acento);
  padding:var(--s3); font-size:.9rem; margin:var(--s3) 0; max-width:64ch}

/* ── Tablas ───────────────────────────────────────────────────── */
.marco-tabla{overflow-x:auto; border-top:2px solid var(--tinta)}
table{border-collapse:collapse; width:100%; min-width:36rem; font-size:.92rem}
th,td{text-align:left; padding:var(--s3) var(--s3) var(--s3) 0; border-bottom:1px solid var(--linea-fina)}
th{font-size:.65rem; text-transform:uppercase; letter-spacing:.13em; color:var(--suave); font-weight:700;
  padding-top:var(--s2); padding-bottom:var(--s2)}
td.num{font-family:var(--cifra); font-variant-numeric:tabular-nums; text-align:right; padding-right:0}
th.num{text-align:right; padding-right:0}

/* ── Medidas ──────────────────────────────────────────────────── */
.medidas{display:grid; gap:0; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  border-top:2px solid var(--tinta)}
.medida{padding:var(--s3) var(--s3) var(--s4) 0; border-bottom:1px solid var(--linea-fina)}
@media (min-width:56rem){
  .medida + .medida{border-left:1px solid var(--linea-fina); padding-left:var(--s3)}
}
.medida .n{font-family:var(--cifra); font-size:2.6rem; font-weight:400; line-height:1;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.medida .q{font-size:.68rem; color:var(--suave); text-transform:uppercase;
  letter-spacing:.11em; margin-top:.55rem}
.medida .fuente{font-size:.75rem; color:var(--suave); margin-top:var(--s3);
  padding-top:var(--s2); border-top:1px solid var(--linea-fina); max-width:26ch}
.sin-dato .n{color:var(--suave); font-size:1.15rem; font-family:var(--texto); font-weight:500;
  font-style:italic; line-height:2.25}

.gente{list-style:none; margin:0; padding:0}
.gente li{display:flex; justify-content:space-between; align-items:flex-start; gap:var(--s3);
  padding-block:var(--s3); border-bottom:1px solid var(--linea-fina)}
.gente .rol{font-size:.82rem; color:var(--suave); display:block}

footer.pie{border-top:1px solid var(--linea); margin-top:var(--s5); padding-block:var(--s4) var(--s5);
  font-size:.78rem; color:var(--suave); max-width:78ch}