[x-cloak] { display: none !important; }

.alert-debug {
  color: black;
  background-color: white;
  border-color: #d6e9c6;
}

.alert-error {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}


@view-transition {
  navigation: auto;
}

html {
    background-color: #f3f4f6;
    color-scheme: light dark; 
}


/* Definimos cómo se comporta el bloque de contenido */
::view-transition-old(dashboard-content) {
  animation: 200ms ease-in both fade-out;
}

::view-transition-new(dashboard-content) {
  animation: 300ms ease-out both fade-in, 300ms ease-out both slide-up;
}

@keyframes fade-out {
  to { opacity: 0; }
}

@keyframes fade-in {
  from { opacity: 0; }
}

@keyframes slide-up {
  from { transform: translateY(20px); }
  to { transform: translateY(0); }
}