/* ============================================================
   NoNattyLabs - Login Page Styles (v1.1 - Septiembre 2026)
   ============================================================
   Estilo inspirado en el sistema de diseño NoNatty:
   - Fondo oscuro con acento rojo comercial (#E35160 / #FE0201)
   - Tipografía Helvetica + display
   - Componentes: header, login card, footer

   CAMBIOS v1.1 (2026-09-17):
   - .login-container: ahora usa display:flex + justify-content:center
     para centrar horizontalmente la tarjeta en cualquier viewport.
   - .login-wrapper: se añadió width:100% para forzar que ocupe todo
     el ancho disponible y el centrado funcione correctamente.
   - .login-card: se añadió margin-inline:auto como refuerzo de centrado.
   - Media query @media (max-width:480px): se movió .login-container
     a display:block y padding-inline:0 para que la tarjeta full-width
     en móvil no se vea afectada por el centrado flex.
   ============================================================ */

/* ============================================================
   VARIABLES DE MARCA NoNattyLabs
   ============================================================ */
:root {
    /* Fondos */
    --login-bg: #1A1D24;
    --login-surface: #21252E;
    --login-raised: #2A2F3A;
    --login-line: #363C48;
    --login-paper: #E8EAED;

    /* Texto */
    --login-ink: #E8EAED;
    --login-muted: #A5ADB9;

    /* Acentos de marca */
    --login-accent: #E35160;      /* Rojo comercial */
    --login-accent-hover: #EE6472;
    --login-blue: #3E8EA5;        /* Azul secundario */
    --login-red-brand: #FE0201;   /* Rojo oficial NoNatty */

    /* Medidas */
    --login-radius: 5px;
    --login-max-width: 1440px;
    --login-padding-inline: 48px;

    /* Tipografía */
    --login-font-body: Helvetica, Arial, sans-serif;
    --login-font-display: 'Anton', 'Impact', 'Helvetica World', sans-serif;

    color-scheme: dark;
    font-family: var(--login-font-body);
}

/* Dark mode forzado por defecto (el login usa fondo oscuro) */
html.dark, :root {
    color-scheme: dark;
}

/* ============================================================
   RESET Y BASE
   ============================================================ */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body.login-body {
    background: var(--login-bg);
    color: var(--login-ink);
    font-family: var(--login-font-body);
    font-size: 15px;
    line-height: 1.5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    cursor: pointer;
    color: inherit;
    font: inherit;
}

button:disabled {
    cursor: not-allowed;
    opacity: .5;
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
    outline: 3px solid var(--login-blue);
    outline-offset: 4px;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* ============================================================
   CONTENEDOR GENERAL
   ============================================================
   Se añadió display:flex + justify-content:center para centrar
   horizontalmente la .login-card dentro del contenedor. Esto
   garantiza que la tarjeta quede centrada incluso cuando el
   viewport es mucho más ancho que la tarjeta (desktop grande).
   ============================================================ */
.login-container {
    width: min(var(--login-max-width), 100%);
    margin-inline: auto;
    padding-inline: var(--login-padding-inline);
    display: flex;              /* ← NUEVO: activa flexbox para centrado */
    justify-content: center;    /* ← NUEVO: centra la login-card horizontalmente */
}

/* ============================================================
   HEADER UNIFICADO (adaptado de styles.css)
   ============================================================ */
.login-header {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--login-bg);
    border-bottom: 1px solid var(--login-line);
}

.login-header__main {
    display: flex;
    gap: 40px;
    align-items: center;
    min-height: 94px;
}

.login-header__wordmark {
    display: inline-flex;
    flex-direction: column;
    font-weight: 900;
    line-height: .9;
    font-size: 31px;
    letter-spacing: -1.6px;
    font-style: italic;
    flex-shrink: 0;
    color: var(--login-ink);
}

.login-header__wordmark span {
    font-size: 9px;
    letter-spacing: 7.4px;
    font-weight: 400;
    font-style: normal;
    line-height: 1;
    padding: 8px 0 0 3px;
    color: var(--login-muted);
}

.login-header__actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 15px;
}

.login-header__nav {
    display: flex;
    gap: 28px;
    align-items: center;
    min-height: 48px;
    border-top: 1px solid var(--login-line);
}

.login-header__nav a {
    min-height: 48px;
    display: flex;
    align-items: center;
    font-size: 12px;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    color: var(--login-ink);
    transition: border-color .15s, color .15s;
}

.login-header__nav a:hover,
.login-header__nav a.active {
    border-color: var(--login-accent);
    color: var(--login-accent);
}

/* ============================================================
   BOTONES
   ============================================================ */
.btn {
    border: 1px solid var(--login-line);
    background: transparent;
    border-radius: var(--login-radius);
    min-height: 48px;
    padding: 12px 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    transition: background .15s, border-color .15s;
}

.btn:hover {
    background: var(--login-raised);
}

.btn--primary {
    background: var(--login-accent);
    border-color: var(--login-accent);
    color: var(--login-bg);
}

.btn--primary:hover {
    background: var(--login-accent-hover);
    border-color: var(--login-accent-hover);
}

.btn--block {
    width: 100%;
}

/* ============================================================
   MAIN / WRAPPER
   ============================================================
   Se añadió width:100% para forzar que el wrapper ocupe todo el
   ancho disponible. Sin esto, en algunos navegadores el flex
   container podía colapsar y el centrado no se aplicaba
   correctamente cuando el contenido era más pequeño que el
   viewport.
   ============================================================ */
.login-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    width: 100%;                /* ← NUEVO: fuerza ancho completo */
}

/* ============================================================
   TARJETA DE LOGIN
   ============================================================
   Se añadió margin-inline:auto como refuerzo del centrado.
   Aunque .login-container ya centra con flex, este margin
   garantiza que la tarjeta quede centrada incluso si en el
   futuro se elimina el flex del contenedor o se reutiliza
   .login-card en otro contexto.
   ============================================================ */
.login-card {
    width: 100%;
    max-width: 460px;
    margin-inline: auto;        /* ← NUEVO: centra la tarjeta */
    background: var(--login-surface);
    border: 1px solid var(--login-line);
    border-radius: var(--login-radius);
    padding: 48px 40px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}

/* ============================================================
   CABECERA DE LA TARJETA (logo)
   ============================================================ */
.login-card__header {
    text-align: center;
    margin-bottom: 32px;
}

.login-card__logo {
    font-family: var(--login-font-display);
    font-size: 48px;
    font-weight: 400;
    letter-spacing: -1px;
    line-height: 1;
    color: var(--login-ink);
    display: inline-block;
}

.login-card__logo .highlight {
    color: var(--login-red-brand);
}

.login-card__subtitle {
    display: block;
    margin-top: 10px;
    color: var(--login-muted);
    font-size: 13px;
    letter-spacing: .05em;
}

/* ============================================================
   FORMULARIO
   ============================================================ */
.login-form {
    display: grid;
    gap: 20px;
}

.login-form__group {
    display: grid;
    gap: 8px;
}

.login-form__label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--login-muted);
}

.login-form__input {
    width: 100%;
    background: var(--login-bg);
    color: var(--login-ink);
    border: 1px solid var(--login-line);
    border-radius: var(--login-radius);
    padding: 14px 16px;
    font-size: 15px;
    font-family: var(--login-font-body);
    transition: border-color .2s, box-shadow .2s;
}

.login-form__input::placeholder {
    color: var(--login-muted);
    opacity: .6;
}

.login-form__input:focus {
    outline: none;
    border-color: var(--login-accent);
    box-shadow: 0 0 0 4px rgba(227, 81, 96, .12);
}

.login-form__submit {
    width: 100%;
    min-height: 52px;
    margin-top: 8px;
    background: var(--login-accent);
    color: #fff;
    border: 1px solid var(--login-accent);
    border-radius: var(--login-radius);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .15s, transform .1s;
}

.login-form__submit:hover {
    background: var(--login-accent-hover);
    border-color: var(--login-accent-hover);
}

.login-form__submit:active {
    transform: translateY(1px);
}

/* ============================================================
   MENSAJES (error, warning, success)
   ============================================================ */
.login-message {
    padding: 14px 18px;
    border-radius: var(--login-radius);
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 20px;
    border-left: 3px solid;
}

.login-message--error {
    background: rgba(227, 81, 96, .12);
    border-left-color: var(--login-red-brand);
    color: #FFB4BC;
}

.login-message--warning {
    background: rgba(255, 200, 60, .1);
    border-left-color: #FFC83C;
    color: #FFE39E;
}

.login-message--success {
    background: rgba(46, 204, 113, .1);
    border-left-color: #2ECC71;
    color: #A4F5C2;
}

/* ============================================================
   ENLACES SECUNDARIOS
   ============================================================ */
.login-links {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--login-line);
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    justify-content: center;
}

.login-links a {
    font-size: 12px;
    color: var(--login-muted);
    transition: color .15s;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: transparent;
}

.login-links a:hover {
    color: var(--login-accent);
    text-decoration-color: var(--login-accent);
}

/* ============================================================
   INFO / AYUDA
   ============================================================ */
.login-info {
    margin-top: 24px;
    padding: 18px 20px;
    background: var(--login-bg);
    border: 1px solid var(--login-line);
    border-radius: var(--login-radius);
    font-size: 12px;
    line-height: 1.7;
    color: var(--login-muted);
}

.login-info strong {
    color: var(--login-ink);
    font-weight: 600;
}

/* ============================================================
   FOOTER
   ============================================================ */
.login-footer {
    background: var(--login-surface);
    border-top: 1px solid var(--login-line);
    padding: 32px 0 24px;
    margin-top: auto;
}

.login-footer__content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.login-footer__copyright {
    color: var(--login-muted);
    font-size: 12px;
}

.login-footer__links {
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
}

.login-footer__links a {
    color: var(--login-muted);
    font-size: 12px;
    transition: color .15s;
}

.login-footer__links a:hover {
    color: var(--login-accent);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1150px) {
    .login-container {
        padding-inline: 28px;
    }

    .login-header__main {
        gap: 26px;
    }
}

@media (max-width: 760px) {
    .login-container {
        padding-inline: 18px;
    }

    .login-header__main {
        min-height: 78px;
    }

    .login-header__wordmark {
        font-size: 26px;
    }

    .login-header__wordmark span {
        font-size: 8px;
        letter-spacing: 6.6px;
    }

    .login-header__nav {
        gap: 20px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .login-header__nav::-webkit-scrollbar {
        display: none;
    }

    .login-wrapper {
        padding: 30px 0;
    }

    .login-card {
        padding: 32px 24px;
    }

    .login-card__logo {
        font-size: 40px;
    }

    .login-footer {
        padding: 24px 0 20px;
    }

    .login-footer__content {
        flex-direction: column;
        text-align: center;
    }
}

/* ============================================================
   RESPONSIVE - MÓVIL PEQUEÑO (≤480px)
   ============================================================
   En móvil la tarjeta ocupa todo el ancho (full-bleed) sin
   bordes redondeados. Para lograr esto correctamente:
   - .login-wrapper usa align-items:stretch para que la tarjeta
     llene toda la altura disponible.
   - .login-container se convierte en display:block y se le
     quita el padding-inline, porque el flex+center ya no es
     necesario (la tarjeta ocupa el 100% del ancho).
   - .login-card se estira al 100% del ancho y se le quitan
     los bordes laterales para efecto full-bleed.
   ============================================================ */
@media (max-width: 480px) {
    .login-wrapper {
        padding: 0;
        align-items: stretch;
    }

    .login-container {
        padding-inline: 0;
        display: block;         /* ← NUEVO: desactiva flex en móvil */
    }

    .login-card {
        padding: 28px 20px;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        max-width: 100%;
        min-height: calc(100vh - 200px);
    }
}

/* Reducción de movimiento para usuarios que lo prefieren */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
    }
}