/* =====================================================================
   ORGANISMOS — blocos completos de interface, feitos de moléculas e átomos.
   cabeçalho de página · barra de filtros · destaque (herói) · painel da meta · faixa de indicadores
   seção/painel · tabela e fichas · menu lateral · barra inferior · abas · verificações · DRE
   ===================================================================== */

/* Cabeçalho de página */
.pagina-topo { display: flex; flex-wrap: wrap; gap: var(--esp-4) var(--esp-6); align-items: flex-end; justify-content: space-between; margin-bottom: var(--esp-5); }
.pagina-topo .sub { margin: .3rem 0 0; color: var(--texto-2); }
.cabecalho { display: flex; flex-wrap: wrap; gap: var(--esp-4); justify-content: space-between; align-items: center; margin-bottom: var(--esp-5); }
.acoes { display: flex; flex-wrap: wrap; gap: var(--esp-3); align-items: center; margin-top: var(--esp-5); }
.cabecalho .acoes, .pagina-topo .acoes { margin-top: 0; }
.acoes form { margin: 0; }

/* Barra de filtros */
.filtros { display: flex; flex-wrap: wrap; gap: var(--esp-3) var(--esp-4); align-items: center; margin-bottom: var(--esp-5); }
.filtros .datas { display: flex; gap: var(--esp-2); align-items: center; }
.filtros .datas input, .filtros select { min-height: 34px; padding: .3rem .5rem; }
.filtros-selects { display: flex; gap: var(--esp-2); flex-wrap: wrap; margin-left: auto; }
.periodo-atual { margin: 0; color: var(--texto-2); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }

/* Superfícies: seção, painel, herói, meta, faixa */
.secao, .painel, .heroi, .meta-mes, .faixa { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-painel); }
.secao { padding: 1.15rem var(--esp-5) var(--esp-5); margin-bottom: var(--esp-4); }
.painel { padding: 1.1rem 1.2rem; margin-bottom: var(--esp-4); }
.secao-topo { display: flex; justify-content: space-between; align-items: baseline; gap: var(--esp-4); flex-wrap: wrap; margin-bottom: var(--esp-3); }
.secao-topo h2 { margin: 0; }
.sub-secao { margin: var(--esp-5) 0 var(--esp-1); font-size: .9rem; display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; }
.sub-secao .nota { margin: 0; font-weight: 400; }
details.painel summary { cursor: pointer; }
details.painel form { margin-top: var(--esp-4); }

/* Destaque: herói + painel da meta */
.destaque { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--esp-4); align-items: stretch; margin-bottom: var(--esp-4); }
.heroi { padding: var(--esp-5) 1.35rem; display: flex; flex-direction: column; justify-content: center; }
.heroi .rotulo { color: var(--texto-2); font-size: .9rem; margin: 0 0 var(--esp-1); }
.heroi .valor { font-size: var(--fs-hero); line-height: 1.05; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 var(--esp-2); }
.heroi .comparacao { color: var(--texto-2); font-size: var(--fs-sm); margin: 0; }
.meta-mes { padding: 1.1rem var(--esp-5); display: flex; flex-direction: column; gap: .7rem; }
.meta-topo { display: flex; justify-content: space-between; align-items: baseline; gap: var(--esp-2); flex-wrap: wrap; }
.meta-topo h2 { margin: 0; font-size: .9rem; }
.meta-topo .nota { margin: 0; }
.meta-numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-2) var(--esp-4); margin: 0; }
.meta-numeros dt { font-size: var(--fs-xs); color: var(--texto-2); }
.meta-numeros dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Faixa de indicadores: stats lado a lado com divisórias */
.faixa { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: var(--esp-4); }
.faixa > .stat + .stat { border-left: 1px solid var(--borda); }

/* Grades */
.grade-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: var(--esp-4); margin-bottom: var(--esp-4); }
.grade-2 > .secao, .grade-2 > .painel { margin-bottom: 0; }
.medidores { display: grid; gap: var(--esp-1); }
.progresso { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--esp-2); margin-top: var(--esp-4); }
.grade-atendimentos { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--esp-2) var(--esp-4); }
.grade-atendimentos input { width: 100%; }

/* Gráfico */
.grafico { width: 100%; height: 300px; }
.grafico-barras-h { height: auto; min-height: 120px; }
.dados { margin-top: var(--esp-2); font-size: .85rem; }
.dados summary { cursor: pointer; color: var(--texto-2); font-weight: 500; width: max-content; }
.dados[open] summary { margin-bottom: var(--esp-2); }
.dados .tabela-rolagem { max-height: 320px; overflow: auto; }

/* Tabela */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--borda); vertical-align: middle; }
th:first-child, td:first-child { padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }
thead th { font-size: var(--fs-xs); font-weight: 600; color: var(--texto-2); border-bottom-color: var(--borda-forte); white-space: nowrap; }
tbody tr:hover td { background: color-mix(in srgb, var(--superficie-2) 60%, transparent); }
tfoot td { border-top: 1px solid var(--borda-forte); border-bottom: 0; font-weight: 600; }
th.num, td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabela-rolagem { overflow-x: auto; }
.linha-alerta td { background: var(--erro-fundo); }
.linha-alerta td:first-child { box-shadow: inset 3px 0 0 var(--erro); padding-left: .6rem; }
td input, td select { width: 100%; min-width: 90px; }
.barra-celula { display: flex; align-items: center; gap: .6rem; justify-content: flex-end; }
.barra-celula i { display: block; height: 6px; border-radius: 0 3px 3px 0; background: var(--viz-1); min-width: 2px; }
.ficha-titulo strong { display: block; }
.ficha-titulo .secundario { font-size: .8rem; }
.dados-lista { display: grid; grid-template-columns: auto 1fr; gap: .45rem var(--esp-4); margin: 0; }
.dados-lista dt { color: var(--texto-2); }
.dados-lista dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

/* Abas e navegação de mês */
.abas { display: flex; gap: var(--esp-5); flex-wrap: wrap; margin: 0 0 var(--esp-4); border-bottom: 1px solid var(--borda); align-items: center; }
.abas a, .abas strong { text-decoration: none; color: var(--texto-2); padding: var(--esp-2) 0; border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 500; }
.abas a[aria-current], .abas strong { color: var(--texto); border-bottom-color: var(--texto); font-weight: 600; }
.abas a:hover { color: var(--texto); }

/* Lista de mensagens */
.mensagens { list-style: none; padding: 0; margin: 0 0 var(--esp-5); display: grid; gap: var(--esp-2); }

/* Menu lateral */
.lateral {
  background: var(--fundo-lateral); border-right: 1px solid var(--borda); padding: var(--esp-5) .9rem; position: sticky; top: 0;
  height: 100vh; display: flex; flex-direction: column; gap: var(--esp-5); overflow-y: auto;
}
.marca { display: block; padding: 0 .55rem; text-decoration: none; color: var(--texto); font-size: 1.2rem; }
.marca img { height: 28px; width: auto; display: block; }
.lateral > .botao-privacidade { margin: 0 .55rem; align-self: flex-start; }
.menu { display: flex; flex-direction: column; flex: 1; }
.menu > summary { display: none; }
.menu nav { flex: 1; }
.menu-topo-movel { display: none; }
.menu-grupo { margin: var(--esp-4) .55rem .3rem; font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-3); }
.menu-grupo:first-child { margin-top: 0; }
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu a { display: flex; align-items: center; gap: .6rem; padding: .42rem .55rem; border-radius: var(--raio-sm); color: var(--texto-2); text-decoration: none; font-weight: 500; }
.menu-icone { display: inline-flex; flex: none; color: var(--texto-3); }
.menu-icone svg { width: 18px; height: 18px; }
.menu a:hover .menu-icone, .menu a[aria-current] .menu-icone { color: var(--marca-laranja); }
.menu a:hover { background: var(--superficie-2); color: var(--texto); }
.menu a[aria-current] { background: var(--superficie-2); color: var(--texto); box-shadow: inset 2px 0 0 var(--marca-laranja); }
.conta { display: grid; gap: .1rem; padding: .9rem .55rem 0; border-top: 1px solid var(--borda); margin: var(--esp-4) 0 0; font-size: .85rem; }
.conta-nome { font-weight: 600; overflow-wrap: anywhere; }
.conta-papel { color: var(--texto-2); }
.conta .btn-link { justify-self: start; margin-top: .35rem; font-size: .85rem; }

/* Barra inferior (só celular) */
.abas-moveis { display: none; }

/* Verificações (qualidade de dados) */
.verificacoes { list-style: none; margin: 0; padding: 0; }
.verificacao { border-bottom: 1px solid var(--borda); }
.verificacao:last-child { border-bottom: 0; }
.verificacao summary { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto auto; gap: .9rem; align-items: center; padding: .8rem 0; cursor: pointer; list-style: none; }
.verificacao summary::-webkit-details-marker { display: none; }
.verificacao-status { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); }
.gravidade-critica .verificacao-status { background: var(--erro); }
.gravidade-atencao .verificacao-status { background: var(--aviso); }
.verificacao-titulo { font-weight: 600; }
.sem-pendencia .verificacao-titulo { font-weight: 500; color: var(--texto-2); }
.verificacao-total { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 2.5rem; text-align: right; }
.verificacao-corpo { padding: 0 0 var(--esp-5) 1.6rem; }

/* DRE e revisão de extrato */
table.dre td:first-child { white-space: nowrap; }
.dre-item td:first-child { padding-left: var(--esp-4); color: var(--texto-2); }
.dre-subtotal td { font-weight: 600; border-top: 1px solid var(--borda-forte); }
.dre-total td { font-weight: 700; font-size: 1.02rem; border-top: 2px solid var(--texto); }
form.revisar { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
form.revisar select, form.revisar input[type="month"] { min-height: 34px; padding: .25rem .4rem; max-width: 200px; }
form.revisar .regra { display: flex; align-items: center; gap: .35rem; font-size: .8rem; color: var(--texto-2); flex-basis: 100%; }
form.revisar .regra input[type="text"] { min-height: 28px; padding: .15rem .4rem; font-size: .8rem; max-width: 220px; }

/* ---------- Celular ---------- */
@media (max-width: 899px) {
  .pagina-topo { margin-bottom: .9rem; gap: var(--esp-2); align-items: center; }
  .pagina-topo .sub { font-size: .85rem; margin-top: .15rem; }

  /* Filtros compactos: período rola na horizontal, selects lado a lado */
  .filtros { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; margin-bottom: var(--esp-4); }
  .filtros .segmentado { margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); border: 0; background: none; gap: .4rem; scroll-snap-type: x proximity; }
  .filtros .segmentado label { scroll-snap-align: start; }
  .filtros .segmentado span { border: 1px solid var(--borda-forte); border-radius: var(--raio-pilula); padding: .45rem .85rem; background: var(--superficie); }
  .filtros .segmentado input:checked + span { border-color: var(--tinta); }
  .periodo-atual { display: none; }
  .filtros .datas { display: grid; grid-template-columns: 1fr auto 1fr; }
  .filtros .datas input { width: 100%; }
  .filtros-selects { display: grid; grid-template-columns: 1fr 1fr; margin: 0; }
  .filtros-selects > :only-child { grid-column: 1 / -1; }
  .filtros select, .filtros input[type="search"] { width: 100%; min-height: 40px; font-size: .9rem; }

  .destaque { grid-template-columns: 1fr; gap: var(--esp-3); margin-bottom: var(--esp-3); }
  .heroi { padding: var(--esp-4) 1.1rem; }
  .heroi .valor { margin-bottom: .3rem; }
  .heroi .comparacao { font-size: .82rem; }
  .meta-mes { padding: var(--esp-4) 1.1rem; gap: .6rem; }
  .meta-topo h2 { font-size: .85rem; }
  .meta-numeros { grid-template-columns: 1fr; gap: 0; }
  .meta-numeros > div { display: flex; justify-content: space-between; align-items: baseline; padding: .4rem 0; border-top: 1px solid var(--borda); }
  .meta-numeros dt { font-size: .82rem; }

  .faixa { grid-template-columns: 1fr 1fr; margin-bottom: var(--esp-3); }
  .faixa > .stat + .stat { border-left: 0; }
  .faixa > .stat:nth-child(even) { border-left: 1px solid var(--borda); }
  .faixa > .stat:nth-child(n+3) { border-top: 1px solid var(--borda); }

  .secao { padding: .95rem var(--esp-4) var(--esp-4); margin-bottom: var(--esp-3); }
  .grade-2 { grid-template-columns: minmax(0, 1fr); gap: var(--esp-3); margin-bottom: var(--esp-3); }
  .secao-topo { margin-bottom: var(--esp-2); gap: var(--esp-1) var(--esp-3); }
  .legenda { font-size: var(--fs-xs); gap: var(--esp-1) .8rem; }
  .grafico { height: 230px; }

  /* Topo compacto e fixo */
  .lateral {
    position: sticky; top: 0; z-index: 30; height: auto; flex-direction: row; flex-wrap: nowrap; align-items: center;
    justify-content: space-between; gap: var(--esp-2); padding: .6rem var(--gutter); padding-top: calc(.6rem + env(safe-area-inset-top));
    border-right: 0; border-bottom: 1px solid var(--borda); overflow: visible;
    background: color-mix(in srgb, var(--fundo-lateral) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px);
  }
  .marca img { height: 24px; }
  .lateral > .botao-privacidade { margin: 0; }
  .menu:not([open]) { display: none; }
  /* backdrop-filter faz o .lateral virar referência do position: fixed; com o menu aberto ele sai, para a folha
     cobrir a tela inteira (e não só a barra do topo). */
  body.menu-aberto .lateral, .lateral:has(> .menu[open]) { backdrop-filter: none; background: var(--fundo-lateral); }

  /* Menu completo como folha sobre a tela */
  .menu[open] {
    position: fixed; inset: 0 0 calc(var(--abas-altura) + env(safe-area-inset-bottom)) 0; z-index: 40;
    background: var(--fundo-lateral); padding: var(--esp-4) var(--gutter) var(--esp-6); overflow-y: auto; display: flex; flex-direction: column;
  }
  .menu-topo-movel { display: flex; justify-content: space-between; align-items: center; padding: var(--esp-1) .55rem var(--esp-4); font-size: 1.1rem; }
  .menu a { padding: .75rem .55rem; font-size: var(--fs-md); }

  /* Barra de atalhos inferior */
  .abas-moveis {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    height: calc(var(--abas-altura) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: color-mix(in srgb, var(--fundo-lateral) 92%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-top: 1px solid var(--borda);
  }
  .abas-moveis a, .abas-moveis button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 48px;
    text-decoration: none; color: var(--texto-3); font: inherit; font-size: var(--fs-2xs); font-weight: 600; background: none; border: 0; cursor: pointer;
  }
  .abas-moveis svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  .abas-moveis a[aria-current], body.menu-aberto .abas-moveis [data-abrir-menu] { color: var(--marca-laranja); }

  .verificacao summary { grid-template-columns: 12px minmax(0, 1fr) auto; }
  .verificacao summary .selo { display: none; }
  .verificacao-corpo { padding-left: 0; }
}

/* Tabelas "fichas": cartões em telas estreitas */
@media (max-width: 640px) {
  table.fichas thead { display: none; }
  table.fichas, table.fichas tbody { display: block; }
  table.fichas tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem var(--esp-3); padding: .85rem 0; border-bottom: 1px solid var(--borda); }
  table.fichas tr:last-child { border-bottom: 0; }
  table.fichas tbody tr:hover td { background: none; }
  table.fichas td { display: flex; flex-direction: column; padding: 0; border: 0; text-align: left; white-space: normal; min-width: 0; overflow-wrap: anywhere; }
  table.fichas td.num { text-align: left; white-space: nowrap; font-size: .92rem; }
  table.fichas td[data-rotulo]::before { content: attr(data-rotulo); font-size: var(--fs-2xs); font-weight: 600; color: var(--texto-3); text-transform: uppercase; letter-spacing: .03em; margin-bottom: .1rem; }
  table.fichas td.ficha-titulo { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--esp-2); }
  table.fichas td.ficha-titulo a { text-decoration: none; color: var(--texto); }
  table.fichas td.ficha-acoes { grid-column: 1 / -1; }
  table.fichas td.ficha-acoes .btn { width: 100%; }
  table.fichas td.ficha-larga { grid-column: span 2; overflow-wrap: anywhere; }
  table.fichas td.so-desktop-cel { display: none; }
  table.fichas td.vazio { grid-column: 1 / -1; display: block; text-align: center; }
  table.fichas .linha-alerta td { background: none; }
  table.fichas tr.linha-alerta { box-shadow: inset 3px 0 0 var(--erro); padding-left: var(--esp-3); }
  table.fichas .linha-alerta td:first-child { box-shadow: none; padding-left: 0; }
  .tabela-rolagem:has(> table.fichas) { overflow: visible; }
}

/* Ranking agrupado por loja */
.grupo-loja + .grupo-loja { margin-top: var(--esp-5); }
.grupo-topo { display: flex; justify-content: space-between; align-items: baseline; gap: var(--esp-3); flex-wrap: wrap; padding-bottom: var(--esp-2); border-bottom: 2px solid var(--texto); }
.grupo-topo h3 { margin: 0; font-size: .95rem; }
.grupo-topo .secundario { font-size: .85rem; }

/* Linha de grupo (loja) dentro de tabelas */
tr.linha-grupo th { padding-top: var(--esp-5); border-bottom: 2px solid var(--texto); font-size: .95rem; color: var(--texto); }
tbody:first-of-type tr.linha-grupo th { padding-top: var(--esp-2); }
@media (max-width: 640px) {
  table.fichas tr.linha-grupo { display: flex; justify-content: space-between; padding: var(--esp-4) 0 var(--esp-2); border-bottom: 2px solid var(--texto); }
  table.fichas tr.linha-grupo th { padding: 0; border: 0; }
}

/* Leitor de conversa (WhatsApp) com a avaliação ao lado */
.leitor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: var(--esp-5); align-items: start; }
.leitor-avaliacao { position: sticky; top: var(--esp-4); display: grid; gap: var(--esp-4); }
.leitor-avaliacao .secao { margin: 0; }
.chat { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--esp-2); }
.chat-msg { display: flex; }
.chat-balao { max-width: min(80%, 560px); padding: .5rem .75rem; border-radius: 12px; background: var(--superficie-2); overflow-wrap: anywhere; }
.chat-balao p { margin: 0; }
.chat-balao p + p { margin-top: .25rem; }
.chat-atendente, .chat-automatico, .chat-nota { justify-content: flex-end; }
.chat-atendente .chat-balao { background: color-mix(in srgb, var(--marca-laranja) 14%, var(--superficie)); }
.chat-automatico .chat-balao { background: var(--superficie); border: 1px dashed var(--borda-forte); color: var(--texto-2); }
.chat-nota .chat-balao { background: var(--aviso-fundo); }
.chat-sistema { justify-content: center; font-size: var(--fs-xs); color: var(--texto-3); }
.chat-autor { font-size: var(--fs-xs); font-weight: 600; color: var(--texto-2); }
.chat-anexo { font-size: var(--fs-sm); color: var(--texto-2); }
.chat-hora { font-size: var(--fs-xs); color: var(--texto-3); text-align: right; }
@media (max-width: 899px) {
  .leitor { grid-template-columns: minmax(0, 1fr); }
  .leitor-avaliacao { position: static; order: -1; }
  .chat-balao { max-width: 88%; }
}

/* Situação das rodadas de IA no cabeçalho */
.situacao-ia { display: flex; align-items: center; gap: var(--esp-3); flex-wrap: wrap; justify-content: flex-end; }
.situacao-ia p { margin: 0; }
@media (max-width: 899px) { .situacao-ia { justify-content: flex-start; } }

/* Início: pendências, cartões por área e ações rápidas */
.pendencias-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-2); }
.pendencia {
  display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; gap: var(--esp-3); align-items: center;
  padding: var(--esp-3) var(--esp-4); border: 1px solid var(--borda); border-left: 4px solid var(--aviso); border-radius: var(--raio-sm);
  color: var(--texto); text-decoration: none; background: var(--superficie);
}
.pendencia:hover { background: var(--superficie-2); }
.pendencia-critica { border-left-color: var(--erro); }
.pendencia-n { font-size: var(--fs-lg); font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; }
.pendencia-critica .pendencia-n { color: var(--erro); }
.pendencia-texto { display: flex; flex-direction: column; min-width: 0; }
.pendencia-texto .secundario { font-size: var(--fs-sm); }
.pendencia-seta { font-size: 1.4rem; color: var(--texto-3); }
.tudo-em-dia { margin: 0; color: var(--ok); font-weight: 600; }
.grade-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--esp-4); margin-top: var(--esp-4); }
.grade-cartoes .secao { margin: 0; }
.cartao-area h2 a { color: inherit; text-decoration: none; }
.cartao-area h2 a:hover { color: var(--primaria); }
.cartao-meta { margin-bottom: var(--esp-3); display: grid; gap: var(--esp-2); }
.cartao-meta .nota { margin: 0; }
.cartao-numeros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-3) var(--esp-4); margin: 0; }
.cartao-numeros dt { font-size: var(--fs-xs); color: var(--texto-2); }
.cartao-numeros dd { margin: .1rem 0 0; font-size: var(--fs-lg); font-weight: 600; font-variant-numeric: tabular-nums; display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem; }
.rotulo-secao { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3); margin: var(--esp-6) 0 var(--esp-2); }
.acoes-rapidas ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.acao-rapida {
  display: inline-flex; align-items: center; gap: var(--esp-2); padding: .55rem .9rem; min-height: var(--toque-min);
  border: 1px solid var(--borda-forte); border-radius: var(--raio-pilula); background: var(--superficie); color: var(--texto);
  text-decoration: none; font-weight: 500;
}
.acao-rapida:hover { border-color: var(--primaria); color: var(--primaria); }
.acao-rapida svg { width: 18px; height: 18px; }
@media (max-width: 640px) {
  .pendencia { padding: var(--esp-3); grid-template-columns: 2.2rem minmax(0, 1fr) auto; }
  .cartao-numeros dd { font-size: var(--fs-md, 1.05rem); }
}

/* Marketing: funil, faixas de 6 indicadores, gráficos de alturas diferentes */
.faixa-6 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }
.funil { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-3); }
.funil-barra { height: 14px; border-radius: var(--raio-pilula); background: var(--superficie-2); overflow: hidden; }
.funil-barra > span { display: block; height: 100%; background: var(--viz-1); border-radius: var(--raio-pilula); }
.funil li:nth-child(n+3) .funil-barra > span { background: color-mix(in srgb, var(--viz-1) 80%, var(--texto)); }
.funil-texto { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .45rem; margin-top: .3rem; font-size: var(--fs-sm); }
.funil-texto strong { font-size: var(--fs-md); font-variant-numeric: tabular-nums; }
.funil-texto .secundario { flex-basis: 100%; font-size: var(--fs-xs); }
.funil-passagem { font-size: var(--fs-xs); font-weight: 600; color: var(--texto-2); background: var(--superficie-2); padding: 0 .4rem; border-radius: var(--raio-pilula); }
.grade-2-larga { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.grafico-baixo { height: 160px; }
.grafico-medio { height: 240px; }
.grafico-alto { height: 380px; }
.grafico-calor { height: 300px; }
.subtitulo-grafico { margin: var(--esp-4) 0 0; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3); }
.quadrantes { list-style: none; margin: var(--esp-3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--esp-2); font-size: var(--fs-sm); color: var(--texto-2); }
.quadrantes strong { color: var(--texto); display: block; }
.composicao-mini { height: 8px; margin: 0 0 .25rem; min-width: 120px; }
.destaque-texto { margin: var(--esp-2) 0 0; padding: var(--esp-3); background: var(--aviso-fundo); border-radius: var(--raio-sm); font-size: var(--fs-sm); }
.valor-cliente { margin-top: var(--esp-4); }
@media (max-width: 899px) { .grade-2-larga { grid-template-columns: minmax(0, 1fr); } .grafico-alto { height: 320px; } }
.funil-bloco { margin: 0 0 var(--esp-2); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3); }
.funil-anuncio { margin-bottom: var(--esp-5); }
.funil-anuncio .funil-barra > span { background: var(--viz-2); }
.sinal-ia span { display: block; }

/* Atendimento: fila agora */
.fila-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: var(--esp-2); margin-bottom: var(--esp-4); }
.fila-num { display: flex; flex-direction: column; gap: .1rem; padding: var(--esp-3); border: 1px solid var(--borda); border-left: 4px solid var(--ok); border-radius: var(--raio-sm); }
.fila-num strong { font-size: var(--fs-2xl); font-variant-numeric: tabular-nums; line-height: 1.1; }
.fila-num span { font-size: var(--fs-sm); color: var(--texto-2); }
.fila-num em { font-style: normal; font-size: var(--fs-xs); color: var(--texto-3); }
.fila-atencao { border-left-color: var(--aviso); }
.fila-critica { border-left-color: var(--erro); }
.fila-critica strong, .fila-critica em { color: var(--erro); }
.espera-barras { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; margin-bottom: var(--esp-4); }
.espera-faixa { display: flex; flex-direction: column; align-items: center; padding: var(--esp-2) var(--esp-1); background: color-mix(in srgb, var(--erro) calc(var(--i, 1) * 9%), var(--superficie)); border-radius: 4px; text-align: center; }
.espera-1 { --i: 0.6; } .espera-2 { --i: 1.5; } .espera-3 { --i: 2.6; } .espera-4 { --i: 3.8; } .espera-5 { --i: 5; }
.espera-n { font-weight: 700; font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }
.espera-rotulo { font-size: var(--fs-xs); color: var(--texto-2); }
.lista-conversas { list-style: none; margin: 0; padding: 0; }
.lista-conversas li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--esp-3); padding: var(--esp-2) 0; border-bottom: 1px solid var(--borda); }
.lista-conversas .secundario { grid-column: 1; font-size: var(--fs-xs); }
.lista-espera { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .espera-barras { grid-template-columns: repeat(5, minmax(0, 1fr)); } .espera-rotulo { font-size: 10px; } }
.fila-detalhe { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--esp-5); }
@media (max-width: 1100px) { .fila-detalhe { grid-template-columns: minmax(0, 1fr); } }
.lista-titulo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Gaveta lateral (lista detalhada) e elementos clicáveis */
.gaveta[hidden] { display: none; }
.gaveta { position: fixed; inset: 0; z-index: 60; display: flex; justify-content: flex-end; }
.gaveta-fundo { position: absolute; inset: 0; background: rgb(0 0 0 / .32); }
.gaveta-painel {
  position: relative; width: min(860px, 92vw); height: 100%; overflow-y: auto; background: var(--fundo);
  padding: var(--esp-5) var(--esp-5) var(--esp-8); box-shadow: -8px 0 32px rgb(0 0 0 / .18); animation: gaveta-entra .18s ease-out;
}
.gaveta-fechar { position: sticky; top: 0; float: right; margin: -.5rem -.5rem 0 0; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--superficie-2); color: var(--texto); font-size: 1.5rem; cursor: pointer; z-index: 1; }
.gaveta-carregando { padding: var(--esp-6) 0; }
body.gaveta-aberta { overflow: hidden; }
@keyframes gaveta-entra { from { transform: translateX(24px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .gaveta-painel { animation: none; } }
@media (max-width: 899px) { .gaveta-painel { width: 100%; padding: var(--esp-4) var(--gutter) var(--esp-8); } }

.lista-detalhe-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--esp-3); flex-wrap: wrap; margin-bottom: var(--esp-3); padding-right: 44px; }
.lista-detalhe-topo h2 { margin: 0; font-size: var(--fs-lg); }
.lista-detalhe-topo h2:focus { outline: none; }
.chips { list-style: none; margin: 0 0 var(--esp-3); padding: 0; display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.chips a { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .65rem; border-radius: var(--raio-pilula); background: var(--superficie-2); color: var(--texto); text-decoration: none; font-size: var(--fs-sm); }
.chips a:hover { background: var(--erro-fundo); }
.paginacao { display: flex; justify-content: space-between; align-items: center; gap: var(--esp-3); margin-top: var(--esp-3); }

/* Número ou cartão que abre uma lista: sublinhado ao passar e seta discreta */
a.clicavel { color: inherit; text-decoration: none; border-radius: var(--raio-sm); }
a.clicavel:hover { text-decoration: underline; text-decoration-color: var(--primaria); text-underline-offset: 3px; }
a.clicavel:focus-visible { outline: 2px solid var(--primaria); outline-offset: 2px; }
a.fila-num { color: inherit; text-decoration: none; transition: background .12s; }
a.fila-num:hover { background: var(--superficie-2); }
a.fila-num::after { content: "ver lista ›"; font-size: var(--fs-xs); color: var(--primaria); margin-top: auto; padding-top: .2rem; }
a.espera-faixa { color: inherit; text-decoration: none; }
a.espera-faixa:hover { outline: 2px solid var(--primaria); }
.grafico-clicavel { cursor: pointer; }
.lista-vendas { list-style: none; margin: 0 0 var(--esp-4); padding: 0; }
.lista-vendas li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .15rem var(--esp-3); align-items: center; padding: var(--esp-2) 0; border-bottom: 1px solid var(--borda); }
.lista-vendas li > span { grid-column: 1; }
.lista-vendas li > .secundario { font-size: var(--fs-sm); }
.lista-vendas li > form { grid-column: 2; grid-row: 1 / span 2; }

/* Ficha do cliente: linha do tempo */
.linha-tempo { list-style: none; margin: 0; padding: 0 0 0 var(--esp-4); border-left: 2px solid var(--borda); }
.evento { position: relative; display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--esp-3); padding: var(--esp-3) 0; }
.evento::before { content: ""; position: absolute; left: calc(-1 * var(--esp-4) - 6px); top: 1.05rem; width: 10px; height: 10px; border-radius: 50%; background: var(--viz-outros); border: 2px solid var(--superficie); }
.evento-venda::before { background: var(--viz-1); }
.evento-conversa::before { background: var(--viz-2); }
.evento-os::before { background: var(--viz-3); }
.evento-data { font-size: var(--fs-sm); color: var(--texto-2); font-variant-numeric: tabular-nums; }
.evento .nota { margin: .2rem 0 0; }
.stat-texto { font-size: var(--fs-lg); }
@media (max-width: 640px) { .evento { grid-template-columns: minmax(0, 1fr); gap: 0; } }
.bloco-2fa { margin-top: var(--esp-4); padding-top: var(--esp-3); border-top: 1px solid var(--borda); } .travado { display: flex; gap: var(--esp-2); align-items: center; color: var(--texto-2); }

/* Evolução do atendimento (mês contra mês) */
.abas.abas-pequenas { margin: 0; gap: var(--esp-3); border-bottom: 0; }
.abas.abas-pequenas a { font-size: var(--fs-xs); padding: .2rem .5rem; }
.evolucao-cartao { display: grid; gap: var(--esp-3); align-content: start; }
.evolucao-cartao h3 { margin: 0; }
.evolucao-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--esp-3); }
.criterios-evolucao li { gap: var(--esp-2); }
.criterios-evolucao li > span:first-child { min-width: 7rem; }
.sintese-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--esp-3); }
.sintese-grade ul { margin: .2rem 0 0; padding-left: 1.1rem; }