/**
 * Design tokens.
 *
 * El tema claro se define completo en `:root`. El oscuro redefine SOLO los
 * tokens de color, en dos bloques que deben mantenerse en sincronía:
 *
 *   1. `@media (prefers-color-scheme: dark)` con guarda `:not([data-theme="light"])`
 *      → cubre a quien nunca tocó el toggle y usa el sistema en oscuro.
 *   2. `[data-theme="dark"]`
 *      → cubre la elección manual, y gana sobre la preferencia del sistema.
 *
 * Ningún color debe tener su única definición dentro de un bloque de tema.
 */

:root {
  /* ---- Color: superficies ---- */
  --ds-bg: #f4f6fa;
  --ds-surface: #ffffff;
  --ds-surface-sunken: #eef1f6;
  --ds-surface-hover: #f5f7fa;
  --ds-overlay: rgb(16 24 36 / 45%);

  /* ---- Color: bordes ---- */
  --ds-border: #dde3ec;
  --ds-border-strong: #c3ccda;

  /* ---- Color: texto ---- */
  --ds-text: #16202e;
  --ds-text-muted: #5b6879;
  --ds-text-subtle: #8794a5;
  --ds-text-on-accent: #ffffff;

  /* ---- Color: marca y estados ---- */
  --ds-accent: #1f6feb;
  --ds-accent-hover: #1a5fcc;
  --ds-accent-active: #164fa8;
  --ds-accent-soft: #e7f0fe;
  --ds-accent-ring: rgb(31 111 235 / 35%);

  --ds-success: #157f4a;
  --ds-success-soft: #e2f5ea;
  --ds-warning: #9a6400;
  --ds-warning-soft: #fdf1da;
  --ds-danger: #c02b23;
  --ds-danger-soft: #fdeae8;
  --ds-info: #1f6feb;
  --ds-info-soft: #e7f0fe;

  /* ---- Sidebar (superficie propia, oscura en ambos temas) ---- */
  --ds-sidebar-bg: #131c2b;
  --ds-sidebar-text: #c7d1de;
  --ds-sidebar-text-strong: #ffffff;
  --ds-sidebar-hover: rgb(255 255 255 / 7%);
  --ds-sidebar-active: rgb(31 111 235 / 22%);
  --ds-sidebar-border: rgb(255 255 255 / 9%);

  /* ---- Espaciado (escala de 4px) ---- */
  --ds-space-1: 0.25rem;
  --ds-space-2: 0.5rem;
  --ds-space-3: 0.75rem;
  --ds-space-4: 1rem;
  --ds-space-5: 1.5rem;
  --ds-space-6: 2rem;
  --ds-space-7: 3rem;
  --ds-space-8: 4rem;

  /* ---- Tipografía ---- */
  --ds-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --ds-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --ds-text-xs: 0.75rem;
  --ds-text-sm: 0.8125rem;
  --ds-text-md: 0.875rem;
  --ds-text-base: 0.9375rem;
  --ds-text-lg: 1.0625rem;
  --ds-text-xl: 1.25rem;
  --ds-text-2xl: 1.5rem;
  --ds-text-3xl: 1.875rem;

  --ds-weight-normal: 400;
  --ds-weight-medium: 500;
  --ds-weight-semibold: 600;

  --ds-leading-tight: 1.25;
  --ds-leading-normal: 1.5;

  /*
   * ---- Radios ----
   *
   * La escala arranca de los botones y no al revés. El botón es cápsula
   * —`--ds-radius-full`, que a 36px de alto son 18px de radio—, así que una
   * tarjeta con esquinas de 12px al lado se ve como de otro juego. Los radios
   * de las cajas suben para acompañarlo: `lg` para lo que envuelve un control y
   * `xl` para lo que envuelve una pantalla —tarjetas, hojas, diálogos—.
   */
  --ds-radius-sm: 6px;
  --ds-radius-md: 10px;
  --ds-radius-lg: 16px;
  --ds-radius-xl: 22px;
  --ds-radius-full: 999px;

  /* ---- Sombras ---- */
  --ds-shadow-sm: 0 1px 2px rgb(16 24 36 / 6%);
  --ds-shadow-md: 0 2px 8px rgb(16 24 36 / 8%), 0 1px 2px rgb(16 24 36 / 4%);
  --ds-shadow-lg: 0 12px 32px rgb(16 24 36 / 14%), 0 2px 8px rgb(16 24 36 / 6%);

  /* ---- Capas ---- */
  --ds-z-sidebar: 40;
  --ds-z-topbar: 30;
  --ds-z-tabbar: 50;
  --ds-z-overlay: 100;
  --ds-z-toast: 200;

  /* ---- Movimiento ---- */
  --ds-duration-fast: 120ms;
  --ds-duration-base: 200ms;
  --ds-ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Medidas del layout ---- */
  --ds-sidebar-width: 248px;
  --ds-sidebar-width-collapsed: 64px;
  --ds-topbar-height: 60px;
  --ds-content-max: 1400px;

  /*
   * ---- Puntos de corte ----
   *
   * Están acá para poder leerlos, no para usarlos: **una custom property no
   * funciona dentro de un `@media`**, porque las media queries se evalúan antes
   * de que exista la cascada que resuelve `var()`. Los números se escriben a
   * mano en cada hoja y estos tokens son la referencia contra la que se
   * comparan; `responsive.test.mjs` falla si alguna hoja usa un corte que no
   * esté en esta lista.
   *
   * El mismo cuadro vive en `ds/js/breakpoints.js` para el lado de JavaScript.
   *
   *   phone   → hasta 479.98px  · teléfono en vertical
   *   mobile  → hasta 767.98px  · **el corte que decide móvil vs. escritorio**
   *   tablet  → hasta 1023.98px · navegación compacta (sidebar deslizable)
   *   wide    → desde 1280px    · dos columnas de contenido
   */
  --ds-bp-phone: 480px;
  --ds-bp-mobile: 768px;
  --ds-bp-tablet: 1024px;
  --ds-bp-wide: 1280px;

  /* ---- Medidas del móvil ---- */
  /*
   * El alto de la barra, y de él sale el **lado del cuadrado** de cada pestaña:
   * descontado el relleno del vidrio quedan 66px. Con el radio completo, ancho
   * igual a alto es un círculo; era un rectángulo de 94×58 mientras la barra
   * ocupaba todo el ancho.
   *
   * El cuadrado ya no depende de la etiqueta. Antes sí: el ancho lo fijaba la
   * pestaña más larga, y salía cuadrado en la aplicación del representante
   * —«Actividad» mide 66px con su relleno— y **ovalado en el panel**, donde las
   * etiquetas son cortas y las pestañas medían 51×66. Se había descartado
   * forzarlo con un `min-width` igual al alto útil, y con razón: eso le pone
   * piso al mínimo de la columna del grid, así que a 304px de ancho disponible
   * —un teléfono de 320px— las cinco pestañas suman 330px y se salen del vidrio.
   *
   * Ese argumento dejó de valer porque el ancho fijo ya no está en la pestaña:
   * está en **la etiqueta** (`layout.css`), que mide el lado del cuadrado menos
   * el relleno y encima puede encogerse con `max-width: 100%`. Así el máximo de
   * la columna es el cuadrado y su mínimo sigue siendo cero: cuadrada donde hay
   * lugar, angosta antes que fuera de la barra.
   */
  --ds-tabbar-height: 74px;
  --ds-tabbar-inset: var(--ds-space-2);
  --ds-tabbar-item: calc(var(--ds-tabbar-height) - var(--ds-space-1) * 2);
  /*
   * La etiqueta de la pestaña es lo único que **no** sigue la escala del
   * teléfono, que sube `--ds-text-xs` a 13px. La razón es geométrica: en un
   * círculo de 66px el ancho útil a la altura de la etiqueta no es el diámetro,
   * es la cuerda —57.7px—, y a 13px «Actividad» mide 58 y se sale del círculo
   * por los dos lados. A 11px mide 50.2 y queda con 3.7px de aire por lado.
   *
   * Es el presupuesto de toda etiqueta nueva de la barra: hasta unos 53px, que a
   * 11px son once caracteres angostos («Inventario») o nueve anchos. Más largo
   * se corta con puntos suspensivos, y conviene un `tabLabel` más corto.
   */
  --ds-tabbar-label: 0.6875rem;
  --ds-tap-min: 44px;

  /*
   * Vidrio: la barra inferior deja ver lo que pasa por debajo, desenfocado.
   *
   * Los dos números se mueven **juntos**: al bajar el tinte sube el desenfoque, o
   * el texto de abajo se lee a través de la barra y compite con las etiquetas.
   * Más transparente y más desenfocado se lee como vidrio; más transparente a
   * secas, como una barra sucia.
   *
   * El tinte solo no alcanza para que parezca vidrio, y en el tema oscuro casi no
   * se nota: el color de superficie está tan cerca del fondo que bajarle el alfa
   * cambia poco. Lo que lo hace vidrio son las otras tres cosas, en
   * `layout.css`: el desenfoque, la saturación —los colores de abajo se
   * transparentan vivos, que es lo que distingue el vidrio de un velo gris— y el
   * reborde claro del canto.
   */
  --ds-glass-blur: 36px;
  --ds-glass-tint: 34%;

  /*
   * El área segura del teléfono con muesca o barra de gestos. `env()` devuelve
   * 0px en cualquier navegador donde no aplique, así que se puede sumar sin
   * condicionales; el respaldo cubre a los que no conocen la función.
   */
  --ds-safe-top: env(safe-area-inset-top, 0px);
  --ds-safe-bottom: env(safe-area-inset-bottom, 0px);
  --ds-safe-left: env(safe-area-inset-left, 0px);
  --ds-safe-right: env(safe-area-inset-right, 0px);

  /* Espacio que hay que dejar libre al pie para que la barra de pestañas no
     tape el último elemento de la página. */
  --ds-tabbar-clearance: calc(
    var(--ds-tabbar-height) + var(--ds-tabbar-inset) * 2 + var(--ds-safe-bottom)
  );
}

/*
 * Escala tipográfica del teléfono.
 *
 * Un punto más grande en todo, y el cuerpo en 16px exactos. Dos motivos, y el
 * segundo es el que obliga:
 *
 * 1. La aplicación de campo se lee de pie, en movimiento, a veces con sol de
 *    frente. Los 15px que en un monitor a 60cm son cómodos, en la mano y a la
 *    intemperie no lo son.
 * 2. **iOS acerca la pantalla al enfocar un campo con menos de 16px** y después
 *    no la devuelve. `components.css` ya lo fuerza para `.ds-input`, `.ds-select`
 *    y `.ds-textarea`, pero eso solo cubre a los campos que llevan la clase: un
 *    `<input>` suelto en una pantalla hereda el tamaño del cuerpo, y con el
 *    cuerpo en 16px no hay forma de que quede por debajo.
 *
 * Los títulos suben menos que el texto: en 360px de ancho, un título de 30px
 * ocupa tres renglones y empuja el contenido fuera de la primera pantalla.
 */
@media (max-width: 767.98px) {
  :root {
    --ds-text-xs: 0.8125rem;
    --ds-text-sm: 0.875rem;
    --ds-text-md: 0.9375rem;
    --ds-text-base: 1rem;
    --ds-text-lg: 1.125rem;
    --ds-text-xl: 1.3125rem;
    --ds-text-2xl: 1.5rem;
    --ds-text-3xl: 1.75rem;
  }
}

/* Tema oscuro — preferencia del sistema, salvo que se haya elegido claro. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ds-bg: #0e1520;
    --ds-surface: #16202e;
    --ds-surface-sunken: #111a26;
    --ds-surface-hover: #1d2938;
    --ds-overlay: rgb(4 8 14 / 65%);

    --ds-border: #263141;
    --ds-border-strong: #384657;

    --ds-text: #e7edf5;
    --ds-text-muted: #9aa8ba;
    --ds-text-subtle: #6f7f93;
    --ds-text-on-accent: #ffffff;

    --ds-accent: #4d94ff;
    --ds-accent-hover: #6ba5ff;
    --ds-accent-active: #8ab7ff;
    --ds-accent-soft: rgb(77 148 255 / 15%);
    --ds-accent-ring: rgb(77 148 255 / 40%);

    --ds-success: #56d19a;
    --ds-success-soft: rgb(86 209 154 / 14%);
    --ds-warning: #e3b05a;
    --ds-warning-soft: rgb(227 176 90 / 14%);
    --ds-danger: #ff8078;
    --ds-danger-soft: rgb(255 128 120 / 14%);
    --ds-info: #4d94ff;
    --ds-info-soft: rgb(77 148 255 / 15%);

    --ds-sidebar-bg: #0b121c;
    --ds-sidebar-text: #a9b6c7;
    --ds-sidebar-text-strong: #ffffff;
    --ds-sidebar-hover: rgb(255 255 255 / 6%);
    --ds-sidebar-active: rgb(77 148 255 / 20%);
    --ds-sidebar-border: rgb(255 255 255 / 8%);

    --ds-shadow-sm: 0 1px 2px rgb(0 0 0 / 30%);
    --ds-shadow-md: 0 2px 8px rgb(0 0 0 / 36%), 0 1px 2px rgb(0 0 0 / 24%);
    --ds-shadow-lg: 0 12px 32px rgb(0 0 0 / 48%), 0 2px 8px rgb(0 0 0 / 32%);
  }
}

/* Tema oscuro — elección manual; gana sobre la preferencia del sistema. */
:root[data-theme="dark"] {
  --ds-bg: #0e1520;
  --ds-surface: #16202e;
  --ds-surface-sunken: #111a26;
  --ds-surface-hover: #1d2938;
  --ds-overlay: rgb(4 8 14 / 65%);

  --ds-border: #263141;
  --ds-border-strong: #384657;

  --ds-text: #e7edf5;
  --ds-text-muted: #9aa8ba;
  --ds-text-subtle: #6f7f93;
  --ds-text-on-accent: #ffffff;

  --ds-accent: #4d94ff;
  --ds-accent-hover: #6ba5ff;
  --ds-accent-active: #8ab7ff;
  --ds-accent-soft: rgb(77 148 255 / 15%);
  --ds-accent-ring: rgb(77 148 255 / 40%);

  --ds-success: #56d19a;
  --ds-success-soft: rgb(86 209 154 / 14%);
  --ds-warning: #e3b05a;
  --ds-warning-soft: rgb(227 176 90 / 14%);
  --ds-danger: #ff8078;
  --ds-danger-soft: rgb(255 128 120 / 14%);
  --ds-info: #4d94ff;
  --ds-info-soft: rgb(77 148 255 / 15%);

  --ds-sidebar-bg: #0b121c;
  --ds-sidebar-text: #a9b6c7;
  --ds-sidebar-text-strong: #ffffff;
  --ds-sidebar-hover: rgb(255 255 255 / 6%);
  --ds-sidebar-active: rgb(77 148 255 / 20%);
  --ds-sidebar-border: rgb(255 255 255 / 8%);

  --ds-shadow-sm: 0 1px 2px rgb(0 0 0 / 30%);
  --ds-shadow-md: 0 2px 8px rgb(0 0 0 / 36%), 0 1px 2px rgb(0 0 0 / 24%);
  --ds-shadow-lg: 0 12px 32px rgb(0 0 0 / 48%), 0 2px 8px rgb(0 0 0 / 32%);
}