/* ============================================================
   IRON HALL — Login Page
   Consistent with Design System v3 · Dark Athletic Editorial
   ============================================================ */

:root {
    --red:      #C41E3A;
    --red-dark: #8B1020;
    --black:    #080808;
    --dark:     #111111;
    --border:   #222222;
    --border-2: #2e2e2e;
    --white:    #FFFFFF;
    --muted:    #666666;

    --ff-display: "Bebas Neue", sans-serif;
    --ff-body:    "Roboto", sans-serif;
    --ff-ui:      "Montserrat", sans-serif;
}

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

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: var(--black);
    font-family: var(--ff-body);
    color: var(--white);
    overflow: hidden;
}

/* ============================================================
   WRAPPER — split screen
   ============================================================ */
.login-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 100vh;
    min-height: 560px;
}

/* ============================================================
   LADO IZQUIERDO — visual
   ============================================================ */
.login-visual {
    position: relative;
    overflow: hidden;
    background: url("../img/main.webp") center center / cover no-repeat;
}

/* Overlay oscuro sobre la foto */
.login-visual-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to right,  rgba(8,8,8,0.25) 0%, rgba(8,8,8,0.6) 100%),
        linear-gradient(to bottom, rgba(8,8,8,0.4) 0%, transparent 40%, rgba(8,8,8,0.85) 100%);
    z-index: 1;
}

/* Logo decorativo rotado */
.login-logo-deco {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-18deg);
    width: clamp(200px, 26vw, 320px);
    height: auto;
    opacity: 0.1;
    filter: brightness(0) invert(1);
    z-index: 2;
    pointer-events: none;
    user-select: none;
}

/* Línea roja vertical — derecha de la columna */
.login-visual::after {
    content: '';
    position: absolute;
    right: 0;
    top: 12%;
    height: 76%;
    width: 2px;
    background: linear-gradient(to bottom, transparent, var(--red), transparent);
    z-index: 3;
}

/* Contenido de texto — anclado abajo */
.login-visual-content {
    position: absolute;
    bottom: 56px;
    left: 52px;
    z-index: 4;
    animation: heroIn 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

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

/* Eyebrow */
.login-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--ff-ui);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    margin: 0 0 16px;
}

.login-eyebrow-line {
    display: block;
    width: 32px;
    height: 1px;
    background: var(--red);
    flex-shrink: 0;
}

.login-brand {
    font-family: var(--ff-display);
    font-size: clamp(64px, 8vw, 100px);
    line-height: 0.9;
    letter-spacing: 4px;
    color: var(--white);
    margin: 0 0 20px;
    text-transform: uppercase;
}

.login-tagline {
    font-family: var(--ff-body);
    font-size: 15px;
    font-weight: 300;
    font-style: italic;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.8;
    margin: 0;
    letter-spacing: 0.2px;
    padding-left: 16px;
    border-left: 2px solid var(--red);
}

/* ============================================================
   LADO DERECHO — formulario
   ============================================================ */
.login-form-side {
    background: var(--dark);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 64px;
    position: relative;
    border-left: 1px solid var(--border);
    overflow-y: auto;
}

/* Botón volver */
.btn-volver {
    position: absolute;
    top: 28px;
    left: 32px;
    font-family: var(--ff-ui);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--muted);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.22s ease;
}

.btn-volver:hover { color: var(--white); }

/* Inner del form */
.login-form-inner {
    width: 100%;
    max-width: 360px;
    animation: formIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

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

/* Header del form */
.login-form-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--ff-ui);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 10px;
}

.login-form-eyebrow::before {
    content: '';
    display: block;
    width: 24px;
    height: 2px;
    background: var(--red);
    flex-shrink: 0;
}

.login-form-title {
    font-family: var(--ff-display);
    font-size: clamp(38px, 4vw, 52px);
    letter-spacing: 5px;
    color: var(--white);
    margin: 0;
    text-transform: uppercase;
    line-height: 1;
}

.login-form-title::after {
    content: '';
    display: block;
    width: 32px;
    height: 3px;
    background: var(--red);
    margin-top: 14px;
    margin-bottom: 44px;
}

/* ============================================================
   INPUTS — floating labels (same as contacto)
   ============================================================ */
.form-group.floating {
    position: relative;
    margin-bottom: 36px;
}

.form-group.floating input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-2);
    color: var(--white);
    font-family: var(--ff-body);
    font-size: 15px;
    font-weight: 300;
    padding: 12px 0 9px;
    outline: none;
    transition: border-color 0.3s ease;
    caret-color: var(--red);
    border-radius: 0;
    -webkit-appearance: none;
}

/* Fix autofill background */
.form-group.floating input:-webkit-autofill,
.form-group.floating input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--dark) inset;
    -webkit-text-fill-color: var(--white);
    transition: background-color 5000s ease-in-out 0s;
}

.form-group.floating input:focus {
    border-bottom-color: var(--red);
}

.form-group.floating label {
    position: absolute;
    top: 12px;
    left: 0;
    font-family: var(--ff-ui);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--muted);
    transition: all 0.25s ease;
    pointer-events: none;
}

.form-group.floating input:focus ~ label,
.form-group.floating input:not(:placeholder-shown) ~ label,
.form-group.floating input:-webkit-autofill ~ label {
    top: -14px;
    font-size: 9.5px;
    color: var(--red);
}

/* Password group */
.password-group input {
    padding-right: 36px;
}

.toggle-pass {
    position: absolute;
    right: 0;
    bottom: 9px;
    background: transparent;
    border: none;
    color: var(--muted);
    cursor: pointer;
    padding: 0;
    font-size: 16px;
    line-height: 1;
    transition: color 0.22s ease;
}

.toggle-pass:hover { color: var(--white); }

/* ============================================================
   MENSAJE DE ERROR
   ============================================================ */
.login-message {
    font-family: var(--ff-ui);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--red);
    margin-bottom: 24px;
    min-height: 16px;
    padding-left: 12px;
    border-left: 2px solid transparent;
    transition: border-color 0.2s ease;
}

.login-message:not(:empty) {
    border-left-color: var(--red);
}

/* ============================================================
   BOTÓN SUBMIT
   ============================================================ */
.btn-login {
    width: 100%;
    padding: 16px;
    background: var(--red);
    color: var(--white);
    border: none;
    font-family: var(--ff-ui);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.25s ease, opacity 0.25s ease;
    border-radius: 0;
    margin-top: 8px;
}

.btn-login:hover    { background: var(--red-dark); }
.btn-login:disabled { opacity: 0.5; cursor: not-allowed; }

/* ============================================================
   SWEETALERT — dark theme override
   ============================================================ */
.swal-login-popup {
    background: #161616 !important;
    color: var(--white) !important;
    border: 1px solid var(--border-2) !important;
    border-radius: 0 !important;
    font-family: var(--ff-body) !important;
    z-index: 20000 !important;
}

.swal-login-backdrop { z-index: 19999 !important; }

body.swal2-shown {
    overflow: hidden !important;
    padding-right: 0 !important;
}

div:where(.swal2-container).swal2-center > .swal2-popup {
    place-self: center center;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 820px) {
    html, body { overflow: auto; }

    .login-wrapper {
        grid-template-columns: 1fr;
        grid-template-rows: 260px 1fr;
        height: auto;
        min-height: 100vh;
    }

    .login-visual {
        height: 260px;
    }

    .login-visual::after { display: none; }

    .login-logo-deco {
        width: 140px;
        opacity: 0.08;
    }

    .login-visual-content {
        bottom: 28px;
        left: 28px;
    }

    .login-brand { font-size: 56px; }

    .login-form-side {
        border-left: none;
        border-top: 1px solid var(--border);
        padding: 50px 32px 60px;
    }

    .btn-volver {
        top: 20px;
        left: 20px;
    }
}

@media (max-width: 480px) {
    .login-visual { height: 220px; }
    .login-brand { font-size: 48px; }
    .login-tagline { display: none; }
    .login-form-side { padding: 44px 22px 56px; }
    .login-form-inner { max-width: 100%; }
    .login-form-title { font-size: 36px; }
}