:root {
    --radar-color: #ffffff;
    --radar-glow: rgba(255, 255, 255, 0.6);
}

/* Container do leitor embutido no modal */
#reader-container {
    width: 100%;
    background: #dfdfdf;
    border: 3px solid #004fc8;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    min-height: 370px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

#reader {
    width: 100%;
    height: 100%;
}

/* Remove a borda padrão feia gerada pelo html5-qrcode */
#reader img, #reader video {
    object-fit: cover;
}

/* =========================================
   EFEITO VISUAL DINÂMICO DE ESTADOS
   ========================================= */
#scan-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Classes de estado gerenciadas pelo JS */
#scan-overlay.success {
    --radar-color: #00ff6a;
    --radar-glow: rgba(0, 255, 106, 0.6);
}
#scan-overlay.error {
    --radar-color: #ff3333;
    --radar-glow: rgba(255, 51, 51, 0.6);
}

.focus-bracket {
    width: 200px;
    height: 200px;
    position: relative;
    animation: focus-breathe 2s ease-in-out infinite;
}

.focus-bracket::before, .focus-bracket::after {
    content: '';
    position: absolute;
    width: 100%; height: 100%;
    border: 4px solid transparent;
    box-sizing: border-box;
    border-radius: 12px;
    transition: border-color 0.3s ease; 
}

.focus-bracket::before {
    border-top-color: var(--radar-color);
    border-bottom-color: var(--radar-color);
    transform: scaleX(0.85);
}

.focus-bracket::after {
    border-left-color: var(--radar-color);
    border-right-color: var(--radar-color);
    transform: scaleY(0.85);
}

.scan-line {
    position: absolute;
    width: 90%;
    height: 3px;
    background: var(--radar-color);
    box-shadow: 0 0 15px 3px var(--radar-glow);
    left: 5%;
    top: 0;
    border-radius: 50%;
    animation: scan-laser 2.5s infinite linear;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

@keyframes focus-breathe {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.08); opacity: 1; }
}

@keyframes scan-laser {
    0% { top: 5%; opacity: 0; }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { top: 95%; opacity: 0; }
}