/* KeIoI · las páginas de la puerta (entrar, puertas, inicio, sin ficha).
 * Los nombres cortos de acá (--bg, --primary…) nacieron antes que la paleta única y quedaron como
 * SINÓNIMOS de los tokens, para no reescribir estas plantillas: la verdad está en keioi.tokens.css
 * y nada más (B1.1, 05-09-2026). Antes tenían su propio fondo, #f5f8f7 contra el #f4f7f6 del resto:
 * dos grises casi iguales es exactamente el problema que la paleta única resuelve. */
@import url("/estatico/keioi.tokens.css");
:root{--bg:var(--keioi-fondo);--surface:var(--keioi-papel);--control:var(--keioi-fondo);--border:var(--keioi-linea);
  --ink:var(--keioi-tinta);--muted:var(--keioi-suave);--primary:var(--keioi-verde);--primary-deep:var(--keioi-verde-hondo);
  --primary-soft:var(--keioi-verde-agua);--accent:var(--keioi-oro);--radio:var(--keioi-radio);--barra:var(--keioi-superior);--tap:44px}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--keioi-tipo);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--primary)}
.ws-top{position:sticky;top:0;z-index:5;height:var(--barra);display:flex;align-items:center;gap:12px;padding:0 14px;background:var(--surface);border-bottom:1px solid var(--border)}
.ws-top .marca{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.ws-top .marca img{height:28px;width:auto;display:block}
.ws-top .empresa{color:var(--muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ws-top .quien{margin-left:auto;display:flex;align-items:center;gap:14px;font-size:12.5px;color:var(--muted);white-space:nowrap}
.ws-top .quien a{color:var(--primary);text-decoration:none;font-weight:650;min-height:var(--tap);display:inline-flex;align-items:center}
.ws-top .divisor{width:1px;height:26px;background:var(--border)}
main{max-width:1000px;margin:0 auto;padding:28px 20px 60px}
.saludo{text-align:center;margin:26px 0 22px}
.saludo h1{font-size:26px;font-weight:800;letter-spacing:-.02em;margin:0 0 4px;text-wrap:balance}
.saludo p{margin:0;color:var(--muted)}
.puertas{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.puerta{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:22px 20px 18px;text-decoration:none;color:inherit;min-height:190px;overflow:hidden}
.puerta::before{content:"";position:absolute;left:0;top:0;right:0;height:6px;background:var(--primary)}
.puerta:hover,.puerta:focus-visible{border-color:var(--primary);outline:none;box-shadow:var(--keioi-sombra)}
.puerta.gris::before{background:var(--border)}
.puerta.gris{color:var(--muted)}
.puerta .k{font-size:11.5px;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:var(--primary)}
.puerta.gris .k{color:var(--muted)}
.puerta h2{font-size:17px;font-weight:650;margin:8px 0 6px;color:var(--ink)}
.puerta.gris h2{color:var(--muted)}
.puerta p{margin:0;font-size:13px;color:var(--muted);flex:1}
.puerta .dato{margin-top:14px;font-size:12.5px;font-weight:650;color:var(--primary);min-height:20px}
.puerta.gris .dato{color:var(--muted);font-weight:500}
.pie{margin-top:28px;text-align:center;font-size:12.5px;color:var(--muted)}
.pie a{color:var(--muted)}
/* pantalla inicial */
.portada{min-height:calc(100vh - 40px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px 20px}
.portada img.logo{height:64px;width:auto;margin-bottom:18px}
.portada h1{font-size:34px;font-weight:800;letter-spacing:-.03em;margin:0 0 6px}
.portada .baj{color:var(--muted);max-width:44ch;margin:0 0 30px}
.botones{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap);padding:0 22px;border-radius:var(--radio);font-weight:650;font-size:15px;text-decoration:none;border:1.5px solid var(--primary);cursor:pointer;font-family:inherit}
.btn.lleno{background:var(--primary);color:var(--keioi-papel)}
.btn.lleno:hover{background:var(--primary-deep)}
.btn.vacio{background:var(--surface);color:var(--primary)}
.btn[hidden]{display:none}
.ayuda{margin-top:22px;font-size:12.5px;color:var(--muted);max-width:52ch}
.ayuda b{color:var(--ink);font-weight:650}
.tarjeta{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:22px 24px;max-width:560px;margin:30px auto}
.tarjeta h1{font-size:22px;margin:0 0 8px;letter-spacing:-.02em}
.tarjeta p{margin:8px 0;color:var(--muted)}
.tarjeta .k{font-size:11.5px;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:var(--primary)}
.fecha{display:inline-block;background:var(--keioi-fondo);border:1px solid var(--accent);border-radius:4px;padding:2px 8px;font-size:12px;font-weight:650;color:var(--ink)}
@media (max-width:900px){.puertas{grid-template-columns:1fr}.ws-top .empresa{display:none}}