:root {
  /* identidade do site agroguarise.com */
  --fundo: #f5f3ec;
  --cartao: #ffffff;
  --texto: #1c2a1a;
  --suave: #5b6657;
  --borda: #dfdccf;
  --marca: #184a13;
  --marca-texto: #ffffff;
  --marca-claro: #e3ecd6;
  --topo: #184a13;
  --topo-texto: #ffffff;
  --alerta: #9a5b00;
  --alerta-fundo: #fff4e0;
  --erro: #b3261e;
  --erro-fundo: #fdecea;
  --ok-fundo: #e6f4ea;
  --academy: #2b4c9b;
  --academy-fundo: #e7edfa;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fundo: #121614; --cartao: #1b211d; --texto: #e6ebe7; --suave: #a3ada6; --borda: #2f3832;
    --marca: #7cc06a; --marca-texto: #0d1a10; --marca-claro: #22352a; --topo: #0f2e0c; --topo-texto: #e6ebe7;
    --alerta: #f0b04a; --alerta-fundo: #33280f; --erro: #ff8a80; --erro-fundo: #3a1d1b; --ok-fundo: #1c3324;
    --academy: #9db6f2; --academy-fundo: #1c2540;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fundo: #121614; --cartao: #1b211d; --texto: #e6ebe7; --suave: #a3ada6; --borda: #2f3832;
  --marca: #7cc06a; --marca-texto: #0d1a10; --marca-claro: #22352a; --topo: #0f2e0c; --topo-texto: #e6ebe7;
  --alerta: #f0b04a; --alerta-fundo: #33280f; --erro: #ff8a80; --erro-fundo: #3a1d1b; --ok-fundo: #1c3324;
  --academy: #9db6f2; --academy-fundo: #1c2540;
  color-scheme: dark;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--marca); }
h1 { font-size: 1.45rem; margin: .4em 0; }
h2 { font-size: 1.15rem; margin: 1.4em 0 .5em; }
h3 { font-size: 1rem; margin: 0; }
small { display: block; color: var(--suave); font-size: .82rem; }

.barra-topo { position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  padding: .6rem 16px; background: var(--topo); color: var(--topo-texto); }
.marca { display: flex; align-items: center; gap: .6rem; font-weight: 700; font-size: 1.1rem; letter-spacing: .01em; text-decoration: none; color: var(--topo-texto); }
.marca small { display: block; color: inherit; opacity: .8; font-weight: 500; font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; }
.marca img { border-radius: 8px; box-shadow: 0 0 0 1px rgb(255 255 255 / .25); }
#menu a, #menu .link { color: var(--topo-texto); }
#menu a:hover { background: rgb(255 255 255 / .12); }
#menu a.ativo { background: var(--topo-texto); color: var(--topo); }
#menu { display: flex; flex-wrap: wrap; gap: .25rem; margin-left: auto; align-items: center; }
.filtros a, #menu a { padding: .35rem .7rem; border-radius: 999px; text-decoration: none; }
.filtros a { color: var(--texto); }
.filtros a.ativo { background: var(--marca-claro); color: var(--marca); font-weight: 600; }

main { max-width: 1040px; margin: 0 auto; padding: 12px 16px 80px; }
.carregando, .vazio { color: var(--suave); }

.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px; padding: 14px 16px; margin: 12px 0; display: block; color: inherit; }
a.cartao { text-decoration: none; }
a.cartao:hover { border-color: var(--marca); }
.cartao.erro { border-color: var(--erro); }
.login { max-width: 380px; margin: 40px auto; }
.topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.lista { display: grid; gap: 10px; }
.item { display: grid; gap: .3rem; }
.item span { color: var(--suave); font-size: .92rem; }
.concluido { opacity: .7; }

[hidden] { display: none !important; }
label { display: grid; gap: .25rem; margin: .5rem 0; font-size: .92rem; color: var(--suave); }
input, select, button, .botao { font: inherit; }
input, select { padding: .6rem .7rem; border: 1px solid var(--borda); border-radius: 8px; background: var(--fundo); color: var(--texto); min-width: 0; width: 100%; }
input[type=checkbox], input[type=radio] { width: 1.25rem; height: 1.25rem; accent-color: var(--marca); }
.linha { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; }
.linha > label, .linha > input, .linha > select { flex: 1 1 160px; }

button, .botao { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .6rem 1rem; min-height: 44px;
  border: 1px solid var(--borda); border-radius: 8px; background: var(--cartao); color: var(--texto); cursor: pointer; text-decoration: none; }
button:disabled { opacity: .5; cursor: not-allowed; }
.primario { background: var(--marca); border-color: var(--marca); color: var(--marca-texto); font-weight: 600; }
.perigo { color: var(--erro); border-color: var(--erro); }
.link { background: none; border: 0; padding: 0; min-height: 0; color: var(--marca); text-decoration: underline; }
.acoes { display: flex; flex-wrap: wrap; gap: .6rem; margin: 18px 0; }
.acoes button { flex: 1 1 220px; }

.semana { display: flex; align-items: center; gap: .6rem; margin: .5rem 0; }
.filtros { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .5rem; }

.tabela { overflow-x: auto; border: 1px solid var(--borda); border-radius: 10px; background: var(--cartao); }
table { width: 100%; border-collapse: collapse; font-size: .93rem; }
th, td { padding: .5rem .6rem; text-align: left; border-bottom: 1px solid var(--borda); vertical-align: top; }
th { color: var(--suave); font-weight: 600; font-size: .82rem; }
.n { text-align: right; white-space: nowrap; }
td input.qtd { width: 5.5rem; text-align: right; padding: .4rem; }
td input.semana { width: 4rem; text-align: center; padding: .4rem; margin-top: .3rem; display: block; margin-left: auto; }
.semana-diferente { color: #9a5b00; font-weight: 700; }
table.itens { margin: .5rem 0; }
table.resumo-carga { width: 100%; margin: .5rem 0; border-collapse: collapse; }
table.resumo-carga th, table.resumo-carga td { padding: .4rem .2rem; border-bottom: 1px solid var(--borda); text-align: left; vertical-align: top; }
table.resumo-carga .n { text-align: right; }
table.resumo-carga small { display: block; color: var(--suave); }
details.passar summary { cursor: pointer; color: var(--marca); font-weight: 600; padding: .3rem 0; }
.lotes { margin: .4rem 0 0; padding-left: 1rem; }
.lotes .cancelado { text-decoration: line-through; color: var(--suave); }
tr.concluido td { color: var(--suave); }

.numeros { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: .6rem 0; }
.numeros div { min-width: 80px; }
.numeros dt { font-size: .8rem; color: var(--suave); }
.numeros dd { margin: 0; font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.barra { height: 8px; background: var(--borda); border-radius: 99px; overflow: hidden; margin: .4rem 0; }
.barra span { display: block; height: 100%; background: var(--marca); }
.barra-cheia span { background: var(--alerta); }
.barra-estouro span { background: var(--erro); }
.ocupacao { position: sticky; top: 56px; z-index: 5; background: var(--cartao); padding: .5rem 0; }

.selo { display: inline-block; padding: .15rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 600; background: var(--marca-claro); color: var(--marca); white-space: nowrap; }
.selo-montada, .selo-carregada, .selo-pendente, .selo-parcial { background: var(--alerta-fundo); color: var(--alerta); }
.selo-cli-aguardando { background: rgba(138,143,135,.25); color: var(--suave); box-shadow: inset 0 0 0 1px rgba(138,143,135,.35); }
.selo-cli-carregando { background: rgba(242,194,0,.25); color: #7a5a00; box-shadow: inset 0 0 0 1px rgba(242,194,0,.45); }
.selo-cli-carregada { background: rgba(46,139,42,.25); color: var(--marca); box-shadow: inset 0 0 0 1px rgba(46,139,42,.35); }
.cartao.caminhao h1 { margin: 0; }
.cartao.caminhao .espaco { margin: .4rem 0; font-size: 1.05rem; }
.cartao.caminhao .livres { margin: .3rem 0 0; font-size: .85rem; color: var(--suave); }
.cartao.caminhao .espaco strong { font-size: 1.6rem; color: var(--marca); }
.cliente-carga .selo { justify-self: start; }
@media (min-width: 1000px) {
  .colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
  .colunas #separar { margin-top: 0; }
  .colunas > section > h2:first-child { margin-top: 0; }
}
.selo-cancelada, .selo-nao_entregue { background: var(--erro-fundo); color: var(--erro); }
.selo-atribuicao-aguardando_aceite { background: var(--alerta-fundo); color: var(--alerta); }
.selo-atribuicao-recusada, .selo-atribuicao-cancelada { background: var(--erro-fundo); color: var(--suave); }

.conferencia, .instrucao, .fila, .registro { padding: .7rem .9rem; border-radius: 8px; margin: .6rem 0; }
.conferencia.ok, .fila.ok { background: var(--ok-fundo); }
.conferencia.falha { background: var(--erro-fundo); color: var(--erro); }
.instrucao, .fila.pendente { background: var(--alerta-fundo); }
.registro { background: var(--marca-claro); font-size: .9rem; }
.alertas { padding-left: 1.1rem; }
.alertas li { margin: .3rem 0; }

fieldset { border: 1px solid var(--borda); border-radius: 10px; padding: .4rem .8rem; margin: .6rem 0; }
legend { padding: 0 .3rem; color: var(--suave); font-size: .9rem; }
.setores { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; }
.opcao { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: .4rem; min-height: 36px; margin: 0; color: var(--texto); font-size: .95rem; }
.permissoes { display: flex; flex-wrap: wrap; gap: .1rem 1rem; }
.escolha { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .6rem; color: var(--texto); padding: .45rem 0; border-bottom: 1px solid var(--borda); margin: 0; font-size: 1rem; }
.escolha:last-child { border-bottom: 0; }
.ordem-carga { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.arrastavel { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: .7rem; padding: .6rem .7rem; margin: 0; }
.arrastavel small { display: block; color: var(--suave); font-size: .8rem; }
.arrastavel .alca { font-size: 1.4rem; cursor: grab; touch-action: none; padding: .4rem .2rem; user-select: none; }
.arrastavel .posicao { font-size: .85rem; color: var(--suave); min-width: 5.5rem; }
.arrastavel .posicao strong { font-size: 1.05rem; color: var(--marca); }
.arrastavel .setas { display: flex; gap: 4px; }
.arrastavel .setas button { min-width: 44px; min-height: 44px; padding: 0; font-size: 1.1rem; }
.arrastando { opacity: .6; outline: 2px dashed var(--marca); }
@media (max-width: 420px) {
  .arrastavel { grid-template-columns: auto 1fr auto; }
  .arrastavel .posicao { grid-column: 2; }
  .arrastavel .nome { grid-column: 1 / -1; grid-row: 2; }
  .arrastavel .setas { grid-column: 3; grid-row: 1; }
}
.escolha input:disabled + span { color: var(--suave); }
.opcoes label { display: flex; align-items: center; gap: .5rem; color: var(--texto); font-size: 1rem; }
.foto { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: .8rem 0; }
.foto .botao { margin: 0; color: var(--texto); font-size: 1rem; }

.mapa { isolation: isolate; height: 360px; border-radius: 12px; border: 1px solid var(--borda); margin: 12px 0; }
.mapa .vazio { padding: 1rem; }

.aviso { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 50; max-width: 520px; margin: 0 auto; padding: .8rem 1rem; border-radius: 10px;
  background: var(--texto); color: var(--fundo); box-shadow: 0 4px 16px rgba(0,0,0,.2); }
.aviso-erro { background: var(--erro); color: #fff; }
.dica { color: var(--suave); font-size: .88rem; }
details summary { cursor: pointer; }

@media (max-width: 640px) {
  .barra-topo { padding: .5rem 16px; }
  #menu { margin-left: 0; width: 100%; }
  h1 { font-size: 1.25rem; }
  th, td { padding: .45rem .35rem; }
  td input.qtd { width: 3.4rem; padding: .35rem .3rem; }
  td input.semana { width: 3.4rem; padding: .35rem .3rem; }
  .cartao { padding: 12px; }
  table.itens { font-size: .82rem; table-layout: fixed; }
  table.itens th, table.itens td { padding: .4rem .2rem; overflow-wrap: anywhere; }
  table.itens th:first-child, table.itens td:first-child { display: none; }
  table.itens th.n { width: 3.4rem; }
  .so-celular { display: block !important; }
  .so-pc { display: none !important; }
  table.resumo-carga { font-size: .85rem; table-layout: fixed; width: 100%; }
  table.resumo-carga th.n { width: 3.3rem; }
  table.resumo-carga td { overflow-wrap: anywhere; }
  .tabela { border: 0; background: none; overflow: visible; }
  .tabela table, .tabela tbody, .tabela tr { display: block; }
  .tabela thead { display: none; }
  .tabela tr { background: var(--cartao); border: 1px solid var(--borda); border-radius: 10px; padding: .4rem .7rem; margin-bottom: 8px; }
  .tabela td { display: grid; grid-template-columns: 6.5rem 1fr; gap: .5rem; align-items: center; border: 0; padding: .3rem 0; text-align: left; }
  .tabela td::before { content: attr(data-rotulo); color: var(--suave); font-size: .8rem; }
  .tabela tr.linha-editar td { display: block; }
  .tabela tr.linha-editar td::before { content: none; display: none; }
  .tabela td[data-rotulo=""] { grid-template-columns: 1fr; }
  .tabela td[data-rotulo=""]::before { display: none; }
  .tabela td.n { text-align: left; }
}

.aviso-atividades { background: var(--alerta-fundo); border-color: var(--alerta); }
.atribuicao .linha:empty { display: none; }
.fixo { position: sticky; bottom: 12px; z-index: 4; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.so-celular { display: none; }
.faturado { color: var(--marca); font-weight: 600; }
.documento-lote.doc-erro { border-color: #b3261e; background: #fbeceb; }
.documento-lote.doc-aviso { border-color: var(--alerta); background: var(--alerta-fundo); }
.documento-lote.doc-ok { border-color: var(--marca); }
.documento-lote .linha { margin: 0; align-items: center; }
.faltam { color: var(--alerta); font-weight: 600; }
.cartao.alerta { border-left: 4px solid var(--alerta); }
.cartao.alerta.resolvido { border-left-color: var(--marca); opacity: .85; }
.carregado { color: var(--marca); font-weight: 600; }
tr.conferido td { background: var(--marca-claro); }
.ok-item { min-width: 48px; min-height: 40px; padding: .3rem .5rem; font-weight: 700; }
.ok-item.feito { background: var(--marca); color: #fff; border-color: var(--marca); }

/* Diretoria: escolher a tela de um setor */
#visao { background: var(--cartao); border-bottom: 1px solid var(--borda); padding: .6rem 16px; }
#visao label { display: flex; align-items: center; gap: .6rem; font-weight: 600; flex-wrap: wrap; }
#visao select { flex: 1; min-width: 12rem; max-width: 20rem; }
#visao p { margin: .3rem 0 0; color: var(--alerta); font-size: .9rem; }
body.vendo-setor #visao { background: var(--alerta-fundo); }
@media (min-width: 1000px) {
  body.com-visao main { margin-left: max(248px, calc((100% - 1040px) / 2)); }
  #visao { position: fixed; left: 16px; top: 96px; width: 200px; z-index: 5; border: 1px solid var(--borda); border-radius: 12px; padding: .8rem; }
  #visao label { display: grid; gap: .4rem; }
  #visao select { max-width: none; min-width: 0; }
}

/* Academy: treinamento com dados fictícios */
.aviso-academy { background: var(--academy-fundo); border-color: var(--academy); }
.aviso-academy a { color: var(--academy); font-weight: 600; }
.selo.selo-academy-liberado { background: var(--marca-claro); color: var(--marca); }
.selo.selo-academy-aprovado { background: var(--academy-fundo); color: var(--academy); }
.selo.selo-academy-treino { background: var(--alerta-fundo); color: var(--alerta); }
.selo.selo-academy-defasado { background: var(--alerta-fundo); color: var(--alerta); }
.aviso-defasado { background: var(--alerta-fundo); border-color: var(--alerta); }
.aviso-defasado p { margin: 0 0 .5rem; }
.aviso-defasado .acoes { display: flex; flex-wrap: wrap; gap: .5rem; }
.aviso-defasado .acoes > * { flex: 0 0 auto; width: auto; }
.novidades-academy { background: var(--alerta-fundo); border-left: 4px solid var(--alerta); border-radius: 8px; padding: .5rem .8rem; margin: .5rem 0; }
.novidades-academy ul { margin: .3rem 0; padding-left: 1.1rem; }
.filtros-academy { display: flex; flex-wrap: wrap; gap: .4rem; margin: .8rem 0; }
.filtros-academy button { min-height: 36px; padding: .3rem .8rem; border-radius: 999px; }
.filtros-academy button.ativo { background: var(--academy); border-color: var(--academy); color: #fff; }
.academy-equipe td small { display: block; color: var(--suave); }
.acoes-linha { display: flex; gap: .4rem; flex-wrap: wrap; }
.selo.selo-academy-experimentar { background: #ecebe4; color: var(--suave); }
.academy-setor h2 { margin: 0; }
.etapas { list-style: none; padding: 0; margin: .8rem 0 0; display: grid; gap: 8px; }
.etapas li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .8rem; padding: .7rem .8rem; border: 1px solid var(--borda); border-radius: 10px; }
.etapas li.feito { background: var(--ok-fundo); }
.etapas li.feito strong::after { content: ' ✓'; color: var(--marca); }
.etapas button { min-width: 150px; }
@media (max-width: 520px) { .etapas li { grid-template-columns: 1fr; } .etapas button { width: 100%; } }
body.modo-academy .barra-topo { background: var(--academy); }
#academy-faixa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .8rem;
  padding: .5rem 16px; color: var(--academy); font-size: .9rem;
  background: repeating-linear-gradient(135deg, var(--academy-fundo) 0 14px, var(--cartao) 14px 28px); border-bottom: 2px solid var(--academy); }
#academy-faixa button { min-height: 36px; padding: .3rem .8rem; }
#academy-tarefas { position: fixed; z-index: 20; background: var(--cartao); border: 2px solid var(--academy); box-shadow: 0 6px 24px rgba(0,0,0,.18); }
#academy-tarefas h2 { margin: 0 0 .3rem; color: var(--academy); }
.tarefas-alca { display: none; }
.tarefas { list-style: none; padding: 0; margin: .5rem 0; display: grid; gap: 8px; counter-reset: t; }
.tarefas li { display: grid; grid-template-columns: auto 1fr; gap: .6rem; padding: .55rem .6rem; border: 1px solid var(--borda); border-radius: 8px; font-size: .92rem; }
.tarefas li.certo { background: var(--ok-fundo); border-color: var(--marca); }
.tarefas li.meio { background: var(--alerta-fundo); }
.tarefas li.errado { background: var(--erro-fundo); }
.tarefas small { margin-top: .25rem; }
.marca-tarefa { font-weight: 700; color: var(--academy); width: 1.2rem; text-align: center; }
.tarefas li.certo .marca-tarefa { color: var(--marca); }
.materiais { display: flex; flex-wrap: wrap; gap: .4rem; }
.materiais button { flex: 1 1 auto; min-height: 40px; color: var(--academy); border-color: var(--academy); }
@media (min-width: 1000px) {
  body.modo-academy main { margin-right: 360px; }
  #academy-tarefas { right: 16px; top: 120px; bottom: 16px; width: 330px; border-radius: 12px; padding: 14px; overflow-y: auto; }
}
@media (max-width: 999px) {
  #academy-tarefas { left: 0; right: 0; bottom: 0; border-radius: 14px 14px 0 0; border-bottom: 0; max-height: 75vh; overflow-y: auto; }
  .tarefas-alca { display: block; width: 100%; border: 0; border-radius: 14px 14px 0 0; background: var(--academy); color: #fff; font-weight: 700; min-height: 46px; }
  .tarefas-alca::after { content: ' ▲'; }
  #academy-tarefas.aberto .tarefas-alca::after { content: ' ▼'; }
  .tarefas-corpo { display: none; padding: 12px 16px 16px; }
  #academy-tarefas.aberto .tarefas-corpo { display: block; }
  body.modo-academy main { padding-bottom: 120px; }
  body.modo-academy .fixo { bottom: 58px; }
}
.modal-fundo { position: fixed; inset: 0; z-index: 40; background: rgb(0 0 0 / .5); display: grid; place-items: center; padding: 16px; overflow-y: auto; }
.modal { width: min(560px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; margin: 0; }
.resultado-academy { text-align: center; }
.resultado-academy .tarefas { text-align: left; }
.nota-grande { font-size: 3.4rem; font-weight: 800; margin: .2rem 0 0; color: var(--alerta); line-height: 1; }
.resultado-academy.aprovado .nota-grande { color: var(--marca); }
.historico-academy { padding-left: 1rem; }
.historico-academy > li { margin: .6rem 0; }
.historico-academy ul { list-style: none; padding-left: .4rem; font-size: .88rem; }
.historico-academy .certo { color: var(--marca); }
.historico-academy .meio { color: var(--alerta); }
.historico-academy .errado { color: var(--erro); }
#minimas label { flex: 1 1 130px; }

/* Tour das telas */
.tour { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.tour-foco { position: fixed; border-radius: 10px; box-shadow: 0 0 0 9999px rgb(0 0 0 / .55); outline: 3px solid #ffd54a; transition: all .2s ease; }
.tour-balao { position: fixed; pointer-events: auto; background: var(--cartao); color: var(--texto); border-radius: 12px; padding: 14px 16px;
  box-shadow: 0 8px 28px rgba(0,0,0,.3); border: 2px solid #ffd54a; max-width: calc(100vw - 24px); }
.tour-balao p { margin: 0 0 .6rem; }
.tour-passo { font-size: .78rem; color: var(--suave); text-transform: uppercase; letter-spacing: .04em; }
.tour-balao .linha { justify-content: flex-end; align-items: center; }
.tour-balao .link { margin-right: auto; }
.botao-tour { position: fixed; right: 16px; bottom: 16px; z-index: 8; border-radius: 999px; min-height: 40px; padding: .4rem .9rem;
  background: var(--cartao); color: var(--marca); border: 1px solid var(--marca); box-shadow: 0 2px 10px rgba(0,0,0,.15); font-size: .9rem; }
body.modo-academy .botao-tour { display: none; }
/* Entrega no cliente em passos */
.cliente-entrega h1 { margin: 0 0 .3rem; }
.cliente-entrega p { margin: .2rem 0; }
.cliente-entrega .botao { margin-top: .6rem; }
.botao.dirigir { background: var(--marca); color: var(--marca-texto); border-color: var(--marca); font-weight: 600; }
.botao.dirigir.secundario { background: transparent; color: var(--marca); }
.cliente-entrega .botao.dirigir { display: flex; width: 100%; }
.botao .icone { flex: none; }
.area { margin-top: .8rem; }
.area.ok { color: var(--marca); font-weight: 600; }
.area.longe { padding: .8rem; border-radius: 8px; background: var(--alerta-fundo); border: 1px solid var(--borda); }
.area.longe p { margin: 0 0 .6rem; }
.area.longe label { display: block; margin-bottom: .6rem; }
.passo h2 { display: flex; align-items: center; gap: .5rem; font-size: 1.1rem; margin: 0 0 .4rem; }
.num-passo { display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--marca); color: #fff; font-size: .95rem; }
.itens-entrega { list-style: none; margin: .4rem 0 .8rem; padding: 0; }
.itens-entrega li { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: .3rem .6rem; padding: .6rem 0; border-bottom: 1px solid var(--borda); }
.itens-entrega li.ajustado { background: var(--alerta-fundo); }
.ok-entrega { display: flex; align-items: center; gap: .6rem; color: var(--texto); font-size: 1rem; }
.ok-entrega input { width: 1.6rem; height: 1.6rem; flex: none; }
.ok-entrega small, .qtd-entrega small { display: block; color: var(--suave, #666); font-size: .82rem; font-weight: 400; }
.qtd-entrega { text-align: right; }
.lapis { min-width: 44px; min-height: 44px; padding: 0; background: none; border: 1px solid var(--borda); }
.itens-entrega input.qtd { grid-column: 1 / -1; max-width: 10rem; justify-self: end; }
.camera { display: block; text-align: center; font-size: 1.05rem; padding: .9rem; margin: .4rem 0; color: var(--texto); }
.contador { display: block; margin: .2rem 0 .6rem; color: var(--marca); font-weight: 600; }
.nao-recebeu { margin-top: .8rem; }
.saldo-bandejas { margin: .4rem 0; }
.saldo-bandejas summary { padding: .3rem 0; }
table.historico-bandejas { margin: .3rem 0; max-width: 26rem; }
#finalizar.finalizar { width: 100%; padding: .9rem; font-size: 1.05rem; margin: .4rem 0 1.5rem; }

/* Outras propriedades do cliente */
.propriedades { list-style: none; margin: 0; padding: 0; }
.propriedades li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; padding: .6rem 0; border-bottom: 1px solid var(--borda); }
.propriedades li small { display: block; color: var(--suave); }
.propriedades li.recusada { opacity: .6; }
.propriedades li.sugerida { background: var(--alerta-fundo); padding: .6rem; border-radius: 6px; }

/* Mapa da rota da viagem */
.roteiro h2 { margin: 0 0 .4rem; font-size: 1.1rem; }
.roteiro .botao.dirigir { display: flex; width: 100%; }
.pino-parada { text-align: center; line-height: 26px; font-size: 14px; border-radius: 50%; background: var(--marca); color: var(--marca-texto); font-weight: 700; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.pino-parada.feito { background: #8a948c; }
.parada { display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; margin-right: .3rem; border-radius: 50%; background: var(--marca); color: var(--marca-texto); font-size: .9rem; }
.concluido .parada { background: #8a948c; }

/* Trazer para a expedição: total, carregado e disponível por produto */
.resumo-carga tr.completo td { color: var(--suave); }
.resumo-carga td.disponivel { font-weight: 700; color: var(--marca); }
.resumo-carga tr.completo td.disponivel { color: var(--suave); font-weight: 400; }
.resumo-carga tfoot td { font-weight: 700; border-top: 2px solid var(--borda); }

/* Motorista: situação dos clientes da viagem montada */
.clientes-viagem { margin: .4rem 0; }
.clientes-viagem summary { cursor: pointer; font-weight: 600; color: var(--marca); }
.clientes-viagem ol { margin: .5rem 0; padding-left: 1.4rem; }
.clientes-viagem li { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .3rem 0; border-bottom: 1px solid var(--borda); }
.selo.selo-sit-aguardando { background: #ecebe4; color: var(--suave); }
.selo.selo-sit-carregando { background: var(--alerta-fundo); color: var(--alerta); }
.selo.selo-sit-carregado, .selo.selo-sit-faturado { background: var(--ok-fundo); color: var(--marca); }
/* Diretoria usando o sistema como outro colaborador (homologação) */
#visao label + label { margin-top: .6rem; }
#visao button { width: 100%; margin-top: .5rem; }

/* Ordens: viagens de cada ordem com a situação de carga */
.viagem-ordem { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: .15rem 0; }
.viagem-ordem small { width: 100%; color: var(--suave); }
/* Expedição: barra por produto "X de N bandejas carregadas" */
.consumo { padding: .55rem 0; border-bottom: 1px solid var(--borda); }
.consumo-nome small { display: block; color: var(--suave); font-size: .85rem; }
.consumo .barra { height: 10px; margin: .35rem 0 .2rem; }
.consumo-num { display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; font-size: .9rem; color: var(--suave); }
.consumo-num strong { color: var(--texto); }
.consumo-num .disponivel { font-weight: 700; color: var(--marca); }
.consumo.completo .consumo-nome, .consumo.completo .consumo-num .disponivel { color: var(--suave); font-weight: 400; }
.consumo.completo .barra span { background: var(--suave); }
.consumo-total { background: var(--marca-claro); border-radius: 10px; padding: .6rem .75rem; border: 0; margin: .5rem 0; }
.consumo-total .barra { height: 14px; }
/* Clientes da carga: etiqueta de situação no canto direito */
.cliente-carga { position: relative; padding: .6rem .8rem; padding-right: 8.5rem; gap: .2rem; border-color: rgba(0,0,0,.06); box-shadow: 0 1px 3px rgba(0,0,0,.04); }
a.cliente-carga:hover { border-color: rgba(24,74,19,.35); }
.cliente-carga .etiqueta-cli { position: absolute; right: .8rem; top: 50%; transform: translateY(-50%); padding: .2rem .7rem; border-radius: 10px; font-size: .85rem; font-weight: 600; }
@media (max-width: 640px) {
  .cliente-carga { padding-right: 7.2rem; }
  .cliente-carga .etiqueta-cli { top: .65rem; right: .6rem; transform: none; font-size: .75rem; padding: .15rem .55rem; }
}

/* Câmera dentro do app (foto das mudas, dos recipientes e do local) */
.camera-app { position: fixed; inset: 0; z-index: 70; background: #000; display: flex; flex-direction: column; }
.camera-app video { flex: 1; width: 100%; min-height: 0; object-fit: contain; background: #000; }
.camera-titulo { margin: 0; padding: 12px 16px; color: #fff; font-weight: 600; text-align: center; }
.camera-botoes { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 16px 16px 28px; }
.camera-botoes .cancelar { justify-self: start; background: transparent; color: #fff; border: 1px solid rgb(255 255 255 / .5); }
.camera-botoes .disparar { width: 72px; height: 72px; border-radius: 50%; border: 5px solid #fff; background: rgb(255 255 255 / .25); padding: 0; }
.camera-botoes .disparar:active { background: #fff; }
.gps-falta { margin-top: .6rem; }
/* Avisos no celular, sobra da semana, semana da ordem, conferência na aba Alertas */
.oferta-avisos { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
.sobra-semana { border-left: 4px solid #c98a00; background: #fff8e6; }
.sobra-semana ul { margin: .4rem 0; padding-left: 1.2rem; }
.qual-semana { border: 2px solid #c98a00; border-radius: 10px; padding: 10px 14px; margin: 0 0 12px; background: #fff8e6; }
.qual-semana label { display: block; font-weight: normal; margin: 6px 0; }
.conferencia-semana .topo { flex-wrap: wrap; gap: 8px; }
.conferencia-semana .semana { margin: 0; }
#sugerir-ordem { margin-bottom: 10px; }
.falta-documento { color: #8a5a00; }
/* Menu lateral por setor */
.abrir-menu { background: none; border: 0; color: var(--topo-texto); font-size: 1.6rem; padding: 0 .3rem; min-height: 40px; }
#menu .quem { color: var(--topo-texto); opacity: .9; font-size: .95rem; }
#lateral { background: var(--cartao); border-right: 1px solid var(--borda); overflow-y: auto; z-index: 20; }
#lateral h4 { margin: 1rem 1rem .25rem; font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; color: var(--suave); }
#lateral a { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .55rem 1rem; color: var(--texto); text-decoration: none; border-left: 3px solid transparent; }
#lateral a:hover { background: var(--fundo); }
#lateral a.ativo { background: var(--marca-claro); border-left-color: var(--marca); font-weight: 600; }
#lateral a.principal { margin-top: .5rem; font-weight: 600; }
#lateral .contador { background: var(--alerta); color: #fff; border-radius: 99px; font-size: .72rem; min-width: 1.5rem; padding: .05rem .45rem; text-align: center; }
#lateral #sair { margin: .3rem 1rem 1rem; padding: .4rem 0; min-height: 0; color: var(--suave); }
#fundo-menu { display: none; }
@media (min-width: 1000px) {
  .abrir-menu { display: none; }
  body.com-lateral #lateral { position: fixed; left: 0; top: var(--altura-topo, 62px); bottom: 0; width: 240px; }
  body.com-lateral main { margin-left: max(260px, calc((100% - 1040px) / 2)); }
  body.com-lateral.com-visao #lateral { padding-bottom: 250px; }
  body.com-lateral #visao { top: auto; bottom: 12px; left: 12px; width: 216px; z-index: 25; }
}
@media (max-width: 999px) {
  body.com-lateral #lateral { position: fixed; top: 0; left: 0; bottom: 0; width: min(82%, 320px); transform: translateX(-102%); transition: transform .2s; box-shadow: 2px 0 16px rgb(0 0 0 / .2); }
  body.com-lateral.menu-aberto #lateral { transform: none; }
  body.com-lateral.menu-aberto #fundo-menu { display: block; position: fixed; inset: 0; background: rgb(0 0 0 / .35); z-index: 15; }
  body.com-lateral #menu { width: auto; margin-left: auto; }
}
/* Meu trabalho */
.grade-trabalho { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; align-items: start; }
.bloco-trabalho { margin: 0; }
.bloco-trabalho h2 { margin: .1rem 0 .5rem; font-size: 1.05rem; }
.bloco-trabalho h2 a { color: inherit; text-decoration: none; }
.setor-trabalho { margin: 0; font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; color: var(--suave); }
.bloco-trabalho ul { list-style: none; margin: 0 0 .6rem; padding: 0; }
.bloco-trabalho li { display: flex; justify-content: space-between; gap: .6rem; padding: .45rem 0; border-top: 1px solid var(--borda); font-size: .93rem; }
.bloco-trabalho li:first-child { border-top: 0; }
.bloco-trabalho li a { color: var(--texto); text-decoration: none; }
.bloco-trabalho li span { color: var(--suave); white-space: nowrap; font-size: .88rem; }
.bloco-trabalho .tag-atraso { background: rgba(179,38,30,.12); color: var(--erro); border-radius: 8px; padding: 0 .45rem; }
.bloco-trabalho.urgente { border-color: rgba(179,38,30,.35); background: linear-gradient(var(--erro-fundo), var(--cartao) 60%); }
.bloco-trabalho .numero-trabalho { font-size: 1.8rem; font-weight: 700; color: var(--marca); margin: 0 0 .5rem; }
.bloco-trabalho .mais { margin: -.3rem 0 .6rem; font-size: .88rem; }
.bloco-trabalho .botao { min-height: 38px; padding: .4rem .9rem; }