.via-card {
  @apply block rounded-md shadow-md w-full border-gray-300 border drop-shadow-lg bg-white dark:bg-[#4E4E4E] shadow-[#D1D1D1] hover:shadow-[#00000033];
}

.via-label {
  @apply block text-gray-500 dark:text-gray-300 text-[14px] xl:text-[15px] font-medium mb-1 pl-0;
}

.via-input {
  @apply w-full text-sm text-gray-900 dark:text-neutral-900 rounded-lg border border-gray-300 focus:ring-stone-500 focus:border-stone-500 dark:border-stone-600 dark:placeholder-gray-400  dark:focus:border-stone-500 !important;
}

.via-input-prepend {
  @apply w-full text-sm text-gray-900 dark:text-neutral-900 rounded-l-lg border-l-gray-100 border border-gray-300 focus:ring-stone-500 focus:border-stone-500 dark:border-stone-600 dark:placeholder-gray-400  dark:focus:border-stone-500 !important;
}

.via-append-input {
  @apply absolute top-0 -right-1 h-full p-1 text-sm font-medium text-white bg-theme-app-500 dark:bg-theme-app-900 rounded-r-lg border border-theme-app-900 hover:bg-theme-app-600 focus:ring-4 focus:outline-none focus:ring-theme-app-300 dark:hover:bg-theme-app-900 dark:focus:ring-theme-app-800;
}    

.via-append-input-extra {
  @apply absolute top-0 right-0 h-full p-1 mr-6 text-sm font-medium text-white bg-theme-app-500 dark:bg-theme-app-900 border border-theme-app-900 hover:bg-theme-app-800 focus:ring-4 focus:outline-none focus:ring-theme-app-300 dark:hover:bg-theme-app-900 dark:focus:ring-theme-app-800;
}

.via-button {
  @apply cursor-pointer inline-flex items-center h-8 px-2 m-1 text-white ease-linear transition-colors duration-150 rounded-md border border-gray-300 dark:border-gray-700;
}
.via-div-actions {
  @apply flex w-full justify-center flex-wrap;
}

.via-no {
  @apply text-red-700 dark:text-red-600;
}

.via-yes {
  @apply text-green-700 dark:text-green-600;
}

.via-default {
  @apply text-theme-app-700 dark:text-theme-app-300;
}

.via-default-bg {
  @apply bg-theme-app-700 dark:bg-theme-app-300;
}

.via-default-active {
  @apply text-theme-app-500 dark:text-theme-app-500;
}

.via-yellow {
  @apply text-amber-400 dark:text-amber-300 ;
}

.via-yellow-bg {
  @apply bg-amber-500 dark:bg-amber-600 ;
}

.via-yellow-active {
  @apply text-amber-500 dark:text-amber-600 ;
}

.via-green {
  @apply text-green-400  dark:text-green-300;
}

.via-green-bg {
  @apply bg-green-500  dark:bg-green-600;
}

.via-green-active {
  @apply text-green-600  dark:text-green-600;
}

.via-red {
  @apply text-red-400  dark:text-red-300;
}

.via-red-bg {
  @apply bg-red-500  dark:bg-red-600;
}

.via-red-active {
  @apply text-red-600  dark:text-red-600;
}

.via-blue {
  @apply text-blue-400  dark:text-blue-300;
}

.via-blue-bg {
  @apply bg-blue-500  dark:bg-blue-600;
}

.via-blue-active {
  @apply text-blue-600  dark:text-blue-600;
}

.via-translate {
  @apply -translate-x-1/2;
}

.via-opacity {
  @apply bg-opacity-25;
}

.via-img-preview {
  @apply h-16 max-h-16 !important; 
}

.responsive-container {
  @apply w-full h-auto min-h-[calc(100vh-60px)] mx-auto bg-[#ECEFF8] dark:bg-[#0f0f0f] items-center pb-10 p-2 transition-colors duration-[350ms] ease-in-out text-[#0F0F0F] dark:text-[#F1F1F1] !important;
}

.via-title {
  @apply font-semibold text-[#0F0F0F] dark:text-[#F1F1F1]
}

.via-subtitle {
  @apply text-[#606060] dark:text-[#AAAAAA]
}

.via-text {
  @apply text-[#131313] dark:text-[#FFFFFF]
}

/* Clase para el color warning (azul) */
.via-warning {
  @apply bg-blue-500 hover:bg-blue-600 dark:bg-warning-dark dark:hover:bg-warning-hover-dark text-white !important;
}

/* Clase para el color danger (rojo) */
.via-danger {
  @apply bg-danger hover:bg-danger-hover dark:bg-danger-dark dark:hover:bg-danger-hover-dark text-white !important;
}

/* Clase para el color success (verde) */
.via-success {
  @apply bg-success hover:bg-success-hover dark:bg-success-dark dark:hover:bg-success-hover-dark text-white !important;
}


.via-background {
  @apply bg-[#F6F6F6] dark:bg-[#272727] !important;
}

/* .test {
  @apply bg-theme-app-
} */