/* Componente compartido: header público de Reu. */
:root {
    --reu-shared-header-height: 97px;
    --reu-shared-header-border: #ece8f2;
    --reu-shared-header-ink: #251640;
    --reu-shared-header-purple: #5f35a3;
}

body .reu-site-header {
    position: sticky;
    top: 0;
    z-index: 3300;
    border-bottom: 1px solid var(--reu-shared-header-border);
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 10px 30px rgba(32, 22, 52, .04);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

body .reu-site-header .header-container {
    display: flex;
    width: min(100%, 1780px);
    min-height: var(--reu-shared-header-height);
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    max-width: none;
    margin: 0 auto;
    padding: 16px 34px;
}

body .reu-site-header .header-left { display: flex; flex: 0 0 auto; align-items: center; }
body .reu-site-header .logo { display: inline-flex; align-items: center; gap: 10px; padding: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--reu-shared-header-purple); }
body .reu-site-header .brand-logo-img { width: auto; height: 56px; object-fit: contain; }
body .reu-site-header .brand-logo-text { color: var(--reu-shared-header-purple); font-size: 1.45rem; font-weight: 800; letter-spacing: -.03em; }

body .reu-site-header .header-right { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: 28px; }
body .reu-site-header .publish-link { display: inline-flex; align-items: center; gap: 10px; color: var(--reu-shared-header-ink); font-size: 1rem; font-weight: 800; white-space: nowrap; }
body .reu-site-header .publish-link > i { width: 19px; color: var(--reu-shared-header-purple); font-size: 1.1rem; text-align: center; }
body .reu-site-header .publish-link:hover, body .reu-site-header .publish-link.active { color: var(--reu-shared-header-purple); }

body .reu-site-header .user-menu-container { position: relative; flex: 0 0 auto; }
body .reu-site-header .user-menu-btn { display: inline-flex; width: 58px; height: 58px; align-items: center; justify-content: center; gap: 4px; padding: 5px; border: 1px solid #e8ddf3; border-radius: 50%; background: #fff; color: var(--reu-shared-header-purple); cursor: pointer; }
body .reu-site-header .user-icon { display: grid; width: 32px; height: 32px; place-items: center; overflow: hidden; border: 1px solid #eadff5; border-radius: 50%; color: var(--reu-shared-header-purple); font-size: .78rem; font-weight: 800; }
body .reu-site-header .user-menu-name { display: none; }
body .reu-site-header .user-icon img { width: 100%; height: 100%; object-fit: cover; }
body .reu-site-header .user-icon.user-brand-icon img { width: 21px; height: 21px; object-fit: contain; }
/* Nunca reutilizar el degradado global del avatar como reemplazo del usuario. */
body .reu-site-header .user-icon.user-placeholder-icon { background: #fff; color: var(--reu-shared-header-purple); }
body .reu-site-header .user-placeholder-icon i { color: inherit; font-size: 1.04rem; }
body .reu-site-header .menu-icon { font-size: .67rem; transition: transform .18s ease; }
body .reu-site-header .user-menu-container:has(.user-dropdown.active) .menu-icon { transform: rotate(180deg); }

body .reu-site-header .user-dropdown { position: absolute; top: calc(100% + 10px); right: 0; z-index: 1; display: none; width: min(310px, calc(100vw - 28px)); padding: 10px; border: 1px solid #eee6f4; border-radius: 16px; background: #fff; box-shadow: 0 18px 42px rgba(33, 20, 56, .17); }
body .reu-site-header .user-dropdown.active { display: block; }
body .reu-site-header .dropdown-content { display: grid; gap: 3px; }
body .reu-site-header .dropdown-item, body .reu-site-header .user-menu-summary { display: flex; align-items: center; gap: 11px; padding: 11px; border-radius: 10px; color: #3e3152; font-size: .92rem; font-weight: 700; }
body .reu-site-header .dropdown-item:hover, body .reu-site-header .user-menu-summary:hover { background: #f6f1fc; color: var(--reu-shared-header-purple); }
body .reu-site-header .dropdown-item i { width: 19px; color: var(--reu-shared-header-purple); text-align: center; }
body .reu-site-header .dropdown-divider { height: 1px; margin: 5px 0; border: 0; background: #eee8f3; }
body .reu-site-header .user-menu-summary-avatar { display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; border-radius: 50%; background: #f2eafa; color: var(--reu-shared-header-purple); }
body .reu-site-header .user-menu-summary-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
body .reu-site-header .user-menu-summary-copy { display: grid; min-width: 0; }
body .reu-site-header .user-menu-summary-copy small { overflow: hidden; color: #8b7b9b; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }

body.principal-page:not(.principal-header-search):not(.principal-search-docked) .reu-site-header .header-search-dock { display: none; }
body.principal-page:not(.principal-header-search):not(.principal-search-docked) .reu-site-header .header-container { display: flex !important; grid-template-columns: none !important; }

/* Portada: la búsqueda forma parte permanente del mismo header compartido.
   No se duplica en el hero ni se traslada al hacer scroll. */
@media (min-width: 769px) {
    body.principal-page.principal-header-search .reu-site-header .header-container {
        display: grid;
        grid-template-columns: max-content minmax(0, 1fr) max-content;
        align-items: center;
        column-gap: clamp(26px, 2.4vw, 44px);
        min-height: var(--reu-shared-header-height);
        height: var(--reu-shared-header-height);
        padding: 0 34px;
        box-sizing: border-box;
    }

    body.principal-page.principal-header-search .reu-site-header .header-search-dock {
        display: flex;
        width: clamp(760px, 63vw, 1120px);
        max-width: 100%;
        min-width: 0;
        justify-self: center;
    }

    body.principal-page.principal-header-search .reu-site-header .header-search-dock .search-wrapper,
    body.principal-page.principal-header-search .reu-site-header .header-search-dock .search-bar {
        width: 100%;
        max-width: none;
        min-width: 0;
    }

    body.principal-page.principal-header-search .reu-site-header .header-search-dock .search-bar {
        min-height: 78px;
        height: 78px;
        padding: 8px 12px;
        border-radius: 20px;
        box-sizing: border-box;
        box-shadow: 0 8px 20px rgba(43, 18, 86, .10);
    }

    body.principal-page.principal-header-search .reu-site-header .header-search-dock .search-field {
        min-height: 60px;
        height: 60px;
        padding: 9px 8px 9px 36px;
        box-sizing: border-box;
    }

    body.principal-page.principal-header-search .reu-site-header .header-search-dock .search-field::before {
        left: 11px;
        font-size: 1.08rem;
    }

    body.principal-page.principal-header-search .reu-site-header .header-search-dock .search-field small {
        margin-bottom: 2px;
        font-size: .78rem;
    }

    body.principal-page.principal-header-search .reu-site-header .header-search-dock .search-field input {
        min-height: 20px;
        font-size: .9rem;
    }

    body.principal-page.principal-header-search .reu-site-header .header-search-dock .search-btn-active {
        min-width: 136px;
        height: 56px;
        padding: 0 19px;
        border-radius: 13px;
        font-size: .96rem;
    }

    body.principal-page.principal-header-search .reu-site-header .header-search-dock .search-btn-active span {
        display: inline;
    }

    body.principal-page.principal-header-search .reu-site-header .header-right {
        gap: clamp(12px, 1.5vw, 20px);
    }

    body.principal-page.principal-header-search .reu-site-header .header-right .publish-link {
        position: relative;
        width: 40px;
        min-width: 40px;
        height: 40px;
        justify-content: center;
        padding: 0;
        border-radius: 50%;
    }

    body.principal-page.principal-header-search .reu-site-header .header-right .publish-link span {
        position: absolute;
        display: block;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    body.principal-page.principal-header-search .reu-site-header .header-right .publish-link::after {
        content: attr(aria-label);
        position: absolute;
        top: calc(100% + 8px);
        left: 50%;
        z-index: 1;
        padding: 6px 8px;
        border-radius: 6px;
        background: #29124f;
        color: #fff;
        font-size: .72rem;
        font-weight: 700;
        line-height: 1;
        opacity: 0;
        pointer-events: none;
        transform: translate(-50%, -4px);
        transition: opacity 160ms ease, transform 160ms ease;
        white-space: nowrap;
    }

    body.principal-page.principal-header-search .reu-site-header .header-right .publish-link:hover::after,
    body.principal-page.principal-header-search .reu-site-header .header-right .publish-link:focus-visible::after {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

/* Los dos catálogos comparten columnas fijas para que el buscador no se
   desplace según el ancho de los accesos de la derecha. */
@media (min-width: 1200px) {
    body.search-page.catalog-header-search .reu-site-header .header-container {
        grid-template-columns: 170px minmax(0, 1fr) 250px;
        column-gap: 28px;
    }
}

/* El catálogo de espacios conserva estilos históricos más específicos; estas reglas
   garantizan que, al usar el componente compartido, su navegación sea idéntica a Proveedores. */
body.search-page .reu-site-header .header-right { gap: 28px; }
body.search-page .reu-site-header .header-right .publish-link { gap: 10px; color: var(--reu-shared-header-ink); font-size: 1rem; font-weight: 800; }
body.search-page .reu-site-header .header-right .publish-link > i { width: 19px; color: var(--reu-shared-header-purple); font-size: 1.1rem; text-align: center; }

/* En móvil el mismo disparador de búsqueda se mantiene dentro del header
   compartido. El header reserva su propia segunda fila, por lo que no aparece
   una barra duplicada ni se desplaza el contenido al hacer scroll. */
@media (max-width: 640px) {
    /* overflow-x:hidden convierte el documento en un contenedor de scroll en
       algunos navegadores y rompe position:sticky. clip conserva el recorte
       horizontal sin crear ese contexto. */
    html,
    body.search-page.catalog-header-search {
        overflow-x: clip;
    }

    body.search-page.catalog-header-search .reu-site-header {
        display: block;
        position: sticky;
        top: 0;
        z-index: 3300;
        overflow: visible;
        transition: box-shadow 180ms ease, background-color 180ms ease;
    }

    body.search-page.catalog-header-search .reu-site-header.mobile-search-pinned {
        background: #fff;
        box-shadow: none;
    }

    /* La cabecera móvil no cambia de medida al desplazarse: el buscador queda
       estable sobre un fondo sólido y el catálogo comienza después de ella. */
    body.search-page.catalog-header-search .reu-site-header,
    body.search-page.catalog-header-search .reu-site-header.mobile-search-pinned {
        min-height: 68px;
        background: #fff;
        box-shadow: none;
    }

    body.search-page.catalog-header-search .reu-site-header .header-container {
        min-height: 68px;
        background: #fff;
    }

    body.search-page.catalog-header-search .reu-site-header .header-container {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "search";
        width: 100%;
        min-height: 0;
        gap: 8px 12px;
        padding: 8px 12px 10px;
        box-sizing: border-box;
    }

    body.search-page.catalog-header-search .reu-site-header .header-left,
    body.search-page.catalog-header-search .reu-site-header .header-right { display: none; }
    body.search-page.catalog-header-search .reu-site-header .header-search-dock {
        display: block;
        grid-area: search;
        width: 100%;
        min-width: 0;
    }

    body.search-page.catalog-header-search .reu-site-header .header-search-dock .search-wrapper {
        display: block;
        width: 100%;
        min-width: 0;
    }

    body.search-page.catalog-header-search .reu-site-header .header-search-dock .mobile-search-trigger {
        display: inline-flex;
        width: 100%;
        min-height: 50px;
        margin: 0;
        padding: 0 16px;
        border: 1px solid #e8e3ef;
        border-radius: 999px;
        background: #fff;
        box-shadow: 0 7px 18px rgba(51, 30, 82, .10);
        box-sizing: border-box;
    }

    body.search-page.catalog-header-search .reu-site-header .header-search-dock .search-bar {
        display: none;
    }

    /* El modal queda por encima del header y de todo el catálogo. Al quitar el
       backdrop del header durante la apertura, los elementos fixed conservan
       el viewport como referencia y no se recortan dentro del header. */
    body.search-page.mobile-search-panel-open .reu-site-header {
        z-index: 10020;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    /* El bloqueo de interacción del fondo se gestiona desde searchbar.js.
       Mantener este contenedor visible evita que overflow:hidden convierta al
       body en un segundo scroll y desactive la cabecera sticky. */
    body.search-page.catalog-header-search.mobile-search-panel-open {
        overflow-x: clip;
        overflow-y: visible;
    }

    body.search-page.mobile-search-panel-open .reu-site-header .search-wrapper {
        position: relative;
        z-index: 2;
    }

    body.search-page.mobile-search-panel-open .reu-site-header .search-overlay.active {
        position: fixed;
        inset: 0;
        z-index: 1;
    }

    body.search-page.mobile-search-panel-open .reu-site-header .search-wrapper.mobile-search-open .search-bar {
        position: fixed;
        top: auto;
        right: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom));
        left: 12px;
        z-index: 2;
        display: flex;
        width: auto;
        max-width: none;
        max-height: calc(100dvh - 92px);
        transform: translateY(0);
        animation: reu-catalog-mobile-search-sheet-in 180ms ease-out both;
    }

    /* Proveedores conserva sus selects y sus listeners, pero usa el mismo
       disparador y panel móvil que la búsqueda de espacios. */
    body.search-page.providers-list-page .reu-site-header .provider-mobile-search-trigger {
        display: inline-flex;
    }

    body.search-page.providers-list-page.mobile-search-panel-open .reu-site-header .search-wrapper.mobile-search-open .providers-search-panel {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 13px 16px 16px;
        border-radius: 26px;
        overflow-x: hidden;
        overflow-y: auto;
    }

    body.search-page.providers-list-page .reu-site-header .search-wrapper.mobile-search-open .provider-location-search,
    body.search-page.providers-list-page .reu-site-header .search-wrapper.mobile-search-open .provider-date-search,
    body.search-page.providers-list-page .reu-site-header .search-wrapper.mobile-search-open .provider-type-search {
        display: block;
        width: 100%;
        min-height: 68px;
        flex: 0 0 auto;
        padding: 12px 15px;
        border: 1px solid #eee7f5;
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 4px 12px rgba(50, 30, 81, .035);
    }

    body.search-page.providers-list-page .reu-site-header .search-wrapper.mobile-search-open .provider-search-divider {
        display: none;
    }

    body.search-page.providers-list-page .reu-site-header .search-wrapper.mobile-search-open .providers-search-panel small {
        margin: 0 0 3px;
        color: #2b1b45;
        font-size: .72rem;
        font-weight: 800;
        line-height: 1.15;
        text-align: left;
    }

    body.search-page.providers-list-page .reu-site-header .search-wrapper.mobile-search-open .providers-search-panel :is(input, select) {
        height: auto;
        min-height: 0;
        color: #766b91;
        font-size: .9rem;
        line-height: 1.25;
        text-align: left;
    }

    body.search-page.providers-list-page .reu-site-header .search-wrapper.mobile-search-open .providers-search-panel .search-btn-active {
        width: 100%;
        min-width: 0;
        height: 50px;
        margin: 4px 0 0;
        padding: 0 20px;
        border-radius: 999px;
    }

    @keyframes reu-catalog-mobile-search-sheet-in {
        from { opacity: 0; transform: translateY(24px); }
        to { opacity: 1; transform: translateY(0); }
    }
}

@media (max-width: 760px) {
    :root { --reu-shared-header-height: 68px; }
    body .reu-site-header .header-container { gap: 12px; padding: 10px 16px; }
    body .reu-site-header .brand-logo-img { height: 42px; }
    body .reu-site-header .brand-logo-text { font-size: 1.12rem; }
    body .reu-site-header .header-right { gap: 8px; }
    body .reu-site-header .publish-link { width: 40px; height: 40px; justify-content: center; border-radius: 50%; }
    body .reu-site-header .publish-link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
    body .reu-site-header .user-menu-btn { width: 44px; height: 44px; }
    body .reu-site-header .user-icon { width: 28px; height: 28px; }
    body .reu-site-header .user-icon.user-brand-icon img { width: 18px; height: 18px; }
    body .reu-site-header .menu-icon { display: none; }
}

/* Catálogo: misma composición permanente del header de búsqueda, sin hero duplicado. */
@media (min-width: 769px) {
    body.search-page.catalog-header-search .reu-site-header .header-container {
        display: grid;
        grid-template-columns: max-content minmax(0, 1fr) max-content;
        align-items: center;
        column-gap: clamp(26px, 2.4vw, 44px);
        min-height: var(--reu-shared-header-height);
        height: var(--reu-shared-header-height);
        padding: 0 34px;
        box-sizing: border-box;
    }

    body.search-page.catalog-header-search .reu-site-header .header-search-dock {
        display: flex;
        width: clamp(760px, 63vw, 1120px);
        max-width: 100%;
        min-width: 0;
        justify-self: center;
    }

    body.search-page.catalog-header-search .reu-site-header .header-search-dock .search-wrapper,
    body.search-page.catalog-header-search .reu-site-header .header-search-dock .search-bar {
        width: 100%;
        max-width: none;
        min-width: 0;
    }

    body.search-page.catalog-header-search .reu-site-header .header-search-dock .search-bar {
        min-height: 78px;
        height: 78px;
        padding: 8px 12px;
        border-radius: 20px;
        box-sizing: border-box;
        box-shadow: 0 8px 20px rgba(43, 18, 86, .10);
    }

    body.search-page.catalog-header-search .reu-site-header .header-search-dock .search-field {
        min-height: 60px;
        height: 60px;
        padding: 9px 8px 9px 36px;
        box-sizing: border-box;
    }

    body.search-page.catalog-header-search .reu-site-header .header-search-dock .search-field::before { left: 11px; font-size: 1.08rem; }
    /* Base tipográfica única para los catálogos. Espacios usa inputs y
       Proveedores selects, pero ambos ocupan exactamente las mismas dos líneas. */
    body.search-page.catalog-header-search .reu-site-header .header-search-dock .search-field small {
        margin-bottom: 2px;
        font-size: .78rem;
        font-weight: 600;
        line-height: 1.5;
    }

    body.search-page.catalog-header-search .reu-site-header .header-search-dock .search-field :is(input, select) {
        width: 100%;
        min-height: 20px;
        border: 0;
        outline: 0;
        background: transparent;
        color: #4a4457;
        font: inherit;
        font-size: .9rem;
        font-weight: 400;
        line-height: normal;
        padding: 0;
        box-sizing: border-box;
    }

    body.search-page.catalog-header-search .reu-site-header .header-search-dock .search-btn-active {
        min-width: 136px;
        height: 56px;
        padding: 0 19px;
        border-radius: 13px;
        font-size: .96rem;
    }

    body.search-page.catalog-header-search .reu-site-header .header-search-dock .search-btn-active span { display: inline; }
    body.search-page.catalog-header-search .reu-site-header .header-right { gap: clamp(12px, 1.5vw, 20px); }

    body.search-page.catalog-header-search .reu-site-header .header-right .publish-link {
        display: inline-flex !important;
        position: relative;
        width: 40px;
        min-width: 40px;
        height: 40px;
        justify-content: center;
        padding: 0;
        border-radius: 50%;
    }

    body.search-page.catalog-header-search .reu-site-header .header-right .publish-link span {
        position: absolute;
        display: block;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    body.search-page.catalog-header-search .reu-site-header .header-right .publish-link::after {
        content: attr(aria-label);
        position: absolute;
        top: calc(100% + 8px);
        left: 50%;
        z-index: 1;
        padding: 6px 8px;
        border-radius: 6px;
        background: #29124f;
        color: #fff;
        font-size: .72rem;
        font-weight: 700;
        line-height: 1;
        opacity: 0;
        pointer-events: none;
        transform: translate(-50%, -4px);
        transition: opacity 160ms ease, transform 160ms ease;
        white-space: nowrap;
    }

body.search-page.catalog-header-search .reu-site-header .header-right .publish-link:hover::after,
body.search-page.catalog-header-search .reu-site-header .header-right .publish-link:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

}

/* Catálogos en tablet: los accesos del header pasan a un único menú,
   igual que en Principal. El estado de clase también cubre navegadores cuyo
   zoom altera el ancho que reciben las media queries. */
body.search-page.catalog-tablet-layout .reu-site-header {
    /* index.php oculta el header base por debajo de 760 px; en tablet el
       componente compartido debe seguir visible para conservar logo, buscador
       y acceso al menú. */
    display: block !important;
    overflow: visible;
}

body.search-page.catalog-tablet-layout .reu-site-header .header-container {
    display: grid !important;
    grid-template-columns: max-content minmax(0, 1fr) max-content !important;
    grid-template-areas: "brand search menu";
    align-items: center;
    column-gap: clamp(18px, 3vw, 34px);
    min-height: 96px;
    height: 96px;
    padding: 0 clamp(28px, 4vw, 48px);
    box-sizing: border-box;
}

body.search-page.catalog-tablet-layout .reu-site-header .header-left {
    display: flex !important;
    grid-area: brand;
}

body.search-page.catalog-tablet-layout .reu-site-header .brand-logo-img {
    height: 42px;
}

body.search-page.catalog-tablet-layout .reu-site-header .header-search-dock {
    display: flex !important;
    grid-area: search;
    width: 100% !important;
    min-width: 0;
    max-width: none;
}

body.search-page.catalog-tablet-layout .reu-site-header .header-search-dock .search-wrapper,
body.search-page.catalog-tablet-layout .reu-site-header .header-search-dock .search-bar {
    width: 100% !important;
    min-width: 0;
    max-width: none;
}

body.search-page.catalog-tablet-layout .reu-site-header .header-search-dock .search-bar {
    min-height: 64px;
    height: 64px;
    padding: 6px 8px;
    border-radius: 18px;
}

body.search-page.catalog-tablet-layout .reu-site-header .header-search-dock .search-field {
    min-height: 50px;
    height: 50px;
    padding: 7px 7px 7px 28px;
}

body.search-page.catalog-tablet-layout .reu-site-header .header-search-dock .search-field::before {
    left: 9px;
    font-size: .92rem;
}

body.search-page.catalog-tablet-layout .reu-site-header .header-search-dock .search-field small {
    margin-bottom: 1px;
    font-size: .7rem;
}

body.search-page.catalog-tablet-layout .reu-site-header .header-search-dock .search-field :is(input, select) {
    min-height: 18px;
    font-size: .8rem;
}

body.search-page.catalog-tablet-layout .reu-site-header .header-search-dock .search-btn-active {
    min-width: 112px;
    height: 48px;
    padding: 0 14px;
    border-radius: 12px;
    font-size: .88rem;
}

body.search-page.catalog-tablet-layout .reu-site-header .mobile-menu-toggle {
    display: inline-flex !important;
    grid-area: menu;
    align-items: center;
    justify-content: center;
    justify-self: end;
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50%;
    background: transparent !important;
    color: #1d1a24 !important;
    font-size: 1.1rem;
    box-shadow: none !important;
}

body.search-page.catalog-tablet-layout .reu-site-header #siteMobileMenu {
    position: absolute;
    top: calc(100% + 8px);
    right: 16px;
    left: auto;
    display: none !important;
    width: min(292px, calc(100vw - 32px));
    margin: 0;
    padding: 16px;
    border: 1px solid #e6dff0;
    border-radius: 18px;
    background: #fff;
    box-shadow: none;
    transform-origin: top right;
    z-index: 3400;
}

body.search-page.catalog-tablet-layout .reu-site-header #siteMobileMenu.mobile-open {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 8px;
    animation: reu-header-menu-in .18s ease-out both;
}

/* La profundidad la da el fondo de toda la página: el panel queda claro,
   anclado al botón de menú y no parece flotar en el centro. */
body.search-page.catalog-tablet-layout.mobile-menu-open::before {
    content: "";
    position: fixed;
    z-index: 3299;
    inset: 0;
    background: rgba(29, 18, 48, .28);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    animation: reu-header-backdrop-in .18s ease-out both;
}

@keyframes reu-header-menu-in {
    from { opacity: 0; transform: translateY(-8px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes reu-header-backdrop-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

body.search-page.catalog-tablet-layout .reu-site-header .header-right .publish-link {
    display: inline-flex !important;
    width: 100% !important;
    min-height: 46px;
    justify-content: flex-start;
    padding: 10px 12px;
    border-radius: 12px;
}

body.search-page.catalog-tablet-layout .reu-site-header .header-right .publish-link span {
    position: static !important;
    display: inline !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: normal !important;
}

body.search-page.catalog-tablet-layout .reu-site-header .header-right .publish-link::after {
    display: none;
}

body.search-page.catalog-tablet-layout .reu-site-header .header-right .user-menu-container,
body.search-page.catalog-tablet-layout .reu-site-header .header-right .user-menu-btn {
    width: 100%;
}

body.search-page.catalog-tablet-layout .reu-site-header .header-right .user-menu-btn {
    min-width: 0;
    height: 48px;
    padding: 7px 14px;
    justify-content: space-between;
    border-radius: 12px;
}

body.search-page.catalog-tablet-layout .reu-site-header .header-right .user-menu-name {
    display: block;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    color: #332348;
    font-size: .92rem;
    font-weight: 800;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.search-page.catalog-tablet-layout .reu-site-header .header-right .user-menu-container::after {
    display: none;
}

body.search-page.catalog-tablet-layout .reu-site-header .header-right .user-dropdown {
    position: static;
    width: 100%;
    margin-top: 8px;
}