@import "select2/dist/css/select2.min.css";
@tailwind base;
@tailwind components;
@tailwind utilities;


* {
  padding: 0;
  margin: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  font-family: Poppins, sans-serif;
}


.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.mt-16 {
  margin-top: 4rem;
}

/* login form classes */
.max-w-lg {
  max-width: 32rem;
}

.text-slate-500 {
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity));
}

/* tables */
.\[\&_tr\]\:border-b tr {
  border-bottom-width: 1px;
}

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
  transition-duration: .15s;
}

/* mi tramite form */
.max-w-md {
  max-width: 28rem;
}

.col-span-3 {
  grid-column: span 3 / span 3;
}

.principal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border-radius: 0.375rem; /* rounded-md */
  font-size: 0.875rem; /* text-sm */
  font-weight: 500; /* font-medium */
  transition-property: background-color, border-color, color, fill, stroke; /* transition-colors */
  outline: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* shadow */
  padding: 0.5rem 1rem; /* h-9 px-4 py-2 */
  /*margin-top: 1rem; mt-4*/
  background-color: #121C24; /* bg-primary-500 */
  color: white; /* text-white */
}

/* btn cancelar */
.cancel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border-radius: 0.375rem; /* rounded-md */
  font-size: 0.875rem; /* text-sm */
  font-weight: 500; /* font-medium */
  transition-property: background-color, border-color, color, fill, stroke; /* transition-colors */
  outline: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* shadow */
  padding: 0.5rem 1rem; /* h-9 px-4 py-2 */
  margin-top: 1rem; /* mt-4 */
  background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1)); /*bg-gray-500; */
  color: white; /* text-white */
}

select {
  appearance: none; /* Quita los estilos predeterminados del navegador */
  width: 100%; /* Asegura que el select ocupe todo el espacio disponible */
  border: 1px solid #ccc;
  padding: 8px;
  border-radius: 4px;
}

select option {
  width: 100%;
  text-align: left; /* Opcional: alinea el texto de las opciones */
}

.hidden {
  display: none;
}

.ts-control {
  padding: unset;
  padding-left: 8px;
}

.transition-transform {
  transition: transform 0.3s ease-in-out;
}

.rotate-180 {
  transform: rotate(180deg);
}


@layer components {
  .submit-btn {
    @apply inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm 
           font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 
           focus-visible:ring-slate-950 disabled:pointer-events-none disabled:opacity-50 
           dark:focus-visible:ring-slate-300 bg-primary-500 text-white shadow
           h-9 px-4 py-2 w-full lg:w-32 cursor-pointer;
  }

  input{
    @apply flex h-9 w-full rounded-md border border-slate-200 bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-slate-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-slate-950 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-800 dark:placeholder:text-slate-400 dark:focus-visible:ring-slate-300;
  }

  .input-form{
    @apply flex h-9 w-full rounded-md border border-slate-200 bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-slate-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-slate-950 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-800 dark:placeholder:text-slate-400 dark:focus-visible:ring-slate-300;
  }

  .select2-container--default .select2-selection--single {
    height: 2.25rem;
    width: 100%;
    border-radius: .375rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    padding: .25rem .75rem;
    font-size: .875rem;
    line-height: 1.25rem;
  }
}

.submit-btn:hover {
  cursor: pointer;
  background-color: #4A1D38; /* hover:rosa claro #FDF0F8 */
}

@media (min-width: 768px) {
  .md\:col-span-2 {
      grid-column: span 2 / span 2;
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}