/* =====================================================================
   auth_estilo.css — Estilo compartido de pantallas de acceso
   (login, 2FA, recuperar/cambiar contraseña, registro).
   Layout: panel azul de marca (izq.) + panel de formulario (der.).
   ===================================================================== */

:root{
    --primary:#0ea5e9; --primary-hover:#0284c7;
    --text:#0f172a; --muted:#64748b; --faint:#94a3b8; --border:#e2e8f0;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--text);background:#fff;}

.auth{min-height:100vh;display:grid;grid-template-columns:1.05fr 1fr;}

/* ---- Panel de marca (izquierda, azul) ---- */
.brand-panel{
    position:relative;overflow:hidden;color:#e0f2fe;
    background:linear-gradient(155deg,#082f49 0%,#0b3a5e 45%,#0e6da3 100%);
    display:flex;flex-direction:column;justify-content:center;padding:56px 56px 48px;
}
.brand-panel::before{
    content:"";position:absolute;inset:0;opacity:.10;
    background-image:radial-gradient(rgba(255,255,255,.9) 1px,transparent 1.4px);
    background-size:22px 22px;
}
.brand-panel::after{
    content:"";position:absolute;top:-120px;right:-120px;width:360px;height:360px;
    border-radius:50%;background:radial-gradient(circle,rgba(14,165,233,.35),transparent 70%);
}
.brand-body{position:relative;max-width:420px;margin-top:-40px;}
.brand-eyebrow{
    display:inline-block;font-size:12px;font-weight:600;letter-spacing:1.5px;
    text-transform:uppercase;color:#7dd3fc;border:1px solid rgba(125,211,252,.35);
    padding:6px 12px;border-radius:100px;margin-bottom:24px;
}
.brand-body h2{font-size:34px;font-weight:700;line-height:1.15;color:#fff;letter-spacing:-.5px;}
.brand-body>p{font-size:15px;color:#bae6fd;margin-top:18px;line-height:1.65;}
.features{display:flex;flex-direction:column;gap:16px;margin-top:36px;}
.feature{display:flex;align-items:center;gap:14px;}
.feature .ico{
    flex-shrink:0;width:42px;height:42px;border-radius:11px;
    background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);
    display:flex;align-items:center;justify-content:center;color:#7dd3fc;font-size:16px;
}
.feature .ttl{font-size:14.5px;font-weight:600;color:#fff;}
.feature .dsc{font-size:13px;color:#a5cfe6;}
.brand-foot{position:absolute;left:56px;bottom:44px;font-size:12.5px;color:#7ba9c4;}

/* ---- Panel de formulario (derecha) ---- */
.form-panel{display:flex;align-items:center;justify-content:center;padding:48px 32px;background:#fbfcfe;}
.form-card{width:100%;max-width:390px;animation:rise .55s ease both;}
.form-card.wide{max-width:600px;}
@keyframes rise{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}

.form-logo{display:flex;justify-content:center;margin-bottom:26px;}
.form-logo img{height:46px;width:auto;display:block;}

.form-card h1{font-size:25px;font-weight:700;text-align:center;letter-spacing:-.4px;}
.form-card .subtitle{color:var(--muted);font-size:14px;text-align:center;margin:9px 0 30px;line-height:1.55;}

form{display:flex;flex-direction:column;gap:18px;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media (max-width:520px){.form-grid{grid-template-columns:1fr;}}
.field{display:flex;flex-direction:column;}
.field label{display:block;font-size:12.5px;font-weight:600;color:#334155;margin-bottom:8px;}
.input-wrap{position:relative;display:flex;align-items:center;}
.input-wrap input,.input-wrap select{
    width:100%;padding:13px 15px 13px 44px;border:1.5px solid var(--border);
    border-radius:12px;background:#fff;font-size:14px;color:var(--text);
    font-family:'Inter',sans-serif;transition:border-color .15s,box-shadow .15s;
}
.input-wrap select{cursor:pointer;appearance:none;}
.input-wrap input:focus,.input-wrap select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(14,165,233,.14);}
.input-wrap i{position:absolute;left:16px;color:var(--faint);font-size:14px;pointer-events:none;transition:color .15s;}
.input-wrap input:focus ~ i,.input-wrap select:focus ~ i{color:var(--primary);}
/* Campo sin ícono (padding normal) */
.field .plain{padding-left:15px;}

.recaptcha{display:flex;justify-content:center;}

button,.btn{
    width:100%;padding:14px;background:var(--primary);color:#fff;border:none;
    border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;
    box-shadow:0 14px 26px -10px rgba(14,165,233,.6);
    transition:background .15s,transform .08s;font-family:'Inter',sans-serif;
    text-align:center;text-decoration:none;display:inline-block;
}
button:hover,.btn:hover{background:var(--primary-hover);}
button:active,.btn:active{transform:translateY(1px);}
.btn-secondary{background:#eef2f6;color:#334155;box-shadow:none;}
.btn-secondary:hover{background:#e2e8f0;}

.alert,.error{
    padding:12px 14px;border-radius:10px;font-size:13px;margin-bottom:22px;
    display:flex;gap:9px;align-items:center;line-height:1.5;
}
.error,.alert-danger{background:#fee2e2;color:#b91c1c;border:1px solid #fca5a5;}
.alert-success{background:#ecfdf5;color:#047857;border:1px solid #a7f3d0;}
.alert-info{background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe;}

.links{display:flex;justify-content:space-between;gap:12px;margin-top:26px;font-size:13px;flex-wrap:wrap;}
.links.center{justify-content:center;}
.links a{color:var(--primary);font-weight:600;text-decoration:none;}
.links a:hover{color:var(--primary-hover);text-decoration:underline;}

/* ---- Responsive ---- */
@media (max-width:900px){
    .auth{grid-template-columns:1fr;}
    .brand-panel{display:none;}
    .form-panel{padding:40px 20px;min-height:100vh;}
}
@media (max-width:360px){.g-recaptcha{transform:scale(.86);transform-origin:center top;}}