/* =============================================================
   WILDATLAS GUIDE
   ============================================================= */

/* =========================
   SHARED — Filtros WildAtlas
========================= */

.wa-filters {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--wag-space-12);
    margin-bottom: 40px;
    font-size: var(--wag-text-12);
    color: #666;
    text-align: center;
}

.wa-filter {
    background: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: var(--wag-shadow-15) !important;
    letter-spacing: 1px;
    padding: 0;
    margin-top: 20px;
    text-transform: uppercase;
    font-size: var(--wag-text-11);
    font-weight: 500;
    color: #aaa;
    cursor: pointer;
    transition: color .2s ease;
}

.wa .wa-filter:hover { color: #555; }

.wa .wa-filter:focus,
.wa .wa-filter:active {
    outline: none !important;
    box-shadow: var(--wag-shadow-15) !important;
}

.wa-filter.active {
    color: #111;
    font-weight: 700;
}

.wa-filter:not(.active) { opacity: 1; }

.wa-filter:not(:last-child)::after {
    content: "|";
    margin-left: 12px;
    color: #e5e5e5;
}

/* =========================
   SHARED — Topbar / Back to search
========================= */

/* Generic: every page-body topbar (any {type}-topbar) inherits the same look.
   The [class$="-topbar"] selector covers new page types automatically — no
   more hand-maintained type lists. */
.wildatlas-feature-band-topbar > [class$="-topbar"],
.country-topbar,
.species-topbar,
.operator-topbar,
.place-topbar {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    border-bottom: 1px solid var(--wag-type-topbar-underline, var(--wag-style-topbar-underline));
    /* #3: the row spans the full viewport (like the dark band ::before) so the
       back link sits at the far left of the whole width, not indented to the
       1200px content column. Mirrors the centred-100vw trick used elsewhere. */
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    padding: 0 24px;
}

.wildatlas-feature-band-topbar > [class$="-topbar"] a,
.country-topbar a,
.species-topbar a,
.operator-topbar a,
.place-topbar a {
    color: var(--wag-type-topbar-link-ink, var(--wag-style-topbar-link-ink));
    text-decoration: none;
    font-size: var(--wag-text-13);
    font-weight: 600;
    letter-spacing: .5px;

    /* Una línea con puntos suspensivos (Marc, 2026-09-14). La etiqueta de vuelta
       es un nombre ajeno —país, hotspot, operador— y puede ser larguísimo
       ("Aigüestortes i Estany de Sant Maurici National Park"): envolvía a dos
       líneas, rompía la barra de 46px y se metía por debajo del botón MENU, que
       es absoluto y arranca a 155px del borde derecho. Por eso el tope reserva
       170px: cortar antes de llegar al menú es lo que evita el solape, el
       ellipsis solo lo hace legible.

       EL RECORTE VA EN EL <span> INTERIOR, NO AQUÍ (Marc, 2026-09-15: "el
       símbolo < se corta"). El chevron es un ::before de 8x8 girado 45°, así
       que su caja sobresale ~1,6px por la izquierda del enlace — y al pasar el
       ratón se desplaza a left:-4px. Con `overflow:hidden` en el propio <a>,
       ese trozo quedaba cortado y la flecha aparecía mordida. El enlace deja de
       recortar; recorta solo el texto. */
    display: flex;
    align-items: center;
    max-width: calc(100% - 170px);
    min-width: 0;
}

.wildatlas-feature-band-topbar > [class$="-topbar"] a .back-to-search__label,
.country-topbar a .back-to-search__label,
.species-topbar a .back-to-search__label,
.operator-topbar a .back-to-search__label,
.place-topbar a .back-to-search__label {
    display: block;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.back-to-search {
    position: relative;
    color: var(--wag-type-back-ink, var(--wag-style-topbar-link-ink));
    text-decoration: none;
    padding-left: 18px;
    transition: .25s ease;
}

.back-to-search::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 8px;
    height: 8px;
    /* currentColor, no #fff. Era blanca fija: sobre la banda clara quedaba
       blanca sobre blanco mientras el texto de al lado sí se teñía. Siguiendo
       al texto no puede volver a separarse de él en ningún contexto. */
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
    transition: .25s ease;
}

.wa .back-to-search:hover::before { left: -4px; }
/* El desplazamiento de la flecha se queda; el `opacity: .85` se sustituye por
   el mismo tinte que ya usan los controles de cuenta, para que los dos
   extremos de la barra respondan igual. Sobre banda oscura sigue siendo el
   azul de marca de siempre; sobre banda clara, su versión para fondo claro,
   que la pone el bloque de :291. */
.wa .back-to-search:hover { color: var(--wa-topbar-hover-ink, #4fadd4); }

/* Barra superior en móvil: los dos extremos con el mismo peso y pulsables
   (Marc, 2026-10-04: «veo la flecha mucho más a la izquierda que el MENU»).
   Los márgenes ya eran 20 y 20; lo que descompensaba era el tamaño: «ATLAS»
   a 13px con una flecha de 8px frente a «MENU» a 14px en negrita y una
   hamburguesa de 20px. Ahora la vuelta va como MENU (14px/700) con la flecha
   más grande, y las dos zonas táctiles miden 44px de alto (lo que piden
   Apple y Google) sin cambiar el dibujo: la barra mide 46. */
@media (max-width: 1024px) {
    .wildatlas-feature-band-topbar > [class$="-topbar"] a.back-to-search,
    .country-topbar a.back-to-search, .species-topbar a.back-to-search,
    .operator-topbar a.back-to-search, .place-topbar a.back-to-search {
        min-height: 44px; padding-left: 22px;
        font-size: var(--wag-text-14); font-weight: 700; letter-spacing: .2px;
    }
    .back-to-search::before { width: 10px; height: 10px; border-left-width: 2.5px; border-bottom-width: 2.5px; left: 2px; }
    .wa .back-to-search:hover::before { left: -2px; }

    /* MENU sin sesión ya no tiene recuadro: la caja pulsable crece a 44. */
    /* body.wa: la regla de alturas de ~línea 25090 (34px) empata y va después. */
    body.wa #wa-account-btn-wrap .wa-guest-menu-btn,
/* Con sesión, igual: sin recuadro y caja pulsable de 44. */
    body.wa #wa-account-btn-wrap .wa-account-btn.is-logged-in{ height: 44px; }
}

/* =========================
   #2 — Unified global topbar (fixed, all pages EXCEPT the home which keeps its
   own Atlas-mode docked search). ONE bar: back (left) · search (floating,
   centred) · CTAs + user (the existing top-right cluster floats over it).
   Desktop-only so the approved mobile + home layouts are untouched.
========================= */
#wa-global-topbar { display: none; }
.wa-band-hidden { display: none !important; } /* the per-page back band, once its link is moved into the bar */

/* Un solo componente de búsqueda para la topbar global y para la home.
   Fuera del media query de escritorio a propósito: la home lo usa también en
   móvil.

   GEOMETRÍA y COLOR van separados, y no por gusto. `wa-topbar-search` empezó
   siendo "píldora grande Y oscura" en una sola pieza, porque la banda era
   negra en todas partes y en los dos temas. Al dejar de serlo, cada regla de
   color había que deshacerla a mano en el tema claro — restituyendo valores
   que este mismo fichero ya define más abajo, con el riesgo de que las dos
   copias se separaran con el tiempo.

   Ahora la clase sólo aporta el TAMAÑO —60px de alto, radio 17, su padding y
   su cuerpo de letra—, que es lo único propio de una barra. El color lo pone
   el tema: en oscuro, el bloque de abajo; en claro, el componente base de
   :14363, que ya es una tarjeta blanca con su filo y su sombra. Nada que
   restituir y nada que duplicar.

   La altura pasó de 60 a 55px (Marc, 2026-09-15): pesaba demasiado dentro de
   la banda. El radio baja un punto con ella para que la píldora conserve la
   misma proporción. */
.wa-topbar-search .wa-search { width: 100%; }
.wa-topbar-search .wa-search-bar { height: 55px; border-radius: var(--wag-radius-16); padding: 0 18px; }
.wa-topbar-search .wa-search-input { font-size: 17px; -webkit-appearance: none; appearance: none; }
.wa-topbar-search .wa-search-filters { display: flex; }
.wa-topbar-search .wa-search-panel { z-index: 99991; }

/* ── Piel clara ───────────────────────────────────────────────────────────
   El color lo pone el componente base, pero hay una cosa que sí hay que
   decir aquí: Astra pinta TODO input con borde, radio 4px y una sombra
   propia, y lo único que lo estaba suprimiendo era el `border: 0` de la piel
   oscura. Al separarla, el input reaparecía como una caja dentro de la
   píldora. La barra ES el campo: el input no tiene cromado propio. */
html:not([data-theme="dark"]) .wa-topbar-search .wa-search-input,
html:not([data-theme="dark"]) .wa .wa-topbar-search .wa-search-input:hover,
html:not([data-theme="dark"]) .wa .wa-topbar-search .wa-search-input:focus,
html:not([data-theme="dark"]) .wa .wa-topbar-search .wa-search-input:focus-visible,
html:not([data-theme="dark"]) .wa .wa-topbar-search .wa-search-input:active {
    background: var(--wag-type-field-search-dark-bg, var(--wag-style-field-search-dark-bg)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: var(--wag-shadow-15) !important;
    padding: 0 !important;
    height: auto !important;
    color: var(--wa-ink, #1a1e24) !important;
    outline: 0 !important;
}
html:not([data-theme="dark"]) .wa .wa-topbar-search .wa-search-input:-webkit-autofill,
html:not([data-theme="dark"]) .wa .wa-topbar-search .wa-search-input:-webkit-autofill:hover,
html:not([data-theme="dark"]) .wa .wa-topbar-search .wa-search-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--wa-ink, #1a1e24);
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
}
/* Al despojar el input le quitamos también su `outline`, y en claro no había
   nada que ocupara su sitio: enfocar el buscador con el teclado no producía
   ninguna señal. La píldora entera hace de indicador, igual que el halo que
   ya tiene la versión oscura. */
html:not([data-theme="dark"]) .wa .wa-topbar-search .wa-search:focus-within .wa-search-bar {
    border-color: rgba(79,173,212,.55);
    box-shadow: 0 6px 24px rgba(20,30,45,.10), 0 0 0 3px rgba(79,173,212,.16);
}
/* La "×" hereda el botón de Astra: radio 4 y sombra, que dentro de la píldora
   se leen como una cajita pegada. Mismo tratamiento que ya recibe en móvil. */
html:not([data-theme="dark"]) .wa-topbar-search .wa-search-clear,
html:not([data-theme="dark"]) .wa .wa-topbar-search .wa-search-clear:hover,
html:not([data-theme="dark"]) .wa .wa-topbar-search .wa-search-clear:focus,
html:not([data-theme="dark"]) .wa .wa-topbar-search .wa-search-clear:active {
    background: transparent !important;
    border: 0 !important;
    box-shadow: var(--wag-shadow-15) !important;
    outline: 0 !important;
}

/* ── Piel oscura: sólo cuando el tema lo es ──────────────────────────────── */
/* La píldora oscura, con el mismo trato que la clara (Marc, 2026-09-07).
   Antes era un bloque plano sin filo, y dentro llevaba el input pintado de
   #2a313a: una losa más clara con su propio radio de 4px, su padding y la
   sombrita de Astra. Dos cajas, una dentro de otra. La versión clara es un
   campo continuo, y esa era toda la diferencia de elegancia entre las dos.

   Ahora la píldora ES el campo también en oscuro: filo de 1px en el color de
   línea del tema, sombra suave —el equivalente oscuro de la que trae el
   componente base— y el input despojado de todo lo suyo.

   La sombra que había escrita aquí antes (`0 12px 38px rgba(0,0,0,.45)`)
   NUNCA llegó a pintarse: empataba con `html[data-theme="dark"] .wa-search-bar`
   de :14467, que va después y la pone a `none`. No se recupera aquel valor,
   que era el de una banda flotante; se pone el que corresponde. */
html[data-theme="dark"] .wa-topbar-search .wa-search-bar {
    background: var(--wag-dark-surface);
    border: 1px solid #2a313a;
    box-shadow: var(--wag-type-field-search-bar-topbar-dark-shadow, var(--wag-style-field-search-bar-topbar-dark-shadow));
}
html[data-theme="dark"] .wa .wa-topbar-search .wa-search:focus-within .wa-search-bar { box-shadow: 0 12px 40px rgba(79,173,212,.28); }
html[data-theme="dark"] .wa-topbar-search .wa-search-icon { color: #8a95a3; }
html[data-theme="dark"] .wa-topbar-search .wa-search-input,
html[data-theme="dark"] .wa .wa-topbar-search .wa-search-input:hover,
html[data-theme="dark"] .wa .wa-topbar-search .wa-search-input:focus,
html[data-theme="dark"] .wa .wa-topbar-search .wa-search-input:focus-visible,
html[data-theme="dark"] .wa .wa-topbar-search .wa-search-input:active {
    background: var(--wag-type-field-search-dark-bg, var(--wag-style-field-search-dark-bg)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: var(--wag-shadow-15) !important;
    padding: 0 !important;
    height: auto !important;
    color: var(--wag-type-field-search-dark-ink, var(--wag-style-field-search-dark-ink)) !important;
    outline: 0 !important;
}
html[data-theme="dark"] .wa-topbar-search .wa-search-input::placeholder { color: #7a8794; }
html[data-theme="dark"] .wa .wa-topbar-search .wa-search-input:-webkit-autofill,
html[data-theme="dark"] .wa .wa-topbar-search .wa-search-input:-webkit-autofill:hover,
html[data-theme="dark"] .wa .wa-topbar-search .wa-search-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--wag-dark-ink);
    -webkit-box-shadow: 0 0 0 1000px #1a1f26 inset;
}
html[data-theme="dark"] .wa-topbar-search .wa-sf-trigger { color: #9aa7b5; }
html[data-theme="dark"] .wa-topbar-search .wa-sf-trigger::before { background: #2a313a; }
html[data-theme="dark"] .wa-topbar-search .wa-sf-menu { background: #1a2535; border-color: #2d3b4d; box-shadow: 0 10px 30px rgba(10,18,30,.35); }
html[data-theme="dark"] .wa-topbar-search .wa-sf-item { background: #1a2535; color: #a8b8c8; }
html[data-theme="dark"] .wa .wa-topbar-search .wa-sf-item:hover { background: rgba(79,173,212,.12); color: #e0eaf2; }
html[data-theme="dark"] .wa-topbar-search .wa-sf-item.is-active { background: #4fadd4; color: #0d1e2c; }
html[data-theme="dark"] .wa-topbar-search .wa-search-panel { background: var(--wag-dark-surface); border-color: #2a313a; box-shadow: 0 18px 50px rgba(0,0,0,.5); }
html[data-theme="dark"] .wa .wa-topbar-search .wa-search-row:hover,
html[data-theme="dark"] .wa-topbar-search .wa-search-row.is-active { background: #232a33; }
html[data-theme="dark"] .wa-topbar-search .wa-search-en { color: var(--wag-dark-ink); }
html[data-theme="dark"] .wa-topbar-search .wa-search-sub { color: #93a0ab; }
html[data-theme="dark"] .wa-topbar-search .wa-search-es { color: #b9c2cc; }
html[data-theme="dark"] .wa-topbar-search .wa-search-sci { color: #8a95a3; }
html[data-theme="dark"] .wa-topbar-search .wa-search-thumb { background: #11161c; }
html[data-theme="dark"] .wa-topbar-search .wa-search-hotspots { background: #232a33; color: #b9c2cc; }
html[data-theme="dark"] .wa-topbar-search .wa-search-badge--birds { background: rgba(43,124,176,.22); color: #7cc1ea; }
html[data-theme="dark"] .wa-topbar-search .wa-search-badge--mammals { background: rgba(106,87,192,.22); color: #a99af0; }
html[data-theme="dark"] .wa-topbar-search .wa-search-badge--country { background: rgba(58,157,93,.22); color: #79d49b; }
html[data-theme="dark"] .wa-topbar-search .wa-search-badge--operator { background: rgba(47,102,144,.26); color: #8ab8dd; }
html[data-theme="dark"] .wa-topbar-search .wa-search-badge--hotspot { background: rgba(194,119,43,.22); color: #e0a868; }
html[data-theme="dark"] .wa-topbar-search .wa-search-badge--hotspot-nature { background: rgba(46,139,98,.22); color: #6dcfa0; }
html[data-theme="dark"] .wa-topbar-search .wa-search-badge--hotspot-business { background: rgba(201,144,32,.22); color: #d4aa55; }

@media (min-width: 1025px) {
    /* Bar stays THIN — it does NOT grow to host the search. The search pill
       floats and overhangs below the bar (same as the home docked topbar).
       Gated on .wa-has-topbar so pages WITHOUT the bar get no orphan offset. */
    body.wa-has-topbar { padding-top: 50px; }
    body.wa-has-topbar.admin-bar { padding-top: 82px; }
    #wa-global-topbar {
        display: block; position: fixed; top: 0; left: 0; right: 0; z-index: 99990;
        height: 50px; background: #12171e;
        box-shadow: 0 1px 22px rgba(0,0,0,.28);
    }
    /* La banda se queda OSCURA en todas las páginas y en los dos temas
       (Marc, 2026-09-07). Se probó a que siguiera al tema —clara en light,
       oscura en dark— y con ella los controles que lleva encima: enlace de
       vuelta, cuenta, idioma y tema. No convence, así que vuelve al negro y
       sus controles vuelven al blanco que ya tenían.

       Lo que NO vuelve es el buscador: sigue siendo claro en tema claro. Esa
       parte es independiente y está resuelta en :130 separando el tamaño del
       color, así que la píldora blanca vive sobre la banda negra sin que
       ninguna de las dos tenga que ceder. */
    body.admin-bar #wa-global-topbar { top: 32px; }

    /* Back link — left, vertically centred. El enlace es blanco porque la
       banda es oscura; en tema claro se tiñe justo debajo. */
    .wa-gt-back { position: absolute; left: 24px; top: 0; height: 50px; display: flex; align-items: center; }
    .wa-gt-back:empty { display: none; }
    .wa-gt-back .back-to-search { color: var(--wag-type-back-ink, var(--wag-style-topbar-link-ink)); font-size: var(--wag-text-13); font-weight: 600; letter-spacing: .5px; text-decoration: none; }
    /* Nombres largos («Aigüestortes i Estany de Sant Maurici National Park»)
       se metían por debajo del buscador (Marc, 2026-10-05). El enlace llega
       como mucho hasta 24px antes del borde de la píldora, que está centrada y
       mide min(780px, 52vw): el hueco libre a su izquierda es 50vw menos la
       mitad de ese ancho, menos los 24 de margen izquierdo. Se recorta el
       TEXTO con puntos suspensivos, no el enlace: así la flecha (::before) no
       se muerde (ver la nota de :103). */
    .wa-gt-back { max-width: calc(50vw - min(390px, 26vw) - 48px); }
    .wa-gt-back .back-to-search { display: flex; align-items: center; min-width: 0; max-width: 100%; }
    .wa-gt-back .back-to-search__label { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    /* Search — floats centred, overhanging BELOW the thin bar. EXACT home
       pill, forced to the dark-theme look regardless of site theme. Includes
       the ajax dropdown with thumbnails + badges.

       top:12 (antes 7): la píldora bajó de 60 a 55px de alto y con el mismo
       top quedaba pegada al borde de arriba. Los 5px que perdió de alto se
       los devolvemos como hueco superior, así que el vuelo por debajo de la
       barra sigue siendo el mismo de siempre (17px) y la barra no se toca
       (Marc, 2026-09-16). */
    .wa-gt-search { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); width: min(780px, 52vw); }
    /* User/CTA cluster — FIXED (not absolute) so it stays pinned in the fixed
       bar on scroll instead of scrolling away with the page; vertically centred
       inside the thin 50px bar, top-right. */
    body.wa-has-topbar #wa-account-btn-wrap { position: fixed; top: 2px; }
    body.wa-has-topbar.admin-bar #wa-account-btn-wrap { top: 34px; }

    /* Hotspot hero: nudge the top overlay controls down ~10px so they clear the
       floating search bar (Start observation list / Prime spot badge). */
    body.wa-has-topbar .hotspot-hero-camera-badge { top: 26px; }
}

/* =========================
   SHARED — Hotspot badges
========================= */

.gd-place-categories {
    position: absolute;
    bottom: 16px;
    right: 16px;
    z-index: 20;
}

.hotspot-badges {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
    z-index: 20;
}

.hotspot-badge {
    background: rgba(0,0,0,0.55);
    color: #fff;
    padding: 6px 12px;
    border-radius: var(--wag-radius-999);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* =========================
   SHARED — Separator / Meta names
========================= */

.separator { display: none; }

.scientific-name {
    font-size: 30px;
    font-style: italic;
    color: #4a4a4a;
    font-weight: 400;
    letter-spacing: -0.5px;
}

.spanish-name {
    font-size: var(--wag-text-18);
    color: #9a9a9a;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
}

/* =========================
   SHARED — WildAtlas Feature Bands
========================= */

.wildatlas-feature-band-topbar {
    position: relative;
    z-index: 1;
}

.wildatlas-feature-band-topbar::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    background: #12171e;
    z-index: -1;
}

.wildatlas-feature-band-hero-banner {
    position: relative;
    z-index: 1;
}

.wildatlas-feature-band-hero-banner::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    background: var(--wag-hero-side-bg, #b4c0ce);
    z-index: -1;
}