/* ===================================================================
   KFROTA - MODULO BDE (BOLETIM DIARIO DE EQUIPAMENTO)
   Folha propria, carregada DEPOIS do app.css. Tudo o que e novo comeca
   com `bde-`; onde ja existe peca pronta (.wz-*, .tec-*, .op-*,
   .comb-btn, .wz-resumo, .chip-st, table.resp) ela e usada como esta.
   Blocos A a F da especificacao visual, mais o que o fluxo final pediu
   (assinatura do operador antes de emitir, horimetro, gestao).
   =================================================================== */

/* ===================================================================
   A. O DOCUMENTO NA TELA
   Uma estrutura so para tres lugares: gestao, fim do quiosque e pagina
   publica. O papel (bloco B) sai desta mesma estrutura.
   =================================================================== */
.bde-doc{position:relative;max-width:880px;margin:0 auto;display:flex;flex-direction:column;gap:18px;
  background:var(--branco);color:var(--tinta);border:1px solid var(--linha);border-radius:var(--raio);
  box-shadow:var(--sombra);padding:26px 28px;font-size:13.5px;line-height:1.45}

.bde-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  padding-bottom:14px;border-bottom:2px solid var(--azul)}
.bde-cab-esq{display:flex;align-items:center;gap:14px;min-width:0}
.bde-logo{height:44px;width:auto;flex:none}
.bde-tit{font-size:20px;font-weight:800;line-height:1.15;letter-spacing:-.01em;color:var(--tinta);margin:0}
.bde-emp{font-size:12px;font-weight:600;color:var(--cinza);text-transform:uppercase;letter-spacing:.6px;margin-top:3px}
.bde-cab-dir{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:4px;text-align:right}
.bde-num{font-size:24px;font-weight:800;line-height:1;color:var(--azul);font-variant-numeric:tabular-nums}
.bde-data{font-size:12.5px;color:var(--tinta-3);font-variant-numeric:tabular-nums}
.chip-st.bde-assinado{background:#dcfce7;color:#15803d}

.bde-faixa{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;
  border:1px solid;border-radius:10px;font-size:13.5px;font-weight:700;text-align:center;line-height:1.35}
.bde-faixa .ico-svg{flex:none}
.bde-faixa.ok{border-color:var(--verde);color:#15803d;background:color-mix(in srgb,var(--verde) 8%,var(--branco))}
.bde-faixa.aguard{border-color:var(--amarelo);color:#b45309;background:color-mix(in srgb,var(--amarelo) 8%,var(--branco))}
.bde-faixa.cancel{border-color:var(--vermelho);color:#b91c1c;background:color-mix(in srgb,var(--vermelho) 8%,var(--branco))}
.bde-doc.cancelado::after{content:"CANCELADO";position:absolute;inset:0;display:grid;place-items:center;
  font-size:110px;font-weight:800;letter-spacing:6px;color:var(--vermelho);opacity:.08;
  transform:rotate(-28deg);pointer-events:none}

.bde-campos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 18px}
.bde-campo{min-width:0;padding:8px 0 9px;border-bottom:1px solid var(--linha)}
.bde-campo.largo{grid-column:span 2}
.bde-campo .rot{display:block;font-size:11px;font-weight:600;color:var(--cinza);text-transform:uppercase;letter-spacing:.4px}
.bde-campo .val{display:block;margin-top:2px;font-size:14px;font-weight:700;color:var(--tinta);overflow-wrap:anywhere}
.bde-campo .val small{font-weight:500;color:var(--cinza)}
.bde-campo .val.sem-dado{font-weight:500;color:var(--cinza-2)}
.bde-placa{font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;letter-spacing:1px;white-space:nowrap}

.bde-sec{display:flex;flex-direction:column;gap:8px}
.bde-sec-tit{margin:0;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--azul)}

.bde-tab-wrap{border:1px solid var(--linha);border-radius:10px;overflow:hidden}
.bde-tab{font-size:13px}
.bde-tab thead th{padding:9px 10px;white-space:nowrap}
.bde-tab tbody td{padding:8px 10px;vertical-align:top}
.bde-tab .col-n{width:34px;text-align:center;color:var(--cinza);font-variant-numeric:tabular-nums}
.bde-tab .col-hora,.bde-tab .col-dur{white-space:nowrap;font-variant-numeric:tabular-nums}
.bde-tab .col-dur{font-weight:700}
.bde-tab .col-fat{text-align:center;white-space:nowrap}
.bde-tab .col-desc{min-width:150px}
.bde-tab tr.bde-abate td{color:var(--cinza)}
.bde-garagem{display:block;font-size:10.5px;font-weight:600;color:var(--cinza-2);white-space:nowrap}
.bde-fat{font-weight:700;color:var(--tinta)}
.bde-fat.nao{font-weight:700;color:var(--vermelho)}
.bde-st{display:inline-flex;align-items:center;gap:6px;font-weight:600;white-space:nowrap}
.bde-st i{width:9px;height:9px;border-radius:50%;flex:none;background:var(--cor,var(--cinza-2));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--cor,var(--cinza-2)) 20%,transparent)}

/* Dois quadros de total, SEPARADOS: trabalhadas x cobradas (defeito 1). */
.bde-totais{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bde-tot{display:flex;flex-direction:column;border:1px solid var(--linha);border-radius:12px;
  padding:12px 16px;background:var(--fundo)}
.bde-tot-cab{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding-bottom:6px;margin-bottom:4px;border-bottom:1px solid var(--linha)}
.bde-tot-rot{font-size:11.5px;font-weight:600;color:var(--cinza);text-transform:uppercase;letter-spacing:.3px}
.bde-tot-val{font-size:24px;font-weight:800;line-height:1.1;color:var(--tinta);font-variant-numeric:tabular-nums}
.bde-tot.cobradas{border-color:color-mix(in srgb,var(--azul-2) 35%,var(--linha));
  background:color-mix(in srgb,var(--azul-2) 6%,var(--branco))}
.bde-tot.cobradas .bde-tot-val{color:var(--azul)}
.bde-tot-l{display:flex;justify-content:space-between;gap:10px;padding:3px 0;font-size:12.5px;color:var(--tinta-3)}
.bde-tot-l b{color:var(--tinta);font-variant-numeric:tabular-nums}
.bde-tot-l.menos b{color:var(--vermelho)}
.bde-tot-l.fim{border-top:1px solid var(--linha);margin-top:3px;padding-top:6px;font-weight:700}
.bde-tot-regra{margin-top:6px;font-size:11px;line-height:1.35;color:var(--cinza)}
.bde-conta{margin:-8px 0 0;font-size:12px;color:var(--tinta-3);text-align:center}

.bde-obs{white-space:pre-wrap;min-height:38px}

/* As condicoes gerais: letra pequena, legivel, DENTRO do documento (defeito 4). */
.bde-cond{margin:0;padding:0;list-style:none;columns:2;column-gap:22px;column-rule:1px solid var(--linha);
  font-size:11.5px;line-height:1.45;color:var(--tinta-3)}
.bde-cond li{margin:0 0 5px;break-inside:avoid-column}
.bde-cond li b{color:var(--tinta);font-variant-numeric:tabular-nums;margin-right:3px}
.bde-cond-p{margin:0;font-size:11.5px;color:var(--tinta-3)}
.bde-cond-aceite{margin:6px 0 0;font-size:12px;font-weight:700;color:var(--tinta)}
.bde-termo{margin:0;padding:8px 12px;border-left:3px solid var(--azul-2);background:var(--fundo);border-radius:0 8px 8px 0;
  font-size:12px;line-height:1.45;color:var(--tinta-3)}

/* Assinaturas: imagem, nome, cargo, data e hora, codigo INTEIRO (defeito 6). */
.bde-ass-grade{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.bde-ass{display:flex;flex-direction:column;gap:4px;min-width:0;break-inside:avoid}
.bde-ass-rot{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--tinta-3)}
.bde-ass-quadro{position:relative;height:96px;display:grid;place-items:center;overflow:hidden;
  background:#fff;border:1px solid var(--linha);border-radius:10px}
.bde-ass-quadro img{display:block;max-width:100%;max-height:100%;object-fit:contain}
.bde-ass-quadro.vazio{background:var(--fundo);border-style:dashed;color:var(--cinza);font-size:12.5px;font-weight:600}
.bde-ass-eletr{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:#15803d}
.bde-ass-nome{margin-top:4px;font-size:13.5px;font-weight:700;color:var(--tinta)}
.bde-ass-nome span{font-weight:500;color:var(--cinza)}
.bde-ass-quando{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--tinta-3);font-variant-numeric:tabular-nums}
.bde-ass-quando .ico-svg{color:var(--cinza)}
.bde-ass-cod{margin-top:2px;padding:6px 8px;border:1px dashed var(--linha);border-radius:8px;background:var(--fundo);
  font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;font-size:10.5px;line-height:1.4;color:var(--tinta-3);
  word-break:break-all;overflow-wrap:anywhere;user-select:all}
.bde-ass-cod-rot{display:block;font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--cinza);user-select:none}

.bde-pe{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 12px;padding-top:8px;
  border-top:1px solid var(--linha);font-size:11px;color:var(--cinza)}
.bde-pe-hash{flex-basis:100%;font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;font-size:10px;word-break:break-all}

@media screen and (max-width:820px){
  .bde-doc{padding:20px 18px;gap:16px}
  .bde-campos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bde-tab-wrap{border:0;border-radius:0;overflow:visible}
}
@media screen and (max-width:640px){
  .bde-totais,.bde-ass-grade{grid-template-columns:1fr}
  .bde-cond{columns:1;font-size:12.5px}
}
@media screen and (max-width:520px){
  .bde-doc{padding:16px 14px;border-radius:12px}
  .bde-cab{flex-direction:column;gap:10px}
  .bde-cab-dir{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px;text-align:left}
  .bde-logo{height:36px}
  .bde-tit{font-size:18px}
  .bde-campos{grid-template-columns:minmax(0,1fr)}
  .bde-campo.largo{grid-column:auto}
  .bde-doc.cancelado::after{font-size:64px}
}

/* ===================================================================
   B. O DOCUMENTO NO PAPEL: A4 RETRATO, UMA FOLHA COM ATE 8 APONTAMENTOS
   Pagina nomeada: margem mais justa que a do relatorio padrao sem mexer
   no @page de ninguem. O rodape vai dentro do documento (.bde-pe).
   =================================================================== */
@page bde{size:A4 portrait;margin:8mm 9mm 9mm}
@media print{
  body.bde-imprimindo .rel-cabecalho,
  body.bde-imprimindo .rel-rodape{display:none!important}
  .bde-tela-so,.bde-pub-topo,.bde-pub-barra,.bde-pub-rodape,.bde-pub-assinar,.bde-pub-nota{display:none!important}
  body.bde-imprimindo .op-kiosk{position:static!important;display:block!important}

  .bde-doc{page:bde;max-width:none;margin:0;gap:1.6mm;padding:0!important;border:0!important;border-radius:0;
    box-shadow:none!important;background:#fff!important;color:#000!important;font-size:8.5pt;line-height:1.3}

  .bde-cab{padding-bottom:2mm;border-bottom:1.5px solid #0d47a1}
  .bde-logo{height:9mm}
  .bde-tit{font-size:13pt;color:#0d47a1}
  .bde-emp{font-size:8pt;color:#444;margin-top:.5mm}
  .bde-num{font-size:15pt;color:#0d47a1}
  .bde-data{font-size:8pt;color:#444}

  .bde-faixa{padding:1.4mm 3mm;border:1px solid #999!important;border-radius:4px;font-size:8.5pt;
    background:#fff!important;color:#000!important}
  .bde-doc.cancelado::after{opacity:.12;font-size:90pt;-webkit-print-color-adjust:exact;print-color-adjust:exact}

  .bde-campos{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:0 4mm}
  .bde-campo{padding:.6mm 0 .8mm;border-bottom:1px solid #bbb}
  .bde-campo.largo{grid-column:span 2!important}
  .bde-campo .rot{font-size:6.5pt;color:#555}
  .bde-campo .val{font-size:9pt;margin-top:.3mm;color:#000}

  .bde-sec{gap:1.4mm}
  .bde-sec-tit{font-size:8.5pt;color:#0d47a1}

  .bde-tab-wrap{border:0;border-radius:0;overflow:visible}
  .bde-tab{font-size:8pt!important}
  .bde-tab th.col-n,.bde-tab td.col-n{width:6mm}
  .bde-tab th.col-hora,.bde-tab td.col-hora{width:14mm}
  .bde-tab th.col-km,.bde-tab td.col-km{width:15mm}
  .bde-tab th.col-dur,.bde-tab td.col-dur{width:13mm}
  .bde-tab th.col-st,.bde-tab td.col-st{width:26mm}
  .bde-tab th.col-fat,.bde-tab td.col-fat{width:13mm;text-align:center!important}
  .bde-tab th.col-desc,.bde-tab td.col-desc{width:auto;min-width:0;white-space:normal}
  .bde-tab tr.bde-abate td{color:#555}
  .bde-garagem{font-size:6pt;color:#555}
  .bde-fat.nao{color:#000}
  .bde-st i{box-shadow:none;-webkit-print-color-adjust:exact;print-color-adjust:exact}

  .bde-totais{grid-template-columns:1fr 1fr!important;gap:4mm;break-inside:avoid}
  .bde-tot{padding:1.8mm 3mm;border:1px solid #999!important;border-radius:4px;background:#fff!important}
  .bde-tot.cobradas{border:1.5px solid #0d47a1!important}
  .bde-tot-cab{padding-bottom:1mm;margin-bottom:.6mm;border-bottom:1px solid #bbb}
  .bde-tot-rot{font-size:7pt;color:#444}
  .bde-tot-val{font-size:13pt;color:#000!important}
  .bde-tot-l{padding:.3mm 0;font-size:7.5pt;color:#000}
  .bde-tot-l b,.bde-tot-l.menos b{color:#000}
  /* No papel as duas notas repetem o que as linhas do quadro ja dizem. */
  .bde-tot-regra{display:none}
  .bde-conta{display:none}

  .pd-obs.bde-obs{min-height:8mm;padding:1.4mm 2.5mm;border:1px solid #bbb;background:#fff!important;
    color:#000!important;font-size:8pt}

  .bde-cond{columns:2!important;column-gap:5mm;column-rule:1px solid #bbb;font-size:6.6pt;line-height:1.2;
    color:#000;orphans:2;widows:2}
  .bde-cond li{margin:0 0 .4mm}
  .bde-cond li b{color:#000}
  .bde-cond-p{font-size:6.6pt;color:#000}
  .bde-cond-aceite{margin-top:.8mm;font-size:7pt;color:#000}
  .bde-termo{padding:1mm 2mm;border-left:1.5px solid #0d47a1;background:#fff!important;font-size:6.8pt;color:#000}

  /* Condicoes e assinaturas descem juntas: a assinatura nunca fica sozinha. */
  .bde-sec-ass{break-inside:avoid}
  .bde-ass-grade{grid-template-columns:1fr 1fr!important;gap:6mm;break-inside:avoid}
  .bde-ass{gap:.6mm}
  .bde-ass-rot{font-size:7pt;color:#000}
  .bde-ass-quadro{height:15mm;border:1px solid #999!important;border-radius:3px;background:#fff!important}
  .bde-ass-quadro.vazio{border-style:dashed!important;color:#555;font-size:8pt}
  .bde-ass-eletr{color:#000;font-size:8pt}
  .bde-ass-nome{margin-top:.6mm;font-size:8.5pt;color:#000}
  .bde-ass-nome span{color:#444}
  .bde-ass-quando{font-size:7.5pt;color:#000}
  .bde-ass-cod{padding:1mm 1.5mm;border:1px solid #bbb!important;border-radius:3px;background:#fff!important;
    font-size:6.3pt;line-height:1.3;color:#000}
  .bde-ass-cod-rot{font-size:6pt;color:#555}

  .bde-pe{padding-top:1mm;border-top:1px solid #bbb;font-size:7pt;color:#555}
  .bde-pe-hash{font-size:6pt}
}

/* ===================================================================
   C. TELA INTEIRA DE ASSINATURA
   Nada se mexe quando o dedo arrasta: touch-action none no quadro,
   overscroll travado e a pagina de tras presa (body.bde-assinando).
   Acima do quiosque (2000) e de tudo o mais.
   =================================================================== */
body.bde-assinando{position:fixed;inset:0;width:100%;overflow:hidden;overscroll-behavior:none}
html:has(body.bde-assinando){overflow:hidden;overscroll-behavior:none}

.bde-ass-tela{position:fixed;inset:0;z-index:3000;height:100dvh;display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto minmax(0,1fr) auto auto auto;
  grid-template-areas:"topo" "area" "aviso" "pe" "girar";
  background:var(--fundo);color:var(--tinta);
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  overscroll-behavior:none;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.bde-ass-tela.modo-cliente{grid-template-rows:auto auto minmax(0,1fr) auto auto auto;
  grid-template-areas:"topo" "resumo" "area" "aviso" "pe" "girar"}

.bde-ass-topo{grid-area:topo;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:clamp(10px,2svh,18px) clamp(14px,3vw,26px);background:var(--branco);border-bottom:1px solid var(--linha)}
.bde-ass-quem{min-width:0;line-height:1.2}
.bde-ass-quem small{display:block;font-size:11.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--azul)}
.bde-ass-quem b{display:block;margin-top:2px;font-size:clamp(18px,3svh,26px);font-weight:800;letter-spacing:-.01em;
  color:var(--tinta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bde-ass-quem span{display:block;margin-top:2px;font-size:13px;color:var(--cinza);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bde-ass-topo .wz-cancel{width:44px;height:44px}

/* Resumo do modo cliente: o que ele esta assinando, em letra grande. */
.bde-ass-resumo{grid-area:resumo;display:flex;flex-direction:column;gap:6px;
  padding:clamp(8px,1.6svh,14px) clamp(14px,3vw,26px) 0}
.bde-ass-res-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:6px 14px}
.bde-ass-res-i{min-width:0}
.bde-ass-res-i span{display:block;font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--cinza)}
.bde-ass-res-i b{display:block;font-size:clamp(14px,2.2svh,18px);font-weight:800;color:var(--tinta);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.bde-ass-res-i.forte b{font-size:clamp(18px,3svh,26px);color:var(--azul)}
.bde-ass-ler{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:6px 0;
  font:inherit;font-size:clamp(13px,1.9svh,15px);font-weight:700;color:var(--azul-2);text-decoration:underline;cursor:pointer}

.bde-ass-area{grid-area:area;position:relative;margin:clamp(10px,2svh,20px) clamp(12px,3vw,26px) clamp(6px,1.2svh,12px);
  background:#fff;border:2px solid var(--linha);border-radius:18px;box-shadow:var(--sombra);overflow:hidden;touch-action:none;min-height:120px}
.bde-ass-area canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}
.bde-ass-base{position:absolute;left:7%;right:7%;bottom:28%;border-bottom:2px dashed #94a3b8;pointer-events:none}
.bde-ass-x{position:absolute;left:7%;bottom:calc(28% + 6px);font-size:clamp(22px,4svh,32px);font-weight:700;line-height:1;
  color:#94a3b8;pointer-events:none}
.bde-ass-dica{position:absolute;left:0;right:0;bottom:calc(28% - clamp(28px,5svh,40px));text-align:center;
  font-size:clamp(13px,2.1svh,17px);font-weight:600;letter-spacing:.3px;color:#94a3b8;pointer-events:none;transition:opacity .15s}
.bde-ass-area.tem-traco .bde-ass-dica{opacity:0}
.bde-ass-area.tem-traco{border-color:var(--azul-2)}

.bde-ass-aviso{grid-area:aviso;margin:0;padding:0 clamp(14px,3vw,26px) clamp(6px,1.2svh,10px);text-align:center;
  font-size:clamp(11.5px,1.6svh,13px);line-height:1.4;color:var(--cinza)}
.bde-ass-aviso.erro{color:var(--vermelho);font-weight:700;font-size:clamp(13px,1.9svh,15px)}
.bde-ass-pe{grid-area:pe;margin:0;padding:0 clamp(12px,3vw,26px) clamp(12px,2.4svh,22px)}
.bde-ass-pe .btn{min-height:clamp(54px,8svh,72px);font-size:clamp(15px,2.2svh,19px);border-radius:16px;gap:10px}
.bde-ass-pe .btn.ghost{flex:1}
.bde-ass-pe .btn:disabled{opacity:.5;cursor:default;box-shadow:none}
.wz-nav .btn.bde-perigo{background:linear-gradient(180deg,#ef4444,#b91c1c);box-shadow:0 12px 26px -12px rgba(220,38,38,.7)}

.bde-ass-girar{grid-area:girar;display:none}
@media screen and (orientation:portrait) and (max-width:520px){
  .bde-ass-girar{display:flex;align-items:center;justify-content:center;gap:6px;
    padding:0 16px clamp(8px,1.4svh,12px);font-size:12px;font-weight:600;color:var(--cinza)}
}
/* Celular deitado (baixo e largo): botoes a DIREITA do quadro. */
@media screen and (orientation:landscape) and (max-height:500px){
  .bde-ass-tela,.bde-ass-tela.modo-cliente{grid-template-columns:minmax(0,1fr) clamp(150px,26vw,220px);
    grid-template-rows:auto minmax(0,1fr) auto;
    grid-template-areas:"topo topo" "area pe" "aviso aviso"}
  .bde-ass-tela.modo-cliente{grid-template-rows:auto auto minmax(0,1fr) auto;
    grid-template-areas:"topo topo" "resumo resumo" "area pe" "aviso aviso"}
  .bde-ass-tela.modo-cliente .bde-ass-res-grade{grid-template-columns:repeat(6,minmax(0,1fr))}
  .bde-ass-topo{padding-top:8px;padding-bottom:8px}
  .bde-ass-area{margin:8px 0 6px 12px;min-height:0}
  .bde-ass-pe{flex-direction:column;justify-content:flex-end;padding:8px 12px 6px}
  .bde-ass-pe .btn{flex:0 0 auto;min-height:56px}
  .bde-ass-aviso{padding-bottom:6px}
}
/* Depois de assinar: tela inteira verde, um botao so. */
.bde-ass-tela.bde-ass-feito{display:grid;place-items:center;grid-template-areas:none;grid-template-rows:1fr;
  background:linear-gradient(160deg,#f0fdf4,#dcfce7)}
.bde-ass-fim{display:flex;flex-direction:column;align-items:center;gap:18px;padding:24px;text-align:center;max-width:560px}
.bde-ass-fim h2{margin:0;font-size:clamp(22px,4svh,34px);font-weight:800;line-height:1.2;color:#14532d}
.bde-ass-fim .btn{width:100%;min-height:64px;font-size:18px;border-radius:16px;
  background:linear-gradient(180deg,#22c55e,#15803d);color:#fff;box-shadow:0 12px 26px -12px rgba(22,163,74,.75)}

/* O documento inteiro por cima da assinatura, rolavel, botao fixo no pe. */
.bde-ass-leitura{position:fixed;inset:0;z-index:3100;display:flex;flex-direction:column;background:var(--fundo);
  touch-action:pan-y;user-select:text;-webkit-user-select:text}
.bde-ass-leitura-rolo{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:clamp(10px,2svh,20px) 12px}
.bde-ass-leitura-pe{padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:var(--branco);border-top:1px solid var(--linha);display:flex}
.bde-ass-leitura-pe .btn{flex:1;min-height:56px;font-size:16px;font-weight:800;border-radius:14px;
  background:linear-gradient(180deg,#3b82f6,#1d4ed8);color:#fff}
:root[data-theme="dark"] .bde-ass-topo{background:var(--branco)}
:root[data-theme="dark"] .bde-ass-area{border-color:var(--linha)}
:root[data-theme="dark"] .bde-ass-tela.bde-ass-feito{background:linear-gradient(160deg,#0f2a1a,#123a24)}
:root[data-theme="dark"] .bde-ass-fim h2{color:#dcfce7}
@media print{ .bde-ass-tela,.bde-ass-leitura,.bde-confirma{display:none!important} }

/* ===================================================================
   D. BDE NO QUIOSQUE DO OPERADOR
   Mesma casca, mesmo cartao, mesmas medidas por altura do abastecimento.
   =================================================================== */
.op-palco .wz.bde-largo{max-width:720px}
/* Redesenho do MESMO passo (tecla, troca de campo): sem a animacao de entrada. */
.wz-body.bde-sem-anim{animation:none}
.wz-input.bde-obs-campo{text-align:left;resize:none;min-height:clamp(64px,11svh,120px);line-height:1.35;font-family:inherit}

/* CPF: 14 caracteres tem de caber na largura do celular. */
.wz-input.bde-cpf,
body.modo-operador .wz-input.bde-cpf{font-size:clamp(24px,min(4.6svh,7.2vw),44px);letter-spacing:.02em}
.bde-quem{min-height:62px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.bde-quem .wz-achado-ok{max-width:440px}
.bde-quem .wz-achado-nao{text-align:center}
.bde-link-txt{font:inherit;font-size:13px;font-weight:700;color:var(--azul-2);text-decoration:underline;cursor:pointer;padding:2px 6px}
.tec-t.bde-tec-vazio{visibility:hidden;pointer-events:none}

/* Escolha: dois cartoes grandes. */
.bde-escolha{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,2svh,16px)}
.bde-escolha-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(8px,1.4svh,14px);
  min-height:clamp(150px,30svh,300px);padding:clamp(16px,3svh,28px) 16px;text-align:center;
  border:1.5px solid var(--linha);border-radius:20px;background:var(--branco);color:var(--tinta);
  font-family:inherit;cursor:pointer;transition:.14s}
.bde-escolha-btn:hover,.bde-escolha-btn:active{border-color:var(--azul);
  box-shadow:0 8px 20px -12px rgba(21,101,192,.55);transform:translateY(-1px)}
.bde-escolha-ic{width:clamp(64px,11svh,96px);height:clamp(64px,11svh,96px);border-radius:22px;
  display:grid;place-items:center;background:var(--azul-claro);color:var(--azul)}
.bde-escolha-btn b{font-size:clamp(18px,2.9svh,24px);font-weight:800;letter-spacing:-.01em}
.bde-escolha-btn span:last-child{max-width:26ch;font-size:clamp(12px,1.7svh,14px);line-height:1.35;color:var(--cinza)}
@media screen and (max-width:420px){
  .bde-escolha{grid-template-columns:1fr}
  .bde-escolha-btn{flex-direction:row;justify-content:flex-start;text-align:left;min-height:clamp(96px,18svh,150px)}
  .bde-escolha-ic{width:64px;height:64px;border-radius:18px;flex:none}
}
/* Faixa "Aguardando assinatura (n)" da escolha: rola so ela. */
.bde-pend{display:flex;flex-direction:column;gap:6px;min-height:0;max-height:clamp(90px,22svh,220px);overflow-y:auto;overscroll-behavior:contain}
.bde-pend-tit{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:#b45309}
.bde-pend-i{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:10px 12px;
  border:1.5px dashed var(--amarelo);border-radius:12px;background:color-mix(in srgb,var(--amarelo) 6%,var(--branco));
  color:var(--tinta);font:inherit;font-size:13.5px;text-align:left;cursor:pointer}
.bde-pend-i b{font-variant-numeric:tabular-nums}
.bde-pend-i span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bde-pend-i em{flex:none;font-style:normal;font-size:11.5px;font-weight:700;color:#b45309}

/* Chips de sugestao (clientes e locais mais usados, data, "Agora"). */
.bde-chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.bde-chips .wz-chip{padding:clamp(6px,1.1svh,10px) 13px;font-size:clamp(12.5px,1.7svh,14px)}
.bde-chips .wz-chip.on{background:var(--azul);border-color:var(--azul);color:#fff}
.wz-hint .bde-chips{margin-top:6px}
/* Hoje, Ontem e Agora numa linha so: em duas, o passo da hora rolava no iPhone. */
.bde-chips.bde-chips-linha{flex-wrap:nowrap}
.bde-chips.bde-chips-linha .wz-chip{white-space:nowrap}
/* Celular: a dica longa sai e fica so o essencial (a hora de saida, os chips).
   Com ela o passo passava 73px da altura do iPhone. */
@media screen and (max-width:520px){
  .bde-dica-longa{display:none}
  .wz-hint .bde-chips{margin-top:2px}
  .bde-chips .wz-chip{padding:5px 12px}
  /* Revisao: rola so a lista; os totais e o botao de emitir ficam na tela. */
  .wz-resumo.bde-resumo{max-height:38svh}
  /* A lista do dia rola sozinha; o botao Continuar fica na tela. */
  #op-palco .bde-apt-lista{max-height:44svh}
  /* O espaco do nome achado pelo CPF: mais baixo no celular. */
  #op-palco .bde-quem{min-height:48px}
  #op-palco .bde-quem .wz-achado-ok b{letter-spacing:0;font-size:15px;line-height:1.25}
  .wz-body .bde-totais{grid-template-columns:1fr 1fr}
}
.bde-aviso-l{color:#b45309;font-weight:700}

/* Teclado de texto: a linha dos acentos e da pontuacao. */
.tec-lin.bde-tec-acentos .tec-t{font-size:clamp(13px,1.9svh,16px)}

/* Auxiliar: botoes grandes; rola so a grade. */
.bde-aux-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:clamp(8px,1.4svh,12px);
  min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:2px}
.bde-aux-grade .comb-btn{--cor:var(--azul-2);justify-content:flex-start;min-height:clamp(54px,8svh,72px);text-align:left;letter-spacing:0}
.bde-aux-grade .comb-btn.sem{--cor:var(--cinza);border-style:dashed}
.bde-aux-busca{font-size:16px}

/* Lista de apontamentos: rola so a lista, nunca a pagina. */
.bde-apt-lista{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px;overflow-y:auto;
  overscroll-behavior:contain;margin:0 -4px;padding:2px 4px}
.bde-apt{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:12px;width:100%;
  padding:clamp(8px,1.4svh,14px) 12px;border:1.5px solid var(--linha);border-radius:16px;background:var(--branco);
  color:var(--tinta);font:inherit;text-align:left;cursor:pointer;transition:.14s}
.bde-apt:hover{border-color:var(--azul)}
.bde-apt-n{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;
  background:var(--azul-claro);color:var(--azul);font-weight:800;font-size:14px;font-variant-numeric:tabular-nums}
.bde-apt-meio{display:flex;flex-direction:column;gap:2px;min-width:0}
.bde-apt-hora{font-size:clamp(17px,2.7svh,22px);font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.bde-apt-hora .seta{margin:0 5px;font-weight:600;color:var(--cinza-2)}
.bde-apt-meta{display:flex;flex-wrap:wrap;gap:2px 10px;font-size:12.5px;color:var(--cinza);min-width:0}
.bde-apt-meta>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.bde-apt-dur{text-align:right;font-size:clamp(15px,2.2svh,18px);font-weight:800;font-variant-numeric:tabular-nums}
.bde-apt-dur small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--cinza)}
.bde-apt.bde-abate .bde-apt-dur small{color:var(--vermelho)}
.bde-apt-acoes{display:flex;flex-direction:column;gap:6px}
.bde-apt-acoes .btn{padding:clamp(6px,1.1svh,9px) 12px;font-size:13px;border-radius:10px}
@media screen and (min-width:560px){ .bde-apt-acoes{flex-direction:row} }
/* Celular: hora, duracao e dois botoes nao cabem numa linha de 390 px. Com
   "Guindaste telescopico" e nomes reais, a hora do fim ficava POR CIMA da
   duracao. Os botoes descem para uma linha propria, lado a lado. */
@media screen and (max-width:559px){
  .bde-apt{grid-template-columns:auto minmax(0,1fr) auto;row-gap:8px}
  .bde-apt-hora{white-space:nowrap;font-size:clamp(16px,2.4svh,19px)}
  .bde-apt-acoes{grid-column:1 / -1;flex-direction:row}
  .bde-apt-acoes .btn{flex:1}
}
/* O botao do topo nunca quebra em duas linhas: quebrado, o topo cresce e
   empurra o quiosque inteiro para fora da tela do celular. */
body.modo-operador .op-right .btn{white-space:nowrap}
.bde-apt-soma{display:flex;justify-content:space-between;gap:12px;padding:clamp(8px,1.4svh,12px) 16px;flex:none;
  border:1px solid var(--linha);border-radius:14px;background:var(--fundo);font-size:14px;color:var(--cinza)}
.bde-apt-soma b{margin-left:6px;font-size:clamp(16px,2.4svh,19px);font-weight:800;color:var(--tinta);font-variant-numeric:tabular-nums}
.bde-apt-soma span:last-child b{color:var(--azul)}

/* Editar uma linha: os campos lado a lado, um teclado so. */
.bde-par{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bde-par-campo{display:flex;flex-direction:column;gap:4px;min-width:0;cursor:pointer}
.bde-par-campo>span{font-size:11.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;text-align:center;color:var(--cinza)}
.bde-par-campo.on>span{color:var(--azul)}
.bde-par .wz-input,
body.modo-operador .bde-par .wz-input{font-size:clamp(20px,3.4svh,34px);padding:clamp(7px,1.3svh,14px) 8px}
body.modo-operador .bde-par .wz-input.wz-input-txt,
.bde-par .wz-input.wz-input-txt{font-size:clamp(14px,2.1svh,18px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bde-par .wz-input.on{border-color:var(--azul);box-shadow:0 0 0 4px rgba(21,101,192,.14)}
.bde-par .bde-par-st{display:flex;align-items:center;justify-content:center;gap:8px;min-height:100%;
  border:2px solid var(--linha);border-radius:18px;background:var(--branco);font-weight:800;
  font-size:clamp(14px,2.1svh,18px);padding:clamp(7px,1.3svh,14px) 8px}
.bde-par .bde-par-st.on{border-color:var(--azul);box-shadow:0 0 0 4px rgba(21,101,192,.14)}
@media (min-width:820px) and (max-height:900px){
  body.modo-operador .wz-body:has(> .tec-num) > .bde-par{grid-area:campo}
}

/* Status: botoes grandes sobre o .comb-btn. */
.bde-st-grade{display:grid;grid-template-columns:1fr 1fr;gap:clamp(8px,1.4svh,12px)}
.comb-btn.bde-st-btn{flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;
  min-height:clamp(58px,9svh,88px);padding:clamp(8px,1.5svh,14px) 14px;text-align:left;letter-spacing:0}
.bde-st-nome{display:flex;align-items:center;gap:10px;font-size:clamp(14px,2.1svh,17px);font-weight:700}
.bde-st-nome .ico-svg{color:var(--cor)}
.bde-st-regra{padding-left:24px;font-size:12px;font-weight:600;color:var(--cinza)}
.bde-st-regra.nao{color:var(--vermelho)}
.bde-st-grade .comb-btn:last-child:nth-child(odd){justify-content:center}
@media screen and (min-width:820px){ .bde-largo .bde-st-grade{grid-template-columns:repeat(3,1fr)} }

/* Revisao: a lista pode crescer; rola so ela. Cada linha leva ao passo. */
.wz-resumo.bde-resumo{min-height:0;flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain}
button.wz-res-l.bde-res-btn{width:100%;font:inherit;text-align:left;cursor:pointer;background:transparent;color:inherit;border:0;border-bottom:1px solid var(--linha)}
button.wz-res-l.bde-res-btn:last-child{border-bottom:0}
button.wz-res-l.bde-res-btn:hover{background:var(--azul-claro)}
.bde-res-btn b{display:flex;align-items:center;gap:6px;justify-content:flex-end}
.bde-res-btn b .ico-svg{color:var(--cinza-2);flex:none}
body.modo-operador .bde-resumo .wz-res-l{padding:clamp(8px,1.4svh,15px) 16px}
body.modo-operador .bde-resumo .wz-res-l b{font-size:clamp(14px,2svh,17px)}
.wz-body .bde-totais{gap:10px;flex:none}
.wz-body .bde-tot{padding:clamp(6px,1.2svh,10px) 14px}
.wz-body .bde-tot-val{font-size:clamp(20px,3svh,26px)}
.wz-body .bde-conta{margin:0;font-size:11.5px}

/* Tela final: acoes grandes empilhadas. */
.wz-nav.bde-fim-acoes{flex-direction:column;width:100%;gap:10px;margin-top:0}
.wz-nav.bde-fim-acoes>.btn{flex:none;width:100%;gap:10px;padding:clamp(12px,2svh,18px);font-size:clamp(15px,2svh,17px)}
.bde-fim-sec{display:flex;gap:10px;flex-wrap:wrap}
.bde-fim-sec .btn{flex:1 1 140px}
.bde-copiado{display:flex;align-items:center;justify-content:center;gap:6px;min-height:22px;
  font-size:14px;font-weight:700;color:var(--verde)}
.bde-copiado:empty{display:none}
.bde-link{justify-content:center;width:100%}
.bde-link code{font-size:13px;user-select:all;-webkit-user-select:all}
.op-sucesso .bde-falta{display:inline-flex;align-items:center;gap:6px;margin:-14px 0 18px;font-weight:700;color:#b45309}
.op-sucesso .bde-trocar{margin-top:12px}
.op-sucesso .bde-auto{margin-top:12px;font-size:12px;color:var(--cinza)}

/* Espera pelo cliente: indicador discreto. */
.bde-espera{width:44px;height:44px;margin:4px auto 14px;border-radius:50%;border:4px solid var(--azul-claro);
  border-top-color:var(--azul-2);animation:bdeGira 1.1s linear infinite}
@keyframes bdeGira{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.bde-espera{animation:none}}

/* Confirmacao dentro do quiosque (os modais da casa ficam atras dele). */
.bde-confirma{position:fixed;inset:0;z-index:2800;display:grid;place-items:center;padding:16px;background:rgba(15,23,42,.5)}
.bde-confirma-caixa{width:100%;max-width:440px;display:flex;flex-direction:column;gap:14px;padding:22px;
  background:var(--branco);color:var(--tinta);border:1px solid var(--linha);border-radius:20px;box-shadow:var(--sombra-lg)}
.bde-confirma-caixa h3{margin:0;font-size:20px;font-weight:800;line-height:1.25}
.bde-confirma-caixa p{margin:0;font-size:14px;color:var(--cinza);line-height:1.5}
.bde-confirma-caixa .wz-nav{flex-wrap:wrap}

/* Leitura do BDE no quiosque (Ver o BDE). */
.bde-leitura-kiosk{position:fixed;inset:0;z-index:2700}

/* ===================================================================
   E. PAGINA PUBLICA DE ASSINATURA (celular do cliente)
   Topo copiado do ver.html. O documento e o .bde-doc de sempre.
   =================================================================== */
body.bde-pub{min-height:100%;background:var(--fundo);color:var(--tinta)}
.bde-pub-topo{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:12px 16px;color:#fff;
  background:linear-gradient(120deg,#06183b,#0a2f6e 55%,#0d3f8f)}
.bde-pub-topo img{height:26px;width:auto}
.bde-pub-topo .tt{font-weight:700;font-size:15px;line-height:1.2}
.bde-pub-topo .sub{font-size:12px;color:#cdd9f7}
.bde-pub-palco{padding:14px 12px calc(40px + env(safe-area-inset-bottom))}
.bde-pub-nota{max-width:880px;margin:0 auto 12px;display:flex;gap:8px;align-items:flex-start;padding:10px 14px;
  background:var(--azul-claro);border:1px solid color-mix(in srgb,var(--azul-2) 25%,transparent);border-radius:12px;
  font-size:13px;line-height:1.45;color:var(--tinta-2)}
.bde-pub-nota .ico-svg{color:var(--azul);flex:none;margin-top:1px}
.bde-pub-rodape{padding:14px 16px 0;text-align:center;font-size:11.5px;color:var(--cinza)}
/* O bloco de assinar fica no FIM, depois das condicoes: para chegar ao
   botao, a pessoa passa por elas (condicoes 9 e 10). */
.bde-pub-assinar{max-width:880px;margin:16px auto 0;display:flex;flex-direction:column;gap:12px;padding:18px;
  background:var(--branco);border:2px solid var(--azul-2);border-radius:var(--raio);box-shadow:var(--sombra)}
.bde-pub-assinar h2{margin:0;font-size:17px;font-weight:800;color:var(--azul)}
.bde-pub-assinar .campo{margin:0}
.bde-pub-assinar .campo input{font-size:16px;padding:12px 13px}
.bde-pub-assinar .bde-pub-grade{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bde-pub-assinar .bde-termo{font-size:13px}
.bde-pub-aceite{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45;cursor:pointer}
.bde-pub-aceite input{width:22px;height:22px;flex:none;margin-top:1px;accent-color:var(--azul-2)}
.bde-pub-erro{color:var(--vermelho);font-weight:700;font-size:14px;min-height:0}
.bde-pub-erro:empty{display:none}
.bde-pub-assinar .btn,.bde-pub-barra .btn{width:100%;padding:15px;font-size:16px;font-weight:800;border-radius:14px;gap:10px}
.bde-pub-assinar .btn:not(.ghost),.bde-pub-barra .btn:not(.ghost){background:linear-gradient(180deg,#3b82f6,#1d4ed8);color:#fff;box-shadow:0 12px 26px -12px rgba(21,101,192,.75)}
.bde-pub-assinar .btn:disabled{opacity:.55;box-shadow:none;cursor:default}
@media screen and (max-width:520px){ .bde-pub-assinar .bde-pub-grade{grid-template-columns:1fr} }
.bde-pub-barra{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;flex-direction:row;align-items:center;
  justify-content:space-between;gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:var(--branco);border-top:1px solid var(--linha);box-shadow:0 -8px 24px -12px rgba(15,23,42,.25)}
.bde-pub-barra .bde-pub-ok{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--verde)}
.bde-pub-barra .btn{width:auto;padding:12px 16px;font-size:14px}
@media screen and (min-width:900px){
  .bde-pub-barra{left:50%;right:auto;width:880px;transform:translateX(-50%);border:1px solid var(--linha);
    border-bottom:0;border-radius:var(--raio) var(--raio) 0 0}
}
.bde-pub-com-barra .bde-pub-palco{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
.bde-pub-aviso{max-width:460px;margin:56px auto;padding:30px 26px;text-align:center;background:#fff;
  border:1px solid var(--linha);border-radius:14px;box-shadow:0 10px 30px rgba(16,24,40,.08)}
.bde-pub-aviso h1{margin:0 0 8px;font-size:18px;color:var(--azul)}
.bde-pub-aviso p{margin:0;font-size:14px;line-height:1.6;color:var(--cinza)}

/* ===================================================================
   GESTAO: lista, documento, cadastro de operadores, relatorio
   =================================================================== */
.bde-banner{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px;margin-bottom:14px;
  border:1px solid var(--amarelo);border-radius:12px;background:color-mix(in srgb,var(--amarelo) 8%,var(--branco));
  font-size:13.5px;color:var(--tinta)}
.bde-banner .ico-svg{color:#b45309;flex:none}
.bde-banner span{flex:1;min-width:200px}
.bde-nota{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;line-height:1.5;color:var(--cinza);margin:-4px 0 12px}
.bde-nota .ico-svg{flex:none;margin-top:2px}
.bde-filtros{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.bde-filtros select,.bde-filtros input{padding:9px 12px;border:1px solid var(--linha);border-radius:9px;background:var(--branco);color:var(--tinta)}
.bde-filtros input{flex:1 1 220px;min-width:180px}
table.bde-lista tbody tr{cursor:pointer}
table.bde-lista tbody tr.bde-lin-cancel td{color:var(--cinza-2);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--cinza-2) 60%,transparent)}
table.bde-lista tbody tr.bde-lin-cancel td .chip-st{text-decoration:none}
.bde-num-cel{font-weight:800;color:var(--azul);font-variant-numeric:tabular-nums;white-space:nowrap}
.bde-selo-km{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:6px;font-size:10.5px;font-weight:700;
  background:#fef3c7;color:#b45309;white-space:nowrap}
.bde-doc-acoes{justify-content:flex-start}
.bde-doc-acoes .crescer{flex:1}
.bde-cfg textarea{width:100%;min-height:260px;padding:11px 13px;border:1px solid var(--linha);border-radius:10px;
  font-family:inherit;font-size:13px;line-height:1.5;background:var(--branco);color:var(--tinta);resize:vertical}
.bde-cfg .campo input:disabled{background:var(--fundo);color:var(--cinza)}
.bde-cfg .bde-cfg-l{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.bde-cfg .bde-cfg-l label{margin:0}
.bde-cfg .bde-cfg-dica{font-size:12px;color:var(--cinza);margin-top:4px;line-height:1.45}
.bde-cfg .bde-cfg-emp{padding:10px 12px;border:1px solid var(--linha);border-radius:10px;background:var(--fundo);font-size:14px}
.modal.bde-modal-largo{width:760px}
.bde-func{display:flex;gap:8px;flex-wrap:wrap}
.bde-func label{flex:1 1 160px;display:flex;align-items:flex-start;gap:10px;padding:11px 13px;border:1.5px solid var(--linha);
  border-radius:11px;cursor:pointer;background:var(--branco)}
.bde-func label.on{border-color:var(--azul);background:var(--azul-claro)}
.bde-func input{margin-top:3px;accent-color:var(--azul)}
.bde-func b{display:block;font-size:13.5px}
.bde-func small{display:block;font-size:12px;color:var(--cinza);line-height:1.4}
.bde-cpf-cel{font-variant-numeric:tabular-nums;letter-spacing:.3px;white-space:nowrap}
.bde-rank-grade{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:4px 18px 10px}
.bde-rank-grade h4,.bde-rel-sec h4{margin:0 0 6px;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--azul)}
.bde-rel-sec{padding:6px 18px 12px}
.bde-pos{font-weight:800;color:var(--azul);white-space:nowrap}
@media screen and (max-width:760px){ .bde-rank-grade{grid-template-columns:1fr} }
@media print{
  .bde-rank-grade{display:grid!important;grid-template-columns:1fr 1fr!important;gap:4mm;padding:0 0 3mm}
  .bde-rel-sec{padding:0 0 3mm}
  .bde-rank-grade h4,.bde-rel-sec h4{font-size:8.5pt;color:#0d47a1}
}

/* ===================================================================
   F. COR DE CADA STATUS (documento, lista e botao usam a mesma)
   A cor ajuda; o nome escrito ao lado e que decide.
   =================================================================== */
.bde-c-DESLOCAMENTO{--cor:var(--info)}
.bde-c-PREPARACAO{--cor:var(--azul-2)}
.bde-c-OPERANDO{--cor:var(--verde)}
.bde-c-A_DISPOSICAO{--cor:var(--amarelo)}
.bde-c-REFEICAO{--cor:var(--cinza)}
.bde-c-PARADA{--cor:var(--vermelho)}

/* ---- Tema escuro: so o que nao se resolve pelos tokens ---- */
:root[data-theme="dark"] .bde-num,
:root[data-theme="dark"] .bde-tot.cobradas .bde-tot-val,
:root[data-theme="dark"] .bde-apt-soma span:last-child b,
:root[data-theme="dark"] .bde-num-cel,
:root[data-theme="dark"] .bde-ass-res-i.forte b{color:#bcd6ff}
:root[data-theme="dark"] .bde-faixa.ok{color:#dcfce7}
:root[data-theme="dark"] .bde-faixa.aguard{color:#fde68a}
:root[data-theme="dark"] .bde-faixa.cancel{color:#fee2e2}
:root[data-theme="dark"] .bde-escolha-btn,
:root[data-theme="dark"] .bde-apt,
:root[data-theme="dark"] .bde-par .bde-par-st{background:#0f1a2b}
:root[data-theme="dark"] .bde-escolha-ic,
:root[data-theme="dark"] .bde-apt-n{background:#12233d;color:#dbeafe}
:root[data-theme="dark"] .bde-pend-tit,
:root[data-theme="dark"] .bde-pend-i em,
:root[data-theme="dark"] .op-sucesso .bde-falta,
:root[data-theme="dark"] .bde-aviso-l{color:#fde68a}
:root[data-theme="dark"] table.resp.bde-tab tr{background:#0e1830}
:root[data-theme="dark"] .bde-pub-nota{background:#12233d}
:root[data-theme="dark"] .bde-banner .ico-svg{color:#fde68a}
:root[data-theme="dark"] .bde-selo-km{background:#332a10;color:#fde68a}
:root[data-theme="dark"] .bde-func label.on{background:#12233d}

/* Seletor com busca da casa (.selb) dentro da barra de filtros do BDE: do tamanho de um filtro, nao da linha toda. */
.bde-filtros .selb{flex:0 1 220px;min-width:150px;max-width:280px;width:auto}

/* ===================================================================
   BDE NO PAPEL: O QUE FAZ CABER EM UMA FOLHA (medido em PDF)
   Com a conta do bloco B o documento de 8 apontamentos media 320 mm para
   280 mm uteis: a grade de dados quebrava linha, a tabela e os quadros de
   horas estavam com o espacamento de tela. Medido com Page.printToPDF (ver
   tools/prova-bde-telas.mjs), com 3 e com 8 apontamentos.
   No papel saem da grade so os campos que o documento ja mostra em outro
   lugar: a data (no cabecalho, com o dia da semana) e o minimo (no quadro de
   horas cobradas). Na tela e no link continuam onde estao.
   =================================================================== */
@media print{
  .bde-campos{grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:0 3mm}
  .bde-campo.c-data,.bde-campo.c-min{display:none}
  .bde-campo.c-op,.bde-campo.c-km,.bde-campo.c-hor{grid-column:span 2}
  .bde-campo .val{font-size:8.5pt}
  .bde-tab{table-layout:fixed;width:100%}
  .bde-tab th.col-n,.bde-tab td.col-n{width:5mm}
  .bde-tab th.col-hora,.bde-tab td.col-hora{width:12mm}
  .bde-tab th.col-km,.bde-tab td.col-km{width:13mm}
  .bde-tab th.col-dur,.bde-tab td.col-dur{width:12mm}
  .bde-tab th.col-st,.bde-tab td.col-st{width:27mm}
  .bde-tab th.col-fat,.bde-tab td.col-fat{width:14mm}
  .bde-tab thead th{padding:.8mm 1.2mm!important;font-size:6.5pt}
  .bde-tab tbody td{padding:.6mm 1.2mm!important;line-height:1.15}
  .bde-garagem{display:block;font-size:5.5pt;line-height:1}
  .bde-tot{padding:1.2mm 2.5mm}
  .bde-tot-cab{padding-bottom:.6mm;margin-bottom:.3mm}
  .bde-tot-l{padding:0}
  .bde-tot-val{font-size:12pt}
  .pd-obs.bde-obs{min-height:0;padding:1mm 2.5mm}
  .bde-sec-tit{margin:0}
  /* As condicoes sao as "frases pequenininhas" do papel da TITA. */
  .bde-cond{font-size:6.2pt;line-height:1.18}
  .bde-termo{padding:.5mm 2mm;font-size:6.4pt}
  .bde-ass-quadro{height:13mm}
  .bde-ass-cod{white-space:nowrap;word-break:normal;overflow:hidden}
  .bde-cab{padding-bottom:1.2mm}
  .bde-logo{height:8mm}
  .bde-tit{font-size:12pt}
  .bde-num{font-size:13pt}
  .bde-faixa{padding:.9mm 3mm}
  .bde-tot-val{font-size:11pt}
  .bde-ass-quadro{height:14mm}
  .bde-tab th.col-hora,.bde-tab td.col-hora{width:17mm}
  .bde-garagem{font-size:5pt;white-space:nowrap}
  .bde-tab th.col-dur,.bde-tab td.col-dur{width:15mm}
  .bde-tab th.col-fat,.bde-tab td.col-fat{width:17mm}
  .bde-tab thead th{white-space:nowrap}
  /* Observacoes numa linha so: titulo e texto lado a lado. */
  .bde-sec-obs{flex-direction:row;align-items:baseline;gap:2mm}
  .bde-sec-obs .bde-sec-tit{flex:none}
  .bde-sec-obs .pd-obs.bde-obs{flex:1;border:0;padding:0}
  /* Rodape numa linha: o codigo do documento no meio. */
  .bde-pe{flex-wrap:nowrap;align-items:baseline}
  .bde-pe>span:nth-child(2){order:2}
  .bde-pe-hash{order:1;flex:1;text-align:center;font-size:5.5pt}
}