/* ========================================================================== MOVEMOS PAÍS — DARK THEME -------------------------------------------------------------------------- Overrides de tokens semánticos para modo oscuro. Se activa con [data-theme="dark"] en el , gestionado por site.js. Carga DESPUÉS de tokens.css. ========================================================================== */ [data-theme="dark"] { /* Texto */ --color-text-primary: #e8eaef; --color-text-secondary: #b8bcc6; --color-text-muted: #8a8e98; --color-text-on-brand: #ffffff; --color-text-on-dark: #ffffff; --color-text-on-dark-muted: rgba(255,255,255,0.72); --color-text-link: #6ea2dc; --color-text-link-hover: #99c0e8; --color-text-accent: var(--brand-amarillo-500); /* Superficies (invertidas) */ --color-surface-page: #0d1424; --color-surface-subtle: #131c30; --color-surface-raised: #1a253d; --color-surface-inverse: var(--brand-azul-800); --color-surface-inverse-soft: var(--brand-azul-700); /* Bordes */ --color-border-subtle: rgba(255,255,255,0.08); --color-border-default: rgba(255,255,255,0.16); --color-border-strong: var(--brand-amarillo-500); --color-border-on-dark: rgba(255,255,255,0.16); --color-border-focus: var(--brand-amarillo-500); /* Acción */ --color-action-primary: var(--brand-amarillo-500); --color-action-primary-hover: var(--brand-amarillo-600); --color-action-accent: var(--brand-amarillo-500); --color-action-accent-hover: var(--brand-amarillo-600); /* Sombras (más sutiles en oscuro) */ --shadow-xs: 0 1px 2px rgba(0,0,0,0.3); --shadow-sm: 0 2px 4px rgba(0,0,0,0.35); --shadow-md: 0 6px 12px rgba(0,0,0,0.4); --shadow-lg: 0 12px 24px rgba(0,0,0,0.45); --shadow-xl: 0 24px 48px rgba(0,0,0,0.5); } /* ===== Ajustes específicos por componente en modo oscuro ===== */ [data-theme="dark"] body { background: var(--color-surface-page); color: var(--color-text-primary); } [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: var(--color-text-primary); } [data-theme="dark"] .mp-header { background: var(--color-surface-raised); border-bottom-color: rgba(255,255,255,0.08); } [data-theme="dark"] .mp-header__nav a { color: var(--color-text-secondary); } [data-theme="dark"] .mp-header__nav a:hover, [data-theme="dark"] .mp-header__nav a[aria-current="page"] { color: var(--brand-amarillo-500); border-bottom-color: var(--brand-amarillo-500); } [data-theme="dark"] .mp-header__hamburger { color: var(--color-text-primary); } [data-theme="dark"] .mp-hero { background: var(--color-surface-page); border-bottom-color: var(--color-border-subtle); } [data-theme="dark"] .mp-hero__title { color: var(--color-text-primary); } [data-theme="dark"] .mp-hero__title em { color: var(--brand-amarillo-500); } [data-theme="dark"] .mp-hero__lead { color: var(--color-text-secondary); } [data-theme="dark"] .mp-hero__media { background: var(--color-surface-subtle); } [data-theme="dark"] .mp-card { background: var(--color-surface-raised); border-color: var(--color-border-subtle); } [data-theme="dark"] .mp-card__title { color: var(--color-text-primary); } [data-theme="dark"] .mp-card__body { color: var(--color-text-secondary); } [data-theme="dark"] .mp-card__meta { color: var(--color-text-muted); } [data-theme="dark"] .mp-card__kicker { color: var(--brand-amarillo-500); } [data-theme="dark"] .mp-section--subtle { background: var(--color-surface-subtle); } [data-theme="dark"] .mp-pub { background: var(--color-surface-raised); border-color: var(--color-border-subtle); } [data-theme="dark"] .mp-pub__title { color: var(--color-text-primary); } [data-theme="dark"] .mp-pub__badge { background: rgba(110,162,220,0.18); color: #8fb6e0; } [data-theme="dark"] .mp-pub__badge--draft { background: rgba(255,255,255,0.08); color: var(--color-text-muted); } [data-theme="dark"] .mp-form { background: var(--color-surface-raised); border-color: var(--color-border-subtle); } [data-theme="dark"] .mp-field label { color: var(--color-text-primary); } [data-theme="dark"] .mp-field input, [data-theme="dark"] .mp-field select, [data-theme="dark"] .mp-field textarea { background: var(--color-surface-page); border-color: var(--color-border-default); color: var(--color-text-primary); } [data-theme="dark"] .mp-field input::placeholder, [data-theme="dark"] .mp-field textarea::placeholder { color: var(--color-text-muted); } [data-theme="dark"] .mp-breadcrumb { border-bottom-color: var(--color-border-subtle); color: var(--color-text-muted); } [data-theme="dark"] .mp-breadcrumb a { color: var(--color-text-secondary); } [data-theme="dark"] .mp-breadcrumb [aria-current="page"] { color: var(--color-text-primary); } [data-theme="dark"] .mp-btn--primary { background: var(--brand-amarillo-500); color: var(--brand-azul-800); } [data-theme="dark"] .mp-btn--primary:hover { background: var(--brand-amarillo-600); color: var(--brand-azul-800); } [data-theme="dark"] .mp-btn--ghost { color: var(--color-text-primary); border-color: var(--color-text-primary); } [data-theme="dark"] .mp-btn--ghost:hover { background: var(--color-surface-raised); } [data-theme="dark"] .mp-stat__num { color: var(--color-text-primary); } [data-theme="dark"] .mp-stat__lbl { color: var(--color-text-secondary); } [data-theme="dark"] .org-node { background: var(--color-surface-raised); border-color: var(--color-border-subtle); } [data-theme="dark"] .org-node__title { color: var(--color-text-primary); } [data-theme="dark"] .org-node__role { color: var(--color-text-muted); } [data-theme="dark"] .org-node__desc { color: var(--color-text-secondary); } [data-theme="dark"] .kpi-card { background: var(--color-surface-raised); border-color: var(--color-border-subtle); } [data-theme="dark"] .kpi-card__num { color: var(--color-text-primary); } [data-theme="dark"] .kpi-card__desc { color: var(--color-text-secondary); } [data-theme="dark"] .ledger-table th { background: var(--color-surface-subtle); color: var(--color-text-muted); border-color: var(--color-border-subtle); } [data-theme="dark"] .ledger-table td { border-color: var(--color-border-subtle); } [data-theme="dark"] .ledger-table .num { color: var(--color-text-primary); } [data-theme="dark"] .channel-card__icon { background: rgba(110,162,220,0.18); color: #8fb6e0; } [data-theme="dark"] .channel-card__icon--accent { background: rgba(246,194,15,0.18); color: var(--brand-amarillo-500); } [data-theme="dark"] .mp-link-more { color: var(--brand-amarillo-500); } [data-theme="dark"] .mp-link-more:hover { color: var(--brand-amarillo-600); } [data-theme="dark"] ::selection { background: var(--brand-amarillo-500); color: var(--brand-azul-800); } /* Toggle animation */ .theme-toggle { background: transparent; border: 1px solid var(--color-border-default); border-radius: var(--radius-full); width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; color: var(--color-text-secondary); cursor: pointer; transition: all var(--motion-base) var(--easing-default); margin-right: var(--space-2); } .theme-toggle:hover { border-color: var(--brand-amarillo-500); color: var(--brand-amarillo-500); } .theme-toggle .icon-sun { display: none; } [data-theme="dark"] .theme-toggle .icon-sun { display: inline-block; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; }