:root {
  --custom1: #198754;
  --custom2: #6c757d;
  --custom3: #000000;
  --custom4: #efcf17;
}

/*.bg-success{
  background: var(--custom1) !important;
  color: #ffffff !important;
  border: none;
}*/

body{
  overflow-x: hidden;
}

a{
  text-decoration: none;
  color: inherit;
}
a:hover{
  color: inherit;
  opacity: 0.9;
}

#loader_main{
  position: fixed;
  top: 50%;
  z-index: 1059;
  display: none;
}

#loader_notifications{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1059;
  display: none;
}

#cookies_alert{
  position: fixed;
  bottom: 0%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9;
  opacity: 0.95;
}
@media screen and (max-width: 1024px) {
  #cookies_alert{
    width: 90%;
  }
}

.card,
.btn,
.accordion-item {
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .20) !important;
}

/* Efecto de despliegue para dropdowns de boostrap */
.dropdown-menu {
    animation: fadeInUp 0.5s ease forwards;
}
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dropdown-menu.centered {
  left: 50% !important;
  transform: translateX(-50%);
  max-width: calc(100vw - 20px); /* Resta 20px para tener un pequeño margen en los bordes */
}

/* Badge que va arriba a la derecha */
.badge-top-left {
  position: absolute;
  top: 10px;
  left: 10px;
}

.pagination>li>a,
.pagination>li>span {
  border: 1px solid var(--custom1);
}

.pagination>li.active>a {
  background: var(--custom1);
  color: #fff;
}

/*
Reinicia el margen superior
Ajusta la distancia entre el activador y el menú
.dropdown-menu {
    margin-top: 0;
    top: auto !important;
    bottom: calc(-100% - 10px);
}
*/

/*Animación ventana de contenido, se usa en SiteLayout.jsx*/
.animation {
    animation: fadeInDown 1s ease forwards;
    opacity: 0;
}
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*Estilo para el hover que muestra mas contenido de las cards*/
.zoom_effect {
  transition: transform 0.2s ease;
}
.zoom_effect .hover_show {
  display: none;
}
.zoom_effect:hover {
  transform: scale(1.02);
  z-index: 1;
}
.zoom_effect:hover .hover_show {
  display: block;
  z-index: 1;
}

/*Rotación de chevron*/
.rotate-chevron {
  transition: transform 0.5s ease;
}
.collapsed .rotate-chevron {
  transform: rotate(-90deg);
}

.product_list_selected{
  border: var(--custom1) solid 3px;
}
.product_list_error{
  border: red solid 3px;
}

/* width */
::-webkit-scrollbar {
  width: 8px;
}
/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

/* Autocomplete */
.autocomplete-items {
  position: absolute;
  z-index: 1000;
  background-color: #fff;
  border: 1px solid #ced4da;
  border-top: none;
  max-height: 200px;
  overflow-y: auto;
  width: 100%;
}
.autocomplete-item {
  padding: 8px 12px;
  cursor: pointer;
}
.autocomplete-item:hover {
  background-color: #e9ecef;
}

.radio-card {
  cursor: pointer;
  transition: transform 0.2s ease-in-out;
}

.radio-input:checked + .radio-card {
  border: 2px solid #0d6efd;
  box-shadow: 0 0 10px rgba(13, 110, 253, 0.5);
  transform: scale(1.02);
}

.radio-input {
  display: none;
}

.radio-img {
  width: 100%;
  object-fit: cover;
  border-radius: 0.375rem 0.375rem 0 0;
}


select option:disabled {
  color: gray !important;
  background-color: #f5f5f5 !important;
}