/* =====================================================================
   Colores de la página. Para cambiar un color basta con cambiarlo aquí.
   :root (arriba)               colores claros, los de siempre
   prefers-color-scheme: dark   oscuros, si el equipo está en modo oscuro y en Ajustes dice «Según el equipo»
   [data-theme="suave"]         «Suave (menos brillante)»
   [data-theme="dark"]          «Oscuro»
   ===================================================================== */

:root {
  --paper: #EDF1F6;
  --panel: #FFFFFF;
  --panel-2: #F5F7FB;
  --ink: #1D2A47;
  --ink-2: #46557A;
  --ink-3: #75829D;
  --line: #D2D9E4;
  --line-2: #E5EAF1;
  --brand: #234597;
  --brand-ink: #FFFFFF;
  --brand-soft: #E2E9F8;
  --tag: #FFC83D;
  --tag-ink: #1D2A47;
  --tag-edge: #DDA300;
  --ok: #1B7447;
  --ok-soft: #DDF1E5;
  --warn: #9A5800;
  --warn-soft: #FCEDD2;
  --bad: #B4322A;
  --bad-soft: #FADFDB;
  --focus: #2F6BFF;
  --overlay: rgba(16, 24, 40, .55);
  --shadow: 0 1px 2px rgba(29, 42, 71, .08), 0 10px 30px rgba(29, 42, 71, .10);
  --ui: "Atkinson Hyperlegible", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --num: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", "Segoe UI", system-ui, sans-serif;
  color-scheme: light;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="suave"]) {
    --paper: #0E1522; --panel: #162033; --panel-2: #1B273C;
    --ink: #E7EDF7; --ink-2: #B4C0D4; --ink-3: #8390A8;
    --line: #2C3951; --line-2: #233048;
    --brand: #86A6FF; --brand-ink: #0E1522; --brand-soft: #22324F;
    --tag: #FFC83D; --tag-ink: #1D2A47; --tag-edge: #E0A800;
    --ok: #5FD39C; --ok-soft: #173A2B; --warn: #F4B45E; --warn-soft: #3D2E14; --bad: #FF8C80; --bad-soft: #45211E;
    --focus: #86A6FF; --overlay: rgba(0, 0, 0, .6);
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .35);
    color-scheme: dark;
  }
}
:root[data-theme="suave"] {
  --paper: #DEDBD4; --panel: #ECE9E3; --panel-2: #E4E0D9;
  --ink: #2A2E35; --ink-2: #4B515B; --ink-3: #676C75;
  --line: #C6C1B8; --line-2: #D6D1C8;
  --brand: #2E4C7A; --brand-ink: #F2F0EB; --brand-soft: #D0D7E1;
  --tag: #DDB45A; --tag-ink: #2A2E35; --tag-edge: #B8913A;
  --ok: #2C6646; --ok-soft: #D1E0D3; --warn: #85560F; --warn-soft: #E8D9BE; --bad: #973A32; --bad-soft: #E8D0CB;
  --focus: #3C64A3; --overlay: rgba(30, 32, 36, .5);
  --shadow: 0 1px 2px rgba(40, 38, 32, .08), 0 8px 24px rgba(40, 38, 32, .10);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --paper: #0E1522; --panel: #162033; --panel-2: #1B273C;
  --ink: #E7EDF7; --ink-2: #B4C0D4; --ink-3: #8390A8;
  --line: #2C3951; --line-2: #233048;
  --brand: #86A6FF; --brand-ink: #0E1522; --brand-soft: #22324F;
  --tag: #FFC83D; --tag-ink: #1D2A47; --tag-edge: #E0A800;
  --ok: #5FD39C; --ok-soft: #173A2B; --warn: #F4B45E; --warn-soft: #3D2E14; --bad: #FF8C80; --bad-soft: #45211E;
  --focus: #86A6FF; --overlay: rgba(0, 0, 0, .6);
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .35);
  color-scheme: dark;
}