ese día — y
esta misma sesión ya ha demostrado que ese suelo se mueve (los colores
globales de Astra a transparente rompieron el círculo de arrastrar del
generador). El botón nativo ya tenía este mismo tratamiento (regla 2); esto
es lo mismo para el enlace, y por la misma razón: no se parchea sitio por
sitio, se le da al enlace sin clase un color que WildAtlas controla.
--wa-accent es verde dentro del panel (Control Center/Owner/Perfil) y cae al
azul del sitio fuera de ahí — mismo comportamiento que ya tienen los demás
componentes .wa-* que leen esa variable. */
/* :where() aquí es el punto entero de la regla, no un detalle: :not([class])
por sí solo SUMA especificidad (una clase de más), y eso es justo lo que
la rompió (Marc, 2026-07-27) — le ganaba a ".wa-account-menu a" (una sola
clase + tag) y el menú de cuenta se volvió azul/verde entero en vez de su
gris neutro. :where() anula la especificidad de TODO lo que envuelve —
tanto el ".wa" como el ":not([class])" — así que esta regla queda por
debajo de CUALQUIER selector de un componente real, sin importar en qué
orden aparezcan en el fichero. Sigue haciendo su trabajo (vencer a Astra,
que carga antes) porque a especificidad empatada gana el que se declaró
después, y wildatlas.css siempre se encola después del padre. */
:where(.wa) a:where(:not([class])) {
color: var(--wa-accent, #2b7cb0);
text-decoration: none;
}
/* Sin subrayado tampoco en hover (Marc, 2026-07-27) — el color ya basta como
señal, igual que en el resto de enlaces del sitio (p. ej. .wa-admin-trow-country,
que sólo oscurece el color al pasar el ratón). */
:where(.wa) a:where(:not([class])):hover,
:where(.wa) a:where(:not([class])):focus {
opacity: .78;
}
/* ★ Astra neutraliser — ALL close (×) buttons: kill the blue hover bg + parallel
box-shadow site-wide. Targets classes ending in -close, .wa-modal-x, and
aria-label="Close…" buttons. Excludes text buttons like .wa-bk-close-enquiry
(ends in -enquiry). */
/* Class-based (bulletproof) — kept in its OWN rule so nothing can invalidate it */
.wa [class$="-close"]:hover,
.wa [class$="-close"]:focus,
.wa [class$="-close"]:active,
.wa .wa-modal-x:hover,
.wa .wa-modal-x:focus,
.wa .wa-modal-x:active,
.wa .wa-modal-close:hover,
.wa .wa-modal-close:focus,
.wa .wa-modal-close:active {
background: transparent !important;
background-color: transparent !important;
box-shadow: var(--wag-shadow-15) !important;
outline: none !important;
border-color: transparent !important;
}
/* aria-label variants — SEPARATE rule so an unsupported token can't drop the above */
.wa button[aria-label^="Close"]:hover,
.wa button[aria-label^="Close"]:focus,
.wa button[aria-label^="Dismiss"]:hover,
.wa button[aria-label^="Dismiss"]:focus,
.wa button[aria-label^="Clear"]:hover,
.wa button[aria-label^="Clear"]:focus {
background: transparent !important;
background-color: transparent !important;
box-shadow: var(--wag-shadow-15) !important;
outline: none !important;
}
/* Elementor / generic dialog close buttons */
.wa .dialog-close-button:hover,
.wa .dialog-close-button:focus,
.wa .eicon-close:hover {
background: transparent !important;
box-shadow: var(--wag-shadow-15) !important;
outline: none !important;
}
/* ★ Nuclear — footer modal X (contact / feedback): beat everything */
body.wa button.wa-modal-x,
body.wa button.wa-modal-x:hover,
body.wa button.wa-modal-x:focus,
body.wa button.wa-modal-x:active,
body.wa button.wa-modal-x:focus-visible,
body.wa button.wa-modal-close,
body.wa button.wa-modal-close:hover,
body.wa button.wa-modal-close:focus,
body.wa button.wa-modal-close:active,
body.wa button.wa-modal-close:focus-visible {
background: none !important;
background-color: transparent !important;
box-shadow: var(--wag-shadow-15) !important;
-webkit-box-shadow: none !important;
outline: 0 !important;
border: 0 !important;
text-shadow: none !important;
}
/* =========================
#5 — Public user profile (/u/{id}/)
========================= */
/* Hero right-side headline metric */
.wa-pub-hero .profile-hero-info { flex: 1 1 auto; }
/* Container */
.wa-pub { margin: 0 auto; }
.wa-pub-top { display: grid; grid-template-columns: 320px 1fr; gap: 22px; align-items: start; }
@media (max-width: 780px) { .wa-pub-top { grid-template-columns: 1fr; } }
/* Premium info card */
/* Metrics grid */
.wa-pub-metrics { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 480px) { .wa-pub-metrics { grid-template-columns: repeat(2, 1fr); } }
.wa-pub-metric { text-align: center; }
.wa-pub-metric-n { display: block; }
.wa-pub-metric-l { display: block; margin-top: 7px; }
/* Sections */
.wa-pub-section { margin-top: 30px; }
.wa-pub-listcard { flex-direction: column; }
/* CTA */
.wa-pub-cta { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--wa-line, #eef1f4); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; }
html[data-theme="dark"] .wa-pub-cta { border-color: #262d35; }
.wa-pub-cta-txt { color: #6b7683; font-size: var(--wag-text-14); }
.wa-pub-cta-btn { display: inline-flex; align-items: center; gap: 7px; background: var(--wa-ink, #1a1e24); color: #fff; border: 0; font-size: var(--wag-text-14); font-weight: 700; padding: 11px 20px; border-radius: var(--wag-radius-999); cursor: pointer; text-decoration: none; }
html[data-theme="dark"] .wa-pub-cta-btn { background: var(--wag-dark-ink); color: #12161b; }
/* Private-profile hero share (own profile) */
.profile-hero-share { margin-top: 10px; display: flex; flex-wrap: wrap; }
.profile-hero-share-link { color: rgba(255,255,255,.9); font-size: var(--wag-text-13); font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.35); }
.wa .profile-hero-share-link:hover { color: #fff; }
.profile-hero-share-copy { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); color: #fff; font-size: 12.5px; font-weight: 700; padding: 6px 12px; border-radius: var(--wag-radius-999); cursor: pointer; }
.wa .profile-hero-share-copy:hover { background: rgba(255,255,255,.22); }
.profile-hero-private-note { font-size: 12.5px; color: rgba(255,255,255,.75); }
.profile-hero-private-note a { color: #fff; }
/* =========================
#5 — Public profile PREMIUM v2 (overrides)
========================= */
/* Fix: the reused .wa-list-share is position:absolute in cards — pin it inline here */
.profile-hero-share .wa-list-share { position: static !important; inset: auto !important; }
.profile-hero-share { align-items: center; gap: 10px; }
/* Hero card */
.wa-pub-herocard { background: var(--wa-card, #fff); border: 1px solid var(--wa-line, #e6ebf0); border-radius: var(--wag-radius-24); overflow: hidden; box-shadow: 0 18px 50px rgba(20,30,45,.10); }
html[data-theme="dark"] .wa-pub-herocard { background: #161b22; border-color: #262d35; }
.wa-pub-cover { height: 140px; background:
radial-gradient(120% 140% at 15% 0%, rgba(255,255,255,.28), rgba(255,255,255,0) 45%),
linear-gradient(120deg, #14764c 0%, #1f8a68 40%, #2f8fa8 100%);
position: relative; }
.wa-pub-cover::after { content: ""; position: absolute; inset: 0; background:
radial-gradient(60% 120% at 85% 10%, rgba(255,255,255,.18), rgba(255,255,255,0) 50%); }
.wa-pub-herocard-body { padding: 0 30px 8px; margin-top: -68px; text-align: center; position: relative; }
.wa-pub-avatar-ring { width: 140px; height: 140px; margin: 0 auto 14px; border-radius: 50%; padding: 5px; background: var(--wa-card, #fff); box-shadow: 0 10px 30px rgba(20,30,45,.22); display: inline-block; }
html[data-theme="dark"] .wa-pub-avatar-ring { background: #161b22; }
.wa-pub-avatar { width: 130px; height: 130px; border-radius: 50%; object-fit: cover; display: block; }
.wa-pub-name { font-size: 26px; font-weight: 800; letter-spacing: -.4px; color: var(--wa-ink, #12161b); margin: 0; display: inline-flex; align-items: center; gap: 9px; flex-wrap: wrap; justify-content: center; }
html[data-theme="dark"] .wa-pub-name { color: #f2f5f8; }
.wa-pub-meta { margin-top: 10px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: center; }
.wa-pub-meta-item { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: #76828f; }
.wa-pub-meta-item svg { color: #9aa6b2; }
.wa-pub-meta-item a { color: #1f8a68; text-decoration: none; font-weight: 600; }
.wa .wa-pub-meta-item a:hover { text-decoration: underline; }
.wa-pub-meta-item--instagram svg,
.wa-pub-meta-item--instagram a{ color: #c13584; }
.wa .wa-pub-meta-item--instagram a:hover { color: #9c2468; }
.wa-pub-bio { max-width: 560px; margin: 16px auto 0; font-size: 14.5px; line-height: 1.6; color: #55606b; }
html[data-theme="dark"] .wa-pub-bio { color: #aeb8c2; }
/* Metric pills row */
.wa-pub-metrics { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--wag-space-12); margin: 22px 0 0; padding: 22px 26px 26px; border-top: 1px solid var(--wa-line, #eef1f4); }
html[data-theme="dark"] .wa-pub-metrics { border-color: #262d35; }
.wa-pub-metric { flex: 1 1 130px; max-width: 160px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 16px 10px; background: var(--wa-soft, #f7f9fb); border: 1px solid var(--wa-line, #eef1f4); border-radius: var(--wag-radius-16); transition: transform .15s ease, box-shadow .15s ease; }
html[data-theme="dark"] .wa-pub-metric { background: #12171e; border-color: #262d35; }
.wa .wa-pub-metric:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(20,30,45,.10); }
.wa-pub-metric-ico { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 4px; background: rgba(31,138,104,.12); color: #1f8a68; }
.wa-pub-metric--birds .wa-pub-metric-ico { background: rgba(43,124,176,.14); color: #2b7cb0; }
.wa-pub-metric--mammals .wa-pub-metric-ico { background: rgba(106,87,192,.14); color: #6a57c0; }
.wa-pub-metric--hotspots .wa-pub-metric-ico { background: rgba(194,119,43,.14); color: #c2772b; }
.wa-pub-metric--countries .wa-pub-metric-ico { background: rgba(58,143,168,.14); color: #3a8fa8; }
.wa-pub-metric-n { font-size: var(--wag-text-24); font-weight: 800; color: var(--wa-ink, #12161b); letter-spacing: -.5px; line-height: 1.1; }
html[data-theme="dark"] .wa-pub-metric-n { color: #f2f5f8; }
.wa-pub-metric-l { font-size: var(--wag-text-11); text-transform: uppercase; letter-spacing: .6px; color: #8a95a3; font-weight: 700; }
@media (max-width: 560px) {
.wa-pub-herocard-body { padding: 0 18px 6px; }
.wa-pub-metrics { padding: 18px 14px 20px; }
.wa-pub-metric { flex: 1 1 44%; max-width: none; }
}
/* #5 — Premium list sections (observation / species lists) */
.wa-pub-section-title { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: #76828f; margin: 0 0 14px; }
.wa-pub-section-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: var(--wag-radius-999); background: var(--wa-soft, #eef1f4); color: #6b7683; font-size: var(--wag-text-12); font-weight: 800; letter-spacing: 0; }
html[data-theme="dark"] .wa-pub-section-count { background: #232a32; color: #aeb8c2; }
.wa-pub-lgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.wa-pub-lcard { display: flex; align-items: center; gap: 14px; padding: 16px 16px 16px 14px; background: var(--wa-card, #fff); border: 1px solid var(--wa-line, #e6ebf0); border-radius: var(--wag-radius-16); text-decoration: none; box-shadow: 0 4px 16px rgba(20,30,45,.05); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; position: relative; overflow: hidden; }
html[data-theme="dark"] .wa-pub-lcard { background: #161b22; border-color: #262d35; }
.wa-pub-lcard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #1f8a68; opacity: 0; transition: opacity .16s ease; }
.wa-pub-lcard--species::before { background: #6a57c0; }
.wa .wa-pub-lcard:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(20,30,45,.12); border-color: #d3dbe4; }
.wa .wa-pub-lcard:hover::before { opacity: 1; }
html[data-theme="dark"] .wa-pub-lcard:hover { border-color: #37414c; }
.wa-pub-lcard-ico { flex: 0 0 auto; width: 44px; height: 44px; border-radius: var(--wag-radius-12); display: inline-flex; align-items: center; justify-content: center; background: rgba(31,138,104,.12); color: #1f8a68; }
.wa-pub-lcard--species .wa-pub-lcard-ico { background: rgba(106,87,192,.13); color: #6a57c0; }
.wa-pub-lcard-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.wa-pub-lcard-name { font-size: 15px; font-weight: 700; color: var(--wa-ink, #12161b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-theme="dark"] .wa-pub-lcard-name { color: #f2f5f8; }
.wa-pub-lcard-meta { font-size: 12.5px; color: #8a95a3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-pub-lcard-arrow { flex: 0 0 auto; color: #c2ccd6; transition: transform .16s ease, color .16s ease; }
.wa .wa-pub-lcard:hover .wa-pub-lcard-arrow { transform: translateX(3px); color: #1f8a68; }
.wa .wa-pub-lcard--species:hover .wa-pub-lcard-arrow { color: #6a57c0; }
/* #5 — No hero band: hero-card leads full-width */
.wa-pub { max-width: none; }
.wa-pub .wa-pub-herocard { margin-top: 18px; }
/* #5 — User community block on the public profile */
.wa-pub-community { margin-top: 24px; }
.wa-pub-community-row { flex-wrap: wrap; gap: 0 14px; }
.wa-pub-community-sub { flex-basis: 100%; font-size: var(--wag-text-12); color: #9aa6b2; margin-top: 2px; }
html[data-theme="dark"] .wa-pub-community-sub { color: #8a95a3; }
/* #5 — Premium toggle cards in Edit Profile */
.wa-toggle-card { display: flex !important; align-items: center; gap: var(--wag-space-16); padding: 16px 18px; border: 1px solid var(--wa-line, #e6ebf0); border-radius: 14px; background: var(--wa-soft, #f7f9fb); cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.wa .wa-toggle-card:hover { border-color: #cdd6df; }
html[data-theme="dark"] .wa-toggle-card { background: #12171e; border-color: #262d35; }
html[data-theme="dark"] .wa-toggle-card:hover { border-color: #37414c; }
.wa-toggle-card-txt { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--wag-space-4); min-width: 0; }
.wa-toggle-card-title { display: inline-flex; align-items: center; gap: var(--wag-space-8); font-size: 14.5px; font-weight: 700; color: var(--wa-ink, #12161b); }
html[data-theme="dark"] .wa-toggle-card-title { color: #f2f5f8; }
.wa-toggle-card-title svg { color: #1f8a68; flex: 0 0 auto; }
.wa-toggle-card-desc { font-size: 12.5px; line-height: 1.5; color: #76828f; font-weight: 400; }
html[data-theme="dark"] .wa-toggle-card-desc { color: #8a95a3; }
/* iOS-style switch built from a checkbox */
.wa-switch { position: relative; flex: 0 0 auto; display: inline-block; }
.wa-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.wa-switch-track { display: block; width: 46px; height: 27px; border-radius: var(--wag-radius-999); background: #cbd2da; transition: background .2s ease; }
html[data-theme="dark"] .wa-switch-track { background: #2a313a; }
.wa-switch-knob { position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%; background: var(--wag-surface); box-shadow: 0 2px 5px rgba(20,30,45,.28); transition: transform .2s cubic-bezier(.3,1.3,.5,1); }
.wa-switch input:checked + .wa-switch-track { background: #2e8b62; }
.wa-switch input:checked + .wa-switch-track .wa-switch-knob { transform: translateX(19px); }
.wa .wa-switch input:focus-visible + .wa-switch-track { box-shadow: 0 0 0 3px rgba(46,139,98,.28); }
/* #5 — Clickable usernames everywhere (link to /u/). Distinct brand green +
permanent underline so they read as clickable (Marc: not blue). */
/* NOT anchored on `.wa` — front-page.php (home) renders body.wa-home WITHOUT the
`wa` class, so `.wa .wa-user-link` never matched there. Bare class + !important
beats Astra's `a` color everywhere. */
.wa-user-link { color: #1f8a68 !important; text-decoration: underline !important; text-underline-offset: 2px; text-decoration-thickness: 1px; font-weight: inherit; cursor: pointer; }
.wa .wa-user-link:hover,
.wa .wa-user-link:focus { color: #14614a !important; text-decoration: underline !important; background: transparent !important; box-shadow: var(--wag-shadow-15) !important; }
html[data-theme="dark"] .wa-user-link { color: #4bb98a !important; }
html[data-theme="dark"] .wa-user-link:hover, html[data-theme="dark"] .wa-user-link:focus { color: #6fd0a5 !important; }
/* Las fotos del perfil público usan ahora .wa-photo-tile--profile.
Aquí vivían TRES declaraciones encadenadas de .wa-pub-photo, cada una
parcheando la anterior (la última con transform:none !important y un
::after anulado porque robaba el clic). Todo eso desaparece con la
tarjeta única. */
/* #5 fix — Recent sightings card: stretched-link pattern (card is now a ,
the whole card links to the species via an absolute cover
, and the username
link sits above it so it goes to the profile). Fixes the invalid nested-anchor
that broke the layout. */
.wa-home-feed-item { position: relative; }
.wa-home-feed-cover { position: absolute; inset: 0; z-index: 1; border-radius: var(--wag-radius-12); text-decoration: none; }
.wa-home-feed-user .wa-user-link { position: relative; z-index: 2; }
/* Bird/Mammal badge is a label, not a target — let clicks fall through to the cover. */
.wa-home-feed-badge { pointer-events: none; }
/* ── Search: Google-style integrated dropdown (bar + panel = one piece) ──────
When the dropdown is open (JS adds .is-open on .wa-search) the bar squares its
bottom corners and the panel docks flush beneath it — no floating gap. The bar
keeps its border as a hairline divider; the panel drops its top border/radius. */
.wa-search.is-open .wa-search-bar {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.wa-search.is-open .wa-search-panel {
top: 100%;
margin-top: 0;
border-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
box-shadow: 0 24px 46px -6px rgba(20, 30, 45, .16);
}
/* Dark global topbar: same squared junction, keep the dark drop shadow. */
#wa-global-topbar .wa-search.is-open .wa-search-bar {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
#wa-global-topbar .wa-search.is-open .wa-search-panel {
box-shadow: 0 24px 52px -6px rgba(0, 0, 0, .5);
}
/* No inner scrollbar on the results (Marc) — stays scrollable, just no visible bar. */
.wa-search-panel { scrollbar-width: none; -ms-overflow-style: none; }
.wa-search-panel::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* Custom Trip — destination dropdown styled as a form field (full-width, matches
the other inputs; green focus, not the filter-pill blue). Uses the canonical
.wa-dropdown component so it's a real styled "desplegable", no native select. */
.wa-ct-dd { display: block; width: 100%; }
.wa-ct-dd .wa-dropdown-trigger {
display: flex; width: 100%; justify-content: flex-start; gap: var(--wag-space-8);
padding: 9px 12px; border: 1.5px solid #dde5ec; border-radius: var(--wag-radius-8);
font-size: 13.5px; font-weight: 500; color: var(--wag-type-filter-ct-ink, var(--wag-style-filter-ct-ink)); background: var(--wag-surface);
}
.wa-ct-dd .wa-dropdown-label { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-ct-dd .wa-dd-chevron { margin-left: auto; }
.wa .wa-ct-dd .wa-dropdown-trigger:hover { border-color: var(--wag-type-filter-ct-hover-line, var(--wag-style-filter-ct-hover-line)); color: var(--wag-type-filter-ct-hover-ink, var(--wag-style-filter-ct-hover-ink)); }
.wa-ct-dd.is-open .wa-dropdown-trigger { border-color: var(--wag-type-filter-ct-line, var(--wag-style-filter-ct-line)); box-shadow: var(--wag-type-filter-ct-shadow, var(--wag-style-filter-ct-shadow)); }
.wa-ct-dd .wa-dropdown-menu { left: 0; right: 0; width: auto; min-width: 0; max-width: none; }
html[data-theme="dark"] .wa-ct-dd .wa-dropdown-trigger { background: var(--wag-dark-surface); border-color: var(--wag-type-filter-ct-dark-line, var(--wag-style-filter-ct-dark-line)); color: var(--wag-dark-ink); }
/* ── WAPS-PAY — Payments (owner tab + admin card) · premium pass ──────────── */
.wa-owner-payments { display: flex; flex-direction: column; gap: 18px; }
.wa-pay-testbanner {
background: linear-gradient(135deg, #fff8e8, #fdf3d7);
border: 1px solid #ecd9a0; color: #7a5a12;
border-radius: 14px; padding: 12px 18px; font-size: var(--wag-text-13); font-weight: 600;
letter-spacing: .01em;
}
.wa-pay-notice { border-radius: 14px; padding: 12px 18px; font-size: var(--wag-text-14); font-weight: 600; }
.wa-pay-notice.is-ok { background: #eefaf3; border: 1px solid #bfe5cf; color: #1a5235; }
.wa-pay-notice.is-err { background: #fdf0ed; border: 1px solid #eac4ba; color: #8a3524; }
/* Condiciones para negocios — casilla antes de conectar un proveedor
(inc/owners/business-terms.php). Misma caja que .wa-pay-checklist; al
aceptar toma los colores de .wa-pay-notice.is-ok. */
.wa-biz-terms {
background: #f7f9fb; border: 1px solid #eef2f6; border-radius: 14px;
padding: 16px 20px;
}
.wa-biz-terms.is-accepted { background: #eefaf3; border-color: #bfe5cf; }
.wa-biz-terms-intro { margin: 0 0 10px; font-size: 13.5px; color: #3a4452; line-height: 1.55; }
.wa-biz-terms-check {
display: flex; align-items: flex-start; gap: 10px; margin: 0;
font-size: 13.5px; font-weight: 600; color: #3a4452; line-height: 1.5; cursor: pointer;
}
.wa-biz-terms-check input[type="checkbox"] {
flex-shrink: 0; width: 18px; height: 18px; margin: 1px 0 0; accent-color: #1a9a56;
}
.wa .wa-biz-terms-link,
.wa .wa-biz-terms-link:hover,
.wa .wa-biz-terms-link:focus,
.wa .wa-biz-terms-link:active { color: #1a6a3a; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.wa-biz-terms-msg:empty { display: none; }
.wa-biz-terms-msg { display: block; margin-top: 8px; font-size: 12.5px; font-weight: 600; color: #8a3524; }
.wa-biz-terms.is-accepted .wa-biz-terms-msg { color: #1a5235; }
.wa .wa-pay-connect-btn.is-terms-locked,
.wa .wa-pay-connect-btn:disabled { opacity: .45; cursor: not-allowed; }
/* Fees — panel de dos columnas tipográficas */
.wa-pay-fees-box {
display: flex; align-items: stretch; gap: 26px;
background: linear-gradient(180deg, #fbfcfd, #f5f8fa);
border: 1px solid #e6ecf1; border-radius: 18px;
padding: 22px 28px;
}
.wa-pay-fee-col { flex: 1; display: flex; flex-direction: column; gap: var(--wag-space-4); min-width: 0; }
.wa-pay-fee-divider { width: 1px; background: #e3e9ef; }
.wa-pay-fee-label {
font-size: var(--wag-text-11); font-weight: 700; text-transform: uppercase;
letter-spacing: .09em; color: #8a95a3;
}
.wa-pay-fee-value { font-size: 30px; font-weight: 800; color: #12271b; line-height: 1.1; }
.wa-pay-fee-value--text { font-size: 22px; line-height: 1.35; }
.wa-pay-fee-value small { font-size: var(--wag-text-16); font-weight: 700; color: #3a5a48; margin-left: 1px; }
.wa-pay-fee-note { font-size: 12.5px; color: #6a7684; line-height: 1.55; }
.wa-pay-fee-note a { color: #1a6a3a; font-weight: 600; text-decoration: none; white-space: nowrap; }
.wa .wa-pay-fee-note a:hover { text-decoration: underline; }
/* Cards */
.wa-pay-card {
background: var(--wag-surface); border: 1px solid #e8edf2; border-radius: 18px;
padding: 24px 28px; box-shadow: 0 1px 2px rgba(16, 24, 32, .04);
}
.wa-pay-card h3 { margin: 0 0 8px; font-size: 16.5px; font-weight: 800; color: #1a1e24; }
.wa-pay-card p { font-size: var(--wag-text-14); color: #4a5462; line-height: 1.65; margin: 0 0 10px; }
.wa-pay-card-head { display: flex; gap: var(--wag-space-16); align-items: flex-start; margin-bottom: 16px; }
.wa-pay-card-head h3 { margin-bottom: 4px; }
.wa-pay-sub { font-size: 13.5px; color: #6a7684; margin: 0 !important; }
.wa-pay-ico {
flex-shrink: 0; width: 44px; height: 44px; border-radius: 13px;
display: inline-flex; align-items: center; justify-content: center;
background: #eaf5ee; color: #1a6a3a;
}
.wa-pay-req { font-size: var(--wag-text-12); font-weight: 600; color: #8a95a3; }
/* Checklist — grid con checks verdes */
.wa-pay-checklist {
background: #f7f9fb; border: 1px solid #eef2f6; border-radius: 14px;
padding: 16px 20px; margin: 4px 0 14px;
}
.wa-pay-checklist-title {
display: block; font-size: var(--wag-text-12); font-weight: 700; text-transform: uppercase;
letter-spacing: .07em; color: #5a6572; margin-bottom: 10px;
}
.wa-pay-checklist-title em { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 600; color: #9aa5b1; }
.wa-pay-checklist-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; }
.wa-pay-check-item {
display: flex; align-items: center; gap: 9px;
font-size: 13.5px; color: #3a4452; line-height: 1.4;
}
.wa-pay-check-item svg { flex-shrink: 0; color: #1a9a56; }
.wa-pay-hint { font-size: 12.5px; color: #7a8592; }
.wa-pay-hint a { color: #1a6a3a; font-weight: 600; }
/* Connect CTA */
.wa-pay-connect-btn {
display: inline-flex; align-items: center; gap: 10px;
margin-top: 12px; padding: 13px 28px;
background: linear-gradient(135deg, #1e7a44, #14552f);
color: #fff !important;
border-radius: 13px; font-size: 15px; font-weight: 700;
text-decoration: none !important; line-height: 1;
box-shadow: 0 3px 12px rgba(20, 85, 47, .28);
transition: box-shadow .15s ease, transform .12s ease;
}
.wa .wa-pay-connect-btn:hover { transform: translateY(-1px); box-shadow: 0 5px 16px rgba(20, 85, 47, .34); color: #fff; }
.wa-pay-connect-btn svg { flex-shrink: 0; }
/* Connected state */
.wa-pay-status-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.wa-pay-acct {
background: #f0f3f6; border: 1px solid #e3e9ef; border-radius: 9px;
padding: 4px 10px; font-size: 12.5px; color: #4a5462; letter-spacing: .03em;
}
.wa-pay-fiscal { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 4px 0 16px; }
.wa-pay-field { display: flex; flex-direction: column; gap: 5px; font-size: var(--wag-text-12); font-weight: 700; color: #5a6572; text-transform: uppercase; letter-spacing: .05em; }
.wa-pay-field input {
padding: 11px 14px; border: 1px solid var(--wag-type-field-pay-line, var(--wag-style-field-pay-line)); border-radius: var(--wag-type-field-pay-radius, var(--wag-style-field-pay-radius));
font-size: 14.5px; font-weight: 500; color: var(--wag-type-field-pay-ink, var(--wag-style-field-pay-ink));
transition: border-color .15s ease, box-shadow .15s ease;
}
.wa-pay-field select {
min-height: 43px;
padding: 10px 38px 10px 14px;
border: 1px solid var(--wag-type-field-pay-line, var(--wag-style-field-pay-line));
border-radius: var(--wag-type-field-pay-radius, var(--wag-style-field-pay-radius));
background: var(--wag-surface);
color: var(--wag-type-field-pay-ink, var(--wag-style-field-pay-ink));
font-size: 14.5px;
font-weight: 500;
}
.wa .wa-pay-field input:focus,
.wa .wa-pay-field select:focus { outline: none; border-color: var(--wag-type-field-pay-focus-line, var(--wag-style-field-pay-focus-line)); box-shadow: var(--wag-type-field-pay-focus-shadow, var(--wag-style-field-pay-focus-shadow)); }
.wa-pay-field--currency { max-width: 420px; margin: 14px 0; }
.wa-pay-toggle { display: flex; align-items: flex-start; gap: var(--wag-space-12); font-size: var(--wag-text-14); color: #3a4452; cursor: pointer; line-height: 1.55; }
.wa-pay-toggle input { width: 19px; height: 19px; margin-top: 2px; accent-color: #1a6a3a; }
.wa-pay-toggle--sub { margin-top: 18px; padding-top: 16px; border-top: 1px solid #e3e9ef; }
.wa-pay-toggle--sub input:disabled { opacity: .45; cursor: not-allowed; }
.wa-pay-msg { font-size: var(--wag-text-13); margin-left: 8px; }
.wa-pay-provider-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--wag-space-12); margin: 16px 0 12px; }
.wa-pay-provider {
display: flex; align-items: center; gap: var(--wag-space-12); min-width: 0;
padding: 15px 16px; border: 1px solid #dfe6ec; border-radius: 13px;
background: var(--wag-surface); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.wa-pay-provider:hover { border-color: #91b9a2; }
.wa-pay-provider.is-selected { border-color: #1a6a3a; background: #f3faf6; box-shadow: 0 0 0 3px rgba(26,106,58,.08); }
.wa-pay-provider.is-disabled { opacity: .56; cursor: not-allowed; background: #f6f8fa; }
.wa-pay-provider input { flex: 0 0 auto; width: 18px; height: 18px; margin: 0; accent-color: #1a6a3a; }
.wa-pay-provider-copy { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 2px; }
.wa-pay-provider-copy strong { color: #1a1e24; font-size: var(--wag-text-14); }
.wa-pay-provider-copy small { color: #7a8592; font-size: 11.5px; line-height: 1.4; }
.wa-pay-provider-state { flex: 0 0 auto; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #1a6a3a; }
.wa-pay-provider.is-disabled .wa-pay-provider-state { color: #8a95a3; }
.wa-pay-disconnect {
background: none; border: 1px solid #e0b3a8; color: #8a3524; border-radius: 10px;
padding: 8px 16px; font-size: var(--wag-text-13); font-weight: 600; cursor: pointer; margin-top: 10px;
transition: background .15s ease;
}
.wa .wa-pay-disconnect:hover { background: #fdf0ed; }
/* Admin card (Control Center → Business) */
.wa-pay-admin { border-radius: 18px; }
.wa-pay-admin-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.wa-pay-admin-head .wa-feat-h { margin: 0; }
.wa-pay-admin-head .wa-pay-ico { width: 38px; height: 38px; border-radius: 11px; }
.wa-pay-admin-chips { display: flex; gap: var(--wag-space-8); flex-wrap: wrap; margin-left: auto; }
.wa-pay-admin-settings {
display: flex; gap: 26px; align-items: flex-end; flex-wrap: wrap;
background: #f7f9fb; border: 1px solid #eef2f6; border-radius: 14px; padding: 16px 20px;
}
.wa-pay-setting { display: flex; flex-direction: column; gap: 5px; }
.wa-pay-setting > label {
font-size: var(--wag-text-11); font-weight: 700; text-transform: uppercase;
letter-spacing: .07em; color: #5a6572;
}
.wa-pay-setting-input { display: flex; align-items: center; gap: 7px; }
.wa-pay-setting-input input {
width: 92px; padding: 9px 12px; border: 1px solid #dfe5ec; border-radius: 10px;
font-size: 15px; font-weight: 700; color: #1a1e24;
}
.wa .wa-pay-setting-input input:focus { outline: none; border-color: #1a6a3a; box-shadow: 0 0 0 3px rgba(26, 106, 58, .10); }
.wa-pay-unit { font-size: var(--wag-text-14); font-weight: 700; color: #6a7684; }
.wa-pay-setting small { font-size: 11.5px; color: #9aa5b1; }
.wa-pay-setting--action { flex-direction: row; align-items: center; gap: 10px; margin-left: auto; }
.wa-pay-setting--action span { font-size: var(--wag-text-13); }
.wa-pay-admin-foot { font-size: 12.5px; color: #8a95a3; line-height: 1.6; margin: 12px 2px 0; }
/* Connected accounts list (Marc, 2026-08-03 — go-live: ver y desconectar de un
vistazo las cuentas conectadas en modo test antes de que fallen en live). */
.wa-pay-connected-list { margin-top: 16px; border-top: 1px solid #eef2f6; padding-top: 14px; }
.wa-pay-connected-h {
font-size: var(--wag-text-12); font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
color: #5a6572; margin: 0 0 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.wa-pay-connected-row {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 9px 12px; border: 1px solid #eef2f6; border-radius: 10px; margin-bottom: 6px;
}
.wa-pay-connected-name { font-size: 13.5px; font-weight: 700; color: #1a1e24; margin-right: auto; }
.wa-pay-connected-name em { font-style: normal; font-weight: 500; color: #8a95a3; }
.wa-pay-connected-msg { font-size: var(--wag-text-12); color: #788596; }
@media (max-width: 700px) {
.wa-pay-fiscal, .wa-pay-checklist-grid,
.wa-pay-provider-grid{ grid-template-columns: 1fr; }
.wa-pay-fees-box { flex-direction: column; gap: 18px; padding: 20px 22px; }
.wa-pay-fee-divider { width: auto; height: 1px; }
.wa-pay-admin-chips,
.wa-pay-setting--action{ margin-left: 0; }
.wa-pay-connected-name { margin-right: 0; flex-basis: 100%; }
}
/* Dark mode */
html[data-theme="dark"] .wa-pay-card { background: var(--wag-dark-surface); border-color: #2a313a; box-shadow: var(--wag-shadow-14); }
html[data-theme="dark"] .wa-pay-card h3 { color: var(--wag-dark-ink); }
html[data-theme="dark"] .wa-pay-fees-box { background: #171c22; border-color: #2a313a; }
html[data-theme="dark"] .wa-pay-fee-value { color: #e8f2ec; }
html[data-theme="dark"] .wa-pay-fee-divider { background: #2a313a; }
html[data-theme="dark"] .wa-pay-checklist,
html[data-theme="dark"] .wa-pay-admin-settings { background: #12161b; border-color: #2a313a; }
html[data-theme="dark"] .wa-pay-check-item { color: #b8c2cc; }
html[data-theme="dark"] .wa-biz-terms { background: #12161b; border-color: #2a313a; }
html[data-theme="dark"] .wa-biz-terms-intro,
html[data-theme="dark"] .wa-biz-terms-check { color: #b8c2cc; }
html[data-theme="dark"] .wa .wa-biz-terms-link,
html[data-theme="dark"] .wa .wa-biz-terms-link:hover,
html[data-theme="dark"] .wa .wa-biz-terms-link:focus,
html[data-theme="dark"] .wa .wa-biz-terms-link:active { color: #8fcf6e; }
html[data-theme="dark"] .wa-pay-field input,
html[data-theme="dark"] .wa-pay-field select,
html[data-theme="dark"] .wa-pay-setting-input input { background: var(--wag-type-field-pay-dark-bg, var(--wag-style-field-pay-dark-bg)); border-color: var(--wag-type-field-pay-dark-line, var(--wag-style-field-pay-dark-line)); color: var(--wag-dark-ink); }
html[data-theme="dark"] .wa-pay-acct { background: #12161b; border-color: #2a313a; color: #b8c2cc; }
html[data-theme="dark"] .wa-pay-ico { background: #16281e; color: #58c98a; }
html[data-theme="dark"] .wa-pay-provider { background: #12161b; border-color: #2a313a; }
html[data-theme="dark"] .wa-pay-provider.is-selected { background: #16281e; border-color: #3b8f5e; }
html[data-theme="dark"] .wa-pay-provider.is-disabled { background: #171c22; }
html[data-theme="dark"] .wa-pay-provider-copy strong { color: var(--wag-dark-ink); }
/* ── WAPS-PAY S4 — cancellation policy (product line + owner selector) ─────── */
.wa-cancel-policy {
display: flex; gap: 9px; align-items: flex-start;
margin-top: 14px; padding: 12px 16px;
background: #f4f8fb; border: 1px solid #dfeaf3; border-radius: var(--wag-radius-12);
font-size: var(--wag-text-13); color: #45525f; line-height: 1.6;
}
.wa-cancel-policy svg { flex-shrink: 0; margin-top: 3px; color: #2b7cb0; }
.wa-cancel-policy strong { color: #1f2a36; font-weight: 700; }
.wa-cancel-dates { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.wa-cancel-dates[hidden] { display: none; }
.wa-cancel-dates-line { font-weight: 600; color: #1f2a36; }
.wa-cancel-dates-line.is-free { color: #1a6a3a; }
.wa-cancel-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--wag-space-12); }
.wa-cancel-option {
display: flex; flex-direction: column; gap: 6px; cursor: pointer;
border: 1.5px solid #e3e9ef; border-radius: 14px; padding: 14px 16px;
transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.wa .wa-cancel-option:hover { border-color: #b9d5c6; }
.wa-cancel-option.is-active {
border-color: #1a6a3a; background: #f4faf6;
box-shadow: 0 0 0 3px rgba(26, 106, 58, .08);
}
.wa-cancel-option { position: relative; }
.wa-cancel-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wa-cancel-option-label { font-size: var(--wag-text-14); font-weight: 800; color: #1a1e24; }
.wa-cancel-option.is-active .wa-cancel-option-label { color: #14552f; }
.wa-cancel-option-text { font-size: var(--wag-text-12); color: #6a7684; line-height: 1.55; }
@media (max-width: 700px) { .wa-cancel-options { grid-template-columns: 1fr; } }
html[data-theme="dark"] .wa-cancel-policy { background: #17202a; border-color: #2a3947; color: #c3ccd5; }
html[data-theme="dark"] .wa-cancel-policy svg { color: #7fc0e6; }
html[data-theme="dark"] .wa-cancel-policy strong,
html[data-theme="dark"] .wa-cancel-dates-line{ color: var(--wag-dark-ink); }
html[data-theme="dark"] .wa-cancel-dates-line.is-free { color: #7fd3a0; }
html[data-theme="dark"] .wa-cancel-option { border-color: #2a313a; }
html[data-theme="dark"] .wa-cancel-option.is-active { background: #16281e; border-color: #2e7d52; }
html[data-theme="dark"] .wa-cancel-option-label { color: var(--wag-dark-ink); }
/* ── WAPS-PAY S5 — refund inline form (owner booking rows) ─────────────────── */
.wa-bk-refund-form {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
margin-top: 10px; padding: 12px 14px;
background: #fffaf0; border: 1px solid #ecd9a0; border-radius: var(--wag-radius-12);
font-size: var(--wag-text-13);
}
.wa-bk-refund-form label { display: flex; align-items: center; gap: var(--wag-space-8); font-weight: 600; color: #5a4a1a; }
.wa-bk-refund-form input {
width: 110px; padding: 8px 10px; border: 1px solid #dfd0a8; border-radius: 9px; font-size: var(--wag-text-14);
}
html[data-theme="dark"] .wa-bk-refund-form { background: #241f12; border-color: #4a3f1e; }
html[data-theme="dark"] .wa-bk-refund-form label { color: #d8c88a; }
html[data-theme="dark"] .wa-bk-refund-form input { background: #12161b; border-color: #4a3f1e; color: var(--wag-dark-ink); }
/* ── WAPS-PAY S7 — DAC7 report card ────────────────────────────────────────── */
.wa-dac7 { margin-top: 16px; border-radius: 18px; }
.wa-dac7-year select {
padding: 8px 12px; border: 1px solid #dfe5ec; border-radius: 10px;
font-size: var(--wag-text-14); font-weight: 700; color: #1a1e24;
}
.wa-dac7-tablewrap { overflow-x: auto; margin-top: 6px; }
.wa-dac7-table { width: 100%; border-collapse: collapse; font-size: var(--wag-text-13); }
.wa-dac7-table th {
text-align: left; padding: 9px 12px; background: #12171e; color: #fff;
font-size: var(--wag-text-11); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap;
}
.wa-dac7-table th:first-child { border-radius: 10px 0 0 0; }
.wa-dac7-table th:last-child { border-radius: 0 10px 0 0; }
.wa-dac7-table td { padding: 9px 12px; border-bottom: 1px solid #eef1f4; vertical-align: top; }
.wa-dac7-table small { color: #8a95a3; }
.wa-dac7-miss { color: #b3422b; font-weight: 700; font-size: var(--wag-text-12); }
.wa-dac7-holes {
margin-top: 14px; padding: 12px 16px; background: #fff7e6;
border: 1px solid #ecd9a0; border-radius: var(--wag-radius-12); font-size: var(--wag-text-13); color: #7a5a12; line-height: 1.6;
}
html[data-theme="dark"] .wa-dac7-table td { border-color: #2a313a; }
html[data-theme="dark"] .wa-dac7-holes { background: #241f12; border-color: #4a3f1e; color: #d8c88a; }
html[data-theme="dark"] .wa-dac7-year select { background: #12161b; border-color: #2a313a; color: var(--wag-dark-ink); }
/* DAC7 CSV export button */
.wa-dac7-csv {
display: inline-flex; align-items: center; gap: var(--wag-space-8); margin-left: auto;
padding: 10px 20px; background: #12171e; color: #fff !important;
border-radius: 11px; font-size: 13.5px; font-weight: 700;
text-decoration: none !important; line-height: 1;
transition: background .15s ease, transform .1s ease;
}
.wa .wa-dac7-csv:hover { background: #2a3542; color: #fff; transform: translateY(-1px); }
.wa-dac7-csv svg { flex-shrink: 0; }
html[data-theme="dark"] .wa-dac7-csv { background: #2e7d52; }
html[data-theme="dark"] .wa-dac7-csv:hover { background: #1a6a3a; }
/* Enlaces de texto de la tarjeta (excluir / deshacer / eliminar): todos los
estados declarados para que Astra no pinte su a:hover. */
.wa .wa-dac7-link,
.wa .wa-dac7-link:visited,
.wa .wa-dac7-link:focus { color: #2b7cb0; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; background: none; }
.wa .wa-dac7-link:hover,
.wa .wa-dac7-link:active { color: #1f5f8a; text-decoration: underline; background: none; }
.wa .wa-dac7-link--danger,
.wa .wa-dac7-link--danger:visited,
.wa .wa-dac7-link--danger:focus { color: #c0392b; }
.wa .wa-dac7-link--danger:hover,
.wa .wa-dac7-link--danger:active { color: #962d22; }
html[data-theme="dark"] .wa .wa-dac7-link { color: #7fc0e6; }
html[data-theme="dark"] .wa .wa-dac7-link--danger { color: #f08a7e; }
/* ── WAPS-PAY QA fixes ─────────────────────────────────────────────────────── */
/* QA-5: [hidden] pisado por display:flex (gotcha documentado) */
.wa-bk-refund-form[hidden] { display: none; }
/* QA-3: chip de mensajes nuevos en el hilo */
/* nowrap + flex-shrink: como hijo flex de la fila del hilo se encogía hasta
partir "● New" en dos líneas, y el chip se leía como un borrón redondo
encima del borde de la tarjeta (Marc, 2026-09-13). */
.wa-bk-newmsg {
display: inline-block; margin-left: 8px; padding: 2px 10px;
white-space: nowrap; flex-shrink: 0;
background: #e8443a; color: #fff; border-radius: var(--wag-radius-999);
font-size: var(--wag-text-11); font-weight: 800; letter-spacing: .02em;
}
/* ── Host instructions (accept form + destacado en reserva) ────────────────── */
.wa-bk-accept-form {
margin-top: 10px; padding: 14px 16px;
background: #f4faf6; border: 1px solid #cfe5d7; border-radius: var(--wag-radius-12);
font-size: var(--wag-text-13);
}
.wa-bk-accept-form[hidden] { display: none; }
.wa-bk-accept-form label { display: block; font-weight: 700; color: #1a5235; margin-bottom: 8px; }
.wa-bk-accept-form label em { font-weight: 500; color: #7a8592; font-style: normal; }
.wa-bk-accept-form textarea {
display: block; width: 100%; margin-top: 6px; padding: 10px 12px;
border: 1px solid #cfe0d5; border-radius: 10px; font-size: var(--wag-text-14); resize: vertical;
}
.wa .wa-bk-accept-form textarea:focus { outline: none; border-color: #1a6a3a; box-shadow: 0 0 0 3px rgba(26,106,58,.1); }
.wa-bk-hostnote {
margin-top: 10px; padding: 12px 16px;
background: #fff8e6; border: 1px solid #ecd9a0; border-radius: var(--wag-radius-12);
font-size: 13.5px; color: #4a3a10; line-height: 1.6; flex-basis: 100%;
}
.wa-bk-hostnote-title {
display: block; font-size: var(--wag-text-11); font-weight: 800; text-transform: uppercase;
letter-spacing: .06em; color: #7a5a12; margin-bottom: 4px;
}
html[data-theme="dark"] .wa-bk-accept-form { background: #16281e; border-color: #2e5540; }
html[data-theme="dark"] .wa-bk-accept-form textarea { background: #12161b; border-color: #2e5540; color: var(--wag-dark-ink); }
html[data-theme="dark"] .wa-bk-hostnote { background: #241f12; border-color: #4a3f1e; color: #d8c88a; }
/* ── Owner Dashboard nav dropdown ────────────────────────────────────────────
Reuses the Control Center / profile .wa-nav-group pattern so Team/Analytics/
Reviews collapse into one "Manage" dropdown (row no longer overflows once
Payments was added). Menu is right-aligned since the group sits last. */
body.wa-owner .wa-nav-group { position: relative; }
body.wa-owner .wa-nav-caret { opacity: .7; margin-left: 1px; }
body.wa-owner .wa-nav-menu {
position: absolute; top: calc(100% + 4px); right: 0; left: auto; z-index: 50; min-width: 210px;
background: var(--wag-surface); border: 1px solid var(--wa-line); border-radius: var(--wag-radius-12); padding: 6px;
box-shadow: var(--wag-shadow-7);
opacity: 0; visibility: hidden; transform: translateY(-4px);
transition: opacity .14s, transform .14s, visibility .14s;
}
body.wa-owner .wa-nav-group:hover .wa-nav-menu,
body.wa-owner .wa-nav-group:focus-within .wa-nav-menu { opacity: 1; visibility: visible; transform: translateY(0); }
body.wa-owner .wa-nav-item {
display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 9px;
color: #44505c; font-size: 13.5px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
body.wa-owner .wa-nav-item .wa-tab-ico { color: var(--wa-accent); opacity: .9; }
body.wa-owner .wa-nav-item:hover { background: #f3f6f9; color: var(--wa-ink); }
body.wa-owner .wa-nav-item.is-active { background: #eaf3ee; color: var(--wa-accent); }
body.wa-owner .wa-nav-item .wa-tab-dot { position: static; margin-left: auto; }
html[data-theme="dark"] body.wa-owner .wa-nav-menu { background: var(--wag-type-nav-menu-dark-bg, var(--wag-style-nav-menu-dark-bg)); border-color: var(--wag-type-nav-menu-dark-line, var(--wag-style-nav-menu-dark-line)); }
html[data-theme="dark"] body.wa-owner .wa-nav-item { color: #ccd3da; }
html[data-theme="dark"] body.wa-owner .wa-nav-item:hover { background: #6b7280; color: var(--wa-ink); }
/* Control Center — mismo punto rojo que el Owner Dashboard, en el nav interno
(Marc, 2026-07-28): el punto de "Control Center" en el menú de cuenta ya
avisaba de que HABÍA algo pendiente, pero no decía DÓNDE — había que entrar
a mirar las 9 colas una por una. Reutiliza .wa-tab-dot alineado al borde
derecho del item, igual que ya hace el Owner Dashboard. */
body.wa-admin .wa-owner-tab .wa-tab-dot { position: static; margin-left: 2px; width: 7px; height: 7px; border-radius: 50%; background: var(--wa-attention, #e0392b); box-shadow: var(--wag-shadow-14); }
body.wa-admin .wa-nav-item .wa-tab-dot { position: static; margin-left: auto; }
/* ── Modal de confirmación WildAtlas (cancel booking + reutilizable) ───────── */
.wa-bkmodal-overlay {
position: fixed; inset: 0; z-index: 99999;
background: rgba(14, 24, 18, .45); backdrop-filter: blur(3px);
display: flex; align-items: center; justify-content: center; padding: 20px;
opacity: 0; transition: opacity .18s ease;
}
.wa-bkmodal-overlay.is-in { opacity: 1; }
.wa-bkmodal {
background: var(--wag-surface); border-radius: var(--wag-radius-20); max-width: 420px; width: 100%;
padding: 30px 30px 24px; text-align: center;
box-shadow: 0 18px 50px rgba(10, 24, 16, .28);
transform: translateY(10px) scale(.97); transition: transform .18s ease;
}
.wa-bkmodal-overlay.is-in .wa-bkmodal { transform: none; }
.wa-bkmodal-ico {
width: 54px; height: 54px; border-radius: 50%; margin: 0 auto 14px;
display: flex; align-items: center; justify-content: center;
}
.wa-bkmodal-ico.is-ok { background: #eefaf3; color: #1a7a4a; }
.wa-bkmodal-ico.is-warn { background: #fff7e6; color: #b07a12; }
.wa-bkmodal-ico.is-bad { background: #fdf0ed; color: #c0432b; }
.wa-bkmodal-ico.is-neutral { background: #f0f4f8; color: #4a5a6a; }
.wa-bkmodal-title { margin: 0 0 8px; font-size: 19px; font-weight: 800; color: #12271b; }
.wa-bkmodal-line { margin: 0 0 6px; font-size: 14.5px; line-height: 1.6; color: #3a4452; }
.wa-bkmodal-note { margin: 0; font-size: 12.5px; color: #9aa5b1; }
.wa-bkmodal-btns { display: flex; gap: 10px; margin-top: 20px; }
.wa-bkmodal-btns button {
flex: 1; padding: 12px 10px; border-radius: var(--wag-radius-12); font-size: 14.5px;
font-weight: 700; cursor: pointer; border: none;
transition: filter .12s ease, transform .1s ease;
}
/* El overlay cuelga de document.body (bookings.js), no de .wa: el
`.wa ` de delante nunca casaba y el hover no hacía nada. Astra trae un
`button:hover { background-color: rgba(...,0) }` del customizer con más
elementos en el selector (misma cuenta de clases, +1 elemento), que en
empate de clases GANA por columna de elemento — volvía blanco el botón.
Un ":hover" propio por botón (dos clases) le gana sin depender del padre. */
.wa-bkmodal-btns button:hover { filter: brightness(.95); transform: translateY(-1px); }
.wa-bkmodal-keep { background: #eef2f5; color: #2a3542; }
.wa-bkmodal-go { background: #c0432b; color: #fff; }
.wa-bkmodal-keep:hover { background: #eef2f5; color: #2a3542; }
.wa-bkmodal-go:hover { background: #c0432b; color: #fff; }
@media (max-width: 480px) { .wa-bkmodal-btns { flex-direction: column-reverse; } }
html[data-theme="dark"] .wa-bkmodal { background: var(--wag-dark-surface); }
html[data-theme="dark"] .wa-bkmodal-title { color: var(--wag-dark-ink); }
html[data-theme="dark"] .wa-bkmodal-line { color: #b8c2cc; }
html[data-theme="dark"] .wa-bkmodal-keep { background: #2a313a; color: #d5dbe2; }
/* Archivar una reserva pasada. Discreto a propósito: es limpieza, no una acción
destacada, y no debe competir con los botones de una reserva viva. */
.wa-bk-hide {
margin-left: auto;
padding: 4px 10px;
border: 1px solid var(--wa-line, #e4eae6);
border-radius: var(--wag-radius-999);
background: transparent;
color: #6b7a72;
font-size: var(--wag-text-12); font-weight: 600;
cursor: pointer;
transition: background .15s ease, color .15s ease;
}
.wa .wa-bk-hide:hover { background: #f2f5f3; color: #16281e; }
/* Aviso del panel de propietario ("Proposal sent!", etc.).
Antes iba con estilos en línea dentro de un echo suelto: no se podía adaptar
al modo oscuro y salía fuera del contenedor. */
.wa-owner-notice {
margin-bottom: 16px;
padding: 12px 16px;
border: 1px solid #2aab66;
border-radius: 10px;
background: #eefaf3;
color: #1a5235;
font-size: var(--wag-text-14);
line-height: 1.45;
}
html[data-theme="dark"] .wa-owner-notice {
background: rgba(42,171,102,.10);
border-color: rgba(42,171,102,.45);
color: #7fd6a4;
}
/* Acción de Custom Trip ya realizada: visible pero apagada.
Se deja a la vista en vez de ocultarla para que el propietario vea QUE se
envió; ocultarla dejaría el hueco y la duda de si llegó a salir. */
.wa-ct-btn--off,
.wa-ct-btn[disabled] {
background: #eef1ef !important;
color: #8b968f !important;
border: 1px solid #dfe5e1;
cursor: not-allowed;
pointer-events: none;
}
/* Retirar una propuesta: acción destructiva, pero secundaria.
En rojo suave y no en sólido — compite con Editar propuesta, que es lo que se
quiere que se pulse casi siempre. */
.wa-ct-cancel-proposal {
background: #fff0ee;
color: #b3422b;
border: 1px solid #f0cdc6;
}
.wa .wa-ct-cancel-proposal:hover:not(:disabled) { background: #ffe4df; }
/* ════════════════════════════════════════════════════════════════════════════
ASTRA: matar el hover blanco de una vez
════════════════════════════════════════════════════════════════════════════
Astra trae DOS reglas con el selector de elemento `button:hover` (main.min.css
y su CSS dinámico en línea) que pintan `color: #fff`. Al ser un selector de
elemento se aplica a TODOS los botones del sitio, y cualquier botón nuestro
que no declare su propio :hover se queda con el texto blanco — invisible sobre
fondo claro.
Hasta ahora se venía parcheando componente a componente: hay al menos cinco
sitios en este fichero con selectores prefijados por ID o !important solo para
ganarle a esta regla. Esto lo ataja en el origen.
POR QUÉ `inherit` Y NO UN COLOR FIJO
Marc propuso cambiar el blanco por otro color de una vez. Medido en la web:
NUEVE componentes tienen texto claro sobre fondo oscuro a propósito
(wa-report-send blanco sobre rojo, wa-account-menu-close blanco sobre azul,
wa-form-submit blanco sobre casi negro, la burbuja de chat…). A esos el blanco
de Astra les acierta de casualidad, y un color oscuro global los dejaría
ilegibles. `inherit` hace que cada botón conserve el color de su contexto en
lugar de imponer uno.
`:where()` es la pieza clave: aporta CERO especificidad, así que esta regla
pesa lo mismo que la de Astra (0,1,1) y gana solo por ir después. Cualquier
componente con su propio `.wa-algo:hover` (0,1,0 + pseudo) la sigue pisando,
que es justo lo que se quiere: esto es una red de seguridad, no una imposición.
*/
button:where([class*="wa-"]):hover,
button:where([class*="wa-"]):focus,
a:where([class*="wa-"]):hover,
a:where([class*="wa-"]):focus {
color: inherit;
}
/* Legacy templates with no `.wa-*` class are handled by the small runtime
guard above. It only marks controls proven to have become white on a light
background, so intended white text on dark CTA buttons is never flattened. */
.wa :where(a, button, input[type="submit"], input[type="button"], input[type="reset"])[data-wa-hover-guard]:where(:hover, :focus, :focus-visible) {
color: var(--wa-hover-guard-color);
-webkit-text-fill-color: var(--wa-hover-guard-color);
}
/* Los que SÍ deben seguir en blanco: texto claro sobre fondo oscuro propio.
Lista medida sobre la web, no supuesta. Al declarar el color explícitamente
dejan de depender de que Astra acierte por casualidad. */
.wa-form-submit:not(.wag-btn):hover, .wa-form-submit:not(.wag-btn):focus,
.wa-chat-launcher:hover, .wa-chat-launcher:focus,
.wa-chat-dismiss:hover, .wa-chat-dismiss:focus,
.wa-chat-back:hover, .wa-chat-back:focus,
.wa-chat-close:hover, .wa-chat-close:focus,
.wa-report-send:hover, .wa-report-send:focus,
.wa-account-menu-close:hover, .wa-account-menu-close:focus,
.wa .wa-contact-send:hover,
.wa .wa-contact-send:focus {
color: var(--wag-type-ficha-form-submit-hover-ink, var(--wag-style-ficha-form-submit-hover-ink));
}
/* ── SEO answer block (species /hotspots/ money pages) ─────────────────────── */
/* Mismas medidas de caja que .wa-subsp (Marc, 2026-07-26: "que no tenga cada
cosa un margen distinto"). Antes iba a max-width:820px centrado, así que en
escritorio quedaba más estrecho y descentrado respecto al resto de bloques.
Solo cambia la CAJA; los colores siguen siendo los suyos. */
.wa-seo-answer {
margin: 0 0 18px; padding: 14px 16px;
background: var(--wag-type-seo-answer-bg, var(--wag-style-seo-answer-bg)); border: 1px solid var(--wag-type-seo-answer-line, var(--wag-style-seo-answer-line)); border-radius: var(--wag-type-seo-answer-radius, var(--wag-style-seo-answer-radius));
}
.wa-seo-answer h2 {
margin: 0 0 8px; font-size: 19px; font-weight: 800; color: #12271b;
}
.wa-seo-answer p { margin: 0; font-size: 15px; line-height: 1.7; color: #3a4452; }
.wa-seo-answer a { color: #1a6a3a; font-weight: 600; text-decoration: none; }
.wa .wa-seo-answer a:hover { text-decoration: underline; }
html[data-theme="dark"] .wa-seo-answer { background: var(--wag-type-seo-answer-dark-bg, var(--wag-style-seo-answer-dark-bg)); border-color: var(--wag-type-seo-answer-dark-line, var(--wag-style-seo-answer-dark-line)); }
html[data-theme="dark"] .wa-seo-answer h2 { color: var(--wag-dark-ink); }
html[data-theme="dark"] .wa-seo-answer p { color: #b8c2cc; }
/* ── Especies aportadas por la comunidad (Report Species) ──────────────────── */
/* Badge sobre la tarjeta del grid de temporada: la especie está VIVA y visible
al instante (modelo Wikipedia), marcada como pendiente hasta que un editor la
verifique. */
.species-season-comm {
position: absolute;
top: 8px; left: 8px;
z-index: 2;
padding: 3px 9px;
border-radius: var(--wag-radius-999);
background: rgba(20, 30, 45, .72);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
color: #cfe3ff;
font-size: 10.5px; font-weight: 800;
letter-spacing: .04em; text-transform: uppercase;
}
.species-season-card--community .species-season-image { position: relative; }
/* Borde sutil para reforzar que es una aportación pendiente, sin gritar. */
.species-season-card--community { box-shadow: inset 0 0 0 1.5px rgba(90, 140, 200, .28); border-radius: 14px; }
/* ── Cola de validación (Control Center → Community) ───────────────────────── */
.wa-season-admin { }
.wa-scq-title { margin: 0 0 4px; font-size: var(--wag-text-16); font-weight: 800; color: #16281e; }
.wa-scq-intro { margin: 0 0 14px; color: #6b7683; font-size: var(--wag-text-13); line-height: 1.5; }
.wa-scq-empty { color: #8a95a3; padding: 18px 0; }
.wa-season-tab {
font-weight: 700; cursor: pointer;
transition: background .15s, color .15s, border-color .15s;
}
.wa .wa-season-tab:hover { background: #f2f5f3; }
.wa-season-tab.is-active { background: #14552f; color: #fff; border-color: #14552f; }
.wa-scq-table { width: 100%; border-collapse: collapse; font-size: var(--wag-text-13); }
.wa-scq-cell { padding: 12px 10px; }
.wa-scq-table tr { border-top: 1px solid #eef1f4; }
.wa-scq-table tr:first-child { border-top: 0; }
.wa-scq-cell strong { color: #16281e; }
.wa-scq-cell a { color: #1a6a3a; text-decoration: none; }
.wa .wa-scq-cell a:hover { text-decoration: underline; }
.wa-scq-meta { color: #8a95a3; font-size: var(--wag-text-12); }
.wa-scq-note { color: #6b7683; }
.wa-scq-actions { padding: 12px 10px; text-align: right; white-space: nowrap; }
.wa-scq-btn {
padding: 6px 13px; margin-left: 6px; border: 1px solid transparent; border-radius: var(--wag-radius-8);
font-size: 12.5px; font-weight: 700; cursor: pointer; transition: filter .15s, background .15s;
}
.wa-scq-btn:disabled { opacity: .5; cursor: default; }
.wa-scq-btn--ok { background: #e7f6ee; color: #1a7a44; border-color: #bfe6cf; }
.wa .wa-scq-btn--ok:hover:not(:disabled) { background: #d6efe0; }
.wa-scq-btn--warn { background: #fff6e5; color: #a5730a; border-color: #f0dcae; }
.wa .wa-scq-btn--warn:hover:not(:disabled) { background: #ffeecb; }
.wa-scq-btn--danger { background: #fdecea; color: #b3392b; border-color: #f2cec8; }
.wa .wa-scq-btn--danger:hover:not(:disabled) { background: #fbdcd7; }
/* ── Chip de subespecies (ficha de especie) ────────────────────────────────── */
/* La especie principal actúa de nodo; las subespecies son chips clicables. Va
encima de la descripción, discreto pero presente. */
.wa-subsp {
margin: 0 0 18px;
padding: 16px;
background: var(--wag-type-subsp-bg, var(--wag-style-subsp-bg));
border: 1px solid var(--wag-type-subsp-line, var(--wag-style-subsp-line));
border-radius: var(--wag-type-subsp-radius, var(--wag-style-subsp-radius));
}
.wa-subsp-head {
display: flex; align-items: center; gap: 7px;
font-size: var(--wag-text-13); color: var(--wag-type-subsp-head-ink, var(--wag-style-subsp-head-ink)); margin-bottom: 10px;
}
.wa-subsp-head svg { color: #7a9ab5; flex: 0 0 auto; }
.wa-subsp-head strong { color: #1a2a38; font-weight: 700; }
.wa-subsp-head a { color: inherit; text-decoration: none; }
.wa .wa-subsp-head a:hover { text-decoration: underline; }
.wa-subsp-chips { display: flex; flex-wrap: wrap; gap: var(--wag-space-8); }
.wa-subsp-chip {
display: inline-flex; align-items: center;
padding: 6px 13px; border-radius: var(--wag-radius-999);
background: var(--wag-surface); border: 1px solid var(--wag-type-subsp-chip-line, var(--wag-style-subsp-chip-line));
font-size: var(--wag-text-13); font-weight: 600; color: var(--wag-type-subsp-chip-ink, var(--wag-style-subsp-chip-ink));
text-decoration: none; cursor: pointer;
transition: background .15s, border-color .15s, transform .12s;
}
.wa .wa-subsp-chip:hover { background: var(--wag-type-subsp-chip-hover-bg, var(--wag-style-subsp-chip-hover-bg)); border-color: var(--wag-type-subsp-chip-hover-line, var(--wag-style-subsp-chip-hover-line)); transform: translateY(-1px); }
.wa-subsp-chip--current {
background: #1a4a67; border-color: #1a4a67; color: #fff;
cursor: default; pointer-events: none;
}
html[data-theme="dark"] .wa-subsp {
background: var(--wag-type-subsp-dark-bg, var(--wag-style-subsp-dark-bg)); border-color: var(--wag-type-subsp-dark-line, var(--wag-style-subsp-dark-line));
}
html[data-theme="dark"] .wa-subsp-head strong { color: #e8eef3; }
html[data-theme="dark"] .wa-subsp-chip {
background: var(--wag-type-subsp-chip-dark-bg, var(--wag-style-subsp-chip-dark-bg)); border-color: var(--wag-type-subsp-chip-dark-line, var(--wag-style-subsp-chip-dark-line)); color: var(--wag-type-subsp-chip-dark-ink, var(--wag-style-subsp-chip-dark-ink));
}
html[data-theme="dark"] .wa-subsp-chip--current { background: #2f6690; border-color: #2f6690; color: #fff; }
/* ── Aviso: hotspot sin Featured Image (Owner Dashboard) ───────────────────── */
/* Alta prioridad: un hotspot sin imagen rompe cards y héroes. Rojo, con acción
directa a "Manage content". */
.wa-owner-card--needimg { border-color: #f0c4bd; box-shadow: 0 0 0 1px #f0c4bd inset; }
.wa-owner-needimg {
display: flex; align-items: center; gap: var(--wag-space-8);
margin: 8px 0 4px;
padding: 9px 12px;
border-radius: var(--wag-type-owner-needimg-radius, var(--wag-style-owner-needimg-radius));
background: var(--wag-type-owner-needimg-bg, var(--wag-style-owner-needimg-bg));
border: 1px solid var(--wag-type-owner-needimg-line, var(--wag-style-owner-needimg-line));
color: var(--wag-type-owner-needimg-ink, var(--wag-style-owner-needimg-ink));
font-size: 12.5px; font-weight: 600; line-height: 1.35;
text-decoration: none;
transition: background .15s;
}
.wa .wa-owner-needimg:hover { background: var(--wag-type-owner-needimg-hover-bg, var(--wag-style-owner-needimg-hover-bg)); }
.wa-owner-needimg svg { flex: 0 0 auto; color: #d0453a; }
html[data-theme="dark"] .wa-owner-needimg {
background: var(--wag-type-owner-needimg-dark-bg, var(--wag-style-owner-needimg-dark-bg)); border-color: var(--wag-type-owner-needimg-dark-line, var(--wag-style-owner-needimg-dark-line)); color: var(--wag-type-owner-needimg-dark-ink, var(--wag-style-owner-needimg-dark-ink));
}
html[data-theme="dark"] .wa-owner-card--needimg { border-color: rgba(214,64,54,.4); box-shadow: 0 0 0 1px rgba(214,64,54,.4) inset; }
/* Subespecie sin ficha propia (viene de iNaturalist): informa, no navega. */
.wa-subsp-chip--plain {
background: var(--wag-type-subsp-chip--plain-bg, var(--wag-style-subsp-chip--plain-bg)); color: var(--wag-type-subsp-chip--plain-ink, var(--wag-style-subsp-chip--plain-ink)); border-style: dashed; cursor: default;
}
.wa .wa-subsp-chip--plain:hover { transform: none; background: var(--wag-type-subsp-chip--plain-hover-bg, var(--wag-style-subsp-chip--plain-hover-bg)); border-color: var(--wag-type-subsp-chip--plain-hover-line, var(--wag-style-subsp-chip--plain-hover-line)); }
/* .wa-subsp-chip es inline-flex, así que el atributo hidden NO oculta por sí
solo: hace falta esta regla o las subespecies "escondidas" se ven igual.
(Misma trampa documentada en CLAUDE.md para el overlay de auth y el alta de
listas — es la tercera vez.) */
.wa-subsp-chip[hidden] { display: none; }
/* "+N more" es un