/* Lo único que evoBase 0.2.0 no trae: enlace de saltar al contenido visible al enfocarlo, y la separación del pie. */
.evotheme-skip {
    position: absolute;
    inset-inline-start: var(--evo-space-2, .5rem);
    inset-block-start: var(--evo-space-2, .5rem);
    z-index: 1000;
    transform: translateY(-300%);
}

.evotheme-skip:focus {
    transform: none;
}

.evotheme-site {
    display: flex;
    flex-direction: column;
    min-block-size: 100vb;
}

.evotheme-site > main {
    flex: 1 0 auto;
}

/* Salida de los componentes de Joomla (clases de Bootstrap que esta plantilla no carga): botones con tamaño táctil y contraste. */
main .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--evo-space-2);
    min-block-size: 2.5rem;
    min-inline-size: 2.5rem;
    padding: var(--evo-space-2) var(--evo-space-4);
    border: 1px solid var(--evo-color-primary);
    border-radius: var(--evo-radius-md);
    color: var(--evo-color-primary);
    text-decoration: none;
}

main .btn:hover {
    text-decoration: underline;
}

/* Tipografía del estilo de plantilla: pilas del sistema (sin fuentes remotas). El bloque <style> del <head> sustituye
   --evo-font-body, --evo-font-heading y --evo-font-weight-heading cuando se eligen otros valores. */
.evotheme-site {
    font-family: var(--evo-font-body, var(--evo-font-family-sans));
}

.evotheme-site :where(h1, h2, h3, h4, h5, h6) {
    font-family: var(--evo-font-heading, var(--evo-font-family-sans));
    font-weight: var(--evo-font-weight-heading, 700);
}

/* Botón principal solo con contorno (estilo de plantilla «Contorno»). */
.evotheme-buttons--outline .evo-button:not(.evo-button--secondary, .evo-button--ghost, .evotheme-skip, :disabled, [aria-disabled="true"]) {
    background: transparent;
    color: var(--evo-color-primary);
}

/* Cabecera: marca a la izquierda; menú, conmutador de modo y botón de acción a la derecha. En pantallas estrechas el menú
   pasa a un panel lateral (evo-offcanvas), fuera de <header>. */
.evotheme-header {
    background: var(--evo-color-surface);
    border-block-end: 1px solid var(--evo-color-border);
}

.evotheme-header--sticky {
    position: sticky;
    inset-block-start: 0;
    z-index: 100;
}

.evotheme-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--evo-space-3) var(--evo-space-5);
    padding-block: var(--evo-space-3);
}

.evotheme-brand {
    margin-inline-end: auto;
    font-weight: 700;
}

.evotheme-brand img {
    block-size: 2.5rem;
    inline-size: auto;
}

.evotheme-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--evo-space-3);
}

/* Horizontal: la barra del menú ocupa el hueco libre y se alinea según navbar_align. */
/* Con el menú de escritorio a la vista, la marca y las acciones no se parten ni cambian de fila; el menú cede el sitio.
   En el móvil la barra puede envolver como antes. */
@media (width >= 40em) {
    .evotheme-bp-s .evotheme-bar--horizontal { flex-wrap: nowrap; }
    .evotheme-bp-s .evotheme-bar--horizontal .evotheme-brand,
    .evotheme-bp-s .evotheme-bar--horizontal .evotheme-actions { flex: none; white-space: nowrap; flex-wrap: nowrap; }
}

@media (width >= 60em) {
    .evotheme-bp-m .evotheme-bar--horizontal { flex-wrap: nowrap; }
    .evotheme-bp-m .evotheme-bar--horizontal .evotheme-brand,
    .evotheme-bp-m .evotheme-bar--horizontal .evotheme-actions { flex: none; white-space: nowrap; flex-wrap: nowrap; }
}

@media (width >= 75em) {
    .evotheme-bp-l .evotheme-bar--horizontal { flex-wrap: nowrap; }
    .evotheme-bp-l .evotheme-bar--horizontal .evotheme-brand,
    .evotheme-bp-l .evotheme-bar--horizontal .evotheme-actions { flex: none; white-space: nowrap; flex-wrap: nowrap; }
}

.evotheme-bar--horizontal .evotheme-navbar {
    display: flex;
    min-inline-size: 0;
    flex: 1 1 auto;
    align-items: center;
    gap: var(--evo-space-3);
}

.evotheme-bar--horizontal .evotheme-brand {
    margin-inline-end: 0;
}

.evotheme-navbar--align-left {
    justify-content: flex-start;
}

.evotheme-navbar--align-center {
    justify-content: center;
}

.evotheme-navbar--align-right {
    justify-content: flex-end;
}

.evotheme-bar--horizontal .evotheme-actions {
    margin-inline-start: auto;
}

/* Centrado: tres partes (hueco «header», marca, acciones) que reparten a medias el sitio libre, así la marca queda en el
   centro; si las acciones no caben, empujan la marca sin partir los botones. El menú va centrado en la fila de abajo. */
.evotheme-bar--center {
    flex-wrap: nowrap;
}

.evotheme-bar--center .evotheme-brand {
    margin-inline-end: 0;
}

.evotheme-bar__start,
.evotheme-bar__end {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    gap: var(--evo-space-3);
}

.evotheme-bar__start {
    min-inline-size: 0;
}

.evotheme-bar__end {
    justify-content: flex-end;
}

.evotheme-menu-open,
.evotheme-cta {
    white-space: nowrap;
}

/* Apilado y centrado: el menú va debajo, separado por una línea. */
.evotheme-bar__nav {
    display: flex;
    align-items: center;
    gap: var(--evo-space-3);
    padding-block: var(--evo-space-2);
    border-block-start: 1px solid var(--evo-color-border);
}

.evotheme-bar--stacked .evotheme-actions {
    margin-inline-start: 0;
}

.evotheme-header-extra,
.evotheme-mobile-header,
.evotheme-toolbar__left,
.evotheme-toolbar__right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--evo-space-3);
    min-inline-size: 0;
}

.evotheme-mobile-header {
    margin-inline-start: auto;
}

.evotheme-bar .evotheme-mobile-header + .evotheme-actions {
    margin-inline-start: 0;
}

/* Barra superior: texto pequeño encima de la cabecera; solo en pantallas anchas. */
.evotheme-toolbar {
    border-block-end: 1px solid var(--evo-color-border);
    background: var(--evo-color-surface-muted);
    font-size: var(--evo-font-size-sm);
}

.evotheme-toolbar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--evo-space-2) var(--evo-space-5);
    padding-block: var(--evo-space-1);
}

.evotheme-toolbar__right {
    margin-inline-start: auto;
}

.evotheme-header :where(.evotheme-header-extra, .evotheme-mobile-header, .evotheme-toolbar) :where(p) {
    margin: 0;
}

/* Botón del menú: con texto, icono y palabra; sin texto, un botón cuadrado de 2.5rem. */
.evotheme-menu-open {
    display: inline-flex;
    align-items: center;
    gap: var(--evo-space-2);
}

.evotheme-menu-open--icon {
    justify-content: center;
    min-inline-size: 2.5rem;
    padding-inline: 0;
}

/* Panel del menú móvil: cabecera con el botón de cerrar y los menús en columna. */
.evotheme-panel__head {
    display: flex;
    justify-content: flex-end;
    margin-block-end: var(--evo-space-3);
}

.evotheme-panel__close {
    min-inline-size: 2.5rem;
    padding-inline: 0;
}

.evotheme-panel__dialog {
    margin-block-start: var(--evo-space-5);
    padding-block-start: var(--evo-space-4);
    border-block-start: 1px solid var(--evo-color-border);
}

.evotheme-panel__mobile > * + *,
.evotheme-panel__dialog > * + * {
    margin-block-start: var(--evo-space-4);
}

/* Conmutador de modo en una esquina de la página (header_toggle_position distinto de «menu»). `viewport`: fijo en la
   ventana; `page`: en la esquina de la página, se va al hacer scroll (arriba, en la cabecera; abajo, dentro del pie). */
.evotheme-toggle-corner {
    position: fixed;
    z-index: 40;
    padding: var(--evo-space-1);
    background: var(--evo-color-surface);
    border: 1px solid var(--evo-color-border);
    border-radius: var(--evo-radius-md);
}

.evotheme-toggle-corner--page {
    position: absolute;
}

.evotheme-footer {
    position: relative;
}

.evotheme-toggle-corner--top-start,
.evotheme-toggle-corner--top-end {
    inset-block-start: max(var(--evo-space-3), env(safe-area-inset-top));
}

.evotheme-toggle-corner--bottom-start,
.evotheme-toggle-corner--bottom-end {
    inset-block-end: max(var(--evo-space-3), env(safe-area-inset-bottom));
}

.evotheme-toggle-corner--top-start,
.evotheme-toggle-corner--bottom-start {
    inset-inline-start: max(var(--evo-space-3), env(safe-area-inset-left));
}

.evotheme-toggle-corner--top-end,
.evotheme-toggle-corner--bottom-end {
    inset-inline-end: max(var(--evo-space-3), env(safe-area-inset-right));
}

.evotheme-panel__toggle {
    margin-block-start: var(--evo-space-5);
}

.evotheme-offcanvas .evo-nav--inline,
.evotheme-modal .evo-nav--inline {
    flex-direction: column;
}

/* Ventana a pantalla completa (mobile_mode = modal): ocupa toda la pantalla, sin bordes. */
evo-dialog.evotheme-modal > :where(dialog) {
    inline-size: 100vw;
    max-inline-size: none;
    block-size: 100dvh;
    max-block-size: none;
    margin: 0;
    border: 0;
    border-radius: 0;
}

/* Punto de corte del menú móvil: la cabecera y el panel llevan evotheme-bp-s|m|l (mobile_breakpoint) y aquí se decide
   qué se ve a cada lado. Valores de header.json: S 640 px, M 960 px, L 1200 px. */
@media (width < 40em) {
    .evotheme-bp-s .evotheme-desktop-only {
        display: none;
    }
}

@media (width >= 40em) {
    .evotheme-bp-s .evotheme-mobile-only {
        display: none;
    }
}

@media (width < 60em) {
    .evotheme-bp-m .evotheme-desktop-only {
        display: none;
    }
}

@media (width >= 60em) {
    .evotheme-bp-m .evotheme-mobile-only {
        display: none;
    }
}

@media (width < 75em) {
    .evotheme-bp-l .evotheme-desktop-only {
        display: none;
    }
}

@media (width >= 75em) {
    .evotheme-bp-l .evotheme-mobile-only {
        display: none;
    }
}

.evotheme-sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Altura de la cabecera para evo-section--under-header y evo-section--h-offset. Este valor aproximado evita el salto de
   diseño antes de que cargue js/header-height.js, que lo sustituye por la altura real (y la mantiene al girar el móvil o
   si el menú pasa a dos líneas). Sin ninguna de esas clases en la página, la variable no se usa. */
:root {
  --evo-header-h: calc(2.5rem + 2 * var(--evo-space-3, .75rem) + 1px);
}

/* Cabecera transparente: la primera sección pide ir bajo la cabecera (clase de <body> que pone layout/page.php). La
   cabecera sale del flujo y se pega arriba; la sección ya compensa su altura, así que no se añade ningún margen. Mientras
   dure deja de ser fija: con texto claro sobre una imagen, al desplazarse quedaría ilegible sobre el contenido. */
.evotheme-header-overlay .evotheme-header {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  z-index: 100;
  background: transparent;
  border-block-end-color: transparent;
}

.evotheme-header-overlay .evotheme-toolbar {
  background: transparent;
}

/* Color del texto de la cabecera según header_text de la sección: blanco o casi negro de evoBase. Sin tono
   (header_text = default) la cabecera conserva sus colores. */
.evotheme-header-tone-light .evotheme-header {
  --evo-header-fg: var(--evo-color-neutral-0);
}

.evotheme-header-tone-dark .evotheme-header {
  --evo-header-fg: var(--evo-color-neutral-950);
}

.evotheme-header-tone-light .evotheme-header,
.evotheme-header-tone-dark .evotheme-header {
  color: var(--evo-header-fg);
  --evo-color-text: var(--evo-header-fg);
  --evo-color-link: var(--evo-header-fg);
}

.evotheme-header-tone-light .evotheme-header .evo-button--ghost,
.evotheme-header-tone-dark .evotheme-header .evo-button--ghost {
  color: var(--evo-header-fg);
  border-color: currentColor;
}

/* Logo para el modo oscuro: salen las dos imágenes y se enseña la del modo en curso (el elegido con el conmutador, o el
   del sistema si no hay elección). Sin logo oscuro no hay segunda imagen y esto no actúa. */
.evotheme-brand__img--dark {
    display: none;
}

:root[data-evo-theme="dark"] .evotheme-brand__img--light {
    display: none;
}

:root[data-evo-theme="dark"] .evotheme-brand__img--dark {
    display: inline;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-evo-theme="light"]):not([data-evo-theme="dark"]) .evotheme-brand__img--light {
        display: none;
    }

    :root:not([data-evo-theme="light"]):not([data-evo-theme="dark"]) .evotheme-brand__img--dark {
        display: inline;
    }
}

/* Vista previa del Personalizador con el panel móvil abierto: la vista previa no ejecuta JavaScript, así que el <dialog open>
   no es modal (no sube a la capa superior ni pinta su telón). Se coloca a mano, pegado al borde, con su telón detrás. */
.evotheme-preview-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 90;
    background: var(--evo-color-backdrop);
}

.evotheme-preview-open > dialog[open] {
    position: fixed;
    z-index: 91;
    inset-block: 0;
    inset-inline-end: 0;
    inset-inline-start: auto;
    display: block;
}

.evotheme-modal.evotheme-preview-open > dialog[open] {
    inset: 0;
    margin: auto;
    block-size: fit-content;
    max-block-size: 90dvh;
}

/* Selector de idioma de la cabecera: códigos cortos (ES, EN) como botones pequeños; el idioma actual, sin enlace y marcado. */
.evotheme-lang__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--evo-space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.evotheme-lang__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 2.25rem;
    min-block-size: 2.25rem;
    padding-inline: var(--evo-space-2);
    border: 1px solid var(--evo-color-border);
    border-radius: var(--evo-radius-md);
    color: inherit;
    font-size: var(--evo-font-size-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
}

a.evotheme-lang__link:hover {
    background: var(--evo-color-surface-muted);
    text-decoration: underline;
}

.evotheme-lang__link--current {
    background: var(--evo-color-primary);
    border-color: var(--evo-color-primary);
    color: var(--evo-color-on-primary);
}

.evotheme-lang {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--evo-space-2);
}

.evotheme-lang__icon {
    inline-size: 1.125rem;
    block-size: 1.125rem;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Banderas (imágenes de mod_languages): tamaño y forma. Las redondas y las cuadradas recortan los lados de la imagen. */
.evotheme-lang__flag {
    inline-size: 1.125rem;
    block-size: auto;
    aspect-ratio: 4 / 3;
    flex: none;
    object-fit: cover;
}

.evotheme-lang__flag--s {
    inline-size: 0.875rem;
}

.evotheme-lang__flag--l {
    inline-size: 1.625rem;
}

.evotheme-lang__flag--round {
    aspect-ratio: 1;
    border-radius: 50%;
}

.evotheme-lang__flag--square {
    aspect-ratio: 1;
    border-radius: var(--evo-radius-sm, 0.25rem);
}

.evotheme-lang__link:has(.evotheme-lang__flag) {
    gap: var(--evo-space-2);
}

/* Estilos del selector: lista (por defecto, arriba), píldora y separador «|». */
.evotheme-lang--pill .evotheme-lang__link {
    border-radius: 999px;
}

.evotheme-lang--separator .evotheme-lang__list {
    gap: 0;
}

.evotheme-lang--separator .evotheme-lang__link {
    min-inline-size: 0;
    padding-inline: var(--evo-space-2);
    border-color: transparent;
    background: none;
    color: inherit;
    font-weight: 500;
}

.evotheme-lang--separator .evotheme-lang__link--current {
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.25em;
    background: none;
    color: inherit;
}

.evotheme-lang--separator .evotheme-lang__item + .evotheme-lang__item::before {
    content: "|";
    color: var(--evo-color-text-muted);
}

/* Variante desplegable de mod_languages (<details>, sin JavaScript). */
.evotheme-langmenu {
    position: relative;
}

.evotheme-langmenu__summary {
    cursor: pointer;
    list-style: none;
}

.evotheme-langmenu__summary::after {
    content: "";
    inline-size: 0.4em;
    block-size: 0.4em;
    margin-inline-start: var(--evo-space-2);
    border-inline-end: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    transform: translateY(-0.1em) rotate(45deg);
}

.evotheme-langmenu[open] > .evotheme-langmenu__summary::after {
    transform: translateY(0.1em) rotate(-135deg);
}

.evotheme-langmenu__summary::-webkit-details-marker {
    display: none;
}

.evotheme-langmenu__list {
    position: absolute;
    inset-block-start: calc(100% + var(--evo-space-1));
    inset-inline-end: 0;
    z-index: 20;
    flex-direction: column;
    align-items: stretch;
    min-inline-size: 100%;
    padding: var(--evo-space-1);
    background: var(--evo-color-surface);
    border: 1px solid var(--evo-color-border);
    border-radius: var(--evo-radius-md);
}

/* Dentro del menú móvil la lista del desplegable empuja el contenido en vez de flotar encima (tapaba el conmutador de modo). */
.evotheme-offcanvas .evotheme-langmenu__list,
.evotheme-modal .evotheme-langmenu__list {
    position: static;
    margin-block-start: var(--evo-space-1);
}

.evotheme-langmenu__list .evotheme-lang__link {
    justify-content: flex-start;
    white-space: nowrap;
    border-color: transparent;
}

.evotheme-panel__lang {
    margin-block-start: var(--evo-space-4);
}

/* Área de cliente de evoLicenses: toma el acento y el radio del tema (la extensión los lee de estas variables). */
.evolic {
    --evolic-accent: var(--evo-color-primary);
    --evolic-accent-text: var(--evo-color-on-primary);
    --evolic-radius: var(--evo-radius-md);
}