/* ============================================================
   Pedidos v2 (Fase A3) - cards de pedido do dia a dia + rota
   /pedidos (visão de semana). Compartilhado com o Hoje via
   components/PedidoCard.jsx. Tokens do styles.css (whitelabel
   --brand preservado). Nunca travessão, só hífen.
   ============================================================ */

:root{
  --whats:var(--srv-whats); /* verde do WhatsApp: um tom só (brand/tokens.css) */
  --pv2-amber:var(--srv-warn);
  --pv2-amber-soft:var(--srv-warn-soft);
  --pv2-amber-line:#f2dcae;
}

/* coluna central do feed (Hoje e Pedidos) */
.pv2-page{max-width:760px;margin:0 auto}

/* ---------- card de pedido ---------- */
.pv2-card{background:var(--creme2);border:1px solid var(--linha);border-radius:16px;box-shadow:var(--shadow-sm);padding:14px 14px 12px}
.pv2-card+.pv2-card{margin-top:10px}
.pv2-card.late{border-color:var(--pv2-amber-line)}

.pv2-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;width:100%;background:none;border:none;padding:0;cursor:pointer;text-align:left;font-family:var(--sans);color:var(--marrom)}
.pv2-who{display:flex;align-items:center;gap:10px;min-width:0}
.pv2-avatar{width:40px;height:40px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:15px;flex:0 0 auto}
.pv2-avatar.a1{background:#E2F5F2;color:#0C9488}
.pv2-avatar.a2{background:#E8EEF3;color:#51708a}
.pv2-avatar.a3{background:#EAE7F8;color:#5b4bb3}
.pv2-avatar.a4{background:#FBEAE7;color:#b0453a}
.pv2-avatar.a5{background:#E7F3EC;color:#3f8f5b}
.pv2-id{min-width:0}
.pv2-nome{display:block;font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:-.005em;line-height:1.25}
.pv2-itens{display:block;font-size:13px;color:var(--suave);margin-top:2px;line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pv2-meta{text-align:right;flex:0 0 auto}
.pv2-hora{display:block;font-family:var(--display);font-weight:600;font-size:13.5px;line-height:1.3;font-variant-numeric:tabular-nums}
.pv2-hora.late{color:var(--pv2-amber)}
.pv2-valor{display:block;font-family:var(--display);font-size:12.5px;color:var(--suave);margin-top:2px}

.pv2-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;flex-wrap:wrap}
.pv2-foot .pv2-acao{margin-left:auto}
.pv2-badges{display:flex;gap:6px;flex-wrap:wrap;min-width:0}

/* ---------- badges ----------
   Passe de calmaria: fundo neutro + dot colorido + texto na tinta.
   A cor continua contando o estado, sem pill cheio colorido. */
.pv2-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--display);font-size:11px;font-weight:600;padding:4px 10px;border-radius:99px;letter-spacing:.01em;white-space:nowrap;background:var(--creme);border:1px solid var(--linha);color:var(--marrom)}
.pv2-badge i{display:none}
.pv2-badge::before{content:"";width:7px;height:7px;border-radius:50%;flex:none;background:var(--suave)}
.pv2-badge.fazer::before{background:var(--pv2-amber)}
.pv2-badge.pronto::before{background:var(--brand)}
.pv2-badge.entregue::before{background:var(--suave)}
.pv2-badge.entregue{color:var(--suave)}
.pv2-badge.sinal::before{background:var(--verde)}
.pv2-badge.cobrar::before{background:var(--vermelho)}
.pv2-badge.loja::before{background:var(--suave)}
.pv2-badge.atrasado::before{background:var(--pv2-amber)}

/* ---------- botão de próxima ação (1 por card, toque >= 48px) ---------- */
.pv2-acao{min-height:48px;padding:0 16px;font-size:13.5px;border-radius:13px;flex:0 0 auto}
.pv2-acao i{font-size:18px}
.btn-primary{background:var(--brand);color:var(--on-brand);box-shadow:0 2px 8px rgba(12,29,27,.14)}
.btn-primary:hover{background:var(--brand-strong)}
.btn-whats{background:var(--whats);color:#fff;box-shadow:0 2px 8px rgba(12,29,27,.14)}
.btn-whats:hover{background:#1e8a4b}

/* ---------- cabeçalho da semana ---------- */
.pv2-head{padding:2px 0 12px}
.pv2-head h1{font-size:22px}
.pv2-sub{color:var(--suave);font-size:13.5px;margin-top:3px}

/* chips de filtro */
.pv2-chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:none}
.pv2-chips::-webkit-scrollbar{display:none}
.pv2-chip{flex:0 0 auto;min-height:44px;display:inline-flex;align-items:center;padding:0 16px;border-radius:99px;border:1.5px solid var(--linha);background:var(--creme2);color:var(--suave);font-family:var(--display);font-size:13.5px;font-weight:600;cursor:pointer;white-space:nowrap}
.pv2-chip.on{background:var(--marrom);border-color:var(--marrom);color:#fff}

/* grupo por dia */
.pv2-dia{display:flex;align-items:baseline;gap:8px;margin:20px 0 10px;font-family:var(--display);font-weight:700;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--marrom)}
.pv2-dia small{font-family:var(--sans);font-weight:500;font-size:12px;color:var(--suave);text-transform:none;letter-spacing:0}
.pv2-dia.today::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--brand);align-self:center}
.pv2-dia.late{color:#8a6000}

/* ---------------------------------------------------------------------------
   v3 (09/ago/2026): a régua de recortes, as faixas e o rótulo de recorte.
   --------------------------------------------------------------------------- */

/* o número dentro do chip: é ele que responde "quantos chegaram hoje" sem
   custar toque nenhum */
.pv2-chip b{font-weight:700;font-size:15px;color:var(--marrom);margin-right:5px}
.pv2-chip.on b{color:var(--on-brand)}
.pv2-chip .ti-x{font-size:15px;margin-left:6px;opacity:.85}

/* O h1 só existe no desktop, onde sobra altura. No celular ele e o subtítulo
   comiam 74px pra dizer um número que estava errado. */
.pv2-h1-desk{display:none}

/* FAIXA: uma fila inteira em UMA linha. Os 9 atrasados empurravam o bloco de
   HOJE pra 1718px de rolagem; agora o primeiro cartão é de hoje. */
.pv2-faixa{display:flex;align-items:center;gap:11px;width:100%;text-align:left;min-height:48px;
  padding:9px 13px;margin-bottom:10px;border-radius:14px;border:1px solid transparent;
  font-family:var(--sans);font-size:13.5px;line-height:1.35;cursor:pointer}
.pv2-faixa > .ti{font-size:19px;flex:none}
.pv2-faixa .txt{flex:1;min-width:0}
.pv2-faixa b{display:block;font-weight:600}
.pv2-faixa small{display:block;font-size:12px;opacity:.85;margin-top:1px}
.pv2-faixa .seta{font-size:18px;opacity:.55;flex:none}
.pv2-faixa.loja{background:var(--srv-saffron-soft);border-color:#F0DEB4;color:var(--srv-saffron-ink)}
.pv2-faixa.atraso{background:var(--srv-danger-soft);border-color:#EBC9C3;color:#8f2c20}

/* rótulo de recorte: mesma família do rótulo de dia, na cor da marca, porque
   ele conta OUTRA coisa que não o dia */
.pv2-dia.recorte{color:var(--brand-ink);margin-top:14px}

/* barra do recorte aberto por faixa: é o caminho de volta pra agenda */
.pv2-barra{display:flex;align-items:center;gap:10px;min-height:34px;margin-bottom:10px;
  padding:6px 8px 6px 13px;border-radius:12px;background:var(--brand);color:var(--on-brand);
  font-size:12.5px;font-weight:600}
.pv2-barra button{margin-left:auto;background:none;border:0;color:inherit;font-size:17px;
  padding:4px 6px;cursor:pointer;line-height:1}

/* a hora de CHEGADA: linha própria, rotulada, acima da hora de entrega */
.pv2-chegou{display:block;font-size:11.5px;color:var(--suave);margin-bottom:1px;white-space:nowrap}

/* o rótulo de dia gruda no topo: custa 0px de altura e é o que impede perder o
   contexto quando a régua sai da tela */
.pv2-dia{position:sticky;top:0;z-index:5;background:var(--creme);padding-top:6px}

/* dia sem pedido */
.pv2-livre{text-align:center;padding:16px 14px;border:1.5px dashed var(--linha);border-radius:16px;color:var(--suave);font-size:13.5px}
.pv2-livre .big{font-size:24px;display:block;margin-bottom:2px}

/* "mais pra frente" colapsado */
.pv2-mais{margin-top:20px}
.pv2-mais>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;min-height:48px;border-radius:13px;border:1.5px dashed var(--linha);color:var(--suave);font-size:13.5px;font-weight:600}
.pv2-mais>summary::-webkit-details-marker{display:none}
.pv2-mais>summary i{transition:transform .2s ease}
.pv2-mais[open]>summary i{transform:rotate(180deg)}
.pv2-mais[open]>summary{margin-bottom:10px}

/* estado vazio geral */
.pv2-vazio{text-align:center;padding:34px 16px;color:var(--suave)}
.pv2-vazio .big{font-size:30px;display:block;margin-bottom:6px}

/* detalhe */
.pv2-num{font-size:13px;color:var(--suave);font-weight:500}
.pv2-tel{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--brand-ink);margin:2px 0 6px}

/* ============================================================
   Desktop: lista + detalhe ao lado (08/ago/2026)
   Antes o desktop era a coluna do celular esticada, e abrir um
   pedido cobria a tela inteira com o modal - a cada pedido se
   perdia o lugar na lista. Agora o pedido escolhido mora num
   painel grudado à direita, e a lista continua ali.
   Nunca travessão, só hífen.
   ============================================================ */
@media(min-width:1180px){
  /* a coluna de 760px era o layout do celular esticado: com o painel ao lado a
     pagina passa a usar a largura toda */
  .pv2-page.pv2-desk{max-width:1400px}
  /* o h1 volta aqui, onde sobra altura - e sem subtitulo */
  .pv2-desk .pv2-h1-desk{display:block;font-size:24px;margin:0 0 12px}
  .pv2-desk .pv2-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,380px);gap:20px;align-items:start}
  .pv2-desk .pv2-feed{min-width:0}
  /* >>> O NUMERO MAGICO MORREU (09/ago). <<<
     Aqui havia `margin-top:49px`, calibrado a mao pra compensar a margem do
     primeiro .pv2-dia. Com as faixas condicionais no topo do feed ele quebra
     EM SILENCIO: alinha no tenant sem atraso e desalinha no tenant com atraso,
     e ninguem descobre porque depende do dado. O conserto de verdade e zerar a
     margem do primeiro filho do feed, seja ele rotulo de dia ou faixa. */
  .pv2-desk .pv2-feed > *:first-child{margin-top:0}
  .pv2-painel{position:sticky;top:16px;margin-top:0;max-height:calc(100vh - 96px);overflow-y:auto;background:var(--creme2);border:1px solid var(--linha);border-radius:16px;box-shadow:var(--shadow-sm);padding:16px}
  .pv2-painel-vazio{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:200px;color:var(--suave);font-size:13.5px;text-align:center;padding:20px 14px}
  .pv2-painel-vazio i{font-size:30px;color:var(--linha)}
  /* o card escolhido fica marcado: sem isso a pessoa perde de vista qual
     pedido o painel está mostrando */
  .pv2-desk .pv2-card.sel{border-color:var(--brand);box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 22%,transparent)}
}
@media(min-width:1500px){
  .pv2-desk .pv2-split{grid-template-columns:minmax(0,1fr) 440px}
}

/* remarcar data e hora do pedido (o fluxo que não existia) */
.pv2-remarcar-lnk{margin-left:8px;font-size:12.5px}
.pv2-remarcar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px;padding:10px 0 4px;border-bottom:1px solid var(--linha)}
.pv2-remarcar label{display:flex;flex-direction:column;gap:3px;font-size:11.5px;font-weight:600;color:var(--suave)}
.pv2-remarcar input{min-height:40px;padding:0 10px;border:1px solid var(--linha);border-radius:10px;background:var(--creme2);font-family:var(--sans);font-size:14px;color:var(--marrom)}
.pv2-remarcar .btn{min-height:40px}

/* Endereço de entrega com atalho pro mapa. Dois destinos de propósito: quem
   entrega no Brasil costuma usar Waze, mas o link do Waze só serve pra quem tem
   o app - o do Maps abre no navegador quando não há app nenhum. */
.pv2-end{display:flex;flex-direction:column;align-items:flex-end;gap:5px;text-align:right}
.pv2-mapas{display:flex;gap:6px}
.pv2-mapas a{display:inline-flex;align-items:center;gap:4px;min-height:32px;padding:0 10px;border:1px solid var(--linha);border-radius:20px;background:var(--creme2);font-size:12px;font-weight:600;color:var(--brand-strong);white-space:nowrap}
.pv2-mapas a:hover{background:var(--brand-softer);border-color:var(--brand)}
.pv2-mapas a i{font-size:14px}
.pv2-sem-end{display:flex;align-items:center;gap:8px;color:#9a6b00;font-size:13px}
.pv2-sem-end a{color:var(--brand-strong);font-weight:600;text-decoration:underline}