/* ═══════════════════════════════════════════════════════════════
   LOGIN.CSS  —  Rueda de Negocios · Huaynafex
   Paleta: Carbón #0f1117  ·  Esmeralda #059669
   Fuentes: Lora (serif, una sola familia para todo)
═══════════════════════════════════════════════════════════════ */

/* ── VARIABLES ────────────────────────────────────────────── */
:root {
    --carbon:  #0f1117;              /* Negro Carbón — panel derecho   */
    --carbon2: #1a2035;              /* Carbón secundario — gradientes  */
    --em:      #059669;              /* Esmeralda — acentos y CTAs      */
    --em-l:    #34d399;              /* Esmeralda claro — brillos       */
    --em-dim:  rgba(5,150,105,.12); /* Esmeralda translúcido           */
    --text:    #1a1a1a;              /* Texto principal                 */
    --muted:   #64748b;              /* Texto secundario                */
    --border:  #d1e8df;              /* Borde suave con tono verde      */
    --bg:      #f4faf7;              /* Fondo página — crema verde      */
    --white:   #ffffff;
}

/* ── RESET BÁSICO ─────────────────────────────────────────── */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ── BODY ─────────────────────────────────────────────────── */
body {
    font-family: 'Lora', serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

/* ── TARJETA PRINCIPAL ────────────────────────────────────── */
.login-card {
    display: grid;
    grid-template-columns: 55fr 45fr;
    max-width: 940px;
    width: 100%;
    min-height: 600px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow:
        0 4px 6px rgba(0,0,0,.05),
        0 20px 60px rgba(5,150,105,.10),
        0 40px 80px rgba(15,17,23,.08);
    animation: cardEntrada .55s cubic-bezier(.34,1.2,.64,1) both;
}

@keyframes cardEntrada {
    from { opacity: 0; transform: translateY(24px) scale(.985); }
    to   { opacity: 1; transform: none; }
}


/* ════════════════════════════════════════════════════════════
   PANEL IZQUIERDO — Formulario (fondo blanco)
════════════════════════════════════════════════════════════ */
.login-form-panel {
    background: var(--white);
    padding: 3.5rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.login-mobile-logo {
    display: none;
    margin-bottom: 2rem;
    text-align: center;
}
.login-mobile-logo img {
    height: 34px;
    width: auto;
}

/* Encabezado */
.login-heading {
    margin-bottom: 2.2rem;
}
.login-heading-tag {
    display: inline-block;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--em);
    margin-bottom: .5rem;
}
.login-heading h1 {
    font-family: 'Lora', serif;
    font-size: 2.15rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.15;
}
.login-heading p {
    font-size: .875rem;
    color: var(--muted);
    margin-top: .4rem;
    line-height: 1.55;
}

/* ── Alerta de error ── */
.login-error {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    background: #fff0f0;
    border: 1.5px solid #fca5a5;
    border-radius: 10px;
    padding: .75rem 1rem;
    margin-bottom: 1.4rem;
    font-size: .83rem;
    color: #c62828;
    animation: sacudir .35s ease;
}
@keyframes sacudir {
    0%,100% { transform: translateX(0); }
    25%      { transform: translateX(-6px); }
    75%      { transform: translateX(6px); }
}

/* ── Alerta throttle (demasiados intentos) ── */
.login-error.login-throttle {
    background: #fff8e1;
    border-color: #fbbf24;
    color: #92400e;
}

/* ── Grupo de campo ── */
.login-field {
    margin-bottom: 1.3rem;
    position: relative;
}

.login-label {
    display: block;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #67748e;
    margin-bottom: .42rem;
}

.login-input-wrap {
    position: relative;
}

.login-input-wrap .icon-left {
    position: absolute;
    left: .9rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: .85rem;
    color: var(--muted);
    pointer-events: none;
    transition: color .2s;
}

.login-input-wrap .icon-right {
    position: absolute;
    right: .9rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: .85rem;
    color: var(--muted);
    cursor: pointer;
    transition: color .2s;
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
}
.login-input-wrap .icon-right:hover { color: var(--em); }

.login-input {
    width: 100%;
    padding: .75rem 2.8rem .75rem 2.6rem;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    font-family: 'Lora', serif;
    font-size: .92rem;
    color: var(--text);
    background: #fff;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}

/* Focus — borde esmeralda + sombra suave */
.login-input:focus {
    border-color: var(--em);
    box-shadow: 0 0 0 3px var(--em-dim);
}

.login-input-wrap:focus-within .icon-left {
    color: var(--em);
}

/* ── Fila "¿Olvidaste tu contraseña?" ── */
.login-forgot-row {
    display: flex;
    justify-content: flex-end;
    margin-top: -.5rem;
    margin-bottom: 1.6rem;
}
.login-forgot-link {
    font-size: .74rem;
    color: var(--muted);
    text-decoration: none;
    transition: color .2s;
}
.login-forgot-link:hover { color: var(--em); }

/* ── Botón principal ── */
.login-btn {
    width: 100%;
    padding: .9rem 1.5rem;
    background: var(--em);
    color: var(--white);
    border: none;
    border-radius: 10px;
    font-family: 'Lora', serif;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .2px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    transition: background .2s, transform .2s, box-shadow .2s, opacity .2s;
}
.login-btn:hover {
    background: #047857;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(5,150,105,.30);
}
.login-btn:active {
    transform: translateY(0);
    box-shadow: none;
}
/* Estado cargando — se activa al enviar */
.login-btn:disabled,
.login-btn.loading {
    opacity: .72;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ── Enlace "Volver al inicio" ── */
.login-back {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: 1.4rem;
    font-size: .77rem;
    color: var(--muted);
    text-decoration: none;
    transition: color .2s;
}
.login-back:hover { color: var(--em); }


/* ════════════════════════════════════════════════════════════
   PANEL DERECHO — Marca / Visual (fondo carbón)
════════════════════════════════════════════════════════════ */
.login-brand-panel {
    background: linear-gradient(150deg, var(--carbon) 0%, var(--carbon2) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2.5rem;
    position: relative;
    overflow: hidden;
    text-align: center;
}

/* Patrón de puntos decorativo */
.login-brand-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
}

/* Glow esmeralda en la esquina inferior derecha */
.login-brand-panel::after {
    content: '';
    position: absolute;
    bottom: -80px;
    right: -80px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(5,150,105,.22) 0%, transparent 70%);
    pointer-events: none;
}

.login-brand-content {
    position: relative;
    z-index: 1;
}

/* Logos en la parte superior */
.login-brand-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2.2rem;
}
.login-brand-logos img {
    height: 36px;
    width: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: .85;
}
.login-brand-logo-sep {
    width: 1px;
    height: 24px;
    background: rgba(255,255,255,.15);
}

/* Ícono central decorativo */
.login-brand-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: rgba(5,150,105,.15);
    border: 1.5px solid rgba(5,150,105,.35);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}
.login-brand-icon i {
    font-size: 1.6rem;
    color: var(--em-l);
}

/* Título */
.login-brand-title {
    font-family: 'Lora', serif;
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 700;
    color: var(--white);
    line-height: 1.15;
    margin-bottom: .5rem;
}
.login-brand-title em {
    font-style: italic;
    color: var(--em-l);
}

/* Subtítulo */
.login-brand-sub {
    font-size: .83rem;
    color: rgba(255,255,255,.45);
    line-height: 1.65;
    max-width: 230px;
    margin: 0 auto 2rem;
}

/* Línea separadora esmeralda */
.login-brand-divider {
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--em), transparent);
    margin: 0 auto 1.8rem;
}

/* Pills de datos del evento */
.login-brand-pills {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    align-items: center;
}
.login-brand-pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(5,150,105,.08);
    border: 1px solid rgba(5,150,105,.20);
    border-radius: 50px;
    padding: .35rem 1rem;
    font-size: .74rem;
    color: rgba(255,255,255,.6);
    white-space: nowrap;
}
.login-brand-pill i {
    font-size: .67rem;
    color: var(--em-l);
}


/* ════════════════════════════════════════════════════════════
   RESPONSIVE — Móvil
════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
    body {
        align-items: flex-start;
        padding: 1.5rem 1rem;
    }
    .login-card {
        grid-template-columns: 1fr;
        min-height: auto;
        border-radius: 16px;
    }
    .login-brand-panel {
        display: none;
    }
    .login-form-panel {
        padding: 2.5rem 2rem;
    }
    .login-mobile-logo {
        display: block;
    }
}

@media (max-width: 400px) {
    .login-form-panel { padding: 2rem 1.5rem; }
}