/* ── Kontrol · cara v3 ───────────────────────────────────────────────────────
   Dirección estética: PANEL KAMIOS. Superficie blanca, riel negro, forma
   moderna con esquinas redondeadas y una jerarquía que se entiende de un
   vistazo (FBK-DIS-001 §1: la mirada antes que la lectura).

   Paleta: MARCA-KAM-0001 §2.4 — dos primarios y tres grises, NADA más, ni en
   bordes ni en líneas divisorias (LEC-UXD-014). Los tres colores de semáforo
   son ampliación declarada para producto: un panel operativo necesita decir
   "esto va bien / esto espera / esto urge" sin leer. Van medidos contra blanco.

   El color de marca del cliente entra como DATO y toca UN token: --acento.
   El cliente no puede repintar el fondo ni la tinta, porque de ahí sale el
   contraste que hace legible el panel (PRH-7 punto 2 + GATE-02).
   ──────────────────────────────────────────────────────────────────────────── */

@font-face{
  font-family:"Hanken Grotesk"; font-style:normal; font-weight:400 700;
  font-display:swap; src:url("tipos/hanken-grotesk-latin.woff2") format("woff2");
}
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:400 700;
  font-display:swap; src:url("tipos/inter-latin.woff2") format("woff2");
}

:root{
  /* Primarios y grises — los únicos valores neutros que existen */
  --blanco:#FFFFFF;
  --negro:#000000;
  --gris-oscuro:#5A5A5A;
  --gris-medio:#909090;
  --gris-claro:#C6C6C6;

  /* Semáforo de producto (medido sobre blanco: 6.54 · 6.99 · 7.31 — AA) */
  --ok:#166B3F;
  --espera:#7A5100;
  --alto:#A81F14;

  /* Acento del inquilino. Por omisión es el negro KAMIOS. */
  --acento:var(--negro);
  --acento-texto:var(--blanco);

  /* Tintes: SIEMPRE por mezcla con blanco de un valor declarado, nunca
     eligiendo un tono nuevo (misma regla que la Ley de Texturas §2.8 R2) */
  --t-acento:color-mix(in srgb, var(--acento) 7%, var(--blanco));
  --t-ok:color-mix(in srgb, var(--ok) 8%, var(--blanco));
  --t-espera:color-mix(in srgb, var(--espera) 9%, var(--blanco));
  --t-alto:color-mix(in srgb, var(--alto) 8%, var(--blanco));
  --linea:color-mix(in srgb, var(--gris-claro) 62%, var(--blanco));

  /* Forma: el radio ya no es cero. Tres pasos y una píldora, nada más. */
  --r-chico:10px;
  --r:16px;
  --r-grande:24px;
  --pildora:999px;

  --s1:.4rem; --s2:.75rem; --s3:1.15rem; --s4:1.9rem; --s5:3rem;
  --riel:76px;

  --titulo:"Hanken Grotesk",ui-sans-serif,"Segoe UI",system-ui,sans-serif;
  --texto:"Inter",ui-sans-serif,"Segoe UI",system-ui,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0; padding:0}
body{
  background:var(--blanco); color:var(--negro);
  font-family:var(--texto); font-size:16px; line-height:1.55;
  -webkit-text-size-adjust:100%;
}
h1,h2,h3{font-family:var(--titulo); line-height:1.12; margin:0; letter-spacing:-.02em}
h1{font-size:clamp(1.65rem,5.2vw,2.35rem); font-weight:700}
h2{font-size:clamp(1.15rem,3.4vw,1.4rem); font-weight:600; letter-spacing:-.015em}
h3{font-family:var(--texto); font-size:.7rem; font-weight:700;
   text-transform:uppercase; letter-spacing:.13em; color:var(--gris-oscuro); margin:0}
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(--negro); outline-offset:3px; border-radius:var(--r-chico);
}
.solo-lectores{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}

/* ── Estructura: riel + lienzo ─────────────────────────────────────────── */
/* El fondo negro vive en .app y el blanco en .lienzo: así la columna del riel
   llega hasta abajo aunque el contenido sea más alto que la pantalla. */
.app{min-height:100dvh; display:grid; grid-template-rows:auto 1fr; background:var(--negro)}
.lienzo{background:var(--blanco)}

.riel{
  background:var(--negro); color:var(--blanco);
  display:flex; align-items:center; gap:var(--s2);
  padding:var(--s2) var(--s3);
}
.riel .sello{
  width:40px; height:40px; flex:0 0 40px; border-radius:var(--r-chico);
  background:var(--blanco); color:var(--negro);
  display:grid; place-items:center;
  font-family:var(--titulo); font-weight:700; font-size:.95rem; letter-spacing:.01em;
}
.riel .rotulo{font-family:var(--titulo); font-weight:600; font-size:.95rem; letter-spacing:.02em}
.riel .rotulo small{display:block; font-family:var(--texto); font-weight:400;
  font-size:.68rem; text-transform:uppercase; letter-spacing:.13em; color:var(--gris-claro)}
.riel .empuja{margin-left:auto}

/* botones de icono del riel */
.icono{
  appearance:none; background:none; border:0; cursor:pointer;
  width:44px; height:44px; border-radius:var(--r-chico);
  display:grid; place-items:center; color:var(--gris-claro);
  transition:background .16s cubic-bezier(.2,.8,.3,1), color .16s cubic-bezier(.2,.8,.3,1);
}
.icono svg{width:22px; height:22px; fill:none; stroke:currentColor;
  stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round}
.icono:hover{color:var(--blanco); background:color-mix(in srgb, var(--blanco) 12%, transparent)}
.icono[aria-current="page"]{color:var(--negro); background:var(--blanco)}

/* barra de módulos: abajo en móvil, al costado en escritorio.
   En móvil va FIJA al pie y fuera del flujo del riel: si viaja dentro de la
   barra superior, cinco botones táctiles no caben en 390 px y desbordan la
   página entera —se mide mirando, no leyendo el CSS—. */
.navegador{
  position:fixed; bottom:0; left:0; right:0; z-index:6;
  background:var(--negro); border-top:1px solid color-mix(in srgb, var(--blanco) 16%, transparent);
}
.navegador ul{display:flex; justify-content:space-around; align-items:center;
  list-style:none; margin:0; padding:var(--s1) var(--s2) calc(var(--s1) + env(safe-area-inset-bottom))}
.navegador .nombre{
  display:block; font-size:.58rem; text-transform:uppercase; letter-spacing:.08em;
  margin-top:.15rem; color:inherit;
}
.navegador .icono{width:auto; min-width:56px; height:auto; padding:.45rem .3rem .35rem}

/* el pie de contenido no puede quedar debajo de la barra fija */
.lienzo{padding:var(--s4) clamp(1.1rem,4vw,2.6rem) 7rem; min-width:0}

@media (min-width:60rem){
  .app{grid-template-rows:none; grid-template-columns:var(--riel) 1fr; min-height:100dvh}
  .riel{
    flex-direction:column; align-items:center; gap:var(--s3);
    padding:var(--s3) 0; position:sticky; top:0; height:100dvh;
  }
  .riel .rotulo{display:none}
  .riel .empuja{margin-left:0; margin-top:auto}
  .navegador{position:static; background:none; border:0}
  .navegador ul{flex-direction:column; gap:var(--s1); padding:0}
  .navegador .nombre{display:none}
  .navegador .icono{width:44px; min-width:0; padding:0; height:44px}
  .lienzo{padding:var(--s5) clamp(1.6rem,3.4vw,3.4rem) var(--s5); max-width:88rem}
}

/* ── Barra superior del lienzo ─────────────────────────────────────────── */
.barra{display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--s3); flex-wrap:wrap; margin-bottom:var(--s4)}
.barra .dice{color:var(--gris-oscuro); font-size:.95rem; margin:.35rem 0 0; max-width:52ch}
.quien{
  display:inline-flex; align-items:center; gap:var(--s2);
  border:1px solid var(--linea); border-radius:var(--pildora);
  padding:.35rem .9rem .35rem .35rem; white-space:nowrap;
}
.quien .avatar{
  width:34px; height:34px; border-radius:var(--pildora); flex:0 0 34px;
  background:var(--acento); color:var(--acento-texto);
  display:grid; place-items:center; font-size:.75rem; font-weight:700;
  font-family:var(--titulo); letter-spacing:.02em;
}
.quien b{font-size:.88rem; font-weight:600; display:block; line-height:1.2}
.quien small{font-size:.7rem; color:var(--gris-oscuro); display:block}

/* ── Tarjetas ──────────────────────────────────────────────────────────── */
.tarjeta{
  background:var(--blanco); border:1px solid var(--linea); border-radius:var(--r);
  padding:var(--s3) var(--s3) var(--s4);
}
.tarjeta.ancla{
  border-radius:var(--r-grande); padding:clamp(var(--s3),4vw,var(--s4));
  background:var(--t-acento); border-color:color-mix(in srgb, var(--acento) 16%, var(--blanco));
}
.tarjeta.negra{
  background:var(--negro); color:var(--blanco); border-color:var(--negro);
  border-radius:var(--r-grande); padding:var(--s4);
}
.tarjeta.negra h2,.tarjeta.negra h3{color:var(--blanco)}
.tarjeta.negra p{color:var(--gris-claro)}
.tarjeta.ok{background:var(--t-ok); border-color:color-mix(in srgb, var(--ok) 18%, var(--blanco))}
.tarjeta.espera{background:var(--t-espera); border-color:color-mix(in srgb, var(--espera) 20%, var(--blanco))}
.tarjeta.alto{background:var(--t-alto); border-color:color-mix(in srgb, var(--alto) 18%, var(--blanco))}

.rejilla{display:grid; gap:var(--s3)}
/* las tres cifras del vistazo se leen juntas o no se comparan: en móvil se
   estrechan, no se parten en dos renglones */
.rejilla.tres{grid-template-columns:repeat(3,1fr); gap:var(--s2)}
@media (min-width:48rem){ .rejilla.tres{gap:var(--s3)} }
@media (min-width:64rem){
  .rejilla.dos{grid-template-columns:1.65fr 1fr; align-items:start}
}

/* ── Cifras: el ancla de la mirada ─────────────────────────────────────── */
.cifra{display:block}
.cifra b{
  font-family:var(--titulo); font-weight:700;
  font-size:clamp(2.4rem,8vw,3.6rem); line-height:.92; display:block;
  font-variant-numeric:tabular-nums; letter-spacing:-.035em;
}
.cifra small{display:block; font-size:.7rem; color:var(--gris-oscuro); margin-top:var(--s2);
  text-transform:uppercase; letter-spacing:.1em; line-height:1.35}
.tarjeta.negra .cifra small{color:var(--gris-claro)}

.vive{display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-bottom:var(--s3)}
.vive strong{font-family:var(--titulo); font-size:1.25rem; font-weight:600}
.vive span{color:var(--gris-oscuro); font-size:.92rem}
.pulso{
  width:.6rem; height:.6rem; border-radius:var(--pildora); background:var(--ok); flex:0 0 auto;
  box-shadow:0 0 0 0 color-mix(in srgb, 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 ───────────────────────────────────────────────── */
.marca-estado{
  display:inline-flex; align-items:center; gap:.4rem; border-radius:var(--pildora);
  font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em;
  padding:.3rem .7rem; border:1px solid currentColor;
}
.m-ok{color:var(--ok)} .m-esp{color:var(--espera)} .m-alto{color:var(--alto)} .m-neu{color:var(--gris-oscuro)}

/* ── Botones ───────────────────────────────────────────────────────────── */
.boton{
  appearance:none; display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  text-decoration:none; text-align:center; font:inherit; font-size:.88rem; font-weight:600;
  cursor:pointer; min-height:44px; padding:.7rem 1.35rem; border-radius:var(--pildora);
  background:var(--acento); color:var(--acento-texto); border:1px solid var(--acento);
  transition:opacity .16s cubic-bezier(.2,.8,.3,1), transform .16s cubic-bezier(.2,.8,.3,1);
}
.boton:hover{opacity:.86}
.boton:active{transform:translateY(1px)}
.boton.calmo{background:var(--blanco); color:var(--negro); border-color:var(--gris-claro)}
.boton.calmo:hover{border-color:var(--negro); opacity:1}
.boton.claro{background:var(--blanco); color:var(--negro); border-color:var(--blanco)}
.boton[disabled]{opacity:.45; cursor:not-allowed; transform:none}

/* ── Instrucciones (campos editables) ──────────────────────────────────── */
label.mini,.acceso label{display:block; font-size:.66rem; color:var(--gris-oscuro);
  text-transform:uppercase; letter-spacing:.12em; margin-bottom:.3rem}
input,textarea,select{
  font:inherit; font-size:.95rem; color:var(--negro); background:var(--blanco);
  border:1px solid var(--gris-claro); border-radius:var(--r-chico);
  padding:.7rem .85rem; min-height:44px; width:100%;
}
input:hover,textarea:hover,select:hover{border-color:var(--gris-medio)}
textarea{min-height:6rem; resize:vertical; line-height:1.55; field-sizing:content}
@supports not (field-sizing:content){ textarea{min-height:9rem} }

.campo{border-bottom:1px solid var(--linea); padding-block:var(--s3)}
.campo:last-child{border-bottom:0}
.campo .que{font-family:var(--titulo); font-size:1.1rem; font-weight:600; margin-bottom:.15rem}
.campo .porque{font-size:.88rem; color:var(--gris-oscuro); margin-bottom:var(--s2); max-width:60ch}
.historial{font-size:.75rem; color:var(--gris-oscuro)}
.historial b{font-weight:700; color:var(--ok)}

/* ── Pasos ─────────────────────────────────────────────────────────────── */
ol.pasos{list-style:none; counter-reset:p; margin:0; padding:0}
ol.pasos > li{counter-increment:p; display:grid; grid-template-columns:2.4rem 1fr; gap:var(--s3);
  padding-block:var(--s3); border-bottom:1px solid color-mix(in srgb, var(--blanco) 22%, transparent)}
ol.pasos > li:last-child{border-bottom:0}
ol.pasos > li::before{
  content:counter(p,decimal-leading-zero); font-family:var(--titulo); font-weight:600;
  font-size:1.1rem; color:var(--gris-medio); line-height:1.6;
}
ol.pasos > li[data-hecho="si"]::before{content:"✓"; color:var(--blanco)}
ol.pasos .titulo{font-family:var(--titulo); font-size:1.05rem; font-weight:600}
ol.pasos .acciones{display:flex; gap:var(--s2); align-items:center; flex-wrap:wrap; margin-top:var(--s2)}

/* ── Tablas ────────────────────────────────────────────────────────────── */
.marco-tabla{overflow-x:auto; border:1px solid var(--linea); border-radius:var(--r)}
table{border-collapse:collapse; width:100%; min-width:34rem; font-size:.92rem}
th,td{text-align:left; padding:var(--s2) var(--s3); border-bottom:1px solid var(--linea)}
tbody tr:last-child td{border-bottom:0}
th{font-size:.64rem; text-transform:uppercase; letter-spacing:.12em; color:var(--gris-oscuro);
   font-weight:700; background:color-mix(in srgb, var(--gris-claro) 22%, var(--blanco))}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums}

/* ── Medidas ───────────────────────────────────────────────────────────── */
.medidas{display:grid; gap:var(--s3); grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
.medida{border:1px solid var(--linea); border-radius:var(--r); padding:var(--s3)}
.medida .n{font-family:var(--titulo); font-size:2.3rem; font-weight:700; line-height:1;
  font-variant-numeric:tabular-nums; letter-spacing:-.03em}
.medida .q{font-size:.68rem; color:var(--gris-oscuro); text-transform:uppercase;
  letter-spacing:.1em; margin-top:.5rem}
.medida .fuente{font-size:.74rem; color:var(--gris-oscuro); margin-top:var(--s2);
  padding-top:var(--s2); border-top:1px solid var(--linea)}
.sin-dato .n{color:var(--gris-medio); font-size:1.05rem; font-family:var(--texto); font-weight:500;
  font-style:italic; line-height:2.2}

/* ── Avisos y estados de carga ─────────────────────────────────────────── */
.aviso{
  border-radius:var(--r-chico); padding:var(--s2) var(--s3); font-size:.9rem;
  background:var(--t-alto); border:1px solid color-mix(in srgb, var(--alto) 26%, var(--blanco));
  color:var(--alto); margin-top:var(--s3);
}
.aviso.bueno{background:var(--t-ok); border-color:color-mix(in srgb, var(--ok) 26%, var(--blanco)); color:var(--ok)}
.cargando{color:var(--gris-oscuro); font-size:.92rem; padding:var(--s3) 0}
.cinta{
  background:var(--t-espera); color:var(--espera);
  border-bottom:1px solid color-mix(in srgb, var(--espera) 26%, var(--blanco));
  font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  padding:.5rem var(--s3); text-align:center;
}
.banda-soporte{
  display:none; background:var(--alto); color:var(--blanco);
  padding:var(--s2) var(--s3); font-size:.88rem; font-weight:600;
}
body[data-soporte="si"] .banda-soporte{display:block}
body[data-soporte="si"] .escribible{opacity:.4; pointer-events:none}

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

/* ── Pantallas sueltas: entrada y cambio de contraseña ─────────────────── */
.acceso{
  max-width:27rem; margin:clamp(1.5rem,8vh,5rem) auto; padding:var(--s4) clamp(1.1rem,5vw,var(--s4));
  border:1px solid var(--linea); border-radius:var(--r-grande);
}
.acceso .marca{display:flex; align-items:center; gap:var(--s3); margin-bottom:var(--s4)}
.acceso .marca .sello{
  width:46px; height:46px; flex:0 0 46px; border-radius:var(--r-chico);
  background:var(--negro); color:var(--blanco); display:grid; place-items:center;
  font-family:var(--titulo); font-weight:700; font-size:1.1rem;
}
.acceso .campo-forma{margin-bottom:var(--s3)}
.acceso .boton{width:100%}
.pista{font-size:.78rem; color:var(--gris-oscuro); margin-top:.35rem}
[hidden]{display:none !important}