/* ============================================================
   AUTH — account button + login/register modal
   ============================================================ */
/* Header controls are ALWAYS integrated into the ATLAS topbar row (every
   resolution), except below 1024px where the logged-in box becomes a hamburger
   + full-screen menu. No floating corner column anymore.
       ← ATLAS .......... SIGN IN  EN ES  dark switch                          */
#wa-account-btn-wrap {
    position: absolute;        /* lives in the topbar; scrolls away with it */
    top: 0; right: 0; left: auto;
    z-index: 100000;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    height: 46px;
    /* 24 a la derecha, como la flecha de vuelta a la izquierda (2026-09-26);
       en móvil, 20 a cada lado (más abajo, junto a la barra). */
    padding: 0 24px 0 14px;
}
body.admin-bar #wa-account-btn-wrap { top: 32px; }
/* Topbar grows to host the controls as a single bar. */
.wildatlas-feature-band-topbar > [class$="-topbar"],
.country-topbar, .species-topbar, .operator-topbar, .place-topbar { height: 46px; }
/* Compact controls; even spacing, no dividers. */
#wa-account-btn-wrap .wa-langsw--inline,
#wa-account-btn-wrap .wa-theme-toggle--inline { margin: 0; }
#wa-account-btn-wrap > * + * { margin-left: 14px; }
/* ── Growth CTA buttons in the topbar ──────────────────────────── */
.wa-topbar-cta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 13px;
    border-radius: var(--wag-radius-8);
    font-size: var(--wag-text-12);
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
    text-decoration: none;
    transition: background .14s, color .14s, transform .1s;
    flex-shrink: 0;
}
.wa .wa-topbar-cta:hover { text-decoration: none; transform: translateY(-1px); }
.wa-topbar-cta--nature {
    color: #fff;
    background: #2d7a4f;
    border: 1.5px solid transparent;
}
.wa .wa-topbar-cta--nature:hover { background: #1d5f3a; color: #fff; }
.wa-topbar-cta--business {
    color: #fff;
    background: #2563b0;
    border: 1.5px solid transparent;
}
.wa .wa-topbar-cta--business:hover { background: #1a4a8a; color: #fff; }
/* Dark mode */
html[data-theme="dark"] .wa-topbar-cta--nature {
    color: #fff;
    background: #2d7a4f;
    border-color: transparent;
}
html[data-theme="dark"] .wa-topbar-cta--nature:hover {
    background: #1d5f3a;
    color: #fff;
}
/* Hidden below 1862px — CTAs live in hamburger menu (mobile + narrow desktop) */
@media (max-width: 1861px) {
    .wa-topbar-cta { display: none !important; }
}
#wa-account-btn-wrap .wa-account-btn { padding: 7px 13px; font-size: 12.5px; border-radius: 9px; box-shadow: var(--wag-shadow-14); }
#wa-account-btn-wrap .wa-account-btn:not(.is-logged-in) { margin-right: 10px; }
/* Flag badges, not text — no padding/font-size to set here anymore. */
#wa-account-btn-wrap .wa-theme-switch { padding: 2px; }
#wa-account-btn-wrap .wa-theme-switch-track { width: 40px; height: 22px; }
#wa-account-btn-wrap .wa-theme-switch-knob { width: 16px; height: 16px; }
/* Guest desktop pill: Sign in + language + dark toggle all inside ONE dark
   box, in that order (Marc, 2026-08-03). The Sign-in button loses its own
   independent pill (background/border/shadow/padding) so only the wrapper
   shows one — it stays clickable, same #wa-account-btn id/behaviour. */
/* Sin recuadro (Marc, 2026-10-04): «Iniciar sesión», idioma y modo oscuro
   van sueltos sobre la barra, sin fondo ni borde. Mismo cambio para el botón
   MENU de móvil sin sesión (.wa-guest-menu-btn, más abajo). */
#wa-account-btn-wrap .wa-guest-controls {
    display: inline-flex; align-items: center; gap: var(--wag-space-12);
    background: transparent; border: 0;
    border-radius: 9px; padding: 7px 0;
}
#wa-account-btn-wrap .wa-guest-controls .wa-account-btn {
    background: var(--wag-type-account-bg, var(--wag-style-account-bg)); border: 0; box-shadow: var(--wag-shadow-14); padding: 0; margin: 0; font-size: 12.5px;
}
#wa-account-btn-wrap .wa-guest-controls .wa-account-btn:not(.is-logged-in) { margin-right: 0; }
/* :hover iba con :focus y :active y se quedó fuera. El botón ya renunció a su
   propia píldora —la píldora es el grupo entero—, pero al pasar por encima se
   repintaba solo: fondo #1a1e24, borde azul, sombra y un salto de 1px DENTRO
   del grupo. Sobre la ficha oscura pasaba desapercibido; sobre la clara de la
   home era un rectángulo negro apareciendo dentro de una píldora blanca.
   El .wa delantero es necesario para ganarle a la regla de :8942, que empata
   en especificidad y va después. La respuesta al puntero la da el texto, en
   azul de marca, igual que ya hace el caret. */
.wa #wa-account-btn-wrap .wa-guest-controls .wa-account-btn:hover,
.wa #wa-account-btn-wrap .wa-guest-controls .wa-account-btn:focus,
.wa #wa-account-btn-wrap .wa-guest-controls .wa-account-btn:active {
    background: var(--wag-type-account-hover-bg, var(--wag-style-account-hover-bg)); border: 0; box-shadow: var(--wag-shadow-14); transform: none;
}
.wa #wa-account-btn-wrap .wa-guest-controls .wa-account-btn:hover,
.wa #wa-account-btn-wrap .wa-guest-controls .wa-account-btn:hover .wa-account-name { color: var(--wa-topbar-hover-ink, #4fadd4); }
#wa-account-btn-wrap .wa-guest-controls .wa-theme-switch { padding: 0; }
html[data-theme="dark"] #wa-account-btn-wrap .wa-theme-switch-knob { transform: translateX(18px); }
/* Logged-in box is integrated into the topbar: no pill border/background, and a
   slightly smaller avatar so it isn't cramped against the 46px bar. */
#wa-account-btn-wrap .wa-account-btn.is-logged-in,
#wa-account-btn-wrap .wa-account-btn.is-logged-in:hover,
#wa-account-btn-wrap .wa-account-btn.is-logged-in:focus,
#wa-account-btn-wrap .wa-account-btn.is-logged-in:active {
    background: var(--wag-type-account-bg, var(--wag-style-account-bg));
    border: 0;
    border-color: transparent;
    box-shadow: var(--wag-shadow-14);
    padding: 0 2px;
}
#wa-account-btn-wrap .wa-account-btn.is-logged-in .wa-account-avatar { width: 30px; height: 30px; }
/* El mismo agujero que en el grupo de invitado, y por la misma razón: el
   reset de arriba SÍ nombra :hover, pero empata a (1,2,0) y pierde contra la
   regla genérica de :8942, que va después y repinta píldora, borde azul,
   sombra y salto de 1px. Con la banda siempre negra el fondo #1a1e24 caía
   sobre otro #1a1e24 y no se veía; sobre la barra clara de la home aparece
   una caja oscura alrededor del avatar. El .wa delantero rompe el empate.
   Mismo lenguaje de respuesta que el resto de la barra: el texto en azul de
   marca, que es lo que ya hacía el caret por su cuenta. */
.wa #wa-account-btn-wrap .wa-account-btn.is-logged-in:hover,
.wa #wa-account-btn-wrap .wa-account-btn.is-logged-in:focus,
.wa #wa-account-btn-wrap .wa-account-btn.is-logged-in:active {
    background: var(--wag-type-account-hover-bg, var(--wag-style-account-hover-bg));
    border: 0;
    border-color: transparent;
    box-shadow: var(--wag-shadow-14);
    transform: none;
}
.wa #wa-account-btn-wrap .wa-account-btn.is-logged-in:hover,
.wa #wa-account-btn-wrap .wa-account-btn.is-logged-in:hover .wa-account-name { color: var(--wa-topbar-hover-ink, #4fadd4); }
/* HOME reuses the same desktop user box position and appearance as the global
   topbar. Mobile keeps its compact full-width controls below. */
body.wa-home #wa-account-btn-wrap { position: fixed; top: 2px; }
@media (max-width: 1024px) {
    body.wa-home #wa-account-btn-wrap {
        top: 2px;
        left: 0;
        right: 0;
        justify-content: space-between;
        padding: 0 20px;
    }
    body.wa-home #wa-account-btn-wrap > * + * { margin-left: 0; }
}
/* Mobile: igual height exacto entre CTAs y MENU button */
@media (max-width: 1024px) {
    body.wa-home #wa-account-btn-wrap .wa-topbar-cta {
        display: inline-flex !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        padding-left: 10px;
        padding-right: 10px;
        height: 32px !important;
        font-size: 10px;
        border-radius: var(--wag-type-topbar-cta-radius, var(--wag-style-topbar-cta-radius));
        gap: var(--wag-space-4);
    }
    body.wa-home #wa-account-btn-wrap .wa-account-btn.is-logged-in {
        height: 44px !important;
    }
}
@media (max-width: 1024px) {
    body.wa-home #wa-account-btn-wrap .wa-account-btn.is-logged-in,
    body.wa-home #wa-account-btn-wrap .wa-account-btn.is-logged-in:hover,
    body.wa-home #wa-account-btn-wrap .wa-account-btn.is-logged-in:focus,
    body.wa-home #wa-account-btn-wrap .wa-account-btn.is-logged-in:active {
        /* Sin recuadro, como en el resto de la web (Marc, 2026-10-04). */
        background: var(--wag-type-account-bg, var(--wag-style-account-bg));
        border: 0;
        box-shadow: var(--wag-shadow-14);
        padding: 0;
    }
}
/* In atlas/scrolled the pill stays dark — topbar is translucent so contrast is needed */
/* Mobile home: dark-mode toggle wraps to its own row below the Sign in button */
@media (max-width: 1024px) {
    body.wa-home #wa-account-btn-wrap {
        flex-wrap: wrap;
        height: auto;
        padding-top: 5px;
        padding-bottom: 5px;
        row-gap: var(--wag-space-4);
    }
    body.wa-home #wa-account-btn-wrap .wa-theme-toggle--inline {
        order: 10;
        flex: 0 0 100%;
        justify-content: flex-end !important;
        height: 22px;
    }
}

/* Apple-style dark-mode switch (header): sun · track · moon, no text */
.wa-theme-switch {
    display: inline-flex !important;
    align-items: center;
    gap: 9px;
    background: none !important;
    border: 0 !important;
    padding: 2px !important;
    cursor: pointer;
    box-shadow: var(--wag-shadow-15) !important;
}
.wa .wa-theme-switch:hover { background: none !important; }
.wa-theme-switch .wa-th-ico { flex: 0 0 auto; transition: color .2s ease, opacity .2s ease; }
/* Light: sun active (yellow), moon dimmed. Dark: moon active (light blue), sun dimmed.
   Marc, 2026-08-02: "el sol amarillo en light, la luna azul claro en dark". */
.wa-theme-switch .wa-th-sun-ico  { color: #f5b700; opacity: 1; }
.wa-theme-switch .wa-th-moon-ico { color: #9aa6b1; opacity: .55; }
html[data-theme="dark"] .wa-theme-switch .wa-th-sun-ico  { color: #7e8896; opacity: .55; }
html[data-theme="dark"] .wa-theme-switch .wa-th-moon-ico { color: #7ec8e3; opacity: 1; }
.wa-theme-switch-track {
    position: relative;
    flex: 0 0 auto;
    width: 44px;
    height: 25px;
    border-radius: var(--wag-radius-999);
    background: #cfd6dd;
    transition: background .2s ease;
}
.wa-theme-switch-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--wag-surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    transition: transform .2s ease;
}
html[data-theme="dark"] .wa-theme-switch-track { background: #1f8a52; }
html[data-theme="dark"] .wa-theme-switch-knob { transform: translateX(19px); }

.wa-account-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 24px;
    border: 1px solid var(--wag-type-account-line, var(--wag-style-account-line));
    border-radius: var(--wag-type-account-radius, var(--wag-style-account-radius));
    background: #1a1e24;
    color: var(--wag-type-account-ink, var(--wag-style-account-ink));
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: .03em;
    cursor: pointer;
    box-shadow: var(--wag-type-account-shadow, var(--wag-style-account-shadow));
    transition: border-color .15s, box-shadow .15s, transform .15s;
    white-space: nowrap;
}
/* Astra paints button:focus blue and it sticks after clicking — reset it
   on every WildAtlas control (focus keeps the button's own base style). */
#wa-account-btn-wrap .wa-account-btn:focus,
#wa-account-btn-wrap .wa-account-btn:active {
    background: var(--wag-type-account-focus-bg, var(--wag-style-account-focus-bg));
    color: var(--wag-type-account-focus-ink, var(--wag-style-account-focus-ink));
    border-color: var(--wag-type-account-focus-line, var(--wag-style-account-focus-line));
    outline: none;
}
.wa-auth-modal .wa-auth-close:focus,
.wa .wa-auth-modal .wa-auth-eye:focus {
    background: none;
    color: #aaa;
    outline: none;
    box-shadow: var(--wag-shadow-14);
}
.wa-auth-modal .wa-auth-submit:focus,
.wa-profile-form .wa-auth-submit:focus,
.wa #wa-review-form .wa-auth-submit:focus {
    background: #1a1e24;
    color: #fff;
    outline: none;
}
.wa .wa-reviews-write-btn:focus {
    background: var(--wag-surface);
    color: var(--wag-type-reviews-write-focus-ink, var(--wag-style-reviews-write-focus-ink));
    border-color: var(--wag-type-reviews-write-focus-line, var(--wag-style-reviews-write-focus-line));
    outline: none;
    box-shadow: var(--wag-shadow-14);
}
.wa .wa-review-cancel:not(.wag-btn):focus {
    background: none;
    color: #5f7f9f;
    outline: none;
    box-shadow: var(--wag-shadow-14);
}

/* ID-prefixed to beat Astra's global button:hover blue — stays dark, subtle lift */
.wa #wa-account-btn-wrap .wa-account-btn:hover {
    background: #1a1e24;
    color: var(--wag-type-account-hover-ink, var(--wag-style-account-hover-ink));
    border-color: var(--wag-type-account-hover-line, var(--wag-style-account-hover-line));
    box-shadow: var(--wag-type-account-hover-shadow, var(--wag-style-account-hover-shadow));
    transform: translateY(-1px);
}
.wa-account-btn .wa-account-avatar {
    border-radius: 50%;
    display: block;
    box-shadow: 0 0 0 2px rgba(79, 173, 212, .85);
}
.wa-account-btn.is-logged-in { padding: 9px 18px 9px 10px; }

.wa-account-caret {
    color: #5f7f9f;
    transition: transform .18s;
}
.wa-account-btn[aria-expanded="true"] .wa-account-caret { transform: rotate(180deg); }
/* Variable y no #4fadd4 a pelo. Hoy nadie la redefine —la barra es oscura en
   todas partes y el azul de marca es el correcto sobre ella—, pero #4fadd4
   está calculado para fondo OSCURO: sobre blanco se queda en 2:1 y brilla
   antes que contrastar. Si alguna superficie clara vuelve a alojar estos
   controles, el valor claro de la familia es #2b7cb0 (el otro extremo del
   degradado de :15019, y ya el hover de .wa-hide-card__location) y basta con
   ponerlo en --wa-topbar-hover-ink sin tocar ninguna regla. */
.wa .wa-account-btn:hover .wa-account-caret { color: var(--wa-topbar-hover-ink, #4fadd4); }

.wa-account-menu {
    position: absolute;
    /* 20px por debajo de la barra superior y 20px del borde derecho, los mismos
       que la burbuja del chat (Marc, 2026-10-12). La caja del botón acaba 2px
       antes que la barra y en el borde del contenido. */
    top: calc(100% + 22px);
    right: 20px;
    min-width: 290px;
    max-height: calc(100vh - 90px);   /* y 20px abajo */
    overflow-y: auto;
    background: var(--wag-type-account-menu-bg, var(--wag-style-account-menu-bg));
    border: 1px solid var(--wag-type-account-menu-line, var(--wag-style-account-menu-line));
    border-radius: var(--wag-type-account-menu-radius, var(--wag-style-account-menu-radius));
    box-shadow: var(--wag-type-account-menu-shadow, var(--wag-style-account-menu-shadow));
    padding: 8px;
    z-index: 9999;
}
.wa-account-menu { scrollbar-width:none; -ms-overflow-style:none; }
.wa-account-menu::-webkit-scrollbar { display:none; width:0; height:0; }
/* ── My Collection collapsible group ────────────────────────────── */
.wa-menu-group-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border-radius: 9px;
    background: none;
    border: 0;
    color: #d9e0e7;
    font-size: 14.5px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background .12s, color .12s;
}
.wa-menu-group-toggle svg:first-child { color: #5f7f9f; flex-shrink: 0; }
.wa .wa-menu-group-toggle:hover { background: rgba(79, 173, 212, .14); color: #fff; }
.wa .wa-menu-group-toggle:hover svg:first-child { color: #4fadd4; }
.wa-menu-group-caret {
    margin-left: auto;
    color: #5f7f9f;
    transition: transform .18s;
    flex-shrink: 0;
}
.wa-menu-group-toggle[aria-expanded="true"] .wa-menu-group-caret { transform: rotate(180deg); }
/* Punto del grupo: el dot vive en un <button>, no en un <a>, así que no hereda
   el estilo de .wa-account-menu a .wa-menu-dot. Empuja él el espacio y deja al
   caret pegado a su derecha. */
.wa-menu-dot--group {
    width: 8px; height: 8px; border-radius: 50%;
    background: #e0392b; margin-left: auto; flex-shrink: 0;
}
.wa-menu-dot--group + .wa-menu-group-caret { margin-left: 0; }

/* Aviso neutro en la sidebar del tour (fechas pasadas, sin cupo…): informa sin
   alarmar — no es un error, es un estado. */
.tour-status-note {
    background: #f3f6f9; border: 1px solid #dde5ed; color: #4a5b6b;
    border-radius: 10px; padding: 10px 12px; margin-bottom: 10px;
    font-size: 12.5px; line-height: 1.45;
}
.wa-menu-group-items { padding-left: 12px; }
.wa-menu-group-items a { font-size: var(--wag-text-13); padding: 8px 12px; }
.wa-menu-group-items[hidden] { display: none; }
.wa-account-menu-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px 12px;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.wa-account-menu-head img { border-radius: 50%; box-shadow: 0 0 0 2px rgba(79, 173, 212, .85); }
.wa-account-menu-name {
    display: block;
    font-size: var(--wag-text-14);
    font-weight: 700;
    color: #fff;
}
.wa-account-menu-cat {
    display: block;
    font-size: var(--wag-text-11);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #4fadd4;
    margin-top: 2px;
}
.wa-account-menu a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 14px;
    border-radius: 9px;
    color: #d9e0e7;
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background .12s, color .12s;
}
.wa-account-menu a svg { color: #5f7f9f; flex-shrink: 0; }
/* El color sólo estaba en el estado normal. En :hover, Astra tiene un a:hover
   propio (o un a:hover * que alcanza a los hijos) con más especificidad que
   nuestra clase suelta, y el texto se volvía oscuro sobre el fondo oscuro del
   menú — parecía que el hover no hacía nada (Marc, 2026-07-27). Se fija aquí
   el mismo color, no uno nuevo. */
.wa .wa-account-menu a:hover { background: rgba(79, 173, 212, .14); color: #d9e0e7; }
.wa .wa-account-menu a:hover svg { color: #4fadd4; }

/* Hover más claro (Marc, 2026-10-12): el tinte de antes apenas se veía y el
   texto no cambiaba. Ahora fondo algo más presente, texto blanco y el icono se
   enciende y avanza 2px; mismo estado con teclado (focus-visible) y uno algo
   más marcado al pulsar. Vale para enlaces y para el grupo «Mi colección»; las
   tarjetas de color (owner, growth) tienen el suyo, más específico. */
.wa-account-menu a svg,
.wa-menu-group-toggle svg:first-child { transition: color .15s ease, transform .15s ease; }
.wa-account-menu a, .wa-menu-group-toggle { transition: background .15s ease, color .15s ease; }
.wa .wa-account-menu a:hover,
.wa .wa-account-menu a:focus-visible,
.wa .wa-menu-group-toggle:hover,
.wa .wa-menu-group-toggle:focus-visible {
    background: rgba(79, 173, 212, .17); color: #fff; outline: none;
}
.wa .wa-account-menu a:active,
.wa .wa-menu-group-toggle:active { background: rgba(79, 173, 212, .26); color: #fff; }
.wa .wa-account-menu a:hover svg,
.wa .wa-account-menu a:focus-visible svg,
.wa .wa-menu-group-toggle:hover svg:first-child,
.wa .wa-menu-group-toggle:focus-visible svg:first-child { color: #4fadd4; transform: translateX(2px); }

/* Owner's primary workspace: first item, visually distinct from profile links
   and from the amber states used for incomplete/verification warnings. */
.wa-account-menu .wa-account-owner-cta {
    margin: 2px 0 7px;
    padding: 11px 12px;
    border: 1px solid rgba(209, 139, 78, .55);
    background: linear-gradient(135deg, rgba(154,91,45,.34), rgba(112,62,29,.22));
    color: #f4d2b2;
}
.wa-account-menu .wa-account-owner-cta > svg { color: #dfa064; }
.wa-account-owner-cta-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 1px; }
.wa-account-owner-cta-copy strong { color: #ffe2c5; font-size: 13.5px; line-height: 1.25; }
.wa-account-owner-cta-copy small { color: #c7a584; font-size: 10.5px; font-weight: 650; line-height: 1.25; }
.wa .wa-account-menu .wa-account-owner-cta:hover {
    border-color: rgba(232, 164, 103, .78);
    background: linear-gradient(135deg, rgba(177,103,50,.48), rgba(126,68,30,.34));
    color: #fff0e0;
}
.wa .wa-account-menu .wa-account-owner-cta:hover svg { color: #f1b67e; }

/* ── Growth CTAs at top of hamburger menu ─────────────────────────── */
.wa-menu-growth-cta {
    font-weight: 700 !important;
}
.wa-menu-growth-cta--biz,
.wa-menu-growth-cta--biz svg{ color: #8ec8f0 !important; }
.wa .wa-menu-growth-cta--biz:hover { background: rgba(79,173,212,.14) !important; }
.wa-menu-growth-cta--nature,
.wa-menu-growth-cta--nature svg{ color: #5de09a !important; }
.wa .wa-menu-growth-cta--nature:hover { background: rgba(45,122,79,.22) !important; }
.wa-menu-growth-sep {
    height: 1px;
    background: rgba(255,255,255,.08);
    margin: 4px 4px 4px;
    border-radius: 1px;
}

/* Mobile-only chrome: brand + hamburger in the button, full-screen menu bar.
   Hidden on desktop (the avatar + name + caret dropdown stays as-is). */
.wa-account-brand, .wa-account-burger, .wa-account-menu-bar,
/* Guest hamburger trigger: mobile-only (≤1200px shows it — see the @media
   block below); hidden by default here on desktop, where the inline Sign in +
   toggles (.wa-guest-desktop-only) are used instead. #wa-guest-menu itself
   needs no display override — it shares .wa-account-menu's own base styling
   and [hidden] handling, same as the logged-in dropdown. */
.wa-guest-menu-btn{ display: none; }
.wa-guest-menu-signin {
    display: flex; align-items: center; gap: 10px; width: 100%;
    background: none; border: 0; text-align: left; cursor: pointer;
    color: #fff; font-family: inherit; font-weight: 600;
}
/* Los cuatro estados con color propio (Marc, 2026-10-07): el hover sólo
   cambiaba el fondo y Astra le ponía su color de botón, oscuro sobre oscuro. */
.wa .wa-guest-menu-signin:hover,
.wa .wa-guest-menu-signin:focus,
.wa .wa-guest-menu-signin:active { background: rgba(255,255,255,.06); color: #fff; box-shadow: var(--wag-shadow-14); }
.wa .wa-guest-menu-signin:focus-visible { outline: 2px solid rgba(79,173,212,.5); outline-offset: 2px; }
.wa-guest-menu-signin svg { flex-shrink: 0; color: #4fadd4; }

/* ── Profile page ── */
.profile-container { width: 100%; } /* .ast-container is flex; stretch the only child */

.profile-card {
    background: var(--wag-surface);
    box-shadow: var(--wag-shadow-6);
    padding: 0 20px 20px;
}

/* Card fills the content area down to the footer (generic — any wa_view page) */
body.wa-fullheight #content.site-content { display: flex; }
body.wa-fullheight #content .ast-container { width: 100%; } /* flex item would shrink-wrap otherwise */
body.wa-fullheight .ast-container > div[class*="-container"] {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0; /* the usual `margin: auto` would vertically center inside the stretched flex parent */
}
body.wa-fullheight .wa-page-card { flex: 1; }

/* Hero + tabs span the full card width (cancel the card's side padding) */
.profile-card .wildatlas-feature-band-hero-banner { margin: 0 -20px; }

.profile-hero {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 40px 48px;
    background: var(--wag-type-profile-hero-bg, var(--wag-style-profile-hero-bg));
    color: var(--wag-type-profile-hero-ink, var(--wag-style-profile-hero-ink));
}
/* Anillo con box-shadow y no con border: así el aro no suma al tamaño de la
   imagen y el avatar sigue midiendo lo que dice width/height. Azul de la casa
   (#4fadd4), el mismo del hover del botón y del estado activo de observar. */
.profile-hero-avatar {
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px #4fadd4, 0 0 0 6px rgba(79,173,212,.22);
}
.profile-hero-info { flex: 1; min-width: 0; }
.profile-hero-name {
    margin: 0 0 6px;
    font-size: 32px;
    color: var(--wag-type-profile-hero-name-ink, var(--wag-style-category-name-ink));
}
.profile-hero-meta {
    display: flex;
    gap: 10px;
    font-size: var(--wag-text-14);
    color: var(--wag-type-profile-hero-meta-ink, var(--wag-style-profile-hero-meta-ink));
}
.profile-hero-logout {
    padding: 8px 18px;
    border: 1px solid var(--wag-type-hero-logout-line, var(--wag-style-hero-logout-line));
    border-radius: var(--wag-radius-12);
    color: var(--wag-type-hero-logout-ink, var(--wag-style-hero-logout-ink));
    font-size: var(--wag-text-13);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s, border-color .15s;
}
.wa .profile-hero-logout:hover { background: #4fadd4; border-color: #4fadd4; color: var(--wag-type-hero-logout-hover-ink, var(--wag-style-hero-logout-hover-ink)); }

.wa-profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 18px;
}
.wa-profile-card {
    display: block;
    border-radius: 14px;
    overflow: hidden;
    background: var(--wag-surface);
    border: 1px solid #e3e8ee;
    text-decoration: none;
    transition: box-shadow .15s, transform .15s;
}
.wa .wa-profile-card:hover {
    box-shadow: 0 8px 22px rgba(26, 30, 36, .12);
    transform: translateY(-2px);
}
.wa-profile-card-img {
    aspect-ratio: 4 / 3;
    background: #f8f9fb;
}
.wa-profile-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.wa-profile-card-body { padding: 12px 14px 14px; }
.wa-profile-card-title {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #1a1e24;
}
.wa-profile-card-sub {
    display: block;
    font-size: 12.5px;
    font-style: italic;
    color: #5f7f9f;
    margin-top: 2px;
}
.wa-profile-card-stars {
    display: block;
    margin-top: 4px;
    font-size: var(--wag-text-14);
    color: #4fadd4;
    letter-spacing: 2px;
}
.wa-profile-empty {
    color: #888;
    font-size: 15px;
    padding: 8px 0;
}

/* Profile tab bar (under the hero) */
.profile-tabs {
    display: flex;
    gap: 2px;
    background: var(--wag-type-tabs-bg, var(--wag-style-tabs-bg));
    border-top: 1px solid var(--wag-type-tabs-topline, var(--wag-style-tabs-topline));
}
.profile-tab {
    padding: 14px 22px;
    font-size: var(--wag-text-13);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #aaa;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    transition: color .15s, border-color .15s;
}
.wa .profile-tab:hover { color: #fff; }
.profile-tab.is-active {
    color: #fff;
    border-bottom-color: #4fadd4;
}

/* Pagination */
.wa-profile-pagination {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 26px;
}
.wa-profile-page-btn {
    padding: 8px 18px;
    border: 1px solid #e3e8ee;
    border-radius: var(--wag-radius-12);
    background: var(--wag-surface);
    color: #1a1e24;
    font-size: var(--wag-text-14);
    font-weight: 600;
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
}
.wa .wa-profile-page-btn:hover { background: #4fadd4; border-color: #4fadd4; color: #fff; }
.wa-profile-page-info { font-size: var(--wag-text-14); color: #5f7f9f; }

/* Edit profile form */
/* Editar perfil: ocupaba 640px fijos dentro de un contenedor mucho más ancho
   y sin caja, así que se leía como un formulario suelto en medio de la página
   mientras el resto de paneles del perfil son tarjetas (Marc, 2026-08-30).
   Ahora usa el ancho disponible y comparte el lenguaje del resto. */
.wa-profile-form {
    max-width: none;
    padding: 22px 24px;
    border: 1px solid var(--wa-line, #e3e9ee);
    border-radius: var(--wag-radius-16);
    background: var(--wa-card, #fff);
    box-shadow: 0 10px 30px -26px rgba(20, 40, 30, .5);
}
/* Separador entre la zona del avatar y los campos, del mismo tono que el borde. */
.wa-profile-form-avatar { border-bottom: 1px solid var(--wa-line, #e3e9ee); padding-bottom: 20px; }

.wa-profile-form-avatar {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 22px;
}
.wa-profile-avatar-preview {
    border-radius: 50%;
    width: 80px;
    height: 80px;
    object-fit: cover;
}
.wa-profile-avatar-btn {
    display: inline-block;
    padding: 8px 18px;
    border: 1px solid #e3e8ee;
    border-radius: var(--wag-radius-12);
    background: var(--wag-surface);
    font-size: var(--wag-text-13);
    font-weight: 600;
    color: #1a1e24;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.wa .wa-profile-avatar-label:hover .wa-profile-avatar-btn { background: #4fadd4; border-color: #4fadd4; color: #fff; }
.wa-profile-avatar-hint {
    display: block;
    margin-top: 6px;
    font-size: var(--wag-text-12);
    color: #888;
}

.wa-profile-form-fields {
    display: grid;
    /* Se adapta al ancho real en vez de dos columnas fijas: dos en pantallas
       medianas, tres en las anchas. El min() evita que un campo fuerce scroll
       horizontal en móvil. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 4px 22px;
}
.wa-profile-form-fields label {
    display: block;
    margin-bottom: 14px;
    font-size: var(--wag-text-13);
    font-weight: 600;
    color: #5f7f9f;
}
.wa-profile-form-full { grid-column: 1 / -1; }
.wa-profile-optional { font-weight: 400; color: #aaa; }
.wa-profile-field-hint { display: block; margin-top: 5px; font-size: 11.5px; line-height: 1.45; font-weight: 400; color: #748190; }
.wa-profile-instagram-input {
    display: flex; align-items: center; gap: 7px; margin-top: 5px; padding: 0 12px;
    border: 1px solid #e3e8ee; border-radius: 10px; background: var(--wag-surface); color: #7d8792;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.wa-profile-instagram-input svg { flex: 0 0 auto; color: #c13584; }
.wa-profile-instagram-input > span { font-size: 15px; font-weight: 700; color: #c13584; }
.wa-profile-form-fields .wa-profile-instagram-input input {
    min-width: 0; min-height: 0; margin: 0; padding: 12px 0; border: 0; border-radius: 0;
    background: var(--wag-type-field-profile-bg, var(--wag-style-field-profile-bg)); box-shadow: var(--wag-shadow-14); outline: 0;
}
.wa-profile-instagram-input:focus-within { border-color: #c13584; box-shadow: 0 0 0 3px rgba(193,53,132,.14); }
html[data-theme="dark"] .wa-profile-instagram-input { background: #151b22; border-color: #36414c; color: #aeb8c2; }
html[data-theme="dark"] .wa-profile-form-fields .wa-profile-instagram-input input { background: transparent; color: var(--wag-type-field-profile-dark-ink, var(--wag-style-field-profile-dark-ink)); }

/* Modo oscuro del formulario de editar perfil: los campos se quedaban en
   blanco sobre la tarjeta oscura, porque solo el de Instagram tenía versión
   oscura (Marc, 2026-08-30). Mismos valores que ese, para no abrir una
   segunda paleta. */
html[data-theme="dark"] .wa-profile-form-fields input,
html[data-theme="dark"] .wa-profile-form-fields select,
html[data-theme="dark"] .wa-profile-form-fields textarea {
    border-color: var(--wag-type-field-profile-dark-line, var(--wag-style-field-profile-dark-line));
    /* background-color, NO el atajo: `background:` reinicia repeat y position,
       y el chevron del select acababa repetido en mosaico. */
    background-color: var(--wag-type-field-profile-dark-bg, var(--wag-style-field-profile-dark-bg));
    color: var(--wag-dark-ink);
}
html[data-theme="dark"] .wa-profile-form-fields input::placeholder,
html[data-theme="dark"] .wa-profile-form-fields textarea::placeholder { color: #6b7a88; }
html[data-theme="dark"] .wa-profile-form-fields label { color: #8fa6bb; }
html[data-theme="dark"] .wa-profile-field-hint { color: #8b97a3; }
html[data-theme="dark"] .wa-profile-optional { color: #77828d; }
html[data-theme="dark"] .wa-profile-avatar-btn {
    border-color: #36414c;
    background: #202730;
    color: #d5dde4;
}
html[data-theme="dark"] .wa-profile-avatar-hint { color: #8b97a3; }

.wa-profile-form-fields input,
.wa-profile-form-fields select,
.wa-profile-form-fields textarea {
    display: block;
    width: 100%;
    /* Un punto más altos: 10px de relleno dejaban los campos con aspecto
       apretado ahora que la tarjeta usa todo el ancho (Marc, 2026-08-30).
       min-height por si algún campo lleva su propio padding. */
    min-height: 44px;
    margin-top: 5px;
    padding: 12px 13px;
    border: 1px solid var(--wag-type-field-profile-line, var(--wag-style-field-profile-line));
    border-radius: var(--wag-type-field-profile-radius, var(--wag-style-field-profile-radius));
    font-size: 15px;
    color: var(--wag-type-field-profile-ink, var(--wag-style-field-profile-ink));
    background: var(--wag-surface);
    box-sizing: border-box;
}
.wa-profile-form-fields textarea { min-height: 96px; }
.wa-profile-form-fields input:focus,
.wa-profile-form-fields select:focus,
.wa .wa-profile-form-fields textarea:focus {
    border-color: var(--wag-type-field-profile-focus-line, var(--wag-style-field-profile-focus-line));
    outline: none;
    box-shadow: var(--wag-shadow-5);
}

.wa-profile-form-msg { margin: 0 0 14px; font-size: var(--wag-text-14); }
.wa-profile-form-msg.is-error   { color: #ff3040; }
.wa-profile-form-msg.is-success { color: #2e9e5b; }

.wa-profile-save { max-width: 220px; }

@media (max-width: 700px) {
    .wa-profile-form-fields { grid-template-columns: 1fr; }
    .profile-tabs { padding: 0 16px; overflow-x: auto; }
}

/* ============================================================
   REVIEWS — Google-style hotspot reviews
   ============================================================ */
/* Review page container (same card pattern as other templates) */
.review-container { width: 100%; margin: auto; padding-top: 0; }
.review-card {
    background: var(--wag-surface);
    box-shadow: var(--wag-shadow-6);
    padding: 0 20px 20px;
}

/* ── My Lists ── */
.wa-lists-create {
    display: flex;
    align-items: center;
    gap: var(--wag-space-12);
    max-width: 560px;
    margin-bottom: 28px;
}
.wa-lists-create input {
    flex: 1;
    padding: 11px 14px;
    border: 1px solid #e3e8ee;
    border-radius: 10px;
    font-size: 15px;
    color: #1a1e24;
}
.wa .wa-lists-create input:focus {
    border-color: #4fadd4;
    outline: none;
    box-shadow: var(--wag-shadow-5);
}
.wa-lists-create .wa-lists-create-btn.wa-auth-submit {
    width: auto;
    max-width: none;
    flex-shrink: 0;
    padding: 11px 22px;
}
.wa-lists-create-msg { font-size: var(--wag-text-13); color: #ff3040; }

.wa-lists-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--wag-space-16);
}
@media (max-width: 900px) {
    .wa-lists-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    .wa-lists-grid { grid-template-columns: 1fr; }
}
.wa-list-card {
    position: relative;
    border: 1px solid #e3e8ee;
    border-radius: 14px;
    background: var(--wag-surface);
    transition: box-shadow .15s, transform .15s;
}
.wa .wa-list-card:hover {
    box-shadow: 0 8px 22px rgba(26, 30, 36, .12);
    transform: translateY(-2px);
}
.wa-list-card-link {
    display: block;
    padding: 18px 44px 14px 18px;
    text-decoration: none;
}
.wa-list-card-name {
    display: block;
    font-size: var(--wag-text-16);
    font-weight: 700;
    color: #1a1e24;
}
.wa-list-card-count {
    display: block;
    margin-top: 4px;
    font-size: var(--wag-text-13);
    color: #5f7f9f;
}
.wa-list-card-delete,
.wa-list-item-remove {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    box-shadow: var(--wag-shadow-14);
    font-size: var(--wag-text-20);
    line-height: 28px;
    color: #aaa;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.wa-list-card-delete:hover,
.wa-list-item-remove:hover,
.wa-list-card-delete:focus,
.wa .wa-list-item-remove:focus {
    background: rgba(255, 48, 64, .10);
    color: #d92638;
    outline: none;
    box-shadow: var(--wag-shadow-14);
}
.wa-profile-card-wrap { position: relative; }
.wa-profile-card-wrap .wa-list-item-remove {
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 1px 6px rgba(26, 30, 36, .18);
}

.wa-list-detail-head { margin-bottom: 18px; }
.wa-list-detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wag-space-16);
    flex-wrap: wrap;
}
.wa-list-share {
    position: absolute;
    bottom: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 13px;
    border: 1px solid #e3e8ee;
    border-radius: var(--wag-radius-999);
    background: var(--wag-surface);
    color: #5f7f9f;
    font-size: var(--wag-text-12);
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--wag-shadow-14);
    transition: border-color .15s, color .15s;
}
.wa-list-share:hover,
.wa .wa-list-share:focus {
    background: var(--wag-surface);
    border-color: #4fadd4;
    color: #4fadd4;
    outline: none;
    box-shadow: var(--wag-shadow-14);
}
.wa-list-share.is-copied {
    border-color: #2e9e5b;
    color: #2e9e5b;
}

/* "Edit list" pill — same look as Share, bottom-left on cards */
.wa-obs-edit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 13px;
    border: 1px solid #e3e8ee;
    border-radius: var(--wag-radius-999);
    background: var(--wag-surface);
    color: #5f7f9f;
    font-size: var(--wag-text-12);
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--wag-shadow-14);
    transition: border-color .15s, color .15s;
}
.wa-obs-edit:hover,
.wa .wa-obs-edit:focus {
    background: var(--wag-surface);
    border-color: #4fadd4;
    color: #4fadd4;
    outline: none;
    box-shadow: var(--wag-shadow-14);
}
.wa-list-card-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    padding: 0 12px 12px;
}
.wa-list-card-actions .wa-obs-edit,
.wa-list-card-actions .wa-list-share,
.wa-list-card-actions .wa-obs-export-card-chip {
    position: static;
    bottom: auto;
    left: auto;
    right: auto;
    transform: none;
    margin: 0;
}
.wa-list-detail-actions .wa-list-share { position: static; inset: auto; }
.wa-obs-create-wrap {
    margin-bottom: 28px;
    border: 1px solid #dbe4ec;
    border-radius: 14px;
    background: #f7fafc;
    box-shadow: 0 8px 20px rgba(22, 38, 52, .035);
}
.wa-obs-create-wrap .wa-obs-create { margin: 0; border: 0; border-radius: 14px 14px 0 0; background: transparent; box-shadow: var(--wag-shadow-14); }
.wa-obs-export {
    display: flex;
    align-items: center;
    gap: 10px 14px;
    flex-wrap: wrap;
    margin: 0;
    padding: 13px;
    border-top: 1px solid #dbe4ec;
    background: transparent;
}
.wa-obs-export-copy { display: grid; gap: 2px; flex: 1 1 210px; }
.wa-obs-export-copy strong { color: #334555; font-size: 13.5px; line-height: 1.2; }
.wa-obs-export-copy small { color: #788998; font-size: var(--wag-text-12); line-height: 1.35; }
.wa-obs-export-actions { display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.wa-obs-export-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 31px;
    padding: 0 11px;
    border: 1px solid #e3e8ee;
    border-radius: var(--wag-radius-999);
    background: var(--wag-surface);
    color: #5f7f9f;
    font-size: var(--wag-text-12);
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: var(--wag-shadow-14);
}
.wa .wa-obs-export-chip:hover,
.wa .wa-obs-export-chip:focus { border-color: #4fadd4; background: var(--wag-surface); color: #4fadd4; outline: none; }
.wa-obs-export-chip.is-selected { border-color: var(--wag-type-filter-export-chip-line, var(--wag-style-filter-export-chip-line)); background: var(--wag-type-filter-export-chip-bg, var(--wag-style-filter-export-chip-bg)); color: var(--wag-type-filter-export-chip-ink, var(--wag-style-filter-export-chip-ink)); }
.wa .wa-obs-export-chip.is-selected:hover,
.wa .wa-obs-export-chip.is-selected:focus { border-color: var(--wag-type-filter-export-chip-hover-line, var(--wag-style-filter-export-chip-hover-line)); background: var(--wag-type-filter-export-chip-hover-bg, var(--wag-style-filter-export-chip-hover-bg)); color: var(--wag-type-filter-export-chip-hover-ink, var(--wag-style-filter-export-chip-hover-ink)); }
.wa-obs-export-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid #d4e0e8;
    border-radius: 9px;
    background: var(--wag-surface);
    color: #456275;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}
.wa-obs-export-btn--pdf { background: #238a52; border-color: #238a52; color: #fff; }
.wa .wa-obs-export-btn:hover,
.wa .wa-obs-export-btn:focus { background: #eef6fa; border-color: #89b9d4; color: #345c73; outline: none; }
.wa .wa-obs-export-btn--pdf:hover,
.wa .wa-obs-export-btn--pdf:focus { background: #197342; border-color: #197342; color: #fff; }
.wa-obs-export-btn:disabled { opacity: .44; cursor: default; }
.wa .wa-obs-export-btn:disabled:hover { background: var(--wag-surface); border-color: #d4e0e8; color: #456275; }
.wa-obs-export-msg { flex-basis: 100%; min-height: 14px; color: #718291; font-size: 11.5px; }
.wa-obs-export-detail {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 11px;
}
.wa-obs-export-detail > span { margin-right: 2px; color: #718291; font-size: var(--wag-text-12); font-weight: 700; }
.wa-obs-export-detail .wa-obs-export-btn { min-height: 31px; padding: 0 10px; background: var(--wag-surface); border-color: #d4e0e8; color: #456275; }
.wa-obs-export-detail .wa-obs-export-btn--pdf { background: #238a52; border-color: #238a52; color: #fff; }
.wa .wa-obs-export-detail .wa-obs-export-btn:hover,
.wa .wa-obs-export-detail .wa-obs-export-btn:focus { background: #eef6fa; border-color: #89b9d4; color: #345c73; }
.wa .wa-obs-export-detail .wa-obs-export-btn--pdf:hover,
.wa .wa-obs-export-detail .wa-obs-export-btn--pdf:focus { background: #197342; border-color: #197342; color: #fff; }
.wa-obs-export-card-chip {
    min-height: 0;
    padding: 5px 13px;
    border-color: #e3e8ee;
    background: var(--wag-surface);
    color: #5f7f9f;
    font-size: var(--wag-text-12);
    font-weight: 600;
}
.wa-list-card .wa-obs-export-card-chip { display: inline-flex; align-items: center; gap: 6px; }
.wa .wa-list-card .wa-obs-export-card-chip:hover,
.wa .wa-list-card .wa-obs-export-card-chip:focus { background: var(--wag-surface); border-color: #4fadd4; color: #4fadd4; }
.wa-list-card .wa-obs-export-card-chip.is-selected { border-color: #2e9e5b; background: #eaf7ef; color: #217a4a; }
.wa .wa-list-card .wa-obs-export-card-chip.is-selected:hover,
.wa .wa-list-card .wa-obs-export-card-chip.is-selected:focus { border-color: #217a4a; background: #dff3e7; color: #17643a; }
@media (max-width: 700px) {
    .wa-obs-export { align-items: flex-start; }
    .wa-obs-export-actions { width: 100%; }
    .wa-obs-export-btn { flex: 1 1 0; }
}
.wa-list-detail-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Inline edit form (under the card / detail head) */
.wa-obs-edit-form {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding: 14px 16px;
    border: 1px solid #e3e8ee;
    border-radius: 14px;
    background: #f8f9fb;
}
.wa-obs-edit-form input[type="text"],
.wa-obs-edit-form input[type="date"],
.wa-obs-edit-form .wa-date-picker,
.wa-obs-edit-form select {
    padding: 10px 13px;
    border: 1px solid var(--wag-type-field-obs-line, var(--wag-style-field-obs-line));
    border-radius: var(--wag-type-field-obs-radius, var(--wag-style-field-obs-radius));
    font-size: var(--wag-text-14);
    color: var(--wag-type-field-obs-ink, var(--wag-style-field-obs-ink));
    background: var(--wag-surface);
}
.wa-obs-edit-form input[name="title"] { flex: 2 1 220px; width: auto; }
.wa-obs-edit-form input[type="date"],
.wa-obs-edit-form .wa-date-picker  { flex: 0 0 160px; width: 160px; }
.wa-obs-edit-form select              { flex: 0 0 110px; width: 110px; }
.wa-obs-edit-form .wa-obs-hotspot-wrap { flex: 1 1 200px; }
.wa-obs-edit-form .wa-obs-hotspot-wrap input[type="text"] { width: 100%; }
.wa-obs-edit-form input:focus,
.wa .wa-obs-edit-form select:focus {
    border-color: var(--wag-type-field-obs-focus-line, var(--wag-style-field-obs-focus-line));
    outline: none;
    box-shadow: var(--wag-shadow-5);
}
.wa-obs-edit-form .wa-lists-create-btn.wa-auth-submit {
    width: auto;
    max-width: none;
    flex: 0 0 auto;
    padding: 10px 22px;
}
.wa-account-menu-logout {
    margin-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    border-radius: 0 0 9px 9px;
}

/* Account display preferences — one compact block before Log out. Language,
   currency and appearance share the same alignment and touch targets. */
#wa-account-menu .wa-account-preferences {
    margin: 8px 4px 4px;
    padding: 11px 10px 9px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 11px;
    background: rgba(255,255,255,.035);
}
#wa-account-menu .wa-account-preferences-title {
    display: block;
    margin: 0 0 7px;
    color: #82909e;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .10em;
    line-height: 1.2;
    text-transform: uppercase;
}
#wa-account-menu .wa-account-preference-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wag-space-12);
    min-height: 38px;
    margin: 0;
    color: #d9e0e7;
    font-size: var(--wag-text-12);
    font-weight: 700;
}
#wa-account-menu .wa-account-preference-row + .wa-account-preference-row {
    border-top: 1px solid rgba(255,255,255,.07);
}
#wa-account-menu .wa-account-menu-lang,
#wa-account-menu .wa-account-menu-flags {
    justify-content: space-between;
    padding: 0;
    border: 0;
}
#wa-account-menu .wa-langsw--menu .wa-langsw-opt {
    width: 28px !important;
    height: 28px !important;
}
#wa-account-menu .wa-langsw--menu .wa-langsw-opt svg {
    transform: none;
}
.wa #wa-account-menu .wa-display-currency-select {
    width: 112px !important;
    min-width: 112px !important;
    max-width: 112px !important;
    height: 32px !important;
    margin: 0 !important;
    padding: 0 27px 0 9px !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    border-radius: 8px !important;
    outline: 0 !important;
    background-color: #252b33 !important;
    color: #fff !important;
    box-shadow: var(--wag-shadow-15) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 30px !important;
    cursor: pointer;
}
.wa #wa-account-menu .wa-display-currency-select:hover,
.wa #wa-account-menu .wa-display-currency-select:focus,
.wa #wa-account-menu .wa-display-currency-select:active {
    border-color: #4fadd4 !important;
    background-color: #252b33 !important;
    color: #fff !important;
    box-shadow: 0 0 0 3px rgba(79,173,212,.14) !important;
}
#wa-account-menu .wa-account-preference-status {
    display: block;
    padding-top: 5px;
    color: #8ec8f0;
    font-size: 10.5px;
    line-height: 1.35;
}
#wa-account-menu .wa-account-preference-status.is-error { color: #ff9f91; }
#wa-account-menu .wa-account-preference-status[hidden] { display: none; }

@media (max-width: 1200px) {
    #wa-account-menu .wa-account-preferences { margin: 12px 20px 6px; padding: 14px; }
    /* Mismo margen que su vecino: con margin-x 0 el CTA quedaba pegado a los
       bordes de la pantalla y sin aire (Marc, 2026-08-30). El selector con #id
       hace falta para ganarle a .wa-account-menu .wa-account-owner-cta. */
    #wa-account-menu .wa-account-owner-cta { margin: 12px 20px 6px; }
    #wa-account-menu .wa-account-preference-row { min-height: 48px; font-size: var(--wag-text-14); }
    .wa #wa-account-menu .wa-display-currency-select {
        width: min(58vw, 210px) !important;
        min-width: 0 !important;
        max-width: 210px !important;
        height: 42px !important;
        padding-left: 12px !important;
        font-size: 13px !important;
        line-height: 40px !important;
    }
}

.wa-bk-quote-native {
    margin: 10px 0 0;
    padding-top: 9px;
    border-top: 1px dashed var(--wag-type-bk-quote-native-topline, var(--wag-style-bk-quote-native-topline));
    color: var(--wag-type-bk-quote-native-ink, var(--wag-style-bk-quote-native-ink));
    font-size: 11.5px;
    font-weight: 700;
    text-align: right;
}
.wa-bk-charge-native {
    display: block;
    margin-top: 3px;
    color: inherit;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.2;
    opacity: .78;
}
html[data-theme="dark"] .wa-bk-quote-native { border-top-color: var(--wag-type-bk-quote-native-dark-topline, var(--wag-style-bk-quote-native-dark-topline)); color: var(--wag-type-bk-quote-native-dark-ink, var(--wag-style-bk-quote-native-dark-ink)); }
/* Presupuesto del widget en modo oscuro (2026-09-30). Sólo existía la línea de
   moneda de arriba: el recuadro seguía verde claro con texto oscuro. Mismo
   verde que la sesión elegida (.wa-bk-session) y el rojo de .wa-bk-decline. */
html[data-theme="dark"] .wa-bk-quote { background: #14271c; border-color: #2a4a37; color: #cfdad3; }
html[data-theme="dark"] .wa-bk-quote.is-warn { background: var(--wag-type-bk-quote-dark-bg, var(--wag-style-bk-quote-dark-bg)); border-color: var(--wag-type-bk-quote-dark-line, var(--wag-style-bk-quote-dark-line)); color: var(--wag-type-bk-quote-dark-ink, var(--wag-style-bk-quote-dark-ink)); }
html[data-theme="dark"] .wa-bk-quote-discount { color: #95d6a8; }
html[data-theme="dark"] .wa-bk-quote-total { border-top-color: var(--wag-type-bk-quote-total-dark-topline, var(--wag-style-bk-quote-total-dark-topline)); color: var(--wag-dark-ink); }
html[data-theme="dark"] .wa-bk-quote-split { border-top-color: var(--wag-type-bk-quote-split-dark-topline, var(--wag-style-bk-quote-split-dark-topline)); }
html[data-theme="dark"] .wa-bk-quote-due { color: var(--wag-dark-ink); }
html[data-theme="dark"] .wa-bk-quote-rest { color: var(--wag-type-bk-quote-rest-dark-ink, var(--wag-style-bk-quote-rest-dark-ink)); }
html[data-theme="dark"] .wa-bk-quote-note { color: var(--wag-type-bk-quote-note-dark-ink, var(--wag-style-bk-quote-note-dark-ink)); }

@media (max-width: 1200px) {
    #wa-account-menu .wa-account-preferences .wa-account-menu-lang { padding: 0 !important; }
}
.shared-list-hero .profile-hero-logout { cursor: pointer; background: none; }
.wa-list-back {
    display: inline-block;
    margin-bottom: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: #5f7f9f;
    text-decoration: none;
}
.wa .wa-list-back:hover { color: #4fadd4; }
.wa-list-detail-title {
    margin: 0;
    font-size: var(--wag-text-24);
    font-weight: 800;
    color: #1a1e24;
}
.wa-list-detail-count {
    font-size: var(--wag-text-14);
    font-weight: 600;
    color: #5f7f9f;
    margin-left: 8px;
}

/* "Add to list" dropdown (species page) */
.wa-list-menu {
    position: absolute;
    z-index: 100001;
    width: 280px;
    background: var(--wag-surface);
    border: 1px solid #e3e8ee;
    border-radius: 14px;
    box-shadow: 0 14px 40px rgba(26, 30, 36, .22);
    padding: 8px;
}

html[data-theme="dark"] .wa-list-menu {background: #1a1a1a; border: 1px solid #0d1e2c;}

.wa-list-menu-title {
    padding: 8px 12px 6px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #5f7f9f;
}
.wa-list-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 9px;
    background: none;
    box-shadow: var(--wag-shadow-14);
    font-size: var(--wag-text-14);
    font-weight: 600;
    color: #1a1e24;
    text-align: left;
    cursor: pointer;
    transition: background .12s;
}

html[data-theme="dark"] .wa-list-menu-item {color: #fff;}

.wa-list-menu-item:hover,
.wa .wa-list-menu-item:focus {
    background: #f8f9fb;
    color: #1a1e24;
    outline: none;
    box-shadow: var(--wag-shadow-14);
}

html[data-theme="dark"] .wa-list-menu-item:hover {background: #1e293b;}

.wa-list-menu-check {
    width: 18px;
    color: transparent;
    font-weight: 800;
    flex-shrink: 0;
}
.wa-list-menu-item.is-in .wa-list-menu-check { color: #2e9e5b; }
.wa-list-menu-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wa-list-menu-count { font-size: var(--wag-text-12); color: #aaa; }
.wa-list-menu-flash {
    font-size: 11.5px;
    font-weight: 700;
    color: #2e9e5b;
    opacity: 0;
    transition: opacity .15s;
}
.wa-list-menu-flash.show { opacity: 1; }
.wa-list-menu-empty {
    padding: 8px 12px;
    font-size: var(--wag-text-13);
    color: #888;
}
.wa-list-menu-newbtn {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 10px 12px;
    border: 0;
    border-top: 1px solid #eef1f5;
    border-radius: 0;
    background: none;
    box-shadow: var(--wag-shadow-14);
    font-size: 13.5px;
    font-weight: 700;
    color: #4fadd4;
    text-align: left;
    cursor: pointer;
}
.wa-list-menu-newbtn:hover,
.wa .wa-list-menu-newbtn:focus {
    background: none;
    color: #2d7ea3;
    outline: none;
    box-shadow: var(--wag-shadow-14);
}
.wa-list-menu-create[hidden] { display: none; }
.wa-list-menu-create {
    display: flex;
    gap: var(--wag-space-8);
    padding: 4px 12px 10px;
}
.wa-list-menu-create input {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid #e3e8ee;
    border-radius: var(--wag-radius-8);
    font-size: 13.5px;
}
.wa .wa-list-menu-create input:focus {
    border-color: #4fadd4;
    outline: none;
}
.wa-list-menu-confirm {
    padding: 8px 14px;
    border: 0;
    border-radius: var(--wag-radius-8);
    background: #1a1e24;
    color: #fff;
    font-size: var(--wag-text-13);
    font-weight: 600;
    cursor: pointer;
}
.wa-list-menu-confirm:hover,
.wa .wa-list-menu-confirm:focus {
    background: #4fadd4;
    color: #fff;
    outline: none;
    box-shadow: var(--wag-shadow-14);
}
.wa-list-menu-manage {
    display: block;
    padding: 8px 12px 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: #5f7f9f;
    text-decoration: none;
    border-top: 1px solid #eef1f5;
}
.wa .wa-list-menu-manage:hover { color: #4fadd4; }

/* ── Observation Lists ── */
.wa-obs-stats {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 26px;
}
.wa-obs-stat {
    padding: 14px 22px;
    border: 1px solid #e3e8ee;
    border-radius: 14px;
    background: var(--wag-surface);
    font-size: var(--wag-text-12);
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #5f7f9f;
    text-align: center;
}
.wa-obs-stat span {
    display: block;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: 0;
    color: #1a1e24;
    margin-bottom: 2px;
}

.wa-obs-import {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(290px, 1.2fr);
    gap: 20px 28px;
    align-items: center;
    margin: 0 0 20px;
    padding: 20px 22px;
    border: 1px solid #2d3c49;
    border-radius: var(--wag-radius-16);
    background: #18222c;
    box-shadow: 0 16px 32px rgba(13, 22, 31, .12);
}
.wa-obs-import-modal {
    position: fixed;
    z-index: 99999;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 22px;
    background: rgba(14, 20, 27, .58);
}
.wa-obs-import-modal[hidden] { display: none; }
.wa-obs-import-dialog {
    position: relative;
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(290px, 1.2fr);
    gap: 20px 28px;
    align-items: center;
    width: min(760px, 100%);
    max-height: min(720px, calc(100vh - 44px));
    overflow-y: auto;
    padding: 26px;
    border: 1px solid #2d3c49;
    border-radius: 18px;
    background: #18222c;
    box-shadow: 0 28px 80px rgba(8, 15, 23, .32);
}
.wa-obs-import-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #657586;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}
.wa .wa-obs-import-close:hover,
.wa .wa-obs-import-close:focus { background: #2a3946; color: #fff; outline: none; }
body.wa-import-open { overflow: hidden; }
.wa-obs-import-kicker {
    display: block;
    margin-bottom: 4px;
    color: #8ab9da;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.wa-obs-import h3 { margin: 0 0 5px; color: #f3f6f8; font-size: var(--wag-text-18); line-height: 1.2; }
.wa-obs-import p { margin: 0; color: #aebdca; font-size: var(--wag-text-13); line-height: 1.45; }
.wa-obs-import-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; align-items: center; }
.wa-obs-import-form select,
.wa-obs-import-file {
    height: 40px;
    padding: 0 12px;
    border: 1px solid #405362;
    border-radius: var(--wag-type-field-obs-radius, var(--wag-style-field-obs-radius));
    background: var(--wag-type-field-obs-bg, var(--wag-style-field-obs-bg));
    color: #edf3f7;
    font-size: var(--wag-text-13);
}
.wa-obs-import-form select { grid-column: 1 / -1; width: 100%; }
.wa .wa-obs-import-form select:focus { outline: none; border-color: #6ca8ce; box-shadow: var(--wag-type-field-obs-focus-shadow, var(--wag-style-field-obs-focus-shadow)); }
.wa-obs-import-file { display: inline-flex; align-items: center; min-width: 0; cursor: pointer; transition: border-color .16s, background .16s; }
.wa .wa-obs-import-file:hover { border-color: #6ca8ce; background: #2a3946; color: #fff; }
.wa-obs-import-file input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.wa-obs-import-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa .wa-obs-import-preview.wa-auth-submit { margin: 0; padding: 0 18px; border: 1px solid #2b9b5f; background: #238a52; color: #fff; white-space: nowrap; box-shadow: var(--wag-shadow-14); }
.wa .wa-obs-import-preview.wa-auth-submit:hover,
.wa .wa-obs-import-preview.wa-auth-submit:focus { background: #197342; border-color: #197342; color: #fff; outline: none; }
.wa-obs-import-previewbox {
    grid-column: 1 / -1;
    padding-top: 16px;
    border-top: 1px solid #334552;
}
.wa-obs-import-previewbox[hidden] { display: none; }
.wa-obs-import-summary { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.wa-obs-import-summary strong { color: #f3f6f8; font-size: 15px; }
.wa-obs-import-summary span { color: #aebdca; font-size: var(--wag-text-13); }
.wa-obs-import-unmatched { margin-top: 12px; padding: 10px 12px; border-left: 3px solid #e6a31a; background: #fff9e9; color: #6b5313; font-size: var(--wag-text-12); }
.wa-obs-import-unmatched p { margin-top: 4px; color: #6b5313; font-size: var(--wag-text-12); }
.wa-obs-import-unmatched ul { display: grid; gap: 7px; margin: 9px 0 0; padding: 0; list-style: none; }
.wa-obs-import-taxonomy { position: relative; display: grid; grid-template-columns: minmax(180px, 1fr) minmax(180px, .8fr); gap: var(--wag-space-8); align-items: center; }
.wa-obs-import-taxon-name { color: #634d16; }
.wa-obs-import-taxon-name.is-matched { color: #217a4a; font-weight: 700; }
.wa-obs-import-taxonomy input { min-width: 0; padding: 7px 9px; border: 1px solid #e2c977; border-radius: 7px; background: var(--wag-surface); color: #263442; font-size: var(--wag-text-12); }
.wa-obs-import-match-results { position: absolute; z-index: 3; right: 0; top: calc(100% + 3px); width: min(260px, 50%); overflow: hidden; border: 1px solid #d6bd69; border-radius: var(--wag-radius-8); background: var(--wag-surface); box-shadow: 0 8px 20px rgba(61, 48, 13, .16); }
.wa-obs-import-match-results[hidden] { display: none; }
.wa-obs-import-match-results button { display: block; width: 100%; padding: 8px 9px; border: 0; border-bottom: 1px solid #f2e8bf; background: var(--wag-surface); color: #3b4650; font-size: var(--wag-text-12); line-height: 1.3; text-align: left; cursor: pointer; }
.wa .wa-obs-import-match-results button:hover { background: #fff7d9; color: #3b4650; }
.wa-obs-import-options { display: flex; align-items: center; gap: var(--wag-space-12); flex-wrap: wrap; margin-top: 15px; }
.wa-obs-import-consent { display: flex; align-items: flex-start; gap: var(--wag-space-8); flex: 1 1 390px; color: #c6d1da; font-size: var(--wag-text-12); line-height: 1.45; cursor: pointer; }
.wa-obs-import-consent input { margin: 3px 0 0; accent-color: #217a4a; }
.wa-obs-import-visibility { display: inline-flex; align-items: center; gap: 7px; color: #c6d1da; font-size: var(--wag-text-12); white-space: nowrap; }
.wa-obs-import-visibility select { padding: 7px 25px 7px 9px; border: 1px solid #405362; border-radius: var(--wag-radius-8); background: var(--wag-type-field-obs-bg, var(--wag-style-field-obs-bg)); color: #edf3f7; }
.wa .wa-obs-import-apply.wa-auth-submit { padding: 9px 14px; background: #238a52; color: #fff; white-space: nowrap; }
.wa .wa-obs-import-apply.wa-auth-submit:hover,
.wa .wa-obs-import-apply.wa-auth-submit:focus { background: #197342; color: #fff; outline: none; }
.wa-obs-import-note { flex-basis: 100%; color: #9aaab8 !important; font-size: 11px !important; }
.wa-obs-import-message { color: #356b50 !important; font-weight: 700; }
.wa-obs-import-message.is-success { color: #217a4a !important; }
.wa-obs-import-message.is-error { color: #b73737 !important; }
@media (max-width: 700px) {
    .wa-obs-import { grid-template-columns: 1fr; padding: 18px; }
    .wa-obs-import-modal { padding: 12px; }
    .wa-obs-import-dialog { grid-template-columns: 1fr; padding: 22px 18px; }
    .wa-obs-import-form { width: 100%; }
    .wa-obs-import-taxonomy { grid-template-columns: 1fr; }
    .wa-obs-import-match-results { left: 0; right: auto; width: 100%; }
}

.wa-obs-create {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 28px;
    padding: 13px;
    border: 1px solid #dbe4ec;
    border-radius: 14px;
    background: #f7fafc;
    box-shadow: 0 8px 20px rgba(22, 38, 52, .035);
}
.wa-obs-create input[type="text"],
.wa-obs-create input[type="date"],
.wa-obs-create .wa-date-picker,
.wa-obs-create select {
    box-sizing: border-box;
    min-height: 44px;
    padding: 11px 14px;
    border: 1px solid var(--wag-type-field-obs-line, var(--wag-style-field-obs-line));
    border-radius: var(--wag-type-field-obs-radius, var(--wag-style-field-obs-radius));
    font-size: 14.5px;
    color: var(--wag-type-field-obs-ink, var(--wag-style-field-obs-ink));
    background: var(--wag-surface);
}
.wa-obs-create input[name="title"] { flex: 2 1 260px; width: auto; }
.wa-obs-create input[type="date"],
.wa-obs-create .wa-date-picker  { flex: 0 0 170px; width: 170px; }
/* El campo visible del selector de fechas (antes, el altInput de Flatpickr). */
.wa-obs-create .wa-dp-trigger,
.wa-obs-edit-form .wa-dp-trigger {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.wa-obs-create select {
    flex: 0 0 132px;
    width: 132px;
    background-color: var(--wag-surface);
    /* La flecha la pone .wa-select-chevron, más abajo. */
}

.wa-obs-hotspot-wrap               { flex: 1 1 220px; }
.wa-obs-create .wa-lists-create-btn.wa-auth-submit {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    height: 44px;
    min-height: 44px;
    margin: 0 0 0 auto;
    padding: 0 21px;
    white-space: nowrap;
}
.wa-obs-create input[type="text"]:focus,
.wa-obs-create input[type="date"]:focus,
.wa .wa-obs-create select:focus {
    border-color: var(--wag-type-field-obs-focus-line, var(--wag-style-field-obs-focus-line));
    outline: none;
    box-shadow: var(--wag-shadow-5);
}
.wa-obs-hotspot-wrap { position: relative; }
.wa-obs-hotspot-wrap input[type="text"] { width: 100%; }
@media (max-width: 700px) {
    .wa-obs-create .wa-lists-create-btn.wa-auth-submit { width: 100%; margin-left: 0; }
}

.wa-obs-search-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 60;
    background: var(--wag-surface);
    border: 1px solid #e3e8ee;
    border-radius: var(--wag-radius-12);
    box-shadow: 0 12px 32px rgba(26, 30, 36, .16);
    padding: 6px;
    max-height: 320px;
    overflow-y: auto;
}
.wa-obs-search-results[hidden] { display: none; }
.wa-obs-result {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: var(--wag-radius-8);
    background: none;
    box-shadow: var(--wag-shadow-14);
    font-size: var(--wag-text-14);
    color: #1a1e24;
    text-align: left;
    cursor: pointer;
}
.wa-obs-result:hover,
.wa .wa-obs-result:focus {
    background: #f8f9fb;
    color: #1a1e24;
    outline: none;
    box-shadow: var(--wag-shadow-14);
}
.wa-obs-result img {
    width: 34px;
    height: 34px;
    object-fit: cover;
    border-radius: var(--wag-radius-8);
    flex-shrink: 0;
}
.wa-obs-result-text { display: flex; flex-direction: column; min-width: 0; }
.wa-obs-result-name { font-weight: 600; }
.wa-obs-result-es { font-size: 12.5px; color: #4fadd4; }
.wa-obs-result-sci { font-size: var(--wag-text-12); color: #5f7f9f; }
.wa-obs-result--none { color: #888; cursor: default; }

.wa-obs-addspecies {
    position: relative;
    max-width: 560px;
    margin-bottom: 24px;
}
.wa-obs-addspecies input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #e3e8ee;
    border-radius: var(--wag-radius-12);
    font-size: 15px;
    color: #1a1e24;
    background: var(--wag-surface);
}
.wa .wa-obs-addspecies input:focus {
    border-color: #4fadd4;
    outline: none;
    box-shadow: var(--wag-shadow-5);
}

.wa-obs-detail-meta {
    margin-top: 6px;
    font-size: var(--wag-text-14);
    color: #5f7f9f;
}
.wa-obs-detail-meta a { color: #4fadd4; text-decoration: none; }
.wa-obs-lock { font-size: var(--wag-text-14); vertical-align: middle; }

.wa-obs-notes {
    display: block;
    width: 100%;
    margin-top: -4px;
    padding: 8px 12px;
    border: 0;
    border-top: 1px dashed #eef1f5;
    border-radius: 0 0 14px 14px;
    background: var(--wag-surface);
    font-size: 12.5px;
    color: #555;
    resize: vertical;
    transition: background .3s;
}
.wa .wa-obs-notes:focus { outline: none; background: #f8f9fb; }
.wa-obs-notes.is-saved { background: rgba(46, 158, 91, .10); }
.wa-profile-card-wrap .wa-obs-notes {
    border: 0;
    border-top: 1px solid #e9eef2;
    margin-top: 0;
    border-radius: 0;
    background: #fbfcfd;
}
.wa-profile-card-wrap:has(.wa-obs-notes) {
    overflow: hidden;
    border: 1px solid #e1e7ed;
    border-radius: 14px;
    background: var(--wag-surface);
    box-shadow: 0 6px 18px rgba(22, 38, 52, .045);
}
.wa-profile-card-wrap:has(.wa-obs-notes) .wa-profile-card { border: 0; border-radius: 0; }
.wa-profile-card-wrap:not(:has(.wa-obs-notes)) .wa-profile-card { border-radius: 14px; }


/* ── Collaborative lists ── */
.wa-collab-badge {
    display: inline-block;
    padding: 3px 12px;
    border-radius: var(--wag-radius-999);
    background: rgba(79, 173, 212, .12);
    color: #2d7ea3;
    font-size: var(--wag-text-12);
    font-weight: 700;
    vertical-align: middle;
    white-space: nowrap;
}
.wa-list-card-name .wa-collab-badge { padding: 1px 8px; font-size: var(--wag-text-12); }

.wa-collab-panel {
    display: flex;
    align-items: center;
    gap: var(--wag-space-8);
    flex-wrap: wrap;
    margin: -6px 0 24px;
    padding: 9px 14px;
    border: 1px solid #e3e8ee;
    border-radius: var(--wag-radius-12);
    background: #f8f9fb;
}
.wa-collab-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 4px;
    border: 1px solid #e3e8ee;
    border-radius: var(--wag-radius-999);
    background: var(--wag-surface);
    font-size: var(--wag-text-12);
    font-weight: 600;
    color: #1a1e24;
}
.wa-collab-chip img { border-radius: 50%; display: block; }
.wa-collab-chip em {
    font-style: normal;
    font-size: var(--wag-text-11);
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #5f7f9f;
}
.wa-collab-chip--owner { border-color: rgba(79, 173, 212, .5); }
.wa-collab-remove {
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    box-shadow: var(--wag-shadow-14);
    color: #aaa;
    font-size: var(--wag-text-14);
    line-height: 18px;
    cursor: pointer;
}
.wa-collab-remove:hover,
.wa .wa-collab-remove:focus {
    background: rgba(255, 48, 64, .12);
    color: #d92638;
    outline: none;
    box-shadow: var(--wag-shadow-14);
}
.wa-collab-invite {
    position: relative;
    flex: 1;
    min-width: 150px;
    max-width: 220px;
}
/* Invite link bar — visible URL + Copy button, no popups */
.wa-collab-linkbar {
    display: inline-flex;
    align-items: stretch;
    min-width: 200px;
    max-width: 320px;
    border: 1px solid rgba(79, 173, 212, .45);
    border-radius: var(--wag-radius-999);
    background: rgba(79, 173, 212, .10);
    overflow: hidden;
}
.wa-collab-linkinput {
    flex: 1;
    min-width: 0;
    padding: 4px 11px;
    border: 0;
    background: none;
    font-size: var(--wag-text-11);
    color: #2d7ea3;
    text-overflow: ellipsis;
}
.wa .wa-collab-linkinput:focus { outline: none; }
.wa-collab-copy {
    padding: 0 12px;
    border: 0;
    border-left: 1px solid rgba(79, 173, 212, .35);
    border-radius: 0;
    background: #4fadd4;
    color: #fff;
    font-size: var(--wag-text-11);
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: var(--wag-shadow-14);
    transition: background .15s;
}
.wa-collab-copy:hover,
.wa .wa-collab-copy:focus {
    background: #2d7ea3;
    color: #fff;
    outline: none;
    box-shadow: var(--wag-shadow-14);
}
.wa-collab-copy.is-copied { background: #2e9e5b; }

.wa-obs-added-by {
    display: block;
    margin-top: 4px;
    font-size: 11.5px;
    font-weight: 600;
    color: #5f7f9f;
}
.wa-obs-result-kind { flex-shrink: 0; }
.wa-obs-result-loc { flex: 1; min-width: 0; }


/* ── Public shared Observation List: PDF-style row layout ───────────────────
   (Marc, 2026-08-02: "este formato de lista, me gustaría que fuese el formato
   de visionado de las listas públicas") — misma disposición que el PDF
   exportable (assets/js/observations-export.js): miniatura + nombre principal
   en negrita + científico en cursiva + nombre secundario, con individuos/fotos
   a la derecha y una línea divisoria entre filas. Clases PROPIAS de esta
   página — no tocan .wa-profile-card, que sigue usando favoritos/My
   Lists/Observations privadas. */
.wa-obslist-list { display: flex; flex-direction: column; }
.wa-obslist-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 14px;
    padding: 12px 4px;
    border-bottom: 1px solid #e6ebef;
}
.wa-obslist-row:first-child { padding-top: 4px; }
.wa-obslist-row:last-child { border-bottom: 0; }
.wa-obslist-row-main {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 320px;
    min-width: 0;
    text-decoration: none;
}
.wa-obslist-row-thumb {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    overflow: hidden;
    background: #f8f9fb;
    border: 1px solid #e6ebef;
}
.wa-obslist-row-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wa-obslist-row-names { min-width: 0; display: flex; flex-direction: column; }
.wa-obslist-row-primary {
    font-size: 14.5px;
    font-weight: 700;
    color: #1d2d38;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wa-obslist-row-sci {
    font-size: var(--wag-text-12);
    font-style: italic;
    color: #556f80;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wa-obslist-row-secondary {
    font-size: 11.5px;
    color: #78889b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wa-obslist-row-meta { flex: 0 0 auto; margin-left: auto; text-align: right; }
.wa-obslist-row-individuals {
    display: inline-block;
    font-size: 12.5px;
    font-weight: 700;
    color: #2e9e5b;
    white-space: nowrap;
}
.wa-obslist-row-photos.wa-obs-photos-link--public {
    flex: 0 0 auto;
    margin: 0 0 0 8px;
    font-size: 11.5px;
}
.wa-obslist-row-notes {
    flex: 1 1 100%;
    font-size: 12.5px;
    color: #4e5d68;
    padding-left: 62px;
}
.wa-obslist-row .wa-obs-added-by { flex: 1 1 100%; padding-left: 62px; margin-top: 0; }
@media (max-width: 600px) {
    .wa-obslist-row-thumb { flex-basis: 40px; width: 40px; height: 40px; }
    .wa-obslist-row-notes, .wa-obslist-row .wa-obs-added-by { padding-left: 54px; }
}

/* Photos + individuals row (obs detail card, Phase 4) */
.wa-obs-extras {
    display: flex;
    align-items: center;
    gap: var(--wag-space-8);
    flex-wrap: wrap;
    padding: 8px 12px 10px;
    border: 0;
    border-top: 1px solid #e9eef2;
    border-radius: 0;
    background: #fbfcfd;
}
.wa-obs-extras.is-uploading { opacity: .5; pointer-events: none; }

.wa-obs-individuals {
    display: inline-flex;
    align-items: center;
    gap: var(--wag-space-8);
    font-size: var(--wag-text-13);
    font-weight: 700;
    color: #5f7f9f;
}
.wa-obs-individuals-mark {
    display: inline-grid;
    place-items: center;
    width: 13px;
    height: 26px;
    color: #62839c;
    font-size: var(--wag-text-16);
    line-height: 1;
}
.wa-obs-individuals-input {
    width: 52px;
    padding: 4px 6px;
    border: 1px solid #e3e8ee;
    border-radius: var(--wag-radius-8);
    font-size: 12.5px;
    color: #1a1e24;
    transition: background .3s;
}
.wa .wa-obs-individuals-input:focus { border-color: #4fadd4; outline: none; }
.wa-obs-individuals-input.is-saved { background: rgba(46, 158, 91, .12); }

.wa-obs-photolist {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
}
.wa-obs-photo {
    position: relative;
    display: inline-block;
}
.wa-obs-photo img {
    width: 38px;
    height: 38px;
    object-fit: cover;
    border-radius: var(--wag-radius-8);
    display: block;
}
.wa-obs-photo-del {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #1a1e24;
    color: #fff;
    font-size: var(--wag-text-12);
    line-height: 18px;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(26, 30, 36, .3);
}
.wa-obs-photo-del:hover,
.wa .wa-obs-photo-del:focus {
    background: #d92638;
    color: #fff;
    outline: none;
    box-shadow: var(--wag-shadow-14);
}

.wa-obs-photo-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 2px dashed #d4dbe3;
    border-radius: var(--wag-radius-8);
    color: #5f7f9f;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}
.wa .wa-obs-photo-add:hover { border-color: #4fadd4; color: #4fadd4; }

/* "N photos" gallery trigger */
.wa-obs-photos-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 31px;
    padding: 0 9px;
    border: 1px solid var(--wag-type-obs-photos-link-line, var(--wag-style-obs-photos-link-line));
    border-radius: var(--wag-radius-8);
    background: var(--wag-surface);
    box-shadow: var(--wag-shadow-14);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--wag-type-obs-photos-link-ink, var(--wag-style-obs-photos-link-ink));
    cursor: pointer;
    text-decoration: none;
}
.wa-obs-extras .wa-obs-photos-link::before { content: '▧'; font-size: var(--wag-text-16); line-height: 1; }
.wa .wa-obs-extras .wa-obs-photos-link:hover,
.wa .wa-obs-extras .wa-obs-photos-link:focus {
    border-color: var(--wag-type-obs-photos-link-hover-line, var(--wag-style-obs-photos-link-hover-line));
    background: var(--wag-type-obs-photos-link-hover-bg, var(--wag-style-obs-photos-link-hover-bg));
    color: var(--wag-type-obs-photos-link-hover-ink, var(--wag-style-obs-photos-link-hover-ink));
    outline: none;
    box-shadow: var(--wag-shadow-14);
}
.wa-obs-photos-link--public { margin: 8px 12px 12px; display: inline-block; padding: 0; border: 0; background: none; }

/* binoculars active state matches the other pill buttons */
.species-pill-btn.species-observe.active { color: var(--wag-type-species-observe-ink, var(--wag-style-species-observe-ink)); }

/* ── Hotspot community block (Phase 2) ── */
.wa-community-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wag-space-20);
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.wa-community-total-number {
    display: block;
    font-size: 40px;
    font-weight: 800;
    line-height: 1;
    color: var(--wag-type-community-total-number-ink, var(--wag-style-community-total-number-ink));
}
html[data-theme="dark"] .wa-community-total-number {color:var(--wag-type-community-total-number-dark-ink, var(--wag-style-community-total-number-dark-ink));}
.wa-community-total-label {
    display: block;
    margin-top: 4px;
    font-size: var(--wag-text-13);
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--wag-type-community-total-label-ink, var(--wag-style-community-row-reports-ink));
}
/* "Start Observation List" — same visual language as the account box */
.wa-obs-start {
    display: inline-flex;
    align-items: center;
    gap: var(--wag-space-12);
    width: auto;
    max-width: none;
    padding: 8px 24px 8px 8px;
    border: 1px solid var(--wag-type-obs-start-line, var(--wag-style-relleno-noche-line));
    border-radius: var(--wag-type-obs-start-radius, var(--wag-style-relleno-noche-radius));
    background: var(--wag-type-obs-start-bg, var(--wag-style-relleno-noche-bg));
    color: var(--wag-type-obs-start-ink, var(--wag-style-relleno-noche-ink));
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: .03em;
    cursor: pointer;
    box-shadow: var(--wag-type-obs-start-shadow, var(--wag-style-relleno-noche-shadow));
    transition: border-color .15s, box-shadow .15s, transform .15s;
    white-space: nowrap;
}
.wa-obs-start:hover,
.wa .wa-obs-start:focus {
    background: var(--wag-type-obs-start-hover-bg, var(--wag-style-relleno-noche-hover-bg));
    color: var(--wag-type-obs-start-hover-ink, var(--wag-style-relleno-noche-hover-ink));
    border-color: var(--wag-type-obs-start-hover-line, var(--wag-style-relleno-noche-hover-line));
    box-shadow: var(--wag-type-obs-start-hover-shadow, var(--wag-style-relleno-noche-hover-shadow));
    transform: translateY(-1px);
    outline: none;
}
.wa-obs-start:disabled { opacity: .6; cursor: wait; }

.wa-obs-start-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--wag-type-obs-start-icon-radius, var(--wag-style-obs-start-icon-radius));
    background: var(--wag-type-obs-start-icon-bg, var(--wag-style-obs-start-icon-bg));
    color: var(--wag-type-obs-start-icon-ink, var(--wag-style-obs-start-icon-ink));
    flex-shrink: 0;
}
.wa-obs-start-icon svg { width: 22px; height: 22px; display: block; }
/* Community empty state */
.wa-community-empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--wag-space-12);
}

/* One observation status, inline with the title on desktop. */
.species-title .wa-title-badge.is-observed,
.species-title .wa-title-badge {
    display: inline-block;
    margin-left: 16px;
    padding: 6px 16px;
    border-radius: var(--wag-radius-999);
    background: rgba(46, 158, 91, .9);
    border: 0;
    color: #fff;
    font-size: var(--wag-text-13);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
    cursor: default;
}

@media (max-width: 768px) {
    .species-hero-content {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "title"
            "meta"
            "observation";
        row-gap: 5px;
        align-items: end;
        align-content: end;
        justify-content: start;
    }
    .species-hero-content .species-title {
        display: contents;
        margin: 0;
    }
    .species-hero-content .species-title .wa-hero-title-text {
        grid-area: title;
        display: block;
        max-width: 75%;
    }
    .species-hero-content .species-meta {
        grid-area: meta;
        margin: 0;
    }
    .species-hero-content .scientific-name {
        font-size: 15px;
    }
    .species-hero-content .wa-species-observed-badge.wa-hero-observed-badge {
        grid-area: observation;
        display: inline-block;
        justify-self: start;
        width: auto;
        margin: 0;
        padding: 4px 11px;
        font-size: 10px;
    }
}

.wa-community-subtitle {
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--wag-type-community-subtitle-ink, var(--wag-style-community-subtitle-ink));
}
.wa-community-species { max-width: 640px; }
.wa-community-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 0;
    border-bottom: 1px solid #eef1f5;
}
.wa-community-row:last-child { border-bottom: 0; }
.wa-community-row-name {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    color: var(--wag-type-community-row-name-ink, var(--wag-style-community-row-name-ink));
    text-decoration: none;
}
html[data-theme="dark"] .wa-community-row-name {color: var(--wag-type-community-row-name-dark-ink, var(--wag-style-community-row-name-dark-ink));}
.wa .wa-community-row-name:hover { color: var(--wag-type-community-row-name-hover-ink, var(--wag-style-community-row-name-hover-ink)); }
.wa-community-row-reports { font-size: var(--wag-text-13); color: var(--wag-type-community-row-reports-ink, var(--wag-style-community-row-reports-ink)); white-space: nowrap; }

.wa-community-label {
    padding: 3px 12px;
    border-radius: var(--wag-radius-999);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.wa-community-label--very-high { background: rgba(46, 158, 91, .15);  color: #2e9e5b; }
.wa-community-label--high      { background: rgba(79, 173, 212, .15); color: #2d7ea3; }
.wa-community-label--common    { background: #f0f2f5;                 color: #555; }
.wa-community-label--rare      { background: rgba(245, 166, 35, .15); color: #b97c10; }
.wa-community-label--very-rare { background: rgba(217, 38, 56, .12);  color: #d92638; }

/* Species/country community metrics */
.wa-community-metrics {
    display: flex;
    gap: 36px;
    flex-wrap: wrap;
}
.wa-species-observed-badge {
    display: inline-block;
    padding: 9px 20px;
    border-radius: var(--wag-radius-999);
    font-size: 13.5px;
    font-weight: 700;
    border: 1px solid #e3e8ee;
    background: var(--wag-surface);
    color: #5f7f9f;
    cursor: pointer;
    box-shadow: var(--wag-shadow-14);
    transition: border-color .15s, color .15s;
}
.wa-species-observed-badge.is-observed {
    background: rgba(46, 158, 91, .12);
    border-color: rgba(46, 158, 91, .35);
    color: #2e9e5b;
    cursor: default;
}
button.wa-species-observed-badge:hover,
button.wa-species-observed-badge:focus {
    background: var(--wag-surface);
    border-color: #4fadd4;
    color: #4fadd4;
    outline: none;
    box-shadow: var(--wag-shadow-14);
}

.wa-community-countries {
    display: flex;
    align-items: center;
    gap: var(--wag-space-8);
    flex-wrap: wrap;
    margin-top: 18px;
}
.wa-community-country {
    padding: 5px 14px;
    border: 1px solid var(--wag-type-community-country-line, var(--wag-style-community-country-line));
    border-radius: var(--wag-radius-999);
    background: var(--wag-surface);
    font-size: var(--wag-text-13);
    font-weight: 600;
    color: var(--wag-type-community-country-ink, var(--wag-style-community-country-ink));
    text-decoration: none;
    margin-bottom: 6px;
}

html[data-theme="dark"] .wa-community-country {background: var(--wag-type-community-country-dark-bg, var(--wag-style-community-country-dark-bg)); border: 1px solid var(--wag-type-community-country-dark-line, var(--wag-style-community-country-dark-line)); color: var(--wag-type-community-country-dark-ink, var(--wag-style-community-country-dark-ink));}

a.wa-community-country:hover { border-color: var(--wag-type-community-country-hover-line, var(--wag-style-community-country-hover-line)); color: var(--wag-type-community-country-hover-ink, var(--wag-style-community-country-hover-ink)); }

/* Monthly distribution bars */
.wa-community-monthly { margin-top: 28px; max-width: 640px; }


/* Suggested species — mini cards with dashed borders (obs list detail) */
.wa-obs-suggested { margin: -8px 0 26px; }
.wa-obs-suggested-label {
    display: block;
    margin-bottom: 10px;
    font-size: var(--wag-text-13);
    font-weight: 600;
    color: var(--wag-type-obs-suggested-label-ink, var(--wag-style-obs-suggest-sci-ink));
}
.wa-obs-suggested-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: var(--wag-space-12);
}
.wa-obs-suggest {
    display: flex;
    align-items: center;
    gap: var(--wag-space-12);
    padding: 10px 12px;
    border: 2px dashed var(--wag-type-obs-suggest-line, var(--wag-style-obs-suggest-line));
    border-radius: var(--wag-type-obs-suggest-radius, var(--wag-style-obs-suggest-radius));
    background: var(--wag-surface);
    color: var(--wag-type-obs-suggest-ink, var(--wag-style-obs-suggest-ink));
    text-align: left;
    cursor: pointer;
    box-shadow: var(--wag-shadow-14);
    transition: border-color .15s, background .15s;
}
.wa-obs-suggest:hover,
.wa .wa-obs-suggest:focus {
    background: var(--wag-type-obs-suggest-hover-bg, var(--wag-style-obs-suggest-hover-bg));
    border-color: var(--wag-type-obs-suggest-hover-line, var(--wag-style-obs-suggest-hover-line));
    color: var(--wag-type-obs-suggest-hover-ink, var(--wag-style-obs-suggest-hover-ink));
    outline: none;
    box-shadow: var(--wag-shadow-14);
}
.wa-obs-suggest:disabled { opacity: .5; }
.wa-obs-suggest img,
.wa-obs-suggest-noimg {
    width: 46px;
    height: 46px;
    object-fit: cover;
    border-radius: 10px;
    flex-shrink: 0;
    background: #f0f2f5;
}
.wa-obs-suggest-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.wa-obs-suggest-name {
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wa-obs-suggest-es {
    font-size: var(--wag-text-12);
    color: var(--wag-type-obs-suggest-es-ink, var(--wag-style-obs-suggest-es-ink));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wa-obs-suggest-sci {
    font-size: 11.5px;
    color: var(--wag-type-obs-suggest-sci-ink, var(--wag-style-obs-suggest-sci-ink));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wa-obs-suggest-add {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #f0f2f5;
    color: #5f7f9f;
    font-size: 17px;
    font-weight: 700;
    line-height: 26px;
    text-align: center;
    flex-shrink: 0;
    transition: background .15s, color .15s;
}
.wa .wa-obs-suggest:hover .wa-obs-suggest-add {
    background: #2e9e5b;
    color: #fff;
}

/* ── Master Admin Panel (Control Center) ── */
.wa-admin-subtitle {
    margin: 30px 0 14px;
    font-size: var(--wag-text-13);
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #5f7f9f;
}
.wa-admin-alerts {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.wa-admin-alert {
    display: inline-flex;
    align-items: center;
    gap: var(--wag-space-8);
    padding: 8px 16px;
    border: 1px solid #e3e8ee;
    border-radius: var(--wag-radius-999);
    background: var(--wag-surface);
    font-size: var(--wag-text-13);
    font-weight: 600;
    color: #5f7f9f;
    text-decoration: none;
}
.wa-admin-alert.is-warn {
    border-color: rgba(245, 166, 35, .45);
    color: #b97c10;
    background: rgba(245, 166, 35, .07);
}
a.wa-admin-alert.is-warn:hover { border-color: var(--wag-type-admin-alert-hover-line, var(--wag-style-admin-alert-hover-line)); }
.wa-admin-alert-n { font-size: 15px; font-weight: 800; color: inherit; }

/* Backup status chip */
.wa-admin-backup {
    display: flex; align-items: center; gap: var(--wag-space-8); flex-wrap: wrap;
    margin: 10px 0 18px; padding: 9px 14px;
    border-radius: 10px; border: 1px solid; font-size: var(--wag-text-13);
}
.wa-admin-backup--ok   { background: rgba(46,158,91,.07); border-color: rgba(46,158,91,.35); color: #1e7d47; }
.wa-admin-backup--warn { background: rgba(245,166,35,.07); border-color: rgba(245,166,35,.45); color: #b97c10; }
.wa-admin-backup--err  { background: rgba(220,38,38,.06); border-color: rgba(220,38,38,.3); color: #991b1b; }

.wa-admin-activity {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--wag-space-16);
}
.wa-admin-col {
    padding: 16px 18px;
    border: 1px solid #e3e8ee;
    border-radius: 14px;
    background: var(--wag-surface);
}
.wa-admin-col h4 {
    margin: 0 0 10px;
    font-size: var(--wag-text-12);
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #5f7f9f;
}
.wa-admin-row {
    display: flex;
    align-items: center;
    gap: var(--wag-space-8);
    padding: 6px 0;
    border-bottom: 1px solid #f3f5f8;
    font-size: 13.5px;
    color: #1a1e24;
}
.wa-admin-row:last-child { border-bottom: 0; }
.wa-admin-row img { border-radius: 50%; }
.wa-admin-row span, .wa-admin-row a {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #1a1e24;
    text-decoration: none;
    font-weight: 600;
}
.wa .wa-admin-row a:hover { color: #4fadd4; }
.wa-admin-row em {
    font-style: normal;
    font-size: var(--wag-text-12);
    color: #999;
    white-space: nowrap;
}

.wa-admin-modules {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--wag-space-12);
    width: 100%;   /* todo el ancho de la tarjeta (Marc, 2026-10-12); era max 980px */
}
.wa-admin-module {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wag-space-16);
    padding: 14px 18px;
    border: 1px solid #e3e8ee;
    border-radius: 14px;
    background: var(--wag-surface);
}
/* Flex items default to min-width:auto, so a long unbreakable "word" (a
   slash-joined list with no spaces, a URL…) in the description can force
   this box wider than its grid cell and push the card out of the container
   (Marc, 2026-08-02: "el kill switch de las traducciones se sale del
   container" — the business_i18n description had one such token). min-width:0
   lets the flex item actually shrink to the column width, and break-word is
   the backstop for the next long description someone writes without noticing. */
.wa-admin-module-info {
    min-width: 0;
}
.wa-admin-module-name {
    display: block;
    font-size: var(--wag-text-14);
    font-weight: 700;
    color: #1a1e24;
}
.wa-admin-module-desc {
    display: block;
    margin-top: 2px;
    font-size: var(--wag-text-12);
    color: #888;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Content section — type tabs, toolbar, listing table */
.wa-admin-typetabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.wa-admin-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.wa-admin-search { flex: 1; min-width: 220px; max-width: 380px; }
.wa-admin-search input {
    width: 100%;
    padding: 10px 16px;
    border: 1px solid #e3e8ee;
    border-radius: var(--wag-radius-12);
    font-size: var(--wag-text-14);
    background: var(--wag-surface);
}
.wa .wa-admin-search input:focus {
    border-color: #4fadd4;
    outline: none;
    box-shadow: var(--wag-shadow-5);
}
.wa-admin-filter {
    padding: 7px 14px;
    border: 1px dashed #d4dbe3;
    border-radius: var(--wag-radius-999);
    background: var(--wag-surface);
    font-size: 12.5px;
    font-weight: 600;
    color: #5f7f9f;
    text-decoration: none;
}
.wa .wa-admin-filter:hover { border-color: var(--wag-type-filter-admin-hover-line, var(--wag-style-filter-admin-hover-line)); color: var(--wag-type-filter-admin-hover-ink, var(--wag-style-filter-admin-hover-ink)); }
.wa-admin-filter.is-active {
    border-style: solid;
    border-color: var(--wag-type-filter-admin-line, var(--wag-style-filter-admin-line));
    background: var(--wag-type-filter-admin-bg, var(--wag-style-filter-admin-bg));
    color: var(--wag-type-filter-admin-ink, var(--wag-style-filter-admin-ink));
}
.wa-admin-new {
    margin-left: auto;
    padding: 9px 18px;
    border-radius: var(--wag-radius-12);
    background: var(--wag-type-admin-new-bg, var(--wag-style-admin-new-bg));
    color: var(--wag-type-admin-new-ink, var(--wag-style-admin-new-ink));
    font-size: var(--wag-text-13);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.wa .wa-admin-new:hover { background: var(--wag-type-admin-new-hover-bg, var(--wag-style-admin-new-hover-bg)); color: var(--wag-type-admin-new-hover-ink, var(--wag-style-admin-new-hover-ink)); }

.wa-admin-table {
    border: 1px solid #e3e8ee;
    border-radius: 14px;
    background: var(--wag-surface);
    overflow: hidden;
}
.wa-admin-trow {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--wag-type-admin-row-underline, var(--wag-style-admin-row-underline));
    font-size: var(--wag-text-14);
}
.wa-admin-trow:last-child { border-bottom: 0; }
.wa-admin-trow img,
.wa-admin-noimg {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 9px;
    background: #f0f2f5;
    flex-shrink: 0;
}
.wa-admin-trow-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    color: #1a1e24;
}
.wa-admin-trow em { font-style: normal; font-size: 12.5px; color: #999; white-space: nowrap; }
.wa-admin-chip {
    padding: 2px 10px;
    border-radius: var(--wag-radius-999);
    font-size: var(--wag-text-11);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.wa-admin-chip--publish { background: rgba(46, 158, 91, .12); color: #2e9e5b; }
.wa-admin-chip--draft   { background: #f0f2f5; color: #777; }
.wa-admin-chip--pending { background: rgba(245, 166, 35, .14); color: #b97c10; }
.wa-admin-trow-actions {
    display: flex;
    align-items: center;
    gap: var(--wag-space-12);
    white-space: nowrap;
}
.wa-admin-trow-actions a,
.wa-admin-trash {
    display: inline-block;
    padding: 6px 10px;
    border-radius: var(--wag-radius-999);
    background: none;
    box-shadow: var(--wag-shadow-14);
    font-size: var(--wag-text-11);
    font-weight: 700;
    color: #4fadd4;
    text-decoration: none;
    cursor: pointer;
}
.wa .wa-admin-trow-actions a:hover { color: #2d7ea3; }
.wa-admin-trash { color: #d92638; }
.wa-admin-trash:hover,
.wa .wa-admin-trash:focus { background: none; color: #a51424; outline: none; box-shadow: var(--wag-shadow-14); }
.wa-admin-trash:disabled { opacity: .5; }

/* Data Health */
.wa-admin-alert.is-ok {
    border-color: var(--wag-type-admin-alert-line, var(--wag-style-admin-alert-line));
    color: var(--wag-type-admin-alert-ink, var(--wag-style-admin-alert-ink));
    background: var(--wag-type-admin-alert-bg, var(--wag-style-admin-alert-bg));
}
.wa-admin-alert.is-selected { box-shadow: var(--wag-type-admin-alert-shadow, var(--wag-style-admin-alert-shadow)); }
.wa-admin-health-clean {
    padding: 14px 20px;
    border: 1px solid rgba(46, 158, 91, .35);
    border-radius: 14px;
    background: rgba(46, 158, 91, .07);
    color: #2e9e5b;
    font-weight: 700;
}

/* Apple-style switch */
.wa-switch {
    width: 46px;
    height: 27px;
    padding: 0;
    border: 0;
    border-radius: var(--wag-radius-999);
    background: #e3e8ee;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: var(--wag-type-switch-shadow, var(--wag-style-switch-shadow));
    transition: background .2s;
}
.wa .wa-switch:hover,
.wa .wa-switch:focus { background: #d4dbe3; outline: none; box-shadow: var(--wag-type-switch-hover-shadow, var(--wag-style-switch-hover-shadow)); }
.wa-switch.is-on { background: var(--wag-type-switch-bg, var(--wag-style-switch-bg)); }
.wa .wa-switch.is-on:hover,
.wa .wa-switch.is-on:focus { background: var(--wag-type-switch-hover-bg, var(--wag-style-switch-hover-bg)); }
.wa-switch.is-on .wa-switch-knob { left: 21px; }
.wa-switch:disabled { opacity: .6; cursor: wait; }

/* ── Hero rating: interactive stars + quick-review panel ── */
.wa-hero-rating--interactive { position: relative; }
.wa-hero-rating-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
}
.wa .wa-hero-rating-link:hover .wa-hero-rating__count { color: var(--wag-type-hero-rating-count-hover-ink, var(--wag-style-hero-rating-count-hover-ink)); }

/* Picker stars */
.wa-hero-rating__stars--pick { display: inline-flex; align-items: center; gap: 2px; cursor: pointer; }
.wa-hero-rating__stars--pick .wa-star { cursor: pointer; }
.wa-hero-rating__stars--pick .wa-star.is-hover svg { fill: #f59e0b; }
.wa .wa-hero-rating__stars--pick .wa-star:focus-visible { outline: 2px solid var(--wag-type-star-focus-ring, var(--wag-style-star-focus-ring)); outline-offset: 1px; border-radius: var(--wag-type-star-focus-radius, var(--wag-style-star-focus-radius)); }


/* popover hover removed — distribution moved to /review/ page */

/* Quick review panel */
.wa-quick-review {
    /* Float upward over the hero — .place-hero-banner clips overflow below,
       same constraint as .wa-rating-popover. Absolutely positioned so it never
       expands the hero height or breaks the flex layout. */
    position: absolute;
    bottom: calc(100% + 10px);
    left: 0;
    z-index: 70;
    background: var(--wag-type-quick-review-bg, var(--wag-style-quick-review-bg));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--wag-type-quick-review-line, var(--wag-style-quick-review-line));
    border-radius: var(--wag-type-quick-review-radius, var(--wag-style-quick-review-radius));
    padding: 16px 18px 14px;
    width: min(460px, 90vw);
    color: var(--wag-type-quick-review-ink, var(--wag-style-quick-review-ink));
}
.wa-qr-header { display: flex; align-items: center; gap: var(--wag-space-12); margin-bottom: 11px; }
.wa-qr-stars  { display: inline-flex; gap: 5px; }
.wa-qr-star {
    width: 26px; height: 26px;
    cursor: pointer;
    color: rgba(255,255,255,.25);
    transition: color .1s;
    flex-shrink: 0;
}
.wa-qr-star svg { width: 100%; height: 100%; display: block; }
.wa-qr-star.is-filled,
.wa-qr-star.is-hover { color: var(--wag-type-qr-star-ink, var(--wag-style-qr-star-ink)); }
.wa .wa-qr-star:focus-visible { outline: 2px solid var(--wag-type-qr-star-focus-ring, var(--wag-style-qr-star-focus-ring)); outline-offset: 2px; border-radius: var(--wag-type-qr-star-focus-radius, var(--wag-style-qr-star-focus-radius)); }
.wa-qr-rating-label { font-size: var(--wag-text-13); color: var(--wag-type-qr-rating-label-ink, var(--wag-style-qr-rating-label-ink)); white-space: nowrap; }
.wa-qr-text {
    width: 100%;
    background: var(--wag-type-qr-text-bg, var(--wag-style-qr-text-bg));
    border: 1px solid var(--wag-type-qr-text-line, var(--wag-style-qr-text-line));
    border-radius: var(--wag-radius-8);
    padding: 9px 12px;
    color: var(--wag-type-qr-text-ink, var(--wag-style-qr-text-ink));
    font-size: var(--wag-text-14);
    line-height: 1.5;
    resize: vertical;
    box-sizing: border-box;
    font-family: inherit;
}
.wa-qr-text::placeholder { color: rgba(255,255,255,.4); }
.wa .wa-qr-text:focus { outline: none; border-color: var(--wag-type-qr-text-focus-line, var(--wag-style-qr-text-focus-line)); background: var(--wag-type-qr-text-focus-bg, var(--wag-style-qr-text-focus-bg)); }
.wa-qr-footer { display: flex; align-items: center; gap: 10px; margin-top: 11px; flex-wrap: wrap; }
.wa-qr-submit {
    background: var(--wag-surface);
    color: var(--wag-type-qr-submit-ink, var(--wag-style-qr-submit-ink));
    border: none;
    border-radius: var(--wag-radius-8);
    padding: 8px 20px;
    font-size: var(--wag-text-14);
    font-weight: 600;
    cursor: pointer;
    transition: opacity .15s;
    flex-shrink: 0;
}
.wa .wa-qr-submit:hover:not(:disabled) { opacity: .85; }
.wa-qr-submit:disabled { opacity: .38; cursor: not-allowed; }
.wa-qr-cancel {
    background: none;
    border: 1px solid var(--wag-type-qr-cancel-line, var(--wag-style-qr-cancel-line));
    border-radius: var(--wag-radius-8);
    color: var(--wag-type-qr-cancel-ink, var(--wag-style-qr-cancel-ink));
    padding: 8px 16px;
    font-size: var(--wag-text-14);
    cursor: pointer;
    transition: border-color .15s, color .15s;
    flex-shrink: 0;
}
.wa .wa-qr-cancel:hover { border-color: var(--wag-type-qr-cancel-hover-line, var(--wag-style-qr-cancel-hover-line)); color: var(--wag-type-qr-cancel-hover-ink, var(--wag-style-qr-cancel-hover-ink)); }
.wa-qr-msg { font-size: var(--wag-text-13); }
.wa-qr-msg--ok  { color: #6ee7b7; }
.wa-qr-msg--err { color: #fca5a5; }
.wa-qr-see-all {
    display: block;
    margin-top: 10px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--wag-type-qr-see-all-ink, var(--wag-style-qr-see-all-ink));
    text-decoration: none;
    transition: color .15s;
}
.wa .wa-qr-see-all:hover { color: var(--wag-type-qr-see-all-hover-ink, var(--wag-style-qr-see-all-hover-ink)); }
.wa-qr-mobile-header { display: none; }
.wa-quick-review[hidden] { display: none !important; }

/* En móvil, la reseña sale del hero y ocupa la pantalla completa. */
body.wa-quick-review-open { overflow: hidden; }
.wa-quick-review--mobile {
    position: fixed;
    inset: 0;
    z-index: 100100;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-width: none;
    overflow-y: auto;
    box-sizing: border-box;
    padding: env(safe-area-inset-top) 20px calc(12px + env(safe-area-inset-bottom));
    border: 0;
    border-radius: 0;
    background: #111820;
    color: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.wa-quick-review--mobile .wa-qr-mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 64px;
    gap: var(--wag-space-16);
}
.wa-quick-review--mobile .wa-qr-mobile-header h2 {
    margin: 0;
    color: #fff;
    font-size: 22px;
    line-height: 1.2;
}
.wa-quick-review--mobile .wa-qr-mobile-close {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--wag-type-qr-mobile-close-radius, var(--wag-style-qr-mobile-close-radius));
    background: var(--wag-type-qr-mobile-close-bg, var(--wag-style-qr-mobile-close-bg));
    color: var(--wag-type-qr-mobile-close-ink, var(--wag-style-qr-mobile-close-ink));
    font-size: 29px;
    line-height: 1;
    cursor: pointer;
}
.wa-quick-review--mobile .wa-qr-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin: 20px 0 18px;
}
.wa-quick-review--mobile .wa-qr-stars { gap: var(--wag-space-4); }
.wa-quick-review--mobile .wa-qr-star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
}
.wa-quick-review--mobile .wa-qr-star svg { width: 30px; height: 30px; }
.wa-quick-review--mobile .wa-qr-rating-label { font-size: var(--wag-text-14); white-space: normal; }
.wa-quick-review--mobile .wa-qr-text {
    flex: 1 1 auto;
    min-height: 160px;
    padding: 16px;
    border-radius: var(--wag-type-qr-text-radius, var(--wag-style-qr-text-radius));
    font-size: var(--wag-text-16);
    resize: none;
}
.wa-quick-review--mobile .wa-qr-footer { display: block; margin-top: 16px; }
.wa-quick-review--mobile .wa-qr-submit { width: 100%; min-height: 50px; font-size: var(--wag-text-16); }
.wa-quick-review--mobile .wa-qr-cancel { display: none; }
.wa-quick-review--mobile .wa-qr-msg { display: block; margin-top: 8px; }
.wa-quick-review--mobile .wa-qr-see-all {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: 6px;
    font-size: var(--wag-text-14);
}


/* ── Rating distribution — /review/ page ─────────────────────────────────── */
.wa-rv-dist {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 22px 24px;
    background: #f8f9fb;
    border: 1px solid #e8edf2;
    border-radius: 14px;
    margin-bottom: 6px;
}
.wa-rv-dist-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    min-width: 72px;
}
.wa-rv-dist-avg {
    font-size: 48px;
    font-weight: 700;
    line-height: 1;
    color: #1a1e24;
    letter-spacing: -2px;
}
.wa-rv-dist-stars { display: flex; gap: 3px; }
.wa-rv-dist-count { font-size: var(--wag-text-12); color: #7a8a9a; white-space: nowrap; }
.wa-rv-dist-avg--empty { color: #bcc5cf; }
.wa-rv-dist-bars { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.wa-rv-dist-row {
    display: grid;
    grid-template-columns: 34px 1fr 38px;
    align-items: center;
    gap: 10px;
}
.wa-rv-dist-label { font-size: var(--wag-text-13); font-weight: 600; color: #5f7f9f; white-space: nowrap; }
.wa-rv-dist-bar {
    display: block;
    height: 9px;
    border-radius: var(--wag-radius-999);
    background: #e3e8ee;
    overflow: hidden;
}
.wa-rv-dist-bar span {
    display: block;
    height: 100%;
    border-radius: var(--wag-radius-999);
    background: #f5a623;
    transition: width .3s ease;
}
.wa-rv-dist-pct { font-size: 12.5px; font-weight: 600; color: #1a1e24; text-align: right; }
@media (max-width: 520px) {
    .wa-rv-dist { flex-direction: column; gap: var(--wag-space-16); }
    .wa-rv-dist-score { flex-direction: row; gap: var(--wag-space-12); }
}

/* "Write your review" row on the review page */
.wa-review-write {
    display: flex;
    align-items: center;
    gap: 14px;
}
.wa-review-write-hint { font-size: 13.5px; color: #888; }
.wa-review-form-wrap { margin-bottom: 30px; }
.wa-review-cancel:not(.wag-btn) {
    padding: 0;
    border: 0;
    background: none;
    box-shadow: var(--wag-shadow-14);
    cursor: pointer;
}

/* ── Compact review-page header (no big hero) ── */
.wa-review-header {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0 -20px 10px;
    padding: 26px 48px;
    background: var(--wag-type-review-header-bg, var(--wag-style-review-header-bg));
    color: var(--wag-type-review-header-ink, var(--wag-style-review-header-ink));
}
.wa-review-header-thumb {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: var(--wag-radius-12);
    flex-shrink: 0;
}
.wa-review-header-title {
    margin: 0 0 4px;
    font-size: 26px;
    line-height: 1.1;
    color: var(--wag-type-review-header-title-ink, var(--wag-style-category-name-ink));
}
.wa-review-header-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--wag-text-14);
    color: var(--wag-type-review-header-meta-ink, var(--wag-style-profile-hero-meta-ink));
}

/* ── All-reviews section: sort + list ── */
.wa-reviews--all { max-width: 760px; }

.wa-reviews-allhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 24px;
    padding-top: 8px;
    border-top: 1px solid #eef1f5;
}
.wa-reviews-alltitle {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    color: #1a1e24;
}
.wa-reviews-sort {
    display: flex;
    gap: 6px;
}
.wa-reviews-sort-btn {
    padding: 7px 16px;
    border: 1px solid #e3e8ee;
    border-radius: var(--wag-radius-999);
    background: var(--wag-surface);
    color: #5f7f9f;
    font-size: var(--wag-text-13);
    font-weight: 600;
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
}
.wa .wa-reviews-sort-btn:hover { border-color: var(--wag-type-filter-sort-hover-line, var(--wag-style-filter-sort-hover-line)); color: var(--wag-type-filter-sort-hover-ink, var(--wag-style-filter-sort-hover-ink)); }
.wa-reviews-sort-btn.is-active {
    background: var(--wag-type-filter-sort-bg, var(--wag-style-filter-sort-bg));
    border-color: var(--wag-type-filter-sort-line, var(--wag-style-filter-sort-line));
    color: var(--wag-type-filter-sort-ink, var(--wag-style-filter-sort-ink));
}

/* ── Write-a-review form ── */
.wa-review-form {
    max-width: 680px;
    margin: 0 auto;
    padding: 28px 30px;
    background: var(--wag-surface);
    border: 1px solid #e3e8ee;
    border-radius: var(--wag-radius-16);
    box-shadow: 0 4px 18px rgba(26, 30, 36, .06);
}

.wa-review-goodbad {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
@media (max-width: 700px) {
    .wa-review-goodbad { grid-template-columns: 1fr; }
}

.wa-review-text--main {
    margin-bottom: 12px;
}

.wa-review-form-head {
    display: flex;
    align-items: center;
    gap: var(--wag-space-12);
    margin-bottom: 22px;
}
.wa-review-form-head img { border-radius: 50%; }
.wa-review-form-user { display: block; font-weight: 600; color: #1a1e24; }
.wa-review-form-note { display: block; font-size: 12.5px; color: #888; }

.wa-review-stars {
    display: flex;
    gap: 6px;
    margin-bottom: 24px;
}
.wa-review-star {
    width: 42px;
    height: 42px;
    padding: 4px;
    border: 0;
    background: none;
    box-shadow: var(--wag-shadow-14);
    color: #e3e8ee;
    cursor: pointer;
    transition: color .12s, transform .12s;
}
.wa-review-star svg { width: 100%; height: 100%; display: block; }
/* ID-prefixed to beat Astra's global button:hover blue — hover paints amber, never blue */
#wa-review-form .wa-review-star:hover,
.wa #wa-review-form .wa-review-star:focus {
    background: none;
    color: #f5a623;
    transform: scale(1.12);
    box-shadow: var(--wag-shadow-14);
    outline: none;
}
.wa-review-star.is-filled { color: #f5a623; }

.wa-review-field {
    display: block;
    margin-bottom: 18px;
    font-size: var(--wag-text-13);
    font-weight: 600;
    color: #5f7f9f;
}
.wa-review-field textarea {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 12px 14px;
    border: 1px solid #e3e8ee;
    border-radius: 10px;
    font-size: 15px;
    color: #1a1e24;
    background: var(--wag-surface);
    resize: vertical;
}
.wa .wa-review-field textarea:focus {
    border-color: #4fadd4;
    outline: none;
    box-shadow: var(--wag-shadow-5);
}

.wa-review-form-msg { margin: 0 0 14px; font-size: var(--wag-text-14); }
.wa-review-form-msg.is-error   { color: #ff3040; }
.wa-review-form-msg.is-success { color: #2e9e5b; }

.wa-review-form-actions {
    display: flex;
    align-items: center;
    gap: var(--wag-space-12);
    flex-wrap: wrap;
}
.wa-review-form-actions .wa-review-delete { margin-right: auto; --wag-btn-ink: var(--wag-color-rust); --wag-btn-line: var(--wag-style-peligro-line); --wag-btn-hover-bg: var(--wag-style-peligro-hover-bg); --wag-btn-hover-ink: var(--wag-style-peligro-hover-ink); }
html[data-theme="dark"] .wa-review-form-actions .wa-review-delete { --wag-btn-ink: var(--wag-style-peligro-dark-ink); --wag-btn-line: var(--wag-style-peligro-dark-line); --wag-btn-hover-bg: var(--wag-style-peligro-dark-hover-bg); --wag-btn-hover-ink: var(--wag-style-peligro-dark-hover-ink); }
/* Eliminar review: acción destructiva pero secundaria. En rojo suave, empujada a
   la izquierda (margin-right:auto) para separarla de Cancel/Update — que no se
   pulse por error al ir a guardar. */
.wa-review-delete:not(.wag-btn) {
    margin-right: auto;
    background: none; border: 0; padding: 0;
    font-size: var(--wag-text-14); font-weight: 600; color: #b3392b;
    cursor: pointer; text-decoration: none;
}
.wa .wa-review-delete:not(.wag-btn):hover:not(:disabled) { text-decoration: underline; }
.wa-review-delete:not(.wag-btn):disabled { opacity: .5; cursor: default; }
.wa-review-cancel:not(.wag-btn) {
    font-size: var(--wag-text-14);
    font-weight: 600;
    color: #5f7f9f;
    text-decoration: none;
}
.wa .wa-review-cancel:not(.wag-btn):hover { color: #1a1e24; }
.wa-review-submit { max-width: 220px; }

/* ── Review list ── */
.wa-reviews-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wag-space-20);
    margin-bottom: 28px;
    flex-wrap: wrap;
}
.wa-reviews-avg {
    display: flex;
    align-items: center;
    gap: var(--wag-space-12);
}
.wa-reviews-avg-number {
    font-size: 44px;
    font-weight: 800;
    line-height: 1;
    color: #1a1e24;
}
.wa-reviews-count { font-size: var(--wag-text-14); color: #5f7f9f; }

.wa-review-rating-stars { display: inline-flex; gap: 2px; }
.wa-review-rating-star { width: 18px; height: 18px; color: #e3e8ee; }
.wa-review-rating-star svg { width: 100%; height: 100%; display: block; }
.wa-review-rating-star.is-filled { color: #f5a623; }

.wa-reviews-write-btn {
    display: inline-block;
    padding: 10px 22px;
    border: 1px solid var(--wag-type-reviews-write-line, var(--wag-style-reviews-write-line));
    border-radius: var(--wag-radius-12);
    background: var(--wag-surface);
    color: var(--wag-type-reviews-write-ink, var(--wag-style-reviews-write-ink));
    font-size: var(--wag-text-14);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--wag-shadow-14);
    transition: background .15s, color .15s, border-color .15s;
}
.wa .wa-reviews-write-btn:hover { background: var(--wag-type-reviews-write-hover-bg, var(--wag-style-reviews-write-hover-bg)); border-color: var(--wag-type-reviews-write-hover-line, var(--wag-style-reviews-write-hover-line)); color: var(--wag-type-reviews-write-hover-ink, var(--wag-style-reviews-write-hover-ink)); }

.wa-reviews-list {
    display: flex;
    flex-direction: column;
    gap: 26px;
    max-width: 760px;
}
.wa-review {
    padding-bottom: 26px;
    border-bottom: 1px solid #eef1f5;
}
.wa-review:last-child { border-bottom: 0; padding-bottom: 0; }

.wa-review-head {
    display: flex;
    align-items: center;
    gap: var(--wag-space-12);
    margin-bottom: 12px;
}
.wa-review-head img { border-radius: 50%; }
.wa-review-who { flex: 1; min-width: 0; }
.wa-review-author { display: block; font-weight: 600; color: #1a1e24; font-size: 15px; }
.wa-review-date { display: block; font-size: 12.5px; color: #888; }

.wa-review-text {
    margin: 0 0 10px;
    font-size: 15px;
    line-height: 1.65;
    color: #333;
}
.wa-review-tag {
    display: inline-block;
    margin-right: 8px;
    padding: 2px 10px;
    border-radius: var(--wag-radius-999);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.wa-review-tag--good { background: rgba(46, 158, 91, .12); color: #2e9e5b; }
.wa-review-tag--bad  { background: rgba(255, 48, 64, .10); color: #d92638; }

/* Reserva verificada, «Sobre:» y «Sus hides» (inc/ajax/product-reviews.php,
   2026-10-12). Verde de las etiquetas «Lo bueno», para que se lea como dato
   de confianza y no como adorno. */
/* «12 oct 2026 · ✓ Reserva verificada»: en la línea de la fecha, sin cápsula
   (Marc: «el tick verificado es feísimo»). El verde lo distingue; nada más. */
.wa-review-verified {
    display: inline-flex; align-items: center; gap: var(--wag-space-4); color: var(--wag-accent);
    font-weight: 600; white-space: nowrap; cursor: help;
}
.wa-review-verified::before { content: "·"; margin: 0 6px 0 5px; color: #b0b8b3; font-weight: 400; }
.wa-review-verified svg { flex: 0 0 13px; color: #2e9e5b; }
.wa-review-about { margin: 8px 0 0; color: #5b6660; font-size: var(--wag-text-13); }
.wa-review-about strong, .wa-review-about a { color: #1a1e24; font-weight: 600; }
.wa .wa-review-about a { text-decoration: none; }
.wa .wa-review-about a:hover, .wa .wa-review-about a:focus-visible { color: var(--wag-accent); text-decoration: underline; }
.wa-review-about--form { margin: 0 0 14px; }
html[data-theme="dark"] .wa-review-verified { color: #8ed0a9; }
html[data-theme="dark"] .wa-review-verified svg { color: var(--wag-dark-accent); }
html[data-theme="dark"] .wa-review-verified::before { color: #5d6873; }
html[data-theme="dark"] .wa-review-about { color: #93a0ab; }
html[data-theme="dark"] .wa-review-about strong, html[data-theme="dark"] .wa-review-about a { color: var(--wag-dark-ink); }

/* Modal */
.wa-auth-overlay[hidden] { display: none; }

.wa-auth-overlay {
    position: fixed;
    inset: 0;
    background: rgba(26, 30, 36, .55);
    /* Por encima de la barra superior (#wa-account-btn-wrap, 100000): con el
       mismo número ganaba la barra y el MENU tapaba la ✕ en móvil (Marc,
       2026-10-06). Todas las capas a pantalla completa van a 100090+. */
    z-index: 100100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
body.wa-auth-open { overflow: hidden; }

.wa-auth-modal {
    position: relative;
    width: 100%;
    max-width: 400px;
    /* Cabe siempre en la pantalla (Marc, 2026-10-07): sin tope, el registro era más
       alto que la ventana de un portátil, el cuerpo estaba bloqueado y la parte de
       arriba y la de abajo quedaban fuera, sin forma de llegar. 40px = el relleno del
       overlay. En móvil ya va a pantalla completa (bloque @media 700px). */
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .22) transparent;
    background: #1a1e24;
    color: #fff;
    border-radius: var(--wag-radius-20);
    padding: 46px 28px 28px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
}

/* ── Si el registro no cabe en alto: dos columnas (auth.js → fitAuth) ─────────
   Sólo con ancho para ello (≥760px, lo decide auth.js midiendo). Arriba los seis
   campos en tres filas; debajo, a lo ancho, captcha, avisos legales y botones. */
.wa-auth-modal.wa-auth-modal--wide { max-width: 760px; }
.wa-auth-modal--wide #wa-auth-register:not([hidden]) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--wag-space-20);
    align-items: start;
}
.wa-auth-modal--wide #wa-auth-register > * { grid-column: 1 / -1; }
.wa-auth-modal--wide #wa-auth-register > label:nth-of-type(1) { grid-column: 1; grid-row: 1; } /* Usuario */
.wa-auth-modal--wide #wa-auth-register > label:nth-of-type(4) { grid-column: 2; grid-row: 1; } /* Soy… */
.wa-auth-modal--wide #wa-auth-register > label:nth-of-type(2) { grid-column: 1; grid-row: 2; } /* Email */
.wa-auth-modal--wide #wa-auth-register > label:nth-of-type(3) { grid-column: 2; grid-row: 2; } /* Confirmar email */
.wa-auth-modal--wide #wa-auth-register > label:nth-of-type(6) { grid-column: 1; grid-row: 3; } /* Contraseña */
.wa-auth-modal--wide #wa-auth-register > label:nth-of-type(5) { grid-column: 2; grid-row: 3; } /* Idioma */
.wa-auth-pagebox:has(.wa-auth-modal--wide) { max-width: 760px; }

/* ── Página /sign-in/ (page-sign-in.php) ─────────────────────────────────────
   La misma tarjeta que el popup, en el flujo de la página: sin tope de altura
   (la página ya hace scroll), sin ✕ y con menos aire arriba. */
.wa-signin-main {
    /* El contenedor de Astra es flex: sin esto, main encoge a su contenido y la
       tarjeta queda pegada a la izquierda. */
    flex: 1 1 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 48px 16px 72px;   /* la barra global (#wa-global-topbar) ya desplaza el cuerpo */
}
.wa-auth-pagebox { width: 100%; max-width: 400px; }
.wa-auth-pagebox .wa-auth-modal--page {
    max-height: none;
    overflow: visible;
    padding-top: 28px;
}

/* «Iniciar sesión» es un enlace a /sign-in/ desde el 2026-10-07 (antes <button>):
   mismo aspecto. Astra da line-height:1 a los <button>; un <a> heredaría la del
   texto (medido: 15px de alto en vez de 13) y además subrayado y color de enlace. */
#wa-account-btn-wrap a.wa-account-btn,
#wa-account-btn-wrap a.wa-guest-menu-signin {
    line-height: 1;
    text-decoration: none;
}
.wa #wa-account-btn-wrap a.wa-guest-menu-signin,
.wa #wa-account-btn-wrap a.wa-guest-menu-signin:visited { color: #fff; }

.wa-auth-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    box-shadow: var(--wag-shadow-14);
    font-size: 26px;
    line-height: 32px;
    color: #8b94a0;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.wa .wa-auth-modal .wa-auth-close:hover {
    background: rgba(255,255,255,.10);
    color: #fff;
    box-shadow: var(--wag-shadow-14);
}

/* Password field with eye toggle */
.wa-auth-pass { position: relative; display: block; }
.wa-auth-pass input { padding-right: 44px; }
.wa-auth-eye {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    box-shadow: var(--wag-shadow-14);
    color: #8b94a0;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.wa .wa-auth-modal .wa-auth-eye:hover {
    background: rgba(255,255,255,.10);
    color: #fff;
    box-shadow: var(--wag-shadow-14);
}

.wa-auth-tabs {
    display: flex;
    gap: var(--wag-space-4);
    margin-bottom: 22px;
    background: rgba(255,255,255,.06);
    border-radius: var(--wag-radius-12);
    padding: 4px;
}
.wa-auth-tab {
    flex: 1;
    padding: 9px 0;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #aeb8c2;
    font-size: var(--wag-text-14);
    font-weight: 600;
    cursor: pointer;
}
.wa-auth-tab.is-active {
    background: var(--wag-surface);
    color: #1a1e24;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}

.wa-auth-form label {
    display: block;
    margin-bottom: 14px;
    font-size: var(--wag-text-13);
    font-weight: 600;
    color: #aeb8c2;
}
.wa-auth-form input,
.wa .wa-auth-form input {
    display: block;
    width: 100%;
    margin-top: 5px;
    padding: 10px 13px;
    border: 1px solid var(--wag-type-field-auth-line, var(--wag-style-field-auth-line));
    border-radius: var(--wag-type-field-auth-radius, var(--wag-style-field-auth-radius));
    font-size: 15px;
    color: var(--wag-type-field-auth-ink, var(--wag-style-field-auth-ink)) !important;
    background: rgba(255,255,255,.06);
}
.wa-auth-form input::placeholder { color: #6e7884; }
.wa .wa-auth-form input:focus {
    border-color: var(--wag-type-field-auth-focus-line, var(--wag-style-field-auth-focus-line));
    outline: none;
    box-shadow: var(--wag-type-field-auth-focus-shadow, var(--wag-style-field-auth-focus-shadow));
    background: var(--wag-type-field-auth-focus-bg, var(--wag-style-field-auth-focus-bg));
}
/* Browser autofill (username/email/password suggestions) forces its own
   background + black text via -webkit-autofill, which plain `color` can't
   override — the dark-text-on-dark-modal bug Marc saw. Force the fill color
   and fake the background via a huge inset box-shadow (the only way to beat
   the UA's autofill paint short of a 9999s transition delay trick). */
.wa .wa-auth-form input:-webkit-autofill,
.wa .wa-auth-form input:-webkit-autofill:hover,
.wa .wa-auth-form input:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff !important;
    -webkit-box-shadow: 0 0 0 1000px #23272e inset !important;
    box-shadow: var(--wag-type-field-auth-shadow, var(--wag-style-field-auth-shadow)) !important;
    caret-color: #fff;
    transition: background-color 9999s ease-in-out 0s;
}
/* Solo el formulario de acceso: el select de Editar perfil ya lo estiliza
   .wa-profile-form-fields input,select,textarea, y tenerlo aquí TAMBIÉN hacía
   que este `background: #fff` (atajo) borrara el chevron (Marc, 2026-08-30). */
.wa-auth-form select {
    display: block;
    width: 100%;
    margin-top: 5px;
    padding: 10px 13px;
    border: 1px solid #e3e8ee;
    border-radius: var(--wag-type-field-auth-radius, var(--wag-style-field-auth-radius));
    font-size: 15px;
    color: #1a1e24;
    background: var(--wag-surface);
    cursor: pointer;
}
.wa-auth-turnstile { margin-bottom: 14px; }
/* Register form has a category select — keep it readable on the dark modal */
.wa-auth-modal .wa-auth-form select {
    border: 1px solid var(--wag-type-field-auth-line, var(--wag-style-field-auth-line));
    color: var(--wag-type-field-auth-ink, var(--wag-style-field-auth-ink));
    background: var(--wag-type-field-auth-bg, var(--wag-style-field-auth-bg));
}
.wa-auth-form select:focus,
.wa .wa-profile-form-fields select:focus {
    border-color: #4fadd4;
    outline: none;
    box-shadow: var(--wag-shadow-5);
}

/* ── Google Sign-In divider + button container ── */
.wa-auth-divider {
    display: flex;
    align-items: center;
    gap: var(--wag-space-12);
    margin: 18px 0 14px;
    color: #4a5260;
    font-size: var(--wag-text-12);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.wa-auth-divider::before,
.wa-auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,.1);
}
.wa-google-btn-wrap {
    display: flex;
    justify-content: center;
    min-height: 44px; /* prevents layout jump while GIS renders the iframe */
}
/* GIS injects an iframe — ensure it fills the container */
.wa-google-btn-wrap iframe { border-radius: 8px !important; }

/* Registration agreement: deliberately a quiet single line, not a legal
   panel. The linked documents open separately for whoever wants to read them. */
.wa-auth-legal-fields { margin: 2px 0 14px; }
.wa-auth-form .wa-auth-legal-check,
.wa-auth-legal-check {
    display: flex; align-items: flex-start; gap: 9px; margin: 0;
    color: #aeb8c2; font-size: var(--wag-text-12); font-weight: 500; line-height: 1.45;
}
.wa-auth-form .wa-auth-legal-check input[type="checkbox"],
.wa .wa-auth-form .wa-auth-legal-check input[type="checkbox"],
.wa-auth-legal-check input[type="checkbox"] {
    display: block; flex: 0 0 16px; width: 16px; height: 16px;
    margin: 1px 0 0; padding: 0; border-radius: var(--wag-radius-4);
    accent-color: #2e9e5b;
}
.wa-auth-legal-check a { color: #8bc6ec; text-decoration: underline; text-underline-offset: 2px; }
.wa-auth-form .wa-auth-marketing-check,
.wa-auth-marketing-check { margin-top: 8px; opacity: .82; font-size: 11.5px; }
.wa-auth-legal-fields > input[type="hidden"],
.wa-consent[hidden]{ display: none !important; }

/* User category badge (chip) */
/* Chip de categoría de usuario. Reducido (Marc, 2026-07-26): acompaña al nombre,
   no compite con él. Se mantiene mayúscula + espaciado para que siga leyéndose
   como distintivo y no como texto normal. */
.wa-user-category {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: var(--wag-radius-999);
    background: rgba(79, 173, 212, .12);
    color: #2d7ea3;
    font-size: 9.5px;
    font-weight: 700;
    /* line-height EXPLÍCITO — esto es lo que de verdad los hacía grandes.
       El chip vive dentro de .profile-hero-name, que es un h1 de 32px, y al no
       declarar line-height lo heredaba: la altura de la píldora la marcaba la
       línea del titular, no su propio texto de 9,5px. Reducir la fuente sin
       tocar esto apenas se notaba. */
    line-height: 1.45;
    letter-spacing: .04em;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
}
/* En móvil, un punto menos: el nombre y el chip comparten una línea mucho más
   estrecha y el chip era lo primero que la rompía. */
@media (max-width: 600px) {
    .wa-user-category { font-size: 9px; padding: 2px 7px; margin-left: 6px; }
}
.profile-hero-name .wa-user-category {
    background: rgba(255, 255, 255, .12);
    color: #9fd3ec;
}

/* Special categories (admin-assigned) — distinct colors everywhere */
.wa-user-category--administrator,
.profile-hero-name .wa-user-category--administrator {
    background: #1a1e24;
    color: #f5a623;
    border: 1px solid rgba(245, 166, 35, .45);
}
.wa-user-category--hotspot-owner,
.profile-hero-name .wa-user-category--hotspot-owner {
    background: rgba(46, 158, 91, .14);
    color: #2e9e5b;
    border: 1px solid rgba(46, 158, 91, .35);
}
.wa-user-category--operator-owner,
.profile-hero-name .wa-user-category--operator-owner {
    background: rgba(217, 38, 56, .10);
    color: #d92638;
    border: 1px solid rgba(217, 38, 56, .30);
}
.wa-user-category + .wa-user-category { margin-left: 6px; }

.wa-auth-hp {
    position: absolute !important;
    left: -9999px !important;
}

.wa-auth-error {
    margin: 0 0 12px;
    font-size: var(--wag-text-13);
    color: #ff3040;
}
.wa-auth-success {
    margin: 0 0 12px;
    font-size: var(--wag-text-13);
    color: #2e9e5b;
}

/* "Forgot your password?" / "Back to sign in" links */
.wa-auth-forgot {
    display: inline-block;
    margin: -4px 0 14px;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: var(--wag-shadow-14);
    font-size: var(--wag-text-13);
    font-weight: 600;
    color: var(--wag-type-forgot-ink, var(--wag-style-enlace-suave-ink));
    cursor: pointer;
    text-align: left;
}
.wa-auth-modal .wa-auth-forgot:hover,
.wa .wa-auth-modal .wa-auth-forgot:focus {
    background: none;
    color: var(--wag-type-forgot-hover-ink, var(--wag-style-enlace-suave-hover-ink));
    outline: none;
    box-shadow: var(--wag-shadow-14);
}
.wa-auth-back { margin: 14px 0 0; }

.wa-auth-reset-intro {
    margin: 0 0 16px;
    font-size: var(--wag-text-14);
    line-height: 1.55;
    color: #aeb8c2;
}

.wa-auth-submit {
    width: 100%;
    padding: 13px 0;
    border: 0;
    border-radius: var(--wag-radius-12);
    background: var(--wag-type-form-submit-bg, var(--wag-style-relleno-verde-bg));
    color: var(--wag-type-form-submit-ink, var(--wag-style-relleno-verde-ink));
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: var(--wag-type-form-submit-shadow, var(--wag-style-relleno-verde-shadow));
    transition: background .15s;
}
.wa .wa-auth-submit:hover,
.wa .wa-auth-submit:focus { background: var(--wag-type-form-submit-hover-bg, var(--wag-style-relleno-verde-hover-bg)); color: var(--wag-type-form-submit-hover-ink, var(--wag-style-relleno-verde-hover-ink)); outline: none; }
/* Iniciar sesión / Crear cuenta (Marc, 2026-09-26): el mismo botón que
   «Reservar y pagar» en su versión oscura —contorno fino azul, letra
   seminegrita, 44px—, porque el cuadro de acceso es oscuro. Antes era el único
   botón macizo y en negrita 800 del sitio. Solo el del modal: las demás
   pantallas que reutilizan .wa-auth-submit conservan el suyo. */
.wa .wa-auth-modal .wa-auth-submit,
.wa .wa-auth-modal .wa-auth-submit:focus,
.wa .wa-auth-modal .wa-auth-submit:active {
    min-height: 44px; padding: 0 20px; border-radius: var(--wag-type-signin-radius, var(--wag-style-acceso-radius));
    background: var(--wag-type-signin-bg, var(--wag-style-acceso-bg)); background-image: none;
    border: 1px solid var(--wag-type-signin-line, var(--wag-style-acceso-line)); color: var(--wag-type-signin-ink, var(--wag-style-acceso-ink));
    font-size: var(--wag-text-13); font-weight: 600; letter-spacing: 0; text-transform: none;
    box-shadow: var(--wag-shadow-14); outline: none;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.wa .wa-auth-modal .wa-auth-submit:hover { background: var(--wag-type-signin-hover-bg, var(--wag-style-acceso-hover-bg)); border-color: var(--wag-type-signin-hover-line, var(--wag-style-acceso-hover-line)); color: var(--wag-type-signin-hover-ink, var(--wag-style-acceso-hover-ink)); }
.wa .wa-auth-modal .wa-auth-submit:focus-visible { outline: 3px solid var(--wag-type-signin-ring, var(--wag-style-acceso-ring)); outline-offset: 2px; }
.wa .wa-auth-modal .wa-auth-submit:disabled { opacity: .6; cursor: default; }
.wa-auth-submit:disabled { opacity: .6; cursor: wait; }

/* ============================================================
   HIDES — single hide page (single-hide.php)
   Reuses tour hero/badges/details/CTA + .wa-obs-suggest mini-cards
   + the shared lightbox. Only hide-specific bits live here.
   ============================================================ */
.hide-section { margin: 0 0 45px; }
.hide-species { margin-top: 0; }
/* Fichas de producto (hide, experiencia, alojamiento, pack), 2026-09-27: el
   mismo ritmo que entre módulos del resto de la web. 22,5px del banner al
   primer bloque (lo pone .wa-section; antes el bloque de especies del hide
   sumaba 34 más: 57 en total) y 45 entre bloques en escritorio / 30 en móvil
   (antes 36 o 40 según el bloque). El itinerario ya no suma margen arriba: lo
   separa el margen de abajo del bloque anterior. */
@media (max-width: 700px) {
    .hide-section, .tour-description, .tour-included-grid { margin-bottom: 30px; }
    /* Apiladas, la reserva y el contenido se separaban con los 48px de
       hueco entre columnas de escritorio. */
    .tour-body { row-gap: 30px; }
}

/* Target species: [hidden] override (display:flex would win otherwise) */
.wa-obs-suggest[hidden] { display: none !important; }

/* Load-more button — appears below the species grid when > 6 species */
.wa-sp-loadmore {
    display: block;
    margin: 14px auto 0;
    padding: 9px 22px;
    border: 1px solid #d4dbe3;
    border-radius: var(--wag-radius-20);
    background: var(--wag-surface);
    color: #4a5568;
    font-size: var(--wag-text-13);
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}
.wa .wa-sp-loadmore:hover {
    border-color: #4fadd4;
    background: rgba(79,173,212,.06);
    color: #1a2230;
}
html[data-theme="dark"] .wa-sp-loadmore {
    background: var(--wag-dark-surface);
    border-color: #2a313a;
    color: #ccd3da;
}
html[data-theme="dark"] .wa-sp-loadmore:hover {
    border-color: #4fadd4;
    background: rgba(79,173,212,.1);
}

.hide-focal-ico { vertical-align: -2px; margin-right: 4px; opacity: .65; }

/* ============================================================
   STAYS — single stay + card + grid
   Reuses tour-card + hide CSS. Only stays-specific bits live here.
   Price label: "/ night" (not "/ person").
   ============================================================ */

/* Grid — same layout as hides/stays */
.wa-stays-grid,
.wa-packs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--wag-space-20);
}

/* Card badge colour — teal to distinguish from hides (green) */
.wa-stay-badge {
    background: var(--wag-type-stay-badge-bg, var(--wag-style-stay-badge-bg)) !important; /* teal */
}

/* Amenities grid on single-stay.php */
.wa-stay-amenities-section { margin: 0 0 36px; }
.wa-stay-amenities-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wag-space-8);
    margin-top: 10px;
}
.wa-stay-amenity {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--wag-type-stay-amenity-bg, var(--wag-style-stay-amenity-bg));
    border: 1px solid var(--wag-type-stay-amenity-line, var(--wag-style-stay-amenity-line));
    border-radius: var(--wag-radius-20);
    padding: 5px 13px;
    font-size: var(--wag-text-13);
    color: var(--wag-type-stay-amenity-ink, var(--wag-style-stay-amenity-ink));
    white-space: nowrap;
}

/* ============================================================
   COMMUNITY (hotspot) v2 — toned down: rounded box, 2 columns,
   smaller metrics, season-style month curve. Scoped under
   .wa-community--boxed (base classes shared with species/country).
   ============================================================ */
.wa-community--boxed {
    background: var(--wag-type-community--boxed-bg, var(--wag-style-community--boxed-bg));
    border: 1px solid var(--wag-type-community--boxed-line, var(--wag-style-community--boxed-line));
    border-radius: var(--wag-type-community--boxed-radius, var(--wag-style-community--boxed-radius));
    padding: 24px 30px;
}
.wa-community--boxed .wa-community-head { margin-bottom: 18px; }
.wa-community--boxed .wa-community-total-number { font-size: 26px; }
.wa-community--boxed .wa-community-total-label {
    font-size: var(--wag-text-11);
    margin-top: 2px;
}
.wa-community--boxed .wa-community-species { max-width: none; }
.wa-community--boxed .wa-community-monthly { margin-top: 0; max-width: none; }
.wa-community--boxed .wa-community-row { border-bottom-color: var(--wag-type-community-row-underline, var(--wag-style-community-row-underline)); }
@media (max-width: 768px) {
    .wa-community--boxed .wa-obs-start-community {
        max-width: 100%;
        box-sizing: border-box;
        padding-right: 12px;
        white-space: normal;
        text-align: left;
        font-size: var(--wag-text-13);
        line-height: 1.25;
    }
    .wa-community--boxed .wa-obs-start-community .wa-obs-start-label {
        min-width: 0;
    }
}

.wa-community-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 44px;
    align-items: start;
}
.wa-community-cols--single { grid-template-columns: 1fr; }
.wa-community-curve svg { width: 100%; height: auto; display: block; }

@media (max-width: 900px) {
    .wa-community-cols { grid-template-columns: 1fr; }
    .wa-community--boxed { padding: 24px 18px; }
}

/* Triple species name in community rows — EN on top, ES + scientific
   (italic) together on a second line, so rows stay compact.
   Global: applies wherever community stat rows render (hotspot, country…). */
.wa-community-row-name {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: var(--wag-space-8);
    line-height: 1.3;
    min-width: 0;
}
/* Renamed from -en/-es (Marc, 2026-08-02): which name is bold now follows the
   visitor's language (wa_community_species_name()), not always English. */
.wa-community-name-primary  { flex-basis: 100%; font-weight: 700; }

/* Unified filter dropdowns (species hotspots): the first dropdown of the
   row doesn't need the leading vertical separator. */


/* ============================================================
   CONTROL CENTER — ENTITY EDITOR (page-admin-edit.php, H1-H3)
   WildAtlas skin over acf_form() and the embedded GD add-listing.
   ============================================================ */
.wa-admin-editor { margin: 0 auto; }
.wa-admin-editor-note {
    padding: 14px 18px;
    border: 1px dashed #d4dbe3;
    border-radius: 13px;
    background: #f8f9fb;
    color: #5f7f9f;
    font-size: var(--wag-text-14);
}
.wa-admin-saved {
    margin-bottom: 18px;
    padding: 12px 18px;
    border: 1px solid rgba(46, 158, 91, .35);
    border-radius: 13px;
    background: rgba(46, 158, 91, .10);
    color: #2e9e5b;
    font-size: var(--wag-text-14);
}
.wa-admin-saved a { color: #207944; font-weight: 700; }
.wa-admin-trow-actions .wa-admin-wplink { font-size: var(--wag-text-11); opacity: .55; }

/* ── Varita 🪄 de la fila de contenido ───────────────────────────────────────
   Nada que ver con el AI Enrichment que se retiró: la varita completa una ficha
   (descripción, foto e inventario de fauna) y sigue viva. Conserva el nombre de
   clase `wa-enrich-*` porque lo emite inc/admin/content.php y lo lee el JS;
   renombrarlo es un cambio aparte, no un efecto colateral de aquel borrado. */
.wa-enrich-btn {
    background: none; border: none; cursor: pointer;
    font-size: var(--wag-text-16); padding: 4px 6px; border-radius: var(--wag-radius-8);
    line-height: 1; transition: transform .15s, background .15s; vertical-align: middle;
}
.wa .wa-enrich-btn:hover { background: rgba(95,127,159,.1); transform: scale(1.18) rotate(-8deg); }
.wa-enrich-btn:disabled { opacity: .5; cursor: default; transform: none; }
/* El sombrero 🎩 se fue con AI Enrichment (2026-09-15). */

.wa-enrich-result {
    font-size: var(--wag-text-11); color: var(--wag-accent);
    background: #f0f8f3; border: 1px solid #d6ebdf;
    border-radius: var(--wag-radius-20); padding: 2px 8px; white-space: nowrap;
    animation: wa-enrich-fade 8s forwards;
}
@keyframes wa-enrich-fade { 0%,80% { opacity:1; } 100% { opacity:0; } }

/* ── Administrator-drawn wildlife footprint ─────────────────────────────── */
.wa .wa-manual-footprint-card { border-color: #cfe5d7; }
.wa-manual-footprint-map { height: 370px; border: 1px solid #dce7df; border-radius: 14px; overflow: hidden; background: #eef3ef; }
.wa-manual-footprint-tools { display: flex; flex-wrap: wrap; gap: var(--wag-space-8); margin-top: 12px; }
.wa-manual-footprint-tools button {
    appearance: none; border: 1px solid #cbd9d0; border-radius: 9px; padding: 9px 12px;
    background: var(--wag-surface); color: #244433; font: 700 12px/1.1 inherit; cursor: pointer;
}
.wa .wa-manual-footprint-tools button:hover { background: #edf7f0; color: #174328; border-color: #82b897; }
.wa-manual-footprint-tools .wa-footprint-save { background: #1f8a52; border-color: #1f8a52; color: #fff; }
.wa .wa-manual-footprint-tools .wa-footprint-save:hover { background: #176b3f; border-color: #176b3f; color: #fff; }
.wa-manual-footprint-tools button:disabled { opacity: .48; cursor: default; }
.wa .wa-manual-footprint-tools button:disabled:hover { background: var(--wag-surface); color: #244433; border-color: #cbd9d0; }
.wa-manual-footprint-status { margin: 10px 0 0; color: #5f6f63; font-size: 12.5px; line-height: 1.45; }
.wa-manual-footprint-hint { margin: 9px 0 0; color: #76847a; font-size: var(--wag-text-12); line-height: 1.4; }
.wa-manual-footprint-status.is-error { color: #a53a3a; }
@media (max-width: 640px) { .wa-manual-footprint-map { height: 300px; } .wa-manual-footprint-tools button { flex: 1 1 145px; } }

/* ACF form, WildAtlas-ified */
.wa-admin-editor .acf-form { margin-top: 6px; }
.wa-admin-editor .acf-fields > .acf-field {
    border-top: 0;
    padding: 14px 0 4px;
}
.wa-admin-editor .acf-label label {
    font-size: var(--wag-text-12);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #5f7f9f;
}
.wa-admin-editor .acf-label .description { font-size: var(--wag-text-12); color: #9aa7b4; }
.wa-admin-editor .acf-input input[type="text"],
.wa-admin-editor .acf-input input[type="number"],
.wa-admin-editor .acf-input input[type="url"],
.wa-admin-editor .acf-input input[type="email"],
.wa-admin-editor .acf-input textarea,
.wa-admin-editor .acf-input select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--wag-type-field-admin-editor-line, var(--wag-style-field-admin-editor-line));
    border-radius: var(--wag-type-field-admin-editor-radius, var(--wag-style-field-admin-editor-radius));
    background: var(--wag-surface);
    font-size: 14.5px;
    box-shadow: var(--wag-shadow-14);
}
.wa-admin-editor .acf-input input:focus,
.wa-admin-editor .acf-input textarea:focus,
.wa .wa-admin-editor .acf-input select:focus {
    border-color: var(--wag-type-field-admin-editor-focus-line, var(--wag-style-field-admin-editor-focus-line));
    outline: none;
    box-shadow: var(--wag-type-field-admin-editor-focus-shadow, var(--wag-style-field-admin-editor-focus-shadow));
}
.wa-admin-editor .acf-relationship .list { border-radius: 10px; }

/* Experience business & location: ACF keeps the permitted-query logic, but
   its native dual panel is fully skinned as a Wild Atlas Guide picker. */
.wa-admin-editor .wa-tour-rel-picker {
    border: 1px solid #d9e3ec;
    border-radius: var(--wag-radius-12);
    overflow: hidden;
    background: var(--wag-surface);
    box-shadow: 0 4px 14px rgba(26, 30, 36, .045);
}
.wa-admin-editor .wa-tour-rel-picker .acf-relationship-left,
.wa-admin-editor .wa-tour-rel-picker .acf-relationship-right,
.wa-admin-editor .wa-tour-rel-picker .acf-selection {
    position: relative;
    min-height: 164px;
    padding-top: 31px;
    border: 0;
    background: var(--wag-surface);
}
.wa-admin-editor .wa-tour-rel-picker .acf-relationship-left {
    border-right: 1px solid #e3eaf0;
    background: #f8fafc;
}
.wa-admin-editor .wa-tour-rel-picker .acf-relationship-left::before,
.wa-admin-editor .wa-tour-rel-picker .acf-relationship-right::before,
.wa-admin-editor .wa-tour-rel-picker .acf-selection::before {
    content: attr(data-wa-panel);
    position: absolute;
    top: 10px;
    left: 13px;
    right: 13px;
    color: #657586;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1.1;
    text-transform: uppercase;
}
.wa-admin-editor .wa-tour-rel-picker .acf-relationship-title {
    min-height: 0;
    padding: 0 10px 9px;
    border: 0;
    background: transparent;
}
.wa-admin-editor .wa-tour-rel-picker .acf-rel-label,
.wa-admin-editor .wa-tour-rel-picker .acf-rel-type { display: none; }
.wa-admin-editor .wa-tour-rel-picker .acf-rel-search input,
.wa-admin-editor .wa-tour-rel-picker input[type="search"],
.wa-admin-editor .wa-tour-rel-picker input[type="text"] {
    min-height: 36px;
    padding: 8px 11px;
    border: 1px solid #d4dfe8;
    border-radius: var(--wag-radius-8);
    background: var(--wag-surface);
    color: var(--wag-type-field-admin-editor-ink, var(--wag-style-field-admin-editor-ink));
    font-size: var(--wag-text-13);
}
.wa-admin-editor .wa-tour-rel-picker .acf-relationship-list,
.wa-admin-editor .wa-tour-rel-picker .acf-selection {
    border: 0;
    background: transparent;
}
.wa-admin-editor .wa-tour-rel-picker .list,
.wa-admin-editor .wa-tour-rel-picker .acf-bl {
    margin: 0;
    padding: 0 8px 8px;
    border: 0;
    background: transparent;
}
.wa-admin-editor .wa-tour-rel-picker .list li,
.wa-admin-editor .wa-tour-rel-picker .acf-bl li {
    margin: 0;
    border-bottom: 1px solid #eaf0f4;
}
.wa-admin-editor .wa-tour-rel-picker .list li:last-child,
.wa-admin-editor .wa-tour-rel-picker .acf-bl li:last-child { border-bottom: 0; }
.wa-admin-editor .wa-tour-rel-picker .acf-rel-item {
    padding: 9px 10px;
    border-radius: 7px;
    color: #2d3844;
    font-size: var(--wag-text-13);
    transition: background .14s ease, color .14s ease;
}
.wa .wa-admin-editor .wa-tour-rel-picker .acf-rel-item:hover {
    background: #edf6f0;
    color: #175c38;
}
.wa-admin-editor .wa-tour-rel-picker .acf-relationship-right .acf-rel-item,
.wa-admin-editor .wa-tour-rel-picker .acf-selection .acf-rel-item {
    background: #edf6f0;
    color: #175c38;
    font-weight: 650;
    margin: 0 0 5px;
}
.wa-admin-editor .wa-tour-rel-picker .acf-icon.-minus,
.wa-admin-editor .wa-tour-rel-picker .acf-icon.-cancel {
    border-color: #c7d9cf;
    color: #347651;
}
.wa .wa-admin-editor .wa-tour-rel-picker .acf-icon.-minus:hover,
.wa .wa-admin-editor .wa-tour-rel-picker .acf-icon.-cancel:hover {
    border-color: #dba9a3;
    background: #fff0ef;
    color: #aa3d35;
}

/* Hotspots are a dependent choice: the picker only searches the operating
   countries selected immediately above it. */
.wa-editor-country-hotspots { margin-top: 2px; }
.wa-editor-country-hotspots-search { position: relative; }
.wa-admin-editor .wa-editor-country-hotspots input[type="search"] {
    width: 100%;
    min-height: 42px;
    padding: 10px 13px;
    border: 1px solid #d2dde6;
    border-radius: 10px;
    background: var(--wag-surface);
    color: var(--wag-type-field-admin-editor-ink, var(--wag-style-field-admin-editor-ink));
    font-size: 13.5px;
}
.wa-admin-editor .wa-editor-country-hotspots input[type="search"]:disabled {
    background: var(--wag-type-field-admin-editor-bg, var(--wag-style-field-admin-editor-bg));
    color: #93a0ab;
    cursor: not-allowed;
}
.wa-editor-country-hotspots-results {
    position: absolute;
    z-index: 1000;
    top: calc(100% + 5px);
    right: 0;
    left: 0;
    max-height: 248px;
    overflow-y: auto;
    padding: 5px;
    border: 1px solid #d2dde6;
    border-radius: 10px;
    background: var(--wag-surface);
    box-shadow: 0 12px 28px rgba(26, 30, 36, .16);
}
.wa-editor-country-hotspots-results[hidden] { display: none; }
.wa-editor-country-hotspots-results button {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #25313d;
    text-align: left;
    cursor: pointer;
}
.wa-editor-country-hotspots-results button strong { font-size: var(--wag-text-13); font-weight: 700; }
.wa-editor-country-hotspots-results button small { margin-top: 2px; color: #718294; font-size: 11.5px; }
.wa .wa-editor-country-hotspots-results button:hover {
    background: #edf6f0;
    color: #175c38;
}
.wa-editor-country-hotspots-results p { margin: 7px 9px; color: #718294; font-size: 12.5px; }
.wa-editor-country-hotspots-hint { margin: 7px 1px 0; color: #768797; font-size: var(--wag-text-12); line-height: 1.4; }
.wa-editor-country-hotspots-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.wa-editor-country-hotspot-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 5px 7px 5px 11px;
    border: 1px solid #c5ddcd;
    border-radius: var(--wag-radius-999);
    background: #edf7f0;
    color: #1d623d;
    font-size: 12.5px;
    font-weight: 650;
}
.wa-editor-country-hotspot-pill > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-editor-country-hotspot-pill button {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #4b8a64;
    font: 700 17px/16px Arial, sans-serif;
    cursor: pointer;
}
.wa .wa-editor-country-hotspot-pill button:hover { background: #dceee1; color: #a33b34; }

/* Tour extras and itinerary no longer read like WordPress tables. */
.wa-admin-editor .acf-field[data-name="tour_extras"] .acf-table,
.wa-admin-editor .acf-field[data-name="tour_itinerary"] .acf-repeater {
    border: 1px solid #dfe7ee;
    border-radius: var(--wag-radius-12);
    overflow: hidden;
    background: var(--wag-surface);
}
.wa-admin-editor .acf-field[data-name="tour_extras"] .acf-table th,
.wa-admin-editor .acf-field[data-name="tour_extras"] .acf-table .acf-row-handle,
.wa-admin-editor .acf-field[data-name="tour_itinerary"] .acf-row-handle {
    background: #eef3f7;
    color: #66798a;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.wa-admin-editor .acf-field[data-name="tour_extras"] .acf-table td,
.wa-admin-editor .acf-field[data-name="tour_itinerary"] .acf-row > td {
    border-color: #e8eef3;
    background: var(--wag-surface);
}
.wa-admin-editor .acf-field[data-name="tour_itinerary"] .acf-row + .acf-row > td { border-top: 10px solid #f6f9fc; }
.wa-admin-editor .acf-field[data-name="tour_extras"] .acf-actions .acf-button,
.wa-admin-editor .acf-field[data-name="tour_itinerary"] .acf-actions .acf-button {
    border: 1px solid #c7ddd0;
    border-radius: var(--wag-radius-8);
    background: #eef7f1;
    color: #1c7145;
    font-weight: 750;
}
.wa .wa-admin-editor .acf-field[data-name="tour_extras"] .acf-actions .acf-button:hover,
.wa .wa-admin-editor .acf-field[data-name="tour_itinerary"] .acf-actions .acf-button:hover {
    border-color: #1c7145;
    background: #e0f1e6;
    color: #155a36;
}

/* Accordion sections rendered as WildAtlas cards */
.wa-admin-editor .acf-field.acf-field-accordion { border: 0; padding: 0; margin: 30px 0 0; }
.wa-admin-editor .acf-field-accordion .acf-accordion-title {
    background: linear-gradient(180deg, #20252c 0%, #1a1e24 100%);
    border: 0;
    border-radius: 14px 14px 0 0;
    padding: 15px 22px;
    margin: 0;
    font-size: var(--wag-text-12);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff;
}
.wa-admin-editor .acf-field-accordion .acf-accordion-title label { color: #fff; font-size: var(--wag-text-12); }
.wa-admin-editor .acf-field-accordion .acf-accordion-title .acf-accordion-icon { color: #9aa7b4; }
/* Hover stays dark (override ACF's light hover) */
.wa .wa-admin-editor .acf-field-accordion .acf-accordion-title:hover {
    background: linear-gradient(180deg, #2b3038 0%, #20252c 100%);
    color: #fff;
}
/* The fields belonging to a section sit in a soft-tinted card under the title */
.wa-admin-editor .acf-field-accordion .acf-accordion-content {
    border: 1px solid #e3e9f0;
    border-top: 0;
    border-radius: 0 0 14px 14px;
    padding: 26px 24px 14px;
    background: #f6f9fc;          /* soft blue-grey tint */
    box-shadow: var(--wag-shadow-11);
}
/* Side margin inside each section card's native ACF field flow. Do not change
   this wrapper into Grid/Flex: ACF measures it while accordion panels animate. */
.wa-admin-editor .acf-field-accordion .acf-accordion-content > .acf-fields {
    margin-left: 10px;
    margin-right: 10px;
}
/* Keep ACF's float layout intact. These modest gutters are safe during its
   expand/collapse animation and avoid fields sitting against a divider. */
.wa-admin-editor .acf-accordion-content .acf-fields .acf-field { padding: 14px 0; }
.wa-admin-editor .acf-accordion-content .acf-fields .acf-field[data-width] {
    margin-bottom: 4px;
    vertical-align: top;
    box-sizing: border-box;
    border-left: 0 !important;
    border-right: 0 !important;
}
.wa-admin-editor .acf-accordion-content .acf-fields .acf-field[data-width="50"],
.wa-admin-editor .acf-accordion-content .acf-fields .acf-field[data-width="33"],
.wa-admin-editor .acf-accordion-content .acf-fields .acf-field[data-width="25"] {
    padding-left: 0;
    padding-right: 16px;
}
.wa-admin-editor .acf-accordion-content .acf-fields .acf-field[data-width="50"] + .acf-field[data-width="50"],
.wa-admin-editor .acf-accordion-content .acf-fields .acf-field[data-width="33"] + .acf-field[data-width="33"],
.wa-admin-editor .acf-accordion-content .acf-fields .acf-field[data-width="25"] + .acf-field[data-width="25"] {
    padding-left: 16px;
}
/* Keep Stay pricing as one calm row: price, currency and status controls share
   the same baseline. Its longer explanation lives below the price input. */
.wa-admin-editor .acf-field[data-name="stay_price_per_night"] {
    display: grid;
    grid-template-areas: "label" "input" "hint";
    gap: 7px;
}
.wa-admin-editor .acf-field[data-name="stay_price_per_night"] > .acf-label { display: contents; }
.wa-admin-editor .acf-field[data-name="stay_price_per_night"] > .acf-label > label {
    grid-area: label;
    margin: 0;
}
.wa-admin-editor .acf-field[data-name="stay_price_per_night"] > .acf-label > .description {
    grid-area: hint;
    margin: 0;
}
.wa-admin-editor .acf-field[data-name="stay_price_per_night"] > .acf-input {
    grid-area: input;
    margin: 0 !important;
}
.wa-admin-editor .acf-field[data-name="stay_currency"] > .acf-input,
.wa-admin-editor .acf-field[data-name="stay_status"] > .acf-input { margin-top: 0 !important; }
/* Inputs sit on white so they pop against the tinted card */
.wa-admin-editor .acf-accordion-content input[type="text"],
.wa-admin-editor .acf-accordion-content input[type="number"],
.wa-admin-editor .acf-accordion-content input[type="url"],
.wa-admin-editor .acf-accordion-content input[type="email"],
.wa-admin-editor .acf-accordion-content textarea,
.wa-admin-editor .acf-accordion-content select { background: var(--wag-surface); }
.wa-admin-editor .acf-form-submit { padding: 22px 0 6px; }
/* ACF image fields are deliberately in "basic" mode on the frontend editor:
   browser file picker only, never the WordPress media modal. */
.wa .wa-admin-editor .acf-basic-uploader {
    display: flex;
    align-items: center;
    min-height: 62px;
    padding: 12px 14px;
    border: 1px dashed #b8c7d1;
    border-radius: var(--wag-radius-12);
    background: #f8fafb;
}
.wa .wa-admin-editor .acf-basic-uploader input[type="file"] {
    width: 100%;
    color: #536272;
    font-size: var(--wag-text-13);
}
.wa .wa-admin-editor .acf-basic-uploader input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 9px 12px;
    border: 0;
    border-radius: var(--wag-radius-8);
    background: #1f8a52;
    color: #ffffff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}
.wa .wa-admin-editor .acf-basic-uploader input[type="file"]::file-selector-button:hover { background: #176e40; }
.wa .wa-asset-upload-message {
    margin: 0 0 2px;
    padding: 10px 13px;
    border: 1px solid #c8d9ce;
    border-radius: 10px;
    background: #edf7f0;
    color: #176e40;
    font-size: var(--wag-text-13);
    font-weight: 700;
}
.wa .wa-asset-upload-message.is-error { border-color: #efc3c1; background: #fff2f1; color: #aa332e; }
/* Gallery uploads stay in the WildAtlas interface; never open wp.media. */
.wa .wa-admin-editor .wa-gallery-upload-btn {
    appearance: none;
    min-height: 36px;
    padding: 8px 13px;
    border: 1px solid #1f8a52;
    border-radius: 9px;
    background: #1f8a52;
    color: #ffffff;
    font: 800 12px/1 inherit;
    cursor: pointer;
}
.wa .wa-admin-editor .wa-gallery-upload-btn:hover,
.wa .wa-admin-editor .wa-gallery-upload-btn:focus {
    border-color: #176e40;
    background: #176e40;
    color: #ffffff;
}
/* Content editor — reduced height, no bottom resize handle, no Add Media button */
.wa-admin-editor .acf-editor-wrap iframe,
.wa-admin-editor #post_content_ifr { height: 220px !important; min-height: 220px !important; }
.wa-admin-editor .wp-editor-container { border-radius: 10px; overflow: hidden; }
.wa-admin-editor .wp-editor-tabs { border-bottom: 1px solid #e3e9f0; }
.wa-admin-editor .wp-media-buttons { display: none !important; }
/* Content field label — styled like a section heading */
.wa-admin-editor .acf-field[data-name="_post_content"] > .acf-label label {
    font-size: var(--wag-text-13);
    font-weight: 700;
    color: #3a4a5a;
    letter-spacing: .01em;
}
/* ID-strength selectors so Astra's global button hover never paints it blue */
.wa-admin-editor input.wa-editor-submit,
.wa-admin-editor input.wa-editor-submit:hover,
.wa .wa-admin-editor input.wa-editor-submit:focus {
    padding: 13px 38px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 13px;
    background: #1a1e24;
    color: #fff;
    font-size: var(--wag-text-14);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(26, 30, 36, .25);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.wa .wa-admin-editor input.wa-editor-submit:hover {
    transform: translateY(-1px);
    border-color: rgba(79, 173, 212, .7);
}

/* Embedded GeoDirectory add-listing — soften to the WildAtlas card look */
.wa-admin-editor-gd {
    margin-bottom: 34px;
    padding: 26px 24px 14px;
    border: 1px solid #e3e9f0;
    border-radius: 14px;
    background: #f6f9fc;
    box-shadow: var(--wag-shadow-11);
}

html[data-theme="dark"] .wa-admin-editor-gd,
html[data-theme="dark"] .wa-biz-own-wrap{background: #11161c; border: 1px solid #232a33;}

/* Drop GD's "Escribe detalles del anuncio" heading (only h3.h3 in the form) */
.wa-admin-editor-gd h3.h3 { display: none; }
/* Breathing room between GD rows */
.wa-admin-editor-gd .row,
.wa-admin-editor-gd .mb-3 { margin-bottom: 16px; }
.wa-admin-editor-gd label { font-weight: 600; color: #5f7f9f; }
.wa-admin-editor-gd input,
.wa-admin-editor-gd textarea,
.wa-admin-editor-gd select { background: var(--wag-surface); }

/* Languages checkbox → horizontal pills */
.wa-admin-editor .acf-field[data-key="field_wa_tour_languages"] .acf-checkbox-list,
.wa-admin-editor .acf-field[data-key="field_wa_hide_languages"] .acf-checkbox-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wag-space-8);
    padding: 0;
    list-style: none;
}
.wa-admin-editor .acf-field[data-key="field_wa_tour_languages"] .acf-checkbox-list li,
.wa-admin-editor .acf-field[data-key="field_wa_hide_languages"] .acf-checkbox-list li { margin: 0; }
.wa-admin-editor .acf-field[data-key="field_wa_tour_languages"] .acf-checkbox-list li label,
.wa-admin-editor .acf-field[data-key="field_wa_hide_languages"] .acf-checkbox-list li label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 15px;
    border: 1.5px solid #d6dfe9;
    border-radius: var(--wag-radius-999);
    cursor: pointer;
    font-size: var(--wag-text-13);
    font-weight: 500;
    color: #3a4a5a;
    background: var(--wag-surface);
    transition: border-color .15s, background .15s, color .15s;
}
.wa-admin-editor .acf-field[data-key="field_wa_tour_languages"] .acf-checkbox-list li label:hover,
.wa .wa-admin-editor .acf-field[data-key="field_wa_hide_languages"] .acf-checkbox-list li label:hover {
    border-color: #2d6a4f;
    background: #f0f7f4;
}
.wa-admin-editor .acf-field[data-key="field_wa_tour_languages"] .acf-checkbox-list li label.is-checked,
.wa-admin-editor .acf-field[data-key="field_wa_hide_languages"] .acf-checkbox-list li label.is-checked {
    border-color: #2d6a4f;
    background: #2d6a4f;
    color: #fff;
}
.wa-admin-editor .acf-field[data-key="field_wa_tour_languages"] input[type="checkbox"],
.wa-admin-editor .acf-field[data-key="field_wa_hide_languages"] input[type="checkbox"] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    accent-color: #fff;
}

/* ── Target Species pill autocomplete (admin editor) ── */
.wa-species-pills-ui { margin-top: 4px; }
.wa-species-search-wrap { position: relative; }
.wa-admin-editor .wa-species-search-input {
    width: 100%;
    padding: 8px 12px;
    border: 1.5px solid #d6dfe9;
    border-radius: 9px;
    font-size: var(--wag-text-13);
    outline: none;
    background: var(--wag-surface);
    box-sizing: border-box;
    transition: border-color .15s;
}
.wa .wa-admin-editor .wa-species-search-input:focus { border-color: #2d6a4f; }
.wa-species-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--wag-surface);
    border: 1.5px solid #d6dfe9;
    border-radius: 9px;
    box-shadow: 0 4px 18px rgba(0,0,0,.13);
    z-index: 9999;
    max-height: 220px;
    overflow-y: auto;
}
.wa-species-dd-item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: var(--wag-text-13);
    border-bottom: 1px solid #f0f4f8;
    line-height: 1.5;
}
.wa-species-dd-item:last-child { border-bottom: none; }
.wa .wa-species-dd-item:hover { background: #f0f7f4; }
.wa-species-dd-es  { color: #6b8a99; margin-left: 5px; }
.wa-species-dd-sci { color: #9aab9e; margin-left: 5px; font-size: var(--wag-text-12); }
.wa-species-dd-empty { padding: 10px 12px; color: #9aab9e; font-size: var(--wag-text-13); }
.wa-species-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    min-height: 4px;
}
.wa-species-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px 5px 12px;
    background: #eef6f1;
    border: 1.5px solid #b8d9c7;
    border-radius: var(--wag-radius-999);
    font-size: var(--wag-text-13);
    color: #1e4032;
    line-height: 1;
}
.wa-species-pill-label { display: flex; flex-direction: column; gap: 2px; }
.wa-species-pill-sub   { font-size: var(--wag-text-11); color: #6b9e82; }
.wa-species-pill-rm {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 17px;
    color: #6b9e82;
    line-height: 1;
    padding: 0 1px;
    margin-left: 2px;
    transition: color .15s;
}
.wa .wa-species-pill-rm:hover { color: #e05252; }

/* ── Admin editor: select → button group pills ───────────────────────── */
.wa-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}
.wa-btn-option {
    padding: 5px 14px;
    border: 1.5px solid #d0d7e3;
    border-radius: var(--wag-radius-999);
    background: var(--wag-surface);
    color: #374151;
    font-size: var(--wag-text-13);
    font-weight: 500;
    cursor: pointer;
    line-height: 1.45;
    transition: border-color .15s, background .15s, color .15s;
    white-space: nowrap;
}
.wa .wa-btn-option:hover {
    border-color: #9aab9e;
    background: #f6faf8;
}
.wa-btn-option.is-selected {
    background: var(--wa-btn-color, #1e293b);
    border-color: var(--wa-btn-color, #1e293b);
    color: #fff;
}
.wa-editor-submit.is-loading { opacity: .65; cursor: not-allowed; }

/* ── R1: Product-type accent on editor card head ─────────────────────────── */
.wa-edit-card[data-type="hide"]     .wa-edit-card-head { border-left: 3px solid #1a7546; }
.wa-edit-card[data-type="tour"]     .wa-edit-card-head { border-left: 3px solid #1e40af; }
.wa-edit-card[data-type="stay"]     .wa-edit-card-head { border-left: 3px solid #b45309; }
.wa-edit-card[data-type="pack"]     .wa-edit-card-head { border-left: 3px solid #6d28d9; }
.wa-edit-card[data-type="operator"] .wa-edit-card-head { border-left: 3px solid #0891b2; }
.wa-edit-card[data-type="hotspot"]  .wa-edit-card-head { border-left: 3px solid #059669; }

/* ── R2: Accordion completion indicators ─────────────────────────────────── */
.wa-acc-ind {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 50%; font-size: 10px; font-weight: 700;
    margin-left: 8px; vertical-align: middle; flex-shrink: 0;
    transition: background .2s, color .2s;
}
.wa-acc-ind.is-ok      { background: #d1fae5; color: #065f46; }
.wa-acc-ind.is-partial { background: #fef3c7; color: #92400e; }
.wa-acc-ind.is-missing { background: #fee2e2; color: #991b1b; }

/* ── R4: View page link in sticky save bar ───────────────────────────────── */
.wa-sticky-view-link {
    display: inline-flex; align-items: center; padding: 7px 14px;
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25);
    border-radius: var(--wag-radius-8); color: #fff; font-size: var(--wag-text-13); font-weight: 500;
    text-decoration: none; white-space: nowrap; transition: background .15s;
    flex-shrink: 0;
}
.wa .wa-sticky-view-link:hover { background: rgba(255,255,255,.22); color: #fff; }

/* ── R8: Stay amenities group headers ───────────────────────────────────── */
.wa-amenity-grp {
    list-style: none !important; width: 100% !important;
    font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: #6b7280; margin: 14px 0 4px; padding: 0; border: 0;
}
.wa-amenity-grp:first-child { margin-top: 6px; }

/* ── Char counter on ACF textareas ──────────────────────────────────────── */
.wa-char-count {
    display: block; margin-top: 4px; font-size: var(--wag-text-11); color: #9ca3af;
    text-align: right; font-variant-numeric: tabular-nums;
}

/* ── I9: Dedup spinner + no-results feedback ────────────────────────────── */
.wa-dup-spinner {
    display: flex; align-items: center; gap: var(--wag-space-8);
    padding: 10px 14px; font-size: var(--wag-text-13); color: #6b7280;
}
.wa-dup-spinner span {
    width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid #d1d5db; border-top-color: #374151;
    animation: waDupSpin .7s linear infinite; flex-shrink: 0;
}
@keyframes waDupSpin { to { transform: rotate(360deg); } }
.wa-dup-none {
    padding: 10px 14px; font-size: var(--wag-text-13); color: #059669; font-style: italic;
}

/* ── I10: Coming soon badge in benefits list ────────────────────────────── */
.wa-soon {
    display: inline-block; padding: 1px 7px; border-radius: var(--wag-radius-999);
    background: #fef9c3; border: 1px solid #fde047; color: #854d0e;
    font-size: 10px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; vertical-align: middle; margin-left: 6px;
    white-space: nowrap;
}

/* Species & Season repeater — card look, less "WP table" */
.wa-admin-editor .acf-field-repeater > .acf-input > .acf-repeater > table.acf-table {
    border: 1px solid #e3e9f0;
    border-radius: var(--wag-radius-12);
    overflow: hidden;
    background: var(--wag-surface);
}
.wa-admin-editor .acf-field-repeater .acf-row-handle,
.wa-admin-editor .acf-field-repeater thead th {
    background: #eef3f8;
    color: #5f7f9f;
    font-weight: 700;
    font-size: var(--wag-text-11);
    letter-spacing: .04em;
    text-transform: uppercase;
}
.wa-admin-editor .acf-field-repeater .acf-button {
    border-radius: 9px;
}

/* Read-only "Species present" table */
.wa-ro-tag {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
    background: #5f7f9f;
    padding: 2px 8px;
    border-radius: var(--wag-radius-999);
    margin-left: 8px;
    vertical-align: middle;
}
.wa-ro-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #e3e9f0;
    border-radius: var(--wag-radius-12);
    overflow: hidden;
    background: var(--wag-surface);
    font-size: var(--wag-text-14);
}
.wa-ro-table th {
    background: #1a1e24;
    color: #fff;
    text-align: left;
    padding: 10px 14px;
    font-size: var(--wag-text-11);
    letter-spacing: .06em;
    text-transform: uppercase;
}
.wa-ro-table td { padding: 9px 14px; border-top: 1px solid #eef1f4; color: #1a1e24; }
.wa-ro-table tbody tr:nth-child(even) td { background: #f8fafc; }
.wa-ro-id  { color: #9aa7b4; width: 70px; }
.wa-ro-sci { font-style: italic; color: #6b7886; }
/* GD's Images row hidden — the featured image is managed by the WildAtlas
   "Featured image" field below, same UI as every other editor. */
/* GD submit button matches .wa-owner-btn style */
.wa-admin-editor-gd #gd-submit,
.wa-admin-editor-gd #geodir-add-listing-submit button {
    display: inline-block; padding: 9px 16px; border-radius: 9px;
    background: #1a2a3a !important; color: #fff !important; border: none; cursor: pointer;
    font-size: var(--wag-text-13); font-weight: 600; text-transform: none; letter-spacing: 0;
    box-shadow: var(--wag-shadow-14);
}
.wa-admin-editor-gd #gd-submit:hover,
.wa .wa-admin-editor-gd #geodir-add-listing-submit button:hover { background: #283c50 !important; }
.wa-admin-editor-gd #post_images_row { display: none; }
/* GD's native contact/social rows hidden — WildAtlas manages these via the
   ACF "Contact & social" card below (which is what the frontend reads).
   GD's bootstrap/AUI form doesn't use #{name}_row on text inputs, so we hide
   the row that CONTAINS each contact input by name (:has). Covers both the
   legacy id form and the AUI form. */
.wa-admin-editor-gd #email_row,
.wa-admin-editor-gd #phone_row,
.wa-admin-editor-gd #website_row,
.wa-admin-editor-gd #twitter_row,
.wa-admin-editor-gd #facebook_row,
.wa-admin-editor-gd #instagram_row,
.wa-admin-editor-gd #whatsapp_row,
.wa-admin-editor-gd .row:has(> div [name="email"]),
.wa-admin-editor-gd .row:has(> div [name="phone"]),
.wa-admin-editor-gd .row:has(> div [name="website"]),
.wa-admin-editor-gd .row:has(> div [name="twitter"]),
.wa-admin-editor-gd .row:has(> div [name="facebook"]),
.wa-admin-editor-gd .row:has(> div [name="instagram"]),
.wa-admin-editor-gd .row:has(> div [name="whatsapp"]),
.wa-admin-editor-gd .row:has([name="email"]),
.wa-admin-editor-gd .row:has([name="phone"]),
.wa-admin-editor-gd .row:has([name="website"]),
.wa-admin-editor-gd .row:has([name="twitter"]),
.wa-admin-editor-gd .row:has([name="facebook"]),
.wa-admin-editor-gd .row:has([name="instagram"]),
.wa-admin-editor-gd .row:has([name="whatsapp"]) { display: none; }
.wa-admin-editor-gd input[type="text"],
.wa-admin-editor-gd input[type="number"],
.wa-admin-editor-gd input[type="url"],
.wa-admin-editor-gd input[type="email"],
.wa-admin-editor-gd textarea,
.wa-admin-editor-gd select {
    border-radius: var(--wag-type-field-admin-editor-radius, var(--wag-style-field-admin-editor-radius));
    border-color: var(--wag-type-field-admin-editor-line, var(--wag-style-field-admin-editor-line));
}
/* ── Q7: Accordion subtitles ─────────────────────────────────────────────── */
.acf-field-accordion .acf-label .wa-acc-sub,
.acf-accordion-title .wa-acc-sub {
    display: block;
    font-size: var(--wag-text-11);
    font-weight: 400;
    color: #8a9ab0;
    margin-top: 1px;
    letter-spacing: 0;
    text-transform: none;
}

/* ── ACF fields hidden in the WildAtlas entity editor ───────────────────── */
/* Used by wa_hide_editor_hide_operator / wa_hide_editor_hide_hotspot        */
.wa-acf-field-hidden { display: none !important; }

/* ── ACF relationship field: choices panel above subsequent accordion headers */
/* ACF sets overflow:hidden on accordion content for its slide animation.      */
/* We override that so the results list can overflow downward. Then            */
/* :focus-within lifts the whole accordion above its siblings while searching. */
.wa-admin-editor .acf-field-accordion .acf-accordion-content { overflow: visible !important; }
.wa .wa-admin-editor .acf-field-accordion:focus-within { position: relative; z-index: 100; }

/* ── I6: Context banner — parent resource (owner forms) ─────────────────── */
.wa-editor-context-banner {
    display: flex;
    align-items: center;
    gap: 7px;
    background: #eef5fc;
    border: 1px solid #cfe0f5;
    border-radius: 10px;
    padding: 9px 14px;
    margin-bottom: 12px;
    font-size: var(--wag-text-13);
    color: #4a6a8a;
}
.wa-editor-context-banner svg { flex-shrink: 0; color: #4a8dbf; }
.wa-editor-context-type { font-weight: 700; color: #2e4d6a; }
.wa-editor-context-sep  { opacity: .35; }
.wa-editor-context-link { color: #2a7fbf; text-decoration: none; font-weight: 500; }
.wa .wa-editor-context-link:hover { text-decoration: underline; }

/* ── Sticky save bar (page-admin-edit.php) ───────────────────────────────── */
.wa-sticky-save {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: #1a2330;
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 11px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wag-space-16);
    z-index: 9990;
    transform: translateY(110%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 -4px 20px -6px rgba(0,0,0,.35);
}
.wa-sticky-save.is-visible { transform: translateY(0); }
.wa-sticky-save-info {
    display: flex; align-items: center; gap: var(--wag-space-8);
    overflow: hidden; min-width: 0;
}
.wa-sticky-save-type {
    font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px;
    color: #4fadd4; white-space: nowrap; flex-shrink: 0;
}
.wa-sticky-save-sep { color: rgba(255,255,255,.22); flex-shrink: 0; }
.wa-sticky-save-title {
    font-size: var(--wag-text-14); font-weight: 500; color: rgba(255,255,255,.65);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wa-sticky-save-btn {
    flex-shrink: 0;
    background: #1f8a52; border: none; color: #fff;
    font-size: 13.5px; font-weight: 700;
    padding: 10px 24px; border-radius: 9px;
    cursor: pointer; letter-spacing: .15px;
    transition: background .15s, transform .1s;
    box-shadow: 0 4px 14px -4px rgba(31,138,82,.55);
}
.wa .wa-sticky-save-btn:hover { background: #1a7546; }
.wa .wa-sticky-save-btn:active { transform: translateY(1px); }

.wa-community-name-secondary  { font-size: var(--wag-text-12);   font-weight: 600; color: var(--wag-type-community-name-secondary-ink, var(--wag-style-community-name-secondary-ink)); }
.wa-community-name-sci { font-size: 11.5px; font-weight: 400; font-style: italic; color: var(--wag-type-community-name-sci-ink, var(--wag-style-community-name-sci-ink)); }

/* Included Hides — green "verified" chips with check (package pages) */
.hide-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}
.hide-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border: 1px solid rgba(46, 158, 91, .35);
    border-radius: var(--wag-radius-999);
    background: rgba(46, 158, 91, .10);
    color: #2e9e5b;
    font-size: var(--wag-text-13);
    font-weight: 700;
    text-decoration: none;
    transition: border-color .15s, background .15s, color .15s;
}
.hide-chip svg { flex-shrink: 0; }
.hide-chip:hover,
.wa .hide-chip:focus {
    border-color: #2e9e5b;
    background: rgba(46, 158, 91, .18);
    color: #207944;
}

/* Profile and observation controls share WAG surfaces and compact geometry. */
.wa .wa-list-card-delete,
.wa .wa-list-item-remove,
.wa .wa-modal-x,
.wa .wa-obs-import-close,
.wa .wa-list-card-delete:is(:hover,:focus,:active),
.wa .wa-list-item-remove:is(:hover,:focus,:active),
.wa .wa-modal-x:is(:hover,:focus,:active),
.wa .wa-obs-import-close:is(:hover,:focus,:active) { background: transparent; box-shadow: none; }
.wa .wa-obs-notes { height: auto; min-height: 36px; line-height: 1.4; box-sizing: border-box; }
.wa-obs-suggest-add { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.wa-obs-suggest-add svg { display: block; flex-shrink: 0; }
.wa .wa-modal-box select,
.wa .wa-obs-import select { min-height: 40px; padding: 9px 12px; border: 1px solid var(--wag-color-field-line); border-radius: var(--wag-radius-8); background-color: var(--wag-surface); color: var(--wag-ink); font: inherit; font-size: var(--wag-text-14); }
html[data-theme="dark"] .wa .wa-obs-create-wrap,
html[data-theme="dark"] .wa .wa-profile-card-wrap { background: var(--wag-dark-surface); border-color: var(--wag-color-dark-line); box-shadow: none; }
html[data-theme="dark"] .wa .wa-obs-create-wrap .wa-obs-export { border-color: var(--wag-color-dark-line); }
html[data-theme="dark"] .wa .wa-profile-card-wrap .wa-obs-notes { background: var(--wag-dark-surface); border-color: var(--wag-color-dark-line); color: var(--wag-dark-ink); }
html[data-theme="dark"] .wa .wa-modal-box select,
html[data-theme="dark"] .wa .wa-obs-import select { background-color: var(--wag-color-dark-field); border-color: var(--wag-color-dark-edge); color: var(--wag-dark-ink); }

.wa-dropdown[data-native-select][hidden], select[data-wag-form-select][hidden] { display: none; }
.wa-obs-import-form > .wa-dropdown[data-native-select] { grid-column: 1 / -1; }

/* Import is an always-dark module, including when the page uses the light theme. */
.wa .wa-obs-import .wa-dropdown :is(.wa-dropdown-trigger, .wa-dropdown-menu),
.wa .wa-obs-import select[data-wag-form-select] {
    background: var(--wag-type-field-obs-bg, var(--wag-style-field-obs-bg));
    border-color: #405362; color: #edf3f7;
}
.wa .wa-obs-import .wa-dropdown .wa-dropdown-trigger:is(:hover, :focus-visible),
.wa .wa-obs-import .wa-dropdown.is-open .wa-dropdown-trigger { background: #2a3946; border-color: #6ca8ce; color: #fff; }
.wa .wa-obs-import .wa-dropdown .wa-dropdown-option { background: transparent; color: #edf3f7; }
.wa .wa-obs-import .wa-dropdown .wa-dropdown-option:is(:hover, :focus-visible, .is-active) { background: #2a3946; color: #fff; }

/* Visible close glyph on list cards, without a button background. */
.wa .wa-list-card .wa-list-card-delete,
.wa .wa-profile-card-wrap .wa-list-item-remove { display: inline-flex; align-items: center; justify-content: center; color: var(--wag-color-muted); font-size: var(--wag-text-24); font-weight: 700; line-height: 1; }
.wa .wa-list-card .wa-list-card-delete:is(:hover, :focus-visible),
.wa .wa-profile-card-wrap .wa-list-item-remove:is(:hover, :focus-visible) { color: var(--wag-color-rust); }
.wa .wa-list-card .wa-list-card-delete:focus-visible,
.wa .wa-profile-card-wrap .wa-list-item-remove:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
html[data-theme="dark"] .wa .wa-list-card .wa-list-card-delete,
html[data-theme="dark"] .wa .wa-profile-card-wrap .wa-list-item-remove { color: var(--wag-dark-ink); }
html[data-theme="dark"] .wa .wa-list-card .wa-list-card-delete:is(:hover, :focus-visible),
html[data-theme="dark"] .wa .wa-profile-card-wrap .wa-list-item-remove:is(:hover, :focus-visible) { color: var(--wag-color-dark-coral); }

.wa .wa-profile-card-wrap .wa-list-item-remove,
.wa .wa-profile-card-wrap .wa-list-item-remove:is(:hover, :focus-visible),
html[data-theme="dark"] .wa .wa-profile-card-wrap .wa-list-item-remove,
html[data-theme="dark"] .wa .wa-profile-card-wrap .wa-list-item-remove:is(:hover, :focus-visible) {
    top: 0; right: 0; width: 34px; height: 32px; padding: 0; box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 0 0 0 14px;
    background: var(--wag-color-white); color: var(--wag-color-ink-black);
    box-shadow: none; text-shadow: none;
}
.wa .wa-profile-card-wrap .wa-list-item-remove:is(:hover, :focus-visible),
html[data-theme="dark"] .wa .wa-profile-card-wrap .wa-list-item-remove:is(:hover, :focus-visible) { background: #edf1f4; color: var(--wag-color-ink-black); }
.wa .wa-profile-card-wrap .wa-list-item-remove:focus-visible { outline-offset: -3px; }
.wa-profile-card-wrap .wa-list-item-remove svg { display: block; pointer-events: none; }

/* Let the card clip the outer corner: two independent radii leave a visible seam. */
.wa-profile-card-wrap:has(> .wa-list-item-remove) { overflow: hidden; border-radius: 14px; }