/* Commercial polish layer (safe overrides). Scope: only active when is present. */ body.prod-commercial { /* Fallbacks para páginas standalone que aún no cargan product_system.css. */ --bg: var(--prod-bg, #08111d); --panel: var(--prod-panel, #0d1728); --panel-soft: rgba(15, 23, 39, 0.84); --line: var(--prod-line, rgba(144, 161, 185, 0.22)); --ink: var(--prod-text, #f5f7fa); --muted: var(--prod-muted, #91a1b9); --accent: var(--prod-secondary, #f4b400); --pitch: var(--prod-primary, #2f7d32); /* Aliases legacy usados en templates antiguos (evita paletas paralelas). */ --brand: var(--prod-secondary, #f4b400); --amber: var(--prod-secondary, #f4b400); --cyan: var(--prod-primary, #2f7d32); --ok: var(--prod-success, #22c55e); --err: var(--prod-danger, #d64545); color: var(--ink); font-family: var(--prod-font-ui, "Avenir Next", "Inter", "Segoe UI", sans-serif); font-size: var(--prod-font-size-base, 16px); /* Base weight: evitamos que toda la UI parezca "negrita" en iPad. Las jerarquías (títulos/botones/badges) se controlan con reglas específicas más abajo. */ font-weight: var(--prod-font-weight, 500); font-style: var(--prod-font-style, normal); text-decoration: var(--prod-text-decoration, none); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: geometricPrecision; background-image: linear-gradient(180deg, rgba(5, 11, 20, 0.78), rgba(5, 11, 20, 0.92)), var(--prod-system-image, none), radial-gradient(circle at 14% -12%, rgba(47, 125, 50, 0.2), transparent 52%), radial-gradient(circle at 88% -6%, rgba(244, 180, 0, 0.16), transparent 46%), radial-gradient(circle at 70% 120%, rgba(144, 161, 185, 0.12), transparent 52%), linear-gradient(180deg, #050b14 0%, var(--prod-bg, #0b1626) 58%, #040912 100%) !important; background-size: cover, cover, auto, auto, auto, auto; background-position: center, center, center, center, center, center; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; background-attachment: fixed; min-width: 0; min-height: 100vh; min-height: var(--app-vh, 100dvh); overflow-x: hidden; -webkit-text-size-adjust: 100%; touch-action: manipulation; } /* Light theme: superficies claras y acentos de marca. */ :root[data-theme="light"] body.prod-commercial { --panel-soft: rgba(248, 250, 252, 0.92); background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(244, 247, 251, 0.9)), var(--prod-system-image, none), radial-gradient(circle at 12% -16%, rgba(47, 125, 50, 0.1), transparent 54%), radial-gradient(circle at 86% -10%, rgba(244, 180, 0, 0.12), transparent 50%), radial-gradient(circle at 72% 120%, rgba(15, 23, 42, 0.08), transparent 58%), linear-gradient(180deg, #ffffff 0%, var(--prod-bg, #f4f7fb) 55%, #eef2f7 100%) !important; background-size: cover, cover, auto, auto, auto, auto; background-position: center, center, center, center, center, center; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; } /* High contrast: elimina fondos complejos y aumenta contraste. */ :root[data-theme="hc"] body.prod-commercial { --panel-soft: rgba(255, 255, 255, 0.06); background: #000000 !important; } /* Mobile/performance: - `background-attachment: fixed` y `backdrop-filter` pueden ir a tirones en iOS/Android. - En pantallas táctiles priorizamos fluidez y batería. */ @media (hover: none), (pointer: coarse), (max-width: 820px) { body.prod-commercial { background-attachment: scroll; } body.prod-commercial .topbar, body.prod-commercial .hero, body.prod-commercial .panel, body.prod-commercial .card, body.prod-commercial .product-card { backdrop-filter: none; } } body.prod-commercial :focus-visible { outline: 2px solid rgba(244, 180, 0, 0.65); outline-offset: 3px; } body.prod-commercial a, body.prod-commercial button { transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease; -webkit-tap-highlight-color: transparent; } body.prod-commercial .topbar, body.prod-commercial .hero, body.prod-commercial .panel, body.prod-commercial .card, body.prod-commercial .product-card { backdrop-filter: blur(8px) saturate(1.14); } body.prod-commercial .module-tab:hover, body.prod-commercial .tab:hover, body.prod-commercial .button:hover, body.prod-commercial button:hover { border-color: rgba(244, 180, 0, 0.32); } body.prod-commercial .module-tab:hover, body.prod-commercial .button:hover { transform: translateY(-1px); } body.prod-commercial .product-card, body.prod-commercial .hero, body.prod-commercial .topbar { box-shadow: var(--ui-shadow-md); } /* ------------------------------------------------------------ Unified UI Kit (commercial-safe) - High-specificity selectors to override per-template CSS. - Applies only under `body.prod-commercial`. - Goal: consistent buttons/tabs/panels/forms across the product. ------------------------------------------------------------ */ body.prod-commercial { --ui-radius-xl: var(--prod-radius-lg, 22px); --ui-radius-lg: var(--prod-radius-md, 16px); --ui-radius-md: 14px; --ui-radius-sm: 12px; --ui-shadow-lg: var(--prod-shadow-lg, 0 24px 64px rgba(0, 0, 0, 0.34)); --ui-shadow-md: var(--prod-shadow-md, 0 16px 36px rgba(0, 0, 0, 0.24)); --ui-bg: var(--prod-bg, #08111d); --ui-panel: var(--prod-panel, rgba(14, 23, 39, 0.96)); --ui-panel-flat: var(--prod-panel-flat, rgba(14, 23, 39, 0.96)); --ui-line: var(--prod-line, rgba(144, 161, 185, 0.22)); --ui-line-strong: var(--prod-line-strong, rgba(244, 180, 0, 0.22)); --ui-text: var(--prod-text, #f5f7fa); --ui-muted: var(--prod-muted, #91a1b9); --ui-muted-soft: var(--prod-muted-soft, #b0bccd); --ui-accent: var(--prod-secondary, #f4b400); --ui-accent-2: var(--prod-primary, #2f7d32); --ui-info: var(--prod-info, #22d3ee); --ui-success: var(--prod-success, #22c55e); --ui-danger: var(--prod-danger, #d64545); --ui-button-text: var(--prod-button-text, rgba(245, 247, 250, 0.98)); --ui-button-muted-text: rgba(226, 232, 240, 0.94); --ui-button-bg: var(--prod-button-bg, rgba(15, 23, 42, 0.62)); --ui-system-image: var(--prod-system-image, none); /* Density + typography tokens */ --ui-btn-pad-y: 0.62rem; --ui-btn-pad-x: 0.95rem; --ui-btn-fs: calc(0.78rem * var(--prod-font-size-scale, 1)); --ui-btn-letter: 0.06em; --ui-chip-pad-y: 0.34rem; --ui-chip-pad-x: 0.7rem; --ui-card-pad: 1rem; --ui-card-pad-compact: 0.85rem; --ui-block-gap: 0.95rem; --ui-block-gap-compact: 0.75rem; --ui-title-gap: 0.55rem; --ui-title-gap-compact: 0.42rem; } :root[data-density="compact"] body.prod-commercial { --ui-btn-pad-y: 0.5rem; --ui-btn-pad-x: 0.82rem; --ui-btn-fs: 0.72rem; --ui-btn-letter: 0.05em; --ui-chip-pad-y: 0.26rem; --ui-chip-pad-x: 0.62rem; } :root[data-density="compact"] body.prod-commercial { --ui-card-pad: var(--ui-card-pad-compact); --ui-block-gap: var(--ui-block-gap-compact); --ui-title-gap: var(--ui-title-gap-compact); } body.prod-commercial a { color: inherit; } body.prod-commercial a:hover { color: rgba(255, 242, 199, 0.96); } /* En claro, el hover no debe volverse amarillo pálido. */ :root[data-theme="light"] body.prod-commercial a:hover { color: rgba(15, 122, 53, 0.92); } :root[data-theme="hc"] body.prod-commercial a:hover { color: #ffffff; text-decoration: underline; } /* Legacy `.link` (muchas plantillas lo pintan en azul/cian). Lo alineamos a marca. */ body.prod-commercial .link { color: rgba(255, 242, 199, 0.96) !important; } :root[data-theme="light"] body.prod-commercial .link { color: rgba(15, 122, 53, 0.92) !important; } body.prod-commercial .link:hover { color: #fff7dd !important; text-decoration: underline; } /* Typography: jerarquía consistente sin tocar templates (solo overrides suaves). */ body.prod-commercial h1, body.prod-commercial h2, body.prod-commercial h3 { font-family: var(--prod-font-display, var(--prod-font-ui, system-ui)); letter-spacing: -0.01em; } body.prod-commercial h1 { font-weight: 1000; } body.prod-commercial h2, body.prod-commercial h3 { font-weight: 900; } /* Normalización de tamaños y ritmo (sin tocar templates). - Evita “saltos” visuales entre módulos. - Mantiene flexibilidad: páginas específicas pueden sobrescribir. */ body.prod-commercial :where(h1, h2, h3) { line-height: 1.12; margin: 0; } body.prod-commercial :where(h1) { font-size: clamp(1.25rem, 1.2rem + 1.1vw, 1.75rem); letter-spacing: 0.08em; text-transform: uppercase; } body.prod-commercial :where(h2) { font-size: clamp(1.02rem, 0.98rem + 0.7vw, 1.28rem); letter-spacing: 0.06em; text-transform: uppercase; } body.prod-commercial :where(h3) { font-size: clamp(0.9rem, 0.88rem + 0.5vw, 1.12rem); letter-spacing: 0.05em; } body.prod-commercial :where(p) { line-height: 1.45; } /* Texto normal: mantener lectura ligera. Nota: muchos templates antiguos usan incluso para textos de apoyo; limitamos su impacto. */ body.prod-commercial :where(p, li, span, a, label, input, select, textarea) { font-weight: 500; min-width: 0; } body.prod-commercial strong, body.prod-commercial b { font-weight: 800; } body.prod-commercial :where(*, *::before, *::after) { box-sizing: border-box; } body.prod-commercial :where(img, svg, video, canvas, iframe) { max-width: 100%; } body.prod-commercial :where(img, video, canvas) { height: auto; } body.prod-commercial :where(.grid, .form-grid, .meta-grid, .upload-grid, .availability-grid, .ws-shortcuts-grid) { min-width: 0; } body.prod-commercial :where(.topbar, .hero, .panel, .card, .product-card, .toolbar, .actions, .buttons, .tabs, .chips, .product-nav-shortcuts) { min-width: 0; } body.prod-commercial :where(.topbar, .hero, .panel, .card, .product-card) { overflow-wrap: anywhere; } body.prod-commercial :where(.toolbar, .actions, .buttons, .tabs, .chips) { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } /* Espaciado “default” alrededor de bloques frecuentes. */ body.prod-commercial :where(.topbar, .hero, .panel, .card, .product-card) + :where(.topbar, .hero, .panel, .card, .product-card) { margin-top: var(--ui-block-gap); } /* Tarjetas/paneles: padding y bordes consistentes. */ body.prod-commercial .topbar, body.prod-commercial .hero, body.prod-commercial .panel, body.prod-commercial .card, body.prod-commercial .product-card { border-radius: var(--ui-radius-xl); border: 1px solid var(--ui-line); background: var(--ui-panel); } body.prod-commercial .topbar, body.prod-commercial .hero { padding: calc(var(--ui-card-pad) + 0.05rem); } body.prod-commercial .panel { padding: var(--ui-card-pad); } /* Muchas plantillas usan `.card` como contenedor sin padding; damos un padding seguro. */ body.prod-commercial .card { padding: var(--ui-card-pad); } /* Evita que el primer/último hijo “pegue saltos” raros. */ body.prod-commercial :where(.topbar, .hero, .panel, .card, .product-card) > :where(h1, h2, h3) { margin-bottom: var(--ui-title-gap); } body.prod-commercial :where(.topbar, .hero, .panel, .card, .product-card) > :first-child { margin-top: 0; } body.prod-commercial :where(.topbar, .hero, .panel, .card, .product-card) > :last-child { margin-bottom: 0; } /* Global states: badges/alerts/toasts (reusable). */ body.prod-commercial .ui-badge, body.prod-commercial .badge { display: inline-flex; align-items: center; gap: 0.35rem; border-radius: 999px; padding: var(--ui-chip-pad-y, 0.34rem) var(--ui-chip-pad-x, 0.7rem); border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.06); color: var(--ui-text); font-size: 0.7rem; line-height: 1.1; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 900; } body.prod-commercial .ui-badge.is-ok, body.prod-commercial .badge.ok { border-color: rgba(34, 197, 94, 0.42); background: rgba(34, 197, 94, 0.14); color: rgba(214, 255, 224, 0.98); } body.prod-commercial .ui-badge.is-warn, body.prod-commercial .badge.warn { border-color: rgba(244, 180, 0, 0.42); background: rgba(244, 180, 0, 0.16); color: rgba(255, 243, 207, 0.98); } body.prod-commercial .ui-badge.is-err, body.prod-commercial .badge.danger, body.prod-commercial .badge.err { border-color: rgba(248, 113, 113, 0.5); background: rgba(220, 38, 38, 0.18); color: rgba(254, 226, 226, 0.95); } body.prod-commercial .ui-badge.is-info, body.prod-commercial .badge.info { border-color: rgba(34, 211, 238, 0.38); background: rgba(34, 211, 238, 0.12); color: rgba(226, 245, 255, 0.96); } /* Buttons (supports `.button`, `.btn`, bare