/* =============================================================
   COUNTRY — single-country.php
   ============================================================= */

.country-container {
    width: 100%;
    margin: auto;
    padding-top: 0;
}

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

/* ── Legal pages (Privacy, Terms) ───────────────────────────────────────── */
.legal-container {
    width: 100%;
    margin: auto;
    padding-top: 0;
}
.legal-card {
    background: var(--wag-surface);
    min-height: 70vh;
    padding: 0 20px 20px;
}

/* ── About page ─────────────────────────────────────────────────────────── */
.about-container {
    width: 100%;
    margin: auto;
    padding-top: 0;
}
.about-card {
    background: var(--wag-surface);
    min-height: 70vh;
}
.about-card .about-topbar { overflow: visible; }

.country-title {
    font-size: 72px;
    font-weight: 800;
    letter-spacing: -2px;
    line-height: 0.95;
    color: #111;
    margin-bottom: 18px;
    text-transform: capitalize;
}

.country-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 60px;
}

.country-description {
    font-size: var(--wag-text-18);
    line-height: 1.8;
    color: #333;
    margin-bottom: 80px;
}

/* Hero */

.country-hero-banner {
    position: relative;
    margin-left: -20px;
    margin-right: -20px;
    height: 550px;
    overflow: hidden;
    margin-top: 0 !important;
}

.country-hero-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.country-hero-overlay {
    position: absolute;
    inset: 0;
    background: var(--wag-type-country-hero-overlay-bg, var(--wag-style-country-hero-overlay-bg));
}

.country-hero-content {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 0 45px 48px;
    text-align: left;
}

.country-hero-content .country-title {
    margin: 0 0 10px;
    color: var(--wag-type-country-title-ink, var(--wag-style-country-name-ink));
    font-size: var(--wa-species-title-size, clamp(42px, 5vw, 72px));
    line-height: 0.92;
    font-weight: 800;
    letter-spacing: -2px;
    max-width: 75%;
    text-wrap: balance;
    text-shadow: 0 3px 20px rgba(0,0,0,0.5);
}

.country-hero-content .country-meta {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    margin: 0;
    text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}

.country-hero-content .scientific-name {
    color: var(--wag-type-scientific-name-ink, var(--wag-style-category-name-ink)) !important;
    font-style: italic;
    font-size: var(--wag-text-18);
    font-weight: 400;
    opacity: 0.82;
}

.country-hero-content .spanish-name {
    color: var(--wag-type-spanish-name-ink, var(--wag-style-category-name-ink)) !important;
    font-size: var(--wag-text-18);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0.3px;
    opacity: 0.68;
}

.country-hero-content .separator {
    display: inline;
    color: rgba(255,255,255,0.40);
    font-size: var(--wag-text-18);
    padding: 0 8px;
}

.country-hero-description {
    position: absolute;
    right: 40px;
    bottom: 40px;
    max-width: 420px;
    padding-left: 20px;
    border-left: 2px solid rgba(255,255,255,.3);
    color: rgba(255,255,255,.9);
    font-size: var(--wag-text-13);
    line-height: 1.7;
    text-align: left;
    z-index: 5;
}

/* Hotspots */

.country-hotspots { margin-top: 0; }

.country-hotspots h2 {
    font-size: 36px;
    margin-bottom: 30px;
    color: #111;
}

.country-experiences-section,
.country-hotspots-section,
.country-hides-section,
.country-stays-section,
.species-experiences-section,
.species-hides-section,
.species-stays-section,
.hotspot-hides-section,
.hotspot-stays-section,
.hotspot-packs-section,
.hotspot-experiences-section {
    position: relative;
}

.country-experiences-section::before,
.country-hotspots-section::before,
.country-hides-section::before,
.country-stays-section::before,
.species-experiences-section::before,
.species-hides-section::before,
.species-stays-section::before,
.hotspot-hides-section::before,
.hotspot-stays-section::before,
.hotspot-packs-section::before,
.hotspot-experiences-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: -20px;
    width: calc(100% + 40px);
    box-shadow: var(--wag-shadow-1);
    border-top: 1px solid #ececec;
}

/* Hotspots grid */

@media (max-width: 1200px) { .country-hotspots-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .country-hotspots-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .country-hotspots-grid { grid-template-columns: 1fr; } }

/* Mobile hero */

@media (max-width: 768px) {
    .country-hero-banner { height: 380px; }
    .country-hero-content { padding: 0 28px 28px; }
    .country-hero-content .country-title { font-size: 48px; }
}

/* ── Country hero — map variant ──────────────────────────────────────────── */

.country-hero-banner--map,
.country-hero-banner--map .leaflet-container{
    background: var(--wag-type-country-hero-banner--map-bg, var(--wag-style-country-hero-banner--map-bg));
}

/* The Leaflet canvas fills the whole banner */
.country-hero-map-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Lighter gradient than the photo version so the map stays readable */
.country-hero-overlay--map {
    background: linear-gradient(
        to top,
        rgba(12, 15, 22, 0.80) 0%,
        rgba(12, 15, 22, 0.50) 30%,
        rgba(12, 15, 22, 0.18) 65%,
        rgba(12, 15, 22, 0.00) 100%
    );
    z-index: 2;
    pointer-events: none; /* let clicks through to the map */
}

/* Ensure content sits above both canvas + overlay */
.country-hero-banner--map .country-hero-content {
    z-index: 5;
    pointer-events: none; /* purely decorative — let clicks through */
}

/* Re-enable pointer events only on interactive elements inside content */
.country-hero-banner--map .country-hero-content a,
.country-hero-banner--map .country-hero-content button,
.country-hero-banner--map .country-map-badge {
    pointer-events: auto;
}

/* Hotspot count badge */
.country-map-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 5px 13px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(8px);
    border-radius: var(--wag-radius-20);
    color: rgba(255, 255, 255, 0.80);
    font-size: var(--wag-text-13);
    font-weight: 500;
    letter-spacing: 0.2px;
}

/* Category legend — top-right glass pill */
.country-map-legend {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 11px 15px;
    background: var(--wag-type-country-map-legend-bg, var(--wag-style-country-map-legend-bg));
    border: 1px solid var(--wag-type-country-map-legend-line, var(--wag-style-country-map-legend-line));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: var(--wag-type-country-map-legend-radius, var(--wag-style-country-map-legend-radius));
}

.cml-item {
    display: flex;
    align-items: center;
    gap: var(--wag-space-8);
}

.cml-dot {
    width: 8px;
    height: 12px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

.cml-label {
    color: var(--wag-type-cml-label-ink, var(--wag-style-cml-label-ink));
    font-size: var(--wag-text-12);
    font-weight: 500;
    white-space: nowrap;
    letter-spacing: 0.1px;
}

/* Legend acts as a marker filter */
.cml-item {
    transition: opacity 0.15s ease;
    user-select: none;
}
.wa .cml-item:hover { opacity: 0.85; }
/* La leyenda SUMA: sin nada elegido no se marca ninguna (estado neutro = se
   ven todas). En cuanto hay filtro, lo elegido se resalta y lo demás se apaga.
   El tachado se va: ya no es "esto lo he quitado" sino "esto no lo he pedido",
   y tachar ocho de nueve etiquetas era ruido. */
.cml-item.is-off { opacity: 0.32; }
.cml-item.is-off .cml-dot { background: var(--wag-type-cml-dot-bg, var(--wag-style-cml-dot-bg)) !important; }
.cml-item.is-on { opacity: 1; font-weight: 700; }
.cml-item.is-on .cml-dot { box-shadow: var(--wag-type-cml-dot-shadow, var(--wag-style-cml-dot-shadow)); }
.cml-item:focus-visible { outline: 2px solid var(--wag-type-cml-item-focus-ring, var(--wag-style-cml-item-focus-ring)); outline-offset: 2px; border-radius: var(--wag-radius-4); }

/* =============================================================
   WAOS — Owner Dashboard (/owner/)
   ============================================================= */
.wa-owner-switch { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.wa-owner-switch label { font-size: var(--wag-text-11); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #9aa4b1; }
.wa-owner-resource-select {
    padding: 8px 12px; border: 1px solid #d8dee6; border-radius: 9px;
    font-size: var(--wag-text-14); color: #1a2a3a; background: var(--wag-surface); min-width: 220px;
}

.wa-owner-dash-head { display: flex; align-items: center; gap: var(--wag-space-12); flex-wrap: wrap; margin-bottom: 18px; }
.wa-owner-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--wag-space-16); }
.wa-owner-card { border: 1px solid var(--wag-type-owner-card-line, var(--wag-style-owner-card-line)); border-radius: var(--wag-type-owner-card-radius, var(--wag-style-owner-card-radius)); padding: 18px; background: var(--wag-surface); }
.wa-owner-card-head { display: flex; align-items: center; gap: var(--wag-space-8); margin-bottom: 14px; flex-wrap: wrap; }
.wa-owner-card-title { font-size: var(--wag-text-16); font-weight: 700; color: #1a2a3a; }
.wa-owner-card-stats { display: flex; gap: 18px; padding: 12px 0; border-top: 1px solid #f0f2f5; border-bottom: 1px solid #f0f2f5; }
.wa-owner-card-stats > div { display: flex; flex-direction: column; font-size: var(--wag-text-11); color: #9aa4b1; letter-spacing: 0.3px; }
.wa-owner-card-stats span { font-size: var(--wag-text-20); font-weight: 700; color: #1a2a3a; }
.wa-owner-card-actions { display: flex; gap: 10px; margin-top: 14px; }

.wa-owner-btn {
    display: inline-block; padding: 9px 16px; border-radius: var(--wag-type-owner-radius, var(--wag-style-pizarra-radius));
    background: var(--wag-type-owner-bg, var(--wag-style-pizarra-bg)); color: var(--wag-type-owner-ink, var(--wag-style-pizarra-ink)); border: none; cursor: pointer;
    font-size: var(--wag-text-13); font-weight: 600; text-decoration: none;
}
.wa .wa-owner-btn:hover { background: var(--wag-type-owner-hover-bg, var(--wag-style-pizarra-hover-bg)); color: var(--wag-type-owner-hover-ink, var(--wag-style-pizarra-hover-ink)); }
.wa-owner-btn--ghost { background: #eef3f8; color: #3a566f; }
.wa .wa-owner-btn--ghost:hover { background: #e0e9f1; color: #3a566f; }
.wa-payment-document-link { margin-left: 6px; white-space: nowrap; }
.wa .wa-payment-document-link:hover { background: #283c50; color: #fff; text-decoration: none; }

/* Content / Team — each section is its own card */
.wa-owner-block {
    background: var(--wag-surface);
    border: 1px solid var(--wag-type-owner-block-line, var(--wag-style-owner-block-line));
    border-radius: var(--wag-type-owner-block-radius, var(--wag-style-owner-block-radius));
    padding: 20px 22px;
    margin: 0 0 16px;
    box-shadow: var(--wag-type-owner-block-shadow, var(--wag-style-owner-block-shadow));
}
.wa-owner-block .wa-admin-subtitle:first-child,
.wa-owner-block-head .wa-admin-subtitle { margin-top: 0; }
.wa-owner-help { font-size: var(--wag-text-13); color: #788596; margin: -4px 0 12px; line-height: 1.5; }
.wa-owner-block-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--wag-space-12); flex-wrap: wrap; margin-bottom: 8px;
}
.wa-owner-btn--sm { padding: 6px 12px; font-size: var(--wag-text-12); }
.wa-child-status { color: #9aa4b1; font-size: var(--wag-text-12); }
/* Solo en la fila del hilo: "hace 3 minutos" partido en dos deja la fila
   descuadrada y empuja al chip "New". */
.wa-contact-row .wa-child-status { white-space: nowrap; flex-shrink: 0; }
/* "· Somiedo Experience: Brown Bear Watching" empieza por el punto medio, y al
   partir la línea el punto se quedaba solo al final del nombre. Como
   inline-block el bloque entero baja de línea y parte por dentro. */
.wa-contact-row .wa-child-via { display: inline-block; }

/* ── Control Center · Mensajes: buscador y paginador ─────────────────────── */
.wa-msg-search {
    display: flex; gap: var(--wag-space-8); margin: 0 0 16px; max-width: 520px;
}
.wa-msg-search input[type="search"] { flex: 1 1 auto; }
.wa-msg-pager {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 10px; margin: 12px 0;
    font-size: 12.5px; color: var(--wa-muted, #7a8fa8);
}
.wa-msg-pager-links { display: flex; gap: 6px; }
/* Open y Delete: mismo tamaño que .wa-admin-trash pero SIN esa clase, que
   además de estilo lleva un listener global de "mover a la papelera". */
.wa-msg-open, .wa-msg-delete {
    padding: 5px 11px; border-radius: var(--wag-radius-8); border: 0;
    font-size: var(--wag-text-12); font-weight: 700; cursor: pointer; text-decoration: none;
    line-height: 1.6; white-space: nowrap;
}
.wa-msg-retention {
    border-radius: var(--wag-radius-12); padding: 12px 14px; margin: 0 0 16px;
    font-size: var(--wag-text-13); line-height: 1.6;
}
.wa-msg-retention-note { opacity: .85; font-size: 12.5px; }
.wa-msg-open   { background: #eef3f8; color: #3a566f; }
.wa .wa-msg-open:hover { background: #e2ebf4; }
.wa-msg-delete { background: #fbe9e6; color: #b3422b; margin-left: 6px; }
.wa .wa-msg-delete:hover { background: #f7dbd6; }
.wa-msg-delete[disabled] { opacity: .5; cursor: default; }
.wa-owner-btn.wa-msg-delete { background: #fbe9e6; color: #b3422b; }
/* Aviso ámbar: publicado pero sin aceptar reservas. Ámbar y no rojo — no está
   roto, está desatendido, y la diferencia importa para no crear alarma. */
.wa-child-warn {
    display: inline-flex; align-items: center; gap: var(--wag-space-4);
    background: #fdf3e0; border: 1px solid #f0dcb4; color: #8a6417;
    border-radius: var(--wag-radius-999); padding: 3px 9px;
    font-size: 11.5px; font-weight: 700; font-style: normal;
    white-space: nowrap; cursor: help;
}

/* Rows inside owner cards: clean dividers, aligned actions */
.wa-owner-block .wa-admin-tlist { margin-top: 6px; }
.wa-owner-content .wa-admin-trow,
.wa-owner-managers .wa-admin-trow {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 0; border-bottom: 1px solid #f0f2f5; font-size: var(--wag-text-14);
}
.wa-owner-content .wa-admin-trow:last-child,
.wa-owner-managers .wa-admin-trow:last-child { border-bottom: none; }
.wa-owner-content .wa-admin-trow > span,
.wa-owner-managers .wa-admin-trow > span { flex: 1; min-width: 0; color: #1a2a3a; }
.wa-owner-content .wa-admin-trow a:not(.wa-admin-trash),
.wa-owner-managers .wa-admin-trow a:not(.wa-admin-trash) { color: #1a2a3a; font-weight: 600; text-decoration: none; }
.wa .wa-owner-content .wa-admin-trow a:not(.wa-admin-trash):hover { color: #5f7f9f; }

/* Pill-style action buttons inside owner cards */
.wa-owner-content .wa-admin-trash,
.wa-owner-managers .wa-admin-trash {
    border: none; border-radius: var(--wag-radius-8); padding: 6px 12px;
    font-size: var(--wag-text-12); font-weight: 600; cursor: pointer; text-decoration: none;
    line-height: 1.4; white-space: nowrap;
}
.wa-owner-content .wa-admin-trash:hover,
.wa .wa-owner-managers .wa-admin-trash:hover { filter: brightness(0.96); }

.wa-owner-news-form { display: flex; flex-direction: column; gap: var(--wag-space-8); max-width: 560px; margin-bottom: 14px; }
.wa-owner-news-form input, .wa-owner-news-form textarea {
    padding: 9px 11px; border: 1px solid #d8dee6; border-radius: 9px; font-size: var(--wag-text-14); font-family: inherit; color: #1a2a3a;
}
.wa-owner-news-actions { display: flex; align-items: center; gap: 10px; }
.wa-onews-msg, .wa-oreview-msg { font-size: var(--wag-text-12); color: #788596; }

.wa-owner-reviews { display: flex; flex-direction: column; gap: 14px; }
.wa-owner-review { border: 1px solid #e4e8ee; border-radius: var(--wag-radius-12); padding: 16px 18px; background: var(--wag-surface); }
.wa-owner-review-head { display: flex; align-items: center; gap: 10px; }
.wa-owner-review-head strong { font-size: var(--wag-text-14); color: #1a2a3a; }
.wa-owner-review-stars { color: #e3a008; font-size: var(--wag-text-14); }
.wa-owner-review-head em { margin-left: auto; font-size: var(--wag-text-12); color: #9aa4b1; }
.wa-owner-review-body { font-size: var(--wag-text-14); color: #44505f; line-height: 1.5; margin: 8px 0; }
.wa-owner-review-reply { margin-top: 10px; }
.wa-owner-review-reply textarea {
    width: 100%; padding: 9px 11px; border: 1px solid #d8dee6; border-radius: 9px;
    font-size: var(--wag-text-14); font-family: inherit; resize: vertical;
}
.wa-owner-review-actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.wa-owner-review-response { margin-top: 10px; background: #f3f7fb; border-left: 3px solid #5f7f9f; border-radius: 0 8px 8px 0; padding: 10px 14px; }
.wa-owner-review-response strong { font-size: var(--wag-text-12); color: #3a566f; text-transform: uppercase; letter-spacing: 0.5px; }
.wa-owner-review-response p { margin: 4px 0 0; font-size: var(--wag-text-14); color: #44505f; }

/* =============================================================
   WAOS — Admin: claims review (Control Center → Business)
   ============================================================= */
.wa-claim-admin-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 10px; }

.wa-claim-admin-card {
    border: 1px solid #e4e8ee; border-radius: var(--wag-radius-12); padding: 16px 18px;
    background: var(--wag-surface);
}
.wa-claim-admin-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--wag-space-12); }
.wa-claim-rtype {
    display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; color: #5f7f9f; background: #eef3f8;
    padding: 2px 8px; border-radius: var(--wag-radius-999); vertical-align: middle;
}
.wa-claim-rtitle { font-size: 15px; font-weight: 700; color: #1a2a3a; }
.wa-claim-date   { font-size: var(--wag-text-12); color: #9aa4b1; white-space: nowrap; }

.wa-claim-warn {
    margin: 10px 0 0; font-size: var(--wag-text-12); color: #a86b1a;
    background: #fff7e6; border-radius: var(--wag-radius-8); padding: 6px 10px;
}

.wa-claim-admin-by { display: flex; align-items: center; gap: 10px; margin: 12px 0 10px; }
.wa-claim-admin-by img { border-radius: 50%; }
.wa-claim-admin-by strong { display: block; font-size: var(--wag-text-13); color: #1a2a3a; }
.wa-claim-admin-meta { font-size: var(--wag-text-12); color: #788596; }

.wa-claim-admin-msg { font-size: var(--wag-text-13); color: #44505f; line-height: 1.5; margin: 4px 0; }
.wa-claim-admin-notes { color: #788596; }

.wa-claim-admin-actions { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.wa-claim-act {
    border: none; border-radius: var(--wag-radius-8); padding: 8px 14px;
    font-size: var(--wag-text-13); font-weight: 600; cursor: pointer;
}
.wa-claim-act:disabled { opacity: 0.6; cursor: default; }
.wa-claim-approve { background: var(--wag-accent); color: var(--wag-type-claim-approve-ink, var(--wag-style-claim-approve-ink)); }
.wa .wa-claim-approve:hover:not(:disabled) { background: #25925c; }
.wa-claim-reject  { background: #f3f4f6; color: var(--wag-type-claim-reject-ink, var(--wag-style-claim-reject-ink)); }
.wa .wa-claim-reject:hover:not(:disabled)  { background: #fbe9e6; }

/* ── Rechazar con motivo (Marc, 2026-09-24) ───────────────────────────────────
   Hermano de .wa-bk-accept-form (el recuadro que se abre al ACEPTAR): mismas
   medidas —margen, relleno, radio, tipografía, textarea— para que los dos
   gestos se lean como la misma pieza. Sólo cambia la familia de color: verde
   para aceptar, rojo del botón de rechazo (#fbe9e6 / #b3422b) para rechazar. */
.wa-bk-decline {
    margin-top: 10px; padding: 14px 16px;
    background: #fdf6f4; border: 1px solid #f1cfc7; border-radius: var(--wag-radius-12);
    font-size: var(--wag-text-13);
}
.wa-bk-decline-label { display: block; font-weight: 700; color: #7a2e1f; margin-bottom: 8px; }
.wa-bk-decline-text {
    display: block; width: 100%; box-sizing: border-box; margin-top: 6px; padding: 10px 12px;
    border: 1px solid #ecc9c0; border-radius: 10px; font-size: var(--wag-text-14); resize: vertical;
    background: var(--wag-surface); color: #2b2b2b; font-family: inherit; line-height: 1.45;
}
.wa .wa-bk-decline-text:focus { outline: none; border-color: #b3422b; box-shadow: 0 0 0 3px rgba(179,66,43,.1); }
.wa-bk-decline-help { margin: 6px 0 0; font-size: var(--wag-text-12); color: #8a6a62; }
.wa-bk-decline-err  { margin: 6px 0 0; font-size: var(--wag-text-12); font-weight: 700; color: #b3422b; }
.wa-bk-decline-err[hidden] { display: none; }
.wa-bk-decline-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wag-space-8); margin-top: 10px; }
.wa-bk-decline-go {
    padding: 8px 14px; border: 0; border-radius: 9px; cursor: pointer;
    background: #b3422b; color: #fff; font-size: var(--wag-text-13); font-weight: 700;
}
.wa .wa-bk-decline-go:hover:not(:disabled) { background: #963522; color: #fff; }
.wa-bk-decline-go:disabled { opacity: .55; cursor: default; }
.wa-bk-decline-keep {
    padding: 8px 12px; border: 0; border-radius: 9px; cursor: pointer;
    background: transparent; color: #6b5550; font-size: var(--wag-text-13); font-weight: 600;
}
.wa .wa-bk-decline-keep:hover { background: #f3e6e2; color: #4a3530; }
html[data-theme="dark"] .wa-bk-decline { background: #2a1a17; border-color: #5a3a33; }
html[data-theme="dark"] .wa-bk-decline-label { color: #f0b6a8; }
html[data-theme="dark"] .wa-bk-decline-text { background: #12161b; border-color: #5a3a33; color: var(--wag-dark-ink); }
html[data-theme="dark"] .wa-bk-decline-help { color: #b99a93; }
html[data-theme="dark"] .wa-bk-decline-keep { color: #d9c2bc; }
.wa-claim-act-msg { font-size: var(--wag-text-12); color: #788596; }

/* Owner Dashboard → Payments: Save listing currency / Save fiscal details /
   Save policy (Marc, 2026-08-03) — same .wa-claim-act/.wa-claim-approve pair
   as everywhere else, plus an explicit !important hover here because these
   sit inside .wa-pay-card, deep in the Owner Dashboard content area where
   Astra's own button/link hover was winning (bare :hover, no !important,
   couldn't out-specificity it reliably). Belt + suspenders. */
.wa [data-pay-currency-save],
.wa [data-pay-fiscal-save],
.wa [data-cancel-save] {
    background: #1f7a4d !important; color: #fff !important; border: none !important;
}
.wa [data-pay-currency-save]:hover:not(:disabled),
.wa [data-pay-fiscal-save]:hover:not(:disabled),
.wa [data-cancel-save]:hover:not(:disabled) {
    background: #25925c !important; color: #fff !important;
}

.wa-claim-pill {
    display: inline-block; padding: 2px 9px; border-radius: var(--wag-radius-999);
    font-size: var(--wag-text-11); font-weight: 700;
}
.wa-claim-pill.is-approved { background: #e6f4ec; color: var(--wag-accent); }
.wa-claim-pill.is-rejected { background: #fbe9e6; color: #b3422b; }
.wa-claim-pill.is-draft    { background: #eef1f5; color: #5a6b7e; }

/* ── WAFAS — Follow control (hero, beside the reviews) ───────────────────── */
.wa-follow {
    display: inline-flex; align-items: center; gap: 9px;
    margin: 0;
}
.wa-hero-rating-row .wa-follow { margin-left: 0; }
.wa-follow-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    width: 108px; /* fixed → Follow & Following share the same size */
    padding: 5px 13px; border-radius: var(--wag-radius-999);
    background: var(--wag-surface); color: var(--wag-accent); border: 1px solid var(--wag-type-follow-line, var(--wag-style-pildora-seguir-line));
    font-size: var(--wag-text-12); font-weight: 600; line-height: 1; cursor: pointer;
    transition: background .14s, color .14s, border-color .14s;
}
.wa .wa-follow-btn:hover { background: var(--wag-type-follow-hover-bg, var(--wag-style-pildora-seguir-hover-bg)); color: var(--wag-accent); }
.wa-follow-check { display: none; }
/* Following state — same pill, with the green check shown */
.wa-follow-btn.is-following .wa-follow-check { display: inline-block; }
.wa-follow-count {
    color: var(--wag-type-follow-count-ink, var(--wag-style-category-name-ink)); font-size: var(--wag-text-12); font-weight: 600;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .45);
}
.wa-follow-count[hidden] { display: none; }

/* Following tab — activity feed */
.wa-feed { display: flex; flex-direction: column; gap: 2px; }
.wa-feed-row {
    display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
    padding: 12px 2px; border-bottom: 1px solid #eef1f4;
}
.wa-feed-body { color: #2b3a47; font-size: var(--wag-text-14); line-height: 1.45; }
.wa-feed-resource { font-weight: 700; color: #16323f; text-decoration: none; }
.wa .wa-feed-resource:hover { text-decoration: underline; }
.wa-feed-label { color: #5a6b7e; }
.wa-feed-link { color: var(--wag-accent); text-decoration: none; font-weight: 600; }
.wa .wa-feed-link:hover { text-decoration: underline; }
.wa-feed-time { color: #92a1b0; font-size: var(--wag-text-12); white-space: nowrap; flex-shrink: 0; }

/* Following list — follow button on a light background (override hero styling) */
.wa-following-list .wa-follow { margin: 0; }
.wa-following-list .wa-follow-btn {
    box-shadow: var(--wag-shadow-14); border-color: #d4dee6; padding: 6px 13px; font-size: 12.5px;
}
.wa .wa-following-list .wa-follow-btn:not(.is-following),
.wa .wa-following-list .wa-follow-btn:not(.is-following):hover { color: #2b3a47; background: #f3f6f9; }
.wa-following-list .wa-follow-count { display: none; } /* count not needed per row */

/* iOS-style account avatar — squircle with a corner notification dot */
.wa-account-av { position: relative; display: inline-flex; flex-shrink: 0; line-height: 0; }
.wa-account-avatar,
.wa-account-btn img.wa-account-avatar { border-radius: 9px !important; }
.wa-account-dot {
    position: absolute; top: -3px; right: -3px;
    width: 10px; height: 10px; border-radius: 50%;
    background: #e0392b; box-shadow: 0 0 0 2px #fff;
}
.wa-account-menu a .wa-menu-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #e0392b; margin-left: auto;
}
/* Owner dashboard tab dot (Analytics — new followers / Bookings — requests) */
.profile-tab .wa-tab-dot {
    display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    background: #e0392b; margin-left: 6px; vertical-align: middle;
}

/* ── WARS — booking widget (hide sidebar) ────────────────────────────────── */
.wa-booking-title {
    font-size: 15px; font-weight: 800; color: var(--wag-ink); margin: 0 0 12px;
}
.wa-booking-form { display: flex; flex-direction: column; gap: 10px; }
.wa-stay-room-types__grid{display:grid;gap:var(--wag-space-12)}.wa-stay-room-type,.wa-stay-room-type:hover,.wa-stay-room-type:focus,.wa-stay-room-type:active{position:relative;display:grid;width:100%;grid-template-columns:120px 1fr;gap:var(--wag-space-16);overflow:hidden;padding:12px;border:1px solid #e1e6e3;border-radius:14px;background:var(--wag-surface);color:inherit;text-align:left;box-shadow:var(--wag-shadow-14);transform:none;cursor:pointer;appearance:none}.wa-stay-room-type.no-photo{grid-template-columns:1fr;padding-right:48px}.wa-stay-room-type:hover{border-color:#a8bcb0;background:#fbfdfc}.wa-stay-room-type:focus-visible{outline:3px solid rgba(31,110,71,.2);outline-offset:2px}.wa-stay-room-type.is-selected,.wa-stay-room-type.is-selected:hover{border-color:#1f6e47;background:#f2faf5;box-shadow:inset 0 0 0 1px #1f6e47}.wa-stay-room-type.is-selected::after{content:"✓";position:absolute;top:12px;right:12px;display:grid;width:24px;height:24px;place-items:center;border-radius:50%;background:#1f6e47;color:#fff;font:800 14px/1 sans-serif}.wa-stay-room-type>img{width:120px;height:100%;min-height:92px;border-radius:10px;object-fit:cover}.wa-stay-room-type h4{margin:2px 32px 6px 0;color:#193525;font-size:17px}.wa-stay-room-type p{margin:0 0 8px;color:#697871;font-size:var(--wag-text-13)}.wa-stay-room-type strong{color:#1f6e47;font-size:var(--wag-text-14)}.wa-bk-room-type-summary{display:grid;gap:3px;padding:10px 12px;border:1px solid var(--wag-type-bk-room-type-summary-line, var(--wag-style-bk-room-type-summary-line));border-radius:var(--wag-type-bk-room-type-summary-radius, var(--wag-style-bk-room-type-summary-radius));background:var(--wag-type-bk-room-type-summary-bg, var(--wag-style-bk-room-type-summary-bg))}.wa-bk-room-type-summary span{color:#708078;font-size:var(--wag-text-11);font-weight:700;text-transform:uppercase;letter-spacing:.045em}.wa-bk-room-type-summary strong{color:#193525;font-size:var(--wag-text-13);line-height:1.35}.wa-bk-room-type-field[hidden]{display:none!important}.wa-bk-room-type{width:100%;min-height:44px;border:1px solid #d8dfdb;border-radius:9px;background:var(--wag-surface);color:#24372c}@media(max-width:560px){.wa-stay-room-type.has-photo{grid-template-columns:1fr}.wa-stay-room-type>img{width:100%;height:150px}}
/* Camas de cada tipo, justo bajo la capacidad: se leen como un solo dato. */
.wa-stay-room-type p.wa-stay-room-type__beds{margin-top:-4px}
.wa-bk-dates { display: flex; gap: 10px; }
.wa-bk-dates .wa-bk-field { flex: 1; }
/* Marc, 2026-08-17 (screenshot, mobile Safari): "Date" and "To" side by side
   at flex:1 leave each native <input type="date"> only ~150-180px on a phone
   — narrow enough that iOS's own date-picker chrome for the two fields visibly
   overlaps. Stack them full-width on phones instead of squeezing two natives
   pickers into half a row each; same treatment .wa-bk-dates--flexible (the
   single-date variant right below) already gets unconditionally.
   First pass only set `gap`, which IS real spacing but gave no fallback if a
   field's own rendering pushes past its box — added an explicit margin-bottom
   on each stacked field too, so the two are guaranteed apart regardless. */
@media (max-width: 600px) {
    .wa-bk-dates { flex-direction: column; gap: var(--wag-space-16); }
    .wa-bk-dates .wa-bk-field { margin-bottom: 4px; }
    .wa-bk-dates .wa-bk-field:last-child { margin-bottom: 0; }
}
.wa-bk-field { display: flex; flex-direction: column; gap: var(--wag-space-4); }
.wa-bk-field > span { font-size: var(--wag-text-12); font-weight: 700; color: #4a5a51; }
.wa-bk-field > span em { font-style: normal; font-weight: 500; color: #8a9a90; }
.wa-bk-field input, .wa-bk-field textarea {
    width: 100%; padding: 9px 11px; border: 1px solid #d4dee6; border-radius: 10px;
    font-size: var(--wag-text-14); color: #1a2a22; background: var(--wag-surface); box-sizing: border-box;
}
.wa .wa-bk-field input:focus,
.wa .wa-bk-field textarea:focus {
    outline: none; border-color: #2e9e5b; box-shadow: 0 0 0 3px rgba(46,158,91,.12);
}
/* Experiences: agreed dates shown read-only (no picker) */
.wa-bk-fixeddates {
    display: flex; flex-direction: column; gap: 2px;
    padding: 10px 12px; border-radius: 10px;
    background: #f0f8f3; border: 1px solid #d6ebdf;
}
.wa-bk-fixeddates-label { font-size: var(--wag-text-12); font-weight: 700; color: #6b8b78; text-transform: uppercase; letter-spacing: .3px; }
.wa-bk-fixeddates-val { font-size: 15px; font-weight: 700; color: var(--wag-ink); }

/* Varias salidas del mismo viaje: el mismo lenguaje que el campo de fechas
   fijas, pero elegible. Los tokens salen de .wa-bk-field / .wa-bk-fixeddates
   de arriba: ni un color nuevo. */
.wa-bk-departure-field > select.wa-bk-departure {
    width: 100%; padding: 9px 11px; border: 1px solid #d6ebdf; border-radius: 10px;
    font-size: 15px; font-weight: 700; color: var(--wag-ink); background: #f0f8f3;
    box-sizing: border-box; cursor: pointer;
}
.wa .wa-bk-departure-field > select.wa-bk-departure:focus {
    outline: none; border-color: #2e9e5b; box-shadow: 0 0 0 3px rgba(46,158,91,.12);
}

/* Lista de salidas en la ficha de la experiencia. */
.wa-tour-departures { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; }
.wa-tour-departures li { font-size: var(--wag-text-14); font-weight: 600; color: #1a2a22; }
.wa-tour-departures-more { margin-top: 3px; }
.wa-tour-departures-more > summary {
    list-style: none; cursor: pointer; display: inline-block;
    font-size: var(--wag-text-13); font-weight: 600; color: #2b7cb0;
}
.wa-tour-departures-more > summary::-webkit-details-marker { display: none; }
.wa .wa-tour-departures-more > summary:hover { color: #1f5f8a; text-decoration: underline; }
.wa-tour-departures-more .wa-dep-less,
.wa-tour-departures-more[open] .wa-dep-more { display: none; }
.wa-tour-departures-more[open] .wa-dep-less { display: inline; }
/* Abierto, el enlace «Ver menos» queda al final de la lista. */
.wa-tour-departures-more[open] { display: flex; flex-direction: column-reverse; gap: 3px; }
html[data-theme="dark"] .wa-tour-departures-more > summary { color: #7fc0e6; }

/* La piel de Flatpickr que vivía aquí se retiró el 2026-09-29: el selector de
   fechas de la web es .wa-dp (al final de esta hoja). */

/* ── Owner Customize panel ───────────────────────────────────────────────── */
.wa-cz-hero { max-width: 520px; margin-bottom: 8px; }
.wa-cz { display: flex; flex-direction: column; gap: var(--wag-space-8); max-width: 520px; }
.wa-cz-row {
    display: flex; align-items: center; gap: var(--wag-space-12);
    padding: 10px 14px; border: 1px solid #e1e8ee; border-radius: var(--wag-radius-12); background: var(--wag-surface);
}
.wa-cz-handle { display: inline-flex; flex-direction: column; gap: 2px; }
.wa-cz-up, .wa-cz-down {
    width: 22px; height: 18px; line-height: 1; padding: 0; cursor: pointer;
    border: 1px solid #d4dee6; border-radius: 5px; background: #f3f6f9; color: #3a566f; font-size: var(--wag-text-11);
}
.wa .wa-cz-up:hover,
.wa .wa-cz-down:hover { background: #e7eef4; }
.wa-cz-name { flex: 1; font-weight: 700; color: var(--wag-ink); font-size: var(--wag-text-14); }
.wa-cz-fixed { font-size: var(--wag-text-11); font-weight: 700; color: var(--wag-accent); background: #e9f4ee; padding: 3px 9px; border-radius: var(--wag-radius-999); }
.wa-cz-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: var(--wag-text-13); color: #4a5a51; }
.wa-cz-actions { margin-top: 16px; display: flex; align-items: center; gap: var(--wag-space-12); }
.wa-cz-msg { font-size: var(--wag-text-13); color: var(--wag-accent); }

/* ============================================================
   OWNER DASHBOARD — SaaS restyle (scoped to body.wa-owner)
   Pure presentation; no logic changes.
   ============================================================ */
body.wa-owner { --wa-card:var(--wag-color-white); --wa-line:var(--wag-color-line); --wa-ink:var(--wag-ink); --wa-muted:var(--wag-color-muted); --wa-accent:var(--wag-accent); --wa-attention:var(--wag-color-attention); }
body.wa-owner .profile-card.wa-page-card { background: var(--wag-type-panel-private-bg, var(--wag-style-panel-privado-bg)); }

/* Tabs → flat menu with icon + label + underline indicator (no rounded pills) */
body.wa-owner .profile-tabs { gap: 0; flex-wrap: wrap; padding-bottom: 0; justify-content: center; }
body.wa-owner .wa-owner-tab {
    display: inline-flex; align-items: center; gap: 7px; position: relative;
    padding: 14px 20px; border: 0; border-bottom: 3px solid transparent; border-radius: 0;
    background: none; color: #aab2bb; font-weight: 600; font-size: var(--wag-text-13);
}
body.wa-owner .wa-owner-tab .wa-tab-ico { opacity: .85; }
body.wa-owner .wa-owner-tab:hover { background: none; color: var(--wag-type-owner-tab-hover-ink, var(--wag-style-owner-tab-hover-ink)); }
body.wa-owner .wa-owner-tab.is-active { background: none; color: var(--wag-type-owner-tab-ink, var(--wag-style-owner-tab-ink)); border-bottom-color: var(--wag-type-owner-tab-underline, var(--wag-style-owner-tab-underline)); }
body.wa-owner .wa-owner-tab.is-active .wa-tab-ico { opacity: 1; }
body.wa-owner .wa-owner-tab + .wa-owner-tab::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 16px; width: 1px; background: rgba(255,255,255,.14); }
body.wa-owner .wa-owner-tab .wa-tab-dot { position: static; margin-left: 2px; width: 7px; height: 7px; border-radius: 50%; background: var(--wa-attention); box-shadow: var(--wag-shadow-14); }

/* Section eyebrow titles */
body.wa-owner .wa-admin-subtitle {
    font-size: var(--wag-text-12); font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
    color: var(--wa-muted); margin: 26px 0 12px;
}

/* Stat row */
.wa-stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.wa-stat {
    display: flex; flex-direction: column; gap: var(--wag-space-4);
    background: var(--wa-card); border: 1px solid var(--wa-line); border-radius: var(--wag-radius-16); padding: 16px 18px;
}
.wa-stat-ico { color: #9aa7b2; }
.wa-stat-n { font-size: 28px; font-weight: 800; color: var(--wa-ink); line-height: 1; }
.wa-stat-label { font-size: 12.5px; color: var(--wa-muted); font-weight: 600; }
.wa-stat.is-attention { border-color: #f3c9c3; background: #fdf2f0; }
.wa-stat.is-attention .wa-stat-n, .wa-stat.is-attention .wa-stat-ico { color: var(--wa-attention); }

/* Attention alerts */
.wa-alert-list { display: flex; flex-direction: column; gap: var(--wag-space-8); }
.wa-alert {
    display: flex; align-items: center; gap: 10px; text-decoration: none;
    background: #fdf2f0; border: 1px solid #f3c9c3; border-radius: var(--wag-radius-12); padding: 13px 16px;
    color: #7a2a1c; font-size: var(--wag-text-14);
}
.wa-alert strong { color: var(--wa-attention); }
.wa-alert-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--wa-attention); flex-shrink: 0; }
.wa-alert-go { margin-left: auto; font-weight: 700; color: var(--wa-attention); }
.wa-empty { background: var(--wa-card); border: 1px dashed var(--wa-line); border-radius: 14px; padding: 18px; color: var(--wa-muted); font-size: var(--wag-text-14); }
.wa-empty--clean { color: var(--wag-accent); background: #f0f8f3; border-color: #d6ebdf; }

/* Quick actions */
.wa-qa-row { display: flex; gap: 10px; flex-wrap: wrap; }
.wa-qa {
    display: inline-flex; align-items: center; gap: var(--wag-space-8); text-decoration: none;
    background: var(--wa-card); border: 1px solid var(--wa-line); border-radius: var(--wag-radius-12);
    padding: 12px 16px; font-size: 13.5px; font-weight: 700; color: var(--wa-ink);
    transition: border-color .12s, box-shadow .12s, transform .05s;
}
.wa-qa svg { color: var(--wa-accent); }
.wa .wa-qa:hover { border-color: #cfe6da; box-shadow: 0 4px 14px -8px rgba(31,122,77,.5); color: var(--wa-ink); }
.wa .wa-qa:active { transform: translateY(1px); }

/* Listing cards (restyle existing) */
body.wa-owner .wa-owner-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--wag-space-16); }
body.wa-owner .wa-owner-card { background: var(--wa-card); border: 1px solid var(--wa-line); border-radius: var(--wag-radius-16); padding: 18px; box-shadow: var(--wag-type-owner-card-shadow, var(--wag-style-owner-card-shadow)); }
body.wa-owner .wa-owner-card-stats { display: flex; gap: var(--wag-space-16); margin: 12px 0 14px; }
body.wa-owner .wa-owner-card-stats > div { display: flex; flex-direction: column; font-size: 11.5px; color: var(--wa-muted); }
body.wa-owner .wa-owner-card-stats span { font-size: 19px; font-weight: 800; color: var(--wa-ink); }
body.wa-owner .wa-owner-btn { background: var(--wa-accent); border: 1px solid var(--wa-accent); color: var(--wag-type-owner-brand-ink, var(--wag-style-marca-propietario-ink)); border-radius: var(--wag-type-owner-brand-radius, var(--wag-style-marca-propietario-radius)); }
body.wa-owner.wa .wa-owner-btn:hover { background: var(--wag-type-owner-brand-hover-bg, var(--wag-style-marca-propietario-hover-bg)); border-color: var(--wag-type-owner-brand-hover-line, var(--wag-style-marca-propietario-hover-line)); color: var(--wag-type-owner-brand-hover-ink, var(--wag-style-marca-propietario-hover-ink)); }
body.wa-owner .wa-owner-btn--ghost { background: var(--wag-surface); color: var(--wa-ink); border-color: var(--wa-line); }
body.wa-owner.wa .wa-owner-btn--ghost:hover { background: #f3f6f9; color: var(--wa-ink); border-color: #cfd8e0; }

/* Content → module cards (instead of an endless form) */
body.wa-owner .wa-owner-content { display: flex; flex-direction: column; gap: var(--wag-space-16); }
/* Gestionar hides (operador), Marc 2026-10-10: con muchos hides la columna crecía
   sin fin y la rejilla estiraba la tarjeta vecina. Cada tarjeta mide lo suyo
   (align-items: start), la lista tiene su scroll y, desde 7, un buscador
   (owner.js). Colores por variables del panel: el modo oscuro viene solo. */
body.wa-owner .wa-owner-operator-tools { align-items: start; }
body.wa-owner .wa-owner-operator-tools .wa-owner-block--product .wa-admin-tlist {
    max-height: 440px; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px;
}
body.wa-owner .wa-owner-operator-tools .wa-admin-trow[hidden] { display: none; }
body.wa-owner .wa-ochild-search { display: block; margin: 0 0 10px; }
body.wa-owner.wa .wa-ochild-search input,
body.wa-owner.wa .wa-ochild-search input:hover,
body.wa-owner.wa .wa-ochild-search input:focus {
    box-sizing: border-box; width: 100%; height: 40px; margin: 0; padding: 0 14px;
    border: 1px solid var(--wa-line); border-radius: 10px; background: var(--wa-card);
    box-shadow: var(--wag-shadow-14); color: var(--wa-ink); font-size: var(--wag-text-14); outline: none;
}
body.wa-owner.wa .wa-ochild-search input:focus { border-color: var(--wa-accent); box-shadow: 0 0 0 3px rgba(31,122,77,.14); }
body.wa-owner .wa-ochild-search input::placeholder { color: var(--wa-muted); opacity: 1; }
body.wa-owner .wa-ochild-none { margin: 0; }
body.wa-owner .wa-owner-operator-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wag-space-16); }
body.wa-owner .wa-owner-operator-tools > .wa-owner-block { margin: 0; min-width: 0; }
@media (max-width: 760px) {
    body.wa-owner .wa-owner-operator-tools { grid-template-columns: 1fr; }
}
body.wa-owner .wa-owner-block {
    background: var(--wa-card); border: 1px solid var(--wa-line); border-radius: var(--wag-radius-16);
    padding: 18px 20px; margin: 0; box-shadow: var(--wag-shadow-12);
}
/* Product modules are a distinct management group: give Hides, Stays, Packs
   and Experiences the same clear rhythm as the primary Content cards. */
body.wa-owner #wa-owner-content-offers { display:flex; flex-direction:column; gap:var(--wag-space-16); }
body.wa-owner .wa-owner-block--product { margin:0; }
body.wa-owner .wa-owner-content > .wa-owner-block > .wa-owner-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 42px;
    line-height: 1;
}
body.wa-owner .wa-owner-block .wa-admin-subtitle {
    display: flex; align-items: center; gap: var(--wag-space-8); margin: 0 0 4px;
    font-size: var(--wag-text-16); font-weight: 800; letter-spacing: -.2px; text-transform: none; color: var(--wa-ink);
}
body.wa-owner .wa-owner-block .wa-admin-subtitle .wa-mod-ico { color: var(--wa-accent); flex-shrink: 0; }
body.wa-owner .wa-owner-block-head { display: flex; align-items: center; justify-content: space-between; gap: var(--wag-space-12); }
body.wa-owner .wa-owner-block-head .wa-admin-subtitle { margin-bottom: 0; }
body.wa-owner .wa-owner-help { color: var(--wa-muted); font-size: var(--wag-text-13); margin: 0 0 12px; }
body.wa-owner .wa-owner-block .wa-admin-tlist { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
body.wa-owner .wa-owner-block .wa-admin-trow {
    background: #f7f9fb; border: 1px solid #eef1f4; border-radius: var(--wag-type-admin-row-radius, var(--wag-style-admin-row-radius)); padding: 9px 12px; gap: var(--wag-space-8);
}
body.wa-owner .wa-owner-block .wa-admin-trash {
    border-radius: var(--wag-radius-8); font-size: var(--wag-text-12); font-weight: 700; padding: 6px 10px;
}
body.wa-owner .wa-owner-block .wa-profile-empty {
    background: #f7f9fb; border: 1px dashed var(--wa-line); border-radius: 10px;
    padding: 14px; color: var(--wa-muted); font-size: 13.5px; margin: 10px 0 0;
}
body.wa-owner .wa-owner-btn--sm { padding: 7px 12px; font-size: 12.5px; }

/* First Owner Dashboard visit — orientation, not an obstructive modal. */
.wa-owner-onboarding {
    margin: 0 0 20px; padding: 24px;
    background: #eff8f2; border: 1px solid #b9dfc4; border-radius: 18px;
    color: var(--wag-ink); transition: opacity .18s ease, transform .18s ease;
}
.wa-owner-onboarding.is-leaving { opacity: 0; transform: translateY(-5px); }
.wa-owner-tutorial { background: #f7fbf8; border-color: #cfe7d6; }
.wa-owner-onboarding-kicker { display: block; margin-bottom: 7px; color: var(--wag-accent); font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.wa-owner-onboarding h2 { margin: 0; color: var(--wag-ink); font-size: 23px; line-height: 1.22; letter-spacing: -.35px; }
.wa-owner-onboarding p { margin: 10px 0 0; max-width: 760px; color: #456052; font-size: var(--wag-text-14); line-height: 1.55; }
.wa-owner-onboarding-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 0; margin: 20px 0; list-style: none; counter-reset: owner-onboarding; }
.wa-owner-onboarding-steps li { position: relative; min-height: 100px; padding: 15px 14px 14px 47px; border: 1px solid #cfe7d6; border-radius: var(--wag-radius-12); background: var(--wag-surface); counter-increment: owner-onboarding; }
.wa-owner-onboarding-steps li::before { content: counter(owner-onboarding); position: absolute; top: 15px; left: 14px; width: 23px; height: 23px; border-radius: 50%; background: var(--wag-accent); color: #fff; font-size: var(--wag-text-12); font-weight: 800; line-height: 23px; text-align: center; }
.wa-owner-onboarding-steps strong { display: block; margin-bottom: 5px; color: var(--wag-ink); font-size: var(--wag-text-13); line-height: 1.25; }
.wa-owner-onboarding-steps span { display: block; color: #607567; font-size: var(--wag-text-12); line-height: 1.42; }
.wa-owner-onboarding-actions { display: flex; align-items: center; gap: var(--wag-space-12); flex-wrap: wrap; }
.wa-owner-onboarding-start, .wa-owner-onboarding-dismiss { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 15px; border-radius: 9px; font-size: var(--wag-text-13); font-weight: 800; text-decoration: none; cursor: pointer; }
.wa-owner-onboarding-start { background: var(--wag-accent); border: 1px solid #1f7a4d; color: #fff; }
.wa .wa-owner-onboarding-start:hover, .wa .wa-owner-onboarding-start:focus { background: #17623d; border-color: #17623d; color: #fff; }
.wa-owner-onboarding-dismiss { border: 1px solid #b9d1c0; background: var(--wag-surface); color: #315742; }
.wa .wa-owner-onboarding-dismiss:hover, .wa .wa-owner-onboarding-dismiss:focus { background: #e1f0e5; color: var(--wag-ink); }
.wa-owner-onboarding-next { color: #315742; font-size: var(--wag-text-13); font-weight: 800; text-decoration: none; }
.wa .wa-owner-onboarding-next:hover, .wa .wa-owner-onboarding-next:focus { color: #17623d; text-decoration: underline; }

/* Control Center: catch up owners approved before the welcome flow existed. */
.wa-owner-welcome-admin { display: flex; align-items: center; justify-content: space-between; gap: var(--wag-space-16); margin: 24px 0 10px; padding: 16px 18px; border: 1px solid #d7e8dc; border-radius: 14px; background: #f5faf6; }
.wa-owner-welcome-admin h3 { margin: 0 0 4px; color: var(--wag-ink); font-size: 15px; }
.wa-owner-welcome-admin p { margin: 0; color: #607567; font-size: 12.5px; line-height: 1.45; }
.wa-owner-welcome-state { color: var(--wag-accent); font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.wa-owner-welcome-send { flex: 0 0 auto; padding: 8px 12px; border: 1px solid var(--wag-type-owner-welcome-line, var(--wag-style-owner-welcome-line)); border-radius: var(--wag-radius-8); background: var(--wag-accent); color: var(--wag-type-owner-welcome-ink, var(--wag-style-owner-welcome-ink)); font-size: var(--wag-text-12); font-weight: 800; cursor: pointer; }
.wa .wa-owner-welcome-send:hover, .wa .wa-owner-welcome-send:focus { background: var(--wag-type-owner-welcome-hover-bg, var(--wag-style-owner-welcome-hover-bg)); border-color: var(--wag-type-owner-welcome-hover-line, var(--wag-style-owner-welcome-hover-line)); color: var(--wag-type-owner-welcome-hover-ink, var(--wag-style-owner-welcome-hover-ink)); }
.wa-owner-welcome-send:disabled { opacity: .6; cursor: wait; }
.wa-owner-welcome-list .wa-owner-welcome-send { margin-left: auto; }

@media (max-width: 700px) {
    .wa-owner-onboarding { padding: 19px; }
    .wa-owner-onboarding h2 { font-size: var(--wag-text-20); }
    .wa-owner-onboarding-steps { grid-template-columns: 1fr; }
    .wa-owner-onboarding-steps li { min-height: 0; }
    .wa-owner-welcome-admin { align-items: flex-start; flex-direction: column; }

    /* Las filas de contenido del panel son una línea de flex SIN `wrap`
       (:836). En escritorio caben título, estado y tres botones. A 375px los
       botones ocupan 184px de los 301 disponibles y el título —el único
       elemento flexible de la fila— se quedaba en 2px REALES: su texto se
       desbordaba por encima de los botones, y una ficha con nombre largo
       llegaba a 366px de alto partiéndose letra a letra.

       El título pasa a ocupar su propia línea y el estado y las acciones
       fluyen debajo. `flex-wrap` sin la base del 100% no bastaría: el título
       seguiría compitiendo por el hueco sobrante de la primera línea. */
    .wa-owner-content .wa-admin-trow,
    .wa-owner-managers .wa-admin-trow { flex-wrap: wrap; }
    .wa-owner-content .wa-admin-trow > span,
    .wa-owner-managers .wa-admin-trow > span { flex: 1 0 100%; }
    /* Un nombre sin espacios (un identificador pegado) no puede ensanchar la
       fila ni salirse: parte donde haga falta. */
    .wa-owner-content .wa-admin-trow > span { overflow-wrap: anywhere; }
    /* Las acciones, alineadas a la izquierda bajo el título en vez de
       repartidas: en una fila propia el espaciado por defecto las separaba
       hasta parecer tres controles inconexos. */
    .wa-owner-content .wa-admin-trow .wa-admin-trash,
    .wa-owner-managers .wa-admin-trow .wa-admin-trash { flex: 0 0 auto; }

    /* Mensajes directos: la fila del hilo sufría ESTE MISMO problema, pero se
       quedó fuera del arreglo de arriba por no ser .wa-owner-content ni
       .wa-owner-managers. Medido a 375px: el nombre se quedaba en 116px y
       "María del Carmen Fernández-Villalba" se partía en cuatro líneas, con la
       fecha y el chip "New" flotando a su derecha; la fila pasaba de 43px a
       159px de alto. Nombre + recurso ocupan su línea, y la fecha y el chip
       fluyen debajo. (Marc, 2026-09-13) */
    body.wa-owner .wa-owner-block .wa-contact-row { flex-wrap: wrap; }
    body.wa-owner .wa-owner-block .wa-contact-row > span:first-child {
        flex: 1 0 100%; overflow-wrap: anywhere;
    }
}

/* Control Center: "content reminder" tool (hides/stays/experiences nudge). */
.wa-owner-reminder-admin { margin: 24px 0 10px; padding: 16px 18px; border: 1px solid #d7e8dc; border-radius: 14px; background: #f5faf6; }
.wa-owner-reminder-admin .wa-admin-subtitle { margin-top: 0; }

.wa-reminder-chips { display: flex; flex-wrap: wrap; gap: var(--wag-space-8); margin: 10px 0 14px; }
.wa-reminder-chip {
    padding: 7px 16px;
    border: 1px solid #b9d1c0;
    border-radius: var(--wag-radius-999);
    background: var(--wag-surface);
    color: #315742;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.wa .wa-reminder-chip:hover { border-color: var(--wag-accent); }
.wa-reminder-chip.is-active { background: var(--wag-accent); border-color: var(--wag-accent); color: #fff; }

/* X para descartar una fila del preview de recordatorios. Los cuatro estados
   declarados: es un <button> suelto y Astra le pinta su fondo azul en hover y
   focus si se deja alguno sin cubrir. */
.wa-owner-reminder-admin .wa-reminder-drop,
.wa-owner-reminder-admin .wa-reminder-drop:hover,
.wa-owner-reminder-admin .wa-reminder-drop:focus,
.wa-owner-reminder-admin .wa-reminder-drop:active {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    margin-left: 8px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2d3d3;
    border-radius: 50%;
    background: transparent;
    box-shadow: var(--wag-shadow-14);
    outline: none;
    color: #b06a5e;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}
.wa-owner-reminder-admin .wa-reminder-drop:hover,
.wa-owner-reminder-admin .wa-reminder-drop:focus {
    border-color: #b3422b;
    color: #b3422b;
}
.wa-owner-reminder-admin .wa-reminder-drop:focus-visible {
    outline: 2px solid #b3422b;
    outline-offset: 2px;
}
.wa-reminder-chip--first { border-style: dashed; }

.wa-reminder-examples { display: flex; flex-direction: column; gap: var(--wag-space-8); padding: 12px 0; border-top: 1px dashed #d7e8dc; border-bottom: 1px dashed #d7e8dc; margin-bottom: 4px; }
.wa-reminder-example-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: #607567; }
.wa-reminder-example-row input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 6px 10px;
    border: 1px solid #d7e8dc;
    border-radius: var(--wag-radius-8);
    font-size: 12.5px;
    color: #1a2230;
}

@media (max-width: 700px) {
    .wa-reminder-example-row { flex-direction: column; align-items: flex-start; gap: var(--wag-space-4); }
    .wa-reminder-example-row input { width: 100%; }
}

/* Content resource switcher */
body.wa-owner .wa-owner-switch {
    display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
    background: var(--wa-card); border: 1px solid var(--wa-line); border-radius: var(--wag-radius-12); padding: 10px 14px;
}
body.wa-owner .wa-owner-switch label { font-size: var(--wag-text-12); font-weight: 700; color: var(--wa-muted); text-transform: uppercase; letter-spacing: .5px; }
body.wa-owner .wa-owner-resource-select { border: 1px solid var(--wa-line); border-radius: 9px; padding: 8px 10px; font-size: var(--wag-text-14); font-weight: 600; color: var(--wa-ink); }

/* General empty state (any section that returns a standalone notice) */
body.wa-owner .wa-profile-empty {
    background: var(--wa-card); border: 1px dashed var(--wa-line); border-radius: var(--wag-type-profile-empty-radius, var(--wag-style-profile-empty-radius));
    padding: 22px; color: var(--wa-muted); font-size: var(--wag-text-14); text-align: center; margin: 4px 0;
}

/* Bookings — settings panel + request rows as kit cards */
.wa-bk-settings {
    
    box-shadow: var(--wag-shadow-12); 
    
}
.wa-bk-set-field { color: var(--wa-muted, #7a8fa8); }
.wa-bk-set-field input,
.wa-bk-block input,
.wa-bk-block select { border: 1px solid var(--wa-line, #e3e8ee); border-radius: 9px; padding: 8px 10px; font-size: var(--wag-text-14); }
.wa-bk-row-owner {
    display: flex; 
    background: var(--wa-card, #fff); border: 1px solid var(--wa-line, #e3e8ee); border-radius: var(--wag-radius-16);
    padding: 16px 18px; box-shadow: var(--wag-shadow-12);
}
.wa-bk-row-owner .wa-bk-main { display: flex; flex-direction: column; gap: var(--wag-space-4); flex: 1 1 240px; min-width: 0; }
.wa-bk-prod a { font-size: 15px; }
.wa-bk-contact a { font-weight: 600; }
.wa-bk-note-row {
    background: #f7f9fb; border: 1px solid #eef1f4; border-radius: 9px;
    padding: 8px 11px; 
    flex-basis: 100%;
}
.wa-bk-row-owner .wa-claim-pill { align-self: flex-start; flex-shrink: 0; }
/* CT pending note — full-width row below the pill/actions */
.wa-bk-ct-pending-note { flex-basis: 100%; display:flex; align-items:flex-start; gap:10px; background:#eef7f1; border:1px solid #b8dfc9; border-radius:10px; padding:11px 14px; margin-top:4px; font-size:var(--wag-text-13); color:#1a3a2a; line-height:1.5; }
.wa-bk-ct-pending-icon { font-size:var(--wag-text-16); flex-shrink:0; color:#1a6a3a; margin-top:1px; }
.wa-bk-row-owner .wa-bk-actions { display: flex; align-items: center; gap: var(--wag-space-8); flex-wrap: wrap; }
.wa-bk-row-owner .wa-bk-act {
    border: none; border-radius: 9px; padding: 8px 14px; font-size: var(--wag-text-13); font-weight: 700; cursor: pointer;
}
.wa-bk-row-owner .wa-claim-approve { background: var(--wag-type-claim-approve-bg, var(--wag-style-claim-approve-bg)); color: var(--wag-type-claim-approve-ink, var(--wag-style-claim-approve-ink)); }
.wa .wa-bk-row-owner .wa-claim-approve:hover { background: var(--wag-type-claim-approve-hover-bg, var(--wag-style-claim-approve-hover-bg)); }
.wa-bk-row-owner .wa-claim-reject { background: #fbe9e6; color: var(--wag-type-claim-reject-ink, var(--wag-style-claim-reject-ink)); }
.wa-bk-block {
    background: var(--wa-card, #fff); border: 1px solid var(--wa-line, #e3e8ee); border-radius: 14px; padding: 14px 16px; margin-top: 8px;
}

/* Reviews — cards consistent with the kit */
body.wa-owner .wa-owner-reviews { display: flex; flex-direction: column; gap: var(--wag-space-12); }
body.wa-owner .wa-owner-review {
    background: var(--wa-card); border: 1px solid var(--wa-line); border-radius: var(--wag-radius-16);
    padding: 16px 18px; box-shadow: var(--wag-shadow-12);
}
body.wa-owner .wa-owner-review-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
body.wa-owner .wa-owner-review-head strong { color: var(--wa-ink); font-size: 14.5px; }
body.wa-owner .wa-owner-review-stars { color: #e8a317; letter-spacing: 1px; }
body.wa-owner .wa-owner-review-head em { color: var(--wa-muted); font-size: 12.5px; margin-left: auto; font-style: normal; }
body.wa-owner .wa-owner-review-body { color: #2d3640; font-size: var(--wag-text-14); line-height: 1.55; }
body.wa-owner .wa-owner-review-response {
    background: #f4f9f5; border-left: 3px solid var(--wa-accent); border-radius: var(--wag-radius-8);
    padding: 10px 12px; margin-top: 10px; font-size: 13.5px;
}
body.wa-owner .wa-owner-review-reply textarea {
    width: 100%; border: 1px solid var(--wa-line); border-radius: 10px; padding: 9px 11px; font-size: 13.5px; margin-top: 8px;
}
body.wa-owner .wa-owner-review-mod { display: flex; align-items: center; gap: var(--wag-space-8); flex-wrap: wrap; margin-top: 10px; font-size: 12.5px; }

/* Analytics — recent-followers feed as kit rows */
body.wa-owner .wa-feed { display: flex; flex-direction: column; gap: 6px; }
body.wa-owner .wa-feed-row {
    display: flex; align-items: center; justify-content: space-between; gap: var(--wag-space-12);
    background: var(--wa-card); border: 1px solid var(--wa-line); border-radius: var(--wag-radius-12); padding: 11px 14px;
}
body.wa-owner .wa-feed-body { font-size: 13.5px; color: #2d3640; }
body.wa-owner .wa-feed-body strong { color: var(--wa-ink); }
body.wa-owner .wa-feed-label { color: var(--wa-muted); }
body.wa-owner .wa-feed-resource { font-weight: 700; color: var(--wa-accent); }
body.wa-owner .wa-feed-time { color: var(--wa-muted); font-size: var(--wag-text-12); white-space: nowrap; }

/* Customize — layout rows as kit rows */
body.wa-owner .wa-cz { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
body.wa-owner .wa-cz-row {
    display: flex; align-items: center; gap: var(--wag-space-12);
    background: var(--wa-card); border: 1px solid var(--wa-line); border-radius: var(--wag-radius-12); padding: 10px 14px;
}
body.wa-owner .wa-cz-handle { display: inline-flex; gap: var(--wag-space-4); }
body.wa-owner .wa-cz-handle button {
    width: 26px; height: 26px; border: 1px solid var(--wa-line); background: #f7f9fb;
    border-radius: 7px; cursor: pointer; color: var(--wa-ink); font-size: var(--wag-text-13); line-height: 1;
}
body.wa-owner .wa-cz-handle button:hover { background: #eef3f8; }
body.wa-owner .wa-cz-name { font-weight: 700; color: var(--wa-ink); font-size: var(--wag-text-14); }
body.wa-owner .wa-cz-fixed { margin-left: auto; color: var(--wa-muted); font-size: var(--wag-text-12); font-style: italic; }
body.wa-owner .wa-cz-toggle { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: var(--wag-text-13); color: var(--wa-muted); font-weight: 600; }
body.wa-owner .wa-cz-actions { margin-top: 14px; display: flex; align-items: center; gap: 10px; }

/* Security: hide Add Shortcode floating buttons for owners + editor pages.
   CSS is the last-resort fallback — JS + PHP dequeue are the primary blockers. */
body.wa-owner [aria-label*="hortcode"],
body.wa-owner [title*="hortcode"],
body.wa-owner [class*="shortcode_button"],
body.wa-owner [class*="su_button"],
body.wa-owner .insert-shortcode,
body.wa-owner .shortcodes-btn,
body.page-template-page-admin-edit [aria-label*="hortcode"],
body.page-template-page-admin-edit [title*="hortcode"],
body.page-template-page-admin-edit [class*="shortcode_button"],
body.page-template-page-admin-edit [class*="su_button"],
body.page-template-page-admin-edit .insert-shortcode,
body.page-template-page-admin-edit .shortcodes-btn { display: none !important; }

@media (max-width: 720px) {
    .wa-stat-row { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   USER DASHBOARD (/profile/) — inherits the SaaS kit (body.wa-profile)
   Pure presentation; no logic changes.
   ============================================================ */
body.wa-profile { --wa-card:var(--wag-color-white); --wa-line:var(--wag-color-line); --wa-ink:var(--wag-ink); --wa-muted:var(--wag-color-muted); --wa-accent:var(--wag-accent); --wa-attention:var(--wag-color-attention); }
body.wa-profile .profile-card.wa-page-card { background: var(--wag-type-panel-private-bg, var(--wag-style-panel-privado-bg)); }

/* Tabs → flat menu, centered, with dropdown groups (Observations / Social) */
body.wa-profile .profile-tabs {
    display: flex; flex-wrap: wrap; gap: 0; padding-bottom: 0; justify-content: center; align-items: center;
}
body.wa-profile .wa-owner-tab {
    display: inline-flex; align-items: center; gap: 7px; position: relative; white-space: nowrap; flex-shrink: 0;
    padding: 14px 18px; border: 0; border-bottom: 3px solid transparent; border-radius: 0;
    background: none; color: #aab2bb; font-weight: 600; font-size: var(--wag-text-13);
}
body.wa-profile .wa-owner-tab .wa-tab-ico { opacity: .85; }
body.wa-profile .wa-owner-tab:hover { background: none; color: var(--wag-type-owner-tab-hover-ink, var(--wag-style-owner-tab-hover-ink)); }
body.wa-profile .wa-owner-tab.is-active { background: none; color: var(--wag-type-owner-tab-ink, var(--wag-style-owner-tab-ink)); border-bottom-color: var(--wag-type-owner-tab-underline, var(--wag-style-owner-tab-underline)); }
body.wa-profile .wa-nav-caret { opacity: .7; margin-left: 1px; }

/* Vertical separators between top-level items (incl. groups) */
body.wa-profile .wa-profile-nav > a + a::before,
body.wa-profile .wa-profile-nav > a + .wa-nav-group::before,
body.wa-profile .wa-profile-nav > .wa-nav-group + a::before,
body.wa-profile .wa-profile-nav > .wa-nav-group + .wa-nav-group::before {
    content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    height: 16px; width: 1px; background: rgba(255,255,255,.14); z-index: 1;
}
body.wa-profile .wa-profile-nav > .wa-nav-group,
/* Dropdown menus (floating, rounded) */
body.wa-profile .wa-nav-group{ position: relative; }
body.wa-profile .wa-nav-menu {
    position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%) translateY(-4px); 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; transition: opacity .14s, transform .14s, visibility .14s;
}
body.wa-profile .wa-nav-group:hover .wa-nav-menu,
body.wa-profile .wa-nav-group:focus-within .wa-nav-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
body.wa-profile .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; text-transform: none; letter-spacing: 0;
}
body.wa-profile .wa-nav-item .wa-tab-ico { color: var(--wa-accent); opacity: .9; }
body.wa-profile .wa-nav-item:hover { background: #f3f6f9; color: var(--wa-ink); }
body.wa-profile .wa-nav-item.is-active { background: #eaf3ee; color: var(--wa-accent); }

/* Observations filter bar */
body.wa-profile .wa-obs-filterbar { display: flex; align-items: center; gap: var(--wag-space-12); margin: 0 0 14px; }
body.wa-profile .wa-obs-filter-pill { background: #eaf3ee; color: var(--wa-accent); border-radius: var(--wag-radius-999); padding: 6px 14px; font-size: var(--wag-text-13); font-weight: 700; text-transform: capitalize; }
body.wa-profile .wa-obs-filter-clear { color: var(--wa-muted); font-size: var(--wag-text-13); font-weight: 600; text-decoration: none; }
body.wa-profile .wa-obs-filter-clear:hover { color: var(--wa-ink); }

/* Empty states + cards inherit the kit look */
body.wa-profile .wa-profile-empty {
    background: var(--wa-card); border: 1px dashed var(--wa-line); border-radius: var(--wag-type-profile-empty-radius, var(--wag-style-profile-empty-radius));
    padding: 26px 22px; color: var(--wa-muted); font-size: var(--wag-text-14); text-align: center; margin: 4px 0;
}
body.wa-profile .wa-profile-card {
    background: var(--wa-card); border: 1px solid var(--wa-line); border-radius: var(--wag-radius-16); overflow: hidden;
    box-shadow: var(--wag-shadow-12); transition: box-shadow .12s, transform .05s; text-decoration: none;
}
body.wa-profile .wa-profile-card:hover { box-shadow: 0 12px 28px -18px rgba(20,40,30,.5); transform: translateY(-1px); }
body.wa-profile .wa-profile-pagination { display: flex; align-items: center; justify-content: center; gap: var(--wag-space-12); margin-top: 18px; }
body.wa-profile .wa-profile-page-btn { border: 1px solid var(--wa-line); background: var(--wag-surface); border-radius: 9px; padding: 8px 14px; font-weight: 700; color: var(--wa-ink); text-decoration: none; }
body.wa-profile .wa-profile-page-info { color: var(--wa-muted); font-size: var(--wag-text-13); }

/* My submissions — status-first cards instead of borrowed admin table rows. */
body.wa-profile .wa-submissions-head {
    display: flex; align-items: flex-end; justify-content: space-between; gap: var(--wag-space-20);
    margin: 0 0 16px; padding: 0 2px;
}
body.wa-profile .wa-submissions-head span {
    display: block; margin-bottom: 4px; color: var(--wa-accent);
    font-size: 10px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase;
}
body.wa-profile .wa-submissions-head h2 { margin: 0; color: var(--wa-ink); font-size: clamp(21px, 3vw, 28px); }
body.wa-profile .wa-submissions-head > strong {
    display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 10px;
    border-radius: var(--wag-radius-12); background: #eaf3ee; color: var(--wa-accent); font-size: 15px;
}
body.wa-profile .wa-submissions-list { display: grid; gap: 11px; }
body.wa-profile .wa-submission-card {
    display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; grid-template-areas: "visual copy actions";
    /* start, no center: con la miniatura ya cuadrada, centrar dejaba las
       tarjetas con barra de progreso descolgadas respecto a las demás. */
    align-items: center; gap: 6px 12px; padding: 10px 12px;
    /* Altura mínima común para que la lista no parezca un serrucho entre las
       fichas normales y las de borrador, que llevan barra de progreso. */
    min-height: 0;
    border: 1px solid var(--wa-line); border-radius: var(--wag-radius-16); background: var(--wa-card);
    box-shadow: 0 10px 30px -26px rgba(20,40,30,.5);
}
body.wa-profile .wa-submission-visual {
    /* Cuadrada 1:1: antes se estiraba a lo alto de la fila (align-self:stretch),
       así que la foto salía deformada y distinta en cada tarjeta
       (Marc, 2026-08-30). */
    grid-area: visual; align-self: center; aspect-ratio: 1 / 1; width: 50px; overflow: hidden;
    border-radius: var(--wag-radius-12); background: #eef3f0; color: #6d8978;
}
body.wa-profile .wa-submission-visual img { display: block; width: 100%; height: 100%; object-fit: cover; }
body.wa-profile .wa-submission-visual > span { display: grid; place-items: center; width: 100%; height: 100%; }
body.wa-profile .wa-submission-copy { grid-area: copy; min-width: 0; }
body.wa-profile .wa-submission-type { color: #6d7c73; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
body.wa-profile .wa-submission-copy h3 {
    display: flex; align-items: center; gap: 6px; min-width: 0; margin: 1px 0;
    color: #203229; font-size: 14.5px; line-height: 1.25;
}
/* El truncado se muda del h3 al texto: si lo dejara en el h3, el chip contaría
   como parte del texto a recortar y desaparecería antes que el título. */
body.wa-profile .wa-submission-title { overflow: hidden; min-width: 0; text-overflow: ellipsis; white-space: nowrap; }
body.wa-profile .wa-submission-copy time { color: #8b9890; font-size: 11.5px; }
body.wa-profile .wa-submission-progress { display: flex; align-items: center; gap: 10px; max-width: 260px; margin-top: 6px; }
body.wa-profile .wa-submission-progress > span { position: relative; flex: 1; height: 5px; overflow: hidden; border-radius: var(--wag-radius-999); background: #dde6e2; }
body.wa-profile .wa-submission-progress > span::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--wa-draft-progress, 0%); border-radius: inherit; background: #27845e; }
body.wa-profile .wa-submission-progress small { flex: 0 0 auto; color: #75827d; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
body.wa-profile .wa-submission-copy .wa-claim-pill { flex: 0 0 auto; white-space: nowrap; }
/* Acciones: alineadas al borde derecho de la tarjeta, mismo hueco entre ellas
   que el de la rejilla, y todas a la misma altura aunque una envuelva texto. */
body.wa-profile .wa-submission-actions {
    grid-area: actions; display: flex; align-items: center; justify-content: flex-end;
    gap: 7px; flex-wrap: nowrap;
}
body.wa-profile .wa-sub-action {
    display: inline-flex; align-items: center; justify-content: center; min-height: 28px; margin: 0 !important; padding: 5px 10px !important;
    border: 1px solid #dce4df !important; border-radius: 9px !important; background: #f7f9f8 !important; color: #42564a !important;
    box-shadow: var(--wag-shadow-15) !important; font-family: inherit !important; font-size: 11.5px !important; font-weight: 750 !important; line-height: 1.2 !important;
    letter-spacing: 0 !important; text-decoration: none !important; text-transform: none !important; cursor: pointer;
}
/* Todos con el molde de .is-primary — misma caja, mismo peso — y cada uno con
   su color (Marc, 2026-08-30). is-danger era el único sin fondo ni borde y se
   leía como un enlace suelto entre botones. */
body.wa-profile .wa-sub-action.is-primary { border-color: #cbe2d5 !important; background: #eaf5ee !important; color: #1f7a4d !important; }
body.wa-profile .wa-sub-action.is-danger { border-color: #ecd2cc !important; background: #fbeeec !important; color: #a94b3a !important; }

/* Las píldoras de estado adoptan la misma caja para que la fila se lea como un
   conjunto. cursor:default porque NO son botones: informan, no se pulsan. */
body.wa-profile .wa-submission-copy .wa-claim-pill {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 19px; padding: 2px 7px;
    border: 1px solid transparent; border-radius: 6px;
    font-size: 10px; font-weight: 800; letter-spacing: .02em; line-height: 1.2; cursor: default;
}
body.wa-profile .wa-submission-copy .wa-claim-pill.is-draft   { border-color: #dbe1e8; background: #eef1f5; color: #5a6b7e; }
body.wa-profile .wa-submission-copy .wa-claim-pill.is-pending { border-color: #f0ddba; background: var(--wag-type-claim-pill-bg, var(--wag-style-claim-pill-bg)); color: var(--wag-type-claim-pill-ink, var(--wag-style-claim-pill-ink)); }
body.wa-profile .wa-submission-copy .wa-claim-pill.is-approved{ border-color: #cbe2d5; background: #e6f4ec; color: var(--wag-accent); }
body.wa-profile .wa-submission-copy .wa-claim-pill.is-rejected{ border-color: var(--wag-type-claim-pill-line, var(--wag-style-claim-pill-line)); background: #fbe9e6; color: #b3422b; }

/* Hover explícito, como el resto de botones del sitio, en vez de un
   brightness() genérico que apagaba también el texto. */
body.wa .wa-profile .wa-sub-action:hover,
body.wa-profile .wa-sub-action:hover { border-color: #c3cec8 !important; background: #eef2f0 !important; }
body.wa-profile .wa-sub-action.is-primary:hover { border-color: #b3d7c2 !important; background: #dff0e6 !important; }
body.wa-profile .wa-sub-action.is-danger:hover  { border-color: #e0b8b0 !important; background: #f7e2de !important; }
body.wa-profile .wa-sub-reason { margin-top: 6px; }

html[data-theme="dark"] body.wa-profile .wa-submissions-head h2,
html[data-theme="dark"] body.wa-profile .wa-submission-copy h3 { color: #e8efea; }
html[data-theme="dark"] body.wa-profile .wa-submissions-head > strong { background: #1c3528; color: #79ca9a; }
html[data-theme="dark"] body.wa-profile .wa-submission-card { border-color: #2b3430; background: #171d19; box-shadow: var(--wag-shadow-14); }
html[data-theme="dark"] body.wa-profile .wa-submission-visual { background: #222c27; color: #82978b; }
html[data-theme="dark"] body.wa-profile .wa-submission-type,
html[data-theme="dark"] body.wa-profile .wa-submission-copy time { color: #91a198; }
html[data-theme="dark"] body.wa-profile .wa-sub-action { border-color: #34423a !important; background: #202823 !important; color: #c6d1ca !important; }
html[data-theme="dark"] body.wa-profile .wa-sub-action.is-primary { border-color: #315840 !important; background: #1d3728 !important; color: #7ed29f !important; }
html[data-theme="dark"] body.wa-profile .wa-sub-action.is-danger { border-color: #4a322c !important; background: #2c1d1a !important; color: #e58d7d !important; }
html[data-theme="dark"] body.wa-profile .wa-sub-action:hover { border-color: #46564c !important; background: #26302a !important; }
html[data-theme="dark"] body.wa-profile .wa-sub-action.is-primary:hover { border-color: #3d6b4e !important; background: #234331 !important; }
html[data-theme="dark"] body.wa-profile .wa-sub-action.is-danger:hover { border-color: #5e3f37 !important; background: #38241f !important; }
/* Píldoras de estado: mismo criterio que el resto del tema oscuro — el tono al
   22 % de fondo y una versión clara del color para el texto. */
html[data-theme="dark"] body.wa-profile .wa-submission-copy .wa-claim-pill.is-draft    { border-color: rgba(90,107,126,.42);  background: var(--wag-type-claim-pill-dark-bg, var(--wag-style-claim-pill-dark-bg));  color: var(--wag-type-claim-pill-dark-ink, var(--wag-style-claim-pill-dark-ink)); }
html[data-theme="dark"] body.wa-profile .wa-submission-copy .wa-claim-pill.is-pending  { border-color: rgba(168,107,26,.42);  background: rgba(168,107,26,.24);  color: #e8b569; }
html[data-theme="dark"] body.wa-profile .wa-submission-copy .wa-claim-pill.is-approved { border-color: rgba(31,122,77,.42);   background: rgba(31,122,77,.22);   color: #79d49b; }
html[data-theme="dark"] body.wa-profile .wa-submission-copy .wa-claim-pill.is-rejected { border-color: var(--wag-type-claim-pill-dark-line, var(--wag-style-claim-pill-dark-line));   background: rgba(179,66,43,.22);   color: #f0a08e; }

@media (max-width: 640px) {
    body.wa-profile .wa-submission-card {
        grid-template-columns: 48px minmax(0, 1fr);
        grid-template-areas: "visual copy" "actions actions";
        align-items: start;
    }
    body.wa-profile .wa-submission-card { min-height: 0; }
    /* Reparten el ancho a partes iguales y con altura táctil, en vez de quedar
       apelotonados a la izquierda con el tamaño de escritorio. */
    body.wa-profile .wa-submission-actions { justify-content: flex-start; gap: var(--wag-space-8); }
    body.wa-profile .wa-sub-action { flex: 1 1 auto; min-height: 38px !important; }
    body.wa-profile .wa-submission-visual { width: 48px; }
}

/* ============================================================
   ADMIN CONTROL CENTER — inherits the SaaS kit (scoped body.wa-admin)
   Pure presentation; no logic changes. Slightly more operational tone.
   ============================================================ */
body.wa-admin { --wa-card:var(--wag-color-white); --wa-line:var(--wag-color-line); --wa-ink:var(--wag-ink); --wa-muted:var(--wag-color-muted); --wa-accent:var(--wag-accent); --wa-attention:var(--wag-color-attention); }
body.wa-admin .profile-card.wa-page-card { background: var(--wag-type-panel-private-bg, var(--wag-style-panel-privado-bg)); }

/* The header itself creates a stacking context. Keep that whole context above
   sticky section shortcuts such as .wa-business-jump, otherwise a submenu
   with z-index:50 is still trapped below the later sticky nav (z-index:20). */
body.wa-admin .wildatlas-feature-band-hero-banner { z-index: 40; }

/* Tabs → flat menu with underline indicator (no rounded pills) */
body.wa-admin .profile-tabs { gap: 0; flex-wrap: wrap; padding-bottom: 0; justify-content: center; }
body.wa-admin .wa-owner-tab {
    display: inline-flex; align-items: center; gap: 7px; position: relative;
    padding: 14px 20px; border: 0; border-bottom: 3px solid transparent; border-radius: 0;
    background: none; color: #aab2bb; font-weight: 600; font-size: var(--wag-text-13);
}
body.wa-admin .wa-owner-tab .wa-tab-ico { opacity: .85; }
body.wa-admin .wa-owner-tab:hover { background: none; color: var(--wag-type-owner-tab-hover-ink, var(--wag-style-owner-tab-hover-ink)); }
body.wa-admin .wa-owner-tab.is-active { background: none; color: var(--wag-type-owner-tab-ink, var(--wag-style-owner-tab-ink)); border-bottom-color: var(--wag-type-owner-tab-underline, var(--wag-style-owner-tab-underline)); }
body.wa-admin .wa-owner-tab.is-active .wa-tab-ico { opacity: 1; }

/* Grouped nav with hover/focus dropdowns (keeps everything on one row) */
body.wa-admin .wa-admin-nav { flex-wrap: wrap; align-items: center; }
body.wa-admin .wa-nav-group { position: relative; }
body.wa-admin .wa-nav-caret { opacity: .7; margin-left: 1px; }
/* Vertical separators between top-level items (incl. groups) */
body.wa-admin .wa-admin-nav > a + a::before,
body.wa-admin .wa-admin-nav > a + .wa-nav-group::before,
body.wa-admin .wa-admin-nav > .wa-nav-group + a::before,
body.wa-admin .wa-admin-nav > .wa-nav-group + .wa-nav-group::before {
    content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    height: 16px; width: 1px; background: rgba(255,255,255,.14); z-index: 1;
}
body.wa-admin .wa-admin-nav > .wa-nav-group { position: relative; }
body.wa-admin .wa-nav-menu {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 50; min-width: 190px;
    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-admin .wa-nav-group:hover .wa-nav-menu,
body.wa-admin .wa-nav-group:focus-within .wa-nav-menu { opacity: 1; visibility: visible; transform: translateY(0); }
body.wa-admin .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-admin .wa-nav-item .wa-tab-ico { color: var(--wa-accent); opacity: .9; }
body.wa-admin .wa-nav-item:hover { background: #f3f6f9; color: var(--wa-ink); }
body.wa-admin .wa-nav-item.is-active { background: #eaf3ee; color: var(--wa-accent); }

/* Section eyebrow titles */
body.wa-admin .wa-admin-subtitle {
    font-size: var(--wag-text-12); font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
    color: var(--wa-muted); margin: 26px 0 12px;
}
body.wa-admin .wa-admin-subtitle:first-child { margin-top: 0; }

/* KPI stat boxes */
body.wa-admin .wa-admin-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--wag-space-12); }
body.wa-admin .wa-admin-kpis .wa-obs-stat {
    display: flex; flex-direction: column-reverse; gap: var(--wag-space-4);
    background: var(--wa-card); border: 1px solid var(--wa-line); border-radius: 14px; padding: 16px 18px; text-align: left;
    color: var(--wa-muted); font-size: 12.5px; font-weight: 600;
}
body.wa-admin .wa-admin-kpis .wa-obs-stat span { font-size: 26px; font-weight: 800; color: var(--wa-ink); line-height: 1; }

/* Alerts → chips/cards */
body.wa-admin .wa-admin-alerts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
body.wa-admin .wa-admin-alert {
    display: flex; align-items: center; gap: 10px; text-decoration: none;
    background: var(--wa-card); border: 1px solid var(--wa-line); border-radius: var(--wag-radius-12); padding: 12px 14px;
    color: var(--wa-muted); font-size: 13.5px; font-weight: 600;
}
body.wa-admin .wa-admin-alert-n { font-size: 17px; font-weight: 800; color: var(--wa-ink); }
body.wa-admin .wa-admin-alert.is-warn { background: #fdf2f0; border-color: #f3c9c3; color: #7a2a1c; }
body.wa-admin .wa-admin-alert.is-warn .wa-admin-alert-n { color: var(--wa-attention); }
body.wa-admin a.wa-admin-alert.is-warn:hover { border-color: #e9a89e; }

/* Octopus Cockpit — operational diagnostics */
body.wa-admin .wa-cockpit-health { margin-top: 30px; padding: 22px; border: 1px solid var(--wa-line); border-radius: 18px; background: linear-gradient(145deg,#fff 0%,#fbfcfd 100%); box-shadow: 0 18px 45px -38px rgba(19,36,50,.45); }
body.wa-admin .wa-cockpit-health-head { display:flex; align-items:flex-start; justify-content:space-between; gap:22px; }
body.wa-admin .wa-cockpit-eyebrow { display:block; margin-bottom:5px; color:#a7632b; font-size:10.5px; font-weight:900; letter-spacing:1.4px; text-transform:uppercase; }
body.wa-admin .wa-cockpit-health-head h3 { margin:0; color:var(--wa-ink); font-size:23px; letter-spacing:-.35px; }
body.wa-admin .wa-cockpit-health-head p { margin:5px 0 0; color:var(--wa-muted); font-size:var(--wag-text-13); }
body.wa-admin .wa-oct-run { display:inline-flex; align-items:center; gap:var(--wag-space-8); flex:0 0 auto; border:1px solid #a9622b; border-radius:11px; padding:11px 15px; background:#ad652e; color:#fff; font-size:12.5px; font-weight:800; cursor:pointer; box-shadow:0 8px 18px -12px rgba(120,61,20,.8); }
body.wa-admin .wa-oct-run:hover { background:#944f20; border-color:#944f20; }
body.wa-admin .wa-oct-run:disabled { opacity:.65; cursor:wait; }
body.wa-admin .wa-oct-run.is-running span { animation:wa-diag-spin .8s linear infinite; }
@keyframes wa-diag-spin { to { transform:rotate(360deg); } }
body.wa-admin .wa-cockpit-health-kpis { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:20px 0 12px; }
body.wa-admin .wa-cockpit-health-kpis>div { display:flex; flex-direction:column; gap:var(--wag-space-4); padding:14px 16px; border:1px solid var(--wa-line); border-radius:var(--wag-radius-12); background:var(--wag-surface); }
body.wa-admin .wa-cockpit-health-kpis strong { font-size:var(--wag-text-24); line-height:1; color:var(--wa-ink); }
body.wa-admin .wa-cockpit-health-kpis span { color:var(--wa-muted); font-size:11.5px; font-weight:700; }
body.wa-admin .wa-cockpit-health-kpis .is-critical { background:#fff5f3; border-color:#f1c8c0; }
body.wa-admin .wa-cockpit-health-kpis .is-critical strong { color:#a43d2b; }
body.wa-admin .wa-cockpit-health-kpis .is-review { background:#fff9eb; border-color:#eed9a8; }
body.wa-admin .wa-cockpit-health-kpis .is-review strong { color:#98641c; }
body.wa-admin .wa-cockpit-health-kpis .is-pass { background:#f2faf5; border-color:#cfe7d7; }
body.wa-admin .wa-cockpit-health-kpis .is-pass strong { color:#23734b; }
body.wa-admin .wa-cockpit-alert-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:9px; }
body.wa-admin .wa-cockpit-alert { display:flex; align-items:center; gap:10px; min-height:54px; padding:10px 12px; border:1px solid var(--wa-line); border-radius:11px; background:var(--wag-surface); color:var(--wa-muted); text-decoration:none; }
body.wa-admin .wa-cockpit-alert strong { display:grid; place-items:center; min-width:30px; height:30px; border-radius:9px; background:#eef3f5; color:var(--wa-ink); font-size:15px; }
body.wa-admin .wa-cockpit-alert span { font-size:12.5px; font-weight:700; line-height:1.25; }
body.wa-admin .wa-cockpit-alert.is-critical.has-items { border-color:#efc3bb; background:#fff7f5; color:#823426; }
body.wa-admin .wa-cockpit-alert.is-critical.has-items strong { background:#f6dcd7; color:#a23e2c; }
body.wa-admin .wa-cockpit-alert.is-review.has-items { border-color:#ead49d; background:#fffaf0; color:#7b571c; }
body.wa-admin .wa-cockpit-alert.is-review.has-items strong { background:#f7e8bd; color:#8b5c13; }
body.wa-admin .wa-cockpit-alert.is-info.has-items { border-color:#bfdce8; background:#f4fbfe; color:#356b82; }
body.wa-admin .wa-cockpit-alert.is-info.has-items strong { background:#dceff6; color:#2f6f89; }
body.wa-admin a.wa-cockpit-alert:hover { transform:translateY(-1px); box-shadow:0 7px 18px -15px rgba(24,40,50,.7); }
body.wa-admin .wa-cockpit-issues { margin-top:14px; border:1px solid var(--wa-line); border-radius:var(--wag-radius-12); overflow:hidden; background:var(--wag-surface); }
body.wa-admin .wa-cockpit-issues h4 { margin:0; padding:12px 14px; background:#f5f7f8; color:var(--wa-ink); font-size:var(--wag-text-12); text-transform:uppercase; letter-spacing:.7px; }
body.wa-admin .wa-cockpit-issues .wa-cockpit-issue-group { margin:0; padding:8px 14px; border-top:1px solid #e4e9ec; background:#fbf7f1; color:#8a542b; font-size:var(--wag-text-11); font-weight:800; letter-spacing:.45px; }
body.wa-admin .wa-cockpit-issues>div { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:11px 14px; border-top:1px solid #edf0f2; }
body.wa-admin .wa-cockpit-issues span { display:flex; flex-direction:column; gap:2px; }
body.wa-admin .wa-cockpit-issues strong { color:var(--wa-ink); font-size:var(--wag-text-13); }
body.wa-admin .wa-cockpit-issues small { color:var(--wa-muted); font-size:11.5px; }
body.wa-admin .wa-cockpit-issues a { color:#a15a25; font-size:var(--wag-text-12); font-weight:800; text-decoration:none; white-space:nowrap; }
body.wa-admin .wa-diagnostic-result { margin-top:14px; border:1px solid var(--wa-line); border-radius:var(--wag-radius-12); overflow:hidden; background:var(--wag-surface); }
body.wa-admin .wa-diag-summary { display:flex; justify-content:space-between; gap:var(--wag-space-12); padding:12px 14px; background:#f5f7f8; font-size:var(--wag-text-12); }
body.wa-admin .wa-diag-summary.is-ok { background:#eff8f2; color:#216d47; }
body.wa-admin .wa-diag-summary.is-fail { background:#fff1ef; color:#963828; }
body.wa-admin .wa-diag-summary span { opacity:.8; }
body.wa-admin .wa-diag-tests { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
body.wa-admin .wa-diag-tests>div { display:flex; gap:var(--wag-space-8); align-items:center; padding:10px 13px; border-top:1px solid #edf0f2; color:var(--wa-muted); font-size:var(--wag-text-12); }
body.wa-admin .wa-diag-tests>div:nth-child(odd) { border-right:1px solid #edf0f2; }
body.wa-admin .wa-diag-tests .is-pass b { color:#248054; }
body.wa-admin .wa-diag-tests .is-fail b { color:#ad3f2c; }
@media(max-width:720px){body.wa-admin .wa-cockpit-health-head{flex-direction:column}body.wa-admin .wa-oct-run{width:100%;justify-content:center}body.wa-admin .wa-cockpit-health-kpis,
body.wa-admin .wa-diag-tests{grid-template-columns:1fr}body.wa-admin .wa-diag-tests>div:nth-child(odd){border-right:0}}

/* Recent activity → column cards */
body.wa-admin .wa-admin-activity { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
body.wa-admin .wa-admin-col {
    background: var(--wa-card); border: 1px solid var(--wa-line); border-radius: 14px; padding: 16px 18px;
}
body.wa-admin .wa-admin-col h4 { margin: 0 0 10px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--wa-muted); font-weight: 800; }
body.wa-admin .wa-admin-row { display: flex; align-items: center; gap: var(--wag-space-8); padding: 6px 0; font-size: var(--wag-text-13); color: #2d3640; border-top: 1px solid #f2f4f6; }
body.wa-admin .wa-admin-row:first-of-type { border-top: 0; }
body.wa-admin .wa-admin-row img { border-radius: 50%; }
body.wa-admin .wa-admin-row a { color: var(--wa-ink); font-weight: 600; text-decoration: none; }
body.wa-admin .wa-admin-row em { margin-left: auto; color: var(--wa-muted); font-size: 11.5px; font-style: normal; }

/* Modules → cards with toggle */
body.wa-admin .wa-admin-modules { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--wag-space-12); }
body.wa-admin .wa-admin-module {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    background: var(--wa-card); border: 1px solid var(--wa-line); border-radius: 14px; padding: 14px 16px;
}
body.wa-admin .wa-admin-module-info { min-width: 0; }
body.wa-admin .wa-admin-module-name { display: block; font-weight: 800; color: var(--wa-ink); font-size: var(--wag-text-14); }
/* min-width:0 + break-word: a long unbreakable token in a description (a
   slash-joined list, a URL…) otherwise forces this flex item wider than its
   grid column and pushes the whole card out of the container (Marc,
   2026-08-02 — this specific body.wa-admin block has higher specificity
   than the bare .wa-admin-module-desc rule further down, so both need it). */
body.wa-admin .wa-admin-module-desc { display: block; color: var(--wa-muted); font-size: 12.5px; margin-top: 2px; overflow-wrap: break-word; word-break: break-word; }
body.wa-admin .wa-switch {
    flex-shrink: 0; width: 44px; height: 25px; border-radius: var(--wag-radius-999); border: none; background: #cdd5dd;
    position: relative; cursor: pointer; transition: background .15s;
}
body.wa-admin .wa-switch.is-on { background: var(--wa-accent); }
body.wa-admin .wa-switch-knob { position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: var(--wag-surface); transition: left .15s; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
body.wa-admin .wa-switch.is-on .wa-switch-knob { left: 22px; }

/* Content / Business toolbars, tables, rows */
body.wa-admin .wa-admin-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
body.wa-admin .wa-admin-search { flex: 1 1 240px; border: 1px solid var(--wa-line); border-radius: 10px; padding: 10px 12px; font-size: var(--wag-text-14); }
body.wa-admin .wa-admin-country-form { display: contents; }
body.wa-admin .wa-admin-country-select { border: 1px solid var(--wa-line); border-radius: 10px; padding: 10px 12px; font-size: 13.5px; background: var(--wag-surface); cursor: pointer; color: var(--wa-ink); max-width: 200px; }
body.wa-admin .wa-admin-filter { border: 1px solid var(--wa-line); border-radius: var(--wag-type-filter-admin-radius, var(--wag-style-filter-admin-radius)); padding: 10px 12px; font-size: var(--wag-text-14); background: var(--wag-surface); }
body.wa-admin .wa-admin-trow-country { font-size: var(--wag-text-12); color: #5f7f9f; background: #eef5fa; border-radius: var(--wag-radius-20); padding: 3px 9px; text-decoration: none; white-space: nowrap; }
/* Quién creó el hotspot (Contenido → Hotspots, 2026-10-04). */
body.wa-admin .wa-admin-trow-author { font-size: var(--wag-text-12); color: #6b7785; white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
body.wa-admin .wa-admin-trow-country:hover { background: #d8eaf5; color: #1a5070; }
body.wa-admin .wa-admin-typetabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
body.wa-admin .wa-admin-chip {
    border: 1px solid var(--wa-line); background: var(--wag-surface); border-radius: var(--wag-radius-999); padding: 7px 14px;
    font-size: var(--wag-text-13); font-weight: 700; color: #5a6b78; cursor: pointer; text-decoration: none;
}
body.wa-admin .wa-admin-chip.is-active { background: var(--wag-type-filter-admin-chip-bg, var(--wag-style-filter-admin-chip-bg)); border-color: var(--wag-type-filter-admin-chip-line, var(--wag-style-filter-admin-chip-line)); color: var(--wag-type-filter-admin-chip-ink, var(--wag-style-filter-admin-chip-ink)); }
body.wa-admin .wa-admin-new { background: var(--wa-accent) !important; color: var(--wag-type-admin-new-ink, var(--wag-style-admin-new-ink)) !important; border: none !important; border-radius: var(--wag-type-admin-new-radius, var(--wag-style-admin-new-radius)); padding: 10px 16px; font-weight: 800; font-size: 13.5px; text-decoration: none; cursor: pointer; }
body.wa-admin .wa-admin-new:hover { background: #1a6a43 !important; color: var(--wag-type-admin-new-hover-ink, var(--wag-style-admin-new-hover-ink)) !important; }
body.wa-admin .wa-admin-table, body.wa-admin .wa-admin-tlist { display: flex; flex-direction: column; gap: var(--wag-space-8); }
body.wa-admin .wa-admin-trow {
    display: flex; align-items: center; gap: var(--wag-space-12); flex-wrap: wrap;
    background: var(--wa-card); border: 1px solid var(--wa-line); border-radius: var(--wag-radius-12); padding: 12px 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
body.wa-admin .wa-admin-trow-title { font-weight: 700; color: var(--wa-ink); }
body.wa-admin .wa-admin-trow-title a { color: var(--wa-ink); text-decoration: none; }
body.wa-admin .wa-admin-trow-actions { margin-left: auto; display: flex; align-items: center; gap: var(--wag-space-8); flex-wrap: wrap; }
body.wa-admin .wa-admin-trash { border-radius: var(--wag-radius-8); font-size: var(--wag-text-12); font-weight: 700; padding: 7px 11px; background: none !important; border: none !important; color: #d92638; cursor: pointer; }
body.wa-admin .wa-admin-wplink { color: var(--wa-muted); font-size: 12.5px; text-decoration: none; }
body.wa-admin .wa-admin-saved, body.wa-admin .wa-admin-health-clean { color: var(--wag-accent); background: #f0f8f3; border: 1px solid #d6ebdf; border-radius: 10px; padding: 12px 14px; font-size: 13.5px; }
body.wa-admin .wa-admin-noimg { color: var(--wa-muted); font-style: italic; }

/* Claims / business cards */
body.wa-admin .wa-claim-admin-list { display: flex; flex-direction: column; gap: var(--wag-space-12); }
body.wa-admin .wa-claim-admin-card {
    background: var(--wa-card); border: 1px solid var(--wa-line); border-radius: var(--wag-radius-16); padding: 16px 18px;
    box-shadow: var(--wag-shadow-12);
}
body.wa-admin .wa-claim-admin-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
body.wa-admin .wa-claim-rtitle { font-weight: 800; color: var(--wa-ink); }
body.wa-admin .wa-claim-admin-actions { display: flex; align-items: center; gap: var(--wag-space-8); flex-wrap: wrap; margin-top: 10px; }

/* Pending operator: "Make submitter owner" checkbox */
body.wa-admin .wa-pop-own-label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--wa-muted); white-space: nowrap; }
body.wa-admin .wa-pop-own-label input { accent-color: var(--wag-accent); cursor: pointer; }

/* Manual assign owner block */
body.wa-admin .wa-manual-assign-wrap { background: var(--wa-card); border: 1px solid var(--wa-line); border-radius: var(--wag-radius-16); padding: 18px 20px; }
body.wa-admin .wa-manual-assign-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; align-items: flex-end; }
body.wa-admin .wa-manual-assign-field { display: flex; flex-direction: column; gap: 5px; flex: 0 0 auto; }
body.wa-admin .wa-manual-assign-field--search { flex: 1 1 200px; position: relative; }
body.wa-admin .wa-manual-assign-label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--wa-muted); }
body.wa-admin .wa-manual-assign-actions { display: flex; align-items: center; gap: 10px; }
body.wa-admin .wa-admin-select { height: 38px; border: 1px solid var(--wa-line); border-radius: var(--wag-radius-8); padding: 0 10px; font-size: 13.5px; background: var(--wag-surface); }
body.wa-admin .wa-admin-input { height: 38px; border: 1px solid var(--wa-line); border-radius: var(--wag-radius-8); padding: 0 10px; font-size: 13.5px; width: 100%; box-sizing: border-box; }
body.wa-admin .wa-admin-suggest { position: absolute; top: 100%; left: 0; right: 0; z-index: 200; background: var(--wag-surface); border: 1px solid var(--wa-line); border-radius: 10px; box-shadow: 0 8px 24px -8px rgba(20,40,30,.18); overflow: hidden; margin-top: 3px; }
body.wa-admin .wa-suggest-item { padding: 9px 12px; font-size: 13.5px; cursor: pointer; transition: background .12s; }
body.wa-admin .wa-suggest-item:hover { background: #f2f6f4; }

/* Pagination */
body.wa-admin .wa-profile-pagination { display: flex; align-items: center; justify-content: center; gap: var(--wag-space-12); margin-top: 18px; }
body.wa-admin .wa-profile-page-btn { border: 1px solid var(--wa-line); background: var(--wag-surface); border-radius: 9px; padding: 8px 14px; font-weight: 700; color: var(--wa-ink); text-decoration: none; }
body.wa-admin .wa-profile-page-info { color: var(--wa-muted); font-size: var(--wag-text-13); }

/* Empty state */
body.wa-admin .wa-profile-empty {
    background: var(--wa-card); border: 1px dashed var(--wa-line); border-radius: var(--wag-type-profile-empty-radius, var(--wag-style-profile-empty-radius));
    padding: 22px; color: var(--wa-muted); font-size: var(--wag-text-14); text-align: center; margin: 4px 0;
}

/* WAPS Species Inspector */
body.wa-admin .wa-waps-insp { background: var(--wa-card); border: 1px solid var(--wa-line); border-radius: var(--wag-radius-16); padding: 16px 18px; margin: 12px 0; box-shadow: var(--wag-shadow-12); }
body.wa-admin .wa-waps-insp-head { display: flex; gap: var(--wag-space-16); align-items: flex-start; flex-wrap: wrap; }
body.wa-admin .wa-waps-hero-thumb { position: relative; width: 120px; height: 90px; border-radius: var(--wag-radius-12); background: #eef1f4 center/cover no-repeat; display: flex; align-items: center; justify-content: center; color: #9aa4b1; font-size: 22px; flex-shrink: 0; }
/* Delete-hero trash button — Marc, 2026-08-04: one-click removal of the photo
   shown at the top of the Inspector, not buried in the candidate gallery. */
body.wa-admin .wa-waps-trash {
    position: absolute; top: 5px; right: 5px; width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(20, 24, 28, .55); color: #fff; border: none; border-radius: 7px;
    cursor: pointer; transition: background .15s, transform .15s;
}
body.wa-admin .wa .wa-waps-trash:hover,
body.wa-admin .wa .wa-waps-trash:focus-visible { background: #c0392b; transform: translateY(-1px); }
body.wa-admin .wa-waps-insp-title { font-size: var(--wag-text-16); font-weight: 800; color: var(--wa-ink); }
body.wa-admin .wa-waps-insp-title em { font-style: italic; color: #8a9a90; font-weight: 400; font-size: var(--wag-text-13); }
body.wa-admin .wa-waps-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
body.wa-admin .wa-waps-badge { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: var(--wag-radius-999); background: #f1f4f7; color: #5a6b78; }
body.wa-admin .wa-waps-cands { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--wag-space-12); margin-top: 14px; }
body.wa-admin .wa-waps-cand { border: 1px solid var(--wa-line); border-radius: var(--wag-radius-12); padding: 8px; background: var(--wag-surface); }
body.wa-admin .wa-waps-cand.is-hero { border-color: #1f8a52; box-shadow: 0 0 0 1px #1f8a52; }
body.wa-admin .wa-waps-cand.is-rejected { opacity: .55; }
body.wa-admin .wa-waps-cand-thumb { aspect-ratio: 4/3; border-radius: var(--wag-radius-8); background: #eef1f4 center/cover no-repeat; margin-bottom: 8px; }
body.wa-admin .wa-waps-cand-row { display: flex; align-items: center; gap: 6px; font-size: var(--wag-text-13); color: var(--wa-ink); }
body.wa-admin .wa-waps-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
body.wa-admin .wa-waps-src { color: #8a9a90; font-size: var(--wag-text-12); }
body.wa-admin .wa-waps-cand-sub { font-size: 11.5px; color: #8a9a90; margin: 2px 0; }
body.wa-admin .wa-waps-pen { font-size: var(--wag-text-11); color: #e0392b; margin-bottom: 4px; }
body.wa-admin .wa-waps-cand-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
body.wa-admin .wa-waps-mini { border: 1px solid var(--wa-line); background: #f7f9fb; border-radius: var(--wag-radius-8); padding: 5px 9px; font-size: var(--wag-text-12); font-weight: 700; cursor: pointer; color: #3a566f; }
body.wa-admin .wa-waps-mini.wa-waps-set { background: #1f8a52; color: #fff; border-color: #1f8a52; }
body.wa-admin .wa-waps-herotag { font-size: var(--wag-text-12); font-weight: 700; color: #1f8a52; }
body.wa-admin .wa-waps-search-results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40; background: var(--wag-surface); border: 1px solid var(--wa-line); border-radius: var(--wag-radius-12); padding: 6px; box-shadow: var(--wag-shadow-7); }
body.wa-admin .wa-waps-search-results[hidden] { display: none; }
body.wa-admin .wa-waps-sresult { display: flex; flex-direction: column; align-items: flex-start; width: 100%; text-align: left; border: 0; background: none; padding: 8px 11px; border-radius: var(--wag-radius-8); cursor: pointer; }
body.wa-admin .wa-waps-sresult:hover { background: #f3f6f9; }
body.wa-admin .wa-waps-sresult strong { font-size: 13.5px; color: var(--wa-ink); font-weight: 700; }
body.wa-admin .wa-waps-sresult em { font-size: var(--wag-text-12); color: #8a9a90; font-style: italic; }

@media (max-width: 720px) {
    body.wa-admin .wa-admin-kpis { grid-template-columns: repeat(2, 1fr); }
}

/* ── ENTITY EDITOR — SaaS card skin (hide / experience / hotspot) ─────────── */
.wa-admin-editor { display: flex; flex-direction: column; gap: 18px; }
.wa-edit-card {
    background: var(--wag-surface); border: 1px solid #e6eaee; border-radius: 18px;
    padding: 22px 24px; box-shadow: 0 10px 30px -24px rgba(20,40,30,.45);
}
.wa-edit-card-head { display: flex; align-items: flex-start; gap: var(--wag-space-12); margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid #eef1f4; }
.wa-edit-card-head .wa-edit-ico {
    color: #1f8a52; background: #eaf6ef; border-radius: 10px; padding: 7px; width: 34px; height: 34px; flex-shrink: 0; box-sizing: content-box; margin-left: 6px;
}
.wa-edit-card-title { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.2px; color: #16323f; display: flex; align-items: center; gap: var(--wag-space-8); }
.wa-edit-card-sub { margin: 3px 0 0; font-size: var(--wag-text-13); color: #7a8794; line-height: 1.45; }
.wa-edit-card .wa-ro-tag { font-size: var(--wag-text-11); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #1f8a52; background: #eaf6ef; padding: 3px 8px; border-radius: var(--wag-radius-999); }
/* Submit Hotspot — info block at top */
.wa-submit-info-block {
    display: flex; align-items: flex-start; gap: var(--wag-space-12);
    background: #f0f7ff; border: 1px solid #cde0f7; border-radius: 14px;
    padding: 16px 18px; margin-bottom: 20px; font-size: 13.5px; color: #2e4d6a; line-height: 1.55;
}
.wa-submit-info-icon { flex-shrink: 0; color: #2a7fbf; margin-top: 2px; }
.wa-submit-info-text strong { font-weight: 700; color: #16324a; display: block; margin-bottom: 3px; }
.wa-submit-info-photo { display: block; margin-top: 6px; font-size: 12.5px; color: #6a7a8a; }
/* Variante de aviso: el dueño de un negocio ha entrado por el camino de
   naturaleza. Ámbar y no rojo — no ha hecho nada mal, sólo se ha equivocado
   de puerta y hay que desviarlo sin alarmarlo. */
.wa .wa-submit-info-block--warn { background: #fdf6e8; border-color: #edd9ab; color: #6b552a; }
.wa .wa-submit-info-block--warn .wa-submit-info-icon { color: #b8862b; }
.wa .wa-submit-info-block--warn strong { color: #7a5f12; }
.wa .wa-submit-info-block--warn a { color: var(--wag-accent); font-weight: 600; text-decoration: underline; }
/* Amenities checkbox list — more breathing room between items and category groups */
.wa-admin-editor .acf-field[data-name="stay_amenities"] .acf-checkbox-list { line-height: 1; }
.wa-admin-editor .acf-field[data-name="stay_amenities"] .acf-checkbox-list li { padding: 4px 0; }
.wa-admin-editor .acf-field[data-name="stay_amenities"] .acf-checkbox-list li label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13.5px; }
/* Category group headers inside the amenities list */
.wa-admin-editor .acf-field[data-name="stay_amenities"] .acf-checkbox-list .acf-bl-group {
    width: 100%; display: block; font-size: 10px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .06em; color: #8a9aaa;
    padding: 10px 0 4px; margin-top: 6px; border-top: 1px solid #eef1f4;
    clear: both;
}
.wa-admin-editor .acf-field[data-name="stay_amenities"] .acf-checkbox-list .acf-bl-group:first-child { margin-top: 0; padding-top: 0; border-top: none; }

/* ACF + GeoDirectory fields → clean, spacious, consistent */
.wa-admin-editor .acf-field { margin: 0 0 18px; padding: 0; border: none; }
.wa-admin-editor .acf-field .acf-label label,
.wa-admin-editor .gd-fieldset label,
.wa-admin-editor label.gd-label,
.wa-admin-editor .geodir_form_row > label {
    font-weight: 700; color: #2d3640; font-size: 13.5px; margin-bottom: 6px; display: block;
}
.wa-admin-editor .acf-label .description,
.wa-admin-editor .gd-fieldset .description { color: #8b97a3; font-size: 12.5px; }
.wa-admin-editor input[type=text],
.wa-admin-editor input[type=email],
.wa-admin-editor input[type=url],
.wa-admin-editor input[type=number],
.wa-admin-editor input[type=date],
.wa-admin-editor input[type=tel],
.wa-admin-editor select,
.wa-admin-editor textarea,
.wa-admin-editor .acf-input input[type=text],
.wa-admin-editor .acf-input textarea,
.wa-admin-editor .acf-input select {
    width: 100%; box-sizing: border-box; border: 1px solid #d8dee4; border-radius: 10px;
    padding: 10px 12px; font-size: var(--wag-text-14); color: var(--wag-type-field-admin-editor-ink, var(--wag-style-field-admin-editor-ink)); background: var(--wag-surface); transition: border-color .15s, box-shadow .15s;
}
.wa-admin-editor input:focus,
.wa-admin-editor select:focus,
.wa-admin-editor textarea:focus,
.wa-admin-editor .acf-input input:focus,
.wa .wa-admin-editor .acf-input textarea:focus {
    outline: none; border-color: #1f8a52; box-shadow: 0 0 0 3px rgba(31,138,82,.12);
}
.wa-admin-editor textarea { min-height: 110px; resize: vertical; }

/* Submit button → primary WildAtlas green */
.wa-admin-editor .wa-editor-submit,
.wa-admin-editor .acf-button,
.wa-admin-editor input[type=submit] {
    background: #1f8a52; border: none; color: #fff; font-weight: 800; font-size: 14.5px;
    padding: 12px 22px; border-radius: 11px; cursor: pointer; box-shadow: 0 8px 18px -10px rgba(31,138,82,.6);
    transition: background .15s, transform .05s;
}
.wa-admin-editor .wa-editor-submit:hover,
.wa-admin-editor .acf-button:hover,
.wa .wa-admin-editor input[type=submit]:hover { background: #1a7546; }
.wa-admin-editor .wa-editor-submit:active { transform: translateY(1px); }
.wa-admin-editor .acf-form-submit { margin-top: 8px; }

/* Read-only "Species present" table */
.wa-admin-editor .wa-ro-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.wa-admin-editor .wa-ro-table th { text-align: left; color: #7a8794; font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; padding: 8px 10px; border-bottom: 1px solid #eef1f4; }
.wa-admin-editor .wa-ro-table td { padding: 9px 10px; border-bottom: 1px solid #f2f4f6; color: #2d3640; }
.wa-admin-editor .wa-ro-id { color: #9aa4b1; }
.wa-admin-editor .wa-ro-sci { font-style: italic; color: #6b7682; }
.wa-admin-editor .wa-admin-editor-note { color: #7a8794; font-size: 13.5px; margin: 0; }

/* Dark mode toggle (moon in light → sun in dark) */
.wa-theme-toggle { background: none; border: 0; cursor: pointer; color: var(--wag-type-theme-toggle-ink, var(--wag-style-theme-toggle-ink)); padding: 4px 6px; display: inline-flex; align-items: center; border-radius: var(--wag-type-theme-toggle-radius, var(--wag-style-theme-toggle-radius)); }
.wa .wa-theme-toggle:hover { color: var(--wag-ink); background: var(--wag-type-theme-toggle-hover-bg, var(--wag-style-theme-toggle-hover-bg)); }
.wa-theme-toggle .wa-th-sun { display: none; }
html[data-theme="dark"] .wa-theme-toggle { color: var(--wag-type-theme-toggle-dark-ink, var(--wag-style-theme-toggle-dark-ink)); }
html[data-theme="dark"] .wa-theme-toggle:hover { color: var(--wag-type-theme-toggle-dark-hover-ink, var(--wag-style-theme-toggle-dark-hover-ink)); background: var(--wag-type-theme-toggle-dark-hover-bg, var(--wag-style-theme-toggle-dark-hover-bg)); }
html[data-theme="dark"] .wa-theme-toggle .wa-th-moon { display: none; }
html[data-theme="dark"] .wa-theme-toggle .wa-th-sun { display: inline-flex; }
.wa-theme-toggle--inline { vertical-align: middle; margin-right: 6px; }
.wa-account-menu-lang { align-items: center; gap: 6px; }

/* ============================================================
   DARK MODE — global palette (html[data-theme="dark"])
   ============================================================ */
html[data-theme="dark"] body { background: #0f1318; color: #ccd3da; }
/*html[data-theme="dark"] body a { color: #fff; }*/
html[data-theme="dark"] body h1, html[data-theme="dark"] body h2, html[data-theme="dark"] body h3,
html[data-theme="dark"] body h4, html[data-theme="dark"] body h5 { color: var(--wag-dark-ink); }

/* SaaS kit areas re-point their tokens → Owner/Admin/Profile go dark for free */
html[data-theme="dark"] body.wa-owner, html[data-theme="dark"] body.wa-admin, html[data-theme="dark"] body.wa-profile {
    --wa-card: var(--wag-color-dark-surface); --wa-line: var(--wag-color-dark-line); --wa-ink: var(--wag-dark-ink); --wa-muted: var(--wag-color-dark-muted); --wa-accent: var(--wag-dark-accent); --wa-attention: var(--wag-color-dark-attention);
}
html[data-theme="dark"] body.wa-owner .profile-card.wa-page-card,
html[data-theme="dark"] body.wa-admin .profile-card.wa-page-card,
html[data-theme="dark"] body.wa-profile .profile-card.wa-page-card { background: var(--wag-type-panel-private-dark-bg, var(--wag-style-panel-privado-dark-bg)); }

/* Generic content surfaces */
html[data-theme="dark"] body .profile-card,
html[data-theme="dark"] body .wa-page-card { background: var(--wag-type-panel-dark-bg, var(--wag-style-panel-dark-bg)); color: var(--wag-type-panel-dark-ink, var(--wag-style-panel-dark-ink)); }
html[data-theme="dark"] body .wa-edit-card,
html[data-theme="dark"] body .wa-owner-card,
html[data-theme="dark"] body .wa-owner-block,
html[data-theme="dark"] body .wa-stat,
html[data-theme="dark"] body .wa-bk-settings,
html[data-theme="dark"] body .wa-owner-review,
html[data-theme="dark"] body .wa-bk-row-owner { background: var(--wag-dark-surface); border-color: #2a313a; border-radius: var(--wag-radius-8);}
html[data-theme="dark"] body input,
html[data-theme="dark"] body select,
html[data-theme="dark"] body textarea { background: #11161c; color: var(--wag-dark-ink); border-color: #2a313a; }
html[data-theme="dark"] body .wa-admin-trow,
html[data-theme="dark"] body .wa-admin-col,
html[data-theme="dark"] body .wa-admin-module,
html[data-theme="dark"] body .wa-admin-search,
html[data-theme="dark"] body .wa-admin-filter,
html[data-theme="dark"] body .wa-admin-chip { background: var(--wag-dark-surface); border-color: var(--wag-type-admin-row-dark-line, var(--wag-style-admin-row-dark-line)); color: var(--wag-type-admin-row-dark-ink, var(--wag-style-admin-row-dark-ink)); }
html[data-theme="dark"] body .wa-obs-stat { background: var(--wag-dark-surface); color: #fff; border-color: #2a313a;}
html[data-theme="dark"] body .wa-obs-stat span { color: #fff; }
html[data-theme="dark"] body :is(.wa-obs-suggest, .wa-obs-suggest-add, .wa-obs-extras, .wa-obs-notes) { background: var(--wag-dark-surface); border-color: #2a313a; color: #ccd3da; }
html[data-theme="dark"] body :is(.wa-profile, .wa-nav-menu) { background: var(--wag-style-nav-menu-dark-bg);}
html[data-theme="dark"] body .wa-nav-item { color: #ccd3da; }
html[data-theme="dark"] body :is(.wa-profile,
.wa .wa-nav-item:hover) { background: #6b7280; color: var(--wa-ink); }
html[data-theme="dark"] body .wa-obs-edit-form { background: var(--wag-dark-surface); color: #fff; border-color: #2a313a; }


html[data-theme="dark"] body .species-description { color: var(--wag-type-species-description-dark-ink, var(--wag-style-species-description-dark-ink)); }
html[data-theme="dark"] body .wa-profile-empty { background: var(--wag-dark-surface); border-color: var(--wag-type-profile-empty-dark-line, var(--wag-style-profile-empty-dark-line)); color: var(--wag-type-profile-empty-dark-ink, var(--wag-style-profile-empty-dark-ink)); }

/* Hero side filler band (light steel blue → very dark navy) */
html[data-theme="dark"] .wildatlas-feature-band-hero-banner::before { background: var(--wag-dark-hero-side-bg, #0c1119); }
html[data-theme="dark"] body :is(
    .wa-tour-card, .species-hotspot-card, .species-hotspot-card-full, .country-hotspot-card,
    .country-hotspot-card-full, .species-season-card, .species-see-all-card, .species-hotspot-see-all-card,
    .wa-list-card, .wa-dir-card, .wa-search-card, .tour-sidebar-card, .wa-submit-card,
    .wa-collab-panel, .wa-community--boxed, .wa-gal-item, .wa-claim-admin-card,
    .wa-feed-row, .wa-cz-row, .wa-bk-block, .wa-bk-block-list, .wa-suggest-card,
    .wa-obs-suggest-card, .wa-news-row, .wa-admin-alert
){
    background: var(--wag-dark-surface); border-color: var(--wag-type-cards-dark-dark-line, var(--wag-style-tarjeta-oscura-dark-line)); color: var(--wag-type-cards-dark-dark-ink, var(--wag-style-tarjeta-oscura-dark-ink));
}
/* Card text sub-elements → light */
html[data-theme="dark"] body [class*="-card-title"],
html[data-theme="dark"] body [class*="-card-name"],
html[data-theme="dark"] body [class*="-card-count"],
html[data-theme="dark"] body [class*="-card-sub"],
html[data-theme="dark"] body [class*="-card-body"],
html[data-theme="dark"] body .wa-tour-card h1, html[data-theme="dark"] body .wa-tour-card h2,
html[data-theme="dark"] body .wa-tour-card h3, html[data-theme="dark"] body .wa-tour-card h4 { color: var(--wag-dark-ink); }

/* Filters */
html[data-theme="dark"] body .wa-dropdown-trigger {background: var(--wag-dark-surface); border: 1px solid var(--wag-type-filter-dropdown-dark-line, var(--wag-style-filter-dropdown-dark-line)); color: var(--wag-type-filter-dropdown-dark-ink, var(--wag-style-filter-dropdown-dark-ink));}
html[data-theme="dark"] body .wa-dropdown-option { background: var(--wag-dark-surface); color: #fff; }

/* reviews */
html[data-theme="dark"] body .wa-review-text { color: var(--wag-dark-ink); }
html[data-theme="dark"] body .wa-review-author { color: #7fd6a6; }
html[data-theme="dark"] body .wa-reviews-allhead {border-top: 1px solid #2a313a;}

/* Contact module */
html[data-theme="dark"] body .hotspot-contact-card { background: transparent; border-color: #2a313a; color: #cdd4db; }
html[data-theme="dark"] body .hotspot-contact-card a { color: #7fd6a6; }
/* Contact: inner detail + social blocks (were #f8f9fb white) */
html[data-theme="dark"] body .hc-details-block,
html[data-theme="dark"] body .hc-socials-block { background: var(--wag-dark-surface); }
html[data-theme="dark"] body .hc-row { border-bottom-color: #2a313a; }
html[data-theme="dark"] body .hc-row__icon { background: #11161c; color: #93a0ab; box-shadow: var(--wag-shadow-14); }
html[data-theme="dark"] body .hc-row__label,
html[data-theme="dark"] body .hc-block-label { color: #8b97a3; }
html[data-theme="dark"] body .hc-row__value { color: var(--wag-dark-ink); }
html[data-theme="dark"] body .hc-social { background: #11161c; color: #aeb8c2; box-shadow: var(--wag-shadow-14); }
/* Season species: the module wrapper was solid #fff. Make it blend into the
   dark card so the curve reads exactly like the community "Reports by month". */
html[data-theme="dark"] body .species-season-wrapper { background: transparent; }


/* Season species + Iconic wildlife (TOP WILDLIFE) cards */
html[data-theme="dark"] body .species-season-card,
html[data-theme="dark"] body .country-species-card { background: var(--wag-dark-surface); border-color: var(--wag-type-season-card-dark-line, var(--wag-style-tarjeta-temporada-dark-line)); }
html[data-theme="dark"] body .species-season-content,
html[data-theme="dark"] body .country-species-content { background: var(--wag-dark-surface); }
html[data-theme="dark"] body .country-species-spanish,
html[data-theme="dark"] body .species-season-english,
html[data-theme="dark"] body .country-species-english { color: var(--wag-dark-ink); }
html[data-theme="dark"] body .country-species-scientific,
html[data-theme="dark"] body .species-season-scientific { color: var(--wag-type-species-season-scientific-dark-ink, var(--wag-style-species-season-scientific-dark-ink)); }
html[data-theme="dark"] body .country-species-track { background: var(--wag-dark-surface); }

html[data-theme="dark"] body .country-experiences-section::before,
html[data-theme="dark"] body .country-hotspots-section::before,
html[data-theme="dark"] body .country-hides-section::before,
html[data-theme="dark"] body .country-stays-section::before,
html[data-theme="dark"] body .species-experiences-section::before,
html[data-theme="dark"] body .species-hides-section::before,
html[data-theme="dark"] body .species-stays-section::before,
html[data-theme="dark"] body .species-hotspots-section::before,
html[data-theme="dark"] body .hotspot-hides-section::before,
html[data-theme="dark"] body .hotspot-stays-section::before,
html[data-theme="dark"] body .hotspot-packs-section::before,
html[data-theme="dark"] body .hotspot-experiences-section::before { border-top: 1px solid #2a313a; }

/* News module (light gradient box → dark) */
html[data-theme="dark"] body .wa-news { background: var(--wag-type-news-dark-bg, var(--wag-style-news-dark-bg)); border-color: var(--wag-type-news-dark-line, var(--wag-style-news-dark-line)); color: var(--wag-type-news-dark-ink, var(--wag-style-news-dark-ink)); }
html[data-theme="dark"] body .wa-news-featured,
html[data-theme="dark"] body .wa-news-row { background: var(--wag-dark-surface); border-color: #2a313a; }
html[data-theme="dark"] body .wa-news-date { color: var(--wag-type-news-date-dark-ink, var(--wag-style-news-date-dark-ink)); }
html[data-theme="dark"] body .wa-news a { color: #7fd6a6; }

/* Hides & Experiences — boxes + text */
html[data-theme="dark"] body :is(
    .tour-sidebar-card, .tour-sidebar-details, .tour-included-block,
    .tour-detail-row, .hide-chip,
) { background: var(--wag-dark-surface); border-color: #2a313a; color: #cdd4db; }
html[data-theme="dark"] body :is(
    .tour-title, .tour-section-label, .tour-detail-label, .tour-detail-value, .tour-price-amount,
    .tour-price-label, .tour-description, .tour-included-block
) { color: var(--wag-dark-ink); }
html[data-theme="dark"] body .tour-description,
html[data-theme="dark"] body .hide-chip{ color: var(--wag-type-tour-description-dark-ink, var(--wag-style-tour-description-dark-ink)); }
html[data-theme="dark"] body .wa-tour-price-amount { color: var(--wag-type-ficha-tour-price-amount-dark-ink, var(--wag-style-ficha-tour-price-amount-dark-ink)); }
html[data-theme="dark"] body .wa-tour-card__footer {border-top: 1px solid #2a313a;}
html[data-theme="dark"] body .wa-obs-edit,
html[data-theme="dark"] body .wa-list-share{border: 1px solid #2a313a;background: var(--wag-dark-surface);color: #fff;}
html[data-theme="dark"] .wa-obs-create input[type="text"],
html[data-theme="dark"] .wa-obs-create input[type="date"],
html[data-theme="dark"] .wa-obs-create .wa-date-picker,
html[data-theme="dark"] .wa-obs-create select {background: var(--wag-dark-surface);color: var(--wag-dark-ink);border-color: var(--wag-type-date-picker-dark-line, var(--wag-style-date-picker-dark-line));}
html[data-theme="dark"] .wa-obs-import,
html[data-theme="dark"] .wa-obs-import-dialog { background: #161b21; border-color: #2a313a; }
html[data-theme="dark"] .wa-obs-import h3,
html[data-theme="dark"] .wa-obs-import-summary strong { color: #f2f5f7; }
html[data-theme="dark"] .wa-obs-import p,
html[data-theme="dark"] .wa-obs-import-summary span,
html[data-theme="dark"] .wa-obs-import-consent,
html[data-theme="dark"] .wa-obs-import-visibility { color: #aebbc7; }
html[data-theme="dark"] .wa-obs-import-form select,
html[data-theme="dark"] .wa-obs-import-file,
html[data-theme="dark"] .wa-obs-import-visibility select { background: var(--wag-dark-surface); color: var(--wag-dark-ink); border-color: var(--wag-type-field-obs-dark-line, var(--wag-style-field-obs-dark-line)); }
html[data-theme="dark"] .wa-obs-import-previewbox { border-color: #2a313a; }

/* Language switcher (EN | ES) — stylised round flag badges, not text pills.
   Inactive language sits dimmed/greyscale-ish + smaller; the active one is
   full color, slightly larger, with a soft ring (Marc, 2026-08-02: "banderas
   estilizadas, con buen css, no las típicas feas"). */
.wa .wa-langsw { display: inline-flex; align-items: center; gap: var(--wag-space-8); }
/* Round shape forced with !important (Marc, 2026-08-02 — 4th round: the `.wa`
   prefix alone still lost in Local/Edge, so whatever Astra selector is
   winning must be MORE specific than `.wa .wa-langsw-opt` (0,2,0) — e.g. an
   extra class or element in the chain. Going straight to !important on the
   shape-defining properties, same as the ~526 other !important rules in this
   file that exist for exactly this reason (see CLAUDE.md "CSS vs Astra"). */
.wa .wa-langsw-opt {
    box-sizing: border-box !important;
    position: relative !important;
    display: inline-flex !important;
    width: 28px !important; height: 28px !important;
    /* Oval, not round (Marc, 2026-08-02, 5th round): border-radius:50% DID
       win this time, which proves the box itself wasn't actually 24×24 —
       Astra's nav-link padding was very likely being added on top (and
       asymmetrically: more horizontal than vertical, a common touch-target
       pattern), inflating width more than height. Forcing padding/margin/
       line-height to 0 removes anything that could pad the box unevenly;
       box-sizing:border-box keeps the 2px border from adding to the size. */
    padding: 0 !important;
    margin: 0 !important;
    line-height: 0 !important;
    /* Squircle, not circle (Marc, 2026-08-02: liked the square-with-rounded-
       corners look better once the box was actually square). Same radius
       family as the avatar squircle elsewhere in this file. */
    border-radius: 7px !important;
    overflow: hidden !important;
    text-decoration: none; flex-shrink: 0;
    border: 2px solid transparent !important;
    /* Dim with opacity only, NOT filter:saturate() — desaturating the warm
       red+gold Spain flag collapsed it into a muddy brown blob at this size. */
    opacity: .55;
    transition: opacity .15s ease, border-color .15s ease, box-shadow .15s ease;
}
/* Fill the circle by ABSOLUTE positioning, not percentage width/height on the
   svg root — percentages on a nested SVG inside inline-flex ancestors don't
   reliably resolve in every browser; when they fail the SVG falls back to its
   default 300×150 intrinsic size and the circular crop then shows only the
   top-left sliver (both flags are solid red there) — "solo un punto rojo"
   (Marc, 2026-08-02). inset:0 against .wa-langsw-opt's own position:relative
   sidesteps that entirely. */
.wa .wa-langsw-opt svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.wa .wa-langsw-opt:hover { opacity: .85; }
.wa .wa-langsw-opt.is-on {
    opacity: 1;
    border-color: #4fadd4;
    box-shadow: 0 0 0 3px rgba(79,173,212,.20);
}
/* Was #eef1f4 (a light-bg divider colour) sitting inside the dark dropdown —
   showed up as a stray bright white line (Marc, 2026-08-03). Match the same
   subtle divider used elsewhere in this dark menu (.wa-menu-growth-sep). */
.wa-account-menu-lang { display: flex; justify-content: center; padding: 8px 12px 4px; border-top: 1px solid rgba(255,255,255,.08); }
.wa-account-menu-flags { display: flex; justify-content: center; padding: 4px 12px 14px; }
#wa-account-menu .wa-account-menu-flags,
#wa-guest-menu .wa-account-menu-flags { border-top: 1px solid rgba(255,255,255,.08); padding-top: 14px; }
.wa .wa-langsw--inline { margin-right: 8px; vertical-align: middle; }
.wa .wa-langsw--menu .wa-langsw-opt { width: 36px !important; height: 36px !important; }
.wa .wa-langsw--beta { justify-content: center; margin-top: 16px; }

/* Test Mode — Beta Access gate (hides site chrome, centred dark card) */
body.wa-beta-gate #masthead, body.wa-beta-gate .site-header, body.wa-beta-gate header.site-header,
body.wa-beta-gate #colophon, body.wa-beta-gate .site-footer, body.wa-beta-gate footer.site-footer,
body.wa-beta-gate #wa-account-btn-wrap, body.wa-beta-gate .ast-above-header, body.wa-beta-gate .ast-below-header { display: none !important; }
body.wa-beta-gate { background: #10141a; }
.wa-beta-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; width: 100%;}
.wa-beta-card { background: #1a1e24; color: #fff; border-radius: var(--wag-radius-20); padding: 44px 36px; max-width: 420px; width: 100%; text-align: center; box-shadow: 0 24px 70px rgba(0,0,0,.5); }
.wa-beta-logo { font-size: var(--wag-text-13); letter-spacing: .28em; text-transform: uppercase; color: #7fd6a6; font-weight: 800; }
.wa-beta-tag { font-size: 30px; font-weight: 800; margin-top: 6px; letter-spacing: -.5px; }
.wa-beta-msg { color: #aeb8c2; font-size: 15px; line-height: 1.6; margin: 14px 0 22px; }
.wa-beta-btn { background: #1f8a52; color: #fff; border: 0; border-radius: var(--wag-radius-12); font-size: 15px; font-weight: 800; padding: 13px 34px; cursor: pointer; box-shadow: 0 10px 22px -12px rgba(31,138,82,.7); }
.wa .wa-beta-btn:hover { background: #1a7546; }
.wa-beta-foot { color: #6e7884; font-size: 12.5px; margin-top: 18px; }

/* Community gallery — "View all" button + full-page grid */
/* «Ver todas las fotos»: el mismo botón que el «Ver todos» del resto de
   módulos (.wa-hotspot-viewmore-btn), no uno verde propio. Y sin margen
   debajo: el aire hasta el borde lo pone el relleno de .wa-gal, igual que
   arriba (Marc, 2026-09-26). */
.wa-gal-viewall-wrap { text-align: center; margin: 24px 0 0; }
.wa-gal--full { padding: 4px 0; }

/* My photos — likes received pinned to the top-right of the section */
.wa-myphotos { position: relative; }
.wa-myphotos-likes {
    position: absolute; top: 0; right: 0; z-index: 2;
    font-size: 15px; font-weight: 800; color: #c0392b;
    background: #fdecea; border: 1px solid #f5c6c0; border-radius: var(--wag-radius-999); padding: 6px 14px; white-space: nowrap;
}
.wa-myphotos-title { font-size: var(--wag-text-14); font-weight: 700; color: var(--wag-ink); margin-bottom: 16px; }


/* My Photos — section card containers */
.wa-myphotos { display: flex; flex-direction: column; gap: var(--wag-space-20); }
.wa-myphotos-section {
    box-sizing: border-box; width: 100%;
    background: #f5f7fa;
    border-radius: var(--wag-radius-20);
    padding: 22px 24px;
}

html[data-theme="dark"] .wa-myphotos-section {background: var(--wag-dark-surface);}

.wa-myphotos-section-title {
    font-size: var(--wag-text-13); font-weight: 800; color: var(--wag-ink); letter-spacing: .04em;
    text-transform: uppercase; margin: 0 0 16px;
}

html[data-theme="dark"] .wa-myphotos-section-title {color: #059669;}

/* Profile upload box — solidify sp-bar background so inputs look dark on the white profile page */
.wa-gal-wrap--profile .wa-gal-uploadwrap { max-width: 100%; width: 100%; align-items: stretch; }

/* WAPS Coverage — dignified "no photo" placeholder for species card thumbs */
.wa-profile-card-noimg, .wa-obs-suggest-noimg {
    display: block; width: 100%; height: 100%; min-height: 120px;
    background: #eef1f4 center / 38% no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c4cdd5' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.24 4C13 4 6 8.5 6 16.5V19'/%3E%3Cpath d='M6.5 18.5 17.5 7.5'/%3E%3Cpath d='M9 14.5h5'/%3E%3Cpath d='M10.5 11h5'/%3E%3C/svg%3E");
}

/* World Map — premium single-step zoom (wheel toggles in/out, smooth) */
.wildatlas-world-map {
    transform-origin: center center; 
}
.wildatlas-world-map.is-zoomed { transform: scale(1.18); }

/* ── World Map — Country Preview Card (dark, anchored over the country) ───── */
/* z-index 4 → sits UNDER the homepage search/logo overlay (z-index 5). */
.wa-country-preview {
    position: fixed; z-index: 4; width: 230px;
    background: #1a202e; border: 1px solid rgba(255,255,255,.10);
    border-radius: var(--wag-radius-12); overflow: hidden;
    box-shadow: 0 14px 40px rgba(0,0,0,.55);
    opacity: 0; pointer-events: none;
    transition: opacity .14s ease;
}
.wa-country-preview.is-open { opacity: 1; pointer-events: auto; }
/* Arrow tracks the real click anchor (--cp-arrow); flips when shown below */
.wa-country-preview::after {
    content: ""; position: absolute; left: var(--cp-arrow, 50%); bottom: -7px; transform: translateX(-50%);
    border: 7px solid transparent; border-top-color: #1a202e;
}
.wa-country-preview.is-below::after {
    bottom: auto; top: -7px; border-top-color: transparent; border-bottom-color: #1a202e;
}
.wa-cp-img {
    position: relative; height: 150px;
    background-size: cover; background-position: center; background-color: #2a3347;
    display: flex; align-items: flex-end;
}
.wa-cp-img::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,.72) 100%);
}
.wa-cp-img.is-loading {
    background-image: linear-gradient(90deg, #232c3e 0%, #2c374d 50%, #232c3e 100%);
    background-size: 200% 100%; animation: wa-cp-shimmer 1.1s linear infinite;
}
@keyframes wa-cp-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.wa-cp-eyebrow {
    position: absolute; top: 10px; left: 12px; right: 12px; z-index: 2;
    font-size: 9.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
    color: rgba(255,255,255,.85); text-shadow: 0 1px 6px rgba(0,0,0,.6);
}
.wa-cp-en {
    position: relative; z-index: 2; padding: 0 14px 11px;
    font-size: var(--wag-text-18); font-weight: 800; color: #fff; line-height: 1.1;
    text-shadow: 0 2px 10px rgba(0,0,0,.6);
}
.wa-cp-body { padding: 11px 14px 14px; }
.wa-cp-es  { font-size: var(--wag-text-13); font-weight: 600; color: #e4e8ef; line-height: 1.2; }
.wa-cp-sci { font-size: var(--wag-text-12); font-style: italic; color: #93a0b5; margin-top: 2px; }
.wa-cp-cta {
    display: block; text-align: center; margin-top: 12px; padding: 10px 14px;
    border-radius: 9px; background: #e0392b; color: #fff; font-weight: 800;
    font-size: 12.5px; text-transform: uppercase; letter-spacing: .6px; text-decoration: none;
    transition: background .12s;
}
.wa .wa-cp-cta:hover,
.wa .wa-cp-cta:focus {
    background: #c9301f !important;
    color: #fff !important;
    text-decoration: none !important;
}
.wa-cp-close {
    position: absolute; top: 9px; right: 9px; z-index: 3;
    width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; border: 1px solid rgba(255,255,255,.22);
    background: rgba(20,26,40,.5); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
    color: #fff; font-size: var(--wag-text-18); line-height: 1; cursor: pointer; padding: 0;
    transition: background .12s, border-color .12s;
}
.wa .wa-cp-close:hover { background: rgba(20,26,40,.85); border-color: rgba(255,255,255,.4); }

/* Photos import pipeline (Wikidata → iNaturalist) */
.wa-photo-pipeline { display: flex; gap: 14px; flex-wrap: wrap; margin: 6px 0 4px; }
.wa-photo-step { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 6px;
    padding: 14px; border: 1px solid #e1e8ee; border-radius: var(--wag-radius-12); background: #f7faf8; }
.wa-photo-step-help { font-size: var(--wag-text-12); color: #6b7a70; line-height: 1.45; }

/* Booking date legend */
.wa-bk-legend {
    display: flex; align-items: center; gap: 7px;
    font-size: var(--wag-text-12); color: #8a9a90; margin-bottom: 2px;
}
.wa-bk-legend-dot {
    width: 11px; height: 11px; border-radius: 3px;
    background: #fdeceb; border: 1px solid #e8b3ae;
}

.wa-bk-submit { margin-top: 4px; cursor: pointer; border: 0; }
.wa-bk-help { margin: 8px 0 0; font-size: 11.5px; line-height: 1.5; color: #8a9a90; }
/* Stay price quote (live breakdown) */
.wa-bk-quote {
    margin: 6px 0 10px; padding: 12px 14px; border-radius: var(--wag-type-bk-quote-radius, var(--wag-style-bk-quote-radius));
    background: #f3f8f5; border: 1px solid #dcebe2; font-size: var(--wag-text-13); color: #2c3a33;
}
.wa-bk-quote.is-warn { background: var(--wag-type-bk-quote-bg, var(--wag-style-bk-quote-bg)); border-color: var(--wag-type-bk-quote-line, var(--wag-style-bk-quote-line)); color: var(--wag-type-bk-quote-ink, var(--wag-style-bk-quote-ink)); }
.wa-bk-quote-line { display: flex; justify-content: space-between; gap: var(--wag-space-12); padding: 2px 0; }
.wa-bk-quote-discount { color: #1f8a52; }
.wa-bk-quote-total {
    margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--wag-type-bk-quote-total-topline, var(--wag-style-bk-quote-total-topline));
    font-weight: 800; font-size: var(--wag-text-14); color: var(--wag-type-bk-quote-total-ink, var(--wag-style-bk-quote-total-ink));
}
/* Depósito: lo que se cobra hoy destacado sobre el resto, porque es el número
   que el cliente va a ver en su tarjeta esta misma tarde. */
.wa-bk-quote-split {
    margin-top: 8px; padding-top: 9px; border-top: 1px dashed var(--wag-type-bk-quote-split-topline, var(--wag-style-bk-quote-split-topline));
}
.wa-bk-quote-due { font-weight: 800; font-size: 14.5px; color: var(--wag-type-bk-quote-due-ink, var(--wag-style-bk-quote-due-ink)); }
.wa-bk-quote-rest { color: var(--wag-type-bk-quote-rest-ink, var(--wag-style-bk-quote-rest-ink)); }
.wa-bk-quote-note { margin: 6px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--wag-type-bk-quote-note-ink, var(--wag-style-bk-quote-note-ink)); }
.wa-bk-feedback.is-error {
    margin-top: 8px; padding: 8px 11px; border-radius: var(--wag-type-bk-feedback-radius, var(--wag-style-bk-feedback-radius));
    background: var(--wag-type-bk-feedback-bg, var(--wag-style-bk-feedback-bg)); color: var(--wag-type-bk-feedback-ink, var(--wag-style-bk-feedback-ink)); font-size: var(--wag-text-13);
}
/* Bookings: internal "Contact operator" / "Messages" collapsible thread */
.wa-bk-contact { margin-top: 8px; flex-basis: 100%; }
.wa-bk-contact > summary {
    cursor: pointer; font-size: 12.5px; font-weight: 700; color: #1a7a4a;
    list-style: none; padding: 6px 0; display: inline-flex; align-items: center; gap: 6px;
}
.wa-bk-contact > summary::-webkit-details-marker { display: none; }
.wa .wa-bk-contact > summary:hover { text-decoration: underline; }
.wa-bk-contact .wa-bk-adv-wrap { margin-top: 6px; }
/* «Mensajes» de una reserva / conversación del panel: abre la burbuja
   (wa-chat.js). Va en la barra de acciones con el estilo de sus botones
   neutros ([data-wa-card] .wa-owner-btn, ~línea 3400) y el icono de chat de la
   web. Clase propia y los cuatro estados con .wa delante (Astra no se cuela). */
.wa .wa-bk-chat-open,
.wa .wa-bk-chat-open:focus,
.wa .wa-bk-chat-open:active {
    position: relative; display: inline-flex; align-items: center; gap: 6px;
    margin: 0; padding: 8px 14px; border: 0; border-radius: 9px; box-shadow: var(--wag-shadow-14);
    background: #f1f5f9; color: #334155; cursor: pointer; transform: none;
    font-family: inherit; font-size: var(--wag-text-13); font-weight: 700; line-height: 1.2;
}
.wa .wa-bk-chat-open:hover { background: #e2e8f0; color: #334155; }
.wa .wa-bk-chat-open:focus-visible { outline: 2px solid rgba(43,124,176,.35); outline-offset: 2px; }
.wa .wa-bk-chat-open svg { flex: none; display: block; }
/* Mensajes sin leer: un punto rojo en la esquina, como en la burbuja. */
.wa .wa-bk-chat-open .wa-bk-chat-dot { position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; padding: 0; border-radius: 50%; background: #e0453a; border: 2px solid #fff; font-size: 0; }
html[data-theme="dark"] .wa .wa-bk-chat-open { background: #232b36; color: #d6dee6; }
html[data-theme="dark"] .wa .wa-bk-chat-open:hover { background: #2c3644; }
html[data-theme="dark"] .wa .wa-bk-chat-open .wa-bk-chat-dot { border-color: #1a1f26; }
/* Tarjeta del negocio: «Mensajes» en la línea del nombre del viajero, a la
   derecha, con borde para que se distinga sobre el fondo gris del bloque. */
.wa-bk-guest-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.wa .wa-bk-guest-head .wa-bk-chat-open,
.wa .wa-bk-guest-head .wa-bk-chat-open:focus,
.wa .wa-bk-guest-head .wa-bk-chat-open:active { background: var(--wag-surface); border: 1px solid #dbe3ea; padding: 7px 13px; }
.wa .wa-bk-guest-head .wa-bk-chat-open:hover { background: #f1f5f9; border-color: #c5d0da; }
html[data-theme="dark"] .wa .wa-bk-guest-head .wa-bk-chat-open { background: #1c222a; border-color: #35414d; }
html[data-theme="dark"] .wa .wa-bk-guest-head .wa-bk-chat-open:hover { background: #222b35; }
/* En la pestaña Mensajes del negocio, a la derecha de cada fila. */
.wa .wa-contact-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wa .wa-contact-row .wa-bk-chat-open { margin-left: auto; }

/* Ocultar la burbuja: pequeño, en la esquina del lanzador, sin robarle sitio.
   A la IZQUIERDA porque la derecha es de .wa-chat-badge (:2759), el contador de
   no leídos: los dos vivían en la misma esquina y se pisaban en cuanto había
   una notificación. En escritorio se notaba menos —el aspa solo sale al pasar
   el ratón— pero en móvil está siempre visible y tapaba el número. El contador
   se queda donde todo el mundo lo espera. (Marc, 2026-09-13) */
.wa-chat-dismiss {
    position: absolute; top: -4px; left: -4px;
    width: 20px; height: 20px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border: 1.5px solid #fff; border-radius: 50%;
    background: #4a5a52; color: #fff; cursor: pointer;
    opacity: 0; transform: scale(.8);
    transition: opacity .15s ease, transform .15s ease, background .15s ease;
}
/* Solo al pasar por encima del dock: siempre visible sería un aspa permanente
   sobre la burbuja, y la acción principal es abrir el chat, no esconderlo. */
.wa .wa-chat-dock:hover .wa-chat-dismiss { opacity: 1; transform: scale(1); }

/* En táctil no hay hover, así que el aspa está siempre visible — y ahí sí
   compite con el lanzador. Se reduce y se separa: el aspa es la acción
   secundaria y no debe robarle superficie a la principal.
   Antes eran 20px sobre un lanzador de 50 (un 40 % del diámetro) y montada
   sobre su borde, así que un toque a media distancia caía en el botón grande. */
@media (max-width: 600px) {
    .wa-chat-dismiss {
        width: 20px; height: 20px;
        top: -5px; left: -5px;
        opacity: 1; transform: none;
        background: #6b7a72;
    }
    .wa-chat-dismiss svg { width: 10px; height: 10px; }

    /* Zona de toque de 40px SIN agrandar el dibujo. Es lo que resuelve el "es
       difícil darle": el aspa debe verse pequeña frente a la burbuja, pero un
       objetivo de 20px está muy por debajo del mínimo táctil y el dedo acaba
       cayendo en el lanzador. Se separan las dos cosas — tamaño visual y
       superficie sensible — en vez de elegir entre fallar el toque o tapar el
       botón principal. */
    /* La zona sensible crece HACIA FUERA (arriba y a la izquierda, siguiendo
       al aspa), no centrada: centrada en un aspa que vive sobre el borde del
       lanzador, la mitad del área invisible caía DENTRO del botón grande, así
       que tocar la burbuja cerca de esa esquina la ocultaba en vez de abrir el
       chat. */
    .wa-chat-dismiss::before {
        content: '';
        position: absolute;
        top: -11px; left: -11px;
        width: 33px; height: 33px;
    }
}
.wa .wa-chat-dismiss:hover { background: #16281e; }
.wa-chat-dock.is-open .wa-chat-dismiss { display: none; }

/* El lanzador necesita ser el contexto de posicionamiento del aspa. */
.wa-chat-launcher,
/* Cerrar una conversación desde la lista. */
.wa-chat-item{ position: relative; }
.wa-chat-item-close {
    flex: 0 0 auto;
    width: 24px; height: 24px; padding: 0; margin-left: 4px;
    display: flex; align-items: center; justify-content: center;
    background: none; border: 0; border-radius: 6px;
    color: #b9c4bd; cursor: pointer;
    opacity: 0; transition: opacity .15s ease, background .15s ease, color .15s ease;
}
/* Aparece al pasar por la fila: en una lista de conversaciones, un aspa por
   fila siempre visible invita a cerrar más que a leer. */
.wa .wa-chat-item:hover .wa-chat-item-close { opacity: 1; }
.wa .wa-chat-item-close:hover { background: rgba(0,0,0,.06); color: #3d4d44; }
.wa-chat-item-close:disabled { opacity: .4; cursor: default; }

/* En táctil no hay hover: si no se muestran, no hay forma de cerrar nada. */
@media (hover: none) {
    .wa-chat-dismiss,
    .wa-chat-item-close { opacity: 1; transform: none; }
}

/* ── Chat: llamada a la acción en la ficha ────────────────────────────────── */
.wa-contact-cta {
    margin-top: 14px; padding: 16px; /* barra de acción: 16 arriba/abajo */
    background: var(--wa-card, #fff);
    border: 1px solid var(--wa-line, #e4eae6);
    border-radius: var(--wag-radius-16);
    box-shadow: var(--wag-type-contact-cta-shadow, var(--wag-style-contact-cta-shadow));
    text-align: center;
}
.wa-contact-cta-lead {
    margin: 0 0 12px; font-size: 14.5px; line-height: 1.5; color: var(--wa-text, #1a2230);
}
.wa-contact-cta-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--wag-space-8);
    width: 100%; padding: 12px 18px; border: 0; border-radius: var(--wag-radius-12);
    background: var(--wag-type-contact-bg, var(--wag-style-degradado-marca-bg));
    color: var(--wag-type-contact-ink, var(--wag-style-degradado-marca-ink)); font-size: var(--wag-text-14); font-weight: 700; cursor: pointer;
    box-shadow: var(--wag-type-contact-shadow, var(--wag-style-degradado-marca-shadow));
    transition: filter .15s ease, transform .15s ease;
}
.wa .wa-contact-cta-btn:hover,
.wa .wa-contact-cta-btn:focus {
    color: var(--wag-type-contact-hover-ink, var(--wag-style-degradado-marca-hover-ink));
    filter: brightness(1.08);
    transform: translateY(-1px);
}
.wa-contact-cta-note {
    margin: 10px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--wa-muted, #7d8a80);
}
/* Oscuro, en todas las variantes (tarjeta, tira, gemela de la descripción):
   los colores de la gemela, que era la única que lo tenía. */
html[data-theme="dark"] .wa-contact-cta { background: var(--wag-dark-surface); border-color: var(--wag-type-contact-cta-dark-line, var(--wag-style-contact-cta-dark-line)); box-shadow: var(--wag-shadow-14); }
html[data-theme="dark"] .wa-contact-cta-lead { color: var(--wag-dark-ink); }
html[data-theme="dark"] .wa-contact-cta-lead strong { color: #fff; }
html[data-theme="dark"] .wa-contact-cta-note { color: var(--wag-type-contact-cta-note-dark-ink, var(--wag-style-contact-cta-note-dark-ink)); }

/* ── Variante TIRA: ficha con mapa ───────────────────────────────────────────
   Cuando la columna lateral ya lleva mapa, apilar debajo una segunda tarjeta la
   dejaba muchísimo más alta que la descripción. Aquí el chat cruza las dos
   columnas como una barra baja: botón pegado a la izquierda, texto a la derecha.
   Es hijo directo de la rejilla (lo separa el PHP), de ahí el grid-column. */
.wa-contact-cta--bar {
    grid-column: 1 / -1;
    /* El hueco de ARRIBA no lo pone este margen, lo pone el row-gap de la
       rejilla (24px). Por eso el margen se anula aquí y el espacio se fija
       abajo, en la propia rejilla — si no, se sumarían los dos. */
    margin-top: 0;
    margin-bottom: 10px;
    padding: 16px; /* barra de acción: 16 arriba y abajo */
    display: flex;
    align-items: center;
    gap: var(--wag-space-16);
    text-align: left;
}
.wa-contact-cta--bar .wa-contact-cta-btn {
    order: -1;                 /* en el HTML el botón va detrás del titular */
    width: auto;
    flex: 0 0 auto;
    padding: 10px 18px;
    font-size: 13.5px;
}
/* El titular ("Have a question for X?") sobra en la tira: la etiqueta del botón
   ya dice exactamente eso. Lo que se queda a la derecha es la nota, que es la
   que aporta información — cuándo responden y dónde queda la conversación. */
.wa-contact-cta--bar .wa-contact-cta-lead { display: none; }
.wa-contact-cta--bar .wa-contact-cta-note {
    margin: 0;
    flex: 1 1 auto;
    text-align: right;
}

/* 10px sobre la tira. Va en la rejilla y no en el margen del elemento porque
   quien separa las filas es el row-gap; acotado con :has() para no estrechar el
   layout de las fichas que no llevan tira. */
.wa-desc-map-layout:has(.wa-contact-cta--bar) { row-gap: 10px; }

/* En móvil la rejilla es de una columna: la tira se apila y el texto vuelve
   debajo del botón, porque en 360px no caben en la misma línea. */
@media (max-width: 900px) {
    /* Apilado, ese row-gap separaría también descripción y mapa. */
    .wa-desc-map-layout:has(.wa-contact-cta--bar) { row-gap: var(--wag-space-24); }
    .wa-contact-cta--bar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 16px; /* barra de acción: 16 arriba y abajo */
    }
    .wa-contact-cta--bar .wa-contact-cta-btn { width: 100%; }
    .wa-contact-cta--bar .wa-contact-cta-note { text-align: center; }
}

/* ── Dock de mensajes (abajo-DERECHA) ─────────────────────────────────────────
   Estuvo a la izquierda porque la derecha la ocupaba el #ast-scroll-top de
   Astra. Marc prefiere el chat a la derecha, así que esa flecha se retira (ver
   el bloque SCROLL TO TOP) y la esquina queda libre. */
/* --wa-bottom-bar la publica wa-chat.js: es lo que invade el borde inferior
   cualquier barra fija (Action Pill de especie en móvil, barra Save del editor).
   Vale 0px cuando no hay ninguna, así que en la mayoría de páginas no cambia
   nada. Sumarla aquí evita tener una excepción por pantalla. */
.wa-chat-dock {
    /* 20px: el mismo margen derecho que el menú de la cuenta (2026-10-12). */
    position: fixed; right: 20px; z-index: 99980;
    bottom: calc(20px + var(--wa-bottom-bar, 0px));
    display: flex; flex-direction: column-reverse; align-items: flex-end; gap: var(--wag-space-12);
    transition: bottom .22s ease;
}
/* Oculta hasta la próxima visita (botón X del lanzador). */
.wa-chat-dock.is-dismissed { display: none; }
.wa-chat-dock.is-launcher-hidden .wa-chat-launcher,
/* La ✕ de ocultar va fuera del lanzador (HTML válido), así que no se iba con
   él: con la burbuja oculta (admins sin mensajes, 2026-09-30) quedaba sola en
   la esquina del móvil (Marc, 2026-10-06). */
.wa-chat-dock.is-launcher-hidden .wa-chat-dismiss { display: none !important; }
/* A mobile species action sheet owns the screen; the chat launcher must not
   float over its consent/list controls. Its own state remains untouched. */
body.wa-gallery-sheet-open .wa-chat-dock { display: none; }
/* Y tampoco en la pestaña de mensajes del panel de owner: el dock es fijo
   abajo a la derecha, justo donde cae el botón "Send" de cada conversación —
   medido a 375px, lo tapa. Ahí además sobra: el owner ya está en su bandeja.
   El :has() acota a la única pantalla que pinta hilos de contacto, sin tocar
   el resto del panel. (Marc, 2026-09-13) */
@media (max-width: 700px) {
    body.wa-owner:has(.wa-contact-chat) .wa-chat-dock { display: none; }
}

.wa-chat-launcher {
    position: relative;
    /* padding 0 y border-box: Astra pone relleno lateral a todo <button> y el
       círculo salía de 60×56, ovalado (Marc, 2026-10-12). */
    width: 56px; height: 56px; padding: 0; box-sizing: border-box; flex: 0 0 auto;
    border-radius: 50%; border: 0;
    background: linear-gradient(135deg, #14552f, #1e7a44);
    color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 20px -4px rgba(20,85,47,.55), 0 2px 6px rgba(0,0,0,.14);
    transition: transform .18s ease, filter .18s ease;
}
.wa .wa-chat-launcher:hover { transform: translateY(-2px) scale(1.03); filter: brightness(1.08); }
/* Tamaño explícito: los temas suelen traer reglas globales para svg (Astra
   incluida) y un icono sin medidas fijas acaba colapsado o deformado. */
.wa-chat-launcher .wa-chat-ico {
    width: 26px; height: 26px; display: block; flex: 0 0 auto;
    pointer-events: none;   /* el clic es del botón, no del path */
}
/* Al abrir, el icono se convierte en una X: el mismo botón cierra.
   Dos SVG reales que se alternan — nada de ::after con mask + data-URI, que
   depende de escapar bien los < > del SVG embebido y falla en silencio. */
.wa-chat-launcher .wa-chat-ico-close {
    width: 22px; height: 22px; display: none; flex: 0 0 auto; pointer-events: none;
}
.wa-chat-dock.is-open .wa-chat-launcher .wa-chat-ico { display: none; }
.wa-chat-dock.is-open .wa-chat-launcher .wa-chat-ico-close { display: block; }

.wa-chat-badge {
    position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px;
    padding: 0 5px; border-radius: var(--wag-radius-999); background: #e0392b; color: #fff;
    font-size: var(--wag-text-11); font-weight: 800; line-height: 20px; text-align: center;
    box-shadow: 0 0 0 2px #fff;
}
.wa-chat-badge[hidden] { display: none; }

.wa-chat-panel {
    width: 410px; max-height: min(620px, calc(100vh - 120px));
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--wa-card, #fff);
    border: 1px solid var(--wa-line, #e4eae6); border-radius: 18px;
    box-shadow: 0 12px 48px -12px rgba(18,39,27,.35), 0 2px 8px rgba(0,0,0,.08);
    animation: waChatIn .18s ease-out;
}
.wa-chat-panel[hidden] { display: none; }
@keyframes waChatIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.wa-chat-head {
    display: flex; align-items: center; gap: var(--wag-space-8); flex: 0 0 auto;
    padding: 13px 14px;
    background: linear-gradient(135deg, #14552f, #1e7a44); color: #fff;
}
.wa-chat-title { flex: 1 1 auto; font-size: var(--wag-text-14); font-weight: 700; }
.wa-chat-back, .wa-chat-close {
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--wag-radius-8);
    /* Sin fondo ni sombra (Marc, 2026-10-12): la sombra la ponía Astra a todo
       <button>; con .wa delante gana a esa regla en los cuatro estados. */
    background: none; box-shadow: var(--wag-shadow-14); color: #fff; cursor: pointer;
    transition: opacity .15s ease;
}
.wa .wa-chat-back, .wa .wa-chat-close,
.wa .wa-chat-back:hover, .wa .wa-chat-close:hover,
.wa .wa-chat-back:focus, .wa .wa-chat-close:focus,
.wa .wa-chat-back:active, .wa .wa-chat-close:active { background: none; box-shadow: var(--wag-shadow-14); }
.wa .wa-chat-back:hover,
.wa .wa-chat-close:hover { opacity: .75; }
.wa-chat-back[hidden] { display: none; }

.wa-chat-list { flex: 1 1 auto; overflow-y: auto; padding: 6px; }
.wa-chat-list[hidden] { display: none; }
.wa-chat-item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 11px 12px; border: 0; border-radius: 11px;
    background: none; text-align: left; cursor: pointer;
    transition: background .13s ease;
}
.wa .wa-chat-item:hover { background: var(--wa-soft, #f4f8f5); }
.wa-chat-item-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.wa-chat-item-title {
    font-size: 13.5px; font-weight: 700; color: var(--wa-text, #1a2230);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wa-chat-item-sub {
    font-size: 11.5px; color: var(--wa-muted, #7d8a80);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wa-chat-item-dot {
    flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: #e0392b;
}
/* Aviso legal al abrir la conversación, en la línea del banner de cifrado de
   WhatsApp: una pastilla centrada, discreta, que se lee una vez y luego sube con
   el scroll. Antes vivía bajo el campo de escribir, ocupando 62px fijos de una
   pantalla de móvil justo donde aparece el teclado. */
.wa-chat-legal {
    margin: 2px auto 10px; max-width: 90%;
    padding: 7px 12px; border-radius: 10px;
    background: #fdf6e3; border: 1px solid #f2e6c7;
    font-size: 10.5px; line-height: 1.45;
    color: #7a6a45; text-align: center;
    flex: 0 0 auto;
}
.wa-chat-legal a { color: inherit; text-decoration: underline; }
html[data-theme="dark"] .wa-chat-legal {
    background: rgba(255,225,150,.07); border-color: rgba(255,225,150,.16); color: #c9b98d;
}
.wa-chat-empty {
    margin: 0; padding: 26px 16px; text-align: center;
    font-size: var(--wag-text-13); color: var(--wa-muted, #7d8a80);
}

.wa-chat-convo { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.wa-chat-convo[hidden] { display: none; }
.wa-chat-convo .wa-bk-thread--chat {
    flex: 1 1 auto; min-height: 180px; overflow-y: auto;
    border: none; border-radius: 0; margin: 0;
    /* El `max-height: 420px` de .wa-bk-thread--chat (:3401) es para el chat
       incrustado en la ficha de reserva, donde el hilo es un bloque más de la
       página. Aquí el hilo ES el panel, y un tope impide crecer a un flex por
       mucho `flex: 1` que lleve: medido a 375x812, el hilo se quedaba en 420px
       dentro de una columna de 740 y dejaba 254px muertos entre el último
       mensaje y el campo de escribir, con el hilo haciendo scroll interno
       mientras sobraba sitio. El alto lo acota el panel, no el hilo.
       (Marc, 2026-09-13) */
    max-height: none;
}
/* Sin barra de scroll a la vista: ni en el hilo ni en el campo de escribir.
   El dock es una hoja flotante y la barra del navegador se le come 8px del
   borde derecho justo donde acaban las burbujas. Mismo recurso que .wa-hp-chips
   en la home (front-page.php:934): se oculta el dibujo, no el scroll — el hilo
   sigue arrastrándose con el dedo y con la rueda. (Marc, 2026-09-13) */
.wa-chat-convo .wa-bk-thread--chat,
.wa-chat-convo .wa-bk-advice-reply textarea[data-contact-ta] {
    scrollbar-width: none;
}
.wa-chat-convo .wa-bk-thread--chat::-webkit-scrollbar,
.wa-chat-convo .wa-bk-advice-reply textarea[data-contact-ta]::-webkit-scrollbar { display: none; }

/* El padding vive en `.wa-bk-adv-wrap .wa-bk-advice-reply`, y el dock no está
   dentro de ese wrapper: sin esto el input queda pegado a los bordes del panel.
   Mismo origen que el pill cuadrado — la regla compartida colgaba de un
   contenedor que solo tiene el chat de reservas. */
.wa-chat-convo .wa-bk-advice-reply {
    flex: 0 0 auto; border-radius: 0; padding: 10px 14px 12px;
}

/* Control Center → Títulos */
.wa-title-actions,
.wa-title-kpis{ display: flex; flex-wrap: wrap; gap: var(--wag-space-8); margin: 12px 0; }
.wa-title-kpi {
    padding: 6px 12px; border-radius: var(--wag-radius-999); background: #f2f4f6;
    font-size: 12.5px; color: #4a5a52;
}
.wa-title-kpi strong { font-size: var(--wag-text-14); color: #16281e; }
.wa-title-kpi.is-ok   { background: #e8f3ec; color: #1a6b3f; }
.wa-title-kpi.is-warn { background: #fdf1e7; color: #a15c1a; }

.wa-title-bar { height: 6px; background: #e6eae8; border-radius: var(--wag-radius-999); overflow: hidden; margin: 8px 0; }
.wa-title-bar span { display: block; height: 100%; background: #1a6b3f; transition: width .4s ease; }

.wa-title-row { align-items: flex-start; gap: var(--wag-space-12); }
.wa-title-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* El antes en gris y tachado hace que la vista se lea de un vistazo: en una
   tabla de miles de filas, leer dos títulos parecidos línea a línea es inviable. */
.wa-title-from { color: #8a978f; text-decoration: line-through; font-size: var(--wag-text-13); }
.wa-title-arrow { color: #b9c4bd; font-size: var(--wag-text-11); }
.wa-title-to { font-weight: 700; color: #16281e; font-size: var(--wag-text-14); }
.wa-title-reason { font-size: var(--wag-text-12); color: #a15c1a; }
.wa-title-variants { font-size: 11.5px; color: #7d8a80; }
.wa-title-es { font-size: var(--wag-text-12); color: #2a6b8c; font-weight: 600; }
.wa-title-es.is-review { color: #a15c1a; }
.wa-title-row.is-review { background: #fffaf4; border-left: 3px solid #e0a25e; padding-left: 9px; }
.wa-title-row-act { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }

.wa-title-badge {
    padding: 3px 9px; border-radius: var(--wag-radius-999); font-size: var(--wag-text-11); font-weight: 700;
    font-style: normal; letter-spacing: .02em;
}
/* Verde = dato oficial de un tercero. Gris = propuesta nuestra. La distinción
   es lo que decide en qué filas hay que fijarse. */
.wa-title-badge--osm      { background: #e8f3ec; color: #1a6b3f; }
.wa-title-badge--wikidata { background: #e8f0f6; color: #1a4c6b; }
.wa-title-badge--diccionario { background: #f0f0f2; color: #5a5a66; }

.wa-title-pag { display: flex; flex-wrap: wrap; gap: var(--wag-space-4); margin-top: 14px; }
.wa-title-pag .is-on { background: #1a6b3f; color: #fff; border-color: #1a6b3f; }

/* Cola de denuncias en el Control Center */
.wa-report-count {
    display: inline-block; min-width: 20px; padding: 1px 7px; margin-left: 6px;
    background: #b3261e; color: #fff; border-radius: var(--wag-radius-999);
    font-size: var(--wag-text-12); font-weight: 800; vertical-align: middle;
}
.wa-report-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 12px; }
.wa-report-filters .is-on { background: #1a6b3f; color: #fff; border-color: #1a6b3f; }

.wa-report-row { align-items: flex-start; gap: var(--wag-space-12); }
.wa-report-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* El detalle libre es lo que explica el caso, así que se lee entero: recortarlo
   obligaría a abrir cada denuncia para entender de qué va. */
.wa-report-detail-txt {
    margin-top: 4px; padding: 6px 10px; background: #f6f7f9; border-radius: var(--wag-radius-8);
    font-size: 12.5px; line-height: 1.45; color: #3d4d44; white-space: pre-wrap;
}
.wa-report-row-act { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; flex-wrap: wrap; }
.wa-report-row.is-done { opacity: .62; }

/* ── Denuncia de abuso ───────────────────────────────────────────────────────
   El botón es discreto a propósito: debe estar SIEMPRE disponible (obligación
   DSA) sin competir visualmente con enviar un mensaje, que es lo que la gente
   viene a hacer. */
.wa-chat-report {
    background: none; border: 0; padding: 4px; margin-left: auto; margin-right: 2px;
    color: rgba(255,255,255,.72); cursor: pointer; line-height: 0;
    border-radius: 6px; transition: color .15s, background .15s;
}
.wa .wa-chat-report:hover { color: #fff; background: rgba(255,255,255,.14); }
.wa-chat-report[hidden] { display: none; }

/* El modal cubre el dock entero, no solo el panel: en móvil el panel ocupa la
   pantalla y un overlay más pequeño dejaría el chat pulsable por detrás. */
.wa-report-modal {
    position: absolute; inset: 0; z-index: 10;
    display: flex; align-items: center; justify-content: center; padding: 16px;
    background: rgba(15, 30, 22, .55); backdrop-filter: blur(2px);
}
.wa-report-modal[hidden] { display: none; }

.wa-report-box {
    width: 100%; max-width: 320px; background: var(--wag-surface); border-radius: var(--wag-radius-16);
    padding: 18px 18px 14px; box-shadow: 0 18px 50px rgba(0,0,0,.3);
    max-height: 100%; overflow-y: auto;
}
.wa-report-title { margin: 0 0 4px; font-size: 15.5px; font-weight: 800; color: #16281e; }
.wa-report-intro { margin: 0 0 12px; font-size: 12.5px; line-height: 1.45; color: #6b7a72; }

.wa-report-reasons { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.wa-report-reason {
    display: flex; align-items: center; gap: 9px; padding: 7px 8px;
    border-radius: 9px; cursor: pointer; font-size: var(--wag-text-13); color: #22352b;
}
.wa .wa-report-reason:hover { background: #f2f6f3; }
.wa-report-reason input { margin: 0; accent-color: #1a6b3f; flex: 0 0 auto; }

.wa-report-detail {
    width: 100%; box-sizing: border-box; border: 1px solid #d0d4da; border-radius: var(--wag-radius-12);
    padding: 9px 12px; font-size: var(--wag-text-13); line-height: 1.45; resize: none;
    font-family: inherit; background: var(--wag-surface);
}
.wa .wa-report-detail:focus { outline: none; border-color: #1a6b3f; }

.wa-report-msg { margin: 8px 0 0; font-size: 12.5px; line-height: 1.4; min-height: 0; }
.wa-report-msg:empty { display: none; }
.wa-report-msg.is-ok  { color: #1a6b3f; font-weight: 600; }
.wa-report-msg.is-err { color: #b3261e; }

.wa-report-actions { display: flex; gap: var(--wag-space-8); justify-content: flex-end; margin-top: 12px; }
.wa-report-cancel, .wa-report-send {
    border: 0; border-radius: 10px; padding: 9px 14px; font-size: var(--wag-text-13);
    font-weight: 700; cursor: pointer; font-family: inherit;
}
.wa-report-cancel { background: #eef1ef; color: #3d4d44; }
.wa .wa-report-cancel:hover { background: #e3e8e5; }
.wa-report-send { background: #b3261e; color: #fff; }
.wa .wa-report-send:hover:not(:disabled) { background: #971f18; }
.wa-report-send:disabled { opacity: .6; cursor: default; }

/* Móvil: a pantalla completa. Un panel de 380px en un teléfono deja el teclado
   encima del campo de texto y el hilo invisible. */
@media (max-width: 600px) {
    /* `left: 14px` era un resto de cuando el dock vivía abajo a la IZQUIERDA.
       Con `right` ya puesto, fijar también `left` estira el dock de lado a lado
       de la pantalla: el lanzador se ve bien por el align-items:flex-end, pero
       el contenedor ocupa todo el ancho y se come los toques de lo que haya
       debajo. Se quita. */
    /* En móvil el margen es menor, pero la barra inferior se suma igual: aquí es
       donde más molestaba (la Action Pill ocupa todo el ancho). */
    .wa-chat-dock { right: 16px; bottom: calc(16px + var(--wa-bottom-bar, 0px)); }

    /* Más grande en móvil, no más pequeño: es el objetivo principal y se pulsa
       con el pulgar. 44px es el mínimo táctil recomendado; 58 va sobrado. */
    .wa-chat-launcher { width: 58px; height: 58px; }
    .wa-chat-launcher .wa-chat-ico { width: 28px; height: 28px; }
    .wa-chat-dock.is-open .wa-chat-launcher { display: none; }

    /* A pantalla completa REAL. Antes el dock seguía siendo un contenedor
       anclado abajo con un panel de 100dvh dentro: la altura salía bien pero la
       posición vertical dependía del flujo, y la cabecera verde acababa por
       debajo del header del sitio. Con inset:0 el panel ocupa el viewport y no
       hay nada que calcular.

       El z-index sube por encima de cualquier header: Astra usa 99, pero un
       plugin o una barra sticky pueden ir más altos, y perder esa carrera
       significa escribir a ciegas. */
    .wa-chat-dock.is-open {
        position: fixed; inset: 0; left: 0; right: 0; top: 0; bottom: 0;

        /* Fondo sólido. El panel se ajusta al viewport visible por JS, pero
           entre que sale el teclado y termina de medirse hay unos milisegundos
           de desajuste — y sin fondo, por ese hueco se ve la página de detrás.
           Con esto, en el peor caso se ve el color del chat, nunca el contenido
           del sitio colándose bajo el campo de texto. */
        background: var(--wa-card, #fff);
    }
    html[data-theme="dark"] .wa-chat-dock.is-open { background: var(--wa-card, #10161c); }
    /* Selector con .wa-chat-dock.is-open delante para subir especificidad: la
       regla base de .wa-chat-panel tiene el mismo peso, y basta con que alguien
       mueva un bloque de sitio para que vuelva a ganar ella. */
    /* Abierto a pantalla completa: por encima de la barra superior (100000). */
    .wa-chat-dock.is-open { z-index: 100090; }
    .wa-chat-dock.is-open .wa-chat-panel {
        position: fixed;
        top: 0; left: 0; right: 0; bottom: auto;
        width: 100%;
        border-radius: 0; border: 0;

        /* ESTA es la línea que arregla el "se queda a media altura". La regla
           base lleva `max-height: min(560px, calc(100vh - 120px))` para el panel
           flotante de escritorio, y en móvil seguía recortando: 560px sobre una
           pantalla de 800 son justo los dos tercios que se veían. Poner
           height:100dvh no servía de nada mientras el tope siguiera vivo. */
        max-height: none;

        /* Escalera de respaldo: vh → dvh → alto real medido en JS.
           --wa-vvh viene de visualViewport (wa-chat.js) y es la ÚNICA que
           encoge cuando sale el teclado; las otras dos solo cubren el caso de
           que la API no exista. */
        height: 100vh;
        height: 100dvh;
        height: var(--wa-vvh, 100dvh);

        /* Con el teclado abierto el viewport visible se despega de arriba;
           sin esto el panel se queda anclado al documento y la cabecera se va. */
        top: var(--wa-vvtop, 0px);

        /* Nada de scroll horizontal dentro del panel. */
        max-width: 100vw;
        overflow-x: hidden;

        /* SIN la animación de entrada a pantalla completa.
           waChatIn desliza desde translateY(10px), y eso hace dos daños aquí:
           deja el panel 10px por debajo del viewport (medido: bottom 677 sobre
           una pantalla de 667, o sea el pie recortado), y un `transform` sobre
           un elemento `position: fixed` lo convierte en bloque contenedor de
           sus descendientes, con lo que el anclaje deja de referirse a la
           pantalla. Un desplazamiento de 10px tiene sentido en el panel
           flotante de escritorio; en una hoja a pantalla completa no aporta. */
        animation: none;
        transform: none;   /* la animacion de entrada dejaba 10px de desfase */
    }

    /* iOS AMPLÍA la página al enfocar un campo con menos de 16px. No es un zoom
       del usuario: es una corrección de accesibilidad de Safari, y la única
       forma de evitarla es que el texto ya sea legible. 13.5px la disparaba en
       cada toque sobre el campo de escribir.

       Los selectores llevan el atributo a propósito: la regla base es
       `.wa-bk-advice-reply textarea[data-contact-ta]`, que tiene exactamente la
       misma especificidad que una versión sin atributo — y al estar más abajo en
       el fichero, ganaba ella. Medido: seguía en 13.5px. */
    .wa-chat-convo .wa-bk-advice-reply textarea[data-contact-ta],
    .wa-chat-convo .wa-bk-advice-reply textarea[data-bk-advice-ta] {
        font-size: var(--wag-text-16);
        line-height: 22px;
    }

    /* El input, ABAJO DEL TODO, pase lo que pase.
       El hilo tiene flex-grow y aun así no llenaba la columna (medido: 81px
       muertos bajo el campo de texto), así que depender de que el hermano
       crezca es frágil. `margin-top: auto` se come todo el espacio sobrante por
       encima y clava el campo al fondo sin importar cuánto ocupe el hilo. */
    .wa-chat-convo .wa-bk-advice-reply { margin-top: auto; }

    /* Una URL larga pegada en un mensaje no debe ensanchar el panel. */
    .wa-chat-convo .wa-bk-thread--chat,
    .wa-chat-list { overflow-wrap: anywhere; word-break: break-word; }
    /* Notch e isla dinámica: sin esto los botones de la cabecera quedan debajo
       del reloj en un iPhone. */
    .wa-chat-head { padding-top: calc(13px + env(safe-area-inset-top)); }
    .wa-chat-convo .wa-bk-advice-reply { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
}

/* Con el chat abierto a pantalla completa, el fondo no debe seguir scrolleando
   detrás: en móvil se nota como un tirón al arrastrar dentro del hilo. */
body.wa-chat-open { overflow: hidden; }
/* En movil el body se FIJA, no solo se le corta el overflow: en iOS, Safari
   desplaza la pagina al abrir el teclado aunque el overflow este oculto, y ese
   desplazamiento descuadraba el panel y dejaba ver el sitio por detras. El
   `top` negativo lo pone el JS con la posicion guardada, para que la pagina no
   salte al principio mientras el chat esta abierto. */
@media (max-width: 600px) {
    body.wa-chat-open {
        position: fixed;
        left: 0; right: 0; width: 100%;
    }
}
/* overflow-x tambien en <html>: bloquear solo el body deja la barra horizontal
   viva, porque quien scrollea de verdad en movil es el elemento raiz. Ese era
   el scroll lateral que aparecia justo al abrir el chat. */
html:has(body.wa-chat-open) { overflow: hidden; }
@media (min-width: 601px) {
    body.wa-chat-open,
html:has(body.wa-chat-open){ overflow: auto; }
}

/* Contacto real del negocio — solo en reservas confirmadas. Discreto a
   propósito: el chat sigue siendo el canal principal y con trazabilidad; esto
   es el atajo para lo trivial ("¿a qué hora abrís?"). */
.wa-bk-direct {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--wag-space-8);
    margin-top: 8px; padding: 9px 12px;
    background: #f4f8f5; border: 1px solid #e2ece4; border-radius: 10px;
}
.wa-bk-direct-label {
    font-size: var(--wag-text-11); font-weight: 800; text-transform: uppercase;
    letter-spacing: .05em; color: #5a6e60;
}
.wa-bk-direct-item {
    font-size: var(--wag-text-13); font-weight: 600; color: #14552f; text-decoration: none;
    padding: 3px 9px; background: var(--wag-surface); border: 1px solid #dbe7de; border-radius: var(--wag-radius-999);
}
.wa .wa-bk-direct-item:hover { background: #eaf4ec; }

/* My Bookings: remove-from-history trash button */
.wa-bkmine-remove {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0;
    border: 1px solid #e6d0cc; border-radius: var(--wag-radius-8);
    background: #fbe9e6; color: #b3422b; cursor: pointer;
    transition: background .12s, border-color .12s;
}
.wa .wa-bkmine-remove:hover { background: #f6d7d1; border-color: #d9b3ad; }
.wa-bkmine-remove:disabled { opacity: .5; cursor: default; }

/* My Bookings: invoices and credit notes remain visible after cancellation. */
.wa-bkmine-documents {
    flex-basis: 100%; display: flex; align-items: center; flex-wrap: wrap; gap: var(--wag-space-8);
    padding-top: 10px; border-top: 1px solid var(--wa-line, #e6efe9);
}
.wa-bkmine-documents-label {
    margin-right: 2px; color: var(--wa-muted, #7a8fa8); font-size: var(--wag-text-11);
    font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
}
.wa-bkmine-documents .wa-payment-document-link { margin-left: 0; }

/* My Bookings: expandable "Details" summary */
.wa-bkmine-summary { margin-top: 8px; flex-basis: 100%; }
.wa-bkmine-summary > summary {
    cursor: pointer; font-size: var(--wag-text-12); font-weight: 700; color: #6b7c8e;
    list-style: none; padding: 2px 0;
}
/* «+ Details» cerrado, «− Details» abierto — el disco del list-style no decía
   que aquello se pudiera desplegar (Marc, 2026-08-30). */
.wa-bkmine-summary > summary::-webkit-details-marker { display: none; }
.wa-bkmine-summary > summary::before {
    content: "+";
    display: inline-block;
    width: 1em;
    font-weight: 800;
}
.wa-bkmine-summary[open] > summary::before { content: "\2212"; }
.wa .wa-bkmine-summary > summary:hover { color: #1a7a4a; }
.wa-bkmine-sum-body {
    margin-top: 6px; padding: 10px 12px; border-radius: 10px;
    background: #f8faf9; border: 1px solid #e6efe9;
}
.wa-bkmine-sum-row {
    display: flex; justify-content: space-between; gap: var(--wag-space-12); padding: 3px 0;
    font-size: var(--wag-text-13); color: #2c3a33;
}
.wa-bkmine-sum-row > span:first-child { color: #8a95a3; }
.wa-bkmine-sum-row > span:last-child { font-weight: 600; }

/* Owner dashboard: iCal external-calendar conflict warning on a pending booking */
.wa-bk-ical-conflict {
    margin-top: 6px; padding: 6px 10px; border-radius: var(--wag-radius-8);
    background: #fffbeb; border: 1px solid #f59e0b; color: #92400e;
    font-size: var(--wag-text-12); font-weight: 700;
}

/* ============================================================================
 * Owner Bookings cards — moved here from an inline <style> in owner.php
 * (WARS M13 dismantle). Selectors are keyed on the boolean data-wa-* / data-bk-*
 * attributes the cards render with.
 * ============================================================================ */

/* List container */
.wa-bookings-list{display:flex;flex-direction:column;gap:10px;margin-top:12px}

/* Owner Bookings — two-column layout (bookings/history | settings+report) */
.wa-bk-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--wag-space-20);align-items:start;margin-top:12px}
.wa-bk-col-main{min-width:0}
.wa-bk-col-side{display:flex;flex-direction:column;gap:var(--wag-space-16)}
.wa-bk-side-card{background:var(--wag-surface);border:1px solid #e6eaef;border-radius:14px;padding:16px;box-shadow:0 1px 3px rgba(20,40,60,.05)}
.wa-bk-side-card .wa-bk-settings{background:transparent;border:none;padding:0;margin:0}
.wa-bk-side-card .wa-bk-report-bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--wag-space-8);margin:0}
.wa-bk-side-card .wa-bk-report-bar input[type=date]{flex:1 1 120px;min-width:0}
@media (max-width:900px){ .wa-bk-layout{grid-template-columns:1fr} }

/* Card shell — data-wa-card boolean on outer div */
[data-wa-card]{
  background:var(--wag-surface);
  border-radius:14px;
  border-width:1px;border-style:solid;border-color:#eaecf0;
  overflow:hidden;
  box-shadow:0 1px 3px rgba(20,40,60,.07),0 4px 14px rgba(20,40,60,.04);
  transition:box-shadow .15s;
}
[data-wa-card]:hover{
  box-shadow:0 2px 8px rgba(20,40,60,.10),0 8px 22px rgba(20,40,60,.07);
}

/* Accent bar — data-wa-accent boolean */
[data-wa-accent]{height:3px;width:100%;display:block}
[data-bk-status=advice_pending]  [data-wa-accent]{background:linear-gradient(90deg,#7b93d9,#a5b8f0)}
[data-bk-status=proposal_sent]     [data-wa-accent]{background:linear-gradient(90deg,#2aab66,#5fd49a)}
[data-bk-status=changes_requested] [data-wa-accent]{background:linear-gradient(90deg,#f59e0b,#fcd34d)}
[data-bk-status=pending]         [data-wa-accent]{background:linear-gradient(90deg,#f59e0b,#fbbf24)}
[data-bk-status=confirmed]       [data-wa-accent],
[data-bk-status=completed]       [data-wa-accent]{background:linear-gradient(90deg,#1a7a4a,#2aab66)}
[data-bk-status=declined]        [data-wa-accent],
[data-bk-status=cancelled]       [data-wa-accent],
[data-bk-status=cancelled_owner] [data-wa-accent]{background:linear-gradient(90deg,#ef4444,#f87171)}
[data-bk-status=no_show]         [data-wa-accent]{background:#d1d5db}

/* Card body — data-wa-body boolean */
[data-wa-body]{padding:16px 20px;display:flex;flex-direction:column;gap:var(--wag-space-12)}

/* Header row: title + pill — data-wa-header boolean */
[data-wa-header]{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--wag-space-12)}
[data-wa-header] a{
  font-weight:800;color:#111827;font-size:15px;
  text-decoration:none;line-height:1.3;
}
[data-wa-header] a:hover{color:#1a7a4a}

/* Date chip — data-wa-chip-dates boolean */
[data-wa-chip-dates]{
  display:inline-flex;align-items:center;gap:var(--wag-space-4);
  border-radius:var(--wag-radius-20);
  padding-top:5px;padding-bottom:5px;
  padding-left:11px;padding-right:11px;
  background:#eefaf3;color:#1a5235;
  font-size:var(--wag-text-13);font-weight:600;
}

/* Guest block — data-wa-guest boolean */
[data-wa-guest]{display:flex;flex-direction:column;gap:var(--wag-space-4)}
[data-wa-guest] strong{font-size:13.5px;color:#111827;font-weight:700;display:block}

/* Contact items row — data-wa-cr boolean */
[data-wa-cr]{display:flex;flex-wrap:wrap;gap:3px 14px}
[data-wa-cr] span{font-size:12.5px;color:#6b7c8e}
[data-wa-cr] a{color:#1a7a4a;font-weight:600;text-decoration:none}
[data-wa-cr] a:hover{text-decoration:underline}

/* Note — data-wa-note boolean */
[data-wa-note]{
  border-left-width:3px;border-left-style:solid;border-left-color:#e2e8f0;
  padding-top:5px;padding-bottom:5px;
  padding-left:12px;padding-right:12px;
  color:#6b7c8e;font-size:var(--wag-text-13);font-style:italic;
  border-radius:0 6px 6px 0;background:#fafbfc;
}

/* Actions bar — data-bk-actions */
[data-bk-actions]{
  display:flex;align-items:center;gap:var(--wag-space-8);flex-wrap:wrap;
  padding-top:10px;
  border-top-width:1px;border-top-style:solid;border-top-color:#f1f3f6;
}

/* Buttons (color via inline style; shape via these rules keyed on data-wa-card) */
[data-wa-card] .wa-bk-act,[data-wa-card] .wa-owner-btn{
  border:none;border-radius:9px;
  padding-top:8px;padding-bottom:8px;
  padding-left:14px;padding-right:14px;
  font-size:var(--wag-text-13);font-weight:700;cursor:pointer;
  transition:filter .12s;
}
[data-wa-card] .wa-claim-approve{background:var(--wag-type-claim-approve-bg, var(--wag-style-claim-approve-bg))!important;color:var(--wag-type-claim-approve-ink, var(--wag-style-claim-approve-ink))!important}
[data-wa-card] .wa-claim-approve:hover{filter:brightness(1.1)}
[data-wa-card] .wa-claim-reject{background:var(--wag-type-claim-reject-bg, var(--wag-style-claim-reject-bg))!important;color:#c0392b!important}
[data-wa-card] .wa-claim-reject:hover{background:var(--wag-type-claim-reject-hover-bg, var(--wag-style-claim-reject-hover-bg))!important}
[data-wa-card] .wa-owner-btn{background:#f1f5f9!important;color:#334155!important}
[data-wa-card] .wa-owner-btn:hover{background:#e2e8f0!important}
[data-wa-card] .wa-payment-document-link{display:inline-block;margin-left:0}

/* Modify form */
.wa-bk-modify-form{flex-basis:100%}
.wa-bk-modify-fields{
  
  background:#f8fafc;border-radius:10px;
  padding-top:12px;padding-bottom:12px;
  padding-left:14px;padding-right:14px;margin-top:4px;
}
.wa-bk-modify-fields label{
  
  text-transform:uppercase;letter-spacing:.05em;
}
.wa-bk-modify-fields input{
  border-width:1px;border-style:solid;border-color:#d1d9e0;
  
}

/* History log */
.wa-bk-log{flex-basis:100%}
.wa-bk-log>summary{cursor:pointer;font-size:var(--wag-text-12);font-weight:600;color:#94a3b8;list-style:disc inside}
.wa-bk-log-row{
  font-size:var(--wag-text-12);
  background:#f8fafc;border-radius:7px;padding:6px 10px;
}

/* Settings panel */
.wa-bk-settings{margin-bottom:12px}
.wa-bk-set-field{font-size:var(--wag-text-13);font-weight:600}
.wa-bk-set-field input{background:var(--wag-surface);max-width:320px}

/* Past/archived section */
.wa-bk-past>summary{cursor:pointer;font-weight:700;font-size:var(--wag-text-14);padding:8px 0;list-style:revert;color:#334155}

/* Pro-thread */
[data-bk-thread-pro]{
  background:var(--wag-surface);border-width:1px;border-style:solid;border-color:#e1e8f0;
  border-radius:var(--wag-radius-12);padding:0;gap:0;overflow:hidden;
}
[data-bk-msg]{display:flex;flex-direction:column;gap:2px}
[data-bk-thread-pro] [data-bk-msg]{
  flex-direction:row;align-items:flex-start;gap:0;
  padding:11px 16px;
  border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#f0f4f8;
  position:relative;
}
[data-bk-thread-pro] [data-bk-msg]:last-child{border-bottom:none}
[data-bk-thread-pro] [data-bk-msg]::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  border-radius:3px 0 0 3px;
}
[data-bk-msg-guest]::before{background:#5b8fd4}
[data-bk-msg-owner]::before{background:#1a7a4a}
[data-bk-who]{
  font-size:var(--wag-text-11);font-weight:700;color:#6b7a8d;
  white-space:nowrap;min-width:120px;
  padding-right:12px;padding-top:1px;flex-shrink:0;
}
[data-bk-msg-guest] [data-bk-who]{color:#3a68a8}
[data-bk-msg-owner] [data-bk-who]{color:#1a6a3a}
[data-bk-body]{
  background:none;border-radius:0;padding:0;
  font-size:13.5px;line-height:1.55;color:#1a2230;flex:1;margin:0;
}
[data-bk-thread-pro] [data-bk-empty]{
  padding:14px 16px;font-style:italic;color:#94a3b8;font-size:var(--wag-text-13);margin:0;
}

/* Reply area: WhatsApp-style grid */
[data-bk-reply-row]{
  display:grid;grid-template-columns:1fr auto;
  gap:var(--wag-space-8);align-items:center;
  flex-basis:100%;
}
[data-bk-advice-ta]{
  width:100%;height:40px;min-height:40px;
  border-width:1px;border-style:solid;border-color:#d1d9e0;border-radius:var(--wag-radius-20);
  padding-top:9px;padding-bottom:9px;padding-left:14px;padding-right:14px;
  font-size:var(--wag-text-13);resize:none;box-sizing:border-box;background:var(--wag-surface);
  overflow:hidden;transition:height .1s ease;
}
.wa-bk-done { text-align: center; padding: 8px 4px; }
.wa-bk-done-ico {
    width: 46px; height: 46px; margin: 4px auto 10px; border-radius: var(--wag-type-bk-done-ico-radius, var(--wag-style-bk-done-ico-radius));
    background: #e9f4ee; color: var(--wag-accent); font-size: var(--wag-text-24); font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.wa-bk-done p { font-size: 13.5px; line-height: 1.55; color: #4a5a51; margin: 0; }
.wa-bk-done a { color: var(--wag-accent); font-weight: 700; }
.wa-bk-advice-done { text-align: center; padding: 8px 4px; }
.wa-bk-advice-done .wa-bk-done-ico { background: var(--wag-type-bk-done-ico-bg, var(--wag-style-bk-done-ico-bg)); color: var(--wag-type-bk-done-ico-ink, var(--wag-style-bk-done-ico-ink)); }

/* ── Advice mode toggle (booking widget) ─────────────────────────────────── */
.wa-bk-advice-sep {
    text-align: center; font-size: var(--wag-text-11); font-weight: 700; color: #aab0bb;
    text-transform: uppercase; letter-spacing: .06em; margin: 2px 0 0;
}
.wa-bk-advice-toggle {
    display: flex; align-items: center; gap: var(--wag-space-8); font-size: var(--wag-text-13); color: var(--wag-type-bk-advice-toggle-ink, var(--wag-style-bk-advice-toggle-ink));
    cursor: pointer; margin: 0;
}
.wa-bk-advice-toggle input { margin: 0; cursor: pointer; accent-color: #3a4fa0; }
.wa-bk-advice-fields { display: flex; flex-direction: column; gap: var(--wag-space-8); }
.wa-bk-advice-fields[hidden],
.wa-bk-submit[hidden],
.wa-bk-submit-advice[hidden],
.wa-bk-help-normal[hidden],
.wa-bk-help-advice[hidden]{ display: none !important; }

/* ── Advice conversation thread — base ───────────────────────────────────── */
.wa-bk-advice-thread {
    display: flex; flex-direction: column; gap: 6px;
    padding: 10px 12px; background: #f7f8fb; border-radius: 10px;
    border: 1px solid #e4e8f0; margin-bottom: 8px;
}
.wa-bk-msg { display: flex; flex-direction: column; gap: 2px; }
.wa-bk-msg-who { font-size: var(--wag-text-11); font-weight: 700; color: #8a95a8; }
/* El panel de owner vive dentro de .wa-section, cuyo `p` va justificado con
   hyphens (:8390). Esa regla es para las descripciones de las fichas; en una
   burbuja de 200px dejaba "Prueba del sistema de denuncias" con huecos de tres
   espacios entre palabras. Un chat no se justifica. (Marc, 2026-09-13) */
.wa-bk-msg-body { font-size: 13.5px; line-height: 1.5; color: #1a2230; margin: 0;
    padding: 8px 11px; border-radius: var(--wag-radius-8); }
/* Se nombra también .wa-bk-msg (el padre) a propósito: `.wa-section p` es
   clase+etiqueta y gana a una clase sola, así que con .wa-bk-msg-body a secas
   el justificado seguía aplicándose. */
.wa-bk-msg .wa-bk-msg-body { text-align: left; hyphens: manual; }
.wa-bk-msg--guest .wa-bk-msg-body { background: #eef2ff; border-bottom-left-radius: 3px; }
.wa-bk-msg--owner  .wa-bk-msg-body { background: #eefaf4; border-bottom-right-radius: 3px; }
.wa-bk-msg-empty { font-size: var(--wag-text-13); color: #94a3b8; margin: 0; font-style: italic; }

/* ── Chat mode: WhatsApp-style bubbles (traveller profile view) ──────────── */
.wa-bk-thread--chat {
    background: #fafbfc;
    border: none;
    border-radius: 14px;
    padding: 14px 12px;
    gap: 10px;
    max-height: 420px;
    overflow-y: auto;
}
.wa-bk-thread--chat .wa-bk-msg {
    max-width: 78%;
    gap: 3px;
}
.wa-bk-thread--chat .wa-bk-msg--guest {
    align-self: flex-end;
    align-items: flex-end;
}
.wa-bk-thread--chat .wa-bk-msg--owner {
    align-self: flex-start;
    align-items: flex-start;
}
.wa-bk-thread--chat .wa-bk-msg-who {
    font-size: 10.5px;
    font-weight: 500;
    color: #9aa3b0;
    padding: 0 4px;
}
.wa-bk-thread--chat .wa-bk-msg-body {
    margin: 0;
    font-size: var(--wag-text-14);
    line-height: 1.5;
    padding: 9px 13px;
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
/* Sent bubble (traveller = guest) — right side, green */
.wa-bk-thread--chat .wa-bk-msg--guest .wa-bk-msg-body {
    background: #d9fdd3;
    color: #0a2010;
    border-bottom-right-radius: 4px;
}
/* Received bubble (operator/host) — left side, white */
.wa-bk-thread--chat .wa-bk-msg--owner .wa-bk-msg-body {
    background: var(--wag-surface);
    color: #1a2230;
    border-bottom-left-radius: 4px;
}
.wa-bk-thread--chat .wa-bk-msg-empty {
    align-self: center;
    background: rgba(0,0,0,.06);
    border-radius: var(--wag-radius-20);
    padding: 5px 14px;
    font-size: 12.5px;
    color: #6b737d;
    font-style: normal;
}

/* ── Pro mode: support-ticket style (owner dashboard) ───────────────────── */
.wa-bk-thread--pro {
    background: var(--wag-surface);
    border: 1px solid #e1e8f0;
    border-radius: var(--wag-radius-12);
    padding: 0;
    gap: 0;
    overflow: hidden;
}
.wa-bk-thread--pro .wa-bk-msg {
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
    padding: 11px 16px;
    border-bottom: 1px solid #f0f4f8;
    position: relative;
}
.wa-bk-thread--pro .wa-bk-msg:last-child { border-bottom: none; }
.wa-bk-thread--pro .wa-bk-msg::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    border-radius: 3px 0 0 3px;
}
.wa-bk-thread--pro .wa-bk-msg--guest::before { background: #5b8fd4; }
.wa-bk-thread--pro .wa-bk-msg--owner::before { background: #1a7a4a; }
.wa-bk-thread--pro .wa-bk-msg-who {
    font-size: var(--wag-text-11);
    font-weight: 700;
    color: #6b7a8d;
    white-space: nowrap;
    min-width: 120px;
    padding-right: 12px;
    padding-top: 1px;
    flex-shrink: 0;
}
.wa-bk-thread--pro .wa-bk-msg--guest .wa-bk-msg-who { color: #3a68a8; }
.wa-bk-thread--pro .wa-bk-msg--owner .wa-bk-msg-who { color: #1a6a3a; }
.wa-bk-thread--pro .wa-bk-msg-body {
    background: none;
    border-radius: 0;
    padding: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: #1a2230;
    flex: 1;
}
.wa-bk-thread--pro .wa-bk-msg-empty {
    padding: 14px 16px;
    font-style: italic;
    color: #94a3b8;
    font-size: var(--wag-text-13);
}

/* Reply row */
/* Full-width column wrapper: chat thread on top, reply input below — WhatsApp style */
.wa-bk-adv-wrap {
    flex-basis: 100%; display: flex; flex-direction: column; gap: 0;
}
.wa-bk-adv-wrap .wa-bk-thread--chat {
    border-radius: 12px 12px 0 0; margin-bottom: 0; border-bottom: none;
}
.wa-bk-adv-wrap .wa-bk-advice-reply {
    background: #e9ebef; border-radius: 0 0 12px 12px;
    padding: 10px 14px 12px; border: none;
}
/* El input pill lo comparten los dos chats. El atributo cambia según quién lo
   pinta (data-bk-advice-ta = reservas, data-contact-ta = mensajes directos), así
   que el selector nombra ambos: si solo nombrara uno, el otro se queda cuadrado
   — que es exactamente lo que pasó al nacer el chat directo. */
/* OJO: esta regla NO puede colgar de .wa-bk-adv-wrap. El chat de reservas vive
   dentro de ese wrapper, pero el dock flotante NO lo tiene (su markup es
   .wa-chat-convo > .wa-bk-advice-reply). Al estar antes acotada al wrapper, el
   input del dock se quedaba con el radio por defecto del tema — 4px, cuadrado.
   Colgando de .wa-bk-advice-reply cubre los dos sitios, que es lo que se
   pretendía desde el principio. */
.wa-bk-advice-reply textarea[data-bk-advice-ta],
.wa-bk-advice-reply textarea[data-contact-ta] {
    border-radius: var(--wag-radius-20); background: var(--wag-surface); border: 1px solid #d0d4da;
    padding: 9px 14px; font-size: 13.5px; resize: none; box-sizing: border-box;
    /* line-height OBLIGATORIO. La fila fija la altura en 40px con
       box-sizing:border-box: descontando 18px de padding y 2px de borde quedan
       20px de contenido. El line-height que hereda de Astra son 24px, así que
       una sola línea NO cabe en su propia caja y sale barra de scroll. */
    line-height: 20px;
}

/* The owner card is a flex ROW with wrap, and neither the accent bar nor the body
   declared a basis — so both sized to their content and the body never filled the
   card. Everything inside it (the chat included) inherited that. Forcing each onto
   its own full-width line is the actual fix; the chat then just follows.
   min-width:0 keeps long content from blowing the row out. */
[data-wa-card] > [data-wa-accent],
[data-wa-card] > [data-wa-body] {
    flex: 0 0 100%; max-width: 100%; min-width: 0;
}
/* Rounded shell, with the inner blocks square so they meet flush. */
[data-wa-body] .wa-bk-adv-wrap { border-radius: var(--wag-radius-12); overflow: hidden; }
[data-wa-body] .wa-bk-adv-wrap .wa-bk-thread--chat,
[data-wa-body] .wa-bk-adv-wrap .wa-bk-advice-reply { border-radius: 0; }

/* WhatsApp-style inline row: textarea left, Send button right */
.wa-bk-reply-input-row {
    /* `end` y no `center`: desde que el campo crece con el texto (wa-chat.js),
       un botón centrado junto a una caja de 120px flota a media altura. Abajo
       acompaña a la última línea, que es donde está el cursor. */
    display: grid; grid-template-columns: 1fr auto; gap: var(--wag-space-8); align-items: end;
}
.wa-bk-reply-input-row textarea[data-bk-advice-ta],
.wa-bk-reply-input-row textarea[data-contact-ta] {
    width: 100% !important; height: 40px; box-sizing: border-box;
}
.wa-bk-reply-input-row .wa-owner-btn {
    white-space: nowrap;
    /* La fila fija el textarea en 40px y el botón se quedaba en 33: los dos
       controles no casaban de alto. box-sizing es obligatorio — .wa-owner-btn
       es content-box con 9px de padding, así que un `height: 40px` a secas lo
       dejaba en 58. Y con inline-flex la etiqueta queda centrada en la caja. */
    box-sizing: border-box; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
}

/* Enviar de la burbuja (Marc, 2026-10-12): redondo, con el mismo verde
   degradado que el lanzador y la cabecera del chat, no el azul marino de los
   botones del panel de negocio. Los cuatro estados con .wa delante: si no,
   .wa .wa-owner-btn:hover lo devolvía al azul al pasar el ratón. */
.wa-chat-dock .wa-contact-send {
    width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
    background: linear-gradient(135deg, #14552f, #1e7a44); color: #fff;
    box-shadow: 0 4px 12px -4px rgba(20,85,47,.6);
    transition: filter .15s ease;
}
.wa-chat-dock .wa-contact-send svg { display: block; flex: 0 0 auto; margin-left: -2px; }
.wa-chat-dock .wa-contact-send-label {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.wa .wa-chat-dock .wa-contact-send:hover,
.wa .wa-chat-dock .wa-contact-send:focus-visible,
.wa .wa-chat-dock .wa-contact-send:active {
    background: linear-gradient(135deg, #14552f, #1e7a44); color: #fff;
    box-shadow: 0 4px 12px -4px rgba(20,85,47,.6); filter: brightness(1.1);
}
.wa .wa-chat-dock .wa-contact-send:focus-visible { outline: 2px solid #3fb37a; outline-offset: 2px; }
.wa .wa-chat-dock .wa-contact-send:disabled { opacity: .5; cursor: default; filter: none; }

/* Custom Trip actions. The two buttons are an <a> and a <button>: without a
   shared rule they inherit different box models and never line up. Sizing lives
   here, colour stays inline (it varies per action). */
.wa-ct-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 36px; padding: 0 14px; border: 0; border-radius: 9px;
    font: 700 12.5px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    text-decoration: none; cursor: pointer; box-sizing: border-box; white-space: nowrap;
}
.wa .wa-ct-btn:hover { filter: brightness(1.08); }

/* Extras opcionales en el widget de reserva */
.wa-bk-extras { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.wa-bk-extras-title {
    font-size: var(--wag-text-12); font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    color: var(--wa-muted, #7a8fa8);
}
.wa-bk-extra {
    display: flex; align-items: center; gap: 9px; cursor: pointer;
    padding: 8px 11px; border: 1px solid var(--wa-line, #e2e8ef); border-radius: 10px;
    font-size: 13.5px; transition: border-color .15s ease, background .15s ease;
}
.wa .wa-bk-extra:hover { border-color: #c2ccd6; background: var(--wa-soft, #f7f9fb); }
.wa-bk-extra-label { flex: 1 1 auto; }
.wa-bk-extra-price { font-weight: 700; color: var(--wa-accent, #1a7a4a); white-space: nowrap; }

/* Sesiones de un hide (2026-09-30): una casilla por turno, en fila. Paleta de
   «Elige tus habitaciones» (.wa-stay-room-type): elegida = verde de la casa.
   Con plazas: «3 libres»; sin sitio para el grupo: apagada. */
.wa-bk-sessions { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 2px; }
.wa-bk-sessions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: var(--wag-space-8); }
.wa-bk-session {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 54px; padding: 8px 10px; border: 1px solid #e1e6e3; border-radius: 10px; background: var(--wag-surface);
    text-align: center; cursor: pointer; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.wa-bk-session > input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.wa-bk-session-name { color: #193525; font-size: 13.5px; font-weight: 700; line-height: 1.2; }
.wa-bk-session-left { min-height: 14px; color: #697871; font-size: 11.5px; font-weight: 600; line-height: 1.2; }
/* Sin fecha elegida no hay «quedan N»: vacía, la línea empujaba el nombre hacia
   arriba (se veía descentrado). La caja mide lo mismo con o sin ella (min-height). */
.wa-bk-session-left:empty { display: none; }
.wa .wa-bk-session:hover { border-color: #a8bcb0; background: #fbfdfc; }
.wa-bk-session:has(input:focus-visible) { outline: 3px solid rgba(31,110,71,.2); outline-offset: 2px; }
.wa-bk-session:has(input:checked),
.wa .wa-bk-session:has(input:checked):hover { border-color: #1f6e47; background: #f2faf5; box-shadow: inset 0 0 0 1px #1f6e47; }
.wa-bk-session:has(input:checked) .wa-bk-session-left { color: #1f6e47; }
.wa-bk-session.is-off,
.wa .wa-bk-session.is-off:hover { border-color: #e1e6e3; background: #f5f7f6; cursor: not-allowed; box-shadow: var(--wag-shadow-14); }
.wa-bk-session.is-off .wa-bk-session-name { color: #9aa7a0; text-decoration: line-through; }
.wa-bk-session.is-off .wa-bk-session-left { color: #b3423b; }
.wa-bk-sessions-hint { margin: 0; color: #697871; font-size: var(--wag-text-12); line-height: 1.4; }
html[data-theme="dark"] .wa-bk-session { background: #1c222a; border-color: #333c47; }
html[data-theme="dark"] .wa-bk-session-name { color: var(--wag-dark-ink); }
html[data-theme="dark"] .wa-bk-session-left,
html[data-theme="dark"] .wa-bk-sessions-hint { color: #8e9ba6; }
html[data-theme="dark"] .wa .wa-bk-session:hover { border-color: #46525e; background: #212831; }
html[data-theme="dark"] .wa-bk-session:has(input:checked),
html[data-theme="dark"] .wa .wa-bk-session:has(input:checked):hover { border-color: var(--wag-dark-accent); background: #14271c; box-shadow: inset 0 0 0 1px #3fb37a; }
html[data-theme="dark"] .wa-bk-session:has(input:checked) .wa-bk-session-left { color: #95d6a8; }
html[data-theme="dark"] .wa-bk-session.is-off,
html[data-theme="dark"] .wa .wa-bk-session.is-off:hover { background: #161b21; border-color: #2a313a; }

/* Personas por edades (inc/bookings/age-discounts.php, 2026-10-09): una fila por
   edad con la paleta de las sesiones de arriba — nombre y condiciones a la izquierda,
   contador a la derecha. En columnas no cabía (Marc: «queda demasiado apretado»). */
.wa-bk-ages-grid { display: grid; gap: 6px; }
.wa-bk-age {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name step" "sub step";
    align-items: center; column-gap: 10px; min-width: 0;
    padding: 9px 10px 9px 12px; border: 1px solid var(--wag-type-bk-age-line, var(--wag-style-bk-age-line)); border-radius: var(--wag-type-bk-age-radius, var(--wag-style-bk-age-radius)); background: var(--wag-surface);
}
.wa-bk-age-name { grid-area: name; color: var(--wag-type-bk-age-name-ink, var(--wag-style-bk-age-n-ink)); font-size: var(--wag-text-14); font-weight: 700; line-height: 1.25; }
.wa-bk-age-sub { grid-area: sub; color: var(--wag-type-bk-age-sub-ink, var(--wag-style-bk-age-sub-ink)); font-size: var(--wag-text-12); font-weight: 600; line-height: 1.3; }
.wa-bk-age-sub:empty { display: none; }
.wa-bk-age:has(.wa-bk-age-sub:empty) { grid-template-areas: "name step"; }
.wa-bk-age-deal { color: #1f6e47; font-weight: 800; }
.wa-bk-age-deal::before { content: " · "; color: #697871; font-weight: 600; }
.wa-bk-step { grid-area: step; display: flex; align-items: center; gap: 6px; }
/* .wa-bk-field input lo pondría al 100 % y con borde: aquí es un número, no un campo. */
.wa .wa-bk-ages .wa-bk-step .wa-bk-age-n {
    width: 34px; padding: 4px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;
    font-size: var(--wag-text-16); font-weight: 800; color: var(--wag-type-bk-age-n-ink, var(--wag-style-bk-age-n-ink)); text-align: center; -moz-appearance: textfield;
}
.wa .wa-bk-ages .wa-bk-step .wa-bk-age-n:focus { border: 0; box-shadow: none; outline: 2px solid var(--wag-type-field-booking-focus-ring, var(--wag-style-field-booking-focus-ring)); }
.wa-bk-age-n::-webkit-outer-spin-button,
.wa-bk-age-n::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wa .wa-bk-step-btn,
.wa .wa-bk-step-btn:focus,
.wa .wa-bk-step-btn:active {
    display: grid; place-items: center; width: 30px; height: 30px; padding: 0; margin: 0;
    border: 1px solid #cfd9d3; border-radius: 50%; background: var(--wag-surface); box-shadow: var(--wag-shadow-14);
    color: #1f6e47; font-size: var(--wag-text-18); font-weight: 700; line-height: 1; cursor: pointer;
}
.wa .wa-bk-step-btn svg { display: block; }
.wa .wa-bk-step-btn:hover { border-color: #2e9e5b; background: #f0f8f3; color: #1f6e47; }
.wa .wa-bk-step-btn:focus-visible { outline: 3px solid rgba(31,110,71,.2); outline-offset: 2px; }
.wa .wa-bk-step-btn:disabled,
.wa .wa-bk-step-btn:disabled:hover { opacity: .35; border-color: #cfd9d3; background: var(--wag-surface); cursor: default; }
html[data-theme="dark"] .wa-bk-age { background: var(--wag-type-bk-age-dark-bg, var(--wag-style-bk-age-dark-bg)); border-color: var(--wag-type-bk-age-dark-line, var(--wag-style-bk-age-dark-line)); }
html[data-theme="dark"] .wa-bk-age-name,
html[data-theme="dark"] .wa .wa-bk-ages .wa-bk-step .wa-bk-age-n { color: var(--wag-dark-ink); background: transparent; box-shadow: none; }
html[data-theme="dark"] .wa-bk-age-sub { color: var(--wag-type-bk-age-sub-dark-ink, var(--wag-style-bk-age-sub-dark-ink)); }
html[data-theme="dark"] .wa-bk-age-deal { color: #95d6a8; }
html[data-theme="dark"] .wa .wa-bk-step-btn,
html[data-theme="dark"] .wa .wa-bk-step-btn:focus,
html[data-theme="dark"] .wa .wa-bk-step-btn:active,
html[data-theme="dark"] .wa .wa-bk-step-btn:disabled,
html[data-theme="dark"] .wa .wa-bk-step-btn:disabled:hover { background: #1c222a; border-color: #46525e; color: #95d6a8; }
html[data-theme="dark"] .wa .wa-bk-step-btn:hover { background: #14271c; border-color: var(--wag-dark-accent); color: #95d6a8; }
html[data-theme="dark"] .wa-bk-session.is-off .wa-bk-session-name { color: #5d6873; }
html[data-theme="dark"] .wa-bk-session.is-off .wa-bk-session-left { color: #ff8a7e; }
@media (max-width: 700px) {
    .wa-bk-session { min-height: 58px; }
}

/* Proposal card: full-width row in the outer flex container */
.wa-ct-proposal-card { flex-basis: 100%; }

/* Outline button variant for "View proposal →" in changes_requested state */
.wa-ct-proposal-card-btn--outline {
    background: #fff8e6; color: #7a5a0a;
    border: 1.5px solid #e0c020;
}
.wa .wa-ct-proposal-card-btn--outline:hover { background: #fff2c8; color: #5a4208; }

.wa-bk-advice-reply { display: flex; flex-direction: column; gap: 6px; }
.wa-bk-advice-reply-row { display: flex; align-items: center; gap: var(--wag-space-8); flex-wrap: wrap; }
.wa-bk-advice-reply-row a.wa-owner-btn {
    text-decoration: none; font-size: 12.5px; font-weight: 700; color: #1a7a4a;
    background: #eefaf4; border-radius: var(--wag-radius-8); padding: 7px 12px;
}
.wa-bk-advice-send-msg { font-size: var(--wag-text-12); }

/* Operator/resource name next to the product name in booking cards */
.wa-bk-prod-owner { color: #8a95a3; font-weight: 400; font-size: var(--wag-text-12); }

/* Owner reservation settings (enable + notify email) */
.wa-bk-settings { display: flex; flex-direction: column; gap: 10px; max-width: 460px;
    padding: 16px; border: 1px solid #e1e8ee; border-radius: var(--wag-radius-12); background: #f7faf8; }
.wa-bk-set-toggle { display: flex; align-items: center; gap: var(--wag-space-8); font-size: var(--wag-text-14); font-weight: 600; color: #2b3a47; }
.wa-bk-set-field { display: flex; flex-direction: column; gap: var(--wag-space-4); }
.wa-bk-set-field > span { font-size: var(--wag-text-12); font-weight: 700; color: #4a5a51; }
.wa-bk-set-field input { padding: 9px 11px; border: 1px solid #d4dee6; border-radius: 9px; font-size: var(--wag-text-14); }
.wa-bk-set-msg { font-size: var(--wag-text-13); color: var(--wag-accent); }

/* Owner Bookings panel */
.wa-bk-row-owner { align-items: flex-start; gap: var(--wag-space-12); flex-wrap: wrap; }
.wa-bk-main { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 2px; }
.wa-bk-prod a { font-weight: 700; color: #16323f; text-decoration: none; }
html[data-theme="dark"] .wa-bk-prod a {color: #fff;}
.wa .wa-bk-prod a:hover { text-decoration: underline; }
.wa-bk-meta { font-size: var(--wag-text-13); color: #4a5a51; font-weight: 600; }
.wa-bk-contact { font-size: 12.5px; color: #5f7f9f; }
.wa-bk-contact a { color: #5f7f9f; }
.wa-bk-note-row { font-size: var(--wag-text-13); color: #6b7a70; font-style: italic; margin-top: 2px; }
.wa-bk-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wa-bk-block-controls { display: flex; gap: var(--wag-space-8); align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.wa-bk-block-controls select, .wa-bk-block-controls input[type="date"] {
    padding: 8px 10px; border: 1px solid #d4dee6; border-radius: 9px; font-size: 13.5px;
}
.wa-bk-block-msg { font-size: 12.5px; color: var(--wag-accent); }
.wa-bk-block-list { font-size: var(--wag-text-13); color: #4a5a51; margin: 4px 0; }
.wa-bk-chip {
    display: inline-flex; align-items: center; gap: 5px; margin: 2px 4px 2px 0;
    padding: 3px 6px 3px 10px; border-radius: var(--wag-radius-999);
    background: #f3f6f9; border: 1px solid #e1e8ee; font-size: 12.5px;
}
.wa-bk-chip-rm { border: 0; background: none; cursor: pointer; color: #b3422b; font-size: 15px; line-height: 1; padding: 0 2px; }

/* Custom submit bar at the very bottom of the Add-Hotspot form */
.wa-submit-row {
    align-items: center;
    margin-top: 24px; padding-top: 18px;
    border-top: 1px solid #e6ebf0;
}
/* Save Draft / Preview / Submit Hotspot — same shape as .wa-owner-btn */
.wa-savedraft-btn,
.wa-preview-btn,
.wa-submit-hotspot-btn {
    display: inline-block; padding: 9px 16px; border-radius: 9px !important; border: none;
    font-size: var(--wag-text-13); font-weight: 600; letter-spacing: 0 !important; text-transform: none !important;
    cursor: pointer; white-space: nowrap; text-decoration: none;
    transition: background .2s ease;
}
.wa-savedraft-btn:disabled,
.wa-preview-btn:disabled,
.wa-submit-hotspot-btn:disabled { opacity: .5; cursor: not-allowed; }
/* Save Draft */
.wa-savedraft-btn,
.wa-savedraft-btn:hover,
.wa .wa-savedraft-btn:focus { color: #fff !important; }
.wa-savedraft-btn { background: #b3422b; }
.wa .wa-savedraft-btn:hover:not(:disabled) { background: #9c3924; }
/* Preview */
.wa-preview-btn,
.wa-preview-btn:hover,
.wa .wa-preview-btn:focus { color: #3a4a5a !important; }
.wa-preview-btn { background: var(--wag-surface); border: 1.5px solid #d0d8e2 !important; }
.wa .wa-preview-btn:hover:not(:disabled) { background: #f0f3f6; border-color: #b0bcc8 !important; }
/* Submit Hotspot */
.wa-submit-hotspot-btn,
.wa-submit-hotspot-btn:hover,
.wa .wa-submit-hotspot-btn:focus { color: #fff !important; }
.wa-submit-hotspot-btn { background: #1a2a3a; }
.wa .wa-submit-hotspot-btn:hover:not(:disabled) { background: #283c50; }
/* Observed species search suggestions — force dark text against GD button overrides */
.wa-osp-suggest .wa-oh-suggest-item,
.wa-osp-suggest .wa-oh-suggest-item:hover,
.wa .wa-osp-suggest .wa-oh-suggest-item:focus { color: #1a2a3a !important; background-color: transparent; }
.wa-osp-suggest .wa-oh-suggest-item:hover,
.wa .wa-osp-suggest .wa-oh-suggest-item:focus { background-color: #eef3f8 !important; }

.wa-owner-list .wa-owner-revoke { font-size: var(--wag-text-12); }

.wa-claim-assoc { margin: 12px 0 4px; }
.wa-claim-assoc label { display: block; font-size: var(--wag-text-11); font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: #788596; margin-bottom: 5px; }
.wa-claim-assoc select { padding: 7px 10px; border: 1px solid #d8dee6; border-radius: var(--wag-radius-8); font-size: var(--wag-text-13); color: #1a2a3a; min-width: 220px; }

/* Operator ↔ Hotspot manual links (admin) */
.wa-pill-manual { background: #eef3f8; color: #5f7f9f; }
.wa-oh-form { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; margin: 8px 0 14px; }
.wa-oh-field { position: relative; }
.wa-oh-field input[type="text"] { padding: 8px 11px; border: 1px solid #d8dee6; border-radius: var(--wag-radius-8); font-size: var(--wag-text-13); min-width: 220px; }
.wa-oh-arrow { align-self: center; color: #9aa4b1; font-size: var(--wag-text-16); }
.wa-oh-suggest { position: absolute; top: 100%; left: 0; right: 0; z-index: 20; background: var(--wag-surface); border: 1px solid #e4e8ee; border-radius: var(--wag-radius-8); box-shadow: var(--wag-shadow-13); margin-top: 4px; overflow: hidden; }
.wa-oh-suggest:empty { display: none; }
.wa-oh-suggest-item { display: block; width: 100%; text-align: left; padding: 8px 11px; border: none; background: none; font-size: var(--wag-text-13); color: #1a2a3a; cursor: pointer; }
.wa .wa-oh-suggest-item:hover { background: #eef3f8; }
.wa-oh-sep { color: #9aa4b1; }
.wa-oh-msg { align-self: center; font-size: var(--wag-text-12); color: #788596; }

/* Multi-manager (Team) panel */
.wa-managers-list .wa-admin-trow span { display: flex; align-items: center; gap: var(--wag-space-8); }
.wa-managers-list img { border-radius: 50%; }
.wa-mgr-add { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.wa-mgr-field { position: relative; }
.wa-mgr-field input[type="text"] { padding: 8px 11px; border: 1px solid #d8dee6; border-radius: var(--wag-radius-8); font-size: var(--wag-text-13); min-width: 260px; }
.wa-assocreq { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.wa-assocreq-btn { margin: 0; }
.wa .wa-owner-assoc .wa-assocreq { align-items: center; gap: var(--wag-space-12); }
.wa .wa-owner-assoc .wa-assocreq .wa-mgr-field { flex: 0 1 380px; min-width: min(100%, 260px); }
.wa .wa-owner-assoc .wa-assocreq input.wa-assocreq-search {
    display: block; width: 100%; min-width: 0; height: 48px; margin: 0;
    padding: 0 16px 0 46px;
}
.wa .wa-owner-assoc .wa-assocreq .wa-assocreq-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 48px; margin: 0; white-space: nowrap;
}
.wa .wa-owner-assoc .wa-assocreq-msg:empty { display: none; }
@media (max-width: 640px) {
    .wa .wa-owner-assoc .wa-assocreq .wa-mgr-field { flex-basis: 100%; }
    .wa .wa-owner-assoc .wa-assocreq .wa-assocreq-btn { width: 100%; }
}
.wa-mgr-suggest { position: absolute; top: 100%; left: 0; right: 0; z-index: 20; background: var(--wag-surface); border: 1px solid #e4e8ee; border-radius: var(--wag-radius-8); box-shadow: var(--wag-shadow-13); margin-top: 4px; overflow: hidden; }
.wa-mgr-suggest:empty { display: none; }
.wa-oh-suggest-empty { padding: 8px 11px; font-size: var(--wag-text-12); color: #9aa4b1; }
.wa-sub-reason { margin-top: 4px; font-size: var(--wag-text-12); color: #b3422b; }

/* Observed Species — submit picker + grid intro */
.wa-observed-pick { margin: 22px 0; padding: 18px; border: 1px solid #e4e8ee; border-radius: var(--wag-radius-12); background: #fbfcfd; }
.wa-observed-pick-title { margin: 0 0 4px; font-size: var(--wag-text-14); font-weight: 700; color: #1a2a3a; }
.wa-observed-pick-help { margin: 0 0 10px; font-size: var(--wag-text-12); color: #788596; }
.wa-obs-required-err { margin: 6px 0 10px; font-size: 12.5px; color: #c0392b; font-weight: 600; }
.wa-osp-field { position: relative; max-width: 420px; }
.wa-osp-field input { width: 100%; padding: 9px 11px; border: 1px solid #d8dee6; border-radius: 9px; font-size: var(--wag-text-14); }
.wa-osp-suggest { position: absolute; top: 100%; left: 0; right: 0; z-index: 20; background: var(--wag-surface); border: 1px solid #e4e8ee; border-radius: var(--wag-radius-8); box-shadow: var(--wag-shadow-13); margin-top: 4px; overflow: hidden; }
.wa-osp-suggest:empty { display: none; }
.wa-osp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--wag-space-12); margin-bottom: 14px; }
.wa-osp-card {
    position: relative; display: flex; align-items: center; gap: var(--wag-space-12);
    padding: 12px 34px 12px 12px; border: 2px dashed #cdd6e0; border-radius: 14px; background: var(--wag-surface);
}
.wa-osp-card-photo { width: 60px; height: 60px; border-radius: var(--wag-radius-12); background-size: cover; background-position: center; background-color: #eef3f8; flex-shrink: 0; }
.wa-osp-card-photo[data-empty="1"] { background-image: linear-gradient(135deg,#eef3f8,#dde6ee); }
.wa-osp-card-body { display: flex; flex-direction: column; min-width: 0; }
.wa-osp-card-name { font-size: var(--wag-text-14); font-weight: 700; color: #1a2a3a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-osp-card-sci { font-size: var(--wag-text-12); color: #9aa4b1; font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-osp-card-rm {
    position: absolute; top: 8px; right: 8px;
    width: 22px; height: 22px; padding: 0; margin: 0;
    display: flex; align-items: center; justify-content: center;
    background: none !important; border: none !important; box-shadow: var(--wag-shadow-15) !important;
    border-radius: 50%; cursor: pointer; font-size: var(--wag-text-18); line-height: 1; color: #b8c0ca;
}
.wa .wa-osp-card-rm:hover { color: #b3422b; background: #fbe9e6 !important; }

/* Verified tic — smaller inside cards */
.hotspot-card-content h3 .wa-verified { margin-left: 5px; }
.hotspot-card-content h3 .wa-verified svg { width: 16px; height: 16px; }
.wa-observed-intro { font-size: var(--wag-text-13); color: #788596; margin: 0 0 12px; }

/* Verified/managed badge next to hero title */
.wa-verified { display: inline-flex; align-items: center; vertical-align: middle; margin-left: 10px; }
.wa-verified svg { width: 28px; height: 28px; display: block; }

/* Bookable legend — filterbar key: premium pill ✓ Bookable pushed to far right */
.wa-bookable-legend {
    display: inline-flex; align-items: center; gap: 7px;
    margin-left: auto;
    padding: 5px;
    background: #e6f4ed;
    color: #167a43;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .9px;
    text-transform: uppercase;
    border-radius: var(--wag-radius-20);
    border: 1px solid #b2dfc4;
    white-space: nowrap;
    cursor: default;
    user-select: none;
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(46,125,82,.12);
}
.wa-bookable-legend-icon {
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    line-height: 0;
}

/* Compact claim — tiny discreet pill beside the categories subtitle */
.wa-hero-claim { margin-top: 8px; }
.wa-claim-wrap--compact { display: inline-block; margin: 0 0 0 10px; vertical-align: middle; }
.wa-claim-mini {
    display: inline-block; padding: 2px 10px; border-radius: var(--wag-radius-999);
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.40);
    color: #fff; font-size: var(--wag-text-11); font-weight: 600; letter-spacing: 0.2px;
    cursor: pointer; line-height: 1.7; white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.wa .wa-claim-mini:hover { background: rgba(255, 255, 255, 0.28); border-color: #fff; }

/* Operators directory (/operators) */
.wa-dir-search { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.wa-dir-search input { flex: 1; min-width: 180px; padding: 10px 14px; border: 1px solid #d8dee6; border-radius: 10px; font-size: var(--wag-text-14); }
.wa-dir-country-filter { padding: 10px 14px; border: 1px solid #d8dee6; border-radius: 10px; font-size: var(--wag-text-14); background: var(--wag-surface); color: #1a2a3a; cursor: pointer; }
.wa-dir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--wag-space-16); }
.wa-dir-card { display: flex; flex-direction: column; border: 1px solid #e8ecf1; border-radius: 14px; overflow: hidden; background: var(--wag-surface); text-decoration: none; transition: box-shadow .15s ease, transform .15s ease; }
.wa .wa-dir-card:hover { box-shadow: 0 8px 24px rgba(16,24,40,.10); transform: translateY(-2px); }
.wa-dir-card-img { height: 130px; overflow: hidden; background-size: cover; background-position: center; background-color: #eef3f8; }
/* La foto ya no es fondo sino <img>, para poder llevar srcset. `object-fit`
   reproduce exactamente lo que hacía `background-size: cover`. */
.wa-dir-card-photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.wa-dir-card-img[data-empty="1"] { background-image: linear-gradient(135deg,#eef3f8,#dde6ee); }
.wa-dir-card-body { padding: 14px 16px; }
.wa-dir-card-body h3 { margin: 0 0 4px; font-size: var(--wag-text-16); color: #1a2a3a; }
.wa-dir-card-country { display: block; font-size: 11.5px; color: #9aabb8; margin-bottom: 6px; }
.wa-dir-card-body p { margin: 0 0 10px; font-size: var(--wag-text-13); color: #788596; line-height: 1.5; }
.wa-dir-card-claim { font-size: var(--wag-text-12); font-weight: 700; color: #5f7f9f; }
.wa-dir-pagination { display: flex; gap: 6px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }
.wa-dir-page { min-width: 34px; text-align: center; padding: 7px 10px; border: 1px solid #d8dee6; border-radius: var(--wag-radius-8); font-size: var(--wag-text-13); color: #3a566f; text-decoration: none; }
.wa-dir-page.is-current { background: #1a2a3a; color: #fff; border-color: #1a2a3a; }

/* Duplicate-detection boxes (Add Operator / Add Hotspot) */
.wa-dup-panel { margin-bottom: 18px; }
.wa-hdup-search { max-width: 480px; } /* el resto: buscador común (final del fichero) */
.wa-dup-suggest { margin-top: 10px; border: 1px solid #f0dcb0; background: #fff7e6; border-radius: 10px; padding: 10px 14px; max-width: 560px; }
.wa-dup-head { font-size: var(--wag-text-12); font-weight: 700; color: #a86b1a; margin-bottom: 6px; }
.wa-dup-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: var(--wag-text-14); color: #1a2a3a; }
.wa-dup-row a { font-size: var(--wag-text-12); font-weight: 600; color: #5f7f9f; text-decoration: none; white-space: nowrap; }
.wa-dup-foot { font-size: var(--wag-text-11); color: #9a7b3a; margin-top: 6px; }

/* Community submission form (Add Operator) */
.wa-submit-form label { display: block; margin-bottom: 14px; font-size: var(--wag-text-12); font-weight: 600; color: #44505f; letter-spacing: 0.2px; }
.wa-submit-form input, .wa-submit-form textarea {
    display: block; width: 100%; margin-top: 5px; padding: 9px 11px; font-size: var(--wag-text-14);
    border: 1px solid #d8dee6; border-radius: 9px; background: #fbfcfd; color: #1a2a3a; font-family: inherit;
}
.wa .wa-submit-form input:focus,
.wa .wa-submit-form textarea:focus { outline: none; border-color: #5f7f9f; background: var(--wag-surface); }
.wa-submit-form textarea { resize: vertical; }
.wa-submit-row { display: flex; gap: var(--wag-space-12); }
.wa-submit-row label { flex: 1; }
.wa-submit-feedback { font-size: var(--wag-text-13); margin: 2px 0 8px; min-height: 18px; }
.wa-submit-feedback.is-error { color: #c0563e; }
/* Field-level validation state (non-admin community forms) */
.wa-submit-form input.wa-field-invalid,
.wa-submit-form select.wa-field-invalid,
.wa-submit-form textarea.wa-field-invalid {
    border-color: #c0563e !important;
    box-shadow: 0 0 0 2px rgba(192,86,62,.13) !important;
}
/* Inline image error (hotspot photo zone) */
.wa-hs-photo-error { color: #c0563e; font-size: var(--wag-text-13); margin: 8px 0 0; line-height: 1.4; }
.wa-submit-btn { margin-top: 4px; }

/* Form header row: label + early-submit button side by side */
.wa-submit-form-top {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--wag-space-12); margin-bottom: 6px;
}
.wa-submit-form-main-label {
    font-size: var(--wag-text-12); font-weight: 600; color: #44505f; letter-spacing: .2px; margin: 0;
}
.wa-submit-btn--top {
    margin-top: 0; padding: 8px 16px; font-size: var(--wag-text-13);
    flex-shrink: 0;
}
/* Small hint text under a field */
.wa-field-hint {
    display: block; font-size: 11.5px; color: #8b97a3; margin-top: 5px; line-height: 1.4;
}
/* "Coming soon" inline tag in benefits list */
.wa-coming-soon-tag {
    display: inline-block; font-size: 10.5px; font-style: normal; font-weight: 700;
    text-transform: uppercase; letter-spacing: .4px; color: #f59e0b;
    background: rgba(245,158,11,.10); border: 1px solid rgba(245,158,11,.25);
    padding: 1px 7px; border-radius: var(--wag-radius-999); margin-left: 6px; vertical-align: middle;
}

/* ── Hotspot featured photo upload zone ───────────────────────────────────── */
.wa-hs-photo-zone { margin: 0 0 6px; }
.wa-hs-photo-zone-label {
    display: flex; align-items: center; gap: var(--wag-space-16);
    width: 100%; padding: 18px 22px; box-sizing: border-box;
    border: 2px dashed #9ebdd6; border-radius: 14px;
    background: linear-gradient(135deg, #f3f8fc 0%, #eef4f9 100%);
    cursor: pointer; transition: border-color .18s, background .18s;
}
.wa .wa-hs-photo-zone-label:hover { border-color: #3a7ca5; background: linear-gradient(135deg, #e8f2f9 0%, #e0ecf6 100%); }
.wa-hs-photo-zone-icon {
    flex-shrink: 0; width: 52px; height: 52px; border-radius: var(--wag-radius-12);
    background: #deedf8; display: flex; align-items: center; justify-content: center;
    color: #2e6a9a;
}
.wa-hs-photo-zone-text { display: flex; flex-direction: column; gap: var(--wag-space-4); }
.wa-hs-photo-zone-text strong { font-size: 15px; font-weight: 700; color: #1a2a3a; line-height: 1.2; }
.wa-hs-photo-zone-desc { font-size: var(--wag-text-13); color: #44505f; line-height: 1.45; }
.wa-hs-photo-zone-hint { font-size: 11.5px; color: #9aabb8; margin-top: 2px; }
.wa-hs-photo-rights { margin: 8px 0 0; font-size: 11.5px; color: #9aabb8; line-height: 1.5; }
.wa-hs-photo-preview {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 16px; border: 1px solid #d0dce8; border-radius: var(--wag-radius-12);
    background: #f8fbfd; margin-top: 8px;
}
.wa-hs-photo-preview[hidden] { display: none; }
.wa-hs-photo-preview img { width: 80px; height: 54px; object-fit: cover; border-radius: var(--wag-radius-8); border: 1px solid #d4dde6; flex-shrink: 0; }
.wa-hs-photo-preview-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wa-hs-photo-preview-name { font-size: var(--wag-text-12); color: #44505f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.wa-hs-photo-remove {
    display: inline-flex; align-items: center; gap: var(--wag-space-4);
    padding: 4px 10px; border: 1px solid #d4dde6; border-radius: 6px;
    font-size: var(--wag-text-12); font-weight: 600; color: #c0392b; background: #fff3f2;
    cursor: pointer; line-height: 1.3; width: fit-content;
}
.wa .wa-hs-photo-remove:hover { background: #fce8e6; border-color: #c0392b; }

/* Operator image upload field */
.wa-op-image-wrap { margin-bottom: 14px; }
.wa-op-image-label { font-size: var(--wag-text-12); font-weight: 600; color: #44505f; letter-spacing: 0.2px; margin: 0 0 8px; }
.wa-op-image-hint { font-weight: 400; color: #8a99aa; }
.wa-op-image-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 14px; border: 1px dashed #b0bfcc; border-radius: 9px;
    font-size: var(--wag-text-13); font-weight: 600; color: #3a5570; cursor: pointer;
    background: #f4f8fb; transition: border-color .15s, background .15s;
}
.wa .wa-op-image-btn:hover { border-color: #5f8aaa; background: #eef4f9; }
.wa-op-image-preview { position: relative; display: inline-block; margin-top: 6px; }
.wa-op-image-preview[hidden] { display: none; } /* CSS display overrides [hidden] attr — must be explicit */
.wa-op-image-preview img { width: 140px; height: 90px; object-fit: cover; border-radius: 9px; border: 1px solid #d8dee6; display: block; }
.wa-op-image-remove {
    position: absolute; top: -6px; right: -6px; width: 22px; height: 22px;
    background: #1a2a3a; color: #fff; border: none; border-radius: 50%; cursor: pointer;
    font-size: var(--wag-text-11); line-height: 22px; text-align: center; padding: 0;
}

.wa-submit-success { text-align: center; padding: 16px 4px 8px; }
.wa-submit-success svg { color: #2e7d52; }
.wa-submit-success h3 { margin: 12px 0 6px; font-size: var(--wag-text-18); color: #1a2a3a; }
.wa-submit-success p { margin: 0; font-size: var(--wag-text-13); color: #788596; }
.wa-mgr-msg { align-self: center; font-size: var(--wag-text-12); color: #788596; }
/* Owner / operator benefits callout — shared by add-hotspot + add-operator */
.wa-biz-own-benefits { margin: 0 0 20px; padding: 16px 18px; background: linear-gradient(135deg,#edf6f1 0%,#f0f9f4 100%); border: 1px solid #b8dfc9; border-radius: 11px; }
.wa-biz-own-benefits strong { display: block; font-size: 13.5px; font-weight: 800; color: #1f5c3a; margin-bottom: 10px; }
.wa-biz-own-benefits strong::after { content: ' ✓'; color: var(--wag-accent); }
.wa-biz-own-benefits ul { margin: 0; padding: 0 0 0 18px; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.wa-biz-own-benefits ul li { font-size: var(--wag-text-13); color: #2a4a38; line-height: 1.45; position: relative; }
.wa-biz-own-benefits ul li::before { content: '✓'; position: absolute; left: -18px; color: var(--wag-accent); font-weight: 800; }
.wa-biz-own-benefits-future { margin: 12px 0 0; font-size: 11.5px; color: #6a8a76; line-height: 1.5; border-top: 1px solid #c8e0d2; padding-top: 10px; font-style: italic; }

.wa-claim-pill.is-pending { background: var(--wag-type-claim-pill-bg, var(--wag-style-claim-pill-bg)); color: var(--wag-type-claim-pill-ink, var(--wag-style-claim-pill-ink)); }

.wa-removal-act {
    border: none; border-radius: var(--wag-radius-8); padding: 8px 14px;
    font-size: var(--wag-text-13); font-weight: 600; cursor: pointer;
}
.wa-removal-act:disabled { opacity: 0.6; cursor: default; }

.wa-admin-review-quote {
    border-left: 3px solid #d8dee6; padding: 6px 0 6px 12px; margin: 10px 0;
}

/* Manager badge (reuses the user-category chip look) */
.wa-user-category--manager { background: #eaf3ee; color: var(--wag-accent); }

/* Owner review moderation bar */
.wa-owner-review-mod {
    display: flex; align-items: center; flex-wrap: wrap; gap: var(--wag-space-8);
    margin-top: 10px; padding-top: 10px; border-top: 1px solid #f0f2f5;
    font-size: var(--wag-text-12);
}
.wa-owner-mod-sep { color: #cbd2db; }
.wa-owner-link {
    background: none; border: none; padding: 0; cursor: pointer;
    font-size: var(--wag-text-12); font-weight: 600; color: #788596;
}
.wa .wa-owner-link:hover:not(:disabled) { color: #b3422b; }
.wa-owner-link:disabled { color: #b8c0ca; cursor: default; }
.wa-oremove { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wa-oremove-reason {
    padding: 5px 8px; border: 1px solid #d8dee6; border-radius: 7px; font-size: var(--wag-text-12); color: #44505f;
}
.wa-oremove-note {
    padding: 5px 9px; border: 1px solid #d8dee6; border-radius: 7px; font-size: var(--wag-text-12); min-width: 160px;
}

/* Edit-profile checkbox row */
.wa-profile-check { display: flex; align-items: center; gap: 9px; flex-direction: row !important; }
.wa-profile-check input { width: auto; margin: 0; }
.wa-profile-check span { font-weight: 400; }

/* =============================================================
   WAOS — Operator ↔ Hotspot association (display-only)
   ============================================================= */
.wa-assoc-block { margin: 18px 0; }
.wa-assoc-title {
    margin: 0 0 10px; font-size: var(--wag-text-11); font-weight: 700; letter-spacing: 1.5px;
    text-transform: uppercase; color: var(--wag-type-assoc-title-ink, var(--wag-style-assoc-title-ink));
}
.wa-assoc-chips { display: flex; flex-wrap: wrap; gap: var(--wag-space-8); }
.wa-assoc-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border-radius: var(--wag-radius-999);
    background: #eef3f8; color: #1a2a3a; border: 1px solid #dde6ee;
    font-size: var(--wag-text-13); font-weight: 600; text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.wa .wa-assoc-chip:hover { background: #e1ebf4; border-color: #b9cbdc; color: #1a2a3a; }

/* =============================================================
   WAOS — Claim this listing (button + modal)
   ============================================================= */
.wa-claim-wrap { margin: 18px 0; padding-bottom: 8px; }

.wa-claim-btn {
    display: inline-flex; align-items: center; gap: var(--wag-space-8);
    padding: 10px 18px;
    background: var(--wag-surface); color: #1a2a3a;
    border: 1px solid #d8dee6; border-radius: var(--wag-radius-999);
    font-size: var(--wag-text-13); font-weight: 600; letter-spacing: 0.2px;
    cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wa .wa-claim-btn:hover { border-color: #9fb0c2; box-shadow: 0 2px 10px rgba(26,42,58,0.08); }
.wa-claim-btn svg { color: #5f7f9f; }

.wa-claim-status {
    display: inline-block; padding: 8px 16px; border-radius: var(--wag-radius-999);
    font-size: var(--wag-text-13); font-weight: 600;
}
.wa-claim-status--pending { background: #fff7e6; color: #a86b1a; border: 1px solid #f0dcb0; }

/* Modal */
.wa-claim-modal {
    position: fixed; inset: 0; z-index: 100000;
    display: flex; align-items: center; justify-content: center;
    padding: 20px; background: rgba(15,22,30,0.55);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.wa-claim-modal[hidden] { display: none; }

.wa-claim-modal-card {
    position: relative; width: 100%; max-width: 460px;
    max-height: 90vh; overflow-y: auto;
    background: var(--wag-surface); border-radius: var(--wag-radius-16); padding: 30px 28px 26px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.30);
}
.wa-claim-close {
    position: absolute; top: 14px; right: 16px;
    background: none; border: none; font-size: 26px; line-height: 1;
    color: #aaa; cursor: pointer;
}
.wa .wa-claim-close:hover { color: #555; }
.wa-claim-title { margin: 0 0 6px; font-size: 19px; font-weight: 700; color: #1a2a3a; padding-right: 24px; }
.wa-claim-sub   { margin: 0 0 18px; font-size: var(--wag-text-13); color: #788596; line-height: 1.5; }

.wa-claim-form label {
    display: block; margin-bottom: 12px;
    font-size: var(--wag-text-12); font-weight: 600; color: #44505f; letter-spacing: 0.2px;
}
.wa-claim-req { color: #c0563e; }
.wa-claim-form input,
.wa-claim-form textarea {
    display: block; width: 100%; margin-top: 5px;
    padding: 9px 11px; font-size: var(--wag-text-14);
    border: 1px solid #d8dee6; border-radius: 9px;
    background: #fbfcfd; color: #1a2a3a; font-family: inherit;
}
.wa-claim-form input:focus,
.wa .wa-claim-form textarea:focus { outline: none; border-color: #5f7f9f; background: var(--wag-surface); }
.wa-claim-form textarea { resize: vertical; }
.wa-claim-row { display: flex; gap: var(--wag-space-12); }
.wa-claim-row label { flex: 1; }

.wa-claim-feedback { font-size: var(--wag-text-13); min-height: 0; margin: 2px 0 8px; }
.wa-claim-feedback.is-error { color: #c0563e; }

.wa-claim-submit {
    width: 100%; padding: 11px; margin-top: 6px;
    background: #1a2a3a; color: #fff;
    border: none; border-radius: 10px;
    font-size: var(--wag-text-14); font-weight: 600; cursor: pointer;
    transition: background 0.15s ease;
}
.wa .wa-claim-submit:hover:not(:disabled) { background: #283c50; }
.wa-claim-submit:disabled { opacity: 0.65; cursor: default; }

/* Proof of ownership block */
.wa-claim-proof {
    margin-bottom: 14px; padding: 14px 16px;
    background: #f0f6f2; border: 1px solid #b8ddc8; border-radius: 11px;
}
.wa-claim-proof-title {
    display: flex; align-items: center; gap: 6px; margin: 0 0 12px;
    font-size: var(--wag-text-12); font-weight: 700; color: #1f5c3a; text-transform: uppercase; letter-spacing: .4px;
}
.wa-claim-proof-title svg { color: var(--wag-accent); flex-shrink: 0; }
.wa-claim-optional { font-weight: 400; color: #5a8a6a; text-transform: none; letter-spacing: 0; }
.wa-claim-proof-body { display: flex; flex-direction: column; gap: 0; }
.wa-claim-proof-body label { margin-bottom: 10px; }
.wa-claim-proof-hint { display: block; font-size: var(--wag-text-11); font-weight: 400; color: #7a9a86; margin: 3px 0 5px; line-height: 1.4; }
.wa-claim-form input[type="file"],
.wa-biz-own-form input[type="file"],
.wa-submit-form input[type="file"] { padding: 6px 8px; background: var(--wag-surface); font-size: var(--wag-text-12); border-radius: var(--wag-radius-8); border: 1px solid #c8d8cc; }

/* Proof display in admin claim card */
.wa-claim-proof-admin {
    display: flex; gap: var(--wag-space-12); align-items: center; flex-wrap: wrap;
    margin: 6px 0 2px; padding: 7px 10px;
    background: #f0f6ff; border-radius: var(--wag-radius-8); font-size: var(--wag-text-12);
}
.wa-claim-proof-admin a { color: #2a5fa5; text-decoration: underline; }

.wa-claim-success { text-align: center; padding: 16px 4px 8px; }
.wa-claim-success svg { color: #2e7d52; }
.wa-claim-success h4 { margin: 12px 0 6px; font-size: var(--wag-text-18); color: #1a2a3a; }
.wa-claim-success p  { margin: 0; font-size: var(--wag-text-13); color: #788596; line-height: 1.5; }

body.wa-claim-open { overflow: hidden; }

/* Click-to-interact hint */
.country-map-hint {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 14;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: var(--wag-radius-999);
    background: var(--wag-type-country-map-hint-bg, var(--wag-style-country-map-hint-bg));
    backdrop-filter: blur(4px);
    color: var(--wag-type-country-map-hint-ink, var(--wag-style-country-map-hint-ink));
    font-size: var(--wag-text-12);
    font-weight: 500;
    letter-spacing: 0.2px;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.25s ease;
}
.country-hero-banner.is-map-active .country-map-hint { opacity: 0; }
/* Es un <button>: sin los estilos de Astra (fondo azul al pasar, borde). */
.wa .country-map-hint, .wa .country-map-hint:hover, .wa .country-map-hint:focus, .wa .country-map-hint:active {
    border: 0; background: var(--wag-type-country-map-hint-bg, var(--wag-style-country-map-hint-bg)); color: var(--wag-type-country-map-hint-ink, var(--wag-style-country-map-hint-ink));
    font: inherit; font-size: var(--wag-text-12); font-weight: 500; line-height: 1.3; box-shadow: var(--wag-shadow-14);
}
/* Móvil: arriba, lejos del título, y es la llave del mapa (Marc, 2026-10-04):
   mientras no se pulse, el lienzo no recibe el dedo y la página hace scroll
   por encima; al pulsarlo el mapa se activa y el botón se va
   (inc/templates/country-hero-map.php). */
@media (max-width: 768px) {
    .wa .country-map-hint {
        top: 16px; bottom: auto; pointer-events: auto; cursor: pointer;
        padding: 9px 16px; font-size: var(--wag-text-13); font-weight: 600; white-space: nowrap;
        background: rgba(20, 28, 38, 0.72);
    }
    .country-hero-banner--map:not(.is-map-active) .country-hero-map-canvas,
    .country-hero-banner--map:not(.is-map-active) .country-hero-map-canvas * { pointer-events: none !important; }
    .country-hero-banner.is-map-active .country-map-hint { opacity: 0; pointer-events: none; }
}

/* Marker pin */
.wa-hotspot-pin {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.72);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
    transition: transform 0.15s ease;
}

/* Cluster bubble */
.wa-cluster-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.wa-cluster-inner {
    width: 38px;
    height: 38px;
    border-radius: var(--wag-type-cluster-inner-radius, var(--wag-style-cluster-inner-radius));
    background: var(--wag-type-cluster-inner-bg, var(--wag-style-cluster-inner-bg));
    border: 2.5px solid var(--wag-type-cluster-inner-line, var(--wag-style-cluster-inner-line));
    box-shadow: var(--wag-type-cluster-inner-shadow, var(--wag-style-cluster-inner-shadow));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wag-type-cluster-inner-ink, var(--wag-style-cluster-inner-ink));
    font-size: var(--wag-text-13);
    font-weight: 700;
    letter-spacing: -0.5px;
    transition: background 0.2s ease;
}

.wa .wa-cluster-icon:hover .wa-cluster-inner {
    background: var(--wag-type-cluster-inner-hover-bg, var(--wag-style-cluster-inner-hover-bg));
}

/* Popup */
/* El filo de 1px va como sombra interior y no como border (Marc, 2026-10-04):
   con border, la caja medía 222 y el contenido 220 fijos, así que la foto
   quedaba desplazada un píxel — se veía el filo arriba y a la izquierda y a
   la derecha no. overflow:hidden recorta la foto al mismo radio. */
.wa-map-popup .leaflet-popup-content-wrapper {
    background: #1a202e !important;
    border: 0 !important;
    border-radius: 10px !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55) !important;
    padding: 0 !important;
    width: 220px !important;
    overflow: hidden;
    position: relative;
}
.wa-map-popup .leaflet-popup-content-wrapper::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10); pointer-events: none;
}

.wa-map-popup .leaflet-popup-content {
    margin: 0 !important;
    width: 220px !important;
}

.wa-map-popup .leaflet-popup-tip-container {
    margin-top: -1px;
}

.wa-map-popup .leaflet-popup-tip {
    background: #1a202e !important;
    box-shadow: var(--wag-shadow-15) !important;
}

.wa-map-popup-link {
    display: flex;
    flex-direction: column;
    text-decoration: none !important;
}

.wa-popup-thumb {
    width: 100%;
    height: 120px;
    background-size: cover;
    background-position: center;
    background-color: #2a3347;
    flex-shrink: 0;
}

.wa-popup-body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px 14px 12px;
}

.wa-popup-title {
    color: #fff;
    font-size: var(--wag-text-13);
    font-weight: 600;
    line-height: 1.3;
}

.wa-popup-cat {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--wag-radius-20);
    font-size: var(--wag-text-11);
    font-weight: 500;
    letter-spacing: 0.3px;
    align-self: flex-start;
}

/* Custom zoom controls — above the overlay layer */
.country-map-zoom-controls {
    position: absolute;
    bottom: 30px;
    right: 16px;
    z-index: 15;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-radius: var(--wag-radius-8);
    overflow: hidden;
    box-shadow: var(--wag-type-country-map-zoom-controls-shadow, var(--wag-style-country-map-zoom-controls-shadow));
}

.cmz-btn {
    width: 32px;
    height: 32px;
    background: var(--wag-type-cmz-btn-bg, var(--wag-style-cmz-btn-bg));
    border: none;
    color: var(--wag-type-cmz-btn-ink, var(--wag-style-cmz-btn-ink));
    font-size: 19px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.wa .cmz-btn:hover {
    background: var(--wag-type-cmz-btn-hover-bg, var(--wag-style-cmz-btn-hover-bg));
    color: var(--wag-type-cmz-btn-hover-ink, var(--wag-style-cmz-btn-hover-ink));
}

.cmz-in  { border-radius: 8px 8px 0 0; border-bottom: 1px solid var(--wag-type-cmz-in-underline, var(--wag-style-cmz-in-underline)); }
.cmz-out { border-radius: 0 0 8px 8px; }

.country-hero-banner--map .leaflet-control-attribution {
    background: rgba(0, 0, 0, 0.38) !important;
    color: rgba(255, 255, 255, 0.40) !important;
    font-size: 10px !important;
    backdrop-filter: blur(4px);
    border-radius: 4px 0 0 0;
}

.country-hero-banner--map .leaflet-control-attribution a {
    color: rgba(255, 255, 255, 0.50) !important;
}

/* Responsive */
@media (max-width: 768px) {
    .country-map-legend,
.country-map-zoom-controls{ display: none; }
}