/**
* WildAtlas — Guided onboarding wizard (/join-operator/, /join-hotspot/).
* Loaded only on those two views (functions.php).
*
* Design language taken from the existing product, not invented:
* · greens #0f1f0f · #162816 · #2a4a2a · #1f7a4d · #6db84c · #8fcf6e
* (page-get-started.php hero/topbar + --wa-accent)
* · owner tokens --wa-card #fff · --wa-line #e7ecf1 · --wa-ink #15321f
* --wa-muted #6b7a86 · --wa-accent #1f7a4d
* · dark palette bg #0f1318 · surface #1a1f26 · line #2a313a · text #ccd3da
* · shape 11px controls, 16–20px cards, 800-weight headings at -.02em
*
* The card itself reuses .wa-submit-card, which already has light and dark
* surfaces defined in wildatlas.css — we only style what's new here.
*/
/* ★ REVERTIDO (Marc, 2026-08-18: "el container debe llegar abajo al footer").
*
* Aquí hubo un `flex: 0 0 auto` que anulaba el estirado de wildatlas.css:8660
* (`body.wa-fullheight .wa-page-card { flex: 1 }`). Se puso para atacar el
* "demasiado espacio blanco" del paso 1 — pero eso NO era la tarjeta: era la
* rejilla de pasos, que dimensionaba su fila al paso más alto (el mapa) y
* estiraba también al paso del nombre. Eso se arregló donde tocaba, en
* .wa-wizard-step (position:absolute para los inactivos).
*
* Al dejar además la tarjeta sin estirar, quedaba un hueco de fondo distinto
* entre el final del contenido y el footer. Dos síntomas parecidos, una sola
* causa real; esta regla sobraba y se elimina. La tarjeta vuelve a llegar
* abajo como en el resto del sitio. */
.wa-wizard-card {
--wz-accent: #1f7a4d;
--wz-accent-lift: #6db84c;
--wz-accent-soft: rgba(31,122,77,.09);
--wz-ink: #15321f;
--wz-muted: #6b7a86;
--wz-line: #e7ecf1;
--wz-surface: #fff;
--wz-surface-alt: #f7faf8;
/* Marc, 2026-08-17: ancho completo — el contenedor de la página ya limita
el máximo, así que la tarjeta no debe volver a estrecharlo. */
width: 100%;
max-width: none;
box-sizing: border-box;
margin: 0;
padding: 30px 34px 26px;
border-radius: 20px;
}
/* Stay inventory: Booking-style choice without exposing physical-unit plumbing. */
.wa-stay-booking-types{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:20px 0 24px}
.wa-stay-booking-type{display:block;cursor:pointer}
.wa-stay-booking-type>input{position:absolute;opacity:0;pointer-events:none}
.wa-stay-booking-type>span{display:flex;min-height:132px;flex-direction:column;gap:8px;padding:18px;border:1.5px solid #d8e0e6;border-radius:14px;background:#fff;transition:border-color .18s,box-shadow .18s,background .18s}
.wa-stay-booking-type strong{font-size:15px;color:#183925}
.wa-stay-booking-type small{font-size:12.5px;line-height:1.5;color:#667482}
.wa-stay-booking-type>input:checked+span{border-color:#b26a2d;background:#fffaf3;box-shadow:0 0 0 3px rgba(178,106,45,.12)}
.wa-stay-booking-type>input:focus-visible+span{outline:3px solid rgba(36,132,89,.22);outline-offset:2px}
.wa-stay-inventory-fields[hidden]{display:none!important}
.wa-stay-bed-config{margin-top:24px;padding-top:20px;border-top:1px solid #e2e7eb}
.wa-stay-bed-config h3{margin:0 0 5px;font-size:16px;color:#183925}
.wa-stay-bed-row{display:grid;grid-template-columns:minmax(110px,.35fr) minmax(220px,1fr);gap:12px;margin-top:12px}
.wa-stay-bed-row label{display:flex;flex-direction:column;gap:6px;font-weight:700;color:#344553}
.wa-stay-bed-row label>span{font-size:12px}
.wa-stay-bed-row input,.wa-stay-bed-row select{width:100%;min-height:44px;border:1px solid #ccd6dd;border-radius:9px;background:#fff;padding:9px 11px}
@media(max-width:720px){
.wa-stay-booking-types{grid-template-columns:1fr}
.wa-stay-booking-type>span{min-height:0}
.wa-stay-bed-row{grid-template-columns:1fr}
}
/* La pregunta y sus ayudas sí mantienen una medida legible dentro de la
tarjeta ancha — una línea de texto de 1.400 px no se lee, se escanea. */
.wa-wizard-step-inner { width: 100%; }
html[data-theme="dark"] .wa-wizard-card {
--wz-accent: #6db84c;
--wz-accent-lift: #8fcf6e;
--wz-accent-soft: rgba(109,184,76,.14);
--wz-ink: #e8edf1;
--wz-muted: #93a0ab;
--wz-line: #2a313a;
--wz-surface: #1a1f26;
--wz-surface-alt: #151a20;
}
/* The real product wizard in edit mode: identical controls and components,
with wizard groups exposed as accordions on one page instead of steps. */
.wa-product-wizard-form.is-edit-mode .wa-wizard-steps {
display: grid;
gap: 14px;
}
.wa-product-wizard-form.is-edit-mode .wa-wizard-railhead,
.wa-product-wizard-form.is-edit-mode > .wa-wizard-progress,
.wa-product-wizard-form.is-edit-mode > .wa-wizard-step-nav {
display: none !important;
}
.wa-product-wizard-form.is-edit-mode .wa-wizard-step {
position: static;
display: block;
width: 100%;
min-height: 0;
visibility: visible;
pointer-events: auto;
opacity: 1;
transform: none;
z-index: auto;
}
.wa-product-wizard-form.is-edit-mode .wa-product-edit-section {
overflow: visible;
border: 1px solid var(--wz-line);
border-radius: 15px;
background: var(--wz-surface);
}
.wa-product-edit-section-toggle,
.wa .wa-product-edit-section-toggle:hover,
.wa .wa-product-edit-section-toggle:focus {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
min-height: 58px;
padding: 15px 18px;
border: 0;
border-radius: 14px 14px 0 0;
background: var(--wz-accent-soft);
color: var(--wz-ink);
box-shadow: none;
text-align: left;
cursor: pointer;
}
.wa-product-edit-section-toggle span { font-size: 15px; font-weight: 850; }
.wa-product-edit-section-toggle i {
width: 9px;
height: 9px;
border-right: 2px solid var(--wz-accent);
border-bottom: 2px solid var(--wz-accent);
transform: rotate(45deg) translate(-2px, -2px);
transition: transform .18s ease;
}
.wa-product-edit-section.is-collapsed .wa-product-edit-section-toggle { border-radius: 14px; background: var(--wz-surface-alt); }
.wa-product-edit-section.is-collapsed .wa-product-edit-section-toggle i { transform: rotate(-45deg); }
.wa-product-edit-section > .wa-wizard-substep { padding: 22px 20px 24px; }
.wa-product-edit-section > .wa-wizard-substep + .wa-wizard-substep { border-top: 1px solid var(--wz-line); }
.wa-product-edit-section.is-collapsed > .wa-wizard-substep { display: none; }
.wa-product-wizard-form.is-edit-mode .wa-product-edit-final {
margin-top: 4px;
border: 1px solid var(--wz-line);
border-radius: 15px;
background: var(--wz-surface-alt);
}
.wa-product-edit-final > .wa-wizard-substep { padding: 22px 20px 24px; }
.wa-product-wizard-form.is-edit-mode .wa-product-final-actions { margin-top: 8px; }
.wa-hotspot-native-editor {
display: grid;
gap: 14px;
}
.wa-hotspot-native-editor .wa-wizard-subq {
margin: 26px 0 10px;
color: var(--wz-ink);
font-size: 16px;
font-weight: 850;
}
.wa-hotspot-native-editor .wa-hotspot-editor-categories {
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.wa-hotspot-native-editor .wa-hotspot-editor-extra-cats { margin-top: 12px; }
.wa-hotspot-native-editor input[type="url"],
.wa-hotspot-native-editor input[type="tel"] {
width: 100%;
box-sizing: border-box;
padding: 14px 16px;
border: 1.5px solid var(--wz-line);
border-radius: 12px;
background: var(--wz-surface);
color: var(--wz-ink);
font: inherit;
}
body.wa.wa-owner-hotspot-editor-view .wa-hotspot-native-editor .wa-product-final-actions #wa-pw-publish {
border-color: var(--wz-accent) !important;
background: var(--wz-accent) !important;
color: #fff !important;
}
body.wa.wa-owner-hotspot-editor-view .wa-hotspot-native-editor .wa-product-final-actions #wa-pw-publish:hover {
border-color: #17603c !important;
background: #17603c !important;
color: #fff !important;
}
body.wa.wa-owner-operator-editor-view .wa-operator-native-editor .wa-product-final-actions #wa-pw-publish {
border-color: var(--wz-accent) !important;
background: var(--wz-accent) !important;
color: #fff !important;
}
body.wa.wa-owner-operator-editor-view .wa-operator-native-editor .wa-product-final-actions #wa-pw-publish:hover {
border-color: #17603c !important;
background: #17603c !important;
color: #fff !important;
}
.wa-hotspot-editor-notice {
padding: 12px 14px;
border: 1px solid #cfe5d8;
border-radius: 11px;
background: #f1f8f4;
color: #245f3f;
font-size: 13px;
font-weight: 750;
}
.wa-hotspot-editor-notice.is-error { border-color: #efcbc3; background: #fff5f3; color: #9c3828; }
.wa-product-edit-feedback:not(:empty) {
margin: 14px 0;
padding: 11px 14px;
border: 1px solid #e7c8a7;
border-radius: 11px;
background: #fff8ef;
color: #8a4c18;
font-weight: 700;
}
@media (max-width: 640px) {
.wa-product-wizard-form.is-edit-mode { padding-inline: 14px; }
.wa-product-edit-section > .wa-wizard-substep { padding: 18px 14px 20px; }
}
/* ── Hero por familia: verde naturaleza / azul WildAtlas ─────────────────
Marc, 2026-08-18. NO son dos colores elegidos por separado: son la pareja
de las tarjetas rápidas del home (wildatlas.css:13969-13970), diseñadas
juntas — mismo ángulo de 150°, misma estructura de dos paradas.
.wa-home-quick-card--near → verde #2e7d52 → #1f5a3a
.wa-home-quick-card--atlas → azul #2b6ca8 → #1d4a73
La banda tiene DOS piezas: .profile-hero (el bloque central, ancho de
container) y ::before (las franjas laterales a 100vw). Marc, 2026-08-18:
el degradado va SÓLO en el bloque central — las franjas laterales se dejan
con el color de banda que tienen todas las demás páginas, para que el hero
se lea como una tarjeta dentro del container y no como una franja infinita. */
body.wa-wizard-business .profile-hero { background: linear-gradient(150deg, #2b6ca8, #1d4a73); }
body.wa-wizard-nature .profile-hero { background: linear-gradient(150deg, #2e7d52, #1f5a3a); }
/* ── Icono del hero (Growth CTAs) ────────────────────────────────────────
Los mismos iconos que ya identifican estas acciones en la topbar y en el
selector de /add-hotspot/: la casa para negocio, la hoja para naturaleza.
★ El de naturaleza (hotspot_add) es BICOLOR en modo 'raw': el cuerpo va en
currentColor y la nervadura en blanco fijo. Por eso el color se da al
CONTENEDOR (y no con fill/stroke sobre el svg, que lo aplanaría) y por eso
lleva un fondo detrás — sobre la banda oscura, una hoja blanca con nervadura
blanca sería una mancha sin dibujo. */
/* El icono va AL LADO del texto, no encima. Rejilla de dos columnas sobre
.profile-hero-info: el icono ocupa la columna 1 y las dos filas; el título
y su subtítulo caen solos en la columna 2. Se hace así, y no envolviendo
h1+meta en un div nuevo, para no tocar una estructura de hero que comparten
más plantillas. Scoped a body.wa-wizard-view — el resto de heros del sitio
no se entera. */
body.wa-wizard-view .wildatlas-feature-band-hero-banner .profile-hero-info {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
column-gap: 16px;
}
body.wa-wizard-view .wildatlas-feature-band-hero-banner .wa-wizard-hero-ico {
grid-row: 1 / span 2;
margin: 0;
}
.wildatlas-feature-band-hero-banner .wa-wizard-hero-ico {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
flex-shrink: 0;
border-radius: 15px;
background: rgba(255,255,255,.10);
border: 1px solid rgba(255,255,255,.18);
}
.wildatlas-feature-band-hero-banner .wa-wizard-hero-ico svg { display: block; }
/* Casa: monocroma. Blanca sobre el azul, sin más. */
.wildatlas-feature-band-hero-banner .wa-wizard-hero-ico--business_add { color: #fff; }
/* ★ Hoja: bicolor con la nervadura en BLANCO FIJO (no se puede cambiar, ver
el registro de iconos). Sobre el hero verde, una hoja clara dejaría una
nervadura blanca sobre fondo casi blanco: invisible. Por eso aquí se
invierte la ficha — fondo blanco y cuerpo de la hoja en verde oscuro — que
es lo único que hace legible una nervadura blanca. */
body.wa-wizard-nature .wildatlas-feature-band-hero-banner .wa-wizard-hero-ico--hotspot_add {
color: #1f5a3a;
background: rgba(255,255,255,.94);
border-color: rgba(255,255,255,.94);
}
@media (max-width: 640px) {
body.wa-wizard-view .wildatlas-feature-band-hero-banner .profile-hero-info { column-gap: 12px; }
.wildatlas-feature-band-hero-banner .wa-wizard-hero-ico {
width: 44px; height: 44px; border-radius: 12px;
}
.wildatlas-feature-band-hero-banner .wa-wizard-hero-ico svg { width: 26px; height: 26px; }
}
/* ── Step counter + progress rail ────────────────────────────────────────── */
.wa-wizard-railhead {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin: 0 0 10px;
}
.wa-wizard-stepcount {
font-size: 11px;
font-weight: 700;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--wz-muted);
}
.wa-wizard-steplabel {
font-size: 11px;
font-weight: 700;
letter-spacing: .04em;
color: var(--wz-accent);
text-transform: uppercase;
}
/* Segmented rail — reads as real progress, not decoration. */
.wa-wizard-progress {
display: flex;
align-items: center;
gap: 5px;
margin: 0 0 22px;
}
.wa-wizard-dot {
flex: 1;
height: 4px;
border-radius: 99px;
background: var(--wz-line);
position: relative;
overflow: hidden;
}
.wa-wizard-dot::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(90deg, var(--wz-accent), var(--wz-accent-lift));
transform: scaleX(0);
transform-origin: left center;
transition: transform .45s cubic-bezier(.4,0,.2,1);
}
.wa-wizard-dot.is-done::after,
.wa-wizard-dot.is-current::after { transform: scaleX(1); }
.wa-wizard-dot.is-current { box-shadow: 0 0 0 3px var(--wz-accent-soft); }
.wa-wizard-dot.is-future { opacity: .5; }
/* The dots rendered into the hero band (wa_wizard_progress_html) sit on a
light page background, so they use the same rail with a tighter width. */
.wa-wizard-progress--questions { max-width: 220px; margin: 0 0 20px; }
/* ── Question typography ─────────────────────────────────────────────────── */
.wa-wizard-q {
font-size: clamp(21px, 2.6vw, 27px);
font-weight: 800;
line-height: 1.22;
letter-spacing: -.022em;
color: var(--wz-ink);
margin: 2px 0 8px;
}
.wa-wizard-hint {
font-size: 14px;
line-height: 1.6;
color: var(--wz-muted);
margin: 0 0 20px;
max-width: 52ch;
}
.wa-wizard-hint + .wa-wizard-hint { margin-top: -12px; }
.wa-wizard-error {
color: #c0392b;
font-size: 13.5px;
font-weight: 600;
margin: 8px 0 0;
}
html[data-theme="dark"] .wa-wizard-error { color: #ff8a7a; }
/* ── Step stack ──────────────────────────────────────────────────────────
El paso ACTIVO va en flujo normal, así que la tarjeta mide exactamente lo
que mide ese paso. Los inactivos salen del flujo en position:absolute —
siguen teniendo caja real (visibility:hidden, no display:none), que es lo
que necesita Leaflet para no inicializar el mapa a 0×0.
★ Antes esto era un grid con todos los pasos en la MISMA celda. Funcionaba,
pero la fila del grid se dimensiona al hijo más alto: el paso del mapa
(330 px + dirección + avisos) estiraba también el paso 1, que sólo tiene un
input. De ahí el "demasiado espacio blanco" que reportó Marc (2026-08-17).
Con position:absolute la altura la marca sólo el paso visible. */
.wa-wizard-steps { position: relative; }
.wa-wizard-step {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: auto; /* la altura la fija el contenido, no el contenedor */
width: 100%;
visibility: hidden;
pointer-events: none;
opacity: 0;
transform: translateY(8px);
transition: opacity .28s ease, transform .28s cubic-bezier(.4,0,.2,1);
}
.wa-wizard-step.is-active {
position: relative; /* vuelve al flujo → es quien da altura a la tarjeta */
visibility: visible;
pointer-events: auto;
opacity: 1;
transform: none;
z-index: 1;
}
.wa-wizard-step-group .wa-wizard-substep + .wa-wizard-substep {
margin-top: 28px;
padding-top: 26px;
border-top: 1px solid var(--wz-line);
}
.wa-wizard-step-group .wa-wizard-substep { display: block; }
/* ── Controls ────────────────────────────────────────────────────────────── */
.wa-wizard-step-inner input[type="text"],
.wa-wizard-step-inner input[type="email"],
.wa-wizard-step-inner input[type="search"],
.wa-wizard-step-inner select,
.wa-wizard-step-inner textarea {
width: 100%;
box-sizing: border-box;
padding: 14px 16px;
border: 1.5px solid var(--wz-line);
border-radius: 12px;
background: var(--wz-surface);
font-size: 15.5px;
font-family: inherit;
color: var(--wz-ink);
transition: border-color .18s, box-shadow .18s, background .18s;
-webkit-appearance: none;
appearance: none;
}
.wa-wizard-step-inner textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.wa-wizard-step-inner select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7a86' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
padding-right: 44px;
/*
* Marc, 2026-08-27: el desplegable recortaba el texto por arriba y por
* abajo. Algo externo fuerza 40px de alto con box-sizing: border-box, y con
* el padding de 14px solo quedaban 9px utiles para una linea de 24px. Un
* SI
* recorta, y por eso solo se notaba aqui.
*
* Se ajusta el relleno para que el texto quepa DENTRO de los 40px, en vez
* de pelearse por quien manda en la altura: asi el desplegable sigue
* midiendo lo mismo que los campos de texto de al lado. Con min-height
* aguanta igual si algun dia desaparece esa altura impuesta.
*/
line-height: 1.4;
padding-top: 8px;
padding-bottom: 8px;
min-height: 40px;
}
.wa-wizard-step-inner input::placeholder,
.wa-wizard-step-inner textarea::placeholder { color: #a8b4be; }
.wa-wizard-step-inner input:focus,
.wa-wizard-step-inner select:focus,
.wa-wizard-step-inner textarea:focus {
outline: none;
border-color: var(--wz-accent);
box-shadow: 0 0 0 4px var(--wz-accent-soft);
}
.wa-wizard-step-inner input.wa-field-invalid,
.wa-wizard-step-inner select.wa-field-invalid {
border-color: #d0453a;
box-shadow: 0 0 0 4px rgba(208,69,58,.10);
}
/* ── Contador de caracteres de la descripción ────────────────────────────── */
.wa-wizard-counter {
margin: 8px 0 0;
font-size: 12.5px;
font-weight: 600;
color: var(--wz-muted);
font-variant-numeric: tabular-nums; /* que no baile al teclear */
transition: color .18s;
}
.wa-wizard-counter.is-ok { color: var(--wz-accent); }
.wa-wizard-counter.is-good { color: var(--wz-accent); }
.wa-wizard-counter.is-good::after {
content: ' ✓';
font-weight: 800;
}
/* ── Nav (Back · rail · Continue) ────────────────────────────────────────── */
.wa-wizard-step-nav {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: 26px;
padding-top: 20px;
border-top: 1px solid var(--wz-line);
}
.wa-wizard-back-btn {
background: none;
border: none;
color: var(--wz-muted);
font-size: 14px;
font-weight: 600;
font-family: inherit;
cursor: pointer;
padding: 10px 6px;
border-radius: 9px;
transition: color .18s, background .18s;
}
.wa-wizard-back-btn:hover { color: var(--wz-ink); background: var(--wz-surface-alt); }
.wa-wizard-step-nav .wa-wizard-progress { flex: 1; margin: 0; max-width: 160px; }
/* Why "Continue" is disabled — a dead button with no explanation is the
fastest way to make someone abandon the form. */
.wa-wizard-req {
flex: 1;
text-align: right;
font-size: 13px;
font-weight: 600;
color: var(--wz-muted);
padding-right: 4px;
}
.wa-wizard-req:empty { display: none; }
.wa-wizard-card .wa-wizard-next-btn,
.wa-wizard-card .wa-submit-btn {
background: var(--wz-accent);
border: 1px solid var(--wz-accent);
color: #fff;
font-size: 14.5px;
font-weight: 700;
letter-spacing: .01em;
padding: 13px 26px;
border-radius: 11px;
cursor: pointer;
min-width: 148px;
box-shadow: 0 4px 16px -6px rgba(31,122,77,.55);
transition: background .18s, transform .15s, box-shadow .2s;
}
.wa-wizard-card .wa-wizard-next-btn:hover:not(:disabled),
.wa-wizard-card .wa-submit-btn:hover:not(:disabled) {
background: #1a6a42;
transform: translateY(-1px);
box-shadow: 0 8px 24px -8px rgba(31,122,77,.65);
}
.wa-wizard-card .wa-wizard-next-btn:disabled,
.wa-wizard-card .wa-submit-btn:disabled { opacity: .6; cursor: default; box-shadow: none; }
.wa-wizard-card .wa-submit-btn { width: 100%; margin-top: 4px; padding: 15px 26px; font-size: 15px; }
html[data-theme="dark"] .wa-wizard-card .wa-wizard-next-btn,
html[data-theme="dark"] .wa-wizard-card .wa-submit-btn {
background: #2f8d5b; border-color: #2f8d5b; box-shadow: 0 4px 16px -6px rgba(109,184,76,.4);
}
html[data-theme="dark"] .wa-wizard-card .wa-wizard-next-btn:hover:not(:disabled),
html[data-theme="dark"] .wa-wizard-card .wa-submit-btn:hover:not(:disabled) { background: #37a26a; }
/* ── Single-choice cards (¿qué tipo de sitio es?) ────────────────────────── */
/* En pantallas anchas las opciones van en columnas: con la tarjeta al 100%
una sola columna dejaba tarjetas larguísimas y medio vacías. */
.wa-wizard-choices {
display: grid;
gap: 9px;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.wa-wizard-choice {
display: flex;
align-items: flex-start;
gap: 13px;
padding: 15px 17px;
border: 1.5px solid var(--wz-line);
border-radius: 14px;
background: var(--wz-surface);
cursor: pointer;
transition: border-color .16s, background .16s, transform .16s, box-shadow .16s;
}
.wa-wizard-choice:hover {
border-color: #b8d4c4;
transform: translateY(-1px);
box-shadow: 0 6px 18px -12px rgba(20,40,30,.55);
}
/* Custom radio — the native control never matches the rest of the product. */
.wa-wizard-choice input { position: absolute; opacity: 0; pointer-events: none; }
.wa-wizard-choice-body { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.wa-wizard-choice-body::before { content: none; }
.wa-wizard-choice::before {
content: '';
flex-shrink: 0;
width: 20px;
height: 20px;
margin-top: 1px;
border-radius: 50%;
border: 2px solid #cbd5dd;
background: var(--wz-surface);
transition: border-color .16s, box-shadow .16s, background .16s;
}
.wa-wizard-choice:has(input:checked) {
border-color: var(--wz-accent);
background: var(--wz-accent-soft);
}
.wa-wizard-choice:has(input:checked)::before {
border-color: var(--wz-accent);
background: var(--wz-accent);
box-shadow: inset 0 0 0 4px var(--wz-surface);
}
.wa-wizard-choice:has(input:focus-visible) { box-shadow: 0 0 0 4px var(--wz-accent-soft); }
.wa-wizard-choice-body strong { font-size: 15px; font-weight: 700; color: var(--wz-ink); letter-spacing: -.01em; }
.wa-wizard-choice-body em { font-style: normal; font-size: 13px; color: var(--wz-muted); line-height: 1.5; }
.wa-wizard-choices--invalid {
outline: 2px solid rgba(208,69,58,.35);
outline-offset: 7px;
border-radius: 16px;
}
/* ── Secondary categories ("elige más categorías") ───────────────────────── */
/* Muchos negocios son varias cosas a la vez: un lodge que además tiene hides.
La primaria (radio, arriba) es la que manda en el permalink; éstas son
adicionales y se revelan sólo después de elegir la primaria. */
.wa-wizard-extra-cats {
margin-top: 22px;
padding-top: 20px;
border-top: 1px dashed var(--wz-line);
animation: wz-reveal .32s cubic-bezier(.4,0,.2,1);
}
@keyframes wz-reveal {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: none; }
}
.wa-wizard-subq {
font-size: 15.5px;
font-weight: 800;
color: var(--wz-ink);
letter-spacing: -.01em;
margin: 0 0 5px;
}
.wa-wizard-extra-cats .wa-wizard-hint { margin-bottom: 13px; }
.wa-wizard-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.wa-wizard-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 15px 9px 12px;
border: 1.5px solid var(--wz-line);
border-radius: 99px;
background: var(--wz-surface);
font-size: 13.5px;
font-weight: 600;
color: var(--wz-muted);
cursor: pointer;
transition: border-color .16s, background .16s, color .16s;
}
.wa-wizard-chip:hover { border-color: #b8d4c4; color: var(--wz-ink); }
.wa-wizard-chip input { position: absolute; opacity: 0; pointer-events: none; }
/* ★ Los iconos son SVG de fondo, NO glifos de texto (Marc, 2026-08-18: "los +
y las estrellas están descentrados del circulo").
Un carácter dentro de un círculo se centra por métricas de fuente —
ascender, descender y line-height — que cambian entre +, ✓ y ★ y que además
el tema padre puede pisar. Por eso cada icono aparecía descolocado de una
forma distinta. Un background-image centrado no depende de nada de eso. */
.wa-wizard-chip::before {
content: '';
width: 18px; height: 18px;
border-radius: 50%;
background-color: var(--wz-line);
background-repeat: no-repeat;
background-position: center center;
background-size: 10px 10px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7a86' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
flex-shrink: 0;
transition: background-color .16s;
}
.wa-wizard-chip:has(input:checked) {
border-color: var(--wz-accent);
background: var(--wz-accent-soft);
color: var(--wz-ink);
}
.wa-wizard-chip:has(input:checked)::before {
background-color: var(--wz-accent);
background-size: 11px 11px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}
.wa-wizard-chip:has(input:focus-visible) { box-shadow: 0 0 0 4px var(--wz-accent-soft); }
/* La que ya es primaria se muestra fijada, no elegible otra vez. */
.wa-wizard-chip.is-primary {
border-color: var(--wz-accent);
background: var(--wz-accent-soft);
color: var(--wz-ink);
cursor: default;
opacity: .75;
}
.wa-wizard-chip.is-primary::before {
background-color: var(--wz-accent);
background-size: 11px 11px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z'/%3E%3C/svg%3E");
}
html[data-theme="dark"] .wa-wizard-chip::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393a0ab' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}
/* ── Photo step ──────────────────────────────────────────────────────────── */
.wa-op-image-wrap { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.wa-wizard-card .wa-op-image-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 9px;
width: 100%;
box-sizing: border-box;
padding: 34px 20px;
border: 2px dashed #cfdbd4;
border-radius: 15px;
background: var(--wz-surface-alt);
cursor: pointer;
font-size: 14.5px;
font-weight: 700;
color: var(--wz-ink);
transition: border-color .18s, background .18s, color .18s;
}
.wa-wizard-card .wa-op-image-btn:hover {
border-color: var(--wz-accent);
background: var(--wz-accent-soft);
color: var(--wz-accent);
}
.wa-wizard-card .wa-op-image-btn svg { width: 26px; height: 26px; opacity: .7; }
.wa-op-image-preview {
display: flex;
align-items: center;
gap: 14px;
width: 100%;
box-sizing: border-box;
padding: 12px;
border: 1.5px solid var(--wz-line);
border-radius: 15px;
background: var(--wz-surface);
}
.wa-op-image-preview img {
width: 92px; height: 92px;
object-fit: cover;
border-radius: 11px;
flex-shrink: 0;
}
.wa-op-image-remove {
margin-left: auto;
background: none;
border: 1.5px solid var(--wz-line);
border-radius: 9px;
padding: 8px 13px;
cursor: pointer;
color: var(--wz-muted);
font-size: 13px;
font-weight: 600;
font-family: inherit;
transition: color .16s, border-color .16s;
}
.wa-op-image-remove:hover { color: #c0392b; border-color: #f0c4be; }
/* ── Operating-countries checklist ───────────────────────────────────────── */
.wa-wizard-filter { margin-bottom: 12px; }
.wa-wizard-checklist {
max-height: 280px;
overflow-y: auto;
border: 1.5px solid var(--wz-line);
border-radius: 14px;
padding: 7px;
background: var(--wz-surface);
scrollbar-width: thin;
}
.wa-wizard-checklist-item {
display: flex;
align-items: center;
gap: 11px;
padding: 9px 11px;
font-size: 14.5px;
color: var(--wz-ink);
cursor: pointer;
border-radius: 9px;
transition: background .14s;
}
.wa-wizard-checklist-item:hover { background: var(--wz-surface-alt); }
.wa-wizard-checklist-item input { margin: 0; width: 17px; height: 17px; accent-color: var(--wz-accent); }
.wa-wizard-checklist-item:has(input:checked) { background: var(--wz-accent-soft); font-weight: 600; }
/* ── Aviso "enviado a revisión" ──────────────────────────────────────────── */
/* Corona la siguiente pantalla del wizard. Vive FUERA de .wa-wizard-card (en
el editor del operador ni siquiera hay tarjeta), así que no puede depender
de las variables --wz-*: colores literales a propósito. */
.wa-wizard-sent {
display: flex;
align-items: flex-start;
gap: 14px;
max-width: 100%;
margin: 0 0 20px;
padding: 18px 20px;
border-radius: 16px;
background: linear-gradient(135deg, #edf6f1 0%, #f4fbf7 100%);
border: 1px solid #b8dfc9;
box-shadow: 0 6px 20px -14px rgba(31,122,77,.55);
}
.wa-wizard-sent-ico {
flex-shrink: 0;
width: 38px; height: 38px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: #1f7a4d;
color: #fff;
}
.wa-wizard-sent-body { min-width: 0; }
.wa-wizard-sent-body strong {
display: block;
font-size: 16px;
font-weight: 800;
color: #1f5c3a;
letter-spacing: -.01em;
margin-bottom: 5px;
}
.wa-wizard-sent-body p {
margin: 0;
font-size: 13.5px;
line-height: 1.55;
color: #2a4a38;
}
.wa-wizard-sent-meanwhile {
margin-top: 8px !important;
padding-top: 8px;
border-top: 1px solid #c8e0d2;
font-size: 12.5px !important;
color: #4a6a58 !important;
}
html[data-theme="dark"] .wa-wizard-sent {
background: linear-gradient(135deg, #16241c 0%, #1a1f26 100%);
border-color: #2d5a41;
}
html[data-theme="dark"] .wa-wizard-sent-ico { background: #2f8d5b; }
html[data-theme="dark"] .wa-wizard-sent-body strong { color: #8fcf6e; }
html[data-theme="dark"] .wa-wizard-sent-body p { color: #b9c9c0; }
html[data-theme="dark"] .wa-wizard-sent-meanwhile { border-top-color: #2d5a41; color: #93a89c !important; }
@media (max-width: 640px) {
.wa-wizard-sent { padding: 15px 16px; gap: 11px; border-radius: 14px; }
.wa-wizard-sent-ico { width: 32px; height: 32px; }
.wa-wizard-sent-ico svg { width: 18px; height: 18px; }
.wa-wizard-sent-body strong { font-size: 15px; }
}
/* ── Desvío de familia equivocada (paso 1 de /join-nature/) ──────────────
Marc, 2026-08-11: los dueños de lodges entran por naturaleza, guardan, y
luego reclaman una ficha que no controlan. El aviso tiene que ser VISUAL y
con salida directa — un párrafo gris no lo lee nadie. */
.wa-wizard-wrongfam {
display: flex;
align-items: flex-start;
gap: 14px;
margin-top: 22px;
padding: 17px 19px;
border-radius: 15px;
background: linear-gradient(135deg,#fff8ec 0%,#fffdf8 100%);
border: 1px solid #f0dfb8;
}
.wa-wizard-wrongfam-ico {
flex-shrink: 0;
width: 38px; height: 38px;
border-radius: 11px;
display: flex; align-items: center; justify-content: center;
background: #f6e3bb;
color: #8a6d2f;
}
.wa-wizard-wrongfam-body { min-width: 0; }
.wa-wizard-wrongfam-body strong {
display: block;
font-size: 15px;
font-weight: 800;
color: #7a5f22;
margin-bottom: 5px;
letter-spacing: -.01em;
}
.wa-wizard-wrongfam-body p {
margin: 0 0 12px;
font-size: 13px;
line-height: 1.55;
color: #6b5a34;
}
.wa-wizard-card .wa-wizard-wrongfam-btn {
display: inline-block;
padding: 10px 17px;
border-radius: 10px;
background: #8a6d2f;
color: #fff !important;
font-size: 13.5px;
font-weight: 700;
text-decoration: none !important;
transition: background .16s, transform .15s;
}
.wa-wizard-card .wa-wizard-wrongfam-btn:hover { background: #6b5424; transform: translateY(-1px); }
html[data-theme="dark"] .wa-wizard-wrongfam {
background: linear-gradient(135deg,#241f14 0%,#1a1f26 100%);
border-color: #3d3524;
}
html[data-theme="dark"] .wa-wizard-wrongfam-ico { background: #3d3524; color: #d4b978; }
html[data-theme="dark"] .wa-wizard-wrongfam-body strong { color: #d4b978; }
html[data-theme="dark"] .wa-wizard-wrongfam-body p { color: #b3a684; }
html[data-theme="dark"] .wa-wizard-card .wa-wizard-wrongfam-btn { background: #8a6d2f; }
html[data-theme="dark"] .wa-wizard-card .wa-wizard-wrongfam-btn:hover { background: #a3833c; }
/* ── Pasos opcionales: nota y botón "Omitir" ─────────────────────────────── */
.wa-wizard-optnote {
margin: 16px 0 0;
padding: 11px 14px;
border-radius: 11px;
background: var(--wz-surface-alt);
border: 1px dashed var(--wz-line);
font-size: 12.5px;
color: var(--wz-muted);
line-height: 1.5;
}
.wa-wizard-nav-actions { display: flex; align-items: center; gap: 10px; }
.wa-wizard-skip-btn {
background: none;
border: none;
font-family: inherit;
font-size: 13.5px;
font-weight: 600;
color: var(--wz-muted);
cursor: pointer;
padding: 12px 10px;
border-radius: 9px;
text-decoration: underline;
text-underline-offset: 3px;
transition: color .16s, background .16s;
}
.wa-wizard-skip-btn:hover { color: var(--wz-ink); background: var(--wz-surface-alt); }
.wa-wizard-skip-btn[hidden],
#wa-pw-next[hidden] { display: none !important; }
/* ── Paso de especies: buscador con miniatura + tarjetas ─────────────────── */
/* Silueta de respaldo para especies sin foto: un , que estiraba la caja de 24×24. Aquí se anula el padding y
se quita el fondo; la legibilidad sobre la foto la da la sombra del trazo,
no un círculo. */
.wa-hs-sp-card-x {
position: absolute;
top: 4px; right: 4px;
width: 26px; height: 26px;
box-sizing: border-box;
padding: 0;
margin: 0;
border: none;
border-radius: 0;
background: none;
color: #fff;
font-size: 15px;
line-height: 1;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
text-shadow: 0 1px 4px rgba(0,0,0,.75), 0 0 2px rgba(0,0,0,.6);
transition: color .16s, transform .16s;
}
.wa-hs-sp-card-x:hover { color: #ff9b8f; transform: scale(1.12); }
/* ── Paso opcional: galería ──────────────────────────────────────────────── */
.wa-hs-gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
gap: 10px;
margin-top: 14px;
}
.wa-hs-gallery-grid:empty { display: none; }
.wa-hs-gallery-cell {
position: relative;
aspect-ratio: 4 / 3;
border-radius: 11px;
overflow: hidden;
border: 1px solid var(--wz-line);
background: var(--wz-surface-alt);
}
.wa-hs-gallery-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Mismo tratamiento que la ✕ de especie: es el mismo patrón y arrastraba el
mismo óvalo de Astra, aunque Marc sólo viera el de especies. */
.wa-hs-gallery-x {
position: absolute; top: 4px; right: 4px;
width: 26px; height: 26px;
box-sizing: border-box;
padding: 0;
margin: 0;
border: none;
border-radius: 0;
background: none;
color: #fff;
font-size: 15px;
line-height: 1;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
text-shadow: 0 1px 4px rgba(0,0,0,.75), 0 0 2px rgba(0,0,0,.6);
transition: color .16s, transform .16s;
}
.wa-hs-gallery-x:hover { color: #ff9b8f; transform: scale(1.12); }
/* ── Location step ───────────────────────────────────────────────────────── */
.wa-hs-geo-search { display: flex; gap: 9px; margin-bottom: 12px; }
.wa-hs-geo-search input { flex: 1; }
.wa-wizard-card .wa-hs-geo-search .wa-owner-btn {
flex-shrink: 0;
padding: 0 22px;
border-radius: 12px;
background: var(--wz-ink);
border: 1px solid var(--wz-ink);
color: #fff;
font-weight: 700;
font-size: 14px;
cursor: pointer;
transition: opacity .18s;
}
.wa-wizard-card .wa-hs-geo-search .wa-owner-btn:hover { opacity: .85; }
.wa-hs-map {
height: 330px;
border-radius: 15px;
overflow: hidden;
border: 1.5px solid var(--wz-line);
background: var(--wz-surface-alt);
box-shadow: inset 0 1px 3px rgba(20,40,30,.06);
}
.wa-hs-map .leaflet-container { font: inherit; }
.wa-hs-map-hint { margin: 10px 0 0; font-size: 12.5px; }
.wa-hs-geo-resolved {
margin-top: 13px;
padding: 13px 16px;
border-radius: 12px;
background: var(--wz-accent-soft);
border: 1px solid rgba(31,122,77,.22);
font-size: 14px;
color: var(--wz-ink);
display: flex;
gap: 10px;
align-items: baseline;
flex-wrap: wrap;
}
.wa-hs-geo-resolved-label {
font-weight: 800;
text-transform: uppercase;
font-size: 10.5px;
letter-spacing: .09em;
color: var(--wz-accent);
flex-shrink: 0;
}
/* ── Duplicate suggestions ───────────────────────────────────────────────── */
.wa-dup-suggest {
margin-top: 12px;
padding: 13px 15px;
border: 1px solid #f0e2c0;
border-radius: 12px;
background: #fffdf5;
}
html[data-theme="dark"] .wa-dup-suggest { background: #221f16; border-color: #3d3524; }
html[data-theme="dark"] .wa-dup-head { color: #d4b978; }
html[data-theme="dark"] .wa-dup-row { border-top-color: rgba(255,255,255,.07); }
.wa-dup-head { font-size: 12.5px; font-weight: 700; color: #8a6d2f; margin-bottom: 8px; }
.wa-dup-row {
display: flex; justify-content: space-between; align-items: center; gap: 12px;
padding: 7px 0; font-size: 14px; color: var(--wz-ink);
border-top: 1px solid rgba(0,0,0,.05);
}
.wa-dup-row:first-of-type { border-top: none; }
.wa-dup-row a { font-weight: 700; font-size: 13px; color: var(--wz-accent); white-space: nowrap; }
.wa-dup-foot { font-size: 12.5px; color: var(--wz-muted); margin-top: 8px; }
/* ── Yes / No question screen ────────────────────────────────────────────── */
.wa-wizard-yesno { display: flex; gap: 12px; margin: 22px 0 16px; }
.wa-wizard-card .wa-wizard-yes-btn,
.wa-wizard-card .wa-wizard-no-btn {
flex: 1;
text-align: center;
padding: 16px 20px;
border-radius: 13px;
font-size: 15px;
font-weight: 700;
cursor: pointer;
font-family: inherit;
transition: transform .15s, box-shadow .2s, background .18s, border-color .18s;
}
.wa-wizard-card .wa-wizard-yes-btn {
background: var(--wz-accent);
border: 1px solid var(--wz-accent);
color: #fff !important;
text-decoration: none !important;
box-shadow: 0 4px 16px -6px rgba(31,122,77,.55);
}
.wa-wizard-card .wa-wizard-yes-btn:hover { background: #1a6a42; transform: translateY(-1px); }
.wa-wizard-card .wa-wizard-no-btn {
background: var(--wz-surface);
border: 1.5px solid var(--wz-line);
color: var(--wz-muted);
}
.wa-wizard-card .wa-wizard-no-btn:hover { border-color: #cbd5dd; color: var(--wz-ink); }
/* ── Product menu after creating a hotspot ────────────────────────────────
The structure follows the product cards (.wa-tour-card) and Owner Dashboard
cards: 16px corners, a quiet border/shadow, clear content hierarchy and a
restrained 3px lift. Product accents reuse the editor's existing palette. */
.wa-wizard-required-banner {
position: relative;
margin: 0 0 22px;
padding: 14px 16px 14px 48px;
border: 1px solid #ead7a8;
border-radius: 14px;
background: #fff9ea;
color: #75591d;
font-size: 13.5px;
font-weight: 700;
line-height: 1.5;
}
.wa-wizard-required-banner::before {
content: '!';
position: absolute;
top: 50%;
left: 16px;
display: grid;
place-items: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: #e8bd55;
color: #503a09;
font-size: 13px;
font-weight: 900;
transform: translateY(-50%);
}
.wa-wizard-required-banner--ok {
border-color: #b8dfc9;
background: #eff8f3;
color: #286044;
}
.wa-wizard-required-banner--ok::before {
content: '\2713';
background: var(--wz-accent);
color: #fff;
}
.wa-wizard-disclaimer {
margin: 0 0 20px;
color: var(--wz-muted);
font-size: 12.5px;
font-weight: 500;
line-height: 1.55;
}
/* Aviso "sigues con un hotspot pendiente" en /join-hotspot/ paso 1 —
tarjeta separada apilada encima del formulario, mismo look que las demás
.wa-wizard-card pero con hueco debajo para no quedar pegada a la
siguiente. */
.wa-wizard-pending-card { margin-bottom: 18px; }
.wa-wizard-pending-card .wa-wizard-required-banner { margin-bottom: 16px; }
.wa-wizard-pending-card .wa-wizard-continue-row { border-top: none; margin-top: 0; padding-top: 0; justify-content: flex-start; }
/* .wa-wizard-back-link trae margin-top:18px pensado para su uso original
(suelto, DEBAJO de .wa-wizard-continue-row en page-join-hotspot-questions.php).
Aquí vive DENTRO de esa fila, como hermano flex del botón — ese margen le
descentraba verticalmente respecto a "Continue with this place". */
.wa-wizard-pending-card .wa-wizard-continue-row .wa-wizard-back-link { margin-top: 0; }
.wa-wizard-product-menu {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 16px;
}
body.wa.wa-wizard-view :is(#wa-wizard-hotspot-questions,#wa-wizard-operator-questions) .wa-wizard-menu-item {
--wz-product: #1f7a4d;
--wz-product-soft: #edf7f1;
position: relative;
display: flex;
flex-direction: column;
align-items: stretch;
min-width: 0;
min-height: 232px;
padding: 0;
overflow: hidden;
border: 1px solid var(--wz-line);
border-radius: 16px;
background: var(--wz-surface);
color: var(--wz-ink) !important;
text-align: left;
text-decoration: none !important;
box-shadow: 0 8px 24px -20px rgba(20,40,30,.45);
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
body.wa.wa-wizard-view :is(#wa-wizard-hotspot-questions,#wa-wizard-operator-questions) .wa-wizard-menu-item::before {
content: '';
position: absolute;
inset: 0 0 auto;
height: 4px;
background: var(--wz-product);
}
:is(#wa-wizard-hotspot-questions,#wa-wizard-operator-questions) .wa-wizard-menu-item[data-product-type="hide"] { --wz-product: #1a7546; --wz-product-soft: #edf7f1; }
:is(#wa-wizard-hotspot-questions,#wa-wizard-operator-questions) .wa-wizard-menu-item[data-product-type="stay"] { --wz-product: #b45309; --wz-product-soft: #fff6e9; }
:is(#wa-wizard-hotspot-questions,#wa-wizard-operator-questions) .wa-wizard-menu-item[data-product-type="tour"] { --wz-product: #1e40af; --wz-product-soft: #eef3ff; }
:is(#wa-wizard-hotspot-questions,#wa-wizard-operator-questions) .wa-wizard-menu-item[data-product-type="pack"] { --wz-product: #6d28d9; --wz-product-soft: #f5efff; }
body.wa.wa-wizard-view :is(#wa-wizard-hotspot-questions,#wa-wizard-operator-questions) .wa-wizard-menu-item:hover {
border-color: var(--wz-product);
background: var(--wz-surface) !important;
color: var(--wz-ink) !important;
box-shadow: 0 14px 30px -20px rgba(20,40,30,.52);
transform: translateY(-3px);
}
body.wa.wa-wizard-view :is(#wa-wizard-hotspot-questions,#wa-wizard-operator-questions) .wa-wizard-menu-item:focus-visible {
outline: none;
border-color: var(--wz-product);
box-shadow: 0 0 0 4px var(--wz-accent-soft);
}
body.wa.wa-wizard-view :is(#wa-wizard-hotspot-questions,#wa-wizard-operator-questions) .wa-wizard-menu-item.is-done {
border-color: #9dcdb0;
box-shadow: 0 0 0 1px rgba(31,122,77,.08), 0 8px 24px -20px rgba(20,40,30,.45);
}
body.wa.wa-wizard-view :is(#wa-wizard-hotspot-questions,#wa-wizard-operator-questions) .wa-wizard-menu-item.is-done::before { background: var(--wz-accent); }
.wa-wizard-menu-icon {
display: flex;
align-items: center;
padding: 20px 20px 12px;
}
:is(#wa-wizard-hotspot-questions,#wa-wizard-operator-questions) .wa-wizard-menu-icon .wa-wizard-hero-ico {
/* .wa-wizard-hero-ico solo trae display:inline-flex + centrado cuando su
ancestro es .wildatlas-feature-band-hero-banner (ver la regla base más
arriba en este fichero) — dentro de esta tarjeta no lo es, así que hay
que repetirlo aquí. Sin esto el queda inline y width/height no
tienen efecto: el SVG (34x34 de origen, mostrado aquí a 29x29) se
renderiza en su tamaño natural, pegado a una esquina en vez de centrado
en la caja de 52x52 — el descuadre que reportó Marc, no un problema de
Astra. */
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 52px;
height: 52px;
margin: 0;
border: 1px solid transparent;
border-radius: 14px;
background: var(--wz-product-soft);
color: var(--wz-product);
}
:is(#wa-wizard-hotspot-questions,#wa-wizard-operator-questions) .wa-wizard-menu-icon .wa-wizard-hero-ico svg { display: block; width: 29px; height: 29px; }
.wa-wizard-menu-status {
position: absolute;
top: 16px;
right: 14px;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 9px;
border: 1px solid #b8dfc9;
border-radius: 999px;
background: #eff8f3;
color: #1f6c43;
font-size: 10.5px;
font-weight: 800;
letter-spacing: .04em;
text-transform: uppercase;
}
.wa-wizard-menu-copy {
display: flex;
flex: 1;
flex-direction: column;
gap: 7px;
padding: 0 20px 18px;
}
.wa-wizard-menu-title {
color: var(--wz-ink);
font-size: 17px;
font-weight: 800;
line-height: 1.3;
letter-spacing: -.015em;
}
.wa-wizard-menu-description {
color: var(--wz-muted);
font-size: 13px;
font-weight: 500;
line-height: 1.55;
}
.wa-wizard-menu-action {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 13px 20px;
border-top: 1px solid var(--wz-line);
color: var(--wz-product);
font-size: 12.5px;
font-weight: 800;
}
.wa-wizard-menu-action > span { font-size: 17px; line-height: 1; transition: transform .18s ease; }
.wa-wizard-menu-item:hover .wa-wizard-menu-action > span { transform: translateX(3px); }
.wa-wizard-continue-row {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid var(--wz-line);
}
body.wa.wa-wizard-view :is(#wa-wizard-hotspot-questions,#wa-wizard-operator-questions) .wa-wizard-continue-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 148px;
min-height: 46px;
padding: 12px 26px;
border: 1px solid var(--wz-accent);
border-radius: 11px;
background: var(--wz-accent);
color: #fff !important;
font-family: inherit;
font-size: 14.5px;
font-weight: 700;
line-height: 1;
text-decoration: none !important;
box-shadow: 0 4px 16px -6px rgba(31,122,77,.55);
transition: background .18s, transform .15s, box-shadow .2s;
}
body.wa.wa-wizard-view :is(#wa-wizard-hotspot-questions,#wa-wizard-operator-questions) .wa-wizard-continue-btn:hover:not(:disabled) {
border-color: #1a6a42;
background: #1a6a42 !important;
color: #fff !important;
box-shadow: 0 8px 24px -8px rgba(31,122,77,.65);
transform: translateY(-1px);
}
body.wa.wa-wizard-view :is(#wa-wizard-hotspot-questions,#wa-wizard-operator-questions) .wa-wizard-continue-btn:disabled,
body.wa.wa-wizard-view :is(#wa-wizard-hotspot-questions,#wa-wizard-operator-questions) .wa-wizard-continue-btn:disabled:hover {
border-color: var(--wz-line);
background: var(--wz-line) !important;
color: var(--wz-muted) !important;
cursor: not-allowed;
box-shadow: none;
transform: none;
}
.wa-wizard-continue-hint {
max-width: 240px;
color: var(--wz-muted);
font-size: 12.5px;
font-weight: 600;
line-height: 1.4;
}
.wa-wizard-back-link {
display: inline-flex;
align-items: center;
margin-top: 18px;
padding: 7px 4px;
color: var(--wz-muted);
font-size: 13px;
font-weight: 700;
text-decoration: none;
}
body.wa.wa-wizard-view :is(#wa-wizard-hotspot-questions,#wa-wizard-operator-questions) .wa-wizard-back-link:hover { color: var(--wz-ink) !important; }
html[data-theme="dark"] .wa-wizard-required-banner { border-color: #594b29; background: #282316; color: #d8c68d; }
html[data-theme="dark"] .wa-wizard-required-banner::before { background: #a98130; color: #171208; }
html[data-theme="dark"] .wa-wizard-required-banner--ok { border-color: #2d5a41; background: #16241c; color: #9ed6b6; }
html[data-theme="dark"] .wa-wizard-required-banner--ok::before { background: #2f8d5b; color: #fff; }
html[data-theme="dark"] :is(#wa-wizard-hotspot-questions,#wa-wizard-operator-questions) .wa-wizard-menu-item[data-product-type="hide"] { --wz-product: #64c99b; }
html[data-theme="dark"] :is(#wa-wizard-hotspot-questions,#wa-wizard-operator-questions) .wa-wizard-menu-item[data-product-type="stay"] { --wz-product: #f0aa55; }
html[data-theme="dark"] :is(#wa-wizard-hotspot-questions,#wa-wizard-operator-questions) .wa-wizard-menu-item[data-product-type="tour"] { --wz-product: #79a4ff; }
html[data-theme="dark"] :is(#wa-wizard-hotspot-questions,#wa-wizard-operator-questions) .wa-wizard-menu-item[data-product-type="pack"] { --wz-product: #b994f4; }
html[data-theme="dark"] :is(#wa-wizard-hotspot-questions,#wa-wizard-operator-questions) .wa-wizard-menu-icon .wa-wizard-hero-ico { background: rgba(255,255,255,.055); }
html[data-theme="dark"] .wa-wizard-menu-status { border-color: #2d5a41; background: #16241c; color: #8fcf6e; }
html[data-theme="dark"] body.wa.wa-wizard-view :is(#wa-wizard-hotspot-questions,#wa-wizard-operator-questions) .wa-wizard-continue-btn:hover:not(:disabled) {
border-color: #37a26a;
background: #37a26a !important;
}
/* ── Feedback line ───────────────────────────────────────────────────────── */
.wa-wizard-card .wa-submit-feedback { font-size: 14px; margin: 0 0 12px; color: var(--wz-muted); }
.wa-wizard-card .wa-submit-feedback.is-error {
color: #c0392b; font-weight: 600;
background: rgba(208,69,58,.07);
border: 1px solid rgba(208,69,58,.2);
border-radius: 11px; padding: 11px 14px;
}
/* ── Beneficios en el primer paso del wizard ─────────────────────────────── */
.wa-wizard-benefits {
margin-top: 22px;
padding: 18px 20px;
border-radius: 15px;
background: linear-gradient(135deg,#edf6f1 0%,#f4fbf7 100%);
border: 1px solid #b8dfc9;
}
.wa-wizard-benefits strong {
display: block;
font-size: 13.5px;
font-weight: 800;
color: #1f5c3a;
line-height: 1.45;
margin-bottom: 12px;
}
.wa-wizard-benefits strong::after { content: ' ✓'; color: #1f7a4d; }
.wa-wizard-benefits ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 7px 22px;
}
.wa-wizard-benefits li {
position: relative;
padding-left: 19px;
font-size: 13px;
line-height: 1.5;
color: #2a4a38;
}
.wa-wizard-benefits li::before {
content: '✓';
position: absolute;
left: 0;
top: 0;
color: #1f7a4d;
font-weight: 800;
}
.wa-wizard-benefits-future {
margin: 13px 0 0;
padding-top: 11px;
border-top: 1px solid #c8e0d2;
font-size: 11.5px;
line-height: 1.5;
color: #6a8a76;
font-style: italic;
}
html[data-theme="dark"] .wa-wizard-benefits {
background: linear-gradient(135deg,#16241c 0%,#1a1f26 100%);
border-color: #2d5a41;
}
html[data-theme="dark"] .wa-wizard-benefits strong { color: #8fcf6e; }
html[data-theme="dark"] .wa-wizard-benefits li { color: #b9c9c0; }
html[data-theme="dark"] .wa-wizard-benefits-future { border-top-color: #2d5a41; color: #93a89c; }
/* ── Dashboard "Complete your profile" banner ────────────────────────────── */
/* El espaciado salía descuadrado porque esta hoja NO se cargaba en /owner/ —
ver el comentario del enqueue en functions.php. Ahora sí, y aquí se define
el ritmo vertical completo en vez de heredar el de .wa-owner-block. */
/* Fondo tomado de .wa-bio-hero (wildatlas.css:15514, generador de perfiles
biológicos) — Marc, 2026-08-18. Mismo degradado, mismo radio, misma sombra
y el mismo antetítulo verde claro, para que se lea como un componente que
ya existe en el producto y no como un banner suelto. */
/* ★ ESPECIFICIDAD (Marc, 2026-08-18: "algo bloquea ese background").
*
* El módulo lleva DOS clases: .wa-owner-block y .wa-owner-complete-profile.
* El tema pinta el fondo blanco en `body.wa-owner .wa-owner-block`
* (wildatlas.css:1089 → 0,2,1) y en modo oscuro en
* `html[data-theme="dark"] body .wa-owner-block` (:1756 → 0,2,2).
* Mi regla era `.wa-owner-complete-profile` a secas (0,1,0): perdía las dos
* veces, y el degradado no llegaba a pintarse nunca. Cargar después no
* ayuda — el orden sólo decide en caso de empate.
*
* Se encadenan ambas clases sobre el mismo prefijo del tema (0,3,1 y 0,3,2),
* que gana por especificidad real en vez de a base de !important. */
body.wa-owner .wa-owner-block.wa-owner-complete-profile,
html[data-theme="dark"] body .wa-owner-block.wa-owner-complete-profile {
position: relative;
padding: 24px 58px 24px 26px; /* hueco a la derecha para la ✕ */
border: none;
border-radius: 18px;
color: #edf7f2;
background: linear-gradient(135deg,#14251f 0%,#1c382e 66%,#23503e 100%);
box-shadow: 0 18px 45px -32px rgba(11,34,25,.8);
}
body.wa-owner .wa-owner-complete-profile .wa-owner-nudge-kicker {
display: block;
margin-bottom: 6px;
color: #64c99b;
font-size: 10px;
font-weight: 850;
letter-spacing: 1.2px;
text-transform: uppercase;
}
/* El tema también estiliza el subtítulo dentro del bloque
(body.wa-owner .wa-owner-block .wa-admin-subtitle → 0,3,1), así que aquí
hace falta el mismo encadenado para el tamaño y el peso, no sólo el color. */
body.wa-owner .wa-owner-block.wa-owner-complete-profile .wa-admin-subtitle {
margin: 0 0 7px;
color: #fff;
font-size: 21px;
font-weight: 800;
letter-spacing: -.015em;
line-height: 1.25;
}
body.wa-owner .wa-owner-block.wa-owner-complete-profile .wa-admin-subtitle .wa-mod-ico { color: #64c99b; }
body.wa-owner .wa-owner-block.wa-owner-complete-profile .wa-owner-help {
margin: 0;
max-width: 760px;
color: #b9ccc4;
font-size: 13.5px;
line-height: 1.55;
}
/* Botones sobre fondo oscuro: el ghost del tema es blanco y aquí desaparece.
Se declaran los cuatro estados — dejar :hover/:focus/:active sin declarar
es lo que deja reaparecer la chrome del tema padre. */
body.wa .wa-owner-complete-profile .wa-owner-btn,
body.wa .wa-owner-complete-profile .wa-owner-btn:focus,
body.wa .wa-owner-complete-profile .wa-owner-btn:active {
background: rgba(255,255,255,.07) !important;
border: 1px solid rgba(255,255,255,.22) !important;
color: #cae4d8 !important;
border-radius: 10px !important;
font-weight: 700;
text-decoration: none !important;
box-shadow: none !important;
transition: background .16s, border-color .16s, color .16s;
}
body.wa .wa-owner-complete-profile .wa-owner-btn:hover {
background: rgba(255,255,255,.14) !important;
border-color: rgba(255,255,255,.4) !important;
color: #fff !important;
}
body.wa .wa-owner-complete-profile .wa-owner-btn:focus-visible {
box-shadow: 0 0 0 3px rgba(100,201,155,.45) !important;
}
.wa-owner-complete-profile-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 14px;
}
body.wa-owner .wa-owner-complete-profile .wa-owner-btn { margin: 0; }
/* Cerrar — el dueño que ya sabe lo que le falta no necesita el recordatorio
en cada visita. Se declaran los CUATRO estados: dejar :hover/:focus/:active
sin declarar es lo que hacía reaparecer el botón del tema padre. */
/* ✕ pelada, como las de las tarjetas: sin caja y con el padding de Astra
anulado, que es lo que las convertía en óvalos. */
body.wa .wa-owner-complete-profile .wa-owner-nudge-x,
body.wa .wa-owner-complete-profile .wa-owner-nudge-x:hover,
body.wa .wa-owner-complete-profile .wa-owner-nudge-x:focus,
body.wa .wa-owner-complete-profile .wa-owner-nudge-x:active {
position: absolute;
top: 14px;
right: 16px;
width: 26px;
height: 26px;
box-sizing: border-box;
padding: 0 !important;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
border: none !important;
border-radius: 0 !important;
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
text-shadow: none !important;
min-width: 0 !important;
font-size: 14px;
line-height: 1 !important;
cursor: pointer;
transition: color .16s, transform .16s;
}
body.wa .wa-owner-complete-profile .wa-owner-nudge-x,
body.wa .wa-owner-complete-profile .wa-owner-nudge-x:focus,
body.wa .wa-owner-complete-profile .wa-owner-nudge-x:active { color: rgba(237,247,242,.5) !important; }
body.wa .wa-owner-complete-profile .wa-owner-nudge-x:hover {
color: #fff !important;
transform: scale(1.12);
}
body.wa .wa-owner-complete-profile .wa-owner-nudge-x:focus-visible {
outline: 2px solid rgba(255,255,255,.8) !important;
outline-offset: 1px;
border-radius: 4px !important;
}
/* El degradado ya es oscuro: en modo oscuro se mantiene igual, sólo se suaviza
la sombra para que no cree un halo sobre un fondo casi negro. */
html[data-theme="dark"] body .wa-owner-block.wa-owner-complete-profile {
box-shadow: 0 14px 34px -30px rgba(0,0,0,.9);
}
@media (max-width: 640px) {
body.wa-owner .wa-owner-block.wa-owner-complete-profile { padding: 18px 46px 18px 18px; }
.wa-wizard-benefits { padding: 15px 16px; }
}
/* ═══════════════════════════════════════════════════════════════════════════
NEUTRALIZAR HOVERS / :ACTIVE HEREDADOS DEL TEMA (Marc, 2026-08-17)
Las páginas del wizard reutilizan clases que ya existen en el producto
(.wa-owner-btn, .wa-op-image-btn, .profile-hero-logout), así que arrastraban
los :hover de wildatlas.css — azules y grises de otra parte del sitio — por
encima del verde del wizard:
.wa .wa-owner-btn:hover → #283c50 (azul pizarra)
body.wa-owner.wa .wa-owner-btn:hover → #1a6a43
.wa .wa-owner-btn--ghost:hover → #e0e9f1
[data-wa-card] .wa-owner-btn:hover → #e2e8f0 !important
.wa .wa-op-image-btn:hover → #5f8aaa (borde azul)
.wa .profile-hero-logout:hover → #4fadd4 (celeste)
NO se borran de wildatlas.css: esas reglas siguen siendo correctas en el
Owner Dashboard y en los formularios públicos, que es donde nacieron.
Se anulan SOLO bajo body.wa-wizard-view, que únicamente existe en
/join-operator/ y /join-hotspot/ (wa_wizard_body_class, wizard.php).
El scope body.wa.wa-wizard-view + .wa-wizard-card da especificidad de sobra
frente a todas ellas; el !important aparece solo donde el tema lo usa
primero, no como atajo.
═══════════════════════════════════════════════════════════════════════════ */
/* Botones primarios del wizard (Continuar · Crear · Sí) */
body.wa.wa-wizard-view .wa-wizard-card .wa-wizard-next-btn:hover,
body.wa.wa-wizard-view .wa-wizard-card .wa-submit-btn:hover,
body.wa.wa-wizard-view .wa-wizard-card .wa-wizard-yes-btn:hover {
background: #1a6a42 !important;
border-color: #1a6a42;
color: #fff !important;
}
body.wa.wa-wizard-view .wa-wizard-card .wa-wizard-next-btn:disabled:hover,
body.wa.wa-wizard-view .wa-wizard-card .wa-submit-btn:disabled:hover {
background: var(--wz-accent) !important;
transform: none;
box-shadow: none;
}
html[data-theme="dark"] body.wa.wa-wizard-view .wa-wizard-card .wa-wizard-next-btn:hover,
html[data-theme="dark"] body.wa.wa-wizard-view .wa-wizard-card .wa-submit-btn:hover,
html[data-theme="dark"] body.wa.wa-wizard-view .wa-wizard-card .wa-wizard-yes-btn:hover {
background: #37a26a !important;
border-color: #37a26a;
}
/* Botón secundario "No, ahora no" — el ghost del tema lo pintaba de azul claro */
body.wa.wa-wizard-view .wa-wizard-card .wa-wizard-no-btn:hover {
background: var(--wz-surface) !important;
border-color: #cbd5dd;
color: var(--wz-ink) !important;
}
/* Botón "Buscar" del paso de ubicación */
body.wa.wa-wizard-view .wa-wizard-card .wa-hs-geo-search .wa-owner-btn:hover {
background: var(--wz-ink) !important;
border-color: var(--wz-ink);
color: #fff !important;
opacity: .85;
}
/* Zona de foto — el tema le metía borde y fondo azules */
body.wa.wa-wizard-view .wa-wizard-card .wa-op-image-btn:hover {
border-color: var(--wz-accent) !important;
background: var(--wz-accent-soft) !important;
color: var(--wz-accent) !important;
}
/* Enlace "← Volver" del hero (vive fuera de la tarjeta) */
body.wa.wa-wizard-view .profile-hero-logout:hover {
background: rgba(255,255,255,.12) !important;
border-color: rgba(255,255,255,.35) !important;
color: #fff !important;
}
/* ── :active — estado de pulsación propio y coherente ────────────────────── */
/* El tema no define :active para estos botones, así que al pulsar no pasaba
nada y se sentían muertos en móvil. Se hunden 1px y pierden el glow. */
body.wa.wa-wizard-view .wa-wizard-card .wa-wizard-next-btn:active:not(:disabled),
body.wa.wa-wizard-view .wa-wizard-card .wa-submit-btn:active:not(:disabled),
body.wa.wa-wizard-view .wa-wizard-card .wa-wizard-yes-btn:active,
body.wa.wa-wizard-view .wa-wizard-card .wa-wizard-no-btn:active,
body.wa.wa-wizard-view .wa-wizard-card .wa-hs-geo-search .wa-owner-btn:active {
transform: translateY(1px);
box-shadow: none;
}
body.wa.wa-wizard-view .wa-wizard-card .wa-wizard-choice:active,
body.wa.wa-wizard-view .wa-wizard-card .wa-wizard-chip:active,
body.wa.wa-wizard-view .wa-wizard-card .wa-op-image-btn:active {
transform: translateY(1px);
}
/* Nada dentro del wizard debe heredar el subrayado de enlace del tema. */
body.wa.wa-wizard-view .wa-wizard-card a:hover { text-decoration: none; }
/* ── Botones "desnudos": reset de la chrome del tema padre (Astra) ────────
Marc, 2026-08-18: "el boton skip tiene astra child heredado en active".
Astra estiliza el selector `button` a secas — fondo, borde, sombra — y
define :hover/:focus/:active. Yo declaré el estado base de estos botones
(background:none, border:none) pero NO los otros tres, así que al pulsar
Omitir reaparecía el botón azul de Astra por debajo. El fallo estaba en
declarar un estado y olvidar los demás; se arregla declarándolos todos.
Afecta a todo botón del wizard que no sea uno de los primarios verdes:
Omitir, Atrás, las ✕ de especies/galería/foto y las sugerencias. */
body.wa.wa-wizard-view .wa-wizard-skip-btn,
body.wa.wa-wizard-view .wa-wizard-skip-btn:hover,
body.wa.wa-wizard-view .wa-wizard-skip-btn:focus,
body.wa.wa-wizard-view .wa-wizard-skip-btn:active,
body.wa.wa-wizard-view .wa-wizard-back-btn,
body.wa.wa-wizard-view .wa-wizard-back-btn:hover,
body.wa.wa-wizard-view .wa-wizard-back-btn:focus,
body.wa.wa-wizard-view .wa-wizard-back-btn:active,
body.wa.wa-wizard-view .wa-hs-suggest-item,
body.wa.wa-wizard-view .wa-hs-suggest-item:focus,
body.wa.wa-wizard-view .wa-hs-suggest-item:active,
body.wa.wa-wizard-view .wa-op-image-remove,
body.wa.wa-wizard-view .wa-op-image-remove:focus,
body.wa.wa-wizard-view .wa-op-image-remove:active {
background-image: none !important;
box-shadow: none !important;
text-shadow: none !important;
outline: none;
}
body.wa.wa-wizard-view .wa-wizard-skip-btn,
body.wa.wa-wizard-view .wa-wizard-skip-btn:focus,
body.wa.wa-wizard-view .wa-wizard-skip-btn:active,
body.wa.wa-wizard-view .wa-wizard-back-btn,
body.wa.wa-wizard-view .wa-wizard-back-btn:focus,
body.wa.wa-wizard-view .wa-wizard-back-btn:active {
background-color: transparent !important;
border-color: transparent !important;
color: var(--wz-muted) !important;
}
body.wa.wa-wizard-view .wa-wizard-skip-btn:hover,
body.wa.wa-wizard-view .wa-wizard-back-btn:hover {
background-color: var(--wz-surface-alt) !important;
color: var(--wz-ink) !important;
}
/* El teclado sí debe ver dónde está — pero con nuestro anillo, no el de Astra. */
body.wa.wa-wizard-view .wa-wizard-skip-btn:focus-visible,
body.wa.wa-wizard-view .wa-wizard-back-btn:focus-visible,
body.wa.wa-wizard-view .wa-hs-suggest-item:focus-visible,
body.wa.wa-wizard-view .wa-op-image-remove:focus-visible {
box-shadow: 0 0 0 3px var(--wz-accent-soft) !important;
}
/* Sin caja no hay dónde poner un anillo de foco: se marca con un contorno
sobre el propio trazo, que sigue siendo visible sobre cualquier foto. */
body.wa.wa-wizard-view .wa-hs-gallery-x:focus-visible,
body.wa.wa-wizard-view .wa-hs-sp-card-x:focus-visible {
outline: 2px solid #fff !important;
outline-offset: 1px;
border-radius: 4px !important;
}
body.wa.wa-wizard-view .wa-op-image-remove,
body.wa.wa-wizard-view .wa-op-image-remove:focus,
body.wa.wa-wizard-view .wa-op-image-remove:active {
background-color: transparent !important;
}
body.wa.wa-wizard-view .wa-hs-suggest-item,
body.wa.wa-wizard-view .wa-hs-suggest-item:focus,
body.wa.wa-wizard-view .wa-hs-suggest-item:active {
background-color: var(--wz-surface) !important;
color: var(--wz-ink) !important;
}
body.wa.wa-wizard-view .wa-hs-suggest-item:hover {
background-color: var(--wz-accent-soft) !important;
}
/* Las ✕ sobre foto: sólo el aspa, nada de caja.
★ El `padding` es lo importante aquí. Astra lo aplica a todo , y
con él una caja de 26×26 se convierte en el óvalo rojo que reportó Marc.
Declarar sólo el fondo no bastaba: había que anular también el padding. */
body.wa.wa-wizard-view .wa-hs-gallery-x,
body.wa.wa-wizard-view .wa-hs-gallery-x:hover,
body.wa.wa-wizard-view .wa-hs-gallery-x:focus,
body.wa.wa-wizard-view .wa-hs-gallery-x:active,
body.wa.wa-wizard-view .wa-hs-sp-card-x,
body.wa.wa-wizard-view .wa-hs-sp-card-x:hover,
body.wa.wa-wizard-view .wa-hs-sp-card-x:focus,
body.wa.wa-wizard-view .wa-hs-sp-card-x:active {
padding: 0 !important;
border: none !important;
border-radius: 0 !important;
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
min-width: 0 !important;
min-height: 0 !important;
line-height: 1 !important;
}
body.wa.wa-wizard-view .wa-hs-gallery-x,
body.wa.wa-wizard-view .wa-hs-gallery-x:focus,
body.wa.wa-wizard-view .wa-hs-gallery-x:active,
body.wa.wa-wizard-view .wa-hs-sp-card-x,
body.wa.wa-wizard-view .wa-hs-sp-card-x:focus,
body.wa.wa-wizard-view .wa-hs-sp-card-x:active { color: #fff !important; }
body.wa.wa-wizard-view .wa-hs-gallery-x:hover,
body.wa.wa-wizard-view .wa-hs-sp-card-x:hover { color: #ff9b8f !important; }
/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
.wa-wizard-card { padding: 22px 18px 20px; border-radius: 16px; }
.wa-wizard-q { font-size: 20px; }
.wa-wizard-hint { font-size: 13.5px; }
.wa-wizard-yesno { flex-direction: column; }
.wa-wizard-product-menu { grid-template-columns: 1fr; }
body.wa.wa-wizard-view :is(#wa-wizard-hotspot-questions,#wa-wizard-operator-questions) .wa-wizard-menu-item { min-height: 0; }
.wa-wizard-continue-row { align-items: stretch; flex-direction: column; }
body.wa.wa-wizard-view :is(#wa-wizard-hotspot-questions,#wa-wizard-operator-questions) .wa-wizard-continue-btn { width: 100%; }
.wa-wizard-continue-hint { max-width: none; text-align: center; }
.wa-wizard-back-link { justify-content: center; width: 100%; box-sizing: border-box; }
.wa-hs-map { height: 260px; }
.wa-hs-geo-search { flex-direction: column; }
.wa-wizard-card .wa-hs-geo-search .wa-owner-btn { padding: 13px 22px; }
.wa-wizard-step-nav { gap: 10px; }
.wa-wizard-step-nav .wa-wizard-progress { max-width: none; }
.wa-wizard-card .wa-wizard-next-btn { min-width: 0; padding: 13px 20px; }
.wa-op-image-preview img { width: 68px; height: 68px; }
}
@media (prefers-reduced-motion: reduce) {
.wa-wizard-step,
.wa-wizard-dot::after,
.wa-wizard-choice,
.wa-wizard-menu-item,
.wa-wizard-menu-action > span,
.wa-wizard-card .wa-wizard-next-btn,
.wa-wizard-card .wa-submit-btn { transition: none; }
.wa-wizard-step { transform: none; }
}
/* ── Owner product wizards: hide / stay / pack / experience ─────────────── */
/* Product creation returns to the original WildAtlas hero, without the
onboarding-family gradient. The icon identifies the actual product. */
body.wa-wizard-product .profile-hero { background: #1a1e24; }
body.wa-wizard-product .wa-product-hero-ico {
color: #fff;
background: rgba(255,255,255,.08);
border-color: rgba(255,255,255,.16);
}
.wa-product-wizard-form {
width: 100%;
max-width: none;
box-sizing: border-box;
}
.wa-product-context {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin: -4px 0 20px;
padding: 11px 14px;
border: 1px solid var(--wz-line);
border-radius: 12px;
background: var(--wz-accent-soft);
color: var(--wz-ink);
}
.wa-product-context span { color: var(--wz-muted); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.wa-product-context strong { font-size: 14px; text-align: right; }
.wa-product-fields-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.wa-stay-inventory-fields > .wa-product-field + .wa-product-fields-grid {
margin-top: 18px;
}
.wa-product-field { min-width: 0; }
.wa-product-field--textarea,
.wa-product-field--checkbox { grid-column: 1 / -1; }
.wa-amenity-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.wa-amenity-group{min-width:0;padding:14px;border:1px solid var(--wz-line);border-radius:13px;background:var(--wz-surface-alt)}
.wa-amenity-group h3{margin:0 0 10px;color:var(--wz-ink);font-size:13px;font-weight:850}
.wa-amenity-group .wa-wizard-chips{gap:7px}
.wa-amenity-group .wa-wizard-chip span{font-size:12px}
@media(max-width:680px){.wa-amenity-groups{grid-template-columns:1fr}}
.wa-product-field > label {
display: block;
margin: 0 0 7px;
color: var(--wz-ink);
font-size: 13px;
font-weight: 800;
}
.wa-product-field > label span { color: var(--wz-accent); }
.wa-product-field .wa-wizard-hint { margin: 8px 0 0; font-size: 12px; max-width: none; }
.wa-product-field select {
min-height: 52px !important;
height: 52px !important;
line-height: 1.35 !important;
padding-top: 13px !important;
padding-bottom: 13px !important;
text-overflow: ellipsis;
}
.wa-wizard-product .wa-wizard-step-inner input[type="text"],
.wa-wizard-product .wa-wizard-step-inner input[type="email"],
.wa-wizard-product .wa-wizard-step-inner input[type="search"],
.wa-wizard-product .wa-wizard-step-inner input[type="number"],
.wa-wizard-product .wa-wizard-step-inner input[type="date"],
.wa-wizard-product .wa-wizard-step-inner select {
height: 52px !important;
min-height: 52px !important;
box-sizing: border-box !important;
}
.wa-wizard-step-inner input[type="number"],
.wa-wizard-step-inner input[type="date"] {
width: 100%;
box-sizing: border-box;
padding: 14px 16px;
border: 1.5px solid var(--wz-line);
border-radius: 12px;
background: var(--wz-surface);
color: var(--wz-ink);
font-family: inherit;
font-size: 15.5px;
}
.wa-product-important-note {
max-width: none;
padding: 13px 15px;
border-left: 3px solid var(--wz-accent);
border-radius: 0 10px 10px 0;
background: var(--wz-accent-soft);
}
.wa-product-hotspot-picked {
display: flex;
flex-wrap: wrap;
gap: 9px;
margin-top: 16px;
}
.wa-product-hotspot-picked:empty { display: none; }
.wa-product-hotspot-chip {
display: inline-flex;
align-items: center;
gap: 8px;
min-width: 0;
padding: 8px 9px 8px 12px;
border: 1.5px solid var(--wz-line);
border-radius: 999px;
background: var(--wz-surface);
color: var(--wz-ink);
font-size: 13px;
font-weight: 700;
}
.wa-product-hotspot-pin { color: var(--wz-accent); font-size: 9px; }
.wa-product-hotspot-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.wa.wa-wizard-view .wa-product-hotspot-chip button,
body.wa.wa-wizard-view .wa-product-hotspot-chip button:hover,
body.wa.wa-wizard-view .wa-product-hotspot-chip button:focus,
body.wa.wa-wizard-view .wa-product-hotspot-chip button:active {
width: 24px;
height: 24px;
margin: 0;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent !important;
box-shadow: none !important;
color: var(--wz-muted) !important;
font-size: 18px;
line-height: 1;
}
body.wa.wa-wizard-view .wa-product-hotspot-chip button:hover { color: #b3422b !important; }
.wa-product-switch {
display: inline-flex !important;
align-items: center;
gap: 11px;
margin: 0 !important;
cursor: pointer;
}
.wa-product-switch > input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.wa-product-switch-track {
position: relative;
display: inline-flex;
width: 46px;
height: 26px;
flex: 0 0 46px;
padding: 3px;
box-sizing: border-box;
border-radius: 999px;
background: #cbd4dc;
transition: background .18s;
}
.wa-product-switch-track span {
display: block;
width: 20px;
height: 20px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 4px rgba(0,0,0,.2);
transition: transform .18s;
}
.wa-product-switch input:checked + .wa-product-switch-track { background: var(--wz-accent); }
.wa-product-switch input:checked + .wa-product-switch-track span { transform: translateX(20px); }
.wa-product-switch input:focus-visible + .wa-product-switch-track { box-shadow: 0 0 0 4px var(--wz-accent-soft); }
.wa-product-switch strong { color: var(--wz-ink); font-size: 13px; font-weight: 700; }
.wa-product-all-year {
display: inline-flex;
align-items: center;
justify-content: center;
margin: 12px 0 0;
padding: 9px 16px !important;
border: 1px solid #397bad !important;
border-radius: 10px !important;
background: #eaf4fb !important;
color: #245f8c !important;
font-family: inherit !important;
font-size: 13px !important;
font-weight: 750 !important;
line-height: 1.2 !important;
box-shadow: none !important;
cursor: pointer;
}
.wa-product-all-year:hover,
.wa-product-all-year.is-active {
background: #397bad !important;
color: #fff !important;
}
html[data-theme="dark"] .wa-product-all-year { background: #172b3a !important; color: #8bc3e8 !important; border-color: #397bad !important; }
html[data-theme="dark"] .wa-product-all-year:hover,
html[data-theme="dark"] .wa-product-all-year.is-active { background: #397bad !important; color: #fff !important; }
.wa-product-image-preview {
position: relative;
width: min(100%, 520px);
margin-top: 16px;
}
.wa-product-image-preview img { display: block; width: 100%; max-height: 290px; object-fit: cover; border-radius: 14px; }
.wa-product-image-preview button,
.wa-product-gallery-item button,
.wa-product-species-chip button,
.wa-product-itinerary-day > button {
display: grid;
place-items: center;
width: 28px;
height: 28px;
padding: 0 !important;
border: 0 !important;
border-radius: 8px !important;
background: rgba(19,31,26,.82) !important;
color: #fff !important;
line-height: 1 !important;
box-shadow: none !important;
}
body.wa.wa-wizard-view .wa-product-image-preview > button,
body.wa.wa-wizard-view .wa-product-image-preview > button:hover,
body.wa.wa-wizard-view .wa-product-image-preview > button:focus,
body.wa.wa-wizard-view .wa-product-image-preview > button:active {
position: absolute;
top: 9px;
right: 9px;
display: grid !important;
place-items: center !important;
box-sizing: border-box !important;
width: 28px !important;
min-width: 28px !important;
max-width: 28px !important;
height: 28px !important;
min-height: 28px !important;
max-height: 28px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 8px !important;
background: rgba(19,31,26,.82) !important;
color: #fff !important;
box-shadow: none !important;
font-size: 0 !important;
line-height: 1 !important;
text-indent: 0 !important;
transform: none !important;
appearance: none !important;
}
body.wa.wa-wizard-view .wa-product-image-preview > button:focus-visible {
box-shadow: 0 0 0 3px var(--wz-accent-soft) !important;
}
body.wa.wa-wizard-view .wa-product-image-preview > button::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 13px;
height: 2px;
border-radius: 2px;
background: currentColor;
transform: translate(-50%, -50%) rotate(45deg);
}
body.wa.wa-wizard-view .wa-product-image-preview > button::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 13px;
height: 2px;
border-radius: 2px;
background: currentColor;
transform: translate(-50%, -50%) rotate(-45deg);
}
.wa-product-gallery-preview {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin-top: 16px;
}
.wa-product-gallery-item { position: relative; aspect-ratio: 4 / 3; }
.wa-product-gallery-item img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.wa-product-gallery-item button { position: absolute; top: 7px; right: 7px; }
.wa-product-species-results {
display: grid;
gap: 6px;
max-height: 240px;
overflow: auto;
margin-top: 8px;
}
.wa-product-species-results button {
width: 100%;
padding: 11px 13px;
border: 1px solid var(--wz-line);
border-radius: 10px;
background: var(--wz-surface);
color: var(--wz-ink);
font-size: 13.5px;
text-align: left;
}
.wa-product-selected { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.wa-product-species-chip {
display: flex;
align-items: center;
gap: 9px;
padding: 7px 7px 7px 12px;
border: 1px solid var(--wz-line);
border-radius: 11px;
background: var(--wz-surface);
color: var(--wz-ink);
font-size: 12.5px;
}
.wa-product-species-chip button { position: static; width: 23px; height: 23px; border-radius: 7px !important; }
.wa-product-fixed-value {
padding: 14px 16px;
border: 1px solid var(--wz-line);
border-radius: 12px;
background: var(--wz-accent-soft);
color: var(--wz-ink);
font-weight: 750;
}
.wa-product-component-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.wa-product-component-cols > div { padding: 14px; border: 1px solid var(--wz-line); border-radius: 14px; }
.wa-product-component-cols h3 { margin: 0 0 10px; color: var(--wz-ink); font-size: 14px; }
.wa-product-itinerary-day {
display: grid;
grid-template-columns: 36px minmax(150px,.65fr) minmax(220px,1.35fr) 36px;
gap: 12px;
align-items: center;
margin-bottom: 12px;
padding: 12px;
border: 1px solid var(--wz-line);
border-radius: 14px;
background: var(--wz-surface-alt);
}
.wa-product-itinerary-day > strong {
display: grid;
place-items: center;
width: 32px;
height: 32px;
border-radius: 9px;
background: var(--wz-accent-soft);
color: var(--wz-accent);
font-size: 13px;
}
.wa-product-itinerary-day textarea { min-height: 92px; }
.wa-product-itinerary-day > button {
align-self: center !important;
justify-self: center !important;
margin: 0 !important;
font-family: Arial, sans-serif !important;
font-size: 19px !important;
font-weight: 400 !important;
line-height: 28px !important;
text-align: center !important;
}
.wa-product-final-actions { display: flex; gap: 12px; margin-top: 18px; }
.wa-product-final-actions .wa-owner-btn {
display: inline-flex !important;
align-items: center;
flex: 1;
justify-content: center;
min-height: 50px;
margin: 0 !important;
padding: 14px 18px !important;
border-radius: 11px !important;
font-family: inherit !important;
font-size: 14.5px !important;
font-weight: 700 !important;
line-height: 1.2 !important;
text-transform: none !important;
box-shadow: none !important;
appearance: none;
}
body.wa.wa-wizard-product .wa-product-final-actions #wa-pw-preview {
border: 1.5px solid var(--wz-line) !important;
background: var(--wz-surface) !important;
color: var(--wz-ink) !important;
}
body.wa.wa-wizard-product .wa-product-final-actions #wa-pw-preview:hover {
border-color: var(--wz-accent) !important;
background: var(--wz-accent-soft) !important;
color: var(--wz-accent) !important;
}
body.wa.wa-wizard-product .wa-product-final-actions #wa-pw-publish {
border: 1px solid var(--wz-accent) !important;
background: var(--wz-accent) !important;
color: #fff !important;
}
.wa-product-wizard-form .wa-submit-feedback { color: #b3422b; font-weight: 700; }
html[data-theme="dark"] .wa-product-context,
html[data-theme="dark"] .wa-product-fixed-value,
html[data-theme="dark"] .wa-product-important-note { background: rgba(45,157,96,.11); }
@media (max-width: 640px) {
.wa-product-context { align-items: flex-start; flex-direction: column; }
.wa-product-context strong { text-align: left; }
.wa-product-fields-grid,
.wa-product-component-cols { grid-template-columns: 1fr; }
.wa-product-field--textarea,
.wa-product-field--checkbox { grid-column: auto; }
.wa-product-gallery-preview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wa-product-itinerary-day { grid-template-columns: 36px minmax(0, 1fr) 36px; }
.wa-product-itinerary-day > strong { grid-column: 1; grid-row: 1 / 3; align-self: center; }
.wa-product-itinerary-day > input { grid-column: 2; grid-row: 1; }
.wa-product-itinerary-day textarea { grid-column: 2; grid-row: 2; }
.wa-product-itinerary-day > button { grid-column: 3; grid-row: 1 / 3; }
.wa-product-final-actions { flex-direction: column; }
}
/* Local recovery + nature submission confirmation. */
.wa-wizard-recovery {
display: flex;
align-items: flex-start;
gap: 9px;
margin: 0 0 18px;
padding: 12px 14px;
border: 1px solid #bdd9ca;
border-radius: 12px;
background: #eff8f3;
color: #315a43;
font-size: 13px;
line-height: 1.45;
}
.wa-wizard-recovery strong { flex: 0 0 auto; color: #1f6c43; }
.wa-wizard-resume-overlay {
position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center;
padding: 24px; background: rgba(8,22,19,.66); backdrop-filter: blur(8px);
}
.wa-wizard-resume-dialog {
width: min(100%, 480px); padding: 34px; border: 1px solid rgba(255,255,255,.14);
border-radius: 22px; background: #fff; box-shadow: 0 30px 80px rgba(0,0,0,.28); text-align: center;
}
.wa-wizard-resume-icon {
display: grid; width: 46px; height: 46px; margin: 0 auto 16px; place-items: center;
border-radius: 14px; background: #e7f4ed; color: #176b48; font-size: 25px; font-weight: 800;
}
.wa-wizard-resume-dialog h2 { margin: 0 0 10px; color: #17231f; font-size: 23px; line-height: 1.22; }
.wa-wizard-resume-dialog p { margin: 0; color: #63716c; font-size: 14px; }
.wa-wizard-resume-meta { margin: 18px 0 22px; color: #82908b; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.wa-wizard-resume-actions { display: flex; justify-content: center; gap: 10px; }
.wa-wizard-resume-actions .wa-wizard-btn { min-width: 145px; }
.wa-hs-gallery-cell.is-uploading {
display: grid; place-items: center; padding: 8px; border: 1px dashed #a9b9b3;
background: #f2f7f5; color: #527064; font-size: 11px; font-weight: 800; text-align: center;
}
.wa-wizard-success {
display: grid;
grid-template-columns: 64px minmax(0, 1fr);
gap: 22px;
width: min(100%, 760px);
margin: 0 auto;
padding: clamp(26px, 5vw, 48px);
border: 1px solid #dfe8e3;
border-radius: 22px;
background: #fff;
box-shadow: 0 22px 60px -42px rgba(21, 50, 31, .45);
}
.wa-wizard-success-ico {
display: grid;
place-items: center;
width: 64px;
height: 64px;
border-radius: 18px;
background: #e7f6ed;
color: #1f7a4d;
}
.wa-wizard-success-kicker {
display: block;
margin: 2px 0 8px;
color: #1f7a4d;
font-size: 11px;
font-weight: 850;
letter-spacing: .12em;
text-transform: uppercase;
}
.wa-wizard-success h2 { margin: 0 0 12px; color: #15321f; font-size: clamp(25px, 4vw, 34px); }
.wa-wizard-success p { margin: 0 0 8px; color: #65756d; font-size: 15px; line-height: 1.6; }
.wa-wizard-success-btn { display: inline-flex !important; margin-top: 18px !important; text-decoration: none !important; }
html[data-theme="dark"] .wa-wizard-recovery { border-color: #315f47; background: #172a20; color: #b7d4c2; }
html[data-theme="dark"] .wa-wizard-recovery strong { color: #7bd3a0; }
html[data-theme="dark"] .wa-wizard-resume-dialog { border-color: #304038; background: #171d19; box-shadow: 0 30px 80px rgba(0,0,0,.55); }
html[data-theme="dark"] .wa-wizard-resume-icon { background: #1c3929; color: #74ce99; }
html[data-theme="dark"] .wa-wizard-resume-dialog h2 { color: #eef5f0; }
html[data-theme="dark"] .wa-wizard-resume-dialog p,
html[data-theme="dark"] .wa-wizard-resume-meta { color: #9eada4; }
html[data-theme="dark"] .wa-hs-gallery-cell.is-uploading { border-color: #40534a; background: #202a24; color: #a9bbb1; }
html[data-theme="dark"] .wa-wizard-success { border-color: #2b3831; background: #171d19; box-shadow: none; }
html[data-theme="dark"] .wa-wizard-success-ico { background: #1c3929; color: #74ce99; }
html[data-theme="dark"] .wa-wizard-success h2 { color: #eef5f0; }
html[data-theme="dark"] .wa-wizard-success p { color: #a7b5ac; }
@media (max-width: 640px) {
.wa-wizard-recovery { flex-direction: column; gap: 2px; }
.wa-wizard-resume-overlay { padding: 0; align-items: end; }
.wa-wizard-resume-dialog { width: 100%; padding: 30px 22px max(28px, env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; }
.wa-wizard-resume-actions { flex-direction: column; }
.wa-wizard-resume-actions .wa-wizard-btn { width: 100%; }
.wa-wizard-success { grid-template-columns: 1fr; gap: 16px; padding: 24px 20px; }
.wa-wizard-success-ico { width: 54px; height: 54px; border-radius: 15px; }
}
/* ── Account as the first business-wizard step ─────────────────────────── */
.wa-wizard-auth-card { max-width: 720px; margin-inline: auto; }
.wa-wizard-auth-inner { width: min(100%, 430px); margin: 0 auto; padding: clamp(24px, 5vw, 44px) 0 12px; }
.wa-wizard-auth-inner > .wa-wizard-q,
.wa-wizard-auth-inner > .wa-wizard-hint { text-align: center; }
.wa-wizard-google-primary { margin: 24px 0 4px; }
.wa-wizard-google-primary .wa-google-btn-wrap { min-height: 48px; }
.wa-wizard-auth-inner > .wa-auth-legal-fields { margin: 18px 0 4px; }
.wa-wizard-auth-inner .wa-auth-legal-check { color: #607068; }
.wa-wizard-auth-inner .wa-auth-legal-check a { color: #216d48; }
.wa-wizard-auth-inner .wa-auth-marketing-check { color: #78857f; }
.wa-wizard-auth-divider { color: #7c8982; }
.wa-wizard-auth-divider::before,
.wa-wizard-auth-divider::after { background: #dde5e0; }
.wa-wizard-auth-tabs {
display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
margin: 18px 0; padding: 4px; border-radius: 12px; background: #edf2ef;
}
.wa-wizard-auth-tab {
min-height: 42px; padding: 8px 10px; border: 0; border-radius: 9px;
background: transparent; color: #65736b; font-size: 13px; font-weight: 800; cursor: pointer;
}
.wa .wa-wizard-auth-tab:hover { background: rgba(255,255,255,.65); color: #294b38; }
.wa .wa-wizard-auth-tab.is-active {
background: #fff; color: #183a26; box-shadow: 0 2px 8px rgba(24,58,38,.10);
}
.wa-wizard-auth-form[hidden] { display: none; }
.wa-wizard-auth-form label { color: #46574e; }
.wa .wa-wizard-auth-form input,
.wa-wizard-auth-form input {
border-color: #d7e0db; background: #fff; color: #17261d !important;
}
.wa .wa-wizard-auth-form input:focus { border-color: #2d7a4f; background: #fff; }
.wa .wa-wizard-auth-form input:-webkit-autofill,
.wa .wa-wizard-auth-form input:-webkit-autofill:hover,
.wa .wa-wizard-auth-form input:-webkit-autofill:focus {
-webkit-text-fill-color: #17261d !important;
-webkit-box-shadow: 0 0 0 1000px #fff inset !important;
box-shadow: 0 0 0 1000px #fff inset !important;
caret-color: #17261d;
}
.wa .wa-wizard-auth-form .wa-auth-eye:hover { background: #edf2ef; color: #1f7a4d; }
.wa-wizard-auth-form .wa-auth-submit { margin-top: 4px; }
.wa-wizard-auth-progress .wa-wizard-dot { flex: 0 0 100%; }
/* ── Common completion screen ───────────────────────────────────────────── */
.wa-wizard-complete { max-width: 760px; margin-inline: auto; padding: clamp(30px, 6vw, 58px); text-align: center; }
.wa-wizard-complete-mark {
display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto 18px;
border-radius: 22px; background: #e7f6ed; color: #1f7a4d;
}
.wa-wizard-complete-kicker { margin: 0 0 8px; color: #1f7a4d; font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.wa-wizard-complete-copy { max-width: 610px; margin-inline: auto; }
.wa-wizard-email-state {
display: flex; align-items: center; gap: 13px; max-width: 610px;
margin: 26px auto 0; padding: 15px 17px; border: 1px solid; border-radius: 14px; text-align: left;
}
.wa-wizard-email-state-icon { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; font-weight: 900; }
.wa-wizard-email-state div { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.wa-wizard-email-state strong { color: var(--wz-ink); font-size: 14px; }
.wa-wizard-email-state span:not(.wa-wizard-email-state-icon) { color: var(--wz-muted); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.wa-wizard-email-state.is-verified { border-color: #cde6d6; background: #f0faf4; }
.wa-wizard-email-state.is-verified .wa-wizard-email-state-icon { background: #d9f1e2; color: #187144; }
.wa-wizard-email-state.is-pending { border-color: #ead29f; background: #fff8e8; }
.wa-wizard-email-state.is-pending .wa-wizard-email-state-icon { background: #f2d58f; color: #6e4a08; }
.wa-wizard-complete-actions { display: flex; justify-content: center; gap: 12px; margin-top: 26px; }
.wa-wizard-complete-actions .wa-owner-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 12px 20px; text-decoration: none; }
.wa .wa-wizard-resend-btn { border: 1px solid #c99a45; background: #fff7e6; color: #6e4708; }
.wa .wa-wizard-resend-btn:hover { border-color: #ae7c27; background: #ffefcc; color: #543500; }
.wa .wa-wizard-resend-btn.is-sent { border-color: #399163; background: #eaf8f0; color: #17673d; }
.wa .wa-wizard-dashboard-btn,
.wa .wa-wizard-dashboard-btn:hover,
.wa .wa-wizard-dashboard-btn:focus {
border: 1px solid #bd7b40; background: #9a5b2d; color: #fff; box-shadow: 0 12px 24px -16px rgba(99,53,23,.75);
}
.wa .wa-wizard-dashboard-btn:hover { background: #824820; transform: translateY(-1px); }
html[data-theme="dark"] .wa-wizard-auth-tabs { background: #202a24; }
html[data-theme="dark"] .wa .wa-wizard-auth-tab.is-active { background: #2a3730; color: #eef5f0; }
html[data-theme="dark"] .wa-wizard-auth-form label { color: #b6c3bb; }
html[data-theme="dark"] .wa .wa-wizard-auth-form input,
html[data-theme="dark"] .wa-wizard-auth-form input { border-color: #34453b; background: #151c18; color: #eef5f0 !important; }
html[data-theme="dark"] .wa-wizard-email-state.is-verified { border-color: #315f47; background: #172a20; }
html[data-theme="dark"] .wa-wizard-email-state.is-pending { border-color: #70582c; background: #2a2418; }
@media (max-width: 640px) {
.wa-wizard-auth-inner { padding-inline: 2px; }
.wa-wizard-auth-tabs { grid-template-columns: 1fr; }
.wa-wizard-complete { padding: 28px 18px; }
.wa-wizard-complete-actions { flex-direction: column; }
.wa-wizard-complete-actions .wa-owner-btn { width: 100%; }
}
/* ── Chips de países seleccionados (paso operating_countries) ──────────────
Van FUERA de la lista filtrable a propósito: son lo único que no desaparece
al escribir en el buscador. Ver assets/js/wizard-operator.js. */
.wa-wizard-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 12px;
}
.wa-wizard-chips[hidden] { display: none; }
.wa-wizard-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 6px 6px 12px;
border: 1.5px solid var(--wz-accent);
border-radius: 999px;
background: var(--wz-accent-soft);
color: var(--wz-ink);
font-size: 13px;
font-weight: 650;
line-height: 1.3;
}
/* Los cuatro estados: Astra pinta cualquier suelto con su fondo azul
en hover y focus si se deja alguno sin cubrir. */
.wa-wizard-chip-x,
.wa-wizard-chip-x:hover,
.wa-wizard-chip-x:focus,
.wa-wizard-chip-x:active {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(0,0,0,.07);
color: inherit;
font-size: 14px;
line-height: 1;
cursor: pointer;
box-shadow: none;
outline: none;
}
.wa-wizard-chip-x:hover,
.wa-wizard-chip-x:focus { background: rgba(0,0,0,.16); }
.wa-wizard-chip-x:focus-visible { outline: 2px solid var(--wz-accent); outline-offset: 2px; }
.wa-room-types-extra{display:grid;gap:14px;margin:18px 0}.wa-room-type-card{position:relative;padding:0;border:1px solid #dce5e0;border-radius:14px;background:#f8faf9;overflow:visible}.wa-room-type-card:has(.wa-field-help:hover),.wa-room-type-card:has(.wa-field-help.is-open),.wa-room-type-card:has(.wa-field-help:focus-within){z-index:50}.wa-room-type-card__head{display:flex;align-items:center;gap:8px;border-radius:14px 14px 0 0;color:#173421}.wa-room-type-card__toggle{display:flex;align-items:center;justify-content:space-between;flex:1;min-width:0;padding:16px 18px;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer}.wa-room-type-card__toggle strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wa-room-type-card__toggle span{font-size:20px;transition:transform .18s}.wa-room-type-card.is-open .wa-room-type-card__toggle span{transform:rotate(180deg)}.wa-room-type-card__remove{display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;margin-right:12px;padding:0;border:0;background:transparent;color:#7c4b43;font-size:22px;cursor:pointer}.wa-room-type-card__body{display:none;padding:4px 18px 18px;border-top:1px solid #e4ebe7;border-radius:0 0 14px 14px}.wa-room-type-card.is-open .wa-room-type-card__body{display:grid}.wa-room-type-card label{display:flex;flex-direction:column;gap:6px;color:#53655b;font-size:12px;font-weight:700}.wa-room-type-card input,.wa-room-type-card select{width:100%}
.wa-room-type-card__remove[hidden]{display:none!important}
/* Room-option accordion controls. Astra styles every button globally, so these
two controls need a complete state reset rather than a partial override. */
body.wa.wa-wizard-view .wa-room-type-card__toggle,
body.wa.wa-wizard-view .wa-room-type-card__toggle:hover,
body.wa.wa-wizard-view .wa-room-type-card__toggle:focus,
body.wa.wa-wizard-view .wa-room-type-card__toggle:active {
box-sizing:border-box!important;
min-height:0!important;
margin:0!important;
padding:16px 18px!important;
border:0!important;
border-radius:0!important;
background:transparent!important;
color:#173421!important;
box-shadow:none!important;
outline:0!important;
transform:none!important;
appearance:none!important;
}
body.wa.wa-wizard-view .wa-room-type-card__toggle:focus-visible {
box-shadow:inset 0 0 0 2px var(--wz-accent)!important;
}
body.wa.wa-wizard-view .wa-room-type-card__toggle>span {
position:relative;
display:block;
flex:0 0 18px;
width:18px;
height:18px;
margin:0 0 0 12px;
overflow:hidden;
color:transparent;
font-size:0;
line-height:0;
transform:none!important;
}
body.wa.wa-wizard-view .wa-room-type-card__toggle>span::before {
content:"";
position:absolute;
top:4px;
left:5px;
width:7px;
height:7px;
border-right:2px solid #557064;
border-bottom:2px solid #557064;
transform:rotate(45deg);
transition:transform .18s,top .18s;
}
body.wa.wa-wizard-view .wa-room-type-card.is-open .wa-room-type-card__toggle>span::before {
top:7px;
transform:rotate(225deg);
}
body.wa.wa-wizard-view .wa-room-type-card__remove,
body.wa.wa-wizard-view .wa-room-type-card__remove:hover,
body.wa.wa-wizard-view .wa-room-type-card__remove:focus,
body.wa.wa-wizard-view .wa-room-type-card__remove:active {
position:relative;
display:block!important;
box-sizing:border-box!important;
flex:0 0 30px!important;
width:30px!important;
min-width:30px!important;
max-width:30px!important;
height:30px!important;
min-height:30px!important;
max-height:30px!important;
margin:0 12px 0 0!important;
padding:0!important;
overflow:hidden!important;
border:0!important;
border-radius:0!important;
background:transparent!important;
color:#7c4b43!important;
box-shadow:none!important;
font-size:0!important;
line-height:0!important;
outline:0!important;
transform:none!important;
appearance:none!important;
}
body.wa.wa-wizard-view .wa-room-type-card__remove[hidden]{display:none!important}
body.wa.wa-wizard-view .wa-room-type-card__remove::before,
body.wa.wa-wizard-view .wa-room-type-card__remove::after {
content:"";
position:absolute;
top:50%;
left:50%;
width:14px;
height:2px;
border-radius:2px;
background:currentColor;
}
body.wa.wa-wizard-view .wa-room-type-card__remove::before{transform:translate(-50%,-50%) rotate(45deg)}
body.wa.wa-wizard-view .wa-room-type-card__remove::after{transform:translate(-50%,-50%) rotate(-45deg)}
body.wa.wa-wizard-view .wa-room-type-card__remove:hover{color:#a53a3a!important}
body.wa.wa-wizard-view .wa-room-type-card__remove:focus-visible{box-shadow:0 0 0 2px rgba(165,58,58,.22)!important}
/* Contextual help: quiet by default, keyboard/touch accessible when needed. */
.wa-field-help{position:relative;display:inline-flex;align-items:center;margin-left:6px;vertical-align:middle}
.wa-field-help>button,.wa-field-help>button:hover,.wa-field-help>button:focus{display:inline-grid;place-items:center;width:18px;height:18px;padding:0;border:1px solid #9baba2;border-radius:50%;background:transparent;color:#607168;font:800 11px/1 inherit;box-shadow:none;cursor:help}
.wa-field-help>button:focus-visible{outline:2px solid var(--wz-accent);outline-offset:2px}
.wa-field-help>[role="tooltip"]{position:absolute;z-index:9999;left:50%;bottom:calc(100% + 9px);width:max-content;max-width:min(280px,calc(100vw - 32px));padding:9px 11px;border-radius:9px;background:#173421;color:#fff;font-size:12px;font-weight:500;line-height:1.45;white-space:normal;box-shadow:0 10px 28px rgba(12,35,22,.2);opacity:0;visibility:hidden;transform:translate(-50%,4px);transition:opacity .14s,transform .14s,visibility .14s;pointer-events:none}
.wa-field-help:hover>[role="tooltip"],.wa-field-help:focus-within>[role="tooltip"],.wa-field-help.is-open>[role="tooltip"]{opacity:1;visibility:visible;transform:translate(-50%,0)}
.wa-field-help.is-align-left>[role="tooltip"]{left:0;transform:translate(0,4px)}
.wa-field-help.is-align-left:hover>[role="tooltip"],.wa-field-help.is-align-left:focus-within>[role="tooltip"],.wa-field-help.is-align-left.is-open>[role="tooltip"]{transform:translate(0,0)}
.wa-field-help.is-align-right>[role="tooltip"]{right:0;left:auto;transform:translate(0,4px)}
.wa-field-help.is-align-right:hover>[role="tooltip"],.wa-field-help.is-align-right:focus-within>[role="tooltip"],.wa-field-help.is-align-right.is-open>[role="tooltip"]{transform:translate(0,0)}
.wa-field-help.is-below>[role="tooltip"]{top:calc(100% + 9px);bottom:auto}
.wa-room-type-card label>span{display:flex;align-items:center;flex-wrap:wrap}
/* One optional representative image per accommodation option. */
.wa-room-type-photo{grid-column:1/-1;display:grid;grid-template-columns:minmax(150px,220px) 1fr;gap:8px 14px;align-items:center;padding-top:4px}
.wa-room-type-photo__label{grid-column:1/-1;display:flex;align-items:center;flex-wrap:wrap;color:#294336;font-size:13px;font-weight:750}
.wa-room-type-photo__preview{position:relative;width:100%;height:120px;overflow:hidden;border-radius:12px;background:#edf2ef}
.wa-room-type-photo__preview[hidden]{display:none}
.wa-room-type-photo__preview img{display:block;width:100%;height:100%;object-fit:cover}
.wa-room-type-photo__preview [data-remove-rt-photo],.wa-room-type-photo__preview [data-remove-rt-photo]:hover,.wa-room-type-photo__preview [data-remove-rt-photo]:focus,.wa-room-type-photo__preview [data-remove-rt-photo]:active{position:absolute;top:8px;right:8px;display:grid;width:28px;min-width:28px;height:28px;min-height:28px;margin:0;padding:0;place-items:center;border:0;border-radius:0;background:rgba(18,35,26,.84);color:#fff;font:500 22px/1 sans-serif;box-shadow:none;transform:none;appearance:none}
.wa-room-type-photo__choose{justify-self:start}
.wa-room-type-photo small{color:#718078;font-size:12px;line-height:1.45}
@media(max-width:600px){.wa-room-type-photo{grid-template-columns:1fr}.wa-room-type-photo__preview{height:165px}}
/* ───────────────────────────────────────────────────────────────────────────
Descuentos por tamaño de grupo — bloque opcional del paso de precio
(Marc, 2026-09-14)
Todo sale de los tokens --wz-* del wizard: mismos bordes de 1.5px, mismo
radio de 12px, mismo halo de foco (--wz-accent-soft). No hay ni un color
suelto, así que el modo oscuro del wizard lo arrastra sin reglas aparte.
─────────────────────────────────────────────────────────────────────────── */
.wa-gp-fold {
margin-top: 28px;
border: 1.5px solid var(--wz-line);
border-radius: 14px;
background: var(--wz-surface-alt);
overflow: hidden;
transition: border-color .18s, background .18s;
}
.wa-gp-fold[open] { background: var(--wz-surface); border-color: var(--wz-line); }
.wa-wizard-view .wa-gp-fold:hover { border-color: var(--wz-accent); }
.wa-gp-fold > summary {
display: flex;
align-items: center;
gap: 10px;
padding: 15px 18px;
cursor: pointer;
list-style: none;
user-select: none;
}
.wa-gp-fold > summary::-webkit-details-marker { display: none; }
.wa-gp-fold > summary:focus-visible {
outline: none;
box-shadow: inset 0 0 0 3px var(--wz-accent-soft);
}
/* Chevron propio: el triángulo nativo no se alinea igual entre navegadores. */
.wa-gp-fold > summary::after {
content: "";
width: 8px; height: 8px;
margin-left: auto;
border-right: 2px solid var(--wz-muted);
border-bottom: 2px solid var(--wz-muted);
transform: translateY(-2px) rotate(45deg);
transition: transform .2s ease;
flex-shrink: 0;
}
.wa-gp-fold[open] > summary::after { transform: translateY(2px) rotate(225deg); }
.wa-gp-fold-title { font-size: 15px; font-weight: 800; color: var(--wz-ink); }
.wa-gp-fold-opt {
padding: 3px 9px;
border-radius: 999px;
background: var(--wz-accent-soft);
color: var(--wz-accent);
font-size: 10px;
font-weight: 800;
letter-spacing: .7px;
text-transform: uppercase;
}
.wa-gp-fold > .wa-wizard-hint { margin: 0 18px 18px; }
.wa-gp { padding: 0 18px 18px; }
.wa-gp-head,
.wa-gp-row {
display: grid;
grid-template-columns: 96px minmax(0, 1fr) 104px 38px;
align-items: center;
gap: 12px;
}
.wa-gp-head {
padding-bottom: 9px;
border-bottom: 1.5px solid var(--wz-line);
font-size: 10.5px;
font-weight: 800;
letter-spacing: .7px;
text-transform: uppercase;
color: var(--wz-muted);
}
.wa-gp-head-saving { text-align: right; }
.wa-gp-row { padding: 11px 0; }
.wa-gp-row + .wa-gp-row { border-top: 1px solid var(--wz-line); }
/* Mismos valores que los inputs del wizard (:424), en versión compacta: la
fila lleva cuatro columnas y los 14/16px de relleno no caben. */
.wa-gp-row input[type="number"] {
width: 100%;
box-sizing: border-box;
margin: 0 !important;
padding: 11px 13px !important;
border: 1.5px solid var(--wz-line) !important;
border-radius: 12px !important;
background: var(--wz-surface) !important;
color: var(--wz-ink) !important;
font-family: inherit !important;
font-size: 14.5px !important;
transition: border-color .18s, box-shadow .18s;
}
.wa-gp-row input[type="number"]:focus {
outline: none !important;
border-color: var(--wz-accent) !important;
box-shadow: 0 0 0 4px var(--wz-accent-soft) !important;
}
/* El ahorro es el dato que da sentido al bloque: píldora, como en la ficha. */
.wa-gp-saving {
justify-self: end;
padding: 4px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 800;
font-variant-numeric: tabular-nums;
color: var(--wz-muted);
white-space: nowrap;
}
.wa-gp-saving.is-save { background: var(--wz-accent-soft); color: var(--wz-accent); }
/* Un "descuento" más caro que el precio por persona casi siempre es un
despiste al teclear. Se marca, no se bloquea: puede ser intencionado. */
.wa-gp-saving.is-warn { background: rgba(208,69,58,.10); color: #d0453a; }
.wa-gp-del {
display: grid; place-items: center;
width: 34px !important; height: 34px !important;
padding: 0 !important; margin: 0 !important;
border: 1.5px solid var(--wz-line) !important;
border-radius: 11px !important;
background: var(--wz-surface) !important;
color: var(--wz-muted) !important;
cursor: pointer;
transition: border-color .18s, color .18s, background .18s;
}
.wa-wizard-view .wa-gp-del:hover {
border-color: #d0453a !important;
background: rgba(208,69,58,.06) !important;
color: #d0453a !important;
}
.wa-gp-add {
display: inline-flex;
align-items: center;
margin-top: 16px !important;
padding: 11px 17px !important;
border: 1.5px dashed var(--wz-line) !important;
border-radius: 12px !important;
background: transparent !important;
color: var(--wz-ink) !important;
font-family: inherit !important;
font-size: 13.5px !important;
font-weight: 700 !important;
cursor: pointer;
transition: border-color .18s, color .18s, background .18s;
}
.wa-wizard-view .wa-gp-add:hover:not(:disabled) {
border-color: var(--wz-accent) !important;
background: var(--wz-accent-soft) !important;
color: var(--wz-accent) !important;
}
.wa-gp-add:disabled { opacity: .45; cursor: default; }
.wa-gp-cap,
.wa-gp-empty { margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--wz-muted); }
@media (max-width: 600px) {
.wa-gp-fold > summary { padding: 14px; }
.wa-gp-fold > .wa-wizard-hint { margin: 0 14px 14px; }
.wa-gp { padding: 0 14px 14px; }
/* El rótulo de columna desaparece: a este ancho el ahorro se lee solo. */
.wa-gp-head { display: none; }
.wa-gp-row { grid-template-columns: 74px minmax(0, 1fr) auto 34px; gap: 8px; }
.wa-gp-row input[type="number"] { padding: 10px !important; font-size: 14px !important; }
.wa-gp-saving { padding: 3px 8px; font-size: 11px; }
}
/* Campo que impide guardar (Marc, 2026-09-14).
El aviso genérico dejaba al dueño buscando cuál de diez campos del acordeón
estaba vacío. El borde rojo lo señala y el wizard lleva el scroll hasta él.
.wa-field-invalid ya existía para los inputs (:475); aquí se añade el marco
del contenedor, porque un select o un grupo de casillas no siempre enseña
borde propio. */
.wa-field-invalid-box { position: relative; }
/* El marco se dibuja con un ::after separado del contenido, no con box-shadow
sobre la propia caja: así hay aire alrededor sin añadir padding, que al
ponerse y quitarse la clase movería el campo de sitio justo cuando el dueño
está mirando dónde tiene el error. */
.wa-field-invalid-box::after {
content: "";
position: absolute;
inset: -7px -8px;
border: 2px solid #d0453a;
border-radius: 14px;
box-shadow: 0 0 0 4px rgba(208,69,58,.10);
pointer-events: none;
}
.wa-field-invalid-box > label,
.wa-field-invalid-box > .wa-wizard-subq { color: #d0453a !important; }