/* ==========================================================================
   Sistemas Visão - camada visual moderna

   Carregada por ÚLTIMO (depois de soma.css e visao.css). Não muda nenhuma
   tela: muda o desenho dos componentes que todas usam - cartão, botão, campo,
   tabela, etiqueta, aviso, modal, menu. O sistema herdado era de geometria
   reta e chrome escuro; aqui ele ganha cantos arredondados, sombras suaves,
   topo claro e tipografia Inter.

   A cor principal continua vindo da EMPRESA em gestão (--navy-900..500 no
   style do <html>, ver emp_paleta): cada assinante segue com a sua.
   ========================================================================== */

:root{
  --radius: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Cinzas frios (slate) */
  --gray-700: #475569;
  --gray-500: #64748B;
  --gray-300: #CBD5E1;
  --gray-200: #E2E8F0;
  --gray-100: #F1F5F9;
  --gray-050: #F8FAFC;
  --ink: #0F172A;

  --fundo: #F3F6FB;
  --borda: #E6EAF1;

  --shadow-1: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-2: 0 4px 12px rgba(15,23,42,.08);
  --shadow-3: 0 20px 48px rgba(15,23,42,.18);

  --anel: 0 0 0 3px color-mix(in srgb, var(--sv-azul) 16%, transparent);

  --font: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-num: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 22px;
}

body{
  background:var(--fundo);
  font-feature-settings:"cv11" 1, "ss01" 1;
  letter-spacing:-.005em;
}
.num, td.num, .valor, .num-mono{ font-feature-settings:"tnum" 1; }

::selection{ background:color-mix(in srgb, var(--sv-azul) 18%, transparent); }

/* Barra de rolagem discreta */
*{ scrollbar-width:thin; scrollbar-color:#CBD5E1 transparent; }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:#CBD5E1; border-radius:10px; border:2px solid transparent; background-clip:padding-box; }
*::-webkit-scrollbar-thumb:hover{ background:#94A3B8; background-clip:padding-box; }

/* --------------------------------------------------------------------------
   Coluna lateral
   -------------------------------------------------------------------------- */
.lateral{
  background:
    radial-gradient(420px 260px at 0% 0%, color-mix(in srgb, var(--sv-azul-claro) 18%, transparent), transparent 70%),
    linear-gradient(180deg, var(--navy-900) 0%, var(--sv-base, #071225) 100%);
  box-shadow:none;
  border-right:1px solid rgba(255,255,255,.04);
}
.lateral-marca{ height:88px; border-bottom:0; }
.lateral-nav{ padding:8px 12px 14px; gap:4px; }
.lateral-item{
  min-height:42px;
  padding:0 12px;
  border-left:0;
  border-radius:var(--radius);
  color:rgba(226,232,240,.72);
  font-weight:500;
  transition:background .15s ease, color .15s ease;
}
.lateral-item svg{ width:20px; height:20px; stroke-width:1.8; }
.lateral-item:hover{ background:rgba(255,255,255,.06); color:#fff; }
.lateral-item.ativo{
  position:relative;
  color:#fff;
  font-weight:600;
  background:linear-gradient(90deg, color-mix(in srgb, var(--sv-azul-claro) 26%, transparent), color-mix(in srgb, var(--sv-azul-claro) 8%, transparent));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--sv-azul-claro) 22%, transparent);
}
.lateral-item.ativo::before{
  content:""; position:absolute; left:-12px; top:9px; bottom:9px; width:4px;
  border-radius:0 4px 4px 0; background:var(--sv-azul-claro);
}
.lateral-item.ativo svg{ color:var(--sv-azul-claro); }
.lateral-divisor{ margin:16px 12px 6px; border-top-color:rgba(255,255,255,.08); }
.lateral-pe{
  margin:0 12px 12px;
  padding:12px 14px;
  border:0;
  border-radius:var(--radius);
  background:rgba(255,255,255,.05);
}

/* --------------------------------------------------------------------------
   Topo: claro e fixo, com o vidro fosco por cima do conteúdo
   -------------------------------------------------------------------------- */
.app-lateral .topo{
  position:sticky; top:0; z-index:60;
  height:64px;
  padding:0 28px;
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  backdrop-filter:saturate(180%) blur(12px);
  color:var(--ink);
  border-bottom:1px solid var(--borda);
  box-shadow:none;
}
.topo-empresa-nome{ color:var(--ink); font-weight:700; font-size:15px; letter-spacing:-.01em; }
.topo img{ height:30px; }
.sino-botao{ color:var(--gray-700); width:40px; height:40px; }
.sino-botao:hover{ background:var(--gray-100); }
.sino-botao:focus-visible, .conta-botao:focus-visible{ outline-color:var(--navy-500); }
.conta-botao{ color:var(--ink); padding:4px 6px 4px 12px; height:46px; border-radius:var(--radius-pill); }
.conta-botao:hover{ background:var(--gray-100); }
.conta-nome small{ color:var(--gray-500); }
.conta-avatar{ box-shadow:0 0 0 2px #fff, 0 0 0 3px var(--gray-200); }
.lateral-botao{ color:var(--ink); border-color:var(--gray-200); border-radius:var(--radius); }
.lateral-botao:hover{ background:var(--gray-100); }

/* Menus que caem do topo */
.conta-menu, .sino-menu, .submenu, .menu-contexto{
  border:1px solid var(--borda);
  border-top:1px solid var(--borda);
  border-radius:14px;
  box-shadow:0 18px 40px rgba(15,23,42,.14);
  overflow:hidden;
}
.conta-menu{ padding:6px; }
.conta-item{ border-radius:8px; }

/* --------------------------------------------------------------------------
   Conteúdo e cabeçalho da página
   -------------------------------------------------------------------------- */
.conteudo{ padding:28px 32px 40px; }
.cabecalho-pagina{ margin-bottom:22px; }
.titulo-pagina{
  font-size:26px;
  font-weight:800;
  letter-spacing:-.025em;
  text-transform:none;
  color:var(--ink);
}
.icone-titulo{ display:none; }
.conteudo .cabecalho-pagina .titulo-pagina,
.conteudo h1.titulo-pagina{ text-transform:none !important; letter-spacing:-.025em !important; }

/* --------------------------------------------------------------------------
   Cartões
   -------------------------------------------------------------------------- */
.bloco, .cartao, .passos, .kpi, .cfg-cartao, .passo-inicio{
  border:1px solid var(--borda);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-1);
}
.bloco{ margin-bottom:20px; }
.bloco > h2{
  margin-bottom:16px;
  padding-bottom:0;
  border-bottom:0;
  font-size:16px;
  font-weight:700;
  letter-spacing:-.01em;
  text-transform:none;
  color:var(--ink);
}

/* Indicadores */
.kpis{ gap:16px; margin-bottom:20px; }
.kpi{
  padding:18px 20px;
  border-left:1px solid var(--borda);
  transition:transform .15s ease, box-shadow .15s ease;
}
a.kpi:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2); }
.kpi::after{
  content:""; position:absolute; top:18px; right:18px;
  width:10px; height:10px; border-radius:50%;
  background:var(--sv-azul); opacity:.85;
  box-shadow:0 0 0 5px color-mix(in srgb, var(--sv-azul) 12%, transparent);
}
.kpis-visao .kpi.kpi-atencao::after, .kpi.kpi-alerta::after{ background:var(--red); box-shadow:0 0 0 5px rgba(227,6,19,.12); }
.kpis-visao .kpi, .kpis-visao .kpi.kpi-atencao{ border-left-color:var(--borda); }
.kpi-rotulo{
  font-size:12.5px;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
  color:var(--gray-500);
}
.kpi-valor{ margin:8px 0 6px; font-size:30px; font-weight:800; letter-spacing:-.03em; }
.kpi-nota{ color:var(--gray-500); }

/* Configurador e primeiros passos */
.cfg-cartao{ border-left:1px solid var(--borda); padding:20px; transition:transform .15s ease, box-shadow .15s ease; }
.cfg-cartao:hover{ background:#fff; transform:translateY(-2px); box-shadow:var(--shadow-2); }
.cfg-cartao svg{
  width:44px; height:44px; padding:10px;
  border-radius:12px;
  background:color-mix(in srgb, var(--sv-azul) 8%, transparent);
}
.cfg-cartao.cfg-plataforma svg{ background:rgba(36,40,47,.08); }
.cfg-cartao.cfg-plataforma{ border-left-color:var(--borda); }
.passo-inicio{ border-top:1px solid var(--borda); position:relative; padding-left:20px; }
.passo-inicio::before{
  content:""; position:absolute; left:0; top:16px; bottom:16px; width:3px;
  border-radius:0 3px 3px 0; background:var(--sv-azul);
}
.passo-inicio.feito::before{ background:#16A34A; }

.barra-mes{ height:10px; border:0; border-radius:var(--radius-pill); background:var(--gray-100); }
.barra-mes span{ border-radius:var(--radius-pill); background:linear-gradient(90deg, var(--sv-azul), var(--sv-azul-claro)); }

/* Estado vazio */
.cartao.vazio{ border-style:dashed; box-shadow:none; background:var(--gray-050); color:var(--gray-500); }

/* --------------------------------------------------------------------------
   Botões
   -------------------------------------------------------------------------- */
.btn{
  min-height:40px;
  padding:0 16px;
  border-radius:var(--radius);
  font-weight:600;
  letter-spacing:-.005em;
  transition:background .15s ease, box-shadow .15s ease, transform .1s ease, border-color .15s ease;
}
a.btn{ text-decoration:none; }
.btn:active{ transform:translateY(1px); }
.btn-primary{
  background:linear-gradient(180deg, var(--navy-500), var(--navy-600));
  box-shadow:0 1px 2px rgba(15,23,42,.12), 0 4px 12px rgba(15,23,42,.10);
}
.btn-primary:hover{ background:linear-gradient(180deg, var(--navy-500), var(--navy-500)); box-shadow:0 6px 18px rgba(15,23,42,.16); }
.btn-ghost{ border-color:var(--gray-200); color:var(--ink); }
.btn-ghost:hover{ background:var(--gray-050); border-color:var(--gray-300); }
.btn-danger{ box-shadow:0 4px 12px rgba(227,6,19,.18); }
.btn-mini{ min-height:30px; padding:0 11px; border-radius:8px; }
.btn:focus-visible{ outline:none; box-shadow:var(--anel); }

/* --------------------------------------------------------------------------
   Campos
   -------------------------------------------------------------------------- */
.campo label{ color:var(--gray-700); font-weight:600; letter-spacing:0; }
.entrada{
  min-height:42px;
  border-color:var(--gray-200);
  border-radius:var(--radius);
  box-shadow:0 1px 2px rgba(15,23,42,.03);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.entrada:hover{ border-color:var(--gray-300); }
.entrada:focus{ outline:none; border-color:var(--navy-500); box-shadow:var(--anel); }
textarea.entrada{ padding-top:10px; padding-bottom:10px; }
select.entrada{ background-position:calc(100% - 16px) 18px, calc(100% - 11px) 18px; }
.btn-campo{ border-radius:0 var(--radius) var(--radius) 0; border-color:var(--gray-200); background:var(--gray-050); }
.campo-controle:has(.entrada:focus) .btn-campo{ border-color:var(--navy-500); }

/* --------------------------------------------------------------------------
   Tabelas
   -------------------------------------------------------------------------- */
.tabela-rolagem{
  border:1px solid var(--borda);
  border-radius:12px;
  background:#fff;
}
/* Tabela dentro de card (bloco/cartão) ou de modal: o card já é a caixa. A
   moldura própria somava com a linha do título e desenhava riscos duplos em
   cima e embaixo. Sem ela, fica só o card - padrão de todas as telas. A
   moldura continua valendo para tabela solta na página. */
.bloco .tabela-rolagem,
.cartao .tabela-rolagem,
.modal .tabela-rolagem,
.drawer .tabela-rolagem{ border:0; border-radius:0; }
.bloco .tabela > tbody > tr:last-child > td,
.cartao .tabela > tbody > tr:last-child > td{ border-bottom:0; }
.tabela{ font-size:var(--fs-sm); }
.tabela th{
  padding:11px 14px;
  background:var(--gray-050);
  border-bottom:1px solid var(--borda);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--gray-500);
}
.tabela td{ padding:12px 14px; border-bottom:1px solid #EEF2F7; }
.tabela tbody tr:last-child td{ border-bottom:0; }
.tabela tbody tr{ transition:background .12s ease; }
.tabela tbody tr:hover{ background:#F6F9FE; }
.tabela-clicavel tr.marcada > td{ background:color-mix(in srgb, var(--sv-azul) 6%, transparent); }

/* --------------------------------------------------------------------------
   Etiquetas: pílulas sem moldura
   -------------------------------------------------------------------------- */
.carimbo{
  min-width:0;
  padding:4px 11px;
  border:0;
  border-radius:var(--radius-pill);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.01em;
}
.carimbo-verde   { background:#DCFCE7; color:#166534; }
.carimbo-vermelho{ background:#FEE2E2; color:#B91C1C; }
.carimbo-amarelo { background:#FEF3C7; color:#92400E; }
.carimbo-azul    { background:#DBEAFE; color:#1D4ED8; }
.carimbo-laranja { background:#FFEDD5; color:#C2410C; }
.carimbo-roxo    { background:#EDE9FE; color:#6D28D9; }
.carimbo-ciano   { background:#CFFAFE; color:#0E7490; }
.carimbo-cinza   { background:#F1F5F9; color:#475569; }
.tabela .carimbo{ width:auto; display:inline-flex; }

/* --------------------------------------------------------------------------
   Avisos
   -------------------------------------------------------------------------- */
.aviso{
  border-width:1px;
  border-left-width:1px;
  border-radius:12px;
  padding:13px 16px;
}
.aviso-erro{ background:#FEF2F2; border-color:#FECACA; color:#991B1B; }
.aviso-atencao{ background:#FFFBEB; border-color:#FDE68A; color:#92400E; }
.aviso-ok{ background:#F0FDF4; border-color:#BBF7D0; color:#166534; }

/* --------------------------------------------------------------------------
   Modais, painel lateral e fundo
   -------------------------------------------------------------------------- */
.modal-fundo, .drawer-fundo, .lateral-fundo{
  background:rgba(15,23,42,.42);
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
}
.modal{
  border-top:0;
  border-radius:20px;
  padding:26px;
  box-shadow:var(--shadow-3);
}
.modal h2{ font-size:18px; font-weight:700; letter-spacing:-.015em; }
.modal-acoes{ margin-top:22px; padding-top:16px; border-top:1px solid var(--borda); }
.drawer{ border-left:0; border-radius:20px 0 0 20px; box-shadow:-20px 0 48px rgba(15,23,42,.16); overflow:hidden; }
.drawer-topo{ background:linear-gradient(135deg, var(--navy-900), var(--navy-700)); }

/* --------------------------------------------------------------------------
   Botão flutuante
   -------------------------------------------------------------------------- */
.fab{
  background:linear-gradient(135deg, var(--sv-azul-claro), var(--sv-azul));
  box-shadow:0 12px 28px color-mix(in srgb, var(--sv-azul) 38%, transparent);
}
.fab:hover{ box-shadow:0 16px 34px color-mix(in srgb, var(--sv-azul) 45%, transparent); }
.fab-rotulo{ border-radius:var(--radius-pill); padding:7px 14px; background:var(--ink); }
.fab-icone{ box-shadow:var(--shadow-2); }
.fab-acao:hover .fab-icone{ background:var(--sv-azul); }

/* Abas de título (Orçamentos x Propostas) */
.titulo-aba.ativa:after{ background:var(--sv-azul); }

/* --------------------------------------------------------------------------
   Rodapé
   -------------------------------------------------------------------------- */
.rodape-sistema{ background:transparent; border-top:1px solid var(--borda); color:var(--gray-500); }

/* --------------------------------------------------------------------------
   Entrada e criar conta
   -------------------------------------------------------------------------- */
.tela-login{
  background:
    radial-gradient(800px 500px at 85% 10%, color-mix(in srgb, var(--sv-azul-claro) 30%, transparent), transparent 60%),
    radial-gradient(700px 500px at 0% 100%, color-mix(in srgb, var(--sv-azul) 28%, transparent), transparent 60%),
    linear-gradient(160deg, #0a2350 0%, #061531 55%, #040c1f 100%);
}
.login-cartao{
  border-top:0;
  border-radius:24px;
  padding:38px 40px 32px;
  box-shadow:0 40px 90px rgba(2,8,23,.55), 0 0 0 1px rgba(255,255,255,.06);
}
.login-cartao h1{ font-size:28px; letter-spacing:-.03em; }
.lg-campo{ border-radius:12px; background:#F8FAFC; border-color:var(--gray-200); }
.lg-campo:focus-within{ border-color:var(--sv-azul); box-shadow:var(--anel); }
.lg-entrar{
  border-radius:12px;
  background:linear-gradient(135deg, var(--sv-azul-claro) 0%, var(--sv-azul) 60%);
  box-shadow:0 10px 26px color-mix(in srgb, var(--sv-azul) 35%, transparent);
}
.lg-entrar:hover{ background:linear-gradient(135deg, var(--sv-azul) 0%, var(--sv-azul-escuro) 100%); box-shadow:0 12px 30px color-mix(in srgb, var(--sv-azul) 45%, transparent); }
.lg-aviso{ border-radius:12px; }
.login-rodape{ border-top:1px solid rgba(255,255,255,.06); }

@media (max-width:900px){
  .app-lateral .topo{ padding:0 16px; }
  .conteudo{ padding:20px 16px 32px; }
  .titulo-pagina{ font-size:22px; }
}

/* --------------------------------------------------------------------------
   Entrar: login + planos lado a lado
   -------------------------------------------------------------------------- */
.entrar-topo{ position:relative; z-index:3; padding:20px clamp(20px, 4vw, 56px) 0; }
.entrar-voltar{ display:inline-flex; align-items:center; gap:8px; color:#cbd5e1; font-size:14px; font-weight:500; text-decoration:none; }
.entrar-voltar:hover{ color:#fff; }
.entrar-voltar svg{ width:18px; height:18px; }
.entrar-grade{ display:grid; grid-template-columns:452px 400px; gap:28px; align-items:center; width:100%; max-width:900px; }
.entrar-grade .login-cartao{ max-width:none; }
.entrar-planos{
  padding:30px 28px; border-radius:24px; color:#cbd5e1;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.entrar-planos h2{ margin:0 0 8px; color:#fff; font-size:22px; font-weight:800; letter-spacing:-.02em; }
.entrar-planos > p{ margin:0 0 18px; font-size:14.5px; line-height:1.5; }
.entrar-planos b{ color:#fff; }
.entrar-lista{ display:grid; gap:10px; }
.entrar-plano{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px; border-radius:14px; text-decoration:none;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.10);
  transition:background .15s ease, transform .15s ease, border-color .15s ease;
}
.entrar-plano:hover{ background:rgba(255,255,255,.13); transform:translateY(-1px); }
.entrar-plano.destaque{ border-color:color-mix(in srgb, var(--sv-azul-claro) 70%, transparent); background:color-mix(in srgb, var(--sv-azul-claro) 16%, transparent); }
.ep-nome b{ display:block; color:#fff; font-size:15px; }
.ep-nome small{ color:#94a3b8; font-size:12.5px; }
.ep-preco{ color:#cbd5e1; font-size:13px; white-space:nowrap; }
.ep-preco b{ color:#fff; font-size:19px; font-weight:800; letter-spacing:-.02em; }
.ep-preco small{ color:#94a3b8; margin-left:2px; }
.entrar-cadastro{
  display:flex; align-items:center; justify-content:center; margin-top:18px; min-height:48px;
  border-radius:12px; font-weight:700; text-decoration:none; color:#0b3a8c; background:#fff;
  box-shadow:0 10px 24px rgba(2,8,23,.25);
}
.entrar-cadastro:hover{ background:#eef5ff; }
.entrar-pix{ display:flex; gap:10px; align-items:flex-start; margin:16px 0 0; font-size:12.5px; color:#94a3b8; line-height:1.45; }
.entrar-pix svg{ flex:none; width:18px; height:18px; color:#32BCAD; margin-top:1px; }
.lg-entrar.lg-pix{ margin:0 0 16px; text-decoration:none; color:#fff; background:linear-gradient(135deg, #32BCAD, #1f8f84); box-shadow:0 10px 24px rgba(50,188,173,.35); }
a.lg-entrar{ text-decoration:none; color:#fff; }
@media (max-width:940px){
  .entrar-grade{ grid-template-columns:1fr; max-width:452px; }
}

/* --------------------------------------------------------------------------
   Pagamento por PIX
   -------------------------------------------------------------------------- */
.login-cartao.cartao-pix{ max-width:600px; }
.pix-resumo{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin:6px 0 22px; }
.pix-resumo div{ padding:12px 14px; border-radius:12px; background:#F8FAFC; border:1px solid var(--gray-200); }
.pix-resumo small{ display:block; font-size:11.5px; font-weight:600; color:var(--gray-500); }
.pix-resumo b{ display:block; font-size:17px; color:var(--ink); letter-spacing:-.01em; }
.pix-resumo span{ font-size:11.5px; color:var(--gray-500); }
.pix-area{ display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:center; margin-bottom:18px; }
.pix-qr{ padding:10px; border-radius:16px; background:#fff; border:1px solid var(--gray-200); box-shadow:var(--shadow-1); }
.pix-qr svg{ display:block; width:200px; height:200px; }
.pix-passos{ margin:0; padding-left:20px; display:grid; gap:10px; font-size:14px; color:var(--gray-700); }
.pix-rotulo{ display:block; margin-bottom:6px; font-size:12.5px; font-weight:600; color:var(--gray-700); }
.pix-copia{ display:grid; grid-template-columns:1fr auto; gap:10px; align-items:stretch; }
.pix-copia textarea{
  width:100%; resize:none; padding:10px 12px; border-radius:12px; border:1px solid var(--gray-200);
  background:#F8FAFC; font:12px/1.4 Consolas, "Courier New", monospace; color:var(--ink); word-break:break-all;
}
.pix-form{ margin-top:18px; }
@media (max-width:560px){
  .pix-resumo{ grid-template-columns:1fr; }
  .pix-area{ grid-template-columns:1fr; justify-items:center; }
  .pix-copia{ grid-template-columns:1fr; }
}
/* Gestão da plataforma: distribuição por plano e novos por mês */
.dist{ display:grid; gap:14px; }
.dist-linha{ display:grid; grid-template-columns:150px 1fr 36px; gap:12px; align-items:center; font-size:14px; }
.dist-nome{ color:var(--ink); font-weight:600; line-height:1.2; }
.dist-nome small{ display:block; font-weight:400; color:var(--gray-500); font-size:12px; }
.dist-barra{ height:10px; border-radius:99px; background:var(--gray-100); overflow:hidden; }
.dist-barra i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg, var(--sv-azul), var(--sv-azul-claro)); }
.dist-linha b{ text-align:right; color:var(--ink); }
.colunas-mes{ display:grid; grid-template-columns:repeat(6, 1fr); gap:12px; align-items:end; height:190px; }
.coluna-mes{ display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; }
.coluna-mes b{ font-size:14px; color:var(--ink); }
.coluna-barra{ flex:1; width:100%; max-width:46px; display:flex; align-items:flex-end; border-radius:10px; background:var(--gray-050); }
.coluna-barra i{ display:block; width:100%; min-height:4px; border-radius:10px; background:linear-gradient(180deg, var(--sv-azul-claro), var(--sv-azul)); }
.coluna-mes small{ font-size:12px; color:var(--gray-500); }
/* Cards lado a lado com a MESMA altura: se um cresce, o vizinho cresce junto.
   (Dashboards da plataforma e da empresa: indicadores e os painéis em dupla.) */
.kpis{ align-items:stretch; }
.kpis > .kpi{ height:100%; display:flex; flex-direction:column; }
.kpis > .kpi .kpi-nota{ margin-top:auto; }
.painel-duplo{ align-items:stretch; }
.painel-duplo > .bloco{ height:100%; display:flex; flex-direction:column; margin-bottom:0; }
.painel-duplo > .bloco > .tabela-rolagem,
.painel-duplo > .bloco > .cartao.vazio,
.painel-duplo > .bloco > .dist,
.painel-duplo > .bloco > .colunas-mes{ flex:1 1 auto; }
/* Assinantes: as ações moram no botão direito da linha. */
tr[data-assinante]{ cursor:context-menu; }
.menu-assinante{ min-width:250px; }
tr[data-assinante].marcada > td{ background:color-mix(in srgb, var(--sv-azul) 7%, transparent); }
tr[data-fatura]{ cursor:context-menu; }
tr[data-fatura].marcada > td{ background:color-mix(in srgb, var(--sv-azul) 7%, transparent); }

/* Configurações da plataforma: planos editados pelo botão direito. */
tr[data-plano]{ cursor:context-menu; }
.modal-plano{ width:min(620px, calc(100vw - 32px)); max-height:calc(100vh - 40px); overflow:auto; }
.plano-qr{ display:flex; gap:14px; align-items:flex-start; }
.plano-qr img{ width:120px; height:120px; object-fit:contain; border:1px solid var(--gray-200); border-radius:12px; padding:6px; background:#fff; }
.plano-qr > div{ flex:1; }
.pix-qr img{ display:block; width:200px; height:200px; object-fit:contain; }

/* O espaço embaixo do formulário existe para o botão flutuante (+). Em tela sem ele, sobra branco - some. */
body:not(:has(.fab-grupo)) .ficha{ padding-bottom:0; }

/* --------------------------------------------------------------------------
   Configuração inicial (primeiro acesso)
   -------------------------------------------------------------------------- */
.login-cartao.cartao-inicial{ max-width:640px; }
.ini-topo{ display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.ini-topo img{ height:44px; width:auto; }
.ini-topo .lg-link{ font-size:14px; }
.ini-passos{ display:flex; gap:8px; margin:4px 0 22px; padding:0; list-style:none; }
.ini-passos li{
  flex:1; display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:12px;
  background:#F1F5F9; color:var(--gray-500); font-size:13.5px; font-weight:600;
}
.ini-passos li span{
  display:grid; place-items:center; width:24px; height:24px; border-radius:50%;
  background:#fff; color:var(--gray-500); font-size:12px; font-weight:800; border:1px solid var(--gray-200);
}
.ini-passos li.ativo{ background:#E8F1FF; color:#0b3a8c; }
.ini-passos li.ativo span{ background:var(--sv-azul); color:#fff; border-color:var(--sv-azul); }
.ini-passos li.feito{ color:#166534; background:#F0FDF4; }
.ini-passos li.feito span{ background:#16A34A; border-color:#16A34A; color:#fff; font-size:0; }
.ini-passos li.feito span::before{ content:"✓"; font-size:12px; }
.ini-passo h2{ margin:0 0 6px; font-size:18px; font-weight:700; letter-spacing:-.015em; color:var(--ink); }
.ini-passo > .ajuda{ margin:0 0 16px; font-size:13.5px; color:var(--gray-700); }
.ini-logo{
  display:flex; align-items:center; justify-content:center; min-height:170px; padding:18px;
  border:2px dashed var(--gray-300); border-radius:16px; background:#F8FAFC; cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.ini-logo:hover, .ini-logo.sobre{ border-color:var(--sv-azul); background:#F0F6FF; }
.ini-logo.carregando{ opacity:.6; pointer-events:none; }
.ini-logo img{ max-width:100%; max-height:130px; object-fit:contain; }
.ini-logo span{ display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--gray-500); text-align:center; }
.ini-logo span svg{ width:38px; height:38px; color:var(--sv-azul); margin-bottom:6px; }
.ini-logo span b{ color:var(--ink); font-size:15px; }
.ini-status{ flex:none; font-size:12.5px; font-weight:700; padding:4px 10px; border-radius:99px; }
.ini-status.buscando{ color:#1D4ED8; background:#DBEAFE; }
.ini-status.ok{ color:#166534; background:#DCFCE7; }
.ini-cartao{
  display:grid; gap:4px; margin:0 0 6px; padding:14px 16px; border-radius:14px;
  background:#F0FDF4; border:1px solid #BBF7D0; font-size:13.5px; color:#14532D;
}
.ini-cartao b{ font-size:15px; color:#052e16; }
.ini-acoes{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:22px; }
.ini-acoes .lg-entrar{ width:auto; margin:0; padding:0 26px; min-height:46px; }
.lg-corpo label small{ font-weight:600; color:var(--sv-azul); }.cartao-inicial .btn-primary, .cartao-pix .btn-primary{ background:linear-gradient(135deg, var(--sv-azul-claro), var(--sv-azul) 65%); box-shadow:0 8px 20px color-mix(in srgb, var(--sv-azul) 28%, transparent); }

/* --------------------------------------------------------------------------
   Coluna do assinante: a marca dele em cima, o Sistemas Visão no pé
   -------------------------------------------------------------------------- */
.lateral-marca-empresa{ height:auto; min-height:96px; padding:16px 14px 10px; }
.marca-cartao{
  display:flex; align-items:center; justify-content:center; width:100%; height:72px; padding:8px 12px;
  border-radius:14px; background:#fff; box-shadow:0 6px 18px rgba(0,0,0,.18);
}
.marca-cartao img{ max-width:100%; max-height:56px; width:auto; height:auto; object-fit:contain; }
.marca-nome{ display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px; border-radius:14px; background:rgba(255,255,255,.07); }
.marca-nome i{
  flex:none; display:grid; place-items:center; width:38px; height:38px; border-radius:11px;
  font-style:normal; font-weight:800; font-size:17px; color:#fff;
  background:linear-gradient(135deg, var(--sv-azul-claro), var(--sv-azul));
}
.marca-nome b{ color:#fff; font-size:14px; line-height:1.25; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.lateral-pe-visao{ display:flex; justify-content:center; padding:14px 18px; background:rgba(255,255,255,.04); }
.lateral-pe-visao img{ width:150px; max-width:100%; height:auto; opacity:.92; }
/* A marca no pé do menu: cores naturais do Sistemas Visão, com transparência. */
.lateral-pe-visao img.lateral-pe-marca{ opacity:.5; transition:opacity .2s; }
.lateral-pe-visao img.lateral-pe-marca:hover{ opacity:.8; }

/* Paletas na configuração inicial */
.paletas{ display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; }
.paleta{
  display:flex; flex-direction:column; gap:10px; padding:12px; border-radius:14px; cursor:pointer;
  background:#fff; border:2px solid var(--gray-200); text-align:left; font:inherit;
  transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.paleta:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2); }
.paleta.escolhida{ border-color:var(--p1); box-shadow:0 0 0 4px color-mix(in srgb, var(--p1) 18%, transparent); }
.paleta-amostra{ display:grid; grid-template-columns:34px 1fr; height:62px; border-radius:10px; overflow:hidden; }
.paleta-amostra .pa-menu{ background:linear-gradient(180deg, var(--p3), #000 160%); display:flex; flex-direction:column; gap:5px; padding:8px 7px; }
.paleta-amostra .pa-menu i{ height:5px; border-radius:3px; background:rgba(255,255,255,.25); }
.paleta-amostra .pa-menu i:first-child{ background:var(--p2); }
.paleta-amostra .pa-tela{ background:#F3F6FB; padding:8px; display:flex; flex-direction:column; justify-content:space-between; }
.paleta-amostra .pa-tela span{ height:7px; width:70%; border-radius:4px; background:#CBD5E1; }
.paleta-amostra .pa-tela b{ height:14px; width:54%; border-radius:6px; background:linear-gradient(135deg, var(--p2), var(--p1)); }
.paleta-rotulo{ display:flex; align-items:center; justify-content:space-between; font-weight:700; color:var(--ink); font-size:14px; }
.paleta-cores{ display:flex; gap:4px; }
.paleta-cores i{ width:14px; height:14px; border-radius:50%; border:1px solid rgba(0,0,0,.08); }
@media (max-width:560px){ .paletas{ grid-template-columns:repeat(2, 1fr); } }

/* Modal de usuários do assinante (avatar) */
.modal-equipe{ width:min(640px, calc(100vw - 32px)); max-height:calc(100vh - 40px); overflow:auto; }
.equipe-lista{ list-style:none; margin:12px 0 4px; padding:0; display:grid; gap:8px; }
.equipe-lista li{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:12px; background:var(--gray-050); border:1px solid var(--borda); }
.equipe-lista li.desligado{ opacity:.55; }
.equipe-avatar{ flex:none; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; font-weight:800; color:#fff; background:linear-gradient(135deg, var(--sv-azul-claro), var(--sv-azul)); }
.equipe-nome{ flex:1; min-width:0; line-height:1.25; }
.equipe-nome b{ display:block; color:var(--ink); }
.equipe-nome small{ color:var(--gray-500); font-size:12px; }
.equipe-lista .carimbo{ width:auto; display:inline-flex; white-space:nowrap; }
.equipe-sub{ margin:18px 0 10px; font-size:15px; font-weight:700; color:var(--ink); }

/* A marca do assinante não é link: sem mãozinha nem realce ao passar o mouse. */
.lateral-marca-empresa{ cursor:default; user-select:none; }
.lateral-marca-empresa img{ -webkit-user-drag:none; pointer-events:none; }

/* Volta para a Gestão - só aparece para o dono da plataforma dentro de uma empresa. */
.topo-voltar-gestao{ display:inline-flex; align-items:center; gap:6px; margin-left:14px; padding:6px 12px; border-radius:999px; font-size:12.5px; font-weight:600; text-decoration:none; color:#fff; background:var(--ink); }
.topo-voltar-gestao:hover{ background:#1e293b; }
.topo-voltar-gestao svg{ width:15px; height:15px; }

/* O cartão da logo do assinante é transparente: a logo (sempre com fundo transparente) fica direto sobre a coluna. */
.marca-cartao{ background:transparent; box-shadow:none; padding:4px 6px; }

/* O cartão do Sistemas Visão no pé da coluna também é transparente. */
.lateral-pe.lateral-pe-visao{ background:transparent; box-shadow:none; }

/* Marca d'água do poço de elevador na coluna (2026-10-04). A foto entra em
   CINZA e pega a cor da coluna por mesclagem (luminosity): o tom vem sempre da
   PALETA da empresa (--navy-900 / --sv-base / --sv-azul-claro), nunca do azul da
   foto. Fica presa ao pé da coluna, some suave para cima e não recebe clique. */
.lateral{ isolation:isolate; }
.lateral::before{
  content:""; position:fixed; left:0; bottom:0; z-index:0; pointer-events:none;
  width:var(--lateral); height:min(78vh, 640px);
  background:url("../img/visao/marca-dagua-poco.jpg") center bottom / cover no-repeat;
  filter:grayscale(1) contrast(1.25) brightness(1.15);
  mix-blend-mode:luminosity;
  opacity:.62;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 38%, #000 100%);
          mask-image:linear-gradient(180deg, transparent 0%, #000 38%, #000 100%);
}
/* Um brilho na cor de destaque da paleta, onde fica a cabine iluminada. */
.lateral::after{
  content:""; position:fixed; left:0; bottom:0; z-index:0; pointer-events:none;
  width:var(--lateral); height:min(78vh, 640px);
  background:radial-gradient(120px 150px at 62% 64%, color-mix(in srgb, var(--sv-azul-claro) 30%, transparent), transparent 75%);
  mix-blend-mode:screen;
}
.lateral > *{ position:relative; z-index:1; }
@media print{ .lateral::before, .lateral::after{ display:none; } }

/* Usuários e permissões: senha com olho e ações no botão direito */
.tabela-usuarios tr[data-acesso]{ cursor:context-menu; }
.tabela-usuarios tr.marcada > td{ background:color-mix(in srgb, var(--sv-azul) 7%, transparent); }
.usu-senha{ display:inline-flex; align-items:center; gap:6px; }
.usu-olho{ display:inline-grid; place-items:center; width:26px; height:26px; padding:0; border:0; border-radius:8px; background:transparent; color:var(--gray-500); cursor:pointer; }
.usu-olho:hover, .usu-olho.ativo{ background:var(--gray-100); color:var(--sv-azul); }
.usu-olho svg{ width:16px; height:16px; }

/* Criar conta: as duas portas (testar x contratar) */
.cad-modos{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0 0 14px; }
.cad-modo{ display:flex; flex-direction:column; gap:2px; padding:12px 14px; border-radius:12px; border:2px solid var(--gray-200); background:#F8FAFC; cursor:pointer; }
.cad-modo input{ position:absolute; opacity:0; pointer-events:none; }
.cad-modo b{ color:var(--ink); font-size:15px; }
.cad-modo small{ color:var(--gray-500); font-size:12.5px; }
.cad-modo.escolhido{ border-color:var(--sv-azul); background:#F0F6FF; }

/* --------------------------------------------------------------------------
   Tarja de bloqueio por pendência financeira (real ou simulada com Ctrl+M)
   -------------------------------------------------------------------------- */
.tarja-fundo{
  position:fixed; inset:0; z-index:9000;
  display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(15,23,42,.55);
  -webkit-backdrop-filter:blur(4px) grayscale(.6); backdrop-filter:blur(4px) grayscale(.6);
}
.tarja{
  display:flex; align-items:center; gap:22px; width:min(980px, 100%);
  padding:26px 30px; border-radius:20px;
  background:linear-gradient(135deg, #B91C1C, #DC2626 55%, #EF4444);
  color:#fff; box-shadow:0 30px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.12) inset;
}
.tarja-icone{ flex:none; display:grid; place-items:center; width:62px; height:62px; border-radius:18px; background:rgba(255,255,255,.16); }
.tarja-icone svg{ width:32px; height:32px; }
.tarja-texto{ flex:1; min-width:0; }
.tarja-texto strong{ display:block; font-size:22px; font-weight:800; letter-spacing:-.02em; line-height:1.2; }
.tarja-texto p{ margin:6px 0 0; font-size:14.5px; line-height:1.5; color:rgba(255,255,255,.9); }
.tarja-simulacao{ display:inline-block; margin-bottom:6px; padding:3px 10px; border-radius:99px; font-size:12px; font-weight:700; background:rgba(0,0,0,.25); }
.tarja-botao{
  flex:none; display:inline-flex; align-items:center; min-height:48px; padding:0 22px; border-radius:12px;
  font-weight:700; text-decoration:none; color:#B91C1C; background:#fff; box-shadow:0 8px 20px rgba(0,0,0,.2);
}
.tarja-botao:hover{ background:#FEF2F2; }
.tarja-botao-mudo{ opacity:.7; cursor:default; }
html.com-tarja, html.com-tarja body{ overflow:hidden; }
@media (max-width:720px){ .tarja{ flex-direction:column; text-align:center; } }
.tarja-sair{ flex:none; color:rgba(255,255,255,.85); font-size:13px; font-weight:600; text-decoration:underline; }
.tarja-sair:hover{ color:#fff; }

/* Título de bloco com navegação de mês à direita (Histórico de recebimentos) */
.bloco-titulo-nav{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.bloco-titulo-nav > h2{ margin:0; }
.nav-mes{ display:inline-flex; align-items:center; gap:6px; margin-left:auto; }
.nav-mes-seta{ display:grid; place-items:center; width:34px; height:34px; border-radius:10px; border:1px solid var(--borda); background:#fff; color:var(--ink); font-size:20px; line-height:1; text-decoration:none; }
.nav-mes-seta:hover{ background:var(--gray-050); border-color:var(--gray-300); }
.nav-mes-rotulo{ min-width:150px; text-align:center; font-weight:700; color:var(--ink); line-height:1.15; }
.nav-mes-rotulo small{ display:block; font-size:11.5px; font-weight:500; color:var(--gray-500); }

#historico.carregando .tabela-rolagem, #historico.carregando .area-vazia{ opacity:.45; transition:opacity .15s; }
#historico .tabela-rolagem{ overflow-anchor:none; }

.nav-mes-hoje{ margin-left:4px; }
.nav-mes-hoje svg{ width:17px; height:17px; }
.nav-mes-hoje.no-atual{ opacity:.45; }

/* Paginação das mensalidades a receber */
.paginacao{ display:flex; align-items:center; justify-content:flex-end; gap:6px; margin-top:12px; flex-wrap:wrap; }
.pag-link{ display:grid; place-items:center; min-width:34px; height:34px; padding:0 8px; border-radius:10px; border:1px solid var(--borda); background:#fff; color:var(--ink); font-weight:600; text-decoration:none; }
.pag-link:hover{ background:var(--gray-050); }
.pag-link.atual{ background:var(--sv-azul); border-color:var(--sv-azul); color:#fff; }
.pag-link.desligado{ opacity:.4; pointer-events:none; }
.pag-info{ margin-left:8px; font-size:12.5px; color:var(--gray-500); }
#pendentes.carregando .tabela-rolagem, #pendentes.carregando .area-vazia{ opacity:.45; transition:opacity .15s; }

.nav-mes-extrato{ cursor:pointer; padding:0; font:inherit; }
.nav-mes-extrato svg{ width:17px; height:17px; }

/* Modal do extrato: envio do OFX do banco */
.ofx-arquivo{ position:relative; display:flex; align-items:center; justify-content:center; min-height:64px; margin:10px 0 4px; padding:14px;
  border:2px dashed var(--gray-300); border-radius:14px; background:#F8FAFC; color:var(--gray-600); font-weight:600; cursor:pointer; text-align:center; }
.ofx-arquivo:hover{ border-color:var(--sv-azul); color:var(--sv-azul); }
.ofx-arquivo input{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.ofx-divisor{ border:0; border-top:1px solid var(--borda); margin:18px 0 12px; }
.ofx-sub{ margin:0 0 8px; font-size:14px; font-weight:700; color:var(--ink); }

.cfg-sub{ margin:6px 0 10px; font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--gray-500); }
.grade + .cfg-sub{ margin-top:18px; padding-top:14px; border-top:1px solid var(--borda); }

/* Card recolhível pelo título */
.bloco-alternar{ display:flex; align-items:center; justify-content:space-between; gap:10px; cursor:pointer; user-select:none; }
.bloco-alternar::after{ content:''; width:9px; height:9px; border-right:2px solid var(--gray-500); border-bottom:2px solid var(--gray-500); transform:rotate(-135deg); transition:transform .2s; margin-right:6px; }
.bloco-recolhivel.recolhido .bloco-alternar::after{ transform:rotate(45deg); }
.bloco-recolhivel.recolhido > :not(.bloco-alternar){ display:none !important; }
.bloco-recolhivel.recolhido > .bloco-alternar{ margin-bottom:0; }
.bloco-alternar:hover{ color:var(--sv-azul); }

.venc-atrasado{ color:#DC2626; font-weight:700; }
.venc-proximo{ color:#B45309; font-weight:700; }

/* Card Geolocalização HERE */
.geo-resumo{ display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; margin:18px 0 14px; }
.geo-resumo > div{ padding:12px 14px; border-radius:12px; border:1px solid var(--borda); background:#F8FAFC; }
.geo-resumo small{ display:block; font-size:12px; color:var(--gray-500); }
.geo-resumo b{ font-size:20px; color:var(--ink); }
@media (max-width:720px){ .geo-resumo{ grid-template-columns:1fr 1fr; } }
.check-linha{ display:inline-flex; align-items:center; gap:8px; font-weight:600; }

.coach-senha{ display:flex; gap:6px; align-items:center; }
.coach-senha .entrada{ width:130px; min-height:32px; padding:4px 10px; }

.entrada-mini{ min-height:32px; padding:4px 10px; width:auto; }

#cardUsuarios td .entrada-mini{ width:100%; min-width:120px; }

.senha-olho{ display:inline-flex; align-items:center; gap:6px; }
.senha-olho .olho{ display:grid; place-items:center; width:28px; height:28px; border:0; border-radius:8px; background:transparent; color:var(--gray-500); cursor:pointer; }
.senha-olho .olho:hover, .senha-olho .olho.ativo{ background:var(--gray-050); color:var(--sv-azul); }
.senha-olho .olho svg{ width:17px; height:17px; }

/* Configurador: cadastro da empresa */
.cad-topo{ display:flex; align-items:center; gap:16px; margin-bottom:6px; flex-wrap:wrap; }
.cad-logo{ max-height:56px; max-width:200px; object-fit:contain; }
.cad-nome{ display:block; font-size:17px; color:var(--ink); }
.cad-grade{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px 18px; }
.cad-item small{ display:block; font-size:11.5px; color:var(--gray-500); text-transform:uppercase; letter-spacing:.03em; }
.cad-item b{ display:block; font-weight:600; color:var(--ink); overflow-wrap:anywhere; }
@media (max-width:820px){ .cad-grade{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .cad-grade{ grid-template-columns:1fr; } }
#cardUsuariosEmpresa{ margin-bottom:16px; }

/* Cadastro da empresa - cabeçalho + painéis */
.cad-cabeca{ display:flex; align-items:center; gap:18px; padding:16px 18px; margin-bottom:16px; border-radius:16px;
  background:linear-gradient(135deg, #F8FAFC, #EEF4FF); border:1px solid var(--borda); flex-wrap:wrap; }
.cad-logo-caixa{ flex:none; display:grid; place-items:center; width:120px; height:64px; border-radius:12px; background:#fff; border:1px solid var(--borda); padding:6px; }
.cad-logo-caixa img{ max-width:100%; max-height:100%; object-fit:contain; }
.cad-logo-caixa span{ font-size:28px; font-weight:800; color:var(--sv-azul); }
.cad-cabeca-texto{ flex:1; min-width:220px; }
.cad-nome{ display:block; font-size:19px; font-weight:800; letter-spacing:-.01em; color:var(--ink); }
.cad-cnpj{ display:block; margin-top:2px; font-size:13px; color:var(--gray-500); font-variant-numeric:tabular-nums; }
.cad-selos{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.cad-editar{ flex:none; }
.cad-paineis{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; align-items:stretch; }
.cad-painel{ padding:14px 16px; border-radius:14px; border:1px solid var(--borda); background:#fff; }
.cad-painel h3{ display:flex; align-items:center; gap:8px; margin:0 0 10px; padding-bottom:10px; border-bottom:1px solid var(--borda);
  font-size:13px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--sv-azul); }
.cad-painel h3 svg{ width:18px; height:18px; }
.cad-painel dl{ margin:0; }
.cad-linha{ display:grid; grid-template-columns:42% 1fr; gap:10px; padding:7px 0; border-bottom:1px dashed #E5E7EB; }
.cad-linha:last-child{ border-bottom:0; }
.cad-linha dt{ font-size:12.5px; color:var(--gray-500); }
.cad-linha dd{ margin:0; font-size:13.5px; font-weight:600; color:var(--ink); overflow-wrap:anywhere; }
.cad-linha dd.vazio{ font-weight:400; font-style:italic; color:#9CA3AF; }
.cad-paleta{ display:inline-flex; gap:3px; vertical-align:middle; margin-right:6px; }
.cad-paleta i{ width:14px; height:14px; border-radius:4px; border:1px solid rgba(0,0,0,.08); }
@media (max-width:1100px){ .cad-paineis{ grid-template-columns:1fr 1fr; } }
@media (max-width:700px){ .cad-paineis{ grid-template-columns:1fr; } .cad-linha{ grid-template-columns:1fr; gap:2px; } }

.cad-selos{ flex-direction:row; align-items:center; }
.cad-selos .carimbo{ display:inline-flex; width:auto; flex:none; }
#cardUsuariosEmpresa .bloco-alternar .origem-mini{ margin-right:auto !important; margin-left:10px !important; }

/* Configurador: ícone de adicionar usuário no título do card */
.cfg-add{ display:grid; place-items:center; width:34px; height:34px; margin-right:10px; border-radius:10px; border:1px solid var(--borda);
  background:#fff; color:var(--sv-azul); cursor:pointer; }
.cfg-add:hover{ background:var(--sv-azul); color:#fff; border-color:var(--sv-azul); }
.cfg-add svg{ width:18px; height:18px; }

/* Modal de permissões (Configurador) */
.perm-lista{ display:grid; grid-template-columns:1fr 1fr; gap:10px; max-height:56vh; overflow:auto; padding:2px; }
.perm-grupo{ border:1px solid var(--borda); border-radius:12px; padding:10px 12px; background:#F8FAFC; }
.perm-modulo{ display:flex; align-items:center; gap:8px; cursor:pointer; }
.perm-modulo b{ color:var(--ink); }
.perm-abas{ display:flex; flex-direction:column; gap:4px; margin:8px 0 0 24px; }
.perm-abas:empty{ display:none; }
.perm-aba{ display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--gray-600); cursor:pointer; }
.perm-lista input[type=checkbox]{ width:16px; height:16px; accent-color:var(--sv-azul); }
@media (max-width:620px){ .perm-lista{ grid-template-columns:1fr; } }

/* Configurador: backup e exportação (só a plataforma) */
.bk-grade{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.bk-opcao{ display:flex; gap:14px; align-items:flex-start; padding:14px 16px; border-radius:14px; border:1px solid var(--borda);
  background:#fff; color:inherit; text-decoration:none; transition:border-color .15s, box-shadow .15s; }
.bk-opcao:hover{ border-color:var(--sv-azul); box-shadow:0 6px 18px rgba(0,96,223,.12); }
.bk-opcao b{ display:block; color:var(--ink); }
.bk-opcao small{ display:block; margin-top:3px; font-size:12.5px; line-height:1.45; color:var(--gray-500); }
.bk-icone{ flex:none; display:grid; place-items:center; width:44px; height:44px; border-radius:12px; background:#EEF4FF; color:var(--sv-azul); }
.bk-icone svg{ width:22px; height:22px; }
.bk-icone.bk-excel{ background:#E8F7EE; color:#15803D; }
@media (max-width:700px){ .bk-grade{ grid-template-columns:1fr; } }

#cardBackup .bk-grade{ margin-top:6px; }
.bk-opcao.desligado{ opacity:.45; cursor:not-allowed; }
.bk-opcao.desligado:hover{ border-color:var(--borda); box-shadow:none; }

/* Ficha do cliente por cima de Clientes (a antiga página de Cadastros) */
.ficha-sobre{ position:fixed; inset:0; z-index:8000; }
.ficha-sobre iframe{ width:100%; height:100%; border:0; background:transparent; }
html.com-ficha, html.com-ficha body{ overflow:hidden; }

/* Ficha do cliente: sem carimbo de modalidade nem origem no cabeçalho */
#ctModalidade, #ctOrigem{ display:none !important; }

/* Ficha do cliente: campos que não fazem mais parte do cadastro */
.campo-fora{ display:none !important; }
.ficha-aviso{ position:fixed; top:84px; left:50%; transform:translateX(-50%); z-index:8500; padding:12px 18px; border-radius:12px;
  font-weight:600; box-shadow:0 12px 30px rgba(0,0,0,.18); }
.ficha-aviso.ok{ background:#ECFDF5; color:#065F46; border:1px solid #A7F3D0; }
.ficha-aviso.erro{ background:#FEF2F2; color:#991B1B; border:1px solid #FECACA; }

/* Ficha do cliente: linha entre os dados do cliente e o endereço do equipamento */
.ficha-divisor{ border:0; border-top:1px solid var(--borda); margin:22px 0 14px; }

/* Clientes: a lupa na linha do título, à direita */
.acoes-titulo .campo-lupa-titulo{ margin-left:auto; width:min(320px, 100%); }

.cabecalho-pagina{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.cabecalho-pagina .acoes-titulo{ display:flex; align-items:center; gap:10px; margin-left:auto; }

/* Clientes: inativo no fim da lista, apagado */
tr.linha-inativa td{ opacity:.5; }
tr.linha-inativa td:first-child strong{ text-decoration:line-through; }

/* ---- Plano do assinante: convite de upgrade, selo e alerta central -------- */
/* Botão "Fazer upgrade" moderno (2026-10-04): degradê da paleta, foguete e o
   uso do plano num mini medidor. Perto do limite vira âmbar e pulsa. */
.topo-upgrade{
  position:relative; display:inline-flex; align-items:center; gap:8px; margin-right:8px; padding:5px 6px 5px 6px;
  border:0; border-radius:999px; cursor:pointer; white-space:nowrap; font:inherit; font-size:12.5px; font-weight:700; color:#fff;
  background:linear-gradient(135deg, var(--sv-azul-claro, #3B82F6) 0%, var(--sv-azul, #1D4ED8) 100%);
  box-shadow:0 4px 14px color-mix(in srgb, var(--sv-azul, #1D4ED8) 35%, transparent), inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.topo-upgrade:hover{ transform:translateY(-1px); filter:brightness(1.06);
  box-shadow:0 8px 20px color-mix(in srgb, var(--sv-azul, #1D4ED8) 42%, transparent), inset 0 1px 0 rgba(255,255,255,.25); }
.topo-upgrade .up-ic{ width:24px; height:24px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.2); }
.topo-upgrade .up-ic svg{ width:14px; height:14px; }
.topo-upgrade .up-texto{ padding-right:2px; }
.up-uso{ position:relative; display:inline-flex; align-items:center; height:22px; min-width:62px; padding:0 9px; border-radius:999px;
  background:rgba(255,255,255,.18); overflow:hidden; font-size:11px; font-weight:800; font-variant-numeric:tabular-nums; }
.up-uso i{ position:absolute; left:0; top:0; bottom:0; background:rgba(255,255,255,.28); border-radius:999px; }
.up-uso b{ position:relative; margin:0 auto; }
.topo-upgrade.cheio{ background:linear-gradient(135deg, #FBBF24 0%, #F97316 100%);
  box-shadow:0 4px 14px rgba(249,115,22,.38), inset 0 1px 0 rgba(255,255,255,.3); animation:up-pulso 2.2s ease-in-out infinite; }
@keyframes up-pulso{ 0%,100%{ box-shadow:0 4px 14px rgba(249,115,22,.38), 0 0 0 0 rgba(249,115,22,0); }
                     50%{ box-shadow:0 4px 14px rgba(249,115,22,.38), 0 0 0 6px rgba(249,115,22,.16); } }
@media (max-width:760px){ .topo-upgrade .up-texto, .topo-upgrade .up-uso{ display:none; } .topo-upgrade{ padding:5px; } }

/* Selo do plano moderno: coroa + "PLANO" miúdo + nome, no tom do plano. */
.conta-plano{
  display:inline-flex; align-items:center; gap:6px; margin:0 0 0 10px; padding:4px 11px 4px 7px; border-radius:10px;
  white-space:nowrap; line-height:1; color:#334155; border:1px solid #DCE3EC;
  background:linear-gradient(135deg, #F8FAFC 0%, #E8EDF3 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 1px 2px rgba(15,23,42,.06);
}
.conta-plano svg{ width:15px; height:15px; flex:none; }
.conta-plano > span{ display:flex; flex-direction:column; gap:2px; font-size:12px; font-weight:800; letter-spacing:.01em; text-align:left; }
.conta-plano small{ font-size:8.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; opacity:.7; }
.conta-plano.plano-basico{ color:#475569; }
.conta-plano.plano-essencial{ color:#1D4ED8; border-color:#BFD5FB; background:linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%); }
.conta-plano.plano-profissional{ color:#6D28D9; border-color:#DDD0FB; background:linear-gradient(135deg, #F5F3FF 0%, #EDE4FF 100%); }
.conta-plano.plano-empresarial{ color:#92400E; border-color:#F3D27A; background:linear-gradient(135deg, #FFFBEB 0%, #FDE9A9 100%); }
.conta-plano.plano-empresarial svg{ color:#D97706; }
.conta-plano.plano-ilimitado{ color:#15803D; border-color:#B8E8C8; background:linear-gradient(135deg, #F0FDF4 0%, #D7F5E1 100%); }
@media (max-width:760px){ .conta-plano{ display:none; } }

.plano-fundo{ position:fixed; inset:0; z-index:300; background:rgba(15,23,42,.55); backdrop-filter:blur(2px); }
.plano-modal{ position:fixed; z-index:301; left:50%; top:50%; transform:translate(-50%,-50%); width:min(920px, calc(100vw - 32px));
  max-height:calc(100vh - 40px); overflow:auto; background:#fff; border-radius:18px; padding:26px 26px 20px; box-shadow:0 24px 60px rgba(15,23,42,.3); }
.plano-modal h2{ margin:0 0 4px; font-size:22px; }
.plano-sub{ margin:0 0 14px; color:var(--gray-500); font-size:14px; }
.plano-fechar{ position:absolute; top:12px; right:14px; width:34px; height:34px; border:0; border-radius:50%; background:#F1F5F9;
  font-size:22px; line-height:1; cursor:pointer; color:#475569; }
.plano-alerta{ margin:0 0 14px; padding:12px 14px; border-radius:10px; background:#FFF6E5; border:1px solid #F5C77E; color:#7A4A00; font-weight:600; font-size:14px; }
.plano-pendente{ margin:0 0 14px; padding:10px 14px; border-radius:10px; background:#E0EDFF; color:#1D4ED8; font-size:13.5px; }
.plano-pendente a{ font-weight:800; margin-left:6px; }
.plano-grade{ display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:12px; }
.plano-cartao{ position:relative; display:flex; flex-direction:column; gap:6px; padding:16px; border:1.5px solid var(--borda);
  border-radius:14px; background:#fff; min-height:200px; }
.plano-cartao.atual{ border-color:var(--sv-azul); box-shadow:0 0 0 3px color-mix(in srgb, var(--sv-azul) 15%, transparent); }
/* Plano menor que não comporta os cadastros: o cartão fica opaco, mas a
   tarja que explica o porquê continua legível. */
.plano-cartao.bloqueado{ background:#F8FAFC; }
.plano-cartao.bloqueado > :not(.plano-tarja){ opacity:.4; }
.plano-nome{ font-size:16px; font-weight:800; }
.plano-cap{ font-size:13px; color:var(--gray-500); }
.plano-preco{ font-size:22px; font-weight:800; margin:4px 0 8px; }
.plano-preco small{ font-size:12px; font-weight:600; color:var(--gray-500); margin-left:2px; }
.plano-cartao form{ margin-top:auto; }
.plano-botao{ display:block; width:100%; margin-top:auto; padding:10px 12px; border:0; border-radius:10px; font:inherit; font-size:13px;
  font-weight:800; text-align:center; cursor:pointer; background:#EEF2F7; color:#334155; }
.plano-botao.up{ background:linear-gradient(135deg, var(--sv-azul-claro, #3b82f6), var(--sv-azul)); color:#fff; }
.plano-botao.neutro{ cursor:default; }
.plano-tarja{ margin-top:auto; padding:8px 10px; border-radius:8px; background:#FDE2E4; color:#9B1C1C; font-size:11.5px; font-weight:700; line-height:1.4; opacity:1; }
.plano-nota{ margin:14px 0 0; font-size:12.5px; color:var(--gray-500); }

/* Alerta que é link (ex.: clientes fora de lote -> Preventiva padrão). */
a.aviso-link{ display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; cursor:pointer; }
a.aviso-link > span:first-child{ flex:1 1 auto; }
a.aviso-link:hover{ filter:brightness(.97); }
.aviso-ir{ flex:none; font-weight:700; font-size:13px; white-space:nowrap; }

/* Campo "digitar ou escolher" (assets/js/combo.js). */
.combo{ position:relative; }
.combo .combo-campo{ width:100%; padding-right:34px; }
.combo-seta{ position:absolute; right:4px; top:50%; transform:translateY(-50%); width:28px; height:28px; padding:0; border:0;
  border-radius:7px; background:transparent; color:var(--gray-500); cursor:pointer; display:grid; place-items:center; }
.combo-seta:hover{ background:var(--gray-100); color:var(--ink); }
.combo-seta svg{ width:16px; height:16px; }
.combo-lista{ position:absolute; z-index:50; left:0; right:0; top:calc(100% + 4px); margin:0; padding:4px; list-style:none;
  max-height:240px; overflow:auto; background:#fff; border:1px solid var(--borda); border-radius:10px;
  box-shadow:0 12px 28px rgba(15,23,42,.16); }
.combo-lista li{ padding:7px 10px; border-radius:7px; font-size:13.5px; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.combo-lista li:hover, .combo-lista li.ativo{ background:color-mix(in srgb, var(--sv-azul, #2563EB) 10%, transparent); }
.combo-lista li.escolhido{ font-weight:700; }
.combo-lista li.combo-vazio{ color:var(--gray-500); cursor:default; background:none; }

/* Modal "Abrir chamado emergencial" - padrão compacto (2026-10-04). */
.modal.ch-compacto{ width:min(600px, calc(100vw - 32px)); padding:20px 22px 18px; }
.ch-cabeca{ display:flex; align-items:center; gap:12px; margin:0 0 14px; padding-bottom:12px; border-bottom:1px solid var(--borda); }
.ch-cabeca h2{ margin:0; font-size:17px; line-height:1.25; }
.ch-cabeca .ajuda{ margin:2px 0 0; font-size:12.5px; }
.ch-cabeca .ajuda:empty{ display:none; }
.ch-ic{ flex:none; width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  background:#FEE2E2; color:#DC2626; }
.ch-ic svg{ width:20px; height:20px; }
.ch-grade{ display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; }
.ch-grade-3{ grid-template-columns:1.3fr 1fr 1fr; }
.ch-grade .ch-largo{ grid-column:1/-1; }
.ch-compacto .campo{ margin:0; }
.ch-compacto .campo label{ display:block; margin:0 0 4px; font-size:11.5px; font-weight:600; letter-spacing:.02em;
  text-transform:uppercase; color:var(--gray-500); }
.ch-compacto .entrada{ height:38px; padding:0 11px; font-size:13.5px; border-radius:9px; }
.ch-compacto textarea.entrada{ height:auto; min-height:58px; padding:9px 11px; resize:vertical; line-height:1.4; }
.ch-compacto .entrada:focus{ border-color:var(--sv-azul, #2563EB); box-shadow:0 0 0 3px color-mix(in srgb, var(--sv-azul, #2563EB) 16%, transparent); outline:0; }
.ch-compacto .ch-carros{ margin:0 0 14px; }
.ch-compacto #chElevadorTexto{ margin:0 0 12px; }

/* Pessoa presa: chave (toggle) vermelha, não um checkbox perdido. */
.ch-preso{ display:flex; align-items:center; gap:11px; margin:12px 0 0; padding:9px 12px; border:1px solid var(--borda);
  border-radius:10px; cursor:pointer; user-select:none; transition:background .15s, border-color .15s; }
.ch-preso input{ position:absolute; opacity:0; pointer-events:none; }
.ch-preso-chave{ flex:none; position:relative; width:36px; height:20px; border-radius:999px; background:#CBD5E1; transition:background .15s; }
.ch-preso-chave::after{ content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .15s; }
.ch-preso b{ display:block; font-size:13.5px; }
.ch-preso small{ display:block; font-size:11.5px; color:var(--gray-500); }
.ch-preso:has(input:checked){ background:#FEF2F2; border-color:#FCA5A5; }
.ch-preso input:checked + .ch-preso-chave{ background:#DC2626; }
.ch-preso input:checked + .ch-preso-chave::after{ transform:translateX(16px); }
.ch-preso input:focus-visible + .ch-preso-chave{ outline:2px solid #DC2626; outline-offset:2px; }
.ch-nota{ margin:10px 0 0; font-size:12px; color:var(--gray-500); }
.ch-compacto .modal-acoes{ margin-top:16px; padding-top:12px; border-top:1px solid var(--borda); }
@media (max-width:560px){ .ch-grade, .ch-grade-3{ grid-template-columns:1fr; } }

/* ---- Dashboard: rankings de elevadores e técnicos (2026-10-04) ----------- */
.rk-cab{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.rk-cab h2{ margin:0; font-size:15px; }
.rk-cab .ajuda{ margin:3px 0 0; font-size:12.5px; }
.rk-periodo{ display:inline-flex; padding:3px; border-radius:10px; background:var(--gray-100, #F1F5F9); }
.rk-periodo a{ padding:5px 10px; border-radius:8px; font-size:12px; font-weight:600; color:var(--gray-500); text-decoration:none; white-space:nowrap; }
.rk-periodo a.ativo{ background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(15,23,42,.12); }
.rk-legenda{ display:flex; gap:12px; font-size:12px; color:var(--gray-500); }
.rk-legenda span{ display:inline-flex; align-items:center; gap:5px; }
.rk-legenda i{ width:10px; height:10px; border-radius:3px; display:inline-block; }
.rk-lista{ list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.rk-lista li{ display:flex; align-items:center; gap:12px; padding:9px 8px; border-radius:12px; transition:background .12s; }
.rk-lista li:hover{ background:var(--gray-050, #F8FAFC); }
.rk-pos{ flex:none; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-size:12.5px; font-weight:800;
  background:var(--gray-100, #F1F5F9); color:var(--gray-500); }
.rk-pos-1{ background:linear-gradient(135deg, #FDE68A, #F59E0B); color:#78350F; }
.rk-pos-2{ background:linear-gradient(135deg, #F1F5F9, #CBD5E1); color:#334155; }
.rk-pos-3{ background:linear-gradient(135deg, #FED7AA, #EA8A4C); color:#7C2D12; }
.rk-avatar{ flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-size:12.5px; font-weight:800; color:#fff;
  background:linear-gradient(135deg, var(--sv-azul-claro, #3B82F6), var(--sv-azul, #1D4ED8)); }
.rk-corpo{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:5px; }
.rk-linha{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.rk-linha strong{ font-size:13.5px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rk-num{ flex:none; font-size:15px; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; }
.rk-num small{ font-size:11px; font-weight:600; color:var(--gray-500); }
.rk-num-ch{ color:#C2410C; }
.rk-barra{ height:7px; border-radius:99px; background:var(--gray-100, #EEF2F6); overflow:hidden; }
.rk-barra i{ display:block; height:100%; border-radius:99px; }
.rk-barra-dupla{ display:flex; gap:2px; background:none; }
.rk-barra-dupla::after{ content:""; flex:0 0 calc(100% - var(--rk-w)); background:var(--gray-100, #EEF2F6); border-radius:99px; }
.rk-barra-dupla i{ min-width:0; }
/* Chamado em laranja: contrasta com a preventiva (cor da empresa) mesmo
   quando a paleta da empresa é vermelha. */
i.rk-ch{ background:linear-gradient(90deg, #FDBA74, #F97316); }
i.rk-prev{ background:linear-gradient(90deg, var(--sv-azul-claro, #60A5FA), var(--sv-azul, #2563EB)); }
.rk-sub{ font-size:11.5px; color:var(--gray-500); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rk-preso{ font-style:normal; font-weight:700; color:#DC2626; }

/* ---- Menu do botão direito - moderno e organizado (2026-10-04) ------------
   Vale para todos os menus de contexto do sistema: cartão arredondado que
   nasce na ponta do mouse, ícone num quadradinho na cor da empresa, grupos com
   título miúdo e a ação de risco em vermelho, separada no fim. */
.menu-contexto{
  min-width:248px; max-width:300px; padding:6px; background:#fff;
  border:1px solid var(--borda) !important; border-top:1px solid var(--borda) !important; border-radius:14px;
  box-shadow:0 18px 44px rgba(15,23,42,.18), 0 2px 6px rgba(15,23,42,.06);
  transform-origin:top left; animation:menu-nasce .14s ease-out;
}
@keyframes menu-nasce{ from{ opacity:0; transform:scale(.96) translateY(-4px); } to{ opacity:1; transform:none; } }
.menu-contexto .menu-titulo{
  margin:0 0 4px; padding:8px 10px 9px; border-bottom:1px solid var(--borda);
  font-size:12.5px; font-weight:700; letter-spacing:0; text-transform:none; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.menu-contexto .menu-grupo{
  padding:8px 10px 3px; font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--gray-500);
}
.menu-contexto button{
  gap:11px; padding:6px 10px; min-height:38px; border-radius:9px; font-size:13.5px; font-weight:500;
  transition:background .12s ease;
}
.menu-contexto button svg{
  width:28px; height:28px; padding:6px; box-sizing:border-box; border-radius:8px; stroke-width:2;
  background:color-mix(in srgb, var(--sv-azul, #2563EB) 9%, #fff); color:var(--sv-azul, #2563EB);
}
.menu-contexto button:hover, .menu-contexto button:focus-visible{
  background:color-mix(in srgb, var(--sv-azul, #2563EB) 7%, #fff); outline:0;
}
.menu-contexto button:hover svg{ background:var(--sv-azul, #2563EB); color:#fff; }
.menu-contexto button.perigo{ color:#DC2626; }
.menu-contexto button.perigo svg{ background:#FEE2E2; color:#DC2626; }
.menu-contexto button.perigo:hover{ background:#FEF2F2; }
.menu-contexto button.perigo:hover svg{ background:#DC2626; color:#fff; }
.menu-contexto .menu-divisor{ height:1px; margin:6px 4px; background:var(--borda); }
.menu-contexto button[disabled]:hover svg{ background:color-mix(in srgb, var(--sv-azul, #2563EB) 9%, #fff); color:var(--sv-azul, #2563EB); }

/* Modal "Imprimir ordem de serviço" - preventiva ou emergencial (2026-10-04). */
.modal.os-esc-modal{ width:min(500px, calc(100vw - 32px)); padding:20px 22px 18px; }
.os-esc{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.os-esc-op{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:16px; text-align:left; cursor:pointer;
  border:1.5px solid var(--borda); border-radius:14px; background:#fff; font:inherit; color:var(--ink);
  transition:border-color .15s, transform .15s, box-shadow .15s, background .15s; }
.os-esc-op:hover{ border-color:var(--sv-azul, #2563EB); background:color-mix(in srgb, var(--sv-azul, #2563EB) 5%, #fff);
  transform:translateY(-2px); box-shadow:0 10px 22px rgba(15,23,42,.10); }
.os-esc-ic{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; margin-bottom:4px;
  background:color-mix(in srgb, var(--sv-azul, #2563EB) 12%, #fff); color:var(--sv-azul, #2563EB); }
.os-esc-ic svg{ width:22px; height:22px; }
.os-esc-op strong{ font-size:15.5px; }
.os-esc-op small{ font-size:12.5px; color:var(--gray-500); line-height:1.35; }
.os-esc-emerg .os-esc-ic{ background:#FEE2E2; color:#DC2626; }
.os-esc-emerg:hover{ border-color:#F87171; background:#FFF7F7; }
.os-esc-nota{ margin:12px 0 0; font-size:12.5px; }
.os-esc-op:disabled{ opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; background:#F8FAFC; border-color:var(--borda); }

/* Item do menu sem atendimento no mês: desativado, com o motivo escrito. */
.menu-contexto button.sem-atend{ opacity:1; color:var(--gray-400, #94A3B8); cursor:not-allowed; }
.menu-contexto button.sem-atend svg{ background:#F1F5F9; color:#94A3B8; }
.menu-contexto button.sem-atend:hover{ background:transparent; }
.menu-contexto button.sem-atend:hover svg{ background:#F1F5F9; color:#94A3B8; }
.menu-contexto button.sem-atend > span{ display:flex; flex-direction:column; line-height:1.2; }
.menu-contexto button.sem-atend > span::after{ content:"sem atendimento no mês"; font-size:11px; font-weight:500; color:#94A3B8; }
@media (max-width:480px){ .os-esc{ grid-template-columns:1fr; } }

/* Modal "Enviar as visitas do dia" - moderno (2026-10-04). */
.modal.en-moderno{ width:min(560px, calc(100vw - 32px)); }
.en-selo{ flex:none; padding:3px 9px; border-radius:999px; font-size:11.5px; font-weight:700; white-space:nowrap; }
.en-selo-novas{ background:#FFF4E5; color:#B45309; }
.en-selo-ok{ background:#ECFDF3; color:#15803D; }
.cn-moderno .en-tecnico.cn-tecnico.enviado{ background:#fff; border-color:var(--borda); }
.cn-moderno .en-tecnico.cn-tecnico.enviado .cn-avatar{ filter:saturate(.35) brightness(1.1); }
.en-quem-linha{ display:flex; align-items:center; gap:10px; margin:0 0 10px; }
.en-quem-linha .ajuda{ margin:0; font-weight:600; color:var(--ink); }
.en-voltar{ padding:6px 10px; border:1px solid var(--borda); border-radius:9px; background:#fff; font:inherit; font-size:12.5px;
  font-weight:600; color:var(--gray-500); cursor:pointer; }
.en-voltar:hover{ background:var(--gray-050, #F8FAFC); color:var(--ink); }
.en-moderno .en-lista{ display:grid; gap:8px; max-height:min(52vh, 440px); overflow:auto; padding:2px; }
.en-moderno .en-todos{ display:flex; flex-direction:column; gap:4px; padding:14px; border-radius:14px;
  background:color-mix(in srgb, var(--sv-azul, #2563EB) 7%, #fff); border:1px solid color-mix(in srgb, var(--sv-azul, #2563EB) 22%, #fff); }
.en-moderno .en-todos strong{ font-size:14px; }
.en-moderno .en-secao{ margin:6px 2px 0; font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--gray-500); }
.en-moderno .en-visita{ padding:12px 14px; border:1px solid var(--borda); border-radius:12px; background:#fff; display:flex; flex-direction:column; gap:4px; }
.en-moderno .en-visita.feita{ opacity:.6; background:var(--gray-050, #F8FAFC); }
.en-moderno .en-visita-topo{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.en-moderno .en-os{ font-size:14.5px; font-weight:700; color:var(--sv-azul, #2563EB); text-decoration:none; }
.en-moderno .en-os:hover{ text-decoration:underline; }
.en-etapa{ padding:3px 9px; border-radius:999px; font-size:11.5px; font-weight:700; background:var(--gray-100, #F1F5F9); color:var(--gray-500); }
.en-etapa.nova{ background:#FFF4E5; color:#B45309; }
.en-etapa.enviada{ background:color-mix(in srgb, var(--sv-azul, #2563EB) 10%, #fff); color:var(--sv-azul, #2563EB); }
.en-etapa.feita{ background:#ECFDF3; color:#15803D; }
.en-moderno .en-acoes{ display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.en-moderno .en-acoes .btn{ min-height:34px; border-radius:9px; padding:0 12px; }

/* Modal "Repassar o chamado" - moderno (2026-10-04). */
.modal.cn-moderno{ width:min(520px, calc(100vw - 32px)); padding:20px 22px 18px; }
.cn-moderno .cn-ic{ background:color-mix(in srgb, var(--sv-azul, #2563EB) 12%, #fff); color:var(--sv-azul, #2563EB); }
.cn-rotulo{ margin:0 0 8px; font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--gray-500); }
.cn-equipe{ display:grid; gap:8px; max-height:min(52vh, 420px); overflow:auto; padding:2px; }
.cn-moderno .en-tecnico.cn-tecnico{
  display:flex; flex-direction:row; align-items:center; gap:12px; width:100%; min-height:0; margin:0; padding:10px 12px;
  text-align:left; border:1px solid var(--borda); border-radius:12px; background:#fff; cursor:pointer;
  transition:border-color .15s, background .15s, transform .15s, box-shadow .15s;
}
.cn-moderno .en-tecnico.cn-tecnico:hover{ border-color:var(--sv-azul, #2563EB); background:color-mix(in srgb, var(--sv-azul, #2563EB) 5%, #fff);
  transform:translateY(-1px); box-shadow:0 6px 16px rgba(15,23,42,.08); }
.cn-moderno .en-tecnico.cn-tecnico.escolhido{ border-color:var(--sv-azul, #2563EB); background:color-mix(in srgb, var(--sv-azul, #2563EB) 8%, #fff); }
.cn-avatar{ flex:none; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:14px;
  color:#fff; background:linear-gradient(135deg, var(--sv-azul-claro, #3B82F6), var(--sv-azul, #1D4ED8)); }
.cn-moderno .en-tecnico .cn-avatar{ color:#fff; font-size:14px; }
.cn-nome{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px; }
.cn-nome strong{ font-size:14px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cn-nome small{ font-size:12px; color:var(--gray-500); }
.cn-nome small b{ color:#B45309; font-weight:600; }
.cn-livre{ font-style:normal; font-weight:700; color:#15803D; }
.cn-seta{ flex:none; width:18px; height:18px; color:var(--gray-400, #94A3B8); }
.cn-feito-topo{ display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border-radius:12px; background:#ECFDF3; border:1px solid #BBF7D0; }
.cn-feito-ic{ flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:#16A34A; color:#fff; }
.cn-feito-ic svg{ width:18px; height:18px; }
.cn-feito-topo strong{ display:block; font-size:14.5px; color:#14532D; }
.cn-feito-topo small{ display:block; font-size:12.5px; color:#166534; }
.cn-link{ display:flex; gap:8px; margin:12px 0 0; }
.cn-link .entrada{ flex:1 1 auto; min-width:0; height:40px; font-size:13px; border-radius:10px; background:var(--gray-050, #F8FAFC); }
.cn-abrir{ flex:none; width:40px; height:40px; display:grid; place-items:center; border-radius:10px; border:1px solid var(--borda); color:var(--ink); }
.cn-abrir:hover{ background:var(--gray-100); }
.cn-abrir svg{ width:17px; height:17px; }
.cn-acoes{ display:flex; gap:8px; margin-top:10px; }
.cn-acoes .btn{ flex:1 1 0; justify-content:center; }
.cn-whats{ display:inline-flex; align-items:center; gap:7px; background:#25D366; color:#fff; border:0; }
.cn-whats:hover{ background:#1EBE5A; color:#fff; }
.cn-whats svg{ width:17px; height:17px; }

/* Mesa: técnicos sem demanda no dia -> plantão de chamados. */
.ocio-alerta{ display:flex; align-items:center; gap:14px; width:100%; margin:0 0 14px; padding:12px 16px; text-align:left;
  border:1px solid #F5C77E; background:#FFF8EC; border-radius:14px; font:inherit; color:var(--ink); cursor:pointer; }
.ocio-alerta.ok{ border-color:#B8E8C8; background:#EEFBF2; }
.ocio-ic{ width:40px; height:40px; flex:none; border-radius:50%; background:#FDE7C2; color:#A35F00; display:grid; place-items:center; }
.ocio-alerta.ok .ocio-ic{ background:#D5F2DF; color:#15803D; }
.ocio-ic svg{ width:20px; height:20px; }
.ocio-texto{ flex:1 1 auto; display:flex; flex-direction:column; gap:2px; }
.ocio-texto strong{ font-size:14.5px; }
.ocio-texto small{ color:var(--gray-500); font-size:12.5px; }
.ocio-ver{ flex:none; font-weight:700; font-size:13px; padding:7px 12px; border-radius:8px; background:#FDE7C2; color:#A35F00; }
.ocio-alerta.ok .ocio-ver{ background:#D5F2DF; color:#15803D; }
.ocio-lista{ display:grid; gap:8px; margin:12px 0; }
.ocio-item{ display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--borda); border-radius:10px; cursor:pointer; }
.ocio-item input{ width:18px; height:18px; }
.ocio-item span{ display:flex; flex-direction:column; }
.ocio-item small{ color:var(--gray-500); font-size:12px; }

/* Mesa: visita antecipada (o técnico iniciou hoje a de outro dia). */
.celula-nota.nota-antecipada{ display:inline-block; margin-top:3px; padding:1px 7px; border-radius:999px;
  background:#E0EDFF; color:#1D4ED8; font-weight:700; font-size:11px; }

/* ---- Orçamentos: notificação de demandas da operação -------------------- */
.or-notif{ margin:0 0 14px; border:1px solid #F5C77E; background:#FFF8EC; border-radius:14px; overflow:hidden; }
.or-notif-cab{ display:flex; align-items:center; gap:14px; width:100%; padding:12px 16px; border:0; background:transparent;
               font:inherit; text-align:left; cursor:pointer; color:var(--ink); }
.or-notif-sino{ position:relative; width:40px; height:40px; flex:none; border-radius:50%; background:#FDE7C2; color:#A35F00;
                display:grid; place-items:center; }
.or-notif-sino svg{ width:20px; height:20px; animation:or-sino 2.4s ease-in-out infinite; transform-origin:50% 10%; }
.or-notif-sino b{ position:absolute; top:-4px; right:-4px; min-width:20px; height:20px; padding:0 5px; border-radius:999px;
                  background:#E30613; color:#fff; font-size:11px; display:grid; place-items:center; }
@keyframes or-sino{ 0%,80%,100%{ transform:rotate(0); } 85%{ transform:rotate(12deg); } 90%{ transform:rotate(-10deg); } 95%{ transform:rotate(6deg); } }
.or-notif-texto{ flex:1 1 auto; display:flex; flex-direction:column; gap:2px; }
.or-notif-texto strong{ font-size:14.5px; }
.or-notif-texto small{ color:var(--gray-500); font-size:12.5px; }
.or-notif-ver{ flex:none; font-weight:700; font-size:13px; color:#A35F00; padding:7px 12px; border-radius:8px; background:#FDE7C2; }
.or-notif-lista{ list-style:none; margin:0; padding:0 10px 10px; display:grid; gap:6px; }
.or-demanda{ display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:12px; width:100%; padding:10px 12px;
             border:1px solid var(--borda); border-radius:10px; background:#fff; font:inherit; text-align:left; cursor:pointer; color:var(--ink); }
.or-demanda:hover{ border-color:var(--sv-azul); box-shadow:0 2px 10px rgba(15,23,42,.08); }
.or-demanda-corpo{ display:flex; flex-direction:column; min-width:0; }
.or-demanda-corpo strong{ font-size:13.5px; }
.or-demanda-corpo small{ color:var(--gray-500); font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.or-demanda-meta{ font-size:12px; color:var(--gray-500); text-align:right; white-space:nowrap; }
.or-demanda-acao{ font-weight:700; font-size:12.5px; color:#fff; background:var(--sv-azul); padding:7px 12px; border-radius:8px; }
@media (max-width:640px){ .or-demanda{ grid-template-columns:1fr; } .or-demanda-meta{ text-align:left; } }

/* Botão que ainda não pode ser usado (ex.: WhatsApp antes de o link existir). */
.btn.desativado{ opacity:.5; pointer-events:none; }
#enModal .modal-acoes{ flex-wrap:wrap; }

/* ---- Dashboard: faturamento previsto x recebido -------------------------- */
.fat-bloco{ padding:0; overflow:hidden; }
.fat-escalas{ display:inline-flex; border:1px solid var(--borda); border-radius:10px; padding:3px; gap:2px; background:var(--gray-050, #f7f8fa); }
.fat-escalas button{ border:0; background:transparent; padding:6px 12px; border-radius:7px; font:inherit; font-size:13px; font-weight:600; color:var(--gray-500); cursor:pointer; }
.fat-escalas button:hover{ color:var(--ink); }
.fat-escalas button[aria-pressed="true"]{ background:#fff; color:var(--ink); box-shadow:0 1px 2px rgba(15,23,42,.12); }
.fat-corpo{ position:relative; padding:16px 18px 18px; }
.fat-resumo{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; margin-bottom:14px; }
.fat-resumo div{ display:flex; flex-direction:column; gap:2px; }
.fat-resumo span{ font-size:12px; color:var(--gray-500); }
.fat-resumo strong{ font-size:18px; font-variant-numeric:tabular-nums; color:var(--ink); }
.fat-resumo em{ font-style:normal; font-size:12px; color:var(--gray-500); }
@media (max-width:640px){ .fat-resumo{ grid-template-columns:1fr; } }
.fat-legenda{ display:flex; gap:16px; font-size:12.5px; color:var(--gray-600, #475467); margin-bottom:8px; }
.fat-legenda span{ display:inline-flex; align-items:center; gap:6px; }
.fat-cor{ display:inline-block; width:10px; height:10px; border-radius:3px; }
.fat-cor-prev{ background:#e08a1e; }
.fat-cor-rec{ background:#1f4fa3; }
.fat-grafico{ position:relative; display:flex; height:240px; padding-bottom:22px; }
.fat-eixo{ position:relative; flex:0 0 64px; }
.fat-eixo span{ position:absolute; right:8px; transform:translateY(50%); font-size:11px; color:var(--gray-500); font-variant-numeric:tabular-nums; white-space:nowrap; }
.fat-area{ position:relative; flex:1 1 auto; display:flex; align-items:stretch; border-bottom:1px solid var(--gray-300, #d0d5dd); }
.fat-grade{ position:absolute; left:0; right:0; border-top:1px dashed var(--gray-200, #eaecf0); }
.fat-col{ position:relative; flex:1 1 0; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; cursor:default; }
.fat-col:hover{ background:rgba(31,79,163,.05); }
.fat-barras{ display:flex; align-items:flex-end; justify-content:center; gap:2px; width:100%; height:100%; }
.fat-barra{ display:block; width:min(16px, 32%); border-radius:4px 4px 0 0; min-height:0; }
.fat-futuro .fat-barra{ opacity:.55; }
.fat-rotulo{ position:absolute; bottom:-20px; font-size:11px; color:var(--gray-500); white-space:nowrap; }
.fat-atual .fat-rotulo{ color:var(--ink); font-weight:700; }
.fat-dica{ position:absolute; z-index:5; pointer-events:none; display:flex; flex-direction:column; gap:3px; padding:8px 10px; background:var(--navy-900, #0e1b30); color:#fff; border-radius:8px; font-size:12px; box-shadow:0 6px 18px rgba(15,23,42,.18); white-space:nowrap; }
.fat-dica span{ display:inline-flex; align-items:center; gap:6px; font-variant-numeric:tabular-nums; }

/* ===========================================================================
   MODAIS DO SISTEMA - padrão moderno único (2026-10-04)
   Vale para toda janela .modal (as abertas pelo botão direito e as demais):
   cartão arredondado com sombra profunda, fundo desfocado, entrada suave,
   título com marcador na cor da empresa, campos compactos e rodapé de ações
   separado. Os modais que já têm cabeçalho com ícone (.ch-cabeca) mantêm o
   deles.
   =========================================================================== */
.modal-fundo{ background:rgba(15,23,42,.48); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); }
.modal{
  border:1px solid rgba(226,232,240,.9);
  border-radius:20px;
  padding:22px 24px 20px;
  box-shadow:0 30px 70px rgba(15,23,42,.28), 0 6px 18px rgba(15,23,42,.10);
  transform:translate(-50%, -47%) scale(.98);
  transition:opacity .2s ease, transform .22s cubic-bezier(.2,.9,.3,1.2);
  scrollbar-width:thin; scrollbar-color:#CBD5E1 transparent;
}
.modal.aberto{ transform:translate(-50%, -50%) scale(1); }
.modal::-webkit-scrollbar{ width:8px; }
.modal::-webkit-scrollbar-thumb{ background:#CBD5E1; border-radius:8px; }

/* Título: marcador na cor da empresa e a ajuda logo abaixo, como cabeçalho. */
.modal > h2:first-of-type, .modal > form > h2:first-of-type{
  display:flex; align-items:center; gap:10px; margin:0 0 4px; font-size:18px; font-weight:700; letter-spacing:-.015em; color:var(--ink);
}
.modal > h2:first-of-type::before, .modal > form > h2:first-of-type::before{
  content:""; flex:none; width:5px; height:20px; border-radius:4px;
  background:linear-gradient(180deg, var(--sv-azul-claro, #3B82F6), var(--sv-azul, #1D4ED8));
}
.modal > h2:first-of-type + .ajuda, .modal > h2:first-of-type + p{
  margin:0 0 14px; padding:0 0 12px 15px; border-bottom:1px solid var(--borda); font-size:13px; color:var(--gray-500);
}
.modal > h2:first-of-type + .ajuda:empty{ display:none; }

/* Campos dentro do modal: rótulo miúdo, campo compacto. */
.modal .campo{ margin-bottom:2px; }
.modal .campo label, .modal .form-linha label{
  font-size:12px; font-weight:600; color:var(--gray-600, #475569); letter-spacing:.01em; margin-bottom:5px;
}
.modal .entrada{ min-height:40px; border-radius:10px; font-size:14px; }
.modal textarea.entrada{ min-height:76px; }
.modal .entrada:focus{
  border-color:var(--sv-azul, #2563EB);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--sv-azul, #2563EB) 16%, transparent);
}
.modal .ajuda{ font-size:12.5px; }

/* Rodapé: ações à direita, separadas por uma linha. */
.modal .modal-acoes{
  display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap;
  margin-top:18px; padding-top:14px; border-top:1px solid var(--borda);
}
.modal .modal-acoes > .ajuda, .modal .modal-acoes > span:first-child{ margin-right:auto; }
.modal .modal-acoes .btn{ min-height:40px; border-radius:10px; padding:0 18px; }
.modal .btn-primary{
  background:linear-gradient(135deg, var(--sv-azul-claro, #3B82F6), var(--sv-azul, #1D4ED8));
  box-shadow:0 6px 16px color-mix(in srgb, var(--sv-azul, #1D4ED8) 30%, transparent);
}
.modal .btn-primary:hover{ filter:brightness(1.06); }
.modal .btn-ghost{ background:#fff; }

/* Escolhas (checkbox/rádio) em cartão. */
.modal label.escolha, .modal label.marcador{
  padding:10px 12px; border:1px solid var(--borda); border-radius:10px; background:#FAFBFD;
}
.modal label.escolha:has(input:checked), .modal label.marcador:has(input:checked){
  border-color:color-mix(in srgb, var(--sv-azul, #2563EB) 45%, #fff); background:color-mix(in srgb, var(--sv-azul, #2563EB) 6%, #fff);
}
.modal input[type=checkbox], .modal input[type=radio]{ accent-color:var(--sv-azul, #2563EB); }

/* Ajustes finos dos modais (2026-10-04). */
.modal > h2:first-of-type:not(:has(+ .ajuda:not(:empty))):not(:has(+ p:not(:empty))){
  padding-bottom:12px; margin-bottom:14px; border-bottom:1px solid var(--borda);
}
.modal .ficha{ padding-bottom:0; }
.modal.modal-form .modal-acoes{ box-shadow:none; bottom:-20px; padding-bottom:4px; }

/* ===========================================================================
   DASHBOARDS compactos e modernos (2026-10-04) - dashboard.php e a Gestão da
   plataforma (plataforma/index.php), dentro de <div class="dash">.
   =========================================================================== */
.dash{ display:flex; flex-direction:column; gap:14px; }
.dash > *{ margin-top:0 !important; margin-bottom:0 !important; }
.dash .kpis{ gap:12px; }
.dash .kpis + .kpis{ margin-top:-2px !important; }
.dash .kpi{
  position:relative; padding:13px 16px 12px; min-height:0; border-radius:14px; gap:2px;
  border:1px solid var(--borda); box-shadow:0 1px 2px rgba(15,23,42,.04);
  background:linear-gradient(180deg, #fff 0%, #FBFCFE 100%);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.dash a.kpi:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(15,23,42,.08); border-color:color-mix(in srgb, var(--sv-azul, #2563EB) 30%, var(--borda)); }
.dash .kpi-rotulo{ font-size:11.5px; font-weight:600; letter-spacing:.02em; color:var(--gray-500); }
.dash .kpi-valor{ font-size:24px; line-height:1.15; letter-spacing:-.02em; margin:2px 0 1px; }
.dash .kpi-nota{ font-size:11.5px; }

.dash .bloco{ padding:16px 18px; border-radius:16px; margin:0; }
.dash .bloco h2{ font-size:15px; margin-bottom:10px; }
.dash .painel-duplo{ gap:14px; }
.dash .fat-bloco{ padding-bottom:12px; }
.dash .fat-bloco .mesa-topo{ margin-bottom:6px; }
.dash .fat-grafico{ height:170px; padding-bottom:20px; }
.dash .fat-bloco .fat-totais, .dash .fat-bloco .fat-resumo{ margin:6px 0 8px; }
.dash .barra-mes{ height:10px; border-radius:99px; }
.dash .barra-mes-legenda{ gap:8px 18px; font-size:12.5px; margin-top:8px; }

/* Vazio compacto: uma linha com ícone, e não um quadro alto. */
.dash .cartao.vazio{ flex-direction:row; justify-content:flex-start; gap:10px; min-height:0; padding:14px 16px; border-radius:12px; }
.dash .cartao.vazio svg{ width:22px; height:22px; margin:0; flex:none; }
.dash .cartao.vazio p{ margin:0; font-size:13px; }

/* Tabelas dos blocos mais densas. */
.dash .tabela th{ padding-top:8px; padding-bottom:8px; font-size:11px; }
.dash .tabela td{ padding-top:8px; padding-bottom:8px; font-size:13px; }

/* Rankings mais justos. */
.dash .rk-lista li{ padding:7px 6px; }
.dash .rk-cab{ margin-bottom:8px; }

/* Gestão da plataforma: distribuição por plano e novos por mês. */
.dash .dist{ gap:8px; }
.dash .colunas-mes{ height:150px; }
@media (max-width:900px){ .dash .kpi-valor{ font-size:21px; } }

.dash .cartao.vazio{ flex:none; align-self:stretch; height:auto; }

/* Balões do mapa modernos (2026-10-04): cor = situação; chamado aberto pulsa. */
.mesa-balao svg{ filter:drop-shadow(0 4px 6px rgba(15,23,42,.28)); transition:transform .15s ease; transform-origin:50% 100%; }
.mesa-balao:hover svg{ transform:scale(1.12); }
.mesa-balao-pulsa::before{
  content:""; position:absolute; left:50%; bottom:-2px; width:22px; height:8px; margin-left:-11px; border-radius:50%;
  background:rgba(220,38,38,.45); animation:balao-pulso 1.6s ease-out infinite; z-index:-1;
}
@keyframes balao-pulso{ 0%{ transform:scale(.6); opacity:.9; } 100%{ transform:scale(2.6); opacity:0; } }
.mapa-legenda{ display:flex; flex-wrap:wrap; gap:6px 14px; margin:10px 2px 0; font-size:12px; color:var(--gray-500); }
.mapa-legenda span{ display:inline-flex; align-items:center; gap:6px; }
.mapa-legenda i{ width:11px; height:11px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); box-shadow:0 1px 2px rgba(15,23,42,.25); }

/* ---- Preventiva padrão moderna (2026-10-04) ----------------------------- */
.pl-kpis{ display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; }
.pl-kpi{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:14px; background:#fff; border:1px solid var(--borda);
  box-shadow:0 1px 2px rgba(15,23,42,.04); }
.pl-kpi-ic{ flex:none; width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  background:color-mix(in srgb, var(--sv-azul, #2563EB) 11%, #fff); color:var(--sv-azul, #2563EB); }
.pl-kpi-ic svg{ width:20px; height:20px; }
.pl-kpi.ok .pl-kpi-ic{ background:#ECFDF3; color:#15803D; }
.pl-kpi.alerta .pl-kpi-ic{ background:#FFF4E5; color:#C2410C; }
.pl-kpi small{ display:block; font-size:11.5px; font-weight:600; color:var(--gray-500); }
.pl-kpi b{ display:block; font-size:21px; line-height:1.15; letter-spacing:-.02em; color:var(--ink); }
.pl-kpi em{ display:block; font-style:normal; font-size:11.5px; color:var(--gray-500); }
.pl-kpi.alerta em{ color:#C2410C; font-weight:600; }
@media (max-width:900px){ .pl-kpis{ grid-template-columns:repeat(2, 1fr); } }

.pl-card .mesa-topo{ align-items:center; margin-bottom:12px; }
.pl-cab{ margin:0; padding:0; border:0; flex:1 1 auto; }
.pl-cab h2{ font-size:15.5px; margin:0 0 2px; }
.pl-cab .ajuda{ margin:0; font-size:12.5px; }
.pl-card .pl-dividir .btn{ border-radius:11px; min-height:40px; }
.pl-card .pl-grade{ gap:0; border:1px solid var(--borda); border-radius:14px; overflow:hidden; }
.pl-card .pl-lado{ background:#fff; }
.pl-card .pl-lado-topo{ padding:12px 14px 8px; }
.pl-card .pl-lado-topo h3{ font-size:14px; }
.pl-card .pl-lado-topo .ajuda{ padding:3px 10px; border-radius:999px; background:var(--gray-100, #F1F5F9); font-size:11.5px; font-weight:600; color:var(--gray-500); }
.pl-card .pl-filtros{ padding:0 14px 10px; gap:8px; }
.pl-card .pl-filtros .entrada{ min-height:38px; border-radius:10px; }
.pl-card .pl-meio{ background:var(--gray-050, #F8FAFC); border-left:1px solid var(--borda); border-right:1px solid var(--borda); gap:10px; }
.pl-card .pl-meio .btn{ width:42px; height:42px; min-height:0; padding:0; border-radius:50%; display:grid; place-items:center; }
.pl-card .pl-meio .btn-primary{ background:linear-gradient(135deg, var(--sv-azul-claro, #3B82F6), var(--sv-azul, #1D4ED8));
  box-shadow:0 6px 14px color-mix(in srgb, var(--sv-azul, #1D4ED8) 30%, transparent); }
.pl-card .pl-meio .ajuda{ font-size:11px; font-weight:600; text-align:center; }
.pl-card .tabela th{ padding-top:8px; padding-bottom:8px; }
.pl-card .tabela td{ padding-top:8px; padding-bottom:8px; }

/* Mesa: legenda do mapa e a nota do mapa de calor centralizadas no card. */
.mapa-legenda{ justify-content:center; }
#mesaMapaNota{ text-align:center; }

/* Mesa: o selo 'Antecipada' embaixo do nome do técnico (2026-10-04). */
#mesaTabela td.mesa-tec{ white-space:normal !important; overflow:visible !important; text-overflow:clip !important; }
#mesaTabela td.mesa-tec .nota-antecipada{ display:table; margin-top:4px; white-space:nowrap; }

/* Modal "Relatório por lote" moderno (2026-10-04). */
.modal.rl-moderno{ width:min(640px, calc(100vw - 32px)); }
.rl-mes{ display:flex; align-items:center; gap:12px; margin:0 0 12px; flex-wrap:wrap; }
.rl-lista{ display:grid; gap:8px; max-height:min(54vh, 460px); overflow:auto; padding:2px; }
.rl-lote{ display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--borda); border-radius:14px; background:#fff;
  transition:border-color .15s, box-shadow .15s; }
.rl-lote:hover{ border-color:color-mix(in srgb, var(--sv-azul, #2563EB) 35%, var(--borda)); box-shadow:0 8px 20px rgba(15,23,42,.07); }
.rl-num{ flex:none; width:40px; height:40px; border-radius:12px; display:grid; place-items:center; font-size:16px; font-weight:800; color:#fff; }
.rl-num.impar{ background:linear-gradient(135deg, #FDBA74, #EA580C); }
.rl-num.par{ background:linear-gradient(135deg, #60A5FA, #1D4ED8); }
.rl-corpo{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:5px; }
.rl-linha1{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.rl-linha1 strong{ font-size:14.5px; }
.rl-estr{ padding:2px 9px; border-radius:999px; font-size:11px; font-weight:700; }
.rl-estr.impar{ background:#FFF4E5; color:#C2410C; }
.rl-estr.par{ background:#EFF6FF; color:#1D4ED8; }
.rl-linha2{ display:flex; align-items:center; gap:6px 14px; flex-wrap:wrap; font-size:12.5px; color:var(--gray-500); }
.rl-tec{ display:inline-flex; align-items:center; gap:6px; color:var(--ink); font-weight:600; }
.rl-tec i{ width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-size:10px; font-weight:800; color:#fff;
  background:linear-gradient(135deg, var(--sv-azul-claro, #3B82F6), var(--sv-azul, #1D4ED8)); }
.rl-tec em{ font-style:normal; color:var(--gray-500); font-weight:500; }
.rl-dado b{ color:var(--ink); font-variant-numeric:tabular-nums; }
.rl-gerar{ flex:none; display:inline-flex; align-items:center; gap:7px; min-height:38px; border-radius:10px; padding:0 14px; white-space:nowrap; }
.rl-gerar svg{ width:16px; height:16px; }
.rl-nota{ margin:12px 2px 0; font-size:12px; color:var(--gray-500); }
.rl-nota b.impar{ color:#C2410C; } .rl-nota b.par{ color:#1D4ED8; }
@media (max-width:560px){ .rl-lote{ flex-wrap:wrap; } .rl-gerar{ width:100%; justify-content:center; } }

/* Mesa de Controle: indicadores compactos (2026-10-04). */
.mesa-kpis{ margin-bottom:16px; }
.mesa-kpis .mk-cresce{ flex:1 1 auto; min-width:0; }
.mesa-kpis .mk-de{ font-size:12.5px; font-weight:600; color:var(--gray-500); letter-spacing:0; }
.mesa-kpis .mk-barra{ display:block; height:5px; margin:4px 0 3px; border-radius:99px; background:var(--gray-100, #EEF2F6); overflow:hidden; }
.mesa-kpis .mk-barra i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg, #4ADE80, #16A34A); }

/* Modal "Gerar orçamento" - carteira ou avulso (2026-10-04). */
.ot-moderno .os-esc-op{ position:relative; padding:18px 16px 16px; min-height:0; text-align:left; align-items:flex-start; }
.ot-moderno .os-esc-op strong{ font-size:15.5px; }
.ot-moderno .os-esc-op small{ display:block; }
.ot-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.ot-tags i{ font-style:normal; padding:3px 9px; border-radius:999px; font-size:11px; font-weight:600;
  background:color-mix(in srgb, var(--sv-azul, #2563EB) 9%, #fff); color:var(--sv-azul, #2563EB); }
.ot-avulso .os-esc-ic{ background:#F5F3FF; color:#7C3AED; }
.ot-avulso .ot-tags i{ background:#F5F3FF; color:#7C3AED; }
.ot-avulso:hover{ border-color:#C4B5FD !important; background:#FAF8FF !important; }
.ot-seta{ position:absolute; top:16px; right:16px; width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  font-size:15px; font-weight:700; color:var(--gray-400, #94A3B8); background:var(--gray-050, #F8FAFC); transition:transform .15s, background .15s, color .15s; }
.ot-op:hover .ot-seta{ transform:translateX(3px); background:var(--sv-azul, #2563EB); color:#fff; }
.ot-avulso:hover .ot-seta{ background:#7C3AED; }
.ot-moderno .ot-tags{ display:flex !important; flex-wrap:wrap; gap:6px; margin-top:8px; }
.ot-moderno .ot-tags i{ display:inline-block; white-space:nowrap; }
.ot-moderno .os-esc-ic svg{ width:22px !important; height:22px !important; color:inherit !important; margin:0 !important; }
.ot-moderno .ot-avulso .os-esc-ic{ color:#7C3AED; }
.ot-moderno .ot-seta{ display:grid !important; font-size:16px !important; }

.ot-moderno .os-esc-ic{ display:grid !important; place-items:center; width:44px !important; height:44px !important; }
.ot-moderno .ot-op:not(.ot-avulso) .os-esc-ic{ color:var(--sv-azul, #2563EB); }

/* Criar demanda: como cada técnico opera (2026-10-04). */
.cd-op{ display:inline-block; margin-top:3px; padding:2px 8px; border-radius:999px; font-style:normal; font-size:10.5px; font-weight:700; background:var(--gray-100, #F1F5F9); color:var(--gray-500); white-space:nowrap; }
.cd-op-tp{ background:#F5F3FF; color:#7C3AED; }

/* Dashboard: combustível do mês - o cilindro (2026-10-04). */
.cb-cab h2{ margin:0 0 2px; }
.cb-cab .ajuda{ margin:0 0 10px; font-size:12.5px; }
.cb-corpo{ display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:center; }
.cb-tanque{ display:grid; place-items:center; padding:4px 10px; }
.cb-tanque svg{ filter:drop-shadow(0 10px 18px rgba(15,23,42,.12)); }
.cb-liquido{ animation:cb-sobe 1.1s ease-out; transform-origin:bottom; transform-box:fill-box; }
@keyframes cb-sobe{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
.cb-dados{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.cb-dado{ display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:12px; border:1px solid var(--borda); background:#fff; }
.cb-dado > i{ flex:none; width:14px; height:12px; margin-top:4px; border-radius:3px; }
.cb-prev > i{ background:repeating-linear-gradient(90deg, #0F172A 0 5px, transparent 5px 8px); height:3px; margin-top:9px; border-radius:0; }
.cb-est > i{ background:repeating-linear-gradient(90deg, #EA580C 0 3px, transparent 3px 6px); height:3px; margin-top:9px; border-radius:0; }
.cb-real > i{ background:linear-gradient(#FDE047, #EAB308); }
.cb-res > i{ background:linear-gradient(135deg, #4ADE80, #16A34A); }
.cb-dado small{ display:block; font-size:11.5px; font-weight:600; color:var(--gray-500); }
.cb-dado b{ display:block; font-size:19px; letter-spacing:-.02em; color:var(--ink); }
.cb-dado em{ display:block; font-style:normal; font-size:11.5px; color:var(--gray-500); }
.cb-res{ background:#F0FDF4; border-color:#BBF7D0; }
@media (max-width:900px){ .cb-corpo{ grid-template-columns:1fr; } .cb-dados{ grid-template-columns:1fr; } }

/* Faturamento só previsto (2026-10-04): a barra única fica mais larga. */
.fat-so-previsto .fat-barra{ width:min(26px, 60%); }

/* Mesa: Gestão operacional no "Enviar as visitas" (2026-10-04). */
.en-moderno .ch-cabeca{ align-items:center; }
.en-op-btn{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; border:1px solid var(--borda); background:#fff;
  color:var(--ink); border-radius:10px; padding:7px 11px; font-size:12.5px; font-weight:600; cursor:pointer; white-space:nowrap; }
.en-op-btn svg{ width:17px; height:17px; color:var(--brand, #e30613); }
.en-op-btn:hover, .en-op-btn.ativo{ border-color:var(--brand, #e30613); background:color-mix(in srgb, var(--brand, #e30613) 7%, #fff); }
.en-op{ margin:4px 0 12px; padding:12px; border-radius:12px; border:1px solid color-mix(in srgb, var(--brand, #e30613) 25%, #fff);
  background:color-mix(in srgb, var(--brand, #e30613) 5%, #fff); }
.en-op-cab strong{ display:block; font-size:13.5px; }
.en-op-cab small{ display:block; font-size:12px; color:var(--gray-500); margin-bottom:8px; }
.en-op-link .entrada{ font-size:12.5px; font-family:ui-monospace, Consolas, monospace; }
.en-op-acoes{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; align-items:center; }
.en-op-whats{ display:inline-flex; align-items:center; gap:6px; background:#25D366; color:#fff; border:0; }
.en-op-whats svg{ width:16px; height:16px; }
.en-op-novo{ margin-left:auto; border:0; background:none; color:var(--gray-500); font-size:12px; text-decoration:underline; cursor:pointer; }
@media (max-width:560px){ .en-op-btn span{ display:none; } }

/* Mensalidade vencida (2026-10-04): o aviso amarelo no meio da tela e o botão
   "Usar 2 dias na confiança" da tarja. */
.aviso-venc-fundo{ position:fixed; inset:0; z-index:9000; display:grid; place-items:center; padding:16px;
  background:rgba(15,23,42,.42); backdrop-filter:blur(2px); }
.aviso-venc-fundo[hidden]{ display:none; }
.aviso-venc{ width:min(460px, 100%); text-align:center; padding:26px 24px 20px; border-radius:20px;
  background:linear-gradient(180deg, #FFFBEB, #FEF3C7); border:1px solid #FCD34D; color:#78350F;
  box-shadow:0 24px 60px rgba(120,53,15,.28); animation:aviso-venc-entra .25s ease-out; }
@keyframes aviso-venc-entra{ from{ transform:translateY(10px) scale(.97); opacity:0; } }
.aviso-venc-ic{ display:grid; place-items:center; width:58px; height:58px; margin:0 auto 10px; border-radius:50%;
  background:#FDE68A; color:#B45309; box-shadow:0 0 0 8px rgba(253,230,138,.45); }
.aviso-venc-ic svg{ width:30px; height:30px; }
.aviso-venc strong{ display:block; font-size:20px; font-weight:800; letter-spacing:-.02em; color:#78350F; margin-bottom:6px; }
.aviso-venc p{ margin:6px 0; font-size:14px; line-height:1.5; }
.aviso-venc-trava{ font-size:12.5px !important; color:#92400E; opacity:.85; }
.aviso-venc-acoes{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:14px; }
.aviso-venc-pagar{ background:#D97706; color:#fff; border:0; }
.aviso-venc-pagar:hover{ background:#B45309; color:#fff; }
.aviso-venc .btn-ghost{ background:#fff; border-color:#FCD34D; color:#78350F; }
.tarja-confianca{ flex:none; border:2px solid rgba(255,255,255,.75); background:transparent; color:#fff; border-radius:12px;
  padding:11px 16px; font-weight:700; font-size:14px; cursor:pointer; }
.tarja-confianca:hover{ background:rgba(255,255,255,.14); }
.tarja-confianca:disabled{ opacity:.7; cursor:default; }

/* Sessão expirada (2026-10-04): o aviso para entrar de novo sem perder o que foi digitado. */
.sessao-fundo{ position:fixed; inset:0; z-index:9500; display:grid; place-items:center; padding:16px; background:rgba(15,23,42,.45); backdrop-filter:blur(2px); }
.sessao-fundo[hidden]{ display:none; }
.sessao-caixa{ width:min(420px, 100%); text-align:center; background:#fff; border-radius:20px; padding:24px 22px 20px;
  box-shadow:0 24px 60px rgba(15,23,42,.3); }
.sessao-ic{ display:grid; place-items:center; width:54px; height:54px; margin:0 auto 10px; border-radius:50%; background:#EFF6FF; color:#2563EB; }
.sessao-ic svg{ width:28px; height:28px; }
.sessao-caixa strong{ display:block; font-size:19px; font-weight:800; letter-spacing:-.02em; margin-bottom:6px; }
.sessao-caixa p{ margin:6px 0; font-size:14px; color:var(--gray-600, #475569); line-height:1.5; }
.sessao-acoes{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:14px; }
.sessao-erro{ color:#B91C1C !important; font-size:12.5px !important; }