/* Colores y medidas base de COMPUDIAZ. Los usan el ERP, el portal de clientes y la pantalla de ingreso.
   Los 12 colores de arriba se pueden cambiar en Ajustes -> Apariencia (web/tema.js los pisa con los del servidor).
   Todos los demas tonos (bordes, fondos suaves, textos grises) se calculan a partir de ellos con color-mix(),
   asi que cambiar uno cambia todo. En el CSS no se escriben colores sueltos: se usan estas variables. */
:root{
  --bg:#f3f5fb; --panel:#ffffff; --ink:#1c2340; --rail:#ffffff;
  --accent:#2f2be6; --ok:#0f9d8a; --warn:#c2670a; --danger:#e5384f;
  --vz-1:#4640e6; --vz-2:#f0642e; --vz-3:#14a878; --vz-4:#e8a400;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0d1020; --panel:#171b31; --ink:#e8eaf6; --rail:#12152a;
    --accent:#6b67f7; --ok:#3fd0bd; --warn:#e5a04a; --danger:#f0707f;
    --vz-1:#7470f7; --vz-2:#d95926; --vz-3:#199e70; --vz-4:#c98500;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0d1020; --panel:#171b31; --ink:#e8eaf6; --rail:#12152a;
  --accent:#6b67f7; --ok:#3fd0bd; --warn:#e5a04a; --danger:#f0707f;
  --vz-1:#7470f7; --vz-2:#d95926; --vz-3:#199e70; --vz-4:#c98500;
  color-scheme:dark;
}
:root{
  /* Color de los detalles: enlaces «Ver…→», íconos de las tarjetas pequeñas, «Programado», textos de acento.
     Sin elegir uno en Ajustes -> Apariencia sigue al color principal. */
  --detail:var(--accent);
  --panel-2:color-mix(in srgb,var(--ink) 4%,var(--panel));
  --muted:color-mix(in srgb,var(--ink) 68%,var(--panel));
  --faint:color-mix(in srgb,var(--ink) 48%,var(--panel));
  --line:color-mix(in srgb,var(--ink) 8%,var(--panel));
  --line-strong:color-mix(in srgb,var(--ink) 17%,var(--panel));
  --accent-ink:color-mix(in srgb,var(--accent) 84%,var(--ink));
  --accent-soft:color-mix(in srgb,var(--accent) 9%,var(--panel));
  --accent-line:color-mix(in srgb,var(--accent) 30%,var(--panel));
  --ok-soft:color-mix(in srgb,var(--ok) 12%,var(--panel));
  --warn-soft:color-mix(in srgb,var(--warn) 12%,var(--panel));
  --warn-line:color-mix(in srgb,var(--warn) 35%,var(--panel));
  --danger-soft:color-mix(in srgb,var(--danger) 11%,var(--panel));
  --shadow:0 1px 2px color-mix(in srgb,var(--ink) 5%,transparent), 0 14px 34px -16px color-mix(in srgb,var(--ink) 22%,transparent);
  --radius:18px; --radius-sm:10px;
  /* Colores que también se pueden cambiar en Ajustes -> Apariencia (Colores avanzados). Cada uno trae un valor automático que sigue a los de arriba. */
  --on-accent:#ffffff;                       /* texto sobre el color principal (botones) */
  --rail-ink:var(--muted);                   /* texto e íconos del menú lateral */
  --rail-active:transparent;                 /* fondo del elemento activo del menú */
  --rail-active-ink:var(--detail);           /* texto del elemento activo del menú */
  --tip:var(--ink); --tip-ink:var(--panel);  /* globos, avisos emergentes y textos flotantes */
  --topbar:var(--panel);                     /* barra de arriba */
  --hero-a:var(--accent); --hero-b:color-mix(in srgb,var(--accent) 62%,#000); --hero-ink:#ffffff;  /* tarjeta destacada */
  --gauge-1:#f5c542; --gauge-2:#e8891a;      /* medidor circular */
  --display:'Archivo',system-ui,sans-serif;
  --body:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',monospace;
}