/* ── Auth — Login profesional con fondo animado ─────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    --acento:        #2563eb;
    --acento-hov:    #1d4ed8;
    --acento-suave:  rgba(37,99,235,.12);
    --error:         #dc2626;
    --error-suave:   rgba(220,38,38,.08);
    --borde-input:   rgba(255,255,255,.2);
    --radio:         10px;
    --radio-lg:      16px;
    --fuente:        'Inter', system-ui, sans-serif;
    --trans:         160ms ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
    font-family: var(--fuente);
    min-height: 100vh;
    display: flex;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
}

/* ── Lado izquierdo — branding animado ───────────────────────── */
.auth-branding {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    overflow: hidden;
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 40%, #0f172a 100%);
    color: #fff;
}

/* Malla de puntos */
.auth-branding::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
}

/* Orbs animados */
.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .55;
    animation: flotar var(--dur, 8s) ease-in-out infinite alternate;
}
.orb-1 {
    width: 420px; height: 420px;
    background: radial-gradient(circle, #3b82f6, #6366f1);
    top: -120px; left: -100px;
    --dur: 9s;
}
.orb-2 {
    width: 300px; height: 300px;
    background: radial-gradient(circle, #8b5cf6, #ec4899);
    bottom: -80px; right: -60px;
    --dur: 11s;
    animation-delay: -3s;
}
.orb-3 {
    width: 200px; height: 200px;
    background: radial-gradient(circle, #06b6d4, #3b82f6);
    top: 50%; left: 60%;
    --dur: 7s;
    animation-delay: -5s;
}

@keyframes flotar {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(30px, -25px) scale(1.05); }
    100% { transform: translate(-20px, 20px) scale(.95); }
}

/* Contenido branding */
.auth-branding__logo {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -.03em;
    position: relative; z-index: 1;
    margin-bottom: .5rem;
}
.auth-branding__logo span { color: #60a5fa; }

.auth-branding__tagline {
    font-size: 1rem;
    color: rgba(255,255,255,.65);
    position: relative; z-index: 1;
    margin-bottom: 3rem;
}

.auth-features {
    position: relative; z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
    width: 100%;
    max-width: 320px;
}

.auth-feature {
    display: flex;
    align-items: center;
    gap: .875rem;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px;
    padding: .875rem 1rem;
    backdrop-filter: blur(8px);
    animation: aparecerIzq .6s ease both;
}
.auth-feature:nth-child(1) { animation-delay: .1s; }
.auth-feature:nth-child(2) { animation-delay: .2s; }
.auth-feature:nth-child(3) { animation-delay: .3s; }

@keyframes aparecerIzq {
    from { opacity: 0; transform: translateX(-20px); }
    to   { opacity: 1; transform: translateX(0); }
}

.auth-feature__icono {
    width: 38px; height: 38px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.auth-feature__texto strong {
    display: block;
    font-size: .875rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: .1rem;
}
.auth-feature__texto span {
    font-size: .775rem;
    color: rgba(255,255,255,.5);
}

.auth-branding__footer {
    position: absolute; bottom: 1.5rem;
    font-size: .75rem;
    color: rgba(255,255,255,.3);
    z-index: 1;
}

/* ── Lado derecho — formulario ───────────────────────────────── */
.auth-panel {
    width: 100%;
    max-width: 480px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 2.5rem;
    position: relative;
    overflow-y: auto;
}

.auth-form-inner {
    width: 100%;
    max-width: 360px;
    animation: aparecerDer .5s ease both;
}

@keyframes aparecerDer {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Encabezado del form */
.auth-form-logo {
    margin-bottom: 2rem;
}
.auth-form-logo__titulo {
    font-size: 1.5rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -.03em;
    margin-bottom: .25rem;
}
.auth-form-logo__titulo span { color: var(--acento); }
.auth-form-logo__sub {
    font-size: .875rem;
    color: #64748b;
}

.auth-form-heading {
    margin-bottom: 1.75rem;
}
.auth-form-heading h1 {
    font-size: 1.375rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -.02em;
    margin-bottom: .375rem;
}
.auth-form-heading p {
    font-size: .875rem;
    color: #64748b;
}

/* Campos */
.grupo-campo { margin-bottom: 1.125rem; }

.etiqueta {
    display: block;
    font-size: .8125rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: .375rem;
    letter-spacing: .01em;
}

.campo-wrapper {
    position: relative;
}
.campo-icono {
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
    display: flex;
}

.campo {
    width: 100%;
    padding: .65rem .875rem .65rem 2.375rem;
    border: 1.5px solid #e2e8f0;
    border-radius: var(--radio);
    font-size: .875rem;
    font-family: var(--fuente);
    background: #f8fafc;
    color: #0f172a;
    transition: border-color var(--trans), box-shadow var(--trans), background var(--trans);
}
.campo:focus {
    outline: none;
    border-color: var(--acento);
    background: #fff;
    box-shadow: 0 0 0 3px var(--acento-suave);
}
.campo::placeholder { color: #94a3b8; }

/* Toggle mostrar password */
.campo-toggle-pw {
    position: absolute;
    right: .75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #94a3b8;
    padding: 0;
    display: flex;
    transition: color var(--trans);
}
.campo-toggle-pw:hover { color: var(--acento); }

/* Botón submit */
.btn-primario {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    padding: .75rem 1rem;
    margin-top: 1.5rem;
    background: var(--acento);
    color: #fff;
    border: none;
    border-radius: var(--radio);
    font-size: .9375rem;
    font-weight: 600;
    font-family: var(--fuente);
    cursor: pointer;
    transition: background var(--trans), transform var(--trans), box-shadow var(--trans);
    box-shadow: 0 2px 8px rgba(37,99,235,.35);
    letter-spacing: .01em;
}
.btn-primario:hover {
    background: var(--acento-hov);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(37,99,235,.4);
}
.btn-primario:active { transform: translateY(0); box-shadow: none; }
.btn-primario:focus-visible {
    outline: 2px solid var(--acento);
    outline-offset: 2px;
}

/* Spinner dentro del botón */
.btn-spinner {
    display: none;
    width: 16px; height: 16px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
.btn-primario.cargando .btn-spinner { display: block; }
.btn-primario.cargando .btn-texto { opacity: .7; }

/* Alerta error */
.alerta-error {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    background: var(--error-suave);
    border: 1px solid #fca5a5;
    color: #991b1b;
    border-radius: var(--radio);
    padding: .75rem .875rem;
    font-size: .8125rem;
    margin-bottom: 1.25rem;
    animation: shake .4s ease;
}
.alerta-error svg { flex-shrink: 0; margin-top: 1px; }

@keyframes shake {
    0%,100% { transform: translateX(0); }
    20%      { transform: translateX(-6px); }
    40%      { transform: translateX(6px); }
    60%      { transform: translateX(-4px); }
    80%      { transform: translateX(4px); }
}

/* Divisor */
.auth-divisor {
    display: flex; align-items: center; gap: .75rem;
    margin: 1.5rem 0;
    color: #94a3b8; font-size: .75rem;
}
.auth-divisor::before, .auth-divisor::after {
    content: ''; flex: 1;
    height: 1px; background: #e2e8f0;
}

/* Link volver */
.auth-link {
    text-align: center;
    margin-top: 1.5rem;
    font-size: .8rem;
    color: #94a3b8;
}
.auth-link a {
    color: var(--acento);
    font-weight: 600;
    text-decoration: none;
    transition: color var(--trans);
}
.auth-link a:hover { color: var(--acento-hov); }

/* ── Responsive ── */
@media (max-width: 768px) {
    body { flex-direction: column; overflow: auto; }
    .auth-branding {
        flex: none;
        min-height: 200px;
        padding: 2rem 1.5rem 1.5rem;
    }
    .auth-features { display: none; }
    .auth-branding__logo { font-size: 1.5rem; }
    .auth-branding__tagline { margin-bottom: 0; font-size: .875rem; }
    .auth-panel {
        max-width: 100%;
        flex: 1;
        padding: 2rem 1.5rem;
    }
    .auth-branding__footer { display: none; }
}