.verification-success {
    background-color: #28a745; /* Verde */
    color: white;
    padding: 20px;
    border-radius: 5px;
    font-size: 1.5em; /* Tamaño de fuente más grande */
    text-align: center;
}

.verification-success span {
    font-weight: bold;
}

.verification-danger {
    background-color: #e24343; /* Rojo pálido */
    color: #ffffff;
    padding: 20px;
    border-radius: 5px;
    font-size: 1.5em; /* Tamaño de fuente más grande */
    text-align: center;
}

.verification-info {
    background-color: #fff3cd; /* Amarillo pastel */
    color: #856404;
    padding: 20px;
    border-radius: 5px;
    font-size: 1.5em;
    text-align: center;
}

.scan-success {
    background-color: #d4edda !important; /* Verde claro */
    color: #d4edda !important; /* Texto verde oscuro para contraste */
}

.dark-mode {
    background-color: #121212;
    color: #ffffff;
}

.dark-mode .form-container {
    background-color: #1e1e1e;
    border-color: #333;
}

.dark-mode .form-control {
    background-color: #333;
    color: #ffffff;
    border-color: #555;
}

.dark-mode .form-control:focus {
    background-color: #444;
    color: #ffffff;
    border-color: #777;
}

.dark-mode .btn-custom-primary {
    background-color: #bb86fc;
    border-color: #bb86fc;
    color: #000;
}

.dark-mode .btn-custom-primary:hover {
    background-color: #a763fa;
    border-color: #a763fa;
}

.dark-mode .form-check-label {
    color: #ffffff;
}

.dark-mode h3 {
    background-color: #333 !important;
    color: #ffffff;
}

.dark-mode .verification-info {
    background-color: #333;
    color: #ffffff;
}

.dark-mode .scan-success {
    background-color: #203d24 !important; /* Verde oscuro para modo oscuro */
    color: #203d24 !important; /* Texto verde claro para contraste */
}

/* Estilos para el escáner de códigos de barras */
#interactive {
    border: 2px solid #007bff;
    border-radius: 8px;
    overflow: hidden;
}

#interactive video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#interactive canvas {
    position: absolute;
    top: 0;
    left: 0;
}

.scanner-overlay {
    pointer-events: none;
    z-index: 10;
}

#cameraBtn {
    border-left: none;
}

#cameraBtn:hover {
    background-color: #007bff;
    color: white;
}

.dark-mode #interactive {
    border-color: #bb86fc;
}

.dark-mode #cameraBtn {
    background-color: #333;
    border-color: #555;
    color: #ffffff;
}

.dark-mode #cameraBtn:hover {
    background-color: #bb86fc;
    color: #000;
}

.dark-mode .modal-content {
    background-color: #1e1e1e;
    color: #ffffff;
}

.dark-mode .modal-header {
    border-bottom-color: #333;
}

.dark-mode .modal-footer {
    border-top-color: #333;
}

.dark-mode .btn-close {
    filter: invert(1);
}