@import url('https://fonts.googleapis.com/css?family=Lato:200,200i,300,300i,400,500,600,700,700i&display=swap');
@import url('https://fonts.googleapis.com/css?family=Montserrat:200,300,400,600,700,800,900&display=swap');

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

@layer base {
  body {
    @apply text-neutral-6;
    font-family: 'Lato', sans-serif;
  }
}

@layer utilities {
  .box-shadow-1 {
    box-shadow: 0 0 0.25rem 0.1rem rgb(224, 224, 224);
  }

  .number {
    font-family: 'Montserrat', sans-serif;
  }

  .inactive-tab {
    @apply text-neutral-4 font-bold;
  }

  .active-tab {
    @apply text-primary font-bold underline;
  }

  .active-tab-tertiary {
    @apply text-tertiary-dark font-bold underline;
  }

  .form .field {
    @apply my-5;
  }

  .form .actions {
    @apply flex justify-end items-center;
  }

  .form label,
  .form legend {
    @apply text-sm;
  }

  .form input[type="text"],
  .form input[type="email"],
  .form input[type="password"],
  .form input[type="datetime-local"],
  .form input[type="date"] {
    @apply w-full px-4 py-2 outline-primary rounded-md bg-neutral-2;
  }

  .form select,
  .form textarea {
    @apply w-full px-4 py-2 outline-primary rounded-md border border-neutral-5;
  }

  .form input[type="submit"]{
    @apply btn btn-primary cursor-pointer;
  }

  .form button[type="button"] {
    margin-top: 25px;
    @apply btn btn-primary cursor-pointer;
  }

  .form textarea {
    @apply resize-none h-36 bg-neutral-2;
  }

  .form fieldset {
    @apply mb-5;
  }

  .form fieldset.submit {
    @apply mt-10 flex items-center justify-end;
  }

  .paginator {
    @apply mt-5 w-fit mx-auto flex gap-2;
  }

  .paginator a {
    @apply
    text-tertiary-dark
    hover:underline
    underline-offset-4;
  }

  .paginator .page {
    @apply block w-7 h-7 text-center;
  }

  .paginator .current-page {
    @apply text-primary font-bold underline
  }

  .paginator .first-page,
  .paginator .last-page,
  .paginator .next-page,
  .paginator .prev-page {
    @apply block h-7 px-1 text-center;
  }

  .table {
    @apply text-tertiary-dark;
  }

  .table td {
    @apply py-2;
  }

                                .breadcrumbs {
                                  @apply flex items-center gap-2 text-sm text-neutral-4;
                                }

                                .breadcrumbs a {
                                  @apply hover:text-primary transition-colors;
    .animate-spin {
        animation: spin 1s linear infinite;
      }
    
      @keyframes spin {
        from {
          transform: rotate(0deg);
        }
    
        to {
          transform: rotate(360deg);
        }
      }
        }
}

@layer components {
  .card {
    @apply px-6 py-5 rounded-lg bg-white box-shadow-1;
  }

  .btn {
    @apply px-4 py-2 rounded-md border border-neutral-3 text-neutral-5 transition-all duration-200;
  }

  .btn-primary {
    @apply btn bg-primary border border-transparent text-white hover:bg-primary-light hover:shadow-md transform hover:-translate-y-0.5;
  }

  .btn-neutral {
    @apply btn bg-neutral-3 border border-transparent text-neutral-4 hover:bg-neutral-2 hover:shadow-md transform hover:-translate-y-0.5;
  }

  .btn-primary-outline {
    @apply btn bg-white border border-primary text-primary hover:bg-primary-light/10 hover:shadow-md transform hover:-translate-y-0.5;
  }

  /* Estilos para el contenedor de acciones administrativas */
  .admin-actions-container {
    @apply bg-gradient-to-r from-gray-50 to-gray-100 border border-gray-200 shadow-sm;
  }

  /* Efectos hover mejorados para botones con iconos */
  .btn .material-icons {
    @apply transition-transform duration-200;
  }

  .btn:hover .material-icons {
    @apply transform scale-110;
  }

  .link {
    @apply text-primary hover:underline hover:text-primary-light transition-all;
  }
}

.modal-recording-url{
  position: fixed;
  z-index: 10;
  padding: 2em;

  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  border-radius: 15px;

  overflow: auto;
  background: white;
  -webkit-box-shadow: 0 0 300px 123px rgba(94,94,94,1);
  -moz-box-shadow: 0 0 300px 123px rgba(94,94,94,1);
  box-shadow: 0 0 300px 123px rgba(94,94,94,1);

}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

/* TomSelect Custom Styles */
.ts-wrapper.multi .ts-control {
  padding: 4px 8px 0;
  min-height: 40px;
}

.ts-wrapper.multi .ts-control>div {
  background: #EFE7FF;
  color: #4A4A4A;
  border: 1px solid #8D53E9;
  border-radius: 4px;
  margin: 0 4px 4px 0;
  padding: 2px 8px;
}

.ts-wrapper.plugin-remove_button .item .remove {
  border-left: 1px solid #8D53E9;
  padding-left: 6px;
  margin-left: 6px;
  color: #4A4A4A;
}

.ts-dropdown {
  border-color: #E6E6E7;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

.ts-dropdown .active {
  background-color: #EFE7FF;
  color: #4A4A4A;
}

.ts-dropdown .no-results {
  padding: 8px;
  text-align: center;
  color: #9B9B9B;
}

.ts-wrapper.multi .ts-control>div.active {
  background: #8D53E9;
  color: white;
  border-color: #8D53E9;
}

.plugin-clear_button .clear-button {
  margin-right: 4px;
  color: #9B9B9B;
}

.plugin-clear_button .clear-button:hover {
  color: #4A4A4A;
}