/* ═══════════════════════════════════════════════════════════
   InfoxLab · auth.css  v3.0
   Usado por: login.php · registro.php · recuperar.php
   Tema: oscuro cálido · Fraunces + Plus Jakarta Sans
═══════════════════════════════════════════════════════════ */

:root {
    --bg0:     #0b0f1a;
    --bg1:     #0f1624;
    --bg2:     #131e30;
    --surf:    #18263e;
    --surf2:   #1e304e;
    --bord:    rgba(255,255,255,.07);
    --bord2:   rgba(255,107,53,.22);

    --t1: #f5f8ff;
    --t2: #8ba0bc;
    --t3: #4d6480;

    --orange:   #FF6B35;
    --orange-g: linear-gradient(135deg, #FF6B35, #ff9a5c);
    --green:    #22C55E;
    --red:      #EF4444;

    --max-auth: 440px;
    --r:   12px;
    --r-s:  8px;
    --r-l: 20px;

    --sh-card: 0 24px 80px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.05);
    --sh-glow: 0 0 48px rgba(255,107,53,.12);

    --ease: cubic-bezier(.4,0,.2,1);
    --dur: .2s;

    --ff-head: 'Fraunces', Georgia, serif;
    --ff-body: 'Plus Jakarta Sans', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin:0; padding:0; }
html { height:100%; }

body {
    font-family: var(--ff-body);
    background: var(--bg0);
    color: var(--t1);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
a { color:inherit; text-decoration:none; }

/* ─── FONDO DECORATIVO ───────────────────────────────────── */
.auth-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.abg-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,107,53,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,107,53,.035) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: radial-gradient(ellipse 70% 60% at 30% 20%, black 20%, transparent 70%);
}
.abg-blob { position:absolute; border-radius:50%; filter:blur(100px); }
.abg-blob.b1 {
    width:600px; height:400px; top:-150px; left:-150px;
    background: radial-gradient(ellipse, rgba(255,107,53,.09) 0%, transparent 70%);
}
.abg-blob.b2 {
    width:400px; height:300px; bottom:-80px; right:-80px;
    background: radial-gradient(ellipse, rgba(34,197,94,.06) 0%, transparent 70%);
}

/* ─── SHELL ───────────────────────────────────────────────── */
.auth-shell {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 20px 32px;
}

/* ─── TOPBAR ──────────────────────────────────────────────── */
.auth-topbar {
    width: 100%;
    max-width: var(--max-auth);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0 28px;
}

.auth-logo {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--ff-body);
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: -.035em;
    color: var(--t2);
    transition: color var(--dur);
}
.auth-logo b { color:var(--t1); font-weight:800; }
.auth-logo:hover { color:var(--t1); }

.topbar-back {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--t3);
    transition: color var(--dur);
}
.topbar-back:hover { color:var(--t2); }

/* ─── MAIN ────────────────────────────────────────────────── */
.auth-main {
    width: 100%;
    max-width: var(--max-auth);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ─── TARJETA ─────────────────────────────────────────────── */
.auth-card {
    background: var(--bg1);
    border: 1px solid var(--bord);
    border-radius: var(--r-l);
    padding: 36px 32px;
    box-shadow: var(--sh-card), var(--sh-glow);
    display: flex;
    flex-direction: column;
    gap: 20px;
    animation: cardIn .45s var(--ease) both;
}

@keyframes cardIn {
    from { opacity:0; transform: translateY(20px) scale(.98); }
    to   { opacity:1; transform:none; }
}

/* ─── CABECERA ────────────────────────────────────────────── */
.card-head { text-align:center; padding-bottom:4px; }

.card-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px; height: 52px;
    background: rgba(255,107,53,.08);
    border: 1px solid var(--bord2);
    border-radius: var(--r);
    margin-bottom: 16px;
}

.card-head h1 {
    font-family: var(--ff-head);
    font-size: 1.6rem;
    font-weight: 900;
    letter-spacing: -.03em;
    margin-bottom: 6px;
}
.card-head p { color:var(--t2); font-size:.9rem; }

/* ─── ALERTAS ─────────────────────────────────────────────── */
.alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 15px;
    border-radius: var(--r-s);
    font-size: .875rem;
    line-height: 1.55;
    border: 1px solid transparent;
}
.alert-icon { flex-shrink:0; margin-top:1px; }
.alert-sub  { display:block; font-size:.78rem; margin-top:4px; opacity:.75; font-style:normal; }

.alert-success { background:rgba(34,197,94,.08);   border-color:rgba(34,197,94,.25);  color:#86efac; }
.alert-error   { background:rgba(239,68,68,.08);   border-color:rgba(239,68,68,.25);  color:#fca5a5; }
.alert-info    { background:rgba(59,130,246,.08);  border-color:rgba(59,130,246,.25); color:#93c5fd; }
.alert-warning { background:rgba(251,191,36,.08);  border-color:rgba(251,191,36,.25); color:#fde68a; }

/* ─── FORMULARIO ──────────────────────────────────────────── */
.auth-form { display:flex; flex-direction:column; gap:18px; }

/* Field */
.field { display:flex; flex-direction:column; gap:6px; }

.field-lbl {
    font-size: .78rem;
    font-weight: 700;
    color: var(--t2);
    letter-spacing: .05em;
    text-transform: uppercase;
}

.field-label-row {
    display:flex; align-items:center; justify-content:space-between;
}

.field-forgot {
    font-size: .78rem;
    color: var(--t3);
    font-weight: 600;
    transition: color var(--dur);
}
.field-forgot:hover { color:var(--orange); }

/* Input wrapper */
.field-wrap { position:relative; display:flex; align-items:center; }

.field-ico {
    position: absolute;
    left: 13px;
    color: var(--t3);
    pointer-events: none;
    flex-shrink: 0;
    transition: color var(--dur);
}

.field-wrap input {
    width: 100%;
    padding: .72em 1em .72em 2.6em;
    background: var(--surf);
    border: 1.5px solid var(--bord);
    border-radius: var(--r-s);
    color: var(--t1);
    font-family: var(--ff-body);
    font-size: .95rem;
    outline: none;
    -webkit-appearance: none;
    transition: border-color var(--dur), box-shadow var(--dur), background var(--dur);
}
.field-wrap input::placeholder { color:var(--t3); }

.field-wrap input:focus {
    border-color: var(--orange);
    box-shadow: 0 0 0 3px rgba(255,107,53,.14);
    background: var(--surf2);
}
.field-wrap:focus-within .field-ico { color:var(--orange); }

/* Error state */
.field.is-error .field-wrap input {
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(239,68,68,.12);
}
.field-err { font-size:.78rem; color:#fca5a5; }

/* Ojo */
.field-eye {
    position:absolute; right:10px;
    background:none; border:none; cursor:pointer;
    color:var(--t3); padding:4px;
    display:flex; align-items:center;
    border-radius:4px;
    transition: color var(--dur), background var(--dur);
}
.field-eye:hover { color:var(--t2); background:rgba(255,255,255,.05); }

/* ─── CHECKBOX ────────────────────────────────────────────── */
.check-row {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}
.check-input { position:absolute; opacity:0; width:0; height:0; }

.check-box {
    width: 18px; height: 18px; min-width:18px;
    background: var(--surf);
    border: 1.5px solid var(--bord);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--dur);
}
.check-input:checked + .check-box {
    background: var(--orange-g);
    border-color: var(--orange);
}
.check-box svg { display:none; }
.check-input:checked + .check-box svg { display:block; }

.check-txt { font-size:.85rem; color:var(--t2); }

/* ─── BOTÓN LOGIN ─────────────────────────────────────────── */
.btn-login {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: .82em 1.5em;
    background: var(--orange-g);
    color: #fff;
    font-family: var(--ff-body);
    font-weight: 700;
    font-size: 1rem;
    border: none;
    border-radius: var(--r-s);
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(255,107,53,.35);
    transition: transform var(--dur), box-shadow var(--dur), opacity var(--dur);
    margin-top: 4px;
    position: relative;
    overflow: hidden;
}
.btn-login::after {
    content:''; position:absolute; inset:0;
    background:rgba(255,255,255,.07); opacity:0;
    transition:opacity var(--dur);
}
.btn-login:hover::after { opacity:1; }
.btn-login:hover { transform:translateY(-1px); box-shadow:0 8px 28px rgba(255,107,53,.5); }
.btn-login:active { transform:translateY(0); }
.btn-login.is-loading { opacity:.75; cursor:not-allowed; }

.bl-txt  { flex:1; text-align:center; }
.bl-arr, .bl-spin { flex-shrink:0; }
.bl-spin { animation: spin .8s linear infinite; }

@keyframes spin {
    from { transform:rotate(0deg); }
    to   { transform:rotate(360deg); }
}

/* ─── SEPARADOR ───────────────────────────────────────────── */
.divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--t3);
    font-size: .78rem;
}
.divider::before,
.divider::after {
    content:''; flex:1; height:1px; background:var(--bord);
}

/* ─── BOTÓN REGISTRO ──────────────────────────────────────── */
.btn-register {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: .75em 1.5em;
    background: transparent;
    color: var(--t2);
    font-family: var(--ff-body);
    font-weight: 600;
    font-size: .88rem;
    border: 1.5px solid var(--bord);
    border-radius: var(--r-s);
    cursor: pointer;
    transition: all var(--dur);
    text-align: center;
    line-height: 1.4;
}
.btn-register:hover {
    color:var(--t1);
    border-color:rgba(255,255,255,.2);
    background:var(--surf);
}

/* ─── SEGURIDAD ───────────────────────────────────────────── */
.auth-secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: .73rem;
    color: var(--t3);
    text-align: center;
}

/* ─── FOOTER ──────────────────────────────────────────────── */
.auth-foot {
    width: 100%;
    max-width: var(--max-auth);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 24px;
    border-top: 1px solid var(--bord);
    margin-top: 8px;
    font-size: .76rem;
    color: var(--t3);
}
.auth-foot-links { display:flex; gap:16px; }
.auth-foot-links a { color:var(--t3); transition:color var(--dur); }
.auth-foot-links a:hover { color:var(--orange); }

/* ─── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width:480px) {
    .auth-card   { padding:24px 18px; }
    .card-head h1 { font-size:1.3rem; }
    .auth-foot   { flex-direction:column; align-items:center; text-align:center; }
}

@media (min-height:700px) {
    .auth-shell   { justify-content:center; }
    .auth-topbar  {
        position:absolute; top:0; left:50%;
        transform:translateX(-50%); padding-top:20px;
    }
}

@media (prefers-reduced-motion:reduce) {
    *,*::before,*::after {
        animation-duration:.01ms !important;
        transition-duration:.01ms !important;
    }
}