/* Colores */
@import 'variables.css';

@import url("https://fonts.googleapis.com/css?family=Roboto:400,500,300,700");

.img-container {
   position: relative;
}

.slider-img {
   width: 100%;
   height: auto;
   display: block;
}

.info {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   padding: 15px 20px;
   color: white;
   /* background: rgba(0, 0, 0, 0.7); Fondo negro semi-transparente */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
   text-align: left;
}

.info h2 {
   font-size: 1.8rem;
   margin: 0;
   font-weight: 400;
   letter-spacing: 0.23px;
}

.info p {
   margin: 5px 0 0 0;
   font-size: 1.2rem;
  display: flex;
  
}

.info p span {
  font-size:1.4rem
}
.info .icon-lugar {
  font-size:1.4rem;
  margin-right: 8px;
   margin-left: 1px;
}

@media (max-width: 425px){
  .info h2 {
   font-size: 1.6rem;
  }

  .info p {
   font-size: 1rem;	
  }

  .info p span {
   font-size: 1.1rem;
}

  .info .icon-lugar {
     font-size: 1rem;
  }

  .info p .lugar-link{
     align-items: unset;
  }
}

.info a {
   color: white;
   text-decoration: none;
  letter-spacing: 0.21px;
   font-weight: 300;
}

.material-symbols-outlined {
   vertical-align: middle;
   margin-right: 5px;

}


.evento-container .acciones .datos .nombre-artista, .evento-container .acciones .datos .lugar-link {
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
}

.grillas .evento .acciones .botones{
	display: flex;
}

.botones-slider{
   position: absolute !important;
   padding-top: 10px !important;
   margin-top: 6px !important;
}

.grillas .evento .acciones .botones a{
	margin-right: 5px;
}
.btnFiltros.active {
	color: #333;
    background-color: #fff;
    border-color: #ccc; 
}

.slider-destacados {
	display: none; /* Oculta completamente el slider */
}

#no-events-message {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 200px;
   border: 1px solid #777777;
   border-radius: 4px;
   background-color: #EAEAEA;
   color: #777777;
   font-family: Arial, Helvetica, sans-serif;
   text-align: center;
   margin-top: 20px;
}

.icon-container {
   font-size: 20px;
   color: #777777;
   margin-bottom: 10px;
   border: 1px solid #777777;
   border-radius: 50%;
   padding: 20px;
   width: 60px;
   height: 60px;
   display: flex;
   align-items: center;
   justify-content: center;
}

#no-events-message p {
   font-size: 16px;
   margin: 0;
}

#contenedor-destacados{
   margin: 50px auto 10px auto;
}

@media (max-width: 427px){
   #contenedor-destacados{
      margin: 38px auto 10px auto !important;
   }

}

@media (min-width: 1440px) {
   .icon-container {
      font-size: 24px;
      padding: 25px;
      width: 80px;
      height: 80px;
   }

   #no-events-message p {
      font-size: 20px;
   }
}

@media (min-width: 1024px) and (max-width: 1439px) {
   .icon-container {
      font-size: 22px;
      padding: 20px;
      width: 70px;
      height: 70px;
   }

   #no-events-message p {
      font-size: 18px;
   }
}

@media (min-width: 768px) and (max-width: 1023px) {
   .icon-container {
      font-size: 20px;
      padding: 15px;
      width: 60px;
      height: 60px;
   }

   #no-events-message p {
      font-size: 16px;
   }
}

@media (min-width: 425px) and (max-width: 767px) {
   #no-events-message {
      height: auto;
      padding: 10px;
      width: 107%
   }

   .icon-container {
      font-size: 18px;
      padding: 15px;
      width: 50px;
      height: 50px;
   }

   #no-events-message p {
      font-size: 14px;
   }
}

@media (min-width: 375px) and (max-width: 424px) {
   #no-events-message {
      height: auto;
      padding: 10px;
      width: 108%;
   }

   .icon-container {
      font-size: 18px;
      padding: 15px;
      width: 50px;
      height: 50px;
   }

   #no-events-message p {
      font-size: 14px;
   }
}

@media (max-width: 374px) {
   #no-events-message {
      height: auto;
      padding: 5px;
      width: 109%;
   }

   .icon-container {
      font-size: 16px;
      padding: 10px;
      width: 40px;
      height: 40px;
   }

   #no-events-message p {
      font-size: 12px;
   }
}




.grillas .btn-cargar-eventos-slider,
#grillas-filter-slider .btn-cargar-eventos-slider {
   display: inline-block;
   width: 96%;
   /* height: 53vh; */
   background: transparent;
   border: 1px solid #777777;
   border-radius: 4px;
   opacity: 1;
   text-align: center;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   letter-spacing: 0;
   color: #777777;
   text-transform: uppercase;
   margin: 0px;
}

#grillas-filter-slider .botones {
   display: flex;
}

#grillas-filter-slider .evento,
#grillas-mas-vendido-slider .evento {
   padding: 0px 17px 0px 0px;
}

#grillas-filter-slider .botones a {
   margin-right: 5px;
}


/* FILTROS BOTONES */

.filter-buttons {
   margin: 20px 0 !important;
   text-align: start !important;
}

.filter-buttons .btn {
   width: auto !important;
   border-radius: 50px !important;
   margin: 5px !important;
   padding: 10px 20px !important;
   transition: none !important;
   box-shadow: none !important;
   outline: none !important;
   transform: none !important;
}


.btnFiltros:hover,
.btnFiltros:focus,
.btnFiltros:active,
.activeFiltroTodo {
   background-color: #E54335 !important;
   color: white !important;
   border: none !important;
   outline: none !important;
   outline-offset: 0 !important;
}

.text-buttom-filtros {
   padding: 0px 7px !important;
}

/* FILTROS BOTONES */

/* BANNER */
.owl-dots {
   display: none !important;
}


/* CAMBIOS PARA QUE EL SLIDER DE DESTACADOS SEA RESPONSIVE */

.slick-track{
   margin-left: 0px !important;
}

.slider-destacados .slick-slide {
   display: flex !important;
   justify-content: center !important;
}

.slider-destacados .slick-slide img {
   width: 100% !important;
   height: auto !important;
}

.slider-destacados .slick-list {
   padding: 0 !important;
   border-radius: 4px;
}

.slider-destacados .slick-slide {
   margin: 0 !important;
}

/* CAMBIOS PARA QUE EL SLIDER DE DESTACADOS SEA RESPONSIVE */

h4 {
   font-size: 1.6rem !important;
}

.btn-neutro {
   font-size: 1rem !important;
}

.btn-iniciarSesion {
   margin-right: 10px;
   font-size: 12px !important;
}

.btn-Registrarse {
   font-size: 12px !important;
   background-color: black !important;
   color: white !important;
   border-color: white !important;
   border-width: 1px !important;
   border-style: solid !important;
}

.padding-container{
   padding: 0px 30px !important;
}

.slider-styles .evento-container {
   /* min-height: 41.6vh !important; */
}

.slider-styles .nombre-artista {
   /* min-height: 3vh !important; */
}

.slider-styles .datos {
   padding-bottom: 0px !important;
   min-height: 16vh !important;
}

.slider-styles .fecha {
   font-size: 1.3rem !important;
}

.slider-styles .restriccion {
   font-size: 1rem !important;
}


.slick-slide img {
   width: 100% !important;
}

.slick-list {
   /* border-radius: 10px */
}

.slick-prev,
.slick-next {
   position: absolute !important;
   top: 50% !important;
   transform: translateY(-50%) !important;
   width: 50px !important;
   height: 50px !important;
   background-color: white !important;
   border-radius: 50% !important;
   border: solid #ccc !important;
   box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.1) !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   cursor: pointer !important;
   z-index: 10 !important;
}

.slick-prev {
   left: -65px !important;
}

.slick-next {
   right: -65px !important;
}

.slick-prev:hover,
.slick-next:hover {
   background-color: #E54335 !important;
}

.slick-prev:hover::before,
.slick-next:hover::before {
   border-color: white !important;
   /* Cambia el color del borde al pasar el cursor */
}



.slick-prev::before,
.slick-next::before {
   content: '' !important;
   display: inline-block !important;
   border: 2px solid black !important;
   border-width: 0 2px 2px 0 !important;
   padding: 3px !important;
}


.slick-prev::before {
   transform: rotate(135deg) !important;
}

.slick-next::before {
   transform: rotate(-45deg) !important;
}

.slider-img {
   max-width: 100% !important;
   /* height: auto !important; */
   /* border-radius: 10px !important; */
   /* NUEVO CAMBIO PARA QUE LA IMAGENES SE ADAPTEN*/
   min-height: 200px !important;
   object-fit: cover !important;
   display: inline !important;
}


/* NEW BOTON CARGAR MAS EVENTOS SLIDER */

.btn-cargar-eventos-slider{
   background: transparent !important;
   border: 1px solid #777777 !important;
   border-radius: 4px !important;
   opacity: 1 !important;
   text-align: center !important;
   display: flex !important;
   justify-content: center !important;
   align-items: center !important;
   box-shadow: none !important;
   -webkit-box-shadow: none !important;
}

.btn-mas-eventos-container .circle-icon{
   border: 1px solid #777777 !important;
   border-radius: 100px;
   width: 9rem;
   height: 9rem;
   display: flex;
   justify-content: center;
   align-items: center;
   margin-bottom: 15px;
}

.btn-mas-eventos-container .circle-icon i{
   font-size: 18px;
   color: #777777
}

.btn-mas-eventos-container .text{
   font-weight: 700 !important; 
   font-size: 1.2rem !important;
   text-transform: uppercase;
}



@media (max-width: 2000px) {
   .slider-styles .evento-container {
      min-height: 43vh !important;
   }
   .grillas .btn-cargar-eventos-slider,
   #grillas-filter-slider .btn-cargar-eventos-slider {
      display: inline-block;
      width: 96%;
      /* height: 49vh !important; */
      background: transparent;
      border: 1px solid #777777;
      border-radius: 4px;
      opacity: 1;
      text-align: center;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 12px;
      letter-spacing: 0;
      color: #777777;
      text-transform: uppercase;
      margin: 0px;
      position: relative;
   }

   /* .grillas .btn-mas-eventos-container .circle-icon,
   #grillas-filter-slider .btn-mas-eventos-container .circle-icon {
       width: 90px;
       height: 90px; 
       border-radius: 50%;
       border: 1px solid #777777;
       display: flex;
       justify-content: center;
       align-items: center;
       margin: 0 auto;
       position: absolute;
       top: 47%;
       left: 50%;
       transform: translate(-50%, -50%);
   }
   
   .grillas .btn-mas-eventos-container .circle-icon i,
   #grillas-filter-slider .btn-mas-eventos-container .circle-icon i {
       font-size: 24px; 
       color: #777777;
   } */
   
   .grillas .btn-cargar-eventos-slider .text,
   #grillas-filter-slider .btn-cargar-eventos-slider .text {
       position: relative;
       /* top: 0%;
       left: 50%; */
       transform: translateX(-50%);
       font-size: 16px;
       color: #777777;
       z-index: 1;
       text-transform: none; 
   }
}

@media (max-width: 1200px) {
   .slider-styles .evento-container {
      min-height: 43vh !important;
   }
}

@media (max-width: 1024px) {
   .slider-styles .evento-container {
      min-height: 43vh !important;
   }
   .slick-list {
      padding-right: 40px !important;
   }

   #grillas-filter-slider .evento,
   #grillas-mas-vendido-slider .evento {
      padding: 0px 10px 0px 0px;
   }

   .grillas .btn-cargar-eventos-slider,
   #grillas-filter-slider .btn-cargar-eventos-slider {
      display: inline-block;
      width: 96%;
      background: transparent;
      border: 1px solid #777777;
      border-radius: 4px;
      opacity: 1;
      text-align: center;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 12px;
      letter-spacing: 0;
      color: #777777;
      text-transform: uppercase;
      margin: 0px;
   }
}

@media (max-width: 768px) {

   .evento-container .acciones .datos .nombre-artista, .evento-container .acciones .datos .lugar-link {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
   }

   .slider-styles .evento-container {
      min-height: 64vw !important;
   }

   /* #grilla-home .eventos .col-sm-6, #grilla-relacionados .eventos .col-sm-6 {
      padding: 0px 5px !important;
   } */
   .grillas .eventos .col-sm-6 {
      padding: 0px 5px !important;
   }

   .grillas .evento .acciones .botones {
      position: absolute;
      bottom: 6px;
      /* position: relative;
      bottom: 0px; */
      margin-left: 0px;
   }

   #grilla-home .evento .acciones .botones, #grilla-relacionados .evento .acciones .botones {
      position: absolute;
      bottom: 5px;
   }

   #grilla-home .evento .acciones .datos, #grilla-relacionados .evento .acciones .datos {
      padding-bottom: 32px;
   }

   .slider-styles .datos {
      padding-bottom: 0px !important;
      min-height: 120px !important;
   }

   .filter-buttons .btn {
      padding: 8px 16px !important;
      /* Ajusta el padding para tablets */
      font-size: 14px !important;
      /* Ajusta el tamaño de la fuente para tablets */
   }

   #grillas-filter-slider .evento,
   #grillas-mas-vendido-slider .evento {
      padding: 0px 10px 0px 0px;
   }

   .grillas .btn-cargar-eventos-slider,
   #grillas-filter-slider .btn-cargar-eventos-slider {
      display: inline-block;
      width: 96%;
      background: transparent;
      border: 1px solid #777777;
      border-radius: 4px;
      opacity: 1;
      text-align: center;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 12px;
      letter-spacing: 0;
      color: #777777;
      text-transform: uppercase;
      margin: 0px;
   }

   .grillas .evento .acciones,
   #grilla-relacionados .evento .acciones {
      background-color: #ffffff;
      padding: 0px 5px 6px;
      border-radius: 5px;
      height: 136px;
   }

   .botones-slider{
      position: absolute !important;
   }

   .padding-especial{
      padding: 0px 30px !important;
   }

   .padding-especial .row h2{
      padding: 0px 6px !important
   }

   .filter-buttons{
      margin-top: 10px !important;
      margin-bottom: 0px !important;
   }
}

@media (max-width: 576px) {
   .filter-buttons .btn {
      padding: 7px 14px !important;
      /* Ajusta el padding para celulares */
      font-size: 13px !important;
      /* Ajusta el tamaño de la fuente para celulares */
   }

   .slider-styles .nombre-artista {
      min-height: 0px !important;
      font-size: 1.4rem !important;
      margin-bottom: 0px !important;
      margin-top: 7px !important;
   }

   .slider-styles .fecha {
      font-size: 1rem !important;
   }

   .gtillas .evento .acciones .botones {
      bottom: 6px !important;
   }

   .evento-container .acciones .datos .nombre-artista, .evento-container .acciones .datos .lugar-link{
      font-size: 0.9rem;
   }

   /* .slider-styles .evento-container {
      min-height: 46vh !important;
   } */

}

@media (max-width: 479px) {
   .filter-buttons {
      margin-top: 15px !important;
      margin-bottom: 0px !important;
   }

   .filter-buttons .btn {
      margin-right: 5px !important;
      padding: 6px 12px !important;
      /* Ajusta el padding para celulares */
      font-size: 12px !important;
      /* Ajusta el tamaño de la fuente para celulares */
   }
   #banner-full-home {
      margin-bottom: 0px;
  }
  
  #eventos-container h2{
      margin-top: 0px;
  }

   #grillas-filter-slider .botones a,
   #grillas-mas-vendido-slider .botones a {
      padding: 10px 5px !important;
      /* padding: 10px !important; */
      font-size: 2.1vw !important;
   }

   #grillas-filter-slider .botones span,
   #grillas-mas-vendido-slider .botones span {
      padding: 12px 9px !important;
      font-size: 8px !important;
   }

   .grillas .btn-cargar-eventos-slider,
   #grillas-filter-slider .btn-cargar-eventos-slider {
      display: inline-block;
      width: 96%;
      /* min-height: 34vh !important; */
      background: transparent;
      border: 1px solid #777777;
      border-radius: 4px;
      opacity: 1;
      text-align: center;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 12px;
      letter-spacing: 0;
      color: #777777;
      text-transform: uppercase;
      margin: 0px;
   }
   .grillas .btn-cargar-eventos-slider .text, #grillas-filter-slider .btn-cargar-eventos-slider .text{
      font-size: 12px !important;
   }
   /* #grillas-filter-slider .btn-mas-eventos-container .circle-icon i{
      font-size: 1.4rem !important;

   } */
   /* .grillas .btn-mas-eventos-container .circle-icon, #grillas-filter-slider .btn-mas-eventos-container.circle-icon{
      width: 60px;
      height: 60px;
   } */

   /* #grilla-home .eventos .acciones .botones a {
      margin-right: 3px !important;
      font-size: 0.9rem !important;
      padding: 10px 9px !important;

   } */
   .grillas .eventos .acciones .botones a {
      margin-right: 3px !important;
      font-size: 0.85rem !important;
      padding: 10px 5px !important;

   }

   #grilla-home .eventos .acciones .botones span, #grilla-relacionados .eventos .acciones .botones span {
      font-size: 0.8rem !important;
      padding: 12px 9px !important;

   }

   #grilla-home .eventos .acciones .datos .nombre-artista, #grilla-relacionados .eventos .acciones .datos .nombre-artista {
      min-height: 0px !important;
      font-size: 1.4rem !important;
      margin-bottom: 0px !important;
      margin-top: 7px !important;
   }

   .grillas .eventos .acciones .datos .fecha {
      font-size: 0.9rem !important;
   }

}
@media (max-width: 425px) {
   .grillas .evento .acciones,
   #grilla-relacionados .evento .acciones {
      background-color: #ffffff;
      padding: 0px 5px 6px;
      border-radius: 5px;
      height: 134px;
      display:flex;
   }
}

@media (max-width: 375px) {
   #grillas-filter-slider .evento .acciones {
      padding: 5px !important;
   }

   #grillas-filter-slider .botones a,
   #grillas-mas-vendido-slider .botones a {
      padding: 10px 5px !important;
      /* padding: 10px !important; */
      font-size: 2vw !important;
      margin-right: 2px !important;
      font-weight: 500 !important;
   }

   #grillas-filter-slider .botones span,
   #grillas-mas-vendido-slider .botones span {
      padding: 12px 9px !important;
      font-size: 7px !important;
   }

   .grillas .btn-cargar-eventos-slider,
   #grillas-filter-slider .btn-cargar-eventos-slider {
      display: inline-block;
      width: 96%;
      background: transparent;
      border: 1px solid #777777;
      border-radius: 4px;
      opacity: 1;
      text-align: center;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 12px;
      letter-spacing: 0;
      color: #777777;
      text-transform: uppercase;
      margin: 0px;
   }

   .filter-buttons .btn {
      padding: 5px 10px !important;
      /* Ajusta el padding para celulares */
      font-size: 12px !important;
      /* Ajusta el tamaño de la fuente para celulares */
   }
   .grillas .evento .acciones,
   #grilla-relacionados .evento .acciones {
      background-color: #ffffff;
      padding: 0px 5px 6px;
      border-radius: 5px;
      height: 127px;
      display:flex;
   }
}


@media (max-width: 360px) {
   .filter-buttons .btn {
      padding: 5px 10px !important;
      /* Ajusta el padding para celulares */
      /* font-size: 10px !important; */
      /* Ajusta el tamaño de la fuente para celulares */
   }

   .slider-styles .btn-neutro {
      padding: 10px 10px 10px 10px !important;
      font-size: 0.8rem !important;
   }

   .slider-styles .evento-container {
      /* min-height: 360px !important; */
      /* min-height: 34vh !important; */

   }
   #grilla-home .eventos .acciones .botones a, #grilla-relacionados .eventos .acciones .botones a {
      font-size: 0.66rem !important;
      padding: 11px 6px !important;
      font-weight: 500;
      letter-spacing: 0.3px;

   }

   #grilla-home .eventos .acciones .botones span, #grilla-relacionados .eventos .acciones .botones span {
      font-size: 0.65rem !important;

   }

}

@media (max-width: 320px) {

   #grilla-home .eventos .acciones .botones a, #grilla-relacionados .eventos .acciones .botones a {
      font-size: 0.65rem !important;
      padding: 11px 6px !important;

   }

   #grilla-home .eventos .acciones .botones span, #grilla-relacionados .eventos .acciones .botones span {
      font-size: 0.65rem !important;

   }

   #grillas-filter-slider .evento .acciones {
      padding: 5px !important;
   }

   #grillas-filter-slider .botones a,
   #grillas-mas-vendido-slider .botones a {
      padding: 10px 2px !important;
      /* padding: 10px !important; */
      font-size: 6.5px !important;
      margin-right: 2px !important;
      font-weight: 500 !important;
   }

   #grillas-filter-slider .botones span,
   #grillas-mas-vendido-slider .botones span {
      padding: 11px 7px !important;
      font-size: 7px !important;
   }

   .grillas .btn-cargar-eventos-slider,
   #grillas-filter-slider .btn-cargar-eventos-slider {
      display: inline-block;
      width: 96%;
      background: transparent;
      border: 1px solid #777777;
      border-radius: 4px;
      opacity: 1;
      text-align: center;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 12px;
      letter-spacing: 0;
      color: #777777;
      text-transform: uppercase;
      margin: 0px;
   }

   .filter-buttons .btn {
      padding: 5px 10px !important;
      /* Ajusta el padding para celulares */
      /* font-size: 10px !important; */
      /* Ajusta el tamaño de la fuente para celulares */
   }

   .grillas .evento .acciones .botones {
      position: absolute;
      bottom: 5px;
      margin-left: -3.5px;
   }
   .grillas .evento .acciones,
   #grilla-relacionados .evento .acciones {
      background-color: #ffffff;
      /* padding: 0px 5px 6px; */
      border-radius: 5px;
      height: 130px;
      display:flex;
   }
}