/* =============================================================================
   Tuerka Ticket — puertas de entrada al panel: /entrar, el login de cada
   organización y «El enlace no funcionó». Sin el marco del panel: solo la
   tarjeta centrada. Antes vivía en panel.css (presupuesto de CSS, audit B1).
   ========================================================================== */
.acceso { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.acceso .card { width: 100%; max-width: 440px; padding: 32px 28px; display: flex; flex-direction: column; gap: 20px; }
.acceso h1 { font-size: 36px; line-height: .95; }
.acceso .org { color: var(--bruma); margin-top: -8px; }
.acceso form { display: flex; flex-direction: column; gap: 16px; }
.acceso .btn { width: 100%; }
.enlace-modo { align-self: center; font-size: 15px; }   /* historia 20: terciario neutro */
.ct-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ct-acepta { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--bruma); }

/* Plataforma (historia 21): el código de app, su alta con el QR y los códigos de respaldo. */
.acceso h2 { font-size: 20px; font-weight: 800; color: var(--luz); }
.acceso .pl-sub { margin-top: -8px; }
.input.codigo { font-family: var(--mono); font-size: 30px; letter-spacing: .3em; text-align: center; min-height: 64px; padding: 0 8px; }
.pl-pasos { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 20px; counter-reset: p; }
.pl-pasos > li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 4px 12px; counter-increment: p; }
.pl-pasos > li::before { content: counter(p); grid-row: 1 / span 9; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--aguamarina-10); color: var(--aguamarina); font-weight: 800; font-size: 16px; }
.pl-pasos > li > * { grid-column: 2; }
.pl-pasos p { color: var(--bruma); }
.pl-qr { width: 200px; height: 200px; padding: 12px; background: var(--placa); color: var(--sobre-placa); border-radius: var(--r-input); margin: 8px 0 4px; }
.pl-qr svg { width: 100%; height: 100%; display: block; }
.pl-clave { font-family: var(--mono); font-size: 17px; color: var(--luz); word-spacing: .2em; overflow-wrap: anywhere; }
.pl-codigos { list-style: none; padding: 16px; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; border: 1px solid var(--linea-2); border-radius: var(--r-input); background: var(--panel-2); }
.pl-codigos li { font-family: var(--mono); font-size: 18px; color: var(--luz); letter-spacing: .04em; }
.acceso .pl-izq { align-self: flex-start; width: auto; }
.acceso .check { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; font-size: 16px; color: var(--luz); cursor: pointer; }
.acceso .check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--aguamarina); flex: none; }
.btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }