/* Café Cuerdo · la puerta (/entrar/). Fondo grafito, la C de la casa y las
   mismas tipografías del portal. Público: aquí no va ningún dato interno. */
:root{
  color-scheme:dark;
  --bg:#1E1F21;--plate:#141516;--ink:#F3EDE4;--dim:#A3A5A8;--brass:#C9A56B;
  --rule:#686E75;--line:#3A3C40;--card:#26272A;--bad:#F2A093;--ok:#8FD0A8;
  --v1:#2C5E8C;--v2:#D9A441;--v3:#6B4A8A;--v4:#B5532E;--v5:#3F7F78;
  --display:"Montserrat",system-ui,sans-serif;--text:"Inter",system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--bg)}
body{margin:0;min-height:100vh;min-height:100dvh;background:var(--bg);color:var(--ink);font:400 16px/1.5 var(--text);-webkit-text-size-adjust:100%;
  background-image:linear-gradient(rgba(243,237,228,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(243,237,228,.045) 1px,transparent 1px);
  background-size:40px 40px;
  display:flex;align-items:flex-start;justify-content:center;padding:clamp(20px,8vh,72px) 16px 32px}
button,input{font:inherit;color:inherit}
.mono{font:500 12px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase}

.puerta{width:100%;max-width:440px}
.placa{display:flex;gap:16px;align-items:center;padding:0 2px 18px}
.placa svg{width:64px;height:64px;flex:none;color:var(--ink)}
.placa .tit{min-width:0}
.placa h1{font:500 clamp(22px,6.4vw,30px)/1.1 var(--display);letter-spacing:.14em;text-transform:uppercase;margin:0}
.placa .sub{color:var(--dim);margin-top:6px}
.vitral{height:8px;background:
  linear-gradient(90deg,var(--v1) 0 9%,#1b1b1b 9% 9.4%,var(--v2) 9.4% 21%,#1b1b1b 21% 21.4%,var(--v3) 21.4% 27%,#1b1b1b 27% 27.4%,var(--v5) 27.4% 41%,#1b1b1b 41% 41.4%,var(--v2) 41.4% 48%,#1b1b1b 48% 48.4%,var(--v4) 48.4% 60%,#1b1b1b 60% 60.4%,var(--v1) 60.4% 74%,#1b1b1b 74% 74.4%,var(--v3) 74.4% 83%,#1b1b1b 83% 83.4%,var(--v2) 83.4% 92%,#1b1b1b 92% 92.4%,var(--v5) 92.4% 100%)}

.caja{background:var(--card);border:1px solid rgba(243,237,228,.28);border-top:0;padding:22px 20px 20px}
.caja section{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.caja form{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.paso{margin:0;font:500 17px/1.4 var(--text)}
.paso.negado{color:var(--bad)}
.texto{margin:0;color:var(--dim)}
label.c{font:500 12px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-top:6px}
input{width:100%;min-width:0;min-height:48px;padding:10px 12px;font:400 17px/1.3 var(--text);color:var(--ink);background:var(--plate);
  border:1px solid var(--rule);border-radius:0;-webkit-appearance:none;appearance:none}
input::placeholder{color:#8A8D91;opacity:1}
input[readonly]{opacity:.7}
input.clave{font:500 18px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase}
input.clave::placeholder{font:400 17px/1.3 var(--text);letter-spacing:0;text-transform:none}
.msg{margin:4px 0 0;min-height:1.5em;color:var(--dim);overflow-wrap:anywhere}
.msg.err{color:var(--bad);font-weight:500}
.btn{width:100%;min-height:48px;padding:11px 16px;border:2px solid var(--rule);border-radius:0;background:transparent;color:var(--ink);font-weight:500;cursor:pointer}
.btn.pri{background:var(--ink);border-color:var(--ink);color:var(--bg);font-weight:600}
.btn:disabled{opacity:.5;cursor:not-allowed}
.ligas{margin:0;text-align:center}
.ln{background:none;border:0;border-radius:0;min-height:44px;padding:8px 6px;color:var(--brass);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-weight:500}
input:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--brass);outline-offset:2px}

.pulso{display:inline-block;width:10px;height:10px;margin-right:10px;border-radius:50%;background:var(--brass);vertical-align:baseline}
@media (prefers-reduced-motion:no-preference){
  .pulso{animation:pulso 1.6s ease-in-out infinite}
  @keyframes pulso{0%,100%{opacity:.25}50%{opacity:1}}
}

.pie{margin-top:22px;text-align:center}
.pie a{display:inline-block;padding:12px 10px;color:#8A8D91;text-decoration:none}
.pie a:hover,.pie a:focus-visible{color:var(--dim);text-decoration:underline}