/* Los tokens de la app apuntan a los del sistema de diseño Linex (tenant ultragroup).
   Se carga DESPUÉS de estilos.css: así gana sobre los valores propios sin reescribir las
   vistas. Está declarado bajo los tres selectores de tema (claro, oscuro fijado y oscuro del
   sistema) porque estilos.css redefine sus tokens en los dos oscuros con más especificidad que
   :root, y un alias solo en :root perdería ahí.

   Decisiones:
   - El texto no usa --lx-text en claro: en ultragroup --lx-text apunta a --lx-ink-950, que es el
     índigo de las acciones; el texto va en --lx-neutral-950 (gris frío, el de los paneles).
   - --serio (el naranja entre aviso y crítico) no toma el acento de marca, que es solo para lo
     accionable: se mezcla aviso y crítico.
   - El blanco sobre el acento es --sobre-acento (= --lx-on-solid): en oscuro el acento se
     invierte a claro y un #fff fijo dejaría los botones ilegibles. */
:root,
:root[data-theme="dark"] {
  --plano: var(--lx-surface);
  --superficie: var(--lx-surface-raised);
  --superficie-2: var(--lx-surface-sunken);
  --borde: var(--lx-border);
  --borde-suave: color-mix(in srgb, var(--lx-border) 60%, transparent);
  --texto: var(--lx-neutral-950);
  --texto-2: var(--lx-text-muted);
  --texto-3: var(--lx-faint);
  --acento: var(--lx-primary);
  --acento-tinta: var(--lx-primary-hover);
  --acento-suave: color-mix(in srgb, var(--lx-primary) 28%, transparent);
  --acento-fondo: var(--lx-primary-subtle);
  --sobre-acento: var(--lx-on-solid);
  --gris-serie: var(--lx-border-strong);
  --ok: var(--lx-success);
  --ok-tinta: var(--lx-success-fg);
  --ok-fondo: var(--lx-success-surface);
  --aviso: var(--lx-warning);
  --aviso-tinta: var(--lx-warning-fg);
  --aviso-fondo: var(--lx-warning-surface);
  --serio: color-mix(in srgb, var(--lx-warning-solid) 55%, var(--lx-danger-solid));
  --serio-tinta: color-mix(in srgb, var(--lx-warning-fg) 55%, var(--lx-danger-fg));
  --serio-fondo: color-mix(in srgb, var(--serio) 10%, transparent);
  --critico: var(--lx-danger);
  --critico-tinta: var(--lx-danger-fg);
  --critico-fondo: var(--lx-danger-surface);
  --sombra: var(--lx-shadow-sm);
  --radio: var(--lx-radius-md);
  --fuente: var(--lx-font-family);
  --mono: var(--lx-font-mono);
  --foco: var(--lx-focus-color);
}

/* En oscuro el texto sí es el del sistema (neutral-50): ahí --lx-text no es el índigo. */
:root[data-theme="dark"] {
  --texto: var(--lx-text);
  --acento-tinta: var(--lx-primary);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --plano: var(--lx-surface);
    --superficie: var(--lx-surface-raised);
    --superficie-2: var(--lx-surface-sunken);
    --borde: var(--lx-border);
    --borde-suave: color-mix(in srgb, var(--lx-border) 60%, transparent);
    --texto: var(--lx-text);
    --texto-2: var(--lx-text-muted);
    --texto-3: var(--lx-faint);
    --acento: var(--lx-primary);
    --acento-tinta: var(--lx-primary);
    --acento-suave: color-mix(in srgb, var(--lx-primary) 28%, transparent);
    --acento-fondo: var(--lx-primary-subtle);
    --sobre-acento: var(--lx-on-solid);
    --gris-serie: var(--lx-border-strong);
    --ok: var(--lx-success);
    --ok-tinta: var(--lx-success-fg);
    --ok-fondo: var(--lx-success-surface);
    --aviso: var(--lx-warning);
    --aviso-tinta: var(--lx-warning-fg);
    --aviso-fondo: var(--lx-warning-surface);
    --serio: color-mix(in srgb, var(--lx-warning-solid) 55%, var(--lx-danger-solid));
    --serio-tinta: color-mix(in srgb, var(--lx-warning-fg) 55%, var(--lx-danger-fg));
    --serio-fondo: color-mix(in srgb, var(--serio) 10%, transparent);
    --critico: var(--lx-danger);
    --critico-tinta: var(--lx-danger-fg);
    --critico-fondo: var(--lx-danger-surface);
    --sombra: var(--lx-shadow-sm);
    --radio: var(--lx-radius-md);
    --fuente: var(--lx-font-family);
    --mono: var(--lx-font-mono);
    --foco: var(--lx-focus-color);
  }
}

/* Foco visible con el anillo del sistema, en todos los controles de la app. */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}

/* Íconos de línea del menú (public/iconos.svg): heredan el color del texto. */
.ic {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -3px;
}