/* r532 (bug REAL hallado en la revisión EN VIVO — el standalone lo enmascaraba por tener su propio *{box-sizing}): el storefront NO tenía box-sizing:border-box global → todo elemento con width:100% + padding (p.ej. el contenedor VOLTIO con padding 28) desbordaba el viewport por el ancho del padding (hero 411px en 390 → overflow). Border-box scopeado al storefront (data-surface) arregla TODOS esos overflows de una vez y NO toca los paneles. */ [data-surface=storefront] *,[data-surface=storefront] *::before,[data-surface=storefront] *::after{box-sizing:border-box} body{font-family:var(--token-font-body,system-ui,sans-serif);color:var(--token-neutral-900,#0b1220);background:var(--token-background,#fff)} h1,h2,h3,h4,h5,h6{font-family:var(--bd-font,var(--token-font-heading,inherit));letter-spacing:-0.015em} /* Red de seguridad MOVIL (auditoria fase 2): imagenes y controles nunca desbordan el viewport en el storefront (paginas nativas + forms con size=/cols=). Especificidad de elemento = las clases del builder siguen ganando. */ img{max-width:100%;height:auto} input,select,textarea{max-width:100%;box-sizing:border-box} /* RICH CONTENT (r572): estilo del HTML del editor WYSIWYG saneado (descripciones de producto + cuerpo del blog). Encabezados/listas/citas/código/enlaces/imágenes/HR/TABLAS + respeta color/alineación/tamaño inline del editor. */ .rich-content{line-height:1.65;word-break:break-word} .rich-content h1{font-size:1.8em;font-weight:800;margin:.6em 0 .3em;line-height:1.2} .rich-content h2{font-size:1.45em;font-weight:700;margin:.6em 0 .3em;line-height:1.25} .rich-content h3{font-size:1.2em;font-weight:700;margin:.5em 0 .25em} .rich-content h4{font-size:1.05em;font-weight:700;margin:.5em 0 .25em} .rich-content p{margin:.5em 0} .rich-content ul{list-style:disc;margin:.5em 0;padding-left:1.6em} .rich-content ol{list-style:decimal;margin:.5em 0;padding-left:1.6em} .rich-content li{margin:.2em 0} .rich-content blockquote{margin:.6em 0;padding:.35em 1em;border-left:3px solid var(--token-neutral-200,#e4e8ee);color:var(--token-neutral-700,#374151);font-style:italic} .rich-content pre{background:var(--token-neutral-50,#f6f7f9);padding:.7em 1em;border-radius:8px;overflow-x:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em} .rich-content code{background:var(--token-neutral-50,#f6f7f9);padding:.1em .35em;border-radius:4px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em} .rich-content a{color:var(--token-primary-600,#2563eb);text-decoration:underline} .rich-content img{max-width:100%;height:auto;border-radius:8px} .rich-content hr{border:none;border-top:1px solid var(--token-neutral-200,#e4e8ee);margin:1em 0} .rich-content table{border-collapse:collapse;max-width:100%;margin:.6em 0;font-size:.95em;display:block;overflow-x:auto} .rich-content th,.rich-content td{border:1px solid var(--token-neutral-200,#d7dce4);padding:.45em .7em;text-align:left;vertical-align:top} .rich-content th{background:var(--token-neutral-50,#f6f7f9);font-weight:700} /* FileDrop en el storefront (evidencia de pedido / comprobante de pago): misma zona diseñada, con tokens del storefront. */ .dash-filedrop{margin:.15rem 0} .dash-filedrop-zone{position:relative;display:flex;flex-direction:column;align-items:center;gap:.35rem;text-align:center;padding:1.2rem 1rem;border:2px dashed var(--token-neutral-200,#e4e8ee);border-radius:12px;min-height:140px;justify-content:center;background:var(--token-neutral-50,#f6f7f9);cursor:pointer;box-sizing:border-box} .dash-filedrop.is-over .dash-filedrop-zone{border-color:var(--token-primary-600,#2563eb);background:color-mix(in srgb,var(--token-primary-600,#2563eb) 7%,#fff)} .dash-filedrop.is-disabled .dash-filedrop-zone{opacity:.6;cursor:not-allowed} .dash-filedrop-input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0);top:0;left:0} .dash-filedrop-ico{font-size:1.5rem;color:var(--token-neutral-500,#6b7280);line-height:1} .dash-filedrop-prompt{font-size:.9rem;font-weight:600;color:var(--token-neutral-900,#0b1220)} .dash-filedrop-btn{display:inline-block;font-size:.82rem;font-weight:600;padding:.35rem .8rem;border:1px solid var(--token-neutral-200,#e4e8ee);border-radius:8px;background:#fff;color:var(--token-neutral-900,#0b1220)} .dash-filedrop-limits,.dash-filedrop-count{font-size:.74rem;color:var(--token-neutral-500,#6b7280)} .dash-filedrop-chosen{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:.5rem 0 0;font-size:.85rem} .dash-filedrop-remove{border:none;background:none;color:#dc2626;font-weight:600;cursor:pointer;font-size:.82rem;padding:0} /* r497 — BOTONES. :where() = especificidad CERO ⇒ el estilo PROPIO del botón (su clase .bd-x compilada, 0,1,0) SIEMPRE gana (antes a[data-bd-btn] (0,1,1) la pisaba: el fondo editado no se aplicaba y el editor no coincidía con el front). Las properties --bd-btn-* las fija el CONTENEDOR (sección Botones) y se HEREDAN a los botones dentro; sin contenedor ni estilo propio, caen a los defaults de tema de siempre (sin cambio visual). Variante secundaria por data-bd-btn-variant=secondary (contorno). Capas: default de tema < tema del contenedor < botón. */ :where(a[data-bd-btn]){display:inline-block;background:var(--bd-btn-bg,var(--token-primary-600,#2563eb));color:var(--bd-btn-color,#fff);padding:10px 18px;border-radius:var(--bd-btn-radius,var(--token-radius-md,10px));text-decoration:none;font-weight:600;line-height:1.3} :where(a[data-bd-btn]:not([data-bd-btn-variant="secondary"]):hover){background:var(--bd-btn-bg-hover,var(--bd-btn-bg,var(--token-primary-600,#2563eb)));filter:brightness(.95)} :where(a[data-bd-btn][data-bd-btn-variant="secondary"]){background:var(--bd-btn2-bg,transparent);color:var(--bd-btn2-color,var(--token-primary-600,#2563eb));border:1px solid var(--token-primary-600,#2563eb);border-radius:var(--bd-btn2-radius,var(--token-radius-md,10px))} :where(a[data-bd-btn][data-bd-btn-variant="secondary"]:hover){background:var(--bd-btn2-bg-hover,rgba(37,99,235,0.06))} .bd-pcard{transition:box-shadow .14s ease,transform .14s ease} .bd-pcard:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(11,18,32,.04),0 8px 20px -8px rgba(11,18,32,.14)} .bd-featcard{border:1px solid var(--token-neutral-200,#e4e8ee);background:var(--token-surface,#fff);box-shadow:0 1px 2px rgba(16,24,40,.04);transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease} .bd-featcard:hover{border-color:var(--token-primary-600,#2563eb);transform:translateY(-3px);box-shadow:0 12px 28px rgba(16,24,40,.10)} .bd-featcard:hover .bd-fc-title{color:var(--token-primary-600,#2563eb)} .bd-featcard:hover [data-bd-part="icon"]{background:var(--token-primary-600,#2563eb);color:#fff} @media (prefers-reduced-motion:reduce){.bd-featcard:hover{transform:none}} /* r491: EFECTOS de badge (BadgeShowcase + VendorCard ponen data-badge-effect pero no había CSS). gold=dorado+glow. */ [data-badge-effect="gold"]{background:linear-gradient(135deg,#b8860b,#ffd700 45%,#fff6cc 60%,#e6b800)!important;color:#5b4200!important;border-color:#e0a800!important;box-shadow:0 0 10px rgba(255,215,0,.5)} [data-badge-effect="rainbow"]{background:linear-gradient(90deg,#ef4444,#f59e0b,#22c55e,#06b6d4,#6366f1,#ec4899,#ef4444)!important;background-size:200% 100%!important;color:#fff!important;animation:bd-badge-rainbow 3s linear infinite} [data-badge-effect="pulse"]{animation:bd-badge-pulse 1.6s ease-in-out infinite} @keyframes bd-badge-rainbow{to{background-position:200% 0}} @keyframes bd-badge-pulse{0%,100%{box-shadow:0 0 0 0 rgba(37,99,235,.45)}50%{box-shadow:0 0 0 5px rgba(37,99,235,0)}} @media (prefers-reduced-motion:reduce){[data-badge-effect="rainbow"],[data-badge-effect="pulse"]{animation:none}} /* r532 (a11y WCAG 2.3.3 — Animation from Interactions): guarda GLOBAL de MOVIMIENTO REDUCIDO. Muchos bloques de efecto animan con animation/transition INLINE (que no puede llevar media query) → sin esta regla ignoraban la preferencia del sistema. Neutraliza animaciones/transiciones/scroll-suave en TODO el storefront. 0.01ms (no 0) para que los listeners de animationend/transitionend sigan disparando. Scopeado a [data-surface=storefront] como el resto del base. (NO usar backticks en este comentario: el CSS vive en un template literal y los cerrarían — gotcha r494.) */ @media (prefers-reduced-motion:reduce){[data-surface=storefront] *,[data-surface=storefront] *::before,[data-surface=storefront] *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}} /* r532 — CONTROLES DE FORMULARIO del storefront (input/select/textarea/button NATIVOS). Sin esto salían con el estilo CRUDO del navegador (borde gris fino, tipografía del sistema, botón beige) ⇒ los forms de Q&A/reseñas/newsletter/ pago-offline se veían "sin sinergia" con el tema (queja del usuario). Scopeado a [data-surface=storefront] para NO filtrarse al sistema .form-grid de los PANELES (que llevan su propio DashTokens y NO tienen ese atributo). :where() mantiene especificidad baja ⇒ un bloque del builder o una isla con su clase/estilo propio SIEMPRE gana. */ [data-surface=storefront] :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=submit]):not([type=button]):not([type=reset]),select,textarea){font-family:var(--token-font-body,inherit);font-size:0.95rem;color:var(--token-neutral-900,#0b1220);background:var(--token-surface,#fff);border:1px solid var(--token-neutral-200,#d7dce3);border-radius:var(--token-radius-sm,8px);padding:9px 12px;line-height:1.45;transition:border-color .15s ease,box-shadow .15s ease} [data-surface=storefront] :where(input,select,textarea):focus{outline:none;border-color:var(--token-primary-600,#2563eb);box-shadow:0 0 0 3px color-mix(in srgb,var(--token-primary-600,#2563eb) 16%,transparent)} [data-surface=storefront] :where(input,textarea)::placeholder{color:var(--token-neutral-400,#9aa4b2)} [data-surface=storefront] :where(select){cursor:pointer;appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--token-neutral-400,#9aa4b2) 50%),linear-gradient(135deg,var(--token-neutral-400,#9aa4b2) 50%,transparent 50%);background-position:calc(100% - 16px) 55%,calc(100% - 11px) 55%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px} /* Botón NATIVO sin clase propia (submit/button/reset crudos, p.ej. "Preguntar") → estilo primario del tema. Los botones de isla o del builder llevan clase/estilo propio y quedan intactos (el :not([class]) y :where() los preservan). */ [data-surface=storefront] :where(button:not([data-bd-btn]):not([class]),input[type=submit],input[type=button],input[type=reset]){font-family:var(--token-font-body,inherit);font-weight:600;font-size:0.92rem;background:var(--token-primary-600,#2563eb);color:#fff;border:1px solid var(--token-primary-600,#2563eb);border-radius:var(--token-radius-sm,8px);padding:9px 16px;cursor:pointer;line-height:1.4;transition:filter .15s ease} [data-surface=storefront] :where(button:not([data-bd-btn]):not([class]):hover,input[type=submit]:hover,input[type=button]:hover){filter:brightness(.96)} /* r532 — EXTRAS de la ficha de producto (reseñas, Q&A, negociación, contratar-servicio, reportar): eran
/
DESNUDOS sin tarjeta ni ritmo ⇒ se veían como texto suelto bajo el producto (queja de las capturas). Se les da tarjeta + encabezado consistente + campos APILADOS (label arriba, control abajo). data-product-extras lo pone la ficha. */ /* r532 (sinergia visual — bug de la captura): la plantilla builder de la ficha se centra en un contenedor de 1320px con 28px de padding lateral (VOLTIO_CONTAINER), pero productExtras colgaba FULL-WIDTH bajo ella ⇒ secciones pegadas al borde, desalineadas con el contenido centrado. Se le da el MISMO contenedor para que queden a ras con los bloques del builder. */ [data-surface=storefront] [data-product-extras]{display:flex;flex-direction:column;gap:1rem;margin:1.75rem auto 0;max-width:1320px;padding:0 28px;box-sizing:border-box} @media (max-width:640px){[data-surface=storefront] [data-product-extras]{padding:0 16px}} [data-surface=storefront] [data-product-extras]>section{background:var(--token-surface,#fff);border:1px solid var(--token-neutral-200,#e4e8ee);border-radius:var(--token-radius-md,12px);padding:1.1rem 1.25rem;margin:0} [data-surface=storefront] [data-product-extras] h2{font-size:1.15rem;font-weight:700;margin:0 0 .75rem;letter-spacing:-.01em;color:var(--token-neutral-900,#0b1220)} [data-surface=storefront] [data-product-extras] form{margin-top:.5rem;row-gap:.7rem} [data-surface=storefront] [data-product-extras] form label{display:inline-flex;flex-direction:column;gap:4px;font-size:.82rem;font-weight:600;color:var(--token-text-muted,#55606e)} [data-surface=storefront] [data-product-extras]>details{background:var(--token-surface,#fff);border:1px solid var(--token-neutral-200,#e4e8ee);border-radius:var(--token-radius-md,12px);padding:.5rem 1rem} /* r599 — SELLOS DE CONFIANZA (TrustSeals). Era el único hijo de la columna de extras SIN tarjeta: el bloque de arriba solo estiliza sus hijos "section" y "details", y el UL no casa con ninguno, así que quedaba como dos rayitas grises con texto suelto ("no tiene estilo"). Clase propia "sf-trust" (no pisa ninguna .bd-* del constructor); reutiliza el chip de icono con degradado de r594 para hablar el mismo idioma que home/ficha. */ [data-surface=storefront] .sf-trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;list-style:none;margin:0;padding:0} [data-surface=storefront] .sf-trust li{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--token-surface,#fff);border:1px solid var(--token-neutral-200,#e4e8ee);border-radius:var(--token-radius-md,12px);font-size:.88rem;font-weight:600;color:var(--token-neutral-900,#0b1220)} [data-surface=storefront] .sf-trust li span{display:grid;place-items:center;width:34px;height:34px;flex-shrink:0;border-radius:10px;font-size:1.05rem;background-image:linear-gradient(135deg,rgba(37,99,235,.16),rgba(37,99,235,.05));box-shadow:inset 0 1px 0 rgba(255,255,255,.45)} /* r532 — RED RESPONSIVE de las REJILLAS de producto (ProductGrid, marcador data-bd-facet-listing). Las plantillas sembradas fijan columns:4 SOLO en base (sin override por breakpoint) ⇒ en telefonos se pintaban 4 columnas y cada tarjeta ~75px con imagen/texto reventados (bug critico de la auditoria). Esta red fuerza 2 col en movil y 3 en tablet para CUALQUIER rejilla, sin depender de que cada plantilla traiga el override. En desktop manda la plantilla. TRADE-OFF (revisión adversarial r532): el !important supera un override de columnas por-breakpoint que el usuario configure en el builder para movil/tablet (raro; las plantillas sembradas YA traen 2/3 col, asi que la red es sobre todo un fallback para rejillas creadas por el usuario sin override). Se prioriza "nunca 4-col reventadas en movil" sobre ese edge. Fix limpio pendiente (fase 2): emitir las columnas por-breakpoint del usuario con !important en compile-style (invasivo: cambia el hash determinista y el snapshot de 6470 tests). */ @media (max-width:640px){[data-surface=storefront] [data-bd-facet-listing]{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}} @media (min-width:641px) and (max-width:900px){[data-surface=storefront] [data-bd-facet-listing]{grid-template-columns:repeat(3,minmax(0,1fr))!important}} /* r532 — AUTO-REJILLA de los listados NATIVOS (ProductListItem, marcador data-plist-card). El componente ahora es una tarjeta; este selector convierte CUALQUIER