/* Pantallas de ingreso (templates/auth/_layout.php: login, recuperar, clave nueva, invitación, 2FA y registro).
   Maqueta de Eugenio (26-09, «sin velo»): foto de la mina entera de fondo (app.css, «Fondo de las pantallas de ingreso»),
   logo horizontal arriba (intro.css) y una tarjeta blanca centrada con campos celestes y botón amarillo de la marca.
   El Login 2 (dos columnas) se retiró el 26-09; sus estilos ya no están. */

.sf-ingreso-col{display:contents}
.sf-ingreso-intro{margin-bottom:28px}

/* Tarjeta */
.sf-ingreso-tarjeta{position:relative;max-height:calc(100vh - 11rem);overflow:auto;padding:30px 30px 26px;border-radius:12px;
  background:#fff;border:1px solid rgba(255,255,255,.8);box-shadow:0 22px 50px -12px rgba(0,0,0,.55),0 4px 14px rgba(0,0,0,.18);color:#1f2937}
.sf-ingreso-tarjeta h1{margin:0 0 6px;font-size:26px;line-height:1.2;font-weight:700;color:#111827;letter-spacing:-.01em}
.sf-ingreso-tarjeta h1 + p{margin:0 0 22px;font-size:14.5px;line-height:1.45;color:#52627a;text-align:left}
body .sf-ingreso-tarjeta form.space-y-3 > :not([hidden]) ~ :not([hidden]){margin-top:18px}
.sf-ingreso-tarjeta .label{margin-bottom:7px;font-size:13.5px;font-weight:600;color:#334155}
.sf-ingreso-tarjeta .input{height:46px;padding:0 14px;border:1px solid #d3deec;border-radius:7px;background:#eef4fc;font-size:15px;color:#0f172a;transition:border-color .15s,box-shadow .15s,background .15s}
.sf-ingreso-tarjeta .input:focus{outline:none;border-color:#7aa7e0;background:#f5f9ff;box-shadow:0 0 0 3px rgba(47,128,237,.18)}
.sf-ingreso-tarjeta .input.text-2xl{height:54px;font-size:24px}
/* Botón ancho completo, amarillo de la marca con texto oscuro */
body .sf-ingreso-tarjeta form > .btn-primario{margin-top:24px}
.sf-ingreso-tarjeta .btn-primario{display:flex;align-items:center;justify-content:center;gap:10px;height:48px;border:0;border-radius:7px;
  background:#FCC602;color:#111827;font-size:16px;font-weight:600;box-shadow:0 2px 6px rgba(180,130,0,.25)}
.sf-ingreso-tarjeta .btn-primario:hover{background:#f0b800;color:#111827}
.sf-ingreso-tarjeta .btn-primario:active{background:#e0ab00}
.sf-ingreso-tarjeta .btn-primario:focus-visible{outline:2px solid #1b66cc;outline-offset:2px}
.sf-ingreso-tarjeta .btn-primario svg{width:19px;height:19px;flex-shrink:0}
/* Enlace centrado debajo (¿Olvidó su clave?, Volver a ingresar, Cancelar) */
.sf-ingreso-tarjeta form ~ div{margin-top:18px;font-size:14px}
.sf-ingreso-tarjeta form ~ div a{color:#52627a}
.sf-ingreso-tarjeta form ~ div a:hover{color:#1b66cc;text-decoration:underline}
.sf-flash{box-shadow:0 4px 14px rgba(0,0,0,.2)}

/* Pantallas bajas (notebook 1280×720): logo y tarjeta un poco más compactos para que todo quepa sin scroll */
@media (max-height:760px){
  .sf-ingreso-intro{margin-bottom:18px}
  .sf-ingreso-tarjeta{padding:24px 28px 20px;max-height:calc(100vh - 9rem)}
  .sf-ingreso-tarjeta h1 + p{margin-bottom:16px}
  body .sf-ingreso-tarjeta form.space-y-3 > :not([hidden]) ~ :not([hidden]){margin-top:14px}
  body .sf-ingreso-tarjeta form > .btn-primario{margin-top:20px}
}
/* Teléfono: tarjeta a todo el ancho con 16 px de margen (lo da el padding del body) */
@media (max-width:640px){
  .sf-ingreso-intro{margin-bottom:20px}
  .sf-ingreso-tarjeta{padding:22px 20px 20px;max-height:calc(100vh - 8.5rem)}
  .sf-ingreso-tarjeta h1{font-size:23px}
  .sf-ingreso-tarjeta h1 + p{font-size:14px;margin-bottom:18px}
}