/* ============================================================
   ACABAMENTO: PÁGINA, NÃO PAINEL
   É a última camada da cascata de propósito: vence o que veio do
   Sistema Integrado sem reescrever regra por regra. A direção é tirar
   a cara de "sistema administrativo": lateral clara que faz parte da
   página (não um bloco escuro), nada de rótulo em caixa-alta espaçada,
   superfícies sem borda dura, botões em pílula, coluna central fluida
   e tipografia que acompanha a largura (clamp). Só usa variáveis, então
   segue a marca de cada empresa e os 7 temas. A marca aparece na
   logomarca da lateral, no item ativo, no hero e nas ações.
   ============================================================ */
h1,h2,h3,h4,h5,h6,.pg-head h2,.stat-card .valor,.hero-painel h1,.modal-title,.item-card h6,
.agenda-dia .d,.bloco-titulo,.stat-card .label{font-family:var(--fonte-titulo)}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* ── Lateral: clara, da cor da página, sem borda ──────────────
   Era um bloco marinho com fio dourado, que é o que mais grita
   "painel". Agora é uma coluna da própria página: mesmo fundo, itens
   em pílula, o ativo na cor primária da empresa. */
#sidebar{background:var(--cor-card);color:var(--cor-texto);
  --cor-sidebar-texto:var(--cor-texto);--cor-sidebar-muted:var(--cor-texto-muted)}
/* No computador a lateral é uma superfície própria (a cor do cartão, um
   tom acima da página) com um fio na divisa: sem isso ela se fundia com
   o conteúdo e não dava pra ver onde um acaba e o outro começa. */
@media(min-width:992px){
  #sidebar{border-right:1px solid var(--cor-border);
    box-shadow:1px 0 0 color-mix(in srgb,var(--cor-card) 60%,transparent),8px 0 24px -20px rgba(15,23,42,.18)}
}
.lado-marca{padding:26px 22px 18px}
.lado-marca::after{display:none}
.lado-logo{width:40px;height:40px;border-radius:14px;color:var(--cor-primaria);
  background:color-mix(in srgb,var(--cor-primaria) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--cor-acento) 55%,transparent)}
.lado-marca .marca-nome{color:var(--cor-primaria);letter-spacing:.02em;font-size:.95rem}
.lado-marca .marca-produto{color:var(--cor-texto-muted)}
.btn-fechar-launcher{color:var(--cor-texto-muted)}
.menu-lateral{padding:6px 14px 16px}
/* Seções em frase normal, não em caixa-alta espaçada. */
.menu-lateral .nav-section{padding:20px 14px 6px;font-size:.74rem;font-weight:500;letter-spacing:0;
  text-transform:none;color:var(--cor-texto-muted)}
.menu-lateral .nav-section:first-child{padding-top:4px}
.menu-lateral .nav-link{padding:9px 14px;border-radius:999px;font-size:.88rem;font-weight:500;
  color:var(--cor-texto);transition:background .18s ease,color .18s ease}
.menu-lateral .nav-link i{color:var(--cor-texto-muted);font-size:1.02rem}
.menu-lateral .nav-link:hover{color:var(--cor-primaria);background:color-mix(in srgb,var(--cor-primaria) 7%,transparent)}
.menu-lateral .nav-link:hover i{color:var(--cor-primaria)}
.menu-lateral .nav-link.active{color:var(--cor-primaria);font-weight:600;
  background:color-mix(in srgb,var(--cor-primaria) 11%,transparent)}
.menu-lateral .nav-link.active i{color:var(--cor-primaria)}
.menu-lateral .nav-link.active::before{display:none}
.lado-usuario{padding:16px 22px 22px;border-top:none}
.lado-usuario:hover{background:color-mix(in srgb,var(--cor-primaria) 5%,transparent)}
.lado-avatar{color:var(--cor-primaria);background:var(--cor-card);
  border:1px solid color-mix(in srgb,var(--cor-acento) 60%,transparent)}
.lado-usuario .nome{color:var(--cor-texto)}
.lado-usuario small{color:var(--cor-texto-muted)}
/* Gaveta no celular: superfície clara com sombra, cantos arredondados. */
@media(max-width:991px){
  #sidebar{background:var(--cor-card);border-radius:0 28px 28px 0;width:min(86vw,320px)}
  #sidebar.open{box-shadow:0 30px 80px rgba(0,0,0,.28)}
  #sidebar-overlay{background:color-mix(in srgb,var(--cor-texto) 28%,transparent);backdrop-filter:blur(4px)}
}

/* ── Topo: sem faixa, sem linha ───────────────────────────────
   Vira só as ferramentas flutuando sobre a página; o título da tela
   já está no conteúdo, então aqui ele é uma trilha discreta. */
#topbar{background:color-mix(in srgb,var(--cor-bg) 82%,transparent);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);padding:14px clamp(16px,4vw,64px);border-bottom:none;box-shadow:none}
#topbar h5{font-family:'Inter','Segoe UI',system-ui,sans-serif;font-size:.84rem;font-weight:500;
  letter-spacing:0;color:var(--cor-texto-muted)}
#topbar .btn{color:var(--cor-texto)!important}
#topbar .btn-sino,#topbar .btn-ghost,#topbar .btn-secondary,#topbar .btn-sm{border:1px solid var(--cor-border)!important;
  background:color-mix(in srgb,var(--cor-card) 70%,transparent)!important;border-radius:999px;
  width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;padding:0!important}
#topbar .btn-sino:hover,#topbar .btn-ghost:hover,#topbar .btn-secondary:hover,#topbar .btn-sm:hover{background:var(--cor-card)!important;
  border-color:color-mix(in srgb,var(--cor-primaria) 35%,var(--cor-border))!important}
#topbar #btn-menu{width:auto;padding:0 10px!important}
#topbar #topbar-usuario{color:var(--cor-texto-muted)!important}
#topbar .badge{background:color-mix(in srgb,var(--cor-primaria) 10%,transparent)!important;color:var(--cor-primaria)!important;
  font-weight:600;letter-spacing:.02em;border-radius:999px;padding:6px 11px}
#topbar .chip-condominio{background:color-mix(in srgb,var(--cor-card) 70%,transparent);border:1px solid var(--cor-border);
  color:var(--cor-texto);border-radius:999px;min-height:38px}
#topbar .chip-condominio:hover{background:var(--cor-card);border-color:color-mix(in srgb,var(--cor-primaria) 35%,var(--cor-border))}
/* O contador fica pendurado no canto do sino, fora do círculo. */
#topbar .btn-sino{overflow:visible}
#badge-sino{position:absolute;top:-5px;right:-5px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;font-size:.66rem;font-weight:700;line-height:1;
  background:var(--cor-acento);color:var(--cor-acento-texto);border:2px solid var(--cor-bg)}
#badge-sino.d-none{display:none}
@media(min-width:992px){ #topbar-usuario,#btn-perfil-topo{display:none!important} }
/* Celular: só o que cabe. O perfil já está na gaveta, e recarregar é
   puxar a página. */
@media(max-width:768px){
  #topbar{gap:8px}
  #topbar>div{gap:6px!important}
  #badge-perfil,#topbar .btn[title="Atualizar dados"]{display:none!important}
  #topbar .btn-sino,#topbar .btn-ghost,#topbar .btn-secondary,#topbar .btn-sm{width:36px;height:36px}
  #topbar .chip-condominio{min-height:36px;padding:0 12px;max-width:34vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #topbar h5{max-width:120px}
}

/* Rótulos que ainda estavam em caixa-alta espaçada nas telas
   específicas (plano, montador, equipe, insights, revisão da IA,
   agenda do dashboard). Viram frase normal. */
.mnt-total small,.eq-rodape-rot,.ins-sub,.pl-rotulo,.ct-secao-titulo,.cm-rev-cab,.agenda-dia .m,
.onb-passo .selo{text-transform:none;letter-spacing:0}
.mnt-total small,.pl-rotulo,.ins-sub,.ct-secao-titulo{font-size:.8rem;font-weight:500}
.cm-rev-cab{font-weight:600}

/* ── Conteúdo: coluna centrada, margens que crescem com a janela ── */
#pagina{padding:clamp(20px,3vw,40px) clamp(16px,4vw,64px) 96px;max-width:1280px;margin:0 auto}

/* Cabeçalho da tela: título fluido, trilha em frase normal. */
.pg-head{margin-bottom:clamp(24px,3.5vw,40px);align-items:flex-end}
.pg-eyebrow{font-size:.8rem;font-weight:500;letter-spacing:0;text-transform:none;margin-bottom:6px}
.pg-eyebrow::before{width:16px}
.pg-head h2{font-size:clamp(1.65rem,1.2rem+1.6vw,2.3rem);font-weight:700;letter-spacing:-.03em;line-height:1.1}
.pg-head p{font-size:clamp(.9rem,.86rem+.2vw,1rem);margin-top:8px}

/* ── Superfícies: sem borda dura ───────────────────────────────
   O cartão é uma superfície um pouco mais clara que a página, com uma
   sombra larga e diluída. O fio quase invisível só existe pros temas
   escuros, onde a sombra some. */
.bloco,.item-card,.stat-card,.tabela-wrap,.form-secao,#notif-ocorr-popup,.kanban-card,.cond-escolha{
  border-color:color-mix(in srgb,var(--cor-border) 55%,transparent)}
.bloco{padding:clamp(22px,3vw,36px) clamp(18px,3vw,36px);border-radius:24px}
.bloco+.bloco{margin-top:24px}
.item-card{padding:22px;border-radius:22px;gap:10px}
.item-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--cor-primaria) 22%,var(--cor-border))}
.item-card .rodape{border-top-color:color-mix(in srgb,var(--cor-border) 60%,transparent)}
.grade{gap:20px}
.grade-stat{gap:16px;margin-bottom:32px}
.grade-painel{gap:20px;margin-bottom:32px}
.grade>.bloco+.bloco,.grade-painel>.bloco+.bloco,
.fin-duas>.bloco+.bloco,.ia-duas>.bloco+.bloco{margin-top:0}
.grade+.bloco,.grade+.grade,.bloco+.grade-stat{margin-top:32px}

/* Título de bloco: uma frase em Manrope, sem traço e sem caixa-alta. */
.bloco-titulo{font-size:1.02rem;font-weight:700;letter-spacing:-.015em;text-transform:none;
  color:var(--cor-texto);padding-left:0;background:none;margin-bottom:18px}
.bloco-titulo i{color:var(--cor-primaria)}
.bloco-titulo a{font-size:.8rem;font-weight:500}
.form-secao{border-radius:18px;padding:18px 20px}
.form-secao-titulo{font-size:.92rem;font-weight:700;letter-spacing:-.01em;text-transform:none;font-family:var(--fonte-titulo)}

/* Números: o número é o protagonista, o rótulo uma frase pequena. */
.stat-card{padding:24px 24px 22px;border-radius:22px;container-type:inline-size}
.stat-card::after{display:none}
.stat-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--cor-primaria) 22%,var(--cor-border))}
.stat-card i{background:none!important;border:none!important;width:auto;height:auto;font-size:1.1rem;opacity:.7}
.stat-card:hover i{transform:none}
.stat-card .label{font-size:.82rem;font-weight:500;letter-spacing:0;text-transform:none}
.stat-card .valor{font-size:clamp(1.7rem,1.2rem+1.6vw,2.4rem);font-weight:700;letter-spacing:-.035em;margin:12px 0 2px;white-space:nowrap}
.stat-card .valor-longo{font-size:clamp(1.3rem,15cqi,1.9rem);line-height:2.52rem}
.stat-card .valor-moeda{font-size:.5em;font-weight:500;letter-spacing:0;color:var(--cor-texto-muted);margin-right:.35em}

/* ── Hero do painel: superfície clara, título grande ─────────── */
.hero-painel{background:var(--cor-card);color:var(--cor-texto);border:1px solid color-mix(in srgb,var(--cor-border) 55%,transparent);
  box-shadow:var(--sombra-card);padding:clamp(26px,4vw,48px);margin-bottom:32px;min-height:0;border-radius:28px}
.hero-painel::before{display:none}
.hero-corpo{position:relative;z-index:1;display:block}
.hero-texto{max-width:64%}
.hero-acoes{margin-top:20px;position:relative;z-index:2}
.hero-data{display:flex;align-items:center;gap:12px;opacity:1;color:var(--cor-texto-muted);margin-bottom:14px;
  font-size:.82rem;font-weight:500;letter-spacing:0;text-transform:none}
.hero-data::before{content:'';width:16px;height:1px;background:var(--cor-acento)}
.hero-painel h1{font-size:clamp(1.8rem,1.2rem+2.2vw,2.8rem);font-weight:700;color:var(--cor-primaria);letter-spacing:-.035em}
.hero-local{opacity:1;color:var(--cor-texto-muted);margin-top:10px}
.hero-pilulas{margin-top:24px}
.hero-pilula{background:color-mix(in srgb,var(--cor-primaria) 6%,transparent);border:1px solid transparent;color:var(--cor-texto);
  backdrop-filter:none;padding:9px 16px}
.hero-pilula i{color:var(--cor-texto-muted)}
.hero-pilula:hover{background:color-mix(in srgb,var(--cor-primaria) 12%,transparent);border-color:transparent}
.hero-pilula.alerta{background:color-mix(in srgb,var(--cor-acento) 14%,transparent)}
.hero-pilula.alerta i{color:var(--cor-acento-escuro)}
.btn-hero{background:transparent;border:1px solid var(--cor-border);color:var(--cor-texto)}
.btn-hero:hover{background:var(--cor-table-header);color:var(--cor-texto)}
.hero-arte{position:absolute;right:40px;bottom:0;width:min(32%,340px);color:var(--cor-primaria);
  pointer-events:none;--pf-detalhe:var(--cor-acento)}
.hero-arte svg{display:block;width:100%;height:auto}
@media(max-width:1100px){ .hero-arte{display:none} .hero-texto{max-width:none} }

/* ── Tabelas: sem faixa no cabeçalho, sem caixa-alta ─────────── */
.tabela-wrap{border-radius:22px}
.table thead tr,.tabela-wrap thead th{background:transparent}
.table thead th,.tabela-wrap thead th{font-size:.8rem;font-weight:500;letter-spacing:0;text-transform:none;
  color:var(--cor-texto-muted);padding:16px 20px 12px;border-bottom:1px solid color-mix(in srgb,var(--cor-border) 70%,transparent)!important}
.table tbody td,.tabela-wrap tbody td{padding:16px 20px;border-color:color-mix(in srgb,var(--cor-border) 60%,transparent)!important}
.table tbody tr:hover,.tabela-wrap tbody tr:hover{background:color-mix(in srgb,var(--cor-primaria) 4%,transparent)}
.kanban-col{border-radius:20px;border-color:color-mix(in srgb,var(--cor-border) 55%,transparent)}
.kanban-col-head{font-size:.8rem;font-weight:600;letter-spacing:0;text-transform:none}
.kanban-card{border-radius:14px}

/* ── Controles: pílulas e campos macios ──────────────────────── */
.btn{border-radius:999px;padding:.6rem 1.2rem}
.btn-sm{padding:.4rem .85rem}
.btn-lg{padding:.75rem 1.5rem}
.form-control,.form-select{min-height:44px;border-radius:14px!important}
.form-control-sm,.form-select-sm{min-height:36px;border-radius:12px!important}
textarea.form-control{border-radius:16px!important}
.input-group>.form-control:not(:last-child){border-radius:14px 0 0 14px!important}
.input-group>.btn:last-child,.input-group>.form-control:last-child{border-radius:0 14px 14px 0!important}
.input-group>.btn{border-radius:0}
.form-label{font-size:.84rem;font-weight:600}
.filtros{gap:10px;margin-bottom:22px}
.filtros .busca .form-control{border-radius:999px!important;padding-left:40px}
.filtros .busca i{left:15px}
.abas{gap:6px;margin-bottom:22px;border-bottom:none;background:color-mix(in srgb,var(--cor-primaria) 6%,transparent);
  padding:4px;border-radius:999px;width:max-content;max-width:100%}
.aba{padding:8px 16px;font-weight:500;border-bottom:none;border-radius:999px;font-size:.86rem}
.aba:hover{background:color-mix(in srgb,var(--cor-card) 60%,transparent)}
.aba.ativa{font-weight:600;background:var(--cor-card);color:var(--cor-primaria);box-shadow:var(--sombra-card)}
.tag{font-size:.74rem;font-weight:500;letter-spacing:0;padding:5px 12px;box-shadow:none}
.pg-acoes .btn,.hero-acoes .btn{border-radius:999px;padding:.62rem 1.3rem}
.cal td{border-color:color-mix(in srgb,var(--cor-border) 60%,transparent);border-radius:0}
.cal th{text-transform:none;letter-spacing:0;font-size:.78rem;font-weight:500}
.cal .ev{border-radius:999px;padding:3px 9px}
.faixa-plano{border-radius:999px;padding:10px 10px 10px 18px;border-color:transparent}
.vazio{padding:clamp(32px,6vw,64px) 20px}
.vazio i{opacity:.25;font-size:2.8rem}

/* Modais: cartão redondo, sem linhas. */
.modal-content{border-radius:26px;border:1px solid color-mix(in srgb,var(--cor-border) 55%,transparent);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.35)}
.modal-header{border-bottom:none;padding:24px 28px 8px;border-radius:26px 26px 0 0}
.modal-header::after{display:none}
.modal-title{font-size:1.25rem;letter-spacing:-.025em}
.modal-body{padding:16px 28px}
.modal-footer{border-top:none;padding:8px 28px 24px}
.toast-msg{border-radius:18px;border:none;border-left:4px solid var(--cor-primaria)}
#notif-ocorr-popup{border-radius:22px}
#notif-ocorr-popup .notif-header{background:transparent;border-bottom:1px solid color-mix(in srgb,var(--cor-border) 60%,transparent)}

/* ── Celular: barra flutuante, não faixa colada ──────────────── */
#mobile-nav{left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));border-radius:999px;
  background:color-mix(in srgb,var(--cor-card) 90%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid color-mix(in srgb,var(--cor-border) 70%,transparent);box-shadow:var(--sombra-card-hover);padding:8px 6px}
#mobile-nav .mn-item{color:var(--cor-texto-muted);border-radius:999px;font-size:.64rem;font-weight:500;padding:4px 2px;gap:3px}
#mobile-nav .mn-item i{font-size:1.25rem}
#mobile-nav .mn-item.active,#mobile-nav .mn-item:active{color:var(--cor-primaria)}

@media(max-width:768px){
  #pagina{padding:18px 16px 108px}
  #topbar{padding:10px 14px}
  #conteudo{padding-bottom:0}
  .pg-head{margin-bottom:22px;align-items:flex-start}
  .pg-head h2{font-size:1.6rem}
  .bloco{padding:20px 18px;border-radius:20px}
  .item-card{padding:18px;border-radius:18px}
  .hero-painel{padding:24px 20px;border-radius:22px}
  .stat-card{padding:18px;border-radius:18px}
  .stat-card .valor{font-size:1.7rem}
  .stat-card .valor-longo{line-height:2rem}
  .table thead th,.tabela-wrap thead th,.table tbody td,.tabela-wrap tbody td{padding:13px 14px}
  .abas{width:100%;overflow-x:auto}
  .modal-content{border-radius:22px!important}
  .modal-header{padding:20px 20px 6px!important}
  .modal-body{padding:12px 20px!important}
  .modal-footer{padding:8px 20px 20px!important}
}
@media print{ #conteudo{margin-left:0} }