/* ============================================================================
   VISUAL 2026 do Painel (11/09/2026) — barra lateral, cabeçalho, métricas, fila,
   alertas em cartão e cards mais limpos. Referência: protótipo do Codex
   (prototipos/central-comercial), com as cores que a Central já usava (style.css).

   Só o index.html carrega este arquivo. TV, KDS, Estoque, Salão e app do motoboy
   ficam como estavam. Os templates do app.js continuam os mesmos (reconciliador
   de cards intacto) — aqui só muda a roupa das classes que já existiam.
   ========================================================================== */

:root {
  --lateral-largura: 224px;
  --cor-lateral: #171b1f;
  --cor-coluna: #131719;
  --cor-item-ativo: #22304a;
  --cor-item-ativo-texto: #cfe0ff;
}

/* ---------- marca ---------- */
/* o logo da CLAI (.clai-logo, .clai-sistema) mora no style.css, porque aparece em todas as telas */
/* lateral (208 px): logo menor e sem a linha de baixo, que ficaria ilegível nesse tamanho */
.clai-logo--lateral { gap: 10px; padding: 0 8px; }
.clai-logo--lateral .clai-logo-simbolo { width: 40px; height: 40px; }
.clai-logo--lateral .clai-nome { font-size: 34px; }
.clai-logo--lateral + .clai-sistema { padding: 10px 8px 0; font-size: 17px; }

/* ---------- casca: lateral + principal ---------- */
.app { display: block; min-height: 100vh; }
.app[hidden] { display: none; }

.lateral {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--lateral-largura);
  background: var(--cor-lateral);
  border-right: 1px solid var(--cor-borda);
  padding: 20px 14px 16px;
  display: flex;
  flex-direction: column;
  overflow: auto;
  z-index: 30;
}
.lateral-empresa {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 6px 16px;
  border-bottom: 1px solid var(--cor-borda);
  font-weight: 600;
  font-size: 0.9rem;
  min-height: 60px;
}
.lateral-empresa small { display: block; color: var(--cor-texto-fraco); font-size: 0.7rem; font-weight: 400; margin-top: 2px; }
.lateral-avatar {
  background: var(--cor-superficie-alta);
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--cor-texto-fraco);
  font-family: var(--fonte-dados);
}
/* o app.js escreve o nome da empresa aqui (antes era um selo miúdo ao lado do título) */
.lateral .badge-empresa { display: block; font-size: 0.9rem; opacity: 1; margin: 0; color: var(--cor-texto); }
.lateral-rotulo {
  font-size: 0.62rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cor-texto-fraco);
  font-weight: 600;
  margin: 18px 10px 6px;
}
.lateral-rotulo small { display: block; text-transform: none; letter-spacing: 0; font-size: 0.62rem; font-weight: 400; opacity: 0.8; }

/* itens do menu — escopo #abas pra não pegar as sub-abas do Admin (também usam .aba) */
#abas { display: block; flex: 0 0 auto; }
#abas .aba,
#abas .aba-link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  background: transparent;
  color: #b6bec9;
  padding: 9px 12px;
  border-radius: 8px;
  text-align: left;
  margin: 1px 0;
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  min-height: 40px;
}
#abas .aba > span:first-child,
#abas .aba-link > span:first-child { flex: 1; }
#abas .aba small { font-size: 0.62rem; color: var(--cor-texto-fraco); font-weight: 400; max-width: 96px; text-align: right; line-height: 1.2; }
#abas .aba-link i { color: var(--cor-texto-fraco); font-style: normal; font-size: 0.75rem; }
#abas .aba:hover,
#abas .aba-link:hover { background: var(--cor-superficie-alta); color: var(--cor-texto); }
#abas .aba.ativa { background: var(--cor-item-ativo); color: var(--cor-item-ativo-texto); }
#abas .aba[hidden] { display: none; }

.lateral-rodape { margin-top: auto; padding: 16px 4px 0; }
.lateral-perfil {
  display: flex;
  gap: 10px;
  align-items: center;
  border-top: 1px solid var(--cor-borda);
  padding-top: 14px;
  font-size: 0.75rem;
  color: var(--cor-texto-fraco);
}
.lateral-perfil #usuario-email { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lateral-sair { padding: 5px 9px; font-size: 0.72rem; }

.principal { margin-left: var(--lateral-largura); min-height: 100vh; display: flex; flex-direction: column; }

.cabecalho {
  height: 60px;
  border-bottom: 1px solid var(--cor-borda);
  padding: 0 28px;
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--cor-fundo);
  position: sticky;
  top: 0;
  z-index: 5;
}
/* ☰ também no desktop (dono, 11/09): recolhe/abre a barra; escolha lembrada no navegador */
.btn-menu { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--cor-borda); background: var(--cor-superficie); color: var(--cor-texto); font-size: 18px; padding: 0; }
@media (min-width: 901px) {
  body.menu-recolhido .lateral { transform: translateX(-100%); }
  body.menu-recolhido .principal { margin-left: 0; }
  .lateral { transition: transform 0.18s ease; }
  .principal { transition: margin-left 0.18s ease; }
}
.trilha { font-family: var(--fonte-titulo); font-size: 1.05rem; font-weight: 700; color: var(--cor-texto); flex: 1; }
.cabecalho-direita { display: flex; align-items: center; gap: 12px; }
.cabecalho-direita .badge-unidade { margin: 0; font-size: 0.7rem; }
.cabecalho-direita #seletor-unidade { padding: 8px 10px; }

.aviso-empresa { margin: 12px 28px 0; }
.conteudo { padding: 22px 28px 40px; flex: 1; }

/* ---------- Painel: métricas, fila, alertas ---------- */
.kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.kpi-card { background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio); padding: 12px 14px; min-width: 0; }
/* caixinhas clicáveis + prévia (15/10/2026) */
.kpi-card[data-kpi] { cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
.kpi-card[data-kpi]:hover, .kpi-card[data-kpi]:focus-visible { border-color: var(--cor-texto-fraco); outline: none; }
.kpi-card.kpi-aberto { border-color: var(--cor-primaria); box-shadow: inset 0 -3px 0 var(--cor-primaria); }
.kpi-card.kpi-completo { border-color: #3ecf73; }
.kpi-card.kpi-completo .kpi-valor { color: #3ecf73; }
.kpi-detalhe { background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio); padding: 10px 14px; margin: -6px 0 14px; font-size: 0.85rem; }
.kpi-detalhe-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.kpi-detalhe-fechar { background: none; border: 0; color: var(--cor-texto-fraco); font-size: 1.3rem; line-height: 1; padding: 4px 8px; min-width: 36px; min-height: 36px; cursor: pointer; }
.kpi-detalhe ul { margin: 4px 0; padding-left: 18px; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); column-gap: 18px; }
.kpi-detalhe li { margin: 2px 0; }
.kpi-detalhe .ajuda { margin: 4px 0 0; }
.kpi-label { display: block; color: var(--cor-texto-fraco); font-size: 0.72rem; }
.kpi-valor { display: block; font-size: 1.5rem; font-weight: 500; letter-spacing: -0.5px; margin: 4px 0 2px; font-family: var(--fonte-dados); }
.kpi-sub { display: block; color: var(--cor-texto-fraco); font-size: 0.66rem; }

.fila-faixa {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: 12px 16px;
  margin: 0 0 14px;
  overflow-x: auto;
}
.fila-faixa > strong { color: var(--cor-primaria); white-space: nowrap; font-size: 0.9rem; }
.fila-faixa .vazio { margin: 0; }
.fila-pessoa { border-left: 1px solid var(--cor-borda); padding-left: 14px; white-space: nowrap; font-size: 0.8rem; }
.fila-pessoa b { display: block; font-size: 0.85rem; }
.fila-pessoa b::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; background: var(--cor-pronto); vertical-align: middle; }
.fila-pessoa--rua b::before { background: var(--cor-despachado); }
.fila-pessoa--sem-aceite b::before { background: var(--cor-perigo); }
.fila-pessoa small { display: block; color: var(--cor-texto-fraco); font-size: 0.7rem; margin-top: 1px; }
.fila-pessoa--sem-aceite small { color: var(--cor-perigo); font-weight: 600; }
.fila-pessoa button { margin-left: 8px; background: transparent; border: 1px solid var(--cor-borda); color: var(--cor-texto-fraco); border-radius: 6px; padding: 2px 7px; font-size: 0.7rem; }

/* alertas de hoje, agora em cartão (a mesma classe .alerta-falhas do app.js) */
.alerta-falhas {
  background: #2a2416;
  border: 1px solid #6a5426;
  color: #ead4a4;
  font-weight: 500;
  font-size: 0.85rem;
  line-height: 1.45;
  padding: 11px 14px;
  margin-bottom: 8px;
}
.alerta-falhas.alerta-informativo { background: #1b2430; border-color: #35455a; color: #c8d6ea; }
.alerta-falhas.alerta-sem-aceite { background: #33201f; border-color: var(--cor-perigo); color: #ffd6d7; font-weight: 600; border-width: 2px; }
.alerta-nao-entregues { background: #2a2416; border-color: #6a5426; color: var(--cor-texto); }

/* ---------- kanban e cards ---------- */
.kanban { grid-template-columns: repeat(5, minmax(250px, 1fr)); gap: 12px; padding-bottom: 12px; }
.coluna { background: var(--cor-coluna); border: 1px solid #242a2d; border-radius: var(--raio); padding: 7px; min-height: 380px; }
.coluna h2 { font-size: 0.8rem; font-weight: 600; margin: 4px 2px 12px; letter-spacing: 0; }
.coluna h2::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 8px; background: currentColor; vertical-align: middle; }
.coluna[data-coluna="cozinha"] h2 { color: #e3b76f; }
.coluna .contagem { background: var(--cor-superficie-alta); color: var(--cor-texto); border-radius: 4px; padding: 2px 6px; font-size: 0.66rem; }
.coluna .modal-instrucao { font-size: 0.72rem; margin: -6px 2px 10px; }
.busca-cozinha { width: 100%; margin-bottom: 10px; padding: 7px 9px; font-size: 0.8rem; }

.rota-card { border-radius: 9px; background: var(--cor-superficie-alta); border: 1px solid #303739; font-size: 0.8rem; }
.rota-card:hover { border-color: #53625d; }
.rota-canhoto { display: none; } /* o número já está no cabeçalho do card */
.rota-corpo { padding: 8px 9px; }
.rota-corpo header strong { font-family: var(--fonte-corpo); font-size: 0.9rem; }
.rota-corpo header { flex-wrap: wrap; }
.rota-zona { font-size: 0.75rem; }
/* A linha da parada quebra: o endereço (texto solto no flex) encolhia até uma palavra por linha quando o
   timer + valor não cabiam ao lado (caça-bugs 11/09, notebook 1366 px = "Rua / Francisco / Nunes, / 715"). */
/* (08/10/2026, dono: "espaço mal aproveitado") cada parada em 3 linhas curtas: endereço com a largura toda; pagamento,
   valor e 🏍️ taxa na mesma linha (taxa à direita); os tempos embaixo. Antes tag, valor e taxa caíam um por linha. */
.rota-pedidos li { display: block; padding: 5px 0; border-top: 1px solid #303739; font-size: 0.78rem; line-height: 1.35; }
.rota-pedidos .pl-end { overflow-wrap: anywhere; }
.rota-pedidos .pl-info { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin-top: 2px; }
.rota-pedidos .pl-valor { font-family: var(--fonte-dados); }
.rota-pedidos .pl-mb { margin-left: auto; white-space: nowrap; font-family: var(--fonte-dados); }
/* tempos: na mesma linha quando cabe (tela larga); em coluna estreita descem sozinhos, sem empurrar a taxa */
.rota-pedidos .pl-tempos { display: flex; flex-wrap: wrap; gap: 0 8px; order: 4; }
.rota-timer { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin: 0 0 4px; }
.rota-timer .rota-timer-barra { flex-basis: 100%; }
.rota-formacao { display: inline; margin: 0; }
.rota-corpo header { margin-bottom: 2px; }
.rota-motoboy { margin: 0 0 2px; }
/* rota concluída: quem entregou, ao lado do código (12/10/2026) */
.rota-motoboy-lado { flex: 1 1 90px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cor-pronto); font-weight: 600; font-size: 0.8rem; }
.rota-corpo footer { margin-bottom: 6px; padding-top: 6px; }
/* card da Cozinha: menos altura — etapa e endereço colados, botões numa linha só */
.cozinha-card .tag-etapa-cozinha { margin: 0 0 2px; }
.cozinha-card .rota-zona { margin: 0 0 4px; }
.cozinha-card footer { align-items: center; }
.cozinha-card .rota-acoes { gap: 4px; }
.cozinha-card .rota-acoes button { padding: 6px 8px; }
.rota-pedidos li:first-child { border-top: 0; }
.rota-corpo footer { border-top: 1px solid #303739; padding-top: 8px; margin-top: 4px; }
.rota-acoes button { padding: 7px 9px; font-size: 0.74rem; border-radius: 6px; }
.rota-acoes .btn-secundario { background: #232a2d; border-color: #394247; color: #c8d0d1; }
.tag-pagamento { font-size: 0.66rem; border-radius: 4px; padding: 2px 6px; font-weight: 600; white-space: nowrap; }
.tag-pagamento--pago { background: #173a35; color: #a9ecdf; }
.tag-pagamento--dinheiro { background: #3a2e12; color: #ffd27a; }
.tag-pagamento--cartao { background: #22304a; color: #cfe0ff; }
.tag-pagamento--outro { background: var(--cor-superficie); color: var(--cor-texto-fraco); }
/* (12/09/2026) endereço aproximado: rua achada, número não — pino no meio da rua */
.tag-aprox { background: #3a2e12; color: #ffd27a; font-size: 0.66rem; border-radius: 4px; padding: 2px 6px; font-weight: 600; white-space: nowrap; }
.tag-aprox--bairro { background: #3a1d1d; color: #ffb3b3; }
/* PROMESSA DE ENTREGA DO IFOOD E DA 99 (11/10/2026): neutro no prazo, amarelo a 10 min, vermelho quando estoura */
.tag-prazo { background: var(--cor-superficie); color: var(--cor-texto-fraco); font-size: 0.66rem; border-radius: 4px; padding: 2px 6px; font-weight: 600; white-space: nowrap; }
.tag-prazo--perto { background: #3a2e12; color: #ffd27a; }
.tag-prazo--estourou { background: #5a1a1a; color: #ffb3b3; }
.link-historico { text-decoration: none; }

/* ---------- seções, tabelas, sub-abas ---------- */
.secao { border-radius: var(--raio); }
.subnav { flex-wrap: wrap; } /* 9 sub-abas do Admin não cabem numa linha no celular (caça-bugs 11/09) */
.subnav .aba { border-radius: 8px; padding: 8px 12px; font-size: 0.85rem; }
.subnav .aba.ativa { background: var(--cor-item-ativo); color: var(--cor-item-ativo-texto); }
.tabela th { font-weight: 400; font-size: 0.72rem; }

/* ---------- gaveta no celular (dono, 11/09: barra lateral escondida, só o ☰ abre — swipe removido, conflitava) ---------- */
@media (max-width: 900px) {
  .lateral { width: 272px; transform: translateX(-100%); transition: transform 0.22s ease; box-shadow: 8px 0 30px #0008; }
  body.menu-aberto .lateral { transform: none; }
  .cortina-menu { position: fixed; inset: 0; background: #0007; z-index: 25; opacity: 0; pointer-events: none; transition: opacity 0.22s; display: block; }
  body.menu-aberto .cortina-menu { opacity: 1; pointer-events: auto; }
  .principal { margin-left: 0; }
  .btn-menu { width: 44px; height: 44px; font-size: 20px; }
  .cabecalho { height: auto; padding: 8px 12px; gap: 10px; }
  .trilha { font-size: 1rem; }
  .aviso-empresa { margin: 10px 12px 0; }
  .conteudo { padding: 14px 12px 40px; }
  /* CELULAR DENSO (dono, 11/09: "as informações têm que estar sempre visíveis"): métricas numa faixa de uma
     linha, alertas/fila menores, kanban logo abaixo — antes eram 7 cartões empilhados antes de qualquer pedido. */
  .kpis { display: flex; overflow-x: auto; gap: 6px; margin-bottom: 8px; padding-bottom: 2px; scrollbar-width: none; }
  .kpis::-webkit-scrollbar { display: none; }
  .kpi-card { flex: 0 0 auto; min-width: 96px; padding: 6px 10px; }
  .kpi-label { font-size: 0.68rem; white-space: nowrap; } /* 0.6rem = 9,6 px era miúdo demais (revisão 08/10) */
  .kpi-valor { font-size: 1.05rem; margin: 1px 0 0; }
  .kpi-sub { display: none; }
  .alerta-falhas { font-size: 0.76rem; padding: 8px 10px; margin-bottom: 6px; line-height: 1.35; }
  .fila-faixa { padding: 8px 10px; gap: 10px; margin-bottom: 8px; }
  .fila-faixa > strong { font-size: 0.78rem; }
  .fila-pessoa { padding-left: 10px; font-size: 0.74rem; }
  .fila-pessoa b { font-size: 0.78rem; }
  .link-historico[data-acao="marcar-dia-atipico"] { font-size: 0.76rem; padding: 10px 2px; min-height: 40px; }
  /* ALVO DE DEDO (revisão de design 08/10/2026): no celular os botões tinham 21–28 px de altura — a mão erra. Mínimo
     ~40 px só aqui; no computador nada muda. */
  .rota-acoes button, .btn-detalhe { min-height: 40px; }
  .busca-cozinha, .conteudo input:not([type=checkbox]):not([type=radio]):not([type=range]), .conteudo select { min-height: 40px; }
  .tabela button, .tabela .btn-secundario { min-height: 36px; padding-top: 6px; padding-bottom: 6px; }
  /* o botão flutuante "?" cobria o fim da lista: a folga embaixo fica no .conteudo do bloco de celular abaixo */
  /* sem rolagem lateral no kanban: a linha de cada parada quebra em vez de alargar a coluna */
  .kanban { grid-template-columns: minmax(0, 1fr); gap: 8px; overflow-x: hidden; }
  .coluna { min-height: 0; padding: 8px; min-width: 0; max-width: 100%; }
  .coluna h2 { flex-wrap: nowrap; }
  .rota-card, .rota-corpo { min-width: 0; max-width: 100%; }
  .rota-corpo header { flex-wrap: wrap; }
  .rota-pedidos li { flex-wrap: wrap; row-gap: 2px; }
  .rota-pedidos li .valor { white-space: normal; flex-wrap: wrap; }
  .pedido-timer, .cozinha-tempo { white-space: normal; }
  .rota-corpo footer { flex-wrap: wrap; }
  .coluna h2 { margin: 2px 2px 8px; }
  .coluna .modal-instrucao { display: none; }
  .conteudo { padding: 10px 10px 88px; } /* 88: espaço pro último card sair de baixo do botão "?" (08/10) */
  /* COLUNAS RECOLHÍVEIS (11/09/2026): título vira botão; recolhida = só nome + contagem */
  .kanban-controle { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; font-size: 0.72rem; color: var(--cor-texto-fraco); }
  .kanban-controle button { padding: 5px 9px; font-size: 0.72rem; visibility: hidden; }
  .kanban-controle--tem-recolhida button { visibility: visible; }
  .kanban .coluna > h2 { cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; padding: 6px 4px; margin: 0 0 6px; border-radius: 6px; }
  .kanban .coluna > h2::after { content: "▾"; margin-left: auto; color: var(--cor-texto-fraco); font-size: 0.9rem; }
  .kanban .coluna.recolhida > h2::after { content: "▸"; }
  .kanban .coluna.recolhida > h2 { margin: 0; }
  .kanban .coluna.recolhida > *:not(h2) { display: none; }
  .kanban .coluna.recolhida { min-height: 0; padding: 6px 8px; opacity: 0.85; }
  /* tabelas (Motoboys, Concluídos, Lançamentos…) rolam dentro do próprio quadro em vez de alargar a página */
  .tabela { display: block; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
  .tabela th, .tabela td { white-space: nowrap; }
  .modal-fechar { min-width: 40px; min-height: 40px; } /* × do modal tinha 30×29 px no celular */
}
@media (min-width: 901px) and (max-width: 1250px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 901px) { .kanban-controle { display: none; } }
/* Notebook comum (1366 px): com a barra lateral sobram ~1100 px; 5 colunas de 250 cortavam a 5ª (caça-bugs 11/09) */
@media (min-width: 901px) and (max-width: 1500px) {
  .kanban { grid-template-columns: repeat(5, minmax(210px, 1fr)); gap: 8px; }
  .coluna { padding: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .lateral, .cortina-menu { transition: none; }
}
/* IMPRESSÃO (caça-bugs 2, 11/09): o @media print do style.css esconde a .topbar antiga; a lateral fixa e o cabeçalho
   novos saíam no papel por cima do fechamento, com 224 px de margem. */
@media print {
  .lateral, .cabecalho, .cortina-menu { display: none !important; }
  .principal { margin-left: 0 !important; }
  .conteudo { padding: 0 !important; }
}

/* ---------- card compacto com detalhe no toque (11/09/2026) ---------- */
.cozinha-card { cursor: pointer; }
.cozinha-card .card-detalhe { display: none; margin: 8px 0 2px; padding-top: 8px; border-top: 1px dashed #3a4347; }
.cozinha-card.expandido .card-detalhe { display: block; }
.cozinha-card.expandido { border-color: var(--cor-primaria); }
.card-cliente { font-family: var(--fonte-corpo); font-size: 0.85rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-complemento { color: #e5cf9e; }
.card-contato { margin: 0 0 6px; font-size: 0.78rem; color: var(--cor-texto-fraco); }
.card-contato a { color: var(--cor-primaria); }
.card-itens { margin: 0 0 8px; padding-left: 16px; font-size: 0.78rem; line-height: 1.5; }
.card-itens small { color: #e1c694; }
.card-cobranca { margin: 0; padding: 6px 9px; border-radius: 6px; font-size: 0.78rem; background: #173a35; color: #a9ecdf; }
.card-cobranca--dinheiro { background: #3a2e12; color: #ffd27a; }
.modal-paradas { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.modal-paradas li { background: var(--cor-superficie-alta); border: 1px solid var(--cor-borda); border-radius: 8px; padding: 10px 12px; font-size: 0.85rem; }
.modal-parada-topo { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; margin-bottom: 4px; }
.modal-paradas .card-complemento { margin: 0 0 4px; font-size: 0.8rem; }
.secao-subtitulo { margin: -6px 0 10px; color: var(--cor-texto-fraco); font-size: 0.85rem; }
#secao-vales { margin-top: 16px; }

/* ---------- auditoria do Codex (11/09/2026) ---------- */
/* controles nativos (semana, data, hora, busca) no esquema escuro: o calendário/semana vinha branco com texto claro */
input[type="week"], input[type="date"], input[type="time"], input[type="search"], input[type="datetime-local"] { color-scheme: dark; }
input[type="week"], input[type="search"], input[type="time"] { padding: 9px 10px; border: 1px solid var(--cor-borda); border-radius: 8px; background: var(--cor-superficie-alta); color: var(--cor-texto); }
.pedido-timer--sem-hora { color: var(--cor-texto-fraco); font-weight: 400; }
.btn-detalhe { margin-left: auto; padding: 3px 8px; font-size: 0.7rem; border-radius: 6px; background: transparent; border: 1px solid #394247; color: #c8d0d1; }
.cozinha-card.expandido .btn-detalhe { border-color: var(--cor-primaria); color: var(--cor-primaria); }
.btn-detalhe:focus-visible, .btn-menu:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: 2px; }

/* ---------- decisões do motor (11/09/2026) ---------- */
.tabela-decisoes td { vertical-align: top; }
.tabela-decisoes td:last-child { white-space: normal; min-width: 260px; }
.tag-decisao { display: inline-block; padding: 2px 7px; border-radius: 4px; font-size: 0.7rem; font-weight: 600; background: var(--cor-superficie-alta); white-space: nowrap; }
.decisao--ok .tag-decisao { background: #173a35; color: #a9ecdf; }
.decisao--espera .tag-decisao { background: #3a2e12; color: #ffd27a; }
.decisao--erro .tag-decisao { background: #3a1f1f; color: #ffb4b4; }
.decisao-numeros { color: var(--cor-texto-fraco); }
.modal-decisoes { margin-top: 14px; }
.modal-decisoes h4 { margin: 0 0 6px; font-size: 0.85rem; color: var(--cor-texto-fraco); }
.modal-decisoes .tabela td { padding: 4px 6px; font-size: 0.74rem; }

/* (13/09/2026) modal Confirmar destino */
.destinos-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.destinos-lista li { border: 1px solid var(--cor-borda); border-radius: 10px; padding: 10px 12px; background: var(--cor-superficie-alta); }
.destinos-endereco { font-size: 0.92rem; margin-top: 2px; }
.destinos-cliente { font-size: 0.82rem; color: var(--cor-texto-fraco); }
.destinos-acoes { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.destinos-acoes button { min-height: 40px; }
/* MARCAR NO MAPA (11/10/2026): o modal alarga pra caber o mapa; busca em cima, dica, mapa, confirmar */
.modal--destinos { max-width: 640px; max-height: 92vh; }
.destinos-mapa { margin-top: 10px; border-top: 1px solid var(--cor-borda); padding-top: 10px; }
.destinos-busca { display: flex; gap: 8px; }
.destinos-busca input { flex: 1; min-width: 0; min-height: 40px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--cor-borda); background: var(--cor-superficie); }
.destinos-dica { font-size: 0.85rem; margin: 8px 0 0; color: var(--cor-texto-fraco); }
.destinos-dica.erro { color: var(--cor-perigo); }
.mapa-destino { height: clamp(200px, 38vh, 340px); margin-top: 8px; }
/* (13/10/2026) card com pedido sem GPS: moldura vermelha, e o clique nele abre o "Confirmar destino" */
.rota-card[data-sem-gps] { border-color: var(--cor-perigo); cursor: pointer; }
/* (12/10/2026) linha do CEP: campo curto pro CEP, mais curto pro número */
.destinos-cep { margin-top: 6px; }
.destinos-cep input[data-mapa-cep] { flex: 0 1 130px; }
.destinos-cep input[data-mapa-numero] { flex: 0 1 80px; }

/* PAGAR O DIA (11/10/2026): junto do formulário de vale — escolhe o dia, vê a conta, confirma o vale */
/* quem não aceitou a rota no prazo: decisão do balcão (12/10/2026) */
.pendencia-aceite { margin: 4px 0; line-height: 1.6; }
/* aviso do dono pro balcão (12/10/2026): faixa no topo do Painel até cada login tocar em "Entendi" */
.alerta-falhas.aviso-painel { background: #1d2a1f; border-color: #3f8f55; color: #dff3e3; border-width: 2px; cursor: default; }
.alerta-falhas.aviso-painel:hover { filter: none; }
.aviso-painel-item + .aviso-painel-item { margin-top: 12px; padding-top: 12px; border-top: 1px solid #3f8f55; }
.aviso-painel-titulo { margin: 0 0 6px; font-size: 16px; font-weight: 700; }
.aviso-painel-titulo span { font-weight: 400; font-size: 12px; opacity: 0.75; margin-left: 6px; }
.aviso-painel-texto { margin: 0 0 10px; line-height: 1.5; font-weight: 400; max-width: 900px; }
.aviso-painel-item button { min-height: 40px; padding: 0 18px; font-weight: 700; }
.pendencia-aceite button { margin-left: 6px; min-height: 36px; }
.pagar-dia { margin: 10px 0 12px; }
.pagar-dia-painel { margin-top: 10px; padding: 12px; border: 1px solid var(--cor-borda); border-radius: 10px; background: var(--cor-superficie-alta); max-width: 460px; }
.pagar-dia-data { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.pagar-dia-data input { min-height: 40px; }
.pagar-dia-titulo { margin: 10px 0 6px; }
.pagar-dia-conta { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.pagar-dia-conta td { padding: 4px 0; border-bottom: 1px dashed var(--cor-borda); }
.pagar-dia-conta td:last-child { text-align: right; font-family: var(--fonte-dados); white-space: nowrap; }
.pagar-dia-conta small { color: var(--cor-texto-fraco); }
.pagar-dia-total td { border-bottom: none; padding-top: 8px; font-weight: 700; font-size: 1.1rem; }
.pagar-dia-aviso { margin: 8px 0; font-size: 0.85rem; color: var(--cor-formando); }
.pagar-dia-painel button { margin-top: 10px; min-height: 44px; }

/* ---------- Configuração em abas + Painel do motor (13/10/2026) ---------- */
[data-cfg][hidden] { display: none !important; }
.cfg-abas { position: sticky; top: 0; z-index: 5; background: var(--cor-fundo); padding: 6px 0 10px; margin-bottom: 8px; }
.motor { max-width: 1040px; }
.motor-topo { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-bottom: 12px; }
.motor-topo h2 { margin: 0 0 4px; font-size: 1.15rem; }
.motor-topo .modal-instrucao { margin: 0; max-width: 560px; }
.motor-chaves { display: flex; gap: 8px; flex-wrap: wrap; font-size: 0.8rem; color: var(--cor-texto-fraco); }
.motor-chaves > span { background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: 999px; padding: 5px 10px; white-space: nowrap; }
.motor-estado { font-weight: 700; margin-left: 4px; }
.motor-estado--on { color: var(--cor-pronto); }
.motor-estado--off { color: var(--cor-formando); }
.motor-bloco { background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio); padding: 16px; margin-bottom: 14px; }
.motor-bloco h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 1rem; }
.motor-passo { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--cor-primaria); color: #15171a; font-size: 0.85rem; font-weight: 700; flex: none; }
.motor-bloco > .modal-instrucao { margin: 0 0 14px; max-width: 760px; }
.motor-itens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.motor-itens--um { grid-template-columns: minmax(0, 1fr); }
.motor-item { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 14px; align-items: start; background: var(--cor-superficie-alta); border: 1px solid var(--cor-borda); border-radius: 8px; padding: 12px; }
.motor-fig { width: 200px; height: auto; background: var(--cor-fundo); border: 1px solid var(--cor-borda); border-radius: 6px; }
.motor-fig .mf-t { font: 500 10px var(--fonte-corpo); }
.motor-fig .mf-t:not([fill]) { fill: var(--cor-texto-fraco); }
.motor-fig .mf-forte { font-weight: 700; }
.motor-fig .mf-forte:not([fill]) { fill: var(--cor-texto); }
.motor-campos { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.motor-campos label, .motor-soltos label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; color: var(--cor-texto); font-weight: 600; }
.motor-campos label.situacao-toggle, .motor-soltos label.situacao-toggle { flex-direction: row; align-items: flex-start; font-weight: 500; color: var(--cor-texto-fraco); }
.motor-campos input[type="number"], .motor-campos input[type="text"], .motor-soltos input[type="number"] { max-width: 160px; }
.motor-campos .ajuda, .motor-soltos .ajuda { margin: 0; font-size: 0.8rem; line-height: 1.45; }
/* um "Salvar" por opção (13/10/2026) */
.motor-campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.motor-campo > label { font-size: 0.85rem; font-weight: 600; color: var(--cor-texto); }
.motor-campo-linha { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.motor-campo-linha input { width: 110px; min-height: 36px; }
.motor-campo-linha button { min-height: 36px; padding: 0 14px; font-weight: 600; }
.motor-campo-aviso { font-size: 0.8rem; font-weight: 600; margin: 0; }
.motor-campo-aviso.erro { color: var(--cor-perigo); flex-basis: 100%; }
.motor-campos-linha { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: flex-start; }
.motor-item--chaves { grid-template-columns: minmax(0, 1fr); }
.motor-item--chaves .situacao-toggle { align-items: flex-start; gap: 8px; line-height: 1.4; }
.motor-item--chaves .situacao-toggle b { color: var(--cor-texto); }
.motor-leitura { margin: 0; font-size: 0.85rem; color: var(--cor-texto-fraco); line-height: 1.45; }
.motor-leitura strong { color: var(--cor-texto); }
.motor-linha { margin: 4px 0 0; align-items: flex-end; }
.motor-linha label { flex: 0 0 auto; }
.motor-linha input { flex: none; min-width: 0; width: 110px; }
.motor-soltos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.motor-soltos > div { grid-column: 1 / -1; }
.motor-rotulo { display: block; font-size: 0.85rem; margin-bottom: 4px; }
.motor-salvar { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.motor-salvar button { min-height: 38px; padding: 0 20px; font-weight: 700; }
.motor-bloco--leitura { background: transparent; border-style: dashed; }
.motor-fixos { margin: 0 0 8px; padding-left: 18px; font-size: 0.85rem; color: var(--cor-texto-fraco); line-height: 1.5; }
.motor-fixos strong { color: var(--cor-texto); }
@media (max-width: 1000px) { .motor-itens, .motor-soltos { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .motor-item { grid-template-columns: minmax(0, 1fr); } .motor-fig { width: 100%; max-width: 260px; } }

/* Aba Motoboys organizada (13/10/2026): busca, inativos e o menu "Mais" de cada linha */
.mb-ferramentas { align-items: center; margin-bottom: 10px; }
.mb-ferramentas input[type="search"] { flex: 1; min-width: 220px; }
.mb-inativos { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--cor-texto-fraco); white-space: nowrap; }
.form-linha .mb-inativos input { flex: none; min-width: 0; }
/* cada botão numa linha só; a coluna pode quebrar ENTRE botões em tela estreita. Campos acompanham a coluna. */
.mb-acoes button, .mb-acoes a, .mb-mais > summary { white-space: nowrap; }
[data-mb="equipe"] .tabela .input-medio { width: 100%; min-width: 120px; }
.mb-acoes { min-width: 215px; } /* "↔ loja" e "Mais" lado a lado; um terceiro botão desce */
.mb-mais { display: inline-block; position: relative; vertical-align: top; }
.mb-mais > summary { cursor: pointer; list-style: none; border-radius: 8px; padding: 6px 12px; }
.mb-mais > summary::-webkit-details-marker { display: none; }
.mb-mais > summary::after { content: ' ▾'; }
.mb-mais[open] > summary::after { content: ' ▴'; }
/* abre por cima da tabela, pra linha não crescer */
.mb-mais-itens { position: absolute; right: 0; top: calc(100% + 4px); z-index: 6; display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 8px; background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); }
.mb-mais-itens > * { text-align: left; padding: 7px 12px; border-radius: 8px; font-size: 0.85rem; }

/* Pesquisa nos Concluídos e Lançamentos enxutos (13/10/2026) */
.grupo-data[hidden], .grupo-data .rota-card[hidden] { display: none; }
.lanc-dica { margin: -8px 0 14px; }
.lanc-totais { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 12px; }

/* Indicador da meta de entrega no Painel (13/10/2026) — mesmas cores do quadro da TV */
.kpi-meta[data-estado="ok"] { --kpi-meta-cor: #3ecf73; }
.kpi-meta[data-estado="aviso"] { --kpi-meta-cor: var(--cor-formando); }
.kpi-meta[data-estado="atraso"] { --kpi-meta-cor: var(--cor-perigo); }
.kpi-meta[data-estado="ok"], .kpi-meta[data-estado="aviso"], .kpi-meta[data-estado="atraso"] { border-color: var(--kpi-meta-cor); }
.kpi-meta[data-estado="ok"] .kpi-valor, .kpi-meta[data-estado="aviso"] .kpi-valor, .kpi-meta[data-estado="atraso"] .kpi-valor { color: var(--kpi-meta-cor); }

/* (15/10/2026) mensagem de recrutamento na sub-aba Cadastro */
.mensagem-recrutamento { white-space: pre-wrap; font-size: 0.85rem; background: var(--cor-fundo); border: 1px solid var(--cor-borda); border-radius: var(--raio); padding: 10px 12px; max-height: 320px; overflow: auto; }

/* (15/10/2026) Motoboys → Desempenho */
.desemp-tabela td, .desemp-tabela th { text-align: center; vertical-align: middle; }
.desemp-tabela td:nth-child(2), .desemp-tabela th:nth-child(2) { text-align: left; }
.desemp-posicao { font-size: 0.75rem; color: var(--cor-texto-fraco); } /* ranking (15/10/2026) */
.desemp-podio { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; background: var(--cor-superficie); border: 1px solid var(--cor-primaria); border-radius: var(--raio); padding: 10px 14px; margin: 8px 0 12px; }
.desemp-podio small { color: var(--cor-texto-fraco); }
.desemp-detalhe td { text-align: left !important; }
.desemp-linha { cursor: pointer; }
.desemp-linha:hover td, .desemp-linha:focus td { background: var(--cor-superficie-alta); }
.desemp-tabela small { color: var(--cor-texto-fraco); font-size: 0.75rem; }
.desemp-bom { color: var(--cor-pronto); font-weight: 600; }
.desemp-medio { color: var(--cor-formando); font-weight: 600; }
.desemp-ruim { color: var(--cor-perigo); font-weight: 700; }
.desemp-detalhe td { text-align: left; background: var(--cor-fundo); white-space: normal; }
.desemp-detalhe-blocos { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.desemp-detalhe-blocos > div { min-width: 0; overflow-wrap: anywhere; }
.desemp-detalhe-blocos ul { margin: 4px 0 0; padding-left: 18px; font-size: 0.85rem; }
.desemp-legenda { margin-top: 12px; font-size: 0.85rem; }
.desemp-periodos { gap: 8px; flex-wrap: wrap; align-items: center; }