/* auth.css — estilos compartidos de las pantallas de acceso (login, recuperación).
   Extraído del login para reutilizar el mismo diseño navy #1E5BD6 / oro #E0A526. */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body { font-family: 'Poppins', 'Segoe UI', Arial, sans-serif; -webkit-font-smoothing: antialiased; }
input::placeholder { color: #9AA6BC; }

@keyframes floatA { 0%,100%{transform:translateY(0) rotate(var(--rot));} 50%{transform:translateY(-14px) rotate(var(--rot));} }
@keyframes floatB { 0%,100%{transform:translateY(0) rotate(var(--rot));} 50%{transform:translateY(-20px) rotate(var(--rot));} }
@keyframes fadeUp { from{opacity:0;transform:translateY(16px);} to{opacity:1;transform:translateY(0);} }

.page { display:flex; min-height:100vh; width:100%; background:#fff; overflow:hidden; }

/* ===== Panel izquierdo / Marca ===== */
.brand { position:relative; flex:1 1 56%; min-width:0; padding:44px 56px; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; background:radial-gradient(1100px 700px at 18% 12%, #EAF2FE 0%, #EEF4FC 42%, #F6F9FD 100%); }
.ring { position:absolute; border-radius:50%; pointer-events:none; }
.ring--blue { top:-160px; left:-140px; width:520px; height:520px; background:radial-gradient(circle at center, rgba(30,91,214,0.10), rgba(30,91,214,0) 68%); }
.ring--gold { bottom:-180px; left:34%; width:560px; height:560px; background:radial-gradient(circle at center, rgba(224,165,38,0.12), rgba(224,165,38,0) 66%); }
.dots { position:absolute; inset:0; background-image:radial-gradient(rgba(16,51,110,0.05) 1px, transparent 1px); background-size:26px 26px; opacity:.5; pointer-events:none; }

.brand-header { position:relative; display:flex; align-items:center; gap:14px; z-index:3; }
.brand-logo { width:56px; height:56px; border-radius:15px; background:#fff; box-shadow:0 8px 22px rgba(16,51,110,0.14); display:flex; align-items:center; justify-content:center; overflow:hidden; border:1px solid #E7EDF7; flex-shrink:0; }
.brand-logo img { width:44px; height:auto; display:block; }
.brand-title { font-weight:700; font-size:16px; color:#12294F; letter-spacing:.2px; }
.brand-sub { font-weight:600; font-size:10.5px; letter-spacing:2.4px; color:#8B97AE; margin-top:3px; }

.brand-mid { position:relative; z-index:3; width:100%; max-width:520px; }
.cards { position:relative; height:306px; margin-bottom:6px; }
.card { position:absolute; z-index:2; }
.card-inner { background:#fff; border:1px solid #EEF1F7; border-radius:16px; box-shadow:0 20px 40px -18px rgba(16,51,110,0.28); padding:15px; }
.card-icon { width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; }
.card-name { margin-top:15px; font-size:12.5px; font-weight:600; color:#26324A; }
.bar { border-radius:4px; background:#EEF1F6; }
.dot { width:9px; height:9px; border-radius:50%; }
.c1 { top:0; left:0; --rot:-6deg; animation:floatA 7s ease-in-out infinite; }
.c2 { top:20px; right:0; --rot:5deg; animation:floatB 8.5s ease-in-out infinite; }
.c3 { top:168px; left:16px; --rot:6deg; animation:floatB 7.8s ease-in-out infinite; }
.c4 { top:186px; right:22px; --rot:-5deg; animation:floatA 9s ease-in-out infinite; }

.headline { animation:fadeUp .7s ease both; }
.headline h1 { margin:0; font-size:44px; line-height:1.08; font-weight:800; letter-spacing:-1.1px; color:#12233F; }
.headline h1 span { color:#1E5BD6; }
.headline p { margin:18px 0 0; font-size:15.5px; line-height:1.5; color:#5C6880; font-weight:400; max-width:420px; }
.brand-footer { position:relative; z-index:3; font-size:11px; font-weight:500; letter-spacing:1.2px; color:#98A2B6; }

/* ===== Panel derecho / Formulario ===== */
.form-panel { flex:1 1 44%; min-width:440px; display:flex; align-items:center; justify-content:center; padding:40px; background:#FBFCFE; }
.card-form { width:100%; max-width:420px; background:#fff; border:1px solid #EBEFF6; border-radius:22px; box-shadow:0 30px 70px -30px rgba(16,51,110,0.28); padding:44px 42px 40px; animation:fadeUp .6s ease both; }
.eyebrow { text-align:center; font-size:11px; font-weight:600; letter-spacing:3px; color:#AAB4C6; }
.card-form h2 { margin:12px 0 0; text-align:center; font-size:30px; font-weight:700; color:#12294F; letter-spacing:-.5px; }
.card-form .lead { margin:9px 0 0; text-align:center; font-size:13.5px; color:#8A95AB; font-weight:400; }

.alert { margin-top:24px; padding:12px 14px; border-radius:12px; font-size:13px; line-height:1.45; display:flex; align-items:flex-start; gap:10px; }
.alert svg { width:18px; height:18px; flex-shrink:0; margin-top:1px; }
.alert-error { background:#FDECEC; color:#C4392C; border:1px solid #F7C9C4; }
.alert-success { background:#E9F7EF; color:#159C58; border:1px solid #C4EAD4; }
.alert-info { background:#EAF2FE; color:#1E5BD6; border:1px solid #C7DCFB; }

.field-group { margin-top:20px; }
.field-group.first { margin-top:30px; }
.field-top { display:flex; align-items:baseline; justify-content:space-between; }
.field-label { display:block; font-size:11px; font-weight:600; letter-spacing:1.4px; color:#7A879F; }
.field-link { font-size:12px; font-weight:500; color:#1E5BD6; text-decoration:none; }
.field-hint { margin-top:7px; font-size:11.5px; color:#98A2B6; line-height:1.4; }
.field { margin-top:9px; display:flex; align-items:center; gap:11px; height:52px; padding:0 16px; border-radius:13px; background:#F4F7FB; border:1.6px solid #E3E9F2; transition:border-color .18s, background .18s, box-shadow .18s; }
.field:focus-within { background:#fff; border-color:#1E5BD6; box-shadow:0 0 0 4px rgba(30,91,214,0.12); }
.f-icon { stroke:#98A2B6; transition:stroke .18s; flex-shrink:0; }
.field:focus-within .f-icon { stroke:#1E5BD6; }
.f-input { flex:1; min-width:0; border:none; outline:none; background:transparent; font-family:inherit; font-size:14.5px; color:#233149; }
.pw-toggle { border:none; background:transparent; cursor:pointer; padding:4px; display:flex; color:#98A2B6; transition:color .18s; }
.pw-toggle:hover { color:#1E5BD6; }

.btn-submit { margin-top:28px; width:100%; height:54px; border:none; border-radius:14px; cursor:pointer; font-family:inherit; font-size:15px; font-weight:600; color:#fff; letter-spacing:.2px; background:linear-gradient(135deg,#153E82 0%,#1E5BD6 100%); box-shadow:0 16px 30px -12px rgba(30,91,214,0.6); display:flex; align-items:center; justify-content:center; gap:10px; transition:transform .15s, box-shadow .2s; }
.btn-submit:hover { transform:translateY(-2px); }
.btn-submit:active { transform:translateY(0); }
.btn-submit:disabled { opacity:.7; cursor:not-allowed; transform:none; }
.btn-arrow { display:flex; width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,0.18); align-items:center; justify-content:center; }

.form-help { margin-top:24px; text-align:center; font-size:13px; color:#8A95AB; }
.form-help a { color:#1E5BD6; font-weight:500; text-decoration:none; }

.back-link { margin-top:22px; text-align:center; }
.back-link a { display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:500; color:#1E5BD6; text-decoration:none; }
.back-link a:hover { text-decoration:underline; }

.dev-box { margin-top:18px; padding:12px 14px; border-radius:12px; background:#FFF7E6; border:1px solid #F3DFA9; font-size:12px; color:#8A6D1B; line-height:1.5; word-break:break-all; }
.dev-box b { color:#6B540F; }
.dev-box a { color:#1E5BD6; }

/* ===== Responsive ===== */
@media (max-width: 900px) { .brand { display:none; } .form-panel { flex:1 1 100%; min-width:0; padding:24px 16px; } }
@media (max-width: 480px) { .card-form { padding:32px 24px 28px; border-radius:18px; } .card-form h2 { font-size:26px; } }