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

@layer components {
  /* BUTTONS */
  .btn {
    @apply px-5 py-2.5 text-sm font-medium rounded-lg focus:outline-none focus:ring-4;
  }

  /* Size */
  .btn-xs {
    @apply text-xs px-2 py-1;
  }
  .btn-sm {
    @apply text-sm px-3 py-1.5;
  }
  .btn-md {
    @apply text-sm px-5 py-2.5; /* Tamaño por defecto */
  }
  .btn-lg {
    @apply text-base px-6 py-3;
  }
  .btn-xl {
    @apply text-lg px-8 py-4;
  }

  /* Colors */
  .btn-blue {
    @apply text-white bg-blue-700 hover:bg-blue-800 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800;
  }
  .btn-gray {
    @apply text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700;
  }
  .btn-dark {
    @apply text-white bg-gray-800 hover:bg-gray-900 focus:ring-gray-300 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700;
  }
  .btn-light {
    @apply text-gray-900 bg-white border border-gray-300 hover:bg-gray-100 focus:ring-gray-100 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700;
  }
  .btn-green {
    @apply text-white bg-green-700 hover:bg-green-800 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800;
  }
  .btn-red {
    @apply text-white bg-red-700 hover:bg-red-800 focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900;
  }
  .btn-yellow {
    @apply text-white bg-yellow-400 hover:bg-yellow-500 focus:ring-yellow-300 dark:bg-yellow-500 dark:hover:bg-yellow-600 dark:focus:ring-yellow-700;
  }
  .btn-purple {
    @apply text-white bg-purple-700 hover:bg-purple-800 focus:ring-purple-300 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900;
  }

  /* FORMS */
  .form-label {
    @apply block mb-2 text-sm font-medium text-gray-900 dark:text-white;
  }

  .form-input {
    @apply mt-1 block rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50;
  }

  .form-input-medium {
    @apply form-input w-full;
  }

  .form-input-date {
    @apply form-input w-1/3;
  }

  .form-input-number {
    @apply form-input w-1/4;
  }

  .form-radio-input {
    @apply w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600
  }

  .form-radio-label {
    @apply ms-2 text-sm font-medium text-gray-900 dark:text-gray-300
  }

  .form-select-input {
    @apply block w-full p-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500
  }

  /* BADGES */

  .bg {
    @apply text-lg font-medium me-2 px-2.5 py-0.5 rounded border
  }

  .bg-blue {
    @apply bg-blue-100 text-blue-800 dark:bg-gray-700 dark:text-blue-400 border-blue-400
  }

  .bg-dark {
    @apply bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-400 border-gray-500
  }

  /* FORMS */
  .pagination {
    @apply justify-self-center
  }

  .pagination ul {
    @apply inline-flex -space-x-px text-sm
  }

  .pagination a {
    @apply flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white
  }

  .pagination li.active a {
    @apply  flex items-center justify-center px-3 h-8 text-blue-600 border border-gray-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white

  }

  /* TABLE */

  .table-items {
    @apply border-collapse border border-slate-400 w-full text-center table-auto min-w-max
  }

  .table-items th {
    @apply p-4 border border-slate-300
  }

  .table-items tr.row td {
    @apply p-2 border-b border-blue-100	
  }

  .grid-items {
    display: grid;
    grid-template-columns: 25px 50px 80px 1fr 120px 60px 140px 50px;
    grid-column-gap: 5px;
    grid-row-gap: 0px;
  }

  .gird-items-rows {  
    grid-template-rows: 50px;
  }
  .grid-items-header {
    grid-template-rows: 25px;
  }
}