/* Auto-generado — no editar. Ejecuta: php scripts/build-critical-css.php */ /* Reset mínimo */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; min-height: 100dvh; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* === portal-public.css (imports resueltos) === */ /* inlined: tokens.css */ /** * ═══════════════════════════════════════════════════════════ * TOKENS DE DISEÑO — Personaliza aquí la identidad visual * ═══════════════════════════════════════════════════════════ * * Cambia estos valores para adaptar el portal a cualquier marca. * También puedes usar config/portal.config.json → "theme" * o editar public/assets/css/custom.css para overrides finos. */ :root { color-scheme: light; /* ── Tipografía ── */ --font-sans: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "Cascadia Code", "Segoe UI Mono", Consolas, monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --leading-tight: 1.25; --leading-normal: 1.6; --leading-relaxed: 1.75; --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; /* ── Colores base (neutros) ── */ --color-bg: #f7f7f5; --color-surface: #ffffff; --color-surface-muted: #f0f0ee; --color-border: #e4e4e0; --color-border-subtle: #eeecea; --color-text: #1c1c1a; --color-text-muted: #6b6b67; --color-text-subtle: #9a9a95; /* ── Acento (cámbialo por el color de marca del cliente) ── */ --color-accent: #5c636e; --color-accent-hover: #434850; --color-accent-soft: #eef0f2; --color-accent-text: #ffffff; /* ── Enlaces ── */ --color-link: var(--color-accent); --color-link-hover: var(--color-accent-hover); /* ── Espaciado ── */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; /* ── Layout matriz ── */ --header-height: auto; --sidebar-width: 240px; --aside-width: 280px; --content-max-width: 720px; --region-padding-x: var(--space-6); --region-padding-y: var(--space-4); /* ── Forma ── */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; /* ── Sombra (muy sutil) ── */ --shadow-sm: 0 1px 2px rgba(28, 28, 26, 0.04); --shadow-md: 0 2px 8px rgba(28, 28, 26, 0.06); /* ── Transiciones ── */ --transition-fast: 150ms ease; } /* inlined: dark.css */ /** * Modo oscuro — tokens nocturnos neutros * Se activa con data-theme="dark" en */ [data-theme="dark"] { color-scheme: dark; --color-bg: #121211; --color-surface: #1a1a18; --color-surface-muted: #222220; --color-border: #2e2e2b; --color-border-subtle: #262624; --color-text: #ededeb; --color-text-muted: #a3a39e; --color-text-subtle: #737370; --color-accent-soft: #2a2a28; --color-accent-text: #121211; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35); } [data-theme="light"] { color-scheme: light; } /* Transición suave al cambiar tema */ html.theme-transition, html.theme-transition *, html.theme-transition *::before, html.theme-transition *::after { transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, box-shadow 200ms ease !important; } @media (prefers-reduced-motion: reduce) { html.theme-transition, html.theme-transition *, html.theme-transition *::before, html.theme-transition *::after { transition: none !important; } } /* inlined: base.css */ /* Tipografía y elementos base */ body { font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--color-text); background-color: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--space-4); font-weight: var(--weight-semibold); line-height: var(--leading-tight); color: var(--color-text); } h1 { font-size: var(--text-3xl); } h2 { font-size: var(--text-2xl); } h3 { font-size: var(--text-xl); } p { margin: 0 0 var(--space-4); color: var(--color-text-muted); } p:last-child { margin-bottom: 0; } a { color: var(--color-link); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--color-link-hover); } a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); } code { font-family: var(--font-mono); font-size: 0.9em; padding: var(--space-1) var(--space-2); background: var(--color-surface-muted); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm); color: var(--color-text); } ul, ol { margin: 0; padding: 0; list-style: none; } img { max-width: 100%; height: auto; display: block; } /* Skip link accesible */ .skip-link { position: absolute; top: var(--space-4); left: var(--space-4); z-index: 1000; padding: var(--space-2) var(--space-4); background: var(--color-accent); color: var(--color-accent-text); font-size: var(--text-sm); font-weight: var(--weight-medium); border-radius: var(--radius-md); transform: translateY(-200%); transition: transform var(--transition-fast); } .skip-link:focus { transform: translateY(0); } /* inlined: matrix.css */ /* Layout de la matriz modular */ [data-layout-matrix] { display: flex; flex-direction: column; min-height: 100dvh; } [data-layout-body] { display: flex; flex: 1; width: 100%; } /* ── Regiones ── */ .region { width: 100%; } .region--header { background: var(--color-surface); } .region--header .region__inner, .region__inner--header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 56px; padding: var(--region-padding-y) var(--region-padding-x); } .region--nav { background: var(--color-surface); border-bottom: 1px solid var(--color-border-subtle); } .region--nav .region__inner { padding: 0 var(--region-padding-x); min-height: 0; display: flex; align-items: stretch; justify-content: center; } .region--sidebar { flex-shrink: 0; width: var(--sidebar-width); background: var(--color-surface-muted); border-right: 1px solid var(--color-border-subtle); } .region--sidebar .region__inner { padding: var(--space-6) var(--space-4); } [data-layout-body] .region--sidebar:last-child { border-right: none; border-left: 1px solid var(--color-border-subtle); } .region--main { flex: 1; min-width: 0; background: var(--color-bg); } .region--main .region__inner { max-width: var(--content-max-width); margin: 0 auto; padding: var(--space-8) var(--region-padding-x); } .region--aside { flex-shrink: 0; width: var(--aside-width); background: var(--color-surface); border-left: 1px solid var(--color-border-subtle); } .region--aside .region__inner { padding: var(--space-6) var(--space-4); } .region--footer { background: var(--color-surface); border-top: 1px solid var(--color-border); } .region--footer .region__inner { padding: var(--space-3) var(--region-padding-x) var(--space-1); } /* ── Variantes sin sidebar ── */ [data-layout-matrix][data-variant="minimal"] [data-layout-body], [data-layout-matrix][data-variant="with-nav"] [data-layout-body] { display: block; } [data-layout-matrix][data-variant="with-sidebar"] .region--nav { display: none; } /* ── Responsive ── */ @media (max-width: 768px) { [data-layout-body] { flex-direction: column; } .region--sidebar, .region--aside { width: 100%; border-right: none; border-left: none; border-bottom: 1px solid var(--color-border-subtle); } .region--main .region__inner { padding: var(--space-6) var(--region-padding-x); } } /* inlined: components.css */ /* Componentes UI reutilizables */ /* Marca / logo del sitio */ .site-brand { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--color-text); letter-spacing: -0.01em; } /* Navegación horizontal */ .nav-list { display: flex; flex-wrap: wrap; gap: var(--space-1); } .nav-list a { display: block; padding: var(--space-3) var(--space-4); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-muted); border-radius: var(--radius-sm); transition: color var(--transition-fast), background var(--transition-fast); } .nav-list a:hover { color: var(--color-text); background: var(--color-surface-muted); } .nav-list a[aria-current="page"], .nav-list a.is-active { color: var(--color-accent); background: var(--color-accent-soft); } /* Navegación lateral */ .sidebar-nav ul { display: flex; flex-direction: column; gap: var(--space-1); } .sidebar-nav a { display: block; padding: var(--space-2) var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); border-radius: var(--radius-sm); border-left: 2px solid transparent; transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast); } .sidebar-nav a:hover { color: var(--color-text); background: var(--color-surface); } .sidebar-nav a.is-active { color: var(--color-accent); background: var(--color-surface); border-left-color: var(--color-accent); font-weight: var(--weight-medium); } /* Contenido de página */ .page-content section { margin-top: var(--space-8); padding-top: var(--space-8); border-top: 1px solid var(--color-border-subtle); } .page-content section:first-of-type { margin-top: var(--space-6); padding-top: 0; border-top: none; } /* Footer */ .site-footer-text { margin: 0; padding-top: var(--space-3); border-top: 1px solid var(--color-border-subtle); font-size: var(--text-sm); color: var(--color-text-subtle); } /* Panel aside */ .aside-panel p { font-size: var(--text-sm); } /* Tarjeta neutra (utilidad para futuros módulos) */ .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5); box-shadow: var(--shadow-sm); } /* ── Toggle claro / oscuro ── */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; position: relative; width: 40px; height: 40px; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-muted); color: var(--color-text-muted); cursor: pointer; flex-shrink: 0; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); } .theme-toggle:hover { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); } .theme-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .theme-toggle__track { display: none; } .theme-toggle__icon { position: absolute; transition: opacity var(--transition-fast), transform var(--transition-fast); } .theme-toggle__icon--sun { opacity: 0; transform: rotate(-30deg) scale(0.8); } .theme-toggle__icon--moon { opacity: 1; transform: rotate(0deg) scale(1); } [data-theme="dark"] .theme-toggle__icon--sun { opacity: 1; transform: rotate(0deg) scale(1); } [data-theme="dark"] .theme-toggle__icon--moon { opacity: 0; transform: rotate(30deg) scale(0.8); } [data-theme="dark"] .theme-toggle { background: var(--color-surface-muted); border-color: var(--color-border); color: var(--color-text-muted); } [data-theme="dark"] .theme-toggle:hover { color: var(--color-text); } /* inlined: ecommerce.css */ /** * Estructura e-commerce — Top bar, header, categorías, mega-menú, footer */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ── Top bar ── */ .store-topbar { width: 100%; font-size: var(--text-xs, 0.75rem); } .store-topbar__inner { display: flex; align-items: center; justify-content: flex-end; width: 100%; gap: var(--space-3); min-height: 2rem; } .store-topbar__links { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3); } .store-topbar__nav { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); } .store-topbar__group { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); } .store-topbar__sep { color: var(--color-text-subtle); user-select: none; line-height: 1; } .store-topbar__divider { display: inline-block; align-self: stretch; width: 1px; min-height: 1.25rem; margin: 0 var(--space-1); background: var(--color-border); } .store-topbar__group--editors a { color: var(--color-text-subtle); font-weight: var(--weight-medium); } .store-topbar__group--editors a:hover { color: var(--color-accent); } .store-topbar__chat-link { position: relative; display: inline-flex; align-items: center; gap: var(--space-1); } .store-topbar__chat-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #e03131; color: #fff; font-size: 0.65rem; font-weight: var(--weight-bold); line-height: 1; } .store-topbar__links a:not(.store-topbar__user), .store-topbar__link-btn { color: var(--color-text-muted); background: none; border: none; padding: 0; font: inherit; font-size: inherit; cursor: pointer; text-decoration: none; } .store-topbar__links a:not(.store-topbar__user):hover, .store-topbar__link-btn:hover { color: var(--color-accent); } .store-topbar__links a.store-topbar__user, .store-topbar__meta, .store-topbar__lang-btn, .store-topbar__clock, .store-topbar .theme-toggle { border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm); background: transparent; transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast); } .store-topbar__links a.store-topbar__user, .store-topbar__meta, .store-topbar__lang-btn, .store-topbar__clock { color: var(--color-text-subtle); font-weight: var(--weight-semibold); line-height: 1.4; } .store-topbar__links a.store-topbar__user { display: inline-block; max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; padding: 2px 8px; text-decoration: none; cursor: pointer; } .store-topbar__meta { padding: 2px 8px; } .store-topbar__clock { display: inline-block; min-width: 4.75rem; padding: 2px 8px; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; white-space: nowrap; cursor: default; user-select: none; } @media (max-width: 480px) { .store-topbar__clock { min-width: 2.85rem; } } .store-topbar__lang-btn { padding: 2px 8px; font: inherit; font-size: inherit; cursor: pointer; } .store-topbar__links a.store-topbar__user:hover, .store-topbar__meta:hover, .store-topbar__lang-btn:hover, .store-topbar .theme-toggle:hover { color: var(--color-accent); border-color: var(--color-accent); } .store-topbar__lang-btn--indicator { cursor: default; } .store-topbar .theme-toggle { width: 32px; height: 32px; padding: 0; color: var(--color-text-subtle); } .store-topbar .theme-toggle:hover, [data-theme="dark"] .store-topbar .theme-toggle:hover { background: transparent; color: var(--color-accent); border-color: var(--color-accent); } /* ── Main header ── */ :root { --store-logo-height: 80px; --store-logo-max-width: 320px; --store-utility-logo-height: 40px; --store-utility-logo-max-width: 128px; --store-logo-transform-ref: 260; --store-header-search-height: 2.375rem; --store-nav-min-height: 3.25rem; --store-nav-action-size: 2.125rem; --store-toolbar-search-width: 22rem; } .region--header { box-shadow: none; border-bottom: none; } .region--header + .region--nav { margin-top: 0; } /* Banda superior: logo + cuenta, idioma, tema */ .store-utility-bar { --store-logo-height: var(--store-utility-logo-height); --store-logo-max-width: var(--store-utility-logo-max-width); background: var(--color-surface-muted); border-bottom: 1px solid var(--color-border-subtle); } .store-utility-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); max-width: min(1280px, 100%); margin-inline: auto; padding: var(--space-1) var(--region-padding-x); } .store-utility-bar .store-brand { flex-shrink: 0; align-self: center; } .store-utility-bar .store-brand__logo-frame { height: var(--store-logo-height); width: var(--store-logo-max-width); max-width: var(--store-logo-max-width); } .store-utility-bar .store-brand__logo-frame .store-brand__logo { height: 100%; width: auto; max-width: none; max-height: none; } .store-utility-bar .store-topbar { flex: 1 1 auto; min-width: 0; } /* Banda herramientas: menú + buscador + carrito */ .store-toolbar { position: relative; background: var(--color-surface); border-bottom: 1px solid var(--color-border); } .store-toolbar.store-toolbar .store-toolbar__inner, .region--nav.store-toolbar .store-toolbar__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(12rem, var(--store-toolbar-search-width)) auto; align-items: center; column-gap: var(--space-4); max-width: min(1280px, 100%); min-height: var(--store-nav-min-height); margin-inline: auto; padding: 0 var(--region-padding-x); justify-content: stretch; } .store-toolbar__inner .category-nav { min-width: 0; } .store-toolbar__inner .category-nav__list { justify-content: flex-start; flex-wrap: wrap; } .store-toolbar__inner .store-search { width: 100%; max-width: var(--store-toolbar-search-width); justify-self: end; } .store-toolbar__inner .store-actions { justify-self: end; flex-shrink: 0; } .store-brand { display: inline-flex; align-items: center; flex-shrink: 0; gap: var(--space-2); text-decoration: none; color: inherit; white-space: nowrap; line-height: 0; } .store-brand__icon { display: inline-flex; align-items: center; justify-content: center; width: var(--store-logo-height, 72px); height: var(--store-logo-height, 72px); border-radius: var(--radius-md); background: var(--color-accent); color: var(--color-accent-text); font-weight: var(--weight-semibold); font-size: 1.5rem; flex-shrink: 0; } .store-brand__logo-frame { height: var(--store-logo-height, 72px); max-width: var(--store-logo-max-width, 200px); overflow: hidden; display: flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 0; border-radius: var(--radius-sm); } .store-brand__logo-frame .store-brand__logo { height: 100%; width: auto; max-width: none; object-fit: contain; object-position: center center; transform: translate( calc(var(--logo-offset-x, 0) * var(--store-logo-height) / var(--store-logo-transform-ref)), calc(var(--logo-offset-y, 0) * var(--store-logo-height) / var(--store-logo-transform-ref)) ) scale(var(--logo-scale, 1)); transform-origin: center center; } .store-brand__logo { width: auto; height: var(--store-logo-height, 72px); max-width: var(--store-logo-max-width, 200px); object-fit: contain; object-position: left center; flex-shrink: 0; border-radius: var(--radius-sm); display: block; } .store-brand--logo-only { gap: 0; } .store-brand--logo-only .store-brand__name { display: none; } .store-brand__name { font-size: var(--text-lg); font-weight: var(--weight-semibold); letter-spacing: -0.02em; line-height: 1.2; } .store-brand:hover .store-brand__name { color: var(--color-accent); } /* ── Buscador ── */ .store-search { display: flex; align-items: center; width: 100%; min-width: 0; height: var(--store-header-search-height); padding: 2px; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .store-search:focus-within { border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent-soft); } .store-search__input { flex: 1; min-width: 0; padding: 0 var(--space-3) 0 var(--space-4); border: none; background: transparent; font: inherit; font-size: var(--text-sm); color: var(--color-text); } .store-search__input:focus { outline: none; } .store-search__btn { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: calc(var(--store-header-search-height) - 4px); height: calc(var(--store-header-search-height) - 4px); margin: 2px; padding: 0; border: none; border-radius: calc(var(--radius-md) - 2px); background: var(--color-accent); color: var(--color-accent-text); cursor: pointer; transition: background var(--transition-fast); } .store-search__btn:hover { background: var(--color-accent-hover); } /* ── Acciones tienda ── */ .store-actions { display: inline-flex; align-items: center; flex-shrink: 0; gap: 1px; padding: 2px; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); background: var(--color-surface-muted); } .store-action { position: relative; display: inline-flex; align-items: center; justify-content: center; width: var(--store-nav-action-size, 2rem); height: var(--store-nav-action-size, 2rem); color: var(--color-text-muted); text-decoration: none; border-radius: calc(var(--radius-md) - 2px); transition: color var(--transition-fast), background var(--transition-fast); } .store-action svg { width: 17px; height: 17px; flex-shrink: 0; } .store-action:hover { color: var(--color-accent); background: var(--color-surface); } .store-action__label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .store-action__badge { position: absolute; top: -0.1rem; right: -0.1rem; display: inline-flex; align-items: center; justify-content: center; min-width: 15px; height: 15px; padding: 0 3px; border: 1px solid var(--color-surface); border-radius: 999px; background: var(--color-accent); color: var(--color-accent-text); font-size: 0.575rem; font-weight: var(--weight-semibold); line-height: 1; pointer-events: none; } /* ── Categorías + mega-menú ── */ .category-nav { width: auto; } .category-nav__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; margin: 0; padding: 0; list-style: none; } .category-nav__item { position: static; } .category-nav__item--page + .category-nav__item[data-mega-item] .category-nav__link { border-left: 1px solid var(--color-border-subtle); margin-left: var(--space-2); padding-left: calc(var(--space-5) + var(--space-2)); } .category-nav__link { display: block; padding: 0.75rem var(--space-3); font-size: var(--text-xs, 0.75rem); font-weight: var(--weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); text-decoration: none; border-bottom: 2px solid transparent; transition: color var(--transition-fast), border-color var(--transition-fast); } .category-nav__link:hover, .category-nav__link.is-active, .category-nav__item.is-open .category-nav__link { color: var(--color-accent); border-bottom-color: var(--color-accent); } .mega-menu { position: absolute; left: 0; right: 0; top: 100%; z-index: 100; padding: var(--space-6) var(--region-padding-x); background: var(--color-surface); border-top: 1px solid var(--color-border-subtle); border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-md); } .mega-menu[hidden] { display: none; } .mega-menu__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-6); max-width: 1280px; margin: 0 auto; } .mega-menu__title { margin: 0 0 var(--space-3); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text); } .mega-menu__links { margin: 0; padding: 0; list-style: none; } .mega-menu__links a { display: block; padding: var(--space-1) 0; font-size: var(--text-sm); color: var(--color-text-muted); text-decoration: none; } .mega-menu__links a:hover { color: var(--color-accent); } .mega-menu__breadcrumb { margin: var(--space-5) auto 0; max-width: 1280px; font-size: var(--text-xs, 0.75rem); color: var(--color-text-subtle); } /* ── Footer tienda ── */ .region--footer .region__inner { padding-block: var(--space-3) var(--space-1); padding-inline: var(--region-padding-x) clamp(var(--space-6), 6vw, 6.5rem); } .store-footer { display: flex; flex-direction: column; gap: var(--space-2); width: 100%; } .store-footer__main { display: grid; grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr)); gap: var(--space-4) clamp(var(--space-3), 2vw, var(--space-6)); align-items: start; } .store-footer__col { min-width: 0; } .store-footer__col--about .store-footer__text { max-width: 22rem; } .store-footer__heading { margin: 0 0 var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text); } .store-footer__text { margin: 0 0 var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.45; } .store-footer__link { display: inline-block; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-accent); text-decoration: none; } .store-footer__link:hover { color: var(--color-accent-hover); text-decoration: underline; } .store-footer__list { margin: 0; padding: 0; list-style: none; } .store-footer__list a { display: block; padding: 0.15rem 0; font-size: var(--text-sm); color: var(--color-text-subtle); text-decoration: none; line-height: 1.4; } .store-footer__list a:hover { color: var(--color-accent); } .store-footer__list button.store-footer__link-btn { display: block; width: 100%; padding: 0.15rem 0; font-size: var(--text-sm); color: var(--color-text-subtle); text-decoration: none; line-height: 1.4; background: none; border: none; text-align: left; cursor: pointer; font-family: inherit; } .store-footer__list button.store-footer__link-btn:hover { color: var(--color-accent); } .store-footer__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-top: 0; padding-block: var(--space-2) 0; border-top: 1px solid var(--color-border-subtle); } .store-footer__meta-start { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); } .store-footer__social { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0; } .store-footer__social-icon { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: var(--text-xs, 0.75rem); color: var(--color-text-muted); text-decoration: none; } a.store-footer__social-icon:hover { color: var(--color-accent); border-color: var(--color-accent); } .store-footer__payments { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0; font-size: 0.625rem; font-weight: var(--weight-semibold); color: var(--color-text-subtle); } .store-footer__payments span { padding: 0.2rem 0.45rem; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm); background: var(--color-surface-muted); line-height: 1.2; } .store-footer__copy { flex: 0 1 auto; margin: 0; padding: 0; border: none; font-size: var(--text-xs); line-height: 1.35; color: var(--color-text-subtle); text-align: left; } .store-newsletter { display: flex; flex-direction: column; gap: var(--space-2); } .store-newsletter input { padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); font: inherit; font-size: var(--text-sm); background: var(--color-surface); color: var(--color-text); } .store-newsletter__consent { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-xs, 0.75rem); color: var(--color-text-muted); line-height: 1.4; } .store-newsletter__consent input { margin-top: 0.15rem; flex-shrink: 0; } .store-newsletter__consent a { color: var(--color-accent); text-decoration: underline; } .store-newsletter__message { margin: 0; font-size: var(--text-xs, 0.75rem); line-height: 1.4; } .store-newsletter__message[hidden] { display: none !important; } .store-newsletter__message.is-success { color: #166534; } .store-newsletter__message.is-error { color: #b91c1c; } .store-newsletter__unsubscribe { margin: var(--space-2) 0 0; font-size: var(--text-xs); } .store-newsletter__unsubscribe a { color: var(--color-text-muted); text-decoration: underline; } .newsletter-unsubscribe-form { display: flex; flex-direction: column; gap: var(--space-3); max-width: 28rem; } .newsletter-unsubscribe-form__message { margin: 0; font-size: var(--text-sm); } .newsletter-unsubscribe-form__message[hidden] { display: none !important; } .newsletter-unsubscribe-form__message.is-success { color: #166534; } .newsletter-unsubscribe-form__message.is-error { color: #b91c1c; } /* ── Contenido más ancho en tienda ── */ .region--main .region__inner { max-width: min(1280px, 100%); } /* ── Responsive ── */ @media (max-width: 1024px) { .store-footer__main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); } .store-footer__col--about { grid-column: 1 / -1; } .store-footer__copy { flex-basis: auto; } .region--nav.store-toolbar .store-toolbar__inner { grid-template-columns: 1fr auto; grid-template-areas: "nav actions" "search search"; row-gap: var(--space-2); padding-block: var(--space-2); } .store-toolbar__inner .category-nav { grid-area: nav; } .store-toolbar__inner .store-search { grid-area: search; max-width: none; justify-self: stretch; } .store-toolbar__inner .store-actions { grid-area: actions; } } @media (max-width: 768px) { .region--footer .region__inner { padding-block-end: var(--space-1); padding-inline-end: var(--region-padding-x); } :root { --store-header-search-height: 2.25rem; --store-toolbar-search-width: 100%; } .store-utility-bar { --store-utility-logo-height: 36px; --store-utility-logo-max-width: 112px; } .store-utility-bar__inner { flex-wrap: wrap; gap: var(--space-2); padding: var(--space-2) var(--region-padding-x); } .store-utility-bar .store-topbar { flex: 1 1 100%; } .store-topbar__links { gap: var(--space-2); } .store-toolbar__inner .category-nav { min-width: 0; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain; } .store-toolbar__inner .category-nav::-webkit-scrollbar { display: none; } .store-toolbar__inner .category-nav__list { flex-wrap: nowrap; width: max-content; } .category-nav__item--page + .category-nav__item[data-mega-item] .category-nav__link { border-left: none; margin-left: 0; padding-left: var(--space-3); } .category-nav__link { padding: var(--space-3); font-size: var(--text-xs, 0.75rem); white-space: nowrap; } .mega-menu__grid { grid-template-columns: 1fr 1fr; } .store-footer__main { grid-template-columns: 1fr; gap: var(--space-4); } .store-footer__col--about { grid-column: auto; } .store-footer__meta { flex-direction: column; align-items: flex-start; } } @media (max-width: 480px) { .region--nav.store-toolbar .store-toolbar__inner { grid-template-columns: 1fr; grid-template-areas: "nav" "search" "actions"; } .store-toolbar__inner .store-actions { justify-self: stretch; justify-content: center; } .store-topbar__meta { display: none; } } /* ========================================================================== Botón de menú (hamburguesa) + menú lateral (drawer) ========================================================================== */ .store-topbar__menu-btn { position: relative; display: inline-flex; align-items: center; gap: var(--space-2, 0.5rem); background: none; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm, 6px); padding: 4px 10px; color: var(--color-text-muted); cursor: pointer; font: inherit; line-height: 1; transition: color 0.15s ease, border-color 0.15s ease; } .store-topbar__menu-btn:hover { color: var(--color-accent); border-color: var(--color-accent); } .store-topbar__menu-icon { display: inline-flex; flex-direction: column; justify-content: center; gap: 3px; width: 16px; } .store-topbar__menu-icon span { display: block; height: 2px; width: 100%; background: currentColor; border-radius: 2px; } .store-topbar__menu-btn .store-topbar__chat-badge { position: absolute; top: -7px; right: -7px; } /* Overlay + panel deslizante */ .admin-drawer { position: fixed; inset: 0; z-index: 1000; } .admin-drawer[hidden] { display: none; } .admin-drawer__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); opacity: 0; transition: opacity 0.25s ease; } .admin-drawer.is-open .admin-drawer__overlay { opacity: 1; } .admin-drawer__panel { position: absolute; top: 0; right: 0; left: auto; height: 100%; width: min(320px, 86vw); background: var(--color-surface, #fff); border-left: 1px solid var(--color-border-subtle); border-right: none; box-shadow: -4px 0 24px rgba(0, 0, 0, 0.25); display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.25s ease; outline: none; overflow: hidden; } .admin-drawer.is-open .admin-drawer__panel { transform: translateX(0); } .admin-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4, 1rem); border-bottom: 1px solid var(--color-border-subtle); background: var(--color-surface-muted); } .admin-drawer__user { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .admin-drawer__name { font-weight: var(--weight-bold, 600); color: var(--color-text, inherit); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .admin-drawer__role { font-size: var(--text-xs, 0.75rem); color: var(--color-accent); text-transform: uppercase; letter-spacing: 0.04em; } .admin-drawer__close { background: none; border: none; color: var(--color-text-muted); font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0 4px; } .admin-drawer__close:hover { color: var(--color-accent); } .admin-drawer__nav { flex: 1; overflow-y: auto; padding: var(--space-3, 0.75rem) 0 var(--space-5, 1.5rem); } .admin-drawer__section { padding: var(--space-3, 0.75rem) 0; border-bottom: 1px solid var(--color-border-subtle); } .admin-drawer__section:last-child { border-bottom: none; } .admin-drawer__section-title { margin: 0; padding: 0 var(--space-4, 1rem) var(--space-2, 0.5rem); font-size: var(--text-xs, 0.7rem); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-subtle); } .admin-drawer__link { position: relative; display: flex; align-items: center; gap: var(--space-2); width: 100%; text-align: left; background: none; border: none; font: inherit; cursor: pointer; padding: 10px var(--space-4, 1rem); color: var(--color-text-muted); text-decoration: none; transition: background 0.15s ease, color 0.15s ease; } .admin-drawer__link:hover { background: var(--color-surface-muted); color: var(--color-accent); } .admin-drawer__link--notify { display: flex; align-items: center; gap: var(--space-2); } .admin-drawer__badge[hidden], .store-topbar__chat-badge[hidden], .store-topbar__security-badge[hidden] { display: none !important; } .admin-drawer__link--logout { color: var(--color-danger, #d9534f); } .admin-drawer__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: auto; font-size: 0.7rem; line-height: 1; color: #fff; background: var(--color-accent); border-radius: 999px; } body.has-admin-drawer-open { overflow: hidden; } /* inlined: commerce.css */ /* Comercio — productos, carrito, pedidos, chat */ .demo-site-banner { margin-bottom: var(--space-4); padding: var(--space-4) var(--space-5); border: 1px solid color-mix(in srgb, var(--color-accent) 35%, var(--color-border)); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface)); } .demo-site-banner__title { margin: 0 0 var(--space-2); font-weight: var(--weight-semibold); color: var(--color-text); } .demo-site-banner__text { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.5; } .page-section--demo-legal { padding: var(--space-4); border: 1px dashed var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-muted); } .product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-5); margin-bottom: var(--space-6); } .product-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); overflow: hidden; } .product-card__media { margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) 0; aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-surface-muted); position: relative; } .product-card__favorite { position: absolute; top: var(--space-3); right: var(--space-3); display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--color-border); border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: var(--color-text-muted); cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } [data-theme="dark"] .product-card__favorite { background: rgba(20, 20, 20, 0.88); } .product-card__favorite:hover { color: #e03131; border-color: #e03131; transform: scale(1.05); } .product-card__favorite.is-active { color: #e03131; border-color: #e03131; } .product-card__favorite svg path { fill: transparent; } .product-card__favorite.is-active svg path { fill: currentColor; } .product-card__image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } .product-card__image--placeholder { display: flex; align-items: center; justify-content: center; color: var(--color-text-subtle); font-size: 2.5rem; font-weight: var(--weight-semibold); background: linear-gradient(135deg, var(--color-surface-muted), var(--color-border-subtle)); } .product-card__image--placeholder span { opacity: 0.65; } .product-card__badge { align-self: flex-start; padding: 2px 8px; border-radius: 999px; background: var(--color-surface-muted); color: var(--color-text-muted); font-size: var(--text-xs, 0.75rem); } .product-card__title { margin: 0; font-size: var(--text-lg); line-height: 1.35; } .product-card__highlight { padding: 0 0.1em; border-radius: 0.15em; background: var(--color-accent-soft); color: inherit; font-weight: var(--weight-semibold); } .product-search-meta { margin: var(--space-3) 0 0; color: var(--color-text-muted); font-size: var(--text-sm); } .product-search-empty { margin: 0 0 var(--space-6); padding: var(--space-6); text-align: center; border: 1px dashed var(--color-border); border-radius: var(--radius-lg); color: var(--color-text-muted); background: var(--color-surface); } .product-card[hidden] { display: none; } .product-card__text { margin: 0; flex: 1; color: var(--color-text-muted); line-height: 1.5; } .product-card__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-2); } .product-card__price { margin: 0; font-size: var(--text-xl); font-weight: var(--weight-semibold); color: var(--color-accent); } .commerce-alert { margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-surface-muted); border: 1px solid var(--color-border); } .commerce-alert.is-success, .commerce-alert--success { border-color: #2f9e44; background: rgba(47, 158, 68, 0.12); } .commerce-alert--open { border-color: #339af0; background: rgba(51, 154, 240, 0.12); } .commerce-alert--closed { border-color: var(--color-border); background: var(--color-surface-muted); } .order-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: var(--text-xs, 0.75rem); font-weight: var(--weight-semibold); } .order-badge--open { background: rgba(51, 154, 240, 0.2); color: #74c0fc; } .order-badge--closed { background: rgba(134, 142, 150, 0.2); color: var(--color-text-muted); } .order-list { display: grid; gap: var(--space-4); margin-bottom: var(--space-6); } .order-list__item { padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); } .order-list__item--open { border-color: rgba(51, 154, 240, 0.45); } .order-list__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); } .order-list__head h3 { margin: 0; font-size: var(--text-lg); } .order-list__meta { margin: 0 0 var(--space-3); color: var(--color-text-muted); font-size: var(--text-sm); } .order-list__products { margin: 0 0 var(--space-3); padding-left: var(--space-5); color: var(--color-text-muted); font-size: var(--text-sm); } .order-list__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); } .page-section__intro { margin: calc(var(--space-2) * -1) 0 var(--space-4); color: var(--color-text-muted); font-size: var(--text-sm); } .commerce-empty-state--compact { padding: var(--space-5) var(--space-4); } .order-detail__back { margin-top: var(--space-4); } .order-chat__closed-note { margin: var(--space-3) 0 0; color: var(--color-text-muted); font-size: var(--text-sm); } .order-chat__messages--readonly { opacity: 0.92; } .commerce-alert.is-error { border-color: #e03131; background: rgba(224, 49, 49, 0.12); } .commerce-empty-state { padding: var(--space-8); text-align: center; border: 1px dashed var(--color-border); border-radius: var(--radius-lg); } .account-panel + .account-panel { margin-top: var(--space-8); } .account-panel__hint { margin: 0 0 var(--space-5); color: var(--color-text-muted); font-size: var(--text-sm); } .account-profile { display: grid; gap: var(--space-4); max-width: 36rem; margin: 0; } .account-profile__item { display: grid; gap: var(--space-1); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border-subtle); } .account-profile__item:last-child { padding-bottom: 0; border-bottom: none; } .account-profile dt { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); } .account-profile dd { margin: 0; font-size: var(--text-base); color: var(--color-text); font-weight: var(--weight-medium); } .account-form { max-width: 28rem; } .account-form__actions { margin-top: var(--space-4); } .account-2fa-setup { margin-bottom: var(--space-4); } .account-2fa-qr { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); } .account-2fa-qr__label { margin: 0; } .account-2fa-qr__canvas { display: inline-flex; padding: var(--space-4); background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); line-height: 0; } .account-2fa-qr__canvas svg, .account-2fa-qr__canvas img, .account-2fa-qr__canvas canvas { display: block; width: 280px; height: 280px; } .account-2fa-secret { margin: var(--space-3) 0 0; word-break: break-all; } .account-2fa-setup [data-account-2fa-regenerate] { margin-top: var(--space-3); } .account-2fa-recovery { margin: var(--space-4) 0; padding: var(--space-4); border: 1px solid #15803d; border-radius: var(--radius-md); background: rgba(21, 128, 61, 0.08); } .account-2fa-recovery__title { margin: 0 0 var(--space-2); font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--color-text); } .account-2fa-recovery__intro { margin-top: 0; } .account-2fa-recovery__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin: 0 0 var(--space-4); padding: 0; list-style: none; } .account-2fa-recovery__list li { padding: var(--space-2) var(--space-3); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--text-sm); letter-spacing: 0.08em; text-align: center; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); } .account-2fa-recovery__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); } @media (max-width: 480px) { .account-2fa-recovery__list { grid-template-columns: 1fr; } } .account-privacy-actions { display: flex; flex-direction: column; gap: var(--space-4); } .account-delete-form { display: flex; flex-direction: column; gap: var(--space-3); max-width: 28rem; padding-top: var(--space-3); border-top: 1px solid var(--color-border-subtle); } .btn--danger { color: #b91c1c; border-color: #b91c1c; } .cart-panel { display: grid; grid-template-columns: 1fr min(320px, 100%); gap: var(--space-6); } .cart-item { display: grid; grid-template-columns: 1fr auto auto; gap: var(--space-4); align-items: center; padding: var(--space-4); border-bottom: 1px solid var(--color-border-subtle); } .cart-item__name { margin: 0 0 var(--space-1); font-size: var(--text-base); } .cart-item__price { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); } .cart-item__controls { display: flex; align-items: center; gap: var(--space-2); } .cart-item__qty { width: 72px; padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); } .cart-item__subtotal { margin: 0; min-width: 90px; text-align: right; font-weight: var(--weight-semibold); } .cart-summary { padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-muted); height: fit-content; } .cart-summary__title { margin: 0 0 var(--space-4); font-size: var(--text-lg); } .cart-summary__row { display: flex; justify-content: space-between; margin: 0 0 var(--space-2); color: var(--color-text-muted); } .cart-summary__row--total { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-border); color: var(--color-text); font-size: var(--text-lg); } .cart-summary__note { margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.5; } .cart-summary__login-hint { margin-top: var(--space-4); } .cart-checkout { margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); } .cart-checkout__consent { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-sm); line-height: 1.5; color: var(--color-text-muted); } .cart-checkout__consent input { flex-shrink: 0; margin-top: 0.2rem; } .cart-checkout__consent a { color: var(--color-accent); text-decoration: underline; } .cart-checkout__consent a:hover { color: var(--color-accent-hover); } .btn--block { width: 100%; } .order-detail { margin-bottom: var(--space-6); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); } .order-detail__items { margin: var(--space-3) 0 0; padding-left: var(--space-5); } .order-chat { margin-top: var(--space-6); padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); } .order-chat__title { margin: 0 0 var(--space-3); } .order-chat__hint { margin: 0 0 var(--space-4); color: var(--color-text-muted); } .order-chat__messages { max-height: 320px; overflow-y: auto; padding: var(--space-3); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); background: var(--color-surface-muted); margin-bottom: var(--space-3); } .order-chat__message { margin-bottom: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface); border: 1px solid var(--color-border-subtle); } .order-chat__message.is-admin { border-color: var(--color-accent); } .order-chat__message.is-bot { border-color: rgba(51, 154, 240, 0.35); } .order-chat__message.is-user { border-color: var(--color-border); } .order-chat__message-head { display: flex; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); } .order-chat__message p { margin: 0; white-space: pre-wrap; } .order-chat__form { display: flex; flex-direction: column; gap: var(--space-3); } .order-chat__form textarea { padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); font: inherit; resize: vertical; } .order-detail__receipt { margin-top: var(--space-4); } .admin-toolbar--inline { margin: 0; flex-shrink: 0; } .admin-table__receipt { white-space: nowrap; } .admin-table__muted { color: var(--color-text-subtle); } .admin-order-detail { padding: var(--space-4) var(--space-5) 0; } .admin-order-detail__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-5); margin: 0 0 var(--space-5); padding: var(--space-4); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); background: var(--color-surface-muted); } .admin-order-detail__field { display: grid; gap: var(--space-1); min-width: 0; } .admin-order-detail__field dt { margin: 0; font-size: var(--text-xs, 0.75rem); font-weight: var(--weight-medium); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.03em; } .admin-order-detail__field dd { margin: 0; font-size: var(--text-sm); color: var(--color-text); word-break: break-word; } .admin-order-detail__section { margin-bottom: var(--space-4); } .admin-order-detail__section-title { margin: 0 0 var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text); } .admin-order-detail__notes { margin: 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); background: var(--color-surface); font-size: var(--text-sm); line-height: 1.55; } .admin-order-detail__items { margin: 0; padding: var(--space-3) var(--space-4) var(--space-3) var(--space-5); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); background: var(--color-surface); list-style: disc; } .admin-order-detail__items li + li { margin-top: var(--space-2); } .admin-order-detail__status { display: grid; grid-template-columns: auto minmax(12rem, 1fr) auto; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-4); padding: var(--space-4); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); background: var(--color-surface-muted); } .admin-order-detail__status-label { margin: 0; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text); white-space: nowrap; } .admin-order-detail__status select { width: 100%; min-width: 0; } .admin-modal__header-actions { display: flex; align-items: center; gap: var(--space-3); } .admin-table__col-actions .admin-table__actions-inner { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; } .order-chat--admin { margin-top: 0; padding: 0 var(--space-5) var(--space-5); } .admin-modal--wide { width: min(920px, 96vw); max-height: 92vh; } .admin-badge--order.is-pending { background: rgba(255, 193, 7, 0.2); } .admin-badge--order.is-in_progress { background: rgba(51, 154, 240, 0.2); } .admin-badge--order.is-completed { background: rgba(47, 158, 68, 0.2); } .admin-badge--order.is-cancelled { background: rgba(224, 49, 49, 0.2); } .admin-chat-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--color-accent); color: var(--color-accent-text); font-size: var(--text-xs, 0.75rem); font-weight: var(--weight-semibold); } @media (max-width: 768px) { .cart-panel { grid-template-columns: 1fr; } .cart-item { grid-template-columns: 1fr; } .admin-order-detail__fields, .admin-order-detail__status { grid-template-columns: 1fr; } } /* inlined: pages.css */ /* Estilos de páginas de contenido */ .site-brand { text-decoration: none; color: inherit; } .site-brand:hover { color: var(--color-accent); } /* Encabezado de página */ .page-heading { margin-bottom: var(--space-8); padding-bottom: var(--space-6); border-bottom: 1px solid var(--color-border-subtle); } .page-heading h1 { margin-bottom: var(--space-3); font-size: var(--text-3xl); letter-spacing: -0.02em; } .page-heading__intro { margin: 0; font-size: var(--text-lg); color: var(--color-text-muted); max-width: 52ch; } /* Secciones de contenido */ .page-body { display: flex; flex-direction: column; gap: var(--space-8); } .page-section__title { font-size: var(--text-xl); margin-bottom: var(--space-3); } .page-section p { max-width: 65ch; } .content-list { list-style: disc; padding-left: var(--space-6); color: var(--color-text-muted); } .content-list li { margin-bottom: var(--space-2); } .content-list li::marker { color: var(--color-accent); } /* Sobre nosotros — misma estructura que ag-tecnologies: texto + lateral y banner ancho completo */ .page-body--about { width: 100%; } .about-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(17.5rem, 1fr); gap: var(--space-4) clamp(var(--space-6), 4vw, var(--space-8)); align-items: start; } .about-layout__main { grid-column: 1; display: grid; gap: var(--space-4); align-content: start; } .about-intro__paragraph { margin: 0; color: var(--color-text-muted); line-height: 1.75; max-width: none; text-wrap: pretty; } .about-layout__aside { grid-column: 2; grid-row: 1; display: grid; gap: var(--space-4); align-content: start; } .about-team { margin-top: var(--space-2); } .about-card { padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); } .about-card__title { margin: 0 0 var(--space-4); font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent); } .about-contact { margin: 0 0 var(--space-4); } .about-contact__item { margin-bottom: var(--space-3); } .about-contact__item:last-child { margin-bottom: 0; } .about-contact__item dt { margin: 0 0 var(--space-1); font-size: var(--text-xs, 0.75rem); font-weight: var(--weight-medium); color: var(--color-text-subtle); text-transform: uppercase; letter-spacing: 0.04em; } .about-contact__item dd { margin: 0; font-size: var(--text-sm); word-break: break-word; } .about-contact__item a { color: var(--color-text); text-decoration: none; } .about-contact__item a:hover { color: var(--color-accent); } .about-card__link { display: inline-block; font-size: var(--text-xs, 0.75rem); font-weight: var(--weight-semibold); letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; color: var(--color-accent); } .about-card__link:hover { text-decoration: underline; } .about-values-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); } .about-values-list__item { display: grid; gap: var(--space-1); } .about-values-list__label { font-size: var(--text-xs, 0.75rem); font-weight: var(--weight-semibold); letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-accent); } .about-values-list__text { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.6; } .about-team__figure { position: relative; margin: 0; width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface-muted); line-height: 0; } .about-team__image { display: block; width: 100%; height: auto; max-width: 100%; } .about-team__caption { position: absolute; right: 0; bottom: 0; left: 0; padding: var(--space-5) var(--space-6); text-align: left; background: linear-gradient( to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.35) 70%, transparent 100% ); } .about-team__caption-title { margin: 0 0 var(--space-1); font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent); } .about-team__caption-text { margin: 0; max-width: 52ch; font-size: var(--text-sm); color: rgba(255, 255, 255, 0.85); line-height: 1.6; } @media (max-width: 900px) { .about-layout { grid-template-columns: 1fr; gap: var(--space-5); } .about-layout__main, .about-layout__aside { grid-column: 1; } .about-team { margin-top: var(--space-3); } } @media (max-width: 640px) { .about-team__caption { padding: var(--space-4); } } /* Grid de tarjetas */ .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); } .card--link { display: block; text-decoration: none; color: inherit; transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); } .card--link:hover { border-color: var(--color-accent); box-shadow: var(--shadow-md); transform: translateY(-1px); } .card__title { margin: 0 0 var(--space-2); font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--color-text); } .card__text { margin: 0; font-size: var(--text-sm); } /* Proyectos */ .project-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-5); margin-bottom: var(--space-6); } .project-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); overflow: hidden; } .project-card__media { margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) 0; aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-surface-muted); } .project-card__image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } .project-card__image--placeholder { display: flex; align-items: center; justify-content: center; color: var(--color-text-subtle); font-size: 2.5rem; font-weight: var(--weight-semibold); background: linear-gradient(135deg, var(--color-surface-muted), var(--color-border-subtle)); } .project-card__image--placeholder span { opacity: 0.65; } .project-card__badge { align-self: flex-start; padding: 2px 8px; border-radius: 999px; background: var(--color-surface-muted); color: var(--color-text-muted); font-size: var(--text-xs, 0.75rem); } .project-card__title { margin: 0; font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--color-text); } .project-card__text { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.55; } /* Contacto */ .contact-list { display: grid; gap: var(--space-4); max-width: 480px; } .contact-list__item dt { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-subtle); margin-bottom: var(--space-1); } .contact-list__item dd { margin: 0; color: var(--color-text); } .contact-list__item a { color: var(--color-accent); text-decoration: none; font-weight: var(--weight-medium); } .contact-list__item a:hover { text-decoration: underline; } .contact-list__hint { display: block; margin-top: var(--space-1); font-size: var(--text-xs, 0.75rem); color: var(--color-text-muted); } .contact-location { max-width: 720px; } .contact-location__description { margin: 0 0 var(--space-4); color: var(--color-text-muted); line-height: 1.6; max-width: 65ch; } .contact-location__address { margin: 0 0 var(--space-5); font-style: normal; line-height: 1.6; } .contact-location__address p { margin: 0; color: var(--color-text); font-size: var(--text-base); } .contact-location__address p + p { margin-top: var(--space-1); color: var(--color-text-muted); } .contact-map-frame { position: relative; width: 100%; aspect-ratio: 4 / 3; min-height: 220px; max-height: 320px; margin-bottom: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface-muted); } .contact-map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .contact-location__btn { width: 100%; max-width: 720px; } @media (max-width: 575.98px) { .contact-map-frame { min-height: 200px; max-height: 260px; } } @media (min-width: 768px) and (max-width: 1199.98px) { .contact-map-frame { max-height: 300px; } } .contact-form { display: flex; flex-direction: column; gap: var(--space-4); max-width: 480px; } .form-field label { display: block; margin-bottom: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text); } .form-field input, .form-field textarea, .form-field select { width: 100%; padding: var(--space-3) var(--space-4); font-family: inherit; font-size: var(--text-base); color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .form-field select { min-height: 2.75rem; line-height: 1.25; cursor: pointer; } .form-field input:focus, .form-field textarea:focus, .form-field select:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); } .btn { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-3) var(--space-6); font-family: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium); border: none; border-radius: var(--radius-md); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast); } .btn--primary { background: var(--color-accent); color: var(--color-accent-text); } .btn--primary:hover { background: var(--color-accent-hover); } /* Footer */ .region__inner--footer { display: flex; flex-direction: column; gap: 0; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-8); width: 100%; } .footer-grid__name { margin: 0 0 var(--space-2); font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--color-text); } .footer-grid__desc { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); max-width: 36ch; } .footer-grid__heading { margin: 0 0 var(--space-3); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text); text-transform: uppercase; letter-spacing: 0.04em; } .footer-grid__list { display: flex; flex-direction: column; gap: var(--space-2); } .footer-grid__list a, .footer-grid__link-btn { font-size: var(--text-sm); color: var(--color-text-subtle); background: none; border: none; padding: 0; font-family: inherit; cursor: pointer; text-align: left; } .footer-grid__list a:hover, .footer-grid__link-btn:hover { color: var(--color-accent); } .footer-grid__meta { font-size: var(--text-sm); color: var(--color-text-muted); } /* Hero de inicio */ .home-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-5); padding: var(--space-10) var(--space-4); margin-bottom: var(--space-4); } .home-hero__brand { margin: 0; font-size: var(--text-3xl); font-weight: var(--weight-semibold); letter-spacing: -0.02em; color: var(--color-text); } .home-hero__tagline { margin: 0; font-size: var(--text-lg); color: var(--color-text-muted); max-width: 48ch; } .home-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; } .footer-nav__list { display: flex; flex-wrap: wrap; gap: var(--space-4); } .footer-nav__list a { font-size: var(--text-sm); color: var(--color-text-subtle); } .footer-nav__list a:hover { color: var(--color-accent); } /* Sidebar nav desde partial compartido */ .nav-list--sidebar { flex-direction: column; } .nav-list--sidebar a { border-left: 2px solid transparent; border-radius: var(--radius-sm); } .nav-list--sidebar a.is-active { border-left-color: var(--color-accent); } .page-body--legal .page-section p { font-size: var(--text-sm); } .page-body--legal .page-section__subtitle { margin: var(--space-4) 0 var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text); } .legal-dl { display: grid; gap: var(--space-3); margin: var(--space-4) 0 0; } .legal-dl > div { display: grid; gap: var(--space-1); } .legal-dl dt { font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); } .legal-dl dd { margin: 0; font-size: var(--text-sm); } .legal-list { margin: var(--space-3) 0; padding-left: 1.25rem; font-size: var(--text-sm); } .legal-list li + li { margin-top: var(--space-2); } .legal-list--ordered { list-style: decimal; } .legal-inline-link { display: inline; padding: 0; font: inherit; color: var(--color-accent); text-decoration: underline; background: none; border: none; cursor: pointer; } .legal-inline-link:hover { color: var(--color-accent-hover); } .legal-table { width: 100%; margin-top: var(--space-3); border-collapse: collapse; font-size: var(--text-xs); } .legal-table th, .legal-table td { padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); text-align: left; vertical-align: top; } .legal-table th { background: var(--color-surface-muted); font-weight: var(--weight-semibold); } .legal-quote { margin: var(--space-3) 0; padding: var(--space-4); border-left: 3px solid var(--color-accent); background: var(--color-surface-muted); font-size: var(--text-sm); } .legal-quote p { margin: 0 0 var(--space-2); } .legal-quote p:last-child { margin-bottom: 0; } .contact-map-fallback { margin: 0; padding: var(--space-5); font-size: var(--text-sm); text-align: center; color: var(--color-text-muted); background: var(--color-surface-muted); border-radius: var(--radius-md); } .contact-map-frame iframe[hidden], .contact-map-fallback[hidden] { display: none !important; } @media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr; gap: var(--space-6); } .home-hero { padding: var(--space-8) var(--space-4); } } /* inlined: auth.css */ /** * Autenticación — modal, formularios y reglas de contraseña */ .header-actions { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; } .auth-user { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-muted); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .btn--sm { padding: var(--space-2) var(--space-4); font-size: var(--text-sm); } .btn--block { width: 100%; } .btn--outline { background: transparent; color: var(--color-text); border: 1px solid var(--color-border); } .btn--outline:hover { background: var(--color-surface-muted); border-color: var(--color-accent); color: var(--color-accent); } .btn--ghost { background: transparent; color: var(--color-text-muted); border: 1px solid transparent; } .btn--ghost:hover { color: var(--color-text); background: var(--color-surface-muted); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } /* Modal */ .auth-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: var(--space-4); } .auth-modal[hidden] { display: none; } .auth-modal__backdrop { position: absolute; inset: 0; background: rgba(28, 28, 26, 0.45); backdrop-filter: blur(2px); } [data-theme="dark"] .auth-modal__backdrop { background: rgba(0, 0, 0, 0.6); } .auth-modal__panel { position: relative; width: 100%; max-width: 420px; max-height: 90dvh; overflow-y: auto; padding: var(--space-8) var(--space-6) var(--space-6); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); } .auth-modal__close { position: absolute; top: var(--space-3); right: var(--space-3); width: 36px; height: 36px; padding: 0; font-size: 1.5rem; line-height: 1; color: var(--color-text-muted); background: transparent; border: none; border-radius: var(--radius-sm); cursor: pointer; } .auth-modal__close:hover { color: var(--color-text); background: var(--color-surface-muted); } .auth-modal__title { margin: 0 0 var(--space-6); font-size: var(--text-xl); text-align: center; } /* Tabs */ .auth-tabs { display: flex; gap: var(--space-1); margin-bottom: var(--space-6); padding: var(--space-1); background: var(--color-surface-muted); border-radius: var(--radius-md); } .auth-tabs__btn { flex: 1; padding: var(--space-2) var(--space-3); font-family: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-muted); background: transparent; border: none; border-radius: var(--radius-sm); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast); } .auth-tabs__btn.is-active { color: var(--color-text); background: var(--color-surface); box-shadow: var(--shadow-sm); } .auth-tabs__btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; } /* Panels */ .auth-panel[hidden] { display: none; } .auth-form { display: flex; flex-direction: column; gap: var(--space-4); } .auth-alert { padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); font-size: var(--text-sm); line-height: 1.45; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface-muted); color: var(--color-text); } .auth-alert[hidden] { display: none !important; } .auth-alert.is-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; } [data-theme="dark"] .auth-alert.is-error { background: #3b1212; color: #fecaca; border-color: #7f1d1d; } .auth-alert.is-success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; } [data-theme="dark"] .auth-alert.is-success { background: #052e21; color: #a7f3d0; border-color: #065f46; } .auth-alert.is-info { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; } [data-theme="dark"] .auth-alert.is-info { background: #172554; color: #bfdbfe; border-color: #1e3a8a; } .auth-form.is-2fa-step [data-auth-login-fields] { opacity: 0.72; } .auth-2fa-step { padding: var(--space-4); border: 1px solid var(--color-accent); border-radius: var(--radius-md); background: var(--color-accent-soft); } .auth-2fa-step__title { margin: 0 0 var(--space-2); font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--color-text); } .auth-2fa-step__hint { margin: 0 0 var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.45; } .auth-2fa-step input { font-size: 1.25rem; letter-spacing: 0.2em; text-align: center; font-variant-numeric: tabular-nums; } .auth-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .auth-consent { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.45; cursor: pointer; } .auth-consent input { margin-top: 0.2rem; flex-shrink: 0; cursor: pointer; } .auth-consent a { color: var(--color-accent); text-decoration: underline; } .auth-consent a:hover { color: var(--color-accent-hover); } .auth-field__box, .password-field__box { position: relative; display: block; width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-sm); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .auth-field__box:focus-within, .password-field__box:focus-within { border-color: var(--color-accent); box-shadow: var(--shadow-sm), 0 0 0 3px var(--color-accent-soft); } .auth-field__box input { display: block; width: 100%; padding: var(--space-3) var(--space-4); border: none; border-radius: var(--radius-md); background: transparent; box-shadow: none; font-family: inherit; font-size: var(--text-base); color: var(--color-text); } .auth-field__box input:focus { outline: none; border: none; box-shadow: none; } .password-field { width: 100%; } .password-field input[data-password-input] { display: block; width: 100%; padding: var(--space-3) calc(var(--space-10) + var(--space-1)) var(--space-3) var(--space-4); border: none; border-radius: var(--radius-md); background: transparent; box-shadow: none; } .password-field input[data-password-input]:focus { outline: none; border: none; box-shadow: none; } .password-field__toggle { position: absolute; top: 0; right: 0; bottom: 0; display: inline-flex; align-items: center; justify-content: center; width: 42px; padding: 0; border: none; border-radius: 0 var(--radius-md) var(--radius-md) 0; background: transparent; color: var(--color-text-muted); cursor: pointer; z-index: 2; transition: color 0.15s ease, background 0.15s ease; } .password-field__toggle:hover { color: var(--color-text); background: var(--color-surface-muted); } .password-field__toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; } .password-field__icon { display: block; pointer-events: none; } .password-field__toggle .password-field__icon--hide { display: none; } .password-field__toggle.is-visible .password-field__icon--show { display: none; } .password-field__toggle.is-visible .password-field__icon--hide { display: block; } /* Reglas de contraseña */ .password-rules { margin: var(--space-3) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-2); } .password-rules__item { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-subtle); transition: color var(--transition-fast); } .password-rules__item.is-valid { color: #15803d; } [data-theme="dark"] .password-rules__item.is-valid { color: #4ade80; } .password-rules__icon { flex-shrink: 0; width: 16px; height: 16px; border: 2px solid var(--color-border); border-radius: 50%; transition: border-color var(--transition-fast), background var(--transition-fast); } .password-rules__item.is-valid .password-rules__icon { border-color: #15803d; background: #15803d; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M6.5 11.5 3 8l1.2-1.2 2.3 2.3 5.3-5.3L13 5z'/%3E%3C/svg%3E"); background-size: 12px; background-position: center; background-repeat: no-repeat; } [data-theme="dark"] .password-rules__item.is-valid .password-rules__icon { border-color: #4ade80; background-color: #4ade80; } .field-hint { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: #15803d; } [data-theme="dark"] .field-hint { color: #4ade80; } .field-hint.is-invalid { color: #b91c1c; } [data-theme="dark"] .field-hint.is-invalid { color: #f87171; } /* Campos con error */ .form-field.is-invalid > label, .auth-consent.is-invalid > span { color: #b91c1c; } [data-theme="dark"] .form-field.is-invalid > label, [data-theme="dark"] .auth-consent.is-invalid > span { color: #f87171; } .form-field.is-invalid > label::after, .auth-consent.is-invalid > span::after { content: ' *'; color: #b91c1c; font-weight: var(--weight-semibold); } [data-theme="dark"] .form-field.is-invalid > label::after, [data-theme="dark"] .auth-consent.is-invalid > span::after { color: #f87171; } .form-field.is-invalid .auth-field__box, .form-field.is-invalid .password-field__box, .form-field.is-invalid > input:not([type="checkbox"]) { border-color: #b91c1c; box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.12); } .form-field.is-invalid .auth-field__box:focus-within, .form-field.is-invalid .password-field__box:focus-within, .form-field.is-invalid > input:not([type="checkbox"]):focus { border-color: #b91c1c; box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.22); } [data-theme="dark"] .form-field.is-invalid .auth-field__box, [data-theme="dark"] .form-field.is-invalid .password-field__box, [data-theme="dark"] .form-field.is-invalid > input:not([type="checkbox"]) { border-color: #f87171; box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.15); } .auth-consent.is-invalid input[type="checkbox"] { outline: 2px solid #b91c1c; outline-offset: 2px; } .password-rules__item.is-invalid { color: #b91c1c; } [data-theme="dark"] .password-rules__item.is-invalid { color: #f87171; } .password-rules__item.is-invalid .password-rules__icon { border-color: #b91c1c; background: #fef2f2; } [data-theme="dark"] .password-rules__item.is-invalid .password-rules__icon { border-color: #f87171; background: #3b1212; } .auth-submit-wrap { width: 100%; } .auth-modal__panel.is-access-blocked .auth-modal__title, .auth-modal__panel.is-access-blocked .auth-tabs, .auth-modal__panel.is-access-blocked .auth-panel, .auth-modal__panel.is-access-blocked .auth-alert { display: none !important; } .access-blocked-panel { text-align: center; padding: 0.25rem 0 0.5rem; } .access-blocked-panel__brand { margin-bottom: 1rem; } .access-blocked-panel__logo { display: block; max-width: min(100%, 200px); max-height: 64px; width: auto; height: auto; margin: 0 auto 0.5rem; object-fit: contain; } .access-blocked-panel__site { margin: 0; font-size: 0.9rem; font-weight: 600; color: var(--color-muted, #64748b); } .access-blocked-panel__title { margin: 0 0 0.65rem; font-size: 1.25rem; font-weight: 700; } .access-blocked-panel__message { margin: 0 0 0.75rem; line-height: 1.55; color: var(--color-text, #334155); } .access-blocked-panel__legend { margin: 0.65rem 0 0; padding: 0.65rem 0.85rem; border-radius: 10px; background: rgba(15, 23, 42, 0.04); border: 1px solid rgba(15, 23, 42, 0.08); font-size: 0.9rem; line-height: 1.45; text-align: left; } [data-theme="dark"] .access-blocked-panel__legend { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.08); } .access-blocked-panel__legend-label { display: block; margin-bottom: 0.2rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-muted, #64748b); } .access-blocked-panel__until { display: block; margin-top: 0.35rem; font-size: 0.82rem; color: var(--color-muted, #64748b); } .access-blocked-panel__code { margin: 0.85rem 0 1rem; font-size: 0.78rem; color: var(--color-muted, #64748b); } /* inlined: support-chat.css */ /* Chatbot de soporte — estilo burbujas (Messenger) */ .support-chat { --support-chat-radius: 20px; --support-chat-bubble-in: var(--color-surface); --support-chat-bubble-out: var(--color-accent); --support-chat-bubble-out-text: var(--color-accent-text); position: relative; right: auto; bottom: auto; z-index: 1; display: flex; flex-direction: column-reverse; align-items: flex-end; gap: var(--space-3); font-family: var(--font-sans); } /* ── Burbuja flotante (FAB) ── */ .support-chat__fab { position: relative; z-index: 2; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; padding: 0; border: none; border-radius: 50%; background: linear-gradient(145deg, var(--color-accent) 0%, var(--color-accent-hover) 100%); color: var(--color-accent-text); cursor: pointer; box-shadow: 0 4px 14px rgba(28, 28, 26, 0.18), 0 8px 28px rgba(28, 28, 26, 0.12); transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease; } .support-chat__fab:hover { transform: scale(1.05); box-shadow: 0 6px 18px rgba(28, 28, 26, 0.22), 0 10px 32px rgba(28, 28, 26, 0.14); } .support-chat__fab:active { transform: scale(0.97); } .support-chat__fab-icon { display: inline-flex; align-items: center; justify-content: center; transition: opacity 0.2s ease, transform 0.2s ease; } .support-chat__fab-icon--close { position: absolute; opacity: 0; transform: rotate(-90deg) scale(0.6); } .support-chat.is-open .support-chat__fab-icon--open { opacity: 0; transform: rotate(90deg) scale(0.6); } .support-chat.is-open .support-chat__fab-icon--close { opacity: 1; transform: rotate(0) scale(1); } .support-chat__badge { position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; padding: 0 6px; border: 2px solid var(--color-surface); border-radius: 999px; background: #e03131; color: #fff; font-size: 0.68rem; font-weight: var(--weight-bold); line-height: 16px; text-align: center; box-shadow: var(--shadow-sm); } .support-chat.is-open .support-chat__badge { display: none; } /* ── Ventana del chat ── */ .support-chat__window { display: none; width: min(380px, calc(100vw - 2rem)); height: min(540px, calc(100vh - 7rem)); flex-direction: column; border: 1px solid var(--color-border-subtle); border-radius: var(--support-chat-radius); background: var(--color-surface); box-shadow: 0 12px 40px rgba(28, 28, 26, 0.16), 0 2px 8px rgba(28, 28, 26, 0.08); overflow: hidden; transform-origin: bottom right; animation: support-chat-pop 0.28s cubic-bezier(0.22, 1, 0.36, 1); } .support-chat__window[hidden] { display: none !important; } .support-chat.is-open .support-chat__window { display: flex; } @keyframes support-chat-pop { from { opacity: 0; transform: translateY(12px) scale(0.94); } to { opacity: 1; transform: translateY(0) scale(1); } } .support-chat__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4); background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%); color: var(--color-accent-text); } .support-chat__header-main { display: flex; align-items: center; gap: var(--space-3); min-width: 0; } .support-chat__avatar { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.18); color: inherit; } .support-chat__header-text { min-width: 0; } .support-chat__title { margin: 0; font-size: var(--text-sm); font-weight: var(--weight-semibold); line-height: 1.3; color: inherit; } .support-chat__status { display: flex; align-items: center; gap: var(--space-2); margin: 2px 0 0; font-size: var(--text-xs, 0.75rem); opacity: 0.92; } .support-chat__status-dot { width: 8px; height: 8px; border-radius: 50%; background: #51cf66; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25); flex-shrink: 0; } .support-chat.is-waiting .support-chat__status-dot { background: #fcc419; } .support-chat.is-with-admin .support-chat__status-dot { background: #74c0fc; } .support-chat__header-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.14); color: inherit; cursor: pointer; transition: background 0.15s ease; } .support-chat__header-btn:hover { background: rgba(255, 255, 255, 0.24); } /* ── Hilo de mensajes (burbujas) ── */ .support-chat__thread { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--space-4) var(--space-3); background: radial-gradient(circle at top right, var(--color-accent-soft) 0%, transparent 42%), var(--color-bg); scroll-behavior: smooth; } .support-chat__row { display: flex; flex-direction: column; margin-bottom: var(--space-3); max-width: 100%; } .support-chat__row--out { align-items: flex-end; } .support-chat__row--in { align-items: flex-start; } .support-chat__bubble { max-width: 82%; padding: 10px 14px; font-size: var(--text-sm); line-height: 1.5; word-break: break-word; white-space: pre-wrap; box-shadow: var(--shadow-sm); } .support-chat__row--out .support-chat__bubble { border-radius: 18px 18px 4px 18px; background: var(--support-chat-bubble-out); color: var(--support-chat-bubble-out-text); } .support-chat__row--in .support-chat__bubble { border-radius: 18px 18px 18px 4px; background: var(--support-chat-bubble-in); color: var(--color-text); border: 1px solid var(--color-border-subtle); } .support-chat__row--in.is-bot .support-chat__bubble { background: var(--color-surface); } .support-chat__row--in.is-admin .support-chat__bubble { border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-border-subtle)); background: var(--color-surface); } .support-chat__meta { margin-top: 4px; padding: 0 6px; font-size: 0.68rem; color: var(--color-text-subtle); line-height: 1.3; } .support-chat__row--out .support-chat__meta { text-align: right; } .support-chat__empty, .support-chat__loading { margin: auto 0; padding: var(--space-6) var(--space-4); text-align: center; color: var(--color-text-muted); font-size: var(--text-sm); } /* ── Pie: chip + compositor ── */ .support-chat__footer { padding: var(--space-3); border-top: 1px solid var(--color-border-subtle); background: var(--color-surface); } .support-chat__chip { display: inline-flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); padding: 6px 12px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface-muted); color: var(--color-text-muted); font: inherit; font-size: var(--text-xs, 0.75rem); cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; } .support-chat__chip:hover { border-color: var(--color-accent); color: var(--color-accent); background: var(--color-accent-soft); } .support-chat__composer { margin: 0; } .support-chat__composer-field { display: flex; align-items: flex-end; gap: var(--space-2); padding: var(--space-2); border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface-muted); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .support-chat__composer-field:focus-within { border-color: var(--color-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 18%, transparent); } .support-chat__composer textarea { flex: 1 1 auto; min-width: 0; min-height: 24px; max-height: 96px; margin: 0; padding: 6px 4px 6px 10px; border: none; background: transparent; resize: none; font: inherit; font-size: var(--text-sm); line-height: 1.45; color: var(--color-text); } .support-chat__composer textarea:focus { outline: none; } .support-chat__send { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex-shrink: 0; padding: 0; border: none; border-radius: 50%; background: var(--color-accent); color: var(--color-accent-text); cursor: pointer; transition: transform 0.15s ease, filter 0.15s ease; } .support-chat__send:hover { filter: brightness(1.06); } .support-chat__send:active { transform: scale(0.94); } /* ── Tema oscuro ── */ [data-theme="dark"] .support-chat__thread { background: radial-gradient(circle at top right, color-mix(in srgb, var(--color-accent) 12%, transparent) 0%, transparent 45%), var(--color-bg); } [data-theme="dark"] .support-chat__row--in .support-chat__bubble, [data-theme="dark"] .support-chat__row--in.is-bot .support-chat__bubble, [data-theme="dark"] .support-chat__row--in.is-admin .support-chat__bubble { background: var(--color-surface-muted); } [data-theme="dark"] .support-chat__badge { border-color: var(--color-bg); } /* ── Móvil ── */ @media (max-width: 480px) { .support-chat__window { width: calc(100vw - 1.25rem); height: min(72vh, 520px); } .support-chat__fab { width: 54px; height: 54px; } } /* inlined: cookie-consent.css */ /* Aviso de consentimiento de cookies */ .cookie-consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1300; padding: var(--space-4); pointer-events: none; } .cookie-consent[hidden] { display: none !important; } .cookie-consent__panel { pointer-events: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); width: min(1120px, 100%); margin: 0 auto; padding: var(--space-4) var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-md), 0 -4px 24px rgba(28, 28, 26, 0.08); } .cookie-consent__content { min-width: 0; } .cookie-consent__title { margin: 0 0 var(--space-2); font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--color-text); } .cookie-consent__text { margin: 0; font-size: var(--text-sm); line-height: 1.5; color: var(--color-text-muted); } .cookie-consent__text a { color: var(--color-accent); text-decoration: underline; } .cookie-consent__text a:hover { color: var(--color-accent-hover); } .cookie-consent__status { margin: var(--space-2) 0 0; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text); } .cookie-consent__actions { display: flex; flex-shrink: 0; flex-wrap: wrap; gap: var(--space-2); } .cookie-consent__actions .btn.is-selected { box-shadow: 0 0 0 2px var(--color-accent-soft); border-color: var(--color-accent); } html.has-cookie-consent .site-float-stack { bottom: calc(var(--space-5) + 5.5rem); } @media (max-width: 768px) { .cookie-consent { padding: var(--space-3); } .cookie-consent__panel { flex-direction: column; align-items: stretch; gap: var(--space-4); padding: var(--space-4); } .cookie-consent__actions { flex-direction: column; } .cookie-consent__actions .btn { width: 100%; } html.has-cookie-consent .site-float-stack { bottom: calc(var(--space-3) + 9.5rem); } } @media print { .cookie-consent { display: none !important; } } /* inlined: newsletter-float.css */ /* Pila flotante: newsletter + chat */ .site-float-stack { position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: 1200; display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); pointer-events: none; } .site-float-stack > * { pointer-events: auto; } @media (max-width: 480px) { .site-float-stack { right: var(--space-3); bottom: var(--space-3); } .newsletter-float__fab { width: 50px; height: 50px; } .newsletter-float__panel { width: calc(100vw - 1.25rem); } } @media print { .site-float-stack { display: none !important; } } .newsletter-float { position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-3); font-family: var(--font-sans); } .newsletter-float__fab { position: relative; z-index: 2; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; padding: 0; border: 1px solid color-mix(in srgb, var(--color-accent) 35%, var(--color-border)); border-radius: 50%; background: var(--color-surface); color: var(--color-accent); cursor: pointer; box-shadow: 0 4px 14px rgba(28, 28, 26, 0.14), 0 8px 24px rgba(28, 28, 26, 0.08); transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, color 0.22s ease, border-color 0.22s ease; } .newsletter-float__fab:hover { transform: scale(1.05); border-color: var(--color-accent); background: var(--color-accent-soft); } .newsletter-float__fab:active { transform: scale(0.98); } .newsletter-float__fab-icon { position: absolute; display: flex; transition: opacity 0.2s ease, transform 0.2s ease; } .newsletter-float__fab-icon--close { opacity: 0; transform: scale(0.75); } .newsletter-float.is-open .newsletter-float__fab { background: linear-gradient(145deg, var(--color-accent) 0%, var(--color-accent-hover) 100%); color: var(--color-accent-text); border-color: transparent; } .newsletter-float.is-open .newsletter-float__fab-icon--open { opacity: 0; transform: scale(0.75); } .newsletter-float.is-open .newsletter-float__fab-icon--close { opacity: 1; transform: scale(1); } .newsletter-float__panel { width: min(20rem, calc(100vw - 2.5rem)); overflow: hidden; border: 1px solid var(--color-border-subtle); border-radius: 18px; background: var(--color-surface); box-shadow: 0 12px 40px rgba(28, 28, 26, 0.16), 0 4px 12px rgba(28, 28, 26, 0.08); animation: newsletter-float-pop 0.26s cubic-bezier(0.22, 1, 0.36, 1); } .newsletter-float__panel[hidden] { display: none !important; } .newsletter-float.is-open .newsletter-float__panel { display: block; } @keyframes newsletter-float-pop { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .newsletter-float__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: var(--space-4); border-bottom: 1px solid var(--color-border-subtle); background: var(--color-surface-muted); } .newsletter-float__header-main { display: flex; align-items: flex-start; gap: var(--space-3); min-width: 0; } .newsletter-float__avatar { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 999px; background: var(--color-accent-soft); color: var(--color-accent); flex-shrink: 0; } .newsletter-float__title { margin: 0; font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text); } .newsletter-float__subtitle { margin: var(--space-1) 0 0; font-size: var(--text-xs); line-height: 1.45; color: var(--color-text-muted); } .newsletter-float__header-btn { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border: none; border-radius: 999px; background: transparent; color: var(--color-text-muted); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast); } .newsletter-float__header-btn:hover { background: var(--color-surface); color: var(--color-text); } .newsletter-float__body { padding: var(--space-4); } .newsletter-float__form { display: flex; flex-direction: column; gap: var(--space-3); } .newsletter-float__form input[type="email"] { width: 100%; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); font: inherit; font-size: var(--text-sm); background: var(--color-surface); color: var(--color-text); } .newsletter-float__form input[type="email"]:focus { outline: 2px solid color-mix(in srgb, var(--color-accent) 35%, transparent); outline-offset: 1px; border-color: var(--color-accent); } .newsletter-float__form .btn { width: 100%; } .newsletter-float__unsubscribe { margin: var(--space-3) 0 0; font-size: var(--text-xs); text-align: center; } .newsletter-float__unsubscribe a { color: var(--color-text-muted); text-decoration: underline; } .newsletter-float__unsubscribe a:hover { color: var(--color-accent); } [data-theme="dark"] .newsletter-float__fab { background: var(--color-surface-muted); } @media print { .newsletter-float { display: none !important; } } /* inlined: mobile.css */ /** * Ajustes responsive — compatibilidad móvil (320px+) */ html { overflow-x: clip; } body { overflow-x: clip; } /* ── Espaciado y tipografía en pantallas pequeñas ── */ @media (max-width: 768px) { :root { --region-padding-x: var(--space-4); --text-3xl: 1.625rem; --text-2xl: 1.375rem; } .region--main .region__inner { padding-block: var(--space-6); } h1 { font-size: var(--text-2xl); } } @media (max-width: 480px) { :root { --region-padding-x: var(--space-3); } } /* ── Cabecera / topbar ── */ @media (max-width: 480px) { .store-topbar__inner { justify-content: stretch; } .store-topbar__links { width: 100%; justify-content: space-between; row-gap: var(--space-2); } .store-topbar__nav { flex: 1 1 100%; justify-content: flex-start; } .store-topbar__meta { display: none; } .store-topbar__lang-btn--indicator { padding: 2px 6px; font-size: 0.7rem; } .store-topbar__links a.store-topbar__user { max-width: 8rem; } } /* ── Barra de herramientas: nav en scroll horizontal ── */ @media (max-width: 768px) { .region--nav.store-toolbar .store-toolbar__inner { grid-template-columns: 1fr auto; grid-template-areas: "nav actions" "search search"; row-gap: var(--space-2); padding-block: var(--space-2); } .store-toolbar__inner .category-nav { grid-area: nav; min-width: 0; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain; } .store-toolbar__inner .category-nav::-webkit-scrollbar { display: none; } .store-toolbar__inner .category-nav__list { flex-wrap: nowrap; width: max-content; max-width: none; } .category-nav__link { white-space: nowrap; padding-inline: var(--space-3); } .category-nav__item--page + .category-nav__item[data-mega-item] .category-nav__link { border-left: none; margin-left: 0; padding-left: var(--space-3); } .store-toolbar__inner .store-search { grid-area: search; } .store-toolbar__inner .store-actions { grid-area: actions; } } @media (max-width: 480px) { .region--nav.store-toolbar .store-toolbar__inner { grid-template-columns: 1fr; grid-template-areas: "nav" "search" "actions"; } .store-toolbar__inner .store-actions { justify-self: stretch; justify-content: center; } } /* ── Inputs: evitar zoom automático en iOS (mín. 16px) ── */ @media (max-width: 768px) { .store-search__input, .store-newsletter input, .newsletter-float__form input[type="email"], .support-chat__composer textarea, .cart-item__qty, .order-chat__form textarea, .form-field input, .form-field textarea, .form-field select, .admin-form input, .admin-form textarea, .admin-form select { font-size: 16px; } } /* ── Comercio y tarjetas ── */ @media (max-width: 480px) { .product-grid { grid-template-columns: 1fr; } .product-card__footer { flex-direction: column; align-items: stretch; } .product-card__footer .btn { width: 100%; } .demo-site-banner { padding: var(--space-3) var(--space-4); } .cart-item { gap: var(--space-3); } .cart-item__controls { flex-wrap: wrap; } } /* ── Modal de autenticación ── */ @media (max-width: 480px) { .auth-modal { padding: var(--space-2); align-items: flex-end; } .auth-modal__panel { max-width: none; max-height: 92dvh; padding: var(--space-6) var(--space-4) var(--space-4); border-bottom-left-radius: 0; border-bottom-right-radius: 0; } } /* ── Elementos fijos: notch / home indicator ── */ .site-float-stack { right: max(var(--space-5), env(safe-area-inset-right, 0px)); bottom: max(var(--space-5), env(safe-area-inset-bottom, 0px)); } @media (max-width: 480px) { .site-float-stack { right: max(var(--space-3), env(safe-area-inset-right, 0px)); bottom: max(var(--space-3), env(safe-area-inset-bottom, 0px)); } } .cookie-consent { padding-left: max(var(--space-4), env(safe-area-inset-left, 0px)); padding-right: max(var(--space-4), env(safe-area-inset-right, 0px)); padding-bottom: max(var(--space-4), env(safe-area-inset-bottom, 0px)); } .admin-drawer__panel { padding-bottom: env(safe-area-inset-bottom, 0px); } /* ── Mapa de contacto ── */ @media (max-width: 480px) { .contact-map-frame { min-height: 180px; } } /* inlined: custom.css */ /** * ═══════════════════════════════════════════════════════════ * PERSONALIZACIÓN DEL CLIENTE * ═══════════════════════════════════════════════════════════ * * Sobrescribe cualquier token o estilo aquí. * Ejemplos (descomenta y ajusta): * * :root { * --color-accent: #2563eb; * --color-accent-hover: #1d4ed8; * --color-accent-soft: #eff6ff; * --color-bg: #ffffff; * --font-sans: "Georgia", serif; * --sidebar-width: 280px; * --radius-md: 12px; * } * * .site-brand { * font-size: var(--text-xl); * color: var(--color-accent); * } */