/* modulos/comercial/painel.css — Desempenho Comercial › Painel (2026-10-27). As cores dos níveis vêm do JS (inline). */
.pc-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.pc-titulo { margin: 0; font-size: var(--t-lg, 20px); color: var(--titulo); }
.pc-sub { font-size: 12px; color: var(--texto-sec); margin-top: 2px; }
.pc-controlos { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pc-grupo { display: inline-flex; border: 1px solid var(--cinza-brd); border-radius: var(--r-md, 6px); overflow: hidden; }
.pc-seg { border: 0; border-right: 1px solid var(--cinza-brd); background: var(--branco); color: var(--texto); padding: 6px 11px; font-size: 12px; cursor: pointer; }
.pc-seg:last-child { border-right: 0; }
.pc-seg.ativo { background: var(--azul-med); color: #fff; font-weight: 600; }
.pc-seg:disabled { opacity: .45; cursor: default; }
.pc-sel { padding: 6px 8px; font-size: 12px; border: 1px solid var(--cinza-brd); border-radius: var(--r-md, 6px); background: var(--branco); color: var(--texto); }
.pc-avisos { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.pc-aviso { padding: 6px 10px; border-radius: 6px; border-left: 4px solid var(--amarelo); background: var(--cinza-bg); font-size: 12px; }
.pc-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: 10px; margin-bottom: 12px; }
.pc-cartao { background: var(--branco); border: 1px solid var(--cinza-brd); border-top: 4px solid var(--pc-cor); border-radius: var(--r-md, 6px); padding: 10px 12px 9px; cursor: pointer; box-shadow: var(--s-cartao); transition: transform .12s; }
.pc-cartao:hover { transform: translateY(-1px); }
.pc-cartao.ativo { outline: 2px solid var(--azul-med); outline-offset: -1px; }
.pc-c-rotulo { font-size: 11px; color: var(--texto-sec); text-transform: uppercase; letter-spacing: .5px; }
.pc-c-valor { font-size: 24px; font-weight: 800; color: var(--titulo); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 2px 0 6px; font-variant-numeric: tabular-nums; }
.pc-selo { font-size: 10px; font-weight: 700; color: #fff; border-radius: var(--r-pill, 99px); padding: 1px 7px; letter-spacing: .3px; }
.pc-barra { position: relative; height: 8px; background: var(--cinza-bg); border-radius: 99px; margin: 10px 0 14px; }
.pc-sem-barra { background: repeating-linear-gradient(90deg, var(--cinza-brd) 0 6px, transparent 6px 10px); opacity: .6; }
.pc-enche { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; }
.pc-marca { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--texto); opacity: .55; }
.pc-marca i { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); font-size: 9px; font-style: normal; color: var(--texto-sec); }
.pc-c-obj { font-size: 11px; color: var(--texto-sec); }
.pc-medidas { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.pc-chip { border: 1px solid var(--cinza-brd); background: var(--branco); color: var(--texto); border-radius: var(--r-pill, 99px); padding: 4px 11px; font-size: 12px; cursor: pointer; }
.pc-chip.ativo { background: var(--azul-esc); border-color: var(--azul-esc); color: #fff; }
.pc-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 12px; }
.pc-bloco { margin-bottom: 12px; }
.pc-grafico { position: relative; height: 280px; padding: 8px 12px 12px; }
.pc-legenda { font-size: 11px; color: var(--texto-sec); display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pc-ponto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-left: 6px; }
.pc-tabela-wrap { overflow-x: auto; }
.pc-tabela { width: 100%; font-size: 12px; border-collapse: collapse; }
.pc-tabela th { font-size: 11px; text-align: right; white-space: nowrap; }
.pc-tabela th:first-child, .pc-tabela td:first-child { text-align: left; }
.pc-tabela th small { font-weight: 400; color: inherit; opacity: .75; text-transform: none; letter-spacing: 0; }
.pc-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pc-num small { color: var(--texto-sec); }
.pc-total td { border-top: 2px solid var(--cinza-brd); background: var(--cinza-bg); }
.pc-taxa { display: inline-block; width: 46px; height: 6px; border-radius: 99px; background: var(--cinza-bg); margin-right: 6px; vertical-align: middle; overflow: hidden; }
.pc-taxa span { display: block; height: 100%; background: var(--azul-med); }
.pc-funil { padding: 10px 14px 14px; max-width: 640px; }
.pc-funil-tit { font-size: 12px; color: var(--texto-sec); margin-bottom: 6px; }
.pc-f-linha { display: grid; grid-template-columns: 96px 1fr 56px 52px; align-items: center; gap: 8px; font-size: 12px; margin-bottom: 5px; }
.pc-f-barra { height: 14px; background: var(--cinza-bg); border-radius: 4px; overflow: hidden; }
.pc-f-barra span { display: block; height: 100%; background: linear-gradient(90deg, var(--azul-med), var(--azul-esc)); border-radius: 4px; }
.pc-f-linha b { text-align: right; font-variant-numeric: tabular-nums; }
.pc-f-linha small { color: var(--texto-sec); }
.pc-nota { font-size: 11px; color: var(--texto-sec); margin: 4px 2px 16px; }
.pc-vazio { padding: 24px; text-align: center; color: var(--texto-sec); }
@media (max-width: 600px) { .pc-c-valor { font-size: 20px; } .pc-grafico { height: 240px; } }