/* ===== Admin → Perfis de cliente (rodada 5). Visual do mockup aprovado (dashboard/mockups_perfil_relacionamento.html),
   nas cores e fontes do CRM. Abas e botões: os da tela Integrações (integracoes.css). Sem faixa colorida na lateral. ===== */
.pf { --pf-card:#fff; --pf-ink:#1A1A1A; --pf-ink2:#3D3832; --pf-mut:#7A6F65; --pf-mut2:#A39889; --pf-line:#EDE3D7; --pf-line2:#E3D6C5;
      --pf-red:#D94030; --pf-redbg:#FBE9E6; --pf-green:#2E6B1A; --pf-greenbg:#E3F1DA; --pf-greenbd:#B5D89F; --pf-amber:#6E5A00;
      --pf-amberbg:#FFF3C4; --pf-amberbd:#E6CF5C; --pf-orange:#8A4300; --pf-orangebg:#FDE6D2; --pf-orangebd:#F0B27A;
      --pf-blue:#1F4E79; --pf-bluebg:#E1EEFA; --pf-bluebd:#A9CBEA; --pf-navy:#1F2A37; --pf-cream:#F6F0E8; --pf-cream2:#FDFAF7;
      --pf-sh:0 1px 2px rgba(60,40,20,.05),0 6px 20px rgba(60,40,20,.06);
      color:var(--pf-ink); font-size:14px; line-height:1.45; }
.pf * { box-sizing:border-box; }
.pf button, .pf input, .pf select { font:inherit; color:inherit; }
.pf-topo { display:flex; align-items:flex-end; gap:16px; margin-bottom:14px; }
.pf-topo h1 { margin:0 0 4px; }
.pf-sub { color:#5C5C5C; margin:0; font-size:.92rem; max-width:780px; }
.pf .int-abas { margin-bottom:16px; }
.pf-row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.pf-sp { flex:1; }
.pf-card { background:var(--pf-card); border:1px solid var(--pf-line); border-radius:16px; box-shadow:var(--pf-sh); }
.pf-pad { padding:18px 20px; }
.pf-cap { font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--pf-mut); font-weight:800; }
.pf-mut { color:var(--pf-mut); } .pf-sm { font-size:12.5px; } .pf-xs { font-size:11.5px; } .pf-b { font-weight:700; }
.pf .pf-lnk { border:0; background:none; color:var(--pf-red); padding:2px 4px; font-weight:650; cursor:pointer; font-size:12.5px; }
.pf .pf-lnk:hover { text-decoration:underline; }
.pf a.pf-emp { color:var(--pf-ink); text-decoration:none; font-weight:700; }
.pf .pf-loc { margin-left:6px; }
.pf a.pf-emp:hover { color:var(--pf-red); text-decoration:underline; }

/* selos */
.pf-tag { display:inline-flex; align-items:center; gap:4px; padding:2px 9px; border-radius:999px; font-size:12px; font-weight:650; border:1px solid transparent; white-space:nowrap; line-height:18px; }
.pf-ta { background:#F4ECDF; color:#5A4630; border-color:#E6D7C2; }
.pf-tg { background:var(--pf-greenbg); color:var(--pf-green); border-color:var(--pf-greenbd); }
.pf-ty { background:var(--pf-amberbg); color:var(--pf-amber); border-color:var(--pf-amberbd); }
.pf-to { background:var(--pf-orangebg); color:var(--pf-orange); border-color:var(--pf-orangebd); }
.pf-tb { background:var(--pf-bluebg); color:var(--pf-blue); border-color:var(--pf-bluebd); }
.pf-tr { background:var(--pf-redbg); color:#A12A1C; border-color:#E8A79E; }
.pf-tm { background:#F2EFEB; color:#6B6258; border-color:#E4DED6; }

/* KPIs */
.pf-kp { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:14px; }
.pf-kpi { padding:16px 18px; }
.pf-kpi .l { color:var(--pf-mut); font-size:12.5px; font-weight:600; }
.pf-kpi b { display:block; font-size:30px; font-weight:900; letter-spacing:-.02em; line-height:1.1; margin:4px 0 2px; }
.pf-kpi .s { color:var(--pf-mut); font-size:12px; }

/* tabelas */
.pf table { width:100%; border-collapse:collapse; }
.pf th { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--pf-mut); text-align:left; background:var(--pf-cream); padding:9px 12px; font-weight:800; position:sticky; top:0; z-index:1; }
.pf td { padding:9px 12px; border-bottom:1px solid var(--pf-line); vertical-align:middle; }
.pf tbody tr:hover td { background:#FDFAF6; }

.pf-why { color:var(--pf-mut); font-size:11.5px; }

/* layout */
.pf-splitM { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:14px; }
.pf-col { display:flex; flex-direction:column; gap:14px; min-width:0; }
.pf-g2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }

/* matriz */
.pf-mtx td, .pf-mtx th { text-align:center; padding:8px 6px; }
.pf-mtx td:first-child, .pf-mtx th:first-child { text-align:left; padding-left:14px; }
.pf-cell { display:inline-flex; flex-direction:column; align-items:center; gap:5px; padding:6px 2px; border-radius:12px; min-width:70px; }
.pf .pf-cb { width:30px; height:30px; border-radius:8px; border:2px solid #CDBFAE; display:flex; align-items:center; justify-content:center; font-weight:900; color:#fff; background:#fff; transition:.12s; cursor:pointer; padding:0; }
.pf .pf-cb:hover:not(:disabled) { border-color:var(--pf-green); background:var(--pf-greenbg); }
.pf .pf-cell.on .pf-cb { background:var(--pf-green); border-color:var(--pf-green); color:#fff; }
.pf .pf-cb:disabled { cursor:progress; opacity:.6; }
.pf-vol input { width:76px; border:1px solid var(--pf-line2); border-radius:7px; padding:2px 5px; font-size:11px; text-align:center; background:#fff; }
.pf-vol-vazio { height:22px; display:block; }
.pf-stack { height:10px; border-radius:6px; background:#F1E8DC; overflow:hidden; display:flex; }
.pf-stack i { display:block; height:100%; }
.pf-leg { display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--pf-mut); align-items:center; }
.pf-leg span { display:inline-flex; align-items:center; gap:5px; }
.pf-leg i { display:inline-block; width:10px; height:10px; border-radius:3px; }

/* mapa */
.pf-map { display:grid; grid-template-columns:repeat(6,40px); grid-auto-rows:38px; gap:4px; justify-content:center; }
.pf-uf { border-radius:9px; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:11px; font-weight:800; line-height:1.05; }
.pf-uf small { font-size:10px; font-weight:700; opacity:.9; }
.pf-select { border:1px solid #D9CCBA; border-radius:8px; padding:4px 8px; background:#fff; font-size:12.5px; font-weight:650; }

/* cartões por produto */
.pf-pc h3 { margin:0; font-size:19px; font-weight:850; letter-spacing:-.01em; }
.pf-funnel { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin:14px 0 6px; border:1px solid var(--pf-line); border-radius:12px; overflow:hidden; background:var(--pf-line); }
.pf-funnel > div { padding:10px 12px; background:#fff; }
.pf-funnel b { display:block; font-size:22px; font-weight:900; line-height:1.1; }
.pf-funnel span { font-size:11.5px; color:var(--pf-mut); }
.pf-funnel.dois { grid-template-columns:1fr 1fr; }

/* editor */
.pf-ed { display:grid; grid-template-columns:200px minmax(0,1fr) 270px; gap:14px; align-items:start; }
.pf-ed > * { min-width:0; }
.pf-prd { display:flex; flex-direction:column; gap:6px; }
.pf-prd button { display:block; width:100%; text-align:left; border:1px solid var(--pf-line); background:#fff; border-radius:12px; padding:11px 13px; cursor:pointer; }
.pf-prd button.on { border-color:#E8A79E; background:#FDF3EE; }
.pf-prd button b, .pf-prd button span.pf-mut { display:block; }
.pf-prd button .pf-naosalvo { display:inline-block; margin-top:4px; }
.pf-rl { display:flex; gap:8px 10px; align-items:center; flex-wrap:wrap; border:1px solid var(--pf-line); background:var(--pf-cream2); border-radius:12px; padding:9px 11px; margin:7px 0; }
.pf-rl > select { min-width:280px; flex:1 1 280px; }
.pf-rl input { width:112px; flex:none; }
.pf-campo { display:inline-flex; gap:6px; align-items:center; white-space:nowrap; }
.pf-rl select, .pf-rl input, .pf-opt select, .pf-nome { border:1px solid var(--pf-line2); border-radius:8px; padding:5px 8px; background:#fff; }
.pf-rl .x { margin-left:auto; }
.pf-or { font-size:11px; font-weight:900; color:var(--pf-mut2); letter-spacing:.1em; margin:0 0 0 8px; }
.pf-opt { display:flex; gap:10px; align-items:center; padding:8px 0; border-bottom:1px solid #F3ECE2; font-size:13px; }
.pf-chip { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--pf-line2); background:#fff; border-radius:999px; padding:5px 11px; cursor:pointer; font-weight:650; font-size:13px; }
.pf-chip.on { background:var(--pf-navy); color:#fff; border-color:var(--pf-navy); }
.pf-lista { max-height:470px; overflow:auto; border:1px solid var(--pf-line); border-radius:12px; }
.pf-dq { display:flex; gap:10px; align-items:flex-start; padding:10px 0; border-bottom:1px solid #F3ECE2; }
.pf-dq:last-child { border-bottom:0; }
.pf-dq > b { font-size:20px; font-weight:900; min-width:44px; }
.pf-fila { margin-top:8px; padding:10px; border:1px solid var(--pf-amberbd); background:#FFFBEA; border-radius:10px; }
.pf-fila input { width:100%; border:1px solid var(--pf-line2); border-radius:8px; padding:6px 8px; background:#fff; margin:6px 0; }
.pf-erro { color:#A12A1C; font-size:12px; }
.pf-hist { font-size:12px; padding:6px 0; border-bottom:1px solid #F3ECE2; }
.pf-hist:last-child { border-bottom:0; }
.pf-naosalvo { font-size:11px; font-weight:700; color:var(--pf-amber); background:var(--pf-amberbg); border:1px solid var(--pf-amberbd); border-radius:999px; padding:1px 7px; }

@media (max-width:1100px) {
  .pf-splitM, .pf-ed, .pf-g2 { grid-template-columns:1fr; }
  .pf-kp { grid-template-columns:repeat(2,1fr); }
}
.pf-rl .pf-tag { min-width:0; flex:0 1 auto; overflow:hidden; text-overflow:ellipsis; }

/* rodada 6: textos de apoio, estados vazios, avisos (sem faixa lateral: fundo suave e borda fina em volta) */
.pf h2.pf-cap, .pf h3.pf-cap { margin:0; }
.pf-h2 { margin:0; font-size:22px; font-weight:850; }
.pf-intro { color:var(--pf-mut); font-size:12.5px; margin:4px 0 10px; max-width:820px; }
.pf-intro-aba { margin:0 0 12px; font-size:13px; }
.pf-vazio { padding:18px; text-align:center; color:var(--pf-ink2); }
.pf-vazio .pf-sm { margin-top:4px; }
.pf-alerta { margin:12px 0 4px; padding:10px 12px; border:1px solid var(--pf-amberbd); background:#FFFBEA; border-radius:10px; font-size:13px; }
.pf-alerta select { margin-left:6px; border:1px solid var(--pf-line2); border-radius:8px; padding:4px 8px; background:#fff; }
.pf-dica { margin-top:8px; font-size:12px; color:var(--pf-mut); }
.pf-novo { display:flex; flex-direction:column; gap:6px; border:1px solid var(--pf-line2); background:#fff; border-radius:12px; padding:10px 12px; }
.pf-novo select { border:1px solid var(--pf-line2); border-radius:8px; padding:5px 8px; background:#fff; width:100%; }
.pf-novo .pf-lnk { align-self:flex-start; padding-left:0; }
.pf-crit { font-size:11px; color:var(--pf-mut); min-height:22px; display:block; line-height:22px; white-space:nowrap; }
.pf a.pf-btnlink { display:inline-flex; align-items:center; text-decoration:none; }
.pf-cb:focus-visible, .pf-chip:focus-visible, .pf-prd button:focus-visible, .pf .int-aba:focus-visible, .pf .pf-lnk:focus-visible, .pf-chk:focus-within { outline:2px solid #1A5A8A; outline-offset:2px; }

/* rodada 7 (QA do COO): unidades sem quebra, notas das linhas, clientes fora do perfil, exclusões, penetração por produto */
.pf-nw { white-space:nowrap; }
.pf-nota { margin-top:4px; color:var(--pf-ink2); }
.pf-nota .pf-tag { font-size:10.5px; padding:0 7px; line-height:16px; }
.pf-tag-nota { white-space:normal; font-size:11.5px; }
.pf-fora { margin:6px 0 0; }
.pf-pen { display:grid; grid-template-columns:150px minmax(60px,1fr) auto; gap:12px; align-items:center; margin:8px 0; }
.pf-pen-area { min-width:0; }
.pf-pen-num { text-align:right; }
.pf-confirma { margin-top:10px; padding:10px 12px; border:1px solid #E8A79E; background:var(--pf-redbg); border-radius:10px; font-size:13px; }
.pf .pf-lnk-mut { color:var(--pf-mut); padding-left:0; }
.pf-excl { display:block; border:0; border-bottom:1px solid #F3ECE2; margin:0; padding:8px 0; }
.pf-excl legend { padding:0; font-size:13px; margin-bottom:6px; float:left; width:100%; }
.pf-excl-lista { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px; clear:both; }
.pf-chk { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--pf-line2); background:#fff; border-radius:999px; padding:4px 11px; font-size:12.5px; font-weight:600; cursor:pointer; }
.pf-chk.on { background:var(--pf-navy); color:#fff; border-color:var(--pf-navy); }
.pf-chk input { margin:0; accent-color:var(--pf-navy); }
.pf-campo-nota { flex:1 1 220px; }
.pf .pf-rl input.pf-nota-in { width:auto; flex:1 1 160px; min-width:140px; }
.pf-pag { padding:8px 12px; }
@media (max-width:700px) { .pf-pen { grid-template-columns:1fr; gap:4px; } .pf-pen-num { text-align:left; } .pf-funnel { grid-template-columns:1fr 1fr; } }
.pf-ed .pf-col .pf-funnel { grid-template-columns:1fr 1fr; }