/* =========================================================
   Entrada «etiqueta en circuito de neón» (18-oct-2026)
   Todo va bajo #entrada para no chocar con los estilos de la app.
   Volver a la portada anterior: ?inicio=normal, o PANTALLA_INICIO='normal' en config.js
   ========================================================= */
#entrada{--cian:#7fe9ff;--violeta:#8a6bff;--magenta:#ff3fae;--verde-neon:#5cf2c8;
  --mono:'Cascadia Mono','JetBrains Mono',Consolas,ui-monospace,monospace;
  position:fixed;inset:0;z-index:300;overflow:hidden;color:#e9f6ff;
  background:radial-gradient(1200px 700px at 50% 30%,#2b14b8 0%,transparent 60%),
    radial-gradient(900px 500px at 50% 80%,#0d3a8a 0%,transparent 60%),
    linear-gradient(180deg,#0b0638 0%,#150a5e 55%,#070424 100%);
  transition:opacity .6s ease}
#entrada[hidden]{display:none}
/* desde el primer cuadro: sin portada vieja y con el fondo oscuro de la entrada */
html.inicio-circuito #splash{display:none!important}
/* el fondo de arranque vale solo mientras la entrada está a la vista (en-fuera = ya se entró a la app) */
html.inicio-circuito:not(.en-fuera),html.inicio-circuito:not(.en-fuera) body{background:#0b0638}
/* velo: mientras carga una sesión ya abierta, se ve el circuito sin la etiqueta */
#entrada.velo .en-mesa{display:none}
html.con-entrada,html.con-entrada body{overflow:hidden}
#entrada.sale{opacity:0;pointer-events:none}
#entrada canvas{position:absolute;inset:0;pointer-events:none}
#entrada .en-hexes{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#entrada .en-hexes g{transition:transform .25s ease-out}
#entrada .en-hexes polygon{fill:none;stroke:#f4fdff;stroke-linejoin:round;opacity:.92;
  filter:drop-shadow(0 0 6px rgba(127,233,255,.95)) drop-shadow(0 0 22px rgba(63,192,239,.7));
  stroke-dasharray:var(--l);stroke-dashoffset:var(--l);animation:en-traza 1.6s cubic-bezier(.6,0,.2,1) forwards}
@keyframes en-traza{to{stroke-dashoffset:0}}
#entrada.glitch .en-hexes polygon{stroke:#ffd1ef;filter:drop-shadow(0 0 6px rgba(255,63,174,.95)) drop-shadow(0 0 20px rgba(255,63,174,.6))}
#entrada.ok .en-hexes polygon{stroke:#fff;filter:drop-shadow(0 0 10px rgba(127,233,255,1)) drop-shadow(0 0 36px rgba(92,242,200,.85))}

#entrada .en-mesa{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:20px}
#entrada .en-etiqueta{position:relative;width:480px;max-width:100%;padding:28px 34px 26px;border-radius:6px;
  background:linear-gradient(160deg,rgba(18,12,70,.8),rgba(8,22,70,.74));
  backdrop-filter:blur(12px) saturate(1.3);-webkit-backdrop-filter:blur(12px) saturate(1.3);
  border:1px solid rgba(127,233,255,.45);
  box-shadow:0 0 0 1px rgba(127,233,255,.12),0 0 34px rgba(63,192,239,.32),inset 0 0 50px rgba(110,90,255,.14),0 30px 60px rgba(0,0,20,.55);
  transition:transform 1s cubic-bezier(.6,0,.3,1),opacity .7s ease .25s;overflow:hidden;
  opacity:0;transform:translateY(18px) scale(.97);clip-path:inset(0 0 100% 0)}
#entrada.lista .en-etiqueta{animation:en-encender .95s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes en-encender{0%{opacity:0;clip-path:inset(0 0 100% 0);transform:translateY(18px) scale(.97)}
  35%{opacity:1}48%{opacity:.45}56%{opacity:1}64%{opacity:.7}72%{opacity:1}
  100%{opacity:1;clip-path:inset(0 0 0 0);transform:none}}
#entrada .en-etiqueta.encendida{opacity:1;transform:none;clip-path:none;animation:none}
#entrada .en-etiqueta.encendida.tiembla{animation:en-tiembla .4s steps(2,end)}
@keyframes en-tiembla{25%{transform:translateX(-7px);filter:hue-rotate(80deg)}50%{transform:translateX(6px)}75%{transform:translateX(-3px);filter:none}}
#entrada.despega .en-etiqueta.encendida{transform:perspective(900px) rotateX(55deg) translateY(-30vh) scale(.6);opacity:0}

#entrada .en-esq{position:absolute;width:20px;height:20px;border:2px solid var(--cian);filter:drop-shadow(0 0 5px rgba(127,233,255,.9))}
#entrada .en-esq.a{top:7px;left:7px;border-right:0;border-bottom:0}#entrada .en-esq.b{top:7px;right:7px;border-left:0;border-bottom:0}
#entrada .en-esq.c{bottom:7px;left:7px;border-right:0;border-top:0}#entrada .en-esq.d{bottom:7px;right:7px;border-left:0;border-top:0}

#entrada .en-cabeza{display:flex;align-items:center;gap:12px;padding-bottom:12px;position:relative}
#entrada .en-cabeza::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--cian) 15%,var(--violeta) 85%,transparent);box-shadow:0 0 10px rgba(127,233,255,.7)}
#entrada .en-emb svg{width:54px;height:auto;display:block;filter:drop-shadow(0 0 10px rgba(63,192,239,.85))}
#entrada .en-marca{line-height:1.05}
#entrada .en-nat{font-weight:800;font-size:30px;letter-spacing:.5px;color:#39b84f;text-shadow:0 0 12px rgba(57,184,79,.55)}
#entrada .en-reg{font-size:12px;color:#39b84f;vertical-align:top;margin-left:2px}
#entrada .en-blue{font-size:15px;font-weight:800;letter-spacing:2.5px;color:#46aef7;margin-left:5px;text-shadow:0 0 10px rgba(70,174,247,.7)}
#entrada .en-sub{font-size:11px;letter-spacing:4.5px;color:rgba(190,225,255,.6);margin-top:5px}
#entrada .en-franja{display:flex;justify-content:space-between;gap:10px;font:600 10.5px/1.3 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:rgba(127,233,255,.7);padding:12px 0 14px;border-bottom:1px dashed rgba(127,233,255,.25)}
#entrada form{display:grid;gap:12px;padding-top:16px}
#entrada label{display:grid;grid-template-columns:112px minmax(0,1fr);align-items:end;font:700 10.5px/1.2 var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:rgba(170,215,255,.72)}
#entrada input{width:100%;min-width:0;font-family:inherit;font:600 16px/1.3 'Geist','Segoe UI',sans-serif;letter-spacing:.02em;text-transform:none;
  color:#fff;background:transparent;border:0;border-bottom:1.5px solid rgba(127,233,255,.4);padding:4px 2px;outline:none;border-radius:0;caret-color:var(--cian)}
#entrada input:focus{border-bottom-color:var(--cian);box-shadow:0 6px 12px -8px rgba(127,233,255,.9)}
#entrada .en-msg{min-height:16px;font:600 12px/1.3 var(--mono);color:var(--magenta);text-shadow:0 0 8px rgba(255,63,174,.6)}
#entrada .en-pie{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-top:4px}
#entrada .en-codigo svg{display:block;filter:drop-shadow(0 0 4px rgba(127,233,255,.8))}
#entrada .en-codigo small{display:block;font:600 10px/1.4 var(--mono);letter-spacing:.18em;color:var(--cian);text-align:center}
#entrada .en-entrar{font:800 12.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--cian);
  background:rgba(127,233,255,.06);border:1.5px solid var(--cian);border-radius:4px;padding:13px 16px;cursor:pointer;white-space:nowrap;
  box-shadow:0 0 14px rgba(127,233,255,.35),inset 0 0 12px rgba(127,233,255,.12);text-shadow:0 0 8px rgba(127,233,255,.8);transition:background .15s,color .15s}
#entrada .en-entrar:hover{background:var(--cian);color:#0b0638;text-shadow:none}
#entrada .en-entrar[disabled]{opacity:.55;cursor:default}

#entrada .en-laser{position:absolute;left:-10%;right:-10%;height:2px;top:-4px;pointer-events:none;opacity:0;background:#fff;
  box-shadow:0 0 8px 2px rgba(127,233,255,.95),0 0 30px 8px rgba(63,192,239,.45)}
#entrada .en-laser.barre{animation:en-barre .7s ease-in-out}
#entrada .en-laser.verde{box-shadow:0 0 8px 2px rgba(92,242,200,.95),0 0 30px 8px rgba(92,242,200,.45)}
#entrada .en-laser.rojo{box-shadow:0 0 8px 2px rgba(255,63,174,.95),0 0 30px 8px rgba(255,63,174,.45)}
@keyframes en-barre{0%{top:-4px;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:100%;opacity:0}}

#entrada .en-sello{position:absolute;right:26px;top:92px;width:156px;height:156px;border-radius:50%;pointer-events:none;
  border:3px double var(--verde-neon);color:var(--verde-neon);display:flex;flex-direction:column;align-items:center;justify-content:center;
  font:900 18px/1.05 var(--mono);letter-spacing:.1em;text-align:center;opacity:0;transform:rotate(-14deg) scale(2.4);
  text-shadow:0 0 10px rgba(92,242,200,.9);box-shadow:0 0 22px rgba(92,242,200,.6),inset 0 0 22px rgba(92,242,200,.35);
  background:radial-gradient(circle,rgba(92,242,200,.12),transparent 70%)}
#entrada .en-sello span{font-size:9.5px;letter-spacing:.26em;margin-top:7px}
#entrada .en-sello.cae{animation:en-cae .4s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes en-cae{to{opacity:1;transform:rotate(-14deg) scale(1)}}
#entrada .en-noleido{position:absolute;left:62px;bottom:46px;font:800 14px/1 var(--mono);letter-spacing:.22em;color:var(--magenta);
  background:rgba(20,6,40,.85);border:2px solid var(--magenta);padding:6px 10px;transform:rotate(-8deg);opacity:0;transition:opacity .15s;
  pointer-events:none;text-shadow:0 0 8px rgba(255,63,174,.9);box-shadow:0 0 16px rgba(255,63,174,.55)}
#entrada .en-noleido.vis{opacity:1}

@media (max-width:460px){#entrada label{grid-template-columns:1fr;gap:4px}#entrada .en-pie{flex-direction:column;align-items:stretch}
  #entrada .en-sello{width:124px;height:124px;top:80px;font-size:15px}#entrada .en-hexes{opacity:.6}
  #entrada .en-franja{flex-direction:column}}
@media (prefers-reduced-motion:reduce){#entrada .en-hexes polygon{animation:none;stroke-dashoffset:0}
  #entrada .en-laser.barre,#entrada .en-sello.cae,#entrada .en-etiqueta.encendida.tiembla{animation:none}
  #entrada .en-sello.cae{opacity:1;transform:rotate(-14deg)}#entrada .en-etiqueta{transition:none}
  #entrada.lista .en-etiqueta{animation:none;opacity:1;transform:none;clip-path:none}}