/* styles.css */
#video-container {
    max-width: 800px; /* Limita el ancho del contenedor */
    margin: 0 auto; /* Centra el contenedor */
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw; /* Ancho total del dispositivo */
    height: 25vh; /* Alto aproximadamente el 25% del dispositivo */
    overflow: hidden; /* Oculta cualquier contenido que se desborde */
    background-color: #000; /* Opcional, para un fondo negro si el video está vacío */
    position: relative; /* Necesario para posicionar el video correctamente */
}

#camera-feed {
    width: 90%; /* Ajusta el tamaño según el contenedor */
    max-width: 800px; /* Limita el ancho máximo */
    height: auto; /* Mantén la relación de aspecto */
    border: 2px solid #ccc; /* O agregar un borde si quieres */
}

/* Ajustes para dispositivos móviles */
@media (max-width: 768px) {
    #video-container {
        width: 90vw; /* Asegura que el contenedor ocupe todo el ancho en pantallas pequeñas */
        height: auto; /* Mantiene el alto como el 10% del dispositivo */
    }
}