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

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/

/* pagy nav css below */
.pagy-info {
  @apply text-sm font-normal text-gray-500 hidden sm:block;
  b {
    @apply font-semibold text-gray-900;
  }
}

.pagy-nav {
  @apply inline-flex items-stretch -space-x-px;
}


/* Prev and Next disabled */
span.page.prev.disabled,
span.page.next.disabled {
  @apply flex items-center justify-center text-sm py-2 px-3 leading-tight bg-white border border-gray-300 text-gray-500 cursor-not-allowed;
}

span.page form button.prev {
  @apply rounded-l-lg;
}
/* Prev disabled */
span.page.prev.disabled {
  @apply rounded-l-lg;
}
span.page form button.next {
  @apply rounded-r-lg;
}
/* Next disabled */
span.page.next.disabled {
  @apply rounded-r-lg;
}

/* Active page */
span.page.active {
  @apply flex items-center justify-center text-sm z-10 py-2 px-3 leading-tight text-primary-600 bg-primary-50 border border-primary-300 hover:bg-primary-100 hover:text-primary-700;
}

span.page.gap {
  @apply flex items-center justify-center text-sm z-10 py-2 px-3 leading-tight text-gray-600 bg-gray-50 border border-primary-300 hover:bg-gray-100 hover:text-gray-700;
}

/* Page links */
.page a {
  @apply flex items-center justify-center text-sm py-2 px-3 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700;
}

.page form button {
  @apply flex items-center justify-center text-sm py-2 px-3 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700;
}

/* Next page link */
.page.next a {
  @apply rounded-r-lg;
}

.page.prev a {
  @apply rounded-l-lg;
}

/* Slider css below */
.slider {
  width: 100%;
  height: 325px;
  padding-top: 14px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.slider3 {
  width: 100%;
  height: 450px;
  padding-top: 14px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.slide-ana,
.slide-ana3 {
  height: 75vh;
}

.slide-ana > div,
.slide-ana3 > div {
  width: 100%;

  position: absolute;
  transition: all 1s;
}

@media (min-width: 320px) and (max-width: 1023px) {
  .slider {
      height: 450px;
  }
}
.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Número de líneas a mostrar */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 4.5em; /* Ajustar según el número de líneas y el tamaño de la fuente */
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.turbo-frame-fade-in {
  animation: fadeIn 0.5s ease-in-out;
}
/*
 * 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.
 *


 */