/* Tokens del sistema de diseño (fuente de verdad: DESIGN.md).
   Paleta: papel frío, tinta azul marino, acento verde azulado; ámbar para lo pendiente y rojo para lo rechazado.
   Antes de cambiar un color: `npm run contraste` en mvp/ (WCAG AA y modo oscuro igual en sus dos bloques). */
:root {
  --bg: #F3F5F8; --surface: #FFFFFF; --surface-2: #EEF1F5; --ink: #131B27; --muted: #5A6574; --line: #DCE1E8;
  --hairline: rgb(19 27 39 / .09);
  --accent: #0B7A78; --accent-2: #12A08F; --accent-soft: #EAF7F4; --accent-ink: #FFFFFF;
  --warn: #8A5208; --warn-soft: #F9EAD3;
  --bad: #A22F3C; --bad-soft: #F8DEE1;
  --star: #E5A00D;
  --wa: #128C4B;
  --material: rgb(255 255 255 / .78);
  --sombra-flota: 0 2px 6px rgb(19 27 39 / .07), 0 22px 44px -18px rgb(19 27 39 / .26);
  --t-plomeria: #2F7FD8; --t-electricidad: #C98A06; --t-aire: #1597B5; --t-pintura: #A355C9; --t-general: #0B7A78;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B1018; --surface: #141C28; --surface-2: #1B2533; --ink: #E8EDF3; --muted: #9AA6B6; --line: #283345;
    --hairline: rgb(255 255 255 / .08);
    --accent: #5CC8BE; --accent-2: #7AD8C4; --accent-soft: #14322F; --accent-ink: #0B1018;
    --warn: #EBAE64; --warn-soft: #3A2A15;
    --bad: #F09AA4; --bad-soft: #3B1D22;
    --star: #F2C14E;
    --wa: #3DD68C;
    --material: rgb(20 28 40 / .78);
    --sombra-flota: 0 2px 6px rgb(0 0 0 / .4), 0 22px 44px -18px rgb(0 0 0 / .75);
    --t-plomeria: #7DB4F0; --t-electricidad: #F2C14E; --t-aire: #6FD0E6; --t-pintura: #D3A0EC; --t-general: #5CC8BE;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0B1018; --surface: #141C28; --surface-2: #1B2533; --ink: #E8EDF3; --muted: #9AA6B6; --line: #283345;
  --hairline: rgb(255 255 255 / .08);
  --accent: #5CC8BE; --accent-2: #7AD8C4; --accent-soft: #14322F; --accent-ink: #0B1018;
  --warn: #EBAE64; --warn-soft: #3A2A15;
  --bad: #F09AA4; --bad-soft: #3B1D22;
  --star: #F2C14E;
  --wa: #3DD68C;
  --material: rgb(20 28 40 / .78);
  --sombra-flota: 0 2px 6px rgb(0 0 0 / .4), 0 22px 44px -18px rgb(0 0 0 / .75);
  --t-plomeria: #7DB4F0; --t-electricidad: #F2C14E; --t-aire: #6FD0E6; --t-pintura: #D3A0EC; --t-general: #5CC8BE;
  color-scheme: dark;
}

/* Tipografía, formas y medidas (no cambian con el tema). */
:root {
  --sans: system-ui, -apple-system, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --r-card: 1rem; --r-ctl: .875rem; --r-hoja: 1.5rem;
  --toque: 2.75rem;            /* 44 px: objetivo táctil mínimo */
  --rail: 15.5rem;             /* ancho de la navegación lateral en escritorio */
  --barra-inf: 4.25rem;        /* alto de la barra inferior en el teléfono */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}