/* ═══════════════════════════════════════════════════════════════════ TREND2YOU — Design Tokens Arquitectura en 3 capas: 1. :root → valores por defecto (tema claro · acento navy) 2. [data-theme=dark] → overrides de neutros para el modo oscuro 3. [data-accent=…] → overrides del acento cromático 4. [data-theme=dark][data-accent=…] → combo para afinar legibilidad Todos los componentes consumen los tokens "efectivos" (--color-accent, --color-bg, …). Nunca hardcodear un hex en una pantalla. Selectores del tema se fijan en desde un boot inline antes del primer paint (ver views/layout/head.php). ═══════════════════════════════════════════════════════════════════ */ :root { /* Marcador sentinela: el guard inline de head.php comprueba que esta variable exista para confirmar que el CSS se aplicó. Si falta, re-pide las hojas / recarga (recupera al usuario de un "texto plano"). */ --t2y-css-ok: 1; /* ─── Neutros · tema claro ─── */ --color-bg: #FAFAF7; --color-surface: #FFFFFF; --color-surface-alt: #F7F5EF; /* hover ligero sobre surface */ --color-border: #EDECE6; --color-border-strong: #E2E0D8; --color-text: #111110; --color-text-muted: #6B6A63; --color-text-subtle: #A09E95; --color-row-hover: #FBFAF5; --color-row-selected: #F2EFE8; --color-sidebar-active: #F2F0EA; --color-on-accent: #FFFDF8; /* texto sobre accent */ /* ─── Acento · por defecto NAVY (identidad Trend2You) ─── */ --color-accent: #1A3A52; --color-accent-hover: #142D41; --color-accent-soft: #E3EAF0; --color-accent-soft-fg: #1A3A52; /* ─── Estados de cliente (coherentes entre temas) ─── */ --color-state-active: #5C7A4E; --color-state-active-bg: #E8EEDF; --color-state-prospect: #B8860B; --color-state-prospect-bg: #F5EBD2; --color-state-in_progress: #4A6B8F;--color-state-in_progress-bg: #E1E9F0; --color-state-lost: #A09E95; --color-state-lost-bg: #EDECE6; --color-state-blocked: #8B3A3A; --color-state-blocked-bg: #EDDCDC; /* ─── Tags de tipología (sober pastels, claro) ─── */ --tag-boutique-bg: #EFE8E0; --tag-boutique-fg: #6E5944; --tag-concept-bg: #E6E8EA; --tag-concept-fg: #4A545C; --tag-multimarca-bg:#EAE6EE; --tag-multimarca-fg:#574C67; --tag-calzado-bg: #ECE4DA; --tag-calzado-fg: #6B5637; --tag-mujer-bg: #F0E3E3; --tag-mujer-fg: #7A4A4A; --tag-hombre-bg: #DDE3E2; --tag-hombre-fg: #3F5654; --tag-nino-bg: #E4E9DD; --tag-nino-fg: #4F6143; --tag-accesorios-bg:#ECE7DB; --tag-accesorios-fg:#6A5B3A; /* ─── Notas · tipos de timeline ─── */ --note-visita-bg: #E8EEDF; --note-visita-fg: #5C7A4E; --note-llamada-bg: #E6E8EA; --note-llamada-fg: #4A545C; --note-email-bg: #EAE6EE; --note-email-fg: #574C67; --note-whatsapp-bg: #E8EEDF; --note-whatsapp-fg: #5C7A4E; --note-reunion-bg: var(--color-accent-soft); --note-reunion-fg: var(--color-accent); --note-nota-bg: #ECE4DA; --note-nota-fg: #6B5637; /* ─── Stage (fondo neutro bajo mobile devices y mapa) ─── */ --color-stage: #E9E5DB; /* ─── Mapa estilizado (Iberia) ─── */ --map-stage: #F4F1E9; --map-sea: #ECE8DC; --map-land: #FAF7ED; --map-portugal: #F7F3E5; --map-border: #D9D3C0; --map-label: #A09A85; /* ─── Tipografía ─── */ --font-serif: "Instrument Serif", "Tiempos Headline", "Canela", Georgia, serif; --font-sans: "Inter", "Söhne", "Neue Haas Grotesk", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --fs-display: 56px; --lh-display: 1.02; --fs-h1: 40px; --lh-h1: 1.1; --fs-h2: 28px; --lh-h2: 1.15; --fs-h3: 20px; --lh-h3: 1.25; --fs-body: 14px; --lh-body: 1.5; --fs-sm: 13px; --lh-sm: 1.45; --fs-xs: 11px; --lh-xs: 1.4; /* ─── Espaciado / radios / sombras / motion ─── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-pill: 999px; --shadow-1: 0 1px 2px rgba(0,0,0,.04); --shadow-2: 0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.04); --shadow-focus: 0 0 0 3px rgba(26,58,82,.18); --ease: cubic-bezier(.2,.7,.3,1); --dur-fast: 120ms; --dur: 180ms; } /* ════════════════════════════════════════════════════════════════════ 2 · Dark theme — overrides de neutros ════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] { --color-bg: #141411; --color-surface: #1C1C19; --color-surface-alt: #222220; --color-border: #2A2925; --color-border-strong: #3A3833; --color-text: #EDECE6; --color-text-muted: #9B9A92; --color-text-subtle: #6E6D65; --color-row-hover: #201F1C; --color-row-selected: #26251F; --color-sidebar-active: #24231F; --color-on-accent: #141411; --color-stage: #0E0E0C; /* Estados cliente – versiones dark */ --color-state-active: #8FB077; --color-state-active-bg: #1F2D17; --color-state-prospect: #D4A63E; --color-state-prospect-bg: #2E2616; --color-state-in_progress: #8FAACC; --color-state-in_progress-bg: #1A2433; --color-state-lost: #8A8881; --color-state-lost-bg: #25241F; --color-state-blocked: #C97D7D; --color-state-blocked-bg: #2E1F1F; /* Tags – tintes oscuros */ --tag-boutique-bg: #2B221B; --tag-boutique-fg: #C6A580; --tag-concept-bg: #21262B; --tag-concept-fg: #9AA4AC; --tag-multimarca-bg:#262132; --tag-multimarca-fg:#A395B5; --tag-calzado-bg: #2B2319; --tag-calzado-fg: #BD9D6D; --tag-mujer-bg: #2B1F1F; --tag-mujer-fg: #C99696; --tag-hombre-bg: #1E2625; --tag-hombre-fg: #81A8A4; --tag-nino-bg: #212A1F; --tag-nino-fg: #95B085; --tag-accesorios-bg:#2A2319; --tag-accesorios-fg:#B89F6B; /* Notas dark */ --note-visita-bg: #1F2D17; --note-visita-fg: #8FB077; --note-llamada-bg: #21262B; --note-llamada-fg: #9AA4AC; --note-email-bg: #262132; --note-email-fg: #A395B5; --note-whatsapp-bg: #1F2D17; --note-whatsapp-fg: #8FB077; --note-reunion-bg: var(--color-accent-soft); --note-reunion-fg: var(--color-accent-soft-fg); --note-nota-bg: #2B2319; --note-nota-fg: #BD9D6D; /* Mapa dark */ --map-stage: #1A1916; --map-sea: #1D1C18; --map-land: #272624; --map-portugal: #22211F; --map-border: #3E3C36; --map-label: #6E6D65; --shadow-1: 0 1px 2px rgba(0,0,0,.35); --shadow-2: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.35); --shadow-focus: 0 0 0 3px rgba(160,200,230,.22); } /* ════════════════════════════════════════════════════════════════════ 3 · Acentos (light) — sobrescriben solo la familia --color-accent-* Navy es el default de :root. Sólo se exponen 2 acentos al usuario (navy + terracotta) para rationar el accent a "acción primaria" y simplificar mantenimiento — auditoría 2026-05-04 §Design. ════════════════════════════════════════════════════════════════════ */ [data-accent="navy"] { --color-accent: #1A3A52; --color-accent-hover: #142D41; --color-accent-soft: #E3EAF0; --color-accent-soft-fg: #1A3A52; --shadow-focus: 0 0 0 3px rgba(26,58,82,.18); } [data-accent="terracotta"] { --color-accent: #8B2A2A; --color-accent-hover: #721F1F; --color-accent-soft: #F2E5E2; --color-accent-soft-fg: #8B2A2A; --shadow-focus: 0 0 0 3px rgba(139,42,42,.18); } /* ════════════════════════════════════════════════════════════════════ 4 · Acentos en dark — se aclaran para garantizar contraste AA sobre superficies oscuras. El "soft" pasa a ser un tinte oscuro. ════════════════════════════════════════════════════════════════════ */ [data-theme="dark"][data-accent="navy"] { --color-accent: #7DA5C4; --color-accent-hover: #9BBBD6; --color-accent-soft: #1E2C3A; --color-accent-soft-fg: #A6C4DC; --shadow-focus: 0 0 0 3px rgba(125,165,196,.28); } [data-theme="dark"][data-accent="terracotta"] { --color-accent: #D47868; --color-accent-hover: #E29484; --color-accent-soft: #34221F; --color-accent-soft-fg: #E09584; --shadow-focus: 0 0 0 3px rgba(212,120,104,.28); }