/* =========================================================
   AUTH UI — unificado (login, register, forgot)
   ========================================================= */

/* ---------- Tokens globales para auth ---------- */
:root{
    --bg:#f6f8fb; --card:#fff; --text:#0f172a; --muted:#64748b;
    --border:rgba(2,6,23,.08); --ring:rgba(37,99,235,.20);
    --primary:#f95036;         /* Indigo 800 (CTA/nav) */
    --primary-600:#f95036;     /* Indigo 600 (hover)  */
    --primary-700:#1e40af;     /* Indigo 700          */
    --primary-900:#1e3a8a;     /* Indigo 900          */
    --success:#10b981; --danger:#ef4444;
    --radius-lg:16px; --radius-md:12px; --radius-sm:10px;
    --shadow:0 10px 30px rgba(2,8,23,.08);
    --aba-red:    #ef4444; /* rojo */
    --aba-yellow: #f59e0b; /* ámbar */
    --aba-blue:   #3b82f6; /* azul */
    --aba-green:  #10b981; /* verde */
}

/* ---------- Lienzo centrado (ambos wrappers) ---------- */
.auth-login,
.auth-page{
    min-height:95vh;
    display:flex; align-items:center; justify-content:center;
    padding:32px 16px;
    background:
            radial-gradient(1200px 700px at 100% 0, rgba(30,58,138,.08), transparent 60%),
            radial-gradient(1000px 600px at 0 100%, rgba(14,116,144,.06), transparent 60%),
            #F8FAFC;
    color:var(--text);
}

/* ---------- Card y cabecera ---------- */
.auth-login .auth-card,
.auth-page  .auth-card{
    width:100%; max-width:560px;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow);
    overflow:hidden;
}
.auth-login .auth-card-head,
.auth-page  .auth-card-head{
    padding:28px 28px 8px; text-align:center;
}
.auth-login .auth-card-body,
.auth-page  .auth-card-body{
    padding:18px 24px 24px;
}

/* ---------- Marca / badge (única definición) ---------- */
.auth-login .auth-brand,
.auth-page  .auth-brand{
    width:56px; height:56px; margin:0 auto 10px;
    display:grid; place-items:center;
    color:#333; border-radius:14px;

}
.auth-login .auth-brand .icon-user,
.auth-login .auth-brand .icon-exit2,
.auth-page  .auth-brand .icon-user,
.auth-page  .auth-brand .icon-exit2{
    font-size:24px; line-height:1; color:#fff;
    filter: drop-shadow(0 1px 0 rgba(255,255,255,.25));
}

/* ---------- Títulos/subtítulos ---------- */
.auth-login .auth-title,
.auth-page  .auth-title{
    margin:6px 0 4px; font-size:24px; font-weight:800; color:var(--text);
}
.auth-login .auth-sub,
.auth-page  .auth-sub{
    color:var(--muted); font-size:13px;
}

/* ---------- Campos ---------- */
.auth-login .auth-field,
.auth-page  .field{ position:relative; margin-bottom:12px; }

.auth-login .auth-ico,
.auth-page  .field-ico{
    position:absolute; left:12px; top:50%; transform:translateY(-50%);
    color:#94a3b8; pointer-events:none;
}

.auth-login .form-control,
.auth-page  .form-control{
    width:100%; height:44px;
    padding:10px 12px 10px 40px;
    border:1px solid var(--border); border-radius:var(--radius-sm);
    background:#fff; color:var(--text);
    transition:border-color .15s, box-shadow .15s, background .15s;
}
.auth-login .form-control:hover{ background:#FCFDFE; }
.auth-login .form-control:focus,
.auth-page  .form-control:focus{ border-color:var(--primary-600); box-shadow:0 0 0 3px var(--ring); outline:0; }

.auth-page .is-invalid{ border-color:var(--danger)!important; }
.auth-page .field-hint{ font-size:12px; color:var(--danger); margin-top:6px; }

/* ---------- Fila opciones / links ---------- */
.auth-login .auth-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin:6px 0 12px; }
.auth-login .auth-remember{ display:inline-flex; align-items:center; gap:8px; color:#334155; font-size:13px; }
.auth-login .auth-link{ color:var(--primary-900); text-decoration:none; font-weight:600; }
.auth-login .auth-link:hover{ text-decoration:underline; }

/* ---------- Botones ---------- */
.auth-login .auth-actions,
.auth-page  .auth-actions{ margin-top:12px; }

.auth-login .auth-btn,
.auth-page  .btn{
    display:inline-flex; align-items:center; justify-content:center; width:100%;
    min-height:44px; padding:10px 16px; border-radius:10px; border:1px solid transparent;
    font-weight:700; text-decoration:none;
    transition:background .15s, border-color .15s, box-shadow .15s, transform .03s;
}
.auth-login .auth-btn:active,
.auth-page  .btn:active{ transform:translateY(1px); }

.auth-login .auth-btn-primary,
.auth-page  .btn-primary{ background:var(--primary); border-color:var(--primary); color:#fff; }
.auth-login .auth-btn-primary:hover,
.auth-page  .btn-primary:hover{ background:var(--primary-600); border-color:var(--primary-600); }
.auth-login .auth-btn[disabled],
.auth-page  .btn-primary[disabled]{ opacity:.55; cursor:not-allowed; }

.auth-login .auth-btn-ghost,
.auth-page  .btn-ghost{ background:#fff; border:1px solid var(--border); color:#0f172a; }
.auth-login .auth-btn-ghost:hover,
.auth-page  .btn-ghost:hover{ border-color:#cbd5e1; }

/* ---------- Divider / legal ---------- */
.auth-login .auth-divider,
.auth-page  .auth-divider{
    position:relative; text-align:center; color:#6b7280; font-size:12.5px; margin:18px 0 10px;
}
.auth-login .auth-divider:before, .auth-login .auth-divider:after,
.auth-page  .auth-divider:before, .auth-page  .auth-divider:after{
    content:""; position:absolute; top:50%; width:38%; height:1px; background:var(--border);
}
.auth-login .auth-divider:before, .auth-page .auth-divider:before{ left:0; }
.auth-login .auth-divider:after,  .auth-page .auth-divider:after{ right:0; }

.auth-login .auth-legal,
.auth-page  .auth-legal{ color:#6b7280; font-size:12px; text-align:center; margin-top:8px; }
.auth-login .auth-legal a{ color:#0ea5e9; text-decoration:none; }
.auth-login .auth-legal a:hover{ text-decoration:underline; }

/* ---------- Alerts / errores ---------- */
.auth-login .auth-errors .alert,
.auth-page  .alert{ border-radius:12px; padding:10px 12px; font-size:14px; }
.auth-login .auth-errors .alert{ border:1px solid #FCA5A5; background:#FEF2F2; color:#7F1D1D; box-shadow:0 2px 8px rgba(239,68,68,.10); }
.auth-page  .alert-danger{ background:#fef2f2; border:1px solid #fecaca; color:#b91c1c; }
.auth-page  .alert-success{ background:#ecfdf5; border:1px solid #bbf7d0; color:#047857; }

/* ---------- Spinner ---------- */
.auth-login .auth-spinner,
.auth-page  .auth-spinner{
    display:inline-block; width:14px; height:14px; margin-left:8px;
    border:2px solid rgba(255,255,255,.6); border-top-color:#fff; border-radius:50%;
    animation:authspin .8s linear infinite;
}
@keyframes authspin{ to{ transform:rotate(360deg); } }

/* ---------- Grids y utilidades de formularios ---------- */
.auth-page .form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.auth-page .form-grid .field--full{ grid-column:1 / -1; }
@media (max-width:640px){ .auth-page .form-grid{ grid-template-columns:1fr; } }

.auth-register .pwd-toggle{ position:absolute; right:10px; top:50%; transform:translateY(-50%); border:0; background:transparent; color:#64748b; font-size:12px; cursor:pointer; }
.auth-register .pwd-inline{ display:none; margin-top:8px; }
@media (max-width:1023px){ .auth-register .pwd-inline{ display:block; } }

/* ---------- Panel flotante de requisitos (solo desktop) ---------- */
.auth-register .pwd-float{ position:fixed; right:32px; bottom:32px; z-index:40; }
@media (max-width:1023px){ .auth-register .pwd-float{ display:none; } }
.auth-register .pwd-card{
    width:360px; max-width:calc(100vw - 48px);
    background:var(--card); border:1px solid var(--border);
    border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:14px 14px 16px;
}
.auth-register .pwd-card__head{ font-size:13px; font-weight:700; color:var(--text); margin-bottom:8px; }

/* Barra fuerza */
.auth-register .pwd-strength{ height:6px; background:#e5e7eb; border-radius:999px; overflow:hidden; margin:6px 0 4px; }
.auth-register .pwd-strength__bar{ height:100%; width:0%; transition:width .25s ease; background:#9ca3af; }
.auth-register .pwd-strength__bar.weak{   background:#f87171; }
.auth-register .pwd-strength__bar.fair{   background:#facc15; }
.auth-register .pwd-strength__bar.good{   background:#34d399; }
.auth-register .pwd-strength__bar.strong{ background:#3b82f6; }
.auth-register .pwd-strength__label{ font-size:12px; color:#6b7280; }

/* Reglas de contraseña */
.pwd-rules{ list-style:none; padding:0; margin:8px 0 0; display:flex; flex-direction:column; gap:6px; }
.pwd-rule{ display:flex; align-items:center; gap:10px; font-size:13px; color:#334155; padding:6px 8px; border-radius:8px; }
.rule-icon{
    width:18px; height:18px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
    font-size:12px; font-weight:700; line-height:1; position:relative; flex:0 0 18px;
}
.pwd-rule.unmet .rule-icon{ background:#fef2f2; border:1px solid #fecaca; color:#dc2626; }
.pwd-rule.unmet .rule-icon::before{ content:"✕"; transform:translateY(-0.5px); }
.pwd-rule.met .rule-icon{ background:#10b981; border:1px solid #10b981; color:#fff; }
.pwd-rule.met .rule-icon::before{ content:"✔"; transform:translateY(-0.5px); }
.pwd-rule.met{ background:#ecfdf5; color:#065f46; }

/* ---------- Forgot ---------- */
.auth-forgot .field{ margin-bottom:12px; }

/* ---------- Cosas puntuales que ya tenías ---------- */
.icon-unlocked::before,
.icon-user-plus::before{ font-size:30px; }

.navbar-inverse{ background:#f95036; }

.auth-brand .icon-key{
    font-size: 28px;
}

.auth-brand .icon-user::before{
    font-size: 40px;
}

/* ===== Error badges por estado (reutiliza .auth-brand) ===== */
.auth-brand.badge-404{
    background:
            radial-gradient(120% 120% at 20% 20%, rgba(255,255,255,.18) 0, transparent 60%),
            linear-gradient(135deg,#2563eb,#1e3a8a);
}
.auth-brand.badge-500{
    background:
            radial-gradient(120% 120% at 20% 20%, rgba(255,255,255,.18) 0, transparent 60%),
            linear-gradient(135deg,#ef4444,#dc2626);
}
.auth-brand.badge-503{
    background:
            radial-gradient(120% 120% at 20% 20%, rgba(255,255,255,.18) 0, transparent 60%),
            linear-gradient(135deg,#f59e0b,#d97706);
}
.auth-brand.badge-429{
    background:
            radial-gradient(120% 120% at 20% 20%, rgba(255,255,255,.18) 0, transparent 60%),
            linear-gradient(135deg,#8b5cf6,#7c3aed);
}
.auth-brand.badge-csrf{
    background:
            radial-gradient(120% 120% at 20% 20%, rgba(255,255,255,.18) 0, transparent 60%),
            linear-gradient(135deg,#06b6d4,#0ea5e9);
}
/* tamaño icono dentro del badge (por si tu pack lo necesita) */
.auth-brand i{ font-size:24px; line-height:1; color:#fff; filter:drop-shadow(0 1px 0 rgba(255,255,255,.25)); }

/* Botones secundarios en páginas de error */
.auth-page .btn-row{ display:flex; gap:10px; flex-wrap:wrap; }
@media (max-width:480px){ .auth-page .btn-row{ flex-direction:column; } }

/* === FIX robusto para iconos de reglas (usa SVG mask, no Unicode) === */

/* 1) Neutralizamos cualquier "content" previo */
.pwd-rule .rule-icon::before{ content:""; }

/* 2) Base del icono redondo */
.pwd-rule .rule-icon{
    width:18px; height:18px; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    position:relative; flex:0 0 18px;
}

/* 3) Estados de la pastilla */
.pwd-rule.unmet .rule-icon{
    background:#fef2f2; border:1px solid #fecaca; color:#dc2626; /* rojo */
}
.pwd-rule.met .rule-icon{
    background:#10b981; border:1px solid #10b981; color:#fff;    /* verde */
}

/* 4) Icono con máscara SVG (siempre visible) */
.pwd-rule .rule-icon::before{
    width:12px; height:12px; display:block; content:"";
    background: currentColor;
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-position:center; mask-position:center;
    -webkit-mask-size:contain;    mask-size:contain;
}

/* ✕ para UNMET */
.pwd-rule.unmet .rule-icon::before{
    /* X (24x24) */
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill='%23000' d='M18.3 5.71a1 1 0 0 0-1.41 0L12 10.59 7.11 5.7A1 1 0 0 0 5.7 7.11L10.59 12l-4.9 4.89a1 1 0 1 0 1.41 1.42L12 13.41l4.89 4.9a1 1 0 0 0 1.42-1.41L13.41 12l4.9-4.89a1 1 0 0 0-.01-1.4z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill='%23000' d='M18.3 5.71a1 1 0 0 0-1.41 0L12 10.59 7.11 5.7A1 1 0 0 0 5.7 7.11L10.59 12l-4.9 4.89a1 1 0 1 0 1.41 1.42L12 13.41l4.89 4.9a1 1 0 0 0 1.42-1.41L13.41 12l4.9-4.89a1 1 0 0 0-.01-1.4z'/></svg>");
}

/* ✔ para MET */
.pwd-rule.met .rule-icon::before{
    /* Check (24x24) */
    background:#fff; /* blanco sobre la pastilla verde */
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>");
}

/* (Opcional) resalte de item cumplido */
.pwd-rule.met{ background:#ecfdf5; color:#065f46; }

/* Barra de fuerza (por si algún cascade la machacó) */
.pwd-strength{ height:6px; background:#e5e7eb; border-radius:999px; overflow:hidden; margin:6px 0 4px; }
.pwd-strength__bar{ height:100%; width:0%; transition:width .25s ease; background:#9ca3af; }
.pwd-strength__bar.weak{   background:#f87171; }
.pwd-strength__bar.fair{   background:#facc15; }
.pwd-strength__bar.good{   background:#34d399; }
.pwd-strength__bar.strong{ background:#3b82f6; }
.pwd-strength__label{ font-size:12px; color:#6b7280; }

/* ====== PASSWORD PANEL – GLOBAL (funciona esté donde esté en el DOM) ====== */

/* Flotante en escritorio */
.pwd-float{
    position: fixed; right: 32px; bottom: 32px; z-index: 40;
}
@media (max-width:1023px){
    .pwd-float{ display:none; }
}

/* Card del panel */
.pwd-card{
    width:360px; max-width:calc(100vw - 48px);
    background: var(--card); border:1px solid var(--border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow);
    padding:14px 14px 16px;
}
.pwd-card__head{ font-size:13px; font-weight:700; color:var(--text); margin-bottom:8px; }

/* Barra de fuerza (global) */
.pwd-strength{
    height:6px; background:#e5e7eb; border-radius:999px;
    overflow:hidden; margin:6px 0 4px;
}
.pwd-strength__bar{ height:100%; width:0%; transition:width .25s ease; background:#9ca3af; }
.pwd-strength__bar.weak{   background:#f87171; }
.pwd-strength__bar.fair{   background:#facc15; }
.pwd-strength__bar.good{   background:#34d399; }
.pwd-strength__bar.strong{ background:#3b82f6; }
.pwd-strength__label{ font-size:12px; color:#6b7280; }

/* Lista de reglas (global) */
.pwd-rules{
    list-style:none; padding:0; margin:8px 0 0;
    display:flex; flex-direction:column; gap:6px;
}
.pwd-rule{
    display:flex; align-items:center; gap:10px;
    font-size:13px; color:#334155;
    padding:6px 8px; border-radius:8px;
}

/* Icono circular + máscara SVG (robusto) */
.pwd-rule .rule-icon{
    width:18px; height:18px; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    position:relative; flex:0 0 18px;
}
.pwd-rule .rule-icon::before{ content:""; } /* neutraliza otros content */

.pwd-rule.unmet .rule-icon{
    background:#fef2f2; border:1px solid #fecaca; color:#dc2626;
}
.pwd-rule.met .rule-icon{
    background:#10b981; border:1px solid #10b981; color:#fff;
}

/* “X” y “✓” con máscara, no dependen de fonts */
.pwd-rule .rule-icon::before{
    width:12px; height:12px; display:block;
    background: currentColor;
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-position:center; mask-position:center;
    -webkit-mask-size:contain;    mask-size:contain;
}

/* ✕ (unmet) */
.pwd-rule.unmet .rule-icon::before{
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill='%23000' d='M18.3 5.71a1 1 0 0 0-1.41 0L12 10.59 7.11 5.7A1 1 0 0 0 5.7 7.11L10.59 12l-4.9 4.89a1 1 0 1 0 1.41 1.42L12 13.41l4.89 4.9a1 1 0 0 0 1.42-1.41L13.41 12l4.9-4.89a1 1 0 0 0-.01-1.4z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill='%23000' d='M18.3 5.71a1 1 0 0 0-1.41 0L12 10.59 7.11 5.7A1 1 0 0 0 5.7 7.11L10.59 12l-4.9 4.89a1 1 0 1 0 1.41 1.42L12 13.41l4.89 4.9a1 1 0 0 0 1.42-1.41L13.41 12l4.9-4.89a1 1 0 0 0-.01-1.4z'/></svg>");
}

/* ✔ (met) – blanco sobre pastilla verde */
.pwd-rule.met .rule-icon::before{
    background:#fff;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>");
}

/* Resaltado del ítem cumplido */
.pwd-rule.met{ background:#ecfdf5; color:#065f46; }


/* 404 – Not found (azules) */
.badge-404{
    background:
            radial-gradient(120% 120% at 20% 20%, rgba(255,255,255,.18) 0, transparent 60%),
            linear-gradient(135deg,#06b6d4,#0ea5e9);
    color: #fff;
    text-align: center;
}

/* 500 – Server error (rojos) */
.auth-brand.badge-500{
    background:
            radial-gradient(120% 120% at 20% 20%, rgba(255,255,255,.18) 0, transparent 60%),
            linear-gradient(135deg,#ef4444,#dc2626);
    text-align: center;
}

/* 503 – Maintenance (ámbar) */
.auth-brand.badge-503{
    background:
            radial-gradient(120% 120% at 20% 20%, rgba(255,255,255,.18) 0, transparent 60%),
            linear-gradient(135deg,#f59e0b,#d97706);
    text-align: center;
}

/* 429 – Rate limit (violetas) */
.auth-brand.badge-429{
    background:
            radial-gradient(120% 120% at 20% 20%, rgba(255,255,255,.18) 0, transparent 60%),
            linear-gradient(135deg,#8b5cf6,#7c3aed);
    text-align: center;
}

/* 403 – CSRF / acción no permitida (cian/azules) */
.auth-brand.badge-csrf{
    background:
            radial-gradient(120% 120% at 20% 20%, rgba(255,255,255,.18) 0, transparent 60%),
            linear-gradient(135deg,#06b6d4,#0ea5e9);
}

/* Icono SVG dentro del badge (tamaño y color coherentes) */
.auth-brand .brand-svg{
    width:28px; height:28px; display:block;
    color:#fff; /* stroke/fill via currentColor */
    filter:drop-shadow(0 1px 0 rgba(255,255,255,.25));
}

/* (Opcional) puntito de aviso en CSRF */
.auth-brand.badge-csrf::after{
    content:""; position:absolute; right:-2px; bottom:-2px;
    width:16px; height:16px; border-radius:50%;
    background:#f59e0b; box-shadow:0 2px 6px rgba(2,8,23,.25);
}
.auth-brand.badge-csrf::before{
    content:"!"; position:absolute; right:2px; bottom:-1px;
    font-weight:800; font-size:11px; color:#fff;
}

.auth-page .alert-info{
    background:#eff6ff;
    border:1px solid #bfdbfe;
    color:#1e40af;
    border-radius:10px;
    padding:10px 12px;
}


/* Badge ABA sin overlay ni halo blanco */
.auth-login .auth-brand.brand-aba,
.auth-page  .auth-brand.brand-aba{
    position: relative;
    width:56px; height:56px; border-radius:14px;
    display:grid; place-items:center; color:#333;
}

/* Mata cualquier overlay previo (por si quedó en caché) */
.auth-login .auth-brand.brand-aba::before,
.auth-page  .auth-brand.brand-aba::before{
    content: none !important;
}

/* Icono claro y nítido (sin fondo) */
.auth-login .auth-brand.brand-aba i,
.auth-page  .auth-brand.brand-aba i{
    position: relative;
    color:#333;
    font-size:24px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.25));
}