/* Peças das telas do sistema já refeitas com o design system. Só usa tokens de static/ds/tokens.css. */

/* Filamentos */
.carretel { display: flex; align-items: center; gap: 12px; min-width: 0; }
#tab-carreteis td:first-child { white-space: normal; }  /* nome longo quebra linha em vez de empurrar as colunas */
#tab-carreteis td:first-child .principal { overflow-wrap: anywhere; }
.cor-carretel { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--cor-borda); }
.restante { display: grid; gap: 6px; min-width: 150px; justify-items: end; }
.restante .medidor { width: 100%; }
.medidor--sucesso span { background: var(--cor-sucesso); }
.medidor--atencao span { background: var(--cor-atencao); }
.medidor--critico span { background: var(--cor-critico); }
.medidor--neutro span { background: var(--cor-texto-discreto); }
.ajuste-carretel { display: grid; gap: 6px; padding: 8px 8px 12px; border-bottom: 1px solid var(--cor-borda); margin-bottom: 4px; }
.ajuste-carretel label { font-weight: 700; font-size: .8125rem; }
.ajuste-carretel .linha { display: flex; gap: 8px; }
.ajuste-carretel input { width: 9ch; }
.menu-pop form { margin: 0; }
#painel-carreteis > .discreto { margin: 0 0 12px; }
@media (min-width: 768px) {
  .filtros--4 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; }
}
/* Carretéis no celular (< 640px): o modo cartão do pacote foi feito para as colunas de Trabalhos; aqui as colunas são
   carretel, restante, situação, preço/kg, ações. Linha 1: carretel + ações; 2: situação + preço; 3: restante. */
@media (max-width: 639px) {
  #tab-carreteis tbody tr[data-linha] { grid-template-columns: minmax(0, 1fr) auto auto; }
  #tab-carreteis tbody td:nth-child(1) { grid-column: 1 / 3; grid-row: 1; }
  #tab-carreteis tbody td.acao-col { grid-column: 3; grid-row: 1; }
  #tab-carreteis tbody td:nth-child(3) { grid-column: 1; grid-row: 2; }
  #tab-carreteis tbody td:nth-child(4) { grid-column: 2 / -1; grid-row: 2; color: var(--cor-texto-2); font-size: var(--tipo-rotulo-tamanho); }
  #tab-carreteis tbody td:nth-child(4)::before { content: "Preço/kg: "; }
  #tab-carreteis tbody td:nth-child(2) { grid-column: 1 / -1; grid-row: 3; padding-right: 0; font-weight: 400; }
  #tab-carreteis .restante { justify-items: stretch; }
  #tab-carreteis tbody td:nth-child(5)::before { content: none; }
}

/* Telas de conta (entrar, criar conta, converter, convite, esqueci a senha) */
.form-conta { display: grid; gap: 12px; }
.btn-google { display: flex; justify-content: center; margin-top: 12px; }
.links-conta { margin: 16px 0 0; text-align: center; font-size: .9rem; line-height: 1.8; }
.regra-senha { margin: -4px 0 0; padding-left: 20px; font-size: .8125rem; color: var(--cor-texto-2); }
.regra-senha li.ok { color: var(--cor-sucesso-texto); }
.convite-novo { padding: 12px 14px; margin: 8px 0 12px; border: 1px dashed var(--cor-acao); border-radius: 10px; }
.link-convite { width: 100%; font-family: ui-monospace, monospace; font-size: .8125rem; }

/* Painel de vendas (topo do Painel, admin): cartões com ícone colorido e variação, barras por dia, canais, lista */
.pv { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 24px; }  /* minmax(0,…): conteúdo largo não alarga a página */
.pv-filtros { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; padding: 12px 16px; background: var(--cor-superficie);
  border: 1px solid var(--cor-borda); border-radius: 14px; }
.pv-filtros label { display: grid; gap: 4px; font-size: .8125rem; color: var(--cor-texto-2); min-width: 150px; flex: 1 1 150px; }
.pv-filtros select, .pv-filtros input { width: 100%; min-width: 0; }
.pv-filtros .btn { flex: 0 0 auto; }
.pv-cartoes { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.pv-cartao { display: grid; gap: 6px; padding: 18px 20px; border-radius: 16px; box-shadow: 0 6px 20px rgba(30, 40, 90, .06); }
.pv-topo { justify-content: space-between; align-items: center; }
.pv-icone { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: #fff;
  box-shadow: 0 6px 14px rgba(30, 40, 90, .18); }
.pv-icone .ic { width: 22px; height: 22px; }
.pv-pedidos .pv-icone { background: linear-gradient(135deg, #8b7cf6, #5b4bd8); }
.pv-faturamento .pv-icone { background: linear-gradient(135deg, #ffb24d, #f27b1a); }
.pv-ticket .pv-icone { background: linear-gradient(135deg, #3fd1b5, #129c86); }
.pv-lucro .pv-icone { background: linear-gradient(135deg, #f78ab0, #e0457b); }
.pv-var { display: inline-flex; align-items: center; gap: 4px; font-size: .8125rem; font-weight: 600; }
.pv-var .ic { width: 16px; height: 16px; }
.pv-var.sobe { color: var(--cor-sucesso-texto); }
.pv-var.desce { color: var(--cor-critico-texto); }
.pv-rotulo { margin-top: 10px; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cor-texto-2); }
.pv-valor { font-size: 1.6rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.pv-canceladas { margin: 0; }
.pv-canceladas a { color: var(--cor-critico-texto); font-weight: 600; }
.pv-meio { display: grid; gap: 16px; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); }
@media (max-width: 900px) { .pv-meio { grid-template-columns: minmax(0, 1fr); } }
.pv-grafico, .pv-canais, .pv-lista { margin: 0; padding: 18px 20px; border-radius: 16px; box-shadow: 0 6px 20px rgba(30, 40, 90, .06); }
.pv-grafico figcaption { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin-bottom: 8px; }
.pv-grafico svg { width: 100%; height: auto; display: block; }
.pv-grafico .barra { fill: var(--cor-serie-1); }
.pv-grafico .barra:hover { fill: var(--cor-acao-forte); }
.pv-grafico .grade-y { stroke: var(--cor-grade); }
.pv-grafico .eixo { fill: var(--cor-texto-2); font-size: 11px; }
.pv-canais h3, .pv-lista h3 { margin: 0 0 12px; font-size: 1rem; }
.pv-canal { display: grid; gap: 4px; padding: 10px 0; border-top: 1px solid var(--cor-borda); }
.pv-canal:first-of-type { border-top: 0; }
.pv-canal .linha { justify-content: space-between; gap: 8px; font-size: .875rem; }
.pv-canal.campeao { padding: 12px; margin-bottom: 4px; border-radius: 12px; background: var(--cor-destaque-suave); border: 0; }
.pv-barra { height: 6px; border-radius: 3px; background: var(--cor-superficie-2); overflow: hidden; }
.pv-barra i { display: block; height: 100%; border-radius: 3px; background: var(--cor-serie-1); }
.pv-canal.campeao .pv-barra i { background: var(--cor-destaque-forte); }

/* Celular: botões de texto (cancelar, receber...) com área de toque confortável; dica de instalar do menu do perfil */
@media (max-width: 640px) { button.link { min-height: 40px; padding: 0 8px; } }
.instalar-ios { margin: 8px 12px; font-size: .8125rem; max-width: 220px; }

.marca-logo { width: 40px; height: 40px; object-fit: contain; border-radius: 8px; }