/* Navegación de la plantilla: imagen y estilo de cada menú, mega menú, desplegables, buscador con resultados en vivo, diálogo bajo la
   cabecera y panel móvil. Lo emite HeaderView con clases evotheme-* y atributos de datos (data-align, data-gap, data-size, data-mega-*):
   no hace falta tocar evoBase. Sin estilos en línea. El movimiento se apaga con prefers-reduced-motion. */

/* La cabecera es el ancla de los paneles de todo el ancho (mega menú a toda la ventana, resultados del buscador, diálogo). */
.evotheme-header:not(.evotheme-header--sticky) {
    position: relative;
}

/* ---------- Imagen de los ítems ---------- */

/* Por defecto la imagen va sobre el texto (evoBase). «Al lado» la pone pequeña a la izquierda del texto, alineada arriba, al centro o abajo. */
:where(.evotheme-nav--img-top, .evotheme-nav--img-center, .evotheme-nav--img-bottom) .evo-menu__image:not([data-align]),
.evo-menu__image:is([data-align="top"], [data-align="center"], [data-align="bottom"]) {
    grid-row: span 2;
    grid-column: 1;
    inline-size: 2rem;
    block-size: 2rem;
    aspect-ratio: 1;
    margin-block-end: 0;
    margin-inline-end: calc(var(--evotheme-img-gap, var(--evo-space-2)) - var(--evo-space-2));
}

:where(.evotheme-nav--img-top) .evo-menu__image:not([data-align]),
.evo-menu__image[data-align="top"] {
    align-self: start;
}

:where(.evotheme-nav--img-center) .evo-menu__image:not([data-align]),
.evo-menu__image[data-align="center"] {
    align-self: center;
}

:where(.evotheme-nav--img-bottom) .evo-menu__image:not([data-align]),
.evo-menu__image[data-align="bottom"] {
    align-self: end;
}

/* Sobre el texto: la separación es el margen de abajo. */
.evo-menu__image[data-align="above"] {
    margin-block-end: var(--evotheme-img-gap, var(--evo-space-2));
}

/* Separación entre la imagen y el texto: del menú (clase en el <nav>) o del ítem (data-gap). */
:where(.evotheme-nav--img-nogap) .evo-menu__image:not([data-gap]),
.evo-menu__image[data-gap="none"] {
    --evotheme-img-gap: 0px;
}

:where(.evotheme-nav--img-nogap:not(.evotheme-nav--img-top, .evotheme-nav--img-center, .evotheme-nav--img-bottom)) .evo-menu__image:not([data-gap], [data-align]),
.evo-menu__image[data-gap="none"][data-align="above"] {
    margin-block-end: 0;
}

.evo-menu__image[data-gap="gap"] {
    --evotheme-img-gap: var(--evo-space-2);
}

/* Tamaño propio del ítem: alto fijo y ancho según la imagen. */
.evo-menu__image[data-size] {
    inline-size: auto;
    max-inline-size: 100%;
    aspect-ratio: auto;
    object-fit: contain;
}

.evo-menu__image[data-size="s"] {
    block-size: 1.5rem;
}

.evo-menu__image[data-size="l"] {
    block-size: 3rem;
}

.evo-menu__image[data-size="xl"] {
    block-size: 4.5rem;
}

/* ---------- Estilo de cada menú en los paneles (en la barra valen las reglas de template.css) ---------- */

.evo-menu--stack.evotheme-nav--pill .evo-menu__list--stack > .evo-menu__item > .evo-menu__link {
    border-radius: 999px;
}

.evo-menu--stack.evotheme-nav--pill .evo-menu__list--stack > .evo-menu__item--active > .evo-menu__link,
.evo-menu--stack.evotheme-nav--pill .evo-menu__list--stack > .evo-menu__item > .evo-menu__link:hover {
    background: var(--evo-color-surface-muted);
}

.evo-menu--stack.evotheme-nav--underline .evo-menu__list--stack > .evo-menu__item > .evo-menu__link {
    border-block-end: 2px solid transparent;
    border-radius: 0;
}

.evo-menu--stack.evotheme-nav--underline .evo-menu__list--stack > .evo-menu__item--active > .evo-menu__link,
.evo-menu--stack.evotheme-nav--underline .evo-menu__list--stack > .evo-menu__item > .evo-menu__link:hover {
    border-block-end-color: var(--evo-color-primary);
}

.evo-menu--stack.evotheme-nav--divided .evo-menu__list--stack > .evo-menu__item + .evo-menu__item {
    border-block-start: 1px solid var(--evo-color-border);
}

/* Lista grande: títulos amplios, pensada para el panel. */
.evotheme-nav--large .evo-menu__list > .evo-menu__item > .evo-menu__link {
    min-block-size: 3rem;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
}

/* ---------- Desplegables ---------- */

/* Alineación por defecto de los desplegables de la barra (la de un ítem manda). */
.evotheme-nav--drop-center .evo-menu__list--bar > .evo-menu__item > .evo-menu__drop:not(.evo-menu__drop--mega, .evo-menu__drop--full, .evo-menu__drop--align-center, .evo-menu__drop--align-end) {
    inset-inline-start: 50%;
    transform: translateX(-50%);
}

[dir="rtl"] .evotheme-nav--drop-center .evo-menu__list--bar > .evo-menu__item > .evo-menu__drop:not(.evo-menu__drop--mega, .evo-menu__drop--full, .evo-menu__drop--align-center, .evo-menu__drop--align-end) {
    transform: translateX(50%);
}

.evotheme-nav--drop-end .evo-menu__list--bar > .evo-menu__item > .evo-menu__drop:not(.evo-menu__drop--mega, .evo-menu__drop--full, .evo-menu__drop--align-center, .evo-menu__drop--align-end) {
    inset-inline-start: auto;
    inset-inline-end: 0;
}

/* Mega menú: ancho (estrecho o toda la ventana), alineación del estrecho y el diseño del constructor. */
.evo-menu__list--bar .evo-menu__drop--mega[data-mega-width="narrow"] {
    inset-inline: 0 auto;
    inline-size: min(48rem, 100%);
}

.evo-menu__list--bar .evo-menu__drop--mega[data-mega-width="narrow"][data-mega-align="center"] {
    inset-inline: 50% auto;
    transform: translateX(-50%);
}

[dir="rtl"] .evo-menu__list--bar .evo-menu__drop--mega[data-mega-width="narrow"][data-mega-align="center"] {
    transform: translateX(50%);
}

.evo-menu__list--bar .evo-menu__drop--mega[data-mega-width="narrow"][data-mega-align="end"] {
    inset-inline: auto 0;
}

/* A toda la ventana: el panel se ancla a la cabecera y no a la barra. */
.evotheme-bar:has(.evo-menu__drop--mega[data-mega-width="full"]),
.evotheme-bar:has(.evo-menu__drop--mega[data-mega-width="full"]) .evo-menu--bar {
    position: static;
}

.evo-menu__list--bar .evo-menu__drop--mega[data-mega-width="full"] {
    padding-inline: max(var(--evo-space-5), calc(50% - 36rem));
    border-radius: 0;
    border-inline: 0;
}

[data-evotheme-mega-content] + .evo-menu__list {
    margin-block-start: var(--evo-space-4);
}

[data-evotheme-mega-content] > * + * {
    margin-block-start: var(--evo-space-3);
}

/* ---------- Buscador con resultados en vivo ---------- */

.evotheme-search--large .evotheme-search__input {
    min-block-size: 3rem;
    font-size: 1.125rem;
}

.evotheme-search--live,
.evotheme-search--modal {
    position: relative;
}

.evotheme-search--stretch-navbar {
    position: static;
}

.evotheme-search__results {
    position: absolute;
    inset-block-start: calc(100% + var(--evo-space-1));
    inset-inline-start: 0;
    z-index: 30;
    box-sizing: border-box;
    inline-size: max(100%, 22rem);
    max-inline-size: min(36rem, 92vw);
    max-block-size: 70vh;
    padding: var(--evo-space-2);
    overflow: auto;
    border: 1px solid var(--evo-color-border);
    border-radius: var(--evo-radius-md);
    background: var(--evo-color-surface);
    box-shadow: var(--evo-shadow-md);
}

.evotheme-search--stretch-navbar .evotheme-search__results {
    inset-inline: 0;
    inline-size: auto;
    max-inline-size: none;
}

/* Panel a todo el ancho bajo la cabecera (va dentro de <header>, fuera del formulario). */
.evotheme-search__results--dropbar {
    inset-inline: 0;
    inline-size: auto;
    max-inline-size: none;
    padding: var(--evo-space-4) 0;
    border-width: 0;
    border-block-end: 1px solid var(--evo-color-border);
    border-radius: 0;
}

/* Dentro del panel móvil, de la ventana o del cuadro del botón: en el flujo, sin borde propio. */
.evotheme-panel__search .evotheme-search__results,
.evotheme-search__dialog .evotheme-search__results,
.evotheme-search--toggle .evotheme-search__results {
    position: static;
    flex: 1 0 100%;
    inline-size: auto;
    max-inline-size: none;
    padding: var(--evo-space-2) 0 0;
    border: 0;
    box-shadow: none;
}

.evotheme-panel__search .evotheme-search--live {
    display: block;
}

.evotheme-panel__search .evotheme-search__form {
    display: flex;
}

.evotheme-panel__search .evotheme-search__input {
    flex: 1 1 auto;
    min-inline-size: 0;
}

.evotheme-search--toggle .evotheme-search__form {
    flex-wrap: wrap;
}

.evotheme-search__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.evotheme-search__list > li {
    margin: 0;
}

.evotheme-search__item {
    display: block;
    padding: var(--evo-space-2) var(--evo-space-3);
    border-inline-start: 3px solid transparent;
    border-radius: var(--evo-radius-sm);
    color: var(--evo-color-text);
    text-decoration: none;
}

.evotheme-search__item:hover,
.evotheme-search__item[aria-selected="true"] {
    background: var(--evo-color-surface-muted);
}

/* La opción activa se nota por algo más que el color: una raya al inicio. */
.evotheme-search__item[aria-selected="true"] {
    border-inline-start-color: var(--evo-color-primary);
}

.evotheme-search__title {
    display: block;
    font-weight: 600;
}

.evotheme-search__text {
    display: block;
    color: var(--evo-color-text-muted);
    font-size: var(--evo-font-size-sm);
}

.evotheme-search__more {
    margin: var(--evo-space-2) 0 0;
    padding-inline: var(--evo-space-3);
}

/* Ventana modal del buscador. */
.evotheme-search__dialog {
    box-sizing: border-box;
    inline-size: min(40rem, calc(100vw - 2rem));
    max-block-size: calc(100dvh - 2rem);
    margin: 10dvh auto auto;
    padding: var(--evo-space-4);
    overflow: auto;
    border: 1px solid var(--evo-color-border);
    border-radius: var(--evo-radius-md);
    background: var(--evo-color-surface);
    color: var(--evo-color-text);
    box-shadow: var(--evo-shadow-md);
}

.evotheme-search__dialog::backdrop {
    background: var(--evo-color-backdrop);
}

.evotheme-search__dialog .evotheme-search__form {
    display: flex;
}

.evotheme-search__dialog .evotheme-search__input {
    flex: 1 1 auto;
    min-inline-size: 0;
}

.evotheme-header-social--gap-medium {
    gap: var(--evo-space-3);
}

.evotheme-header-social--gap-large {
    gap: var(--evo-space-5);
}

/* ---------- Diálogo de escritorio bajo la cabecera ---------- */

.evotheme-dialog-drop {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    z-index: 50;
    max-block-size: calc(100dvh - 4rem);
    overflow: auto;
    border-block-end: 1px solid var(--evo-color-border);
    background: var(--evo-color-surface);
    box-shadow: var(--evo-shadow-md);
}

.evotheme-dialog-drop__inner {
    box-sizing: border-box;
    padding-block: var(--evo-space-5);
}

.evotheme-dialog-drop.evotheme-dialog--center .evotheme-dialog-drop__inner {
    text-align: center;
}

.evotheme-dialog-drop.evotheme-dialog--center .evo-menu__list--stack {
    align-items: center;
}

.evotheme-dialog-drop.evotheme-dialog--w-narrow .evotheme-dialog-drop__inner {
    max-inline-size: 40rem;
    margin-inline: auto;
}

.evotheme-dialog-drop.evotheme-dialog--w-wide .evotheme-dialog-drop__inner {
    max-inline-size: 64rem;
    margin-inline: auto;
}

.evotheme-dialog-drop.evotheme-dialog--w-full .evotheme-dialog-drop__inner {
    max-inline-size: none;
}

/* ---------- Panel lateral y ventana del menú: contenido, ancho y animación ---------- */

.evotheme-offcanvas.evotheme-dialog--center > dialog[open] {
    display: flex;
    flex-direction: column;
}

.evotheme-offcanvas.evotheme-dialog--center > dialog[open] > .evotheme-panel__head {
    flex: none;
}

.evotheme-offcanvas.evotheme-dialog--center > dialog[open] > :is(.evotheme-panel__mobile, .evotheme-panel__dialog) {
    margin-block: auto;
}

.evotheme-offcanvas.evotheme-dialog--w-narrow > dialog {
    inline-size: min(18rem, 90vw);
}

.evotheme-offcanvas.evotheme-dialog--w-wide > dialog {
    inline-size: min(36rem, 92vw);
}

.evotheme-offcanvas.evotheme-dialog--w-full > dialog {
    inline-size: 100vw;
    max-inline-size: 100vw;
}

.evotheme-modal.evotheme-dialog--w-narrow > dialog {
    inline-size: min(28rem, calc(100vw - 2rem));
}

.evotheme-modal.evotheme-dialog--w-wide > dialog {
    inline-size: min(56rem, calc(100vw - 2rem));
}

.evotheme-modal.evotheme-dialog--w-full > dialog {
    inline-size: calc(100vw - 2rem);
}

@keyframes evotheme-slide-from-end {
    from { transform: translateX(100%); }
    to { transform: none; }
}

@keyframes evotheme-slide-from-start {
    from { transform: translateX(-100%); }
    to { transform: none; }
}

@keyframes evotheme-drop-in {
    from { opacity: 0; transform: translateY(-0.5rem); }
    to { opacity: 1; transform: none; }
}

@keyframes evotheme-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
    .evotheme-offcanvas[placement="end"] > dialog[open] {
        animation: evotheme-slide-from-end 0.25s ease-out;
    }

    .evotheme-offcanvas[placement="start"] > dialog[open] {
        animation: evotheme-slide-from-start 0.25s ease-out;
    }

    .evotheme-modal > dialog[open] {
        animation: evotheme-drop-in 0.2s ease-out;
    }

    .evotheme-dialog-drop:not([hidden]),
    .evotheme-search__results:not([hidden]),
    .evotheme-search__dialog[open] {
        animation: evotheme-drop-in 0.2s ease-out;
    }

    .evotheme-nav--dropbar .evo-menu__item--parent > .evo-menu__drop {
        animation: evotheme-drop-in 0.2s ease-out;
    }

    .evotheme-anim-fade > dialog[open],
    .evotheme-dialog-drop.evotheme-anim-fade:not([hidden]),
    .evotheme-nav--dropbar-fade .evo-menu__item--parent > .evo-menu__drop {
        animation: evotheme-fade-in 0.2s ease-out;
    }

    .evotheme-anim-none > dialog[open],
    .evotheme-dialog-drop.evotheme-anim-none:not([hidden]),
    .evotheme-nav--dropbar-none .evo-menu__item--parent > .evo-menu__drop {
        animation: none;
    }
}

/* ---------- Cabecera fija solo en escritorio ---------- */

@media (width < 40em) {
    .evotheme-bp-s.evotheme-header--mobile-static {
        position: static;
    }
}

@media (width < 60em) {
    .evotheme-bp-m.evotheme-header--mobile-static {
        position: static;
    }
}

@media (width < 75em) {
    .evotheme-bp-l.evotheme-header--mobile-static {
        position: static;
    }
}