/* Estilos propios del sistema (además de Tailwind). */

/* "hidden" siempre oculta, aunque el elemento tenga otra clase de diseño. */
[hidden] { display: none !important; }

/* Le avisa al navegador si la página está en modo claro u oscuro, para que
   dibuje con los colores correctos sus propios controles: listas desplegables,
   calendarios, barras de desplazamiento. */
html { color-scheme: light; }
html.dark { color-scheme: dark; }

/* Opciones de las listas desplegables en modo oscuro */
html.dark select option,
html.dark select optgroup {
  background-color: #111A2E;
  color: #e2e8f0;
}
html.dark select option:disabled { color: #64748b; }