/* Manager: visual limpo, claro, com modo escuro automático (segue o sistema). */
:root {
  --fundo: #f2f4f8;
  --superficie: #ffffff;
  --superficie-2: #f7f9fc;
  --borda: #e4e8ef;
  --texto: #111827;
  --texto-2: #4b5563;
  --texto-3: #8b93a3;
  --grade: #eef1f5;
  --eixo: #cfd5de;
  /* Menu lateral escuro (nos dois temas) */
  --menu-fundo: #0f1b2d;
  --menu-texto: #aab6c8;
  --menu-ativo: #ffffff;
  --menu-destaque: rgba(57, 135, 229, .22);
  --dica-fundo: #0f1b2d;
  --dica-texto: #e9eef5;
  --dica-texto-2: #a9b4c4;
  --primaria: #2a78d6;
  --primaria-texto: #ffffff;
  --foco: #2a78d6;
  --bom: #006300;
  --ruim: #d03b3b;
  --sombra: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);

  /* Séries categóricas (paleta validada) */
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100; --s5: #e87ba4; --s6: #008300;
  /* Rampa sequencial azul (atraso: do mais novo ao mais antigo) */
  --q1: #86b6ef; --q2: #3987e5; --q3: #1c5cab; --q4: #0d366b;
  --enfase-baixa: #9ec5f4;
  --neutro: #a3abb8;
  --mini: #9aa3b2;

  --raio: 14px;
  font-family: Inter, "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  color: var(--texto);
  background: var(--fundo);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fundo: #0b1018;
    --superficie: #141b25;
    --superficie-2: #19212d;
    --borda: #253041;
    --menu-fundo: #0a111b;
    --dica-fundo: #e9eef5;
    --dica-texto: #0f1b2d;
    --dica-texto-2: #4b5563;
    --texto: #e6eaf0;
    --texto-2: #a3adbc;
    --texto-3: #77818f;
    --grade: #232b36;
    --eixo: #3a4452;
    --primaria: #3987e5;
    --foco: #6aa7ef;
    --bom: #3fb950;
    --ruim: #f0716f;
    --sombra: none;
    --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s6: #008300;
    --q1: #0d366b; --q2: #1c5cab; --q3: #3987e5; --q4: #86b6ef;
    --enfase-baixa: #2a4a73;
    --neutro: #5d6676;
    --mini: #6b7584;
  }
}
/* Aparência escolhida em Minha conta: vence a do aparelho */
:root[data-theme="dark"] {
    --fundo: #0b1018;
    --superficie: #141b25;
    --superficie-2: #19212d;
    --borda: #253041;
    --menu-fundo: #0a111b;
    --dica-fundo: #e9eef5;
    --dica-texto: #0f1b2d;
    --dica-texto-2: #4b5563;
    --texto: #e6eaf0;
    --texto-2: #a3adbc;
    --texto-3: #77818f;
    --grade: #232b36;
    --eixo: #3a4452;
    --primaria: #3987e5;
    --foco: #6aa7ef;
    --bom: #3fb950;
    --ruim: #f0716f;
    --sombra: none;
    --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s6: #008300;
    --q1: #0d366b; --q2: #1c5cab; --q3: #3987e5; --q4: #86b6ef;
    --enfase-baixa: #2a4a73;
    --neutro: #5d6676;
    --mini: #6b7584;
}
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); min-height: 100vh; }
button, input, select { font: inherit; color: inherit; }
a { color: var(--primaria); }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.carregando { padding: 48px; text-align: center; color: var(--texto-2); }
[hidden] { display: none !important; }

/* ===== Menu lateral ===== */
#app.com-menu {
  display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh;
  /* fundo do menu até o fim da página, mesmo quando o conteúdo é mais alto que a tela */
  background: linear-gradient(to right, var(--superficie) 231px, var(--borda) 231px, var(--borda) 232px, transparent 232px);
}
.menu {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 6px;
  background: var(--superficie); border-right: 1px solid var(--borda); padding: 16px 12px;
}
.menu-topo { display: flex; align-items: center; justify-content: space-between; padding: 2px 6px 14px; }
.marca { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; white-space: nowrap; }
.marca .logo { width: 28px; height: 28px; border-radius: 7px; background: var(--primaria); display: grid; place-items: center; flex: none; }
.marca .logo svg { width: 18px; height: 18px; }
.marca small { font-weight: 500; color: var(--texto-2); font-size: 13px; }
.marca small::before { content: "/"; margin: 0 7px 0 1px; color: var(--texto-3); }
.botao-menu { display: none; background: none; border: 0; padding: 6px; border-radius: 8px; cursor: pointer; color: var(--texto); }
.menu-itens { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.menu-itens a {
  display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 9px;
  color: var(--texto-2); text-decoration: none; font-weight: 500;
}
.menu-itens a:hover { background: var(--superficie-2); color: var(--texto); }
.menu-itens a[aria-current="page"] { background: color-mix(in srgb, var(--primaria) 12%, transparent); color: var(--primaria); font-weight: 600; }
.menu-grupo { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3); font-weight: 600; padding: 18px 12px 6px; }
.icone { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.menu-rodape { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 6px 0; border-top: 1px solid var(--borda); font-size: 13.5px; color: var(--texto-2); }
.menu-rodape .nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-rodape .icone { width: 15px; height: 15px; }

/* ===== Botões e formulários ===== */
.botao {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--borda); background: var(--superficie); font-weight: 500; font-size: 14px; white-space: nowrap;
}
.botao:hover { background: var(--superficie-2); }
.botao.primario { background: var(--primaria); border-color: var(--primaria); color: var(--primaria-texto); }
.botao.primario:hover { filter: brightness(1.06); }
.botao.perigo { color: var(--ruim); }
.botao.pequeno { padding: 3px 10px; font-size: 13px; }
.botao:disabled { opacity: .55; cursor: default; }
.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.campo label, .campo > span { font-size: 13px; font-weight: 600; color: var(--texto-2); }
.campo small { color: var(--texto-3); font-size: 12.5px; }
input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="date"], input[type="number"], input[type="time"], input[type="search"], input[type="tel"], textarea, select {
  padding: 8px 11px; border: 1px solid var(--borda); border-radius: 8px; background: var(--superficie); min-width: 0;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--foco); outline-offset: -1px; border-color: transparent; }
.marcar { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 14px; }
.acoes { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ===== Conteúdo ===== */
main { max-width: 1440px; width: 100%; margin: 0 auto; padding: 22px 28px 48px; min-width: 0; }
main.estreito { max-width: 880px; }
h1 { font-size: 22px; margin: 4px 0 18px; }
h2.secao { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-2); margin: 30px 0 12px; font-weight: 600; }

.filtros {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 18px;
  font-size: 14px; color: var(--texto-2);
}
.filtros select { min-width: 200px; }
.filtros .periodo { font-weight: 500; color: var(--texto); }
.filtros .estado { display: inline-flex; align-items: center; gap: 6px; }
.filtros .estado::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--bom); }
.filtros .estado.rodando::before { background: var(--s4); animation: pulsar 1.2s infinite; }
.filtros .estado.erro { color: var(--ruim); }
.filtros .estado.erro::before { background: var(--ruim); }
.filtros .direita { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.selo { padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 600; background: color-mix(in srgb, var(--s4) 18%, transparent); color: var(--texto); }
@keyframes pulsar { 50% { opacity: .35; } }

.recarregando .indicadores, .recarregando .grade { opacity: .5; transition: opacity .2s; pointer-events: none; }

/* ===== Cartões de número ===== */
.indicadores { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.indicador {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra);
  padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.indicador .rotulo { font-size: 13px; color: var(--texto-2); font-weight: 500; }
.indicador .valor { font-size: clamp(19px, 1.55vw, 26px); font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; line-height: 1.2; white-space: nowrap; }
.indicador .detalhe { font-size: 12.5px; color: var(--texto-3); }
.indicador .rodape { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: 4px; }
.indicador .detalhe { min-width: 0; }
.indicador .mini { display: block; flex: none; width: 84px; height: auto; }
.delta { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--texto-2); }
.delta.bom { color: var(--bom); }
.delta.ruim { color: var(--ruim); }
.delta span { font-weight: 400; color: var(--texto-3); }

/* ===== Grade de gráficos ===== */
.grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cartao {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra);
  padding: 16px 18px 14px; min-width: 0;
}
.cartao.largo { grid-column: 1 / -1; }
.cartao-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.cartao-topo h3 { margin: 0; font-size: 15px; font-weight: 600; }
.cartao-topo p { margin: 2px 0 0; font-size: 12.5px; color: var(--texto-3); }
.area-grafico { width: 100%; min-height: 120px; overflow: hidden; }
.chamada {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin: 4px 0 12px; padding: 9px 12px; border-radius: 8px; font-size: 14px;
  background: color-mix(in srgb, var(--s1) 9%, transparent);
}
.chamada b { font-size: 16px; }
.legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 2px 0 8px; font-size: 12.5px; color: var(--texto-2); }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* ===== SVG ===== */
.grafico { display: block; overflow: visible; }
.grafico .grade { stroke: var(--grade); stroke-width: 1; }
.grafico .base { stroke: var(--eixo); stroke-width: 1; }
.grafico .eixo { fill: var(--texto-3); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.grafico .eixo.forte { fill: var(--texto); font-weight: 700; }
.grafico .rotulo { fill: var(--texto); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.grafico .rotulo.forte { font-weight: 700; }
.grafico .marca { transition: opacity .12s; }
.grafico .marca.parcial { opacity: .55; }
.grafico:has(.marca.ativa) .marca:not(.ativa) { opacity: .45; }
.grafico .alvo { fill: transparent; cursor: default; outline: none; }
.grafico .alvo:focus-visible { fill: color-mix(in srgb, var(--texto) 6%, transparent); }
.grafico .cruz { stroke: var(--eixo); stroke-dasharray: 3 3; }
.grafico .ponto { stroke: var(--superficie); stroke-width: 2; }

.dica {
  position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 8px;
  box-shadow: 0 6px 20px rgba(16, 24, 40, .14); padding: 8px 11px; font-size: 13px; min-width: 150px;
}
.dica-titulo { font-weight: 600; margin-bottom: 4px; }
.dica-linha { display: flex; align-items: center; gap: 7px; white-space: nowrap; color: var(--texto-2); }
.dica-linha b { color: var(--texto); font-variant-numeric: tabular-nums; }
.dica-linha i { width: 9px; height: 9px; border-radius: 2px; flex: none; }

/* ===== Tabelas ===== */
.tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.tabela th, .tabela td { padding: 7px 10px; border-bottom: 1px solid var(--borda); text-align: right; white-space: nowrap; }
.tabela th:first-child, .tabela td:first-child, .tabela th.texto { text-align: left; }
.tabela th { font-size: 12px; color: var(--texto-2); font-weight: 600; background: var(--superficie-2); position: sticky; top: 0; }
.tabela tr.destaque td { font-weight: 700; }
.tabela td.texto { text-align: left; white-space: normal; }
.rolagem { overflow: auto; max-height: 360px; }

/* ===== Estados vazios, avisos, login ===== */
.vazio {
  background: var(--superficie); border: 1px dashed var(--borda); border-radius: var(--raio);
  padding: 48px 24px; text-align: center; color: var(--texto-2); max-width: 640px; margin: 40px auto;
}
.vazio h2 { color: var(--texto); font-size: 18px; margin: 0 0 8px; }
.vazio p { margin: 0 0 16px; }
.vazio.erro h2 { color: var(--ruim); }
.barra-progresso { height: 6px; background: var(--grade); border-radius: 99px; overflow: hidden; max-width: 320px; margin: 16px auto 0; }
.barra-progresso i { display: block; height: 100%; width: 40%; background: var(--primaria); border-radius: 99px; animation: deslizar 1.4s ease-in-out infinite; }
@keyframes deslizar { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }

#avisos { position: fixed; bottom: 20px; right: 20px; z-index: 60; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 32px)); }
.aviso {
  padding: 11px 15px; border-radius: 9px; background: var(--texto); color: var(--superficie); font-size: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18); animation: entrar .18s ease-out;
}
.aviso.erro { background: var(--ruim); color: #fff; }
@keyframes entrar { from { transform: translateY(8px); opacity: 0; } }

.erro-login { color: var(--ruim); font-size: 13.5px; min-height: 20px; margin: 0 0 6px; }

.painel-form {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra);
  padding: 20px 22px; margin-bottom: 18px;
}
.painel-form h2 { margin: 0 0 4px; font-size: 16px; }
.painel-form > p { margin: 0 0 16px; color: var(--texto-2); font-size: 13.5px; }
.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.tabela input[type="text"] { width: 100%; }

/* ===== Ao vivo: blocos ===== */
.blocos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.bloco { display: flex; flex-direction: column; gap: 10px; }
.bloco-titulo { margin: 0; display: flex; align-items: center; gap: 9px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-2); }
.bloco-titulo i { width: 10px; height: 10px; border-radius: 3px; }
.bloco-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px 18px; align-items: start; }
.bloco-numeros .metrica:first-child { grid-column: 1 / -1; }
.metrica { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.metrica .rotulo { font-size: 12.5px; color: var(--texto-2); }
.metrica b { font-size: 19px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; line-height: 1.25; overflow-wrap: anywhere; }
.metrica:first-child b { font-size: 30px; }
.metrica small, .metrica .delta { font-size: 12.5px; color: var(--texto-3); }
.bloco .nota, .nota { margin: 0; font-size: 12px; color: var(--texto-3); }
.positivo { color: var(--bom); }
.negativo { color: var(--ruim); }
.valor .positivo, .valor .negativo { font-weight: 700; }
.secao-link { font-size: 12.5px; text-transform: none; letter-spacing: 0; font-weight: 500; margin-left: 8px; }
.chamada.alerta { display: block; background: color-mix(in srgb, var(--ruim) 10%, transparent); margin-bottom: 14px; }
.chamada.alerta ul { margin: 6px 0; padding-left: 20px; }
.lista-filiais { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 16px; max-height: 320px; overflow: auto; margin-bottom: 8px; }
.indicadores + .indicadores { margin-top: 14px; }

/* ===== Cancelamento / Churn ===== */
.risco { display: inline-flex; align-items: baseline; gap: 2px; padding: 2px 9px; border-radius: 99px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.risco small { font-weight: 500; }
.risco.alto { background: color-mix(in srgb, var(--ruim) 16%, transparent); color: var(--ruim); }
.risco.medio { background: color-mix(in srgb, var(--s2) 16%, transparent); color: color-mix(in srgb, var(--s2) 75%, var(--texto)); }
.risco.atencao { background: color-mix(in srgb, var(--s4) 18%, transparent); color: color-mix(in srgb, var(--s4) 55%, var(--texto)); }
.valor .risco { font-size: 16px; padding: 4px 12px; }
.busca { padding: 8px 11px; border: 1px solid var(--borda); border-radius: 8px; background: var(--superficie); min-width: 240px; }
.sub-titulo { margin: -8px 0 16px; font-size: 13.5px; }
.lista-churn { max-height: 640px; }
.lista-churn td.motivos { white-space: normal; min-width: 280px; color: var(--texto-2); }
.lista-churn a.cliente { font-weight: 600; text-decoration: none; }
.lista-churn .bloco-linha { display: block; }
.lista-churn td.plano { white-space: nowrap; }
.lista-churn a.cliente:hover { text-decoration: underline; }
.rodape-lista { justify-content: space-between; margin-top: 10px; }
.rodape-lista .nota { margin: 0; }
.regras { margin-top: 18px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px 18px; font-size: 13.5px; color: var(--texto-2); }
.regras summary { cursor: pointer; font-weight: 600; color: var(--texto); }
.voltar { display: inline-block; margin-bottom: 10px; font-size: 14px; text-decoration: none; }
.duas-areas { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; align-items: center; }
.linha-tempo { max-height: 520px; overflow: auto; }
.linha-tempo h4 { margin: 14px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3); }
.linha-tempo ol { list-style: none; margin: 0 0 0 8px; padding: 0 0 0 14px; border-left: 2px solid var(--borda); }
.linha-tempo li { position: relative; display: flex; gap: 12px; padding: 5px 0 5px 10px; font-size: 13.5px; }
.linha-tempo li::before { content: ""; position: absolute; left: -20px; top: 11px; width: 10px; height: 10px; border-radius: 50%; background: var(--neutro); border: 2px solid var(--superficie); }
.linha-tempo li time { color: var(--texto-3); font-variant-numeric: tabular-nums; min-width: 42px; }
.linha-tempo li.em_dia::before { background: var(--s3); }
.linha-tempo li.atraso::before { background: var(--s4); }
.linha-tempo li.bloqueio_pagou::before { background: var(--s2); }
.linha-tempo li.bloqueio_pagou span { font-weight: 600; }
.linha-tempo li.aberta::before, .linha-tempo li.aberta_bloqueio::before { background: var(--ruim); }
.linha-tempo li.chamado::before { background: var(--s1); border-radius: 2px; }
.linha-tempo li.futuro { color: var(--texto-3); }

/* ===== Ao vivo ===== */
.titulo-dia { font-size: 20px; margin: 0 0 14px; }
.titulo-dia small { font-size: 15px; font-weight: 500; color: var(--texto-2); }
.aovivo-estado { display: inline-flex; align-items: center; gap: 7px; }
.aovivo-estado::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--ruim); flex: none;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--ruim) 50%, transparent); animation: aovivo 1.8s infinite;
}
.aovivo-estado.fechado::before { background: var(--neutro); animation: none; box-shadow: none; }
.aovivo-estado.erro { color: var(--ruim); }
.aovivo-estado.erro::before { animation: none; }
@keyframes aovivo { 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .aovivo-estado::before, .filtros .estado.rodando::before { animation: none; } }

.feed { list-style: none; margin: 4px 0 0; padding: 0; max-height: 318px; overflow: auto; }
.feed li {
  display: grid; grid-template-columns: 46px 120px minmax(0, 1fr) auto; align-items: baseline; gap: 10px;
  padding: 7px 4px; border-bottom: 1px solid var(--borda); font-size: 13.5px;
}
.feed li:last-child { border-bottom: 0; }
.feed time { color: var(--texto-3); font-variant-numeric: tabular-nums; }
.feed .tipo { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.feed .tipo i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.feed .texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.feed .onde { color: var(--texto-3); font-size: 12.5px; white-space: nowrap; }
.feed li.novo { animation: novo 4s ease-out; }
@keyframes novo { from { background: color-mix(in srgb, var(--s4) 26%, transparent); } }
.feed-vazio { color: var(--texto-3); font-size: 14px; padding: 24px 0; text-align: center; }
button.link { background: none; border: 0; padding: 0; color: var(--primaria); cursor: pointer; font-weight: 600; text-align: left; }
button.link:hover { text-decoration: underline; }

/* ===== Telas menores ===== */
@media (max-width: 1200px) { .indicadores { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .grade { grid-template-columns: minmax(0, 1fr); }
  #app.com-menu { display: block; background: none; }
  .menu { height: auto; position: sticky; z-index: 20; flex-direction: column; padding: 10px 16px; border-right: 0; border-bottom: 1px solid var(--borda); gap: 0; }
  .menu-topo { padding: 0; }
  .botao-menu { display: inline-flex; }
  .menu-itens, .menu-rodape { display: none; }
  .menu.aberto .menu-itens { display: flex; padding: 10px 0 4px; }
  .menu.aberto .menu-rodape { display: flex; padding: 10px 0 4px; }
  .blocos { grid-template-columns: minmax(0, 1fr); }
  main { padding: 16px 16px 40px; }
}
@media (max-width: 640px) {
  .indicadores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .indicador .valor { font-size: 21px; }
  .indicador .mini { display: none; }
  .bloco-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .duas-areas { grid-template-columns: minmax(0, 1fr); }
  .busca { min-width: 0; width: 100%; }
  .metrica:first-child { grid-column: 1 / -1; }
  .duas { grid-template-columns: 1fr; }
  .filtros .direita { margin-left: 0; }
  .filtros select { min-width: 0; width: 100%; }
  .feed li { grid-template-columns: 42px minmax(0, 1fr); gap: 2px 10px; }
  .feed .texto, .feed .onde { grid-column: 2; }
}

/* =====================================================================
   Visual moderno: menu escuro, barra de filtros fixa, cartões mais leves,
   números maiores e variações em "pílula". (Sobrescreve as regras acima.)
   ===================================================================== */
:root { --sombra: 0 1px 2px rgba(15, 23, 42, .04), 0 6px 20px rgba(15, 23, 42, .05); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sombra: 0 1px 2px rgba(0, 0, 0, .3); } }
:root[data-theme="dark"] { --sombra: 0 1px 2px rgba(0, 0, 0, .3); }

/* Menu lateral escuro */
#app.com-menu { background: linear-gradient(to right, var(--menu-fundo) 232px, transparent 232px); }
.menu { background: var(--menu-fundo); border-right: 0; color: var(--menu-texto); padding: 18px 14px; }
.menu .marca { color: #fff; }
.menu .marca small { color: var(--menu-texto); }
.menu .marca small::before { color: #4b5b72; }
.menu-itens a { color: var(--menu-texto); border-radius: 10px; padding: 10px 12px; position: relative; }
.menu-itens a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.menu-itens a[aria-current="page"] { background: var(--menu-destaque); color: var(--menu-ativo); }
.menu-itens a[aria-current="page"]::before {
  content: ""; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: #3987e5;
}
.menu-grupo { color: #5e6d84; }
.menu-itens a.em-breve { flex-wrap: wrap; row-gap: 0; }
.menu-itens a.em-breve small { flex-basis: 100%; padding-left: 30px; font-size: 11px; color: #6f7f96; }
.menu-rodape { border-top-color: rgba(255, 255, 255, .08); color: var(--menu-texto); }
.menu-rodape .botao { background: transparent; border-color: rgba(255, 255, 255, .14); color: var(--menu-texto); }
.menu-rodape .botao:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.botao-menu { color: #fff; }

/* Conteúdo */
main { padding: 0 32px 56px; }
main.estreito { padding-top: 24px; }
h1, .titulo-dia { font-size: 24px; font-weight: 700; letter-spacing: -.015em; margin: 18px 0 16px; }
.titulo-dia small { font-size: 15px; }
h2.secao { font-size: 12px; letter-spacing: .08em; color: var(--texto-3); margin: 32px 0 12px; display: flex; align-items: center; gap: 10px; }
h2.secao::after { content: ""; flex: 1; height: 1px; background: var(--borda); }

/* Barra de filtros fixa no topo */
.filtros {
  position: sticky; top: 0; z-index: 8; margin: 0 -32px 0; padding: 12px 32px;
  background: color-mix(in srgb, var(--fundo) 86%, transparent); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borda);
}
.filtros select, .filtros input[type="date"], .busca { border-radius: 10px; background: var(--superficie); box-shadow: var(--sombra); border-color: var(--borda); }
.botao { border-radius: 10px; }
.botao.primario { box-shadow: 0 1px 2px rgba(42, 120, 214, .3); }

/* Cartões */
.cartao, .indicador, .painel-form, .regras { border-radius: var(--raio); border-color: var(--borda); box-shadow: var(--sombra); }
.cartao { padding: 18px 20px 16px; }
.cartao-topo h3 { font-size: 15.5px; font-weight: 650; letter-spacing: -.005em; }
.grade, .blocos, .indicadores { gap: 16px; }

/* Números (KPIs): valor grande com algarismos proporcionais; variação em pílula */
.indicador { padding: 16px 18px 14px; gap: 4px; }
.indicador .rotulo { font-size: 12.5px; font-weight: 600; color: var(--texto-2); }
.indicador .valor { font-size: clamp(20px, 1.7vw, 28px); font-weight: 700; letter-spacing: -.02em; font-variant-numeric: normal; }
/* Só o número da variação vai na pílula; o texto segue ao lado, em cinza */
.delta .pilula { display: inline-block; padding: 0 7px; border-radius: 99px; font-weight: 700; white-space: nowrap; }
.delta.bom .pilula { background: color-mix(in srgb, var(--bom) 13%, transparent); }
.delta.ruim .pilula { background: color-mix(in srgb, var(--ruim) 12%, transparent); }
.delta.bom span, .delta.ruim span { color: var(--texto-3); font-weight: 400; }
.indicador .detalhe { line-height: 1.35; }
/* Seis números lado a lado só em tela bem larga; senão, três por linha (mais espaço para cada um) */
@media (max-width: 1600px) { .indicadores { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Visão geral: oito números, quatro por linha */
.indicadores.quatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 640px) { .indicadores.quatro { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.metrica:first-child b { font-size: 34px; font-variant-numeric: normal; letter-spacing: -.02em; }
.metrica b { font-variant-numeric: normal; }

/* Blocos do Ao vivo: cabeçalho com marcador colorido */
.bloco-titulo { font-size: 12px; letter-spacing: .08em; }
.bloco-titulo i { width: 26px; height: 26px; border-radius: 8px; opacity: .9; }
.chamada { border-radius: 10px; background: color-mix(in srgb, var(--s1) 8%, var(--superficie)); border: 1px solid color-mix(in srgb, var(--s1) 18%, transparent); }

/* Tabelas */
.tabela th { background: transparent; color: var(--texto-3); font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--borda); }
.tabela tbody tr:hover td { background: var(--superficie-2); }
.tabela tr.destaque td { border-top: 1px solid var(--eixo); }

/* Gráficos: grade mais leve, cruz contínua, dica escura */
.grafico .grade { stroke: var(--grade); }
.grafico .cruz { stroke: var(--eixo); stroke-dasharray: none; }
.grafico .eixo { font-size: 11px; }
.dica { background: var(--dica-fundo); color: var(--dica-texto); border: 0; border-radius: 10px; box-shadow: 0 10px 30px rgba(15, 23, 42, .25); padding: 10px 12px; }
.dica-titulo { color: var(--dica-texto); }
.dica-linha { color: var(--dica-texto-2); }
.dica-linha b { color: var(--dica-texto); }

/* Login com fundo da marca */

@media (max-width: 900px) {
  #app.com-menu { background: none; }
  main { padding: 0 16px 40px; }
  .filtros { margin: 0 -16px; padding: 10px 16px; position: static; }
  .menu-itens a[aria-current="page"]::before { display: none; }
}
/* Pílula de variação dentro dos blocos do Ao vivo: tamanho e cor da variação (não do número grande) */
.metrica .delta .pilula { font-size: 12.5px; letter-spacing: 0; line-height: 1.6; }
.metrica .delta.bom .pilula { color: var(--bom); }
.metrica .delta.ruim .pilula { color: var(--ruim); }

.outras-filiais { margin: 4px 0 12px; font-size: 13.5px; color: var(--texto-2); }
.outras-filiais summary { cursor: pointer; margin-bottom: 8px; }

/* Seletor de filiais (uma, várias ou todas) */
.seletor-filiais { position: relative; }
.seletor-botao {
  display: inline-flex; align-items: center; gap: 8px; min-width: 210px; justify-content: space-between; cursor: pointer;
  padding: 8px 12px; border: 1px solid var(--borda); border-radius: 10px; background: var(--superficie); box-shadow: var(--sombra); font-weight: 500;
}
.seletor-botao::after { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--texto-3); border-bottom: 2px solid var(--texto-3); transform: rotate(45deg) translateY(-2px); }
.seletor-painel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 260px; padding: 12px 14px 6px;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; box-shadow: 0 12px 32px rgba(15, 23, 42, .18);
}
.seletor-painel .marcar { margin-bottom: 8px; cursor: pointer; }
.seletor-painel .nota { margin: 4px 0 6px; }
@media (max-width: 640px) { .seletor-filiais, .seletor-botao { width: 100%; } }

.motivo-marca { display: inline-flex; align-items: center; gap: 7px; }
.motivo-marca i { width: 9px; height: 9px; border-radius: 2px; flex: none; }

.conferir { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.conferir .rolagem { width: 100%; max-height: 340px; }

.seletor-mes { order: 3; text-transform: none; letter-spacing: 0; font-size: 13.5px; font-weight: 500; color: var(--texto); padding: 6px 10px; border-radius: 10px; border: 1px solid var(--borda); background: var(--superficie); }
h2.secao .seletor-mes { margin-left: 4px; }
/* No celular, título de seção longo e seletor de mês quebram de linha em vez de espremer o seletor */
@media (max-width: 640px) { h2.secao:has(select) { flex-wrap: wrap; line-height: 1.4; } h2.secao:has(select)::after { display: none; } h2.secao .seletor-mes { margin-left: 0; max-width: 100%; } }

.bloco-linha { display: block; }
.indicadores + .grade { margin-top: 16px; }
.filtros .seletor-mes { order: 0; padding: 8px 12px; box-shadow: var(--sombra); }

/* Listas de clientes: nome com espaço (não espremer em 3 linhas) */
.lista-churn td.texto:first-child, .lista-churn th.texto:first-child { min-width: 240px; }
.lista-churn td .motivo-marca { white-space: nowrap; }

/* Simetria: gráficos do Ao vivo alinhados pela base de cada bloco */
.bloco-grafico { flex: 1 1 auto; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.bloco-grafico .area-grafico { flex: 1 1 auto; min-height: 170px; }
.bloco-grafico:empty { display: none; }

/* ===== Desempenho ===== */
.destaques { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1200px) { .destaques { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .destaques { grid-template-columns: minmax(0, 1fr); } }
.destaque-colab { display: flex; flex-direction: column; gap: 4px; }
.destaque-topo { display: flex; align-items: center; gap: 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-2); margin-bottom: 6px; }
.destaque-topo i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.destaque-nome { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.destaque-valor { color: var(--texto-2); }
.destaque-valor b { font-size: 26px; color: var(--texto); font-variant-numeric: tabular-nums; }
.destaque-segundo { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--borda); font-size: 12.5px; color: var(--texto-3); }
.cartao.largo + .cartao.largo { margin-top: 16px; }
.destaques.dois { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .destaques.dois { grid-template-columns: minmax(0, 1fr); } }
.lista-marcar { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 16px; margin-bottom: 8px; }

/* ===== Usuários e Minha conta ===== */
.tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; }
@media (max-width: 760px) { .tres { grid-template-columns: minmax(0, 1fr); } }
.rotulo-campo { margin: 4px 0 6px; font-size: 13px; font-weight: 600; color: var(--texto-2); }
.tabela-usuarios { max-height: none; }
.tabela-usuarios td { vertical-align: middle; }
.tabela-usuarios tr.inativo td { opacity: .62; }
.usuario-cel { display: flex; align-items: center; gap: 10px; }
.avatar { flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--s1, #2a78d6); background: color-mix(in srgb, #2a78d6 18%, var(--superficie)); color: #2a78d6; font-weight: 700; font-size: 13px; letter-spacing: .02em; }
.avatar.grande { width: 52px; height: 52px; font-size: 18px; }
.chips-acesso { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-acesso { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; border: 1px solid var(--borda); font-size: 12.5px; color: var(--texto-2); cursor: pointer; user-select: none; }
.chip-acesso input { margin: 0; accent-color: #2a78d6; }
.chip-acesso.ligado { border-color: rgba(42, 120, 214, .45); background: rgba(42, 120, 214, .1); color: var(--texto); }
.chip-acesso.todos { border-color: rgba(42, 120, 214, .45); background: rgba(42, 120, 214, .1); color: var(--texto); font-weight: 600; cursor: default; }
.situacao { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.situacao::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.situacao.ativo::before { background: #1baf7a; }
.situacao.bloqueado { color: var(--ruim); }
.situacao.bloqueado::before { background: var(--ruim); }
.acoes-linha { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.dialogo { border: 0; border-radius: 16px; padding: 0; max-height: calc(100dvh - 32px); overflow: auto; width: min(440px, calc(100vw - 32px)); background: var(--superficie); color: var(--texto); box-shadow: 0 24px 64px rgba(0, 0, 0, .35); }
.dialogo::backdrop { background: rgba(15, 27, 45, .55); }
.dialogo form { padding: 22px 24px; }
.dialogo h2 { margin: 0 0 14px; font-size: 17px; }
.dialogo .acoes { justify-content: flex-end; }
.conta-topo { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.conta-topo h2 { margin: 0; }
.conta-topo p { margin: 2px 0 0; }
.lista-acessos { list-style: none; padding: 0; margin: 0 0 6px; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 16px; }
.lista-acessos li::before { display: inline-block; width: 1.3em; font-weight: 700; }
.lista-acessos li.sim::before { content: "✓"; color: #1baf7a; }
.lista-acessos li.nao { color: var(--texto-3); }
.lista-acessos li.nao::before { content: "–"; }
a.nome { color: inherit; text-decoration: none; }
a.nome:hover { text-decoration: underline; }
.voce { margin-left: 6px; padding: 1px 7px; border-radius: 99px; font-size: 11px; font-weight: 600; color: #2a78d6; background: rgba(42, 120, 214, .12); }
.lista-marcar.modulos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 16px; margin-bottom: 12px; }
@media (max-width: 760px) { .lista-marcar.modulos { grid-template-columns: minmax(0, 1fr); } }
.marcar.modulo { align-items: flex-start; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 10px; margin: 0; }
.marcar.modulo input { margin-top: 3px; }
.marcar.modulo small { font-weight: 400; margin-top: 2px; }
.lista-acessos { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.lista-acessos small { white-space: nowrap; }
.lista-acessos small.telas-lista { white-space: normal; }
.lista-acessos li:has(.telas-lista) { grid-column: 1 / -1; }
.link-acao { display: block; margin-top: 2px; padding: 0; border: 0; background: none; color: var(--texto-3); font-size: 12px; text-decoration: underline; cursor: pointer; }
.link-acao:hover { color: var(--texto); }
.zona-perigo { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--borda); }
.zona-perigo .nota { margin: 0 0 8px; }

/* ===== Sair do sistema ===== */

.destaques.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .destaques.tres { grid-template-columns: minmax(0, 1fr); } }
.grade > .largo-grade { grid-column: 1 / -1; display: grid; }
.lista-atendimentos { max-height: 640px; }
.lista-atendimentos table { min-width: 980px; }
.lista-atendimentos td { white-space: nowrap; }
.lista-atendimentos td:nth-child(3) { white-space: normal; min-width: 180px; }
.cartao-topo .busca { max-width: 280px; }

/* ===== Correções ===== */
/* Sem cursor de digitação piscando ao clicar em textos: só nos campos de digitar */
/* (vale para todo elemento, inclusive gráficos, tabelas e o painel da TV; e também com a "navegação por cursor" (F7) ligada) */
html, body, *:not(input):not(textarea):not([contenteditable="true"]) { caret-color: transparent !important; }
input, textarea, [contenteditable="true"] { caret-color: auto !important; }
/* Sem o "piscar" cinza/azul ao tocar em botões, links e cartões no celular */
* { -webkit-tap-highlight-color: transparent; }
/* Clique com o mouse não deixa contorno de foco piscando; pelo teclado (Tab) o contorno continua, para acessibilidade */
:focus:not(:focus-visible) { outline: none; }
svg [tabindex]:focus:not(:focus-visible), .alvo:focus:not(:focus-visible) { outline: none; }
/* Valores grandes nos cartões do celular não passam da borda */
@media (max-width: 640px) {
  .indicador .valor { font-size: 19px; white-space: normal; overflow-wrap: anywhere; }
}

/* ===== Sair do sistema, bem visível ===== */
.menu-rodape { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 4px 2px; }
.menu-rodape .quem { display: flex; align-items: center; gap: 10px; min-width: 0; color: inherit; text-decoration: none; border-radius: 10px; padding: 4px; }
.menu-rodape .quem:hover { background: rgba(255, 255, 255, .06); }
.menu-rodape .quem .avatar { width: 34px; height: 34px; font-size: 12.5px; background: rgba(57, 135, 229, .22); color: #cfe3fb; }
.menu-rodape .quem-texto { display: flex; flex-direction: column; min-width: 0; }
.menu-rodape .quem-texto b { color: #fff; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-rodape .quem-texto small { color: #8fa3bd; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.botao-sair {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px;
  background: #d93d3d; color: #fff; font: inherit; font-weight: 600; cursor: pointer; box-shadow: 0 6px 16px rgba(217, 61, 61, .28);
}
.botao-sair:hover { background: #c22f2f; }
.botao-sair:focus-visible, .sair-fixo:focus-visible { outline: 3px solid #ffb3b3; outline-offset: 2px; }
.botao-sair .icone, .sair-fixo .icone { width: 17px; height: 17px; }
.sair-fixo {
  position: fixed; top: 12px; right: 18px; z-index: 40; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px;
  border: 0; border-radius: 10px; background: #d93d3d; color: #fff; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  box-shadow: 0 6px 18px rgba(217, 61, 61, .3);
}
.sair-fixo:hover { background: #c22f2f; }
/* Espaço para o botão fixo não cobrir os filtros nem os títulos */
#app.com-menu main > .filtros { padding-right: 118px; }
#app.com-menu main > h1:first-child { padding-right: 110px; }
@media (max-width: 900px) {
  .sair-fixo { display: none; }
  #app.com-menu main > .filtros, #app.com-menu main > h1:first-child { padding-right: 0; }
}

/* ===== Login: globo 3D, chamada grande e cartão de entrada (tudo numa tela) ===== */
.entrada {
  --gx: 18%; --gt: min(78vh, 52vw);
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 500px); align-items: center; padding-right: clamp(0px, 4vw, 90px);
  height: 100vh; height: 100dvh; overflow: hidden; color: #e6eefa; isolation: isolate;
  background: radial-gradient(1100px 700px at 18% 10%, #12346b 0%, transparent 60%), radial-gradient(900px 600px at 70% 110%, #0c4a5c 0%, transparent 55%), #061226;
}
.entrada-fundo {
  position: absolute; inset: 0; z-index: -1; opacity: .35;
  background-image: linear-gradient(rgba(120, 170, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(120, 170, 255, .08) 1px, transparent 1px);
  background-size: 48px 48px; mask-image: radial-gradient(ellipse at 45% 50%, #000 30%, transparent 75%);
}
.entrada-globo { position: absolute; z-index: 0; left: var(--gx); top: 50%; width: var(--gt); height: var(--gt); transform: translate(0, -50%); pointer-events: none; }
@media (min-width: 1600px) { .entrada { --gx: 27%; } }
.entrada-texto { position: relative; z-index: 2; padding: 0 clamp(24px, 5vw, 80px); max-width: 640px; }
.entrada-selo { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 99px; font-size: 13px; color: #bfe9e2; background: rgba(34, 197, 176, .12); border: 1px solid rgba(34, 197, 176, .3); margin-bottom: clamp(12px, 2.4vh, 22px); }
.ponto-vivo { width: 8px; height: 8px; border-radius: 50%; background: #22c5b0; box-shadow: 0 0 0 0 rgba(34, 197, 176, .6); animation: ponto-pulsar 2s infinite; }
@keyframes ponto-pulsar { 70% { box-shadow: 0 0 0 9px rgba(34, 197, 176, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 176, 0); } }
.entrada-texto h1 { margin: 0; color: #fff; font-size: clamp(30px, min(5vw, 8.2vh), 72px); line-height: 1.04; letter-spacing: -.03em; font-weight: 800; text-wrap: balance; }
.entrada-texto h1 .destaque { background: linear-gradient(90deg, #2dd4bf, #3b8cff 60%, #8ab4ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.entrada-texto p { margin: clamp(12px, 2.4vh, 22px) 0 0; max-width: 46ch; font-size: clamp(14.5px, 2.1vh, 17.5px); line-height: 1.5; color: #b4c4da; }
.entrada-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: clamp(12px, 2.6vh, 24px) 0 0; padding: 0; }
.entrada-chips li { padding: 6px 13px; border-radius: 99px; font-size: 13px; color: #d6e6fb; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(6px); }

/* Cartões flutuando em volta do globo (vidro) */
.flutuante {
  position: absolute; z-index: 1; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; min-width: 150px; border-radius: 14px;
  background: rgba(14, 30, 58, .62); border: 1px solid rgba(140, 180, 255, .18); box-shadow: 0 18px 40px rgba(0, 0, 0, .35); backdrop-filter: blur(10px);
  animation: flutuar 7s ease-in-out infinite; pointer-events: none;
}
.flutuante small { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #8fa3bd; }
.flutuante b { font-size: 21px; color: #fff; letter-spacing: -.01em; }
.flutuante em { font-style: normal; font-size: 12px; font-weight: 600; color: #4ade80; }
.flutuante em.bom { color: #4ade80; }
.flutuante .barrinhas { display: flex; align-items: flex-end; gap: 4px; height: 30px; margin-top: 4px; }
.flutuante .barrinhas i { width: 9px; border-radius: 3px 3px 0 0; background: linear-gradient(#5aa2ff, #2a78d6); }
.flutuante .barrinhas i:last-child { background: linear-gradient(#5eead4, #14b8a6); }
.f1 { left: calc(var(--gx) + var(--gt) * .66); top: 15%; animation-delay: -1s; }
.f2 { left: calc(var(--gx) + var(--gt) * .74); bottom: 14%; animation-delay: -3s; }
.f3 { left: calc(var(--gx) + var(--gt) * .04); bottom: 9%; animation-delay: -5s; }
@keyframes flutuar { 0%, 100% { transform: translate3d(0, 0, 0) rotateX(0) rotateY(0); } 50% { transform: translate3d(0, -12px, 0) rotateX(6deg) rotateY(-8deg); } }

/* Cartão de entrada */
.entrada-lado { position: relative; z-index: 3; display: grid; place-items: center; height: 100%; padding: clamp(16px, 3vh, 32px) clamp(16px, 3vw, 40px); }
.entrada-cartao {
  width: 100%; max-width: 420px; padding: clamp(22px, 4vh, 38px) clamp(22px, 2.6vw, 34px); border-radius: 22px;
  background: var(--superficie); color: var(--texto); box-shadow: 0 30px 80px rgba(0, 0, 0, .45); display: flex; flex-direction: column; gap: clamp(10px, 1.8vh, 16px);
}
.entrada-marca { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: clamp(2px, 1vh, 8px); }
.entrada-logo .logo { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 12px; background: linear-gradient(135deg, #14b8a6, #2a78d6); box-shadow: 0 8px 20px rgba(20, 184, 166, .35); }
.entrada-logo .logo svg { width: 30px; height: 30px; }
.entrada-nome { display: flex; flex-direction: column; line-height: 1.1; }
.entrada-nome b { font-size: 21px; letter-spacing: .28em; color: #0f9f8f; }
.entrada-nome small { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-3); }
.entrada-cartao h2 { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0; padding-bottom: clamp(8px, 1.6vh, 14px); border-bottom: 1px solid var(--borda); font-size: clamp(20px, 2.8vh, 25px); font-weight: 500; }
.selo-cadeado { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #0f9f8f; color: #fff; }
.selo-cadeado .icone { width: 15px; height: 15px; }
.campo-icone { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 2px solid var(--borda); transition: border-color .15s; cursor: text; }
.campo-icone:focus-within { border-color: #0f9f8f; }
.campo-icone > .icone { width: 20px; height: 20px; color: var(--texto-3); flex: none; }
.campo-icone input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--texto); font: inherit; font-size: 16px; padding: 4px 0; box-shadow: none; }
.campo-icone input::placeholder { color: var(--texto-3); font-style: italic; }
.ver-senha { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 8px; background: none; color: var(--texto-3); cursor: pointer; }
.ver-senha:hover { background: var(--superficie-2); color: var(--texto); }
.ver-senha .icone { width: 20px; height: 20px; }
.rotulo-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.entrada-cartao .erro-login { min-height: 18px; margin: 0; font-size: 13.5px; color: var(--ruim); }
.botao-entrar {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 14px; border: 0; border-radius: 99px; cursor: pointer;
  background: linear-gradient(90deg, #0f9f8f, #1f86c7); color: #fff; font: inherit; font-size: 17px; font-weight: 700; box-shadow: 0 12px 28px rgba(15, 159, 143, .35);
  transition: transform .15s, box-shadow .15s;
}
.botao-entrar:hover { transform: translateY(-1px); box-shadow: 0 16px 34px rgba(15, 159, 143, .45); }
.botao-entrar:disabled { opacity: .7; cursor: wait; transform: none; }
.botao-entrar .icone { width: 20px; height: 20px; }
.entrada-rodape { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; font-size: 12.5px; color: var(--texto-3); }
.entrada-rodape .icone { width: 13px; height: 13px; }

@media (max-width: 1100px) {
  .flutuante.f1, .flutuante.f2 { display: none; }
}
@media (max-width: 900px) {
  .entrada { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); align-items: start; }
  .entrada-globo { left: 50%; top: 0; width: 120vw; height: 120vw; max-width: 560px; max-height: 560px; transform: translate(-50%, -38%); opacity: .55; }
  .flutuante { display: none; }
  .entrada-texto { padding: clamp(22px, 5vh, 40px) 20px 0; }
  .entrada-selo { margin-bottom: 12px; }
  .entrada-texto h1 { font-size: clamp(26px, 7.4vw, 36px); }
  .entrada-texto p, .entrada-chips { display: none; }
  .entrada { padding-right: 0; }
  .entrada-lado { place-items: center; padding: 18px 16px 28px; }
  .entrada-cartao { padding: 22px 20px; }
}
@media (max-height: 500px) and (min-width: 901px) { .entrada-chips, .flutuante { display: none; } }
@media (prefers-reduced-motion: reduce) { .flutuante, .ponto-vivo { animation: none; } }

.leitura-ixc td:nth-child(2) { white-space: nowrap; }
.entrada-nome small { white-space: nowrap; }
@media (max-width: 900px) { .entrada-nome small { font-size: 11px; letter-spacing: .05em; } .entrada-nome b { font-size: 19px; letter-spacing: .22em; } }
/* Celular: cartão de login mais compacto (o campo fica em 16px para o iPhone não dar zoom) */
@media (max-width: 640px) {
  .entrada-cartao { max-width: 330px; padding: 16px 18px; gap: 8px; border-radius: 18px; }
  .entrada-marca { gap: 10px; margin-bottom: 0; }
  .entrada-logo .logo { width: 40px; height: 40px; border-radius: 10px; }
  .entrada-logo .logo svg { width: 22px; height: 22px; }
  .entrada-nome b { font-size: 16px; }
  .entrada-nome small { font-size: 10px; }
  .entrada-cartao h2 { gap: 8px; padding-bottom: 8px; font-size: 18px; }
  .selo-cadeado { width: 24px; height: 24px; }
  .selo-cadeado .icone { width: 12px; height: 12px; }
  .campo-icone { padding: 6px 4px; }
  .campo-icone > .icone, .ver-senha .icone { width: 18px; height: 18px; }
  .ver-senha { width: 30px; height: 30px; }
  .entrada-cartao .erro-login { min-height: 14px; font-size: 12.5px; }
  .botao-entrar { padding: 11px; font-size: 15px; }
  .botao-entrar .icone { width: 18px; height: 18px; }
  .entrada-rodape { font-size: 11.5px; }
}
/* Menu: nome e slogan um embaixo do outro */
.marca-menu .marca-textos { display: flex; flex-direction: column; line-height: 1.15; }
.marca-menu small { font-size: 11.5px; font-weight: 500; letter-spacing: .02em; color: #8fb6e6; }
.marca-menu small::before { content: none; }
@media (max-width: 900px) { .marca-menu small { font-size: 11px; } }

/* Usuários: a tabela cabe na largura, sem barra de rolagem */
.tabela-usuarios { overflow: visible; }
.tabela-usuarios table { width: 100%; min-width: 0; table-layout: auto; }
.tabela-usuarios th, .tabela-usuarios td { padding-left: 8px; padding-right: 8px; }
.tabela-usuarios td:first-child { min-width: 0; }
.tabela-usuarios .usuario-cel b { overflow-wrap: normal; }
.tabela-usuarios .usuario-cel small { overflow-wrap: anywhere; }
.tabela-usuarios select { width: 100%; min-width: 0; max-width: 150px; padding-right: 26px; }
.tabela-usuarios .chips-acesso { flex-wrap: wrap; }
.tabela-usuarios td:nth-child(5) { white-space: normal; min-width: 90px; }
.acoes-linha { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 6px; }
.acoes-linha .botao { justify-content: center; }
/* Telas menores (notebook pequeno, tablet, celular): cada usuário vira um cartão */
@media (max-width: 1180px) {
  .tabela-usuarios thead { display: none; }
  .tabela-usuarios table, .tabela-usuarios tbody { display: block; }
  .tabela-usuarios tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 14px; padding: 14px 4px; border-bottom: 1px solid var(--borda); }
  .tabela-usuarios td { display: block; padding: 0; border: 0; background: transparent !important; }
  .tabela-usuarios tr { background: transparent !important; }
  .tabela-usuarios td:nth-child(1), .tabela-usuarios td:nth-child(3) { grid-column: 1 / -1; }
  .tabela-usuarios td:nth-child(4)::before, .tabela-usuarios td:nth-child(5)::before { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-3); margin-bottom: 2px; }
  .tabela-usuarios td:nth-child(4)::before { content: "Situação"; }
  .tabela-usuarios td:nth-child(5)::before { content: "Último acesso"; }
  .tabela-usuarios td:nth-child(6) { grid-column: 2; grid-row: 2; }
  .tabela-usuarios td:nth-child(2) { grid-column: 1; grid-row: 2; }
  .tabela-usuarios select { max-width: none; }
  .acoes-linha { flex-direction: row; }
  .acoes-linha .botao { flex: 1; }
}
.tabela-usuarios select { min-width: 130px; }
@media (min-width: 1181px) { .tabela-usuarios .usuario-cel b { white-space: nowrap; } }
@media (min-width: 640px) and (max-width: 1180px) {
  .tabela-usuarios tr { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; }
  .tabela-usuarios td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .tabela-usuarios td:nth-child(2) { grid-column: 2; grid-row: 1; }
  .tabela-usuarios td:nth-child(4) { grid-column: 3; grid-row: 1; }
  .tabela-usuarios td:nth-child(6) { grid-column: 4; grid-row: 1 / span 2; }
  .tabela-usuarios td:nth-child(3) { grid-column: 1 / 3; grid-row: 2; }
  .tabela-usuarios td:nth-child(5) { grid-column: 3; grid-row: 2; }
  .tabela-usuarios .acoes-linha { flex-direction: column; }
}
.tabela-usuarios select { min-width: 152px; max-width: 170px; }
@media (max-width: 1180px) { .tabela-usuarios select { max-width: none; } }

/* Visão geral: segunda linha de números com 5 cartões (inclui a perda de faturamento) e a lista dos planos cancelados */
.indicadores.cinco { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1200px) { .indicadores.cinco { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .indicadores.cinco { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cartao.perda-lista { margin-top: 16px; }
.perda-lista summary { cursor: pointer; font-weight: 600; color: var(--enfase, #2a78d6); }
.perda-lista .rolagem { margin-top: 12px; max-height: 420px; overflow: auto; }
.perda-lista tfoot th { border-top: 2px solid var(--borda); }

/* Financeiro: fluxo de caixa */
.fluxo-caixa thead tr.grupos th { text-align: center; font-size: 11px; letter-spacing: .06em; border-bottom: 0; padding-bottom: 0; }
.fluxo-caixa thead tr.grupos th.entradas { color: var(--s3); }
.fluxo-caixa thead tr.grupos th.saidas { color: var(--s2); }
.fluxo-caixa tbody tr.futuro td { color: var(--texto-2); }
.fluxo-caixa tbody tr.destaque td { background: color-mix(in srgb, var(--s1) 8%, transparent); font-weight: 600; }
.fluxo-caixa tfoot th { border-top: 2px solid var(--borda); text-align: right; }
.fluxo-caixa tfoot th[scope="row"] { text-align: left; }
.fluxo-caixa .rolagem { max-height: 560px; overflow: auto; }
.fluxo-caixa thead th { position: sticky; top: 0; background: var(--superficie); z-index: 1; }
.fluxo-caixa thead tr.grupos + tr th { top: 22px; }
.fluxo-caixa tfoot th { position: sticky; bottom: 0; background: var(--superficie); }
.fluxo-caixa tfoot th { font-size: 14px; text-transform: none; letter-spacing: 0; color: var(--texto); font-weight: 700; padding-top: 10px; padding-bottom: 10px; }
/* Fluxo de caixa: cabe na largura do cartão (as linhas pequenas quebram); em telas estreitas, rola para o lado */
.fluxo-caixa table { table-layout: fixed; }
.fluxo-caixa th, .fluxo-caixa td { padding: 7px 8px; }
.fluxo-caixa td small { white-space: normal; line-height: 1.3; }
@media (max-width: 1180px) { .fluxo-caixa table { table-layout: auto; min-width: 860px; } }

/* Cancelamento / Churn: telefone do cliente */
.telefone-cliente { display: flex; align-items: center; gap: 12px; margin: 2px 0 6px; font-size: 16px; font-weight: 600; }
.telefone-cliente a:first-child { color: var(--texto); text-decoration: none; }
.abrir-atendimento { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 4px 0 10px; }
.abrir-atendimento small { max-width: 520px; }
.abrir-atendimento .botao { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; line-height: 1.2; }
.abrir-atendimento .botao small { font-size: 11px; font-weight: 500; opacity: .85; }

/* Cobrança: tabela do dia 1 ao 30 inteira (sem rolagem interna); em telas estreitas, rola para o lado */

/* Menu: subitem (Cobrança › Ao vivo) */

.ponto-vivo { width: 8px; height: 8px; border-radius: 50%; background: #2dd4bf; box-shadow: 0 0 0 0 rgba(45, 212, 191, .6); animation: pulsoVivo 2s infinite; flex: none; }
@keyframes pulsoVivo { 0% { box-shadow: 0 0 0 0 rgba(45, 212, 191, .55); } 70% { box-shadow: 0 0 0 7px rgba(45, 212, 191, 0); } 100% { box-shadow: 0 0 0 0 rgba(45, 212, 191, 0); } }
@media (prefers-reduced-motion: reduce) { .ponto-vivo { animation: none; } }

/* Modo TV: tela cheia, sem o menu, letras maiores e sempre escuro */
body.modo-tv {
  --fundo: #0b1018; --superficie: #141b25; --superficie-2: #19212d; --borda: #253041; --texto: #e6eaf0; --texto-2: #a3adbc; --texto-3: #77818f;
  --grade: #232b36; --eixo: #3a4452; --primaria: #3987e5; --bom: #3fb950; --ruim: #f0716f; --sombra: none;
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; background: var(--fundo); color: var(--texto);
}
body.modo-tv .menu, body.modo-tv .sair-fixo { display: none !important; }
body.modo-tv #app.com-menu { grid-template-columns: minmax(0, 1fr); background: var(--fundo); }

.com-sufixo { display: flex; align-items: center; gap: 8px; }
.com-sufixo input { max-width: 220px; }

/* Metas de cobrança (Financeiro e TV) */
h2.secao .botao.pequeno { margin-left: auto; text-transform: none; letter-spacing: 0; }

/* ===== Cobrança (novo visual) ===== */

.abas { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--superficie-2); border: 1px solid var(--borda); }
.abas a { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 9px; color: var(--texto-2); text-decoration: none; font-weight: 600; font-size: 14px; }
.abas a:hover { color: var(--texto); }
.abas a[aria-current="page"] { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra), 0 0 0 1px var(--borda); }

.chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--borda); background: var(--superficie); color: var(--texto-2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.chip i { width: 9px; height: 9px; border-radius: 50%; }
.chip small { font-weight: 500; color: var(--texto-3); }
.chip.ligado { background: var(--texto); color: var(--superficie); border-color: var(--texto); }
.chip.ligado small { color: inherit; opacity: .7; }
.botao.whats { color: #128c4b; border-color: color-mix(in srgb, #25d366 40%, var(--borda)); }

/* TV: velocímetros, faixa de números, placar e pagamentos */

body.modo-tv .abas { display: none; }
/* Ao vivo fora do modo TV: os botões não ficam embaixo do "Sair" fixo */

/* ===== Celular (até 640 px): ajustes finais, por último para valer sobre as regras de telas maiores ===== */
@media (max-width: 640px) {
  /* Filtros do topo: filial e mês lado a lado; a situação da leitura e os botões numa linha só, menores */
  .filtros { gap: 8px; margin-bottom: 14px; font-size: 13px; }
  #app.com-menu main > .filtros { padding-left: 16px; padding-right: 16px; }
  .filtros > * { min-width: 0; }
  .filtros > .seletor-filiais, .filtros > select, .filtros > input[type="date"] { flex: 1 1 calc(50% - 4px); width: auto; min-width: 0; max-width: calc(100% - 0px); }
  .filtros .busca, .filtros input[type="search"] { flex: 1 1 100%; }
  .filtros .seletor-filiais .seletor-botao { width: 100%; min-width: 0; }
  .filtros .seletor-filiais .seletor-botao span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .filtros select, .filtros .seletor-botao { font-size: 14px; padding-top: 9px; padding-bottom: 9px; }
  .filtros .direita { margin-left: auto; gap: 6px; }
  .filtros .direita .botao { padding: 6px 10px; font-size: 13px; }
  .filtros .selo { font-size: 11px; }

  /* Cartões de números: sempre 2 por linha, mais compactos */
  .indicadores, .indicadores.quatro, .indicadores.cinco { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .indicador { padding: 12px 13px 11px; }
  .indicador .rotulo { font-size: 12px; }
  .indicador .valor { font-size: 20px; white-space: normal; overflow-wrap: anywhere; }
  .indicador .delta, .indicador .detalhe { font-size: 11.5px; }

  /* Títulos e cartões */
  h1.titulo-dia { font-size: 24px; }
  .cartao { padding: 16px 14px; }
  .cartao-topo { flex-wrap: wrap; }

  /* Placar das operadoras: nome em cima, números embaixo */

  /* Mapa do dia 1 ao 30: quadrados maiores (6 por linha) */

  /* Configurações: o quadro do que o Manager lê do IXC vira lista (nada cortado) */
  .leitura-ixc .rolagem { overflow: visible; max-height: none; }
  .leitura-ixc table, .leitura-ixc tbody { display: block; }
  .leitura-ixc tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 10px 0; border-bottom: 1px solid var(--borda); }
  .leitura-ixc td { border: 0; padding: 0; white-space: normal !important; text-align: left; }
  .leitura-ixc td:nth-child(3) { grid-column: 1 / -1; font-size: 12.5px; color: var(--texto-3); }

  /* Cobrança e TV no celular */

  .abas a { padding: 6px 10px; font-size: 13px; }
}

/* Cobrança: metas de recebimento (hoje, semana e mês) e ranking */

.cartao + .cartao { }

/* Celular: no topo só o botão do menu (grande, fácil de tocar); o "Sair do sistema" fica dentro do menu, no fim */
@media (max-width: 900px) {
  .menu-topo .botao-menu { margin-left: auto; width: 44px; height: 44px; align-items: center; justify-content: center; padding: 0; }
  .menu-topo .botao-menu .icone { width: 26px; height: 26px; }
  .menu.aberto .menu-rodape .botao-sair { margin-top: 6px; }
}

dialog .lista-marcar.modulos { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Menu: grupo Cobrança (abre e fecha) e o submenu ligado por uma linha */
.menu-itens .grupo-menu { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; background: transparent;
  color: var(--menu-texto); font: inherit; font-size: 15px; font-weight: 500; text-align: left; cursor: pointer; }
.menu-itens .grupo-menu:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.menu-itens .grupo-menu.dentro { color: #fff; font-weight: 600; }
.menu-itens .grupo-menu .seta { margin-left: auto; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; opacity: .7; }
.menu-itens .grupo-menu[aria-expanded="true"] .seta { transform: rotate(-135deg); margin-top: 4px; }
.menu-itens .submenu { position: relative; margin: 2px 0 6px 23px; padding-left: 14px; border-left: 2px solid rgba(255, 255, 255, .12); display: flex; flex-direction: column; gap: 2px; }
.menu-itens .submenu[hidden] { display: none; }
.menu-itens .submenu a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; min-height: 0; font-size: 14px; border-radius: 8px; }
.menu-itens .submenu a[aria-current="page"] { background: var(--menu-destaque); color: var(--menu-ativo); font-weight: 600; }
.menu-itens .submenu a[aria-current="page"]::before { content: ""; position: absolute; left: -2px; width: 2px; height: 22px; background: #3987e5; border-radius: 2px; }

/* ===== Cobrança: Visão Geral, Inadimplência e Operação (no estilo dos modelos) ===== */
.cob-tela { --verde: #167a4a; --verde-claro: #e8f5ee; --azul-claro: #eaf2fd; --amarelo-claro: #fdf4e3; --vermelho-claro: #fdecec; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cob-tela { --verde: #2ea56a; --verde-claro: rgba(46, 165, 106, .16); --azul-claro: rgba(57, 135, 229, .16); --amarelo-claro: rgba(237, 161, 0, .16); --vermelho-claro: rgba(240, 113, 111, .16); }
}
:root[data-theme="dark"] .cob-tela { --verde: #2ea56a; --verde-claro: rgba(46, 165, 106, .16); --azul-claro: rgba(57, 135, 229, .16); --amarelo-claro: rgba(237, 161, 0, .16); --vermelho-claro: rgba(240, 113, 111, .16); }
.cob-cabecalho { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; padding: 22px 0 18px; }
#app.com-menu main > .cob-cabecalho { padding-right: 118px; }
.cob-cabecalho h1 { margin: 0; font-size: 26px; font-weight: 750; letter-spacing: -.015em; }
.cob-cabecalho p { margin: 4px 0 0; color: var(--texto-2); font-size: 14.5px; }
.cob-trilha { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--texto-3); margin-bottom: 4px; }
.cob-trilha a { color: var(--texto-2); text-decoration: none; }
.cob-trilha a:hover { text-decoration: underline; }
.cob-trilha b { color: var(--verde); font-weight: 600; }
.cob-filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cob-filtro { display: inline-flex; align-items: center; gap: 6px; padding: 0 0 0 11px; border: 1px solid var(--borda); border-radius: 10px; background: var(--superficie); color: var(--texto-2); }
.cob-filtro .icone { width: 16px; height: 16px; }
.cob-filtro select { border: 0; background: transparent; padding: 8px 10px 8px 0; color: var(--texto); font-size: 14px; cursor: pointer; }
.cob-filtro select:focus { outline: none; }
.cob-filtro:focus-within { outline: 2px solid var(--foco); outline-offset: -1px; }
.cob-filtro.pequeno select { font-size: 13px; padding: 5px 8px 5px 0; }
.cob-filtros .seletor-botao { border-radius: 10px; }
.cob-exportar { border-radius: 10px; padding: 8px 14px; }
.cob-exportar .icone { width: 16px; height: 16px; }

/* Números do topo */
.cob-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.cob-kpi { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; gap: 4px 14px; align-items: start; padding: 18px; }
.cob-kpi-icone { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; grid-row: 1 / 3; }
.cob-kpi-icone .icone { width: 22px; height: 22px; }
.cob-kpi-icone.azul { background: var(--azul-claro); color: var(--s1); }
.cob-kpi-icone.verde { background: var(--verde-claro); color: var(--verde); }
.cob-kpi-icone.amarelo { background: var(--amarelo-claro); color: #c98500; }
.cob-kpi-corpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cob-kpi-rotulo { font-size: 13.5px; color: var(--texto-2); font-weight: 500; }
.cob-kpi-valor { font-size: 25px; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.2; overflow-wrap: anywhere; }
.cob-kpi-sub { font-size: 12.5px; color: var(--texto-3); }
.cob-kpi-sub.bom b { color: var(--bom); }
.cob-kpi-sub.ruim b { color: var(--ruim); }
.cob-kpi-mini { grid-column: 2; height: 30px; min-width: 0; }
.cob-kpi-mini:empty { display: none; }

/* Linhas de cartões */
.cob-linha { display: grid; gap: 16px; margin-bottom: 16px; }
.cob-linha.dois-um { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.cob-linha.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cob-linha > .cartao { min-width: 0; }
.cob-cartao-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.cob-cartao-topo h3, .cob-h3 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -.005em; }
.cob-h3 { margin-bottom: 14px; }
.cob-cartao-topo > small { color: var(--texto-3); font-size: 12.5px; }
.cob-legenda { display: flex; gap: 14px; font-size: 12.5px; color: var(--texto-2); }
.cob-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.cob-legenda .ponto { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.cob-legenda .traco { width: 16px; border-top: 2px dashed; display: inline-block; }
.cob-alternar { margin-left: auto; }
.cob-alternar button { border: 0; background: none; padding: 5px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--texto-2); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.cob-alternar button[aria-current="page"] { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra), 0 0 0 1px var(--borda); }

.cob-evolucao .area-grafico { min-height: 260px; }
.cob-nota { margin-top: 12px !important; }
.cob-rodape { color: var(--texto-3); font-size: 12px; margin: 4px 0 0; }

/* Trilho (barra fina) */
.cob-tela .trilho { height: 8px; border-radius: 99px; background: var(--grade); overflow: hidden; }
.cob-tela .trilho i { display: block; height: 100%; border-radius: 99px; background: var(--verde); }

/* Faixas de atraso */
.cob-faixas { display: flex; flex-direction: column; gap: 14px; }
.cob-faixa { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 12px; align-items: start; border-radius: 10px; }

.cob-faixa-nome { font-size: 13.5px; color: var(--texto-2); line-height: 20px; white-space: nowrap; }
.cob-faixa-barra { display: flex; flex-direction: column; gap: 4px; padding-top: 6px; }
.cob-faixa-barra small { font-size: 12px; color: var(--texto-3); }
.cob-faixa-valor { font-size: 14px; font-variant-numeric: tabular-nums; text-align: right; line-height: 20px; white-space: nowrap; }

/* Meta do mês */
.cob-meta { display: flex; flex-direction: column; align-items: center; text-align: center; }
.cob-meta .cob-cartao-topo { align-self: stretch; }
.cob-anel { width: min(190px, 70%); margin: 6px 0 10px; }
.cob-anel-pct { font-size: 22px; font-weight: 750; fill: var(--texto); }
.cob-meta-valor { margin: 0; font-size: 14px; color: var(--texto-2); }
.cob-meta-valor b { font-size: 18px; color: var(--texto); }
.cob-meta-falta { margin: 6px 0 4px; font-weight: 650; color: var(--verde); }
.cob-meta small { color: var(--texto-3); font-size: 12px; }

/* Rosca */
.cob-rosca-linha { display: flex; align-items: center; gap: 22px; }
.cob-rosca { width: 170px; flex: none; }
.cob-rosca-centro { font-size: 12.5px; font-weight: 750; fill: var(--texto); }
.cob-rosca-sub { font-size: 6.5px; fill: var(--texto-3); }
.cob-rosca-legenda { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cob-rosca-legenda li { display: flex; gap: 10px; align-items: flex-start; }
.cob-rosca-legenda i { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; flex: none; }
.cob-rosca-legenda div { display: flex; flex-direction: column; }
.cob-rosca-legenda b { font-size: 13.5px; }
.cob-rosca-legenda small { color: var(--texto-3); font-size: 12.5px; }

/* Sugestões (Insights, Onde agir, Próxima melhor ação) */
.cob-sugestao { background: linear-gradient(160deg, var(--verde-claro), var(--superficie) 70%); }
.cob-sugestao-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.cob-sugestao-topo h3 { margin: 0; font-size: 16px; font-weight: 700; }
.cob-selo { font-size: 11.5px; font-weight: 650; color: var(--verde); background: var(--verde-claro); border-radius: 99px; padding: 2px 10px; }
.cob-sugestao-corpo { display: flex; gap: 14px; align-items: flex-start; }
.cob-sugestao-emoji { font-size: 22px; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--superficie); box-shadow: var(--sombra), 0 0 0 1px var(--borda); flex: none; }
.cob-sugestao-corpo b { font-size: 15px; display: block; }
.cob-sugestao-corpo p { margin: 6px 0 14px; color: var(--texto-2); font-size: 13.5px; }
.cob-botao-verde { background: var(--verde); border-color: var(--verde); color: #fff; text-decoration: none; font-weight: 600; border-radius: 10px; }
.cob-botao-verde:hover { background: var(--verde); filter: brightness(1.08); }
.cob-botao-claro { border-radius: 10px; color: var(--verde); font-weight: 600; font-size: 13px; padding: 5px 12px; }

/* Tabelas */
.cob-tabela th { font-size: 12px; color: var(--texto-3); font-weight: 600; }
.cob-tabela td, .cob-tabela th { padding: 10px 8px; }
.cob-tabela tbody tr + tr td { border-top: 1px solid var(--grade); }
.cob-priorizar .rolagem { max-height: 520px; overflow: auto; }
.cob-tabela-rodape { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.cob-acoes-topo { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cob-prioridade { display: inline-block; font-size: 12px; font-weight: 650; border-radius: 99px; padding: 2px 10px; white-space: nowrap; }
.cob-prioridade.alta { background: var(--vermelho-claro); color: var(--ruim); }
.cob-prioridade.media { background: var(--amarelo-claro); color: #b07400; }
.cob-prioridade.baixa { background: var(--verde-claro); color: var(--verde); }

@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cob-prioridade.media, :root:not([data-theme="light"]) .cob-kpi-icone.amarelo { color: #eab54a; } }
:root[data-theme="dark"] .cob-prioridade.media, :root[data-theme="dark"] .cob-kpi-icone.amarelo { color: #eab54a; }

/* Funil */
.cob-funil { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
.cob-funil-etapa { border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cob-funil-etapa.azul { background: var(--azul-claro); }
.cob-funil-etapa.verde { background: var(--verde-claro); }
.cob-funil-etapa.amarelo { background: var(--amarelo-claro); }
.cob-funil-etapa b { font-size: 24px; font-weight: 750; font-variant-numeric: tabular-nums; }
.cob-funil-etapa small { color: var(--texto-2); font-size: 12px; }
.cob-funil-etapa .trilho { background: var(--superficie); }
.cob-funil-nome { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--texto-2); }
.cob-funil-nome .icone { width: 16px; height: 16px; }
.cob-funil-seta { color: var(--texto-3); font-size: 18px; }
.cob-funil-rodape { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; margin-top: 16px; font-size: 13.5px; color: var(--texto-2); }

/* Produtividade */
.cob-equipe ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cob-equipe li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto minmax(0, 1fr) 36px; gap: 10px; align-items: center; font-size: 13.5px; }
.cob-equipe li b { font-variant-numeric: tabular-nums; text-align: right; }
.cob-equipe li small { color: var(--texto-3); text-align: right; font-size: 12px; }
.cob-avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 700; background: var(--verde-claro); color: var(--verde); }
.cob-equipe-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 1200px) {
  .cob-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cob-linha.tres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cob-linha.tres > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 1000px) {
  .cob-linha.dois-um { grid-template-columns: minmax(0, 1fr); }
  .cob-funil { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cob-funil-seta { display: none; }
}
@media (max-width: 900px) {
  #app.com-menu main > .cob-cabecalho { padding-right: 0; }
}
@media (max-width: 640px) {
  .cob-cabecalho { padding: 14px 16px 14px; }
  .cob-cabecalho h1 { font-size: 22px; }
  .cob-filtros { width: 100%; }
  .cob-filtros > * { flex: 1 1 calc(50% - 4px); min-width: 0; }
  .cob-filtro select { width: 100%; min-width: 0; text-overflow: ellipsis; }
  .cob-filtros .seletor-filiais .seletor-botao { width: 100%; min-width: 0; }
  .cob-filtros .seletor-filiais .seletor-botao span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cob-exportar { justify-content: center; }
  .cob-kpis { gap: 10px; }
  .cob-kpi { grid-template-columns: minmax(0, 1fr); padding: 14px; gap: 8px; }
  .cob-kpi-icone { grid-row: auto; width: 36px; height: 36px; border-radius: 10px; }
  .cob-kpi-icone .icone { width: 18px; height: 18px; }
  .cob-kpi-valor { font-size: 19px; }
  .cob-kpi-rotulo { font-size: 12.5px; }
  .cob-kpi-mini { grid-column: 1; }
  .cob-linha, .cob-kpis { margin-left: 0; margin-right: 0; }
  .cob-linha.tres { grid-template-columns: minmax(0, 1fr); }
  .cob-rosca-linha { flex-direction: column; align-items: stretch; }
  .cob-rosca { width: 150px; align-self: center; }
  .cob-equipe li { grid-template-columns: 30px minmax(0, 1fr) auto 34px; }
  .cob-equipe li .trilho { display: none; }
  .cob-funil-rodape { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .cob-rodape { padding: 0 16px; }

  /* Tabelas viram cartões: nome e detalhe em cima, números e selos embaixo */
  .cob-priorizar .cob-tabela thead { display: none; }
  .cob-priorizar .cob-tabela tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 12px 0; }
  .cob-priorizar .cob-tabela tbody tr + tr { border-top: 1px solid var(--grade); }
  .cob-priorizar .cob-tabela td { padding: 0; border: 0 !important; text-align: left; }
  .cob-priorizar .cob-tabela td:first-child { flex: 1 1 100%; }
  .cob-priorizar .cob-tabela td:last-child { margin-left: auto; }

  .cob-priorizar .rolagem { max-height: none; overflow: visible; }
}

/* Cobrança em demonstração */
.menu-itens .grupo-menu .grupo-nome { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
.menu-itens .grupo-menu .grupo-nome small { font-size: 11px; color: #6f7f96; font-weight: 400; }
.selo.cob-demo { vertical-align: middle; margin-left: 10px; font-size: 12px; letter-spacing: 0; }

/* ===== Cobrança › Ao vivo (no modelo de tela) ===== */
.vivo-topo h1 { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.vivo-topo .selo.cob-demo { margin-left: 0; }
.vivo-pilula { display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px; border-radius: 99px; background: var(--verde-claro); color: var(--verde); font-size: 13px; font-weight: 750; letter-spacing: .04em; }
.vivo-pilula i, .vivo-conexao i, .vivo-auto i { width: 8px; height: 8px; border-radius: 50%; background: #16a34a; display: inline-block; }
.vivo-pilula i { animation: vivo-pulsar 1.6s ease-in-out infinite; }
@keyframes vivo-pulsar { 50% { box-shadow: 0 0 0 5px rgba(22, 163, 74, .18); } }
@media (prefers-reduced-motion: reduce) { .vivo-pilula i { animation: none; } }
.vivo-conexao { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--borda); border-radius: 10px; background: var(--superficie); font-size: 14px; }
.vivo-conexao.caiu { color: var(--ruim); }
.vivo-conexao.caiu i { background: var(--ruim); }
.vivo-atualizado { font-size: 13.5px; color: var(--texto-2); }
.vivo-atualizado b { font-weight: 600; color: var(--texto); font-variant-numeric: tabular-nums; }

.vivo-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.vivo-kpi { display: flex; gap: 12px; align-items: flex-start; padding: 16px 14px; min-width: 0; }
.vivo-kpi .cob-kpi-icone { width: 40px; height: 40px; }
.vivo-kpi .cob-kpi-rotulo { font-size: 13px; line-height: 1.3; }
.vivo-kpi-corpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.vivo-kpi-linha { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vivo-kpi .cob-kpi-valor { font-size: 23px; white-space: nowrap; }
.vivo-tendencia { width: 48px; height: 26px; flex: none; }
.vivo-kpi-sub { font-size: 12.5px; color: var(--texto-3); }
.vivo-kpi-sub.positivo { color: var(--verde); font-weight: 550; }

.vivo-grade { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 16px; margin-bottom: 12px; align-items: start; }
.vivo-coluna { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.vivo-auto { display: inline-flex; align-items: center; gap: 7px; margin-left: 12px; padding: 4px 12px; border-radius: 99px; background: var(--verde-claro); color: var(--verde); font-size: 12.5px; font-weight: 550; vertical-align: middle; }
.vivo-abas { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.vivo-abas button { border: 0; border-radius: 10px; padding: 7px 16px; background: var(--superficie-2); color: var(--texto-2); font-size: 13.5px; font-weight: 550; cursor: pointer; }
.vivo-abas button[aria-pressed="true"] { background: var(--verde); color: #fff; }
.vivo-fluxo { list-style: none; margin: 0; padding: 0; }
.vivo-evento { display: grid; grid-template-columns: 64px 14px 44px minmax(0, 1fr) auto 92px; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--grade); position: relative; }
.vivo-hora { font-size: 13px; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.vivo-ponto { width: 10px; height: 10px; border-radius: 50%; justify-self: center; background: var(--cor-ponto, var(--s1)); position: relative; z-index: 1; }
.vivo-evento:not(:last-child) .vivo-ponto::after { content: ""; position: absolute; left: 4px; top: 10px; width: 2px; height: 58px; background: var(--grade); z-index: -1; }
.vivo-evento.verde { --cor-ponto: #16a34a; } .vivo-evento.azul { --cor-ponto: #2a78d6; } .vivo-evento.amarelo { --cor-ponto: #e8a200; }
.vivo-evento.vermelho { --cor-ponto: #e5484d; } .vivo-evento.cinza { --cor-ponto: var(--texto-3); }
.vivo-icone { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; }
.vivo-icone .icone { width: 22px; height: 22px; }
.vivo-icone.verde { background: var(--verde-claro); color: var(--verde); } .vivo-icone.azul { background: var(--azul-claro); color: var(--s1); }
.vivo-icone.amarelo { background: var(--amarelo-claro); color: #c98500; } .vivo-icone.vermelho { background: var(--vermelho-claro); color: var(--ruim); }
.vivo-icone.cinza { background: var(--superficie-2); color: var(--texto-2); }
.vivo-texto { display: flex; flex-direction: column; min-width: 0; }
.vivo-texto b { font-size: 14.5px; }
.vivo-texto small { font-size: 13px; color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vivo-canal { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid var(--borda); border-radius: 10px; font-size: 13px; white-space: nowrap; background: var(--superficie); }
.vivo-canal .icone { width: 16px; height: 16px; }
.vivo-valor { text-align: right; font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vivo-valor.verde { color: var(--verde); } .vivo-valor.amarelo { color: #d38f00; } .vivo-valor.vermelho { color: var(--ruim); }
.vivo-valor.nenhum, .vivo-valor.azul, .vivo-valor.cinza { color: var(--texto-3); font-weight: 400; }

.vivo-ritmo .cob-cartao-topo { margin-bottom: 4px; }
.vivo-ritmo-grafico { min-height: 150px; }
.vivo-ritmo-rodape { display: flex; justify-content: space-between; font-size: 14px; color: var(--texto-2); margin-top: 4px; }
.vivo-ritmo-rodape b { color: var(--verde); font-size: 19px; margin-left: 4px; }
.vivo-equipe ul { list-style: none; margin: 0; padding: 0; }
.vivo-equipe li { display: grid; grid-template-columns: 32px minmax(60px, 1fr) auto minmax(90px, 1fr); gap: 12px; align-items: center; padding: 8px 0; font-size: 14px; }
.vivo-equipe li + li { border-top: 1px solid var(--grade); }
.cob-avatar.azul { background: var(--azul-claro); color: var(--s1); } .cob-avatar.laranja { background: var(--amarelo-claro); color: #c26a00; }
.cob-avatar.cinza { background: var(--superficie-2); color: var(--texto-2); }
.vivo-estado { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 99px; font-size: 13px; font-weight: 550; white-space: nowrap; }
.vivo-estado .icone { width: 15px; height: 15px; }
.vivo-estado.verde { background: var(--verde-claro); color: var(--verde); } .vivo-estado.amarelo { background: var(--amarelo-claro); color: #b07400; }
.vivo-estado.cinza { background: var(--superficie-2); color: var(--texto-2); }
.vivo-det { color: var(--texto-2); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.vivo-atencao { display: flex; align-items: center; gap: 16px; background: linear-gradient(120deg, var(--verde-claro), var(--superficie) 80%); }
.vivo-atencao > div { flex: 1; min-width: 0; }
.vivo-atencao h3 { margin: 0 0 4px; font-size: 16px; }
.vivo-atencao b { font-size: 14.5px; display: block; }
.vivo-atencao p { margin: 2px 0 0; color: var(--texto-2); font-size: 13.5px; }
.vivo-sino { width: 56px; height: 56px; flex: none; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #4ade80, #15803d); color: #fff; box-shadow: 0 8px 20px rgba(22, 163, 74, .3); }
.vivo-sino .icone { width: 28px; height: 28px; }
.vivo-rodape { text-align: right; }
body.modo-tv main.cob-vivo { max-width: none; padding: 18px 28px 12px; }
body.modo-tv .cob-vivo .vivo-topo { padding-top: 0; }
body.modo-tv .cob-vivo .cob-kpi-valor { font-size: 32px; }

@media (max-width: 1400px) {
  .vivo-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vivo-evento { grid-template-columns: 58px 14px 40px minmax(0, 1fr) auto 80px; gap: 10px; }
}
@media (max-width: 1100px) { .vivo-grade { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .vivo-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .vivo-kpis > :last-child { grid-column: 1 / -1; }
  .vivo-kpi { flex-direction: column; gap: 8px; padding: 14px; }
  .vivo-kpi .cob-kpi-icone { width: 36px; height: 36px; }
  .vivo-kpi .cob-kpi-valor { font-size: 19px; }
  .vivo-tendencia { width: 44px; }
  .vivo-atualizado { flex: 1 1 100% !important; }
  .vivo-topo .cob-filtros > .botao { display: none; }
  .vivo-auto { margin-left: 0; margin-top: 6px; }
  .vivo-evento { grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "icone texto valor" "icone hora canal"; gap: 4px 10px; }
  .vivo-evento .vivo-ponto { display: none; }
  .vivo-icone { grid-area: icone; width: 40px; height: 40px; }
  .vivo-texto { grid-area: texto; } .vivo-valor { grid-area: valor; font-size: 14.5px; }
  .vivo-hora { grid-area: hora; font-size: 12px; } .vivo-canal { grid-area: canal; justify-self: end; padding: 3px 9px; font-size: 12px; }
  .vivo-equipe li { grid-template-columns: 30px minmax(0, 1fr) auto; }
  .vivo-equipe .vivo-det { grid-column: 2 / -1; font-size: 12.5px; margin-top: -6px; }
  .vivo-atencao { flex-wrap: wrap; }
  .vivo-atencao .botao { width: 100%; justify-content: center; }
  .vivo-rodape { text-align: left; }
}
/* Modo TV é sempre escuro: as cores claras da Cobrança seguem o tema escuro */
body.modo-tv .cob-tela { --verde: #2ea56a; --verde-claro: rgba(46, 165, 106, .16); --azul-claro: rgba(57, 135, 229, .16); --amarelo-claro: rgba(237, 161, 0, .16); --vermelho-claro: rgba(240, 113, 111, .16); }
/* Menu lateral com a Cobrança aberta pode passar da altura da tela: rola */
@media (min-width: 901px) { .menu { overflow-y: auto; scrollbar-width: thin; scrollbar-color: #2a3a52 transparent; } }

/* ===== Cobrança Preventiva ===== */
.cob-kpis.cinco { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.cob-kpis.cinco .cob-kpi { padding: 16px 14px; gap: 4px 12px; }
.cob-kpis.cinco .cob-kpi-icone { width: 40px; height: 40px; }
.cob-kpis.cinco .cob-kpi-valor { font-size: 21px; white-space: nowrap; }
.cob-kpi-icone.vermelho { background: var(--vermelho-claro); color: var(--ruim); }
.cob-kpi-sub.bom-texto { color: var(--verde); font-weight: 550; }
.cob-kpi-sub.azul-texto { color: var(--s1); }
.prev-criterio { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; padding: 10px 16px; margin: -4px 0 16px; border: 1px solid color-mix(in srgb, var(--s1) 25%, var(--borda)); border-radius: 12px; background: var(--azul-claro); font-size: 13.5px; color: var(--texto-2); }
.prev-criterio .icone { width: 18px; height: 18px; color: var(--s1); }
.prev-criterio b { color: var(--s1); font-weight: 650; }
.prev-sep { width: 1px; height: 16px; background: var(--borda); }
.prev-tabela { margin-bottom: 16px; }
.prev-tabela .rolagem { max-height: none; overflow: auto; }
.prev-tabela td, .prev-tabela th { vertical-align: middle; }
.prev-tabela tbody tr:hover td { background: var(--superficie-2); }
.prev-tabela .cob-prioridade { min-width: 74px; text-align: center; }
.prev-meses { display: inline-flex; gap: 3px; margin-left: 8px; vertical-align: middle; }
.prev-meses i { width: 8px; height: 8px; border-radius: 2px; background: var(--grade); }
.prev-meses i.sim { background: var(--ruim); }
.prev-ir { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: var(--texto-2); text-decoration: none; font-size: 20px; line-height: 1; }
.prev-ir:hover { background: var(--grade); color: var(--texto); }
.prev-busca { padding-left: 10px; }
.prev-busca .lupa { font-size: 17px; color: var(--texto-3); }
.prev-busca input { border: 0; background: transparent; padding: 7px 10px 7px 0; min-width: 200px; font-size: 13.5px; }
.prev-busca input:focus { outline: none; }
.prev-rodape { justify-content: space-between; }
.prev-paginas { display: flex; gap: 6px; align-items: center; }
.prev-pag { min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid var(--borda); border-radius: 8px; background: var(--superficie); cursor: pointer; font-size: 13.5px; color: var(--texto); }
.prev-pag[aria-current="page"] { background: var(--verde); border-color: var(--verde); color: #fff; font-weight: 650; }
.prev-pag:disabled { opacity: .45; cursor: default; }
.prev-reticencias { color: var(--texto-3); padding: 0 2px; }
.cob-h3.sem-margem { margin-bottom: 2px; }
.prev-grafico .area-grafico { min-height: 190px; margin-top: 8px; }
.prev-oportunidade { display: flex; align-items: center; gap: 22px; background: linear-gradient(135deg, var(--verde-claro), var(--superficie) 85%); }
.prev-escudo { width: 96px; height: 96px; flex: none; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, rgba(46, 165, 106, .25), transparent 70%); color: var(--verde); }
.prev-escudo .icone { width: 54px; height: 54px; stroke-width: 1.6; fill: color-mix(in srgb, var(--verde) 22%, transparent); }
.prev-oportunidade h3 { margin: 0 0 6px; font-size: 17px; }
.prev-oportunidade p { margin: 0 0 14px; color: var(--texto-2); font-size: 15px; }
.prev-oportunidade p b { color: var(--texto); }
.prev-botao { border-color: var(--verde); padding: 9px 22px; font-size: 14px; background: var(--superficie); }
.prev-oportunidade > div { min-width: 0; }
/* Preventiva: 8 colunas; em telas médias os títulos quebram em duas linhas e o nome do cliente ganha espaço */
.prev-tabela td.prev-atraso { white-space: nowrap; }
@media (min-width: 641px) and (max-width: 1400px) {
  .prev-clientes th { white-space: normal; line-height: 1.25; vertical-align: bottom; }
  .prev-clientes td:first-child { min-width: 170px; }
  .prev-clientes td, .prev-clientes th { padding-left: 6px; padding-right: 6px; }
}
.prev-botao { max-width: 100%; white-space: normal; }
@media (max-width: 1280px) { .prev-oportunidade { flex-direction: column; text-align: center; gap: 10px; } .prev-escudo { width: 72px; height: 72px; } }
@media (max-width: 1400px) { .cob-kpis.cinco { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .cob-kpis.cinco { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cob-kpis.cinco > :first-child { grid-column: 1 / -1; }
  .prev-criterio { margin: 0 0 12px; }
  .prev-sep { display: none; }
  .prev-busca { flex: 1 1 100%; }
  .prev-busca input { min-width: 0; width: 100%; }
  .prev-tabela .cob-tabela thead { display: none; }
  .prev-tabela .cob-tabela tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 12px 0; }
  .prev-tabela .cob-tabela tbody tr + tr { border-top: 1px solid var(--grade); }
  .prev-tabela .cob-tabela td { padding: 0; border: 0 !important; text-align: left; }
  .prev-tabela .cob-tabela td:first-child { flex: 1 1 calc(100% - 40px); }
  .prev-tabela .cob-tabela td:last-child { order: -1; margin-left: auto; }
  .prev-tabela .cob-tabela td:first-child { order: -2; }
  .prev-oportunidade { flex-direction: column; text-align: center; }
  .prev-rodape { flex-direction: column; align-items: flex-start; }
}

/* ===== Cobrança › Ao vivo: painel escuro (TV), sempre escuro nos dois temas ===== */
main.vivo-tv {
  --tv-texto: #eef6ff; --tv-suave: #9db3c8; --tv-borda: rgba(110, 190, 255, .22); --tv-verde: #2ee88a; --tv-azul: #4cc3ff; --tv-dourado: #ffc23d;
  max-width: none; min-height: 100vh; margin: 0; padding: 18px 24px 12px; color: var(--tv-texto);
  background: radial-gradient(ellipse at 15% 0%, rgba(30, 160, 110, .22), transparent 45%), radial-gradient(ellipse at 85% 10%, rgba(40, 120, 220, .2), transparent 50%), linear-gradient(180deg, #071521, #050d16);
  display: flex; flex-direction: column; gap: 14px;
}
#app.com-menu main.vivo-tv { padding-right: 24px; }
.vivo-tv .icone { stroke-width: 2; }
.tv-cabeca { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; padding-right: 110px; }
.tv-cabeca h1 { text-align: center; }
.tv-cabeca-esq { display: flex; align-items: center; gap: 14px; min-width: 0; }
body.modo-tv .tv-cabeca { padding-right: 0; }
.tv-marca { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.tv-marca span { font-size: clamp(18px, 1.6vw, 24px); letter-spacing: .01em; color: #dfe9f3; font-weight: 500; }
.tv-marca i { width: 44px; height: 9px; margin-left: -4px; border-bottom: 3px solid var(--tv-verde); border-radius: 0 0 50% 50%; }
.tv-cabeca h1 { margin: 0; font-size: clamp(30px, 3vw, 52px); font-weight: 800; letter-spacing: -.02em; color: #fff; }
.tv-demo { font-size: 12px; font-weight: 650; padding: 3px 10px; border-radius: 99px; background: rgba(255, 194, 61, .16); color: var(--tv-dourado); }
.tv-cabeca-dir { justify-self: end; display: flex; align-items: center; gap: 14px; }
.tv-aovivo { display: inline-flex; align-items: center; gap: 10px; padding: 7px 18px; border: 1.5px solid var(--tv-verde); border-radius: 99px; color: var(--tv-verde); font-weight: 800; letter-spacing: .04em; box-shadow: 0 0 18px rgba(46, 232, 138, .25) inset; }
.tv-aovivo i, .tv-conexao i { width: 11px; height: 11px; border-radius: 50%; background: var(--tv-verde); box-shadow: 0 0 10px var(--tv-verde); animation: tv-piscar 1.6s ease-in-out infinite; }
@keyframes tv-piscar { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .tv-aovivo i, .tv-conexao i { animation: none; } }
.tv-hora { font-size: clamp(24px, 2.4vw, 36px); font-weight: 800; font-variant-numeric: tabular-nums; padding-left: 18px; border-left: 1px solid rgba(255, 255, 255, .18); }
.tv-data { color: var(--tv-suave); font-size: 14px; padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, .18); }
.tv-cheia { border: 1px solid var(--tv-borda); background: rgba(255, 255, 255, .04); color: var(--tv-texto); border-radius: 10px; width: 38px; height: 38px; font-size: 18px; cursor: pointer; }
.tv-cheia:hover { background: rgba(255, 255, 255, .1); }

.tv-c { position: relative; border: 1px solid var(--tv-borda); border-radius: 16px; padding: 16px 18px; min-width: 0;
  background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015)); box-shadow: 0 0 0 1px rgba(0, 0, 0, .2), 0 10px 30px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .06); }
.tv-c h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 18px; font-weight: 700; color: #fff; }
.tv-c h2 .icone { width: 24px; height: 24px; color: var(--tv-azul); }
.tv-rotulo { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: #dce8f3; }
.tv-vazio { color: var(--tv-suave); margin: 18px 0; text-align: center; }

.tv-linha1 { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 14px; }
.tv-recuperado { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-color: rgba(46, 232, 138, .6);
  background: linear-gradient(135deg, rgba(23, 168, 92, .55), rgba(10, 70, 45, .35) 60%, rgba(10, 40, 30, .3)); box-shadow: 0 0 26px rgba(46, 232, 138, .25), inset 0 1px 0 rgba(255, 255, 255, .12); }
.tv-recuperado .tv-rotulo .icone { color: #bfffd9; }
.tv-grande { display: block; font-size: clamp(36px, 4.4vw, 68px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: #f2fff7; text-shadow: 0 0 22px rgba(46, 232, 138, .35); white-space: nowrap; }
.tv-agora { display: inline-block; margin-top: 8px; padding: 5px 16px; border: 1px solid rgba(160, 255, 200, .5); border-radius: 99px; font-weight: 700; font-size: 16px; color: #d9ffe9; background: rgba(0, 0, 0, .15); }
.tv-agora.suave { font-weight: 500; }
.tv-moedas { width: clamp(90px, 9vw, 150px); flex: none; filter: drop-shadow(0 0 14px rgba(46, 232, 138, .45)); }
.tv-moedas-rs { font-size: 20px; font-weight: 800; fill: #d6ffe7; }
.tv-num { display: flex; align-items: center; gap: 12px; }
.tv-num > div { display: flex; flex-direction: column; align-items: flex-end; text-align: right; flex: 1; min-width: 0; }
.tv-num small { color: var(--tv-suave); font-size: 13.5px; }
.tv-medio { font-size: clamp(32px, 3.4vw, 62px); font-weight: 800; line-height: 1.05; color: #fff; }
.tv-ilustra { flex: none; width: clamp(48px, 4.6vw, 84px); height: clamp(48px, 4.6vw, 84px); border-radius: 18px; display: grid; place-items: center; }
.tv-ilustra .icone { width: 72%; height: 72%; stroke-width: 1.6; }
.tv-num.azul .tv-ilustra { color: #5fd0ff; background: radial-gradient(circle, rgba(76, 195, 255, .28), transparent 70%); filter: drop-shadow(0 0 10px rgba(76, 195, 255, .6)); }
.tv-num.azul2 .tv-ilustra { color: #8fc8ff; background: radial-gradient(circle, rgba(90, 150, 255, .28), transparent 70%); filter: drop-shadow(0 0 10px rgba(90, 150, 255, .6)); }
.tv-num.verde .tv-ilustra { color: #43f0a0; background: radial-gradient(circle, rgba(46, 232, 138, .26), transparent 70%); filter: drop-shadow(0 0 10px rgba(46, 232, 138, .55)); }
.tv-num.azul { border-color: rgba(76, 195, 255, .45); } .tv-num.azul2 { border-color: rgba(90, 150, 255, .45); } .tv-num.verde { border-color: rgba(46, 232, 138, .45); }

.tv-linha2 { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, .8fr) minmax(0, 1.1fr); gap: 14px; }
.tv-grafico { min-height: 210px; }
.tv-grade { stroke: rgba(255, 255, 255, .08); }
.tv-eixo { font-size: 12px; fill: var(--tv-suave); } .tv-eixo.forte { fill: #e6eef6; font-size: 13px; }
.tv-hbarra { filter: drop-shadow(0 0 8px rgba(46, 232, 138, .45)); }
.tv-meta-linha { stroke: var(--tv-azul); stroke-width: 1.6; stroke-dasharray: 6 5; }
.tv-meta-txt { font-size: 12px; fill: var(--tv-azul); } .tv-meta-txt.forte { font-weight: 700; font-size: 13px; }
.tv-meta-dia { display: flex; flex-direction: column; align-items: center; text-align: center; }
.tv-meta-dia h2 { align-self: flex-start; }
.tv-anel { width: min(170px, 80%); filter: drop-shadow(0 0 12px rgba(46, 232, 138, .4)); }
.tv-anel-pct { font-size: 24px; font-weight: 800; fill: #fff; }
.tv-meta-valor { margin: 6px 0 0; color: #cfdbe6; font-size: 15px; }
.tv-meta-valor b { color: var(--tv-verde); font-size: 20px; }
.tv-meta-falta { margin: 4px 0 0; color: var(--tv-dourado); font-size: 16px; }
.tv-destaques ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tv-destaques li { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 0; }
.tv-destaques li + li { border-top: 1px solid rgba(255, 255, 255, .08); }
.tv-medalha { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 19px; color: #3a2a00; }
.tv-medalha.m1 { background: radial-gradient(circle at 35% 30%, #fff1a8, #f1b51c 55%, #a8700a); box-shadow: 0 0 14px rgba(255, 194, 61, .5); }
.tv-medalha.m2 { background: radial-gradient(circle at 35% 30%, #ffffff, #b8c6d6 55%, #6e7f93); color: #1d2a38; box-shadow: 0 0 12px rgba(184, 198, 214, .4); }
.tv-medalha.m3 { background: radial-gradient(circle at 35% 30%, #ffd2a8, #cd7f3a 55%, #7d4314); color: #2d1606; box-shadow: 0 0 12px rgba(205, 127, 58, .4); }
.tv-dest-nome b { font-size: 21px; color: #fff; }
.tv-trilho { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .08); margin-top: 6px; overflow: hidden; }
.tv-trilho i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #22c97a, #4dffb0); box-shadow: 0 0 10px rgba(46, 232, 138, .6); }
.tv-dest-valor { font-size: 22px; color: var(--tv-verde); white-space: nowrap; }

.tv-linha3 { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 14px; }
.tv-atividades ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tv-atividades li { display: grid; grid-template-columns: 46px 60px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 6px 14px 6px 6px; border-radius: 12px; background: rgba(255, 255, 255, .04); }
.tv-ativ-icone { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; }
.tv-ativ-icone .icone { width: 24px; height: 24px; stroke-width: 2.4; }
.tv-ativ-icone.verde { background: radial-gradient(circle at 35% 30%, #4dffb0, #0e8f4f); color: #04351c; }
.tv-ativ-icone.azul { background: radial-gradient(circle at 35% 30%, #7fd8ff, #1d6fd1); color: #04213f; }
.tv-ativ-icone.dourado { background: radial-gradient(circle at 35% 30%, #ffe08a, #d39b12); color: #3a2a00; }
.tv-ativ-icone.vermelho { background: radial-gradient(circle at 35% 30%, #ff9a9a, #c93636); color: #3a0606; }
.tv-ativ-hora { color: var(--tv-suave); font-size: 17px; font-variant-numeric: tabular-nums; }
.tv-ativ-titulo { font-size: 20px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-ativ-valor { font-size: 22px; white-space: nowrap; }
.tv-ativ-valor.verde { color: var(--tv-verde); } .tv-ativ-valor.azul { color: var(--tv-azul); } .tv-ativ-valor.dourado { color: var(--tv-dourado); } .tv-ativ-valor.vermelho { color: #ff7b7b; }
.tv-atencao { border-color: rgba(255, 194, 61, .75); background: linear-gradient(135deg, rgba(150, 95, 10, .55), rgba(70, 45, 8, .45) 55%, rgba(30, 22, 8, .5)); box-shadow: 0 0 26px rgba(255, 194, 61, .25), inset 0 1px 0 rgba(255, 255, 255, .1); }
.tv-atencao h2 { color: var(--tv-dourado); } .tv-atencao h2 .icone { color: var(--tv-dourado); }
.tv-atencao-corpo { display: flex; align-items: center; gap: 18px; }
.tv-atencao-n { font-size: clamp(48px, 5vw, 80px); font-weight: 800; line-height: 1; background: linear-gradient(180deg, #fff2b0, #ffb81c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tv-atencao-corpo > span:not(.tv-sino) { font-size: 22px; font-weight: 700; color: #fff; max-width: 240px; line-height: 1.2; }
.tv-sino { margin-left: auto; color: var(--tv-dourado); filter: drop-shadow(0 0 16px rgba(255, 194, 61, .7)); }
.tv-sino .icone { width: clamp(56px, 5vw, 84px); height: clamp(56px, 5vw, 84px); stroke-width: 1.6; fill: rgba(255, 194, 61, .25); }
.tv-atencao-valor { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid rgba(255, 194, 61, .25); color: #f3e7cc; font-size: 17px; }
.tv-atencao-valor b { color: var(--tv-dourado); font-size: 26px; }
.tv-pe { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--tv-suave); font-size: 13px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .08); margin-top: auto; }
.tv-conexao { display: inline-flex; align-items: center; gap: 8px; color: #dfe9f3; }
.tv-conexao.caiu { color: #ff8a8a; } .tv-conexao.caiu i { background: #ff5a5a; box-shadow: 0 0 10px #ff5a5a; }
.vivo-tv .vazio { color: #dfe9f3; }
body.modo-tv main.vivo-tv { padding: 16px 24px 10px; height: 100vh; overflow: hidden; }

@media (max-width: 1250px) {
  .tv-linha1 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tv-recuperado { grid-column: 1 / -1; }
  .tv-linha2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tv-porhora { grid-column: 1 / -1; }
}
@media (max-width: 900px) { .tv-cabeca { padding-right: 0; } .tv-linha3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  main.vivo-tv { padding: 14px 12px; gap: 10px; }
  #app.com-menu main.vivo-tv { padding-right: 12px; }
  .tv-cabeca { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .tv-marca, .tv-cheia { display: none; }
  .tv-cabeca-dir { justify-self: center; gap: 10px; }
  .tv-hora { padding-left: 10px; }
  .tv-linha1 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tv-num { flex-direction: column; align-items: flex-start; }
  .tv-num > div { align-items: flex-start; text-align: left; }
  .tv-num:last-child { grid-column: 1 / -1; }
  .tv-moedas { width: 70px; }
  .tv-linha2 { grid-template-columns: minmax(0, 1fr); }
  .tv-atividades li { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; }
  .tv-ativ-hora { grid-column: 2; grid-row: 2; font-size: 13px; }
  .tv-ativ-titulo { grid-column: 2; grid-row: 1; font-size: 16px; }
  .tv-ativ-valor { grid-row: 1 / 3; font-size: 18px; }
  .tv-ativ-icone { grid-row: 1 / 3; width: 40px; height: 40px; }
  .tv-atencao-corpo > span:not(.tv-sino) { font-size: 17px; }
  .tv-pe { flex-direction: column; }
}

/* Usuários: telas da Cobrança liberadas */
.telas-cobranca { border: 1px solid var(--borda); border-radius: 10px; padding: 10px 14px 12px; margin: 0 0 14px; }
.telas-cobranca legend { font-size: 13px; font-weight: 600; color: var(--texto-2); padding: 0 6px; }
.lista-marcar.telas { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.lista-marcar.telas .marcar { margin-bottom: 6px; }

/* Rodapé do painel da TV */
.tv-pe { align-items: center; }

/* ===== Financeiro no padrão das telas novas ===== */
.fin-tela .cob-kpis + .cob-kpis { margin-top: -2px; }
.fin-tela > .grade { margin-bottom: 16px; }
.fin-tela .cartao-topo h3 { font-size: 16px; font-weight: 700; }
.fin-tela .cartao.largo { margin-bottom: 16px; }
.fin-tela .regras { margin-top: 4px; }
.fin-tela .chamada { margin-bottom: 16px; }
/* Metas de recebimento: uma linha por período, com barra fina */
.fin-meta { padding: 12px 0; }
.fin-meta + .fin-meta { border-top: 1px solid var(--grade); }
.fin-meta-topo { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.fin-meta-topo > b { font-size: 14px; min-width: 64px; }
.fin-meta-valor { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fin-meta-valor small { font-size: 12.5px; font-weight: 500; color: var(--texto-3); }
.fin-selo { margin-left: auto; font-size: 11.5px; font-weight: 650; border-radius: 99px; padding: 2px 10px; white-space: nowrap; }
.fin-selo.bom { background: var(--verde-claro); color: var(--verde); }
.fin-selo.ritmo { background: var(--azul-claro); color: var(--s1); }
.fin-selo.ruim { background: var(--vermelho-claro); color: var(--ruim); }
.fin-selo.neutra { background: var(--superficie-2); color: var(--texto-3); }
.fin-trilho { position: relative; margin: 8px 0 6px; overflow: visible; }
.fin-trilho i.bom { background: var(--verde); } .fin-trilho i.ritmo { background: var(--s1); } .fin-trilho i.ruim { background: var(--ruim); } .fin-trilho i.neutra { background: var(--texto-3); }
.fin-trilho b { position: absolute; top: -3px; width: 2px; height: 14px; background: var(--texto-2); border-radius: 1px; transform: translateX(-1px); }
.fin-meta-rodape { color: var(--texto-3); font-size: 12px; }
/* Destaques do mês: lista com ícone */
.fin-destaques ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.fin-destaques li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; }
.fin-destaques li + li { border-top: 1px solid var(--grade); }
.fin-destaques .cob-kpi-icone { width: 38px; height: 38px; border-radius: 10px; grid-row: auto; flex: none; }
.fin-destaques .cob-kpi-icone .icone { width: 19px; height: 19px; }
.fin-destaques li > div { display: flex; flex-direction: column; min-width: 0; }
.fin-destaques small { font-size: 12.5px; color: var(--texto-2); font-weight: 500; }
.fin-destaques b { font-size: 17px; font-variant-numeric: tabular-nums; }
.fin-destaques .detalhe { font-size: 12.5px; color: var(--texto-3); overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .fin-meta-valor { font-size: 15px; }
  .fin-selo { margin-left: 0; }
}

/* Valores dos cartões sempre numa linha só: a fonte acompanha a largura do cartão (sem quebrar "R$ 519.765,98") */
.cob-kpi-corpo, .vivo-kpi-corpo { container-type: inline-size; }
.cob-kpi-valor { white-space: nowrap; overflow-wrap: normal; font-size: clamp(15px, 11.5cqi, 25px); }
.cob-kpis.cinco .cob-kpi-valor { font-size: clamp(15px, 11.5cqi, 21px); }
.vivo-kpi .cob-kpi-valor { font-size: clamp(15px, 10cqi, 23px); }
body.modo-tv .cob-vivo .cob-kpi-valor { font-size: clamp(18px, 11cqi, 32px); }
@media (max-width: 640px) {
  .cob-kpi-valor, .vivo-kpi .cob-kpi-valor { font-size: clamp(14px, 11.5cqi, 19px); }
}
.cob-kpi-corpo, .vivo-kpi-corpo { align-self: stretch; }
.prev-meses.muitos { gap: 2px; }
.prev-meses.muitos i { width: 5px; height: 9px; border-radius: 1px; }

/* Configurações: relatório do dia no WhatsApp */
.wpp-status { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 14px; border: 1px solid var(--borda); border-radius: 12px; background: var(--superficie-2); }
.wpp-status > div { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.wpp-status small { color: var(--texto-2); font-size: 12.5px; overflow-wrap: anywhere; }
.wpp-ponto { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--texto-3); }
.wpp-ponto.ok { background: #25d366; box-shadow: 0 0 0 4px color-mix(in srgb, #25d366 22%, transparent); }
.wpp-qr { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; padding: 14px; margin-bottom: 14px; border: 1px dashed var(--borda); border-radius: 12px; }
.wpp-qr img { width: 240px; height: 240px; background: #fff; border-radius: 8px; padding: 6px; }
.wpp-qr ol { margin: 0; padding-left: 18px; font-size: 13.5px; color: var(--texto-2); display: grid; gap: 6px; flex: 1; min-width: 220px; }
.wpp .marcar { display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; font-size: 14px; }
.wpp .acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.wpp-previa { margin-top: 14px; text-align: center; }
.wpp-previa img { width: 100%; max-width: 420px; border-radius: 12px; border: 1px solid var(--borda); box-shadow: var(--sombra); }
@media (max-width: 640px) { .wpp .duas { grid-template-columns: minmax(0, 1fr); } .wpp-qr img { width: 200px; height: 200px; } .wpp-status { flex-wrap: wrap; } .wpp-status .botao { width: 100%; } }

/* Configurações em abas */
.abas-config { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 18px; }
.aba-config {
  position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; min-width: 0;
  border: 1px solid var(--borda); border-radius: 14px; background: var(--superficie); box-shadow: var(--sombra);
  color: var(--texto); text-decoration: none; transition: border-color .15s, background .15s;
}
.aba-config:hover { border-color: color-mix(in srgb, var(--primaria) 45%, var(--borda)); }
.aba-config .icone { width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--texto-3); }
.aba-config > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aba-config b { font-size: 13.5px; hyphens: auto; }
.aba-config small { font-size: 12px; color: var(--texto-2); line-height: 1.3; }
.aba-config.ativa { border-color: var(--primaria); background: color-mix(in srgb, var(--primaria) 7%, var(--superficie)); box-shadow: 0 0 0 1px var(--primaria) inset, var(--sombra); }
.aba-config.ativa .icone { color: var(--primaria); }
.aba-estado { align-self: flex-start; margin-top: 4px; font-style: normal; font-size: 10.5px; font-weight: 600; padding: 1px 7px; border-radius: 99px; background: var(--superficie-2); color: var(--texto-2); }
.aba-estado.ok { background: color-mix(in srgb, var(--bom) 14%, transparent); color: var(--bom); }
.aba-estado.falta { background: color-mix(in srgb, var(--ruim) 12%, transparent); color: var(--ruim); }
@media (max-width: 1100px) { .abas-config { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .abas-config { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px 16px; padding: 2px 16px 6px; gap: 8px; scrollbar-width: none; }
  .abas-config::-webkit-scrollbar { display: none; }
  .aba-config { flex: 0 0 auto; scroll-snap-align: start; padding: 9px 12px; align-items: center; }
  .aba-config small, .aba-estado { display: none; }
  .aba-config b { white-space: nowrap; font-size: 13.5px; }
}

/* ===== Ouvidoria (Reclame Aqui e Procon SP) ===== */
.cob-prioridade.azul { background: var(--azul-claro); color: var(--s1); }
.ouv-reputacao { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 16px 18px; border-left: 5px solid var(--texto-3); }
.ouv-reputacao.otimo { border-left-color: #1baf7a; } .ouv-reputacao.bom { border-left-color: #7cc242; }
.ouv-reputacao.regular { border-left-color: #e3a008; } .ouv-reputacao.ruim { border-left-color: var(--ruim); }
.ouv-rep-rotulo { font-size: 12.5px; color: var(--texto-2); font-weight: 600; }
.ouv-rep-classe { font-size: 24px; letter-spacing: -.01em; }
.ouv-reputacao.otimo .ouv-rep-classe { color: #1baf7a; } .ouv-reputacao.bom .ouv-rep-classe { color: #5a9e2a; }
.ouv-reputacao.regular .ouv-rep-classe { color: #c98500; } .ouv-reputacao.ruim .ouv-rep-classe { color: var(--ruim); }
.ouv-rep-nota { font-size: 14px; color: var(--texto-2); } .ouv-rep-nota b { font-size: 20px; color: var(--texto); }
.ouv-reputacao small { font-size: 12px; color: var(--texto-3); margin-top: 4px; }
.ouv-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.ouv-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 99px; border: 1px solid var(--borda); background: var(--superficie); color: var(--texto-2); font: inherit; font-size: 13px; cursor: pointer; }
.ouv-chip b { color: var(--texto); font-variant-numeric: tabular-nums; }
.ouv-chip:hover { border-color: color-mix(in srgb, var(--primaria) 45%, var(--borda)); }
.ouv-chip.ativo { border-color: var(--primaria); background: color-mix(in srgb, var(--primaria) 9%, var(--superficie)); color: var(--texto); }
.ouv-chip.alerta b { color: var(--ruim); }
.ouv-tabela { margin-bottom: 16px; }
.ouv-tabela .rolagem { max-height: none; overflow: auto; }
.ouv-tabela .prev-busca input { width: 260px; max-width: 100%; }
.ouv-linha { cursor: pointer; }
.ouv-linha:hover td { background: var(--superficie-2); }
.ouv-linha:focus-visible { outline: 2px solid var(--primaria); outline-offset: -2px; }
.ouv-seta { display: inline-block; font-size: 20px; color: var(--texto-3); transition: transform .15s; }
.ouv-linha[aria-expanded="true"] .ouv-seta { transform: rotate(90deg); color: var(--primaria); }
.ouv-titulo { max-width: 420px; }
.ouv-detalhe td { background: var(--superficie-2); padding: 14px 16px !important; }
.ouv-conversa { display: flex; flex-direction: column; gap: 10px; max-width: 820px; }
.ouv-msg { padding: 10px 14px; border-radius: 12px; border: 1px solid var(--borda); background: var(--superficie); }
.ouv-msg small { display: block; font-size: 12px; color: var(--texto-3); margin-bottom: 3px; }
.ouv-msg p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; white-space: normal; }
.ouv-msg.empresa { margin-left: 28px; border-color: color-mix(in srgb, var(--primaria) 35%, var(--borda)); background: color-mix(in srgb, var(--primaria) 5%, var(--superficie)); }
.ouv-aviso { margin: 0 0 0 28px; padding: 9px 12px; border-radius: 10px; font-size: 13px; background: var(--vermelho-claro); color: var(--texto); }
.ouv-avaliacao { margin: 0; font-size: 13px; color: var(--texto-2); }
.ouv-procon-det { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 10px 24px; max-width: 980px; }
.ouv-procon-det p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; white-space: normal; }
.ouv-procon-det .nota { grid-column: 1 / -1; }
.ouv-historico { margin: 0; padding: 0 0 0 16px; border-left: 2px solid var(--borda); list-style: none; display: grid; gap: 8px; font-size: 13px; white-space: normal; }
.ouv-historico li { position: relative; }
.ouv-historico li::before { content: ''; position: absolute; left: -22px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--primaria); }
.ouv-historico b { margin-right: 8px; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .ouv-procon-det { grid-template-columns: minmax(0, 1fr); } .ouv-msg.empresa, .ouv-aviso { margin-left: 12px; } }
.ouv-config { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ouv-config-item { padding: 14px 16px; border: 1px solid var(--borda); border-radius: 12px; background: var(--superficie-2); }
.ouv-config-item h3 { margin: 0 0 8px; font-size: 14.5px; }
.ouv-config-item ol { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13.5px; color: var(--texto-2); }
@media (max-width: 900px) { .ouv-config { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1101px) { .abas-config { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* ===== Ouvidoria: Reclame Aqui (layout do modelo) ===== */
.ouv-tela { --ra-verde: #1f8f3a; --ra-verde-2: #4cbf3c; --ra-verde-claro: #e6f5e6; --ra-laranja: #d9890b; --ra-laranja-claro: #fdf2df; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ouv-tela { --ra-verde: #43b85a; --ra-verde-2: #4cbf3c; --ra-verde-claro: rgba(67, 184, 90, .16); --ra-laranja: #eab54a; --ra-laranja-claro: rgba(234, 181, 74, .14); } }
:root[data-theme="dark"] .ouv-tela { --ra-verde: #43b85a; --ra-verde-2: #4cbf3c; --ra-verde-claro: rgba(67, 184, 90, .16); --ra-laranja: #eab54a; --ra-laranja-claro: rgba(234, 181, 74, .14); }
.ra-cabecalho { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; padding-right: 110px; }
.ra-titulo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ra-titulo h1 { margin: 0; font-size: 34px; letter-spacing: -.02em; }
.ra-cabecalho p { margin: 4px 0 0; color: var(--texto-2); font-size: 14px; max-width: 60ch; }
.ra-selo-demo { padding: 4px 12px; border-radius: 99px; background: var(--superficie-2); color: var(--texto-2); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ra-acoes { display: flex; align-items: center; gap: 16px; }
.ra-botao-verde { display: inline-flex; align-items: center; gap: 8px; background: var(--ra-verde); border-color: var(--ra-verde); color: #fff; font-weight: 600; }
.ra-botao-verde:hover { filter: brightness(1.07); }
.ra-botao-verde .icone { width: 17px; height: 17px; }
.ra-marca { font-size: 24px; line-height: 1; color: var(--ra-verde); letter-spacing: -.02em; }
.ra-marca b { font-weight: 800; }
.ra-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.ra-kpi { display: flex; align-items: center; gap: 14px; padding: 16px 18px; position: relative; min-width: 0; container-type: inline-size; }
.ra-kpi > div { display: flex; flex-direction: column; min-width: 0; padding-right: 30px; }
.ra-kpi > div span { font-size: 13px; color: var(--texto-2); }
.ra-kpi > div b { font-size: clamp(18px, 12cqi, 28px); letter-spacing: -.02em; line-height: 1.15; white-space: nowrap; }
.ra-kpi-icone { flex: none; display: grid; place-items: center; width: 44px; height: 44px; color: var(--ra-verde); }
.ra-kpi-icone .icone { width: 34px; height: 34px; stroke-width: 1.7; }
.ra-kpi-icone.laranja { color: var(--ra-laranja); }
.ra-kpi-barrinhas { position: absolute; right: 14px; bottom: 14px; display: flex; align-items: flex-end; gap: 3px; opacity: .55; }
.ra-kpi-barrinhas i { width: 4px; border-radius: 2px; background: var(--ra-verde-2); }
.ra-kpi-barrinhas.laranja i { background: #f0c050; }
.ra-meio { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 16px; margin-bottom: 16px; align-items: start; }
.ra-lado { display: grid; gap: 16px; }
.ra-lista { padding: 18px 18px 14px; }
.ra-lista-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }
.ra-lista-topo h3 { margin: 0; font-size: 18px; }
.ra-reputacao h3, .ra-motivos h3 { margin: 0 0 14px; font-size: 18px; }
.ra-filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.ra-busca { flex: 1 1 180px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--borda); border-radius: 10px; background: var(--superficie); color: var(--texto-3); }
.ra-busca input { flex: 1; min-width: 0; border: 0 !important; box-shadow: none !important; background: transparent !important; padding: 9px 0 !important; }
.ra-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ra-chip { padding: 8px 14px; border-radius: 9px; border: 0; background: var(--superficie-2); color: var(--texto-2); font: inherit; font-size: 13px; cursor: pointer; }
.ra-chip.ativo { background: var(--ra-verde); color: #fff; font-weight: 600; }
.ra-periodo select { padding: 8px 12px; border-radius: 10px; }
.ra-tabela thead th { background: var(--superficie-2); font-size: 12.5px; text-transform: none; letter-spacing: 0; color: var(--texto-2); font-weight: 600; }
.ra-tabela td { vertical-align: middle; }
.ra-lista .rolagem { max-height: none; }
.ra-cliente { display: flex; align-items: center; gap: 12px; }
.ra-cliente b { display: block; font-size: 14px; }
.ra-cliente small { display: block; font-size: 12.5px; color: var(--texto-2); }
.ra-avatar { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; font-weight: 700; font-size: 16px; }
.ra-pilula { display: inline-block; padding: 4px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.ra-pilula.alta { background: var(--vermelho-claro); color: var(--ruim); }
.ra-pilula.media { background: var(--ra-laranja-claro); color: var(--ra-laranja); }
.ra-pilula.baixa { background: var(--ra-verde-claro); color: var(--ra-verde); }
.ra-pilula.resolvida { background: color-mix(in srgb, var(--ra-verde) 22%, transparent); color: var(--ra-verde); }
.ra-pilula.neutra { background: var(--superficie-2); color: var(--texto-2); }
.ra-rodape { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 12px; font-size: 13px; color: var(--texto-2); }
.ra-paginas { display: flex; gap: 6px; align-items: center; }
.ra-pag { min-width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--borda); background: var(--superficie); color: var(--texto); font: inherit; font-size: 13px; cursor: pointer; }
.ra-pag[aria-current="page"] { background: var(--ra-verde-claro); border-color: transparent; color: var(--ra-verde); font-weight: 700; }
.ra-pag:disabled { opacity: .45; cursor: default; }
.ra-reputacao { padding: 18px 20px; }
.ra-reputacao h3 { display: flex; justify-content: space-between; align-items: center; }
.ra-ajuda { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--superficie-2); color: var(--texto-3); font-size: 12px; cursor: help; }
.ra-rep-topo { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; }
.ra-carinha { width: 120px; height: 120px; flex: none; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .12)); }
.ra-rep-topo > div { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ra-nota b { font-size: 48px; letter-spacing: -.03em; line-height: 1; color: var(--ra-verde); }
.ra-nota span { font-size: 20px; color: var(--texto-2); }
.ra-classe { padding: 5px 22px; border-radius: 99px; background: var(--texto-3); color: #fff; font-weight: 700; font-size: 16px; }
.ra-classe.otimo, .ra-classe.bom { background: var(--ra-verde); }
.ra-classe.regular { background: #d9a400; } .ra-classe.ruim { background: var(--ruim); }
.ra-rep-topo small { font-size: 12.5px; color: var(--texto-3); }
.ra-rep-barra { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; margin-top: 10px; }
.ra-rep-barra span { grid-column: 1 / -1; font-size: 13.5px; }
.ra-rep-barra > div { height: 9px; border-radius: 99px; background: var(--superficie-2); overflow: hidden; }
.ra-rep-barra i { display: block; height: 100%; border-radius: 99px; background: var(--ra-verde-2); }
.ra-rep-barra b { font-size: 14px; font-variant-numeric: tabular-nums; }
.ra-prazos { display: flex; align-items: center; gap: 16px; padding: 16px 18px; background: var(--ra-laranja-claro); border-color: color-mix(in srgb, var(--ra-laranja) 30%, var(--borda)); }
.ra-prazos.tranquilo { background: var(--ra-verde-claro); border-color: color-mix(in srgb, var(--ra-verde) 30%, var(--borda)); }
.ra-prazos-icone { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: color-mix(in srgb, var(--ra-laranja) 18%, transparent); color: var(--ra-laranja); }
.ra-prazos.tranquilo .ra-prazos-icone { background: color-mix(in srgb, var(--ra-verde) 18%, transparent); color: var(--ra-verde); }
.ra-prazos-icone .icone { width: 30px; height: 30px; }
.ra-prazos > div { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; flex: 1; min-width: 0; }
.ra-prazos .ra-link { padding: 0; margin-top: 6px; }
.ra-prazos small { font-size: 13px; font-weight: 600; color: var(--texto-2); }
.ra-prazos b { font-size: 21px; }
.ra-prazos span { font-size: 12.5px; color: var(--texto-2); }
.ra-link { border: 0; background: none; color: var(--ra-verde); font: inherit; font-weight: 700; font-size: 13.5px; text-decoration: underline; cursor: pointer; white-space: nowrap; }
.ra-motivos { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 3fr); gap: 10px 24px; padding: 18px 20px; }
.ra-motivos-lista { display: grid; gap: 8px; }
.ra-motivo { display: grid; grid-template-columns: 150px minmax(0, 1fr) 40px; align-items: center; gap: 14px; font-size: 13.5px; }
.ra-motivo > div { height: 12px; border-radius: 99px; background: var(--superficie-2); overflow: hidden; }
.ra-motivo i { display: block; height: 100%; border-radius: 99px; background: var(--ra-verde-2); }
.ra-motivo b { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 1400px) { .ra-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .ra-meio { grid-template-columns: minmax(0, 1fr); } .ra-lado { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .ra-cabecalho { padding-right: 0; }
  .ra-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ra-kpi { padding: 12px; gap: 10px; } .ra-kpi > div b { font-size: 22px; } .ra-kpi-icone { width: 32px; height: 32px; } .ra-kpi-icone .icone { width: 26px; height: 26px; }
  .ra-kpi-barrinhas { display: none; }
  .ra-titulo h1 { font-size: 28px; } .ra-marca { display: none; }
  .ra-lado { grid-template-columns: minmax(0, 1fr); }
  .ra-motivos { grid-template-columns: minmax(0, 1fr); } .ra-motivo { grid-template-columns: 110px minmax(0, 1fr) 32px; }
  .ra-carinha { width: 92px; height: 92px; } .ra-nota b { font-size: 40px; }
  .ra-kpi > div { padding-right: 0; }
  /* Lista vira cartões: cliente em cima; data, prioridade e status embaixo */
  .ra-tabela thead { display: none; }
  .ra-tabela, .ra-tabela tbody { display: block; }
  .ra-tabela tr.ouv-linha { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 12px 2px; border-bottom: 1px solid var(--borda); }
  .ra-tabela tr.ouv-linha td { padding: 0; border: 0; background: none; font-size: 12.5px; }
  .ra-tabela tr.ouv-linha td:first-child { grid-column: 1 / 4; grid-row: 1; }
  .ra-tabela tr.ouv-linha td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; color: var(--texto-2); padding-left: 50px; }
  .ra-tabela tr.ouv-linha td:nth-child(3), .ra-tabela tr.ouv-linha td:nth-child(4) { grid-row: 3; }
  .ra-tabela tr.ouv-linha td:nth-child(3) { padding-left: 50px; }
  .ra-tabela tr.ouv-linha td:last-child { grid-column: 4; grid-row: 1; }
  .ra-tabela tr.ouv-detalhe { display: block; } .ra-tabela tr.ouv-detalhe[hidden] { display: none; }
  .ra-tabela tr.ouv-detalhe td { display: block; }
  .ra-lista .rolagem { overflow: visible; }
}

/* Financeiro: fluxo de caixa por período ou dia a dia */
.fluxo-caixa .cartao-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.seg-fluxo { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--superficie-2); border: 1px solid var(--borda); flex: none; }
.seg-fluxo button { border: 0; background: none; padding: 6px 14px; border-radius: 8px; font: inherit; font-size: 13px; color: var(--texto-2); cursor: pointer; }
.seg-fluxo button.ativo { background: var(--superficie); color: var(--texto); font-weight: 600; box-shadow: var(--sombra); }

/* Aparência (dia / noite) */
.botao-tema { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-bottom: 8px; padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05); color: #d5e2f3; font: inherit; font-size: 13.5px; cursor: pointer; }
.botao-tema:hover { background: rgba(255, 255, 255, .1); }
.botao-tema .icone { width: 16px; height: 16px; }
.temas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tema-opcao { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px; border: 1px solid var(--borda); border-radius: 14px; background: var(--superficie); color: var(--texto); font: inherit; text-align: left; cursor: pointer; }
.tema-opcao:hover { border-color: color-mix(in srgb, var(--primaria) 45%, var(--borda)); }
.tema-opcao.ativo { border-color: var(--primaria); box-shadow: 0 0 0 1px var(--primaria) inset; }
.tema-amostra { position: relative; display: block; width: 100%; height: 64px; border-radius: 9px; overflow: hidden; border: 1px solid rgba(0, 0, 0, .08); }
.tema-amostra i { position: absolute; display: block; border-radius: 4px; }
.tema-amostra i:nth-child(1) { left: 0; top: 0; bottom: 0; width: 26%; border-radius: 0; }
.tema-amostra i:nth-child(2) { left: 34%; top: 12px; right: 10px; height: 14px; }
.tema-amostra i:nth-child(3) { left: 34%; top: 34px; width: 38%; height: 18px; }
.tema-claro .tema-amostra { background: #f3f6fa; } .tema-claro .tema-amostra i:nth-child(1) { background: #0f1b2d; } .tema-claro .tema-amostra i:nth-child(n+2) { background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.tema-escuro .tema-amostra { background: #0b1018; } .tema-escuro .tema-amostra i:nth-child(1) { background: #0a111b; border-right: 1px solid #253041; } .tema-escuro .tema-amostra i:nth-child(n+2) { background: #19212d; }
.tema-auto .tema-amostra { background: linear-gradient(90deg, #f3f6fa 50%, #0b1018 50%); } .tema-auto .tema-amostra i:nth-child(1) { left: 30%; width: 40%; top: 18px; bottom: auto; height: 28px; border-radius: 99px; background: linear-gradient(90deg, #0b1018 50%, #f3f6fa 50%); } .tema-auto .tema-amostra i:nth-child(n+2) { display: none; }
.tema-nome { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; }
.tema-nome .icone { width: 16px; height: 16px; }
.tema-opcao small { font-size: 12px; color: var(--texto-2); }
@media (max-width: 640px) { .temas { grid-template-columns: minmax(0, 1fr); } .tema-opcao { flex-direction: row; align-items: center; flex-wrap: wrap; } .tema-amostra { width: 84px; height: 48px; } }

/* Usuário master */
.selo-master { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 99px; font-size: 11px; font-weight: 700; letter-spacing: .03em; background: color-mix(in srgb, #b8860b 18%, transparent); color: #9a6b00; vertical-align: 1px; }
:root[data-theme="dark"] .selo-master { color: #e8b84a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .selo-master { color: #e8b84a; } }
.chamada.so-master { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; }
.chamada.so-master .icone { width: 16px; height: 16px; flex: none; }

/* Cobrança > Negativados */
.neg-custo { margin: -4px 0 16px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.neg-mes tbody tr { cursor: pointer; }
.neg-mes tbody tr:hover td { background: var(--superficie-2); }
.neg-tabela td small.positivo, .neg-tabela td small.negativo { font-weight: 500; }
.prev-tabela .ouv-chips { margin-bottom: 10px; }
.neg-mes .rolagem { max-height: none; }

/* Comercial > Pontualidade */
.pont-tag { display: inline-block; padding: 2px 9px; border-radius: 7px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.pont-tag.em-dia { background: var(--verde-claro); color: var(--verde); }
.pont-tag.atraso { background: var(--amarelo-claro); color: #b07400; }
.pont-tag.grave { background: var(--vermelho-claro); color: var(--ruim); }
.pont-tag.neutra { background: var(--superficie-2); color: var(--texto-2); }
:root[data-theme="dark"] .pont-tag.atraso { color: #eab54a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pont-tag.atraso { color: #eab54a; } }
.pont-tabela td { vertical-align: middle; }
.pont-tabela th:nth-child(n+3):nth-child(-n+5), .pont-tabela td:nth-child(n+3):nth-child(-n+5), .pont-tabela th:nth-child(7), .pont-tabela td:nth-child(7) { text-align: center; }
@media (max-width: 640px) {
  /* Pontualidade e Negativados no celular: cartões com rótulo em cada informação */
  .prev-tabela .pont-tabela tr, .prev-tabela .neg-tabela tr, .prev-tabela .com-clientes tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; align-items: start; }
  .prev-tabela .pont-tabela tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .prev-tabela .pont-tabela td, .prev-tabela .neg-tabela td, .prev-tabela .com-clientes td { order: 0 !important; margin: 0 !important; text-align: left !important; }
  .prev-tabela .pont-tabela td:first-child, .prev-tabela .pont-tabela td:nth-child(2), .prev-tabela .neg-tabela td:first-child, .prev-tabela .com-clientes td:first-child { grid-column: 1 / -1; }
  .prev-tabela .pont-tabela td:nth-child(6) { grid-column: span 2; }
  .pont-tabela td:nth-child(n+2)::before, .neg-tabela td:nth-child(n+2)::before { display: block; font-size: 11px; color: var(--texto-3); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }
  .pont-tabela td:nth-child(2)::before { content: 'Instalação'; }
  .pont-tabela td:nth-child(3)::before { content: '1ª fatura'; }
  .pont-tabela td:nth-child(4)::before { content: '2ª fatura'; }
  .pont-tabela td:nth-child(5)::before { content: '3ª fatura'; }
  .pont-tabela td:nth-child(6)::before { content: 'Atraso médio'; }
  .pont-tabela td:nth-child(7)::before { content: 'Bloqueou'; }
  .neg-tabela td:nth-child(2)::before { content: 'Situação'; }
  .neg-tabela td:nth-child(3)::before { content: 'Negativado desde'; }
  .neg-tabela td:nth-child(4)::before { content: 'Custo'; }
  .neg-tabela td:nth-child(5)::before { content: 'Em aberto'; }
  .neg-tabela td:nth-child(6)::before { content: 'Último boleto pago'; }
  .neg-tabela td:nth-child(7)::before { content: 'Retorno'; }
  .pont-tabela td[colspan]::before, .neg-tabela td[colspan]::before { content: none; }
}

/* Login: segunda etapa (código do aplicativo autenticador) */
.entrada-texto2 { margin: 0; font-size: 13.5px; color: var(--texto-2); line-height: 1.45; }
.entrada-qr { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.entrada-qr img { width: 180px; height: 180px; border-radius: 10px; background: #fff; padding: 6px; border: 1px solid var(--borda); }
.entrada-qr small { font-size: 12px; color: var(--texto-2); text-align: center; word-break: break-word; }
.entrada-qr small b { font-family: ui-monospace, Consolas, monospace; letter-spacing: .04em; color: var(--texto); }
.entrada-voltar { align-self: center; }
#codigo2fa { letter-spacing: .3em; font-variant-numeric: tabular-nums; }

/* Verificação em duas etapas */
.selo-2fa { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 99px; font-size: 10.5px; font-weight: 700; background: color-mix(in srgb, var(--bom) 15%, transparent); color: var(--bom); vertical-align: 1px; }
.duas-etapas-status { margin: 0 0 10px; }
.duas-etapas-cadastro { display: flex; flex-wrap: wrap; gap: 16px 22px; align-items: flex-start; margin-top: 12px; }
.duas-etapas-cadastro img { width: 180px; height: 180px; border-radius: 10px; background: #fff; padding: 6px; border: 1px solid var(--borda); }
.duas-etapas-cadastro ol { margin: 0 0 8px; padding-left: 18px; display: grid; gap: 4px; font-size: 13.5px; color: var(--texto-2); }
.duas-etapas-cadastro > div { flex: 1; min-width: 220px; }
.linha-acao { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#codigo2fa::placeholder { letter-spacing: normal; }

/* Configurações > Atualização */
.atu-grupo { max-width: 420px; margin-bottom: 14px; }
.atu-lista { display: grid; gap: 12px; }
.atu-item { border: 1px solid var(--borda); border-radius: 12px; padding: 14px 16px; background: var(--superficie-2); }
.atu-topo { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.atu-topo b { display: block; font-size: 15px; }
.atu-topo small { color: var(--texto-2); }
.atu-itens { margin: 10px 0 6px; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; }
.atu-tag { font-style: normal; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 8px; margin-right: 6px; text-transform: uppercase; letter-spacing: .3px; }
.atu-tag.novo { color: #0f9f6e; background: rgba(15,159,110,.12); }
.atu-tag.melhoria { color: #1f6fc7; background: rgba(31,111,199,.12); }
.atu-tag.correcao { color: #b4690e; background: rgba(217,138,0,.15); }
.atu-item .acoes { flex-wrap: wrap; }
.atu-item .acoes .botao svg { width: 15px; height: 15px; }
.painel-form textarea#atu_texto { width: 100%; padding: 10px 11px; border: 1px solid var(--borda); border-radius: 8px; background: var(--superficie); color: var(--texto); font: inherit; font-size: 14px; line-height: 1.5; resize: vertical; }
.painel-form textarea#atu_texto:focus { outline: 2px solid var(--foco); outline-offset: -1px; border-color: transparent; }
.menu-itens .submenu a .sub-demo { margin-left: auto; font-size: 10px; text-transform: uppercase; letter-spacing: .4px; opacity: .6; }

/* Configurações > Backup */
.bkp-sub { margin: 22px 0 10px; font-size: 15px; }
.bkp-tabela td.acoes-linha .acoes { justify-content: flex-end; flex-wrap: nowrap; }
.bkp-tabela .botao svg { width: 15px; height: 15px; }
.prev-reativado { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 8px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: #8a3ffc; background: rgba(138,63,252,.12); vertical-align: 1px; cursor: help; }

/* Comercial > Mudança de Plano */
.cob-linha.dois { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .cob-linha.dois { grid-template-columns: minmax(0, 1fr); } }
.plano-grade { align-items: start; }
.plano-destaque .tabela { margin-top: 4px; }
.plano-barras { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 9px; }
.plano-barras li { display: grid; grid-template-columns: minmax(90px, 34%) minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; font-size: 13.5px; }
.plano-barras .nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plano-barras .barra { height: 10px; border-radius: 5px; background: var(--grade); overflow: hidden; }
.plano-barras .barra i { display: block; height: 100%; border-radius: 5px; }
.plano-barras b { font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right; }
.plano-barras small { grid-column: 2 / -1; color: var(--texto-3); font-size: 12px; margin-top: -4px; }
.plano-depois { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 10px 0 12px; }
.plano-depois > div { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 10px; background: var(--superficie-2); border: 1px solid var(--borda); }
.plano-depois b { font-size: 22px; font-variant-numeric: tabular-nums; }
.plano-depois span { font-size: 13px; color: var(--texto-2); }
.plano-depois small { font-size: 12px; color: var(--texto-3); }
.plano-destaque .chamada { margin: 4px 0 0; font-size: 13.5px; }
.plano-tag { display: inline-block; margin-top: 3px; padding: 1px 7px; border-radius: 8px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }
.plano-tag.sobe { color: var(--bom); background: color-mix(in srgb, var(--bom) 12%, transparent); }
.plano-tag.desce { color: var(--ruim); background: color-mix(in srgb, var(--ruim) 12%, transparent); }
.plano-tag.neutra { color: var(--texto-2); background: var(--grade); }
@media (max-width: 600px) { .plano-depois { grid-template-columns: minmax(0, 1fr); } }
.plano-tabela .bom-texto, .plano-depois .bom-texto { color: var(--verde); }
@media (max-width: 640px) {
  .prev-tabela .plano-tabela thead { display: none; }
  .prev-tabela .plano-tabela tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--borda); }
  .prev-tabela .plano-tabela td { display: block; border: 0; padding: 0; order: 0 !important; margin: 0 !important; background: none !important; text-align: left !important; }
  .prev-tabela .plano-tabela td:first-child { grid-column: 1 / -1; }
  .plano-tabela td:nth-child(n+2)::before { content: attr(data-rot); display: block; font-size: 11px; color: var(--texto-3); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }
}

/* Comercial > Disponibilidade */
.disp-lista ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.disp-lista li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 10px; background: var(--superficie-2); border: 1px solid var(--borda); }
.disp-lista li > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.disp-lista li small { color: var(--texto-2); font-size: 12.5px; }
.disp-num { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.disp-num b { font-size: 20px; font-variant-numeric: tabular-nums; }
.disp-num small { font-size: 11px; color: var(--texto-3); }
.disp-num.explorar b { color: var(--verde); }
.disp-num.ociosa b { color: #1baf7a; }
.disp-num.expandir b { color: var(--ruim); }
.disp-ocup { display: flex; align-items: center; gap: 8px; min-width: 110px; }
.disp-ocup span { font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--texto-2); min-width: 42px; }
.disp-barra { flex: 1; height: 8px; border-radius: 4px; background: var(--grade); overflow: hidden; min-width: 50px; }
.disp-barra i { display: block; height: 100%; border-radius: 4px; background: var(--s1); }
.disp-barra i.cheia { background: var(--ruim); }
.disp-barra i.folga { background: #1baf7a; }
.disp-classe { display: inline-block; padding: 2px 9px; border-radius: 9px; font-size: 12px; font-weight: 650; white-space: nowrap; cursor: help; }
.disp-explorar { color: var(--verde); background: color-mix(in srgb, var(--verde) 13%, transparent); }
.disp-expandir { color: var(--ruim); background: color-mix(in srgb, var(--ruim) 12%, transparent); }
.disp-ociosa { color: #128a60; background: rgba(27,175,122,.13); }
.disp-atencao { color: #b4690e; background: rgba(217,138,0,.15); }
.disp-equilibrado { color: var(--texto-2); background: var(--grade); }
.cob-prioridade.disp-tag-ociosa { color: #128a60; background: rgba(27,175,122,.13); }
.disp-mapa-caixa { border: 1px solid var(--borda); border-radius: 12px; background: var(--superficie-2); overflow: hidden; }
.disp-mapa { display: block; width: 100%; height: auto; }
.disp-mapa a circle { cursor: pointer; transition: r .12s; }
.disp-mapa a:hover circle { r: 9; fill-opacity: 1; }
@media (max-width: 640px) {
  .prev-tabela .disp-tabela thead { display: none; }
  .prev-tabela .disp-tabela tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--borda); }
  .prev-tabela .disp-tabela td { display: block; border: 0; padding: 0; order: 0 !important; margin: 0 !important; background: none !important; text-align: left !important; }
  .prev-tabela .disp-tabela td:first-child { grid-column: 1 / -1; }
  .disp-tabela td:nth-child(n+2)::before { content: attr(data-rot); display: block; font-size: 11px; color: var(--texto-3); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }
}

/* Servidor fora (atualização ou reinício): aviso e nova tentativa automática */
.reconectando-inicio { max-width: 460px; margin: 18vh auto 0; padding: 22px 24px; border-radius: 14px; background: var(--superficie); border: 1px solid var(--borda); text-align: center; display: grid; gap: 8px; }
.reconectando-inicio b { font-size: 16px; }
.reconectando-inicio span { color: var(--texto-2); font-size: 14px; }
.faixa-reconectando { position: fixed; left: 50%; top: 12px; transform: translateX(-50%); z-index: 9999; display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 99px; background: #7a4b00; color: #fff; font-size: 13.5px; box-shadow: 0 6px 20px rgba(0,0,0,.25); max-width: calc(100vw - 32px); }
.faixa-reconectando .ponto { width: 8px; height: 8px; border-radius: 50%; background: #ffd166; animation: piscar 1s infinite; flex: none; }
@keyframes piscar { 50% { opacity: .25; } }
.disp-lendo { margin: -4px 0 12px; }

/* Comercial > CRM */
.crm-topo-cartao { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.crm-projecao { display: flex; flex-direction: column; align-items: flex-end; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--s1) 8%, var(--superficie)); border: 1px solid color-mix(in srgb, var(--s1) 20%, transparent); line-height: 1.15; }
.crm-projecao b { font-size: 22px; color: var(--s1); font-variant-numeric: tabular-nums; }
.crm-projecao small { font-size: 11.5px; color: var(--texto-2); }
.crm-rankings { align-items: stretch; }
.crm-ranking { display: flex; flex-direction: column; }
.crm-ranking-topo { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.crm-ranking-topo h3 { margin: 0; font-size: 15px; }
.crm-ranking-icone { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; flex: none; }
.crm-ranking-icone svg { width: 18px; height: 18px; }
.crm-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.crm-lista li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: center; }
.crm-lista .pos { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--grade); color: var(--texto-2); font-size: 12px; font-weight: 700; }
.crm-lista .podio.p1 .pos { background: #f5c542; color: #5a4300; }
.crm-lista .podio.p2 .pos { background: #cfd6e0; color: #3b4656; }
.crm-lista .podio.p3 .pos { background: #e6a776; color: #5a2e0e; }
.crm-lista .info { min-width: 0; display: grid; gap: 4px; }
.crm-lista .linha1 { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; }
.crm-lista .linha1 b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-lista .podio.p1 .linha1 b { font-weight: 750; }
.crm-lista .linha1 span { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.crm-lista .linha1 small { font-weight: 400; color: var(--texto-3); }
.crm-lista .barra { height: 7px; border-radius: 4px; background: var(--grade); overflow: hidden; }
.crm-lista .barra i { display: block; height: 100%; border-radius: 4px; }
.crm-lista .cancel { font-size: 11.5px; color: var(--texto-3); }
.crm-sem { margin-top: auto; padding-top: 10px; }
@media (max-width: 1100px) { .cob-linha.tres.crm-rankings { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .prev-tabela .tabela-cartoes thead { display: none; }
  .prev-tabela .tabela-cartoes tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--borda); }
  .prev-tabela .tabela-cartoes td { display: block; border: 0; padding: 0; order: 0 !important; margin: 0 !important; background: none !important; text-align: left !important; }
  .prev-tabela .tabela-cartoes td:nth-child(2) { grid-column: 1 / -1; order: -1 !important; }
  .tabela-cartoes td:not(:nth-child(2))::before { content: attr(data-rot); display: block; font-size: 11px; color: var(--texto-3); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }
  .crm-topo-cartao { flex-direction: column; }
  .crm-projecao { align-items: flex-start; }
}
.plano-grade { align-items: stretch !important; }
.plano-grade > .cartao { margin: 0; }
.plano-destaques .cob-linha.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.plano-destaques .cob-linha.tres > :last-child { grid-column: auto; }
@media (max-width: 1100px) { .plano-destaques .cob-linha.tres { grid-template-columns: minmax(0, 1fr); } }
.plano-destaque .plano-depois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.plano-destaque .plano-depois b { font-size: 19px; }
.plano-grade .plano-depois { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.plano-grade .plano-depois > div { display: grid; grid-template-columns: 74px minmax(0, 1fr); column-gap: 10px; align-items: center; padding: 9px 12px; }
.plano-grade .plano-depois b { grid-row: 1 / span 2; font-size: 20px; }
.plano-grade .plano-barras li { grid-template-columns: minmax(110px, 44%) minmax(0, 1fr) auto; }

/* Comercial no celular: filtros inteiros, valores que cabem, chips numa linha e cartões compactos */
@media (max-width: 640px) {
  .tela-comercial .cob-filtros > label.cob-filtro, .tela-comercial .cob-filtros > .seletor-filiais { flex: 1 1 100%; }
  .tela-comercial .cob-filtros > .botao { flex: 1 1 calc(50% - 4px); justify-content: center; }
  .tela-comercial .cob-kpi-valor { font-size: clamp(15px, 4.6vw, 19px); overflow-wrap: anywhere; }
  .tela-comercial .cob-kpi-sub { font-size: 12px; }
  .tela-comercial .cob-kpi { min-width: 0; }
  .tela-comercial .ouv-chips { flex-wrap: nowrap; overflow-x: auto; margin-left: -4px; margin-right: -4px; padding: 0 4px 4px; scrollbar-width: none; }
  .tela-comercial .ouv-chips::-webkit-scrollbar { display: none; }
  .tela-comercial .ouv-chip { flex: none; }
  .tela-comercial .cob-acoes-topo { width: 100%; }
  .tela-comercial .cob-acoes-topo > * { flex: 1 1 100%; }
  /* Cartões das listas: 3 colunas, rótulos pequenos */
  .tela-comercial .prev-tabela .plano-tabela tr, .tela-comercial .prev-tabela .disp-tabela tr, .tela-comercial .prev-tabela .tabela-cartoes tr { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; font-size: 13px; }
  .tela-comercial td[data-rot]::before { font-size: 10px !important; margin-bottom: 1px !important; }
  .tela-comercial td[data-rot="Plano e mensalidade"], .tela-comercial td[data-rot="Ocupação"], .tela-comercial td[data-rot="Situação hoje"], .tela-comercial td[data-rot="Classificação"] { grid-column: span 2; }
  .tela-comercial td[data-rot="Cancelamento (12 meses)"] { grid-column: span 1; }
  .tela-comercial .disp-ocup { min-width: 0; }
  .tela-comercial .disp-barra { min-width: 30px; }
  .tela-comercial .crm-lista .linha1 { font-size: 13px; }
  .tela-comercial .disp-lista li { padding: 9px 10px; }
  .tela-comercial .disp-num b { font-size: 18px; }
  .tela-comercial .plano-grade .plano-barras li { grid-template-columns: minmax(96px, 40%) minmax(0, 1fr) auto; }
}
@media (max-width: 640px) {
  .tela-comercial .plano-destaque .tabela { table-layout: fixed; width: 100%; }
  .tela-comercial .plano-destaque .tabela th, .tela-comercial .plano-destaque .tabela td { padding: 7px 4px; font-size: 12px; white-space: normal; overflow-wrap: anywhere; }
  .tela-comercial .plano-destaque .tabela th { font-size: 10px; }
}
@media (max-width: 640px) {
  .tela-comercial .cob-kpi-valor { font-size: clamp(14px, 4.3vw, 18px); }
  /* Mudança de Plano: Quando · Diferença · Tempo de casa / Plano (2) · Situação */
  .tela-comercial .prev-tabela .plano-tabela td[data-rot="Plano e mensalidade"] { order: 2 !important; grid-column: span 2; }
  .tela-comercial .prev-tabela .plano-tabela td[data-rot="Situação hoje"] { order: 3 !important; grid-column: span 1; }
  /* Disponibilidade (bairros): CTOs · Portas · Livres / Ocupação (2) · Vendas / Lota em · Cancelamento · Classificação */
  .tela-comercial .prev-tabela .disp-tabela td[data-rot="Classificação"] { grid-column: span 1; }
  /* Disponibilidade (caixas): Bairro · Projeto · Portas / Ocupadas · Livres · Situação / Ocupação (2) · Mapa */
  .tela-comercial .prev-tabela .disp-ctos td[data-rot="Ocupação"] { order: 2 !important; }
  .tela-comercial .prev-tabela .disp-ctos td[data-rot="Mapa"] { order: 3 !important; }
}
@media (max-width: 640px) {
  .tela-comercial td[data-rot]::before { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tela-comercial .disp-tabela td[data-rot="Cancelamento (12 meses)"]::before { content: 'Cancelam. 12m'; }
  .tela-comercial .disp-tabela td[data-rot="Vendas (90 dias)"]::before { content: 'Vendas 90d'; }
}

/* Configurações > Licença */
.licenca-cartao { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 14px; margin: 6px 0 14px;
  background: linear-gradient(135deg, #0b1f1d 0%, #10302b 60%, #1a4a3c 100%); color: #fff; }
.licenca-cartao.vencendo { background: linear-gradient(135deg, #3a2a00 0%, #6b4a00 100%); }
.licenca-cartao.vencida { background: linear-gradient(135deg, #3d0d0d 0%, #7a1d1d 100%); }
.licenca-vence { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.licenca-vence small { color: #a9c9c2; font-size: 13px; }
.licenca-vence b { font-size: 26px; letter-spacing: -.02em; line-height: 1.15; }
.licenca-vence .situacao { color: #fff; }
.licenca-restam { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.licenca-restam b { font-size: 34px; color: #2ee59d; font-variant-numeric: tabular-nums; line-height: 1; }
.licenca-cartao.vencendo .licenca-restam b { color: #ffd166; }
.licenca-cartao.vencida .licenca-restam b { color: #ff9b9b; }
.licenca-restam small { color: #cde6df; font-size: 12.5px; margin-top: 4px; }
.licenca-barra { height: 8px; border-radius: 4px; background: var(--grade); overflow: hidden; margin-bottom: 14px; }
.licenca-barra i { display: block; height: 100%; background: #2ee59d; border-radius: 4px; }
.licenca-dados { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 12px; }
.licenca-dados div { padding: 10px 12px; border-radius: 10px; background: var(--superficie-2); border: 1px solid var(--borda); }
.licenca-dados dt { font-size: 12px; color: var(--texto-3); }
.licenca-dados dd { margin: 2px 0 0; font-weight: 600; }
@media (max-width: 640px) {
  .licenca-cartao { flex-direction: column; align-items: flex-start; }
  .licenca-restam { align-items: flex-start; text-align: left; }
  .licenca-vence b { font-size: 22px; }
  .licenca-dados { grid-template-columns: minmax(0, 1fr); }
}
.menu-versao { display: block; text-align: center; font-size: 11px; color: var(--menu-texto); opacity: .7; margin-top: 8px; font-variant-numeric: tabular-nums; }
.licenca-dados { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 640px) { .licenca-dados { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Rankings do CRM: nome longo (ex.: plano "Filial 04 - 500 MEGA CONNECT + PLAY") cortado com "…", número sempre à vista */
.crm-lista .linha1 b { flex: 1 1 auto; min-width: 0; }
.crm-lista .linha1 span { flex: none; }
.crm-rodape-ranking { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; padding-top: 12px; }
/* Rodapé das listas: "Exibindo X de Y" e "Por página: 7 20 50" */
.rodape-esq { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.por-pagina { display: flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--texto-2); }
.por-pagina span { margin-right: 2px; }
.por-pagina .prev-pag.ativo { background: var(--primaria); color: var(--primaria-texto); border-color: transparent; }
/* Nome longo no ranking: a coluna encolhe e o nome ganha "…" */
.crm-lista .info { grid-template-columns: minmax(0, 1fr); }
.crm-lista .info > * { min-width: 0; }
/* Tabelas dentro dos cartões de destaque: sempre na largura do cartão */
.plano-destaque .tabela { table-layout: fixed; width: 100%; }
.plano-destaque .tabela th, .plano-destaque .tabela td { padding-left: 6px; padding-right: 6px; white-space: normal; overflow-wrap: anywhere; }
.plano-destaque .tabela th { font-size: 10.5px; }

/* Disponibilidade: cartões dos projetos lado a lado, do mesmo tamanho; as duas listas com a mesma altura */
.disp-proj { margin-bottom: 16px; }
.disp-proj-cab, .disp-proj-linha { display: grid; grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, .8fr)) minmax(0, 1.6fr); gap: 12px; align-items: center; }
.disp-proj-cab { padding: 10px 12px 6px; font-size: 11.5px; color: var(--texto-3); text-transform: uppercase; letter-spacing: .04em; }
.disp-proj-cab span:not(:first-child) { text-align: right; }
.disp-proj-cab span:last-child { text-align: left; }
.disp-proj-lista { display: flex; flex-direction: column; border-top: 1px solid var(--borda); }
.disp-proj-linha { width: 100%; padding: 11px 12px; background: none; border: 0; border-bottom: 1px solid var(--borda); color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 0; }
.disp-proj-linha:hover { background: var(--superficie-2); }
.disp-proj-linha.ativo { background: color-mix(in srgb, var(--s1) 9%, transparent); box-shadow: inset 3px 0 0 var(--s1); }
.disp-proj-nome { display: flex; flex-direction: column; min-width: 0; }
.disp-proj-nome b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.disp-proj-nome small { display: none; font-size: 12px; color: var(--texto-2); }
.disp-proj-num { text-align: right; font-variant-numeric: tabular-nums; }
.disp-proj-num small { display: none; }
.disp-proj-ocup { display: flex; align-items: center; gap: 10px; min-width: 0; }
.disp-proj-ocup .disp-barra { flex: 1; min-width: 0; }
.disp-proj-ocup b { min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; font-size: 13px; }
@media (max-width: 640px) {
  .disp-proj-cab { display: none; }
  .disp-proj-linha { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 12px 4px; }
  .disp-proj-nome small { display: block; }
  .disp-proj-num { display: none; }
  .disp-proj-ocup { grid-column: 1 / -1; }
  .disp-proj-linha .disp-proj-num:nth-of-type(4) { display: flex; flex-direction: column; align-items: flex-end; grid-column: 2; grid-row: 1; }
  .disp-proj-linha .disp-proj-num:nth-of-type(4) small { display: block; font-size: 12px; color: var(--texto-2); }
}
.tela-comercial .cob-linha.dois { align-items: stretch; }
.tela-comercial .cob-linha.dois > .cartao { margin: 0; }

/* Celular: tabelas largas viram cartões (nome da coluna em cima do valor), sem rolagem para o lado */
@media (max-width: 640px) {
  .rolagem:has(> .tabela-auto) { max-height: none; overflow: visible; }
  .tabela-auto, .tabela-auto tbody { display: block; width: 100%; }
  .tabela-auto thead { display: none; }
  .tabela-auto tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; padding: 12px 2px; border-bottom: 1px solid var(--borda); }
  .tabela-auto tr:last-child { border-bottom: 0; }
  .tabela-auto td { display: block; padding: 0 !important; border: 0 !important; text-align: left !important; white-space: normal !important; min-width: 0; overflow-wrap: anywhere; background: none !important; position: static !important; }
  .tabela-auto td:first-child, .tabela-auto td[colspan] { grid-column: 1 / -1; }
  .tabela-auto td:first-child { font-size: 14.5px; }
  .tabela-auto td[data-rot]:not(:first-child)::before { content: attr(data-rot); display: block; font-size: 10.5px; color: var(--texto-3); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tabela-auto td[data-rot=""]::before { display: none !important; }
  .tabela-auto td .acoes { justify-content: flex-start; flex-wrap: wrap; }
}
@media (max-width: 640px) {
  /* Larguras mínimas pensadas para o computador não valem nos cartões */
  .tabela-auto { min-width: 0 !important; width: 100% !important; }
  .tabela-auto td, .tabela-auto td.motivos, .tabela-auto td.plano, .tabela-auto td.texto:first-child { min-width: 0 !important; white-space: normal !important; }
  .lista-atendimentos, .lista-churn { max-height: none; overflow: visible; }
  /* Listas do Comercial já em cartões: sem rolagem de lado */
  .tela-comercial .prev-tabela .rolagem { overflow: visible; }
}

/* Comercial > Pontualidade: a turma da 1ª à 3ª fatura */
.pont-faturas { align-items: stretch; }
.pont-fatura { margin: 0; display: flex; flex-direction: column; gap: 12px; border-top: 4px solid var(--borda); }
.pont-fatura.bom { border-top-color: var(--verde); }
.pont-fatura.medio { border-top-color: #e0a100; }
.pont-fatura.ruim { border-top-color: var(--ruim); }
.pont-fatura-topo { display: flex; align-items: center; gap: 10px; }
.pont-fatura-topo h3 { margin: 0; font-size: 15px; }
.pont-fatura-n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--superficie-2); border: 1px solid var(--borda); font-weight: 750; font-size: 13px; }
.pont-fatura-grande { display: flex; align-items: baseline; gap: 8px; }
.pont-fatura-grande b { font-size: 32px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pont-fatura.bom .pont-fatura-grande b { color: var(--verde); }
.pont-fatura.medio .pont-fatura-grande b { color: #b07d00; }
.pont-fatura.ruim .pont-fatura-grande b { color: var(--ruim); }
.pont-fatura-grande small { color: var(--texto-2); }
.pont-fatura-barra { height: 8px; border-radius: 4px; background: var(--grade); overflow: hidden; }
.pont-fatura-barra i { display: block; height: 100%; border-radius: 4px; background: currentColor; }
.pont-fatura.bom .pont-fatura-barra i { background: var(--verde); }
.pont-fatura.medio .pont-fatura-barra i { background: #e0a100; }
.pont-fatura.ruim .pont-fatura-barra i { background: var(--ruim); }
.pont-fatura-dados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.pont-fatura-dados > div { padding: 8px 10px; border-radius: 10px; background: var(--superficie-2); border: 1px solid var(--borda); }
.pont-fatura-dados dt { font-size: 11.5px; color: var(--texto-3); }
.pont-fatura-dados dd { margin: 2px 0 0; font-weight: 650; font-variant-numeric: tabular-nums; }
.pont-fatura-vazia { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; padding: 14px; border-radius: 10px; background: var(--superficie-2); border: 1px dashed var(--borda); }
.pont-fatura-vazia small { color: var(--texto-2); }
@media (max-width: 1100px) { .tela-comercial .pont-faturas { grid-template-columns: minmax(0, 1fr); } }
.pont-fatura-aviso { margin: -4px 0 0; font-size: 12px; color: #b07d00; }

/* ===== Configurações > Saúde do sistema ===== */
.saude-topo { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 14px 0 6px; }
.saude-topo .botao { display: inline-flex; align-items: center; gap: 6px; }
.saude-resumo { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--borda); flex: 1 1 320px; min-width: 0; }
.saude-resumo .icone { width: 26px; height: 26px; flex: none; }
.saude-resumo div { display: flex; flex-direction: column; min-width: 0; }
.saude-resumo b { font-size: 16px; }
.saude-resumo small { color: var(--texto-2); }
.saude-resumo.s-ok { background: color-mix(in srgb, #16a34a 9%, transparent); border-color: color-mix(in srgb, #16a34a 35%, transparent); color: #15803d; }
.saude-resumo.s-aviso { background: color-mix(in srgb, #f5b324 12%, transparent); border-color: color-mix(in srgb, #f5b324 45%, transparent); color: #a16207; }
.saude-resumo.s-erro { background: color-mix(in srgb, #d93d3d 9%, transparent); border-color: color-mix(in srgb, #d93d3d 40%, transparent); color: #b91c1c; }
.saude-grupo h3, .saude-sub { margin: 18px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-3); }
.saude-itens { list-style: none; margin: 0; padding: 0; border: 1px solid var(--borda); border-radius: 12px; overflow: hidden; }
.saude-itens li { display: flex; gap: 12px; align-items: flex-start; padding: 11px 14px; }
.saude-itens li + li { border-top: 1px solid var(--borda); }
.saude-itens li div { display: flex; flex-direction: column; min-width: 0; }
.saude-itens li small { color: var(--texto-2); overflow-wrap: anywhere; }
.saude-marca { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #fff; background: #16a34a; margin-top: 1px; }
.saude-itens li.s-aviso .saude-marca { background: #e0a106; }
.saude-itens li.s-erro .saude-marca { background: #d93d3d; }
.saude-erros summary { cursor: pointer; font-weight: 600; }
.saude-erros ul { list-style: none; margin: 8px 0 0; padding: 0; max-height: 320px; overflow: auto; }
.saude-erros li { display: flex; flex-direction: column; padding: 7px 0; border-top: 1px solid var(--borda); }
.saude-erros li small { color: var(--texto-3); }
.saude-erros li span { overflow-wrap: anywhere; }
.saude-wpp { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.saude-wpp select { flex: 1 1 240px; min-width: 0; }

/* ===== Operação Técnica ===== */
.tec-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.tec-cartao-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tec-cartao-topo > div { min-width: 0; }
.tec-cartao-topo .cob-h3 { margin-bottom: 4px; }
.tec-ver { font-size: 13px; font-weight: 600; color: var(--primaria); text-decoration: none; white-space: nowrap; }
.tec-ver:hover { text-decoration: underline; }
.tec-numero { font-size: 26px; font-variant-numeric: tabular-nums; }
.tec-numero.grande { display: block; font-size: 40px; line-height: 1.1; margin: 6px 0 2px; }
.tec-selo { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; background: var(--superficie-2); color: var(--texto-2); }
.tec-selo.bom { background: color-mix(in srgb, #16a34a 14%, transparent); color: #15803d; }
.tec-selo.medio { background: color-mix(in srgb, #f5a524 18%, transparent); color: #a16207; }
.tec-selo.ruim { background: color-mix(in srgb, #d93d3d 14%, transparent); color: #c42b2b; }
.tec-barra { display: block; height: 8px; border-radius: 999px; background: var(--grade); overflow: hidden; min-width: 0; }
.tec-barra i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--s1), #6aa8f0); transition: width .8s cubic-bezier(.2, .8, .2, 1); }
.tec-faixas { list-style: none; margin: 12px 0 6px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tec-faixas li { display: grid; grid-template-columns: minmax(0, 110px) minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 13.5px; }
.tec-faixas li > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto-2); }
.tec-faixas li b { min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; }
.tec-faixas .f1 { background: linear-gradient(90deg, #f5b324, #f7c95a); }
.tec-faixas .f2 { background: linear-gradient(90deg, #f08a24, #f5a95c); }
.tec-faixas .f3 { background: linear-gradient(90deg, #d93d3d, #ec6b6b); }
.tec-faixas .f0 { background: linear-gradient(90deg, #16a34a, #4cc27a); }
.tec-faixas.bairros li { grid-template-columns: minmax(0, 140px) minmax(0, 1fr) auto; }
.tec-faixas.bairros .tec-barra i { background: linear-gradient(90deg, #f08a24, #d93d3d); }
.tec-tipos-corpo { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 8px; }
.tec-tipos-corpo .cob-rosca { width: 150px; height: 150px; flex: none; }
.tec-tipos-lista { list-style: none; margin: 0; padding: 0; flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.tec-tipos-lista li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; font-size: 13.5px; }
.tec-tipos-lista i { width: 10px; height: 10px; border-radius: 3px; }
.tec-tipos-lista span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tec-tipos-lista small { color: var(--texto-3); min-width: 34px; text-align: right; }
.tec-panes-lista { list-style: none; margin: 10px 0 4px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tec-panes-lista.rolar { max-height: 330px; overflow: auto; padding-right: 4px; }
.tec-panes-lista li { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.tec-panes-lista li div { display: flex; flex-direction: column; min-width: 0; }
.tec-panes-lista b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tec-panes-lista small { color: var(--texto-2); }
.tec-pulso { position: relative; flex: none; width: 12px; height: 12px; margin-top: 4px; border-radius: 50%; background: #d93d3d; }
.tec-pulso::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #d93d3d; animation: tec-pulsar 1.8s ease-out infinite; }
@keyframes tec-pulsar { from { transform: scale(1); opacity: .6; } to { transform: scale(2.8); opacity: 0; } }
.tec-panes-lista li + li .tec-pulso { background: #e98080; }
.tec-panes-lista li + li .tec-pulso::after { animation: none; }
.tec-mini-lista { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tec-mini-lista li { display: flex; flex-direction: column; min-width: 0; padding-top: 6px; border-top: 1px solid var(--borda); }
.tec-mini-lista li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 13.5px; }
.tec-mini-lista small { color: var(--texto-2); font-size: 12px; }
.tec-cancel .nota.ruim { color: #c42b2b; }
.tec-cancel .nota.bom { color: #15803d; }
.tec-rank { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tec-rank li { display: grid; grid-template-columns: 22px 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.tec-rank li div { display: flex; flex-direction: column; min-width: 0; }
.tec-rank b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tec-rank small { color: var(--texto-2); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tec-pos { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--superficie-2); font-size: 12px; font-weight: 700; color: var(--texto-2); flex: none; }
.tec-rank li:first-child .tec-pos { background: #f5c242; color: #5c4300; }
.tec-avatar { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; flex: none; font-size: 13px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--s1), #6c5ce7); }
.tec-avatar.grande { width: 46px; height: 46px; font-size: 15px; }
/* Técnicos */
.tec-destaque { display: flex; gap: 14px; align-items: flex-start; margin: 0; border-top: 3px solid var(--s1); }
.tec-destaque.ruim { border-top-color: #d93d3d; }
.tec-destaque.bom { border-top-color: #16a34a; }
.tec-destaque > div { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.tec-destaque small { color: var(--texto-2); }
.tec-destaque b { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tec-destaque-valor { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tec-destaque.ruim .tec-destaque-valor { color: #c42b2b; }
.tec-destaque.bom .tec-destaque-valor { color: #15803d; }
.tec-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-bottom: 16px; }
.tec-cartao { margin: 0; display: flex; flex-direction: column; gap: 12px; text-align: left; font: inherit; color: inherit; cursor: pointer; border: 1px solid var(--borda); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.tec-cartao:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15, 23, 42, .1); }
.tec-cartao.ativo { border-color: var(--s1); box-shadow: 0 0 0 2px color-mix(in srgb, var(--s1) 35%, transparent); }
.tec-cartao .tec-cartao-topo { flex-wrap: nowrap; align-items: center; }
.tec-cartao .tec-cartao-topo > div { flex: 1; display: flex; flex-direction: column; }
.tec-cartao .tec-cartao-topo b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tec-cartao .tec-cartao-topo small { color: var(--texto-2); font-size: 12px; }
.tec-cartao-numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.tec-cartao-numeros div { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 10px; background: var(--superficie-2); min-width: 0; }
.tec-cartao-numeros dt { font-size: 11.5px; color: var(--texto-2); }
.tec-cartao-numeros dd { margin: 0; font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tec-cartao-rodape { color: var(--texto-2); font-size: 12px; }
.tec-cartao-rodape.ruim { color: #c42b2b; }
.tec-anel { width: 56px; height: 56px; flex: none; }
.tec-anel circle { fill: none; stroke-width: 7; }
.tec-anel .fundo { stroke: var(--grade); }
.tec-anel .valor { stroke: #16a34a; stroke-linecap: round; transition: stroke-dasharray .8s ease; }
.tec-anel.medio .valor { stroke: #f5a524; }
.tec-anel.ruim .valor { stroke: #d93d3d; }
.tec-anel text { font-size: 15px; font-weight: 800; fill: var(--texto); }
/* Onde está o problema: cidade 3D */
.tec-linha-cidade { align-items: stretch; }
.tec-cidade { margin: 0; overflow: hidden; background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--s1) 8%, var(--superficie)), var(--superficie) 70%); }
.tec-cidade-corpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(170px, 230px); gap: 12px; align-items: center; margin-top: 6px; }
.tec-cidade-area { min-width: 0; }
.tec-cidade-svg { display: block; width: 100%; height: auto; max-height: 470px; overflow: visible; }
.tec-cidade-svg .base { stroke: color-mix(in srgb, var(--texto) 16%, transparent); stroke-width: 1.5; stroke-linecap: round; }
.tec-cidade-svg .guia { stroke: color-mix(in srgb, var(--texto) 9%, transparent); stroke-width: 1; stroke-dasharray: 3 5; }
.tec-cidade-svg .valor { font-size: 12px; font-weight: 700; fill: var(--texto-2); font-variant-numeric: tabular-nums; }
.tec-cidade-svg .sombra { fill: rgba(15, 23, 42, .35); }
.tec-cidade-svg .topo { stroke: rgba(255, 255, 255, .55); stroke-width: 1; }
.tec-cidade-svg .predio { cursor: pointer; outline: none; transition: filter .15s ease, opacity .15s ease; }
.tec-cidade-svg .predio:hover, .tec-cidade-svg .predio:focus-visible { filter: brightness(1.12) drop-shadow(0 6px 10px rgba(0, 0, 0, .25)); }
.tec-cidade-svg .predio.escolhido polygon { stroke: var(--s1); stroke-width: 2; }
.tec-cidade-svg .selo rect { fill: var(--superficie); stroke: color-mix(in srgb, var(--texto) 14%, transparent); stroke-width: 1; filter: drop-shadow(0 2px 3px rgba(15, 23, 42, .18)); }
.tec-cidade-svg .selo text { font-size: 11.5px; font-weight: 800; fill: var(--texto-2); }
.tec-cidade-svg .predio.escolhido .selo rect { fill: var(--s1); stroke: var(--s1); }
.tec-cidade-svg .predio.escolhido .selo text { fill: #fff; }
.tec-cidade-rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: 440px; overflow: auto; }
.tec-cidade-rank button { width: 100%; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 8px; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.tec-cidade-rank .nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tec-cidade-rank b { font-variant-numeric: tabular-nums; }
.tec-cidade-rank li.quente button, .tec-cidade-rank button:hover { background: var(--superficie-2); }
.tec-cidade-rank li.ativo button { background: color-mix(in srgb, var(--s1) 12%, transparent); }
.tec-cidade-rank li.ativo .tec-pos { background: var(--s1); color: #fff; }
.tec-metricas { margin: 0; }
.tec-bairro { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.tec-bairro h3 { margin: 0; font-size: 22px; overflow-wrap: anywhere; }
.tec-rotulo { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-3); }
.tec-bairro-numeros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 4px 0 6px; }
.tec-bairro-numeros div { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 10px; background: var(--superficie-2); min-width: 0; }
.tec-bairro-numeros dt { font-size: 11.5px; color: var(--texto-2); }
.tec-bairro-numeros dd { margin: 0; font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums; }
.tec-bairro-numeros dd small { font-size: 12px; font-weight: 600; }
@media (max-width: 1100px) {
  .tec-cidade-corpo { grid-template-columns: minmax(0, 1fr); }
  .tec-cidade-rank { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: none; }
}
@media (max-width: 900px) { .tec-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .tec-cidade-rank { grid-template-columns: minmax(0, 1fr); }
  .tec-cartoes { grid-template-columns: minmax(0, 1fr); }
  .tec-tipos-corpo .cob-rosca { width: 120px; height: 120px; }
  .tec-numero.grande { font-size: 34px; }
}
.tec-kpi-texto .cob-kpi-valor { white-space: normal; overflow-wrap: anywhere; font-size: 19px; line-height: 1.25; }
.tec-kpi-texto { min-width: 0; }
.tec-tipos-lista li { grid-template-columns: 10px minmax(0, 1fr) auto auto; }
.tec-tipos-lista span { white-space: normal; overflow: visible; line-height: 1.25; }
.tec-cartao .tec-cartao-topo b { white-space: normal; overflow: visible; overflow-wrap: anywhere; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tec-cartao-rodape.bom-texto { color: #15803d; }

/* ===== Qualidade de sinal ===== */
.sinal-tag { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sinal-tag.ok { background: color-mix(in srgb, #16a34a 14%, transparent); color: #15803d; }
.sinal-tag.atencao { background: color-mix(in srgb, #f5a524 18%, transparent); color: #a16207; }
.sinal-tag.ruim { background: color-mix(in srgb, #f08a24 20%, transparent); color: #b45309; }
.sinal-tag.critico { background: color-mix(in srgb, #d93d3d 15%, transparent); color: #c42b2b; }
.sinal-faixas { display: flex; flex-direction: column; gap: 10px; margin: 10px 0 8px; }
.sinal-faixa { display: grid; grid-template-columns: 90px auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 12px; background: var(--superficie); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.sinal-faixa:hover { background: var(--superficie-2); }
.sinal-faixa.ativo { border-color: var(--s1); box-shadow: 0 0 0 2px color-mix(in srgb, var(--s1) 30%, transparent); }
.sinal-faixa .sinal-tag { justify-content: center; }
.sinal-faixa b { font-size: 22px; font-variant-numeric: tabular-nums; }
.sinal-faixa small { color: var(--texto-2); text-align: right; }
.sinal-grupo li { grid-template-columns: minmax(0, 170px) minmax(0, 1fr) auto; }
.sinal-grupo .tec-barra i { background: linear-gradient(90deg, #f08a24, #d93d3d); }
.sinal-limite { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .sinal-faixa { grid-template-columns: 80px auto; }
  .sinal-faixa small { grid-column: 1 / -1; text-align: left; }
  .sinal-grupo li { grid-template-columns: minmax(0, 110px) minmax(0, 1fr) auto; }
}

/* ===== Ouvidoria em análise (Reclame Aqui e Procon SP) ===== */
.ouv-analise { max-width: 860px; }
.ouv-analise-cartao { position: relative; overflow: hidden; padding: 34px 36px; margin-top: 12px; display: flex; flex-direction: column; gap: 12px;
  background: radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--s1) 10%, var(--superficie)), var(--superficie) 60%); }
.ouv-analise-marca { display: flex; align-items: center; gap: 12px; }
.ouv-analise-marca .logo { width: 44px; height: 44px; border-radius: 12px; background: var(--primaria); display: grid; place-items: center; flex: none; box-shadow: 0 6px 16px color-mix(in srgb, var(--primaria) 30%, transparent); }
.ouv-analise-marca .logo svg { width: 26px; height: 26px; }
.ouv-analise-marca div { display: flex; flex-direction: column; }
.ouv-analise-marca b { font-size: 19px; }
.ouv-analise-marca small { color: var(--texto-2); font-size: 12.5px; }
.ouv-analise-selo { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  background: color-mix(in srgb, #f5a524 18%, transparent); color: #a16207; }
.ouv-analise-selo i { width: 8px; height: 8px; border-radius: 50%; background: #f5a524; animation: tec-pulsar-selo 1.6s ease-in-out infinite; }
@keyframes tec-pulsar-selo { 50% { opacity: .35; } }
.ouv-analise-cartao h1 { margin: 2px 0 0; font-size: 34px; }
.ouv-analise-sub { margin: 0; font-size: 17px; font-weight: 600; color: var(--texto); }
.ouv-analise-cartao > p { margin: 0; color: var(--texto-2); line-height: 1.55; }
.ouv-analise-etapas { list-style: none; margin: 10px 0 4px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ouv-analise-etapas li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--borda); border-radius: 12px; background: var(--superficie); }
.ouv-analise-etapas .num { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--superficie-2); font-weight: 700; color: var(--texto-2); }
.ouv-analise-etapas .nome { font-weight: 600; }
.ouv-analise-etapas small { color: var(--texto-3); font-size: 12px; white-space: nowrap; }
.ouv-analise-etapas li.andamento { border-color: color-mix(in srgb, var(--s1) 45%, transparent); }
.ouv-analise-etapas li.andamento .num { background: var(--s1); color: #fff; }
.ouv-analise-etapas li.andamento small { color: var(--s1); font-weight: 700; }
.ouv-analise-etapas li.ok .num { background: #16a34a; color: #fff; }
.ouv-analise-depois { padding: 14px 16px; border-radius: 12px; background: var(--superficie-2); }
.ouv-analise-depois p { margin: 4px 0 0; color: var(--texto-2); }
@media (max-width: 640px) {
  .ouv-analise-cartao { padding: 22px 18px; }
  .ouv-analise-cartao h1 { font-size: 27px; }
  .ouv-analise-etapas li { grid-template-columns: 30px minmax(0, 1fr); }
  .ouv-analise-etapas small { grid-column: 2; }
}

/* ===== Relatório executivo (para os sócios) ===== */
.rel-exec { max-width: 1040px; }
.rel-acoes { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.rel-acoes .botao { display: inline-flex; align-items: center; gap: 7px; }
.rel-wpp { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; min-width: 0; }
.rel-wpp select { min-width: 0; max-width: 260px; }
.rel-folha { background: var(--superficie); border: 1px solid var(--borda); border-radius: 18px; overflow: hidden; box-shadow: 0 10px 30px rgba(15, 23, 42, .06); }
.rel-capa { padding: 30px 36px 28px; color: #e8fff4; background: radial-gradient(120% 140% at 100% 0%, #1f6b4f 0%, #0f3b2c 45%, #0a2a20 100%); }
.rel-capa-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rel-marca { position: relative; font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: #fff; padding-bottom: 6px; }
.rel-marca::after { content: ''; position: absolute; left: 4%; right: 6%; bottom: 0; height: 6px; border-bottom: 3px solid #2ee59d; border-radius: 0 0 50% 50%; }
.rel-situacao { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; font-weight: 800; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; border: 1px solid rgba(255, 255, 255, .25); }
.rel-situacao i { width: 9px; height: 9px; border-radius: 50%; }
.rel-situacao.bom { background: rgba(46, 229, 157, .16); color: #7ff5c4; } .rel-situacao.bom i { background: #2ee59d; }
.rel-situacao.atencao { background: rgba(245, 165, 36, .18); color: #ffd58a; } .rel-situacao.atencao i { background: #f5a524; }
.rel-situacao.ruim { background: rgba(255, 99, 99, .18); color: #ffb3b3; } .rel-situacao.ruim i { background: #ff6363; }
.rel-capa h1 { margin: 22px 0 4px; font-size: 32px; color: #fff; }
.rel-capa-sub { margin: 0; color: #a8d9c3; font-weight: 600; }
.rel-capa-resumo { margin: 14px 0 0; font-size: 16px; color: #e8fff4; max-width: 760px; }
.rel-secao { padding: 26px 36px 8px; }
.rel-secao h2 { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; font-size: 21px; }
.rel-q { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: #e3f7ee; color: #157a52; font-size: 15px; font-weight: 800; flex: none; }
.rel-indicadores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.rel-ind { display: flex; flex-direction: column; gap: 4px; padding: 14px 14px 12px; border-radius: 14px; border: 1px solid var(--borda); border-top: 4px solid #16a34a; background: var(--superficie); min-width: 0; break-inside: avoid; }
.rel-ind.atencao { border-top-color: #f5a524; } .rel-ind.ruim { border-top-color: #d93d3d; }
.rel-ind-topo { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.rel-ind-topo span { font-size: 12.5px; color: var(--texto-2); font-weight: 600; }
.rel-ind-topo em { font-style: normal; font-size: 11px; font-weight: 800; text-transform: uppercase; color: #15803d; white-space: nowrap; }
.rel-ind.atencao em { color: #a16207; } .rel-ind.ruim em { color: #c42b2b; }
.rel-ind b { font-size: 22px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.rel-ind small { color: var(--texto-2); font-size: 12px; line-height: 1.35; }
.rel-decisoes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.rel-decisoes > li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--borda); border-left: 5px solid #8a94a6; break-inside: avoid; }
.rel-decisoes > li.ruim { border-left-color: #d93d3d; background: color-mix(in srgb, #d93d3d 4%, var(--superficie)); }
.rel-decisoes > li.atencao { border-left-color: #f5a524; background: color-mix(in srgb, #f5a524 5%, var(--superficie)); }
.rel-num { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--superficie-2); font-weight: 800; font-size: 16px; }
.rel-decisoes > li.ruim .rel-num { background: #d93d3d; color: #fff; }
.rel-decisoes > li.atencao .rel-num { background: #f5a524; color: #fff; }
.rel-dec-topo { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rel-grav { padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; background: var(--superficie-2); color: var(--texto-2); }
.rel-grav.ruim { background: color-mix(in srgb, #d93d3d 14%, transparent); color: #c42b2b; }
.rel-grav.atencao { background: color-mix(in srgb, #f5a524 18%, transparent); color: #a16207; }
.rel-area { font-size: 12px; color: var(--texto-3); font-weight: 600; }
.rel-decisoes h3 { margin: 6px 0 4px; font-size: 17px; }
.rel-decisoes p { margin: 0 0 6px; color: var(--texto-2); line-height: 1.5; }
.rel-decisoes .rel-decisao { margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; background: #e3f7ee; color: #0f3b2c; }
.rel-tudo-certo { display: flex; gap: 14px; align-items: center; padding: 18px; border-radius: 14px; background: #e3f7ee; color: #0f3b2c; }
.rel-tudo-certo .icone { width: 28px; height: 28px; }
.rel-tudo-certo p { margin: 2px 0 0; }
.rel-rodape { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 18px 36px 24px; margin-top: 18px; border-top: 1px solid var(--borda); font-size: 12px; color: var(--texto-3); }
@media (max-width: 1100px) { .rel-indicadores { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .rel-capa { padding: 22px 18px; } .rel-secao { padding: 20px 16px 6px; } .rel-rodape { padding: 14px 16px 18px; }
  .rel-capa h1 { font-size: 26px; } .rel-marca { font-size: 25px; }
  .rel-indicadores { gap: 10px; } .rel-ind { padding: 12px 11px 10px; } .rel-ind b { font-size: clamp(14px, 4.3vw, 17px); white-space: nowrap; overflow-wrap: normal; letter-spacing: -.01em; }
  .rel-decisoes > li { grid-template-columns: minmax(0, 1fr); padding: 14px; }
  .rel-wpp { margin-left: 0; width: 100%; } .rel-wpp select { flex: 1; max-width: none; }
}
/* PDF (Baixar PDF = imprimir): só a folha do relatório, com as cores */
@media print {
  @page { size: A4; margin: 10mm; }
  body { background: #fff !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .menu, .sair-fixo, .rel-acoes, .aviso-toast, #avisos { display: none !important; }
  #app.com-menu { display: block !important; }
  main.rel-exec { padding: 0 !important; max-width: none; margin: 0; }
  .rel-folha { border: 0; box-shadow: none; border-radius: 0; background: #fff; color: #111; }
  .rel-indicadores { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rel-ind, .rel-decisoes > li { background: #fff; }
  .rel-secao h2, .rel-capa { break-after: avoid; }
  html, body, #app, main, .tela, .conteudo { background: #fff !important; }
  .rel-capa { padding: 18px 22px 16px; } .rel-capa h1 { margin-top: 12px; font-size: 24px; } .rel-marca { font-size: 23px; }
  .rel-capa-resumo { margin-top: 8px; font-size: 13px; }
  .rel-secao { padding: 14px 22px 4px; } .rel-secao h2 { font-size: 16px; margin-bottom: 10px; } .rel-q { width: 24px; height: 24px; font-size: 12px; }
  .rel-indicadores { gap: 8px; }
  .rel-ind { padding: 9px 10px 8px; gap: 2px; } .rel-ind-topo span { font-size: 10px; } .rel-ind-topo em { font-size: 8.5px; }
  .rel-ind b { font-size: 15px; white-space: nowrap; overflow-wrap: normal; } .rel-ind small { font-size: 9.5px; }
  .rel-decisoes { gap: 8px; } .rel-decisoes > li { padding: 10px 12px; gap: 10px; grid-template-columns: 26px minmax(0, 1fr); }
  .rel-num { width: 26px; height: 26px; font-size: 12px; } .rel-decisoes h3 { font-size: 13.5px; margin: 3px 0 2px; }
  .rel-decisoes p { font-size: 11.5px; margin-bottom: 3px; } .rel-decisoes .rel-decisao { padding: 6px 10px; margin-top: 5px; }
  .rel-grav { font-size: 9px; } .rel-area { font-size: 10px; }
  .rel-rodape { padding: 10px 22px 6px; margin-top: 10px; font-size: 9.5px; break-before: avoid; }
}
@media (max-width: 400px) { .rel-indicadores { grid-template-columns: minmax(0, 1fr); } .rel-ind b { font-size: 20px; } }
.rel-periodos { margin: 0; }
.wpp-relatorios { margin: 16px 0 6px; display: flex; flex-direction: column; gap: 10px; }
.wpp-relatorios h3 { margin: 0; font-size: 14px; }
.wpp-rel { padding: 12px 14px; border: 1px solid var(--borda); border-radius: 12px; }
.wpp-freqs { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.wpp-freqs li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--borda); }
.wpp-freqs li > small { white-space: nowrap; }
@media (max-width: 640px) { .wpp-freqs li { grid-template-columns: minmax(0, 1fr) auto; } .wpp-freqs li > small { grid-column: 1 / -1; white-space: normal; } }
.wpp-rel { display: flex; flex-direction: column; gap: 8px; }
.wpp-exec-campos { margin-top: 4px; }
.wpp-rel .campo textarea { width: 100%; min-height: 54px; resize: vertical; font: inherit; }
.wpp-sub { font-size: 13px; margin-top: 4px; }
.wpp-freq-botoes { display: inline-flex; gap: 6px; }
.wpp-previa-texto { margin: 6px 0 0; padding: 14px 16px; border-radius: 12px; background: #e7f6e9; color: #0b3d2a; border: 1px solid #c4e8cc; white-space: pre-wrap; font: 13px/1.5 var(--fonte, inherit); max-height: 420px; overflow: auto; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wpp-previa-texto { background: #0f2a20; color: #d6f5e4; border-color: #1f4d39; } }
:root[data-theme="dark"] .wpp-previa-texto { background: #0f2a20; color: #d6f5e4; border-color: #1f4d39; }
.tec-kpi-explica { display: block; color: var(--texto-2); font-weight: 400; margin-bottom: 2px; }

.tec-cidade-esq { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.tec-cidade-legenda { display: flex; align-items: center; gap: 8px; justify-content: center; font-size: 12px; color: var(--texto-3); }
.tec-cidade-legenda i { width: 160px; max-width: 45%; height: 8px; border-radius: 999px; background: linear-gradient(90deg, hsl(215 74% 60%), hsl(287 74% 57%), hsl(360 74% 54%)); }

/* Configurações > Operação Técnica: técnicos */
.tec-config-lista { max-height: 460px; overflow: auto; }
.tec-config-fora { margin-top: 12px; border: 1px solid var(--borda); border-radius: 10px; padding: 8px 12px; }
.tec-config-fora summary { cursor: pointer; font-weight: 600; color: var(--texto-2); }
.tec-config-fora ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tec-config-fora li { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; min-width: 0; }
.tec-config-fora li > span { min-width: 0; overflow-wrap: anywhere; }
.tec-config-novo { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--borda); }
.tec-config-novo h3 { margin: 0 0 4px; font-size: 15px; }
.tec-config-campos { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-top: 8px; }
.tec-config-campos .campo { margin: 0; }
.tec-config-campos .campo:nth-child(2) { flex: 1 1 220px; min-width: 0; }
.tec-config-campos .campo:nth-child(2) input { width: 100%; }
/* Negativados: 6 cartões = 3 por linha (2 no celular) */
.cob-kpis.cinco.seis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .cob-kpis.cinco.seis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cob-kpis.cinco.seis > :first-child { grid-column: auto; } }
/* Estoque */
.est-faixas li { display: block; }
.est-faixas li button { width: 100%; display: grid; grid-template-columns: minmax(0, 120px) minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 6px 8px; margin: -6px -8px; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; box-sizing: content-box; }
.est-faixas li button > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto-2); }
.est-faixas li button b { min-width: 96px; text-align: right; font-variant-numeric: tabular-nums; }
.est-faixas li button small { min-width: 54px; text-align: right; }
.est-faixas li button:hover, .est-faixas li.ativo button { background: var(--superficie-2); }
.est-faixas li.ativo button { box-shadow: inset 0 0 0 1.5px var(--s1); }
.est-faixas .est-ate30 { background: linear-gradient(90deg, #16a34a, #4cc27a); }
.est-faixas .est-ate90 { background: linear-gradient(90deg, var(--s1), #6aa8f0); }
.est-faixas .est-ate180 { background: linear-gradient(90deg, #f5b324, #f7c95a); }
.est-faixas .est-ate365 { background: linear-gradient(90deg, #f08a24, #f5a95c); }
.est-faixas .est-mais365, .est-faixas .est-sem { background: linear-gradient(90deg, #d93d3d, #ec6b6b); }
.est-faixas .est-sem { background: var(--texto-3); }
.est-almox li { grid-template-columns: minmax(0, 150px) minmax(0, 1fr) auto; }
.est-barra-dupla i { position: relative; }
.est-barra-dupla em { position: absolute; right: 0; top: 0; bottom: 0; background: #d93d3d; border-radius: 0 999px 999px 0; }
@media (max-width: 640px) {
  .est-faixas li button { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
  .est-faixas li button .tec-barra { grid-column: 1 / -1; grid-row: 2; }
  .est-faixas li button small { display: none; }
  .est-almox li { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
  .est-almox li .tec-barra { grid-column: 1 / -1; grid-row: 2; }
}

.est-diag { margin-top: 12px; text-align: left; font-size: 13px; overflow-wrap: anywhere; }
.est-diag ul { margin: 6px 0; padding-left: 18px; }
.est-diag p { margin: 4px 0; }
/* Telas em desenvolvimento */
.menu .submenu a .sub-dev { margin-left: 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #f5b324; white-space: nowrap; }
.dev-lista { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.dev-grupo { border: 1px solid var(--borda); border-radius: 10px; padding: 10px 12px; }
.dev-grupo > .marcar span { font-weight: 600; }
.dev-subs { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 8px 0 0 26px; }
.dev-subs .marcar:has(input:disabled) { opacity: .5; }
.ouv-analise-cartao > .botao { align-self: flex-start; margin-top: 6px; text-decoration: none; }
.menu-itens > a .grupo-nome { display: flex; flex-direction: column; min-width: 0; }
.menu-itens > a .grupo-nome small { font-size: 11px; color: #6f7f96; font-weight: 400; }
/* Fale com o Manager (layout verde da Central de suporte) */
main.suporte { --sv-botao: var(--primaria); --sv-escuro: #12305a; --sv: #1f63b8; --sv-medio: var(--primaria); --sv-acento: #7cc4ff; --sv-claro: color-mix(in srgb, var(--primaria) 8%, var(--superficie)); --sv-borda: color-mix(in srgb, var(--primaria) 35%, var(--borda));
  max-width: none; padding: 0 0 56px; }
.com-menu:has(main.suporte) .sair-fixo { display: none; }
.sup-hero { background: radial-gradient(120% 140% at 85% 0%, rgba(124, 196, 255, .16), transparent 55%), linear-gradient(135deg, #0b1a33, #0f2c55 60%, #134a7c); color: #fff; }
.sup-hero-dentro { max-width: 1440px; margin: 0 auto; padding: 14px 32px 16px; box-sizing: border-box; }
.sup-hero-topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sup-hero-acoes { display: flex; align-items: center; gap: 16px; }
.sup-central { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; color: #a9d4ff; border: 1.5px solid rgba(124, 196, 255, .55); border-radius: 999px; padding: 4px 11px; white-space: nowrap; }
.sup-sep { width: 1px; height: 26px; background: rgba(255, 255, 255, .25); }
.sup-sair { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; color: #fff; font: inherit; font-weight: 600; cursor: pointer; padding: 6px 4px; }
.sup-sair .icone { width: 19px; height: 19px; }
.sup-sair:hover { color: #a9d4ff; }
.sup-olho { display: block; margin-top: 0; font-size: 11px; font-weight: 700; letter-spacing: .14em; color: #a9d4ff; }
.sup-hero h1 { margin: 8px 0 2px; font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.sup-hero p { margin: 0; color: #c6d4e8; font-size: 13px; }
.sup-conteudo { max-width: 1440px; margin: 0 auto; padding: 24px 32px 0; box-sizing: border-box; }
.sup-aviso { margin: 0 0 16px; }
.sup-grade { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.sup-cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px; box-shadow: var(--sombra); padding: 20px 22px; min-width: 0; }
.sup-titulo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sup-titulo-icone { color: var(--sv-medio); display: grid; place-items: center; }
.sup-titulo-icone .icone { width: 24px; height: 24px; }
.sup-titulo h2 { margin: 0; font-size: 17px; font-weight: 800; color: var(--sv-escuro); letter-spacing: -.01em; }
.sup-titulo p { margin: 2px 0 0; color: var(--texto-2); font-size: 13px; }
.sup-form { display: flex; flex-direction: column; gap: 14px; }
.sup-form .campo { margin: 0; min-width: 0; }
.sup-form .campo > label, .sup-form .rotulo { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--texto); }
.sup-form select, .sup-form input[type=text], .sup-form input[type=tel], .sup-form textarea { width: 100%; box-sizing: border-box; }
.sup-form textarea { resize: vertical; font: inherit; }
.sup-form select:disabled { opacity: .6; }
.sup-conta { display: block; text-align: right; font-size: 11.5px; color: var(--texto-3); margin-top: 4px; }
.sup-linha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sup-contato { max-width: 320px; }
.sup-tipos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sup-tipo { position: relative; display: flex; gap: 10px; align-items: center; text-align: left; padding: 10px 12px; border: 1.5px solid var(--borda); border-radius: 12px; background: var(--superficie); color: inherit; font: inherit; cursor: pointer; min-width: 0; }
.sup-tipo-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sup-tipo-txt b { font-size: 14px; }
.sup-tipo-txt small { font-size: 12px; color: var(--texto-2); }
.sup-tipo-icone { flex: none; display: grid; place-items: center; }
.sup-tipo-icone .icone { width: 22px; height: 22px; }
.sup-tipo.erro .sup-tipo-icone { color: #d93d3d; }
.sup-tipo.falha .sup-tipo-icone { color: #e07a12; }
.sup-tipo.melhoria .sup-tipo-icone { color: var(--sv-medio); }
.sup-tipo-ok { position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; border-radius: 50%; background: var(--sv-medio); color: #fff; display: none; place-items: center; }
.sup-tipo-ok .icone { width: 12px; height: 12px; stroke-width: 3; }
.sup-tipo:hover { border-color: var(--sv-borda); }
.sup-tipo.ativo { border-color: var(--sv-medio); background: var(--sv-claro); box-shadow: 0 0 0 1px var(--sv-medio) inset; }
.sup-tipo.ativo .sup-tipo-ok { display: grid; }
.sup-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.sup-chip { padding: 6px 16px; border-radius: 999px; border: 1.5px solid var(--borda); background: var(--superficie); color: inherit; font: inherit; font-size: 13px; cursor: pointer; }
.sup-chip:hover { border-color: var(--sv-borda); }
.sup-chip.ativo { border-color: var(--sv-medio); background: var(--sv-claro); font-weight: 700; color: var(--sv-escuro); }
.sup-chip.urgente.ativo { border-color: #d93d3d; background: color-mix(in srgb, #d93d3d 10%, var(--superficie)); color: #c42b2b; }
.sup-zona { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1.5px dashed var(--sv-borda); border-radius: 12px; background: color-mix(in srgb, var(--sv-claro) 50%, var(--superficie)); cursor: pointer; min-width: 0; }
.sup-zona > .icone { width: 20px; height: 20px; flex: none; color: var(--sv-medio); }
.sup-zona > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.sup-zona b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sup-zona small { font-size: 12px; color: var(--texto-2); }
.sup-zona:hover, .sup-zona.arrastando { border-color: var(--sv-medio); background: var(--sv-claro); }
.sup-zona.com-anexo { border-style: solid; border-color: var(--sv-medio); }
.sup-arquivo { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.sup-rodape { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sup-via { display: inline-flex; align-items: center; gap: 8px; color: var(--texto-2); font-size: 13px; }
.sup-via .icone { width: 18px; height: 18px; color: var(--sv-medio); }
.sup-enviar, .sup-botao { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 10px; background: var(--sv-botao); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.sup-enviar { padding: 10px 24px; font-size: 14px; }
.sup-enviar .icone { width: 17px; height: 17px; }
.sup-botao { padding: 8px 18px; font-size: 13px; }
.sup-enviar:hover, .sup-botao:hover { background: #1f63b8; }
.sup-enviar:disabled { opacity: .6; cursor: wait; }
.sup-botao-claro { border: 1.5px solid var(--borda); background: var(--superficie); color: var(--texto); border-radius: 10px; padding: 6px 14px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.sup-botao-claro:hover { border-color: var(--sv-medio); }
.sup-abertos { font-size: 12px; font-weight: 700; padding: 3px 11px; border-radius: 999px; background: color-mix(in srgb, var(--primaria) 13%, transparent); color: var(--primaria); }
.sup-filtros { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
.sup-filtro { padding: 6px 16px; border-radius: 999px; border: 1.5px solid var(--borda); background: var(--superficie); color: inherit; font: inherit; font-size: 13px; cursor: pointer; }
.sup-filtro.ativo { background: var(--sv-botao); border-color: var(--sv-botao); color: #fff; font-weight: 700; }
.sup-itens { display: flex; flex-direction: column; gap: 12px; max-height: 760px; overflow: auto; }
.sup-chamado { border: 1px solid var(--borda); border-radius: 12px; overflow: hidden; background: var(--superficie); flex: none; }
.sup-chamado header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px; background: linear-gradient(135deg, #0b1a33, #134a7c); color: #fff; }
.sup-num { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; color: #a9d4ff; border: 1.5px solid rgba(124, 196, 255, .55); border-radius: 999px; padding: 3px 10px; }
.sup-sit { font-size: 12px; font-weight: 600; }
.sup-chamado.resolvido header { background: linear-gradient(135deg, #2f3d4f, #415165); }
.sup-chamado.resolvido .sup-num { color: #d6e2f0; border-color: rgba(214, 226, 240, .5); }
.sup-chamado-corpo { padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 6px; }
.sup-chamado-titulo { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.sup-chamado-titulo .sup-selo { margin-top: 2px; }
.sup-chamado-titulo b { font-size: 14.5px; overflow-wrap: anywhere; }
.sup-quando { color: var(--texto-2); font-size: 12.5px; }
.sup-info { list-style: none; margin: 4px 0 2px; padding: 0 0 10px; display: flex; flex-direction: column; gap: 5px; border-bottom: 1px solid var(--borda); }
.sup-info li { display: flex; align-items: center; gap: 10px; font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
.sup-info .icone { width: 16px; height: 16px; flex: none; color: var(--texto-2); }
.sup-envio-linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 2px 0 10px; border-bottom: 1px solid var(--borda); }
.sup-envio { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; }
.sup-envio .icone { width: 15px; height: 15px; }
.sup-envio.ok { color: #0f7a55; }
.sup-envio.erro { color: #c42b2b; }
.sup-selo { flex: none; font-size: 11.5px; font-weight: 700; padding: 2px 10px; border-radius: 999px; }
.sup-selo.erro { background: color-mix(in srgb, #d93d3d 14%, transparent); color: #c42b2b; }
.sup-selo.falha { background: color-mix(in srgb, #f08a24 16%, transparent); color: #b45d10; }
.sup-selo.melhoria { background: color-mix(in srgb, var(--primaria) 14%, transparent); color: var(--primaria); }
.sup-detalhes { padding: 4px 0 10px; border-bottom: 1px solid var(--borda); }
.sup-desc { margin: 0 0 10px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; }
.sup-detalhes dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; margin: 0; font-size: 13px; }
.sup-detalhes dt { color: var(--texto-2); }
.sup-detalhes dd { margin: 0; overflow-wrap: anywhere; }
.sup-acoes { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-top: 4px; }
.sup-ver { border: 0; background: none; font: inherit; font-size: 13px; font-weight: 700; color: var(--sv-escuro); cursor: pointer; padding: 6px 0; }
.sup-ver:hover { text-decoration: underline; }
.sup-vazio { color: var(--texto-2); margin: 0; }
.sup-dica { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 14px 18px; border-radius: 12px; background: var(--sv-claro); }
.sup-dica > .icone { width: 22px; height: 22px; flex: none; color: var(--sv-medio); padding-right: 16px; border-right: 1px solid var(--sv-borda); box-sizing: content-box; }
.sup-dica b { display: block; font-size: 14px; color: var(--sv-escuro); }
.sup-dica small { font-size: 12.5px; color: var(--texto-2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) main.suporte { --sv-escuro: #cfe2ff; } }
:root[data-theme="dark"] main.suporte { --sv-escuro: #cfe2ff; }
@media (max-width: 1100px) { .sup-grade { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .sup-hero-dentro, .sup-conteudo { padding-left: 16px; padding-right: 16px; }
  .sup-hero h1 { font-size: 20px; }
  .sup-hero-acoes .sup-sep, .sup-hero-acoes .sup-sair { display: none; }
  .sup-cartao { padding: 18px 16px; }
  .sup-tipos, .sup-linha { grid-template-columns: minmax(0, 1fr); }
  .sup-contato { max-width: none; }
  .sup-enviar { width: 100%; }
}
/* Respostas do suporte (vindas do WhatsApp) */
.sup-respostas { display: flex; flex-direction: column; gap: 8px; padding: 2px 0 12px; border-bottom: 1px solid var(--borda); }
.sup-respostas-titulo { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--sv-escuro); }
.sup-respostas-titulo .icone { width: 18px; height: 18px; color: var(--sv-medio); }
.sup-resposta { background: var(--sv-claro); border: 1px solid var(--sv-borda); border-radius: 4px 12px 12px 12px; padding: 8px 12px; }
.sup-resposta p { margin: 0 0 4px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; }
.sup-resposta small { display: block; color: var(--texto-2); font-size: 12px; }
/* Status dos chamados */
.sup-sit { display: inline-flex; align-items: center; gap: 7px; }
.sup-sit i { width: 8px; height: 8px; border-radius: 50%; background: #7cc4ff; }
.sup-sit.andamento i { background: #c4b5fd; }
.sup-sit.producao i { background: #ffc24d; }
.sup-sit.resolvido i { background: #d6e2f0; }
.sup-chamado.andamento header { background: linear-gradient(135deg, #1e1b4b, #4338ca); }
.sup-chamado.producao header { background: linear-gradient(135deg, #3a2a08, #6e4c0c); }
.sup-chamado.andamento .sup-num { color: #ddd6fe; border-color: rgba(221, 214, 254, .5); }
.sup-chamado.producao .sup-num { color: #ffd88a; border-color: rgba(255, 216, 138, .5); }
.sup-resp-status { display: inline-block; margin-bottom: 4px; font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: color-mix(in srgb, var(--primaria) 13%, transparent); color: var(--primaria); }
.sup-resp-status.andamento { background: color-mix(in srgb, #6d5bd0 14%, transparent); color: #5b47c2; }
.sup-resp-status.producao { background: color-mix(in srgb, #f5a524 18%, transparent); color: #a16207; }
.sup-resp-status.resolvido { background: color-mix(in srgb, #64748b 16%, transparent); color: var(--texto-2); }
.sup-status-sel { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--texto-2); }
.sup-status-sel select { padding: 7px 10px; border-radius: 10px; font-weight: 600; color: var(--texto); }
.sup-form select, .sup-form input[type=text], .sup-form textarea { font-size: 13.5px; padding: 7px 10px; }
@media (max-width: 640px) { .sup-form select, .sup-form input[type=text], .sup-form textarea { font-size: 16px; } }
/* Fale com o Manager: lista de solicitações + janela "Novo chamado" */
.sup-lista-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sup-novo { padding: 9px 18px; }
.sup-novo span { font-size: 18px; line-height: 1; font-weight: 600; }
.sup-itens { display: flex; flex-direction: column; gap: 8px; max-height: none; overflow: visible; }
.sup-item { border: 1px solid var(--borda); border-radius: 12px; background: var(--superficie); overflow: hidden; }
.sup-item:hover { border-color: var(--sv-borda); }
.sup-item.expandido { border-color: var(--sv-borda); box-shadow: var(--sombra); }
.sup-item-topo { width: 100%; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto auto; align-items: center; gap: 12px; padding: 12px 16px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.sup-item-num { font-size: 12.5px; font-weight: 700; color: var(--texto-2); font-variant-numeric: tabular-nums; min-width: 28px; }
.sup-item-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sup-item-texto b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sup-item-texto small { font-size: 12px; color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sup-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 999px; white-space: nowrap; background: color-mix(in srgb, var(--primaria) 12%, transparent); color: var(--primaria); }
.sup-status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sup-status.respondido { background: color-mix(in srgb, #13a36b 14%, transparent); color: #0f7a55; }
.sup-status.andamento { background: color-mix(in srgb, #6d5bd0 14%, transparent); color: #5b47c2; }
.sup-status.producao { background: color-mix(in srgb, #f5a524 18%, transparent); color: #a16207; }
.sup-status.resolvido { background: color-mix(in srgb, #64748b 15%, transparent); color: var(--texto-2); }
.sup-item-envio { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; }
.sup-item-envio .icone { width: 15px; height: 15px; }
.sup-item-envio.ok { color: #0f7a55; background: color-mix(in srgb, #13a36b 12%, transparent); }
.sup-item-envio.erro { color: #c42b2b; background: color-mix(in srgb, #d93d3d 12%, transparent); }
.sup-item-seta { width: 9px; height: 9px; border-right: 2px solid var(--texto-3); border-bottom: 2px solid var(--texto-3); transform: rotate(45deg); margin: -4px 4px 0 2px; transition: transform .15s; }
.sup-item.expandido .sup-item-seta { transform: rotate(-135deg); margin-top: 4px; }
.sup-item.resolvido .sup-item-texto b { color: var(--texto-2); }
.sup-item-corpo { padding: 4px 16px 16px 56px; display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--borda); padding-top: 14px; }
.sup-item-corpo .sup-desc { margin: 0; }
.sup-item-corpo dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; margin: 0; font-size: 13px; }
.sup-item-corpo dt { color: var(--texto-2); }
.sup-item-corpo dd { margin: 0; overflow-wrap: anywhere; }
.sup-item-corpo .sup-respostas { border-bottom: 0; padding: 0; }
.sup-item-corpo .sup-acoes { padding-top: 0; }
.sup-vazio { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 28px 12px; color: var(--texto-2); text-align: center; }
.sup-vazio p { margin: 0; }
/* Janela */
.sup-janela { position: fixed; inset: 0; z-index: 60; background: rgba(8, 15, 28, .55); display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; animation: sup-entrar .15s ease-out; }
.sup-janela-caixa { width: min(720px, 100%); background: var(--superficie); border: 1px solid var(--borda); border-radius: 16px; box-shadow: 0 24px 60px rgba(8, 15, 28, .35); padding: 20px 22px; }
.sup-janela-topo { align-items: flex-start; flex-wrap: nowrap; }
.sup-janela-topo > div { flex: 1; min-width: 0; }
.sup-fechar { flex: none; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--borda); background: var(--superficie); color: var(--texto-2); font-size: 22px; line-height: 1; cursor: pointer; }
.sup-fechar:hover { color: var(--texto); border-color: var(--sv-borda); }
@keyframes sup-entrar { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sup-janela { animation: none; } }
@media (max-width: 640px) {
  .sup-janela { padding: 0; align-items: stretch; }
  .sup-janela-caixa { border-radius: 0; min-height: 100%; padding: 16px; }
  .sup-item-topo { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "num texto seta" "selo status envio"; gap: 6px 10px; padding: 12px; }
  .sup-item-num { grid-area: num; }
  .sup-item-topo .sup-selo { grid-area: selo; justify-self: start; }
  .sup-item-texto { grid-area: texto; }
  .sup-item-texto b { white-space: normal; }
  .sup-status { grid-area: status; justify-self: start; }
  .sup-item-envio { grid-area: envio; justify-self: end; }
  .sup-item-seta { grid-area: seta; justify-self: end; }
  .sup-item-corpo { padding: 12px; }
  .sup-novo { width: 100%; justify-content: center; }
}
/* Configurações > Atualizar o Manager */
.atu-versao { display: inline-flex; align-items: baseline; gap: 10px; margin: 4px 0 14px; padding: 8px 14px; border-radius: 10px; background: var(--superficie-2); }
.atu-versao span { font-size: 13px; color: var(--texto-2); }
.atu-versao b { font-size: 16px; font-variant-numeric: tabular-nums; }
.atu-form { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.atu-form h3, .atu-historico h3 { margin: 6px 0 0; font-size: 15px; }
.atu-zona { --sv-medio: var(--primaria); --sv-claro: color-mix(in srgb, var(--primaria) 8%, var(--superficie)); --sv-borda: color-mix(in srgb, var(--primaria) 35%, var(--borda)); }
.atu-zona b { font-size: 14px; }
.atu-campos { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.atu-campos .campo { margin: 0; min-width: 0; }
.atu-campos input { width: 260px; max-width: 100%; }
.atu-andamento { border: 1px solid color-mix(in srgb, var(--primaria) 35%, var(--borda)); border-radius: 12px; padding: 14px 16px; background: color-mix(in srgb, var(--primaria) 6%, var(--superficie)); }
.atu-etapas { list-style: none; margin: 12px 0 8px; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.atu-etapas li { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--texto-2); padding: 5px 12px 5px 6px; border-radius: 999px; background: var(--superficie); border: 1px solid var(--borda); }
.atu-etapas li span { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; background: var(--superficie-2); }
.atu-etapas li.feito { color: #15803d; border-color: color-mix(in srgb, #16a34a 40%, var(--borda)); }
.atu-etapas li.feito span { background: #16a34a; color: #fff; }
.atu-etapas li.agora { color: var(--primaria); border-color: var(--primaria); font-weight: 600; }
.atu-etapas li.agora span { background: var(--primaria); color: #fff; animation: tec-pulsar-selo 1.6s ease-in-out infinite; }
.atu-res { display: block; }
.atu-res p { margin: 6px 0; }
.atu-registro { max-height: 260px; overflow: auto; font-size: 12px; background: var(--superficie-2); padding: 10px; border-radius: 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
.atu-historico ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }
.chamada.sucesso { display: block; background: color-mix(in srgb, var(--bom) 10%, transparent); margin-bottom: 14px; }
.sup-respostas-cfg { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--borda); }
.sup-respostas-cfg p { margin: 4px 0 8px; font-size: 13px; }
/* Faixa "Manager atualizado": versão nova no servidor, toque para carregar */
.faixa-versao { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 70; max-width: calc(100% - 32px); padding: 12px 18px; border: 0; border-radius: 12px; background: var(--primaria); color: #fff; font: inherit; font-size: 14px; text-align: center; box-shadow: 0 10px 30px rgba(8, 15, 28, .3); cursor: pointer; }
.faixa-versao:hover { filter: brightness(1.08); }
/* Cobrança › Comissão */
.com-regra { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; padding: 10px 14px; border-radius: 12px; background: var(--azul-claro); color: var(--texto-2); font-size: 13px; }
.com-regra svg { width: 18px; height: 18px; color: var(--s1); flex: none; }
.com-regra span { flex: 1 1 260px; min-width: 0; }
.com-regra a { font-weight: 600; white-space: nowrap; }
.com-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 16px; align-items: start; }
.com-rank ol { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }
.com-grade > .cartao { margin: 0; }
.com-rank ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.com-rank li { display: grid; grid-template-columns: 34px minmax(0, 1fr) minmax(40px, 90px) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; }
.com-rank li.top { background: var(--superficie-2); }
.com-rank li.top1 { background: var(--amarelo-claro); }
.com-pos { font-size: 20px; text-align: center; font-weight: 700; color: var(--texto-3); }
.com-rank li:not(.top) .com-pos { font-size: 13px; }
.com-nome { min-width: 0; display: flex; flex-direction: column; }
.com-nome b, .com-nome small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.com-nome small, .com-valor small { color: var(--texto-3); font-size: 12px; }
.com-valor { display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.com-rank .trilho { height: 8px; border-radius: 99px; background: var(--superficie-2); overflow: hidden; }
.com-rank li.top .trilho { background: var(--fundo); }
.com-rank .trilho i { display: block; height: 100%; border-radius: inherit; background: var(--s1); }
.com-rank li.top1 .trilho i { background: #e2a400; }
.com-tabela td, .com-tabela th { white-space: nowrap; }
.com-filial { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.com-modo { border: 0; padding: 0; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.com-modo legend { font-weight: 600; font-size: 13px; color: var(--texto-2); margin-bottom: 6px; padding: 0; }
@media (max-width: 560px) { .com-rank li { grid-template-columns: 30px minmax(0, 1fr) auto; } .com-rank .trilho { display: none; } }
@media (max-width: 700px) { .com-tabela tfoot { display: none; } }
.liberacoes { display: flex; flex-direction: column; gap: 6px; }
.liberacoes-titulo { margin-top: 8px; font-size: 13px; }
.com-conferencia { margin-top: 16px; }
.com-conferencia summary { cursor: pointer; font-size: 14px; }
.com-conferencia h4 { margin: 18px 0 8px; font-size: 13.5px; }
.com-conf-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 10px; margin-top: 14px; }
.com-conf-grade > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--superficie-2); }
.com-conf-grade small { color: var(--texto-3); font-size: 12px; }
.com-conf-grade b { font-size: 17px; font-variant-numeric: tabular-nums; }
.com-setores { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.com-setores li { display: grid; grid-template-columns: minmax(0, 1fr) auto 130px; gap: 10px; align-items: center; padding: 6px 10px; border-radius: 8px; font-size: 13px; }
.com-setores li.sim { background: var(--verde-claro); }
.com-setores li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.com-setores li small { color: var(--texto-3); font-size: 12px; text-align: right; }
.com-setores-cfg .lista-marcar { max-height: 260px; overflow: auto; }
@media (max-width: 560px) { .com-setores li { grid-template-columns: minmax(0, 1fr) auto; } .com-setores li small { display: none; } }
.com-conf-acoes { margin-top: 14px; flex-wrap: wrap; }
.com-acordos td, .com-acordos th { vertical-align: middle; }
.com-conferencia p { font-size: 13px; margin: 4px 0 8px; }
/* Financeiro › DRE */
.dre-regime { display: inline-flex; border: 1px solid var(--borda); border-radius: 10px; overflow: hidden; background: var(--superficie); }
.dre-regime button { border: 0; background: transparent; padding: 8px 14px; font: inherit; font-size: 13.5px; color: var(--texto-2); cursor: pointer; }
.dre-regime button.ativo { background: var(--s1); color: #fff; font-weight: 600; }
.dre-heroi { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; align-items: center; margin-bottom: 16px; border-left: 5px solid #1baf7a; }
.dre-heroi.prejuizo { border-left-color: #e5484d; }
.dre-heroi-txt small { color: var(--texto-3); font-size: 13px; }
.dre-heroi-txt > b { display: block; font-size: 30px; line-height: 1.15; margin: 4px 0 8px; color: #13865d; }
.dre-heroi.prejuizo .dre-heroi-txt > b { color: #c73a3f; }
.dre-heroi-txt p { margin: 4px 0; font-size: 14.5px; }
.dre-heroi-num { display: grid; gap: 8px; }
.dre-heroi-num > div { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 10px 14px; border-radius: 10px; background: var(--superficie-2); }
.dre-heroi-num small { color: var(--texto-3); font-size: 12.5px; }
.dre-heroi-num b { font-size: 17px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dre-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; align-items: start; }
.dre-grade > .cartao { margin: 0; }
.dre-barra { display: flex; height: 26px; border-radius: 8px; overflow: hidden; background: var(--superficie-2); margin: 6px 0 14px; }
.dre-barra i { display: block; height: 100%; min-width: 3px; }
.dre-legenda { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 6px 16px; }
.dre-legenda li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 13px; }
.dre-legenda i { width: 12px; height: 12px; border-radius: 3px; }
.dre-legenda b { font-variant-numeric: tabular-nums; }
.dre-dicas ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.dre-dicas li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; font-size: 13.5px; }
.dre-dicas li p { margin: 0; line-height: 1.45; }
.dre-tabela { margin-bottom: 16px; }
.dre-tabela td, .dre-tabela th { vertical-align: middle; }
.dre-tabela td:not(.texto), .dre-tabela th:not(.texto) { white-space: nowrap; }
.dre-subtotal td { background: var(--superficie-2); font-weight: 600; }
.dre-final td { background: var(--azul-claro); font-size: 15px; }
.dre-apos td { color: var(--texto-2); }
.dre-item td { font-size: 13px; padding-top: 6px; padding-bottom: 6px; }
.dre-item td.texto { padding-left: 38px; }
.dre-abrir { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: inherit; cursor: pointer; text-align: left; }
.dre-abrir > i { width: 8px; height: 8px; border-right: 2px solid var(--texto-3); border-bottom: 2px solid var(--texto-3); transform: rotate(-45deg); transition: transform .15s; flex: none; }
.dre-abrir.aberta > i { transform: rotate(45deg); }
.dre-nome { font-weight: 600; padding-left: 16px; }
.dre-cor { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.dre-explica { font-weight: 400; max-width: 520px; white-space: normal; }
.dre-mover { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; color: var(--texto-3); }
.dre-mover select { font: inherit; font-size: 12px; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--borda); background: var(--superficie); color: var(--texto); max-width: 220px; }
.dre-meses tr.atual td { background: var(--azul-claro); }
.dre-ajuda { margin-top: 16px; }
.dre-ajuda summary { cursor: pointer; }
.dre-ajuda p { font-size: 13.5px; margin: 8px 0; line-height: 1.5; }
@media (max-width: 1100px) { .dre-grade { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) {
  .dre-heroi { grid-template-columns: minmax(0, 1fr); }
  .dre-heroi-txt > b { font-size: 25px; }
  .dre-tabela .dre-ant { display: none; }
  .dre-explica { display: none; }
  .dre-item td.texto { padding-left: 22px; }
}
.dre-tabela .rolagem { max-height: none; }
@media (max-width: 700px) {
  /* DRE no celular: nome em cima; valor, % e variação numa linha só */
  .dre-tabela .tabela-auto tr { grid-template-columns: minmax(0, 1fr) auto auto; gap: 2px 12px; padding: 10px 2px; align-items: baseline; }
  .dre-tabela .tabela-auto td[data-rot]::before { display: none; }
  .dre-tabela .tabela-auto td:first-child { grid-column: 1 / -1; }
  .dre-tabela .tabela-auto td:nth-child(2) { font-size: 15px; }
  .dre-tabela .tabela-auto td:nth-child(3), .dre-tabela .tabela-auto td:nth-child(5) { font-size: 12.5px; color: var(--texto-3); text-align: right !important; }
  .dre-tabela .tabela-auto td.dre-ant { display: none; }
  .dre-tabela .tabela-auto .dre-item td:nth-child(5) { display: none; }
  .dre-tabela .tabela-auto .dre-subtotal, .dre-tabela .tabela-auto .dre-final { border-radius: 8px; padding: 10px 8px; }
  .dre-tabela .tabela-auto .dre-subtotal { background: var(--superficie-2); }
  .dre-tabela .tabela-auto .dre-final { background: var(--azul-claro); }
  .dre-tabela .tabela-auto .dre-item { padding-left: 18px; }
  .dre-regime { width: 100%; }
  .dre-regime button { flex: 1; padding: 8px 6px; }
}
/* DRE em PDF: relatório próprio em A4 (não usa as regras de celular: só existe na impressão) */
.dre-folha { display: none; }
@media print {
  body.imprimindo-dre > :not(.dre-folha), html body.imprimindo-dre > #app.com-menu { display: none !important; }
  body.imprimindo-dre { background: #fff !important; margin: 0; }
  body.imprimindo-dre .dre-folha { display: block !important; width: 100%; color: #1a2233; font-size: 10.5px; line-height: 1.4; }
  .dre-folha * { box-sizing: border-box; }
  .dre-folha header { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding-bottom: 8px; border-bottom: 2px solid #1d4ed8; margin-bottom: 12px; }
  .dre-folha h1 { font-size: 18px; margin: 0; color: #111827; }
  .dre-folha header p { margin: 2px 0 0; color: #4b5563; font-size: 11px; }
  .dre-folha .quem { display: flex; flex-direction: column; align-items: flex-end; font-size: 9.5px; color: #6b7280; }
  .dre-folha .quem b { font-size: 12px; color: #111827; }
  .dre-folha h2 { font-size: 12.5px; margin: 0 0 6px; color: #111827; }
  .dre-folha section { margin-bottom: 12px; break-inside: avoid; }
  .dre-folha .resumo { display: flex; flex-wrap: wrap; gap: 14px; align-items: stretch; padding: 10px 12px; border: 1px solid #d9dee7; border-left: 4px solid #1baf7a; border-radius: 6px; }
  .dre-folha .resumo.prejuizo { border-left-color: #e5484d; }
  .dre-folha .frase { flex: 1.2 1 200px; }
  .dre-folha .frase b { display: block; font-size: 17px; color: #13865d; margin-bottom: 3px; }
  .dre-folha .resumo.prejuizo .frase b { color: #c73a3f; }
  .dre-folha .frase p { margin: 0; font-size: 10.5px; }
  .dre-folha .caixas { flex: 1.6 1 300px; display: grid; grid-template-columns: repeat(auto-fit, minmax(95px, 1fr)); gap: 6px; }
  .dre-folha .caixas div { background: #f3f5f9; border-radius: 5px; padding: 6px 8px; display: flex; flex-direction: column; justify-content: center; }
  .dre-folha .caixas small { font-size: 8.5px; color: #6b7280; }
  .dre-folha .caixas b { font-size: 11.5px; white-space: nowrap; }
  .dre-folha .duas { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .dre-folha .barra { display: flex; height: 14px; border-radius: 4px; overflow: hidden; margin-bottom: 6px; background: #eef1f6; }
  .dre-folha .barra i { display: block; height: 100%; }
  .dre-folha .legenda { width: 100%; border-collapse: collapse; font-size: 10px; }
  .dre-folha .legenda td { padding: 1.5px 3px; }
  .dre-folha .legenda i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; }
  .dre-folha .dicas { margin: 0; padding-left: 14px; font-size: 10px; }
  .dre-folha .dicas li { margin-bottom: 4px; }
  .dre-folha table.dre, .dre-folha table.meses { width: 100%; border-collapse: collapse; font-size: 10px; }
  .dre-folha th { text-align: left; font-size: 8.5px; text-transform: uppercase; letter-spacing: .03em; color: #6b7280; border-bottom: 1px solid #c9d0db; padding: 4px 6px; }
  .dre-folha td { padding: 3.5px 6px; border-bottom: 1px solid #eef1f6; vertical-align: top; }
  .dre-folha .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .dre-folha tr { break-inside: avoid; }
  .dre-folha tr.princ td { font-weight: 600; border-top: 1px solid #dde2ea; }
  .dre-folha tr.sub td { font-weight: 700; background: #f3f5f9; }
  .dre-folha tr.final td { background: #e7efff; font-size: 11.5px; }
  .dre-folha tr.fora td { color: #4b5563; }
  .dre-folha tr.item td { color: #4b5563; font-size: 9.5px; padding-top: 2px; padding-bottom: 2px; }
  .dre-folha tr.item td.nome { padding-left: 20px; }
  .dre-folha tr.resto td { font-style: italic; }
  .dre-folha tr.atual td { background: #e7efff; }
  .dre-folha .bom { color: #13865d; }
  .dre-folha .ruim { color: #c73a3f; }
  .dre-folha .notas p { margin: 0; font-size: 9.5px; color: #4b5563; }
  .dre-folha footer { margin-top: 4px; padding-top: 4px; border-top: 1px solid #d9dee7; font-size: 8.5px; color: #9aa3b2; text-align: right; }
}
@media print {
  .dre-folha .doze { display: grid; grid-template-columns: 1fr 1.25fr; gap: 14px; align-items: start; }
  .dre-folha .graf { display: flex; gap: 4px; align-items: flex-end; height: 120px; padding: 4px 2px 0; border-bottom: 1px solid #c9d0db; }
  .dre-folha .graf .col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
  .dre-folha .graf .barras { flex: 1; width: 100%; display: flex; gap: 1px; align-items: flex-end; justify-content: center; }
  .dre-folha .graf .barras i { display: block; width: 42%; border-radius: 2px 2px 0 0; }
  .dre-folha .graf small { font-size: 7.5px; color: #6b7280; padding-top: 2px; }
  .dre-folha .graf .col.atual small { color: #1d4ed8; font-weight: 700; }
  .dre-folha i.rec { background: #1baf7a; } .dre-folha i.gas { background: #e5484d; }
  .dre-folha .leg { font-size: 8.5px; color: #6b7280; margin: 4px 0 0; }
  .dre-folha .leg i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin: 0 3px 0 8px; vertical-align: -1px; }
  .dre-folha .leg i:first-child { margin-left: 0; }
  .dre-folha .media { font-size: 9.5px; margin: 6px 0 0; padding: 6px 8px; background: #f3f5f9; border-radius: 5px; }
  .dre-folha table.meses td, .dre-folha table.meses th { padding: 2.5px 5px; }
  .dre-folha table.ind, .dre-folha table.top { width: 100%; border-collapse: collapse; font-size: 9.5px; }
  .dre-folha table.ind td.forte { font-weight: 600; white-space: nowrap; }
  .dre-folha table.ind td.expl { color: #4b5563; font-size: 9px; }
  .dre-folha table.top td.cinza { color: #6b7280; }
  .dre-folha .gloss { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 16px; margin: 6px 0 0; font-size: 9px; }
  .dre-folha .gloss div { display: flex; gap: 4px; }
  .dre-folha .gloss dt { font-weight: 700; white-space: nowrap; }
  .dre-folha .gloss dd { margin: 0; color: #4b5563; }
  .dre-folha .quebra { break-before: page; }
}

/* ===== Meu Manager ===== */
main.meu { display: flex; flex-direction: column; gap: 18px; }
.meu-topo { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; padding: 14px 22px 12px; border-radius: 16px; color: #fff;
  background: linear-gradient(120deg, #0f2c55 0%, #1f5fb8 55%, #14b8a6 130%); box-shadow: 0 14px 40px rgba(31, 95, 184, .22); animation: entrar .5s ease-out both; }
.meu-bolha { position: absolute; border-radius: 50%; filter: blur(30px); opacity: .5; pointer-events: none; animation: flutuar-bolha 12s ease-in-out infinite alternate; }
.meu-bolha.b1 { width: 260px; height: 260px; right: -60px; top: -120px; background: #5eead4; }
.meu-bolha.b2 { width: 220px; height: 220px; left: 30%; bottom: -150px; background: #93c5fd; animation-duration: 16s; }
@keyframes flutuar-bolha { from { transform: translate(0, 0); } to { transform: translate(-30px, 20px); } }
.meu-saudacao { position: relative; min-width: 0; }
.meu-data { margin: 0 0 2px; font-size: 12px; opacity: .8; }
.meu-saudacao h1 + .meu-chips { margin-top: 10px; }
.meu-saudacao h1 { margin: 0; font-size: clamp(20px, 2.1vw, 25px); letter-spacing: -.02em; line-height: 1.15; }
.meu-saudacao .emoji { display: inline-block; animation: acenar 2.2s ease-in-out 1; transform-origin: 70% 70%; }
@keyframes acenar { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(14deg); } 40% { transform: rotate(-8deg); } 60% { transform: rotate(10deg); } 80% { transform: rotate(-4deg); } }
.meu-frase { margin: 4px 0 9px; font-size: 12.5px; opacity: .85; font-style: italic; }
.meu-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.meu-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 99px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22); font-size: 12px; backdrop-filter: blur(6px); }
.meu-chip b { font-size: 13px; }
.meu-chip.ruim { background: rgba(239, 68, 68, .35); } .meu-chip.alerta { background: rgba(245, 158, 11, .35); } .meu-chip.bom { background: rgba(34, 197, 94, .3); }
.meu-progresso { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 130px; }
.meu-clima { display: flex; flex-direction: column; align-items: flex-end; gap: 0; align-self: flex-end; margin: -4px -6px 2px 0; padding: 3px 8px 4px; border-radius: 10px; border: 0; background: rgba(255, 255, 255, .1); color: #fff; font: inherit; font-size: 10.5px; cursor: pointer; backdrop-filter: blur(6px); transition: background .2s; text-align: right; line-height: 1.25; }
.meu-clima:hover { background: rgba(255, 255, 255, .2); }
.meu-topo[class*="tempo-"] .meu-clima { background: rgba(10, 20, 35, .28); text-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.meu-topo[class*="tempo-"] .meu-clima:hover { background: rgba(10, 20, 35, .4); }
.meu-topo[class*="tempo-"] .meu-progresso small, .meu-topo[class*="tempo-"] .anel-caixa b { text-shadow: 0 1px 4px rgba(0, 0, 0, .45); }
.meu-topo.tempo-limpo:not(.tempo-noite) .anel .anel-fundo, .meu-topo.tempo-poucas:not(.tempo-noite) .anel .anel-fundo { stroke: rgba(10, 30, 60, .2); }
.meu-clima .clima-linha { display: inline-flex; align-items: center; gap: 5px; }
.meu-clima .clima-icone { font-size: 13px; line-height: 1; }
.meu-clima .clima-temp { font-weight: 800; font-size: 13.5px; letter-spacing: -.02em; }
.meu-clima .clima-desc { opacity: .92; }
.meu-clima .clima-local { opacity: .7; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ----- Céu do cabeçalho: muda com o tempo ----- */
.meu-topo { transition: background 1.2s ease; }
.meu-veu { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(6, 12, 24, .5) 0%, rgba(6, 12, 24, .22) 45%, rgba(6, 12, 24, .05) 75%); opacity: 0; transition: opacity .8s; z-index: 0; }
.meu-topo > .meu-saudacao, .meu-topo > .meu-progresso { z-index: 1; }
.meu-topo .meu-saudacao h1, .meu-topo .meu-data, .meu-topo .meu-frase { text-shadow: 0 1px 8px rgba(0, 0, 0, .35); }
.meu-topo[class*="tempo-"] .meu-veu { opacity: 1; }
.meu-topo[class*="tempo-"] .meu-bolha { display: none; }
.meu-topo.tempo-limpo { background: linear-gradient(120deg, #1d6fd1 0%, #3b9ae8 50%, #8ed0f7 130%); }
.meu-topo.tempo-poucas { background: linear-gradient(120deg, #1f5fb8 0%, #3f8fde 55%, #9ccdef 130%); }
.meu-topo.tempo-nublado { background: linear-gradient(120deg, #3a4a63 0%, #5d6f8a 55%, #8d9db5 130%); }
.meu-topo.tempo-neblina { background: linear-gradient(120deg, #58697f 0%, #7d8ca0 55%, #a9b4c3 130%); }
.meu-topo.tempo-chuva { background: linear-gradient(120deg, #22304a 0%, #34506f 55%, #4f7190 130%); }
.meu-topo.tempo-tempestade { background: linear-gradient(120deg, #141b2d 0%, #28334c 55%, #3b4b68 130%); }
.meu-topo.tempo-neve { background: linear-gradient(120deg, #5b7ea8 0%, #8fb0d6 55%, #cfe0f2 130%); }
.meu-topo.tempo-noite.tempo-limpo, .meu-topo.tempo-noite.tempo-poucas { background: linear-gradient(120deg, #070f24 0%, #0e1f49 55%, #1a3a7a 130%); }
.meu-topo.tempo-noite.tempo-nublado, .meu-topo.tempo-noite.tempo-neblina { background: linear-gradient(120deg, #141b28 0%, #26303f 55%, #3b4759 130%); }
.meu-topo.tempo-noite.tempo-chuva { background: linear-gradient(120deg, #0f1726 0%, #1c2a40 55%, #2d4158 130%); }
.ceu { position: absolute; inset: 0; overflow: hidden; pointer-events: none; border-radius: inherit; }
.ceu-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.anel-caixa { position: relative; width: 56px; height: 56px; }
.anel-caixa b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; font-weight: 800; }
.anel .anel-fundo { stroke: rgba(255, 255, 255, .2); } .anel .anel-valor { stroke: #fff; transition: stroke-dashoffset 1s cubic-bezier(.2, .8, .2, 1); }
.meu-progresso small { font-size: 11px; opacity: .85; text-align: center; }
.meu-semana { display: flex; align-items: flex-end; gap: 3px; height: 16px; }
.meu-semana i { display: block; width: 7px; border-radius: 2px 2px 0 0; background: rgba(255, 255, 255, .45); }
.meu-semana i.hoje { background: #fff; }
.meu-grade { display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px; align-items: start; }
.meu-grade > div { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.meu-secao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: 18px 20px; animation: entrar .45s ease-out both; }
.meu-secao h2 { margin: 0 0 4px; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.meu-secao > .nota { margin: 0 0 12px; }
.meu-conta { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: var(--primaria); color: #fff; font-size: 12px; font-weight: 700; }
.ponto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--texto-3); }
.ponto.bom { background: #22c55e; } .ponto.atencao { background: #f59e0b; } .ponto.ruim { background: #ef4444; }
.meu-deps { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.meu-dep { border: 1px solid var(--borda); border-radius: 12px; padding: 12px 14px; background: var(--superficie-2); transition: transform .2s, box-shadow .2s; }
.meu-dep:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(16, 24, 40, .08); }
.meu-dep.ruim { border-color: color-mix(in srgb, #ef4444 40%, var(--borda)); } .meu-dep.bom { border-color: color-mix(in srgb, #22c55e 35%, var(--borda)); }
.meu-dep header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.meu-dep h3 { margin: 0; font-size: 14px; flex: 1; min-width: 0; }
.meu-dep .ir { font-size: 12px; color: var(--primaria); text-decoration: none; white-space: nowrap; }
.meu-ind { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.meu-ind li { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: 'p r v' 'p c c'; column-gap: 8px; align-items: center; font-size: 13px; }
.meu-ind .ponto { grid-area: p; } .meu-ind .rot { grid-area: r; color: var(--texto-2); } .meu-ind b { grid-area: v; font-variant-numeric: tabular-nums; }
.meu-ind small { grid-area: c; color: var(--texto-3); font-size: 11.5px; }
.meu-dep .nota { margin: 0; font-size: 12.5px; }
.meu-alerta { margin: 10px 0 0; display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #b45309; font-weight: 600; }
.meu-alerta svg { width: 15px; height: 15px; }
.meu-pend { display: flex; flex-direction: column; gap: 12px; }
.meu-pend .bloco h4 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3); }
.meu-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.meu-lista li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--superficie-2); font-size: 13.5px; }
.meu-lista li > span { flex: 1; min-width: 0; } .meu-lista li small { color: var(--texto-3); white-space: nowrap; }
.meu-lista li.atrasada { background: color-mix(in srgb, #ef4444 9%, var(--superficie-2)); } .meu-lista li.atrasada small { color: #dc2626; font-weight: 600; }
.meu-lista li.hoje small { color: #b45309; font-weight: 600; }
.meu-lista li a { color: var(--primaria); text-decoration: none; }
.marcar-feita { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--texto-3); background: transparent; color: transparent; display: grid; place-items: center; cursor: pointer; transition: all .2s; padding: 0; }
.marcar-feita svg { width: 14px; height: 14px; }
.marcar-feita:hover { border-color: #22c55e; color: #22c55e; transform: scale(1.1); }
.meu-tarefa.feita .marcar-feita { background: #22c55e; border-color: #22c55e; color: #fff; }
.meu-nova { margin-bottom: 12px; }
.meu-nova .linha-nova { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border: 1px solid var(--borda); border-radius: 12px; background: var(--superficie-2); }
.meu-nova .linha-nova:focus-within { outline: 2px solid var(--foco); outline-offset: -1px; }
.meu-nova .linha-nova svg { width: 18px; height: 18px; color: var(--texto-3); flex: none; }
.meu-nova input[type=text] { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 14.5px; color: var(--texto); padding: 8px 0; outline: none; }
.opcoes-nova { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.opcoes-nova input, .opcoes-nova select, .meu-editar input, .meu-editar textarea, .meu-editar select { padding: 6px 9px; border: 1px solid var(--borda); border-radius: 8px; background: var(--superficie); color: var(--texto); font: inherit; font-size: 13px; }
.meu-filtros { display: flex; gap: 4px; margin-bottom: 10px; border-bottom: 1px solid var(--borda); }
.meu-filtros button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 10px; font: inherit; font-size: 13.5px; color: var(--texto-2); cursor: pointer; margin-bottom: -1px; }
.meu-filtros button.ativo { color: var(--primaria); border-color: var(--primaria); font-weight: 600; }
.meu-lista-tarefas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.meu-tarefa { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--borda); background: var(--superficie); border-left-width: 4px; transition: background .2s; animation: entrar .3s ease-out both; }
.meu-tarefa:hover { background: var(--superficie-2); }
.meu-tarefa.prio-alta { border-left-color: #ef4444; } .meu-tarefa.prio-normal { border-left-color: var(--primaria); } .meu-tarefa.prio-baixa { border-left-color: var(--texto-3); }
.meu-tarefa.feita { opacity: .7; } .meu-tarefa.feita .titulo { text-decoration: line-through; }
.meu-tarefa .marcar-feita { margin-top: 1px; }
.meu-tarefa .texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.meu-tarefa .titulo { font-size: 14.5px; font-weight: 500; overflow-wrap: anywhere; }
.meu-tarefa .detalhe { color: var(--texto-2); font-size: 12.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.etiquetas { display: flex; flex-wrap: wrap; gap: 6px; }
.etq { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 99px; background: var(--superficie-2); border: 1px solid var(--borda); font-size: 11.5px; color: var(--texto-2); }
.etq svg { width: 12px; height: 12px; }
.etq.ruim { color: #dc2626; border-color: color-mix(in srgb, #dc2626 40%, var(--borda)); } .etq.alerta { color: #b45309; } .etq.bom { color: #15803d; }
.meu-tarefa.prio-alta .etq.prio { color: #dc2626; }
.acoes-tarefa { flex: none; display: flex; gap: 2px; }
.meu-tarefa .editar, .meu-tarefa .excluir, .meu-lista .excluir { flex: none; background: none; border: 0; padding: 5px; border-radius: 6px; color: var(--texto-3); cursor: pointer; transition: color .15s, background .15s; display: grid; place-items: center; }
.meu-tarefa .editar svg, .meu-tarefa .excluir svg, .meu-lista .excluir svg { width: 16px; height: 16px; }
.meu-tarefa .editar:hover { color: var(--primaria); background: var(--superficie-2); }
.meu-tarefa .excluir:hover, .meu-lista .excluir:hover { color: #dc2626; background: color-mix(in srgb, #dc2626 10%, transparent); }
.meu-tarefa.saindo { opacity: .4; transform: translateX(12px); transition: all .25s; }
.meu-editar { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.meu-editar input[type=text] { width: 100%; }
.meu-editar textarea { width: 100%; resize: vertical; }
.meu-editar .acoes { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }
.meu-vazio { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 22px 10px; color: var(--texto-2); }
.meu-vazio .emoji { font-size: 34px; margin-bottom: 4px; } .meu-vazio b { color: var(--texto); } .meu-vazio small { font-size: 12.5px; }
.confete { position: fixed; z-index: 999; pointer-events: none; width: 0; height: 0; }
.confete i { position: absolute; width: 8px; height: 8px; border-radius: 2px; left: -4px; top: -4px; animation: confete 1s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes confete { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--dx), calc(var(--dy) + 80px)) rotate(var(--rot)); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .meu-bolha, .meu-saudacao .emoji, .meu-topo, .meu-secao, .meu-tarefa { animation: none; } .anel .anel-valor { transition: none; } }
#app.com-menu main.meu > .meu-topo { padding-right: 130px; }
@media (max-width: 900px) { #app.com-menu main.meu > .meu-topo { padding-right: 28px; } }
@media (max-width: 1100px) { .meu-grade { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  #app.com-menu main.meu > .meu-topo, .meu-topo { grid-template-columns: 1fr; padding: 14px 16px 12px; }
  .meu-progresso { flex-direction: row; justify-content: space-between; align-items: center; width: 100%; flex-wrap: wrap; }
  .meu-clima { order: -1; width: 100%; align-self: auto; align-items: center; text-align: center; margin: 0 0 6px; }
  .meu-progresso small { text-align: left; }
  .meu-deps { grid-template-columns: 1fr; }
  .meu-nova .linha-nova .botao { padding: 6px 10px; font-size: 13px; }
}

/* Tarefas por status */
.meu-chip.andamento { background: rgba(59, 130, 246, .38); }
.grupos-status { display: flex; flex-direction: column; gap: 14px; }
.grupo-status { display: flex; align-items: center; gap: 8px; width: 100%; margin: 0 0 8px; padding: 0; border: 0; background: none; font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--texto-2); text-align: left; }
button.grupo-status { cursor: pointer; }
.grupo-status .marca-status { width: 10px; height: 10px; border-radius: 3px; background: var(--texto-3); }
.grupo-status.st-andamento .marca-status { background: #3b82f6; } .grupo-status.st-a_fazer .marca-status { background: #f59e0b; } .grupo-status.st-feita .marca-status { background: #22c55e; }
.grupo-status .conta-status { min-width: 20px; padding: 0 6px; border-radius: 99px; background: var(--superficie-2); border: 1px solid var(--borda); text-align: center; font-size: 11.5px; color: var(--texto); letter-spacing: 0; }
.grupo-status .seta { margin-left: auto; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; }
.grupo-status[aria-expanded="true"] .seta { transform: rotate(-135deg); }
.grupo-vazio { margin: 0; padding: 10px 12px; border: 1px dashed var(--borda); border-radius: 10px; font-size: 12.5px; color: var(--texto-3); }
.meu-tarefa.st-andamento { background: color-mix(in srgb, #3b82f6 6%, var(--superficie)); }
.status-tarefa { appearance: none; -webkit-appearance: none; padding: 2px 9px; border-radius: 99px; border: 1px solid var(--borda); background: var(--superficie-2); color: var(--texto-2); font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; align-self: center; }
.status-tarefa.st-andamento { color: #1d4ed8; border-color: color-mix(in srgb, #3b82f6 45%, var(--borda)); background: color-mix(in srgb, #3b82f6 10%, var(--superficie)); }
.status-tarefa.st-a_fazer { color: #b45309; border-color: color-mix(in srgb, #f59e0b 45%, var(--borda)); background: color-mix(in srgb, #f59e0b 10%, var(--superficie)); }
.status-tarefa.st-feita { color: #15803d; border-color: color-mix(in srgb, #22c55e 45%, var(--borda)); background: color-mix(in srgb, #22c55e 10%, var(--superficie)); }
:root[data-theme="dark"] .status-tarefa.st-andamento { color: #93c5fd; } :root[data-theme="dark"] .status-tarefa.st-a_fazer { color: #fcd34d; } :root[data-theme="dark"] .status-tarefa.st-feita { color: #86efac; }
.acoes-tarefa { align-items: center; }
@media (max-width: 640px) { .meu-tarefa { flex-wrap: wrap; } .acoes-tarefa { width: 100%; justify-content: flex-end; padding-left: 34px; } }

/* ===== Marketing › Projetos ===== */
main.proj { display: flex; flex-direction: column; gap: 16px; }
.proj-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
#app.com-menu main.proj > .proj-cab { padding-right: 118px; }
.proj-cab h1 { margin: 0 0 4px; }
.proj-cab .nota { margin: 0; max-width: 640px; }
.proj-cab-dir { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.proj-ticket { padding: 6px 12px; border-radius: 99px; background: var(--superficie); border: 1px solid var(--borda); font-size: 13px; color: var(--texto-2); }
.proj-ticket b { color: var(--texto); }
.proj-editor h2 { margin: 0 0 12px; font-size: 17px; }
.proj-editor textarea, .proj-editor input[type=text], .proj-editor select { width: 100%; }
.proj-itens input { width: 100%; padding: 6px 8px; border: 1px solid var(--borda); border-radius: 8px; background: var(--superficie); color: var(--texto); font: inherit; font-size: 13.5px; }
.proj-itens td.num input { text-align: right; }
.proj-itens thead th:nth-child(2), .proj-itens tbody td:nth-child(2) { width: 80px; }
.proj-itens thead th:nth-child(3), .proj-itens tbody td:nth-child(3) { width: 140px; }
.proj-itens thead th:nth-child(4), .proj-itens tbody td:nth-child(4) { width: 130px; white-space: nowrap; }
.proj-itens thead th:last-child, .proj-itens tbody td:last-child { width: 36px; }
.proj-itens tfoot th { font-size: 14px; }
.proj-total-valor { font-size: 15px; }
.excluir-item { background: none; border: 0; padding: 5px; border-radius: 6px; color: var(--texto-3); cursor: pointer; display: grid; place-items: center; }
.excluir-item svg { width: 16px; height: 16px; }
.excluir-item:hover { color: #dc2626; background: color-mix(in srgb, #dc2626 10%, transparent); }
.proj-mais { margin: 8px 0 14px; display: inline-flex; align-items: center; gap: 6px; }
.proj-mais svg { width: 14px; height: 14px; }
.proj-clientes { border-radius: 12px; padding: 12px 14px; background: color-mix(in srgb, var(--primaria) 6%, var(--superficie-2)); border: 1px solid color-mix(in srgb, var(--primaria) 18%, var(--borda)); }
.proj-clientes.destaque { animation: proj-brilho 1.6s ease-out 1; }
@keyframes proj-brilho { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primaria) 45%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }
.proj-clientes-titulo { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--texto-2); }
.proj-prazos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.proj-prazo { display: flex; flex-direction: column; align-items: flex-start; padding: 8px 10px; border-radius: 10px; background: var(--superficie); border: 1px solid var(--borda); }
.proj-prazo b { font-size: 22px; line-height: 1.1; letter-spacing: -.02em; }
.proj-prazo span { font-size: 12px; color: var(--texto-2); }
.proj-prazo small { font-size: 11px; color: var(--texto-3); margin-top: 2px; }
.proj-prazo.doze { border-color: color-mix(in srgb, var(--primaria) 40%, var(--borda)); }
.proj-prazo.doze b { color: var(--primaria); }
.proj-conta { margin: 8px 0 0; font-size: 11.5px; color: var(--texto-3); }
.proj-previa { margin-bottom: 14px; }
.proj-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 16px; align-items: start; }
.proj-cartao { display: flex; flex-direction: column; gap: 10px; }
.proj-cartao.recem { outline: 2px solid color-mix(in srgb, var(--primaria) 55%, transparent); }
.proj-cartao header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.proj-cartao h3 { margin: 0 0 4px; font-size: 16px; }
.proj-acoes { display: flex; gap: 6px; flex: none; }
.proj-acoes .botao { display: inline-flex; align-items: center; gap: 5px; }
.proj-acoes svg { width: 14px; height: 14px; }
.proj-sit { display: inline-block; padding: 1px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 600; background: var(--superficie-2); border: 1px solid var(--borda); color: var(--texto-2); }
.proj-sit.sit-andamento { color: #1d4ed8; border-color: color-mix(in srgb, #3b82f6 45%, var(--borda)); background: color-mix(in srgb, #3b82f6 10%, var(--superficie)); }
.proj-sit.sit-concluido { color: #15803d; border-color: color-mix(in srgb, #22c55e 45%, var(--borda)); background: color-mix(in srgb, #22c55e 10%, var(--superficie)); }
.proj-sit.sit-cancelado { color: #b91c1c; border-color: color-mix(in srgb, #ef4444 40%, var(--borda)); }
.proj-cartao.sit-cancelado { opacity: .7; }
.proj-desc { margin: 0; font-size: 13px; color: var(--texto-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.proj-lista-itens summary { cursor: pointer; font-size: 13.5px; color: var(--texto-2); }
.proj-lista-itens summary b { color: var(--texto); font-size: 15px; }
.proj-lista-itens ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.proj-lista-itens li { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 5px 8px; border-radius: 8px; background: var(--superficie-2); }
.proj-lista-itens li span { min-width: 0; overflow-wrap: anywhere; } .proj-lista-itens li small { color: var(--texto-3); }
.proj-quem { color: var(--texto-3); font-size: 11.5px; }
.proj-vazio { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 40px 16px; text-align: center; }
.proj-vazio .emoji { font-size: 36px; }
@media (max-width: 900px) { #app.com-menu main.proj > .proj-cab { padding-right: 0; } }
@media (max-width: 640px) {
  .proj-grade { grid-template-columns: 1fr; }
  .proj-prazos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proj-cartao header { flex-direction: column; }
  .proj-itens thead th:nth-child(4), .proj-itens tbody td:nth-child(4) { display: none; }
  .proj-itens thead th:nth-child(3), .proj-itens tbody td:nth-child(3) { width: 100px; }
  .proj-itens thead th:nth-child(2), .proj-itens tbody td:nth-child(2) { width: 54px; }
  .proj-editor .duas { grid-template-columns: 1fr; }
}
.proj-itens th:first-child, .proj-itens td:first-child { text-align: left; }
.proj-itens td { white-space: normal; }
.proj-itens tbody td { padding: 5px 6px; }
.proj-editor textarea { font: inherit; font-size: 14px; padding: 9px 11px; border: 1px solid var(--borda); border-radius: 8px; background: var(--superficie); color: var(--texto); resize: vertical; }

/* Aprovação dos projetos */
.proj-aprov-geral { display: inline-block; padding: 1px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 700; border: 1px solid var(--borda); }
.proj-aprov-geral.bom { color: #15803d; background: color-mix(in srgb, #22c55e 12%, var(--superficie)); border-color: color-mix(in srgb, #22c55e 45%, var(--borda)); }
.proj-aprov-geral.ruim { color: #b91c1c; background: color-mix(in srgb, #ef4444 10%, var(--superficie)); border-color: color-mix(in srgb, #ef4444 40%, var(--borda)); }
.proj-aprov-geral.espera { color: #b45309; background: color-mix(in srgb, #f59e0b 10%, var(--superficie)); border-color: color-mix(in srgb, #f59e0b 45%, var(--borda)); }
.aprov-titulo { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--texto-3); }
.aprov-etapas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.aprov-etapa { display: grid; grid-template-columns: auto 1fr; grid-template-areas: 'i t' 'b b'; gap: 4px 8px; align-items: start; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--borda); background: var(--superficie-2); }
.aprov-icone { grid-area: i; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: var(--superficie); border: 1px solid var(--borda); color: var(--texto-3); }
.aprov-etapa.aprovado { border-color: color-mix(in srgb, #22c55e 45%, var(--borda)); background: color-mix(in srgb, #22c55e 7%, var(--superficie)); }
.aprov-etapa.aprovado .aprov-icone { background: #22c55e; border-color: #22c55e; color: #fff; }
.aprov-etapa.reprovado { border-color: color-mix(in srgb, #ef4444 40%, var(--borda)); background: color-mix(in srgb, #ef4444 6%, var(--superficie)); }
.aprov-etapa.reprovado .aprov-icone { background: #ef4444; border-color: #ef4444; color: #fff; }
.aprov-texto { grid-area: t; display: flex; flex-direction: column; min-width: 0; }
.aprov-texto b { font-size: 13px; } .aprov-texto small { font-size: 11.5px; color: var(--texto-2); }
.aprov-obs { font-style: italic; overflow-wrap: anywhere; }
.aprov-botoes { grid-area: b; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.botao.aprovar { color: #15803d; border-color: color-mix(in srgb, #22c55e 50%, var(--borda)); }
.botao.aprovar:hover { background: color-mix(in srgb, #22c55e 12%, var(--superficie)); }
.botao.reprovar { color: #b91c1c; }
.aviso-aprov { margin: 0 0 12px; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, #f59e0b 12%, var(--superficie)); border: 1px solid color-mix(in srgb, #f59e0b 40%, var(--borda)); font-size: 13px; color: #92400e; }
:root[data-theme="dark"] .aviso-aprov { color: #fcd34d; }
@media (max-width: 640px) { .aprov-etapas { grid-template-columns: 1fr; } }

/* Fluxo dos projetos: trilha, fornecedores e datas de pagamento */
.proj-aprovadores { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 13px; color: var(--texto-2); }
.proj-aprovadores select { margin-left: 4px; padding: 4px 8px; border: 1px solid var(--borda); border-radius: 8px; background: var(--superficie); color: var(--texto); font: inherit; font-size: 13px; }
.proj-aprovador b { color: var(--texto); }
.proj-aprov-geral.info { color: #1d4ed8; background: color-mix(in srgb, #3b82f6 10%, var(--superficie)); border-color: color-mix(in srgb, #3b82f6 45%, var(--borda)); }
.proj-trilha { list-style: none; margin: 2px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; counter-reset: p; }
.proj-trilha li { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11.5px; color: var(--texto-3); text-align: center; position: relative; }
.proj-trilha li::before { content: ''; position: absolute; top: 11px; left: -50%; width: 100%; height: 2px; background: var(--borda); z-index: 0; }
.proj-trilha li:first-child::before { display: none; }
.proj-trilha li i { position: relative; z-index: 1; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 12px; background: var(--superficie); border: 2px solid var(--borda); color: var(--texto-3); }
.proj-trilha li.feito i { background: #22c55e; border-color: #22c55e; color: #fff; } .proj-trilha li.feito::before, .proj-trilha li.atual::before { background: #22c55e; }
.proj-trilha li.feito { color: #15803d; }
.proj-trilha li.atual i { border-color: var(--primaria); color: var(--primaria); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primaria) 18%, transparent); }
.proj-trilha li.atual { color: var(--texto); font-weight: 600; }
.proj-trilha li.atual.ruim i { border-color: #ef4444; color: #ef4444; box-shadow: 0 0 0 4px color-mix(in srgb, #ef4444 15%, transparent); }
.proj-etapa { border-top: 1px dashed var(--borda); padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.proj-etapa .nota { margin: 0; }
.proj-etapa .acoes { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 0; }
.proj-etapa .acoes .botao { display: inline-flex; align-items: center; gap: 6px; } .proj-etapa .acoes svg { width: 15px; height: 15px; }
.proj-forn-linhas, .proj-parc-linhas { display: flex; flex-direction: column; gap: 6px; }
.proj-forn-linha { display: grid; grid-template-columns: 1.3fr .8fr 1.3fr auto; gap: 6px; align-items: center; }
.proj-forn-linha input, .proj-parc-linha input, .proj-parc-cab select, .proj-etapa textarea { width: 100%; padding: 6px 8px; border: 1px solid var(--borda); border-radius: 8px; background: var(--superficie); color: var(--texto); font: inherit; font-size: 13.5px; }
.proj-forn-linha .f-valor, .proj-parc-linha .p-valor { text-align: right; }
.proj-etapa textarea { resize: vertical; }
.proj-forn-total { margin: 0; font-size: 13.5px; color: var(--texto-2); }
.proj-forn-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.proj-forn-lista li { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 6px 9px; border-radius: 8px; background: var(--superficie-2); }
.proj-forn-lista li small { color: var(--texto-3); }
.proj-parcelas { display: flex; flex-direction: column; gap: 10px; }
.proj-parc-forn { border: 1px solid var(--borda); border-radius: 10px; padding: 9px 10px; background: var(--superficie-2); display: flex; flex-direction: column; gap: 6px; }
.proj-parc-forn > b { font-size: 13.5px; }
.proj-parc-forn ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.proj-parc-forn li { display: flex; justify-content: space-between; font-size: 13px; }
.proj-parc-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.proj-parc-cab b { font-size: 13.5px; } .proj-parc-cab select { width: auto; }
.proj-parc-linha { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; align-items: center; }
.proj-parc-rodape { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.proj-parc-rodape .botao { display: inline-flex; align-items: center; gap: 5px; } .proj-parc-rodape svg { width: 13px; height: 13px; }
.proj-parc-resto { font-size: 12px; font-weight: 600; }
.proj-liberado { margin: 0; font-weight: 700; color: #15803d; }
@media (max-width: 640px) {
  .proj-forn-linha { grid-template-columns: 1fr 1fr auto; } .proj-forn-linha .f-obs { grid-column: 1 / 3; grid-row: 2; }
  .proj-trilha li span { font-size: 10.5px; }
}
.proj-etapa > .botao { align-self: flex-start; }

/* Local do projeto e vendas do bairro */
.proj-local { margin: 0; font-size: 13.5px; } .proj-local small { color: var(--texto-3); }
.proj-previa-bairro:empty { display: none; }
.proj-previa-bairro { margin: -4px 0 14px; } .proj-previa-bairro .nota { margin: 0; }
.proj-bairro { border-radius: 12px; padding: 10px 12px; border: 1px solid var(--borda); background: var(--superficie-2); }
.proj-bairro-corpo { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; }
.proj-bairro-barras { display: flex; align-items: flex-end; gap: 6px; height: 92px; }
.pb-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; width: 30px; }
.pb-col b { font-size: 11.5px; } .pb-col small { font-size: 10.5px; color: var(--texto-3); }
.pb-col i { display: block; width: 18px; border-radius: 4px 4px 0 0; background: color-mix(in srgb, var(--primaria) 55%, transparent); }
.pb-col.atual i { background: color-mix(in srgb, var(--primaria) 25%, transparent); border: 1px dashed var(--primaria); border-bottom: 0; }
.proj-bairro-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; flex: 1; min-width: 200px; }
.proj-bairro-nums div { display: flex; flex-direction: column; } .proj-bairro-nums b { font-size: 17px; } .proj-bairro-nums small { font-size: 11px; color: var(--texto-3); }
/* Meu Manager: aprovações */
.meu-aprovacoes h2 svg { width: 18px; height: 18px; color: var(--primaria); }
.meu-aprovacoes { border-color: color-mix(in srgb, var(--primaria) 35%, var(--borda)); }
.meu-aprovacoes .bloco h4 { margin: 10px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3); }
.meu-aprov-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.meu-aprov { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--superficie-2); border: 1px solid var(--borda); border-left: 4px solid #f59e0b; }
.meu-aprov.acao-datas { border-left-color: #3b82f6; } .meu-aprov.acao-fornecedores { border-left-color: #8b5cf6; }
.meu-aprov-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.meu-aprov-texto b { font-size: 14px; } .meu-aprov-texto small { font-size: 12px; color: var(--texto-2); }
.meu-aprov-botoes { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; flex: none; }
.meu-aprov-botoes a.botao { text-decoration: none; }
@media (max-width: 640px) { .meu-aprov { flex-direction: column; align-items: stretch; } .meu-aprov-botoes { justify-content: flex-start; } }

/* Projetos na largura toda (padrão das outras telas) */
.proj-grade { grid-template-columns: 1fr; }
.proj-cartao { padding: 18px 22px; }
.proj-cartao header h3 { font-size: 17px; }
.proj-colunas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 28px; align-items: start; }
.proj-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.proj-col-fluxo { padding-left: 28px; border-left: 1px solid var(--borda); }
.proj-col-fluxo > .proj-etapa:first-of-type { border-top: 0; padding-top: 0; }
.proj-col-fluxo .proj-trilha { margin-bottom: 4px; }
@media (max-width: 1100px) { .proj-colunas { grid-template-columns: 1fr; } .proj-col-fluxo { padding-left: 0; border-left: 0; border-top: 1px solid var(--borda); padding-top: 14px; } }

/* Financeiro: três cartões por fileira (sem os "em aberto") */
.cob-kpis.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .cob-kpis.tres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cob-kpis.tres { grid-template-columns: 1fr; } }

.tec-planejada { margin: 4px 0 18px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--texto-2); font-size: 14px; }

/* ===== Operação Técnica › Painel de Chamados ===== */
main.tp { display: flex; flex-direction: column; gap: 18px; --tp-exec: #1baf7a; --tp-desl: #eda100; --tp-livre: var(--neutro); --tp-fila: var(--primaria); --tp-atr: var(--ruim); }
.tp-topo { border-radius: 18px; padding: 20px 24px; color: #fff; background: radial-gradient(120% 140% at 100% 0%, #1f63b8 0%, #12305a 55%, #0b1b33 100%); box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 18px; }
.tp-titulo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.tp-titulo h1 { margin: 6px 0 2px; font-size: 1.6rem; letter-spacing: -.02em; }
.tp-titulo p { margin: 0; color: #c7d6ea; font-size: .9rem; }
.tp-prox { font-variant-numeric: tabular-nums; }
.tp-vivo { display: inline-flex; align-items: center; gap: 7px; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8ff0c4; }
.tp-vivo i { width: 9px; height: 9px; border-radius: 50%; background: #2fe39a; box-shadow: 0 0 0 0 rgba(47, 227, 154, .7); animation: tp-pulso 1.8s infinite; }
@keyframes tp-pulso { 0% { box-shadow: 0 0 0 0 rgba(47, 227, 154, .6); } 70% { box-shadow: 0 0 0 10px rgba(47, 227, 154, 0); } 100% { box-shadow: 0 0 0 0 rgba(47, 227, 154, 0); } }
@media (prefers-reduced-motion: reduce) { .tp-vivo i { animation: none; } }
.tp-demo { font-size: .72rem; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .14); white-space: nowrap; }
.tp-kpis { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 12px; }
.tp-kpi { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tp-kpi small { color: #b7c7dc; font-size: .78rem; }
.tp-kpi b { font-size: 1.65rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tp-kpi span { color: #c7d6ea; font-size: .78rem; }
.tp-kpi.ruim b { color: #ff9b9b; }
.tp-kpi.atencao b { color: #ffd27a; }
.tp-kpi.bom b { color: #8ff0c4; }
.tp-barra { height: 6px; border-radius: 99px; background: rgba(127, 140, 160, .25); overflow: hidden; }
.tp-barra i { display: block; height: 100%; border-radius: inherit; background: var(--tp-exec); }
.tp-topo .tp-barra { background: rgba(255, 255, 255, .16); margin: 4px 0 2px; }
.tp-topo .tp-barra i { background: linear-gradient(90deg, #2fe39a, #8ff0c4); }
.tp-avisos { display: flex; flex-direction: column; gap: 6px; }
.tp-avisos p { margin: 0; padding: 9px 14px; border-radius: 10px; font-size: .86rem; background: color-mix(in srgb, var(--s4) 14%, var(--superficie)); border: 1px solid color-mix(in srgb, var(--s4) 40%, var(--borda)); }

.tp-equipe { display: flex; flex-direction: column; gap: 14px; }
.tp-grupo h2, .tp-sec-cab h2 { font-size: 1.05rem; margin: 0; display: flex; align-items: baseline; gap: 10px; }
.tp-grupo h2 small { font-weight: 500; color: var(--texto-3); font-size: .8rem; }
.tp-tecs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 10px; }
.tp-tecs.um { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
.tp-tec { --c: var(--tp-livre); position: relative; background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px; padding: 14px 16px 12px; box-shadow: var(--sombra);
  display: flex; flex-direction: column; gap: 10px; cursor: pointer; overflow: hidden; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.tp-tec::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--c); }
.tp-tec:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(16, 24, 40, .1); }
.tp-tec:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.tp-tec.sel { border-color: var(--primaria); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primaria) 30%, transparent); }
.tp-tec.exec { --c: var(--tp-exec); }
.tp-tec.desl { --c: var(--tp-desl); }
.tp-tec-cab { display: flex; align-items: center; gap: 11px; }
.tp-tec-cab b { display: block; font-size: .98rem; }
.tp-avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .85rem; color: var(--c);
  background: color-mix(in srgb, var(--c) 14%, var(--superficie)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 55%, transparent); }
.tp-fase { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--texto-2); }
.tp-fase i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.tp-tec.exec .tp-fase i, .tp-tec.desl .tp-fase i { animation: tp-pisca 1.6s ease-in-out infinite; }
@keyframes tp-pisca { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .tp-tec .tp-fase i { animation: none; } }
.tp-tec-agora { min-height: 40px; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 8px 10px; border-radius: 10px; background: var(--superficie-2); }
.tp-tec-agora b { font-size: .88rem; }
.tp-tec-agora small { color: var(--texto-2); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-alerta { color: var(--ruim) !important; white-space: normal !important; }
.tp-tec-dia { display: flex; flex-direction: column; gap: 5px; }
.tp-tec-dia small { font-size: .8rem; color: var(--texto-2); }
.tp-tec-dia small b { color: var(--texto); }
.tp-atraso { color: var(--ruim); font-weight: 600; }
.tp-tec-mes { font-size: .76rem; color: var(--texto-3); border-top: 1px dashed var(--borda); padding-top: 8px; }

.tp-sec-cab { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.tp-sec-cab small { color: var(--texto-3); font-size: .82rem; }
.tp-dia-lista ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 420px; overflow-y: auto; }
.tp-os { --c: var(--tp-fila); display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 8px 10px; border-radius: 10px; background: var(--superficie); border: 1px solid var(--borda); border-left: 3px solid var(--c); }
.tp-os.fase-exec { --c: var(--tp-desl); }
.tp-os.fase-desl { --c: var(--tp-desl); }
.tp-os.fase-fin { --c: var(--tp-exec); }
.tp-os.atrasada { --c: var(--tp-atr); }
.tp-os-hora { font-weight: 700; font-variant-numeric: tabular-nums; font-size: .88rem; padding-top: 1px; }
.tp-os-corpo { display: flex; flex-direction: column; min-width: 0; }
.tp-os-corpo b { font-size: .86rem; }
.tp-os-corpo small { font-size: .77rem; color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-os-corpo .tp-os-meta { color: var(--texto-3); }
.tp-chip { font-size: .7rem; font-weight: 600; padding: 2px 8px; border-radius: 99px; white-space: nowrap; color: var(--c); background: color-mix(in srgb, var(--c) 13%, var(--superficie)); }
.tp-vazio { color: var(--texto-3); font-size: .85rem; margin: 8px 4px; }

.tp-filtros { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.tp-filtro { border: 1px solid var(--borda); background: var(--superficie); color: var(--texto-2); border-radius: 99px; padding: 5px 12px; font: inherit; font-size: .8rem; cursor: pointer; }
.tp-filtro[aria-pressed="true"] { background: var(--primaria); border-color: var(--primaria); color: var(--primaria-texto); }
.tp-cal-corpo { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.tp-grade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.tp-sem { text-align: center; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3); padding-bottom: 2px; }
.tp-dia { position: relative; min-height: 76px; border-radius: 10px; border: 1px solid var(--borda); padding: 6px 7px; font: inherit; color: var(--texto); text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 2px; background: color-mix(in srgb, var(--primaria) calc(var(--carga, 0) * 16%), var(--superficie)); transition: border-color .12s ease, transform .12s ease; }
.tp-dia:hover { border-color: var(--primaria); }
.tp-dia.fora { border: none; background: none; cursor: default; }
.tp-dia.sem-os { background: var(--superficie); }
.tp-dia.passado { opacity: .78; }
.tp-dia.hoje { border: 2px solid var(--primaria); opacity: 1; }
.tp-dia.sel { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primaria) 35%, transparent); opacity: 1; }
.tp-dia-n { font-size: .78rem; color: var(--texto-2); font-weight: 600; }
.tp-dia.hoje .tp-dia-n { color: var(--primaria); }
.tp-dia b { font-size: 1.15rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tp-dia-barra { margin-top: auto; display: flex; height: 5px; border-radius: 99px; overflow: hidden; gap: 1px; }
.tp-dia-barra i, .tp-legenda i { display: block; }
:is(.tp-dia-barra, .tp-legenda) .fin { background: var(--tp-fila); } :is(.tp-dia-barra, .tp-legenda) .abe { background: var(--tp-desl); } :is(.tp-dia-barra, .tp-legenda) .atr { background: var(--tp-atr); } :is(.tp-dia-barra, .tp-legenda) .sol { background: var(--tp-exec); } :is(.tp-dia-barra, .tp-legenda) .and { background: var(--tp-desl); }
.tp-selects { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-bottom: 14px; }
.tp-assunto { display: flex; align-items: center; gap: 10px; font-size: .84rem; color: var(--texto-2); flex-wrap: wrap; }
.tp-assunto select { font: inherit; font-size: .86rem; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--borda); background: var(--superficie); color: var(--texto); min-width: 220px; max-width: 100%; }
.tp-legenda { grid-column: 1 / -1; display: flex; gap: 14px; font-size: .76rem; color: var(--texto-3); margin-top: 4px; }
.tp-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.tp-legenda i { width: 10px; height: 10px; border-radius: 3px; }
.tp-dia-lista { background: var(--superficie-2); border-radius: 12px; padding: 12px; min-width: 0; }
.tp-dia-lista h3 { margin: 0 2px 10px; font-size: .95rem; display: flex; flex-direction: column; }
.tp-dia-lista h3 small { font-weight: 500; color: var(--texto-3); font-size: .78rem; }
.tp-dia-lista ul { max-height: 470px; }

.tp-assuntos ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; row-gap: 8px; }
.tp-assuntos li { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr) 40px; gap: 10px; align-items: center; font-size: .84rem; }
.tp-ass-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto-2); }
.tp-ass-barra { height: 10px; border-radius: 99px; background: var(--grade); overflow: hidden; }
.tp-ass-barra > i { display: block; height: 100%; border-radius: inherit; background: color-mix(in srgb, var(--primaria) 35%, var(--superficie)); }
.tp-ass-barra > i > i { display: block; height: 100%; border-radius: inherit; background: var(--primaria); }
.tp-assuntos li b { text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 1180px) {
  .tp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tp-tecs, .tp-tecs.um { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tp-cal-corpo { grid-template-columns: 1fr; }
  .tp-assuntos ul { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .tp-topo { padding: 16px; }
  .tp-titulo h1 { font-size: 1.3rem; }
  .tp-kpi b { font-size: 1.3rem; }
  .tp-tecs, .tp-tecs.um { grid-template-columns: 1fr; }
  .tp-grade { gap: 3px; }
  .tp-dia { min-height: 54px; padding: 4px; }
  .tp-dia b { font-size: .95rem; }
  .tp-assuntos li { grid-template-columns: minmax(0, 130px) minmax(0, 1fr) 32px; }
}

/* Menu: grupo dentro do submenu (Operação Técnica › Veículos) */
.menu-itens .submenu .sub-grupo { display: flex; flex-direction: column; gap: 2px; }
.menu-itens .submenu .sub-grupo-nome { padding: 8px 10px 2px; font-size: 14px; color: var(--menu-texto); opacity: .85; }
.menu-itens .submenu .sub-filhos { position: relative; display: flex; flex-direction: column; gap: 2px; margin-left: 12px; padding-left: 10px; border-left: 1px dashed rgba(255, 255, 255, .14); }
.menu-itens .submenu .sub-filhos a { font-size: 13.5px; padding: 7px 10px; }

/* ===== Operação Técnica › Veículos › Manutenção ===== */
.vm-periodo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.vm-mes { background: rgba(255, 255, 255, .12); color: #fff; border: 1px solid rgba(255, 255, 255, .25); border-radius: 10px; padding: 7px 10px; font: inherit; font-size: .88rem; }
.vm-mes option { color: #111827; }
.vm-atual { background: #fff; color: #12305a; border: 0; border-radius: 10px; padding: 8px 12px; font: inherit; font-weight: 600; font-size: .85rem; cursor: pointer; }
.vm .tp-kpi b { font-size: 1.45rem; }
.vm-grade { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.vm-tabela { display: flex; flex-direction: column; }
.vm-linha { display: grid; grid-template-columns: 110px minmax(0, 1fr) 80px minmax(0, 1fr) 64px minmax(0, 1.5fr); gap: 12px; align-items: center; padding: 10px 4px; border-bottom: 1px solid var(--grade); font-size: .88rem; }
.vm-linha.cab { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-3); padding-top: 0; }
.vm-linha:last-child { border-bottom: 0; }
.vm-linha .num { text-align: right; font-variant-numeric: tabular-nums; }
.vm-modelo { display: flex; flex-direction: column; min-width: 0; }
.vm-modelo b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vm-modelo small { color: var(--texto-3); font-size: .76rem; }
.vm-como { color: var(--texto-3); font-size: .74rem; }
.vm-condutor { color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .84rem; }
.vm-carro-nome { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vm-carro-nome.falta { font-weight: 400; color: var(--texto-3); }
.vm-servicos li > .vm-data { grid-area: data; } .vm-servicos li > .vm-placa { grid-area: placa; justify-self: start; } .vm-servicos li > .vm-carro-nome { grid-area: carro; }
.vm-servicos li > .vm-condutor { grid-area: cond; } .vm-servicos li > .vm-desc { grid-area: desc; } .vm-servicos li > b { grid-area: valor; } .vm-servicos li > .tp-chip { grid-area: sit; }
.vm-servicos li.cab > span { grid-area: auto; }
.vm-servicos li.cab { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-3); padding-top: 0; }
.vm-valor { display: grid; grid-template-columns: auto minmax(40px, 1fr); gap: 4px 10px; align-items: center; }
.vm-valor b { font-variant-numeric: tabular-nums; }
.vm-valor small { grid-column: 1 / -1; color: var(--texto-3); font-size: .76rem; }
.vm-valor .tp-ass-barra > i { background: var(--primaria); }
.vm-placa { display: inline-block; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 700; font-size: .82rem; letter-spacing: .06em; padding: 3px 8px; border-radius: 6px;
  border: 1.5px solid var(--texto); border-top-width: 5px; border-top-color: #1f63b8; background: var(--superficie); white-space: nowrap; }
.vm-placa.sem { font-family: inherit; font-weight: 500; letter-spacing: 0; border: 1px dashed var(--borda); color: var(--texto-3); }
.vm-barras { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; height: 220px; align-items: end; }
.vm-barra { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--texto-2); }
.vm-barra i { display: block; width: 100%; max-width: 46px; border-radius: 8px 8px 3px 3px; background: color-mix(in srgb, var(--primaria) 35%, var(--superficie)); transition: background .15s ease; }
.vm-barra.sel i, .vm-barra:hover i { background: var(--primaria); }
.vm-barra small { font-size: .7rem; white-space: nowrap; }
.vm-barra span { font-size: .74rem; }
.vm-barra.sel span { color: var(--texto); font-weight: 700; }
.vm-servicos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.vm-servicos li { display: grid; grid-template-columns: 44px 100px 190px minmax(0, 170px) minmax(0, 1fr) auto 92px; grid-template-areas: "data placa carro cond desc valor sit"; gap: 12px; align-items: center; padding: 9px 4px; border-bottom: 1px solid var(--grade); font-size: .88rem; }
.vm-servicos li:last-child { border-bottom: 0; }
.vm-data { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--texto-2); }
.vm-desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vm-servicos b { font-variant-numeric: tabular-nums; text-align: right; }
.vm-servicos .tp-chip { text-align: center; }
.tp-chip.pago { --c: #1baf7a; }
.tp-chip.aberto { --c: var(--s4); }
@media (max-width: 1180px) { .vm-grade { grid-template-columns: 1fr; } }
@media (max-width: 1180px) {
  .vm-servicos li.cab { display: none; }
  .vm-servicos li { grid-template-columns: 44px 100px 200px minmax(0, 1fr) auto 92px; grid-template-areas: "data placa carro desc valor sit" "data placa cond desc valor sit"; row-gap: 2px; }
}
@media (max-width: 640px) {
  .tp-titulo { flex-direction: column; }
  .vm-periodo { justify-content: flex-start; }
  .vm-linha { grid-template-columns: 96px minmax(0, 1fr); }
  .vm-linha.cab { display: none; }
  .vm-linha > :nth-child(2), .vm-linha > :nth-child(3), .vm-linha > :nth-child(4), .vm-linha > :nth-child(5) { display: none; }
  .vm-servicos li:not(.cab) { grid-template-columns: 40px minmax(0, 1fr) auto; row-gap: 4px; grid-template-areas: "data placa placa" "carro carro carro" "cond cond cond" "desc desc desc" "valor valor sit"; }
  .vm-servicos li .vm-desc { white-space: normal; }
  .vm-servicos li > b { text-align: left; }
  .vm .tp-kpi b { font-size: 1.15rem; }
}

/* ===== Operação Técnica › Comissão ===== */
.tc .tc-kpis { grid-template-columns: 1.6fr 1fr 1fr; }
.tc-abrir { white-space: nowrap; }
.tc-tec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 14px; align-items: center; padding: 10px 4px; border-bottom: 1px solid var(--grade); font-size: .88rem; }
.tc-tec:last-child { border-bottom: 0; }
.tc-tec > div { display: flex; flex-direction: column; min-width: 0; }
.tc-tec small { color: var(--texto-3); font-size: .76rem; }
.tc-lancs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tc-lancs > li { border: 1px solid var(--borda); border-radius: 12px; padding: 12px 14px; background: var(--superficie); }
.tc-lanc-cab { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; align-items: center; }
.tc-lanc-cab > div:first-child { display: flex; flex-direction: column; min-width: 0; }
.tc-lanc-cab small { color: var(--texto-3); font-size: .76rem; }
.tc-lanc-total { font-size: 1.05rem; font-variant-numeric: tabular-nums; color: var(--primaria); }
.tc-lanc-acoes { display: flex; gap: 6px; }
.tc-itens { margin: 10px 0 0; padding: 8px 0 0 20px; border-top: 1px dashed var(--borda); display: flex; flex-direction: column; gap: 4px; font-size: .86rem; color: var(--texto-2); }
.tc-itens li span { display: inline-block; }
.tc-itens li { display: list-item; }
.tc-itens li .num { float: right; font-variant-numeric: tabular-nums; color: var(--texto); }
.dialogo.tc-dialogo { width: min(640px, calc(100vw - 32px)); }
.tc-dialogo label { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; font-size: .86rem; color: var(--texto-2); }
.tc-dialogo select, .tc-dialogo input { font: inherit; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--borda); background: var(--superficie); color: var(--texto); }
.tc-cab-linhas { display: grid; grid-template-columns: minmax(0, 1fr) 130px 32px; gap: 8px; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-3); margin: 6px 0 4px; }
.tc-linhas { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; }
.tc-linha { display: grid; grid-template-columns: minmax(0, 1fr) 130px 32px; gap: 8px; align-items: center; }
.tc-valor { text-align: right; font-variant-numeric: tabular-nums; }
.tc-tirar { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--borda); background: var(--superficie); color: var(--texto-3); cursor: pointer; font-size: 1.1rem; line-height: 1; }
.tc-tirar:hover { color: var(--ruim); border-color: var(--ruim); }
.tc-mais { margin-top: 8px; }
.tc-total { margin: 12px 0 0; font-size: 1rem; text-align: right; }
.tc-total b { color: var(--primaria); font-size: 1.15rem; font-variant-numeric: tabular-nums; }
@media (max-width: 1180px) { .tc .tc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .tc-tec { grid-template-columns: 1fr; gap: 6px; }
  .tc-lanc-cab { grid-template-columns: minmax(0, 1fr) auto; }
  .tc-lanc-acoes { grid-column: 1 / -1; }
  .tc-cab-linhas, .tc-linha { grid-template-columns: minmax(0, 1fr) 96px 32px; }
}

/* ===== Operação Técnica › Projetos ===== */
.tpr .tpr-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tpr-barra { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; }
.tpr-barra .tp-filtros { margin: 0; }
.tpr-busca { font: inherit; font-size: .88rem; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--borda); background: var(--superficie); color: var(--texto); min-width: 320px; }
.tpr-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.tpr-cartao { display: flex; flex-direction: column; gap: 12px; border-top: 4px solid var(--c, var(--neutro)); }
.tpr-cartao.st-aberto, .tpr-status.st-aberto { --c: var(--neutro); }
.tpr-cartao.st-andamento, .tpr-status.st-andamento { --c: var(--primaria); }
.tpr-cartao.st-aprovacao, .tpr-status.st-aprovacao { --c: var(--s4); }
.tpr-cartao.st-finalizado, .tpr-status.st-finalizado { --c: var(--bom); }
.tpr-cab { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.tpr-cab > div { min-width: 0; }
.tpr-cab h3 { margin: 0; font-size: 1.02rem; overflow-wrap: anywhere; }
.tpr-cab small { color: var(--texto-3); font-size: .8rem; }
.tpr-status { flex: none; font-size: .72rem; font-weight: 700; padding: 3px 10px; border-radius: 99px; color: var(--c); background: color-mix(in srgb, var(--c) 13%, var(--superficie)); white-space: nowrap; }
.tpr-equipe { align-self: flex-start; font-size: .74rem; font-weight: 600; padding: 2px 9px; border-radius: 6px; background: var(--superficie-2); color: var(--texto-2); border: 1px solid var(--borda); }
.tpr-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.tpr-nums > div { background: var(--superficie-2); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; min-width: 0; }
.tpr-nums small { font-size: .7rem; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpr-nums b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.tpr-fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tpr-mini { display: flex; flex-direction: column; gap: 4px; padding: 0; border: 0; background: none; font: inherit; color: var(--texto-2); cursor: pointer; text-align: left; }
.tpr-mini:disabled { cursor: default; }
.tpr-mini-img { display: grid; place-items: center; height: 110px; border-radius: 10px; overflow: hidden; background: var(--superficie-2); border: 1px dashed var(--borda); color: var(--texto-3); font-size: .8rem; }
.tpr-mini-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tpr-mini small { font-size: .76rem; }
.tpr-rodape { display: flex; justify-content: space-between; align-items: center; gap: 8px; border-top: 1px solid var(--grade); padding-top: 10px; margin-top: auto; }
.tpr-rodape small { color: var(--texto-3); font-size: .74rem; }
.dialogo.tpr-dialogo { width: min(640px, calc(100vw - 32px)); }
.tpr-dialogo form > label, .tpr-dialogo .tpr-grade2 > label, .tpr-dialogo .tpr-grade3 > label, .tpr-campo { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; font-size: .86rem; color: var(--texto-2); }
.tpr-dialogo input[type="text"], .tpr-dialogo select { width: 100%; min-width: 0; box-sizing: border-box; font: inherit; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--borda); background: var(--superficie); color: var(--texto); }
.tpr-grade2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.tpr-grade3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 12px; }
.tpr-opcoes { display: flex; gap: 8px; }
.tpr-opcao { flex: 1; display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--borda); border-radius: 10px; cursor: pointer; color: var(--texto); }
.tpr-opcao:has(input:checked) { border-color: var(--primaria); background: color-mix(in srgb, var(--primaria) 8%, var(--superficie)); }
.tpr-foto-campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; font-size: .86rem; color: var(--texto-2); }
.tpr-previa { height: 120px; border-radius: 10px; border: 1px dashed var(--borda); background: var(--superficie-2); display: grid; place-items: center; overflow: hidden; color: var(--texto-3); font-size: .8rem; }
.tpr-previa img { width: 100%; height: 100%; object-fit: cover; }
.tpr-escolher { position: relative; overflow: hidden; align-self: flex-start; cursor: pointer; }
.tpr-arquivo { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dialogo.tpr-ver { width: min(1000px, calc(100vw - 32px)); padding: 12px; }
.tpr-ver-cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.tpr-ver img { width: 100%; max-height: 78vh; object-fit: contain; border-radius: 10px; display: block; }
@media (max-width: 1180px) { .tpr .tpr-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .tpr-busca { min-width: 0; width: 100%; }
  .tpr-grade { grid-template-columns: 1fr; }
  .tpr-grade2, .tpr-grade3 { grid-template-columns: 1fr; }
  .tpr-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===== Operação Técnica › Monitoramento ===== */
.mon-alarmes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mon-alarme { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; text-align: left; font: inherit; color: #fff; cursor: pointer;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); border-radius: 14px; padding: 14px 16px; transition: background .15s ease, border-color .15s ease; }
.mon-alarme:hover { background: rgba(255, 255, 255, .13); }
.mon-alarme.sel { border-color: #9ec5f4; box-shadow: 0 0 0 2px rgba(158, 197, 244, .35); }
.mon-alarme > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mon-alarme small { color: #b7c7dc; font-size: .82rem; }
.mon-alarme b { font-size: 1.9rem; line-height: 1.1; font-variant-numeric: tabular-nums; color: #8ff0c4; }
.mon-alarme span { color: #c7d6ea; font-size: .8rem; }
.mon-alarme.ativo { background: rgba(208, 59, 59, .2); border-color: rgba(255, 155, 155, .45); }
.mon-alarme.ativo b { color: #ff9b9b; }
.mon-sino { font-size: 1.6rem; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; background: rgba(255, 255, 255, .1); }
.mon-alarme.ativo .mon-sino { animation: mon-pulso 1.6s ease-in-out infinite; background: rgba(255, 120, 120, .25); }
@keyframes mon-pulso { 50% { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .mon-alarme.ativo .mon-sino { animation: none; } }
.mon-ver { font-size: .78rem !important; font-weight: 600; white-space: nowrap; }
.mon-dica { color: var(--texto-3); text-align: center; margin: 8px 0; }
.mon-ruas { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px; }
.mon-rua { border: 1px solid var(--borda); border-left: 4px solid var(--ruim); border-radius: 12px; padding: 12px 14px; background: var(--superficie); }
.mon-rua-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.mon-rua-cab > div { display: flex; flex-direction: column; min-width: 0; }
.mon-rua-cab small { color: var(--texto-3); font-size: .8rem; }
.mon-qtd { font-weight: 700; color: var(--ruim); white-space: nowrap; }
.mon-rua ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mon-rua li { display: grid; grid-template-columns: 82px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--grade); font-size: .84rem; --c: var(--primaria); }
.mon-hora { font-variant-numeric: tabular-nums; color: var(--texto-2); font-size: .8rem; }
.mon-txt { display: flex; flex-direction: column; min-width: 0; }
.mon-txt small { color: var(--texto-3); font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mon-horas { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 3px; height: 90px; align-items: end; margin-bottom: 14px; }
.mon-hora-barra { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px; }
.mon-hora-barra i { display: block; width: 100%; border-radius: 4px 4px 1px 1px; background: var(--primaria); }
.mon-hora-barra small { font-size: .62rem; color: var(--texto-3); }
.mon-tabela { display: flex; flex-direction: column; }
.mon-linha { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) 110px 110px; gap: 12px; align-items: center; padding: 9px 4px; border-bottom: 1px solid var(--grade); font-size: .88rem; }
.mon-linha.cab { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-3); }
.mon-linha.fora .cliente b { color: var(--ruim); }
.mon-linha .num { font-variant-numeric: tabular-nums; }
.mon-linha .tp-chip { justify-self: start; }
.tp-chip.mon-off { --c: var(--ruim); }
@media (max-width: 900px) { .mon-alarmes { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .mon-ruas { grid-template-columns: 1fr; }
  .mon-linha { grid-template-columns: minmax(0, 1fr) auto; }
  .mon-linha.cab { display: none; }
  .mon-linha > :nth-child(2) { display: none; }
  .mon-linha > :nth-child(3) { grid-column: 1; color: var(--texto-3); font-size: .8rem; }
  .mon-horas small { display: none; }
}

/* ===== Operação Técnica › Desempenho ===== */
.td .td-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.td-up { color: #8ff0c4 !important; } .td-down { color: #ff9b9b !important; }
.td-dests { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.td-dest { display: flex; gap: 12px; align-items: center; min-width: 0; }
.td-dest i { font-style: normal; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--primaria) 10%, var(--superficie)); font-size: 20px; flex: none; }
.td-dest > div { display: flex; flex-direction: column; min-width: 0; }
.td-dest small { color: var(--texto-3); font-size: .76rem; } .td-dest b { font-size: .95rem; } .td-dest span { color: var(--primaria); font-weight: 700; font-size: .82rem; }
.td-tabela-caixa { overflow-x: auto; }
.td-tabela { width: 100%; border-collapse: collapse; font-size: .86rem; min-width: 760px; }
.td-tabela th { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-3); text-align: right; padding: 6px 8px; font-weight: 600; border-bottom: 1px solid var(--borda); }
.td-tabela th:first-child, .td-tabela td:first-child { text-align: left; }
.td-tabela td { padding: 9px 8px; border-bottom: 1px solid var(--grade); text-align: right; }
.td-tabela tbody tr { cursor: pointer; } .td-tabela tbody tr:hover { background: var(--superficie-2); }
.td-tabela .num { font-variant-numeric: tabular-nums; }
.td-nome { display: flex; align-items: center; gap: 10px; min-width: 0; --c: var(--primaria); }
.td-nome > div { display: flex; flex-direction: column; min-width: 0; } .td-nome small { color: var(--texto-3); font-size: .74rem; }
.td-nome .tp-avatar { width: 34px; height: 34px; font-size: .78rem; }
.td-chip { font-size: .74rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; }
.td-chip.b { color: var(--bom); background: color-mix(in srgb, var(--bom) 12%, var(--superficie)); }
.td-chip.a { color: #a46f00; background: color-mix(in srgb, var(--s4) 16%, var(--superficie)); }
.td-chip.r { color: var(--ruim); background: color-mix(in srgb, var(--ruim) 12%, var(--superficie)); }
.td-nota { display: inline-flex; align-items: center; gap: 8px; }
.td-nota i { display: block; width: 70px; height: 7px; border-radius: 9px; background: var(--grade); overflow: hidden; }
.td-nota u { display: block; height: 100%; background: var(--primaria); text-decoration: none; }
.td-graficos { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.td-hb { display: flex; flex-direction: column; gap: 9px; }
.td-hb > div { display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1fr) 60px; gap: 10px; align-items: center; font-size: .84rem; }
.td-hb span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto-2); }
.td-hb i { height: 11px; border-radius: 9px; background: var(--grade); overflow: hidden; } .td-hb u { display: block; height: 100%; background: var(--primaria); text-decoration: none; }
.td-hb b { text-align: right; font-variant-numeric: tabular-nums; }
.td-tecs { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.td-tec { border: 1px solid var(--borda); border-radius: 14px; padding: 14px; background: var(--superficie); display: flex; flex-direction: column; gap: 10px; }
.td-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.td-mini > div { background: var(--superficie-2); border-radius: 9px; padding: 7px 8px; display: flex; flex-direction: column; min-width: 0; }
.td-mini small { font-size: .66rem; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .td-mini b { font-size: .95rem; font-variant-numeric: tabular-nums; }
.td-rot { display: block; font-size: .7rem; color: var(--texto-3); margin: 2px 0; }
.td-mix { display: flex; height: 9px; border-radius: 9px; overflow: hidden; gap: 2px; background: var(--grade); } .td-mix u { text-decoration: none; }
.td-spark { display: flex; align-items: end; gap: 2px; height: 34px; } .td-spark u { flex: 1; background: color-mix(in srgb, var(--primaria) 55%, var(--superficie)); border-radius: 2px 2px 0 0; text-decoration: none; } .td-spark u.zero { background: var(--grade); }
.td-avisos { border-top: 1px dashed var(--borda); padding-top: 8px; display: flex; flex-direction: column; gap: 3px; margin-top: auto; }
.td-aviso { margin: 0; font-size: .78rem; color: var(--texto-2); } .td-aviso.atencao { color: #a46f00; } .td-aviso.bom { color: var(--bom); }
.dialogo.td-os { width: min(860px, calc(100vw - 32px)); padding: 18px 20px; }
.td-os-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.td-os-cab h2 { margin: 0; font-size: 1.05rem; } .td-os-cab small { color: var(--texto-3); }
.td-os-lista { display: flex; flex-direction: column; max-height: 65vh; overflow-y: auto; }
.td-os-linha { display: grid; grid-template-columns: 96px minmax(0, 1.3fr) minmax(0, 1fr) 90px 80px; gap: 10px; align-items: center; padding: 8px 2px; border-bottom: 1px solid var(--grade); font-size: .84rem; }
.td-os-linha.cab { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-3); position: sticky; top: 0; background: var(--superficie); }
.td-os-linha > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .td-os-linha .num { font-variant-numeric: tabular-nums; }
.td-voltou { color: var(--ruim); font-weight: 600; }
@media (max-width: 1180px) { .td .td-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .td-dests { grid-template-columns: repeat(2, minmax(0, 1fr)); } .td-graficos { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .td .td-kpis, .td-dests { grid-template-columns: 1fr 1fr; }
  .td-hb > div { grid-template-columns: minmax(0, 120px) minmax(0, 1fr) 54px; }
  .td-os-linha { grid-template-columns: 84px minmax(0, 1fr) 70px; }
  .td-os-linha > :nth-child(3), .td-os-linha > :nth-child(5) { display: none; }
}

/* Desempenho: tempo por serviço em duas colunas */
.td-hb { display: grid !important; grid-template-columns: 1fr 1fr; gap: 9px 28px !important; }
.td-hb > div { grid-template-columns: minmax(0, 190px) minmax(0, 1fr) 54px 56px !important; }
.td-hb small { color: var(--texto-3); font-size: .74rem; text-align: right; }
@media (max-width: 1180px) { .td-hb { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .td-hb > div { grid-template-columns: minmax(0, 120px) minmax(0, 1fr) 50px !important; } .td-hb small { display: none; } }

/* Desempenho: avisos no ranking e o resumo do técnico na janela */
.td-alerta { color: #a46f00 !important; font-weight: 600; }
.td-resumo { display: flex; flex-direction: column; gap: 10px; padding: 12px; margin-bottom: 12px; border-radius: 12px; background: var(--superficie-2); }
.td-resumo .td-mini { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.td-resumo .td-mini > div { background: var(--superficie); }
.td-resumo .td-avisos { margin-top: 0; }
@media (max-width: 640px) { .td-resumo .td-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); } }