*{
    font-family: 'Outfit', sans-serif;
    margin: 0%;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
.overlay img {
    width: 200px; /* Ajusta el tamaño del GIF según sea necesario */
    height: auto;
}

.nombre-city{
    background-color: #fa0050;
    color: white;
    text-align: center;
    margin-top: 3%;
    margin-bottom: 3%;
    font-size: 200%; 
}

.estructura img{
    width: 100%; 
} 

/*Menu desplegable*/ 

#menuDesplegable, #menuDesplegable2{
    appearance: none; /* Elimina el estilo predeterminado del navegador */
    -webkit-appearance: none; /* Elimina el estilo predeterminado en navegadores basados en WebKit */
    -moz-appearance: none; /* Elimina el estilo predeterminado en Firefox */
    border: 1.5px solid #fa0050;
    border-radius: 15px; /* Redondea las esquinas */
    padding: 10px;
    font-style: italic;
    background: #ffffff;
    background-image: url('https://braze-images.com/appboy/communication/assets/image_assets/images/66e44b6c792b2100646bcf77/original.png?1726237548'); /* Agrega una flecha personalizada */
    background-repeat: no-repeat;
    background-position: right 10px center; /* Ubicación de la flecha personalizada */
    background-size: 12px; /* Tamaño de la flecha personalizada */
    margin: 2%;
    font-size: 15px;
    width: 20%;
    cursor: pointer;
}

.seccion {
    display: none;
}

h2{
    padding: 1%;
    margin: 1.5%;
}

.camino img{
    width: 75%;
    margin-left: 13%;
}

/*Secciones parte general*/ 
 
.bloque{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: 2%;
}

#slider, #slider1 {
    -webkit-appearance: none; /* Necesario para aplicar estilos personalizados en WebKit */
    appearance: none;
    width: 60%;
    height: 10px; /* Altura de la barra */
    border-radius: 5px; /* Borde redondeado */
    margin-top: 10%;
    margin-left: 5%;
    background: linear-gradient(to right, #fa0050 0%, #fa0050 0%, #ddd 0%, #ddd 100%); /* Gradiente inicial */
}


#slider::-webkit-slider-thumb, #slider1::-webkit-slider-thumb {
    cursor: pointer;
    width: 20px; /* Tamaño del puntero */
    height: 20px; /* Tamaño del puntero */
    background-image: url('https://braze-images.com/appboy/communication/assets/image_assets/images/66e41f0a2233380064ede55f/original.gif?1726226186'); /* URL de la imagen */
    background-repeat: no-repeat;
    background-size: contain;
    -webkit-appearance: none; /* Necesario para aplicar estilos personalizados en WebKit */
}


#slider1::-webkit-slider-thumb, #slider1::-webkit-slider-thumb {
    cursor: pointer;
    width: 20px; /* Tamaño del puntero */
    height: 20px; /* Tamaño del puntero */
    background-image: url('https://braze-images.com/appboy/communication/assets/image_assets/images/66e41f0a9328950063dcf732/original.gif?1726226186'); /* URL de la imagen */
    background-repeat: no-repeat;
    background-size: contain;
    -webkit-appearance: none; /* Necesario para aplicar estilos personalizados en WebKit */
}

/* Bar container */

.bar-container {
    position: relative;
    display: flex;
    flex-direction: column;
}

.valor-dinamico1-1, .valor-dinamico2-2{
    position: absolute;
    top: 27px;  
    left: 53%;
    padding: 5px;
    font-size: 20px;  
    color: white;
    font-weight: 600;
}


#valor-estatico1-1, #valor-estatico1-2, #valor-estatico1-3, #valor-estatico1-4{
    position: absolute;
    left: 40.2%;
    margin-top: 2.5%;
    font-size: 20px;  
    font-weight: 500;
    color: white;
    font-weight: 600;
}

#valor-estatico2-1, #valor-estatico2-2, #valor-estatico2-3, #valor-estatico2-4{
    position: absolute;
    left: 87.3%;
    margin-top: 2.5%;
    font-size: 20px;  
    font-weight: 500;
    color: white;
    font-weight: 600;
}

.distancia1, .distancia2{
    position: absolute;
    font-size: small;
    font-weight: 600;
    margin-top: 8%;
    margin-left: 6%;
}

.valorbatch{
    position: absolute;
    margin-left: 66% ; 
    margin-top: 39%;
    color: black;
    font-weight: 600;
}

.valorAdicional{
    position: absolute;
    margin-left: 6.7% ; 
    margin-top: 4.8%;
    color: black;
    font-weight: 600;
}

/*Resultado*/ 

 
.resultado-claro{
    background-color: #100423;
    color: white;
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 0.5%;
    margin-top: 5%;
}

.seccion h5{
    background-color: #100423;
    color: white;
    text-align: center;
    font-weight: 400;
    font-style: italic;
    padding: 0.5%;
}

.imgResultado{
    width: 10%;
    padding: 1%;
}

.texto-resultado{
    font-size: x-large;
    font-weight: 500;
    padding-right: 2%;
}

#result {
    background: url(https://braze-images.com/appboy/communication/assets/image_assets/images/66e4407147e2d000634f43a1/original.png?1726234737) no-repeat center;
    background-size: contain;
    font-size: x-large;
    font-weight: bold;
    padding: 15px;
    width: 100px;
    height: 30px;
    display: inline-block;
    text-align: center;
    color: white;
}

 
#result1{
    background: url(https://braze-images.com/appboy/communication/assets/image_assets/images/66e440711254e500637760c2/original.png?1726234737) no-repeat center;
    background-size: contain;
    font-size: x-large;
    font-weight: bold;
    padding: 15px;
    width: 100px;
    height: 30px;
    display: inline-block;
    text-align: center;
    color: #100423;
}

/* Cuadros */

.container-cuadro{
    display: flex;
    flex-wrap: wrap; 
    justify-content: center;   
    gap: 40px;
    margin: 5%;
}

.container-cuadro .img1, .img2 {
    width: 40%;
    height: 40%;
}

/* Incentivo */

.incentivo_nocturno{
    background-color: #100423;
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.incentivo_img{
   padding: 2%;
   width: 30%;
}

.incentivo_img1{
   padding: 2%;
   width: 77%;
}


/* Footer */

.footer{
    background-color: #fa0050;
    color: white;
    padding: 2%;
}

.footer h2{
    text-align: center;
}

.footer h3{
    font-weight: 400;
    font-size: medium;
    margin-left: 12.1%;
    margin-right: 12.1%;
    margin-top: 1%;
    text-align: justify;
    line-height: 1.5;
}
.container_boton{
    display: flex;
    justify-content: center; /* Alinea horizontalmente */
    align-items: center; /* Alinea verticalmente */
    text-decoration: none;
    margin-top: 2%;
}

.boton{
    background-color: white;
    color: #fa0050;
    border: white;
    display: inline-block; 
    padding: 0.5%;
    font-size: large;
    border-radius: 8px;
    width: 80%;
    cursor: pointer;
}


/* Riders nuevos */

.extra{
    background-color: #100423; 
    display: flex;
    flex-direction: column; 
    justify-content: center;  
    align-items: center;  
    padding: 5%;
}

#mostrarImagenBtn {
    background-color: #100423;  
    color: white; 
    padding: 10px 20px;  
    font-weight: 400;
    font-size: larger;  
    cursor: pointer;  
    transition: background-color 0.3s;  
    width: 100%;
    text-align: start;
}

#mostrarImagenBtn:hover {
    background-color: #100423;  
}

#imagenContainer {
    text-align: center;  
    margin-top: 20px;  
}

#imagenContainer img {
    max-width: 100%;  
    height: auto;  
}

.oculto {
    display: none; 
}

.boton_zona{
    background-color: #100423; 
    text-align: center;
    width: 40%;
    color: white;  
    border: 1px solid white;
    padding: 10px;  
    font-size: 16px;  
    cursor: pointer; 
    border-radius: 5px;  
    display: block;
}





/* esquemas */

.content {
    display: flex;
    flex-wrap: wrap; 
    justify-content: center;   
    gap: 40px;
    margin: 5%;
}


.dia{
    background-color: white;
}

.dia-semana, .tramo {
    font-size: medium;
    font-weight: 500;
    margin: 0%;
    padding-left: 2%;
}

.horario, .km{
    font-weight: 300;
    margin: 0%;
    padding-left: 2%;
}

.grupos{
    padding-left: 2%;
}

.fila-par{
    background-color: #DCF8FF;
}

.fila-impar{
    background-color: #F1FCFF;
}

[data-retiro]{
   text-align: center;
   font-weight: 700;
}

[data-entrega]{
    text-align: center;
    font-weight: 700;
}

.punto-retiro, .punto-entrega{
    background-color: #fa0050;
    color: white;
    font-weight: 300;
    font-size: small;
    width: 140px;
    height: 50px;
}

.monto-km{
    background-color: #fa0050;
    color: white;
    font-weight: 300;
    font-size: small;
    width: 140px;
    height: 50px
}

.monto-km h3{
    font-weight: 300;
}

.monto-km h5{
    margin-top: 0%;
    font-style: italic;
    font-weight: 200;
}

/* icono retiro*/

.punto-retiro div, .punto-entrega div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.punto-retiro img, .punto-entrega img, .monto-km img {
    width: 20px;
    height: 20px;
}

.monto-km div {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.monto-km img {
    width: 15px;
    height: 20px;
}


.summary-row {
    font-size: x-small;
    font-weight: 300;
    background-color: #DCF8FF;
}

.adicional-cell {
    background-color: #FFD700;
    writing-mode: vertical-rl ;  
    transform: rotate(180deg);
    text-align: center;  
    font-weight: 400;  
    font-size: x-small;
    padding: 5px;  
    border: 1px solid #ccc;  
}


.adicional-vacia{
    background-color: white;
}

.numeros-Km{
    text-align: center;
    font-weight: 500;
}


.contenedor-tramos {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    margin-top: 30px;
    flex-wrap: wrap;
  }
  
  .box-tramo {
    flex: 1;
    min-width: 280px;
    background: #f8f8f8;
    padding: 20px;
    border-left: 5px solid #fa0050;
    border-radius: 8px;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
  }
  
  .box-tramo h4 {
    margin-bottom: 10px;
    color: #100423;
  }
  
  .box-tramo ul {
    padding-left: 18px;
    margin: 0;
    list-style-type: disc;
  }
  
  .box-tramo li {
    margin-bottom: 6px;
    color: #333;
  }
  
  .box-tramo .nuevo {
    background: #fa0050;
    color: #fff;
    padding: 2px 6px;
    font-size: 0.75em;
    border-radius: 4px;
    margin-left: 6px;
  }
  



@media screen and (max-width: 768px){

    .camino{
        width: 100%;;
    }

    #valor-estatico1-1, #valor-estatico1-2, #valor-estatico1-3, #valor-estatico1-4{
        position: absolute;
        left: 40%;
        margin-top: 4.6%;
        font-size: 20px;  
        font-weight: 500;
        color: white;
        font-weight: 600;
    }
    
    #valor-estatico2-1, #valor-estatico2-2, #valor-estatico2-3, #valor-estatico2-4{
        position: absolute;
        left: 88%;
        margin-top: 4%;
        font-size: 20px;  
        font-weight: 500;
        color: white;
        font-weight: 600;
    }
    .container-cuadro .img1, .img2 {
        width: 50%;
        height: 50%;
    }
    .valorAdicional{
        margin-left: 12% ; 
        margin-top: 8.7%;
    }
    .incentivo_img{
        width: 50%;
    }

    .incentivo_img1{
        width: 77%;
    }

}

@media screen and (max-width: 480px){

    .camino img{
        display: none;
    }

    #menuDesplegable, #menuDesplegable2{
        width: 40%;
        margin: 0%;
        margin-top: 4%;
    }
    
    #valor-estatico1-1, #valor-estatico1-2, #valor-estatico1-3, #valor-estatico1-4{
        left: 77%;
        margin-top: 6.5%;
    }
    
    #valor-estatico2-1, #valor-estatico2-2, #valor-estatico2-3, #valor-estatico2-4{
        left: 76%;
        margin-top: 6.5%;
    }

    .container-cuadro .img1, .img2 {
        width: 65%;
        height: 65%;
    }

    .valorbatch{
        margin-left: 70% ; 
        margin-top: 39%;
    }
    .valorAdicional{
        margin-left: 18% ; 
        margin-top: 14%;
    }
    .incentivo_img{
        width: 50%;
    }

    .incentivo_img1{
        width: 63%;
    }
    .boton_zona{
        width: 70%;
    }

}

@media screen and (max-width: 412px){

    .estructura img{
        content: url('https://braze-images.com/appboy/communication/assets/image_assets/images/66e41c062c769000632cd995/original.png?1726225413');
    }

    #menuDesplegable, #menuDesplegable2{
        width: 60%;
        margin: 0%;
        margin-top: 4%;
        font-size: 10px;
    }
   
    h2{
        font-size: medium;
        margin-top: 5%;
    }

    .bloque {
        display: flex;
        flex-wrap: nowrap; /* Asegura que los ítems se mantengan en una sola columna */
        flex-direction: column; /* Coloca los ítems uno debajo del otro */
        gap: 15px;
    }

    .bloque img{
        width: 40%;
        margin-left: 20%;
        padding: 7%;
    }

    #slider, #slider1 {
        -webkit-appearance: none; /* Necesario para aplicar estilos personalizados en WebKit */
        appearance: none;
        width: 30%;
        height: 8px; /* Altura de la barra */
        margin-left: 30%;
        margin-top: 0%;
    }

    #slider::-webkit-slider-thumb, #slider1::-webkit-slider-thumb {
        width: 15px; /* Tamaño del puntero */
        height: 15px; /* Tamaño del puntero */
        -webkit-appearance: none; /* Necesario para aplicar estilos personalizados en WebKit */
    }
    
    .camino img{
        display: none;
    }

    .image-text-container, .image-text-container1{
        background-color: #DCF8FF;
    }
    
    #valor-estatico1-1, #valor-estatico1-2, #valor-estatico1-3, #valor-estatico1-4{
        font-size: large;
        left: 51%;
        margin-top: 14.5%;
    }
    
    #valor-estatico2-1, #valor-estatico2-2, #valor-estatico2-3, #valor-estatico2-4{
        font-size: large;
        left: 50%;
        margin-top: 16%;
    }

    .valor-dinamico1-1{
        top: 55px;  
        left: 48%;
        padding: 5px;
        font-size: large;
        font-weight: 600;
    }

    .valor-dinamico2-2{
        top: 55px;  
        left: 48%;
        padding: 5px;
        font-size: large;
        font-weight: 600;
    }

    .distancia1, .distancia2{
        font-size: small;
        margin-top: 1%;
        margin-left: 4%;
    }

    .resultado-claro{
        display: flex;
        flex-direction: column;
    }

    .texto-resultado{
        font-size: large;
        font-weight: 500;
        text-align: center;
    }

    #result, #result1 {
        font-size: large;
        padding-top: 7%;
    }

    h5{
        font-size: x-small;
    }
    .container-cuadro .img1, .img2 {
        width: 70%;
        height: 70%;
    }
    .valorbatch{
        margin-left: 54% ; 
        margin-top: 23%;
    }
    .valorAdicional{
        margin-left: 50% ; 
        margin-top: 25%;
    }

   .data-table{
    font-size: small;
   }   

   .dia-semana, .tramo, .horario, .km{
    font-size: small;
   }

}