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

@layer components {
  .btn-blue {
    @apply flex content-center items-center justify-center rounded-full bg-blue-800 border border-gray-300 px-5 py-3 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-700 focus:ring-offset-2 transition-all duration-150 hover:bg-gray-50 hover:text-blue-700;
  }
  .btn-delete {
    @apply flex content-center items-center justify-center rounded-full bg-white border border-red-500 px-5 py-3 text-sm font-medium text-red-500 shadow-sm focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition-all duration-150 hover:bg-red-500 hover:text-white; 
  }
  .btn-gray {
    @apply flex items-center text-sm justify-center gap-1 bg-white border rounded-full py-1 px-2 hover:bg-gray-100
  }
  .btn-add {
    @apply flex content-center items-center justify-center gap-2 rounded-md bg-white border border-gray-200 px-3 py-[0.35rem] text-xs font-medium text-blue-600 shadow-md focus:outline-none focus:ring-2 focus:ring-blue-700 focus:ring-offset-2 transition-all duration-150 hover:bg-blue-800 hover:text-white;
  }
  .ficha-build {
    @apply  bg-blue-50 rounded-xl my-4 p-6 pb-8;
  }
  .ficha-build h2 {
    @apply text-blue-900  bg-blue-100 font-bold py-4 px-8 rounded-lg;
  }
  .ficha-build hr {
    @apply mt-8 pb-2;
  }
  .ficha-items {
    @apply flex gap-x-8 justify-between pt-6 px-8;
  }
  .ficha-items div {
    @apply w-full;
  }
  .ficha-items label {
    @apply text-blue-900 font-medium;
  }
  .input, .ficha-items input, .ficha-items textarea, .ficha-items select {
    @apply w-full border border-gray-300 rounded-lg mt-2 p-3;
  }

  .input-symbol {
    position: relative;
    display: inline;
  }
  .input-symbol::after {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    padding: 0px 14px 0px 12px;
    border-left: 1px solid #e5e5e5;
    margin-right:1px;
  }
  
  .input-symbol.porcentaje::after {
    content: "%";
  }
  
  .input-symbol.euro::after {
    content: "€";
  }
  
  .input-symbol.metros::after {
    content: "m²";
  }


  .tipo-inversion {
    @apply bg-gray-100 text-gray-700 text-xs font-medium py-1 px-2 rounded-full;
  }
  .crv {
    @apply bg-blue-100 text-blue-700 text-xs font-medium py-1 px-2 rounded-full;
  }
  .cra {
    @apply bg-purple-100 text-purple-700 text-xs font-medium py-1 px-2 rounded-full;
  }

  /* Tables */

  .tabla {
    @apply w-full text-sm border-collapse overflow-hidden rounded-lg shadow-lg;
  }

  .tabla-titulo {
    @apply uppercase px-5 py-3 font-bold text-center text-white bg-blue-900;
  }

  .tabla-fila {
    @apply border-b hover:bg-gray-100 transition-colors duration-200;
  }

  .tabla-fila:nth-child(even) {
    @apply bg-gray-50 hover:bg-gray-100;
  }

  .tabla-fila td {
    @apply px-5 py-3;
  }

  .tabla-fila-azul {
    @apply bg-blue-50 hover:bg-blue-100 transition-colors duration-200;
  }

  .tabla-fila-azul td {
    @apply px-5 py-3 font-medium text-blue-900;
  }

  .tabla td:not(:first-child) {
    @apply text-right;
  }

  /* Pagination */
  .pagination {
    @apply flex justify-center items-center space-x-2;
  }
  .pagination span {
    @apply p-1;
  }
  .pagination a {
    @apply px-3 py-1 rounded-full border text-sm inline-flex items-center justify-center;
  }
  .pagination a {
    @apply bg-white text-gray-800 hover:text-blue-600 transition-colors duration-200;
  }
  .pagination span.current {
    @apply px-3 py-1 rounded-full border border-blue-200 bg-blue-100 text-blue-900;
  }
  .pagination span.gap {
    @apply bg-transparent;
  }
  .pagination .prev, .pagination .next {
    @apply !m-0 !bg-transparent  !static;
  }

  /* Slideshow */
  .thumbnail.active {
    @apply ring-1 ring-blue-500;
  }
}

/* Estilos adicionales */

/* Menú desplegable para notificaciones */
.dropdown:hover .dropdown-menu {
  display: block;
}

/*
 * 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.
 *


 */

 * {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: 0 auto;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  background-color: rgba(0,0,0,0.3);
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 0.75s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

.thumbnail {
  cursor: pointer;
  display: inline-block;
  margin: 0 5px;
}

.thumbnail img {
  object-fit: cover;
  border-radius: 5px;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.thumbnail:hover img, .thumbnail.active img {
  opacity: 1;
}

.thumbnail.active {
  border: 2px solid #007bff; /* O el color que prefieras */
  border-radius: 5px;
}