/* pedidos.css — Pedidos v2 (Parte 6). Só usa as variáveis do tema (claro/escuro) do painel. */

/* ---------- barra superior ---------- */
.ped-barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.ped-alternador { display: inline-flex; padding: 4px; gap: 4px; border: 1px solid var(--border-color); border-radius: 999px; background: var(--surface-color); }
.ped-alterna { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 0; border-radius: 999px; background: none; color: var(--text-color); font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; }
.ped-alterna.ativo { background: var(--primary-color); color: var(--on-primary); }
.ped-resumo { color: var(--muted); font-size: 13.5px; }

/* ---------- etiqueta de fase ---------- */
.selo-fase { --fase-cor: var(--muted); display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--fase-cor) 45%, var(--surface-color)); background: color-mix(in srgb, var(--fase-cor) 13%, var(--surface-color)); color: var(--text-color); font: inherit; font-size: 13px; font-weight: 700; white-space: nowrap; }
.selo-fase > i:first-child { color: var(--fase-cor); }
.selo-fase.clicavel { cursor: pointer; }
.selo-fase.clicavel:hover { border-color: var(--fase-cor); }
.selo-seta { font-size: 10px; opacity: .6; }
.fase-NOVO { --fase-cor: #2d7ff9; } .fase-EM_ABERTO { --fase-cor: #8b5cf6; } .fase-EM_PRODUCAO { --fase-cor: #e08a00; }
.fase-PRONTO { --fase-cor: #0f9d7a; } .fase-CONCLUIDO { --fase-cor: #6b7280; } .fase-CANCELADO { --fase-cor: var(--danger-color); }

/* ---------- quadro ---------- */
.ped-abas { display: none; gap: 6px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 8px; scrollbar-width: none; }
.ped-abas::-webkit-scrollbar { display: none; }
.ped-aba { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border: 1px solid var(--border-color); border-radius: 999px; background: var(--surface-color); color: var(--text-color); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.ped-aba b { min-width: 22px; padding: 1px 6px; border-radius: 999px; background: var(--hover-bg); font-size: 12px; text-align: center; }
.ped-aba.ativa { background: var(--primary-color); border-color: var(--primary-color); color: var(--on-primary); }
.ped-aba.ativa b { background: rgba(255, 255, 255, .25); }

.ped-quadro { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; align-items: start; }
.ped-coluna { --fase-cor: var(--muted); background: color-mix(in srgb, var(--fase-cor) 6%, var(--surface-color)); border: 1px solid var(--border-color); border-top: 3px solid var(--fase-cor); border-radius: var(--radius-sm); min-width: 0; display: flex; flex-direction: column; max-height: calc(100dvh - 210px); }
.ped-coluna-topo { display: flex; align-items: center; gap: 8px; padding: 12px 12px 8px; }
.ped-coluna-topo i { color: var(--fase-cor); }
.ped-coluna-topo h2 { flex: 1; font-size: 13.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.ped-coluna-topo b { min-width: 24px; padding: 2px 7px; border-radius: 999px; background: var(--surface-color); font-size: 12px; text-align: center; }
.ped-coluna-corpo { display: flex; flex-direction: column; gap: 8px; padding: 4px 8px 10px; overflow-y: auto; }
.ped-vazio { margin: 6px 0; text-align: center; color: var(--muted); font-size: 13px; }

.ped-cartao { display: flex; flex-direction: column; gap: 5px; width: 100%; padding: 11px 12px; text-align: left; border: 1px solid var(--border-color); border-radius: 12px; background: var(--surface-color); color: var(--text-color); font: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.ped-cartao:hover { border-color: var(--primary-color); box-shadow: 0 4px 14px var(--sombra-cor); transform: translateY(-1px); }
.ped-cartao-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; }
.ped-cartao-nome { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ped-cartao-base { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 700; }
.ped-cartao-tempo { color: var(--muted); font-weight: 500; font-size: 12px; }
.ped-alerta { color: #c98200; margin-left: 6px; }
.ped-mais { width: 100%; font-size: 13px; padding: 8px; }

/* ---------- lista ---------- */
.ped-caixa-tabela { padding: 8px; }
.ped-rolagem { overflow-x: auto; }
.tabela-pedidos { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela-pedidos th { padding: 10px 12px; text-align: left; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--border-color); }
.tabela-pedidos td { padding: 11px 12px; border-bottom: 1px solid var(--border-color); vertical-align: middle; }
.tabela-pedidos tr.clicavel { cursor: pointer; }
.tabela-pedidos tr.clicavel:hover td, .tabela-pedidos tr.clicavel:focus-visible td { background: var(--hover-bg); }
.tabela-pedidos [data-col="total"] { text-align: right; font-variant-numeric: tabular-nums; }
.ped-paginacao { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 6px 0 90px; color: var(--muted); font-size: 14px; }

/* ---------- botão de filtro flutuante ---------- */
.ped-fab { position: fixed; right: 24px; bottom: 24px; z-index: 40; width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--primary-color); color: var(--on-primary); font-size: 20px; box-shadow: var(--shadow-forte); cursor: pointer; display: grid; place-items: center; }
.ped-fab:hover { filter: brightness(.94); }
.ped-fab-n { position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--danger-color); color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.ped-fab-n[hidden] { display: none; }

/* ---------- filtro (dentro do modal) ---------- */
.ped-par { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ped-filtro .campo-check { margin-bottom: 14px; }

/* ---------- popup do pedido ---------- */
.ped-detalhe { display: flex; flex-direction: column; gap: 14px; }
.ped-faixa { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--warning-color) 18%, var(--surface-color)); border: 1px solid color-mix(in srgb, var(--warning-color) 55%, var(--surface-color)); font-size: 14px; }
.ped-faixa span { flex: 1; min-width: 160px; }
.ped-faixa .btn { padding: 7px 14px; }
.ped-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ped-codigo { font-size: 24px; font-weight: 800; letter-spacing: .04em; }
.ped-data { color: var(--muted); font-size: 13px; }
.ped-total { font-size: 22px; font-weight: 800; color: var(--primary-color); }
.ped-bloco { display: flex; flex-direction: column; gap: 6px; }
.ped-linha { display: flex; gap: 12px; font-size: 14.5px; }
.ped-rotulo { flex: none; width: 112px; color: var(--muted); }
.ped-valor { min-width: 0; overflow-wrap: anywhere; }
.ped-whats { margin-left: 8px; display: inline-flex; align-items: center; gap: 5px; color: #128c4a; font-weight: 700; text-decoration: none; }
.ped-whats:hover { text-decoration: underline; }
.ped-btn-peq { align-self: flex-start; margin-top: 6px; padding: 7px 14px; font-size: 13px; }
.ped-obs { white-space: pre-wrap; padding: 10px 12px; border-radius: 12px; background: var(--hover-bg); font-size: 14.5px; }

.ped-itens { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ped-item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--border-color); border-radius: 14px; background: var(--surface-color); }
.ped-item-img { width: 64px; height: 64px; border-radius: 12px; overflow: hidden; display: grid; place-items: center; color: var(--muted); font-size: 22px; background: repeating-conic-gradient(rgba(128, 128, 128, .12) 0 25%, transparent 0 50%) 0 0 / 14px 14px; }
.ped-item-img img { width: 100%; height: 100%; object-fit: contain; }
.ped-item-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14px; }
.ped-item-info strong { overflow-wrap: anywhere; }
.ped-item-detalhe { color: var(--muted); font-size: 13px; }
.ped-svg { display: inline-flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 12.5px; font-weight: 700; }
.ped-svg.ok { color: var(--success-color); } .ped-svg.faltando { color: #b57700; }
.ped-item-qtd { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 13px; }
.ped-item-qtd strong { font-size: 16px; }

.ped-historico { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--border-color); display: flex; flex-direction: column; gap: 12px; }
.ped-historico li { position: relative; display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 14px; }
.ped-historico li::before { content: ""; position: absolute; left: -21px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--primary-color); }
.ped-historico li span { color: var(--muted); }
.ped-historico li small { flex-basis: 100%; color: var(--muted); font-size: 12.5px; }

.ped-acoes { display: flex; gap: 10px; flex-wrap: wrap; }
.ped-excluir { margin-top: 12px; }
.ped-faltas { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.8; }
.ped-grade-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.ped-grade-form .campo:nth-child(3), .ped-grade-form .campo:nth-child(4) { grid-column: 1 / -1; }
.ped-opcoes-fase { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ped-opcao-fase { --fase-cor: var(--muted); display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid var(--border-color); border-radius: 12px; cursor: pointer; font-weight: 600; font-size: 14px; }
.ped-opcao-fase i { color: var(--fase-cor); }
.ped-opcao-fase input { accent-color: var(--primary-color); }
.ped-opcao-fase:has(input:checked) { border-color: var(--fase-cor); background: color-mix(in srgb, var(--fase-cor) 12%, var(--surface-color)); }

/* ---------- tablet / celular ---------- */
@media (max-width: 1100px) { .tabela-pedidos [data-col="pag"] { display: none; } }
@media (max-width: 760px) {
  .ped-abas { display: flex; }
  .ped-quadro { display: block; }
  .ped-coluna { display: none; max-height: none; }
  .ped-coluna.ativa { display: flex; }
  .ped-coluna-topo { display: none; }
  .ped-coluna { border-top-width: 1px; background: none; border: 0; }
  .tabela-pedidos [data-col="quando"] { display: none; }
}
@media (max-width: 639px) {
  .ped-fab { right: 16px; bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }   /* acima da barra de menu do celular */
  .ped-item { grid-template-columns: 52px minmax(0, 1fr); }
  .ped-item-img { width: 52px; height: 52px; }
  .ped-item-qtd { grid-column: 2; flex-direction: row; align-items: baseline; gap: 10px; }
  .ped-rotulo { width: 92px; }
  .ped-opcoes-fase, .ped-grade-form { grid-template-columns: 1fr; }
  .ped-paginacao { margin-bottom: 150px; }
}

.ped-bloco .ped-vazio { text-align: left; margin: 0 0 4px; }