/* Colors, type and the pastel palettes (light and dark), shared by every screen. */

:root {
  color-scheme: light dark;
  --brand: #174631;
  --hero-text: #f2f5f3;
  --hero-muted: #b8d8c8;
  --hero-link: #cfeadb;
  --bg: #f6f5f0;
  --panel: #ffffff;
  --panel-2: #eef2ec;
  --line: #e1e5dd;
  --text: #182622;
  --muted: #5f6d69;
  --accent: #1f6b4a;
  --accent-text: #ffffff;
  --accent-soft: #dcefe3;
  --good: #1f7a50;
  --bad: #b3424c;
  --warn: #8a6216;
  --warn-soft: #fbf0d9;
  --bad-soft: #f8e1e3;
  --radius: 18px;
  --shadow: 0 1px 2px rgb(16 20 23 / 6%), 0 8px 24px rgb(16 20 23 / 6%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #101417;
    --panel: #191f23;
    --panel-2: #20272b;
    --line: #2a3338;
    --text: #f2f5f3;
    --muted: #9fabae;
    --accent: #65e0b0;
    --accent-text: #0d211a;
    --accent-soft: #1d3a2f;
    --good: #65e0b0;
    --bad: #ff8e98;
    --warn: #f3c977;
    --warn-soft: #3a3020;
    --bad-soft: #3d2327;
    --shadow: none;
  }
}
:root[data-theme="dark"] {
  --bg: #101417;
  --panel: #191f23;
  --panel-2: #20272b;
  --line: #2a3338;
  --text: #f2f5f3;
  --muted: #9fabae;
  --accent: #65e0b0;
  --accent-text: #0d211a;
  --accent-soft: #1d3a2f;
  --good: #65e0b0;
  --bad: #ff8e98;
  --warn: #f3c977;
  --warn-soft: #3a3020;
  --bad-soft: #3d2327;
  --shadow: none;
}

/* Pastel palettes, chosen per device in Ajustes → Apariencia (data-palette on <html>).
   Menta, the brand palette, is the default and needs no attribute. */
:root[data-palette="rosa"] {
  --brand: #f6c3d4; --hero-text: #4a1f33; --hero-muted: #7d4a60; --hero-link: #6b2c48;
  --bg: #fff8fa; --panel: #ffffff; --panel-2: #fdecf2; --line: #f5dbe5; --text: #3b2430; --muted: #876876;
  --accent: #b83d6c; --accent-text: #ffffff; --accent-soft: #fde1ec; --good: #2f7d5b;
  --shadow: 0 1px 2px rgb(120 40 70 / 6%), 0 8px 24px rgb(120 40 70 / 7%);
}
:root[data-palette="lavanda"] {
  --brand: #d9cef6; --hero-text: #2c2150; --hero-muted: #5d5288; --hero-link: #3f2f78;
  --bg: #faf8ff; --panel: #ffffff; --panel-2: #f1edfc; --line: #e5dff6; --text: #2a2440; --muted: #6e6889;
  --accent: #6a4dbd; --accent-text: #ffffff; --accent-soft: #ebe5fb; --good: #2f7d5b;
  --shadow: 0 1px 2px rgb(60 40 120 / 6%), 0 8px 24px rgb(60 40 120 / 7%);
}
:root[data-palette="celeste"] {
  --brand: #c5e4f6; --hero-text: #143349; --hero-muted: #456a83; --hero-link: #1d4d6e;
  --bg: #f6fbfe; --panel: #ffffff; --panel-2: #e9f4fb; --line: #d9eaf4; --text: #1d2b36; --muted: #5d7080;
  --accent: #2a6c9c; --accent-text: #ffffff; --accent-soft: #dcf0fb; --good: #2f7d5b;
  --shadow: 0 1px 2px rgb(20 60 90 / 6%), 0 8px 24px rgb(20 60 90 / 7%);
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="rosa"]:not([data-theme="light"]) {
    --brand: #5a2d42; --hero-text: #fdeef4; --hero-muted: #e2b3c6; --hero-link: #f7c6d9;
    --bg: #171013; --panel: #22181d; --panel-2: #2c1f26; --line: #3a2a32; --text: #fbeff3; --muted: #c3a7b3;
    --accent: #f5a6c3; --accent-text: #3a1224; --accent-soft: #42243a; --good: #7fd8b0; --shadow: none;
  }
  :root[data-palette="lavanda"]:not([data-theme="light"]) {
    --brand: #3b3166; --hero-text: #f1edff; --hero-muted: #c4b9ee; --hero-link: #d8cefb;
    --bg: #121019; --panel: #1b1824; --panel-2: #24202f; --line: #322c40; --text: #f2efff; --muted: #aaa3c4;
    --accent: #bfaef5; --accent-text: #231a45; --accent-soft: #312a4d; --good: #7fd8b0; --shadow: none;
  }
  :root[data-palette="celeste"]:not([data-theme="light"]) {
    --brand: #1f4660; --hero-text: #eaf6fd; --hero-muted: #a9cde3; --hero-link: #c3e3f6;
    --bg: #0e1418; --panel: #162026; --panel-2: #1d2a31; --line: #29373f; --text: #eef6fa; --muted: #9fb4c0;
    --accent: #8fd0f5; --accent-text: #0d2a3c; --accent-soft: #1f3a4a; --good: #7fd8b0; --shadow: none;
  }
}
:root[data-palette="rosa"][data-theme="dark"] {
  --brand: #5a2d42; --hero-text: #fdeef4; --hero-muted: #e2b3c6; --hero-link: #f7c6d9;
  --bg: #171013; --panel: #22181d; --panel-2: #2c1f26; --line: #3a2a32; --text: #fbeff3; --muted: #c3a7b3;
  --accent: #f5a6c3; --accent-text: #3a1224; --accent-soft: #42243a; --good: #7fd8b0; --shadow: none;
}
:root[data-palette="lavanda"][data-theme="dark"] {
  --brand: #3b3166; --hero-text: #f1edff; --hero-muted: #c4b9ee; --hero-link: #d8cefb;
  --bg: #121019; --panel: #1b1824; --panel-2: #24202f; --line: #322c40; --text: #f2efff; --muted: #aaa3c4;
  --accent: #bfaef5; --accent-text: #231a45; --accent-soft: #312a4d; --good: #7fd8b0; --shadow: none;
}
:root[data-palette="celeste"][data-theme="dark"] {
  --brand: #1f4660; --hero-text: #eaf6fd; --hero-muted: #a9cde3; --hero-link: #c3e3f6;
  --bg: #0e1418; --panel: #162026; --panel-2: #1d2a31; --line: #29373f; --text: #eef6fa; --muted: #9fb4c0;
  --accent: #8fd0f5; --accent-text: #0d2a3c; --accent-soft: #1f3a4a; --good: #7fd8b0; --shadow: none;
}
/* Category colors for Gráficos (c-cat1 … c-cat6, and the rest in c-cat-other): six hues
   apart from each other and from --panel, per palette and in light and dark. */
:root { --cat-1: #1f6b4a; --cat-2: #6f7fd6; --cat-3: #c9822a; --cat-4: #c2577a; --cat-5: #2f93ad; --cat-6: #8a6bbf; --cat-other: #7f8885; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --cat-1: #65e0b0; --cat-2: #9aa6ff; --cat-3: #f3b765; --cat-4: #f08aa8; --cat-5: #6cc8e0; --cat-6: #c3a5f5; --cat-other: #66716f; }
}
:root[data-theme="dark"] { --cat-1: #65e0b0; --cat-2: #9aa6ff; --cat-3: #f3b765; --cat-4: #f08aa8; --cat-5: #6cc8e0; --cat-6: #c3a5f5; --cat-other: #66716f; }
:root[data-palette="rosa"] { --cat-1: #b83d6c; --cat-2: #6f7fd6; --cat-3: #c9822a; --cat-4: #2f8f7a; --cat-5: #3a8fc9; --cat-6: #8a6bbf; --cat-other: #86737c; }
:root[data-palette="lavanda"] { --cat-1: #6a4dbd; --cat-2: #2f9a8a; --cat-3: #c9822a; --cat-4: #c2577a; --cat-5: #3a8fc9; --cat-6: #7f9a2e; --cat-other: #807b93; }
:root[data-palette="celeste"] { --cat-1: #2a6c9c; --cat-2: #c9822a; --cat-3: #8a6bbf; --cat-4: #2f8f6a; --cat-5: #c2577a; --cat-6: #7f9a2e; --cat-other: #6f8590; }
@media (prefers-color-scheme: dark) {
  :root[data-palette="rosa"]:not([data-theme="light"]) { --cat-1: #f5a6c3; --cat-2: #9aa6ff; --cat-3: #f3b765; --cat-4: #6fd3b4; --cat-5: #7cc4f0; --cat-6: #c3a5f5; --cat-other: #806c77; }
  :root[data-palette="lavanda"]:not([data-theme="light"]) { --cat-1: #bfaef5; --cat-2: #6fd3c0; --cat-3: #f3b765; --cat-4: #f08aa8; --cat-5: #7cc4f0; --cat-6: #c2d873; --cat-other: #6a6680; }
  :root[data-palette="celeste"]:not([data-theme="light"]) { --cat-1: #8fd0f5; --cat-2: #f3b765; --cat-3: #c3a5f5; --cat-4: #6fd8a8; --cat-5: #f08aa8; --cat-6: #c2d873; --cat-other: #5f717c; }
}
:root[data-palette="rosa"][data-theme="dark"] { --cat-1: #f5a6c3; --cat-2: #9aa6ff; --cat-3: #f3b765; --cat-4: #6fd3b4; --cat-5: #7cc4f0; --cat-6: #c3a5f5; --cat-other: #806c77; }
:root[data-palette="lavanda"][data-theme="dark"] { --cat-1: #bfaef5; --cat-2: #6fd3c0; --cat-3: #f3b765; --cat-4: #f08aa8; --cat-5: #7cc4f0; --cat-6: #c2d873; --cat-other: #6a6680; }
:root[data-palette="celeste"][data-theme="dark"] { --cat-1: #8fd0f5; --cat-2: #f3b765; --cat-3: #c3a5f5; --cat-4: #6fd8a8; --cat-5: #f08aa8; --cat-6: #c2d873; --cat-other: #5f717c; }
.palettes { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.palettes .choice { grid-template-columns: auto 1fr; align-items: center; gap: 10px; }
.swatch { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgb(0 0 0 / 10%); background: conic-gradient(var(--a) 0 50%, var(--b) 0); }
.swatch.menta { --a: #174631; --b: #dcefe3; }
.swatch.rosa { --a: #f6c3d4; --b: #b83d6c; }
.swatch.lavanda { --a: #d9cef6; --b: #6a4dbd; }
.swatch.celeste { --a: #c5e4f6; --b: #2a6c9c; }

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body { min-height: 100dvh; -webkit-font-smoothing: antialiased; line-height: 1.45; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); }
h1, h2, h3 { line-height: 1.2; margin: 0; }
h1 { font-size: 1.6rem; letter-spacing: -0.02em; }
h2 { font-size: 1.1rem; }
h3 { font-size: 1rem; }
p { margin: 0; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.boot { min-height: 100dvh; display: grid; place-content: center; justify-items: center; gap: 12px; color: var(--muted); }