/* ==========================================================================
   Painel de Clientes — folha de estilo única
   Mobile-first: o base é o celular; @media(min-width:961px) sobe pro desktop,
   onde a sidebar deixa de ser off-canvas e vira coluna fixa.

   Regra da casa: NENHUM hex fora do :root. Toda cor sai de uma variável.
   ========================================================================== */

:root{
  /* Paleta oficial Moon. Os quatro tons da marca entram aqui e o resto da rampa
     é interpolado entre eles: --azul-700 é o meio de Tinta→Azul Moon, usado como
     fundo de botão primário e de chip, onde o Azul Moon puro ficaria claro demais
     para texto branco. Azul médio (#6E8BF0) é o acento do tema escuro. */
  --azul-900:#16235E;   /* Tinta */
  --azul-700:#22409E;   /* interpolado Tinta→Azul Moon */
  --azul-500:#2F5BEA;   /* Azul Moon */
  --azul-100:#C9D6FD;   /* Luar */
  --azul-50:#EEF2FF;    /* Névoa */
  --fundo:#F4F6F9;
  --card:#FFFFFF;
  --texto:#101828;
  --texto-suave:#414853;
  /* Três níveis de texto com passos parecidos. --texto-fraco é o mais claro que
     ainda dá 4.5:1 contra --fundo (#F4F6F9), o mais ESCURO dos três fundos onde
     ele aparece — no tema claro é ele que limita. --texto-suave foi escurecido
     até abrir separação real dos outros dois níveis. */
  --texto-fraco:#667183;
  --borda:#E7EBF0;
  --positivo:#12B76A;
  --negativo:#E5484D;

  /* semáforo de SLA — mesmos papéis de antes, tons realinhados ao novo conjunto */
  --sla-ok:#12B76A;       --sla-ok-soft:#E3F7EE;
  --sla-risco:#F79009;    --sla-risco-soft:#FEF0DC;
  --sla-estouro:#E5484D;  --sla-estouro-soft:#FCE7E8;
  /* --sla-sem estava em #98A2B3 e dava 2.27:1 sobre a própria pastilha
     (--sla-sem-soft): o chip 'Rascunho' e o 'sem SLA' não passavam. Escurecido
     até 4.55:1 sobre a pastilha e 5.16:1 sobre o cartão. */
  --sla-sem:#646E7E;      --sla-sem-soft:#EEF1F5;
  --sla-cumprido:#2F5BEA; --sla-cumprido-soft:#C9D6FD;

  /* superfícies derivadas, para não precisar de hex solto adiante */
  --branco:#FFFFFF;
  --hover-claro:#EEF2FF;
  --tinta-suave:#F7F8FC;

  --raio-card:20px;
  --raio-sidebar:24px;
  --raio-item:12px;
  --raio-campo:10px;
  --sombra-card:0 1px 2px rgba(16,24,40,.04), 0 6px 16px rgba(16,24,40,.05);
  --sombra-flutuante:0 4px 24px rgba(16,24,40,.07);
  --sombra-modal:0 24px 64px rgba(16,24,40,.22);
  --sombra-sidebar:0 0 40px rgba(16,24,40,.16);
  --veu:rgba(16,24,40,.45);

  /* Documento impresso. Grupo próprio de propósito: o PDF sai sempre em tema
     claro, então quem um dia adicionar modo escuro NÃO deve sobrescrever
     nenhuma variável --doc-*. Ficam aqui, e não soltas no CSS do documento,
     para a regra de "nenhum hex fora do :root" continuar valendo. */
  --doc-tinta:#141B3D;
  --doc-suave:#4A5578;
  /* --doc-fraco estava em #98A2B3, que dava 2.58:1 sobre o papel branco e era a
     única razão abaixo de 4.5:1 do projeto. Como o grupo inteiro passou para a
     paleta Moon, foi escurecido até passar — em #687190 ele passa tanto sobre o
     papel (4.82:1) quanto sobre a zebra da tabela (4.55:1), que é o fundo mais
     apertado onde ele aparece. */
  --doc-fraco:#687190;
  --doc-borda:#C7CEE6;
  --doc-linha:#E4E8F5;
  --doc-fundo:#FFFFFF;
  --doc-zebra:#F7F8FD;
  --doc-destaque:#16235E;
  --clara-12:rgba(255,255,255,.12);
  --clara-18:rgba(255,255,255,.18);
  --clara-70:rgba(255,255,255,.7);
  --clara-85:rgba(255,255,255,.85);
}

/* ==========================================================================
   Tema escuro — só sobrescreve variáveis que já existem. Nenhum nome novo.
   `--card-elevado` da especificação não existia nesta folha, então foi ignorado.
   O grupo --doc-* NÃO entra aqui: o documento impresso é sempre claro.
   ========================================================================== */
:root{color-scheme:light}
[data-tema="escuro"]{
  color-scheme:dark;

  /* Mesma rampa Moon, remapeada: no escuro --azul-700 é superfície de destaque
     (texto branco por cima), então recebe o Azul Moon puro; --azul-500 é acento
     sobre fundo escuro e recebe o Azul médio da marca. */
  --azul-900:#0A1030;
  --azul-700:#2F5BEA;   /* Azul Moon */
  --azul-500:#6E8BF0;   /* Azul médio */
  --azul-100:#1F2C63;
  --azul-50:#151E45;
  --fundo:#0A1030;
  --card:#111838;
  --texto:#E8EDF5;
  /* No escuro a limitação se INVERTE: o texto é claro sobre fundo escuro, então
     quem limita é o fundo mais CLARO dos três, que é --tinta-suave (#151D44),
     usado no cabeçalho de tabela. --fundo é o mais folgado, não o mais apertado. */
  --texto-suave:#A5B6D3;
  --texto-fraco:#7B889E;
  --borda:#27325C;
  --positivo:#3DD68C;
  --negativo:#FF6B6E;

  /* Semáforos: fundo escurecido do mesmo matiz, texto claro por cima.
     Nunca texto escuro sobre fundo escuro. */
  --sla-ok:#4ADE9B;       --sla-ok-soft:#0E3524;
  --sla-risco:#F7B955;    --sla-risco-soft:#3B2A0E;
  --sla-estouro:#FF8487;  --sla-estouro-soft:#3D1A1D;
  --sla-sem:#A3B2C8;      --sla-sem-soft:#1E2739;
  --sla-cumprido:#93AAF5; --sla-cumprido-soft:#1B2A5C;

  /* superfícies derivadas */
  --branco:#FFFFFF;
  --hover-claro:#19224E;
  /* --tinta-suave é o cabeçalho de tabela, o fundo mais CLARO do tema escuro e
     portanto quem limita --texto-fraco. Ficou em #151D44 para a razão passar de
     4.5:1 sem colar o cabeçalho no cartão (separação 1.07, era 1.06). */
  --tinta-suave:#151D44;

  /* Sombra preta sobre fundo escuro não aparece: o cartão passa a ser
     definido por um anel de 1px na cor da borda. */
  --sombra-card:0 0 0 1px var(--borda);
  --sombra-flutuante:0 0 0 1px var(--borda), 0 10px 28px rgba(0,0,0,.45);
  --sombra-modal:0 0 0 1px var(--borda), 0 24px 64px rgba(0,0,0,.6);
  --sombra-sidebar:0 0 0 1px var(--borda), 0 0 40px rgba(0,0,0,.55);
  --veu:rgba(3,7,18,.72);
}

/* --------------------------------------------------------------------------
   Ajustes que uma troca de variável não resolve sozinha: no escuro
   --azul-900 vira o próprio fundo da página, então tudo que o usava como
   superfície de destaque precisa subir para --azul-700.
   -------------------------------------------------------------------------- */
[data-tema="escuro"] .stat-card.destaque{background:var(--azul-700)}
[data-tema="escuro"] .sidebar-links .side-link.active,
[data-tema="escuro"] .sidebar-links .side-link.active:hover{background:var(--azul-700)}
[data-tema="escuro"] .avatar{background:var(--azul-700);color:var(--branco)}
/* A assinatura colorida tem wordmark em Tinta, que some sobre fundo escuro:
   no escuro entra a negativa, com disco e wordmark brancos. */
[data-tema="escuro"] .sidebar-marca{
  background-image:url('../assets/marca/moon-assinatura-negativa.svg');
}
/* O kit não traz assinatura vertical negativa, e o cartão de login no escuro usa
   --card (escuro): o wordmark em Tinta sumiria. No escuro o login passa para a
   negativa horizontal, que é a variante desenhada para fundo escuro. A caixa muda
   junto porque a razão passa de 1.29:1 para 4.27:1. */
[data-tema="escuro"] .auth-marca{
  width:168px;height:39px;
  background-image:url('../assets/marca/moon-assinatura-negativa.svg');
}
[data-tema="escuro"] .timer-card{background:var(--azul-700)}
[data-tema="escuro"] .toast{background:var(--azul-700)}
[data-tema="escuro"] button.primary:hover:not(:disabled){background:var(--azul-500)}
/* hover do menu: o texto era --azul-900, que no escuro some no fundo */
[data-tema="escuro"] .sidebar-links .side-link:hover{color:var(--texto)}
[data-tema="escuro"] .chip.dark{color:var(--texto)}
[data-tema="escuro"] .chip.accent{color:var(--sla-cumprido)}
[data-tema="escuro"] .topbar .round-btn:hover{color:var(--sla-cumprido)}
[data-tema="escuro"] .auth-card{box-shadow:var(--sombra-flutuante)}

/* --------------------------------------------------------------------------
   O documento impresso é imune ao tema. Regra explícita para que nenhuma
   variável do escuro alcance #docPrint.
   -------------------------------------------------------------------------- */
[data-tema="escuro"] #docPrint{
  color-scheme:light;
  background:var(--doc-fundo);
  color:var(--doc-tinta);
}

*{box-sizing:border-box}
html,body{overflow-x:hidden;max-width:100%}
body{
  margin:0;
  /* Manrope no corpo, Fredoka nos títulos de nível 1. As duas vêm do Google
     Fonts com display=swap: se a rede falhar, a pilha cai na sans-serif que o
     painel já usava e nada muda de caixa — nenhum container depende da métrica
     da fonte, e os títulos vivem em flex com min-width:0. */
  font-family:'Manrope','Inter','Segoe UI',system-ui,-apple-system,'Helvetica Neue',sans-serif;
  background:var(--fundo);color:var(--texto);
  font-size:14px;font-weight:400;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0;font-weight:500;letter-spacing:-.01em}
h1{font-family:'Fredoka','Manrope','Inter','Segoe UI',system-ui,sans-serif;font-weight:500}
a{color:var(--azul-500);text-decoration:none}
a:hover{text-decoration:underline}
strong{font-weight:500}

/* números grandes sempre alinhados */
.tabular{font-variant-numeric:tabular-nums}

/* ---------- controles ---------- */
button{
  font-family:inherit;font-size:14px;font-weight:500;
  border:1px solid var(--borda);background:var(--card);color:var(--texto);
  padding:10px 16px;border-radius:var(--raio-item);cursor:pointer;
  transition:background .14s,border-color .14s,color .14s;min-height:44px;
}
button:hover:not(:disabled){background:var(--hover-claro);border-color:var(--azul-100)}
button:disabled{opacity:.5;cursor:default}
button.primary{background:var(--azul-700);color:var(--branco);border-color:var(--azul-700)}
button.primary:hover:not(:disabled){background:var(--azul-900);border-color:var(--azul-900)}
button.danger{background:var(--sla-estouro-soft);color:var(--negativo);border-color:var(--sla-estouro-soft)}
button.danger:hover:not(:disabled){background:var(--negativo);color:var(--branco);border-color:var(--negativo)}
button.ghost{background:transparent;color:var(--texto-suave);border-color:var(--borda)}
button.ghost:hover:not(:disabled){background:var(--hover-claro);color:var(--texto)}
button.small{padding:7px 12px;font-size:13px;min-height:38px;border-radius:10px}
button:focus-visible{outline:2px solid var(--azul-500);outline-offset:2px}

input,select,textarea{
  font-family:inherit;font-size:16px;font-weight:400;
  border:1px solid var(--borda);background:var(--card);color:var(--texto);
  padding:10px 12px;border-radius:var(--raio-campo);min-height:44px;width:100%;
  transition:border-color .14s,box-shadow .14s;
}
textarea{resize:vertical;min-height:84px;line-height:1.55}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--azul-500);
  box-shadow:0 0 0 3px var(--azul-100);
}
input[type=checkbox]{width:auto;min-height:0;margin:0;accent-color:var(--azul-500)}

.field{display:flex;flex-direction:column;gap:6px}
.field label{
  font-size:11px;text-transform:uppercase;letter-spacing:.6px;
  color:var(--texto-fraco);font-weight:500;
}
.field .hint{font-size:12px;color:var(--texto-suave);font-weight:400}
.hint-forte{font-weight:500;color:var(--texto)}
.check-field{flex-direction:row;align-items:center;gap:9px}
.check-field label{text-transform:none;letter-spacing:0;font-size:14px;color:var(--texto)}

/* ---------- ícones ---------- */
.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;min-height:44px;padding:0;border-radius:10px;line-height:0;
}
.icon-btn svg{width:18px;height:18px;display:block}
.icon-btn.edit{color:var(--texto-suave)}
.icon-btn.del{color:var(--negativo)}
.icon-btn.ficha{color:var(--azul-500)}
svg.ico{width:18px;height:18px;flex:0 0 auto;vertical-align:middle}

/* pastilha circular de ícone */
.pastilha{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;
  background:var(--azul-100);color:var(--azul-700);flex:0 0 auto;
}
.pastilha svg{width:19px;height:19px}

/* ---------- login ---------- */
.auth-screen{
  position:fixed;inset:0;background:var(--fundo);display:none;
  align-items:center;justify-content:center;padding:20px;z-index:100;
}
.auth-screen.open{display:flex}
.auth-card{
  background:var(--card);border-radius:var(--raio-card);padding:32px 26px;
  width:100%;max-width:400px;box-shadow:var(--sombra-flutuante);
}
.auth-brand{display:flex;align-items:center;justify-content:center;margin-bottom:18px}
/* Assinatura vertical (1.29:1). Entra como background-image para a troca clara↔
   negativa ser só CSS e para o navegador baixar uma variante só. A caixa tem
   tamanho fixo, então nada pula enquanto o SVG não chega. */
.auth-marca{
  display:block;width:104px;height:80px;
  background:url('../assets/marca/moon-assinatura-vertical.svg') center/contain no-repeat;
}
.auth-card h1{font-size:20px;text-align:center;color:var(--texto);margin-bottom:24px}
.auth-card .field{margin-bottom:16px}
.auth-error{color:var(--negativo);font-size:12.5px;min-height:18px;margin-bottom:8px}
.auth-card button.primary{width:100%}

/* ---------- casca: sidebar + conteúdo ---------- */
.shell{display:flex;align-items:flex-start;min-height:100vh}
.main{flex:1;min-width:0;display:flex;flex-direction:column}

.sidebar-backdrop{display:none;position:fixed;inset:0;background:var(--veu);z-index:79}
.sidebar-backdrop.open{display:block}

.sidebar{
  position:fixed;top:0;left:0;bottom:0;width:min(84vw,280px);
  background:var(--card);color:var(--texto);z-index:80;
  display:flex;flex-direction:column;transform:translateX(-100%);
  transition:transform .24s ease;box-shadow:var(--sombra-sidebar);
  border-radius:0 var(--raio-sidebar) var(--raio-sidebar) 0;
}
.sidebar.open{transform:none}
.sidebar-head{
  display:flex;flex-direction:column;align-items:flex-start;gap:5px;
  padding:20px 18px 16px;
  padding-top:calc(20px + env(safe-area-inset-top));
  flex:0 0 auto;position:relative;
}
/* Assinatura horizontal (4.27:1). A 132px de largura dá 31px de altura, que cabe
   nos 204px úteis da coluna de 240px com folga para o botão de fechar. A vertical
   pediria 185px de altura no mesmo espaço — por isso ela ficou só no login. */
.sidebar-marca{
  display:block;width:132px;height:31px;
  background:url('../assets/marca/moon-assinatura-principal.svg') left center/contain no-repeat;
}
.sidebar-brand{
  font-size:12px;font-weight:500;color:var(--texto-fraco);
  letter-spacing:.3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:100%;
}
.sidebar-close{
  position:absolute;top:calc(16px + env(safe-area-inset-top));right:14px;
  background:transparent;border:1px solid var(--borda);
  color:var(--texto-suave);width:40px;height:40px;min-height:40px;padding:0;
  border-radius:10px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.sidebar-links{
  display:flex;flex-direction:column;gap:2px;padding:6px 12px 12px;
  overflow-y:auto;flex:1 1 auto;
}
.side-group{
  font-size:10.5px;font-weight:500;letter-spacing:.9px;text-transform:uppercase;
  color:var(--texto-fraco);padding:16px 10px 7px;
}
.sidebar-links>.side-group:first-child{padding-top:4px}
.side-link{
  display:flex;align-items:center;gap:11px;width:100%;min-height:44px;
  text-align:left;background:transparent;border:none;color:var(--texto-suave);
  font-size:14px;font-weight:400;padding:10px 12px;
  border-radius:var(--raio-item);
}
.sidebar-links .side-link:hover{background:var(--azul-100);color:var(--azul-900)}
.sidebar-links .side-link.active{background:var(--azul-900);color:var(--branco);font-weight:500}
.sidebar-links .side-link.active:hover{background:var(--azul-900);color:var(--branco)}
.side-link svg{width:18px;height:18px;flex:0 0 auto}
.sidebar-foot{
  padding:12px;padding-bottom:calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid var(--borda);flex:0 0 auto;
}
.sidebar-foot .user-email{display:block;max-width:100%;margin-bottom:9px;font-size:12.5px}
.sidebar-foot button{width:100%}

/* ---------- topbar ---------- */
.topbar{
  display:flex;align-items:center;gap:12px;
  padding:16px 16px 8px;
  padding-top:calc(16px + env(safe-area-inset-top));
  padding-left:calc(16px + env(safe-area-inset-left));
  padding-right:calc(16px + env(safe-area-inset-right));
}
.nav-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;min-height:44px;padding:0;font-size:19px;line-height:1;
  flex:0 0 auto;border-radius:12px;
}
.topbar-heading{min-width:0;flex:1}
.topbar-heading h1{
  font-size:20px;font-weight:500;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* a data por extenso é longa: no celular ela trunca em vez de quebrar em
   seis linhas e espremer o resto da barra. */
.topbar-data{
  font-size:12.5px;color:var(--texto-suave);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* e-mail e Sair já vivem no rodapé da sidebar; na topbar só cabem no desktop */
.topbar-right .user-email,.topbar-right #logoutTop{display:none}
.topbar-right{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.round-btn{
  width:42px;height:42px;min-height:42px;padding:0;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--card);border:1px solid var(--borda);color:var(--texto-suave);
}
.topbar .round-btn:hover{background:var(--azul-100);color:var(--azul-700);border-color:var(--azul-100)}
.round-btn svg{width:18px;height:18px}
.user-chip{display:flex;align-items:center;gap:10px}
.avatar{
  width:42px;height:42px;border-radius:50%;flex:0 0 auto;
  background:var(--azul-900);color:var(--azul-100);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:500;letter-spacing:.4px;
}
.user-email{
  color:var(--texto-suave);font-size:12.5px;
  max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ---------- área de conteúdo ---------- */
.wrap{
  flex:1;
  padding:8px 16px calc(48px + env(safe-area-inset-bottom));
  padding-left:calc(16px + env(safe-area-inset-left));
  padding-right:calc(16px + env(safe-area-inset-right));
}
section.view{display:none}
section.view.active{display:block}
.view-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-bottom:16px;
}
.view-head h2{font-size:16px;font-weight:500;color:var(--texto-suave)}
.view-head .actions{display:flex;gap:8px;flex-wrap:wrap}
.section-title{
  font-size:10.5px;text-transform:uppercase;letter-spacing:.9px;
  color:var(--texto-fraco);font-weight:500;margin:26px 0 12px;
}
.count-line{font-size:12.5px;color:var(--texto-suave);margin-bottom:12px}

/* ---------- filtros ---------- */
.filters{
  display:flex;flex-direction:column;gap:12px;
  background:var(--card);border-radius:var(--raio-card);
  padding:16px;margin-bottom:18px;box-shadow:var(--sombra-card);
}
.filters .field{width:100%}

/* ---------- cartões de métrica ---------- */
.cards-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:6px}
.stat-card{
  position:relative;background:var(--card);border-radius:var(--raio-card);
  padding:18px;box-shadow:var(--sombra-card);
  display:flex;flex-direction:column;gap:12px;
}
.stat-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.stat-card .stat-label{
  font-size:10.5px;text-transform:uppercase;letter-spacing:.9px;
  font-weight:500;color:var(--texto-fraco);
}
.stat-card .stat-value{
  font-size:30px;font-weight:500;line-height:1.1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--texto);
}
.stat-card .stat-sub{font-size:12.5px;color:var(--texto-suave)}

/* badge de variação — só entra quando há comparação real no dado */
.stat-delta{
  display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;
  padding:4px 9px;border-radius:20px;font-size:11.5px;font-weight:500;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.stat-delta.sobe{background:var(--sla-ok-soft);color:var(--positivo)}
.stat-delta.desce{background:var(--sla-estouro-soft);color:var(--negativo)}
.stat-delta svg{width:12px;height:12px}

/* cartão de destaque: o primeiro de cada linha */
.stat-card.destaque{background:var(--azul-900)}
.stat-card.destaque .stat-label{color:var(--clara-70)}
.stat-card.destaque .stat-value{color:var(--branco)}
.stat-card.destaque .stat-sub{color:var(--clara-70)}
.stat-card.destaque .pastilha{background:var(--clara-18);color:var(--branco)}
.stat-card.destaque .stat-delta.sobe,
.stat-card.destaque .stat-delta.desce{background:var(--clara-18);color:var(--branco)}

/* cartões clicáveis */
.stat-card.clicavel{cursor:pointer;transition:transform .14s,box-shadow .14s}
.stat-card.clicavel:hover{transform:translateY(-2px);box-shadow:var(--sombra-flutuante)}

/* ---------- painel genérico ---------- */
.panel{
  background:var(--card);border-radius:var(--raio-card);
  padding:18px;box-shadow:var(--sombra-card);
}
.panel+.panel{margin-top:14px}
.panel-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:10px;margin-bottom:16px;flex-wrap:wrap;
}
.panel-title{font-size:14px;font-weight:500;color:var(--texto)}
.panel-sub{font-size:12.5px;color:var(--texto-suave)}

/* ---------- gráficos SVG ---------- */
.gr-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.gr-svg{display:block;max-width:100%;height:auto}

.gr-grid{stroke:var(--borda);stroke-width:1}
.gr-eixo{fill:var(--texto-fraco);font-size:10px;font-weight:400}
.gr-rotulo{fill:var(--texto-suave);font-size:11px;font-weight:400}
.gr-barra-a{fill:var(--azul-500)}
.gr-barra-b{fill:var(--azul-100)}
.gr-legenda{
  display:flex;gap:16px;flex-wrap:wrap;justify-content:center;
  margin-top:14px;font-size:12px;color:var(--texto-suave);
}
.gr-legenda span{display:inline-flex;align-items:center;gap:7px}
.gr-quadro{width:11px;height:11px;border-radius:3px;flex:0 0 auto}
.gr-quadro.a{background:var(--azul-500)}
.gr-quadro.b{background:var(--azul-100)}

/* donut */
.donut-bloco{display:flex;flex-direction:column;gap:18px;align-items:center}
.donut-total{font-size:26px;font-weight:500;fill:var(--texto);font-variant-numeric:tabular-nums}
.donut-legenda-rot{font-size:10px;font-weight:500;fill:var(--texto-fraco);letter-spacing:.8px}
.donut-lista{display:flex;flex-direction:column;gap:10px;width:100%;min-width:0}
.donut-item{display:flex;align-items:center;gap:10px;font-size:13px}
.donut-ponto{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.donut-nome{flex:1;color:var(--texto-suave);min-width:0}
.donut-num{font-weight:500;font-variant-numeric:tabular-nums;color:var(--texto)}
/* cores das fatias e dos pontos da legenda — o SVG nunca recebe hex inline */
.donut-arco{transition:stroke-width .14s}
.donut-arco.cor-no_prazo{stroke:var(--sla-ok)}
.donut-arco.cor-em_risco{stroke:var(--sla-risco)}
.donut-arco.cor-estourado{stroke:var(--sla-estouro)}
.donut-arco.cor-cumprido{stroke:var(--sla-cumprido)}
.donut-arco.cor-sem_sla{stroke:var(--sla-sem)}
.donut-ponto.cor-no_prazo{background:var(--sla-ok)}
.donut-ponto.cor-em_risco{background:var(--sla-risco)}
.donut-ponto.cor-estourado{background:var(--sla-estouro)}
.donut-ponto.cor-cumprido{background:var(--sla-cumprido)}
.donut-ponto.cor-sem_sla{background:var(--sla-sem)}

/* ---------- grade de gráficos e linhas de lista ---------- */
.graficos-grid{display:grid;grid-template-columns:1fr;gap:14px;align-items:stretch}
.graficos-grid>.panel{display:flex;flex-direction:column}
.graficos-grid>.panel>div:last-child{flex:1;display:flex;flex-direction:column;justify-content:center}
.linha-lista{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  padding:11px 0;border-radius:10px;
}
.linha-lista.com-topo{border-top:1px solid var(--borda)}
.linha-nome{flex:1;min-width:150px;font-weight:500}
.linha-valor{flex:0 0 auto;font-weight:500;font-variant-numeric:tabular-nums}
.linha-lista.destaque-atraso{
  background:var(--sla-estouro-soft);margin:0 -12px;padding-left:12px;padding-right:12px;
}
.linha-lista.destaque-atraso.com-topo{border-top-color:transparent}

/* ---------- barra de progresso ---------- */
.hbar-item+.hbar-item{margin-top:18px}
.hbar-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px}
.hbar-name{font-weight:500;font-size:13.5px;min-width:0;overflow-wrap:anywhere}
.hbar-nums{font-size:12.5px;color:var(--texto-suave);white-space:nowrap;flex:0 0 auto;font-variant-numeric:tabular-nums}
.hbar-track{height:8px;background:var(--azul-100);border-radius:6px;overflow:hidden}
.hbar-fill{height:100%;border-radius:6px;background:var(--azul-500);transition:width .3s}
.hbar-fill.warn{background:var(--sla-risco)}
.hbar-fill.over{background:var(--negativo)}
.hbar-pct{font-size:11.5px;color:var(--texto-fraco);margin-top:6px}

/* ---------- tabela / cartões ---------- */
.table-wrap{display:none}
table{
  width:100%;border-collapse:separate;border-spacing:0;
  background:var(--card);border-radius:var(--raio-card);overflow:hidden;
  box-shadow:var(--sombra-card);
}
th{
  background:var(--tinta-suave);text-align:left;padding:12px 14px;
  font-size:10.5px;text-transform:uppercase;letter-spacing:.9px;
  color:var(--texto-fraco);font-weight:500;white-space:nowrap;
  border-bottom:1px solid var(--borda);
}
td{padding:13px 14px;border-bottom:1px solid var(--borda);vertical-align:middle;font-weight:400}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--azul-50)}
td.num,th.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
td.acoes{white-space:nowrap;width:1%}
td.acoes .row-actions{flex-wrap:nowrap}

.cards-wrap{display:flex;flex-direction:column;gap:12px}
.rec-card{
  background:var(--card);border-radius:var(--raio-card);
  padding:16px;display:flex;flex-direction:column;gap:12px;
  box-shadow:var(--sombra-card);
  max-width:100%;overflow-wrap:anywhere;word-break:break-word;
}
.rec-card .rc-title{font-weight:500;font-size:14.5px}
.rec-card .rc-sub{color:var(--texto-suave);font-size:12.5px;margin-top:2px}
.rc-grid{display:flex;gap:20px;flex-wrap:wrap}
.rc-label{
  display:block;font-size:10px;text-transform:uppercase;letter-spacing:.8px;
  color:var(--texto-fraco);margin-bottom:4px;font-weight:500;
}
.rc-val{font-size:13px;font-weight:500;font-variant-numeric:tabular-nums}
.row-actions{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- pastilhas ---------- */
.chip{
  display:inline-flex;align-items:center;gap:5px;padding:4px 11px;
  border-radius:20px;font-size:11.5px;font-weight:500;white-space:nowrap;
}
.chip.neutral{background:var(--sla-sem-soft);color:var(--texto-suave)}
.chip.accent{background:var(--azul-100);color:var(--azul-700)}
.chip.dark{background:var(--azul-100);color:var(--azul-900)}

/* prioridade de tarefa */
.chip.pri-baixa{background:var(--sla-sem-soft);color:var(--texto-suave)}
.chip.pri-media{background:var(--sla-risco-soft);color:var(--sla-risco)}
.chip.pri-alta{background:var(--sla-estouro-soft);color:var(--negativo)}

/* status de tarefa */
.chip.st-aberta{background:var(--sla-sem-soft);color:var(--texto-suave)}
.chip.st-em_andamento{background:var(--azul-100);color:var(--azul-700)}
.chip.st-aguardando_cliente{background:var(--sla-risco-soft);color:var(--sla-risco)}
.chip.st-concluida{background:var(--sla-ok-soft);color:var(--positivo)}
.chip.st-cancelada{background:var(--sla-sem-soft);color:var(--texto-fraco);text-decoration:line-through}

/* semáforo de SLA */
.sla{
  display:inline-flex;align-items:center;gap:6px;padding:4px 11px;
  border-radius:20px;font-size:11.5px;font-weight:500;white-space:nowrap;
}
.sla::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto}
.sla-no_prazo{background:var(--sla-ok-soft);color:var(--sla-ok)}
.sla-em_risco{background:var(--sla-risco-soft);color:var(--sla-risco)}
.sla-estourado{background:var(--sla-estouro-soft);color:var(--sla-estouro)}
.sla-sem_sla{background:var(--sla-sem-soft);color:var(--sla-sem)}
.sla-cumprido{background:var(--sla-cumprido-soft);color:var(--sla-cumprido)}

/* semáforo de cobrança — reusa o componente .sla e as variáveis do SLA */
.sit-pago{background:var(--sla-ok-soft);color:var(--sla-ok)}
.sit-atrasado{background:var(--sla-estouro-soft);color:var(--sla-estouro)}
.sit-a_vencer{background:var(--sla-risco-soft);color:var(--sla-risco)}
.sit-previsto{background:var(--sla-sem-soft);color:var(--sla-sem)}

.vence{font-weight:500;font-size:12.5px;white-space:nowrap}
.vence.no_prazo{color:var(--sla-ok)}
.vence.em_risco{color:var(--sla-risco)}
.vence.estourado{color:var(--sla-estouro)}
.vence.sem_sla,.vence.cumprido{color:var(--texto-suave);font-weight:400}
.venc-pago{color:var(--sla-ok)}
.venc-atrasado{color:var(--sla-estouro)}
.venc-a_vencer{color:var(--sla-risco)}
.venc-previsto{color:var(--texto-suave);font-weight:400}

/* ---------- estado vazio / aviso ---------- */
.empty{
  text-align:center;padding:40px 16px;color:var(--texto-suave);
  background:var(--card);border-radius:var(--raio-card);box-shadow:var(--sombra-card);
}
.empty .big{font-size:15px;font-weight:500;color:var(--texto);margin-bottom:6px}
.panel .empty,.modal .empty{background:none;box-shadow:none;padding:28px 12px}
.error-banner{
  display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  background:var(--sla-estouro-soft);color:var(--sla-estouro);
  border-radius:var(--raio-item);padding:12px 16px;margin-bottom:14px;
  font-size:13px;overflow-wrap:anywhere;
}
.error-banner button{
  background:none;border:none;color:var(--sla-estouro);font-weight:500;
  padding:0 4px;min-height:0;flex:0 0 auto;
}
.error-banner button:hover{background:none}
.error-banner.aviso{background:var(--sla-risco-soft);color:var(--sla-risco)}
.error-banner.aviso button{color:var(--sla-risco)}
.loading{padding:32px 12px;text-align:center;color:var(--texto-fraco);font-size:13px}

/* ---------- modal ---------- */
.overlay{
  position:fixed;inset:0;background:var(--veu);display:none;
  align-items:center;justify-content:center;z-index:50;padding:12px;
  padding-top:calc(12px + env(safe-area-inset-top));
  padding-bottom:calc(12px + env(safe-area-inset-bottom));
}
.overlay.open{display:flex}
.modal{
  background:var(--card);border-radius:var(--raio-card);width:100%;max-width:620px;
  max-height:90vh;display:flex;flex-direction:column;overflow:hidden;
  padding:20px 18px;box-shadow:var(--sombra-modal);
}
.modal.wide{max-width:880px}
.modal h2{flex:0 0 auto;font-size:17px;font-weight:500;margin-bottom:16px}
.modal-body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:8px}
.modal-actions{
  flex:0 0 auto;display:flex;gap:8px;justify-content:flex-end;
  padding-top:16px;border-top:1px solid var(--borda);
}
.modal-actions button{flex:1}
.form-grid{display:grid;grid-template-columns:1fr;gap:16px}
.form-grid .full{grid-column:1/-1}
.form-error{color:var(--negativo);font-size:12.5px;min-height:18px;margin-top:10px;overflow-wrap:anywhere}

/* ---------- cronômetro ---------- */
.timer-card{
  background:var(--azul-900);color:var(--branco);border-radius:var(--raio-card);
  padding:22px 18px;box-shadow:var(--sombra-card);margin-bottom:18px;
}
.timer-display{
  font-size:44px;font-weight:500;font-variant-numeric:tabular-nums;
  letter-spacing:.5px;text-align:center;margin:4px 0 16px;line-height:1;color:var(--branco);
}
.timer-card .field label{color:var(--clara-70)}
.timer-fields{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
.timer-actions{display:flex;gap:8px}
.timer-actions button{flex:1}
.timer-card .running-hint{
  font-size:12.5px;color:var(--clara-70);text-align:center;margin-top:12px;min-height:18px;
}

/* ---------- ficha ---------- */
.ficha-head{border-bottom:1px solid var(--borda);padding-bottom:14px;margin-bottom:16px}
.ficha-head .fh-name{font-size:17px;font-weight:500}
.ficha-head .fh-sub{color:var(--texto-suave);font-size:13px;margin-top:4px}
.kv-list{display:flex;flex-direction:column;gap:12px}
.kv{display:flex;flex-direction:column;gap:3px}
.kv .k{font-size:10px;text-transform:uppercase;letter-spacing:.8px;color:var(--texto-fraco);font-weight:500}
.kv .v{font-size:13.5px;overflow-wrap:anywhere;white-space:pre-wrap}

/* ---------- relatórios ---------- */
.rel-grid-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.rel-status{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:500;white-space:nowrap}
.rel-status.enviado{color:var(--positivo)}
.rel-status.atrasado{color:var(--negativo)}
.rel-status.pendente{color:var(--sla-risco)}

/* ==========================================================================
   Documento do orçamento — montado por js/documento.js e usado só na
   impressão. É o único bloco visual novo do módulo, como combinado.
   ========================================================================== */
.doc-print{
  display:none;background:var(--doc-fundo);color:var(--doc-tinta);
  color-scheme:light;
  font-size:12px;line-height:1.55;
}
.doc-cabecalho{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:20px;padding-bottom:16px;border-bottom:2px solid var(--doc-destaque);
}
.doc-marca{display:flex;align-items:center;gap:12px;min-width:0}
/* Assinatura Moon no cabeçalho, sempre. É <img> com caminho relativo, não
   background: fundo de CSS é descartado por padrão na impressão, e este precisa
   sair no papel. */
.doc-assinatura{width:150px;height:35px;display:block;flex:0 0 auto}
.doc-empresa-nome{font-size:15px;font-weight:500;color:var(--doc-destaque)}
/* Fredoka no título do documento; Manrope vem por herança do body. Se o Google
   Fonts não responder na hora de imprimir, as duas caem na pilha de sistema e o
   documento continua fechando na mesma caixa. */
.doc-titulo,.doc-id-num{
  font-family:'Fredoka','Manrope','Inter','Segoe UI',system-ui,sans-serif;
}
.doc-empresa-linha{font-size:10.5px;color:var(--doc-suave);margin-top:2px}
.doc-id{text-align:right;flex:0 0 auto}
.doc-id-num{font-size:16px;font-weight:500;color:var(--doc-destaque);font-variant-numeric:tabular-nums}
.doc-id-linha{font-size:10.5px;color:var(--doc-suave);margin-top:3px}

.doc-secao{margin-top:18px}
.doc-secao-rot{
  font-size:9.5px;text-transform:uppercase;letter-spacing:1px;
  color:var(--doc-fraco);font-weight:500;margin-bottom:6px;
}
.doc-cliente-nome{font-size:13px;font-weight:500}
.doc-cliente-linha{font-size:11px;color:var(--doc-suave);margin-top:2px}
.doc-titulo{font-size:17px;font-weight:500;margin-top:4px;color:var(--doc-tinta)}
.doc-texto{font-size:11.5px;color:var(--doc-suave);white-space:pre-wrap;margin-top:4px}

/* A regra global `table{}` do painel (fundo, sombra e raio) vazava para cá e
   desenhava uma caixa cinza em volta dos itens no PDF. Zerada explicitamente. */
.doc-tabela{
  width:100%;border-collapse:collapse;margin-top:8px;
  background:none;box-shadow:none;border-radius:0;overflow:visible;
}
.doc-tabela tbody tr:hover{background:none}
.doc-tabela tbody tr:nth-child(even):hover{background:var(--doc-zebra)}
.doc-tabela th{
  background:none;text-align:left;padding:7px 8px;
  font-size:9.5px;text-transform:uppercase;letter-spacing:.8px;
  color:var(--doc-fraco);font-weight:500;
  border-bottom:1px solid var(--doc-borda);white-space:nowrap;
}
.doc-tabela td{
  padding:9px 8px;border-bottom:1px solid var(--doc-linha);
  vertical-align:top;font-size:11.5px;
}
.doc-tabela tbody tr:nth-child(even){background:var(--doc-zebra)}
.doc-tabela .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.doc-item-desc{font-weight:500}
.doc-item-det{font-size:10.5px;color:var(--doc-suave);margin-top:2px;white-space:pre-wrap}

.doc-totais{display:flex;justify-content:flex-end;margin-top:14px}
.doc-totais-cx{min-width:250px}
.doc-total-linha{
  display:flex;justify-content:space-between;gap:24px;
  padding:5px 0;font-size:11.5px;color:var(--doc-suave);
  font-variant-numeric:tabular-nums;
}
.doc-total-linha.destaque{
  border-top:2px solid var(--doc-destaque);margin-top:5px;padding-top:9px;
  font-size:15px;font-weight:500;color:var(--doc-destaque);
}
.doc-validade{
  margin-top:18px;padding:10px 14px;border-radius:8px;
  border:1px solid var(--doc-destaque);
  font-size:11.5px;font-weight:500;color:var(--doc-destaque);text-align:center;
}
.doc-rodape{
  margin-top:22px;padding-top:12px;border-top:1px solid var(--doc-borda);
  font-size:10px;color:var(--doc-fraco);text-align:center;white-space:pre-wrap;
  display:flex;align-items:center;justify-content:center;gap:9px;
}
/* Logotipo pequeno ao lado do texto de rodapé. A opacidade é o que produz o cinza
   claro pedido: o SVG é um path fechado em Tinta e não herda cor de CSS, então
   recolorir exigiria outro arquivo. É decorativo — o texto ao lado é que informa. */
.doc-rodape-marca{width:52px;height:11px;flex:0 0 auto;opacity:.45}
.doc-blocos{display:flex;gap:28px;flex-wrap:wrap;margin-top:18px}
.doc-blocos>div{flex:1;min-width:180px}

/* ---------- toast ---------- */
.toast-wrap{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(18px + env(safe-area-inset-bottom));
  z-index:120;display:flex;flex-direction:column;gap:8px;
  width:calc(100% - 28px);max-width:440px;pointer-events:none;
}
.toast{
  background:var(--azul-900);color:var(--branco);padding:13px 16px;
  border-radius:var(--raio-item);font-size:13.5px;
  box-shadow:var(--sombra-modal);overflow-wrap:anywhere;
}
.toast.err{background:var(--negativo)}
.toast.ok{background:var(--positivo)}

/* ==========================================================================
   Tablet
   ========================================================================== */
@media(min-width:641px){
  button{font-size:13.5px;padding:9px 15px;min-height:40px}
  button.small{min-height:34px}
  input,select,textarea{font-size:13.5px;min-height:40px}
  textarea{min-height:40px}
  .icon-btn{width:36px;height:36px;min-height:36px}
  .icon-btn svg{width:16px;height:16px}

  .filters{flex-direction:row;flex-wrap:wrap;align-items:flex-end;gap:14px}
  .filters .field{width:auto;min-width:170px}
  .filters .field.grow{flex:1;min-width:220px}

  .cards-grid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
  .form-grid{grid-template-columns:1fr 1fr}
  .modal{padding:26px}
  .modal-actions button{flex:0 0 auto}

  .table-wrap{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .cards-wrap{display:none}

  .timer-card{display:flex;align-items:flex-end;gap:22px}
  .timer-display{font-size:38px;margin:0;text-align:left;flex:0 0 auto}
  .timer-fields{flex-direction:row;flex:1;margin-bottom:0;gap:14px}
  .timer-fields .field{flex:1}
  .timer-actions{flex:0 0 auto}
  .timer-actions button{min-width:130px}
  .timer-card .running-hint{margin-top:0}

  .donut-bloco{flex-direction:row;align-items:center;gap:28px;justify-content:center}
  .donut-lista{width:auto;min-width:210px}
  .graficos-grid{grid-template-columns:minmax(320px,.9fr) 1.1fr}
}

/* ==========================================================================
   Desktop — a sidebar deixa de ser off-canvas e vira coluna fixa
   ========================================================================== */
@media(min-width:961px){
  .nav-toggle{display:none}
  .sidebar-close{display:none}
  .sidebar-backdrop{display:none!important}

  .sidebar{
    position:sticky;top:16px;left:auto;bottom:auto;
    margin:16px 0 16px 16px;
    width:240px;flex:0 0 240px;
    height:calc(100vh - 32px);
    transform:none;
    border-radius:var(--raio-sidebar);
    box-shadow:var(--sombra-card);
  }
  .sidebar-head{padding:22px 18px 14px}
  .main{padding-right:0}
  .topbar{padding:22px 24px 10px}
  .topbar-heading h1{font-size:24px}
  .topbar-right .user-email{display:inline}
  .topbar-right #logoutTop{display:inline-flex}
  .wrap{padding:10px 24px 48px}
  .user-email{max-width:220px}
}

/* ==========================================================================
   Impressão — A4, margens de 15mm. Some tudo que é painel; fica só o
   documento. Nenhuma linha de item é partida entre páginas.
   ========================================================================== */
@page{ size:A4; margin:15mm; }

@media print{
  /* Mesmo com data-tema="escuro" no html, o papel sai claro. */
  html,html[data-tema="escuro"],body{
    background:var(--doc-fundo);color:var(--doc-tinta);
    color-scheme:light;margin:0;padding:0;
  }
  /* Some com TUDO que não seja o documento. Enumerar os filhos um a um era
     frágil (basta alguém acrescentar um nó novo em body para vazar na
     impressão); a exclusão por :not resolve de uma vez. */
  body>*:not(#docPrint){display:none!important}
  #docPrint.doc-print{display:block;padding:0;font-size:11pt}

  .doc-cabecalho{padding-bottom:12pt}
  .doc-secao{margin-top:14pt}
  .doc-tabela{page-break-inside:auto}
  .doc-tabela thead{display:table-header-group}
  .doc-tabela tfoot{display:table-footer-group}
  /* uma linha de item nunca se parte no meio */
  .doc-tabela tr,.doc-item-desc,.doc-item-det{
    page-break-inside:avoid;break-inside:avoid;
  }
  .doc-totais,.doc-validade,.doc-rodape,.doc-blocos>div{
    page-break-inside:avoid;break-inside:avoid;
  }
  .doc-rodape{position:running(rodape)}
  a{text-decoration:none;color:var(--doc-tinta)}
}