/* Rastreabilidade RAST-22d: estilos do alerta da leitura de peca (prefixo .rast-leitura-), montado por RastLeituraPeca.montarAlerta
   (js/app/rastLeituraPeca.js). Contexto: On-Line (tela de Separacao, fatia seguinte). Tema claro/escuro via variaveis do styles.css. */
:root {
    --rast-leitura-bloqueio-bg: #fdecea;
    --rast-leitura-bloqueio-fg: #b3261e;
    --rast-leitura-bloqueio-borda: #b3261e;
    --rast-leitura-aviso-bg: #fff4e0;
    --rast-leitura-aviso-fg: #8a5200;
    --rast-leitura-aviso-borda: #e0a030;
    --rast-leitura-ok-bg: #e6f4ea;
    --rast-leitura-ok-fg: #1e6b34;
    --rast-leitura-ok-borda: #2e9150;
}

:root.dark-theme {
    --rast-leitura-bloqueio-bg: #3a1a18;
    --rast-leitura-bloqueio-fg: #ff8a80;
    --rast-leitura-bloqueio-borda: #ff8a80;
    --rast-leitura-aviso-bg: #33260f;
    --rast-leitura-aviso-fg: #f0b45a;
    --rast-leitura-aviso-borda: #b87a1c;
    --rast-leitura-ok-bg: #16341f;
    --rast-leitura-ok-fg: #7fd69a;
    --rast-leitura-ok-borda: #3d9a5c;
}

.rast-leitura-alerta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-left-width: 5px;
    border-radius: 6px;
    font-size: 14px;
}

.rast-leitura-alerta-bloqueio {
    background: var(--rast-leitura-bloqueio-bg);
    color: var(--rast-leitura-bloqueio-fg);
    border-color: var(--rast-leitura-bloqueio-borda);
}

.rast-leitura-alerta-aviso {
    background: var(--rast-leitura-aviso-bg);
    color: var(--rast-leitura-aviso-fg);
    border-color: var(--rast-leitura-aviso-borda);
}

.rast-leitura-alerta-ok {
    background: var(--rast-leitura-ok-bg);
    color: var(--rast-leitura-ok-fg);
    border-color: var(--rast-leitura-ok-borda);
}

.rast-leitura-mensagem {
    margin: 0;
    font-weight: 600;
}

.rast-leitura-motivo-rotulo {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
}

.rast-leitura-motivo {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--input-bg, var(--card-bg));
    color: var(--text-dark);
    font: inherit;
    resize: vertical;
}

.rast-leitura-motivo:focus {
    outline: 2px solid var(--olist-green);
    outline-offset: 0;
}

.rast-leitura-ler-de-novo {
    align-self: flex-start;
    padding: 6px 14px;
    border: 1px solid var(--rast-leitura-bloqueio-borda);
    border-radius: 4px;
    background: var(--card-bg);
    color: var(--rast-leitura-bloqueio-fg);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.rast-leitura-ler-de-novo:focus {
    outline: 2px solid var(--olist-green);
    outline-offset: 2px;
}

/* RAST-22f: campo de leitura e quadro de divergencia */
.rast-leitura-campo-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--card-bg);
}

.rast-leitura-sugestao {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dark);
}

.rast-leitura-campo {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--input-bg, var(--card-bg));
    color: var(--text-dark);
    font: inherit;
    font-size: 14px;
}

.rast-leitura-campo:focus {
    outline: 2px solid var(--olist-green);
    outline-offset: 0;
}

.rast-leitura-area-alerta {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rast-leitura-divergencia {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--rast-leitura-aviso-borda);
    border-radius: 4px;
    background: var(--rast-leitura-aviso-bg);
    color: var(--rast-leitura-aviso-fg);
}

.rast-leitura-aviso-divergencia {
    margin: 0;
    font-weight: 600;
    font-size: 13px;
}

.rast-leitura-motivos-rotulo {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
}

.rast-leitura-motivos-select {
    padding: 6px 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--input-bg, var(--card-bg));
    color: var(--text-dark);
    font: inherit;
}

.rast-leitura-motivos-select:focus {
    outline: 2px solid var(--olist-green);
    outline-offset: 0;
}

.rast-leitura-motivo-outro {
    padding: 6px 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--input-bg, var(--card-bg));
    color: var(--text-dark);
    font: inherit;
}

.rast-leitura-motivo-outro:focus {
    outline: 2px solid var(--olist-green);
    outline-offset: 0;
}

.rast-leitura-btn-confirmar {
    align-self: flex-start;
    padding: 6px 14px;
    border: 1px solid var(--rast-leitura-aviso-borda);
    border-radius: 4px;
    background: var(--card-bg);
    color: var(--rast-leitura-aviso-fg);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.rast-leitura-btn-confirmar:focus {
    outline: 2px solid var(--olist-green);
    outline-offset: 2px;
}

/* Modo compacto (PDV): sem caixa; 'Sugerido: <lote>' + campo lado a lado; sem lote so' o link discreto 'Ler QR da peça'. */
.rast-leitura-campo-wrap.rast-leitura-compacto {
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
}

.rast-leitura-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.rast-leitura-linha .rast-leitura-sugestao {
    flex: 0 1 auto;
}

.rast-leitura-linha .rast-leitura-campo {
    flex: 1 1 180px;
    width: auto;
    min-width: 0;
    padding: 5px 8px;
}

.rast-leitura-link-ler {
    align-self: flex-start;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-light);
    font: inherit;
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
}

.rast-leitura-link-ler:hover,
.rast-leitura-link-ler:focus-visible {
    color: var(--text-dark);
}
