/* ==========================================================================
   Glopy · Auth — Login & Register (Glopy identity)
   Dark, mascot, blue. Mirrors welcome.css / profile.css design tokens.
   Shared by templates/login.html and templates/register.html.
   ========================================================================== */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

.gl-auth-body {
    min-height: 100vh;
    min-height: 100dvh;
    background: radial-gradient(120% 90% at 50% 8%, #0d1426 0%, var(--gl-bg-1) 42%, var(--gl-bg-0) 100%);
    color: var(--gl-text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    position: relative;
}

.gl-auth-aurora {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(55% 40% at 50% 18%, rgba(16, 96, 255, 0.28) 0%, rgba(16, 96, 255, 0) 70%),
        radial-gradient(45% 30% at 50% 78%, rgba(124, 77, 255, 0.14) 0%, rgba(124, 77, 255, 0) 70%);
}

/* Layout ------------------------------------------------------------------- */
.gl-auth {
    position: relative; z-index: 1;
    width: 100%; max-width: 440px; margin: 0 auto;
    min-height: 100dvh;
    padding: clamp(16px, 4vh, 32px) 22px calc(clamp(16px, 3vh, 28px) + env(safe-area-inset-bottom));
    display: flex; flex-direction: column;
}

/* Top nav (close) ---------------------------------------------------------- */
.gl-auth__nav {
    display: flex; justify-content: flex-end; align-items: center;
    min-height: 40px;
}
.gl-auth__iconbtn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    color: var(--gl-muted); text-decoration: none; font-size: 1.1rem;
    border: 1px solid var(--gl-line); background: rgba(255, 255, 255, .03);
    transition: color .15s ease, border-color .15s ease;
}
.gl-auth__iconbtn:hover { color: var(--gl-text); border-color: rgba(255, 255, 255, .2); }

/* Header (mascot + wordmark) ----------------------------------------------- */
.gl-auth__header { text-align: center; margin-top: clamp(4px, 2vh, 14px); }
.gl-auth__mascot {
    width: clamp(86px, 24vw, 116px); height: auto;
    filter: drop-shadow(0 10px 28px rgba(16, 96, 255, 0.5));
}
.gl-auth__wordmark {
    margin: 10px 0 4px; font-weight: 900;
    font-size: clamp(1.8rem, 9vw, 2.4rem); letter-spacing: 0.04em; line-height: 1;
    background: linear-gradient(180deg, var(--gl-blue-soft) 0%, var(--gl-blue) 55%, var(--gl-blue-deep) 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    color: var(--gl-blue);
}
.gl-auth__sub { margin: 0; color: var(--gl-muted); font-size: .95rem; font-weight: 500; }

/* Segmented toggle (login / register) -------------------------------------- */
.gl-seg {
    display: flex; gap: 4px; margin: clamp(16px, 3vh, 26px) 0 18px;
    padding: 4px; border-radius: 14px;
    background: rgba(255, 255, 255, .04); border: 1px solid var(--gl-line);
}
.gl-seg__item {
    flex: 1; text-align: center; padding: 10px 8px; border-radius: 10px;
    color: var(--gl-muted); text-decoration: none; font-weight: 600; font-size: .92rem;
    transition: background .15s ease, color .15s ease;
}
.gl-seg__item.is-active {
    color: var(--gl-text);
    background: linear-gradient(180deg, var(--gl-blue-soft), var(--gl-blue));
    box-shadow: 0 6px 18px rgba(16, 96, 255, .35);
}

/* Alert / message ---------------------------------------------------------- */
.gl-alert {
    border-radius: 12px; padding: 12px 14px; margin-bottom: 14px;
    font-size: .9rem; line-height: 1.4; border: 1px solid transparent;
}
.gl-alert.is-hidden { display: none; }
.gl-alert--info { background: rgba(16, 96, 255, .12); border-color: rgba(61, 134, 255, .35); color: #cfe0ff; }
.gl-alert--success { background: rgba(38, 208, 124, .12); border-color: rgba(38, 208, 124, .4); color: #bff3d8; }
.gl-alert--danger { background: rgba(255, 77, 87, .12); border-color: rgba(255, 77, 87, .4); color: #ffc9cd; }
.gl-alert a { color: inherit; font-weight: 700; text-decoration: underline; }

/* OAuth buttons ------------------------------------------------------------ */
.gl-oauth { display: flex; flex-direction: column; gap: 10px; }
.gl-oauth__btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; padding: 12px 14px; border-radius: 12px;
    background: rgba(255, 255, 255, .04); border: 1px solid var(--gl-line);
    color: var(--gl-text); text-decoration: none; font-weight: 600; font-size: .95rem;
    transition: background .15s ease, border-color .15s ease;
}
.gl-oauth__btn:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); }
.gl-oauth__icon { width: 20px; height: 20px; flex: none; }

/* Divider ------------------------------------------------------------------ */
.gl-divider {
    display: flex; align-items: center; gap: 12px;
    margin: 18px 0; color: var(--gl-muted); font-size: .82rem;
}
.gl-divider::before, .gl-divider::after {
    content: ""; flex: 1; height: 1px; background: var(--gl-line);
}

/* Form --------------------------------------------------------------------- */
.gl-form { display: flex; flex-direction: column; }
.gl-field { margin-bottom: 14px; }
.gl-field__label {
    display: block; margin-bottom: 6px;
    font-size: .72rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--gl-muted);
}
.gl-input {
    width: 100%; padding: 13px 14px; border-radius: 12px;
    background: var(--gl-card); border: 1px solid var(--gl-line);
    color: var(--gl-text); font-size: 1rem; font-family: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.gl-input::placeholder { color: #5c6788; }
.gl-input:focus {
    outline: none; border-color: var(--gl-blue-soft);
    box-shadow: 0 0 0 3px rgba(16, 96, 255, .2);
}
.gl-input[type="file"] { padding: 10px 14px; color: var(--gl-muted); }
.gl-help { margin: 6px 2px 0; font-size: .78rem; color: var(--gl-muted); }

/* Company checkbox --------------------------------------------------------- */
.gl-check { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; cursor: pointer; }
.gl-check input { width: 18px; height: 18px; accent-color: var(--gl-blue); }
.gl-check label { font-weight: 600; font-size: .92rem; cursor: pointer; }
.gl-company.is-hidden { display: none; }

/* Primary button ----------------------------------------------------------- */
.gl-btn-primary {
    width: 100%; padding: 14px; margin-top: 6px;
    border: none; border-radius: 14px; cursor: pointer;
    background: linear-gradient(180deg, var(--gl-blue-soft), var(--gl-blue));
    color: #fff; font-size: 1.02rem; font-weight: 700; font-family: inherit;
    box-shadow: 0 10px 26px rgba(16, 96, 255, .4);
    transition: transform .12s ease, box-shadow .15s ease, opacity .15s ease;
}
.gl-btn-primary:hover { box-shadow: 0 12px 30px rgba(16, 96, 255, .55); }
.gl-btn-primary:active { transform: translateY(1px); }
.gl-btn-primary:disabled { opacity: .6; cursor: default; box-shadow: none; }

/* Footer ------------------------------------------------------------------- */
.gl-auth__footer {
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
    margin-top: 18px; font-size: .88rem;
}
.gl-auth__footer a { color: var(--gl-blue-soft); text-decoration: none; font-weight: 600; }
.gl-auth__footer a:hover { text-decoration: underline; }

/* Desktop: keep the centered mobile column on a branded surround ----------- */
@media (min-width: 720px) {
    .gl-auth { max-width: 460px; }
}

/* ==========================================================================
   ESCRITORIO (>=1024px) - maqueta del cliente (acceso).
   La columna estrecha se convierte en una tarjeta centrada partida en dos:
   marca a la izquierda y formulario a la derecha. El aspa flota arriba a la
   derecha de la pantalla, fuera de la tarjeta. Media query de ancho: el movil
   se queda exactamente como esta.
   Sirve igual para /login y /register: comparten el marcado .gl-auth.
   ========================================================================== */

/* El ojo de la contrasena solo se enseña en escritorio. */
.gl-input-wrap { position: relative; }
.gl-eye { display: none; }

@media (min-width: 1024px) {
    .gl-auth-body {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 40px;
    }

    .gl-auth {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
        width: 100%;
        max-width: 1420px;
        min-height: 0;
        margin: 0;
        padding: 0;
        border-radius: 24px;
        border: 1px solid var(--gl-line);
        background: rgba(9, 13, 26, 0.72);
        overflow: hidden;
    }

    /* Aspa: fuera de la tarjeta, esquina de la pantalla. */
    .gl-auth__nav {
        position: fixed;
        top: 26px;
        right: 30px;
        z-index: 5;
        min-height: 0;
    }
    .gl-auth__iconbtn { width: 52px; height: 52px; font-size: 1.35rem; }

    /* --- Panel izquierdo: marca ------------------------------------------ */
    .gl-auth__header {
        position: relative;
        overflow: hidden;
        grid-column: 1;
        /* `1 / -1` no vale: sin filas explicitas, -1 apunta a la ultima linea
           EXPLICITA (la 1), asi que el panel solo cubria la primera fila y el
           formulario quedaba con un hueco enorme debajo de las pestanas. */
        grid-row: 1 / span 50;
        align-self: stretch;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 70px 40px;
        border-right: 1px solid var(--gl-line);
        background:
            radial-gradient(60% 45% at 50% 42%, rgba(16, 96, 255, 0.32) 0%, rgba(16, 96, 255, 0) 70%),
            linear-gradient(160deg, #0b1b3d 0%, #091126 55%, #0a0f1f 100%);
    }
    /* Los dos arcos luminosos del fondo. */
    .gl-auth__header::before,
    .gl-auth__header::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
    }
    .gl-auth__header::before {
        width: 620px; height: 620px;
        top: -180px; left: -300px;
        border: 3px solid rgba(61, 134, 255, 0.55);
        filter: blur(2px);
        opacity: 0.7;
    }
    .gl-auth__header::after {
        width: 900px; height: 900px;
        bottom: -430px; left: -110px;
        border: 3px solid rgba(124, 77, 255, 0.5);
        filter: blur(3px);
        opacity: 0.75;
    }
    .gl-auth__header > * { position: relative; z-index: 1; }
    .gl-auth__mascot { width: 210px; height: 210px; margin-bottom: 18px; }
    .gl-auth__wordmark { font-size: 4.4rem; letter-spacing: 0.02em; }
    .gl-auth__sub { margin-top: 10px; font-size: 1.3rem; }

    /* --- Columna derecha: formulario -------------------------------------- */
    /* `margin-inline` y no padding: varios de estos bloques ya usan su propio
       padding (la caja del segmento, los botones) y se descuadrarian. */
    .gl-auth > *:not(.gl-auth__header):not(.gl-auth__nav) {
        grid-column: 2;
        margin-inline: 46px;
    }
    .gl-auth > .gl-seg { margin-top: 46px; }
    .gl-auth > .gl-auth__footer { margin-bottom: 46px; }

    .gl-seg { padding: 6px; border-radius: 16px; }
    .gl-seg__item { padding: 15px 10px; font-size: 1.05rem; border-radius: 12px; }
    .gl-oauth { gap: 14px; margin-top: 22px; }
    .gl-oauth__btn { padding: 17px 18px; font-size: 1.05rem; border-radius: 14px; }
    .gl-oauth__icon { width: 24px; height: 24px; }
    .gl-divider { margin: 24px 0; font-size: 1rem; }
    .gl-field { margin-bottom: 20px; }
    .gl-field__label {
        text-transform: uppercase;
        letter-spacing: 0.06em;
        font-size: 0.85rem;
    }
    .gl-input { padding: 17px 18px; font-size: 1.05rem; border-radius: 14px; }
    .gl-btn-primary { padding: 18px; font-size: 1.1rem; border-radius: 14px; }
    .gl-auth__footer { margin-top: 20px; font-size: 1rem; }

    /* Ojo de la contrasena */
    .gl-input-wrap .gl-input { padding-right: 56px; }
    .gl-eye {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
        width: 40px;
        height: 40px;
        border: 0;
        border-radius: 50%;
        background: none;
        color: var(--gl-muted);
        font-size: 1.15rem;
        cursor: pointer;
    }
    .gl-eye:hover { color: var(--gl-text); }
}

/* Ventanas de escritorio no muy altas: "Crear cuenta" lleva un campo mas y una
   casilla, y a 870px de alto se salia. Se aprieta para que las dos pantallas
   quepan enteras sin scroll. */
@media (min-width: 1024px) and (max-height: 980px) {
    .gl-auth > .gl-seg { margin-top: 34px; }
    .gl-auth > .gl-auth__footer { margin-bottom: 34px; }
    .gl-oauth { gap: 10px; margin-top: 16px; }
    .gl-oauth__btn { padding: 14px 18px; }
    .gl-divider { margin: 16px 0; }
    .gl-field { margin-bottom: 12px; }
    .gl-input { padding: 14px 18px; }
    .gl-btn-primary { padding: 15px; }
    .gl-auth__mascot { width: 170px; height: 170px; }
    .gl-auth__wordmark { font-size: 3.6rem; }
}

/* ===== Tema claro (punto 17) =====
Acceso (login, registro, recuperar contraseña) en tema claro.
   ========================================================================== */

:root[data-theme="light"] .gl-auth-body { background: radial-gradient(120% 90% at 50% 10%, #ffffff 0%, #f2f6fe 42%, #e8eefa 100%); }
:root[data-theme="light"] .gl-auth-aurora {
    background:
        radial-gradient(55% 40% at 50% 18%, rgba(16, 96, 255, 0.12) 0%, rgba(16, 96, 255, 0) 70%),
        radial-gradient(45% 30% at 50% 78%, rgba(124, 77, 255, 0.08) 0%, rgba(124, 77, 255, 0) 70%);
}
:root[data-theme="light"] .gl-auth__iconbtn { background: #fff; border-color: rgba(15, 23, 42, 0.10); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05); }
:root[data-theme="light"] .gl-auth__iconbtn:hover { border-color: rgba(15, 23, 42, 0.2); }
:root[data-theme="light"] .gl-auth__mascot { filter: drop-shadow(0 10px 22px rgba(16, 96, 255, 0.25)); }
:root[data-theme="light"] .gl-seg { background: var(--gl-surface-sunken); }
:root[data-theme="light"] .gl-seg__item.is-active { color: #fff; box-shadow: 0 4px 12px rgba(16, 96, 255, 0.25); }
:root[data-theme="light"] .gl-alert--info { background: rgba(16, 96, 255, 0.06); border-color: rgba(16, 96, 255, 0.25); color: #123a8c; }
:root[data-theme="light"] .gl-alert--success { background: rgba(8, 130, 74, 0.07); border-color: rgba(8, 130, 74, 0.28); color: #065f36; }
:root[data-theme="light"] .gl-alert--danger { background: rgba(212, 42, 53, 0.06); border-color: rgba(212, 42, 53, 0.28); color: #9b1c24; }
:root[data-theme="light"] .gl-oauth__btn { background: #fff; border-color: rgba(15, 23, 42, 0.12); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05); }
:root[data-theme="light"] .gl-oauth__btn:hover { background: var(--gl-surface-sunken); border-color: rgba(15, 23, 42, 0.2); }
:root[data-theme="light"] .gl-input { border-color: rgba(15, 23, 42, 0.12); }
:root[data-theme="light"] .gl-input::placeholder { color: #8792a8; }
:root[data-theme="light"] .gl-input:focus { box-shadow: 0 0 0 3px rgba(16, 96, 255, 0.14); }
:root[data-theme="light"] .gl-btn-primary { box-shadow: 0 8px 20px rgba(16, 96, 255, 0.26); }
:root[data-theme="light"] .gl-btn-primary:hover { box-shadow: 0 10px 24px rgba(16, 96, 255, 0.34); }
@media (min-width: 1024px) {
    :root[data-theme="light"] .gl-auth { background: rgba(255, 255, 255, 0.86); box-shadow: 0 30px 80px rgba(15, 23, 42, 0.12); }
    :root[data-theme="light"] .gl-auth__header {
        background:
            radial-gradient(60% 45% at 50% 42%, rgba(16, 96, 255, 0.14) 0%, rgba(16, 96, 255, 0) 70%),
            linear-gradient(160deg, #e8f0ff 0%, #f1f5fe 55%, #f7f5ff 100%);
    }
    :root[data-theme="light"] .gl-auth__header::before { border-color: rgba(16, 96, 255, 0.25); }
    :root[data-theme="light"] .gl-auth__header::after { border-color: rgba(124, 77, 255, 0.22); }
}