/* PLANODUS 1.0 | 2026-09-18 | sRGB. Usar solo pares autorizados. */
:root {
  color-scheme: light;
  --brand-core: #333A56;
  --brand-50: #F0F1F6; --brand-100: #DBDEEA;
  --brand-200: #B6BDD1; --brand-300: #8C96B4;
  --brand-400: #667493; --brand-500: #4B5778;
  --brand-600: #333A56; --brand-700: #282F47;
  --brand-800: #1E2338; --brand-900: #141827;
  --bg: #F6F7FA; --surface: #FFFFFF; --surface-raised: #F0F1F6;
  --text: #1E2338; --text-muted: #5D6477; --on-core: #FFFFFF;
  --border: #7C8297; --divider: #DBDEEA;
  --channel-accent: #333A56; --channel-hover: #282F47;
  --channel-soft: #F0F1F6; --on-accent: #FFFFFF;
  --action: var(--channel-accent); --action-hover: var(--channel-hover);
  --action-text: var(--on-accent); --link: var(--channel-accent);
  --focus: #333A56; --focus-gap: #FFFFFF;
  --success: #176545; --success-bg: #EAF5EE;
  --warning: #875600; --warning-bg: #FFF4D8;
  --error: #B12F3D; --error-bg: #FDEDF0;
  --info: #255AB0; --info-bg: #EAF1FE;
  --neutral: #505A70; --neutral-bg: #EFF1F5;
  --chart-1: #333A56; --chart-2: #6446B5;
  --chart-3: #006E79; --chart-4: #9A3D0C;
  --chart-5: #255AB0; --chart-6: #505A70;
  --font-display: "Space Grotesk", Arial, sans-serif;
  --font-ui: "Inter", Arial, sans-serif;
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px;
  --space-4: 16px; --space-6: 24px; --space-8: 32px;
  --space-12: 48px; --space-16: 64px;
  --motion-fast: 120ms; --motion-base: 200ms; --motion-enter: 320ms;
  --motion-ease: cubic-bezier(.2, 0, 0, 1);
}
[data-channel="venture"] {
  --channel-accent: #9A3D0C; --channel-hover: #7A2E06;
  --channel-soft: #FFF1E8;
}
[data-channel="didactic"] {
  --channel-accent: #6446B5; --channel-hover: #4E338F;
  --channel-soft: #F2EDFC;
}
[data-channel="practice"] {
  --channel-accent: #006E79; --channel-hover: #00545D;
  --channel-soft: #E7F5F6;
}
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #141827; --surface: #1E2338; --surface-raised: #282F47;
  --text: #F3F4F9; --text-muted: #B6BDD1;
  --border: #8990A6; --divider: #4B5778;
  --channel-accent: #C4CBDE; --channel-hover: #DBDEEA;
  --channel-soft: #282F47; --on-accent: #141827;
  --focus: #F3F4F9; --focus-gap: #141827;
  --success: #88D7AC; --success-bg: #18352B;
  --warning: #F5D184; --warning-bg: #352C18;
  --error: #FFAFB8; --error-bg: #3A202A;
  --info: #A9C8FF; --info-bg: #1D2D49;
  --neutral: #C4CBDE; --neutral-bg: #2B3041;
  --chart-1: #C4CBDE; --chart-2: #C6B5FF;
  --chart-3: #86D4DB; --chart-4: #FFC29F;
  --chart-5: #A9C8FF; --chart-6: #F5D184;
}
[data-theme="dark"][data-channel="venture"] {
  --channel-accent: #FFC29F; --channel-hover: #FFD5BB;
  --channel-soft: #332821;
}
[data-theme="dark"][data-channel="didactic"] {
  --channel-accent: #C6B5FF; --channel-hover: #D9CCFF;
  --channel-soft: #2B2441;
}
[data-theme="dark"][data-channel="practice"] {
  --channel-accent: #86D4DB; --channel-hover: #ACE7EB;
  --channel-soft: #163138;
}
body { background: var(--bg); color: var(--text); font-family: var(--font-ui); }
h1, h2, h3 { font-family: var(--font-display); }
a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.button-primary { background: var(--action); color: var(--action-text); border: 1px solid var(--action); min-height: 44px; padding: 12px 20px; border-radius: var(--radius-md); }
.button-primary:hover { background: var(--action-hover); }
input, select, textarea { color: var(--text); background: var(--surface); border: 1px solid var(--border); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; box-shadow: 0 0 0 3px var(--focus-gap); }
.numeric { font-variant-numeric: tabular-nums lining-nums; text-align: right; }
.status-error { color: var(--error); background: var(--error-bg); border: 1px solid var(--error); }
.status-warning { color: var(--warning); background: var(--warning-bg); border: 1px solid var(--warning); }
.status-success { color: var(--success); background: var(--success-bg); border: 1px solid var(--success); }
.status-info { color: var(--info); background: var(--info-bg); border: 1px solid var(--info); }
.status-neutral { color: var(--neutral); background: var(--neutral-bg); border: 1px solid var(--neutral); }
.brand-enter { animation: planodus-enter var(--motion-enter) var(--motion-ease) both; }
@keyframes planodus-enter { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.brand-loading { animation: planodus-loading 1200ms ease-in-out infinite; }
@keyframes planodus-loading { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }