/* ═══ CARTEIRA INTELIGENTE — design system portado do CRM-VENDAS (25/08) ═══
   Porte fiel do tailwind.config.ts + globals.css do app da Ingrid pra CSS
   puro, ESCOPADO em .ci-scope (a aba CI e seus modais) pra não vazar pro
   resto do painel. Paleta petróleo/ouro/grafite + 6 cores semânticas (que
   nunca aparecem sem rótulo e ícone), Poppins nos títulos, Open Sans no
   corpo, cartões 10px com a sombra do app dela. */

.ci-scope {
  --petroleo: #00303C; --petroleo-900: #001F27; --petroleo-700: #0A4553;
  --petroleo-600: #155C6D; --petroleo-500: #2A7688; --petroleo-100: #E6EDEF; --petroleo-50: #F3F7F8;
  --ouro: #B8922A; --ouro-600: #9A7A22; --ouro-400: #D4A940; --ouro-200: #EBD9A5; --ouro-100: #F7EFD6; --ouro-50: #FCF8ED;
  --grafite: #717E86; --grafite-600: #5C686F; --grafite-400: #939497; --grafite-300: #B7BEC2;
  --grafite-200: #DDE1E3; --grafite-100: #EDF0F1; --grafite-50: #F6F8F9;
  --cresc: #1B7F4B; --cresc-forte: #12603A; --cresc-fundo: #E8F5EE;
  --aten: #B58105; --aten-forte: #8A6204; --aten-fundo: #FDF4E0;
  --prio: #C2560F; --prio-forte: #96430C; --prio-fundo: #FDEEE4;
  --risco: #B3261E; --risco-forte: #8C1D18; --risco-fundo: #FCEAE8;
  --info: #1B5E9E; --info-forte: #144878; --info-fundo: #E8F1FA;
  --inat: #8A9298; --inat-forte: #6B7378; --inat-fundo: #F1F3F4;
  --sombra-cartao: 0 1px 2px rgba(0,48,60,.06), 0 1px 3px rgba(0,48,60,.08);
  --sombra-elevada: 0 4px 12px rgba(0,48,60,.10), 0 2px 4px rgba(0,48,60,.06);
  --sombra-painel: 0 12px 32px rgba(0,48,60,.16);
  --f-titulo: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --f-corpo: 'Open Sans', 'Segoe UI', system-ui, sans-serif;
  font-family: var(--f-corpo);
  color: var(--petroleo-900);
}
.ci-scope h1, .ci-scope h2, .ci-scope h3, .ci-scope h4 { font-family: var(--f-titulo); }

/* ── layout: sidebar escura + corpo ── */
.ci-app { display: flex; gap: 0; align-items: stretch; min-height: calc(100vh - 150px);
  margin: -18px; border-radius: 0; }
.ci-sidebar { width: 236px; flex-shrink: 0; background: var(--petroleo); color: #fff;
  display: flex; flex-direction: column; border-radius: 0 10px 10px 0; }
.ci-marca { border-bottom: 1px solid rgba(255,255,255,.1); padding: 14px 16px; }
.ci-marca .grupo { font-family: var(--f-titulo); font-size: 10px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ouro-400); }
.ci-marca .nome { font-family: var(--f-titulo); font-size: 14px; font-weight: 700; line-height: 1.25; }
.ci-periodo { border-bottom: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.05); padding: 10px 16px; }
.ci-periodo .rot { font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ouro-400); }
.ci-periodo .val { font-size: 12px; font-weight: 600; }
.ci-periodo .sub { font-size: 11px; line-height: 1.35; color: var(--grafite-300); margin-top: 2px; }
.ci-periodo .sub b { color: #fff; }
.ci-periodo .sub .apagado { color: var(--grafite-400); }
.ci-nav { flex: 1; overflow-y: auto; padding: 12px 8px; }
.ci-nav .grupo { padding: 0 8px 4px; font-size: 10px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--grafite-400); margin-top: 12px; }
.ci-nav .grupo:first-child { margin-top: 0; }
.ci-nav button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: none; border: 0; color: var(--grafite-200); padding: 6px 8px; border-radius: 6px;
  font-size: 13px; cursor: pointer; font-family: var(--f-corpo); line-height: 1.3; }
.ci-nav button svg { flex-shrink: 0; }
.ci-nav button:hover { background: rgba(255,255,255,.1); color: #fff; }
.ci-nav button.on { background: var(--ouro); color: #fff; font-weight: 600; }
.ci-usuario { border-top: 1px solid rgba(255,255,255,.1); padding: 12px; }
.ci-usuario .linha { display: flex; align-items: center; gap: 10px; padding: 2px 6px; }
.ci-usuario .avatar { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 50%; background: var(--ouro); font-size: 12px; font-weight: 700; }
.ci-usuario .nome { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-usuario .papel { font-size: 11px; color: var(--grafite-300); }
.ci-corpo { flex: 1; min-width: 0; background: var(--grafite-50); padding: 16px 20px; border-radius: 10px 0 0 10px; }
@media (max-width: 880px) {
  .ci-app { flex-direction: column; }
  .ci-sidebar { width: 100%; border-radius: 10px; }
  .ci-nav { display: flex; flex-wrap: wrap; gap: 2px; }
  .ci-nav .grupo { width: 100%; }
  .ci-nav button { width: auto; }
  .ci-periodo, .ci-usuario { display: none; }
}

/* ── cartões ── */
.ci-cartao { background: #fff; border-radius: 10px; box-shadow: var(--sombra-cartao);
  border: 1px solid var(--grafite-200); }
.ci-cartao > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  border-bottom: 1px solid var(--grafite-100); padding: 10px 16px; }
.ci-cartao > header h2 { margin: 0; font-size: 13px; font-weight: 600; color: var(--petroleo); }
.ci-cartao > header .desc { margin: 2px 0 0; font-size: 11px; color: var(--grafite); }
.ci-cartao .ci-miolo { padding: 14px 16px; }
.ci-ind { background: #fff; border-radius: 10px; box-shadow: var(--sombra-cartao);
  border: 1px solid var(--grafite-200); padding: 12px 14px; display: block; color: inherit; text-decoration: none; }
.ci-ind.clicavel { cursor: pointer; transition: box-shadow .15s; }
.ci-ind.clicavel:hover { box-shadow: var(--sombra-elevada); }
.ci-ind .topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.ci-ind .icone { border-radius: 6px; padding: 4px; display: inline-flex; }
.ci-ind .valor { margin-top: 6px; font-family: var(--f-titulo); font-size: 22px; font-weight: 700;
  line-height: 1; color: var(--petroleo); }
.ci-ind .apoio { margin-top: 6px; font-size: 11px; color: var(--grafite); }
.ci-rotulo { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--grafite); }
.ci-grid-ind { display: grid; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 10px; }
.ci-grid-graf { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.ci-col2 { grid-column: span 2; }
@media (max-width: 760px) { .ci-col2 { grid-column: span 1; } }

/* ── semânticas: cor NUNCA sozinha (ícone + rótulo sempre) ── */
.ci-selo { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px;
  padding: 2px 8px; font-size: 11px; font-weight: 600; white-space: nowrap; border: 1px solid transparent; }
.ci-sem-crescimento { color: var(--cresc-forte); background: var(--cresc-fundo); border-color: rgba(27,127,75,.3); }
.ci-sem-atencao { color: var(--aten-forte); background: var(--aten-fundo); border-color: rgba(181,129,5,.3); }
.ci-sem-prioridade { color: var(--prio-forte); background: var(--prio-fundo); border-color: rgba(194,86,15,.3); }
.ci-sem-risco { color: var(--risco-forte); background: var(--risco-fundo); border-color: rgba(179,38,30,.3); }
.ci-sem-informacao { color: var(--info-forte); background: var(--info-fundo); border-color: rgba(27,94,158,.3); }
.ci-sem-inativo { color: var(--inat-forte); background: var(--inat-fundo); border-color: rgba(138,146,152,.3); }
.ci-txt-cresc { color: var(--cresc-forte); } .ci-txt-aten { color: var(--aten-forte); }
.ci-txt-prio { color: var(--prio-forte); } .ci-txt-risco { color: var(--risco-forte); }
.ci-txt-info { color: var(--info-forte); } .ci-txt-inat { color: var(--inat); }
.ci-txt-ouro { color: var(--ouro-600); } .ci-txt-petroleo { color: var(--petroleo); }

/* aviso (caixa com ícone) */
.ci-aviso { display: flex; gap: 10px; border-radius: 10px; border: 1px solid; padding: 12px;
  font-size: 12px; line-height: 1.5; color: var(--petroleo-900); }
.ci-aviso svg { flex-shrink: 0; margin-top: 2px; }
.ci-aviso .tit { font-weight: 600; margin: 0 0 2px; }
.ci-aviso.ci-sem-crescimento, .ci-aviso.ci-sem-atencao, .ci-aviso.ci-sem-prioridade,
.ci-aviso.ci-sem-risco, .ci-aviso.ci-sem-informacao, .ci-aviso.ci-sem-inativo { border-radius: 10px; }

/* ── título de página / botões / campos ── */
.ci-titulo { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 12px; margin-bottom: 14px; }
.ci-titulo h1 { margin: 0; font-size: 19px; font-weight: 700; color: var(--petroleo); }
.ci-titulo .desc { margin: 2px 0 0; font-size: 13px; color: var(--grafite); }
.ci-titulo .acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ci-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 6px; padding: 7px 12px; font-size: 13px; font-weight: 600; cursor: pointer;
  border: 1px solid transparent; font-family: var(--f-corpo); transition: background .12s; }
.ci-btn:disabled { opacity: .5; cursor: not-allowed; }
.ci-btn-prim { background: var(--petroleo); color: #fff; }
.ci-btn-prim:hover { background: var(--petroleo-700); }
.ci-btn-sec { background: #fff; color: var(--petroleo); border-color: var(--grafite-200); }
.ci-btn-sec:hover { background: var(--grafite-50); }
.ci-btn-ouro { background: var(--ouro); color: #fff; }
.ci-btn-ouro:hover { background: var(--ouro-600); }
.ci-btn-fantasma { background: none; color: var(--grafite-600); }
.ci-btn-fantasma:hover { background: var(--grafite-100); }
.ci-btn-peq { padding: 3px 8px; font-size: 11.5px; }
.ci-campo { width: 100%; border-radius: 6px; border: 1px solid var(--grafite-200); background: #fff;
  padding: 7px 10px; font-size: 13px; font-family: var(--f-corpo); color: var(--petroleo-900); }
.ci-campo:focus { outline: none; border-color: var(--petroleo-500); box-shadow: 0 0 0 2px var(--petroleo-100); }
.ci-scope select.ci-campo { width: auto; }

/* ── padrão de tabela do sistema (cabeçalho fixo + 1ª coluna fixa) ── */
.ci-rolagem { overflow: auto; max-height: calc(100vh - 240px); }
.ci-scope table { border-collapse: separate; border-spacing: 0; width: 100%; }
.ci-th { position: sticky; top: 0; z-index: 20; padding: 8px 12px; text-align: left;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--grafite); background: var(--grafite-50); border-bottom: 1px solid var(--grafite-200);
  white-space: nowrap; }
.ci-th-fixa { position: sticky; left: 0; z-index: 30; }
.ci-td { padding: 8px 12px; font-size: 13px; border-bottom: 1px solid var(--grafite-100); vertical-align: middle; }
.ci-td-fixa { position: sticky; left: 0; z-index: 10; background: #fff; }
.ci-scope tbody tr:hover .ci-td { background: var(--grafite-50); }
.ci-scope tbody tr:hover .ci-td-fixa { background: var(--grafite-50); }
.ci-num { text-align: right; }
.ci-th button { background: none; border: 0; cursor: pointer; font: inherit; color: inherit;
  display: inline-flex; align-items: center; gap: 4px; text-transform: inherit; letter-spacing: inherit; }
.ci-th button:hover { color: var(--petroleo); }
.ci-sub { font-size: 11px; color: var(--grafite); }
.ci-mono { font-family: Consolas, ui-monospace, monospace; font-size: 12px; }
.ci-forte { font-weight: 600; color: var(--petroleo); }
.ci-link { color: var(--petroleo); font-weight: 600; text-decoration: none; cursor: pointer; }
.ci-link:hover { color: var(--ouro-600); text-decoration: underline; }
.ci-semdado { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--inat); }
.ci-microbarra { display: block; height: 4px; width: 48px; overflow: hidden; border-radius: 999px;
  background: var(--grafite-200); margin-top: 3px; }
.ci-microbarra i { display: block; height: 100%; border-radius: 999px; background: var(--petroleo); }

/* barra de progresso */
.ci-progresso { height: 6px; width: 100%; overflow: hidden; border-radius: 999px; background: var(--grafite-200); }
.ci-progresso i { display: block; height: 100%; border-radius: 999px; transition: width .2s; }

/* ── fila Trabalhar Hoje ── */
.ci-fila-item { overflow: hidden; }
.ci-fila-ordem { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--petroleo); color: #fff; font-family: var(--f-titulo); font-size: 14px; font-weight: 700; }
.ci-caixinha { border-radius: 6px; border: 1px solid var(--grafite-200); background: var(--grafite-50); padding: 6px 10px; }
.ci-caixinha .v { font-size: 12px; font-weight: 600; color: var(--petroleo); margin-top: 1px; }
.ci-pot-caixa { border-radius: 10px; border: 1px solid var(--ouro-200); background: var(--ouro-50);
  padding: 10px; text-align: center; }
.ci-pot-caixa .v { font-family: var(--f-titulo); font-size: 17px; font-weight: 700; color: var(--ouro-600); }
.ci-chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 6px; border: 1px solid var(--grafite-200);
  background: #fff; color: var(--grafite-600); padding: 4px 10px; font-size: 12px; font-weight: 600; cursor: pointer; }
.ci-chip:hover { background: var(--grafite-50); }
.ci-chip.on { border-color: var(--petroleo); background: var(--petroleo); color: #fff; }
.ci-chip .qtd { border-radius: 999px; padding: 0 6px; font-size: 10px; background: var(--grafite-100); }
.ci-chip.on .qtd { background: rgba(255,255,255,.2); }
.ci-chip:disabled { opacity: .4; cursor: default; }

/* ── gráficos ── */
.ci-graf svg { display: block; width: 100%; height: auto; }
.ci-graf .eixo { font-size: 11px; fill: var(--grafite); font-family: var(--f-corpo); }
.ci-graf .grade { stroke: var(--grafite-100); stroke-dasharray: 3 3; }
.ci-graf [data-tip] { cursor: default; }
.ci-graf [data-cifn] { cursor: pointer; }
.ci-legenda { min-width: 0; flex: 1; margin: 0; padding: 0; list-style: none; }
.ci-legenda li a, .ci-legenda li > span { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; border-radius: 4px; padding: 2px 4px; font-size: 12px; text-decoration: none; color: inherit; }
.ci-legenda li a:hover { background: var(--ouro-50); }
.ci-legenda .cor { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.ci-legenda .rotulo { color: var(--grafite-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-legenda .valor { font-weight: 600; color: var(--petroleo); flex-shrink: 0; }
.ci-legenda .pct { font-weight: 400; color: var(--grafite-400); margin-left: 4px; }
.ci-dica-clique { display: flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 11px; color: var(--ouro-600); }
.ci-barras-h .linha { margin: 5px 0; }
.ci-barras-h .cab { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.ci-barras-h .cab .r { color: var(--grafite-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-barras-h .cab b { color: var(--petroleo); flex-shrink: 0; }
.ci-barras-h .trilho { height: 8px; border-radius: 4px; background: var(--grafite-100); margin-top: 2px; }
.ci-barras-h .trilho i { display: block; height: 100%; border-radius: 4px; background: var(--petroleo); }
.ci-barras-h .linha.clicavel { cursor: pointer; border-radius: 6px; padding: 2px 4px; margin: 3px -4px; }
.ci-barras-h .linha.clicavel:hover { background: var(--ouro-50); }

/* tooltip flutuante compartilhado */
#ci-tooltip { position: fixed; z-index: 9999; pointer-events: none; display: none;
  border-radius: 6px; border: 1px solid var(--grafite-200); background: #fff; padding: 6px 10px;
  font-size: 12px; font-family: var(--f-corpo); box-shadow: var(--sombra-elevada); max-width: 260px; }
#ci-tooltip .t { font-weight: 600; color: var(--petroleo); }
#ci-tooltip .s { color: var(--grafite-600); }

/* ── modal do escopo CI ── */
.ci-modal-bg { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center;
  justify-content: center; background: rgba(0,31,39,.55); padding: 16px; }
.ci-modal { width: 100%; max-width: 560px; max-height: 90vh; overflow: auto; border-radius: 10px;
  background: #fff; box-shadow: var(--sombra-painel); }
.ci-modal > header { border-bottom: 1px solid var(--grafite-100); padding: 12px 16px; }
.ci-modal > header h2 { margin: 0; font-size: 14px; font-weight: 600; color: var(--petroleo); }
.ci-modal .ci-miolo { padding: 14px 16px; }
.ci-modal > footer { display: flex; justify-content: flex-end; gap: 8px;
  border-top: 1px solid var(--grafite-100); padding: 10px 16px; }
.ci-scope label .ci-rotulo { display: block; margin-bottom: 3px; }

/* impressão: sidebar e ações somem; tabelas soltam a rolagem */
@media print {
  .ci-sidebar, .ci-titulo .acoes, .ci-sem-impressao { display: none !important; }
  .ci-rolagem { overflow: visible !important; max-height: none !important; }
  .ci-th, .ci-th-fixa, .ci-td-fixa { position: static !important; }
  .ci-cartao, .ci-scope tr { break-inside: avoid; }
}