/** * The Master Music — esencia visual (referencia: landing DIPAV). * Tokens canónicos --tm-* + alias usados en landings / sitio. * No importa app móvil ni bundles fuera de public/. */ :root { /* Núcleo “Deep Premium” */ --tm-bg-deep: #0f172a; --tm-bg-surface: #1e293b; --tm-bg-elevated: #334155; --tm-text-pearl: #f8fafc; --tm-text-secondary-dark: #cbd5e1; --tm-text-muted: #94a3b8; --tm-text-disabled-dark: #64748b; --tm-line-strong-dark: rgba(255, 255, 255, 0.16); --tm-ink-on-gold: #0a0a0a; --tm-gold: #d4af37; --tm-gold-hover: #fcd34d; --tm-gold-dim: rgba(212, 175, 55, 0.15); --tm-line-soft: rgba(255, 255, 255, 0.08); --tm-error: #ef4444; --tm-success: #10b981; --tm-radius: 12px; --tm-radius-sm: 8px; --tm-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); --tm-shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.4); /* Franjas / contraste (sitio: navy + negro; light puede sobrescribir) */ --tm-bg-section-alt: #000000; --tm-surface-paper: #ffffff; --tm-ink-on-accent: #0a0a0a; --tm-ink-on-paper: #000000; /* Vignette fija del body (negro puro; no slate) */ --tm-vignette-body: linear-gradient(180deg, rgb(0 0 0 / 0.92) 0%, rgb(0 0 0 / 0) 38%), linear-gradient(0deg, rgb(0 0 0 / 0.88) 0%, rgb(0 0 0 / 0) 45%); /* Acento de programa (sobrescriben hojas 04-program-accents por clase en ) */ --tm-prog-primary: var(--tm-gold); --tm-prog-secondary: #64748b; --tm-prog-glow-a: rgba(212, 175, 55, 0.22); --tm-prog-glow-b: rgba(100, 116, 139, 0.18); /* Alias DIPAV / landings */ --bg-deep: var(--tm-bg-deep); --bg-surface: var(--tm-bg-surface); --bg-surface-elevated: var(--tm-bg-elevated); --text-pearl: var(--tm-text-pearl); --text-muted: var(--tm-text-muted); --accent-gold: var(--tm-gold); --accent-gold-hover: var(--tm-gold-hover); --accent-gold-dim: var(--tm-gold-dim); --error: var(--tm-error); --success: var(--tm-success); --radius: var(--tm-radius); --radius-sm: var(--tm-radius-sm); --transition: var(--tm-transition); --shadow-glass: var(--tm-shadow-glass); --border-color: var(--tm-line-soft); --bg-section-alt: var(--tm-bg-section-alt); --surface-paper: var(--tm-surface-paper); --ink-on-accent: var(--tm-ink-on-accent); --ink-on-paper: var(--tm-ink-on-paper); /* * Fase 1 — Roles semánticos (--tm-role-*): alias exclusivos a primitivos --tm-*. * Mismo aspecto; puentes (02/03) y overrides de programa leen desde aquí. * Fase 4 (tema claro): se pueden remapear solo --tm-role-* sin tocar primitivos de marca. */ --tm-role-canvas: var(--tm-bg-deep); --tm-role-surface: var(--tm-bg-surface); --tm-role-surface-elevated: var(--tm-bg-elevated); --tm-role-section-alt: var(--tm-bg-section-alt); --tm-role-text-primary: var(--tm-text-pearl); --tm-role-text-secondary: var(--tm-text-secondary-dark); --tm-role-text-muted: var(--tm-text-muted); --tm-role-text-disabled: var(--tm-text-disabled-dark); --tm-role-border-subtle: var(--tm-line-soft); --tm-role-border-strong: var(--tm-line-strong-dark); --tm-role-accent-ink: var(--tm-ink-on-gold); --tm-role-accent: var(--tm-gold); --tm-role-accent-hover: var(--tm-gold-hover); --tm-role-accent-dim: var(--tm-gold-dim); --tm-role-paper: var(--tm-surface-paper); --tm-role-ink-on-accent: var(--tm-ink-on-accent); --tm-role-ink-on-paper: var(--tm-ink-on-paper); --tm-role-success: var(--tm-success); --tm-role-error: var(--tm-error); --tm-role-vignette-body: var(--tm-vignette-body); /* * Fase 2 — primitivos de soporte (mismos valores que el legado; consumidos por puentes e index). */ --tm-ink-scrim: #000000; --tm-ink-canvas-mix: #000010; --tm-accent-cool: #e2e8f0; --tm-status-ok: #34d399; --tm-status-warn: #fbbf24; --tm-status-danger: #f87171; --tm-surface-glass: rgba(30, 41, 59, 0.88); --tm-surface-glass-hover: rgba(51, 65, 85, 0.92); --tm-surface-landing-card: rgba(30, 41, 59, 0.75); --tm-border-paper: #e5e7eb; --tm-border-on-dark-10: rgba(255, 255, 255, 0.1); --tm-border-on-dark-12: rgba(255, 255, 255, 0.12); --tm-overlay-on-canvas-12: rgba(15, 23, 42, 0.12); --tm-shadow-ambient-50: rgba(0, 0, 0, 0.5); --tm-shadow-ambient-40: rgba(0, 0, 0, 0.4); --tm-shadow-ambient-45: rgba(0, 0, 0, 0.45); --tm-shadow-ambient-30: rgba(0, 0, 0, 0.3); --tm-shadow-accent-glow: rgba(212, 175, 55, 0.25); --tm-shadow-landing-stack: 0 20px 25px -5px var(--tm-shadow-ambient-45), 0 10px 10px -5px var(--tm-shadow-ambient-30); --tm-shadow-landing-soft: 0 4px 6px -1px var(--tm-shadow-ambient-45); --tm-vignette-index-radial-end: rgb(0 0 0 / 0.38); --tm-vignette-index-top: rgb(0 0 0 / 0.97); --tm-vignette-index-fade: rgb(0 0 0 / 0); --tm-vignette-index-bottom: rgb(0 0 0 / 0.94); --tm-role-ink-scrim: var(--tm-ink-scrim); --tm-role-ink-canvas-mix: var(--tm-ink-canvas-mix); --tm-role-accent-cool: var(--tm-accent-cool); --tm-role-status-ok: var(--tm-status-ok); --tm-role-status-warn: var(--tm-status-warn); --tm-role-status-danger: var(--tm-status-danger); --tm-role-surface-glass: var(--tm-surface-glass); --tm-role-surface-glass-hover: var(--tm-surface-glass-hover); --tm-role-surface-landing-card: var(--tm-surface-landing-card); --tm-role-border-paper: var(--tm-border-paper); --tm-role-border-on-dark-10: var(--tm-border-on-dark-10); --tm-role-border-on-dark-12: var(--tm-border-on-dark-12); --tm-role-overlay-on-canvas-12: var(--tm-overlay-on-canvas-12); /* Marcas de programa (badges EMUSINI, referencias cruzadas; alineado a 04-program-accents) */ --tm-brand-mis-amores: #dd96af; --tm-brand-talentos: #8b5cf6; --tm-brand-talentos-muted: #c4b5fd; --tm-brand-encanto: #c41e3a; --tm-brand-encanto-muted: #d4a0a8; --tm-accent-sky: #0ea5e9; --tm-role-brand-mis-amores: var(--tm-brand-mis-amores); --tm-role-brand-talentos: var(--tm-brand-talentos); --tm-role-brand-talentos-muted: var(--tm-brand-talentos-muted); --tm-role-brand-encanto: var(--tm-brand-encanto); --tm-role-brand-encanto-muted: var(--tm-brand-encanto-muted); --tm-role-accent-sky: var(--tm-accent-sky); /* Ruta de aprendizaje (index #comparacion) — secundarios alineados a 04-program-accents */ --tm-path-dipav-primary: var(--tm-gold); --tm-path-dipav-secondary: #94a3b8; --tm-path-misamores-secondary: #36c9cb; --tm-path-talentos-secondary: #5eead4; --tm-path-encanto-secondary: #c9952e; } /* * Sitio / landings (HTML lang="es"): sin guiones automáticos entre sílabas. * Evita cortes tipo «es-cuela»; las palabras pasan línea enteras cuando caben. */ html { hyphens: none; -webkit-hyphens: none; }