/* EIE SAFE · maqueta de login. Base: comun.css de la tanda l12 (escena a pantalla completa, tarjeta a la derecha, abajo en teléfono), sin cambiar medidas. */
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--fondo,#05060a);color:var(--texto,#eef1f7);font-family:"Space Grotesk",system-ui,sans-serif}
.tarjeta{position:fixed;right:6vw;top:50%;transform:translateY(-50%);width:min(360px,86vw);z-index:3;transition:opacity .6s,transform .8s cubic-bezier(.7,0,.2,1)}
.tarjeta.fuera{opacity:0;pointer-events:none;transform:translateY(-50%) translateX(40px) scale(.96)}
/* marca: escudo junto al nombre; el lema debajo abarca el ancho de los dos (lo ajusta ajustarLema en index.html) */
.tarjeta .marca{display:block;width:100%;margin-bottom:22px}
.tarjeta .fila{display:flex;align-items:center;gap:14px}
.tarjeta .fila img{width:54px;height:54px;object-fit:contain;display:block;image-rendering:auto}
.tarjeta h1{margin:0;font-size:34px;line-height:1;font-weight:800;letter-spacing:-.01em;white-space:nowrap}
.tarjeta h1 em{font-style:normal;color:var(--acento,#8cf)}
.tarjeta .sub{display:block;width:max-content;margin:10px 0 0;font-size:14px;line-height:1.2;opacity:.8;white-space:nowrap}
.tarjeta label{display:block;font-size:12.5px;margin:0 0 6px;opacity:.85}
.tarjeta input{width:100%;font:inherit;font-size:15px;color:inherit;margin-bottom:14px;outline:none}
.tarjeta button[type=submit]{width:100%;font:600 15px "Space Grotesk",sans-serif;cursor:pointer;border:0}
.tarjeta .olvido{display:block;text-align:center;margin:14px 0 6px;font-size:12.5px;opacity:.7;color:inherit;text-decoration:none}
/* la maqueta del resumen entra encima, subiendo desde abajo */
#app{position:fixed;inset:0;width:100%;height:100%;border:0;z-index:4;background:#f5f8fd;opacity:0;transform:translateY(7%);pointer-events:none;transition:opacity .7s,transform .9s cubic-bezier(.2,.8,.2,1)}
#app.visible{opacity:1;transform:none;pointer-events:auto}
@media (max-width:719px){
  .tarjeta{right:50%;top:auto;bottom:calc(28px + env(safe-area-inset-bottom));transform:translateX(50%);width:min(340px,90vw)}
  .tarjeta.fuera{transform:translateX(50%) translateY(30px) scale(.96)}
  .tarjeta .marca{margin-bottom:14px}.tarjeta .fila{gap:10px}.tarjeta .sub{font-size:12px;margin-top:6px}
  .tarjeta input{margin-bottom:10px}
}