/* Páginas de acceso del Centro de Mando (entrar, código de Telegram y alta) — DISENO §3.14.
   Mismo estilo Jarvis que el panel: usa /acceso/tokens.css (se carga antes que este archivo). Nada redondeado:
   esquinas rectas y chaflanes con clip-path. Sin estilos en línea (CSP style-src 'self'). Los campos (name,
   autocomplete, action) NO se tocan: el iPhone los llena solo (contraseña guardada y código desde la notificación). */

*, *::before, *::after { box-sizing: border-box; border-radius: 0; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; min-height: 100%; }
body.acceso {
  min-height: 100dvh; display: flex; justify-content: center; align-items: flex-start;
  padding: max(20px, env(safe-area-inset-top)) var(--gut) max(28px, env(safe-area-inset-bottom));
  background: transparent; color: var(--texto); font: 400 16px/1.5 var(--f-txt);
  -webkit-font-smoothing: antialiased; overflow-x: hidden; -webkit-tap-highlight-color: transparent;
}
h1, p { margin: 0; }

/* fondo igual al del panel: 2 radiales + rejilla de 32 px */
.fondo {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 55% at 50% 18%, rgba(30, 120, 170, .22), transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 110%, rgba(20, 80, 120, .18), transparent 70%),
    linear-gradient(rgba(95, 227, 255, .035) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(95, 227, 255, .035) 1px, transparent 1px) 0 0 / 32px 32px,
    var(--bg);
}

.acceso-col { width: 100%; max-width: 420px; margin-top: clamp(4px, 5vh, 72px); display: grid; justify-items: center; gap: 16px; }

/* emblema: hexágono de la marca + 2 anillos; se dibuja una vez */
.emblema { width: 64px; height: 64px; overflow: visible; }
.em-a { fill: none; stroke: var(--cian-3); stroke-width: 1; }
.em-b { fill: none; stroke: var(--cian); stroke-width: 1.4; stroke-dasharray: 2 3.2; opacity: .6; }
.em-h { fill: none; stroke: var(--cian); stroke-width: 1.8; stroke-linejoin: miter; }
.em-h2 { fill: var(--cian-tinte); stroke: var(--cian-claro); stroke-width: 1.4; stroke-linejoin: miter; }

/* caja: marco con borde fino en chaflán, corchetes de 18 px arriba-derecha y abajo-izquierda */
.caja {
  position: relative; isolation: isolate; width: 100%; padding: 22px 20px 22px;
  clip-path: var(--poly); background: var(--linea-2);
}
.caja::before {
  content: ""; position: absolute; inset: 1px; z-index: -1; clip-path: var(--poly);
  background: linear-gradient(180deg, rgba(95, 227, 255, .06), rgba(95, 227, 255, 0) 42%), var(--panel);
}
.caja::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(var(--cian), var(--cian)) right 0 top 0 / 18px 2px no-repeat,
    linear-gradient(var(--cian), var(--cian)) right 0 top 0 / 2px 18px no-repeat,
    linear-gradient(var(--cian), var(--cian)) left 0 bottom 0 / 18px 2px no-repeat,
    linear-gradient(var(--cian), var(--cian)) left 0 bottom 0 / 2px 18px no-repeat;
}

.cabeza {
  display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; flex-wrap: wrap;
  padding-bottom: 10px; margin-bottom: 18px; border-bottom: 1px solid var(--linea);
  font: 600 13px/1.25 var(--f-mono); letter-spacing: .12em; text-transform: uppercase;
}
.marca { color: var(--cian); }
.sello { display: inline-flex; align-items: center; gap: 8px; color: var(--texto-3); }
.sello::before { content: ""; width: 8px; height: 8px; background: var(--cian); box-shadow: 0 0 8px var(--cian); }

h1 { font: 600 28px/1.15 var(--f-tit); letter-spacing: .01em; margin-bottom: 6px; }
.ayuda { color: var(--texto-2); font-size: 15px; line-height: 1.45; margin-bottom: 16px; }
.pie { color: var(--texto-3); font-size: 14px; line-height: 1.45; margin-top: 16px; }
.pie a, .caja a { color: var(--cian); text-underline-offset: 3px; }
.pie a { display: inline-flex; align-items: center; min-height: var(--toque); font: 600 13px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.pie a::before { content: "← "; white-space: pre; }

/* avisos ?e=…: barra izquierda de 3 px + tinte */
.aviso { margin-bottom: 16px; padding: 10px 12px; border-left: 3px solid var(--atencion); background: var(--atencion-tinte); color: #ffe3b8; font-size: 15px; }
.aviso.error { border-left-color: var(--falla); background: var(--falla-tinte); color: var(--falla-texto); }
.aviso.bien { border-left-color: var(--ok); background: var(--ok-tinte); color: #d5ffe9; }

/* formulario */
.forma { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.forma.otra { margin-top: 10px; }
label { margin-top: 6px; font: 600 13px/1.25 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--texto-2); }
input {
  width: 100%; min-height: 48px; padding: 10px 12px; margin: 0;
  font: 400 17px/1.3 var(--f-txt); color: var(--texto); caret-color: var(--cian);
  background: var(--bg-1); border: 1px solid var(--linea-ctl); outline: none;
  transition: border-color var(--t-1), box-shadow var(--t-1);
}
input:focus { border-color: var(--cian); box-shadow: 0 0 0 1px var(--cian), 0 0 18px var(--cian-tinte); }
input[readonly] { color: var(--texto-3); background: var(--bg); }
input:-webkit-autofill, input:-webkit-autofill:hover { -webkit-text-fill-color: var(--texto); caret-color: var(--cian); box-shadow: 0 0 0 1000px var(--bg-1) inset; }
input:-webkit-autofill:focus { box-shadow: 0 0 0 1000px var(--bg-1) inset, 0 0 0 1px var(--cian); }
input:user-invalid { border-color: var(--falla); }

/* código: un solo campo (one-time-code); 6 guías de casilla dibujadas como fondo */
#codigo {
  min-height: 60px; padding: 8px 12px 14px; text-align: center; text-indent: .35em;
  font: 600 24px/1.2 var(--f-mono); letter-spacing: .35em;
  background: repeating-linear-gradient(90deg, var(--linea-2) 0 .6em, transparent .6em .95em) center bottom 10px / 5.35em 2px no-repeat, var(--bg-1);
}
#codigo:focus { background: repeating-linear-gradient(90deg, var(--cian) 0 .6em, transparent .6em .95em) center bottom 10px / 5.35em 2px no-repeat, var(--bg-1); }

/* botones: primario cian (ancho completo, 48 px, chaflán) y secundario con marco */
button {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 48px; margin-top: 14px; padding: 0 16px; border: 0; cursor: pointer;
  clip-path: var(--poly-s); background: var(--cian); color: var(--sobre-cian);
  font: 600 14px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase;
  transition: background-color var(--t-1), color var(--t-1);
}
button::after { content: "→"; font-family: var(--f-mono); letter-spacing: 0; }
@media (hover: hover) { button:hover { background: var(--cian-claro); } }
button:focus-visible { outline: 2px solid var(--sobre-cian); outline-offset: -5px; }
button.secundario:focus-visible { outline-color: var(--texto); }
button:active { transform: scale(.98); }
button.secundario { margin-top: 0; color: var(--cian); background: var(--linea-ctl); }
button.secundario::before { content: ""; position: absolute; inset: 1px; z-index: -1; clip-path: var(--poly-s); background: var(--bg-2); transition: background-color var(--t-1); }
button.secundario::after { content: none; }
@media (hover: hover) { button.secundario:hover { background: var(--cian); } button.secundario:hover::before { background: #0f2738; } }

/* movimiento: el emblema se dibuja y la caja entra (nada con «reducir movimiento») */
@media (prefers-reduced-motion: no-preference) {
  .em-a, .em-h, .em-h2 { stroke-dasharray: 1; stroke-dashoffset: 1; animation: trazo .6s var(--e-sale) forwards; }
  .em-h { animation-delay: .08s; }
  .em-h2 { animation-delay: .22s; }
  .em-b { animation: aparece .6s var(--e-sale) .2s both; }
  .caja { animation: llegar .38s var(--e-sale) .05s both; }
}
@keyframes trazo { to { stroke-dashoffset: 0; } }
@keyframes aparece { from { opacity: 0; } }
@keyframes llegar { from { opacity: 0; transform: translateY(8px); } }

@media (min-width: 700px) {
  .acceso-col { margin-top: clamp(24px, 10vh, 120px); }
  .caja { padding: 26px 26px 24px; }
}