/* ==========================================================================
WORKBOOK -- AGENDADOR PÚBLICO (Booking Experience)
Fase "Rediseño Mayor del Agendador Público" -- 2.5.46
Esta hoja es una capa de rediseño visual PURA sobre el Agendador público
existente (public.css/workbook-premium.css, cargados antes que esta hoja
-- ver dependencias en workbook.php). CERO cambios de markup fueron
necesarios más allá del de esta hoja: cada selector aquí apunta a
clases/IDs/estructura YA EXISTENTES en class-anik-public.php, todas
documentadas como contrato congelado antes de escribir una sola línea.
CERO cambios en public.js -- todos los selectores que ese archivo usa
(getForm/.anik-booking-form, .anik-service-card, .anik-staff-chip,
.anik-slot-btn[data-time], .anik-selected-time, .anik-step-staff/
.anik-step-customer + .anik-locked-step, .anik-auto-staff-card,
.anik-staff-photo-filter, .anik-staff-dropdown-panel,
.anik-hidden-select-label, #anik-extra-services, .anik-rut-input/
.anik-rut-field, .anik-home-service y sus hijos, .anik-phone-row,
#anik_coupon_*, .anik-booking-recap, .anik-payment-public-note,
.anik-submit, .anik-category-chips/.anik-service-category-filter,
.anik-service-filter-input, .anik-filter-empty) siguen existiendo
exactamente igual, con el mismo comportamiento -- solo cambia su
apariencia.
Namespace de tokens: --wbp-* (Workbook Public), scoped a .anik-booking.
Los tokens --wbs-* del Portal interno están scoped a .anik-portal y NO
están disponibles aquí (verificado antes de diseñar) -- se replica la
MISMA escala numérica bajo un namespace propio para el Agendador
(sección 41 del mandato: "usar la escala actual O crear tokens públicos
equivalentes SOLO si el Agendador no carga shell tokens").
PRECEDENCIA: envuelta en @layer (anik-booking-redesign). public.css y
workbook-premium.css usan cientos de reglas con selectores muy
específicos y !important (ej. ".anik-booking.anik-theme-workbook_saas
.anik-step-details>summary.anik-step-title" con especificidad (0,4,3))
que ninguna cadena razonable de selectores nuevos podía vencer de forma
confiable ni sistemática -- confirmado empíricamente durante esta
implementación. Una capa de cascada declarada (algo que esos archivos NO
usan) gana SIEMPRE sobre reglas !important sin capa, sin importar su
especificidad (spec CSS Cascade Layers: unlayered !important tiene la
prioridad más baja entre reglas !important) -- por eso los selectores de
abajo pueden mantenerse simples y legibles en vez de necesitar hacks de
especificidad (prefijos html/body, clases duplicadas) en cada regla.
========================================================================== */
@layer anik-booking-redesign {
/* Hallazgo real de QA (bug preexistente, reproducido también en la base sin
ningún cambio de esta ronda): public.css define DOS reglas para
cuando .anik-booking está presente -- una que pone padding:0 (línea 196,
pensada para que el plugin controle su propio layout) y otra, en otra
parte del mismo archivo, que le gana la guerra de especificidad
aplicando padding:26px -- el resultado real es ~37px de overflow
horizontal a 1366px. Se corrige aquí (capa gana sobre !important sin
capa, sin importar la especificidad real de cualquiera de las dos
reglas legacy en conflicto) en vez de intentar diagnosticar cuál de las
docenas de reglas existentes es la responsable exacta. */
body:has(.anik-booking.anik-theme-workbook_saas) main{
max-width:none !important; margin:0 !important; padding:0 !important;
}
.anik-booking.anik-theme-workbook_saas{
--wbp-bg:#F7F7F8;
--wbp-surface:#FFFFFF;
--wbp-surface-subtle:#F4F5F7;
--wbp-border:#E5E7EB;
--wbp-border-strong:#D6D9DE;
--wbp-text:#15171C;
--wbp-text-secondary:#4B5160;
--wbp-text-muted:#8A8F99;
--wbp-brand:var(--anik-primary,#15171C);
--wbp-brand-ink:#FFFFFF;
--wbp-accent:var(--anik-accent,#C9A84C);
--wbp-success:#1A7C3C; --wbp-success-bg:#EAF7EE; --wbp-success-border:#BFE6CB;
--wbp-warning:#B45309; --wbp-warning-bg:#FEF3C7; --wbp-warning-border:#FCE4A6;
--wbp-danger:#C0342B; --wbp-danger-bg:#FDECEC; --wbp-danger-border:#F6C6C2;
--wbp-info:#0A6BB5; --wbp-info-bg:#E9F3FC;
--wbp-text-xs:12px; --wbp-text-sm:13px; --wbp-text-base:14px; --wbp-text-md:15px;
--wbp-text-lg:17px; --wbp-text-xl:20px; --wbp-text-2xl:24px; --wbp-text-3xl:30px;
--wbp-weight-regular:450; --wbp-weight-medium:560; --wbp-weight-semibold:650; --wbp-weight-bold:750;
--wbp-space-1:4px; --wbp-space-2:8px; --wbp-space-3:12px; --wbp-space-4:16px;
--wbp-space-5:20px; --wbp-space-6:24px; --wbp-space-7:32px; --wbp-space-8:40px;
--wbp-radius-sm:8px; --wbp-radius-md:12px; --wbp-radius-lg:16px; --wbp-radius-xl:22px; --wbp-radius-pill:999px;
--wbp-shadow-xs:0 1px 2px rgba(16,24,40,.05);
--wbp-shadow-sm:0 1px 3px rgba(16,24,40,.08),0 1px 2px rgba(16,24,40,.04);
--wbp-shadow-md:0 8px 24px rgba(16,24,40,.10);
--wbp-shadow-lg:0 20px 48px rgba(16,24,40,.14);
--wbp-control-h:46px;
--wbp-duration:160ms; --wbp-ease:cubic-bezier(.2,.7,.3,1);
}
/* --------------------------------------------------------------------------
1. BASE / CONTENEDOR -- fondo claro, ancho controlado y centrado (sección
12 del mandato: "no contenido pegado a los bordes, no formulario de
1400px"). max-width calibrado para que la grilla de 3 servicios y los
chips de horario respiren sin que la página entera se sienta como un
dashboard ancho -- referencia de productos de booking maduros.
-------------------------------------------------------------------------- */
body:has(.anik-booking.anik-theme-workbook_saas){ background:var(--wbp-bg,#F7F7F8) !important; }
.anik-booking.anik-theme-workbook_saas{
background:transparent !important; box-shadow:none !important; border:0 !important;
max-width:960px !important; width:calc(100% - 32px) !important; margin:var(--wbp-space-6) auto !important;
padding:0 !important; color:var(--wbp-text) !important;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif !important;
-webkit-font-smoothing:antialiased !important;
}
.anik-booking.anik-theme-workbook_saas *{ box-sizing:border-box !important; }
.anik-booking.anik-theme-workbook_saas h1,
.anik-booking.anik-theme-workbook_saas h2,
.anik-booking.anik-theme-workbook_saas h3,
.anik-booking.anik-theme-workbook_saas strong,
.anik-booking.anik-theme-workbook_saas b{ color:var(--wbp-text) !important; font-weight:var(--wbp-weight-semibold) !important; }
.anik-booking.anik-theme-workbook_saas p,
.anik-booking.anik-theme-workbook_saas span,
.anik-booking.anik-theme-workbook_saas small,
.anik-booking.anik-theme-workbook_saas label{ color:var(--wbp-text-secondary) !important; }
/* Salvaguarda general: varios elementos de texto sueltos (
/ sin
clase propia -- avisos de ayuda, estados vacíos) heredaban fondos
sólidos oscuros de la era dark-mode del archivo legacy. Selector de
elemento puro = especificidad más baja de esta hoja, así que cualquier
regla con clase (mensajes con superficie propia real, como
.anik-error-card o .anik-confirm-details) sigue ganando sin problema. */
.anik-booking.anik-theme-workbook_saas p,
.anik-booking.anik-theme-workbook_saas span{ background:transparent !important; box-shadow:none !important; }
/* Sistema de botones general (sección 43 del mandato: jerarquía coherente
PRIMARY/SECONDARY/GHOST) -- hallazgo real de QA: varios botones ghost
(Aplicar cupón, verificar dirección, ver reseñas en Google) heredaban el
color de acento de marca del negocio (--anik-accent, configurable por
negocio) como fondo sólido vía una regla legacy, rompiendo la paleta
monocromática del resto del formulario en negocios con un acento muy
saturado. Se fuerza un tratamiento ghost consistente por defecto; el
acento de marca se sigue usando (badges, estrellas) pero no en botones
secundarios genéricos. .anik-submit (la ÚNICA acción primaria real,
sección 33) conserva su propio negro sólido, definido más abajo. */
.anik-booking.anik-theme-workbook_saas .anik-btn.ghost,
.anik-booking.anik-theme-workbook_saas .anik-btn.ghost.mini{
background:var(--wbp-surface) !important; background-image:none !important; color:var(--wbp-text) !important;
border:1px solid var(--wbp-border-strong) !important; box-shadow:none !important; border-radius:var(--wbp-radius-md) !important;
font-weight:var(--wbp-weight-semibold) !important; height:auto !important; min-height:40px !important; padding:0 var(--wbp-space-4) !important;
}
.anik-booking.anik-theme-workbook_saas .anik-btn.ghost:hover{ background:var(--wbp-surface-subtle) !important; }
/* --------------------------------------------------------------------------
2. HERO -- compacto, sin dominar la pantalla (sección 13/14 del mandato).
La portada (--anik-cover), si existe, se muestra como franja discreta
detrás del bloque de identidad, nunca como fondo dramático a pantalla
completa que obligue a hacer scroll antes de reservar.
-------------------------------------------------------------------------- */
.anik-booking.anik-theme-workbook_saas .anik-booking-hero{
min-height:0 !important; border-radius:var(--wbp-radius-xl) !important;
padding:var(--wbp-space-6) var(--wbp-space-6) !important;
background:var(--wbp-surface) !important; background-image:none !important;
border:1px solid var(--wbp-border) !important; box-shadow:var(--wbp-shadow-sm) !important;
display:flex !important; align-items:center !important; overflow:hidden !important; position:relative !important;
}
/* Candidate 28: la capa blanca anterior (.94/.97) tapaba casi por completo la
portada -- se redujo para que la foto se aprecie, conservando el fundido
hacia var(--wbp-surface) al final para no cortar en seco contra el resto
de la tarjeta. El texto (h1/kicker/descripción, más abajo) suma un halo
claro propio SOLO cuando hay portada, como reserva de contraste adicional
frente a fotos oscuras, sin depender solo de esta capa. */
.anik-booking.anik-theme-workbook_saas.anik-has-cover .anik-booking-hero{
background-image:linear-gradient(180deg,rgba(255,255,255,.58),rgba(255,255,255,.72) 55%,var(--wbp-surface)),var(--anik-cover) !important;
background-size:cover !important; background-position:inherit !important; background-repeat:no-repeat !important;
}
.anik-booking.anik-theme-workbook_saas.anik-has-cover .anik-booking-hero:after{ content:none !important; }
.anik-booking.anik-theme-workbook_saas .anik-booking-hero > div{ position:relative !important; z-index:2 !important; width:100% !important; }
.anik-booking.anik-theme-workbook_saas.anik-has-cover .anik-booking-hero h1,
.anik-booking.anik-theme-workbook_saas.anik-has-cover .anik-booking-hero .anik-kicker,
.anik-booking.anik-theme-workbook_saas.anik-has-cover .anik-booking-hero > div > p:not(.anik-kicker){
text-shadow:0 1px 14px rgba(255,255,255,.85),0 1px 2px rgba(255,255,255,.85) !important;
}
.anik-booking.anik-theme-workbook_saas .anik-logo{
max-height:44px !important; max-width:160px !important; width:auto !important; height:auto !important;
object-fit:contain !important; border-radius:var(--wbp-radius-sm) !important; margin-bottom:var(--wbp-space-3) !important;
box-shadow:none !important; border:0 !important;
}
.anik-booking.anik-theme-workbook_saas .anik-kicker{
display:inline-flex !important; align-items:center !important; background:var(--wbp-surface-subtle) !important;
border:1px solid var(--wbp-border) !important; color:var(--wbp-text-secondary) !important;
font-size:var(--wbp-text-xs) !important; font-weight:var(--wbp-weight-semibold) !important;
text-transform:uppercase !important; letter-spacing:.05em !important;
padding:5px 12px !important; border-radius:var(--wbp-radius-pill) !important; margin:0 0 var(--wbp-space-3) !important;
}
.anik-booking.anik-theme-workbook_saas .anik-booking-hero h1{
font-size:clamp(24px,3vw,var(--wbp-text-3xl)) !important; font-weight:var(--wbp-weight-bold) !important;
line-height:1.15 !important; margin:0 0 6px !important; letter-spacing:-.01em !important;
color:var(--wbp-text) !important; max-width:none !important; text-shadow:none !important;
}
/* Hallazgo real de QA (bug preexistente, reproducido también en la base sin
ningún cambio de esta ronda): public.css define -webkit-line-clamp:3 para
la descripción del hero DENTRO de sus propios @media(max-width:640px) y
otro breakpoint móvil similar -- como esas reglas legacy nunca compiten
con las mías por display/overflow/line-clamp (mi regla original solo
tocaba font-size/color/margin/line-height/max-width), el truncado con
"..." seguía ganando en mobile aunque la regla base (sin media query) ya
mostrara el texto completo en desktop. Se neutraliza aquí explícitamente
-- una sola regla (sin @media) alcanza porque la precedencia de @layer es
global, independiente del @media en que viva cada regla. */
.anik-booking.anik-theme-workbook_saas .anik-booking-hero > div > p:not(.anik-kicker){
font-size:var(--wbp-text-md) !important; color:var(--wbp-text-secondary) !important; margin:0 0 var(--wbp-space-4) !important; line-height:1.5 !important;
max-width:56ch !important;
display:block !important; -webkit-line-clamp:unset !important; -webkit-box-orient:unset !important;
overflow:visible !important; white-space:normal !important; text-overflow:clip !important;
}
/* Sección "Pulido hero": la dirección es información util para decidir una
reserva (se mantiene como texto real + pin, nunca solo un icono sin
texto). WhatsApp/Instagram/sitio web pasan de pills de texto
administrativas a icon actions -- acciones secundarias, no CTA. */
/* Candidate 28 (punto 8): alineación consistente a la izquierda -- igual que
el resto del encabezado -- en vez de space-between, que empujaba WhatsApp/
redes/sitio al extremo derecho y rompía la alineación cuando la dirección
era corta. Sin huecos reservados: cada elemento solo existe en el markup
si el negocio lo tiene cargado (ver PHP, condicionales por campo). */
.anik-booking.anik-theme-workbook_saas .anik-public-meta{
display:flex !important; flex-wrap:wrap !important; align-items:center !important;
justify-content:flex-start !important; gap:var(--wbp-space-3) !important; margin:0 !important; max-width:100% !important;
}
.anik-booking.anik-theme-workbook_saas .anik-meta-address{
display:inline-flex !important; align-items:center !important; gap:6px !important;
background:var(--wbp-surface-subtle) !important; border:1px solid var(--wbp-border) !important;
color:var(--wbp-text-secondary) !important; font-size:var(--wbp-text-sm) !important; font-weight:var(--wbp-weight-medium) !important;
padding:6px 12px !important; border-radius:var(--wbp-radius-pill) !important; text-decoration:none !important;
max-width:100% !important; overflow-wrap:anywhere !important; word-break:break-word !important;
}
.anik-booking.anik-theme-workbook_saas .anik-meta-icon{
width:15px !important; height:15px !important; flex:0 0 auto !important; color:var(--wbp-text-muted) !important;
}
.anik-booking.anik-theme-workbook_saas .anik-meta-actions{
display:flex !important; align-items:center !important; gap:8px !important; flex:0 0 auto !important;
}
.anik-booking.anik-theme-workbook_saas .anik-meta-icon-btn{
display:inline-flex !important; align-items:center !important; justify-content:center !important;
width:40px !important; height:40px !important; flex:0 0 auto !important;
background:var(--wbp-surface-subtle) !important; border:1px solid var(--wbp-border) !important;
border-radius:var(--wbp-radius-pill) !important; color:var(--wbp-text-secondary) !important;
text-decoration:none !important; transition:background var(--wbp-duration) var(--wbp-ease), border-color var(--wbp-duration) var(--wbp-ease), color var(--wbp-duration) var(--wbp-ease) !important;
}
.anik-booking.anik-theme-workbook_saas .anik-meta-icon-btn svg{ width:18px !important; height:18px !important; }
.anik-booking.anik-theme-workbook_saas .anik-meta-icon-btn:hover{
background:var(--wbp-surface) !important; border-color:var(--wbp-border-strong) !important; color:var(--wbp-text) !important;
}
.anik-booking.anik-theme-workbook_saas .anik-meta-icon-btn:focus-visible{
outline:2px solid var(--wbp-text) !important; outline-offset:2px !important;
}
/* --------------------------------------------------------------------------
3. PROGRESO -- hallazgo real de la auditoría: el indicador de 4 pasos era
prácticamente invisible (texto oscuro sobre fondo oscuro, casi sin
contraste). Rediseñado como stepper real, alto contraste, con línea
conectora y estado "actual" -- responde con claridad a "¿dónde estoy?".
-------------------------------------------------------------------------- */
.anik-booking.anik-theme-workbook_saas .anik-booking-progress{
display:flex !important; align-items:center !important; justify-content:space-between !important;
background:transparent !important; border:0 !important; padding:var(--wbp-space-5) var(--wbp-space-2) !important;
margin:0 !important; gap:4px !important; opacity:1 !important;
}
.anik-booking.anik-theme-workbook_saas .anik-booking-progress span{
display:flex !important; align-items:center !important; gap:8px !important;
font-size:var(--wbp-text-sm) !important; font-weight:var(--wbp-weight-medium) !important; color:var(--wbp-text-muted) !important;
white-space:nowrap !important; flex:0 0 auto !important;
}
.anik-booking.anik-theme-workbook_saas .anik-booking-progress span b{
display:inline-flex !important; align-items:center !important; justify-content:center !important;
width:24px !important; height:24px !important; border-radius:999px !important;
background:var(--wbp-surface-subtle) !important; border:1px solid var(--wbp-border-strong) !important;
color:var(--wbp-text-secondary) !important; font-size:11px !important; font-weight:var(--wbp-weight-bold) !important; flex:0 0 auto !important;
}
.anik-booking.anik-theme-workbook_saas .anik-booking-progress i{
flex:1 1 auto !important; height:1px !important; background:var(--wbp-border-strong) !important; margin:0 4px !important; min-width:12px !important;
font-style:normal !important;
}
/* --------------------------------------------------------------------------
4. RESULTADO -- éxito / error (sección 38-40 del mandato: confirmación
clara, tranquilizadora, profesional; sin confetti ni animaciones
teatrales).
-------------------------------------------------------------------------- */
.anik-booking.anik-theme-workbook_saas .anik-success-card{
background:var(--wbp-surface) !important; border:1px solid var(--wbp-success-border) !important;
border-radius:var(--wbp-radius-xl) !important; box-shadow:var(--wbp-shadow-md) !important;
padding:var(--wbp-space-7) var(--wbp-space-6) !important; text-align:center !important; margin:0 0 var(--wbp-space-5) !important;
overflow:hidden !important; position:relative !important;
}
/* Sin confetti ni animaciones teatrales (sección 39 del mandato) --
neutraliza cualquier blob/gradiente decorativo heredado (:before/:after)
de la era anterior en success/error/step/empty. */
.anik-booking.anik-theme-workbook_saas .anik-success-card:before,
.anik-booking.anik-theme-workbook_saas .anik-success-card:after,
.anik-booking.anik-theme-workbook_saas .anik-error-card:before,
.anik-booking.anik-theme-workbook_saas .anik-error-card:after,
.anik-booking.anik-theme-workbook_saas .anik-step:before,
.anik-booking.anik-theme-workbook_saas .anik-step:after,
.anik-booking.anik-theme-workbook_saas .anik-empty:before,
.anik-booking.anik-theme-workbook_saas .anik-empty:after{ content:none !important; display:none !important; }
.anik-booking.anik-theme-workbook_saas .anik-confirm-icon{
display:inline-flex !important; align-items:center !important; justify-content:center !important;
width:56px !important; height:56px !important; border-radius:999px !important;
background:var(--wbp-success-bg) !important; color:var(--wbp-success) !important;
font-size:26px !important; margin:0 0 var(--wbp-space-4) !important;
}
.anik-booking.anik-theme-workbook_saas .anik-success-card h2{ font-size:var(--wbp-text-xl) !important; margin:0 0 8px !important; }
.anik-booking.anik-theme-workbook_saas .anik-success-card > p{ font-size:var(--wbp-text-md) !important; max-width:48ch !important; margin:0 auto var(--wbp-space-5) !important; }
.anik-booking.anik-theme-workbook_saas .anik-confirm-details{
display:grid !important; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)) !important; gap:var(--wbp-space-3) !important;
text-align:left !important; background:var(--wbp-surface-subtle) !important; border:1px solid var(--wbp-border) !important;
border-radius:var(--wbp-radius-lg) !important; padding:var(--wbp-space-4) var(--wbp-space-5) !important; margin:0 0 var(--wbp-space-5) !important;
}
.anik-booking.anik-theme-workbook_saas .anik-confirm-details span{
display:flex !important; flex-direction:column !important; gap:2px !important; font-size:var(--wbp-text-sm) !important; color:var(--wbp-text) !important;
}
.anik-booking.anik-theme-workbook_saas .anik-confirm-details span b{
font-size:var(--wbp-text-xs) !important; text-transform:uppercase !important; letter-spacing:.04em !important; color:var(--wbp-text-muted) !important; font-weight:var(--wbp-weight-semibold) !important;
}
.anik-booking.anik-theme-workbook_saas .anik-error-card{
background:var(--wbp-danger-bg) !important; border:1px solid var(--wbp-danger-border) !important; color:var(--wbp-danger) !important;
border-radius:var(--wbp-radius-lg) !important; padding:var(--wbp-space-4) var(--wbp-space-5) !important; margin:0 0 var(--wbp-space-5) !important;
font-size:var(--wbp-text-sm) !important; box-shadow:none !important;
}
.anik-booking.anik-theme-workbook_saas .anik-error-card strong{ color:var(--wbp-danger) !important; }
.anik-booking.anik-theme-workbook_saas .anik-empty{
background:var(--wbp-surface) !important; border:1px solid var(--wbp-border) !important; color:var(--wbp-text-secondary) !important;
border-radius:var(--wbp-radius-lg) !important; padding:var(--wbp-space-6) !important; text-align:center !important;
}
/* --------------------------------------------------------------------------
5. PASOS () -- cada paso es una superficie
real, clara y con jerarquía obvia. Estado bloqueado se lee por peso
visual (opacidad + no-cursor), nunca se oculta el paso siguiente por
completo (el usuario sabe que existe).
-------------------------------------------------------------------------- */
.anik-booking.anik-theme-workbook_saas .anik-step{
background:var(--wbp-surface) !important; border:1px solid var(--wbp-border) !important; color:var(--wbp-text) !important;
border-radius:var(--wbp-radius-xl) !important; box-shadow:var(--wbp-shadow-xs) !important;
padding:0 !important; margin:0 0 var(--wbp-space-4) !important; overflow:hidden !important;
}
.anik-booking.anik-theme-workbook_saas .anik-step-title{
list-style:none !important; cursor:pointer !important; display:flex !important; align-items:center !important; gap:var(--wbp-space-3) !important;
padding:var(--wbp-space-4) var(--wbp-space-5) !important; margin:0 !important; background:transparent !important; color:var(--wbp-text) !important;
border-bottom:0 !important;
}
.anik-booking.anik-theme-workbook_saas .anik-step[open] > .anik-step-title{ border-bottom:1px solid var(--wbp-border) !important; }
.anik-booking.anik-theme-workbook_saas .anik-step-title::-webkit-details-marker{ display:none !important; }
.anik-booking.anik-theme-workbook_saas .anik-step-title span{
display:flex !important; align-items:center !important; justify-content:center !important; flex:0 0 auto !important;
width:30px !important; height:30px !important; border-radius:999px !important;
background:var(--wbp-text) !important; color:#fff !important; font-size:var(--wbp-text-sm) !important; font-weight:var(--wbp-weight-bold) !important;
}
.anik-booking.anik-theme-workbook_saas .anik-step-title h2{
font-size:var(--wbp-text-lg) !important; font-weight:var(--wbp-weight-semibold) !important; margin:0 !important; flex:1 1 auto !important;
}
.anik-booking.anik-theme-workbook_saas .anik-step.anik-locked-step{ opacity:.55 !important; }
.anik-booking.anik-theme-workbook_saas .anik-step.anik-locked-step .anik-step-title{ cursor:default !important; }
.anik-booking.anik-theme-workbook_saas .anik-step.anik-locked-step .anik-step-title span{ background:var(--wbp-border-strong) !important; color:var(--wbp-text-muted) !important; }
.anik-booking.anik-theme-workbook_saas .anik-step > *:not(.anik-step-title){ padding-left:var(--wbp-space-5) !important; padding-right:var(--wbp-space-5) !important; }
.anik-booking.anik-theme-workbook_saas .anik-step > *:last-child{ padding-bottom:var(--wbp-space-5) !important; }
.anik-booking.anik-theme-workbook_saas .anik-step > *:not(.anik-step-title):first-of-type{ margin-top:var(--wbp-space-4) !important; }
/* --------------------------------------------------------------------------
6. SERVICIO -- toolbar (buscar + categoría) y grilla de tarjetas. El
dropdown de categoría (.anik-service-category-filter) queda
accesible pero visualmente oculto (sr-only real, no display:none) --
los chips (.anik-category-chips) son la única UI de filtro visible
(hallazgo real de la auditoría: mostrar dropdown+chips simultáneos
para la misma acción es un control duplicado y confuso). El