body {
    background: rgb(213,197,188);
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, rgb(213,197,188) 4%, rgba(255,255,255,1) 82%);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, rgb(213,197,188) 4%, rgba(255,255,255,1) 82%);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

/* Diseño de bonotes principales */
/*This is modifying the btn-primary colors but you could create your own .btn-something class as well*/
.btn-primary-tc {
    color: #fff;
    background-color: #ff6600;
    border-color: #ff6600; /*set the color you want here*/
}
.btn-primary-tc:hover, .btn-primary-tc.active, .open>.dropdown-toggle.btn-primary-tc {
    color: #fff;
    background-color: #f5a882;
    border-color: #f5a882; /*set the color you want here*/
}
.btn-primary-tc:focus{
    color: #fff;
    background-color: #f5a882;
    border-color: #25d1fc;
}

#row-camara {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

#theVideo {
    width: 90%;
    border-radius: 15px;
    /* box-shadow: 15px 12px 9px 0px rgba(0,0,0,0.34);
    -webkit-box-shadow: 15px 12px 9px 0px rgba(0,0,0,0.34);
    -moz-box-shadow: 15px 12px 9px 0px rgba(0,0,0,0.34); */
}

#theCanvas {
    display: none;
    width: 80%;
    border-radius: 15px;
    }

.botones-asistencia {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding-top: 1rem;
}

#btnCapture {
    width: 150px;
    border-radius: 10px;
    animation: zoomPulse 1.2s infinite;
    position: static; /* elimina el absolute */
}

#btn-guardar-asistencia {
    width: auto;
    padding: 10px 20px;
}


.fa, .fa-camera {
    
}

@keyframes zoomPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}


/* Diseño de botones de accion de uso */

.container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

/* Mapa */
.contenedor-flex {
    /* background-color: #25d1fc; */
    /* display: grid;
    grid-template-columns: 1fr 1fr; */
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 2%;
    padding: 2%;
    background-color: #388890;
    border-radius: 10px;
    width: 90%;
    height: 90vh;
     box-shadow: 15px 12px 9px 0px rgba(0,0,0,0.34);
    -webkit-box-shadow: 15px 12px 9px 0px rgba(0,0,0,0.34);
    -moz-box-shadow: 15px 12px 9px 0px rgba(0,0,0,0.34);
    /* background: #0c051f;
    background: linear-gradient(90deg, rgba(12, 5, 31, 0.13) 1%, rgba(6, 6, 31, 0.26) 26%, rgba(33, 71, 87, 0.31) 83%); */
}

.contenedor-tabs-movil {
    display: flex;
    flex-direction: row;
    gap: 3%;
    width: 100%;
}

.container-foto {
    display: flex;
    /* justify-content: center; */
    padding: 2%;
    flex: 1;
    flex-direction: column;
    align-items: center;
    border-radius: 15px;
    /* background-color: #f5a882; */
    background-color: #d3d3d3;
    /* background: linear-gradient(90deg,rgba(2, 0, 36, 0.25) 1%, rgba(9, 9, 121, 0.19) 35%, rgba(94, 114, 122, 0.27) 100%); */
}

.container-mapa {
    display: flex;
    justify-content: center;
    padding: 2%;
    flex: 2;
    flex-direction: column;
    align-items: center;
    border-radius: 15px;
    /* background-color: blueviolet; */
    background-color: #d3d3d3;
    /* background: linear-gradient(90deg,rgba(2, 0, 36, 0.25) 1%, rgba(9, 9, 121, 0.19) 35%, rgba(94, 114, 122, 0.27) 100%); */
}

.container-foto,
.container-mapa {
    flex: 1;
    max-width: 50%;
}

#demo {
    margin-bottom: 15px;
    border: solid;
    padding: 5px;
    border-radius: 15px;
    box-shadow: 10px 10px 32px -6px rgba(0,0,0,0.75);
    -webkit-box-shadow: 10px 10px 32px -6px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 32px -6px rgba(0,0,0,0.75);
}

h2 {
     margin-bottom: 5%;
}

#map {
     height: 400px;
     width: 70%;
     margin-top: 10%;
     border-radius: 15px;
     box-shadow: 15px 12px 9px 0px rgba(0,0,0,0.34);
    -webkit-box-shadow: 15px 12px 9px 0px rgba(0,0,0,0.34);
    -moz-box-shadow: 15px 12px 9px 0px rgba(0,0,0,0.34);

}

#error {
     color: red;
     margin-top: 10px;
}
/* Mapa - Fin */

/* Solo mostrar tabs en móviles */
.tabs-movil {
    display: none;
}
.tab-button {
    padding: 12px 20px;
    margin: 0 5px;
    font-size: 16px;
    font-weight: bold;
    border: none;
    background-color: #f5a882;
    color: white;
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.tab-button.active {
    background-color: #ff6600;
}
.tab-button:hover {
    background-color: #e25e00;
}

/* Responsividad en celulares */
@media only screen and (max-width: 768px) {
    .container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
    
    .contenedor-flex {
    /* background-color: #25d1fc; */
    display: flex;
    /* justify-content: flex-start; */
    flex-direction: column;
    /* align-items: center; */
    padding: 5%;
    background-color: #388890;
    border-radius: 10px;
    width: 90%;
    height: 500px;
     box-shadow: 15px 12px 9px 0px rgba(0,0,0,0.34);
    -webkit-box-shadow: 15px 12px 9px 0px rgba(0,0,0,0.34);
    -moz-box-shadow: 15px 12px 9px 0px rgba(0,0,0,0.34);
    /* background: #0c051f;
    background: linear-gradient(90deg, rgba(12, 5, 31, 0.13) 1%, rgba(6, 6, 31, 0.26) 26%, rgba(33, 71, 87, 0.31) 83%); */
}


.contenedor-tabs-movil {
    display: flex;
    flex-direction: column;
    gap: 3%;
    width: 100%;
    height: 500px;
}

.container-foto,
.container-mapa {
    width: 100% !important;
    max-width: 100%;
}

.container-foto,
.container-mapa {
    display: none;
}

.botones-asistencia {
    margin-top: 100px;
}

#btnCapture {
    top: 570px;
    width: 150px;
    position: absolute;
    border-radius: 15px;
}

#btn-guardar-asistencia {
    position: absolute;
    top: 600px;
}

/* 
.container-foto {
    display: flex;
    justify-content: center;
    padding: 2%;
    flex-direction: column;
    align-items: center;
    border-radius: 15px;
    /* background-color: #f5a882
    background-color: #d3d3d3;
    margin-bottom: 5%;
    /* background: linear-gradient(90deg,rgba(2, 0, 36, 0.25) 1%, rgba(9, 9, 121, 0.19) 35%, rgba(94, 114, 122, 0.27) 100%); 
}*/

/* .container-mapa {
    display: flex;
    justify-content: center;
    padding: 3%;
    flex-direction: column;
    align-items: center;
    border-radius: 15px;
    background-color: blueviolet;
    background-color: #d3d3d3;
    /* background: linear-gradient(90deg,rgba(2, 0, 36, 0.25) 1%, rgba(9, 9, 121, 0.19) 35%, rgba(94, 114, 122, 0.27) 100%); 
}*/


#theVideo {
    width: 100%;
    height: 180px;
    border-radius: 15px;
    /* box-shadow: 15px 12px 9px 0px rgba(0,0,0,0.34);
    -webkit-box-shadow: 15px 12px 9px 0px rgba(0,0,0,0.34);
    -moz-box-shadow: 15px 12px 9px 0px rgba(0,0,0,0.34); */
}

#theCanvas {
    width: 70%;
    height: 25vh;
}

#map {
     height: 250px;
     width: 85%;
     border-radius: 15px;
     box-shadow: 15px 12px 9px 0px rgba(0,0,0,0.34);
    -webkit-box-shadow: 15px 12px 9px 0px rgba(0,0,0,0.34);
    -moz-box-shadow: 15px 12px 9px 0px rgba(0,0,0,0.34);

}

      .tabs-movil {
        display: flex;
        flex-direction: row;
        justify-content: center;
        margin-bottom: 10px;
        gap: 10px;
    }
    .container-foto, .container-mapa {
        display: none;
    }

    .container-foto.active, .container-mapa.active {
        display: flex;
        width: 100%;
    }

    .container-foto.active {
        height: auto;
    }

    .container-mapa.active {
        height: 500px;
    }
}

@media only screen and (min-width: 760px) and (max-width: 1024px) {
    .container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
    
    .contenedor-flex {
    /* background-color: #25d1fc; */
    display: flex;
    /* justify-content: flex-start; */
    flex-direction: column;
    /* align-items: center; */
    padding: 5%;
    background-color: #388890;
    border-radius: 10px;
    width: 500px;
    height: 600px;
    box-shadow: 15px 12px 9px 0px rgba(0,0,0,0.34);
    -webkit-box-shadow: 15px 12px 9px 0px rgba(0,0,0,0.34);
    -moz-box-shadow: 15px 12px 9px 0px rgba(0,0,0,0.34);
    /* background: #0c051f;
    background: linear-gradient(90deg, rgba(12, 5, 31, 0.13) 1%, rgba(6, 6, 31, 0.26) 26%, rgba(33, 71, 87, 0.31) 83%); */
}


.contenedor-tabs-movil {
    display: flex;
    flex-direction: column;
    gap: 3%;
    width: 100%;
    height: 700px;
}

.container-foto,
.container-mapa {
    width: 100% !important;
    max-width: 100%;
    height: 500px;
}

.container-foto,
.container-mapa {
    display: none;
}

.botones-asistencia {
    margin-top: 100px;
}

#btnCapture {
    top: 570px;
    width: 150px;
    position: absolute;
    border-radius: 15px;
}

#btn-guardar-asistencia {
    position: absolute;
    top: 600px;
}

/* 
.container-foto {
    display: flex;
    justify-content: center;
    padding: 2%;
    flex-direction: column;
    align-items: center;
    border-radius: 15px;
    /* background-color: #f5a882
    background-color: #d3d3d3;
    margin-bottom: 5%;
    /* background: linear-gradient(90deg,rgba(2, 0, 36, 0.25) 1%, rgba(9, 9, 121, 0.19) 35%, rgba(94, 114, 122, 0.27) 100%); 
}*/

/* .container-mapa {
    display: flex;
    justify-content: center;
    padding: 3%;
    flex-direction: column;
    align-items: center;
    border-radius: 15px;
    background-color: blueviolet;
    background-color: #d3d3d3;
    /* background: linear-gradient(90deg,rgba(2, 0, 36, 0.25) 1%, rgba(9, 9, 121, 0.19) 35%, rgba(94, 114, 122, 0.27) 100%); 
}*/


#theVideo {
    width: 100%;
    height: 180px;
    border-radius: 15px;
    /* box-shadow: 15px 12px 9px 0px rgba(0,0,0,0.34);
    -webkit-box-shadow: 15px 12px 9px 0px rgba(0,0,0,0.34);
    -moz-box-shadow: 15px 12px 9px 0px rgba(0,0,0,0.34); */
}

#theCanvas {
    width: 75%;
    height: 30vh;
}

#map {
     height: 320px;
     width: 85%;
     border-radius: 15px;
     box-shadow: 15px 12px 9px 0px rgba(0,0,0,0.34);
    -webkit-box-shadow: 15px 12px 9px 0px rgba(0,0,0,0.34);
    -moz-box-shadow: 15px 12px 9px 0px rgba(0,0,0,0.34);

}

      .tabs-movil {
        display: flex;
        flex-direction: row;
        justify-content: center;
        margin-bottom: 10px;
        gap: 10px;
    }
    .container-foto, .container-mapa {
        display: none;
    }

    .container-foto.active, .container-mapa.active {
        display: flex;
        width: 100%;
    }

    .container-foto.active {
        height: auto;
    }

    .container-mapa.active {
        height: 500px;
    }
}