/* ============================================================
   LOGIN — PORTAL HOGAR — MAX ANIMATIONS
============================================================ */

:root {
    --bg:           #070b14;
    --bg-card:      rgba(255,255,255,0.03);
    --bg-input:     rgba(255,255,255,0.05);
    --border:       rgba(255,255,255,0.08);
    --border-focus: #f0a030;
    --text:         #dde0ec;
    --text-bright:  #eef0f8;
    --text-muted:   rgba(220,224,240,0.38);
    --acento:       #f0a030;
    --azul:         #5eaaff;
    --rojo:         #ff6b7a;
    --radius:       16px;
    --radius-sm:    10px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Outfit', sans-serif;
    background-color: var(--bg);
    color: var(--text);
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

/* ── Partículas flotantes ── */
.login-particulas {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.login-particulas span {
    position: absolute;
    display: block;
    border-radius: 50%;
    background: var(--acento);
    opacity: 0;
    animation: particula 10s infinite ease-in-out;
}

.login-particulas span:nth-child(1)  { width:4px; height:4px; left:10%; animation-delay:0s; animation-duration:12s; }
.login-particulas span:nth-child(2)  { width:3px; height:3px; left:25%; animation-delay:2s; animation-duration:9s; background:var(--azul); }
.login-particulas span:nth-child(3)  { width:5px; height:5px; left:40%; animation-delay:4s; animation-duration:14s; }
.login-particulas span:nth-child(4)  { width:2px; height:2px; left:55%; animation-delay:1s; animation-duration:11s; background:var(--azul); }
.login-particulas span:nth-child(5)  { width:4px; height:4px; left:70%; animation-delay:3s; animation-duration:13s; }
.login-particulas span:nth-child(6)  { width:3px; height:3px; left:85%; animation-delay:5s; animation-duration:10s; background:var(--azul); }
.login-particulas span:nth-child(7)  { width:5px; height:5px; left:15%; animation-delay:6s; animation-duration:15s; }
.login-particulas span:nth-child(8)  { width:2px; height:2px; left:60%; animation-delay:7s; animation-duration:8s; background:var(--azul); }

@keyframes particula {
    0%   { opacity:0; bottom:-10px; transform:translateX(0) scale(0.5); }
    10%  { opacity:0.6; }
    90%  { opacity:0.3; }
    100% { opacity:0; bottom:110%; transform:translateX(60px) scale(1.2); }
}

/* ── Orbes animados de fondo ── */
.login-orbe {
    position: fixed;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    z-index: 0;
}

.login-orbe--1 {
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(240,160,48,0.2), transparent 70%);
    top: -200px; left: -200px;
    animation: orbe1 9s ease-in-out infinite alternate;
}

.login-orbe--2 {
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(94,170,255,0.18), transparent 70%);
    bottom: -150px; right: -150px;
    animation: orbe2 11s ease-in-out infinite alternate;
}

.login-orbe--3 {
    width: 350px; height: 350px;
    background: radial-gradient(circle, rgba(240,160,48,0.08), transparent 70%);
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    animation: orbe3 7s ease-in-out infinite alternate;
}

@keyframes orbe1 {
    from { transform: translate(0,0) scale(1); }
    to   { transform: translate(60px,40px) scale(1.15); }
}
@keyframes orbe2 {
    from { transform: translate(0,0) scale(1); }
    to   { transform: translate(-50px,-30px) scale(1.1); }
}
@keyframes orbe3 {
    from { transform: translate(-50%,-50%) scale(1); opacity:0.5; }
    to   { transform: translate(-48%,-52%) scale(1.2); opacity:1; }
}

/* ── Grid decorativo ── */
.login-grid {
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
    z-index: 0;
    mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
    animation: gridMove 20s linear infinite;
}

@keyframes gridMove {
    from { background-position: 0 0; }
    to   { background-position: 48px 48px; }
}

/* ── Wrapper split ── */
.login-wrapper {
    display: flex;
    width: 100%;
    max-width: 920px;
    min-height: 560px;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,0.06);
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.04),
        0 32px 80px rgba(0,0,0,0.7),
        0 0 120px rgba(240,160,48,0.07);
    position: relative;
    z-index: 1;
    animation: wrapperEntrada 0.8s cubic-bezier(0.22,1,0.36,1) both;
}

@keyframes wrapperEntrada {
    from { opacity:0; transform:translateY(40px) scale(0.95); }
    to   { opacity:1; transform:translateY(0) scale(1); }
}

/* ── Panel izquierdo ── */
.login-panel-izq {
    flex: 1;
    background: linear-gradient(135deg, rgba(240,160,48,0.1) 0%, rgba(94,170,255,0.05) 100%);
    border-right: 1px solid rgba(255,255,255,0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 36px;
    position: relative;
    overflow: hidden;
    animation: panelIzqEntrada 1s cubic-bezier(0.22,1,0.36,1) 0.2s both;
}

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

/* Anillos decorativos giratorios */
.login-anillos {
    position: absolute;
    width: 400px;
    height: 400px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.login-anillos span {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(240,160,48,0.1);
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    animation: girarAnillo 20s linear infinite;
}

.login-anillos span:nth-child(1) { width:380px; height:380px; animation-duration:25s; }
.login-anillos span:nth-child(2) { width:280px; height:280px; animation-duration:18s; animation-direction:reverse; border-color:rgba(94,170,255,0.08); }
.login-anillos span:nth-child(3) { width:180px; height:180px; animation-duration:12s; }

@keyframes girarAnillo {
    from { transform:translate(-50%,-50%) rotate(0deg); }
    to   { transform:translate(-50%,-50%) rotate(360deg); }
}

/* Punto brillante en los anillos */
.login-anillos span::after {
    content:'';
    position:absolute;
    width:6px; height:6px;
    border-radius:50%;
    background:var(--acento);
    top:0; left:50%;
    transform:translateX(-50%);
    box-shadow:0 0 12px var(--acento);
}

.login-anillos span:nth-child(2)::after { background:var(--azul); box-shadow:0 0 12px var(--azul); }
.login-anillos span:nth-child(3)::after { display:none; }

/* Brand */
.login-brand {
    position: relative;
    z-index: 1;
    text-align: center;
    animation: brandEntrada 1s cubic-bezier(0.22,1,0.36,1) 0.5s both;
}

@keyframes brandEntrada {
    from { opacity:0; transform:translateY(20px) scale(0.9); }
    to   { opacity:1; transform:translateY(0) scale(1); }
}

.login-brand__icono {
    width: 72px; height: 72px;
    background: linear-gradient(135deg, #f0a030, #e08020);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    position: relative;
    animation: iconoPulso 3s ease-in-out infinite;
}

@keyframes iconoPulso {
    0%,100% {
        box-shadow: 0 8px 32px rgba(240,160,48,0.35), 0 0 0 0 rgba(240,160,48,0.4);
    }
    50% {
        box-shadow: 0 8px 48px rgba(240,160,48,0.55), 0 0 0 14px rgba(240,160,48,0);
    }
}

.login-brand__icono i {
    font-size: 36px;
    color: #070b14;
    animation: iconoRebote 3s ease-in-out infinite;
}

@keyframes iconoRebote {
    0%,100% { transform:translateY(0); }
    50%      { transform:translateY(-4px); }
}

.login-brand__titulo {
    font-size: 26px;
    font-weight: 600;
    color: var(--text-bright);
    letter-spacing: -0.03em;
    margin-bottom: 8px;
}

.login-brand__titulo span { color: var(--acento); }

.login-brand__desc {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.6;
    max-width: 200px;
    margin: 0 auto;
}

/* Features con entrada escalonada */
.login-features {
    position: relative;
    z-index: 1;
    margin-top: 36px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.login-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    font-size: 12px;
    color: var(--text-muted);
    opacity: 0;
    animation: featureEntrada 0.6s cubic-bezier(0.22,1,0.36,1) forwards;
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
}

.login-feature:hover {
    background: rgba(240,160,48,0.06);
    border-color: rgba(240,160,48,0.15);
    transform: translateX(4px);
    color: var(--text);
}

.login-feature:nth-child(1) { animation-delay: 0.8s; }
.login-feature:nth-child(2) { animation-delay: 1.0s; }
.login-feature:nth-child(3) { animation-delay: 1.2s; }

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

.login-feature i {
    font-size: 16px;
    color: var(--acento);
    flex-shrink: 0;
}

/* ── Panel derecho — formulario ── */
.login-card {
    width: 380px;
    flex-shrink: 0;
    background: rgba(255,255,255,0.02);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px 40px;
    animation: cardEntrada 0.8s cubic-bezier(0.22,1,0.36,1) 0.3s both;
}

@keyframes cardEntrada {
    from { opacity:0; transform:translateX(30px); }
    to   { opacity:1; transform:translateX(0); }
}

.login-titulo {
    font-size: 22px;
    font-weight: 600;
    color: var(--text-bright);
    letter-spacing: -0.02em;
    margin-bottom: 6px;
    animation: textoBaja 0.6s cubic-bezier(0.22,1,0.36,1) 0.5s both;
}

.login-subtitulo {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 32px;
    animation: textoBaja 0.6s cubic-bezier(0.22,1,0.36,1) 0.6s both;
}

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

/* ── Grupos con entrada escalonada ── */
.login-grupo {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
    opacity: 0;
    animation: textoBaja 0.6s cubic-bezier(0.22,1,0.36,1) forwards;
}

.login-grupo:nth-child(1) { animation-delay: 0.7s; }
.login-grupo:nth-child(2) { animation-delay: 0.85s; }

.login-grupo label {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: color 0.2s;
}

.login-grupo:focus-within label { color: var(--acento); }

/* ── Inputs ── */
.login-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.login-input-wrap i {
    position: absolute;
    left: 14px;
    color: var(--text-muted);
    font-size: 17px;
    pointer-events: none;
    transition: color 0.25s, transform 0.25s;
}

.login-input-wrap:focus-within i {
    color: var(--acento);
    transform: scale(1.1);
}

.login-input-wrap input {
    width: 100%;
    padding: 12px 14px 12px 42px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-bright);
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
    outline: none;
}

.login-input-wrap input:focus {
    border-color: var(--border-focus);
    background: rgba(240,160,48,0.05);
    box-shadow: 0 0 0 3px rgba(240,160,48,0.1), 0 4px 20px rgba(0,0,0,0.2);
}

.login-input-wrap input:valid:not(:placeholder-shown) {
    border-color: rgba(34,211,162,0.4);
    background: rgba(34,211,162,0.04);
}

.login-input-wrap input::placeholder { color: rgba(220,224,240,0.2); }

/* ── Botón ── */
.login-btn {
    width: 100%;
    padding: 13px;
    margin-top: 8px;
    background: linear-gradient(135deg, #f0a030, #e08020);
    color: #070b14;
    border: none;
    border-radius: var(--radius-sm);
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    letter-spacing: 0.01em;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 24px rgba(240,160,48,0.3);
    opacity: 0;
    animation: textoBaja 0.6s cubic-bezier(0.22,1,0.36,1) 1s forwards;
}

/* Shimmer en el botón */
.login-btn::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
    animation: shimmer 2.5s ease-in-out infinite;
}

@keyframes shimmer {
    0%   { left: -100%; }
    100% { left: 200%; }
}

.login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 40px rgba(240,160,48,0.5);
}

.login-btn:active {
    transform: translateY(0) scale(0.99);
}

/* ── Error con shake ── */
.login-error {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,107,122,0.08);
    border: 1px solid rgba(255,107,122,0.25);
    border-radius: var(--radius-sm);
    color: #ff8a96;
    font-size: 13px;
    padding: 10px 14px;
    margin-bottom: 16px;
    animation: shake 0.4s ease, fadeIn 0.3s ease;
}

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

@keyframes fadeIn {
    from { opacity:0; }
    to   { opacity:1; }
}

/* ── Footer ── */
.login-footer {
    text-align: center;
    margin-top: 24px;
    font-size: 11px;
    color: rgba(220,224,240,0.18);
    letter-spacing: 0.08em;
    animation: textoBaja 0.6s cubic-bezier(0.22,1,0.36,1) 1.2s both;
}

/* ── Responsive ── */
@media (max-width: 700px) {
    .login-panel-izq { display: none; }
    .login-wrapper {
        max-width: 420px;
        min-height: auto;
        border-radius: var(--radius);
        margin: 16px;
    }
    .login-card { width: 100%; padding: 36px 28px; }
}