/*
 * app-shell.css - the app frame: locked viewport, inner scroll container,
 * floating header pill, bottom bar, off-canvas menu and the loader.
 *
 * ONLY loaded on pages that use the shell. A funnel landing must never load
 * this file: it locks scrolling on html and body, and a registration page
 * that cannot scroll is a dead page. inc/enqueue.php enforces that by
 * excluding the standalone templates.
 *
 * Unlike the version on dev, this file does NOT paint the brand gradient.
 * base.css does, for every page, because the funnel landings need the same
 * backdrop without the shell. All this file adds is the lock.
 */

html, body {
    height: 100%;
    overflow: hidden;
}

.de-app-viewport {
    animation: de-aparecer 0.5s ease 0.55s both;
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;   /* avoids the jump from the mobile address bar */
    width: 100%;
    position: relative;
}

.de-scroll-contenedor {
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: var(--de-scroll-pad-top);
    -webkit-overflow-scrolling: touch;
}

/* The last section on the page has to clear the bottom bar. */
.de-scroll-contenedor > *:last-child {
    padding-bottom: var(--de-scroll-pad-bottom);
}

/* ==========================================================================
   HEADER PILL
   ========================================================================== */

.de-app-cabecera {
    position: fixed;
    top: var(--de-header-top);
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 24px);
    max-width: 1100px;
    height: var(--de-header-h);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    border-radius: 40px;
    box-sizing: border-box;
    z-index: 100;

    background-color: var(--de-glass-bg);
    backdrop-filter: blur(var(--de-glass-blur));
    -webkit-backdrop-filter: blur(var(--de-glass-blur));
    border: 1px solid var(--de-glass-border);
    box-shadow: var(--de-shadow-soft);
    transition: all 0.3s ease;
}

@media (min-width: 769px) {
    .de-app-cabecera {
        top: 20px;
        height: 72px;
        padding: 0 28px;
    }
}

/* The admin bar is fixed too, and would sit on top of the pill. Only
   administrators ever see it - inc/setup.php hides it for everyone else. */
body.admin-bar .de-app-cabecera {
    top: calc(var(--de-header-top) + 32px);
}

@media (min-width: 769px) {
    body.admin-bar .de-app-cabecera { top: 52px; }
}

.de-logo-contenedor,
.de-logo-contenedor a {
    display: flex;
    align-items: center;
    line-height: 0;
    max-width:240px;
}

/* components.css gives .de-logo-svg width:100% so a mark fills whatever box
   it is dropped into. In the pill the constraint is the other way round: the
   height is fixed and the width follows. This file loads after components,
   so the override needs no extra specificity.

   Colour is set here rather than in tokens.css on purpose. The lockup is
   monochrome by default - mark and wordmark both fall back to currentColor -
   which is what makes it work on a violet band without a second variant.
   Defining --de-logo-wordmark-color only inside the pill splits it into a
   coral mark and an indigo wordmark there, and nowhere else. */
.de-app-cabecera .de-logo-svg {
    width: auto;
    height: 38px;
    color: var(--de-lotus-color);
    --de-logo-wordmark-color: var(--de-secondary-color);
}

@media (min-width: 769px) {
    .de-app-cabecera .de-logo-svg { height: 46px; }
}

.de-menu-boton,
.de-menu-cerrar {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: none;
    color: var(--de-text-color);
    cursor: pointer;
}

/* ==========================================================================
   LOADER

   The lotus assembles petal by petal. It is all CSS and the markup is always
   present, so if the animation fails the page still looks right - it just
   appears without the flourish.
   ========================================================================== */

@keyframes de-petalo-entra {
    from { opacity: 0; transform: rotate(-35deg) scale(0.35); }
    to   { opacity: 1; transform: rotate(0deg) scale(1); }
}

@keyframes de-aparecer {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes de-loader-sale {
    to { opacity: 0; visibility: hidden; }
}

.de-loto-anim path {
    transform-box: view-box;
    transform-origin: 198px 268px;
    animation: de-petalo-entra 0.28s cubic-bezier(0.34, 1.3, 0.64, 1) both;
}

.de-loto-anim .de-petalo-1 { animation-delay: 0s; }
.de-loto-anim .de-petalo-2 { animation-delay: 0.07s; }
.de-loto-anim .de-petalo-3 { animation-delay: 0.14s; }
.de-loto-anim .de-petalo-4 { animation-delay: 0.21s; }
.de-loto-anim .de-petalo-5 { animation-delay: 0.28s; }

.de-loader {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--de-gradient-hero);
    animation: de-loader-sale 0.35s ease 0.62s forwards;
}

.de-loader .de-logo-svg {
    width: 96px;
    height: auto;
    color: var(--de-lotus-color);
}

/* Second visit in the same session: no veil, no waiting. The class is set by
   the inline script in app-cabecera.php, before first paint. */
.de-sin-loader .de-loader { display: none; }
.de-sin-loader .de-app-viewport { animation: none; }

@media (prefers-reduced-motion: reduce) {
    .de-loader { display: none; }
    .de-app-viewport,
    .de-loto-anim path { animation: none; opacity: 1; }
}

/* ==========================================================================
   BOTTOM BAR
   ========================================================================== */

.de-app-pie {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--de-footer-h);
    z-index: 100;
    transition: all 0.3s ease;

    background-color: var(--de-glass-bg);
    backdrop-filter: blur(var(--de-glass-blur));
    -webkit-backdrop-filter: blur(var(--de-glass-blur));
    border-top: 1px solid var(--de-glass-border);
}

.de-nav-lista {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100%;
    margin: 0 auto;
    padding: 0 10px;
    list-style: none;
}

.de-nav-item {
    flex: 1 1 0;
    position: relative;
    display: flex;
    justify-content: center;
}

/* Divider between cells: a short centred hairline, not an edge-to-edge rule. */
.de-nav-item + .de-nav-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 34px;
    background-color: var(--de-border-subtle);
}

.de-nav-item a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-decoration: none;
    color: var(--de-text-color);
    transition: opacity 0.2s ease;
}

.de-nav-item a:hover { opacity: 0.7; }

.de-nav-etiqueta {
    font-size: 14px;
    line-height: 1.2;
}

/* Desktop: floating capsule instead of a full-width bar. */
@media (min-width: 769px) {
    .de-app-pie {
        width: auto;
        min-width: 500px;
        height: 90px;
        left: 50%;
        transform: translateX(-50%);
        border-top: none;
        /* Rounded on top only: the bottom edge meets the viewport, so
           rounding it would leave a gap at each corner. */
        border-radius: 60px 60px 0 0;
        padding: 0;
        margin: 0;   /* a margin on a fixed element still offsets it */
        z-index: 50;

        border: 1px solid var(--de-glass-border);
        border-bottom: none;
        box-shadow:
            var(--de-shadow-deep),
            0 10px 15px rgba(42, 46, 109, 0.05),
            inset 0 2px 3px rgba(255, 255, 255, 1);
    }

    .de-nav-lista {
        justify-content: center;
        padding: 0;
    }

    .de-nav-item { flex: 0 0 160px; }

    .de-nav-item a {
        transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                    opacity 0.2s ease, color 0.2s ease;
    }

    .de-nav-item a:hover {
        opacity: 1;
        transform: translateY(-4px);
        color: var(--de-cta-color);
    }
}

/* ==========================================================================
   OFF-CANVAS MENU
   ========================================================================== */

.de-app-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 78vw;
    max-width: 400px;
    height: 100vh;
    height: 100dvh;
    z-index: 9999;
    transition: right 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    padding: 80px 30px 120px 30px;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
    box-sizing: border-box;

    /* Same tint as a primary section, so the panel reads as part of the same
       material rather than a separate opaque slab. */
    background-color: var(--de-glass-primary);
    backdrop-filter: blur(var(--de-glass-blur-section));
    -webkit-backdrop-filter: blur(var(--de-glass-blur-section));
    color: var(--de-text-inverse);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .de-app-menu { background-color: var(--de-solid-primary); }
}

@media (prefers-reduced-transparency: reduce) {
    .de-app-menu {
        background-color: var(--de-solid-primary);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

.de-app-menu.is-active { right: 0; }

.de-menu-cerrar {
    position: absolute;
    top: 25px;
    right: 25px;
    color: var(--de-text-inverse);
    z-index: 2;
}

.de-menu-nav { margin-top: 40px; }

.de-menu-lista {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.de-menu-lista li { margin: 0; }

.de-menu-lista a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--de-text-inverse);
    text-decoration: none;
    font-family: var(--de-primary-font);
    font-size: 20px;
    line-height: 1.6em;
}

.de-menu-aviso {
    color: var(--de-text-inverse);
    font-size: 16px;
}

/* --- Accordion submenus --- */

.de-menu-lista .sub-menu {
    list-style: none;
    padding-left: 20px;
    margin-top: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-left: 1px solid rgba(241, 241, 241, 0.3);

    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out,
                opacity 0.3s ease-in-out,
                margin-top 0.3s ease-in-out;
}

.de-menu-lista .menu-item-has-children.is-open > .sub-menu {
    max-height: 600px;
    opacity: 1;
    margin-top: 15px;
}

.de-menu-lista .sub-menu a {
    font-size: 18px;
    opacity: 0.9;
    padding: 5px 0;
}

.de-submenu-flecha {
    display: inline-flex;
    align-items: center;
    transition: transform 0.3s ease;
}

.de-menu-lista .menu-item-has-children.is-open > a .de-submenu-flecha {
    transform: rotate(180deg);
}

@media (max-width: 1024px) {
    .de-menu-lista a { font-size: 18px; }
    .de-menu-lista .sub-menu a { font-size: 16px; }
}

@media (max-width: 768px) {
    .de-menu-lista a { font-size: 16px; }
    .de-menu-lista .sub-menu a { font-size: 14px; }
}