/* Tema oscuro corporativo de MPproductividad (módulo local).
   Solo redefine las variables del modo oscuro que ya usa el CSS compilado:
   no toca el modo claro ni ninguna clase, así que la estética y la lógica
   de la web quedan intactas.
   Colores de marca: fondo #041227 y azul marino #00133A. */
/* Garantía de marca: en oscuro el logo SIEMPRE blanco, en claro siempre
   marino, pase lo que pase con el estado del tema en la aplicación. */
html.dark img[alt="MPproductividad"] { content: url("/assets/logo-mpp-dark-Bm0sDwwG.png"); }
html:not(.dark) img[alt="MPproductividad"] { content: url("/assets/logo-mpp-light-DAOdlkxB.png"); }

.dark {
  --background: #041227;        /* fondo general (color corporativo) */
  --surface: #00133a;           /* tarjetas y paneles (marino corporativo) */
  --surface-hover: #0a2554;     /* realce al pasar el ratón */
  --text-secondary: #a9bce2;    /* texto secundario, azulado y legible */
  --border: #ffffff24;          /* bordes algo más visibles sobre fondo oscuro */

  /* Grises "zinc" que el compilado no mapea ya a las variables de arriba */
  --color-zinc-700: #1a3a6e;    /* bordes y divisores */
  --color-zinc-600: #5f80b8;
  --color-zinc-500: #8ca4d2;
  --color-zinc-300: #cfe0f5;
  --color-zinc-200: #cfe0f5;
  --color-zinc-100: #f2f7fd;
}

/* Paneles superpuestos (CR, WhatsApp, Calendario, Aprovisionamiento): mientras
   uno está abierto, el enlace que Vue marca como activo en el menú lateral se
   ve neutro, porque lo que hay en pantalla es el panel. Lo controla la clase
   *-abierto que cada panel pone en <html>; al cerrarse, Vue vuelve a mandar. */
html:is(.cr-abierto, .wa-abierto, .cal-abierto, .ap-abierto) aside a.bg-primary:not([data-cr-link]):not([data-wa-link]):not([data-ap-link]) {
  background-color: transparent;
  color: color-mix(in oklab, var(--color-ink) 80%, transparent);
}
html:is(.cr-abierto, .wa-abierto, .cal-abierto, .ap-abierto) aside a.bg-primary:not([data-cr-link]):not([data-wa-link]):not([data-ap-link]):hover {
  background-color: var(--color-surface-hover);
}