/* Tema oscuro (default) — alineado con desktop THEMES.dark */
:root,
[data-theme="dark"] {
  --bg: #0f111a;
  --card: #0e2034;
  --input: #032741;
  --input-alt: #1e293b;
  --border: #334155;
  --text: #ffffff;
  --text-sub: #a5b3c8;
  --text-muted: #a5b3c8;
  --accent: #0284c7;
  --accent-hover: #0369a1;
  --on-accent: #ffffff;
  --error: #dc2626;
  --nav-bg: #0a0d14;
  --nav-float-bg: rgba(14, 32, 52, 0.92);
  --nav-float-border: rgba(51, 65, 85, 0.9);
  --nav-float-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  --nav-item-active-bg: color-mix(in srgb, var(--accent) 16%, transparent);
  --shadow-card: none;
  --pitbox-card-border: rgba(255, 255, 255, 0.1);
  --pitbox-card-shadow: none;
  --pitbot-accent: var(--accent);
  --pitbot-fill: #d8eaf5;
  --pitbot-stroke: #0f2b40;
  --pitbot-shadow: #3d6a8a;
  --placeholder: #64748b;
}

/* Tema claro — alineado con desktop THEMES.light */
[data-theme="light"] {
  --bg: #7b8fa3;
  --card: #ffffff;
  --input: #f1f5f9;
  --input-alt: #e2e8f0;
  --border: #334155;
  --text: #0f172a;
  --text-sub: #1e293b;
  --text-muted: #1e293b;
  --accent: #0284c7;
  --accent-hover: #0369a1;
  --on-accent: #ffffff;
  --error: #dc2626;
  --nav-bg: #ffffff;
  --nav-float-bg: rgba(255, 255, 255, 0.94);
  --nav-float-border: rgba(203, 213, 225, 0.95);
  --nav-float-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
  --nav-item-active-bg: color-mix(in srgb, var(--accent) 12%, transparent);
  --shadow-card: 0 4px 16px -6px rgba(15, 23, 42, 0.12), 0 1px 3px rgba(15, 23, 42, 0.04);
  --pitbox-card-border: rgba(0, 0, 0, 0.08);
  --pitbox-card-shadow: var(--shadow-card);
  --pitbot-accent: var(--accent);
  --pitbot-fill: #f1f7fb;
  --pitbot-stroke: #0f2b40;
  --pitbot-shadow: #9ed0ee;
  --placeholder: #64748b;
}

[data-theme="light"] .segment-tab:not(.active) {
  background: #ffffff;
}

[data-theme="light"] .btn-logout {
  background: #ffffff;
}

/* ── Packs locales (data-accent) — todos flexibles ── */

[data-accent="classic"] {
  /* Identidad default: hereda light/dark de arriba */
}

/* Alto Contraste: Clínico de día · AMOLED de noche */
[data-theme="light"][data-accent="contraste"] {
  --bg: #ffffff;
  --card: #ffffff;
  --input: #f8fafc;
  --input-alt: #f1f5f9;
  --border: #0f172a;
  --text: #000000;
  --text-sub: #334155;
  --text-muted: #334155;
  --accent: #0f172a;
  --accent-hover: #020617;
  --on-accent: #ffffff;
  --nav-bg: #ffffff;
  --nav-float-bg: rgba(255, 255, 255, 0.96);
  --nav-float-border: rgba(15, 23, 42, 0.35);
  --nav-float-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
  --nav-item-active-bg: color-mix(in srgb, var(--accent) 8%, transparent);
  --shadow-card: 0 4px 16px -6px rgba(15, 23, 42, 0.1), 0 1px 2px rgba(15, 23, 42, 0.06);
  --pitbox-card-border: rgba(15, 23, 42, 0.14);
  --pitbox-card-shadow: var(--shadow-card);
  --pitbot-accent: var(--accent);
  --pitbot-fill: #ffffff;
  --pitbot-stroke: #0f172a;
  --pitbot-shadow: #cbd5e1;
  --placeholder: #64748b;
}

[data-theme="dark"][data-accent="contraste"] {
  --bg: #000000;
  --card: #0a0a0a;
  --input: #111111;
  --input-alt: #161616;
  --border: #222222;
  --text: #ffffff;
  --text-sub: #a3a3a3;
  --text-muted: #a3a3a3;
  --accent: #f5f5f5;
  --accent-hover: #ffffff;
  --on-accent: #000000;
  --nav-bg: #000000;
  --nav-float-bg: rgba(10, 10, 10, 0.94);
  --nav-float-border: rgba(34, 34, 34, 0.95);
  --nav-float-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  --nav-item-active-bg: color-mix(in srgb, var(--accent) 14%, transparent);
  --shadow-card: none;
  --pitbox-card-border: rgba(255, 255, 255, 0.14);
  --pitbox-card-shadow: none;
  --pitbot-accent: var(--accent);
  --pitbot-fill: #1a1a1a;
  --pitbot-stroke: #f5f5f5;
  --pitbot-shadow: #404040;
  --placeholder: #737373;
}

[data-theme="light"][data-accent="contraste"] .segment-tab:not(.active),
[data-theme="light"][data-accent="contraste"] .btn-logout {
  background: #ffffff;
}

/* Sakura — rosa pastel estilo iOS */
[data-theme="light"][data-accent="sakura"] {
  --bg: #ffe4e8;
  --card: #ffffff;
  --input: #fff0f3;
  --input-alt: #ffe8ed;
  --border: #ffc2cd;
  --text: #4a3b3d;
  --text-sub: #8a7376;
  --text-muted: #8a7376;
  --accent: #ff8da1;
  --accent-hover: #ff758f;
  --on-accent: #ffffff;
  --nav-bg: #ffffff;
  --nav-float-bg: rgba(255, 255, 255, 0.94);
  --nav-float-border: rgba(255, 194, 205, 0.95);
  --nav-float-shadow: 0 12px 28px rgba(74, 59, 61, 0.1);
  --nav-item-active-bg: rgba(255, 141, 161, 0.15);
  --shadow-card: 0 4px 16px -6px rgba(74, 59, 61, 0.1), 0 1px 3px rgba(74, 59, 61, 0.04);
  --pitbox-card-border: rgba(74, 59, 61, 0.1);
  --pitbox-card-shadow: var(--shadow-card);
  --pitbot-accent: var(--accent);
  --pitbot-fill: #fff0f3;
  --pitbot-stroke: #4a3b3d;
  --pitbot-shadow: #ffc2cd;
  --placeholder: #b08a92;
}

[data-theme="dark"][data-accent="sakura"] {
  --bg: #2a2425;
  --card: #362e30;
  --input: #423839;
  --input-alt: #4a3f41;
  --border: #4d4244;
  --text: #fce8eb;
  --text-sub: #a69597;
  --text-muted: #a69597;
  --accent: #ffb3c1;
  --accent-hover: #ff9eaa;
  --on-accent: #2a2425;
  --nav-bg: #2a2425;
  --nav-float-bg: rgba(54, 46, 48, 0.94);
  --nav-float-border: rgba(77, 66, 68, 0.9);
  --nav-float-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  --nav-item-active-bg: rgba(255, 179, 193, 0.15);
  --shadow-card: none;
  --pitbox-card-border: rgba(252, 232, 235, 0.12);
  --pitbox-card-shadow: none;
  --pitbot-accent: var(--accent);
  --pitbot-fill: #3a2e30;
  --pitbot-stroke: #fce8eb;
  --pitbot-shadow: #5c484b;
  --placeholder: #8f7379;
}

[data-theme="light"][data-accent="sakura"] .segment-tab:not(.active),
[data-theme="light"][data-accent="sakura"] .btn-logout {
  background: #ffffff;
}

/* Menta — verde salvia relajante */
[data-theme="light"][data-accent="menta"] {
  --bg: #eef8f3;
  --card: #ffffff;
  --input: #e3f2ea;
  --input-alt: #d8ebe2;
  --border: #b7d4c5;
  --text: #24332c;
  --text-sub: #5a7266;
  --text-muted: #5a7266;
  --accent: #7ba892;
  --accent-hover: #6a967f;
  --on-accent: #ffffff;
  --nav-bg: #ffffff;
  --nav-float-bg: rgba(255, 255, 255, 0.94);
  --nav-float-border: rgba(183, 212, 197, 0.95);
  --nav-float-shadow: 0 12px 28px rgba(36, 51, 44, 0.1);
  --nav-item-active-bg: rgba(123, 168, 146, 0.18);
  --shadow-card: 0 4px 16px -6px rgba(36, 51, 44, 0.1), 0 1px 3px rgba(36, 51, 44, 0.04);
  --pitbox-card-border: rgba(36, 51, 44, 0.1);
  --pitbox-card-shadow: var(--shadow-card);
  --pitbot-accent: var(--accent);
  --pitbot-fill: #eef8f3;
  --pitbot-stroke: #24332c;
  --pitbot-shadow: #b7d4c5;
  --placeholder: #8aa396;
}

[data-theme="dark"][data-accent="menta"] {
  --bg: #1a221e;
  --card: #232e28;
  --input: #2c3932;
  --input-alt: #34433b;
  --border: #3f5248;
  --text: #e8f2ec;
  --text-sub: #a3bdb0;
  --text-muted: #a3bdb0;
  --accent: #8fbc9f;
  --accent-hover: #a3cbb1;
  --on-accent: #1a221e;
  --nav-bg: #1a221e;
  --nav-float-bg: rgba(35, 46, 40, 0.94);
  --nav-float-border: rgba(63, 82, 72, 0.9);
  --nav-float-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  --nav-item-active-bg: rgba(143, 188, 159, 0.16);
  --shadow-card: none;
  --pitbox-card-border: rgba(232, 242, 236, 0.12);
  --pitbox-card-shadow: none;
  --pitbot-accent: var(--accent);
  --pitbot-fill: #232e28;
  --pitbot-stroke: #e8f2ec;
  --pitbot-shadow: #3f5248;
  --placeholder: #6f8a7c;
}

[data-theme="light"][data-accent="menta"] .segment-tab:not(.active),
[data-theme="light"][data-accent="menta"] .btn-logout {
  background: #ffffff;
}

/* Compat: ids antiguos → mismos tokens que el pack nuevo */
[data-accent="amoled"],
[data-accent="clinical"] {
  /* JS migra a contraste; fallback visual si quedó atributo viejo */
}
[data-theme="light"][data-accent="clinical"],
[data-theme="light"][data-accent="amoled"] {
  --bg: #ffffff;
  --card: #ffffff;
  --border: #0f172a;
  --text: #000000;
  --accent: #0f172a;
}
[data-theme="dark"][data-accent="amoled"],
[data-theme="dark"][data-accent="clinical"] {
  --bg: #000000;
  --card: #0a0a0a;
  --border: #222222;
  --text: #ffffff;
  --accent: #f5f5f5;
}