/* ==========================================================================
   AGENDAMENTO GPC — complementos ao design system
   O visual vem inteiro do gpcadm (app.css). Aqui ficam só as peças que este
   sistema tem e o Portal GPC não: a casca do portal público, os passos do
   formulário do fornecedor, a tira de dias e a grade da agenda interna.
   ========================================================================== */

/* ===== PORTAL PÚBLICO — casca de uma coluna =====
   Quem abre é gente de fora, no celular, que precisa preencher e sair. Sem
   sidebar, sem menu, sem nada para explorar. */
.pub-topbar{
  background:var(--gpc-navy-500); color:#fff; padding:14px 18px;
  display:flex; align-items:center; gap:12px;
}
.pub-topbar img{height:26px; filter:brightness(0) invert(1)}
.pub-topbar .pt-tit{font-weight:800; font-size:14px; letter-spacing:-.01em}
.pub-topbar .pt-tit b{color:var(--gpc-orange-400)}
.pub-topbar .pt-espaco{flex:1}
/* Atalho da equipe: discreto de propósito — quem precisa dele sabe que existe,
   e o fornecedor não deve ser convidado a clicar numa área que não é dele. */
.pub-topbar .pt-gestao{
  flex:0 0 auto; font-size:12px; font-weight:700; color:#fff;
  border:1px solid rgba(255,255,255,.35); border-radius:var(--r-md);
  padding:7px 14px; min-height:34px; display:inline-flex; align-items:center;
  transition:background .15s, border-color .15s;
}
.pub-topbar .pt-gestao:hover{background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.6)}
.pub-wrap{max-width:720px; margin:0 auto; padding:20px 16px 60px}
.pub-foot{
  max-width:720px; margin:0 auto; padding:20px 16px 40px; text-align:center;
  font-family:var(--font-mono); font-size:10px; color:var(--text-muted); letter-spacing:.1em;
}

/* ===== passos do formulário =====
   As classes chamam-se `pass`, não `step`: o app.css do gpcadm já tem um
   `.step` (item de stepper, display:flex com linha conectora), e o nome
   repetido fazia o cartão inteiro virar item de lista — era a causa do
   desalinhamento no desktop. Nome de classe em CSS compartilhado é espaço de
   nomes global; aqui todo complemento é prefixado. */
.pass{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); margin-bottom:16px; overflow:hidden}
.pass-h{display:flex; align-items:center; gap:12px; padding:16px 18px 12px}
.pass-n{
  width:28px;height:28px;border-radius:var(--r-full);background:var(--gpc-navy-500);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex-shrink:0;
}
.pass-h h2{font-size:15px;font-weight:700;color:var(--text)}
.pass-b{padding:0 18px 18px}
.pass-b > .hint{font-size:12px;color:var(--text-muted);margin-bottom:12px}

/* Campos de alturas diferentes (rótulo de uma linha ao lado de um de duas)
   deixavam os campos em degrau. Alinhando pelo FIM da célula, os campos ficam
   na mesma linha independentemente do tamanho do rótulo. */
.pub-wrap .form-grid{align-items:end}

/* escolha da unidade */
.uni-grupo{font-family:var(--font-mono);font-size:10px;font-weight:700;color:var(--text-muted);
  letter-spacing:.14em;text-transform:uppercase;margin:14px 0 6px}
.uni-grupo:first-child{margin-top:0}
.uni-op{
  display:flex;align-items:flex-start;gap:10px;border:1px solid var(--border);border-radius:var(--r-md);
  padding:11px 12px;margin-bottom:8px;cursor:pointer;transition:border-color .15s,background .15s;
}
.uni-op:hover{border-color:var(--highlight)}
.uni-op.sel{border-color:var(--highlight);background:var(--highlight-bg)}
.uni-op input{margin-top:3px;accent-color:var(--highlight);flex:0 0 auto}
.uni-op .un{font-weight:600;font-size:13.5px;color:var(--text)}
.uni-op .uc{font-family:var(--font-mono);font-size:10.5px;color:var(--text-muted)}

/* linhas repetíveis (pedidos, DANFEs) */
.rep-linha{display:flex;gap:8px;margin-bottom:8px}
.rep-linha .ctrl{flex:1}
.rep-del{flex:0 0 auto;width:38px;border:1px solid var(--border-strong);border-radius:var(--r-md);
  background:var(--surface);color:var(--text-muted);font-size:16px;line-height:1}
.rep-del:hover{color:var(--danger-text);border-color:var(--danger-text)}

/* caixa do tempo estimado */
.tempo-box{
  border:1px solid var(--border); border-left:3px solid var(--highlight); border-radius:var(--r-md);
  background:var(--surface-2); padding:12px 14px; margin-top:4px;
}
.tempo-box .tv{font-size:20px;font-weight:800;color:var(--text);letter-spacing:-.02em}
.tempo-box .tl{font-family:var(--font-mono);font-size:10px;color:var(--text-muted);letter-spacing:.1em;text-transform:uppercase}
.tempo-box details{margin-top:8px}
.tempo-box summary{font-size:11.5px;color:var(--accent-text);cursor:pointer;font-weight:600}
.tempo-box .memo{font-family:var(--font-mono);font-size:10.5px;color:var(--text-dim);margin-top:6px;line-height:1.7}

/* ===== tira de dias, agrupada por semana =====
   Sete colunas fixas de segunda a domingo: o dia cai sempre embaixo do seu
   dia da semana, então "toda terça" vira uma coluna que se lê de cima a
   baixo. Com auto-fill, a mesma terça mudava de coluna a cada semana. */
.sem-bloco{margin-bottom:14px}
.sem-bloco:last-child{margin-bottom:0}
.sem-tit{font-family:var(--font-mono);font-size:10px;font-weight:700;color:var(--text-muted);
  letter-spacing:.14em;text-transform:uppercase;margin:0 0 6px}
.sem-cab{display:none}
.dias-tira{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.dia-vazio{border-radius:var(--r-md);background:transparent}
.dia-op{
  border:1px solid var(--border);border-radius:var(--r-md);padding:10px 8px;text-align:center;
  background:var(--surface);cursor:pointer;transition:border-color .15s,background .15s;
}
.dia-op:hover:not(:disabled){border-color:var(--highlight)}
.dia-op.sel{border-color:var(--highlight);background:var(--highlight-bg)}
.dia-op:disabled{cursor:default;opacity:.55;background:var(--surface-2)}
.dia-op .dw{font-family:var(--font-mono);font-size:9.5px;color:var(--text-muted);letter-spacing:.1em;text-transform:uppercase}
.dia-op .dd{font-size:17px;font-weight:800;color:var(--text);letter-spacing:-.02em;margin:2px 0}
.dia-op .ds{font-size:9.5px;color:var(--text-muted);line-height:1.25}
.dia-op.sel .ds{color:var(--highlight-text);font-weight:600}

/* mensagens */
.msg-bx{border-radius:var(--r-md);padding:12px 14px;font-size:13px;margin:12px 0}
.msg-bx.err{background:var(--danger-bg);color:var(--danger-text);border:1px solid var(--danger-bg)}
.msg-bx.ok{background:var(--success-bg);color:var(--success-text);border:1px solid var(--success-bg)}
.msg-bx.info{background:var(--info-bg);color:var(--info-text);border:1px solid var(--info-bg)}
.msg-bx.warn{background:var(--warning-bg);color:var(--warning-text);border:1px solid var(--warning-bg)}

/* comprovante */
.comprov{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.comprov-h{background:var(--gpc-navy-500);color:#fff;padding:20px 22px;text-align:center}
.comprov-h .cp-ok{font-size:30px;line-height:1}
.comprov-h h2{font-size:17px;font-weight:800;margin-top:6px}
.comprov-h .cp-sub{font-size:12px;opacity:.85;margin-top:3px}
.comprov-b{padding:20px 22px}
.comprov-proto{text-align:center;margin-bottom:18px}
.comprov-proto .pl{font-family:var(--font-mono);font-size:10px;color:var(--text-muted);letter-spacing:.16em;text-transform:uppercase}
.comprov-proto .pv{font-family:var(--font-mono);font-size:30px;font-weight:700;letter-spacing:.14em;color:var(--gpc-navy-500)}
[data-theme="dark"] .comprov-proto .pv{color:var(--gpc-orange-400)}
.comprov-lin{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-top:1px solid var(--border);font-size:13px}
.comprov-lin .cl{color:var(--text-muted);flex:0 0 auto}
.comprov-lin .cv{font-weight:600;text-align:right;color:var(--text)}

/* ===== PAINEL INTERNO ===== */
/* tira da semana / grade */
.agd-grade{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.agd-dia{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
  display:flex;flex-direction:column;min-height:780px;overflow:hidden;
}
.agd-dia.hoje{border-color:var(--highlight);box-shadow:0 0 0 1px var(--highlight)}
.agd-dia.fechado{background:var(--surface-2)}
.agd-dia.bloqueado{background:var(--danger-bg)}
.agd-dia-h{display:flex;align-items:baseline;justify-content:space-between;gap:6px;padding:8px 10px;border-bottom:1px solid var(--border)}
.agd-dia-h .dw{font-family:var(--font-mono);font-size:9.5px;color:var(--text-muted);letter-spacing:.08em;text-transform:uppercase}
.agd-dia-h .dd{font-size:14px;font-weight:800;color:var(--text)}
.agd-dia-b{padding:6px;display:flex;flex-direction:column;gap:5px;flex:1;overflow-y:auto}
.agd-vazio{color:var(--text-faint);font-size:11px;text-align:center;padding:10px 0}
.agd-card{
  width:100%;text-align:left;background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:7px 8px;font-family:inherit;
}
.agd-card:hover{border-color:var(--highlight)}
.agd-card .ac-f{font-size:11.5px;font-weight:700;color:var(--text);line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.agd-card .ac-m{font-family:var(--font-mono);font-size:9.5px;color:var(--text-muted);margin-top:2px}
.agd-card.frota{background:var(--highlight-bg)}
.agd-fechado-lb{font-family:var(--font-mono);font-size:9px;color:var(--text-faint);
  text-align:center;padding:10px 4px;letter-spacing:.08em;text-transform:uppercase}

/* ===== agenda mensal =====
   O mês responde outra pergunta que a semana: não "o que entra amanhã", mas
   "como está a carga do mês e onde estão os buracos". Por isso a célula é baixa
   e mostra contagem, não cartão — 35 cartões viram um borrão. */
.agd-mes-dws{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-bottom:6px}
.agd-mes-dw{font-family:var(--font-mono);font-size:9.5px;font-weight:700;color:var(--text-muted);
  letter-spacing:.1em;text-transform:uppercase;text-align:center;padding:2px 0}
.agd-mes{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.agd-mes-cel{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
  padding:6px;min-height:230px;display:flex;flex-direction:column;gap:3px;overflow:hidden;
}
.agd-mes-cel.fora{opacity:.45}
.agd-mes-cel.fechado{background:var(--surface-2)}
.agd-mes-cel.bloqueado{background:var(--danger-bg)}
.agd-mes-cel.hoje{border-color:var(--highlight);box-shadow:0 0 0 1px var(--highlight)}
.agd-mes-h{display:flex;align-items:baseline;justify-content:space-between;gap:4px}
.agd-mes-h .dd{font-size:13px;font-weight:800;color:var(--text)}
/* No desktop o dia da semana já está no cabeçalho da coluna; aqui seria eco. */
.agd-mes-dwm{display:none;font-family:var(--font-mono);font-size:9.5px;color:var(--text-muted);
  letter-spacing:.08em;text-transform:uppercase}
.agd-mes-cont{font-family:var(--font-mono);font-size:9px;color:var(--text-muted);white-space:nowrap}
.agd-mes-item{
  display:block;width:100%;text-align:left;font-family:inherit;font-size:10.5px;line-height:1.25;
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:3px 5px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.agd-mes-item:hover{border-color:var(--highlight)}
.agd-mes-item.frota{background:var(--highlight-bg)}
.agd-mes-mais{background:none;border:none;font-family:var(--font-mono);font-size:9.5px;
  color:var(--accent-text);font-weight:700;text-align:left;padding:2px 4px}
.agd-mes-mais:hover{text-decoration:underline}
.agd-mes-bloq{font-family:var(--font-mono);font-size:8.5px;color:var(--danger-text);
  text-transform:uppercase;letter-spacing:.06em;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

@media (max-width:900px){
  /* No celular o mês vira lista de dias: sete colunas de 50px não se leem. */
  .agd-mes-dws{display:none}
  .agd-mes{grid-template-columns:1fr}
  .agd-mes-cel{min-height:0}
  .agd-mes-cel.fora{display:none}
  .agd-mes-dwm{display:inline; margin-right:auto; margin-left:6px}
  .agd-mes-item{font-size:12px; padding:5px 7px}
}

/* barra de navegação da agenda */
.agd-nav{display:flex;align-items:center;gap:6px}
.agd-nav .per{font-family:var(--font-mono);font-size:12px;color:var(--text-dim);min-width:118px;text-align:center}

/* modal */
.agd-scrim{position:fixed;inset:0;background:rgba(10,14,22,.55);z-index:150;display:flex;
  align-items:center;justify-content:center;padding:16px}
.agd-modal{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-lg);
  width:100%;max-width:560px;max-height:90vh;display:flex;flex-direction:column}
.agd-modal-h{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 18px;border-bottom:1px solid var(--border)}
.agd-modal-h b{font-size:14px;color:var(--text)}
.agd-modal-b{padding:18px;overflow:auto}
.agd-modal-f{display:flex;align-items:center;gap:8px;padding:12px 18px;border-top:1px solid var(--border);flex-wrap:wrap}

/* ===== PÁTIO =====
   Tela usada em pé, no celular, com o caminhão na frente. Alvos grandes,
   nada de filtro, nada de menu. */
.pat-lista{display:flex;flex-direction:column;gap:10px}
.pat-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:14px 16px;box-shadow:var(--sh-xs)}
.pat-item.aguarda{border-left:4px solid var(--text-faint)}
.pat-item.napista{border-left:4px solid var(--info)}
.pat-item.pronto{border-left:4px solid var(--success);opacity:.75}
.pat-item.fora{border-left:4px solid var(--danger);opacity:.6}
.pat-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pat-pos{font-family:var(--font-mono);font-size:22px;font-weight:700;color:var(--text-faint);
  line-height:1;min-width:34px}
.pat-nome{font-size:15px;font-weight:700;color:var(--text);line-height:1.2}
.pat-sub{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);margin-top:3px}
.pat-tempos{font-family:var(--font-mono);font-size:11px;color:var(--text-dim);margin-top:8px}
.pat-tempos b{color:var(--text)}
.pat-acoes{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
/* Alvo de toque de 48px: esta tela é usada em pé, no portão, com o caminhão na
   frente e às vezes com luva. Botão de 28px ali é botão que erra. */
.pat-acoes .btn,
.pat-acoes .btn-sm{flex:1;min-width:120px;min-height:48px;padding:12px 10px;font-size:13.5px;font-weight:700}
.pat-vazio{text-align:center;color:var(--text-muted);padding:30px 10px;font-size:14px}

/* ===== composição do relatório (barra clicável) ===== */
.comp-l{display:flex;align-items:center;gap:10px;width:100%;background:none;border:none;
  padding:7px 6px;border-radius:var(--r-sm);font-family:inherit;text-align:left;cursor:pointer}
.comp-l:hover{background:var(--surface-2)}
.comp-l.on{background:var(--highlight-bg)}
.comp-l .cl-n{flex:0 0 34%;font-size:12.5px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.comp-l .cl-b{flex:1;height:8px;background:var(--surface-3);border-radius:var(--r-full);overflow:hidden}
.comp-l .cl-b span{display:block;height:100%;background:var(--accent);border-radius:var(--r-full)}
.comp-l.on .cl-b span{background:var(--highlight)}
.comp-l .cl-v{flex:0 0 auto;font-size:11px;color:var(--text-muted)}

/* detalhe do agendamento */
.det-lin{display:flex;justify-content:space-between;gap:14px;padding:7px 0;border-top:1px solid var(--border);font-size:13px}
.det-lin:first-child{border-top:none}
.det-lin .dl{color:var(--text-muted)}
.det-lin .dv{font-weight:600;text-align:right}

@media (max-width:900px){
  .agd-grade{grid-template-columns:1fr}
  .agd-dia{min-height:0}
}
/* ===== DESKTOP: o portal deixa de ser uma coluna estreita =====
   Mobile-first continua sendo a regra — o fornecedor agenda do celular. Mas
   numa tela de 1280px a coluna de 720px desperdiçava metade do monitor e
   empurrava o formulário para baixo. A partir de 900px o passo vira duas
   colunas: número e título à esquerda (fixos, acompanham a rolagem) e os
   campos à direita. */
@media (min-width:900px){
  .pub-wrap, .pub-foot{max-width:1060px}
  .pub-wrap{padding:26px 24px 70px}

  .pass{display:grid; grid-template-columns:210px 1fr; align-items:start}
  .pass-h{
    padding:22px 0 22px 22px; align-items:flex-start;
    position:sticky; top:16px;
  }
  .pass-h h2{font-size:16px; line-height:1.25}
  .pass-b{padding:22px 24px 24px 20px; border-left:1px solid var(--border)}

  /* três colunas nos campos curtos: menos rolagem e nenhuma sobra lateral */
  .pub-wrap .form-grid{grid-template-columns:repeat(3,1fr); gap:16px 18px}
  .pub-wrap .form-grid .field.span-2{grid-column:span 2}
  .pub-wrap .form-grid .field.span-3{grid-column:1 / -1}

  .uni-op{margin-bottom:6px}
  .comprov{max-width:640px; margin:0 auto}
}

@media (max-width:560px){
  .pub-wrap{padding:16px 12px 50px}
  .pass-b{padding:0 14px 16px}
  .pass-h{padding:14px 14px 10px}
  /* no celular a grade de 7 colunas fica ilegível: volta a fluir */
  .dias-tira{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}
  .dia-vazio{display:none}
  /* formulários em uma coluna: duas colunas a 375px espremem o rótulo e o
     campo a ponto de o CNPJ não caber inteiro na tela */
  .form-grid, .form-grid.cols-3{grid-template-columns:1fr}
  .field.span-2{grid-column:auto}
  .agd-modal{max-height:94vh}
  /* as páginas públicas são usadas SÓ no celular: alvo de toque de 46px */
  .comprov .btn, .pub-wrap .btn{min-height:46px}
}

/* ===== SEMÁFORO DE APROVAÇÃO =====
   Verde aprovado, amarelo pendente, vermelho recusado. A cor mora na borda
   esquerda porque é onde o olho passa ao varrer uma coluna de cima a baixo —
   a etiqueta só se lê parando em cada cartão. */
.agd-card.st-ok,   .agd-mes-item.st-ok,   .busca-item.st-ok  {border-left:4px solid var(--success)}
.agd-card.st-pend, .agd-mes-item.st-pend, .busca-item.st-pend{border-left:4px solid var(--warning)}
.agd-card.st-rec,  .agd-mes-item.st-rec,  .busca-item.st-rec {border-left:4px solid var(--danger)}
.agd-card.st-pend{background:var(--warning-bg)}
.agd-card.st-rec{opacity:.62}
.agd-mes-item.st-rec{opacity:.62}
.agd-mes-pend{font-family:var(--font-mono);font-size:9px;font-weight:700;
  color:var(--warning-text);background:var(--warning-bg);border-radius:var(--r-sm);
  padding:2px 5px;letter-spacing:.04em;white-space:nowrap}

/* ===== PAINEL DE PENDÊNCIAS ===== */
.pend-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;
  padding:0 5px;border-radius:var(--r-full);background:var(--danger);color:#fff;
  font-family:var(--font-mono);font-size:10px;font-weight:700;margin-left:5px}
.btn.btn-alerta{border-color:var(--warning);color:var(--warning-text);background:var(--warning-bg)}
.btn.btn-recusar{border-color:var(--danger);color:var(--danger-text)}
.btn.btn-recusar:hover{background:var(--danger-bg)}

.pend-grupo{margin-bottom:26px}
.pend-grupo h3{font-size:14px;font-weight:800;color:var(--text);margin:0 0 4px}
/* Uma coluna no celular, duas no desktop: o cartão tem seis linhas de texto e
   três botões — espremer em três colunas quebra a leitura e os alvos. */
.pend-lista{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:900px){ .pend-lista{grid-template-columns:repeat(2,minmax(0,1fr))} }

.pend-card{background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--warning);
  border-radius:var(--r-md);padding:12px 14px}
.pend-card.atencao{border-left-color:var(--warning);background:var(--warning-bg)}
.pend-card.urg{border-left-color:var(--danger);background:var(--danger-bg)}
.pend-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:6px}
.pend-forn{font-size:13.5px;font-weight:800;color:var(--text);line-height:1.25}
.pend-lin{font-size:12px;color:var(--text-dim);line-height:1.5}
.pend-lin.muted{color:var(--text-muted);font-size:11.5px}
.pend-urg{font-family:var(--font-mono);font-size:9.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--danger-text)}
.pend-esp{font-family:var(--font-mono);font-size:10px;color:var(--text-muted);margin-top:6px}
.pend-acoes{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}

/* ===== VERSÃO E RELÓGIO DE ATUALIZAÇÃO ===== */
.ver-chip{display:inline-flex;align-items:center;gap:7px;padding:3px 4px 3px 10px;
  border:1px solid var(--border);border-radius:var(--r-full);background:var(--surface-2)}
.ver-chip .vc-v{font-family:var(--font-mono);font-size:10px;font-weight:700;color:var(--text-dim);letter-spacing:.04em}
.ver-chip .vc-t{font-family:var(--font-mono);font-size:10px;color:var(--text-muted);min-width:34px;text-align:center}
/* Enquanto não há o que instalar o distintivo é só o número, discreto. Ele só
   ganha cor quando existe uma versão nova esperando — aviso que acende sempre
   é aviso que ninguém vê. */
.ver-chip.nova{border-color:var(--warning);background:var(--warning-bg)}
.ver-chip.nova .vc-v,.ver-chip.nova .vc-t{color:var(--warning-text)}
.ver-chip.nova .vc-t{min-width:0}
.ver-chip .btn{padding:2px 9px;font-size:10.5px}

/* ===== BUSCA ===== */
.busca-lista{display:flex;flex-direction:column;gap:6px;max-height:46vh;overflow-y:auto}
.busca-item{width:100%;text-align:left;font-family:inherit;background:var(--surface-2);
  border:1px solid var(--border);border-radius:var(--r-sm);padding:8px 10px}
.busca-item:hover{border-color:var(--highlight)}
.busca-item .bi-t{font-size:12.5px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.busca-item .bi-s{font-size:11px;color:var(--text-muted);margin-top:3px}

/* ===== LISTA DE MARCAÇÃO (escopo por unidade) ===== */
.chk-lista{display:flex;flex-direction:column;gap:8px}
.chk{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text);cursor:pointer}
.chk input{width:16px;height:16px;flex:0 0 auto}

/* Comprovante do portal quando o pedido ainda espera aprovação. */
.comprov-h.pend .cp-ok{color:var(--warning-text)}

@media (max-width:900px){
  /* No celular a coluna do dia não tem sete vizinhas disputando espaço: ela
     cresce com o conteúdo em vez de reservar dez linhas que podem não existir. */
  .agd-dia{min-height:0}
  /* A versão continua visível no celular — é ela que responde "você está na
     versão nova?" quando alguém liga reclamando. Só encolhe. */
  .ver-chip{padding:2px 3px 2px 7px;gap:4px}
  .ver-chip .vc-v{font-size:9px}
  .ver-chip .vc-t{font-size:9px;min-width:28px}
  .ver-chip .btn{padding:2px 7px;font-size:9.5px}
  /* Confirmar e recusar são decisões: no celular precisam de alvo de dedo. */
  .pend-acoes .btn{min-height:38px;padding-left:14px;padding-right:14px;flex:1 1 auto}
  .pend-acoes{gap:8px}
}

/* ===== CORREÇÕES DE LAYOUT =====
   O app.css só veste o campo quando ele está dentro de .field — e as telas que
   montam HTML por string nem sempre têm o embrulho. O resultado era um textarea
   com a largura padrão do navegador (aquelas vinte colunas) no meio de um
   cartão largo. A regra abaixo veste o .ctrl onde quer que ele esteja. */
.ctrl{
  width:100%;font-family:inherit;font-size:13px;padding:9px 11px;
  border:1px solid var(--border-strong);border-radius:var(--r-md);
  background:var(--surface);color:var(--text);
}
textarea.ctrl{resize:vertical;min-height:120px;line-height:1.5}
/* Campo dentro de linha flexível não pode esticar para 100% e furar a linha. */
.rep-linha .ctrl{width:auto}

/* A tabela do relatório vinha com uma classe que não existe no design system
   (.tbl); ficava sem cabeçalho, sem zebra e sem alinhamento numérico. */