/* ==========================================================================
   Glopy · Shared global bottom navigation
   Descubrir · Favoritos · [Glopy AI] · Alertas · Perfil
   Relies on tokens defined by the host page (feed.css / assistant.css).
   ========================================================================== */

.anav {
    flex: 0 0 auto;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    padding: 8px 4px calc(env(safe-area-inset-bottom) + 8px);
    background: #090c14;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    z-index: 20;
}

.anav-item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 4px 0;
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--gl-text-muted, var(--gl-text-muted));
    text-decoration: none;
    transition: color 0.2s ease;
}
.anav-item i { font-size: 1.3rem; }
.anav-item.is-active { color: var(--gl-blue-soft, #3d86ff); }
.anav-item:hover { color: var(--gl-text); }

.anav-iconwrap { position: relative; display: inline-flex; }
.anav-dot {
    position: absolute;
    top: -2px;
    right: -4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #26d07c;
    border: 2px solid rgba(7, 9, 15, 0.94);
}

/* Centre Glopy button — sits flush in the row with the rest, not raised
   above the bar (used to overlap content above it, like the swipe actions
   on the feed screen). */
.anav-center {
    flex: 0 0 auto;
    margin: 0 6px;
    text-decoration: none;
}
.anav-glopy {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 40%, #18305e 0%, #0b1426 70%);
    border: 2px solid rgba(61, 134, 255, 0.65);
    box-shadow: 0 0 22px rgba(16, 96, 255, 0.6), 0 8px 22px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.25s ease;
}
.anav-glopy img { width: 80%; height: 80%; object-fit: contain; }
.anav-center:active .anav-glopy { transform: scale(0.93); }
.anav-glopy.is-active { box-shadow: 0 0 30px rgba(16, 96, 255, 0.85), 0 8px 22px rgba(0, 0, 0, 0.5); }

/* Desktop sidebar (inside .gl-shell) ------------------------------------- */
@media (min-width: 900px) {
    .gl-shell > .anav {
        position: static;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 4px;
        width: 212px;
        padding: 20px 12px;
        background: rgba(9, 12, 20, 0.88);
        border: 1px solid var(--gl-border);
        border-radius: 28px;
        border-top: 1px solid var(--gl-border);
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
        align-self: center;
    }

    .gl-shell > .anav .anav-item {
        flex: 0 0 auto;
        flex-direction: row;
        justify-content: flex-start;
        gap: 12px;
        padding: 12px 14px;
        border-radius: 14px;
        font-size: 0.88rem;
        transition: background 0.2s ease, color 0.2s ease;
    }

    .gl-shell > .anav .anav-item i {
        font-size: 1.15rem;
        width: 1.25rem;
        text-align: center;
    }

    .gl-shell > .anav .anav-item.is-active {
        background: rgba(16, 96, 255, 0.14);
    }

    .gl-shell > .anav .anav-item:hover {
        background: var(--gl-surface-hover);
    }

    .gl-shell > .anav .anav-center {
        margin: 10px 0 6px;
        transform: none;
        align-self: center;
    }

    .gl-shell > .anav .anav-glopy {
        width: 58px;
        height: 58px;
    }

    .gl-shell > .anav .anav-iconwrap {
        width: 1.25rem;
        justify-content: center;
    }
}

/* Barra lateral a pantalla completa (.gl-shell--full) ----------------------
   Variante de escritorio de la maqueta del cliente: pegada al borde, de alto
   completo, con la marca arriba, iconos sobre rotulo y una barra azul en el
   item activo. Declarada DESPUES del bloque de arriba para ganarle (misma
   especificidad). Solo desde 900px: la barra inferior movil no cambia. */
.anav-brand,
.anav-center__label { display: none; }

@media (min-width: 900px) {
    .gl-shell--full > .anav {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: clamp(6px, 2.4vh, 40px);
        width: 212px;
        height: 100vh;
        padding: clamp(18px, 3vh, 34px) 0 20px;
        background: var(--gl-surface-sunken);
        border: 0;
        border-right: 1px solid var(--gl-border);
        border-radius: 0;
        box-shadow: none;
        align-self: stretch;
        overflow-y: auto;
    }

    .gl-shell--full > .anav .anav-brand {
        display: block;
        text-align: center;
        margin-bottom: clamp(4px, 1.6vh, 22px);
        font-weight: 900;
        font-size: 1.7rem;
        letter-spacing: 0.08em;
        color: var(--gl-blue);
        filter: drop-shadow(0 4px 18px rgba(16, 96, 255, 0.45));
    }

    /* Icono sobre rotulo y centrado, como la maqueta (el shell normal los
       pone en fila). */
    .gl-shell--full > .anav .anav-item {
        position: relative;
        flex: 0 0 auto;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 14px 8px;
        border-radius: 0;
        font-size: 0.86rem;
        font-weight: 600;
    }

    .gl-shell--full > .anav .anav-item i { font-size: 1.65rem; width: auto; }

    .gl-shell--full > .anav .anav-item.is-active {
        color: var(--gl-text);
        background: linear-gradient(90deg, rgba(16, 96, 255, 0.22) 0%, rgba(16, 96, 255, 0.04) 100%);
    }

    /* Barra azul pegada al borde izquierdo del item activo. */
    .gl-shell--full > .anav .anav-item.is-active::before {
        content: "";
        position: absolute;
        left: 0; top: 0; bottom: 0;
        width: 4px;
        background: var(--gl-blue);
        border-radius: 0 3px 3px 0;
    }

    .gl-shell--full > .anav .anav-item:hover { background: var(--gl-surface-hover); }

    .gl-shell--full > .anav .anav-center {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        margin: 0;
        padding: 10px 8px;
    }

    .gl-shell--full > .anav .anav-center__label {
        display: block;
        font-size: 0.86rem;
        font-weight: 600;
        color: var(--gl-text-muted);
    }

    .gl-shell--full > .anav .anav-center:hover .anav-center__label { color: var(--gl-text); }

    .gl-shell--full > .anav .anav-glopy {
        width: 54px;
        height: 54px;
        border: 0;
        background: none;
        box-shadow: none;
        filter: drop-shadow(0 0 16px rgba(16, 96, 255, 0.65));
    }

    .gl-shell--full > .anav .anav-glopy img { width: 100%; height: 100%; }
}

/* ==========================================================================
   Pre-pantalla para invitados (.gg) — templates/partials/guest_gate.html
   Misma hoja inferior que los prefiltros del listado (.fl-sheet en
   feed_list.css): mismo radio (24px), misma asa (44x5), misma X (40px a
   14px del borde), mismo relleno lateral (20px) y, en escritorio, el mismo
   dialogo centrado de min(600px, 100vw - 48px). Si se toca aqui, tocar alli.
   ========================================================================== */
.gg { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; justify-content: center; }
.gg[hidden] { display: none; }
.gg__backdrop {
    position: absolute; inset: 0;
    background: rgba(3, 6, 14, 0.55);
    opacity: 0; transition: opacity 0.28s ease;
}
.gg.is-open .gg__backdrop { opacity: 1; }
.gg__panel {
    position: relative; z-index: 2;
    width: 100%;
    max-height: 86dvh;
    display: flex; flex-direction: column;
    background: var(--gl-card-2, #0f1727);
    border: 1px solid var(--gl-border); border-bottom: 0;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.45);
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
    padding-bottom: env(safe-area-inset-bottom);
    color: var(--gl-text);
}
.gg.is-open .gg__panel { transform: translateY(0); }
.gg__handle { display: flex; justify-content: center; padding: 10px 0 4px; touch-action: none; cursor: grab; }
.gg__handle span { width: 44px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.28); }
.gg__close {
    position: absolute; left: 14px; top: 24px;
    width: 40px; height: 40px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--gl-surface-hover); border: 1px solid var(--gl-border);
    color: var(--gl-text); font-size: 1.05rem; cursor: pointer; z-index: 3;
}
.gg__body {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    padding: 6px 20px 18px; text-align: center;
    -webkit-overflow-scrolling: touch;
}
/* La mascota original de la app: el mismo disco azul que el boton central
   de la barra (.anav-glopy), un poco mas grande. */
.gg__avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 72px; height: 72px; border-radius: 50%; margin: 2px 0 12px;
    background: radial-gradient(circle at 50% 40%, #18305e 0%, #0b1426 70%);
    border: 2px solid rgba(61, 134, 255, 0.65);
    box-shadow: 0 0 22px rgba(16, 96, 255, 0.6), 0 8px 22px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}
.gg__avatar img { width: 80%; height: 80%; object-fit: contain; }
.gg__title { margin: 0 0 8px; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; }
.gg__text { margin: 0 auto 18px; max-width: 34ch; color: var(--gl-text-muted); font-size: 0.95rem; line-height: 1.45; }
.gg__options { display: flex; flex-direction: column; gap: 10px; }
.gg__btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; height: 52px; padding: 0 16px; box-sizing: border-box;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04); border: 1px solid var(--gl-border);
    color: var(--gl-text); text-decoration: none; font: inherit; font-weight: 700; font-size: 0.98rem;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.gg__btn:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); }
.gg__btn:active { transform: translateY(1px); }
.gg__icon { width: 20px; height: 20px; flex: none; }
.gg__icon--bi { font-size: 1.2rem; line-height: 1; width: auto; height: auto; color: var(--gl-blue-soft); }
.gg__info {
    display: flex; align-items: flex-start; justify-content: center; gap: 8px;
    margin: 16px 0 0; padding: 11px 14px;
    border-radius: 12px; background: rgba(61, 134, 255, 0.08); border: 1px solid rgba(61, 134, 255, 0.22);
    color: var(--gl-text-muted); font-size: 0.86rem; line-height: 1.4; text-align: left;
}
.gg__info i { color: var(--gl-blue-soft); font-size: 1rem; line-height: 1.3; flex: none; }
.gg__login { margin: 16px 0 0; font-size: 0.92rem; color: var(--gl-text-muted); }
.gg__login a { color: var(--gl-blue-soft); font-weight: 700; text-decoration: none; }
.gg__legal { display: flex; justify-content: center; gap: 8px; margin: 14px 0 0; font-size: 0.8rem; color: var(--gl-text-muted); }
.gg__legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
html.gg-open, html.gg-open body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    .gg__panel, .gg__backdrop { transition: none !important; }
}

/* Escritorio: dialogo centrado, como la hoja de prefiltros. */
@media (min-width: 1024px) {
    .gg { align-items: center; }
    .gg__panel {
        width: min(600px, calc(100vw - 48px));
        max-height: 82vh;
        border-radius: 22px; border-bottom: 1px solid var(--gl-border);
        transform: translateY(18px) scale(0.98); opacity: 0;
        transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.2s ease;
        padding-bottom: 0;
    }
    .gg.is-open .gg__panel { transform: none; opacity: 1; }
    .gg__handle { display: none; }
    .gg__close { top: 16px; }
    .gg__body { padding: 30px 26px 24px; }
    .gg__options { max-width: 420px; margin: 0 auto; }
    .gg__info { max-width: 420px; margin-left: auto; margin-right: auto; }
}

/* ===== Tema claro (punto 17) =====
Navegación inferior / lateral y hoja de invitados en tema claro.
   ========================================================================== */

/* Barra inferior: blanca translúcida con desenfoque, línea fina arriba. */
:root[data-theme="light"] .anav {
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 -6px 24px rgba(15, 23, 42, 0.05);
}
:root[data-theme="light"] .anav-item.is-active { color: var(--gl-blue); }
:root[data-theme="light"] .anav-dot { border-color: #fff; }
/* El botón central de Glopy conserva su orbe de marca; el halo, más contenido
   sobre blanco. */
:root[data-theme="light"] .anav-glopy {
    box-shadow: 0 0 14px rgba(16, 96, 255, 0.35), 0 6px 16px rgba(15, 23, 42, 0.16);
}
:root[data-theme="light"] .anav-glopy.is-active {
    box-shadow: 0 0 20px rgba(16, 96, 255, 0.5), 0 6px 16px rgba(15, 23, 42, 0.16);
}
@media (min-width: 900px) {
    :root[data-theme="light"] .gl-shell > .anav {
        background: rgba(255, 255, 255, 0.92);
        box-shadow: 0 18px 50px rgba(15, 23, 42, 0.10);
    }
    :root[data-theme="light"] .gl-shell > .anav .anav-item.is-active { background: rgba(16, 96, 255, 0.08); }
    :root[data-theme="light"] .gl-shell--full > .anav {
        background: #ffffff;
        border-right: 1px solid rgba(15, 23, 42, 0.07);
        box-shadow: none;
    }
    :root[data-theme="light"] .gl-shell--full > .anav .anav-brand { filter: none; }
    :root[data-theme="light"] .gl-shell--full > .anav .anav-item.is-active {
        color: var(--gl-blue);
        background: linear-gradient(90deg, rgba(16, 96, 255, 0.10) 0%, rgba(16, 96, 255, 0.02) 100%);
    }
    :root[data-theme="light"] .gl-shell--full > .anav .anav-glopy { filter: drop-shadow(0 4px 12px rgba(16, 96, 255, 0.35)); }
}

/* Hoja para invitados */
:root[data-theme="light"] .gg__backdrop { background: rgba(15, 23, 42, 0.38); }
:root[data-theme="light"] .gg__panel { box-shadow: 0 -12px 40px rgba(15, 23, 42, 0.14); }
:root[data-theme="light"] .gg__handle span { background: rgba(15, 23, 42, 0.16); }
:root[data-theme="light"] .gg__avatar { box-shadow: 0 0 14px rgba(16, 96, 255, 0.35), 0 6px 16px rgba(15, 23, 42, 0.16); }
:root[data-theme="light"] .gg__btn { background: var(--gl-surface-raised); border-color: var(--gl-border-strong); }
:root[data-theme="light"] .gg__btn:hover { background: var(--gl-surface-sunken); border-color: rgba(15, 23, 42, 0.22); }
:root[data-theme="light"] .gg__info { background: rgba(16, 96, 255, 0.06); border-color: rgba(16, 96, 255, 0.18); }