/* Margen general para los elementos */
div {
    margin-bottom: 16px;
}

/* Contenedor del video */
#video-container {
    line-height: 0;
}

/* Estilo para los diferentes estilos de resaltado */
#video-container.example-style-1 .scan-region-highlight-svg,
#video-container.example-style-1 .code-outline-highlight {
    stroke: #64a2f3 !important;
}

#video-container.example-style-2 {
    position: relative;
    width: max-content;
    height: max-content;
    overflow: hidden;
}

#video-container.example-style-2 .scan-region-highlight {
    border-radius: 30px;
    outline: rgba(0, 0, 0, .25) solid 50vmax;
}

#video-container.example-style-2 .scan-region-highlight-svg {
    display: none;
}

#video-container.example-style-2 .code-outline-highlight {
    stroke: rgba(255, 255, 255, .5) !important;
    stroke-width: 15 !important;
    stroke-dasharray: none !important;
}

/* Botón de flash */
#flash-toggle {
    display: none;
}

/* Espaciado para separadores */
hr {
    margin-top: 32px;
}

/* Estilo para el selector de archivo */
input[type="file"] {
    display: block;
    margin-bottom: 16px;
}

#video-container video {
    width: 100%;
    max-width: 480px;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Estilo para el botón Start */
#start-button {
    font-size: 2em; /* Aumenta el tamaño de la fuente */
    padding: 20px 40px; /* Espaciado amplio */
    background-color: #4CAF50; /* Fondo verde */
    color: white; /* Texto blanco */
    border: none; /* Sin bordes */
    border-radius: 10px; /* Bordes redondeados */
    cursor: pointer; /* Cambia el cursor al pasar */
    display: block; /* Asegura que sea un botón de bloque */
    margin: 20px auto; /* Centra el botón horizontalmente */
    width: 250px; /* Ajusta el ancho al contenido */
}

#start-button:hover {
    background-color: #45a049; /* Cambia el color al pasar el cursor */
}

/* Estilo para el botón Stop */
#stop-button {
    font-size: 2em; /* Aumenta el tamaño de la fuente */
    padding: 20px 40px; /* Espaciado amplio */
    background-color: #f44336; /* Fondo rojo */
    color: white; /* Texto blanco */
    border: none; /* Sin bordes */
    border-radius: 10px; /* Bordes redondeados */
    cursor: pointer; /* Cambia el cursor al pasar */
    display: block; /* Asegura que sea un botón de bloque */
    margin: 20px auto; /* Centra el botón horizontalmente */
    width: 250px; /* Ajusta el ancho al contenido */
}

#stop-button:hover {
    background-color: #d32f2f; /* Cambia el color al pasar el cursor */
}

/* Estilo para el mensaje de error del QR */
#cam-qr-result {
    font-size: 1em; /* Incrementa el tamaño de la letra */
    color: black; /* Agrega color negro */
    text-align: center; /* Centra el texto */
    margin: 20px 0; /* Espaciado alrededor del mensaje */
}

table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

table th, table td {
    border: 1px solid #ddd;
    padding: 8px;
}

table th {
    background-color: #f2f2f2;
    text-align: left;
}

h1 {
    text-align: center;
    font-size: 2em; /* Ajusta el tamaño según tus necesidades */
    margin: 20px 0; /* Ajusta el margen para mantener algo de separación */
}


/* Botón de Ir a Resultados */
#go-to-results-button {
    font-size: 2em;
    padding: 20px 40px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    margin: 20px auto; /* Centra el botón horizontalmente */
    display: block;
    width: 250px; /* Ajusta el ancho al contenido */
}

#go-to-results-button:hover {
    background-color: #0056b3;
}

/* Botón de Volver a Escanear */
#scan-again-button {
    font-size: 2em;
    padding: 20px 40px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    margin: 20px auto; /* Centra el botón horizontalmente */
    display: block;
    width: 250px; /* Ajusta el ancho al contenido */
}
}

#scan-again-button:hover {
    background-color: #218838;
}