/* =========================================================
   CONSULTA CLIENTE E FORMULÁRIOS — ficha em blocos, usuários (hierarquia),
   empresa na Nova Solicitação, fichinha nos formulários, cadastro novo, PDF.
   Os arquivos de CSS são carregados nesta ordem (a ordem importa):
   base.css · componentes.css · consulta-cliente-e-formularios.css · produto-e-empresas.css · painel-e-dashboard.css · planilhas.css
   ========================================================= */

/* ── Consulta de Cliente — ficha em blocos (feature/consulta-cliente-ampliada, 30/09/2026) ──
   Desktop: tudo aberto, em cartões. Celular (≤768px): cabeçalho + limite
   disponível sempre à vista; as demais seções viram <details> recolhíveis,
   fechadas por padrão, com um resumo em cada linha. */
.cc-busca { margin-bottom: 20px; }
.cc-busca-linha { display: flex; gap: 16px; align-items: flex-end; }
.cc-busca-linha .form-group { margin-bottom: 0; }
.cc-busca-doc { flex: 2 1 280px; }
.cc-busca-empresa { flex: 1 1 200px; }
.cc-busca-btn { height: 44px; flex-shrink: 0; }
.cc-busca .form-select:disabled { background: var(--gray-100); color: var(--gray-500); cursor: not-allowed; }
.cc-dica { margin-top: 12px; font-size: 0.8rem; color: var(--gray-600); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cc-dica-erro { display: inline-flex; align-items: center; gap: 6px; color: var(--danger); font-weight: 600; }
.cc-dica-erro svg { width: 15px; height: 15px; flex-shrink: 0; }

.cc-ficha { display: flex; flex-direction: column; gap: 16px; }
.cc-muted { color: var(--gray-500); }
.cc-mini { font-size: 0.75rem; color: var(--gray-500); margin: 0; }
.cc-lbl { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gray-500); margin: 0 0 4px; }
.cc-val { font-size: 0.875rem; font-weight: 500; color: var(--gray-800); margin: 0; }
.cc-sec { font-size: 0.875rem; font-weight: 700; color: var(--gray-700); margin: 0; }
.cc-sub { font-size: 0.75rem; color: var(--gray-500); }
.cc-dir { text-align: right; }
.cc-vazio { padding: 16px 20px; font-size: 0.85rem; color: var(--gray-500); margin: 0; }
.cc-voltar { background: none; border: none; color: var(--primary-700); font-weight: 600; font-size: 0.85rem; cursor: pointer; padding: 4px 0; margin-bottom: 10px; font-family: inherit; }
.cc-voltar:hover { text-decoration: underline; }

.cc-selos { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cc-selo { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--radius-full); font-size: 0.7rem; font-weight: 700; white-space: nowrap; }
.cc-selo-neutro { background: var(--gray-100); color: var(--gray-700); }
.cc-selo-perigo { background: var(--status-naoaprovado-bg); color: var(--status-naoaprovado-text); }
.cc-selo-alerta { background: var(--status-pending-bg); color: var(--status-pending-text); }

.cc-cliente { padding: 22px 24px; display: flex; gap: 24px; align-items: flex-start; }
.cc-cliente-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cc-razao { margin: 4px 0 0; font-size: 1.5rem; font-weight: 800; color: var(--gray-900); line-height: 1.25; }
.cc-fantasia { margin: 0; font-size: 0.875rem; color: var(--gray-600); }
.cc-docs { margin: 4px 0 0; font-size: 0.875rem; color: var(--gray-700); display: flex; gap: 20px; flex-wrap: wrap; }
.cc-cliente-acao { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; flex-shrink: 0; }

.cc-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cc-kpi { padding: 18px 20px; }
.cc-kpi-val { margin: 0; font-size: 1.4rem; font-weight: 800; color: var(--gray-900); }
.cc-kpi-disp { border: 2px solid var(--success); background: #F0FDF4; }
.cc-kpi-disp .cc-lbl, .cc-kpi-disp .cc-kpi-val, .cc-kpi-disp > .cc-mini { color: var(--status-concluido-text); }
.cc-kpi-disp.excedido { border-color: var(--danger); background: #FEF2F2; }
.cc-kpi-disp.excedido .cc-lbl, .cc-kpi-disp.excedido .cc-kpi-val, .cc-kpi-disp.excedido > .cc-mini { color: var(--status-naoaprovado-text); }
.cc-kpi-sub { margin-top: 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cc-kpi-sub .cc-lbl { color: var(--gray-500); }

.cc-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cc-grid-3 .cc-span-2 { grid-column: span 2; }
.cc-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cc-card-head { padding: 14px 20px; border-bottom: 1px solid var(--gray-200); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cc-card-aviso { padding: 10px 20px 0; }
.cc-card-aviso .ficha-cliente-erro { padding: 0; }
.cc-aviso-hist { font-size: 0.75rem; color: var(--gray-500); margin: 0 0 8px; }
.cc-tabela { overflow-x: auto; }
.cc-tabela table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.cc-tabela th { text-align: left; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gray-500); padding: 10px 16px; border-bottom: 1px solid var(--gray-200); background: var(--gray-50); white-space: nowrap; }
.cc-tabela td { padding: 11px 16px; border-bottom: 1px solid var(--gray-100); color: var(--gray-800); vertical-align: top; }
.cc-tabela tbody tr:last-child td { border-bottom: none; }
.cc-tabela th.cc-dir, .cc-tabela td.cc-dir { text-align: right; white-space: nowrap; }
.cc-prazos { padding: 6px 20px 14px; }
.cc-prazo { padding: 10px 0; border-bottom: 1px solid var(--gray-100); }
.cc-prazo:last-child { border-bottom: none; }
.cc-cadastro { padding: 18px 20px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 24px; }
.cc-campo-largo { grid-column: span 2; }
.cc-rodape { margin: 0; padding: 12px 20px; font-size: 0.75rem; color: var(--gray-500); border-top: 1px solid var(--gray-100); }
.cc-card > .ficha-cliente-erro { padding: 14px 20px; }

/* Seções recolhíveis (celular) */
.cc-acc { padding: 0; }
.cc-acc summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 12px 16px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cc-acc summary::-webkit-details-marker { display: none; }
.cc-acc summary:focus-visible { outline: 2px solid var(--primary-500); outline-offset: -2px; border-radius: var(--radius-lg); }
.cc-acc-titulo { flex: 1; min-width: 0; }
.cc-acc .cc-sec { display: block; }
.cc-res { display: block; font-size: 0.8rem; color: var(--gray-500); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-chev { flex: none; color: var(--gray-500); transition: transform .15s ease; }
.cc-acc[open] .cc-chev { transform: rotate(90deg); }
.cc-acc[open] summary { border-bottom: 1px solid var(--gray-100); }
.cc-acc-corpo { padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.cc-acc-corpo .cc-cadastro { padding: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cc-acc-corpo .cc-vazio, .cc-acc-corpo .ficha-cliente-erro { padding: 0; }
.cc-linha-card { padding: 12px; border-radius: var(--radius-md); background: var(--gray-50); display: flex; flex-direction: column; gap: 4px; }
.cc-linha-card.inativa { background: #FEF2F2; }
.cc-linha-card p { margin: 0; }
.cc-linha-sub { font-size: 0.8rem; color: var(--gray-600); }
.cc-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--gray-100); font-size: 0.875rem; }
.cc-item:last-child { border-bottom: none; }
.cc-item strong { white-space: nowrap; }
/* Notas e boletos (patch 13): botões NF / Boleto(s) embaixo do nº da nota */
.cc-nf-pdf { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.cc-nf-btn { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border: 1px solid var(--gray-200); border-radius: 999px; background: #fff; color: var(--gray-700); font-size: 0.72rem; font-weight: 600; line-height: 18px; cursor: pointer; white-space: nowrap; }
.cc-nf-btn svg { width: 12px; height: 12px; flex-shrink: 0; }
.cc-nf-btn:hover { border-color: var(--primary-600); color: var(--primary-700); background: var(--primary-50); }
.cc-nf-btn:disabled { opacity: .7; cursor: progress; }
/* Telefone com "Ligar" e "WhatsApp" (16/10/2026) */
.cc-campo-fone .cc-val { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; }
.cc-fone-num { white-space: nowrap; }
.cc-fone-acoes { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.cc-fone-btn { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border: 1px solid var(--gray-200); border-radius: 999px; background: #fff; color: var(--gray-700); font-size: 0.75rem; font-weight: 600; line-height: 18px; text-decoration: none; white-space: nowrap; }
.cc-fone-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
.cc-fone-btn:hover { border-color: var(--primary-600); color: var(--primary-700); background: var(--primary-50); }
.cc-fone-whats { border-color: #A7E3BC; color: #166534; background: #F0FDF4; }
.cc-fone-whats:hover { border-color: #16A34A; color: #14532D; background: #DCFCE7; }
.cc-acc-corpo .cc-campo-fone { grid-column: 1 / -1; }
@media (max-width: 768px) {
  .cc-campo-fone { grid-column: 1 / -1; }
  .cc-fone-btn { padding: 8px 14px; font-size: 0.85rem; }
  .cc-fone-btn svg { width: 16px; height: 16px; }
}
.cc-item-link { width: 100%; background: none; border: none; border-bottom: 1px solid var(--gray-100); text-align: left; font-family: inherit; color: inherit; cursor: pointer; min-height: 44px; }
.cc-resultado { padding: 12px 16px; }
.cc-toque { margin: 2px 4px 0; font-size: 0.75rem; color: var(--gray-500); }

@media (max-width: 1100px) {
  .cc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cc-grid-3 { grid-template-columns: 1fr; }
  .cc-grid-3 .cc-span-2 { grid-column: auto; }
  .cc-grid-2 { grid-template-columns: 1fr; }
  .cc-cadastro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .cc-busca { margin-bottom: 14px; }
  .cc-busca-linha { flex-direction: column; align-items: stretch; gap: 12px; }
  .cc-busca-doc, .cc-busca-empresa { flex: 0 0 auto; }
  .cc-busca .form-input, .cc-busca .form-select { height: 48px; font-size: 16px; }
  .cc-busca-btn { height: 48px; width: 100%; justify-content: center; }
  .cc-ficha { gap: 14px; }
  .cc-cliente { flex-direction: column; gap: 10px; padding: 16px; }
  .cc-razao { font-size: 1.2rem; }
  .cc-docs { font-size: 0.8rem; color: var(--gray-600); display: block; }
  .cc-cliente-acao { align-items: stretch; width: 100%; }
  .cc-cliente-acao .btn { height: 48px; justify-content: center; }
  .cc-kpi { padding: 16px; }
  .cc-kpi-val { font-size: 1.75rem; }
}

/* ── Usuários: hierarquia e códigos Flexx (patch 2, 01/10/2026) ── */
.u-col-flexx { font-size: 0.78rem; line-height: 1.45; }
.u-col-flexx > span { display: block; }
.u-flexx { color: var(--gray-800); font-weight: 600; }
.u-equipe { color: var(--gray-600); }
.u-flexx-falta { color: var(--status-pending-text); }
.u-hierarquia { border: 1px solid var(--gray-200); background: var(--gray-50); border-radius: var(--radius-md); padding: 14px 14px 4px; margin-bottom: 16px; }
.u-hierarquia-titulo { font-size: 0.8rem; font-weight: 700; color: var(--gray-700); margin: 4px 0 4px; }
.u-codigos-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 10px; }
.u-codigos-grid .form-label { font-size: 0.72rem; }
.u-empresas-lista { display: flex; flex-wrap: wrap; gap: 4px 16px; padding-bottom: 10px; }

/* Usuários: grupos por setor/equipe, selos de empresa e Admin só pelo banco (patch 14) */
.tabela-usuarios tr.u-grupo td { background: var(--primary-50); border-top: 1px solid var(--primary-100); padding: 7px 14px; }
.u-grupo-nome { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--primary-900); }
.u-grupo-conta { margin-left: 8px; font-size: 0.75rem; font-weight: 600; color: var(--gray-500); }
.tabela-usuarios tr.u-inativo td { opacity: 0.6; }
.tabela-usuarios tr.u-inativo td:last-child { opacity: 1; }
.u-col-flexx > span.u-empresas { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 3px; }
.u-so-banco { font-size: 0.75rem; color: var(--gray-500); font-style: italic; }

/* Nova Solicitação — empresa escolhida antes do tipo (patch C) */
.empresa-picker { display: flex; flex-direction: column; gap: 8px; margin: 0 0 18px; }
.empresa-picker-titulo { margin: 0; font-size: 0.85rem; font-weight: 600; color: var(--gray-700); }
.empresa-picker-opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.empresa-opcao { border: 1px solid var(--gray-200); background: #fff; color: var(--gray-700); border-radius: var(--radius-full); padding: 8px 16px; font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: var(--transition-fast); }
.empresa-opcao:hover { border-color: var(--primary-300); color: var(--primary-700); }
.empresa-opcao:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 2px; }
.empresa-opcao.ativa { background: var(--primary-50); border-color: var(--primary-500); color: var(--primary-700); }

/* ── Consulta de Cliente: ficha básica (fora da carteira) ── */
.cc-basico { padding: 22px 24px; display: flex; flex-direction: column; gap: 18px; }
.cc-basico-aviso { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radius-md); background: var(--gray-50); border: 1px solid var(--gray-200); }
.cc-basico-aviso svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--gray-600); margin-top: 1px; }
.cc-basico-aviso p { margin: 0; font-size: 0.875rem; color: var(--gray-700); }
.cc-basico-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px 24px; }
@media (max-width: 1100px) { .cc-basico-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 768px) {
  .cc-basico { padding: 16px; }
  .cc-basico-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .u-codigos-grid { grid-template-columns: 1fr; }
}

/* ── Fichinha nos formulários (patch 3, feature/ficha-nos-formularios — 01/10/2026) ── */
.ff-ficha { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; }
.ff-topo { display: flex; align-items: flex-start; gap: 16px; }
.ff-ident { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ff-selos { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ff-razao { font-size: 1rem; font-weight: 800; color: var(--gray-900); margin-top: 2px; }
.ff-docs { font-size: 0.75rem; color: var(--gray-500); }
.ff-disp { text-align: right; padding: 8px 12px; border-radius: var(--radius-md); border: 1.5px solid var(--success); background: #F0FDF4; flex-shrink: 0; }
.ff-disp .cc-lbl, .ff-disp-val { color: var(--status-concluido-text); }
.ff-disp-val { margin: 0; font-size: 1.1rem; font-weight: 800; }
.ff-disp.excedido { border-color: var(--danger); background: #FEF2F2; }
.ff-disp.excedido .cc-lbl, .ff-disp.excedido .ff-disp-val { color: var(--status-naoaprovado-text); }
.ff-extras { padding-top: 12px; border-top: 1px solid var(--gray-200); display: flex; flex-direction: column; gap: 8px; }
.ff-extras .cc-lbl { margin: 0; }
.ff-extras .cc-cadastro { padding: 4px 0 0; }
.ff-extras .cc-tabela { border: 1px solid var(--gray-200); border-radius: var(--radius-md); background: #fff; }
.ff-extras .ficha-cliente-erro { padding: 0; }
.ff-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ff-aviso { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius-md); background: #fff; border: 1px solid var(--gray-200); font-size: 0.85rem; color: var(--gray-700); }
.ff-aviso svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; color: var(--gray-500); }
.ff-lista { display: flex; flex-direction: column; gap: 8px; }
.ff-lista-titulo { margin: 0; font-size: 0.75rem; font-weight: 700; color: var(--gray-700); text-transform: uppercase; letter-spacing: 0.05em; }
.ff-lista-titulo span { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--gray-500); }
.ff-opcao { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 9px 12px; border: 1.5px solid var(--gray-200); border-radius: var(--radius-md); background: #fff; font-family: inherit; font-size: 0.85rem; color: var(--gray-800); text-align: left; cursor: pointer; }
.ff-opcao:hover { border-color: var(--primary-300); }
.ff-opcao.selecionada { border-color: var(--primary-500); background: var(--primary-50); }
.ff-radio { width: 18px; height: 18px; border-radius: 9999px; border: 2px solid var(--gray-300); box-sizing: border-box; flex: none; }
.ff-opcao.selecionada .ff-radio { border: 6px solid var(--primary-700); }
/* Vários num ticket (14/10/2026): quadradinho com ✓ em vez da bolinha. */
.ff-multi .ff-radio { border-radius: 4px; }
.ff-multi.selecionada .ff-radio { border: 0; background: var(--primary-700) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.ff-lista-titulo .ff-contador { white-space: nowrap; margin-left: 8px; padding: 1px 8px; border-radius: var(--radius-full); background: var(--primary-50); color: var(--primary-700); font-size: 0.7rem; font-weight: 700; text-transform: none; letter-spacing: 0; }
.ff-selo { margin-right: 6px; padding: 1px 8px; font-size: 0.66rem; }
/* Rodada 73 (Faturamento): "O Pont já sabe" do pedido escolhido. */
.ff-ja-sabe { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius-md, 8px); background: #FEF9C3; color: #713F12; font-size: 0.82rem; line-height: 1.45; }
.ff-ja-sabe svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
.ff-marcar-vencidas { align-self: flex-start; }
.ff-opcao.ff-bloqueada { cursor: not-allowed; background: var(--gray-50); color: var(--gray-500); }
.ff-opcao.ff-bloqueada:hover { border-color: var(--gray-200); }
.ff-opcao.ff-bloqueada .ff-radio { border-color: var(--gray-200); background: var(--gray-100); }
.ff-col-id { display: flex; gap: 12px; flex: none; align-items: baseline; }
.ff-col-data { width: 96px; flex: none; color: var(--gray-600); }
.ff-col-num { width: 120px; flex: none; }
.ff-col-desc { flex: 1; min-width: 0; color: var(--gray-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ff-col-valor { flex: none; white-space: nowrap; }
.ff-ver-mais { justify-content: center; }
.ff-ja-ativa { display: inline-flex; margin-left: 8px; padding: 2px 8px; border-radius: var(--radius-full); background: var(--status-concluido-bg); color: var(--status-concluido-text); font-size: 0.68rem; font-weight: 700; }
@media (max-width: 768px) {
  .ff-topo { flex-direction: column; gap: 10px; }
  .ff-disp { text-align: left; width: 100%; box-sizing: border-box; }
  .ff-grid-3 { grid-template-columns: 1fr 1fr; }
  /* Celular: data + número e valor na 1ª linha; linha/condição embaixo. */
  .ff-opcao { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; column-gap: 10px; row-gap: 2px; min-height: 56px; }
  .ff-radio { grid-row: 1 / span 2; align-self: center; }
  .ff-col-id { grid-column: 2; gap: 8px; min-width: 0; flex-wrap: wrap; }
  .ff-ano { display: none; }
  .ff-col-data, .ff-col-num { width: auto; }
  .ff-col-valor { grid-column: 3; grid-row: 1; }
  .ff-col-desc { grid-column: 2 / span 2; grid-row: 2; font-size: 0.78rem; white-space: normal; }
}

/* ── Cadastro novo: "já é cliente?" (patch 4, feature/cadastro-novo-cnpj — 01/10/2026) ── */
.cn-check { display: flex; flex-direction: column; gap: 10px; }
.cn-check:empty { display: none; }
.cn-aviso { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-md); font-size: 0.875rem; line-height: 1.45; }
.cn-aviso svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; }
.cn-bloqueia { background: #FEF2F2; border: 1.5px solid #FCA5A5; color: var(--status-naoaprovado-text); }
.cn-inativo { background: #FFF7ED; border: 1.5px solid #FDBA74; color: #9A3412; }
.cn-info { background: var(--primary-50); border: 1.5px solid var(--primary-300); color: var(--primary-800); }
.cn-neutro { background: var(--gray-50); border: 1.5px solid var(--gray-300); color: var(--gray-700); }
.cn-botoes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.cn-tabela { border: 1px solid var(--gray-200); border-radius: var(--radius-md); background: #fff; }
/* Patch 15: rota (linha, vendedor, supervisor) no "Já é cliente?" */
.cn-rota { border: 1px solid var(--gray-200); border-radius: var(--radius-md); background: #fff; padding: 10px 12px; }
.cn-rota-tit { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gray-500); margin: 0 0 6px; }
.cn-rota-tit > span:last-child { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--gray-700); font-size: 0.8rem; }
.cn-rota ul { list-style: none; margin: 0; padding: 0; }
.cn-rota li { display: flex; gap: 12px; padding: 6px 0; border-top: 1px solid var(--gray-100); font-size: 0.84rem; }
.cn-rota li:first-child { border-top: 0; }
.cn-rota-linha { flex: 0 0 120px; font-weight: 600; color: var(--gray-700); }
.cn-rota-quem { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cn-rota-vd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.cn-rota-vd b { font-weight: 600; color: var(--gray-900); }
.cn-rota-sup { color: var(--gray-500); font-size: 0.78rem; }
.cn-rota-off, .cn-rota-vazia { color: var(--gray-400); font-size: 0.82rem; margin: 0; }
@media (max-width: 768px) { .cn-rota li { flex-direction: column; gap: 2px; } .cn-rota-linha { flex: none; } }
@media (max-width: 768px) {
  .cn-botoes .btn { width: 100%; justify-content: center; }
}

/* ── Exportar PDF (rodada 23) ── */
.btn-pdf:disabled { opacity: .7; cursor: progress; }
.cc-basico-acoes { display: flex; justify-content: flex-end; }
@media (max-width: 768px) {
  .cc-cliente-acao .btn-pdf { height: 40px; }
  .cc-basico-acoes .btn { width: 100%; justify-content: center; height: 40px; }
  .pg-acoes { flex-wrap: wrap; }
  .pg-acoes .btn-pdf { width: 100%; justify-content: center; }
}
.cn-rota-tit .emp-selo { text-transform: none; letter-spacing: 0; }

/* ── Tela da nota e do pedido (patch 16, 07/10/2026) ── */
.cc-link-doc { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--primary-700); cursor: pointer; text-align: left; white-space: nowrap; }
.cc-link-doc:hover { text-decoration: underline; }
.cc-link-doc span { font-weight: 600; }
.cc-riscado, .cc-link-doc.cc-riscado { text-decoration: line-through; color: var(--gray-400); }
.cc-selo-azul { background: var(--primary-100); color: var(--primary-800); }
.cc-selo-nota { display: table; margin-top: 4px; }
.cc-item .cc-selo-nota { display: table; margin: 4px 0 2px; }
.cc-ped-det { display: block; margin-top: 3px; }

.np-tela { display: flex; flex-direction: column; gap: 16px; }
.np-cab { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; padding: 18px 20px; }
.np-cab-esq { flex: 1; min-width: 260px; }
.np-titulo { margin: 0; font-size: 1.4rem; color: var(--gray-900); display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.np-sub { margin: 6px 0 0; font-size: 0.86rem; color: var(--gray-500); line-height: 1.5; }
.np-sub strong { color: var(--gray-800); }
.np-cab-dir { text-align: right; }
.np-valor { margin: 0; font-size: 1.5rem; font-weight: 800; color: var(--gray-900); white-space: nowrap; }
.np-acoes { display: flex; gap: 8px; margin-top: 10px; justify-content: flex-end; flex-wrap: wrap; }
.np-acoes .btn svg, .np-barra-cel .btn svg { width: 15px; height: 15px; }
.np-btn-perigo { background: #fff; border: 1px solid #FECACA; color: var(--status-naoaprovado-text); }
.np-btn-perigo:hover { background: #FEF2F2; }
.np-sem-cancelar { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-md); background: var(--gray-50); border: 1px solid var(--gray-200); color: var(--gray-600); font-size: 0.78rem; }
.np-sem-cancelar svg { width: 14px; height: 14px; flex: none; }
.np-selo { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--radius-full); font-size: 0.72rem; font-weight: 700; white-space: nowrap; }
.np-ok { background: var(--status-concluido-bg); color: var(--status-concluido-text); }
.np-and { background: var(--primary-100); color: var(--primary-800); }
.np-amb { background: var(--status-pending-bg); color: var(--status-pending-text); }
.np-red { background: var(--status-naoaprovado-bg); color: var(--status-naoaprovado-text); }
.np-cinza { background: var(--gray-200); color: var(--gray-700); }
.np-aviso { border-radius: var(--radius-md); padding: 12px 14px; font-size: 0.86rem; line-height: 1.45; }
.np-aviso b { display: block; margin-bottom: 2px; }
.np-aviso ul { margin: 6px 0 0; padding-left: 18px; }
.np-aviso-amb { background: var(--status-pending-bg); color: var(--status-pending-text); }
.np-aviso-red { background: var(--status-naoaprovado-bg); color: var(--status-naoaprovado-text); }
.np-aviso-azul { background: var(--primary-50); color: var(--primary-800); }
.np-card { overflow: hidden; }
.np-hora { margin-left: auto; }
/* Caminho do pedido: linha do tempo na horizontal (no celular, na vertical). */
.np-cam { list-style: none; margin: 0; padding: 22px 20px 18px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.np-cam li { position: relative; padding: 26px 12px 0 0; font-size: 0.78rem; color: var(--gray-500); }
.np-cam li::before { content: ""; position: absolute; top: 9px; left: 0; right: 0; height: 3px; background: var(--gray-200); }
.np-cam li:last-child::before { right: auto; width: 10px; }
.np-cam li.np-cam-ok::before { background: var(--success); }
.np-bola { position: absolute; top: 2px; left: 0; width: 17px; height: 17px; border-radius: 50%; background: #fff; border: 3px solid var(--gray-300); box-sizing: border-box; }
.np-cam-ok .np-bola { background: var(--success); border-color: var(--success); }
.np-cam-agora .np-bola { border-color: var(--primary-600); box-shadow: 0 0 0 4px var(--primary-100); }
.np-cam-alerta .np-bola { background: var(--warning); border-color: var(--warning); }
.np-cam-erro .np-bola { background: var(--danger); border-color: var(--danger); }
.np-cam b { display: block; color: var(--gray-900); font-size: 0.82rem; margin-bottom: 3px; }
.np-cam-erro b { color: var(--status-naoaprovado-text); }
.np-cam-alerta b { color: var(--status-pending-text); }
.np-cam-futuro b { color: var(--gray-400); }
.np-q { display: block; font-weight: 600; color: var(--gray-700); }
.np-d { display: block; margin-top: 2px; line-height: 1.35; overflow-wrap: anywhere; }
.np-grade { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.np-grade > div { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.np-prod { color: var(--gray-900); font-weight: 500; }
.np-sku { display: block; font-size: 0.72rem; color: var(--gray-400); margin-top: 2px; }
.np-sit { margin-top: 4px; }
.np-sit .np-selo { white-space: nowrap; }
.np-sit .np-sku { display: inline; margin: 0 0 0 6px; }
.np-2via { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 20px; border-top: 1px solid var(--gray-100); background: var(--status-naoaprovado-bg, #fef2f2); font-size: 0.85rem; color: var(--gray-700); }
.np-dev { color: var(--status-naoaprovado-text); }
.np-corte { color: var(--status-pending-text); }
/* Rodada 106: a ocorrência do SAC na nota (marca no item e atalho no quadro) */
.np-sac { color: #9A3412; }
.np-aviso-link { display: inline-block; margin-top: 6px; font-weight: 600; text-decoration: underline; cursor: pointer; color: inherit; }
.np-linha-dev td { background: #FEF2F2; }
.np-linha-corte td { background: #FFFBEB; }
.np-tot td { font-weight: 700; color: var(--gray-900); background: var(--gray-50); }
.np-itens-cel { display: none; }
.np-cel-it { display: flex; justify-content: space-between; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--gray-100); font-size: 0.84rem; }
.np-cel-it:last-child { border-bottom: 0; }
.np-cel-it.np-linha-dev { background: #FEF2F2; }
.np-cel-it.np-linha-corte { background: #FFFBEB; }
.np-cel-it b { white-space: nowrap; }
.np-dl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; padding: 16px 20px; }
.np-dl .cc-val { overflow-wrap: anywhere; }
.np-rodape { margin: 0; font-size: 0.74rem; color: var(--gray-400); padding: 10px 20px; border-top: 1px solid var(--gray-100); background: var(--gray-50); }
.np-barra-cel { display: none; }
@media (max-width: 1100px) {
  .np-grade { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .np-cab { padding: 14px; }
  .np-titulo { font-size: 1.2rem; }
  .np-cab-dir { text-align: left; width: 100%; display: flex; align-items: baseline; gap: 8px; }
  .np-cab-dir .np-acoes { display: none; }
  .np-valor { font-size: 1.25rem; }
  .np-cam { grid-auto-flow: row; grid-auto-columns: unset; padding: 14px 16px 6px; }
  .np-cam li { padding: 0 0 16px 30px; }
  .np-cam li::before { top: 18px; bottom: 0; left: 7px; right: auto; width: 3px; height: auto; }
  .np-cam li:last-child::before { display: none; }
  .np-bola { top: 0; }
  .np-tab-pc { display: none; }
  .np-itens-cel { display: block; }
  .np-dl { grid-template-columns: 1fr 1fr; padding: 14px 16px; }
  .np-tela { padding-bottom: 72px; }
  .np-tela:has(.np-barra-cel > :nth-child(4)) { padding-bottom: 124px; }
  .np-barra-cel { display: flex; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: #fff; border-top: 1px solid var(--gray-200); padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
  .np-barra-cel .btn { flex: 1; justify-content: center; padding-left: 6px; padding-right: 6px; }
  /* Rodada 73: com 4 botões ou mais (Perguntar ao Faturamento…), duas linhas de dois. */
  .np-barra-cel { flex-wrap: wrap; }
  .np-barra-cel:has(> :nth-child(4)) > * { flex: 1 1 calc(50% - 4px); min-width: 0; }
  .np-barra-cel .btn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ── Boletos das Dupont pelo Decision (patch 18, 08/10/2026) ── */
.cc-vencido { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px; border-radius: var(--radius-md); background: var(--status-naoaprovado-bg); color: var(--status-naoaprovado-text); font-size: 0.88rem; border-left: 4px solid var(--danger); }
.cc-vencido-notas { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; }
.cc-vencido .cc-link-doc { color: var(--status-naoaprovado-text); }
.cc-vencido .cc-mini { color: var(--status-naoaprovado-text); opacity: .85; }
/* Histórico financeiro do cliente (patch 18): faixa na ficha + tela inteira. */
.hf-atalho { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 20px; text-align: left; border: 1px solid var(--gray-200); cursor: pointer; font: inherit; color: var(--gray-700); transition: border-color .15s, box-shadow .15s; }
.hf-atalho:hover { border-color: var(--primary, #2563eb); box-shadow: 0 2px 10px rgba(37, 99, 235, .12); }
.hf-atalho-ico { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; background: #eef2ff; color: var(--primary, #2563eb); display: grid; place-items: center; }
.hf-atalho-ico svg { width: 20px; height: 20px; }
.hf-atalho-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hf-atalho-tit { font-weight: 700; color: var(--gray-900); }
.hf-atalho-itens { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 0.82rem; }
.hf-atalho-itens strong { color: var(--gray-900); }
.hf-atalho-alerta, .hf-atalho-alerta strong { color: var(--status-naoaprovado-text) !important; }
.hf-atalho-ver { flex: 0 0 auto; font-weight: 600; color: var(--primary, #2563eb); white-space: nowrap; }
/* Selo "Entregue dd/mm" nas Últimas notas (CheckNow). */
.cc-selo-ok { background: var(--status-concluido-bg); color: var(--status-concluido-text); }

/* Cores dos gráficos (validadas para daltonismo: skill de dataviz, 07/10/2026). */
.hf-tela, .hf-dica {
  --hf-dia: #2a78d6;      /* em dia */
  --hf-curto: #eda100;    /* atraso curto */
  --hf-longo: #e34948;    /* atraso longo */
  --hf-rec: #256abf;      /* recuperado */
  --hf-falta: #86b6ef;    /* ainda não voltou (mesmo azul, mais claro) */
  --hf-grade: #e8e7e1;
  --hf-base: #c3c2b7;
  --hf-tinta-2: #52514e;
  --hf-tinta-3: #898781;
}
.hf-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.hf-kpi { padding: 14px 16px; }
.hf-kpi .cc-lbl { display: flex; align-items: center; gap: 6px; }
.hf-kpi-red .cc-lbl::before, .hf-kpi-amb .cc-lbl::before, .hf-kpi-ok .cc-lbl::before { content: ''; width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.hf-kpi-red .cc-lbl::before { background: var(--hf-longo); }
.hf-kpi-amb .cc-lbl::before { background: var(--hf-curto); }
.hf-kpi-ok .cc-lbl::before { background: #0ca30c; }
.hf-kpi-val { margin: 4px 0 2px; font-size: 1.3rem; font-weight: 700; color: var(--gray-900); letter-spacing: -0.01em; }
.hf-kpi-red .hf-kpi-val { color: var(--status-naoaprovado-text); }
.hf-fonte { margin: 0; font-weight: 600; color: var(--gray-700); }
.hf-red { color: var(--status-naoaprovado-text); }
.hf-corpo { padding: 18px 20px; }
.hf-corpo-sep { border-top: 1px solid var(--gray-100); }
.hf-sub-tit { margin: 0 0 10px; font-size: 0.8rem; font-weight: 600; color: var(--gray-700); }

/* Topo do gráfico: número de destaque à esquerda, legenda à direita. */
.hf-graf-topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.hf-graf-topo .cc-mini { margin: 2px 0 0; color: var(--hf-tinta-2); }
.hf-graf-topo .cc-mini strong { color: var(--gray-900); }
.hf-destaque { margin: 0; font-size: 1.6rem; font-weight: 700; color: var(--gray-900); letter-spacing: -0.02em; line-height: 1.1; }
.hf-legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.78rem; color: var(--hf-tinta-2); }
.hf-legenda-topo { margin-bottom: 12px; }
.hf-leg { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }

/* Área do gráfico: eixo Y à esquerda (rótulos nas linhas de grade). */
.hf-plot { padding-left: 46px; padding-top: 8px; }
.hf-plot-area { position: relative; height: 210px; }
.hf-plot-baixo .hf-plot-area { height: 120px; }
.hf-grade-linha { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--hf-grade); }
.hf-grade-linha:first-child { border-top-color: var(--hf-base); }
.hf-grade-linha span { position: absolute; right: calc(100% + 8px); top: -7px; font-size: 0.68rem; line-height: 1; color: var(--hf-tinta-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hf-eixo-x { display: flex; margin: 6px 0 0 46px; }
.hf-eixo-x span { flex: 1 1 0; min-width: 0; text-align: center; font-size: 0.7rem; color: var(--hf-tinta-3); white-space: nowrap; }

/* Colunas empilhadas: até 24px, 2px de respiro entre as partes, ponta arredondada. */
.hf-cols { position: absolute; inset: 0; display: flex; }
.hf-col { flex: 1 1 0; min-width: 0; height: 100%; display: flex; align-items: flex-end; justify-content: center; cursor: pointer; border-radius: 6px 6px 0 0; outline: none; }
.hf-col:hover, .hf-col.hf-ativo, .hf-col:focus-visible { background: rgba(42, 120, 214, 0.06); }
.hf-pilha { width: 58%; max-width: 24px; display: flex; flex-direction: column-reverse; gap: 2px; }
.hf-pilha .hf-seg:last-child { border-radius: 4px 4px 0 0; }
.hf-seg { display: block; min-height: 2px; flex-basis: 0; }
.hf-c-dia { background: var(--hf-dia); }
.hf-c-curto { background: var(--hf-curto); }
.hf-c-longo { background: var(--hf-longo); }
.hf-c-rec { background: var(--hf-rec); }
.hf-c-falta { background: var(--hf-falta); }
.hf-c-faixa { background: rgba(12, 163, 12, 0.16); }
.hf-leg-ponto { border-radius: 50%; }

/* Atraso médio: linha 2px + pontos com anel branco; faixa "em dia". */
.hf-faixa-ok { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(12, 163, 12, 0.07); border-top: 1px dashed transparent; }
.hf-linha { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hf-linha path { fill: none; stroke: var(--hf-dia); stroke-width: 2px; stroke-linejoin: round; stroke-linecap: round; }
.hf-ponto { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--hf-dia); border: 2px solid #fff; padding: 0; cursor: pointer; box-shadow: 0 0 0 0 transparent; }
.hf-ponto::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; } /* área de toque maior que o ponto */
.hf-ponto-alto { background: var(--hf-longo); }
.hf-ponto:hover, .hf-ponto.hf-ativo, .hf-ponto:focus-visible { box-shadow: 0 0 0 3px rgba(42, 120, 214, 0.25); outline: none; }

/* Assumido x recuperado: barras deitadas por ano. */
.hf-anos { display: flex; flex-direction: column; gap: 10px; }
.hf-ano-linha { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 4px 6px; margin: 0 -6px; border-radius: 6px; cursor: pointer; outline: none; }
.hf-ano-linha:hover, .hf-ano-linha.hf-ativo, .hf-ano-linha:focus-visible { background: rgba(42, 120, 214, 0.06); }
.hf-ano-rot { font-size: 0.8rem; font-weight: 600; color: var(--gray-700); font-variant-numeric: tabular-nums; }
.hf-ano-trilho { height: 20px; }
.hf-ano-barra { height: 100%; display: flex; gap: 2px; min-width: 4px; }
.hf-ano-barra .hf-seg { height: 100%; }
.hf-ano-barra .hf-seg:last-child { border-radius: 0 4px 4px 0; }
.hf-ano-val { font-size: 0.78rem; color: var(--hf-tinta-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hf-ano-val strong { color: var(--gray-900); }

/* Tabela "Ver os números" (os mesmos valores do gráfico, sem depender de cor). */
.hf-numeros { margin-top: 14px; }
.hf-numeros summary { cursor: pointer; font-size: 0.8rem; font-weight: 600; color: var(--primary-600, #2563eb); }
.hf-numeros .cc-tabela { margin-top: 8px; }
.hf-numeros td, .hf-numeros th { font-variant-numeric: tabular-nums; }

/* Dica flutuante. */
.hf-dica { position: absolute; z-index: 1000; min-width: 170px; max-width: 320px; padding: 10px 12px; border-radius: 10px; background: #fff; border: 1px solid rgba(11, 11, 11, 0.1); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14); pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s; }
.hf-dica.visivel { opacity: 1; transform: none; }
.hf-dica p { margin: 0; }
.hf-dica-tit { font-size: 0.72rem; color: var(--hf-tinta-3); text-transform: uppercase; letter-spacing: 0.04em; }
.hf-dica-val { font-size: 1rem; font-weight: 700; color: var(--gray-900); margin: 2px 0 6px !important; }
.hf-dica-linha { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; color: var(--hf-tinta-2); padding: 2px 0; }
.hf-dica-linha span { flex: 1; white-space: nowrap; }
.hf-dica-linha strong { color: var(--gray-900); font-weight: 600; font-variant-numeric: tabular-nums; }
.hf-dica-key { width: 12px; height: 3px; border-radius: 2px; flex: 0 0 auto; }
.hf-dica-rod { font-size: 0.72rem; color: var(--hf-tinta-3); margin-top: 6px !important; padding-top: 6px; border-top: 1px solid var(--gray-100); }

.hf-resumo-ass { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 14px 20px; border-top: 1px solid var(--gray-100); }
.hf-resumo-ass p { margin: 0; } .hf-resumo-ass p:nth-child(2) { font-weight: 700; color: var(--gray-900); }
.hf-resumo-ass p.hf-red { color: var(--status-naoaprovado-text); }
.hf-inline { display: inline; margin-left: 6px; }
.hf-cel { display: none; }
.hf-rodape { padding: 0 4px; }
.hf-ass-topo { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; }
.hf-ass-topo .hf-resumo-ass { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: none; border-left: 1px solid var(--gray-100); gap: 16px; }
@media (max-width: 1100px) { .hf-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 768px) {
  .hf-atalho { padding: 12px 14px; gap: 10px; }
  .hf-atalho-ico { display: none; }
  .hf-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .hf-kpi-val { font-size: 1.05rem; }
  .hf-kpis > .hf-kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .hf-corpo { padding: 14px; }
  .hf-destaque { font-size: 1.3rem; }
  .hf-plot { padding-left: 34px; }
  .hf-eixo-x { margin-left: 34px; }
  .hf-plot-area { height: 180px; }
  .hf-plot-baixo .hf-plot-area { height: 130px; }
  .hf-pilha { width: 64%; }
  .hf-eixo-x span { font-size: 0.6rem; }
  .hf-ano { display: none; }
  .hf-ponto { width: 10px; height: 10px; margin: -5px 0 0 -5px; }
  .hf-desk { display: none; }
  .hf-cel { display: block; padding: 2px 14px 6px; }
  .hf-cel .np-selo { white-space: normal; }
  .hf-resumo-ass { padding: 12px 14px; }
  .hf-ass-topo { grid-template-columns: minmax(0, 1fr); }
  .hf-ass-topo .hf-resumo-ass { border-left: none; border-top: 1px solid var(--gray-100); }
}

.np-baixar-bol { background: var(--gray-50); }

/* Acessos por módulo no cadastro do usuário (10/10/2026) */
.u-acessos-padrao { float: right; font-size: 0.74rem; font-weight: 500; text-transform: none; letter-spacing: 0; }
.u-modulo { border: 1px solid var(--gray-200); border-radius: 10px; margin-bottom: 10px; overflow: hidden; background: #fff; }
.u-modulo-cab { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--gray-50); border-bottom: 1px solid var(--gray-100); font-size: 0.86rem; color: var(--gray-900); }
.u-tag { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.04em; border-radius: 5px; padding: 1px 6px; background: var(--gray-100); color: var(--gray-500); }
.u-tag.aj { background: #FEF3C7; color: #92400E; }
.u-parte { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--gray-100); }
.u-parte:last-child { border-bottom: 0; }
.u-parte-nome { flex: 1; min-width: 0; font-size: 0.82rem; color: var(--gray-500); }
.u-parte.on .u-parte-nome { color: var(--gray-900); font-weight: 600; }
.u-parte-nota { display: block; font-size: 0.72rem; font-weight: 400; color: var(--gray-500); margin-top: 2px; }
.u-aj { color: #D97706; font-size: 0.7rem; }
.u-niveis { display: inline-flex; background: var(--gray-100); padding: 2px; border-radius: 8px; gap: 2px; flex-shrink: 0; }
.u-niveis button { border: 0; background: none; font: inherit; font-size: 0.74rem; font-weight: 600; color: var(--gray-500); padding: 4px 9px; border-radius: 6px; cursor: pointer; }
.u-niveis button.on { background: #fff; color: #2563EB; box-shadow: 0 1px 2px rgba(0,0,0,.1); }
/* Liberar em massa (14/10/2026) */
.massa-niveis button { font-size: 0.8rem; padding: 6px 12px; }
.massa-quem-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 0.82rem; color: var(--gray-600); }
.massa-lista { max-height: 300px; overflow-y: auto; border: 1px solid var(--gray-200); border-radius: var(--radius-md); background: #fff; }
.massa-item { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-top: 1px solid var(--gray-100); font-size: 0.85rem; cursor: pointer; }
.massa-item:first-child { border-top: 0; }
.massa-item:hover { background: var(--gray-50); }
.massa-item input { width: 16px; height: 16px; flex: none; accent-color: var(--primary-700); }
.massa-item.inativo { color: var(--gray-400); }
.massa-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.massa-perfil { font-size: 0.74rem; color: var(--gray-500); white-space: nowrap; }
.u-acessos-aj { display: block; font-size: 0.72rem; color: #92400E; }

/* ── Vários SKUs no Fracionamento e no Bloqueio / Desbloqueio (11/10/2026) ── */
.sku-sel-caixa { position: relative; }
.sku-sel-lista { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(15, 23, 42, .12); max-height: 320px; overflow-y: auto; padding: 4px; }
.sku-sel-op { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 10px; align-items: baseline; width: 100%; text-align: left; border: 0; background: none; font: inherit; padding: 8px 10px; border-radius: 6px; cursor: pointer; color: var(--gray-800); }
.sku-sel-op:hover, .sku-sel-op.ativa { background: var(--primary-50); }
.sku-sel-op.ja { opacity: .6; }
.sku-sel-op-sku { font-weight: 700; font-variant-numeric: tabular-nums; }
.sku-sel-op-nome { font-size: 0.85rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sku-sel-op-nome em { font-style: normal; font-size: 0.7rem; color: var(--gray-500); background: var(--gray-100); border-radius: 4px; padding: 1px 5px; margin-left: 4px; }
.sku-sel-op-emp { grid-column: 2; font-size: 0.72rem; color: var(--gray-500); }
.sku-sel-op-ja { font-size: 0.7rem; color: var(--gray-500); }
.sku-sel-info { display: flex; align-items: center; gap: 8px; padding: 10px; font-size: 0.82rem; color: var(--gray-500); }
.sku-sel-aviso { color: #92400E; }
.sku-sel-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sku-sel-vazio { font-size: 0.8rem; color: var(--gray-400); }
.sku-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; background: var(--primary-50); color: var(--primary-700); border-radius: 999px; padding: 4px 4px 4px 10px; font-size: 0.8rem; }
.sku-chip-nome { color: var(--gray-700); min-width: 0; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sku-chip button { border: 0; background: rgba(255, 255, 255, .7); color: var(--gray-600); width: 22px; height: 22px; border-radius: 50%; cursor: pointer; font-size: 1rem; line-height: 1; flex-shrink: 0; }
.sku-chip button:hover { background: #fff; color: var(--danger); }
.sku-sit-erro { color: #991B1B; }
.multilinha { white-space: pre-line; }
@media (max-width: 768px) {
  .sku-chip-nome { max-width: 180px; }
  .sku-sel-op { grid-template-columns: auto 1fr; }
  .sku-sel-op-ja { display: none; }
}

/* Vendedores liberados do Bloqueio de SKU (14/10/2026): por equipe, com busca. */
.vdl-barra { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.vdl-barra .form-input { flex: 1; max-width: 340px; }
.vdl-resumo { font-size: 0.82rem; color: var(--gray-600); white-space: nowrap; }
.vdl-limpar { border: 0; background: none; padding: 0; color: var(--primary-700); font: inherit; text-decoration: underline; cursor: pointer; }
.vdl-lista { display: flex; flex-direction: column; gap: 10px; max-height: 460px; overflow-y: auto; padding-right: 4px; }
.vdl-equipe { border: 1px solid var(--gray-200); border-radius: var(--radius-md); background: #fff; }
.vdl-equipe-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; background: var(--gray-50); border-bottom: 1px solid var(--gray-200); border-radius: var(--radius-md) var(--radius-md) 0 0; }
.vdl-equipe-nome { font-size: 0.8rem; font-weight: 700; color: var(--gray-700); }
.vdl-qtd { display: inline-flex; margin-left: 6px; padding: 0 7px; border-radius: var(--radius-full); background: var(--primary-700); color: #fff; font-size: 0.7rem; }
.vdl-equipe-btn { border: 0; background: none; color: var(--primary-700); font: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer; }
.vdl-itens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vdl-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--gray-100); cursor: pointer; font-size: 0.85rem; }
.vdl-item:nth-child(-n+2) { border-top: 0; }
.vdl-item:hover { background: var(--gray-50); }
.vdl-item.marcado { background: var(--primary-50); }
.vdl-item input { width: 16px; height: 16px; flex: none; accent-color: var(--primary-700); }
.vdl-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vdl-sup { font-size: 0.68rem; color: var(--gray-500); font-weight: 600; }
.vdl-cods { display: flex; gap: 4px; flex: none; }
.vdl-cod { padding: 1px 7px; border-radius: var(--radius-full); background: var(--gray-100); color: var(--gray-700); font-size: 0.7rem; font-weight: 700; white-space: nowrap; }
@media (max-width: 768px) {
  .vdl-barra { flex-direction: column; align-items: stretch; gap: 6px; }
  .vdl-barra .form-input { max-width: none; }
  .vdl-itens { grid-template-columns: 1fr; }
  .vdl-item:nth-child(2) { border-top: 1px solid var(--gray-100); }
  .vdl-lista { max-height: none; }
}

/* 16/10/2026: visita na carteira, pedido fora da rota e compras do cliente (faturado + média) */
.cc-visita-ord { display: block; }
.cc-fora-rota { margin-left: 6px; font-size: 0.68rem; }
.cc-compras { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 8px; font-size: 0.75rem; color: var(--gray-500); }
.cc-compras b { color: var(--gray-800); font-weight: 600; }
.cc-compras-barra { position: relative; display: inline-block; flex: none; width: 46px; height: 6px; border-radius: 999px; background: var(--gray-200); }
.cc-compras-barra i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: #16A34A; }
.cc-compras-barra em { position: absolute; top: -3px; width: 2px; height: 12px; margin-left: -1px; border-radius: 1px; background: var(--gray-500); }
.cc-compras.abaixo .cc-compras-barra i { background: #D97706; }
.cc-compras.abaixo .cc-compras-fat, .cc-compras.abaixo .cc-compras-fat b { color: #B45309; }
.cc-kpi-compras { margin-top: 10px; } .cc-kpi-compras .cc-compras { margin-top: 4px; font-size: 0.8rem; }
.cc-compras-linha { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: -4px 0 14px; }
.cc-compras-linha .cc-compras { margin-top: 0; font-size: 0.82rem; }
.cc-compras-linha .cc-lbl { margin: 0; }
.cc-compras-esp { flex: 1; }
.cc-compras-linha .hf-link-ficha { margin: 0; }
/* Carteira com a visita: as 3 colunas da visita juntas no canto direito */
.cc-cart-visita th:nth-child(n+3), .cc-cart-visita td:nth-child(n+3) { text-align: right; white-space: nowrap; width: 1%; padding-left: 18px; }
.cc-cart-visita td:nth-child(2) { width: auto; }
.cc-visita-hoje { font-size: 0.72rem; } .cc-visita-hoje-txt { color: var(--status-concluido-text); }
.cc-hoje-feito { display: block; margin-top: 3px; white-space: nowrap; }
.cc-hoje-feito.ok { color: var(--status-concluido-text); font-weight: 600; } .cc-hoje-feito.amb { color: #B45309; font-weight: 600; }
.cc-hoje-feito.cinza, .cc-hoje-feito.nada { color: var(--gray-500); }
.cc-visita-hoje-txt.motivo { color: #B45309; } .cc-visita-hoje-txt.simulacao { color: var(--gray-600); }

/* 25/10/2026: Dúvidas Gerais, Solicitações Gerais e EAD (telas/formularios.js) */
.fg-atalhos-lista { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.fg-atalho { border: 1px solid var(--primary-200); background: #fff; color: var(--primary-700); border-radius: var(--radius-full); padding: 4px 12px; font-size: 0.78rem; cursor: pointer; }
.fg-atalho:hover, .fg-atalho:focus-visible { background: var(--primary-100); }
.fg-opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.fg-opcao { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--gray-200); border-radius: var(--radius-md); padding: 8px 12px; font-size: 0.85rem; cursor: pointer; }
.fg-opcao:has(input:checked) { border-color: var(--primary-500); background: var(--primary-50); }
.fg-escolha { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.fg-cartao { position: relative; display: flex; align-items: center; gap: 12px; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 14px 16px; cursor: pointer; }
.fg-cartao input { position: absolute; opacity: 0; pointer-events: none; }
.fg-cartao:has(input:checked) { border-color: #0D9488; background: #F0FDFA; box-shadow: 0 0 0 1px #0D9488; }
.fg-cartao:has(input:focus-visible) { outline: 2px solid var(--primary-400); outline-offset: 2px; }
.fg-cartao-icone { width: 36px; height: 36px; border-radius: var(--radius-md); background: #CCFBF1; color: #0D9488; display: grid; place-items: center; flex-shrink: 0; }
.fg-cartao-icone svg { width: 18px; height: 18px; }
.fg-cartao strong { display: block; font-size: 0.9rem; color: var(--gray-900); }
.fg-cartao small { display: block; font-size: 0.78rem; color: var(--gray-500); }