:root {
    --axon-bg: #eff4f8;
    --axon-bg-deep: #06162f;
    --axon-surface: #ffffff;
    --axon-surface-soft: #f7fafc;
    --axon-surface-border: rgba(6, 22, 47, 0.1);
    --axon-text: #10253f;
    --axon-text-soft: #5c6f84;
    --axon-accent: #0f7ea6;
    --axon-accent-strong: #39c8f2;
    --axon-error: #b63b42;
    --axon-input: #ffffff;
    --axon-input-border: #d8e1ea;
    --axon-shadow: 0 28px 70px rgba(9, 26, 48, 0.14);
}

* {
    box-sizing: border-box;
}

body.axon-login-page {
    margin: 0;
    height: 100vh;
    overflow: hidden;
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    color: var(--axon-text);
    /* El fondo ya no se ve — el split ocupa todo el viewport */
    background: var(--axon-bg-deep);
}

/* Shell = viewport completo, sin padding, sin márgenes */
.login-shell {
    height: 100vh;
    display: flex;
    overflow: hidden;
}

/* Split ocupa 100% del viewport — sin card flotante, sin fondo visible */
.login-split {
    width: 100%;
    height: 100%;
    display: grid;
    /* Panel derecho: ancho fijo cómodo para formularios.
       clamp: mínimo 360px, preferido 34vw, máximo 480px.
       El panel izquierdo (imagen) llena todo el resto. */
    grid-template-columns: 1fr clamp(360px, 34vw, 480px);
    border-radius: 0;
    overflow: hidden;
    background: var(--axon-surface);
}

.visual-panel {
    position: relative;
    display: flex;
    align-items: flex-end;
    /* Ocupa toda la altura del grid */
    height: 100%;
    padding: 52px 56px 64px;
    background:
        linear-gradient(180deg, rgba(4, 17, 37, 0.18) 0%, rgba(4, 17, 37, 0.58) 100%),
        url("../img/axon-bg.png") 38% center / cover no-repeat;
}

.visual-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(6, 22, 47, 0.12) 0%, rgba(6, 22, 47, 0.56) 72%),
        radial-gradient(circle at top left, rgba(94, 220, 255, 0.26), transparent 40%);
}

.visual-copy {
    position: relative;
    z-index: 1;
    max-width: 470px;
    color: #f4f7fb;
    /* FIX: eliminado translateY(28px) — empujaba el texto fuera del overflow:hidden
       y lo cortaba en pantallas con altura reducida */
}

.visual-kicker {
    margin: 0 0 14px;
    color: rgba(244, 247, 251, 0.82);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}

.visual-copy h1 {
    margin: 0;
    font-size: clamp(2.35rem, 4vw, 3.9rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
}

.visual-text {
    margin: 18px 0 0;
    max-width: 390px;
    color: rgba(244, 247, 251, 0.82);
    font-size: 1rem;
    line-height: 1.6;
}

.access-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Ocupa 100% de la altura del grid */
    height: 100%;
    overflow-y: auto;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 250, 252, 0.96) 100%);
}

.access-panel__inner {
    /* El inner tiene un ancho máximo para que el form no se estire en pantallas anchas */
    width: min(100%, 400px);
    padding: clamp(32px, 4vh, 56px) clamp(28px, 3.5vw, 44px);
}

.brand-block {
    /* FIX: margen inferior reducido para que el form no se comprima */
    margin-bottom: 24px;
}

.brand-kicker {
    margin: 0 0 10px;
    color: var(--axon-accent);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.brand-block h2 {
    margin: 0;
    /* FIX: heading reducido — clamp anterior daba 2.9rem en portátil,
       demasiado dominante para un panel de ~440px de ancho */
    font-size: clamp(1.85rem, 2.8vw, 2.5rem);
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.brand-subtitle {
    margin: 12px 0 0;
    color: var(--axon-text-soft);
    font-size: 1rem;
    line-height: 1.55;
}

.feedback-stack {
    margin-bottom: 18px;
}

.feedback-message {
    border-radius: 16px;
    padding: 12px 14px;
    font-size: 0.95rem;
    line-height: 1.45;
}

.feedback-message--info {
    background: rgba(57, 200, 242, 0.1);
    border: 1px solid rgba(57, 200, 242, 0.18);
}

.feedback-message--error {
    background: rgba(182, 59, 66, 0.08);
    border: 1px solid rgba(182, 59, 66, 0.16);
}

.login-form {
    display: grid;
    gap: 18px;
}

.field-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.94rem;
    font-weight: 600;
    color: #21364e;
}

.field-group input {
    width: 100%;
    border: 1px solid var(--axon-input-border);
    border-radius: 14px;
    padding: 14px 16px;
    background: var(--axon-input);
    color: var(--axon-text);
    font-family: inherit;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.field-group input::placeholder {
    color: #93a3b5;
}

/* FIX: estado hover añadido — la transición era abrupta entre reposo y focus */
.field-group input:hover {
    border-color: rgba(15, 126, 166, 0.28);
    background: #fafcfe;
}

.field-group input:focus {
    border-color: rgba(15, 126, 166, 0.5);
    box-shadow: 0 0 0 4px rgba(57, 200, 242, 0.14);
    background: #ffffff;
}

.field-error {
    margin: 7px 0 0;
    color: var(--axon-error);
    font-size: 0.87rem;
}

.login-button {
    /* FIX: width explícito — más robusto que depender del grid implícito */
    width: 100%;
    margin-top: 8px;
    border: 0;
    border-radius: 14px;
    padding: 15px 18px;
    background: linear-gradient(135deg, #0f7ea6, #31b8e3);
    color: #f7fbff;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.login-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(15, 126, 166, 0.26);
    filter: brightness(1.04);
}

.login-button:active {
    transform: translateY(0);
    filter: brightness(0.98);
}

.access-links {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 20px;
}

.help-link,
.secondary-link {
    color: var(--axon-text-soft);
    text-decoration: none;
    font-size: 0.91rem;
    transition: color 0.15s ease;
}

.help-link:hover,
.secondary-link:hover {
    color: var(--axon-accent);
}

/* ── 1440px — pantalla grande: imagen más centrada ──────── */
@media (max-width: 1440px) {
    .visual-panel {
        background-position: 36% center;
    }
    .visual-copy h1 {
        font-size: clamp(2.2rem, 3.6vw, 3.6rem);
    }
}

/* ── 1200px — portátil grande / monitor mediano ─────────── */
@media (max-width: 1200px) {
    .login-split {
        /* Panel derecho gana un poco de ancho relativo en pantallas medianas */
        grid-template-columns: 1fr clamp(360px, 36vw, 460px);
    }
    .visual-panel {
        padding: 44px 42px 56px;
        background-position: 33% center;
    }
    .visual-copy h1 {
        font-size: clamp(2rem, 3.2vw, 3.2rem);
    }
    .access-panel__inner {
        padding: clamp(28px, 3.5vh, 48px) clamp(26px, 3vw, 40px);
    }
}

/* ── 960px — portátil estándar (1366×768, 1280×800) ─────── */
@media (max-width: 960px) {
    .login-split {
        /* Panel derecho ocupa más en pantallas estrechas para que el form respire */
        grid-template-columns: 1fr clamp(340px, 40vw, 420px);
    }
    .visual-panel {
        padding: 36px 30px 48px;
        background-position: 30% center;
    }
    .visual-copy {
        max-width: 340px;
    }
    .visual-copy h1 {
        font-size: clamp(1.85rem, 3vw, 2.6rem);
    }
    .visual-text {
        font-size: 0.94rem;
        max-width: 300px;
    }
    .access-panel__inner {
        padding: clamp(24px, 3vh, 40px) 28px;
    }
    .brand-block h2 {
        font-size: clamp(1.7rem, 2.8vw, 2.2rem);
    }
}

/* ── 720px — tablet / portátil pequeño: layout apilado ──── */
@media (max-width: 720px) {
    body.axon-login-page {
        height: auto;
        overflow: auto;
    }
    .login-shell {
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }
    .login-split {
        /* Apilado vertical: imagen arriba, form abajo */
        height: auto;
        min-height: 100vh;
        grid-template-columns: 1fr;
        grid-template-rows: 40vh 1fr;
    }
    .visual-panel {
        height: 100%;
        padding: 28px 24px 32px;
        background-position: center 25%;
    }
    .access-panel {
        height: auto;
        overflow: visible;
        padding: 0;
    }
    .access-panel__inner {
        width: 100%;
        max-width: 480px;
        margin: 0 auto;
        padding: 36px 28px 32px;
    }
}

/* ── 480px — móvil ───────────────────────────────────────── */
@media (max-width: 480px) {
    .login-split {
        grid-template-rows: 35vh 1fr;
    }
    .visual-panel {
        padding: 22px 20px 28px;
    }
    .visual-copy h1 {
        font-size: 1.8rem;
    }
    .visual-text {
        font-size: 0.92rem;
        margin-top: 10px;
    }
    .access-panel__inner {
        padding: 28px 20px 24px;
    }
    .access-links {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}