/* ============================================================ WEEM Design System — tokens.css v3.0.0 Fuente unica de verdad para color, tipografia y espaciado. Soporta tema claro y oscuro via [data-theme] en . WHITE-LABEL: para recolorear la plataforma entera, editar solo la escala --v-brand-* de abajo. ============================================================ */ :root { /* ---------- Marca (unica escala a tocar para rebrandear) ---------- */ --v-brand-50: #F6F0E6; --v-brand-100: #EEE1CF; --v-brand-200: #E3CEAA; --v-brand-300: #D4B483; --v-brand-400: #C49C61; --v-brand-500: #D4B483; --v-brand-600: #B89562; --v-brand-700: #8B6940; --v-brand-800: #123E45; --v-brand-900: #0D3036; /* ---------- Tipografia ---------- */ --v-font: 'Inter', 'Inter Fallback', system-ui, -apple-system, sans-serif; --v-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --v-text-xs: 0.75rem; --v-text-sm: 0.8125rem; --v-text-base: 0.9375rem; --v-text-lg: 1.0625rem; --v-text-xl: 1.25rem; --v-text-2xl: 1.5rem; --v-text-3xl: 1.875rem; --v-text-4xl: 2.25rem; --v-text-5xl: 3rem; --v-leading-tight: 1.2; --v-leading-snug: 1.4; --v-leading-normal: 1.6; --v-leading-loose: 1.75; --v-tracking-tight: -0.015em; --v-tracking-normal: 0; --v-tracking-wide: 0.04em; --v-tracking-wider: 0.08em; /* ---------- Espaciado (escala de 4) ---------- */ --v-space-1: 4px; --v-space-2: 8px; --v-space-3: 12px; --v-space-4: 16px; --v-space-5: 20px; --v-space-6: 24px; --v-space-8: 32px; --v-space-10: 40px; --v-space-12: 48px; --v-space-16: 64px; /* ---------- Layout ---------- */ --v-container: 1240px; --v-nav-height: 56px; --v-radius-sm: 6px; --v-radius: 8px; --v-radius-lg: 12px; --v-radius-xl: 16px; --v-radius-full: 9999px; /* ---------- Movimiento ---------- */ --v-ease: cubic-bezier(0.4, 0, 0.2, 1); --v-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --v-duration-fast: 0.12s; --v-duration: 0.2s; --v-duration-slow: 0.35s; /* ---------- Capas ---------- */ --v-z-dropdown: 100; --v-z-sticky: 200; --v-z-overlay: 500; --v-z-modal: 1000; --v-z-toast: 2000; --v-z-tooltip: 3000; } /* ============================================================ TEMA OSCURO (default) Grises neutros con leve tinte frio. Sin negro puro: el negro absoluto sobre pantallas OLED crea bordes duros y cansa la vista. ============================================================ */ :root, :root.dark, [data-theme="dark"] { color-scheme: dark; --v-bg: #123E45; --v-surface-1: #164A52; --v-surface-2: #1A535B; --v-surface-3: #205E66; --v-surface-4: #2A6D74; --v-text: #F6F0E6; --v-text-secondary: #E9DFD0; --v-text-muted: #C9C2B6; --v-text-faint: #A6B7B8; --v-border: rgba(246,240,230,0.16); --v-border-hover: rgba(212,180,131,0.58); --v-border-strong:rgba(246,240,230,0.34); --v-overlay: rgba(13,48,54,0.78); --v-glass: rgba(246,240,230,0.055); --v-glass-hover: rgba(246,240,230,0.09); /* Semanticos calibrados para fondo oscuro */ --v-success: #47C98A; --v-warning: #F2B544; --v-error: #F27E76; --v-info: #6FAEFF; --v-primary: #B59CF0; --v-success-soft: rgba(71,201,138,0.14); --v-warning-soft: rgba(242,181,68,0.14); --v-error-soft: rgba(242,126,118,0.14); --v-info-soft: rgba(111,174,255,0.14); --v-primary-soft: rgba(181,156,240,0.14); --v-brand-soft: rgba(212,180,131,0.16); --v-accent-text: #D4B483; --v-shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --v-shadow: 0 2px 8px rgba(0,0,0,0.45); --v-shadow-lg: 0 8px 24px rgba(0,0,0,0.5); --v-shadow-xl: 0 16px 48px rgba(0,0,0,0.6); /* Glows retirados del sistema: se conservan como no-op para compatibilidad con paginas que todavia los referencian. */ --v-glow-sm: none; --v-glow-md: none; --v-glow-lg: none; } /* ============================================================ TEMA CLARO ============================================================ */ :root.light, [data-theme="light"], [data-theme="claro"] { color-scheme: light; --v-bg: #F6F0E6; --v-surface-1: #FFFDF9; --v-surface-2: #EEE6D9; --v-surface-3: #E4D7C3; --v-surface-4: #D7C5AA; --v-text: #123E45; --v-text-secondary: #31555B; --v-text-muted: #5F7273; --v-text-faint: #748586; --v-border: rgba(18,62,69,0.14); --v-border-hover: rgba(18,62,69,0.32); --v-border-strong:rgba(18,62,69,0.48); --v-overlay: rgba(18,62,69,0.50); --v-glass: rgba(18,62,69,0.04); --v-glass-hover: rgba(18,62,69,0.08); /* Semanticos oscurecidos para contraste AA sobre blanco */ --v-success: #1E8E57; --v-warning: #B87A08; --v-error: #C8443B; --v-info: #2264C2; --v-primary: #6E4FC4; --v-success-soft: rgba(30,142,87,0.12); --v-warning-soft: rgba(184,122,8,0.12); --v-error-soft: rgba(200,68,59,0.10); --v-info-soft: rgba(34,100,194,0.10); --v-primary-soft: rgba(110,79,196,0.10); --v-brand-soft: rgba(212,180,131,0.18); --v-accent-text: #B89562; --v-shadow-sm: 0 1px 2px rgba(15,18,24,0.06); --v-shadow: 0 2px 8px rgba(15,18,24,0.07); --v-shadow-lg: 0 8px 24px rgba(15,18,24,0.10); --v-shadow-xl: 0 16px 48px rgba(15,18,24,0.14); --v-glow-sm: none; --v-glow-md: none; --v-glow-lg: none; } /* Transicion suave al cambiar de tema (solo colores) */ :root.v-theme-anim, :root.v-theme-anim * { transition: background-color 0.18s var(--v-ease), border-color 0.18s var(--v-ease), color 0.18s var(--v-ease) !important; } /* ============================================================ Base ============================================================ */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } ::selection { background: var(--v-brand-500); color: #fff; } /* Scrollbars discretas y coherentes con el tema */ * { scrollbar-width: thin; scrollbar-color: var(--v-border-hover) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--v-border-hover); border-radius: var(--v-radius-full); border: 3px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: var(--v-border-strong); background-clip: content-box; } /* ============================================================ Accesibilidad ============================================================ */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--v-brand-500); outline-offset: 2px; border-radius: var(--v-radius-sm); } a:focus:not(:focus-visible), button:focus:not(:focus-visible) { outline: none; } .v-skip-link { position: absolute; top: -100%; left: 16px; z-index: 99999; padding: 10px 20px; background: var(--v-brand-500); color: #fff; font-weight: 600; font-size: var(--v-text-sm); border-radius: var(--v-radius); text-decoration: none; transition: top 0.2s; } .v-skip-link:focus { top: 16px; } .v-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } @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; } } @media (pointer: coarse) { button, a[role="button"], [role="button"] { min-height: 44px; } } /* ============================================================ COMPATIBILIDAD CON PAGINAS DISENADAS EN OSCURO ------------------------------------------------------------ Las landings usan utilidades de Tailwind con color fijo (text-white, text-gray-400...) porque nacieron dark-first. En modo claro eso da texto blanco sobre fondo blanco. Regla: si el elemento NO trae su propio fondo (bg-*, boton, badge), el color fijo se reemplaza por el token de texto. Los botones rojos y las insignias conservan su blanco, que ahi si es correcto. ============================================================ */ :root.light body.text-white { color: var(--v-text); } :root.light .text-white:not([class*="bg-"]):not(button):not(.btn):not([class*="btn-"]):not(a[class*="cta"]) { color: var(--v-text); } :root.light .text-gray-300:not([class*="bg-"]), :root.light .text-gray-400:not([class*="bg-"]) { color: var(--v-text-muted); } :root.light .text-gray-500:not([class*="bg-"]) { color: var(--v-text-faint); } /* Titulos con degradado: el tramo blanco desaparece sobre fondo claro. Se reemplaza el blanco por el color de texto del tema. */ :root.light .gradient-text { background-image: linear-gradient(135deg, var(--v-text) 0%, var(--v-brand-500) 100%) !important; } /* Bordes y separadores fijos en blanco translucido */ :root.light [class*="border-white"] { border-color: var(--v-border) !important; } /* Superficies oscuras fijas de Tailwind dentro de secciones claras */ :root.light .bg-black, :root.light [class*="bg-neutral-9"], :root.light [class*="bg-gray-9"] { background-color: var(--v-surface-2) !important; color: var(--v-text); } /* ───────────────────────────────────────────────────────────────────── PIE PEGADO AL FONDO Cuando una pagina tiene poco contenido —el pipeline vacio, por ejemplo— el footer quedaba a media pantalla y abajo sobraba una franja en blanco. El body pasa a columna y el pie se empuja al final. Ningun archivo del sitio declara `display` sobre , asi que esto no pisa nada. ───────────────────────────────────────────────────────────────────── */ body { min-height: 100dvh; display: flex; flex-direction: column; } /* El contenido principal se estira para ocupar lo que sobra. El width:100% no es decorativo y me costo un bug: al volver el body un contenedor flex, sus hijos dejan de comportarse como bloques. Un hijo con `margin: 0 auto` —que es como estan casi todos los contenedores del sitio— pasa a medir lo que mide su contenido y se centra, en vez de ocupar el ancho completo. Eso hacia que /pedidos cargara ancho con el esqueleto y se encogiera al terminar, porque el contenido final ocupaba menos. Fijando el ancho, el hijo tiene una medida definida y ya no depende de lo que haya adentro. El centrado por max-width sigue funcionando igual. */ body > main, body > .app, body > .container, body > #main, body > nav, body > header, body > footer, body > .v-footer { width: 100%; } body > main, body > .app, body > .container, body > #main { flex: 1 0 auto; } body > footer, body > .v-footer { margin-top: auto; flex-shrink: 0; } /* Los overlays fijos no participan del flujo: que no metan huecos */ body > .modal-overlay, body > [id$="Modal"], body > .toast { flex: 0 0 auto; }