/* ======================= CARDS NO PADRÃO DO TMS — LISTA E KANBAN (27/10/2026) =======================
   Pedido do Charles: "Isso deve ser seguido em todos os lugares do TMS onde há
   cards". A linguagem nasceu nos cards da Programação (programacao-cards.css) e
   foi aplicada às Cotações de frete (Comercial e Operação). Este arquivo é a
   peça COMUM: qualquer tela com cards carrega /cards-padrao.css e usa as classes
   cq-* (ver docs/PADRAO-MOBILE-FIRST.md §2.1.2 "Cards: lista e kanban").
   · lista: card resumido numa linha no monitor (régua .cq-colunas), duas linhas
     no celular, faixa de cor da situação à esquerda, data em bloco, clique abre
     o corpo ali mesmo (.cq-aberto);
   · kanban: colunas .cq-kcol com .cq-kcard, rolagem lateral no celular;
   · seletor .cq-seg (Lista | Kanban), grupos .cq-grupo, urgência com a faixa e o
     pulso do styles.css (.is-urgente / .urg-faixa).
   Só variáveis do tema (styles.css), nenhuma cor de marca solta.          */
/* ===================== COTAÇÕES DE FRETE NO PADRÃO DOS CARDS (crm-cotacoes.js · 27/10/2026) =====================
   Pedido do Charles: mesmo padrão do painel de Operações (programacao-cards.css),
   com lista e kanban. Mesma geometria — faixa de cor à esquerda, data em bloco,
   uma linha no monitor, corpo que abre no clique — e só variáveis do tema.
   Padrão Apple com a marca ETMLOG (docs/PADRAO-MOBILE-FIRST.md §2.1.1). */
.s-aguardando{--cq-st:#F5B63C}.s-nova{--cq-st:var(--blue-light)}.s-respondida{--cq-st:#2FE38C}.s-aplicada{--cq-st:var(--orange)}.s-cancelada{--cq-st:var(--muted)}
.cq-barra{display:inline-flex;align-items:center;gap:8px;margin-left:auto}
.cq-barra + .c-check{margin-left:8px !important}
.cq-seg{display:inline-flex;padding:2px;border-radius:999px;background:var(--field-bg);border:1px solid var(--panel-line)}
.cq-seg button{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 12px;border:0;border-radius:999px;background:none;color:var(--ink-soft);font:600 12.5px var(--sans);cursor:pointer;transition:background .2s cubic-bezier(.2,.8,.2,1),color .2s}
.cq-seg button svg{width:15px;height:15px}
.cq-seg button.on{background:var(--panel-2);color:var(--text-strong);box-shadow:0 1px 2px rgba(0,0,0,.18)}
.cq-visual{font:500 12px var(--sans);color:var(--ink-soft);background:transparent;border:1px solid var(--panel-line);border-radius:8px;min-height:34px;padding:0 10px;cursor:pointer;white-space:nowrap}
.cq-visual:hover{color:var(--text-strong);border-color:var(--panel-line-strong)}

/* ---------- lista ---------- */
.cq-lista{display:flex;flex-direction:column;gap:6px}
.cq-colunas{display:none}
.cq-card,.cq-kcard{position:relative;background:var(--panel);border:1px solid var(--panel-line);border-radius:12px;overflow:hidden;--cq-st:var(--muted)}
.cq-card::before,.cq-kcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--cq-st)}
.cq-card.s-cancelada,.cq-kcard.s-cancelada{opacity:.62}
.cq-cab{display:grid;grid-template-columns:52px minmax(0,1fr) auto;grid-template-areas:"data quem chev" "data info sit";gap:4px 12px;align-items:center;padding:10px 12px 10px 15px;cursor:pointer;min-height:64px}
.cq-cab:hover,.cq-kcab:hover{background:rgba(255,255,255,.025)}
.cq-cab:focus-visible,.cq-kcab:focus-visible{outline:2px solid var(--blue-light);outline-offset:-2px}
.cq-data{grid-area:data;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;border-right:1px solid var(--panel-line);padding-right:10px;align-self:stretch}
.cq-data b{font-family:'Space Grotesk',var(--sans);font-size:22px;font-weight:700;color:var(--text-strong);font-variant-numeric:tabular-nums}
.cq-data span{font-size:11px;color:var(--ink-soft);margin-top:3px;white-space:nowrap}
.cq-data.cq-sem b{color:var(--muted)}
.cq-quem{grid-area:quem;min-width:0}
.cq-rota{display:flex;align-items:center;gap:6px;min-width:0;font-size:14px;font-weight:700;color:var(--text-strong)}
.cq-cid{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.cq-seta{color:var(--muted);flex:none;font-weight:400}
.cq-tag{flex:none;font-size:11px;font-weight:500;color:var(--ink-soft);border:1px solid var(--panel-line);border-radius:6px;padding:0 5px}
.cq-cliq{display:flex;gap:6px;align-items:baseline;min-width:0;margin-top:2px}
.cq-cli{font-size:11.5px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.cq-ref{font-size:11.5px;color:var(--muted);white-space:nowrap;font-family:'JetBrains Mono',var(--mono);font-variant-numeric:tabular-nums}
.cq-carga{grid-area:info;font-size:12.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.cq-resp{font-size:13px;font-weight:700;color:var(--text-strong);white-space:nowrap;font-family:'JetBrains Mono',var(--mono);font-variant-numeric:tabular-nums}
.cq-resp small{font-weight:500;color:var(--muted)}
.cq-resp.cq-aplic{color:var(--accent-text)}
.cq-resp.cq-esperando{color:var(--warn-text);font-weight:600;font-family:var(--sans)}
.cq-resp.cq-vazio{color:var(--muted);font-weight:400;font-family:var(--sans)}
.cq-cab > .cq-resp{display:none}
.cq-sit{grid-area:sit;justify-self:end;display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--ink);white-space:nowrap}
.cq-sit i{width:8px;height:8px;border-radius:50%;background:var(--cq-st);flex:none}
.cq-sit.s-nova{color:var(--info-text)}
.cq-chev{grid-area:chev;justify-self:end;color:var(--muted);transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.cq-aberto .cq-chev{transform:rotate(180deg)}

/* ---------- card aberto ---------- */
.cq-corpo{border-top:1px solid var(--panel-line);padding:14px 14px 12px 17px;background:var(--field-bg)}
.cq-cols{display:grid;grid-template-columns:1fr;gap:14px}
.cq-col h4{margin:0 0 8px;font-size:12px;font-weight:700;color:var(--ink-soft)}
.cq-kv{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px solid var(--panel-line);font-size:13px}
.cq-kv span{color:var(--ink-soft)}
.cq-kv b{color:var(--text-strong);font-weight:600;text-align:right;min-width:0;overflow-wrap:anywhere}
.cq-kv b em{color:var(--muted);font-style:normal;font-weight:400}
.cq-num{font-family:'JetBrains Mono',var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums}
.cq-valores{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.cq-valores li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--panel-line);border-radius:10px;background:var(--panel)}
.cq-valores li b{color:var(--text-strong)}
.cq-valores li span{font-size:12.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cq-valores li small{color:var(--muted)}
.cq-valores li em{font-style:normal;font-size:11.5px;font-weight:700;color:var(--accent-text)}
.cq-valores li.usado{border-color:var(--orange);background:rgba(242,117,7,.08)}
.cq-valores li.nao-usado{opacity:.6}
.cq-obs{margin:8px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink)}
.cq-obs b{color:var(--ink-soft)}
.cq-nada{margin:0;font-size:12.5px;color:var(--muted)}
.cq-acoes{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin-top:14px;padding-top:12px;border-top:1px solid var(--panel-line)}
.cq-acoes .btn-primary,.cq-acoes .btn-ghost{width:auto;border-radius:10px;padding:0 16px}
.cq-acoes .cq-link{display:inline-flex;align-items:center;text-decoration:none}

/* ---------- kanban ---------- */
.cq-kanban{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,82vw);gap:10px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory}
.cq-kcol{scroll-snap-align:start;display:flex;flex-direction:column;min-width:0;background:var(--field-bg);border:1px solid var(--panel-line);border-radius:14px}
.cq-kcol > header{display:grid;grid-template-columns:1fr auto;gap:2px 8px;padding:12px 12px 10px;border-bottom:1px solid var(--panel-line)}
.cq-kcol > header b{font-size:14px;color:var(--text-strong)}
.cq-kcol > header span{font-size:12px;font-weight:700;background:var(--panel-2);border-radius:10px;padding:1px 9px;align-self:center}
.cq-kcol > header small{grid-column:1/-1;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cq-kcol.k-0 > header{box-shadow:inset 0 3px 0 #F5B63C}.cq-kcol.k-1 > header{box-shadow:inset 0 3px 0 #2FE38C}.cq-kcol.k-2 > header{box-shadow:inset 0 3px 0 var(--orange)}.cq-kcol.k-3 > header{box-shadow:inset 0 3px 0 var(--muted)}
.cq-kcol > header{border-radius:14px 14px 0 0}
.cq-kcol-l{display:flex;flex-direction:column;gap:8px;padding:10px;min-height:120px}
.cq-kvazio{font-size:12.5px;color:var(--muted);text-align:center;padding:18px 0}
.cq-kcab{padding:10px 10px 10px 13px;cursor:pointer;display:flex;flex-direction:column;gap:6px}
.cq-k-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cq-kcard .cq-data{flex-direction:row;gap:6px;align-items:baseline;border:0;padding:0}
.cq-kcard .cq-data b{font-size:17px}
.cq-rota-v{flex-wrap:wrap;gap:2px 6px;line-height:1.35}
.cq-rota-v .cq-cid{white-space:normal}
.cq-kcard .cq-carga{padding-top:6px;border-top:1px solid var(--panel-line)}
.cq-kcorpo{border-top:1px solid var(--panel-line);padding:10px 10px 10px 13px;background:var(--field-bg)}
.cq-kcorpo .cq-acoes{flex-direction:column;align-items:stretch;margin-top:10px;padding-top:10px}
.cq-kcorpo .cq-acoes > *{justify-content:center}

/* ---------- tablet em diante ---------- */
@media (min-width:641px){
  .cq-cols{grid-template-columns:1fr 1fr}
  .cq-cols > .cq-col:first-child{grid-row:span 2}
  .cq-kanban{grid-auto-columns:minmax(280px,1fr)}
}
@media (max-width:640px){
  .cq-barra{width:100%;margin-left:0;justify-content:space-between}
  .cq-acoes > *{flex:1 1 100%}
}
/* ---------- notebook e monitor: card fechado em UMA linha, com régua de colunas ---------- */
@media (min-width:1025px){
  .cq-colunas{display:grid;grid-template-columns:64px minmax(0,1.5fr) minmax(0,1.3fr) minmax(0,1fr) 130px 150px 20px;gap:14px;padding:0 14px 2px 16px;
    font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .cq-cab{grid-template-columns:64px minmax(0,1.5fr) minmax(0,1.3fr) minmax(0,1fr) 130px 150px 20px;grid-template-areas:"data rota cli info resp sit chev";gap:14px;padding:9px 14px 9px 16px;min-height:58px}
  .cq-quem{display:contents}
  .cq-quem .cq-rota{grid-area:rota}
  .cq-quem .cq-cliq{grid-area:cli;flex-direction:column;gap:1px;margin:0}
  .cq-cab > .cq-resp{display:block;grid-area:resp;text-align:right}
  .cq-cols{grid-template-columns:1.2fr 1fr 1fr}
  .cq-cols > .cq-col:first-child{grid-row:auto}
  .cq-kanban{grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible}
}
@media (prefers-reduced-motion:reduce){ .cq-chev,.cq-seg button{transition:none} }
/* ajuste 27/10: cliente em cima e proposta embaixo (o nº da proposta tomava a linha e sumia o cliente);
   no celular e no kanban a rota quebra linha em vez de cortar o nome da cidade */
.cq-cliq{flex-direction:column;align-items:stretch;gap:1px}
.cq-ref{overflow:hidden;text-overflow:ellipsis}
@media (max-width:1024px){ .cq-rota{flex-wrap:wrap;row-gap:0;line-height:1.3} .cq-cid{white-space:normal} }
.cq-rota-v{flex-wrap:wrap}

/* ===== COTAÇÕES · 2º pedido (27/10/2026): em aberto no topo, grupos e urgência ===== */
.cq-grupo{display:flex;align-items:baseline;gap:8px;margin:14px 2px 2px;font-size:13px;font-weight:700;color:var(--text-strong)}
.cq-grupo:first-of-type{margin-top:2px}
.cq-grupo span{font-size:11.5px;font-weight:700;background:var(--panel-2);border-radius:10px;padding:1px 8px;color:var(--ink)}
.cq-grupo small{font-size:12px;font-weight:400;color:var(--muted)}
.cq-grupo.g-0 b{color:#F5B63C}
/* em aberto: destaque âmbar, para saltar aos olhos entre as respondidas */
.cq-sit.s-aguardando{color:#F5B63C}
.cq-resp.cq-esperando{color:#F5B63C}
/* urgência: o pulso vem de styles.css (.is-urgente.urg-*), igual ao card da Programação */
.cq-card.is-urgente,.cq-kcard.is-urgente{overflow:visible}
.cq-urg{margin:0;border-radius:11px 11px 0 0;padding:7px 12px 7px 15px;font-size:12.5px}
.cq-kcard .cq-urg{padding:6px 10px 6px 13px;font-size:11.5px}
.cq-urg .urg-txt{overflow:hidden;text-overflow:ellipsis}
.cq-urg-btn{border-color:rgba(239,68,68,.55) !important;color:#f87171 !important}
.cq-urg-btn:hover{background:rgba(239,68,68,.12) !important}
.q-chip.cq-chip-novos{border-color:rgba(245,182,60,.6);color:#F5B63C}
.q-chip.cq-chip-novos.on{background:rgba(245,182,60,.16)}
.urg-box .urg-niveis{margin-bottom:12px}

/* ===== card cujo corpo já vem no HTML e só se esconde (27/10/2026) =====
   Usado quando o corpo tem formulário (ex.: resposta da Operação às cotações):
   fechar o card não apaga o que foi digitado. */
.cq-dobravel:not(.cq-aberto) > .cq-corpo,.cq-dobravel:not(.cq-aberto) > .cq-kcorpo{display:none}
.cq-dobravel.cot-destaque{box-shadow:0 0 0 3px #f59e0b,0 0 24px rgba(245,158,11,.5);transition:box-shadow .3s}
.cq-op .cq-corpo .k,.cq-op .cq-kcorpo .k{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.cq-op .cq-corpo .cot-admin{margin-top:10px}
.cq-op .cq-kcorpo .cot-linha{grid-template-columns:1fr}
.cq-op .cq-kcorpo .cot-grid>div{flex:1 1 40%}
.cq-op .cq-sit.s-respondida{color:var(--ink-soft);font-weight:500}
/* kanban de 3 colunas (Urgentes · Aguardando · Respondidas) */
.cq-kcol.k-urg > header{box-shadow:inset 0 3px 0 #ef4444}
@media (min-width:1025px){ .cq-kanban.cq-k3{grid-template-columns:repeat(3,minmax(0,1fr))} }
.sec-cot .cot-abas .cq-seg{margin-left:12px;align-self:center}
.sec-cot .cot-abas .cq-seg button{border-bottom:0;opacity:1;padding:0 12px;min-height:34px;font-size:12.5px}
@media (max-width:640px){ .sec-cot .cot-abas{flex-wrap:wrap;row-gap:8px} .sec-cot .cot-abas .cq-seg{order:-1;margin:0 0 4px} }

/* ===== funis do Comercial em lista (27/10/2026) — Pré-Vendas, Vendas, Pós-Vendas =====
   A faixa à esquerda é a cor da etapa (configurada em "Etapas"); a pílula mostra a situação. */
.cq-sit.s-aberto i{background:var(--blue-light)}
.cq-sit.s-atrasado{color:var(--danger-text)} .cq-sit.s-atrasado i{background:#ef4444}
.cq-sit.s-aprovada{color:var(--ok-text)} .cq-sit.s-aprovada i{background:#2FE38C}
.cq-sit.s-ganho{color:var(--accent-text)} .cq-sit.s-ganho i{background:var(--orange)}
.cq-neg .cq-tit{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cq-neg .cq-carga{display:flex;flex-direction:column;gap:1px}
.cq-neg .cq-carga .cq-etq{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cq-neg .cq-mudo{color:var(--muted)}
.cq-neg .cq-kv a{color:var(--blue-light);text-decoration:none}
.cq-grupo[style*="--cq-gc"] b::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--cq-gc);margin-right:7px;vertical-align:1px}
#q-vista{display:inline-flex}

/* ===== fotos da mercadoria no card da cotação (Operação · 27/10/2026) =====
   Dados do pedido à esquerda, galeria de 4 espaços à direita; espaço sem foto
   aparece tracejado com "sem foto". No celular a galeria desce para baixo dos dados. */
.cq-op-topo{display:grid;grid-template-columns:1fr;gap:12px;align-items:start}
@media (min-width:900px){ .cq-op-topo{grid-template-columns:minmax(0,1fr) minmax(320px,46%)} }
.cq-kcorpo .cq-op-topo{grid-template-columns:1fr}
.cq-fotos .k{margin-bottom:6px}
.cq-fotos-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.cq-foto{position:relative;aspect-ratio:4/3;border-radius:10px;overflow:hidden;border:1px solid var(--panel-line);background:var(--panel);padding:0;display:flex;align-items:center;justify-content:center}
button.cq-foto{cursor:zoom-in;transition:transform .2s cubic-bezier(.2,.8,.2,1),border-color .2s}
button.cq-foto:hover{border-color:var(--blue-light);transform:translateY(-1px)}
.cq-foto img{width:100%;height:100%;object-fit:cover;display:block}
.cq-foto.vazia{border-style:dashed;background:transparent}
.cq-foto span{font-size:11px;color:var(--muted)}
.cq-foto.carregando{background:linear-gradient(90deg,var(--panel),var(--panel-2),var(--panel));background-size:200% 100%;animation:cqBrilho 1.2s linear infinite}
@keyframes cqBrilho{from{background-position:200% 0}to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){ .cq-foto.carregando{animation:none} button.cq-foto{transition:none} }

/* ======================= COR DA SITUAÇÃO SÓ NA FAIXA DA ESQUERDA (27/10/2026) =======================
   Pedido do Charles: "a diferenciação dos cards deve se dar pela cor do detalhe do
   lado esquerdo, ao lado da data, no lugar de contornar o card com uma cor. Este
   critério deve ser aplicado a todos os cards de lista do TMS, assim como já
   acontece na Operação". Então: contorno sempre neutro; a faixa de 4 px à esquerda
   carrega a situação. (A faixa às vezes saía cinza: a cor padrão do card vinha
   depois das cores de situação no arquivo e ganhava. Aqui a situação tem mais peso.)
   A urgência continua com o pulso próprio (.is-urgente), igual à Programação.
   Paleta de situação (a mesma em todo card de lista):
     aguardando/em aberto · âmbar   nova resposta · azul-claro   respondida/concluída · verde
     aplicada/ganho · laranja        atrasado/vencido · vermelho   em andamento · azul
     cancelada · cinza */
.cq-card::before,.cq-kcard::before{width:4px}
.cq-card.s-aguardando,.cq-kcard.s-aguardando{--cq-st:#F5B63C}
.cq-card.s-nova,.cq-kcard.s-nova{--cq-st:var(--blue-light)}
.cq-card.s-respondida,.cq-kcard.s-respondida{--cq-st:#2FE38C}
.cq-card.s-aplicada,.cq-kcard.s-aplicada{--cq-st:var(--orange)}
.cq-card.s-cancelada,.cq-kcard.s-cancelada{--cq-st:var(--muted)}
.cq-card.s-aberto,.cq-kcard.s-aberto{--cq-st:var(--blue)}
.cq-card.s-atrasado,.cq-kcard.s-atrasado{--cq-st:#ef4444}
.cq-card.s-aprovada,.cq-kcard.s-aprovada{--cq-st:#2FE38C}
.cq-card.s-ganho,.cq-kcard.s-ganho{--cq-st:var(--orange)}
.cq-sit.s-aberto i{background:var(--blue)}


/* seletor "Ordenar" das listas (27/10/2026) */
.cq-ordem{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);white-space:nowrap}
.cq-ordem select{background:var(--field-bg);border:1px solid var(--panel-line-strong);border-radius:10px;padding:0 28px 0 10px;min-height:34px;color:var(--ink);font:500 13px var(--sans);max-width:240px}
@media (max-width:640px){ .cq-ordem{width:100%} .cq-ordem select{flex:1;max-width:none;min-height:40px} }

/* ===== abas da Operação em lista (28/10/2026): Não programadas, Ocorrências, Avaliações =====
   O card não abre no lugar: o clique abre a mesma janela de antes, por isso a seta aponta
   para a direita. No ranking, o bloco da esquerda mostra a posição. */
.cq-op-l .cq-chev-ir{transform:none}
.cq-op-l .cq-cab:hover .cq-chev-ir{color:var(--blue-light)}
.cq-op-l .cq-carga{display:flex;flex-direction:column;gap:1px}
.cq-op-l .cq-carga .cq-etq{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cq-op-l .cq-tit{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cq-data.cq-pos b{font-size:19px}
.cq-estrelas{color:#F5B63C;letter-spacing:1px;font-family:var(--sans)}
.cq-op-l .cq-resp small{font-weight:500;color:var(--danger-text)}