body{
    background-color: white;
}

nav{
    background-color: #000000f1;
    
}

h1, p, h2, h3, h4, h5, h6{
    color: rgb(0, 0, 0)!important;
}

 .pblanco{
  color: white!important;
}

.accesorios-slider button{
  font-size: 0.8rem;
  padding-left: 0;
  padding-right: 0;
}

.accesorios-slider p{
  font-size: 0.9rem;
  
}

#compraForm .form-label{
    font-size: 1.3rem;
}

.modal-backdrop {
    z-index: 1050 !important;
  }

  .modal {
    z-index: 1060 !important;
  }
  .custom-modal-width {
    max-width: 90% !important;
  }
  
  .modal-body {
    max-height: 70vh;
    overflow-y: auto;
  }
  
  .modal-content {
    margin-top: auto;
    margin-bottom: auto;
  }
  
  .modal-dialog {
    display: flex !important;
    align-items: center !important;
    min-height: 100vh;
  }

  .card-img-top {
    width: 100%;
    height: 200px; /* Ajustalo como quieras */
    object-fit: cover;
    border-radius: 15px 15px 0px 0px;
  }

  .card-img-top2{
    border-radius: 15px 15px 0px 0px;
  }

.cards-veo-red{
    border-radius: 15px;
    border: 0;
    box-shadow: 0px 0px 0px 20px #ff02023b;
    background-color:#ff02023b;
}

.cards-veo-yellow{
    border-radius: 15px;
    border: 0;
    box-shadow: 0px 0px 0px 20px #ffd9025b;
    background-color: #ffd9025b;
}

.cards-veo-green{
    border-radius: 15px;
    border: 0;
    box-shadow: 0px 0px 0px 20px #10a50b3f;
    background-color: #10a50b3f;
}

.card-analisis{
  border-radius: 30px;
}

.cards-veo-color{
    border-radius: 15px;
    border: 0;
    box-shadow: 0px 0px 0px 10px #035e1e93;
}

.cards-veo{
    border-radius: 30px;
    
}

.boton-toggle {
    width: 100%;
    transition: all 0.3s ease;
  }
  
  .boton-agregado {
    background-color: black !important;
    color: white !important;
  }
  
  .boton-seleccionado {
    background-color: black !important;
    color: white !important;
  }


.switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
    margin-top: 10px;
  }
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  .slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: #9b9898b9;
    transition: 0.4s;
    border-radius: 34px;
  }
  .slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
  }
  input:checked + .slider {
    background-color: #28a745;
  }
  input:checked + .slider.red {
    background-color: #dc3545;
  }
  input:checked + .slider.yellow {
    background-color: #ffc107;
  }
  input:checked + .slider.green {
    background-color: #28a745;
  }
  input:checked + .slider:before {
    transform: translateX(24px);
  }
  
  .card .switch {
    display: block;
    margin: 0 auto;
  }


  footer p{
    color: white !important;
  }

.logo-veo{
    height: 24px;
}

.accesorios-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.accesorios-slider {
    display: flex;
    overflow-x: hidden;
    scroll-behavior: smooth;
    gap: 20px;
    width: 100%;
    scroll-snap-type: x mandatory;
}


.accesorio-card {
    width: 300px;
    flex: 0 0 auto;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    scroll-snap-align: start;
}
@media (max-width: 768px) {

    .accesorios-slider {
        gap: 0;
        padding: 0;
    }

    .accesorio-card {
        flex: 0 0 100%;
        width: 100%;
    }

}




/* Zoom suave */


/* Flechas */
.slider-btn {
    position: absolute;
    background: white;
    border: none;
    font-size: 20px;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    cursor: pointer;
    z-index: 10;
    transition: transform 0.2s ease;
    color: rgba(0, 0, 0, 0.452);
}

.slider-btn:hover {
    transform: scale(1.1);
}

.prev {
    left: -5px;
}

.next {
    right: -5px;
}