/* Importación desde librerías */
@import "toastr";
@import "vue-multiselect/dist/vue-multiselect.css";

/* Importación de recursos externos */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css');

@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 400;
    src: url(./google-icons/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1n-q_4MrImHCIJIZrDCvHOej.woff2) format('woff2');
}
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(./google-icons/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}

/* Scrollbar */  
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  
::-webkit-scrollbar-thumb {
  background: #777777;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #6f6b6b;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-thumb:active {
  background-color: #3c3a3a;
}

::-webkit-scrollbar-track {
  background: #e1e1e1;
  border-radius: 4px;
}

::-webkit-scrollbar-track:hover,
::-webkit-scrollbar-track:active {
background: #d4d4d4;
}

@tailwind base;
@tailwind components;
@tailwind utilities;

.btn-icon-primary {
  @apply flex w-fit px-1.5 py-0.5 rounded-md font-medium text-white bg-primary dark:bg-primary-dark hover:text-white hover:bg-secondary dark:hover:bg-secondary-dark hover:border-primary transition cursor-pointer;
}

.btn-icon-secondary {
  @apply flex w-fit px-1.5 py-0.5 rounded-md font-medium text-white bg-secondary dark:bg-secondary-dark hover:text-secondary hover:bg-primary dark:hover:bg-primary-dark hover:border-secondary transition cursor-pointer;
}

.header-icon {
  @apply hover:text-yellow-500 focus:text-yellow-600 hover:scale-105 hover:transition hover:duration-300;
}

.input-primary {
  @apply block w-full p-2 rounded-lg border-b-2 border-gray-200 bg-gray-50 text-sm text-black outline-gray-400
}

.input-secondary {
  @apply block w-full p-2 rounded-lg border-b-2 border-gray-200 bg-gray-50 text-sm text-secondary outline-gray-400
}

.table-head {
  @apply text-base font-semibold tracking-wide text-left text-white bg-primary dark:bg-primary-dark uppercase border-b border-primary dark:border-primary-dark divide-indigo-50 divide-x;
}

.table-item {
  @apply px-4 py-1 text-sm text-center;
}