/* Colores del diseño aprobado: gris carbón con naranja (oscuro) y su versión clara. */
:root,
[data-theme='dark'] {
  --bg: #1c1d20;
  --side: #212226;
  --topbar: #212226;
  --surface: #27282c;
  --surface-2: #2e2f34;
  --thead: #2b2c31;
  --border: #37383e;
  --text: #ececee;
  --muted: #a4a6ad;
  --accent: #ec8a46;
  --on-accent: #1d1108;
  --accent-soft: rgba(236, 138, 70, 0.14);
  --good: #5ccf86;
  --good-soft: rgba(92, 207, 134, 0.14);
  --warn: #f1c04f;
  --bad: #f0716b;
  --bad-soft: rgba(240, 113, 107, 0.14);
  --info: #64a3ff;
  --on-pill: #17181a;
  --track: #37383e;
  --nav-idle: #27282c;
  --icon-idle: #323338;
  --icon-on: rgba(0, 0, 0, 0.14);
  --overlay: rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}

[data-theme='light'] {
  --bg: #f2f2f4;
  --side: #ffffff;
  --topbar: #ffffff;
  --surface: #ffffff;
  --surface-2: #f6f6f8;
  --thead: #f4f4f6;
  --border: #e1e1e6;
  --text: #18191c;
  --muted: #5b5e66;
  --accent: #c1531a;
  --on-accent: #ffffff;
  --accent-soft: rgba(193, 83, 26, 0.09);
  --good: #177a3f;
  --good-soft: rgba(23, 122, 63, 0.1);
  --warn: #93640a;
  --bad: #c0302c;
  --bad-soft: rgba(192, 48, 44, 0.09);
  --info: #1f5fcf;
  --on-pill: #ffffff;
  --track: #e6e6ea;
  --nav-idle: #f4f4f6;
  --icon-idle: #e9e9ed;
  --icon-on: rgba(255, 255, 255, 0.2);
  --overlay: rgba(20, 20, 24, 0.45);
  color-scheme: light;
}

/* ───── Paletas (cada usuario elige la suya en «Mi cuenta»; naranja es la de arriba) ───── */
[data-palette='azul'],
[data-palette='azul'][data-theme='dark'] {
  --accent: #5b9cff;
  --on-accent: #06142b;
  --accent-soft: rgba(91, 156, 255, 0.14);
}
[data-palette='azul'][data-theme='light'] {
  --accent: #1f5fcf;
  --on-accent: #ffffff;
  --accent-soft: rgba(31, 95, 207, 0.09);
}
[data-palette='esmeralda'],
[data-palette='esmeralda'][data-theme='dark'] {
  --accent: #34c98a;
  --on-accent: #03160d;
  --accent-soft: rgba(52, 201, 138, 0.14);
}
[data-palette='esmeralda'][data-theme='light'] {
  --accent: #0f7a4f;
  --on-accent: #ffffff;
  --accent-soft: rgba(15, 122, 79, 0.09);
}
[data-palette='morado'],
[data-palette='morado'][data-theme='dark'] {
  --accent: #a67cff;
  --on-accent: #150a2c;
  --accent-soft: rgba(166, 124, 255, 0.14);
}
[data-palette='morado'][data-theme='light'] {
  --accent: #6a3dcc;
  --on-accent: #ffffff;
  --accent-soft: rgba(106, 61, 204, 0.09);
}
[data-palette='rosa'],
[data-palette='rosa'][data-theme='dark'] {
  --accent: #ff6fae;
  --on-accent: #2a0617;
  --accent-soft: rgba(255, 111, 174, 0.14);
}
[data-palette='rosa'][data-theme='light'] {
  --accent: #c2185b;
  --on-accent: #ffffff;
  --accent-soft: rgba(194, 24, 91, 0.09);
}
[data-palette='rojo'],
[data-palette='rojo'][data-theme='dark'] {
  --accent: #ff655d;
  --on-accent: #2a0806;
  --accent-soft: rgba(255, 101, 93, 0.14);
}
[data-palette='rojo'][data-theme='light'] {
  --accent: #bf2d29;
  --on-accent: #ffffff;
  --accent-soft: rgba(191, 45, 41, 0.09);
}
[data-palette='turquesa'],
[data-palette='turquesa'][data-theme='dark'] {
  --accent: #2ec4c4;
  --on-accent: #031819;
  --accent-soft: rgba(46, 196, 196, 0.14);
}
[data-palette='turquesa'][data-theme='light'] {
  --accent: #0d7680;
  --on-accent: #ffffff;
  --accent-soft: rgba(13, 118, 128, 0.09);
}
[data-palette='ambar'],
[data-palette='ambar'][data-theme='dark'] {
  --accent: #f5b83d;
  --on-accent: #231703;
  --accent-soft: rgba(245, 184, 61, 0.14);
}
[data-palette='ambar'][data-theme='light'] {
  --accent: #8f5d00;
  --on-accent: #ffffff;
  --accent-soft: rgba(143, 93, 0, 0.09);
}
[data-palette='indigo'],
[data-palette='indigo'][data-theme='dark'] {
  --accent: #7d8bff;
  --on-accent: #0c0f30;
  --accent-soft: rgba(125, 139, 255, 0.14);
}
[data-palette='indigo'][data-theme='light'] {
  --accent: #3e4ed6;
  --on-accent: #ffffff;
  --accent-soft: rgba(62, 78, 214, 0.09);
}
[data-palette='lima'],
[data-palette='lima'][data-theme='dark'] {
  --accent: #a3d936;
  --on-accent: #121a02;
  --accent-soft: rgba(163, 217, 54, 0.14);
}
[data-palette='lima'][data-theme='light'] {
  --accent: #4f720b;
  --on-accent: #ffffff;
  --accent-soft: rgba(79, 114, 11, 0.09);
}

:root {
  --font: 'Inter', system-ui, sans-serif;
  --font-head: 'Poppins', 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --radius: 10px;
  --radius-lg: 14px;
  --topbar-h: 64px;
  --sidebar-w: 264px;
}

/* ───── Fondo y tarjetas (cada usuario elige uno para el modo oscuro y otro para el claro; los de arriba son «carbón» y «blanco») ───── */
[data-theme='dark'][data-dark-bg='negro'] {
  --bg: #0b0b0c;
  --side: #111113;
  --topbar: #111113;
  --surface: #161618;
  --surface-2: #1c1c1f;
  --thead: #19191c;
  --border: #26262a;
  --track: #26262a;
  --nav-idle: #161618;
  --icon-idle: #202024;
}
[data-theme='dark'][data-dark-bg='noche'] {
  --bg: #0f1623;
  --side: #131c2b;
  --topbar: #131c2b;
  --surface: #182234;
  --surface-2: #1d2940;
  --thead: #1a2539;
  --border: #27354e;
  --track: #27354e;
  --nav-idle: #182234;
  --icon-idle: #212e46;
}
[data-theme='dark'][data-dark-bg='grafito'] {
  --bg: #24262b;
  --side: #2a2d33;
  --topbar: #2a2d33;
  --surface: #30333a;
  --surface-2: #373a42;
  --thead: #33363d;
  --border: #43464f;
  --track: #43464f;
  --nav-idle: #30333a;
  --icon-idle: #3a3d45;
}
[data-theme='dark'][data-dark-bg='ciruela'] {
  --bg: #1a1520;
  --side: #201a28;
  --topbar: #201a28;
  --surface: #261f30;
  --surface-2: #2d2539;
  --thead: #2a2235;
  --border: #3b3148;
  --track: #3b3148;
  --nav-idle: #261f30;
  --icon-idle: #31283d;
}
[data-theme='dark'][data-dark-bg='bosque'] {
  --bg: #111a16;
  --side: #16211c;
  --topbar: #16211c;
  --surface: #1b2822;
  --surface-2: #212f29;
  --thead: #1e2b25;
  --border: #2d3e36;
  --track: #2d3e36;
  --nav-idle: #1b2822;
  --icon-idle: #25342d;
}
[data-theme='light'][data-light-bg='perla'] {
  --bg: #e9eaee;
  --side: #f7f7f9;
  --topbar: #f7f7f9;
  --surface: #fbfbfc;
  --surface-2: #f1f2f5;
  --thead: #eef0f3;
  --border: #d8dae0;
  --track: #d8dae0;
  --nav-idle: #fbfbfc;
  --icon-idle: #e3e5ea;
}
[data-theme='light'][data-light-bg='arena'] {
  --bg: #f2ede4;
  --side: #fbf8f2;
  --topbar: #fbf8f2;
  --surface: #fffdf9;
  --surface-2: #f7f2e9;
  --thead: #f4eee3;
  --border: #e4dbcb;
  --track: #e4dbcb;
  --nav-idle: #fffdf9;
  --icon-idle: #ece4d5;
}
[data-theme='light'][data-light-bg='hielo'] {
  --bg: #e9eff7;
  --side: #f8fbfe;
  --topbar: #f8fbfe;
  --surface: #ffffff;
  --surface-2: #f2f6fb;
  --thead: #edf2f9;
  --border: #d6e0ed;
  --track: #d6e0ed;
  --nav-idle: #ffffff;
  --icon-idle: #e3eaf4;
}
[data-theme='light'][data-light-bg='menta'] {
  --bg: #e7f2ec;
  --side: #f7fcf9;
  --topbar: #f7fcf9;
  --surface: #ffffff;
  --surface-2: #f0f8f3;
  --thead: #eaf4ee;
  --border: #d3e6db;
  --track: #d3e6db;
  --nav-idle: #ffffff;
  --icon-idle: #e0eee6;
}
[data-theme='light'][data-light-bg='lavanda'] {
  --bg: #eeebf7;
  --side: #faf9fd;
  --topbar: #faf9fd;
  --surface: #ffffff;
  --surface-2: #f5f3fb;
  --thead: #f0edf9;
  --border: #dfd9ef;
  --track: #dfd9ef;
  --nav-idle: #ffffff;
  --icon-idle: #e8e4f5;
}

/* ───── Más fondos para el modo oscuro ───── */
[data-theme='dark'][data-dark-bg='pizarra'] {
  --bg: #1a2028;
  --side: #1f262f;
  --topbar: #1f262f;
  --surface: #252d37;
  --surface-2: #303841;
  --thead: #2a323c;
  --border: #3f464f;
  --track: #3f464f;
  --nav-idle: #252d37;
  --icon-idle: #343c45;
}
[data-theme='dark'][data-dark-bg='oceano'] {
  --bg: #0c1b1e;
  --side: #102125;
  --topbar: #102125;
  --surface: #14292d;
  --surface-2: #203438;
  --thead: #1a2e32;
  --border: #304346;
  --track: #304346;
  --nav-idle: #14292d;
  --icon-idle: #24383c;
}
[data-theme='dark'][data-dark-bg='vino'] {
  --bg: #1d1115;
  --side: #23151a;
  --topbar: #23151a;
  --surface: #2a1a20;
  --surface-2: #35252b;
  --thead: #302026;
  --border: #44353b;
  --track: #44353b;
  --nav-idle: #2a1a20;
  --icon-idle: #392a30;
}
[data-theme='dark'][data-dark-bg='cafe'] {
  --bg: #1c1713;
  --side: #221c17;
  --topbar: #221c17;
  --surface: #29211b;
  --surface-2: #342c26;
  --thead: #2e2620;
  --border: #433c36;
  --track: #433c36;
  --nav-idle: #29211b;
  --icon-idle: #38312b;
}
[data-theme='dark'][data-dark-bg='medianoche'] {
  --bg: #131127;
  --side: #18152f;
  --topbar: #18152f;
  --surface: #1d1a38;
  --surface-2: #282542;
  --thead: #22203d;
  --border: #383550;
  --track: #383550;
  --nav-idle: #1d1a38;
  --icon-idle: #2d2a46;
}
[data-theme='dark'][data-dark-bg='oliva'] {
  --bg: #181a12;
  --side: #1d2016;
  --topbar: #1d2016;
  --surface: #24271b;
  --surface-2: #2f3226;
  --thead: #2a2c20;
  --border: #3e4136;
  --track: #3e4136;
  --nav-idle: #24271b;
  --icon-idle: #33362b;
}
[data-theme='dark'][data-dark-bg='tinta'] {
  --bg: #090e18;
  --side: #0d131f;
  --topbar: #0d131f;
  --surface: #121a27;
  --surface-2: #1e2532;
  --thead: #18202c;
  --border: #2e3541;
  --track: #2e3541;
  --nav-idle: #121a27;
  --icon-idle: #232a36;
}
[data-theme='dark'][data-dark-bg='cobre'] {
  --bg: #1e150f;
  --side: #241a13;
  --topbar: #241a13;
  --surface: #2c1f17;
  --surface-2: #372a23;
  --thead: #32241d;
  --border: #453a33;
  --track: #453a33;
  --nav-idle: #2c1f17;
  --icon-idle: #3b2f27;
}
[data-theme='dark'][data-dark-bg='petroleo'] {
  --bg: #0a1820;
  --side: #0e1e27;
  --topbar: #0e1e27;
  --surface: #13252f;
  --surface-2: #1f3039;
  --thead: #192a34;
  --border: #2f3f48;
  --track: #2f3f48;
  --nav-idle: #13252f;
  --icon-idle: #24343e;
}

/* ───── Más paletas ───── */
[data-palette='celeste'],
[data-palette='celeste'][data-theme='dark'] {
  --accent: #4cc3ff;
  --on-accent: #04182a;
  --accent-soft: rgba(76, 195, 255, 0.14);
}
[data-palette='celeste'][data-theme='light'] {
  --accent: #0a6fa3;
  --on-accent: #ffffff;
  --accent-soft: rgba(10, 111, 163, 0.09);
}
[data-palette='coral'],
[data-palette='coral'][data-theme='dark'] {
  --accent: #ff8a6b;
  --on-accent: #2a0d06;
  --accent-soft: rgba(255, 138, 107, 0.14);
}
[data-palette='coral'][data-theme='light'] {
  --accent: #c2452a;
  --on-accent: #ffffff;
  --accent-soft: rgba(194, 69, 42, 0.09);
}
[data-palette='fucsia'],
[data-palette='fucsia'][data-theme='dark'] {
  --accent: #e05cff;
  --on-accent: #24062c;
  --accent-soft: rgba(224, 92, 255, 0.14);
}
[data-palette='fucsia'][data-theme='light'] {
  --accent: #9b1fb5;
  --on-accent: #ffffff;
  --accent-soft: rgba(155, 31, 181, 0.09);
}
[data-palette='cereza'],
[data-palette='cereza'][data-theme='dark'] {
  --accent: #ff4d7d;
  --on-accent: #2b0611;
  --accent-soft: rgba(255, 77, 125, 0.14);
}
[data-palette='cereza'][data-theme='light'] {
  --accent: #b8174a;
  --on-accent: #ffffff;
  --accent-soft: rgba(184, 23, 74, 0.09);
}
[data-palette='oro'],
[data-palette='oro'][data-theme='dark'] {
  --accent: #ffd84a;
  --on-accent: #241c00;
  --accent-soft: rgba(255, 216, 74, 0.14);
}
[data-palette='oro'][data-theme='light'] {
  --accent: #7d6400;
  --on-accent: #ffffff;
  --accent-soft: rgba(125, 100, 0, 0.09);
}
[data-palette='oliva'],
[data-palette='oliva'][data-theme='dark'] {
  --accent: #b9c64e;
  --on-accent: #1a1d04;
  --accent-soft: rgba(185, 198, 78, 0.14);
}
[data-palette='oliva'][data-theme='light'] {
  --accent: #5e6a12;
  --on-accent: #ffffff;
  --accent-soft: rgba(94, 106, 18, 0.09);
}
[data-palette='durazno'],
[data-palette='durazno'][data-theme='dark'] {
  --accent: #ffb38a;
  --on-accent: #2a1206;
  --accent-soft: rgba(255, 179, 138, 0.14);
}
[data-palette='durazno'][data-theme='light'] {
  --accent: #a6532a;
  --on-accent: #ffffff;
  --accent-soft: rgba(166, 83, 42, 0.09);
}
[data-palette='lila'],
[data-palette='lila'][data-theme='dark'] {
  --accent: #d4a6ff;
  --on-accent: #1f0d33;
  --accent-soft: rgba(212, 166, 255, 0.14);
}
[data-palette='lila'][data-theme='light'] {
  --accent: #7a3fb0;
  --on-accent: #ffffff;
  --accent-soft: rgba(122, 63, 176, 0.09);
}
[data-palette='plata'],
[data-palette='plata'][data-theme='dark'] {
  --accent: #c3c8d2;
  --on-accent: #15181d;
  --accent-soft: rgba(195, 200, 210, 0.14);
}
[data-palette='plata'][data-theme='light'] {
  --accent: #4b5563;
  --on-accent: #ffffff;
  --accent-soft: rgba(75, 85, 99, 0.09);
}