/* Pupitre — entrada (iniciar sesión y crear cuenta, views/perfil.js). Prefijo en-.
   Fondo de facetas en azul noche y cobalto (SVG procedural que genera perfil.js) con un resplandor celeste que deriva despacio,
   y una tarjeta ancha de vidrio esmerilado con los dos formularios y, encima, el panel cobalto de la bienvenida con aristas
   inclinadas y filo de luz (.en-panel), que se desliza de un lado al otro. Colores: los tokens de app.css (--accent/--brand #2B59E0,
   --accent-2 #2147C2, --brand-2 #1A3BA8 y los celestes del tema oscuro #6F93FF y #8DAAFF), fijos porque la entrada siempre es oscura. El cambio de modo, la entrada y el escalonado los anima perfil.js con la
   Web Animations API; aquí sólo hay transiciones pequeñas (foco, hover) y el movimiento del fondo, que la regla global de
   «reducir movimiento» de app.css apaga. Siempre oscura, con cualquier tema. */

.en{
  --en-cobalto:#2B59E0; --en-cobalto2:#2147C2; --en-cobalto3:#1A3BA8; --en-celeste:#6F93FF; --en-celeste2:#8DAAFF;
  --en-tinta:#F3F6FF; --en-tinta2:#D3DBF2; --en-tinta3:#B7C2E4;
  --en-linea:rgba(198,208,238,.26); --en-foco:#D6E2FF; --en-neg:#FF8F86; --en-pos:#72DCA2;
  position:fixed;inset:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;isolation:isolate;color-scheme:dark;
  display:flex;flex-direction:column;padding:32px 24px calc(32px + env(safe-area-inset-bottom,0px));
  background:#060D24;color:var(--en-tinta);
}
.en [hidden]{display:none!important}
.en :focus-visible{outline:2px solid var(--en-celeste2);outline-offset:3px}

/* ---------- fondo: facetas (background-image desde perfil.js), una veta de luz, viñeta y un resplandor que deriva 26 s ---------- */
.en-fondo{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:#060D24 center/cover no-repeat}
.en-fondo::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(116deg,transparent 40%,rgba(141,170,255,.06) 47%,rgba(141,170,255,.015) 50%,transparent 56%),
    radial-gradient(120% 95% at 50% 42%,transparent 38%,rgba(2,5,18,.66) 100%)}
.en-fondo::after{content:"";position:absolute;left:-25%;top:-25%;width:150%;height:150%;
  background:radial-gradient(30% 26% at 50% 50%,rgba(111,147,255,.2),rgba(43,89,224,.07) 55%,transparent 72%);
  animation:en-deriva 26s ease-in-out infinite alternate;will-change:transform}
@keyframes en-deriva{from{transform:translate3d(-15%,-11%,0)}to{transform:translate3d(14%,12%,0)}}

/* ---------- tarjeta: «entrar» ocupa la mitad izquierda (56 %) y «crear» la derecha (56 %), en la misma fila (la altura no cambia
   al pasar de uno a otro); encima va el panel azul de la bienvenida (44 %), que se desliza para tapar el formulario que no toca ---------- */
.en-card{position:relative;isolation:isolate;flex:none;margin:auto;width:min(880px,100%);min-height:540px;
  display:grid;grid-template-columns:minmax(0,44fr) minmax(0,12fr) minmax(0,44fr);grid-template-rows:minmax(0,1fr);border-radius:18px;overflow:hidden;
  background:linear-gradient(150deg,rgba(255,255,255,.1),rgba(255,255,255,.05) 50%,rgba(141,170,255,.07)) rgba(8,16,44,.36);
  border:1px solid rgba(141,170,255,.22);
  box-shadow:0 50px 100px -40px rgba(1,4,16,.92),0 18px 44px -20px rgba(1,4,16,.75),inset 0 1px 0 rgba(214,226,255,.16);
  -webkit-backdrop-filter:blur(20px) saturate(115%);backdrop-filter:blur(20px) saturate(115%)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .en-card{background:rgba(14,26,66,.96)} }
.en-card.en-sacude{animation:en-sacude .42s cubic-bezier(.36,.07,.19,.97)}
@keyframes en-sacude{15%{transform:translateX(-9px)}30%{transform:translateX(8px)}45%{transform:translateX(-6px)}60%{transform:translateX(4px)}75%{transform:translateX(-2px)}}
.en-card.en-bien{border-color:rgba(114,220,162,.45)}
.en-hoja{position:relative;z-index:1;min-width:0;display:flex;flex-direction:column;grid-row:1}
.en-hoja[data-hoja="entrar"]{grid-column:1 / 3}
.en-hoja[data-hoja="crear"]{grid-column:2 / 4}
/* lo que no toca queda oculto (perfil.js además lo vuelve inerte); mientras sale, .en-sale lo mantiene visible */
.en[data-modo="entrar"] [data-hoja="crear"],.en[data-modo="crear"] [data-hoja="entrar"],
.en[data-modo="entrar"] [data-bv="crear"],.en[data-modo="crear"] [data-bv="entrar"]{visibility:hidden}
.en .en-sale{visibility:visible!important}

/* ---------- panel de bienvenida: vidrio cobalto con las aristas inclinadas 5° y un filo de luz. Sobresale 30 px por cada lado
   (la tarjeta recorta el de afuera) y los formularios dejan 72 px de su lado interior para que la arista nunca los tape ---------- */
.en-panel{position:absolute;z-index:2;top:0;bottom:0;left:0;width:44%;transform:translateX(0)}
.en[data-modo="entrar"] .en-panel{transform:translateX(127.2727%)}
.en-panel-fondo{position:absolute;top:-6%;bottom:-6%;left:-30px;right:-30px;overflow:hidden;pointer-events:none;transform:skewX(5deg);
  background:linear-gradient(172deg,rgba(141,170,255,.3),rgba(43,89,224,.34) 38%,rgba(26,59,168,.46) 78%,rgba(14,32,104,.52));
  box-shadow:inset 0 0 70px rgba(111,147,255,.16)}
.en-panel-fondo::before,.en-panel-fondo::after{content:"";position:absolute;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,rgba(214,226,255,.08),rgba(214,226,255,.85) 34%,rgba(214,226,255,.4) 70%,rgba(214,226,255,.06));
  box-shadow:0 0 14px 1px rgba(111,147,255,.6)}
.en-panel-fondo::before{left:0}
.en-panel-fondo::after{right:0}
.en-destello{position:absolute;top:0;bottom:0;left:0;width:90px;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(214,226,255,.3),transparent);
  -webkit-mask:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);mask:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent)}
.en-panel-in{position:relative;height:100%;display:flex;flex-direction:column;padding:32px 40px 44px}
.en-bvs{display:grid;margin:auto 0}
.en-marca{display:flex;align-items:center;gap:10px}
.en-logo{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(140deg,var(--en-cobalto),var(--en-celeste));box-shadow:0 8px 20px -8px rgba(43,89,224,.8),inset 0 1px 0 rgba(255,255,255,.35)}
.en-marca-t{margin:0;font-family:var(--f-head);font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--en-tinta)}
.en-bv{grid-area:1/1;padding-top:24px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.en-bv-t{margin:0;font-family:var(--f-head);font-weight:700;font-size:clamp(30px,3.7vw,40px);line-height:1.02;letter-spacing:.005em;text-transform:uppercase;text-wrap:balance}
.en-bv-p{margin:0;max-width:30ch;color:var(--en-tinta2);font-size:15px;line-height:1.5}
.en-pildora{display:inline-flex;align-items:center;gap:8px;margin-top:8px;min-height:44px;padding:9px 22px;border-radius:999px;
  border:1px solid rgba(198,214,255,.6);background:rgba(255,255,255,.06);color:var(--en-tinta);font:inherit;font-weight:600;font-size:14.5px;cursor:pointer;
  transition:background-color .2s,border-color .2s,box-shadow .2s,transform .12s}
.en-pildora svg{transition:transform .2s}
@media (hover:hover){ .en-pildora:hover{background:rgba(255,255,255,.12);border-color:#fff;box-shadow:0 0 18px -6px rgba(141,170,255,.6)} .en-pildora:hover svg{transform:translateX(3px)} }
.en-pildora:active{transform:scale(.97)}

/* ---------- panel del formulario ---------- */
.en-form-in{flex:1;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:40px 48px 30px}
[data-hoja="entrar"] .en-form-in{padding-right:72px}
[data-hoja="crear"] .en-form-in{padding-left:72px}
.en-tit{margin:0 0 4px;font-family:var(--f-head);font-size:28px;font-weight:700;letter-spacing:-.015em}
.en-tit:focus{outline:none}
.en-form{display:flex;flex-direction:column;gap:14px}

/* campos sin caja: ícono a la izquierda, etiqueta como placeholder (sube al escribir) y línea inferior;
   con foco la línea blanca crece desde la izquierda, más gruesa y con resplandor */
.en-f{display:flex;flex-direction:column;gap:4px;min-width:0}
.en-campo{position:relative}
.en-campo::before,.en-campo::after{content:"";position:absolute;left:0;right:0;bottom:0;pointer-events:none}
.en-campo::before{height:1px;background:var(--en-linea);transition:background-color .2s}
.en-campo::after{height:2px;border-radius:2px;background:var(--en-foco);box-shadow:0 1px 8px rgba(111,147,255,.6);opacity:0;transform:scaleX(0);transform-origin:left center;
  transition:transform .38s cubic-bezier(.65,0,.35,1),opacity .15s}
.en-campo:focus-within::after{opacity:1;transform:scaleX(1)}
.en-in{display:block;width:100%;height:52px;margin:0;padding:18px 8px 4px 32px;border:0;border-radius:0;background:transparent;color:var(--en-tinta);font:inherit;font-size:15px;caret-color:var(--en-foco)}
.en-conver .en-in{padding-right:46px}
.en-in:focus{outline:none}
.en-in:disabled{opacity:.6}
.en-in:-webkit-autofill{-webkit-text-fill-color:var(--en-tinta);-webkit-box-shadow:0 0 0 60px #142356 inset;caret-color:var(--en-foco)}
.en-campo label{position:absolute;left:32px;top:21px;max-width:calc(100% - 84px);font-size:15px;line-height:1.3;color:var(--en-tinta3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;transform-origin:left top;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),color .2s}
.en-in:focus + label,.en-in:not(:placeholder-shown) + label,.en-in:-webkit-autofill + label{transform:translateY(-15px) scale(.76);color:var(--en-tinta2)}
.en-in:focus + label{color:var(--en-foco)}
.en-ic{position:absolute;left:2px;top:22px;display:grid;color:var(--en-tinta3);pointer-events:none;transition:color .2s}
.en-in:focus ~ .en-ic{color:var(--en-celeste2)}
.en-ok::before{background:rgba(114,220,162,.5)}
.en-ok .en-ic{color:var(--en-pos)}
.en-campo:has(.en-in[aria-invalid="true"])::before{background:var(--en-neg)}
.en-campo:has(.en-in[aria-invalid="true"])::after{background:var(--en-neg);box-shadow:0 1px 8px rgba(255,143,134,.4)}
.en-in[aria-invalid="true"] ~ .en-ic,.en-in[aria-invalid="true"] + label{color:var(--en-neg)}
.en .au-err{color:var(--en-neg);font-size:12.5px;padding-left:32px}
.en .au-err:not(:empty){animation:en-aparece .22s ease}
@keyframes en-aparece{from{opacity:0;transform:translateY(-3px)}}
.en .au-ver{right:-10px;color:var(--en-tinta3)}
.en .au-ver:hover{background:rgba(255,255,255,.08);color:#fff}
.en .au-ver[aria-pressed="true"]{color:var(--en-celeste2)}
.en-ojo{grid-area:1/1;display:grid;transition:opacity .2s,transform .3s cubic-bezier(.3,1.4,.5,1)}
.au-ver .en-ojo:last-child,.au-ver[aria-pressed="true"] .en-ojo:first-child{opacity:0;transform:scale(.5) rotate(-35deg)}
.au-ver[aria-pressed="true"] .en-ojo:last-child{opacity:1;transform:none}

.en-fila{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 12px;margin-top:-2px}
.en .au-check{color:var(--en-tinta2);font-size:13px}
.en .au-check input{width:16px;height:16px;accent-color:var(--en-celeste)}
.en .au-olv{color:var(--en-tinta2);font-weight:500;font-size:12.5px;padding:4px 2px}
.en .au-olv:hover{color:#fff}
.en .msg{color:var(--en-neg)}
.en .msg:not(:empty){animation:en-aparece .22s ease}
.en-alt{margin:2px 0 0;text-align:center;font-size:13.5px;color:var(--en-tinta2)}
.en-alt .link{color:var(--en-celeste2);font-weight:700;font-size:13.5px;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;padding:4px 2px}
.en .au-fuerza{padding-left:32px}
.en .au-fuerza small{color:var(--en-tinta3)}
.en .au-fuerza[data-n="1"] small{color:var(--en-neg)}
.en .au-barras i{background:rgba(198,208,238,.18)}
.en .au-fuerza[data-n="1"] i:nth-child(-n+1){background:var(--en-neg)}
.en .au-fuerza[data-n="2"] i:nth-child(-n+2){background:#E2B552}
.en .au-fuerza[data-n="3"] i:nth-child(-n+3){background:var(--en-celeste)}
.en .au-fuerza[data-n="4"] i{background:var(--en-pos)}
/* tipos de cuenta (sólo en la app completa): tres fichas compactas */
.en .au-roles-3{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.en .au-rol{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;row-gap:6px;padding:10px 6px;border:1px solid rgba(141,170,255,.2);border-radius:12px;background:rgba(255,255,255,.04);color:var(--en-tinta)}
.en .au-rol small,.en .au-rol .pf-opt-ck{display:none}
.en .au-rol b{font-size:12.5px;line-height:1.25}
.en .au-rol-ic{grid-row:auto;width:34px;height:34px;background:rgba(255,255,255,.08);color:#fff}
.en .au-rol:hover,.en .au-rol[aria-checked="true"]{border-color:var(--en-celeste)}
.en .au-rol[aria-checked="true"]{background:rgba(43,89,224,.22)}
.en .au-rol[aria-checked="true"] .au-rol-ic{background:var(--en-cobalto);color:#fff}

/* botón principal: píldora rellena con degradado cobalto -> celeste (el texto queda sobre el tramo cobalto: contraste AA),
   un brillo que la cruza al pasar el mouse y se hunde al pulsar; carga y check de éxito */
.en-btn{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;margin-top:6px;padding:11px 22px;border-radius:999px;
  border:1px solid rgba(141,170,255,.45);background:linear-gradient(120deg,var(--en-cobalto2) 0%,var(--en-cobalto) 55%,var(--en-celeste) 135%);
  color:#fff;font:inherit;font-weight:700;font-size:15px;line-height:1.25;cursor:pointer;
  box-shadow:0 14px 28px -14px rgba(43,89,224,.9),inset 0 1px 0 rgba(255,255,255,.28);
  transition:border-color .25s,box-shadow .25s,transform .12s}
.en-btn > *{position:relative;z-index:1}
.en-btn::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#127046,#1A8A57);opacity:0;transition:opacity .3s}
.en-btn::after{content:"";position:absolute;top:0;bottom:0;left:0;width:45%;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(214,226,255,.45),transparent);transform:translateX(-160%) skewX(-18deg)}
@media (hover:hover){ .en-btn:not(:disabled):hover{border-color:rgba(214,226,255,.75);box-shadow:0 0 26px -6px rgba(111,147,255,.75),0 14px 28px -14px rgba(43,89,224,.9),inset 0 1px 0 rgba(255,255,255,.35)}
  .en-btn:not(:disabled):hover::after{transform:translateX(330%) skewX(-18deg);transition:transform .75s cubic-bezier(.4,0,.2,1)} }
.en-btn:active:not(:disabled){transform:translateY(1px) scale(.985);box-shadow:inset 0 2px 9px rgba(6,13,36,.55),0 6px 14px -10px rgba(43,89,224,.8)}
.en-btn:disabled{cursor:progress}
.en-btn.en-listo{border-color:rgba(114,220,162,.5)}
.en-btn.en-listo::before{opacity:1}
.en-spin{width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:en-gira .7s linear infinite}
@keyframes en-gira{to{transform:rotate(360deg)}}
.en-ck{animation:en-pop .45s cubic-bezier(.3,1.6,.5,1) both}
.en-ck path{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;animation:en-traza .4s .08s cubic-bezier(.6,0,.2,1) forwards}
@keyframes en-pop{from{opacity:0;transform:scale(.4)}}
@keyframes en-traza{to{stroke-dashoffset:0}}

/* ---------- resto: nota del modo y, en la demo, entrar sin cuenta y perfiles locales (sólo en «Iniciar sesión») ---------- */
.en .au-demo{justify-content:center;text-align:center;color:var(--en-tinta3);margin:4px 0 0}
.en .pf-o{color:var(--en-tinta3);margin-top:0}
.en .pf-o::before,.en .pf-o::after{background:rgba(198,208,238,.18)}
.en .pf-invitado .btn.soft{min-height:44px;border-radius:999px;background:rgba(255,255,255,.06);color:var(--en-tinta);border:1px solid rgba(141,170,255,.28)}
.en .pf-invitado .btn.soft:hover{background:rgba(255,255,255,.1);filter:none}

/* ---------- celular: el panel azul queda arriba (compacto, con la arista de abajo casi horizontal) y los formularios se cruzan
   debajo; el que no toca no ocupa lugar y, mientras sale, se saca del flujo en su sitio (perfil.js anima la altura) ---------- */
@media (max-width:759px){
  .en{padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px))}
  .en-card{width:min(460px,100%);min-height:0;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;border-radius:16px;
    -webkit-backdrop-filter:blur(14px) saturate(115%);backdrop-filter:blur(14px) saturate(115%)}
  .en-panel,.en[data-modo="entrar"] .en-panel{position:relative;grid-area:1/1;width:auto;transform:none!important}
  .en-panel-fondo{top:-40%;bottom:0;left:-4%;right:-4%;transform:skewY(-3deg)}
  .en-panel-fondo::before{left:0;right:0;top:auto;bottom:0;width:auto;height:1px;
    background:linear-gradient(90deg,rgba(214,226,255,.06),rgba(214,226,255,.8) 34%,rgba(214,226,255,.4) 70%,rgba(214,226,255,.06))}
  .en-panel-fondo::after{display:none}
  .en-hoja[data-hoja]{grid-area:2/1}
  .en[data-modo="entrar"] [data-hoja="crear"],.en[data-modo="crear"] [data-hoja="entrar"]{display:none}
  .en .en-hoja.en-sale{display:flex!important;position:absolute;left:0;right:0;grid-area:auto}
  .en-panel-in{padding:18px 22px 24px}
  .en-logo{width:30px;height:30px;border-radius:9px}
  .en-marca-t{font-size:16px}
  .en-bv{margin:0;padding-top:14px;gap:8px}
  .en-bv-t{font-size:25px}
  .en-bv-p{font-size:14px}
  .en-pildora{min-height:38px;margin-top:4px;padding:7px 16px;font-size:13.5px}
  .en-form-in,[data-hoja] .en-form-in{padding:26px 22px 22px;gap:12px}
  .en-tit{font-size:23px}
}
/* «Reducir movimiento»: app.css apaga animaciones con «*», que no alcanza a los seudoelementos; el brillo del fondo se detiene aquí */
@media (prefers-reduced-motion:reduce){
  .en-fondo::after{animation:none}
  .en-ck path{stroke-dashoffset:0}
}