/* Flowbit · ingreso único («Las dos manos», elegido por Mati el 19/10/2026: dirección B). Una sola hoja para las 6 plataformas; todo bajo .fbi.
   Una mano humana y una mano de luz que se acercan; al ingresar se tocan, se enciende todo y se entra al espacio por un portal (ver brand.tsx).
   Copias idénticas: frontend/app/flowbit/ingreso (fuente), server/pua_ui/ingreso y el portal (app/portal-login/ingreso). */
@font-face{font-family:"Flowbit Satoshi";src:url(/fonts/satoshi-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Flowbit Satoshi";src:url(/fonts/satoshi-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

.fbi{
  --fbi-fondo:#05090a;--fbi-tinta:#eaf5f4;--fbi-suave:#8fa7a6;--fbi-campo:rgba(8,15,16,.72);--fbi-borde:rgba(191,240,238,.15);
  --fbi-foco:#56b9ba;--fbi-anillo:rgba(86,185,186,.22);--fbi-boton:#56b9ba;--fbi-boton-hover:#6ccaca;--fbi-boton-tinta:#04201f;
  --fbi-coral:#ff8a74;--fbi-coral-suave:#ffb4a5;--fbi-ok:#8fe3df;--fbi-amarillo:#f5d38a;
  position:relative;min-height:100vh;min-height:100dvh;overflow:hidden;isolation:isolate;color-scheme:dark;
  container:fbi / inline-size;
  background:#04080a;
  color:var(--fbi-tinta);font-family:"Flowbit Satoshi",Satoshi,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
.fbi *,.fbi *::before,.fbi *::after{box-sizing:border-box}
/* Página propia del servidor de Fly (Panificación, Bounous, Open Park): sin márgenes y con salto al formulario. */
.fbi-pagina{margin:0;background:#05090a}
.fbi-saltar{position:absolute;left:12px;top:-60px;z-index:20;padding:10px 14px;border-radius:10px;background:#eaf5f4;color:#04201f;font:700 14px/1 "Flowbit Satoshi",Satoshi,system-ui,sans-serif;text-decoration:none}
.fbi-saltar:focus{top:12px}
.fbi [hidden]{display:none!important}
/* El fondo: las dos manos, a todo lo ancho y arriba (franja); el formulario se apoya en su borde inferior, centrado. La imagen es lo primero que se pinta
   (AVIF o WebP, 4 a 25 KB) y el video entra después, sólo en pantallas anchas con buena conexión (ver fondo() en ingreso.js). */
.fbi-fondo{position:absolute;left:0;right:0;top:0;height:min(60vh,620px);z-index:0;overflow:hidden;pointer-events:none;background:#04080a}
.fbi-fondo::before,.fbi-fondo::after{content:"";position:absolute;inset:0;z-index:0;background-position:50% 50%;background-size:cover;background-repeat:no-repeat;filter:brightness(.78)}
.fbi-fondo::before{background-image:url(manos/inicio-1280.webp);background-image:image-set(url(manos/inicio-1280.avif) type("image/avif"),url(manos/inicio-1280.webp) type("image/webp"))}
.fbi-fondo::after{background-image:url(manos/espera-1280.webp);background-image:image-set(url(manos/espera-1280.avif) type("image/avif"),url(manos/espera-1280.webp) type("image/webp"));opacity:0;transition:opacity 1.6s ease}
.fbi-fondo[data-fase="espera"]::after,.fbi-fondo[data-fase="contacto"]::after{opacity:1}
.fbi-fondo[data-fase="contacto"]::after{background-image:url(manos/contacto-1280.webp);background-image:image-set(url(manos/contacto-1280.avif) type("image/avif"),url(manos/contacto-1280.webp) type("image/webp"));transition:opacity .5s ease}
.fbi-video{position:absolute;z-index:1;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s ease;filter:brightness(.78)}
.fbi-video[data-on]{opacity:1}
.fbi-fondo-velo{position:absolute;z-index:2;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(4,8,10,.45) 0%,rgba(4,8,10,0) 26%,rgba(4,8,10,0) 55%,#04080a 100%)}
/* La luz del punto de contacto: respira mientras las manos esperan y se enciende al escribir. */
.fbi-luz{position:absolute;z-index:3;left:50%;top:50%;width:min(46vw,520px);aspect-ratio:1;margin:calc(min(46vw,520px) / -2) 0 0 calc(min(46vw,520px) / -2);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(143,227,223,.5) 0%,rgba(86,185,186,.16) 38%,rgba(86,185,186,0) 70%);opacity:.18;transform:scale(.8);transition:opacity .6s ease,transform .6s ease}
.fbi-fondo[data-fase="espera"] .fbi-luz{animation:fbi-latido 3.4s ease-in-out infinite}
.fbi-luz[data-brillo="1"]{opacity:.5;transform:scale(1)}
.fbi-luz[data-error]{background:radial-gradient(circle,rgba(255,138,116,.4) 0%,rgba(255,138,116,.1) 40%,rgba(255,138,116,0) 70%);opacity:.5}
.fbi-in{position:relative;z-index:2;min-height:inherit;display:flex;flex-direction:column;align-items:center}
.fbi-top{align-self:stretch;padding:32px 40px 0}
.fbi-flowbit{display:block;height:26px;width:auto}
.fbi-col{width:min(420px,calc(100% - 32px));margin:calc(min(36vh,360px) - 56px) 0 0;padding:32px;border-radius:20px;background:rgba(7,13,14,.88);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(191,240,238,.18);box-shadow:0 30px 80px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.05)}
.fbi-pie{align-self:stretch;margin-top:auto;padding:24px 40px 24px;display:flex;justify-content:center;align-items:center;gap:16px;font-size:12.5px;color:var(--fbi-suave)}
.fbi-privado,.fbi-firma{display:inline-flex;align-items:center;gap:8px}
.fbi-privado svg{width:14px;height:14px;flex:none}
.fbi-firma img{display:block;height:14px;width:auto}

.fbi-lock{display:flex;align-items:center;gap:12px;margin-bottom:20px;min-height:40px}
.fbi-donde{font-size:12.5px;line-height:1.25;color:var(--fbi-suave);padding-left:14px;border-left:1px solid var(--fbi-borde)}

.fbi-h1{margin:0 0 8px;font-size:34px;line-height:1.02;letter-spacing:-.03em;font-weight:700;text-wrap:balance;color:var(--fbi-tinta)}
.fbi-nota{margin:0 0 20px;color:var(--fbi-suave);font-size:15px}
.fbi-form{display:flex;flex-direction:column;gap:14px;margin:0}
.fbi-campo{display:flex;flex-direction:column;gap:7px}
.fbi-campo label{font-size:13px;font-weight:700;letter-spacing:.01em;color:var(--fbi-tinta)}
.fbi-input{position:relative;display:flex;align-items:center;height:52px;border-radius:12px;background:var(--fbi-campo);border:1px solid var(--fbi-borde);transition:border-color .2s,box-shadow .2s}
.fbi-input:focus-within{border-color:var(--fbi-foco);box-shadow:0 0 0 4px var(--fbi-anillo)}
.fbi-input[data-mal]{border-color:rgba(255,138,116,.7)}
.fbi-input[data-mal]:focus-within{box-shadow:0 0 0 4px rgba(255,138,116,.16)}
.fbi-input>svg{width:18px;height:18px;margin-left:15px;color:var(--fbi-suave);flex:none}
.fbi-input input{flex:1;min-width:0;height:100%;margin:0;border:0;border-radius:12px;background:transparent;color:var(--fbi-tinta);font:inherit;font-size:16px;padding:0 14px 0 11px;outline:none;box-shadow:none}
.fbi-input input:-webkit-autofill{-webkit-text-fill-color:var(--fbi-tinta);caret-color:var(--fbi-tinta);box-shadow:inset 0 0 0 100px #0c1516}
.fbi-ojo{width:44px;height:44px;margin-right:4px;border:0;border-radius:10px;background:transparent;color:var(--fbi-suave);display:grid;place-items:center;cursor:pointer;flex:none;padding:0}
.fbi-ojo:hover{color:var(--fbi-tinta)}
.fbi-ojo:focus-visible{outline:2px solid var(--fbi-foco);outline-offset:0}
.fbi-ojo svg{width:19px;height:19px}
.fbi-msg{margin:0;font-size:12.5px;line-height:1.35;color:var(--fbi-coral-suave)}
.fbi-caps{margin:0;font-size:12.5px;color:var(--fbi-amarillo)}
.fbi-reglas{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:13px;color:var(--fbi-suave)}
.fbi-reglas li{display:flex;gap:9px;align-items:center;transition:color .2s}
.fbi-reglas li::before{content:"";width:13px;height:13px;border-radius:50%;border:1.5px solid currentColor;flex:none;transition:background .2s}
.fbi-reglas li[data-ok="1"]{color:var(--fbi-ok)}
.fbi-reglas li[data-ok="1"]::before{background:currentColor;box-shadow:inset 0 0 0 2.5px #0a1213}

/* Aviso: qué pasó y qué hacer, sin decir si el usuario existe. */
.fbi-aviso{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;padding:12px 14px;border-radius:12px;background:rgba(255,128,104,.075);border:1px solid rgba(255,138,116,.3);animation:fbi-aparece .22s ease-out}
.fbi-aviso svg{width:20px;height:20px;margin-top:1px;color:var(--fbi-coral)}
.fbi-aviso b{display:block;font-size:14px;font-weight:700;color:#ffe3dc}
.fbi-aviso p{margin:3px 0 0;font-size:13.5px;line-height:1.45;color:#d9c6c1}
.fbi-aviso[data-tipo="listo"],.fbi-aviso[data-tipo="info"]{background:rgba(86,185,186,.1);border-color:rgba(143,227,223,.35)}
.fbi-aviso[data-tipo="listo"] svg,.fbi-aviso[data-tipo="info"] svg{color:var(--fbi-ok)}
.fbi-aviso[data-tipo="listo"] b,.fbi-aviso[data-tipo="info"] b{color:#e6fffc}
.fbi-aviso[data-tipo="listo"] p,.fbi-aviso[data-tipo="info"] p{color:#b9d6d4}
/* Sin logo del cliente (se desconoce hasta ingresar): sólo «Tu espacio en Flowbit», sin la raya. */
.fbi-lock>.fbi-donde:first-child{padding-left:0;border-left:0}

.fbi-boton{position:relative;margin-top:6px;height:54px;width:100%;border:0;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:10px;font:inherit;font-weight:700;font-size:16px;cursor:pointer;background:var(--fbi-boton);color:var(--fbi-boton-tinta);transition:background .2s,transform .12s}
.fbi-boton:hover{background:var(--fbi-boton-hover)}
.fbi-boton:active{transform:translateY(1px)}
.fbi-boton svg{width:18px;height:18px;transition:transform .25s,opacity .2s}
.fbi-boton:hover svg{transform:translateX(3px)}
.fbi-boton:focus-visible{outline:3px solid rgba(143,227,223,.7);outline-offset:2px}
.fbi-boton:disabled{cursor:default}
.fbi-boton.fbi-ocupado svg{opacity:0}
.fbi-boton.fbi-ocupado::after{content:"";position:absolute;right:20px;top:50%;width:17px;height:17px;margin-top:-8.5px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:fbi-gira .8s linear infinite}
.fbi-alt{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.fbi-alt-boton{display:flex;align-items:center;justify-content:center;gap:10px;height:48px;border-radius:12px;border:1px solid var(--fbi-borde);background:rgba(255,255,255,.03);color:var(--fbi-tinta);text-decoration:none;font-weight:700;font-size:15px}
.fbi-alt-boton:hover{border-color:rgba(191,240,238,.3)}
.fbi-alt-boton svg{width:17px;height:17px}
.fbi-link{background:none;border:0;padding:0;margin:0;font:inherit;font-size:13px;color:var(--fbi-tinta);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.fbi-link:focus-visible,.fbi-alt-boton:focus-visible{outline:2px solid var(--fbi-foco);outline-offset:3px;border-radius:4px}
.fbi-alt .fbi-link{align-self:flex-start}
.fbi-enlace{color:inherit;text-decoration:underline;text-underline-offset:2px}.fbi-enlace:hover{color:var(--fbi-tinta)}
.fbi-legal{display:flex;gap:16px;margin-top:8px}.fbi-legal .fbi-enlace{display:inline-flex;align-items:center;min-height:44px;font-size:12.5px;color:var(--fbi-suave)}
/* Aviso «en preparación» de los textos legales que el cliente todavía no declaró: se abre en la misma tarjeta con :target (sin rutas ni JavaScript). */
.fbi-legal-aviso{display:none;margin-top:12px}.fbi-legal-aviso:target{display:block}
.fbi-legal-caja{padding:16px;border-radius:12px;border:1px solid var(--fbi-borde);background:rgba(255,255,255,.03)}
.fbi-legal-caja h2{margin:0 0 8px;font-size:13.5px;line-height:1.3;font-weight:700;color:var(--fbi-tinta)}
.fbi-legal-caja p{margin:0 0 8px;font-size:13.5px;line-height:1.5;color:var(--fbi-suave)}
.fbi-legal-caja .fbi-enlace{display:inline-flex;align-items:center;min-height:44px}
.fbi-ayuda{margin:18px 0 0;font-size:13px;line-height:1.5;color:var(--fbi-suave)}
.fbi-ayuda .fbi-link{white-space:nowrap}
/* El enlace dentro del texto mide 44 px de alto para el dedo; el relleno se compensa con margen y la línea no cambia de alto. */
.fbi-ayuda .fbi-enlace{display:inline-block;box-sizing:border-box;min-height:44px;padding:12px 4px;margin:-12px -4px}

/* Salida: las manos se tocan, la luz lo cubre todo (el velo es la luz del contacto) y se entra al espacio por el portal del cargador (brand.tsx). */
.fbi-destello{position:absolute;z-index:6;left:50%;top:0;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:radial-gradient(circle,#fff 0%,#dffbf8 24%,#8fe3df 46%,rgba(86,185,186,0) 70%);opacity:0;pointer-events:none}
.fbi-velo{position:absolute;inset:0;z-index:7;background:radial-gradient(circle at 50% 38%,#ffffff 0%,#dffbf8 40%,#8fe3df 100%);opacity:0;pointer-events:none}
.fbi-saliendo .fbi-col,.fbi-saliendo .fbi-top,.fbi-saliendo .fbi-pie{opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s ease;pointer-events:none}
@keyframes fbi-gira{to{transform:rotate(360deg)}}
@keyframes fbi-aparece{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
@keyframes fbi-latido{0%,100%{opacity:.16;transform:scale(.82)}50%{opacity:.42;transform:scale(1)}}

/* Celular: la imagen de las manos arriba (sin video) y el formulario debajo. */
@container fbi (max-width:759px){
  .fbi-video{display:none}
  .fbi-fondo{height:250px}
  .fbi-fondo::before,.fbi-fondo::after{background-size:auto 100%}
  .fbi-fondo::before{background-image:url(manos/inicio-640.webp);background-image:image-set(url(manos/inicio-640.avif) type("image/avif"),url(manos/inicio-640.webp) type("image/webp"))}
  .fbi-fondo::after{background-image:url(manos/espera-640.webp);background-image:image-set(url(manos/espera-640.avif) type("image/avif"),url(manos/espera-640.webp) type("image/webp"))}
  .fbi-fondo[data-fase="contacto"]::after{background-image:url(manos/contacto-640.webp);background-image:image-set(url(manos/contacto-640.avif) type("image/avif"),url(manos/contacto-640.webp) type("image/webp"))}
  .fbi-top{padding:20px 20px 0}
  .fbi-col{margin:208px 0 0;padding:24px 20px 16px;border-radius:16px;background:rgba(7,13,14,.9)}
  .fbi-pie{padding:20px 20px 24px;flex-direction:column;align-items:flex-start;gap:8px}
  .fbi-lock{margin-bottom:16px;min-height:36px;gap:12px}
  .fbi-h1{font-size:30px;margin-bottom:8px}
  .fbi-nota{font-size:14.5px;margin-bottom:20px}
  .fbi-form{gap:12px}
  .fbi-input{height:50px}
  .fbi-boton{height:52px}
  .fbi-ayuda{margin-top:16px;font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){
  .fbi-aviso{animation:none}
  .fbi-fondo[data-fase="espera"] .fbi-luz{animation:none;opacity:.3}
  .fbi-fondo::after{transition:none}
  .fbi-saliendo .fbi-col,.fbi-saliendo .fbi-top,.fbi-saliendo .fbi-pie{transition:none}
  .fbi-boton.fbi-ocupado::after{animation-duration:2.4s}
}