/*
 * Temas alternativos del panel. Propuesta: `docs/diseno-visual.md`.
 *
 * El panel está hecho de tokens (`panel.css`, `:root`), así que un tema es
 * otro juego de valores para los mismos nombres y nada más: ningún selector
 * de pantalla cambia. Se elige con `?tema=<nombre>` en la dirección —`tema.js`
 * lo recuerda en el navegador— y sin él se ve el de siempre.
 *
 *   pizarra    neutros fríos de pizarra y un acento de cobre; claro y oscuro
 *   nocturno   oscuro de instrumento, de un solo modo: no tiene variante clara
 *
 * Los dos siguen el patrón de tres estados del panel: `[data-tema]` lleva la
 * paleta clara completa, el `@media` la cambia sólo si nadie pidió claro, y
 * `[data-theme="dark"]` gana en los dos sentidos.
 */

/* ── pizarra ── */
:root[data-tema="pizarra"] {
  --ground: #F2F3F5; --raise: #FFFFFF; --sunk: #E9EBEF; --hover: #F6F7F9;
  --ink: #171A21; --muted: #5E6572; --faint: #9AA1AD;
  --line: #D7DBE2; --line-soft: #E6E9EE;
  --accent: #A8501F; --accent-soft: #F4E6DD;
  --ok: #1F7A4D; --ok-soft: #DDEFE4;
  --dudoso: #8C6A12; --dudoso-soft: #F5ECD3;
  --malo: #A82C3A; --malo-soft: #F8E1E3;
  --shadow: 0 1px 1px rgba(23,26,33,.04), 0 10px 24px -20px rgba(23,26,33,.28);
  --sans: "Public Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --serif: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root[data-tema="pizarra"]:not([data-theme="light"]) {
    --ground: #121419; --raise: #1A1D24; --sunk: #15181E; --hover: #20242C;
    --ink: #E7E9EE; --muted: #9AA1AD; --faint: #646B77;
    --line: #2A2F38; --line-soft: #22262E;
    --accent: #E08A5A; --accent-soft: #3A271C;
    --ok: #4FBF86; --ok-soft: #16301F;
    --dudoso: #D9A441; --dudoso-soft: #332912;
    --malo: #E06A78; --malo-soft: #351A1E;
    --shadow: 0 1px 2px rgba(0,0,0,.5), 0 12px 28px -22px rgba(0,0,0,.9);
  }
}
:root[data-tema="pizarra"][data-theme="dark"] {
  --ground: #121419; --raise: #1A1D24; --sunk: #15181E; --hover: #20242C;
  --ink: #E7E9EE; --muted: #9AA1AD; --faint: #646B77;
  --line: #2A2F38; --line-soft: #22262E;
  --accent: #E08A5A; --accent-soft: #3A271C;
  --ok: #4FBF86; --ok-soft: #16301F;
  --dudoso: #D9A441; --dudoso-soft: #332912;
  --malo: #E06A78; --malo-soft: #351A1E;
  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 12px 28px -22px rgba(0,0,0,.9);
}
/* El nombre de la marca y los títulos, con la fuente de display apretada: es
   lo único de la pizarra que no es un token, y es lo que le da la voz. */
:root[data-tema="pizarra"] .brandbox .b,
:root[data-tema="pizarra"] .enter h1 { font-variation-settings: "wdth" 90; letter-spacing: -.02em; }
:root[data-tema="pizarra"] .k { letter-spacing: .08em; }

/* ── nocturno ── */
:root[data-tema="nocturno"] {
  color-scheme: dark;
  --ground: #0E1013; --raise: #15181D; --sunk: #111419; --hover: #1B1F26;
  --ink: #E9EBEF; --muted: #8E96A3; --faint: #5C6370;
  --line: #262B34; --line-soft: #1E232B;
  --accent: #D9A441; --accent-soft: #2E2612;
  --ok: #4FBF86; --ok-soft: #14301F;
  --dudoso: #E0B45A; --dudoso-soft: #33290F;
  --malo: #E06A78; --malo-soft: #36191E;
  --shadow: 0 1px 2px rgba(0,0,0,.6), 0 12px 28px -22px rgba(0,0,0,1);
  --sans: "Public Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --serif: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
/* De instrumento: el nombre de la marca en mono y a su tamaño, las cifras
   grandes también en mono, y los bordes algo más presentes que la sombra. */
:root[data-tema="nocturno"] .brandbox .b { font-size: 1.1rem; font-weight: 500; letter-spacing: .02em; text-transform: lowercase; }
:root[data-tema="nocturno"] .enter h1 { font-weight: 500; letter-spacing: -.01em; }
:root[data-tema="nocturno"] .big, :root[data-tema="nocturno"] .n { font-family: var(--mono); font-variant-numeric: tabular-nums; }
:root[data-tema="nocturno"] .card { box-shadow: none; }

/* ═══ cuatro direcciones más, para comparar (docs/diseno-visual.md) ═══ */

/* ── papel: editorial, de registro. Papel frío, tinta, acento de tinta azul ── */
:root[data-tema="papel"] {
  --ground: #F6F5F1; --raise: #FDFCFA; --sunk: #EEECE6; --hover: #F9F8F4;
  --ink: #1B1B1F; --muted: #666871; --faint: #A1A3AB;
  --line: #DAD8D1; --line-soft: #E8E6DF;
  --accent: #1F3A8A; --accent-soft: #E3E8F6;
  --ok: #2E6B45; --ok-soft: #DFEDE3;
  --dudoso: #8A5B0F; --dudoso-soft: #F4EAD4;
  --malo: #9E2A2B; --malo-soft: #F6E1E0;
  --shadow: none;
  --sans: "Source Sans 3", ui-sans-serif, system-ui, sans-serif;
  --serif: "Newsreader", ui-serif, Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root[data-tema="papel"]:not([data-theme="light"]) {
    --ground: #1A1A1D; --raise: #212125; --sunk: #1D1D21; --hover: #27272C;
    --ink: #ECEAE4; --muted: #A1A3AB; --faint: #6B6D75;
    --line: #34343A; --line-soft: #2B2B30;
    --accent: #8FA8F0; --accent-soft: #232B44;
    --ok: #5FBF85; --ok-soft: #17301F; --dudoso: #D9A441; --dudoso-soft: #332912; --malo: #E06A6B; --malo-soft: #361A1A;
  }
}
:root[data-tema="papel"][data-theme="dark"] {
  --ground: #1A1A1D; --raise: #212125; --sunk: #1D1D21; --hover: #27272C;
  --ink: #ECEAE4; --muted: #A1A3AB; --faint: #6B6D75;
  --line: #34343A; --line-soft: #2B2B30;
  --accent: #8FA8F0; --accent-soft: #232B44;
  --ok: #5FBF85; --ok-soft: #17301F; --dudoso: #D9A441; --dudoso-soft: #332912; --malo: #E06A6B; --malo-soft: #361A1A;
}
:root[data-tema="papel"] .card { border-radius: 3px; }
:root[data-tema="papel"] .brandbox .b { font-size: 1.6rem; font-weight: 500; font-style: italic; letter-spacing: 0; }
:root[data-tema="papel"] .enter h1 { font-weight: 500; }
:root[data-tema="papel"] .big { font-family: var(--serif); font-weight: 500; }

/* ── hormigón: industrial. Blanco, líneas duras, nada redondo, un amarillo de señal ── */
:root[data-tema="hormigon"] {
  --ground: #FFFFFF; --raise: #FFFFFF; --sunk: #F3F3F3; --hover: #F7F7F7;
  --ink: #0B0B0B; --muted: #5A5A5A; --faint: #9A9A9A;
  --line: #0B0B0B; --line-soft: #D9D9D9;
  --accent: #0B0B0B; --accent-soft: #F6D500;
  --ok: #157347; --ok-soft: #E3F1E8;
  --dudoso: #8A5B0F; --dudoso-soft: #F6D500;
  --malo: #B3261E; --malo-soft: #F8E2E0;
  --shadow: none;
  --sans: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --serif: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root[data-tema="hormigon"]:not([data-theme="light"]) {
    --ground: #0F0F0F; --raise: #0F0F0F; --sunk: #181818; --hover: #1C1C1C;
    --ink: #F2F2F2; --muted: #A3A3A3; --faint: #666666;
    --line: #F2F2F2; --line-soft: #2E2E2E;
    --accent: #F2F2F2; --accent-soft: #F6D500;
    --ok: #4FBF86; --ok-soft: #14301F; --dudoso: #0B0B0B; --dudoso-soft: #F6D500; --malo: #E06A6B; --malo-soft: #361A1A;
  }
}
:root[data-tema="hormigon"][data-theme="dark"] {
  --ground: #0F0F0F; --raise: #0F0F0F; --sunk: #181818; --hover: #1C1C1C;
  --ink: #F2F2F2; --muted: #A3A3A3; --faint: #666666;
  --line: #F2F2F2; --line-soft: #2E2E2E;
  --accent: #F2F2F2; --accent-soft: #F6D500;
  --ok: #4FBF86; --ok-soft: #14301F; --dudoso: #0B0B0B; --dudoso-soft: #F6D500; --malo: #E06A6B; --malo-soft: #361A1A;
}
:root[data-tema="hormigon"] .card, :root[data-tema="hormigon"] .pick, :root[data-tema="hormigon"] .chip, :root[data-tema="hormigon"] button { border-radius: 0; box-shadow: none; }
:root[data-tema="hormigon"] .brandbox .b { font-weight: 700; font-variation-settings: "wdth" 115; text-transform: uppercase; letter-spacing: .02em; font-size: 1.25rem; }
:root[data-tema="hormigon"] .enter h1, :root[data-tema="hormigon"] h2 { font-weight: 700; font-variation-settings: "wdth" 110; text-transform: uppercase; letter-spacing: .01em; }
:root[data-tema="hormigon"] .k { letter-spacing: .14em; color: var(--ink); }
:root[data-tema="hormigon"] .chip.brd, :root[data-tema="hormigon"] .chip.dud { color: #0B0B0B; }
:root[data-tema="hormigon"] .side { background: var(--ground); border-right: 2px solid var(--line); }

/* ── musgo: humanista, calmado. Salvia, tinta verdosa, acento de musgo, serif de display ── */
:root[data-tema="musgo"] {
  --ground: #F1F3EE; --raise: #FBFCF9; --sunk: #E7EBE3; --hover: #F6F8F3;
  --ink: #1B2420; --muted: #5F6B64; --faint: #98A39C;
  --line: #D3DACF; --line-soft: #E3E8DF;
  --accent: #3F6B3A; --accent-soft: #E1ECDC;
  --ok: #2F7A4A; --ok-soft: #DDEFE3;
  --dudoso: #8C6A12; --dudoso-soft: #F3ECD3;
  --malo: #A33A3F; --malo-soft: #F6E2E2;
  --shadow: 0 1px 2px rgba(27,36,32,.04), 0 12px 28px -22px rgba(27,36,32,.25);
  --sans: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --serif: "Instrument Serif", ui-serif, Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root[data-tema="musgo"]:not([data-theme="light"]) {
    --ground: #121714; --raise: #1A201C; --sunk: #151B17; --hover: #1F2621;
    --ink: #E6EBE6; --muted: #98A39C; --faint: #62706A;
    --line: #2A332E; --line-soft: #232B27;
    --accent: #8CC58A; --accent-soft: #1E3321;
    --ok: #5FBF85; --ok-soft: #17301F; --dudoso: #D9A441; --dudoso-soft: #332912; --malo: #E06A6B; --malo-soft: #361A1A;
  }
}
:root[data-tema="musgo"][data-theme="dark"] {
  --ground: #121714; --raise: #1A201C; --sunk: #151B17; --hover: #1F2621;
  --ink: #E6EBE6; --muted: #98A39C; --faint: #62706A;
  --line: #2A332E; --line-soft: #232B27;
  --accent: #8CC58A; --accent-soft: #1E3321;
  --ok: #5FBF85; --ok-soft: #17301F; --dudoso: #D9A441; --dudoso-soft: #332912; --malo: #E06A6B; --malo-soft: #361A1A;
}
:root[data-tema="musgo"] .card { border-radius: 14px; }
:root[data-tema="musgo"] .brandbox .b { font-size: 1.7rem; font-weight: 400; letter-spacing: -.01em; }
:root[data-tema="musgo"] .enter h1, :root[data-tema="musgo"] h2 { font-weight: 400; letter-spacing: -.01em; }

/* ── porcelana: de producto. Blanco cálido, azul profundo, geométrica, radios amplios ── */
:root[data-tema="porcelana"] {
  --ground: #FAFAF7; --raise: #FFFFFF; --sunk: #F1F1EC; --hover: #FBFBF8;
  --ink: #15202B; --muted: #5C6A78; --faint: #9AA6B2;
  --line: #E1E4E8; --line-soft: #EDEFF2;
  --accent: #1F5F8B; --accent-soft: #E2EEF6;
  --ok: #1E7F5A; --ok-soft: #DDF1E8;
  --dudoso: #946A0A; --dudoso-soft: #F8EDCF;
  --malo: #B42B3A; --malo-soft: #F9E2E5;
  --shadow: 0 1px 2px rgba(21,32,43,.05), 0 16px 36px -26px rgba(21,32,43,.3);
  --sans: "Figtree", ui-sans-serif, system-ui, sans-serif;
  --serif: "Outfit", ui-sans-serif, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root[data-tema="porcelana"]:not([data-theme="light"]) {
    --ground: #10161C; --raise: #171F27; --sunk: #131A21; --hover: #1C252E;
    --ink: #E8EDF2; --muted: #9AA6B2; --faint: #66727E;
    --line: #28323D; --line-soft: #202932;
    --accent: #6FB3E8; --accent-soft: #16304A;
    --ok: #5FBF85; --ok-soft: #17301F; --dudoso: #D9A441; --dudoso-soft: #332912; --malo: #E06A78; --malo-soft: #361A1E;
  }
}
:root[data-tema="porcelana"][data-theme="dark"] {
  --ground: #10161C; --raise: #171F27; --sunk: #131A21; --hover: #1C252E;
  --ink: #E8EDF2; --muted: #9AA6B2; --faint: #66727E;
  --line: #28323D; --line-soft: #202932;
  --accent: #6FB3E8; --accent-soft: #16304A;
  --ok: #5FBF85; --ok-soft: #17301F; --dudoso: #D9A441; --dudoso-soft: #332912; --malo: #E06A78; --malo-soft: #361A1E;
}
:root[data-tema="porcelana"] .card { border-radius: 16px; }
:root[data-tema="porcelana"] .chip { border-radius: 999px; }
:root[data-tema="porcelana"] .brandbox .b { font-weight: 600; letter-spacing: -.02em; }
:root[data-tema="porcelana"] .enter h1, :root[data-tema="porcelana"] h2 { font-weight: 600; letter-spacing: -.02em; }