/* =============================================
   Navegación de escritorio del front (_partials/gx-nav.tpl).
   Dentro de la app el <html> lleva la clase gx-app (head.tpl) y el menú
   no existe: la app pone su propia cabecera nativa.
   ============================================= */
html.gx-app .gx-nav {
    display: none !important;
}

.gx-nav {
    background: #fff;
    border-bottom: 1px solid #ececec;
}

.gx-nav-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 24px;
}

.gx-nav-brand img {
    display: block;
    height: 36px;
    width: auto;
}

.gx-nav-links {
    list-style: none;
    margin: 0 0 0 auto;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.gx-nav-links li {
    margin: 0;
}

.gx-nav-links a {
    display: block;
    padding: 8px 12px;
    border-radius: 8px;
    color: #333;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
}

.gx-nav-links a:hover,
.gx-nav-links a:focus {
    background: #f4fafc;
    color: #007299;
    text-decoration: none;
}

.gx-nav-links a.is-active {
    background: #e9f5f9;
    color: #007299;
}

.gx-nav-logout a {
    color: #888;
}

/* Navegador de móvil (no la app): una fila que se desplaza en horizontal */
@media (max-width: 767px) {
    .gx-nav-inner {
        flex-wrap: wrap;
        gap: 8px 12px;
        padding: 8px 12px;
    }
    .gx-nav-brand img {
        height: 30px;
    }
    .gx-nav-links {
        margin-left: 0;
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .gx-nav-links a {
        padding: 6px 10px;
        font-size: 13px;
    }
}

/* Raíz = Mi cuenta */
.page-my-account .gx-account-logout {
    margin-top: 24px;
}

/* Tarjetas de «Mi cuenta» (raíz y mi-cuenta) fuera de la app */
html:not(.gx-app) .page-my-account .links,
html:not(.gx-app) #my-account .links {
    display: flex;
    flex-wrap: wrap;
    margin: 8px -8px 0;
}
html:not(.gx-app) .page-my-account .links > a,
html:not(.gx-app) #my-account .links > a {
    padding: 8px;
}
html:not(.gx-app) .page-my-account .links .link-item,
html:not(.gx-app) #my-account .links .link-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 14px 16px;
    border: 1px solid #ececec;
    border-radius: 12px;
    background: #fff;
    color: #222;
    font-size: 15px;
    font-weight: 500;
    transition: border-color .15s, color .15s, box-shadow .15s;
}
html:not(.gx-app) .page-my-account .links .link-item i,
html:not(.gx-app) #my-account .links .link-item i {
    font-size: 22px;
    color: #007299;
    width: 28px;
    text-align: center;
}
html:not(.gx-app) .page-my-account .links a:hover .link-item,
html:not(.gx-app) #my-account .links a:hover .link-item {
    border-color: #007299;
    color: #007299;
    box-shadow: 0 2px 10px rgba(0, 114, 153, .10);
}
html:not(.gx-app) .page-my-account .page-header h1,
html:not(.gx-app) #my-account .page-header h1 {
    margin-bottom: 8px;
}