/* =====================================================================
   tema.css — ALTO CONTRASTE para o balcão de conferência.
   ---------------------------------------------------------------------
   Esta tela é lida em pé, de longe, com luz forte do galpão batendo e o
   conferente com o pacote na mão. Então:

     • preto quase puro sobre branco (bordas de 3px, não de 1px);
     • fonte grande de base (18px) e números enormes — a quantidade é o
       dado mais importante da tela e tem que ser lida de um metro;
     • estado do pacote em FAIXA de cor ocupando a largura toda, com
       texto E ícone: quem não distingue verde de vermelho continua
       lendo "LIBERADO" e "NAO LIBERAR";
     • nada de cinza-claro em texto de informação.

   Compatibilidade: o galpão tem máquina velha rodando Chrome antigo (o
   mesmo caso do modo TV do painel de produção). Por isso: flexbox e px,
   sem CSS grid, sem clamp(), sem gap em layout que não pode quebrar,
   sem variáveis dentro de calc().
   ===================================================================== */

:root {
    --tinta:      #0B1220;   /* texto principal — ~18:1 no branco */
    --tinta-2:    #334155;   /* apoio, ainda ~10:1 */
    --papel:      #FFFFFF;
    --fundo:      #E7EBF1;
    --linha:      #0B1220;
    --linha-2:    #94A3B8;

    --verde:      #046B45;
    --verde-bg:   #D1FAE5;
    --vermelho:   #A31111;
    --vermelho-bg:#FEE2E2;
    --ambar:      #8A4B00;
    --ambar-bg:   #FEF3C7;
    --azul:       #1D3FA8;
    --azul-bg:    #DBEAFE;

    --mono: ui-monospace, "Cascadia Mono", "Consolas", "Menlo", monospace;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--fundo);
    color: var(--tinta);
    font-family: "Inter", "Segoe UI", Arial, sans-serif;
    font-size: 18px;
    line-height: 1.35;
    -webkit-font-smoothing: antialiased;
}

/* ---------------- topo ----------------
   DUAS LINHAS FIXAS: em cima o que navega (marca + menu), embaixo o que informa
   (placar do dia + quem está no balcão).

   Não é preguiça de fazer caber numa linha só — é medição: as duas metades
   juntas pedem ~1385px, e o monitor do balcão tem 1366 ou menos. Numa linha só
   elas quebravam sozinhas, cada peça se soltando por conta própria, e o topo
   ficava embolado. Pior: o ponto de quebra mudava com o tamanho do nome do
   conferente, então o topo se reorganizava sozinho ao trocar de pessoa. Duas
   linhas sempre é previsível e cabe folgado — 130px num monitor de 768. */
.topo {
    background: #0B1220;
    color: #FFFFFF;
    padding: 10px 18px;
    border-bottom: 5px solid #FFFFFF;
}
.topo-esq {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.topo-dir {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 2px solid #334155;   /* separa do menu: não é mais um item dele */
}

.topo .marca {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 4px 22px 4px 0;
    color: #FFFFFF;
    text-decoration: none;
    white-space: nowrap;
}
.topo .menu { display: flex; flex-wrap: wrap; }
.topo .menu a {
    color: #FFFFFF;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    padding: 7px 14px;
    margin: 4px 8px 4px 0;
    border: 3px solid transparent;
    border-radius: 8px;
    white-space: nowrap;
}
.topo .menu a:hover  { background: #FFFFFF; color: #0B1220; }
.topo .menu a.ativo  { background: #FFFFFF; color: #0B1220; }

/* contadores do dia */
.placar { display: flex; }
.placar div {
    background: #FFFFFF;
    border-radius: 10px;
    padding: 4px 12px;
    margin: 4px 8px 4px 0;
    text-align: center;
    min-width: 78px;
}
.placar b { display: block; font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.placar span { display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #334155; }
.placar .ok  b { color: var(--verde); }
.placar .div b { color: var(--vermelho); }
.placar .pen b { color: var(--ambar); }

/* quem está no balcão */
.quem {
    display: flex;
    align-items: center;
    background: #FFFFFF;
    color: #0B1220;
    border: 3px solid #FFFFFF;
    border-radius: 10px;
    padding: 4px 8px 4px 14px;
    margin: 4px 0;
    white-space: nowrap;
}
/* Sem conferente escolhido o bloco fica âmbar: é uma pendência, não um estado. */
.quem.vazio { background: var(--ambar-bg); border-color: var(--ambar); }
.quem-txt { margin-right: 12px; }
.quem .rotulo {
    display: block;
    font-size: 11px; font-weight: 800; color: #334155;
    text-transform: uppercase; letter-spacing: .05em; line-height: 1.2;
}
.quem .nome { display: block; font-size: 19px; font-weight: 800; line-height: 1.15; }
.quem.vazio .nome { color: #6B3A00; }
.quem .acao {
    background: #0B1220;
    color: #FFFFFF;
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
    padding: 6px 11px;
    margin-left: 6px;
    border-radius: 6px;
}
.quem .acao:hover { background: #334155; }
.quem .acao.sair { background: var(--vermelho); }
.quem .acao.sair:hover { background: #7F0D0D; }

/* O conferente fica na ponta direita da segunda linha, longe do placar — são
   duas informações diferentes e não podem parecer uma lista só. Em tela
   estreita ele desce em vez de espremer os contadores. */
.quem { margin-left: auto; }
@media (max-width: 700px) {
    .quem { margin-left: 0; }
}

/* ---------------- corpo ---------------- */
.tela { max-width: 1180px; margin: 0 auto; padding: 18px 16px 160px 16px; }

.caixa {
    background: var(--papel);
    border: 3px solid var(--linha);
    border-radius: 14px;
    margin-bottom: 18px;
}
.caixa > h2 {
    margin: 0;
    padding: 12px 18px;
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--tinta-2);
    border-bottom: 3px dashed var(--linha-2);
}
.caixa .conteudo { padding: 18px; }

/* ---------------- campo do bipe ---------------- */
.bipe-area { text-align: center; padding: 22px 18px; }
.bipe-area label {
    display: block;
    font-size: 20px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 12px;
}
#codigo {
    width: 100%;
    max-width: 720px;
    padding: 18px 20px;
    font-family: var(--mono);
    font-size: 40px;
    font-weight: 800;
    text-align: center;
    color: var(--tinta);
    background: #FFFFFF;
    border: 5px solid var(--azul);
    border-radius: 12px;
    outline: none;
}
#codigo:focus { border-color: #0B1220; box-shadow: 0 0 0 6px rgba(29,63,168,.30); }
#codigo::placeholder { color: #64748B; font-weight: 700; }
.dica { margin-top: 10px; font-size: 15px; font-weight: 700; color: var(--tinta-2); }

/* ---------------- faixa de estado ---------------- */
.faixa {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.01em;
    border-radius: 11px 11px 0 0;
    border-bottom: 3px solid var(--linha);
}
.faixa .icone { font-size: 34px; margin-right: 14px; }
.faixa .sub { display: block; font-size: 15px; font-weight: 700; letter-spacing: 0; margin-top: 2px; }
.faixa-conferindo { background: var(--azul-bg);     color: #0B1220; }
.faixa-ok         { background: var(--verde-bg);    color: #04351F; }
.faixa-erro       { background: var(--vermelho-bg); color: #5B0A0A; }
.faixa-alerta     { background: var(--ambar-bg);    color: #4A2600; }

/* ---------------- dados do pedido ---------------- */
.linhas { display: flex; flex-wrap: wrap; }
.dado { padding: 10px 20px 10px 0; min-width: 190px; }
.dado .rot {
    display: block;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--tinta-2);
}
.dado .val { font-size: 21px; font-weight: 800; word-break: break-word; }
.dado .val.mono { font-family: var(--mono); letter-spacing: -0.02em; }

.selo {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 50px;
    border: 3px solid var(--linha);
    font-size: 15px;
    font-weight: 800;
}
.selo-ml       { background: #E0E7FF; border-color: #1D3FA8; color: #16266B; }
.selo-shopee   { background: #FFE4D0; border-color: #9A3412; color: #6B2109; }
.selo-romaneio { background: #D1FAE5; border-color: #046B45; color: #04351F; }

/* avisos: nunca em cinza, nunca pequenos */
.aviso {
    display: flex;
    align-items: flex-start;
    background: var(--ambar-bg);
    border: 3px solid var(--ambar);
    border-radius: 10px;
    padding: 12px 16px;
    margin: 0 0 12px 0;
    font-size: 18px;
    font-weight: 700;
    color: #4A2600;
}
.aviso .ic { font-size: 22px; margin-right: 10px; }

/* ---------------- observações do pedido ----------------
   Caixa própria, mais alta que o resto: é instrução de como o pacote tem que
   sair ("sem nota fiscal", "cor trocada combinada no chat"). Texto em 20px,
   nunca em cinza — é o tipo de linha que, quando passa despercebida, vira o
   pacote de volta. */
.obs {
    display: flex;
    align-items: flex-start;
    background: #FFF7CC;
    border: 3px solid var(--ambar);
    border-left-width: 12px;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 10px;
    color: #4A2600;
}
.obs .ic { font-size: 24px; margin-right: 12px; line-height: 1.1; }
.obs-rot {
    display: block;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #6B3A00;
    margin-bottom: 2px;
}
.obs-txt { display: block; font-size: 20px; font-weight: 800; line-height: 1.3; }
.sem-obs {
    padding: 12px 16px;
    border: 3px dashed var(--linha-2);
    border-radius: 10px;
    font-size: 17px;
    font-weight: 800;
    color: var(--tinta-2);
}

/* ---------------- itens ---------------- */
.item {
    display: flex;
    align-items: center;
    background: #FFFFFF;
    border: 3px solid var(--linha-2);
    border-left-width: 12px;
    border-left-color: var(--linha-2);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 12px;
    cursor: pointer;
}
.item:hover { border-color: var(--azul); border-left-color: var(--azul); }
.item.ok    { background: var(--verde-bg); border-color: var(--verde); border-left-color: var(--verde); }
.item.parcial { border-color: var(--ambar); border-left-color: var(--ambar); background: #FFFBEB; }

.item .foto {
    width: 104px;
    height: 104px;
    flex: 0 0 104px;
    border: 3px solid var(--linha);
    border-radius: 10px;
    background: #F1F5F9 no-repeat center center;
    background-size: cover;
    margin-right: 14px;
}
.item .foto.vazia { display: flex; align-items: center; justify-content: center; font-size: 40px; }

.item .info { flex: 1 1 auto; min-width: 0; }
.item .peca { font-size: 25px; font-weight: 800; line-height: 1.15; }
.item .sku  { font-family: var(--mono); font-size: 20px; font-weight: 800; color: #16266B; margin-top: 2px; word-break: break-all; }
.item .tit  { font-size: 15px; font-weight: 600; color: var(--tinta-2); margin-top: 3px; }

.item .contagem {
    flex: 0 0 auto;
    text-align: center;
    margin-left: 14px;
    padding-left: 14px;
    border-left: 3px dashed var(--linha-2);
    min-width: 120px;
}
.item .contagem .n { font-size: 44px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.item .contagem .l { font-size: 12px; font-weight: 800; text-transform: uppercase; color: var(--tinta-2); }
.item.ok .contagem .n { color: var(--verde); }
.item .check { font-size: 40px; line-height: 1; }

/* ---------------- barra de ação (fixa no pé) ---------------- */
.acoes {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: #0B1220;
    border-top: 5px solid #FFFFFF;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 40;
}
.botao {
    border: 4px solid transparent;
    border-radius: 12px;
    padding: 16px 28px;
    margin: 0 8px;
    font-size: 22px;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    letter-spacing: -0.01em;
}
.botao small { display: block; font-size: 12px; font-weight: 800; letter-spacing: .06em; opacity: .85; }
.botao-ok      { background: var(--verde);    color: #FFFFFF; border-color: #FFFFFF; }
.botao-ok:hover{ background: #035435; }
.botao-ok:disabled { background: #64748B; color: #E2E8F0; cursor: not-allowed; border-color: #94A3B8; }
.botao-erro    { background: var(--vermelho); color: #FFFFFF; border-color: #FFFFFF; }
.botao-erro:hover { background: #7F0D0D; }
.botao-neutro  { background: #FFFFFF; color: #0B1220; border-color: #FFFFFF; }
.botao-neutro:hover { background: #E2E8F0; }

/* ---------------- modal ---------------- */
.veu {
    position: fixed; inset: 0;
    background: rgba(11,18,32,.75);
    display: flex; align-items: center; justify-content: center;
    padding: 16px; z-index: 60;
}
.modal {
    background: #FFFFFF;
    border: 5px solid #0B1220;
    border-radius: 16px;
    width: 100%; max-width: 700px;
    max-height: 92vh; overflow: auto;
}
.modal h3 { margin: 0; padding: 16px 20px; font-size: 22px; background: var(--vermelho-bg); color: #5B0A0A; border-bottom: 3px solid var(--vermelho); }
.modal .corpo { padding: 18px 20px; }
.motivos { display: flex; flex-wrap: wrap; }
.motivo {
    flex: 1 1 300px;
    text-align: left;
    background: #FFFFFF;
    border: 3px solid var(--linha-2);
    border-radius: 10px;
    padding: 14px 16px;
    margin: 0 8px 10px 0;
    font-size: 18px; font-weight: 800; font-family: inherit;
    color: var(--tinta); cursor: pointer;
}
.motivo:hover    { border-color: var(--vermelho); }
.motivo.marcado  { background: var(--vermelho-bg); border-color: var(--vermelho); color: #5B0A0A; }
.modal textarea {
    width: 100%; min-height: 92px; padding: 12px;
    font-family: inherit; font-size: 18px; font-weight: 600;
    border: 3px solid var(--linha); border-radius: 10px; color: var(--tinta);
}

/* ---------------- tabelas (painel) ---------------- */
table.grade { width: 100%; border-collapse: collapse; background: #FFFFFF; }
table.grade th {
    text-align: left; padding: 10px 12px;
    font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
    color: var(--tinta-2); background: #F1F5F9; border-bottom: 3px solid var(--linha);
}
table.grade td { padding: 11px 12px; border-bottom: 2px solid #CBD5E1; font-size: 16px; font-weight: 600; }
table.grade td.mono { font-family: var(--mono); font-weight: 800; }
table.grade tr:hover td { background: #F8FAFC; }
.tag { display: inline-block; padding: 3px 11px; border-radius: 50px; border: 3px solid; font-size: 14px; font-weight: 800; }
.tag-ok   { background: var(--verde-bg);    border-color: var(--verde);    color: #04351F; }
.tag-div  { background: var(--vermelho-bg); border-color: var(--vermelho); color: #5B0A0A; }
.tag-pend { background: var(--ambar-bg);    border-color: var(--ambar);    color: #4A2600; }

.vazio { padding: 34px 18px; text-align: center; font-size: 20px; font-weight: 800; color: var(--tinta-2); }

/* ---------------- formulários simples ---------------- */
.campo { margin-bottom: 14px; }
.campo label { display: block; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-2); margin-bottom: 6px; }
.campo input, .campo select {
    width: 100%; padding: 13px 14px;
    font-family: inherit; font-size: 20px; font-weight: 700; color: var(--tinta);
    background: #FFFFFF; border: 3px solid var(--linha); border-radius: 10px; outline: none;
}
.campo input:focus, .campo select:focus { box-shadow: 0 0 0 5px rgba(29,63,168,.28); }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
    outline: 4px solid var(--azul); outline-offset: 2px;
}

@media (max-width: 760px) {
    body { font-size: 17px; }
    #codigo { font-size: 30px; }
    .item .foto { width: 78px; height: 78px; flex-basis: 78px; }
    .item .peca { font-size: 21px; }
    .item .contagem { min-width: 92px; }
    .item .contagem .n { font-size: 34px; }
    .botao { font-size: 18px; padding: 14px 18px; }
    .faixa { font-size: 23px; }
}