/* Conferência de Comandas: a casca e as telas, em cima dos tokens --kv- do tema "Noturno"
   do ERP (tema.css). Aqui só o que é deste sistema. */

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--kv-papel); }
body { font-family: var(--kv-fonte); color: var(--kv-tinta); font-size: var(--kv-t-corpo); line-height: 1.5; }
a { color: var(--kv-nav); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: var(--kv-t-titulo); font-weight: 600; letter-spacing: -.4px; margin: 0; }
h2 { font-size: var(--kv-t-secao); font-weight: 600; margin: 0 0 12px; }
h3 { font-size: var(--kv-t-corpo); font-weight: 600; margin: 0 0 8px; }
.num { font-family: var(--kv-mono); font-variant-numeric: tabular-nums; }
.apoio { color: var(--kv-tinta-2); font-size: var(--kv-t-apoio); }
.rotulo { font-size: var(--kv-t-rotulo); text-transform: uppercase; letter-spacing: .09em; font-weight: 600; color: var(--kv-tinta-2); }

/* ── casca: igual à do ERP (estilo.css de lá), menu fixo à esquerda e coluna à direita ── */
[hidden] { display: none !important; }
.sistema { display: flex; min-height: 100vh; }
#menu {
  width: 216px; flex: none; background: var(--kv-menu-fundo); border-right: 1px solid var(--kv-menu-linha);
  display: flex; flex-direction: column; padding: 18px 12px 12px; position: sticky; top: 0; height: 100vh;
}
.menu-topo { padding: 2px 8px 16px; }
.logo-link { display: block; border-radius: var(--kv-raio-p); transition: opacity .15s; }
.logo-link:hover { opacity: .72; }
.logo-konvem { display: block; width: 100%; max-width: 168px; height: auto; }
.menu-sistema { display: block; margin-top: 8px; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--kv-menu-fraco); }
#menu-modulos { flex: 1; overflow: auto; display: grid; gap: 1px; align-content: start; padding-top: 14px; border-top: 1px solid var(--kv-menu-linha); }
.menu-grupo { display: block; padding: 12px 10px 4px; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--kv-menu-fraco); }
.menu-grupo:first-child { padding-top: 2px; }
#menu-modulos a {
  display: flex; gap: 10px; align-items: center; padding: 8px 10px; color: var(--kv-menu-tinta); text-decoration: none;
  border-radius: var(--kv-raio-p); font-size: 13.5px; font-weight: 500; line-height: 1.3; transition: background .15s, color .15s;
  animation: kv-menu-entra 300ms var(--kv-curva) backwards;
}
#menu-modulos a:hover { background: var(--kv-menu-on); color: var(--kv-menu-ativo); }
#menu-modulos a.ativo { color: var(--kv-menu-ativo); font-weight: 600; background: var(--kv-menu-on); border-radius: 0 var(--kv-raio-p) var(--kv-raio-p) 0; position: relative; }
#menu-modulos a.ativo::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; background: var(--kv-nav); border-radius: 0 2px 2px 0; animation: kv-trilho 260ms var(--kv-curva); }
@keyframes kv-trilho { from { transform: scaleY(0); } }
@keyframes kv-menu-entra { from { opacity: 0; transform: translateX(-6px); } }
#menu-modulos a .icone { width: 18px; height: 18px; flex: none; display: grid; place-items: center; opacity: .85; }
#menu-modulos a .icone svg { width: 18px; height: 18px; display: block; }
#menu-modulos a.ativo .icone, #menu-modulos a:hover .icone { opacity: 1; }
#menu-modulos .contador { margin-left: auto; background: var(--kv-aviso-suave); color: var(--kv-aviso); border-radius: 10px; font-size: 11px; padding: 0 7px; font-weight: 600; }
.kv .menu-sair { display: flex; gap: 10px; align-items: center; margin-top: 10px; padding: 14px 10px 8px; background: none; border: 0; border-top: 1px solid var(--kv-menu-linha); color: var(--kv-tinta-2); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.kv .menu-sair:hover { color: var(--kv-marca); background: none; }
.menu-sair .icone { width: 18px; text-align: center; }

.coluna { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#topo { display: flex; align-items: center; gap: 14px; padding: 12px 24px; background: var(--kv-card); border-bottom: 1px solid var(--kv-linha); position: sticky; top: 0; z-index: 20; }
.topo-titulo { font-size: 13px; color: var(--kv-tinta-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topo-titulo b { color: var(--kv-tinta); font-weight: 600; }
.topo-usuario { margin-left: auto; display: flex; align-items: center; gap: 9px; flex: none; }
.avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--kv-marca-suave); color: var(--kv-marca); font-weight: 600; font-size: 12px; }
.topo-quem strong { display: block; font-size: 13px; font-weight: 600; line-height: 1.3; }
.topo-quem small { font-size: 11.5px; }
.topo-quem small a { color: var(--kv-tinta-2); }
main { padding: var(--kv-pad-tela); max-width: 1320px; width: 100%; min-width: 0; }

/* ── blocos ── */
.topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.topo .sub { color: var(--kv-tinta-2); margin-top: 4px; }
.card { background: var(--kv-card); border: 1px solid var(--kv-linha); border-radius: var(--kv-raio); padding: var(--kv-pad-card); }
.card + .card, .card + .bloco, .bloco + .card { margin-top: 16px; }
.linha { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.grade-2 { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
.lateral { position: sticky; top: 16px; }
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.numero { background: var(--kv-card); border: 1px solid var(--kv-linha); border-radius: var(--kv-raio); padding: 12px 14px; }
.numero b { display: block; font-family: var(--kv-mono); font-size: 20px; font-weight: 500; margin-top: 2px; }
.tabela-rola { overflow-x: auto; }
.voltar { display: inline-block; margin-bottom: 8px; font-size: 13px; }

/* ── campos ── */
input, select, textarea { font: inherit; color: var(--kv-tinta); background: var(--kv-papel); border: 1px solid var(--kv-linha-forte); border-radius: var(--kv-raio-p); padding: 8px 10px; outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--kv-nav); box-shadow: 0 0 0 3px var(--kv-nav-suave); }
textarea { width: 100%; min-height: 90px; resize: vertical; }
label.campo { display: grid; gap: 4px; font-size: var(--kv-t-apoio); color: var(--kv-tinta-2); }
.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
input.valor { width: 100%; text-align: right; font-family: var(--kv-mono); }

/* ── soltar o arquivo do Zé ── */
.soltar { border: 1.5px dashed var(--kv-linha-forte); border-radius: var(--kv-raio); padding: 22px; text-align: center; color: var(--kv-tinta-2); cursor: pointer; transition: border-color var(--kv-rapido), background var(--kv-rapido); }
.soltar:hover, .soltar.sobre { border-color: var(--kv-nav); background: var(--kv-nav-suave); color: var(--kv-tinta); }
.soltar b { color: var(--kv-tinta); }

/* ── comandas para conferir ── */
.comanda { display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; padding: 12px 0; border-bottom: 1px solid var(--kv-linha); align-items: center; }
.comanda:last-child { border-bottom: 0; }
.comanda .quem { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.comanda .olhar { color: var(--kv-tinta-2); font-size: var(--kv-t-apoio); grid-column: 1 / -1; margin-top: -4px; }
.comanda .botoes { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.comanda.feita { opacity: .78; }
.origem { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: var(--kv-raio-selo); }
.origem.ze { background: #2a2410; color: #f2c94c; }
.origem.foody { background: var(--kv-marca-suave); color: var(--kv-marca); }
.n-pedido { font-family: var(--kv-mono); font-size: 13.5px; }
.kv .kv-acao { font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; background: transparent; color: var(--kv-tinta-2); border: 1px solid var(--kv-linha-forte); border-radius: var(--kv-raio-p); padding: 6px 11px; white-space: nowrap; }
.kv .kv-acao:hover { background: var(--kv-card-2); border-color: var(--kv-tinta-3); color: var(--kv-tinta); }
.kv .kv-acao.principal { background: var(--kv-marca-cheia); border-color: var(--kv-marca-cheia); color: #fff; font-weight: 600; }
.kv .kv-acao.principal:hover { background: var(--kv-marca-cheia-forte); border-color: var(--kv-marca-cheia-forte); }
.kv .kv-acao.perigo { color: var(--kv-erro); border-color: var(--kv-erro-suave); }
.kv .kv-acao.perigo:hover { background: var(--kv-erro-suave); border-color: var(--kv-erro); }
.kv .kv-acao.ok-acao { color: var(--kv-ok); border-color: #1f4a2c; }
.kv .kv-acao.ok-acao:hover { border-color: var(--kv-ok); background: var(--kv-ok-suave); }
.kv .kv-acao.grande { padding: 9px 16px; font-size: 13.5px; }
.kv .kv-acao.whats { background: #1f8f4e; border-color: #1f8f4e; color: #fff; font-weight: 600; }
.kv .kv-acao.whats:hover { background: #24a35a; border-color: #24a35a; color: #fff; text-decoration: none; }
.kv .kv-acao:disabled { opacity: .55; cursor: not-allowed; }
.kv .kv-filtro { font: inherit; font-size: 12.5px; cursor: pointer; background: transparent; color: var(--kv-tinta-2); border: 1px solid var(--kv-linha); border-radius: 14px; padding: 5px 12px; }
.kv .kv-filtro:hover { border-color: var(--kv-linha-forte); color: var(--kv-tinta); background: transparent; }
a.kv-acao { display: inline-flex; align-items: center; text-decoration: none; }

/* ── fechamento ── */
.fecha-linha { display: grid; grid-template-columns: 1fr 120px; align-items: center; gap: 10px; padding: 5px 0; }
.fecha-linha .fixo { text-align: right; font-family: var(--kv-mono); padding-right: 10px; }
.fecha-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--kv-linha-forte); margin-top: 10px; padding-top: 12px; }
.fecha-total b { font-family: var(--kv-mono); font-size: 24px; font-weight: 500; }
.ajuste { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; font-size: 13px; padding: 4px 0; }
.ajuste .num { color: var(--kv-erro); }
.ajuste .num.mais { color: var(--kv-ok); }
.kv button.x { background: none; border: 0; color: var(--kv-tinta-3); cursor: pointer; font-size: 16px; padding: 0 4px; }
.kv button.x:hover { color: var(--kv-erro); background: none; }
pre.mensagem { background: var(--kv-papel); border: 1px solid var(--kv-linha); border-radius: var(--kv-raio-p); padding: 12px; white-space: pre-wrap; font-family: var(--kv-fonte); font-size: 13px; margin: 10px 0 0; max-height: 320px; overflow: auto; }
details > summary { cursor: pointer; color: var(--kv-tinta-2); font-size: 13px; margin: 8px 0; }

/* ── aviso flutuante ── */
#aviso { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 50; display: grid; gap: 8px; }
#aviso div { background: var(--kv-card-2); border: 1px solid var(--kv-linha-forte); border-radius: var(--kv-raio); padding: 10px 16px; box-shadow: var(--kv-sombra-flutuante); font-size: 13.5px; }
#aviso div.erro { border-color: var(--kv-erro); color: var(--kv-erro); }

/* ── celular: o menu vira uma faixa rolável no topo ── */
@media (max-width: 860px) {
  .sistema { flex-direction: column; }
  #menu { width: auto; height: auto; position: static; flex-direction: row; align-items: center; padding: 8px; gap: 6px; overflow-x: auto; }
  .menu-topo { padding: 0 6px 0 2px; flex: none; }
  .logo-konvem { width: 92px; }
  .menu-sistema, .menu-grupo, .menu-sair { display: none; }
  #menu-modulos { display: flex; border-top: 0; padding-top: 0; gap: 2px; overflow: visible; }
  #menu-modulos a { white-space: nowrap; padding: 7px 9px; }
  #topo { padding: 10px 16px; position: static; }
  main { padding: 18px 16px; }
  .grade-2 { grid-template-columns: 1fr; }
  .lateral { position: static; }
  .comanda { grid-template-columns: 1fr; }
  .comanda .botoes { justify-content: flex-start; }
}

/* valores e telefones não quebram linha; a tabela rola por dentro quando faltar espaço */
.kv-tabela td.n, .kv-tabela th.n, .tel { white-space: nowrap; }
.tel small { display: block; color: var(--kv-tinta-3); font-family: var(--kv-fonte); font-size: 11px; }
.grade-ficha { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; align-items: start; margin-bottom: 18px; }
@media (max-width: 860px) { .grade-ficha { grid-template-columns: 1fr; } }
.grade-ficha > .card { margin-top: 0; }
.kv .kv-filtro.on { border-color: var(--kv-nav); color: var(--kv-tinta); background: var(--kv-nav-suave); }
.origem.konvem { background: var(--kv-nav-suave); color: var(--kv-nav); }
.fecha-linha .fixo.alerta { color: var(--kv-aviso); }

/* desempenho: selos de alerta, linha do tempo do turno e sugestão de bônus */
.chip-al { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 4px; margin: 1px 3px 1px 0; white-space: nowrap; }
.chip-al.fim, .chip-al.chamado, .chip-al.semfila, .chip-al.falta { background: var(--kv-erro-suave); color: var(--kv-erro); }
.chip-al.aberto { background: var(--kv-aviso-suave); color: var(--kv-aviso); }
.chip-al.rota { background: rgba(59, 130, 246, .14); color: #7fb0ff; }
.ruim { color: var(--kv-aviso); }
ul.alertas { margin: 10px 0 0; padding-left: 0; list-style: none; display: grid; gap: 5px; font-size: 13px; }
.lt { margin-top: 12px; overflow-x: auto; }
.lt-trilho, .lt-eixo { min-width: 640px; }
.lt-trilho { position: relative; height: 26px; background: var(--kv-papel); border-radius: 4px; }
.lt-seg { position: absolute; top: 5px; bottom: 5px; border-radius: 2px; }
.lt-seg.f { background: #2b3340; } .lt-seg.r { background: #3b82f6; } .lt-seg.R { background: var(--kv-marca); top: 2px; bottom: 2px; } .lt-seg.i { background: #a77b0a; }
.lt-parado { position: absolute; top: 0; bottom: 0; border: 1px dashed var(--kv-erro); border-radius: 3px; background: repeating-linear-gradient(135deg, transparent 0 5px, rgba(240, 122, 110, .18) 5px 7px); }
.lt-fim { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--kv-tinta); }
.lt-fim.lote { background: var(--kv-aviso); }
.lt-grade { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--kv-linha); }
.lt-eixo { position: relative; height: 18px; font-size: 11px; color: var(--kv-tinta-3); font-family: var(--kv-mono); margin-top: 3px; }
.lt-eixo span { position: absolute; transform: translateX(-50%); }
.lt-legenda { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11.5px; color: var(--kv-tinta-2); margin-top: 6px; }
.lt-legenda i { display: inline-block; width: 13px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
.lt-legenda i.r { background: #3b82f6; } .lt-legenda i.R { background: var(--kv-marca); } .lt-legenda i.f { background: #2b3340; } .lt-legenda i.i { background: #a77b0a; }
.lt-legenda i.p { border: 1px dashed var(--kv-erro); }
.sugestao { display: grid; gap: 6px; margin-top: 12px; padding: 10px 12px; border: 1px solid #4a2420; background: var(--kv-erro-suave); border-radius: var(--kv-raio-p); font-size: 13px; }
.sugestao b { color: var(--kv-erro); }
.sugestao.feita { border-color: var(--kv-linha-forte); background: var(--kv-papel-2); display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--kv-tinta-2); }
.comanda .olhar.casco { color: var(--kv-aviso); }
.regra-diaria { font-size: 12.5px; color: var(--kv-tinta-2); background: var(--kv-papel); border: 1px solid var(--kv-linha); border-radius: var(--kv-raio-p); padding: 7px 10px; margin-bottom: 8px; }
.regra-diaria .kv-acao { margin-top: 6px; }
.chip-al.info { background: var(--kv-papel-2); color: var(--kv-tinta-2); }

/* nota de 0 a 100 */
.fx { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 4px; white-space: nowrap; }
.fx.Excelente { background: var(--kv-ok-suave); color: var(--kv-ok); }
.fx.Bom { background: var(--kv-nav-suave); color: var(--kv-nav); }
.fx.Regular { background: var(--kv-aviso-suave); color: var(--kv-aviso); }
.fx.Atenção { background: var(--kv-erro-suave); color: var(--kv-erro); }
.nota-num { font-family: var(--kv-mono); font-size: 15px; }
.pontos { font-size: 13px; margin-bottom: 6px; }
.nota-ficha { display: grid; justify-items: end; gap: 2px; }
.nota-ficha b { font-family: var(--kv-mono); font-size: 30px; font-weight: 500; line-height: 1; }
.kv-tabela td.c, .kv-tabela th.c { text-align: center; }
.kv-tabela td.c .fx { min-width: 76px; text-align: center; }

/* Estrelas: linha verde = recebe (como na planilha do Maestro) */
.kv-tabela tr.linha-verde td { background: var(--kv-ok-suave); }
.kv-tabela tr.linha-verde td:first-child { box-shadow: inset 3px 0 0 var(--kv-ok); }

/* Chuva: ícone e intensidade na hora da saída (fator do tempo esperado, não falta) */
.chuva { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 4px; white-space: nowrap; vertical-align: middle; }
.chuva svg { flex: none; }
.chuva.garoa { background: rgba(125, 170, 210, .12); color: #9cc3e6; }
.chuva.fraca { background: rgba(80, 150, 230, .16); color: #7fb3f0; }
.chuva.moderada { background: rgba(60, 120, 230, .22); color: #8fb4ff; }
.chuva.forte { background: rgba(70, 90, 230, .30); color: #b3c0ff; }
details.saidas { margin-top: 12px; }
details.saidas summary { cursor: pointer; color: var(--kv-tinta-2); font-size: 13px; }
details.saidas .kv-tabela { margin-top: 8px; font-size: 13px; }