:root{
  --preto: #0A0A0A;
  --asfalto: #3A3A3A;
  --cinza-medio: #888888;
  --cinza-claro: #D4D4D4;
  --cinza-borda: #EAEAEA;
  --branco: #FAFAFA;
  --branco-puro: #FFFFFF;

  /* Paleta de acentos — usada apenas no Fluxo de Caixa (gráficos) */
  --acc-receita:      #1F6B3A;
  --acc-receita-soft: rgba(31, 107, 58, 0.12);
  --acc-despesa:      #B7432E;
  --acc-despesa-soft: rgba(183, 67, 46, 0.12);

  --ff-sans: 'Outfit', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --ff-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --s-4: 4px; --s-8: 8px; --s-16: 16px; --s-24: 24px;
  --s-32: 32px; --s-40: 40px; --s-56: 56px; --s-80: 80px;

  --sidebar-w: 256px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
}
html, body {
  height: 100%;
  background: var(--branco);
  color: var(--preto);
  font-family: var(--ff-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior: none;
}

/* Scroll suave em todos os containers com overflow interno */
.light-body,
.fv-dropzone,
.cal-time-wrap,
.sheet-body,
.doc-body,
.cem-body,
.cdm-body,
.pe-body,
#clientFocus,
.subhub {
  scroll-behavior: smooth;
}

/* Scrollbar mais discreta (WebKit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(10,10,10,0.15); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(10,10,10,0.3); border: 2px solid transparent; background-clip: content-box; }

/* Respeita preferência do usuário de reduzir movimento */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* iOS Safari faz auto-zoom em qualquer input/textarea/select com font-size < 16px,
   o que desloca o layout e quebra a UX. Em telas táteis (sem hover preciso),
   força 16px para evitar o zoom; o desktop mantém os tamanhos originais. */
@media (hover: none) and (pointer: coarse){
  input, textarea, select { font-size: 16px !important; }

  /* Botões de ação (delete, editar capa, ações) ficam escondidos atrás de :hover
     no desktop. No iPad/celular, o "hover" é simulado no primeiro tap, o que
     trunca a UX. Aqui forçamos eles a ficarem sempre visíveis em touch. */
  .light-list-row .row-del,
  .project-card .card-del,
  .project-card .cover-edit,
  .sheet-row .del,
  .proposal-row .row-del,
  .pe-invest-row .del,
  .fv-files .row .actions {
    opacity: 1 !important;
  }
}

.label {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cinza-medio);
}

/* ============================================================
   SPLASH / LOADING — Anime.js staggering reveal
============================================================ */
#splash {
  position: fixed;
  inset: 0;
  background: var(--preto);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 9999;
  transition: opacity 0.8s ease, visibility 0.8s;
  /* Reduz a animação inicial pra equivaler a ~75% zoom */
  zoom: 0.75;
}
#splash.hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.splash-stage {
  position: relative;
  width: 520px;
  height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#profileGrid {
  position: absolute;
  inset: 0;
  display: grid;
  gap: 0;
  place-items: center;
}
#profileGrid .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--branco);
  will-change: transform, opacity;
}
.dot {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--branco);
  opacity: 0;
  transform: scale(0);
}

.splash-caption {
  margin-top: var(--s-40);
  text-align: center;
}
.splash-caption .brand {
  font-family: var(--ff-sans);
  font-weight: 400;
  color: var(--branco);
  font-size: 36px;
  letter-spacing: -0.02em;
}
.splash-caption .tag {
  margin-top: var(--s-8);
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--cinza-medio);
  text-transform: uppercase;
}

/* ============================================================
   APP LAYOUT
============================================================ */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
  min-height: 100dvh; /* iOS Safari: dvh exclui a barra de URL */
}

/* ---------- Sidebar ---------- */
.sidebar {
  background: var(--preto);
  color: var(--branco);
  padding: var(--s-24) 0;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
}

.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--asfalto); border-radius: 2px; }

.brand-block {
  padding: 0 var(--s-24) var(--s-24);
  border-bottom: 1px solid var(--asfalto);
}
.brand-block .brand {
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--branco);
}
.brand-block .tag {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cinza-medio);
  margin-top: 2px;
}

.profile {
  display: flex;
  align-items: center;
  gap: var(--s-16);
  padding: var(--s-24);
  border-bottom: 1px solid var(--asfalto);
}
.profile-avatar {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: transparent;
  flex-shrink: 0;
  cursor: pointer;
}
.profile-avatar-btn {
  border: 1px solid rgba(255,255,255,0.15);
  padding: 0;
  transition: border-color 0.2s, transform 0.2s;
}
.profile-avatar-btn:hover {
  border-color: rgba(255,255,255,0.5);
  transform: scale(1.05);
}
.profile-avatar .avatarGrid {
  position: absolute;
  inset: 0;
  display: grid;
  gap: 0;
  place-items: center;
  border-radius: 50%;
}
.profile-avatar .avatarGrid .dot {
  width: 1.4px;
  height: 1.4px;
  background: var(--branco);
  will-change: transform, opacity;
}
.profile-info .name {
  font-size: 13px;
  font-weight: 500;
  color: var(--branco);
}
.profile-info .role {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cinza-medio);
  margin-top: 2px;
}

.nav { padding: var(--s-16) 0; flex: 1; }
.nav-group { padding: var(--s-16) 0; }
.nav-group-title {
  padding: 0 var(--s-24) var(--s-8);
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cinza-medio);
}
.nav-item {
  display: flex;
  align-items: center;
  gap: var(--s-16);
  padding: 10px var(--s-24);
  font-size: 13px;
  color: var(--cinza-claro);
  border-left: 2px solid transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  width: 100%;
  text-align: left;
}
.nav-item:hover { background: var(--asfalto); color: var(--branco); }
.nav-item.active {
  background: var(--asfalto);
  color: var(--branco);
  border-left-color: var(--branco);
}
.nav-item .icon {
  width: 14px; height: 14px; stroke: currentColor;
  fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}
.nav-item .count {
  margin-left: auto;
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--cinza-medio);
}

.sidebar-footer {
  padding: var(--s-16) var(--s-24);
  border-top: 1px solid var(--asfalto);
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--cinza-medio);
  text-transform: uppercase;
}

/* ---------- Main ---------- */
.main {
  background: var(--branco);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.topbar {
  display: flex;
  align-items: center;
  gap: var(--s-24);
  padding: var(--s-24) var(--s-40);
  border-bottom: 1px solid var(--cinza-borda);
  background: var(--branco-puro);
  position: sticky;
  top: 0;
  z-index: 10;
}

.crumbs {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cinza-medio);
}
.crumbs strong { color: var(--preto); font-weight: 500; }

.search {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--s-8);
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  padding: 8px var(--s-16);
  border-radius: 2px;
  width: 280px;
}
.search input {
  border: none;
  background: transparent;
  outline: none;
  font-family: var(--ff-sans);
  font-size: 13px;
  color: var(--preto);
  width: 100%;
}
.search input::placeholder { color: var(--cinza-medio); }
.search .icon { width: 14px; height: 14px; stroke: var(--cinza-medio); stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
  padding: 10px var(--s-16);
  font-size: 12px;
  font-weight: 500;
  border-radius: 2px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  border: 1px solid transparent;
}
.btn-primary { background: var(--preto); color: var(--branco); }
.btn-primary:hover { background: var(--asfalto); }
.btn-ghost { border-color: var(--cinza-borda); color: var(--preto); }
.btn-ghost:hover { background: var(--branco); border-color: var(--preto); }

.btn-hub {
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
  padding: 9px 14px;
  background: var(--preto);
  color: var(--branco);
  border: 1px solid var(--preto);
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn-hub:hover { background: var(--asfalto); border-color: var(--asfalto); }
.btn-hub svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.app.hidden { display: none; }

/* Isolamento de contexto: só o grupo do módulo ativo é visível */
.nav-group { display: none; }
.nav-group.active-module { display: block; }

.content { padding: var(--s-40); flex: 1; }
.content.hidden { display: none; }

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-24);
  margin-bottom: var(--s-40);
  padding-bottom: var(--s-24);
  border-bottom: 1px solid var(--cinza-borda);
}
.page-head h1 {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.page-head .subtitle {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cinza-medio);
  margin-bottom: var(--s-8);
}
.page-head .actions { display: flex; gap: var(--s-8); }

/* ---------- Stats row ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-16);
  margin-bottom: var(--s-40);
}
.stat {
  border: 1px solid var(--cinza-borda);
  padding: var(--s-24);
  background: var(--branco-puro);
}
.stat .label { margin-bottom: var(--s-16); }
.stat .value {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.stat .delta {
  margin-top: var(--s-8);
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--asfalto);
}

/* ============================================================
   KANBAN — 7 etapas do método zend.arq
============================================================ */
.kanban-wrapper {
  overflow-x: auto;
  padding-bottom: var(--s-24);
}
.kanban {
  display: grid;
  grid-template-columns: repeat(7, minmax(280px, 1fr));
  gap: var(--s-16);
  min-width: 100%;
}

.col {
  background: var(--branco-puro);
  border: 1px solid var(--cinza-borda);
  display: flex;
  flex-direction: column;
  min-height: 560px;
}
.col-head {
  padding: var(--s-16);
  border-bottom: 1px solid var(--cinza-borda);
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
}
.col-head .step {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--cinza-medio);
}
.col-head .title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.col-head .meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cinza-medio);
}

.col-body {
  padding: var(--s-16);
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  flex: 1;
}

.card {
  border: 1px solid var(--cinza-borda);
  padding: var(--s-16);
  background: var(--branco-puro);
  cursor: grab;
  transition: border-color 0.15s, transform 0.15s;
}
.card:hover { border-color: var(--preto); transform: translateY(-1px); }
.card .client {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cinza-medio);
  margin-bottom: var(--s-8);
}
.card .project-title {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin-bottom: var(--s-16);
}
.card .substeps {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: var(--s-16);
}
.card .substep {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--cinza-medio);
}
.card .substep::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--cinza-claro);
}
.card .substep.done { color: var(--asfalto); }
.card .substep.done::before { background: var(--preto); }
.card .substep.active { color: var(--preto); font-weight: 500; }
.card .substep.active::before { background: var(--preto); box-shadow: 0 0 0 3px var(--cinza-borda); }

.card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--s-8);
  border-top: 1px solid var(--cinza-borda);
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cinza-medio);
}
.card-foot .progress {
  display: flex;
  align-items: center;
  gap: 6px;
}
.progress-bar {
  width: 48px;
  height: 2px;
  background: var(--cinza-borda);
  position: relative;
}
.progress-bar span {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: var(--preto);
}

/* ============================================================
   HUB CENTRAL — tela preta, 4 pilares
============================================================ */
#hub {
  position: fixed;
  inset: 0;
  /* Fundo TRANSPARENTE — o #hubBackdrop fixo no viewport (fora do hub,
     sem zoom) é quem provê o fundo escuro. Permite que a wave canvas
     fique perfeitamente alinhada ao viewport real. */
  background: transparent;
  color: var(--branco);
  z-index: 50;
  display: flex;
  flex-direction: column;
  padding: var(--s-56) var(--s-80);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease, visibility 0.7s;
  /* Reduz proporcionalmente o hub pra caber sem rolar — equivalente a ~90% zoom */
  zoom: 0.9;
}
#hub.visible { opacity: 1; visibility: visible; }

/* Wave + backdrop fixos no viewport REAL (fora do #hub que tem zoom: 0.9).
   Permanecem visíveis enquanto o hub OU qualquer sub-hub estão na tela. */
#hubBackdrop {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: var(--preto);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease, visibility 0s linear 0.7s;
}
#hubWave {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease, visibility 0s linear 0.7s;
}
body.has-hub-bg #hubBackdrop,
body.has-hub-bg #hubWave {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.7s ease, visibility 0s;
}

/* ============================================================
   SUB-HUB (Projetos) — mesma estética do Hub Central
============================================================ */
.subhub {
  position: fixed;
  inset: 0;
  /* Fundo OPACO por padrão (cobre o hub durante o crossfade do dive-in,
     evitando overlap visual de "hub aparecendo atrás do sub-hub"). Depois
     que o dive-in completa, recebe .bg-transparent e o fundo escuro
     transita pra transparente, revelando a wave atrás. */
  background: var(--preto);
  color: var(--branco);
  z-index: 60;
  display: flex;
  flex-direction: column;
  padding: var(--s-56) var(--s-80);
  /* Mesma redução do hub pra coerência visual */
  zoom: 0.9;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s, background-color 0.55s ease;
}
.subhub.visible { opacity: 1; visibility: visible; }
.subhub.bg-transparent { background: transparent; }

/* Conteúdo do sub-hub começa invisível (anime.js controla o reveal) */
.subhub .subhub-top,
.subhub .subhub-header,
.subhub .subhub-pillars {
  opacity: 0;
  will-change: transform, opacity;
}

/* ============================================================
   TEMA LIGHT — páginas profundas (dashboards de dados)
============================================================ */
.light-page {
  position: fixed;
  inset: 0;
  background: #FAFAFA;
  color: #0A0A0A;
  z-index: 80;
  display: flex;
  flex-direction: column;
  padding: var(--s-56) var(--s-80);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s;
}
.light-page.visible { opacity: 1; visibility: visible; }

.light-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--s-56);
  padding-bottom: var(--s-24);
  border-bottom: 1px solid #E5E5E5;
}
.light-back {
  display: inline-flex;
  flex-direction: column;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: opacity 0.3s ease;
  padding: 0;
}
.light-back:hover { opacity: 0.7; }
.light-back .brand-top {
  display: flex;
  align-items: center;
  gap: var(--s-8);
}
.light-back .back-arrow {
  width: 14px; height: 14px;
  stroke: #888;
  fill: none; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.3s ease, stroke 0.3s ease;
}
.light-back:hover .back-arrow { transform: translateX(-3px); stroke: #0A0A0A; }
.light-back .name {
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: #0A0A0A;
}
.light-back .back-label {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #888;
  margin-top: 6px;
}

.light-user {
  text-align: right;
  font-size: 13px;
  font-weight: 500;
  color: #0A0A0A;
}
.light-user small {
  display: block;
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #888;
  margin-top: 2px;
  font-weight: 400;
}

/* Versão "card" usada nas light-pages: foto/avatar + nome/role + botão menu,
   espelhando o que aparece no hub/sub-hub mas em tema claro. */
.light-user-card {
  display: flex;
  align-items: center;
  gap: var(--s-16);
  text-align: right;
}
.light-user-card .info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.light-user-card .name {
  font-size: 13px;
  font-weight: 500;
  color: var(--preto);
}
.light-user-card .role {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cinza-medio);
  font-weight: 400;
}
.light-user-card .avatar-mini {
  width: 40px; height: 40px;
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--cinza-borda);
  background: var(--branco-puro);
  cursor: pointer;
  padding: 0;
  transition: border-color 0.2s, transform 0.2s;
}
.light-user-card .avatar-mini:hover {
  border-color: var(--preto);
  transform: scale(1.05);
}
.light-user-card .avatar-mini .avatarGrid {
  position: absolute; inset: 0;
  display: grid;
  gap: 0;
  place-items: center;
  border-radius: 50%;
}
/* No tema claro, o halftone vira pontos pretos sobre fundo branco */
.light-user-card .avatar-mini .avatarGrid .dot {
  width: 1.3px;
  height: 1.3px;
  background: var(--preto);
  will-change: transform, opacity;
}

.light-header {
  margin-bottom: var(--s-56);
}
.light-header .subtitle {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #888;
  margin-bottom: var(--s-16);
}
.light-header h1 {
  font-size: 56px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.02;
  max-width: 820px;
}
.light-header h1 em {
  font-style: normal;
  color: #888;
  font-weight: 300;
}

.light-body { padding-bottom: var(--s-80); }

.light-section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--s-24);
}
.light-section-head h2 {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #0A0A0A;
}
.light-section-head .meta {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #888;
}

/* Métricas tipográficas — linhas finas, sem fundos */
.light-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid #E5E5E5;
  border-bottom: 1px solid #E5E5E5;
  margin-bottom: var(--s-56);
}
.light-metric {
  padding: var(--s-40) var(--s-32) var(--s-40) 0;
  border-right: 1px solid #E5E5E5;
}
.light-metric:last-child { border-right: none; padding-right: 0; }
.light-metric .label {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #888;
  margin-bottom: var(--s-16);
}
.light-metric .big {
  font-size: 64px;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.95;
  color: #0A0A0A;
}
.light-metric .big small {
  font-family: var(--ff-mono);
  font-size: 14px;
  font-weight: 500;
  color: #888;
  letter-spacing: 0;
  margin-left: 6px;
  vertical-align: top;
  position: relative;
  top: 10px;
}
.light-metric .sub {
  margin-top: var(--s-16);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #3A3A3A;
}
.light-metric .sub strong { color: #0A0A0A; font-weight: 500; }

/* Tabela de leads — linhas finíssimas */
.light-leads {
  border-top: 1px solid #E5E5E5;
  margin-bottom: var(--s-56);
}
.light-leads-row {
  display: grid;
  grid-template-columns: 40px 1fr 120px 2fr 80px;
  gap: var(--s-24);
  align-items: center;
  padding: var(--s-24) 0;
  border-bottom: 1px solid #E5E5E5;
}
.light-leads-row.head {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #888;
  padding: var(--s-16) 0;
}
.light-leads-row .rank {
  font-family: var(--ff-mono);
  font-size: 12px;
  color: #888;
}
.light-leads-row .name {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #0A0A0A;
}
.light-leads-row .count {
  font-family: var(--ff-mono);
  font-size: 16px;
  font-weight: 500;
  color: #0A0A0A;
}
.light-leads-row .bar {
  height: 2px;
  background: #E5E5E5;
  position: relative;
}
.light-leads-row .bar span {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: #0A0A0A;
}
.light-leads-row .pct {
  text-align: right;
  font-family: var(--ff-mono);
  font-size: 12px;
  color: #3A3A3A;
}

/* Linhas de engajamento */
.light-engaj {
  border-top: 1px solid #E5E5E5;
}
.light-engaj-row {
  display: grid;
  grid-template-columns: 160px 1fr 200px 120px;
  gap: var(--s-24);
  align-items: center;
  padding: var(--s-32) 0;
  border-bottom: 1px solid #E5E5E5;
}
.light-engaj-row .platform {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #0A0A0A;
  font-weight: 500;
}
.light-engaj-row .metric {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0A0A0A;
}
.light-engaj-row .metric small {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  color: #888;
  margin-left: 6px;
  letter-spacing: 0;
}
.light-engaj-row .spark {
  height: 28px;
  display: flex;
  align-items: flex-end;
  gap: 3px;
}
.light-engaj-row .spark span {
  flex: 1;
  background: #E5E5E5;
}
.light-engaj-row .spark span.on { background: #0A0A0A; }
.light-engaj-row .trend {
  text-align: right;
  font-family: var(--ff-mono);
  font-size: 13px;
  font-weight: 500;
  color: #0A0A0A;
}

/* Grid genérico de cards light (linhas finas, sem preenchimento) */
.light-grid {
  display: grid;
  gap: 0;
  border: 1px solid #E5E5E5;
  margin-bottom: var(--s-56);
  background: #FAFAFA;
}
.light-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.light-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.light-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

.light-cell {
  padding: var(--s-32);
  border-right: 1px solid #E5E5E5;
  border-bottom: 1px solid #E5E5E5;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
  display: flex;
  flex-direction: column;
  gap: var(--s-16);
  min-height: 180px;
  width: 100%;
}
.light-cell:hover { background: #FFFFFF; }
.light-grid.cols-2 .light-cell:nth-child(2n) { border-right: none; }
.light-grid.cols-3 .light-cell:nth-child(3n) { border-right: none; }
.light-grid.cols-4 .light-cell:nth-child(4n) { border-right: none; }

.light-cell .label {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #888;
}
.light-cell .title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: #0A0A0A;
}
.light-cell .sub {
  font-size: 13px;
  color: #3A3A3A;
  line-height: 1.4;
}
.light-cell .foot {
  margin-top: auto;
  padding-top: var(--s-16);
  border-top: 1px solid #E5E5E5;
  display: flex;
  justify-content: space-between;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #888;
}
.light-cell .foot strong { color: #0A0A0A; font-weight: 500; }

/* Timeline horizontal (light) — usado em Pipeline e dashboards de fase */
.light-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: var(--s-40);
  padding-top: var(--s-16);
}
.light-timeline::before {
  content: '';
  position: absolute;
  left: 7.14%;
  right: 7.14%;
  top: 38px;
  height: 1px;
  background: #E5E5E5;
}
.light-timeline .tstep {
  text-align: center;
  position: relative;
  z-index: 1;
}
.light-timeline .tstep .node {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #FAFAFA;
  border: 1px solid #CCC;
  margin: 6px auto 0;
  position: relative;
  z-index: 2;
}
.light-timeline .tstep.done .node { background: #0A0A0A; border-color: #0A0A0A; }
.light-timeline .tstep.active .node {
  background: #0A0A0A;
  border-color: #0A0A0A;
  width: 14px; height: 14px;
  margin-top: 5px;
  box-shadow: 0 0 0 4px #FAFAFA, 0 0 0 5px #0A0A0A;
}
.light-timeline .tstep .num {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: #888;
  display: block;
  margin-bottom: var(--s-8);
}
.light-timeline .tstep .name {
  font-size: 12px;
  color: #888;
  line-height: 1.3;
  margin-top: var(--s-16);
  font-weight: 500;
}
.light-timeline .tstep.done .name { color: #3A3A3A; }
.light-timeline .tstep.active .name { color: #0A0A0A; font-weight: 600; }

/* Lista genérica (agenda, publicações, etc) */
.light-list {
  border-top: 1px solid #E5E5E5;
  margin-bottom: var(--s-56);
}
.light-list-row {
  display: grid;
  gap: var(--s-24);
  align-items: center;
  padding: var(--s-24) 0;
  border-bottom: 1px solid #E5E5E5;
  transition: background 0.25s cubic-bezier(0.25, 1, 0.5, 1), padding-left 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}
.light-list-row:not(.head):hover {
  padding-left: 12px;
}
.light-list-row.head {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #888;
  padding: var(--s-16) 0;
}

.light-list-row .primary {
  font-size: 15px;
  font-weight: 500;
  color: #0A0A0A;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.light-list-row .secondary {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: #888;
  margin-top: 4px;
}
.light-list-row .when {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: #0A0A0A;
  letter-spacing: 0.04em;
}
.light-list-row .when small {
  display: block;
  color: #888;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 2px;
}
.light-list-row .tag {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0A0A0A;
  padding: 4px 10px;
  border: 1px solid #E5E5E5;
  width: fit-content;
}
.light-list-row .money {
  font-family: var(--ff-mono);
  font-size: 14px;
  font-weight: 500;
  color: #0A0A0A;
  text-align: right;
}

/* Grids de lista específicas */
.light-list.cols-pipeline .light-list-row { grid-template-columns: 50px 2fr 1.4fr 1fr 120px; }
.light-list.cols-clientes .light-list-row { grid-template-columns: 50px 1.4fr 1.6fr 140px 36px; }
.light-list-row .actions { display: flex; justify-content: flex-end; }
.light-list-row .row-del {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent;
  border-radius: 2px; cursor: pointer;
  color: #888;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  opacity: 0;
}
.light-list-row:hover .row-del { opacity: 1; }
.light-list-row .row-del:hover {
  color: var(--acc-despesa);
  border-color: var(--acc-despesa);
  background: #FBEBE7;
}
.light-list-row .row-del svg { display: block; }
.light-list.cols-agenda   .light-list-row { grid-template-columns: 120px 1fr 160px 120px; }
.light-list.cols-publi    .light-list-row { grid-template-columns: 120px 1fr 160px 140px; }
.light-list.cols-financ   .light-list-row { grid-template-columns: 1.6fr 1fr 120px 120px 100px; }

/* Barras de progresso finas */
.light-progress {
  width: 100%;
  height: 3px;
  background: #E5E5E5;
  position: relative;
}
.light-progress span {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: #0A0A0A;
}

/* ============================================================
   MODAL — Slide-over de Cliente (tema light)
============================================================ */
#clientModal {
  position: fixed;
  inset: 0;
  z-index: 100;
  visibility: hidden;
  pointer-events: none;
}
#clientModal.visible {
  visibility: visible;
  pointer-events: auto;
}

.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.4s ease;
}
#clientModal.visible .modal-overlay { opacity: 1; }

.modal-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(680px, 100%);
  background: #FAFAFA;
  color: #0A0A0A;
  display: flex;
  flex-direction: column;
  transform: translateX(40px);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease;
  border-left: 1px solid #E5E5E5;
  overflow-y: auto;
}
#clientModal.visible .modal-panel { transform: translateX(0); opacity: 1; }

.modal-head {
  padding: var(--s-40) var(--s-40) var(--s-32);
  border-bottom: 1px solid #E5E5E5;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-24);
  position: sticky;
  top: 0;
  background: #FAFAFA;
  z-index: 2;
}
.modal-head .label {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #888;
  margin-bottom: var(--s-8);
}
.modal-head h2 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #0A0A0A;
}
.modal-head .project {
  margin-top: 6px;
  font-size: 15px;
  font-weight: 300;
  color: #888;
  letter-spacing: -0.005em;
}
.modal-head .meta {
  display: flex;
  gap: var(--s-24);
  margin-top: var(--s-24);
  flex-wrap: wrap;
}

/* Régua de progresso global do projeto */
.modal-progress {
  padding: var(--s-24) var(--s-40) var(--s-24);
  background: #FAFAFA;
  border-bottom: 1px solid #E5E5E5;
  position: sticky;
  top: 0;
  z-index: 3;
}
.modal-progress.stacked {
  /* Fica grudada abaixo do head sticky */
  position: sticky;
}
.modal-progress-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--s-8);
}
.modal-progress-top .label {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #888;
}
.modal-progress-top .value {
  font-family: var(--ff-mono);
  font-size: 18px;
  font-weight: 600;
  color: #0A0A0A;
  letter-spacing: -0.02em;
}
.modal-progress-top .value small {
  font-size: 11px;
  color: #888;
  font-weight: 400;
  margin-left: 4px;
}
.modal-progress-track {
  height: 4px;
  background: #E5E5E5;
  position: relative;
  overflow: hidden;
}
.modal-progress-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: #0A0A0A;
  width: 0%;
  transition: width 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.modal-progress-phases {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  margin-top: var(--s-8);
  gap: 2px;
}
.modal-progress-phases .seg {
  font-family: var(--ff-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  color: #CCC;
  text-align: center;
  padding: 4px 0;
  transition: color 0.3s ease;
}
.modal-progress-phases .seg.partial { color: #888; }
.modal-progress-phases .seg.done    { color: #0A0A0A; font-weight: 600; }
.modal-head .meta .item {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: #3A3A3A;
}
.modal-head .meta .item small {
  display: block;
  font-size: 9px;
  color: #888;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 3px;
}

.modal-close {
  width: 36px;
  height: 36px;
  border: 1px solid #E5E5E5;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  color: #0A0A0A;
}
.modal-close:hover { background: #0A0A0A; border-color: #0A0A0A; color: #FAFAFA; }
.modal-close svg {
  width: 14px; height: 14px;
  stroke: currentColor;
  fill: none; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}

.modal-body {
  padding: var(--s-32) var(--s-40) var(--s-56);
  flex: 1;
}

.modal-section-title {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #888;
  margin-bottom: var(--s-24);
}

/* Accordion — fases do método */
.phase {
  border-bottom: 1px solid #E5E5E5;
}
.phase:first-child { border-top: 1px solid #E5E5E5; }
.phase-head {
  display: grid;
  grid-template-columns: 40px 1fr 120px 24px;
  align-items: center;
  gap: var(--s-16);
  padding: var(--s-24) 0;
  background: none;
  border: none;
  width: 100%;
  cursor: pointer;
  text-align: left;
  color: #0A0A0A;
  transition: opacity 0.15s;
}
.phase-head:hover { opacity: 0.7; }
.phase-head .num {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: #888;
}
.phase-head .title {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #0A0A0A;
}
.phase-head .progress {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #888;
  text-align: right;
}
.phase-head .chevron {
  width: 12px; height: 12px;
  stroke: #0A0A0A;
  fill: none; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.3s ease;
}
.phase.open .phase-head .chevron { transform: rotate(90deg); }

.phase-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.phase.open .phase-body { grid-template-rows: 1fr; }
.phase-body > div {
  overflow: hidden;
  min-height: 0;
}
.phase-list {
  padding: 0 0 var(--s-24) 40px;
  display: flex;
  flex-direction: column;
  gap: var(--s-16);
}
.phase-sublabel {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #888;
  margin-top: var(--s-16);
  margin-bottom: 4px;
}
.phase-sublabel:first-child { margin-top: 0; }

/* Checkbox custom */
.chk {
  display: flex;
  align-items: center;
  gap: var(--s-16);
  cursor: pointer;
  user-select: none;
  padding: 6px 0;
}
.chk input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.chk .box {
  width: 16px;
  height: 16px;
  border: 1px solid #CCC;
  background: #FAFAFA;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.chk .box svg {
  width: 10px; height: 10px;
  stroke: #FAFAFA;
  fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.chk input:checked + .box {
  background: #0A0A0A;
  border-color: #0A0A0A;
}
.chk input:checked + .box svg { opacity: 1; }
.chk .label-txt {
  font-size: 13px;
  color: #0A0A0A;
  letter-spacing: -0.005em;
  transition: color 0.15s;
}
.chk input:checked ~ .label-txt {
  color: #888;
  text-decoration: line-through;
  text-decoration-color: #CCC;
}
.chk:hover .box { border-color: #0A0A0A; }

/* Linhas de cliente clicáveis */
.light-list.cols-clientes .light-list-row:not(.head) {
  cursor: pointer;
  transition: background 0.15s, padding 0.2s;
  padding-left: 0;
  padding-right: 0;
}
.light-list.cols-clientes .light-list-row:not(.head):hover {
  background: #FFFFFF;
  padding-left: var(--s-16);
  padding-right: var(--s-16);
}

/* Dive cover — cobre a tela em preto e animamos para branco */
#diveCover {
  position: fixed;
  pointer-events: none;
  z-index: 90;
  background: #0A0A0A;
  border: 1px solid var(--asfalto);
  visibility: hidden;
  will-change: top, left, width, height, background-color, border-color, opacity;
}
#diveCover.active { visibility: visible; }

.subhub-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--s-80);
}
.subhub-brand {
  display: inline-flex;
  flex-direction: column;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: opacity 0.3s ease;
}
.subhub-brand:hover { opacity: 0.75; }
.subhub-brand .brand-top {
  display: flex;
  align-items: center;
  gap: var(--s-8);
}
.subhub-brand .back-arrow {
  width: 14px; height: 14px;
  stroke: var(--cinza-medio);
  fill: none; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.3s ease, stroke 0.3s ease;
}
.subhub-brand:hover .back-arrow { transform: translateX(-3px); stroke: var(--branco); }
.subhub-brand .name {
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--branco);
}
.subhub-brand .back-label {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cinza-medio);
  margin-top: 6px;
}

.subhub-header {
  max-width: 1040px;
  margin: 0 auto var(--s-80);
  width: 100%;
  text-align: center;
}
.subhub-greeting {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cinza-medio);
  margin-bottom: var(--s-32);
}
.subhub-title {
  font-family: var(--ff-sans);
  font-size: clamp(40px, 5.2vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: 960px;
  margin: 0 auto;
}
.subhub-title .strong {
  font-weight: 700;
  color: var(--branco);
  display: block;
}
.subhub-title .soft {
  font-weight: 300;
  color: var(--cinza-medio);
  display: block;
  margin-top: var(--s-8);
}

/* Grid de 3 pilares — reaproveita a estética do Hub */
.subhub-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  border: 1px solid var(--asfalto);
  background: var(--preto);
  position: relative;
}

/* Spotlight: mesma curva bezier, mesmo estado */
.subhub.spotlight .subhub-top,
.subhub.spotlight .subhub-header { opacity: 0.3; }
.subhub-pillars.spotlight .pillar:not(:hover) { opacity: 0.3; }

/* Herda .pillar — só ajusta o nth-child pra 3 colunas */
.subhub-pillars .pillar:nth-child(3n) { border-right: none; }

/* Variante: grid 2 colunas (sub-hub Projetos) */
.subhub-pillars.cols-2 { grid-template-columns: repeat(2, 1fr); }
.subhub-pillars.cols-2 .pillar { border-right: 1px solid var(--asfalto); border-bottom: 1px solid var(--asfalto); }
.subhub-pillars.cols-2 .pillar:nth-child(3n) { border-right: 1px solid var(--asfalto); } /* anula regra genérica acima */
.subhub-pillars.cols-2 .pillar:nth-child(2n) { border-right: none; }                     /* última coluna sem borda direita */
.subhub-pillars.cols-2 .pillar:nth-last-child(-n+2) { border-bottom: none; }             /* última linha sem borda inferior */
/* Mantém 2 colunas em iPad/tablet (sobrescreve regra global de 1col em ≤1100) */
@media (max-width: 1100px){
  .subhub-pillars.cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
  .subhub-pillars.cols-2 .pillar { border-right: 1px solid var(--asfalto); border-bottom: 1px solid var(--asfalto); }
  .subhub-pillars.cols-2 .pillar:nth-child(2n) { border-right: none; }
  .subhub-pillars.cols-2 .pillar:nth-last-child(-n+2) { border-bottom: none; }
}
/* Em telas muito estreitas, colapsa pra coluna única */
@media (max-width: 640px){
  .subhub-pillars.cols-2 { grid-template-columns: 1fr !important; }
  .subhub-pillars.cols-2 .pillar { border-right: none; border-bottom: 1px solid var(--asfalto); }
  .subhub-pillars.cols-2 .pillar:last-child { border-bottom: none; }
}

/* Variante: grid 3 colunas (sub-hubs Marketing e Financeiro) — segura 3 cols em iPad também */
.subhub-pillars.cols-3 { grid-template-columns: repeat(3, 1fr); }
.subhub-pillars.cols-3 .pillar { border-right: 1px solid var(--asfalto); border-bottom: none; }
.subhub-pillars.cols-3 .pillar:nth-child(3n) { border-right: none; }
/* iPad/tablet: mantém 3 colunas (sobrescreve regra global de 1col em ≤1100) */
@media (max-width: 1100px){
  .subhub-pillars.cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
  .subhub-pillars.cols-3 .pillar { border-right: 1px solid var(--asfalto); border-bottom: none; }
  .subhub-pillars.cols-3 .pillar:nth-child(3n) { border-right: none; }
}
/* Em telas estreitas (≤800), cai pra coluna única empilhada */
@media (max-width: 800px){
  .subhub-pillars.cols-3 { grid-template-columns: 1fr !important; }
  .subhub-pillars.cols-3 .pillar { border-right: none; border-bottom: 1px solid var(--asfalto); }
  .subhub-pillars.cols-3 .pillar:last-child { border-bottom: none; }
}

/* Layout 4 colunas em linha única (usado pelo sub-hub Gestão) */
.subhub-pillars.cols-4 .pillar {
  border-right: 1px solid var(--asfalto);
  border-bottom: none;
  padding: var(--s-40) var(--s-24);   /* menos lateral pra caber 4 em linha */
  min-height: 300px;
  gap: var(--s-32);
}
.subhub-pillars.cols-4 .pillar:nth-child(3n) { border-right: 1px solid var(--asfalto); } /* anula regra genérica acima */
.subhub-pillars.cols-4 .pillar:last-child { border-right: none; }
/* Em telas estreitas, volta a 2 colunas pra não espremer demais */
@media (max-width: 1100px){
  .subhub-pillars.cols-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .subhub-pillars.cols-4 .pillar { border-bottom: 1px solid var(--asfalto); }
  .subhub-pillars.cols-4 .pillar:nth-child(2n) { border-right: none; }
  .subhub-pillars.cols-4 .pillar:nth-last-child(-n+2) { border-bottom: none; }
}

/* Layout 5 colunas em linha única (sub-hub Gestão com Dados) */
.subhub-pillars.cols-5 { grid-template-columns: repeat(5, 1fr); }
.subhub-pillars.cols-5 .pillar {
  border-right: 1px solid var(--asfalto);
  border-bottom: none;
  padding: var(--s-40) var(--s-16);   /* aperta mais a horizontal pra caber 5 */
  min-height: 300px;
  gap: var(--s-32);
}
.subhub-pillars.cols-5 .pillar:nth-child(3n) { border-right: 1px solid var(--asfalto); } /* anula regra genérica acima (3-cols) */
.subhub-pillars.cols-5 .pillar:last-child { border-right: none; }

/* iPad / telas médias: 3+2 balanceado via grid de 6 colunas com spans (evita célula vazia no canto) */
@media (max-width: 1280px){
  .subhub-pillars.cols-5 { grid-template-columns: repeat(6, 1fr) !important; }
  .subhub-pillars.cols-5 .pillar:nth-child(-n+3) { grid-column: span 2; } /* linha 1: 3 cards */
  .subhub-pillars.cols-5 .pillar:nth-child(n+4)  { grid-column: span 3; } /* linha 2: 2 cards centralizados */
  .subhub-pillars.cols-5 .pillar { border-right: 1px solid var(--asfalto); border-bottom: 1px solid var(--asfalto); }
  .subhub-pillars.cols-5 .pillar:nth-child(3),
  .subhub-pillars.cols-5 .pillar:nth-child(5) { border-right: none; }    /* fim de linha */
  .subhub-pillars.cols-5 .pillar:nth-child(n+4) { border-bottom: none; } /* última linha */
}

/* Tablet retrato / mobile: 2 colunas; último pilar ocupa as 2 colunas (centralizado) */
@media (max-width: 800px){
  .subhub-pillars.cols-5 { grid-template-columns: repeat(2, 1fr) !important; }
  .subhub-pillars.cols-5 .pillar { grid-column: auto; border-right: 1px solid var(--asfalto); border-bottom: 1px solid var(--asfalto); }
  .subhub-pillars.cols-5 .pillar:nth-child(2n) { border-right: none; }
  .subhub-pillars.cols-5 .pillar:last-child { grid-column: span 2; border-right: none; border-bottom: none; }
}

/* ============================================================
   DIVE-IN — transição imersiva Hub → Sub-Hub
============================================================ */
#diveLayer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 55; /* acima do hub (50) e sub-hub (40) */
  visibility: hidden;
}
#diveLayer.active { visibility: visible; }

#diveBox {
  position: absolute;
  background: var(--preto);
  border: 1px solid var(--asfalto);
  box-shadow:
    0 40px 80px -16px rgba(0,0,0,0.9),
    0 16px 32px -8px rgba(0,0,0,0.7);
  will-change: top, left, width, height, opacity;
}


.hub-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--s-80);
}
.hub-brand {
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--branco);
}
.hub-brand small {
  display: block;
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cinza-medio);
  margin-top: 2px;
  font-weight: 400;
}
.hub-user {
  display: flex;
  align-items: center;
  gap: var(--s-16);
  text-align: right;
}
.hub-user .name {
  font-size: 13px;
  font-weight: 500;
  color: var(--branco);
}
.hub-user .role {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cinza-medio);
  margin-top: 2px;
}
.hub-user .avatar-mini {
  width: 40px; height: 40px;
  position: relative;
  border-radius: 50%;
  overflow: hidden;
}
.hub-user .avatar-mini.avatar-btn {
  border: 1px solid rgba(255,255,255,0.15);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.2s, transform 0.2s;
}
.hub-user .avatar-mini.avatar-btn:hover {
  border-color: rgba(255,255,255,0.5);
  transform: scale(1.05);
}
.hub-user .avatar-mini .avatarGrid {
  position: absolute; inset: 0;
  display: grid;
  gap: 0;
  place-items: center;
  border-radius: 50%;
}
/* Dots com tamanho fixo (como no splash) — garante densidade visual
   legível no grid 31×31 dentro de 40×40px */
.hub-user .avatar-mini .avatarGrid .dot {
  width: 1.3px;
  height: 1.3px;
  background: var(--branco);
  will-change: transform, opacity;
}
/* Foto do Google substituindo o grid de pontos quando o usuário está logado.
   Se não houver foto, o grid halftone é mantido. */
.avatar-mini .avatar-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
/* Popover do perfil — único, fixed-positioned. JS calcula left/top a partir do trigger. */
.profile-menu {
  position: fixed;
  top: 0;
  left: 0;
  min-width: 180px;
  background: rgba(20,20,20,0.96);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 300;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
.profile-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.profile-menu-item {
  background: transparent;
  border: 0;
  color: var(--branco);
  font-family: var(--ff-sans);
  font-size: 13px;
  font-weight: 400;
  padding: 10px 14px;
  text-align: left;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.15s;
}
.profile-menu-item:hover {
  background: rgba(255,255,255,0.08);
}
.profile-menu-item.danger {
  color: #ff8a8a;
}
.profile-menu-item.danger:hover {
  background: rgba(255,80,80,0.12);
}

.hub-header {
  max-width: 1040px;
  margin: 0 auto var(--s-80);
  width: 100%;
  text-align: center;
}
.hub-greeting {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cinza-medio);
  margin-bottom: var(--s-32);
}
.hub-title {
  font-family: var(--ff-sans);
  font-size: clamp(40px, 5.6vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: 960px;
  margin: 0 auto;
}
.hub-title .strong {
  font-weight: 700;
  color: var(--branco);
  display: block;
}
.hub-title .soft {
  font-weight: 300;
  color: var(--cinza-medio);
  display: block;
  margin-top: var(--s-8);
}

/* Grid 4 pilares */
.hub-pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  border: 1px solid var(--asfalto);
  background: var(--preto);
  position: relative;
}

/* Spotlight — bezier sofisticada para toda a interação */
.pillar,
.hub-top,
.hub-header,
.pillar-icon,
.pillar-name,
.pillar-subs {
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.pillar {
  background: var(--preto);
  padding: var(--s-56) var(--s-32);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--s-40);
  min-height: 340px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  text-align: left;
  color: var(--branco);
  border: 0;
  border-right: 1px solid var(--asfalto);
  font-family: inherit;
}
.pillar:last-child { border-right: none; }
.pillar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 120%, rgba(255,255,255,0.08), transparent 60%);
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  pointer-events: none;
}

/* SPOTLIGHT STATE ———————————————————————————————— */
/* Quando o grid tem `.spotlight`, TUDO esmaece */
#hub.spotlight .hub-top,
#hub.spotlight .hub-header {
  opacity: 0.3;
}
.hub-pillars.spotlight .pillar:not(:hover) {
  opacity: 0.3;
}

/* O pilar em foco: zoom sutil + flutua + sombra difusa + conteúdo realçado */
.pillar:hover {
  background: #141414;
  transform: scale(1.03) translateY(-4px);
  z-index: 2;
  box-shadow:
    0 24px 60px -12px rgba(0, 0, 0, 0.9),
    0 8px 24px -8px rgba(0, 0, 0, 0.7);
}
.pillar:hover::before { opacity: 1; }
.pillar:hover .pillar-icon { transform: translateY(-4px); }

.pillar-icon {
  width: 56px; height: 56px;
  stroke: var(--branco);
  fill: none;
  stroke-width: 1;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.5s ease;
}

.pillar-name {
  font-family: var(--ff-sans);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--branco);
  margin-bottom: var(--s-16);
}
.pillar-subs {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cinza-medio);
  line-height: 1.6;
}

/* ============================================================
   HOME / DASHBOARD — minimalista
============================================================ */
.home-hero {
  margin-bottom: var(--s-56);
  padding-bottom: var(--s-32);
  border-bottom: 1px solid var(--cinza-borda);
}
.home-hero .greeting {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cinza-medio);
  margin-bottom: var(--s-16);
}
.home-hero h1 {
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  max-width: 720px;
}
.home-hero h1 em {
  font-style: normal;
  color: var(--cinza-medio);
  font-weight: 400;
}

.home-layout {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--s-56);
}

.home-section {
  margin-bottom: var(--s-56);
}
.home-section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--s-24);
}
.home-section-head h2 {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.home-section-head a {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cinza-medio);
  transition: color 0.15s;
}
.home-section-head a:hover { color: var(--preto); }

/* Macro metrics (4 cards) */
.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--cinza-borda);
  background: var(--branco-puro);
}
.metric {
  padding: var(--s-32) var(--s-24);
  border-right: 1px solid var(--cinza-borda);
  transition: background 0.15s;
  cursor: pointer;
}
.metric:last-child { border-right: none; }
.metric:hover { background: var(--branco); }
.metric .label {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cinza-medio);
  margin-bottom: var(--s-16);
}
.metric .value {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}
.metric .delta {
  margin-top: var(--s-8);
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--asfalto);
}

/* Urgencias list (typographic) */
.urgencias {
  border: 1px solid var(--cinza-borda);
  background: var(--branco-puro);
}
.urgencia {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: var(--s-24);
  align-items: center;
  padding: var(--s-24);
  border-bottom: 1px solid var(--cinza-borda);
  transition: background 0.15s;
  cursor: pointer;
}
.urgencia:last-child { border-bottom: none; }
.urgencia:hover { background: var(--branco); }
.urgencia .when {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--preto);
}
.urgencia .when small {
  display: block;
  color: var(--cinza-medio);
  font-size: 9px;
  letter-spacing: 0.08em;
  margin-top: 2px;
  font-weight: 400;
}
.urgencia .task .title {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.urgencia .task .meta {
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--cinza-medio);
  letter-spacing: 0.04em;
}
.urgencia .stage {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cinza-medio);
  padding: 4px 10px;
  border: 1px solid var(--cinza-borda);
}

/* Atalhos (right column) */
.atalhos {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
}
.atalho {
  display: flex;
  align-items: center;
  gap: var(--s-16);
  padding: var(--s-24);
  border: 1px solid var(--cinza-borda);
  background: var(--branco-puro);
  text-align: left;
  width: 100%;
  transition: border-color 0.15s, background 0.15s;
}
.atalho:hover { border-color: var(--preto); }
.atalho .ico {
  width: 40px; height: 40px;
  border: 1px solid var(--cinza-borda);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.atalho .ico svg {
  width: 16px; height: 16px;
  stroke: var(--preto);
  fill: none; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.atalho .txt .t {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.atalho .txt .d {
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--cinza-medio);
  letter-spacing: 0.04em;
}
.atalho.primary { background: var(--preto); border-color: var(--preto); }
.atalho.primary .ico { border-color: var(--asfalto); }
.atalho.primary .ico svg { stroke: var(--branco); }
.atalho.primary .txt .t { color: var(--branco); }
.atalho.primary .txt .d { color: var(--cinza-medio); }
.atalho.primary:hover { background: var(--asfalto); }

/* Manifesto quote on home */
.home-quote {
  margin-top: var(--s-40);
  padding: var(--s-32);
  border-left: 2px solid var(--preto);
  font-family: var(--ff-sans);
  font-size: 14px;
  font-style: italic;
  color: var(--asfalto);
  line-height: 1.5;
}

/* ---------- Detalhamento (expandable) ---------- */
.detail-section { margin-top: var(--s-56); }
.detail-section h2 {
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-bottom: var(--s-24);
}

.pipeline {
  border: 1px solid var(--cinza-borda);
  background: var(--branco-puro);
}
.pipeline-row {
  display: grid;
  grid-template-columns: 48px 1fr 2fr 120px 120px;
  align-items: center;
  gap: var(--s-16);
  padding: var(--s-16);
  border-bottom: 1px solid var(--cinza-borda);
  font-size: 12px;
}
.pipeline-row:last-child { border-bottom: none; }
.pipeline-row.head {
  background: var(--branco);
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cinza-medio);
}
.pipeline-row .idx {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--cinza-medio);
}
.pipeline-row .step-name { font-weight: 500; }
.pipeline-row .substeps-inline {
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--cinza-medio);
  letter-spacing: 0.02em;
}
.pipeline-row .status {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--asfalto);
}

/* ---------- Placeholder pages ---------- */
.placeholder {
  padding: var(--s-80);
  text-align: center;
  border: 1px dashed var(--cinza-borda);
  background: var(--branco-puro);
}
.placeholder h3 {
  font-size: 20px;
  font-weight: 400;
  margin-bottom: var(--s-16);
  letter-spacing: -0.01em;
}
.placeholder p {
  color: var(--cinza-medio);
  max-width: 480px;
  margin: 0 auto;
  font-size: 13px;
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-16);
}
.module-card {
  border: 1px solid var(--cinza-borda);
  padding: var(--s-24);
  background: var(--branco-puro);
  transition: border-color 0.15s;
  cursor: pointer;
}
.module-card:hover { border-color: var(--preto); }
.module-card .num {
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--cinza-medio);
  letter-spacing: 0.1em;
  margin-bottom: var(--s-16);
}
.module-card h4 {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: var(--s-8);
  letter-spacing: -0.01em;
}
.module-card p {
  font-size: 12px;
  color: var(--cinza-medio);
  line-height: 1.5;
}

/* ============================================================
   FINANCEIRO
============================================================ */
.fin-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--cinza-borda);
  background: var(--branco-puro);
  margin-bottom: var(--s-40);
}
.fin-card {
  padding: var(--s-32) var(--s-24);
  border-right: 1px solid var(--cinza-borda);
  position: relative;
}
.fin-card:last-child { border-right: none; }
.fin-card .label {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cinza-medio);
  margin-bottom: var(--s-16);
}
.fin-card .currency {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--cinza-medio);
  margin-right: 4px;
  vertical-align: top;
  position: relative;
  top: 8px;
}
.fin-card .value {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  display: inline-block;
}
.fin-card .delta {
  margin-top: var(--s-16);
  display: flex;
  align-items: center;
  gap: var(--s-8);
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--cinza-medio);
  letter-spacing: 0.04em;
}
.fin-card .delta .trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--preto);
  font-weight: 500;
}
.fin-card .delta .trend.down { color: var(--asfalto); }
.fin-card .mini-bar {
  margin-top: var(--s-16);
  height: 3px;
  background: var(--cinza-borda);
  position: relative;
}
.fin-card .mini-bar span {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: var(--preto);
}

.fin-section {
  margin-bottom: var(--s-56);
}
.fin-section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--s-16);
}
.fin-section-head h2 {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.fin-section-head .tools {
  display: flex;
  gap: var(--s-8);
  align-items: center;
}
.fin-section-head .tools a,
.fin-section-head .tools button {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cinza-medio);
  padding: 6px 10px;
  border: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.fin-section-head .tools a:hover,
.fin-section-head .tools button:hover { color: var(--preto); border-color: var(--cinza-borda); }
.fin-section-head .tools .active {
  color: var(--preto);
  border-color: var(--preto);
}

/* Tabela financeira */
.fin-table {
  border: 1px solid var(--cinza-borda);
  background: var(--branco-puro);
  overflow: hidden;
}
.fin-table-head,
.fin-row {
  display: grid;
  gap: var(--s-16);
  align-items: center;
  padding: var(--s-16);
  border-bottom: 1px solid var(--cinza-borda);
}
.fin-row:last-child { border-bottom: none; }
.fin-table-head {
  background: var(--branco);
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cinza-medio);
}

.receber .fin-table-head,
.receber .fin-row {
  grid-template-columns: 2fr 1.4fr 1fr 1fr 100px 110px;
}
.pagar .fin-table-head,
.pagar .fin-row {
  grid-template-columns: 140px 2fr 1fr 1fr 100px;
}

.fin-row { transition: background 0.15s; }
.fin-row:hover { background: var(--branco); }

.fin-row .primary {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.fin-row .secondary {
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--cinza-medio);
  margin-top: 2px;
  letter-spacing: 0.02em;
}
.fin-row .money {
  font-family: var(--ff-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--preto);
}
.fin-row .date {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--asfalto);
}
.fin-row .date small {
  display: block;
  font-size: 9px;
  color: var(--cinza-medio);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 2px;
}
.fin-row .cat {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cinza-medio);
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--cinza-borda);
  color: var(--asfalto);
  background: var(--branco-puro);
  width: fit-content;
}
.badge::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--cinza-medio);
}
.badge.pago { color: var(--preto); border-color: var(--preto); }
.badge.pago::before { background: var(--preto); }
.badge.pendente { color: var(--asfalto); }
.badge.pendente::before { background: var(--cinza-medio); }
.badge.atrasado {
  color: var(--branco);
  background: var(--preto);
  border-color: var(--preto);
}
.badge.atrasado::before { background: var(--branco); }
.badge.emitida { color: var(--preto); border-color: var(--cinza-borda); }
.badge.emitida::before { background: var(--preto); }
.badge.nf-pendente { color: var(--cinza-medio); border-style: dashed; }
.badge.recorrente {
  border-color: var(--cinza-borda);
  color: var(--asfalto);
}
.badge.recorrente::before { background: var(--cinza-medio); }

/* Totais */
.fin-totals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--cinza-borda);
  border-top: none;
  background: var(--branco);
}
.fin-totals .t {
  padding: var(--s-16) var(--s-24);
  border-right: 1px solid var(--cinza-borda);
}
.fin-totals .t:last-child { border-right: none; }
.fin-totals .t .l {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cinza-medio);
  margin-bottom: 4px;
}
.fin-totals .t .v {
  font-family: var(--ff-mono);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--preto);
}

/* Rentabilidade */
.rentab {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-16);
}
.rentab-item {
  border: 1px solid var(--cinza-borda);
  background: var(--branco-puro);
  padding: var(--s-24);
}
.rentab-item .head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-16);
  margin-bottom: var(--s-16);
}
.rentab-item .title {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.rentab-item .client {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cinza-medio);
  margin-bottom: 4px;
}
.rentab-item .margin {
  font-family: var(--ff-mono);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--preto);
  text-align: right;
  white-space: nowrap;
}
.rentab-item .margin small {
  display: block;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--cinza-medio);
  margin-top: 2px;
  font-weight: 400;
}

.rentab-bars {
  margin-top: var(--s-24);
}
.rentab-bar {
  margin-bottom: var(--s-16);
}
.rentab-bar:last-child { margin-bottom: 0; }
.rentab-bar .line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--asfalto);
  margin-bottom: 6px;
}
.rentab-bar .line .l { color: var(--cinza-medio); text-transform: uppercase; font-size: 9px; letter-spacing: 0.12em; }
.rentab-bar .track {
  position: relative;
  height: 4px;
  background: var(--cinza-borda);
}
.rentab-bar .fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: var(--preto);
}
.rentab-bar.custo .fill { background: var(--cinza-medio); }
.rentab-bar.lucro .fill { background: var(--preto); }

.rentab-foot {
  margin-top: var(--s-24);
  padding-top: var(--s-16);
  border-top: 1px solid var(--cinza-borda);
  display: flex;
  justify-content: space-between;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--cinza-medio);
}
.rentab-foot .stage {
  color: var(--preto);
  font-weight: 500;
}

/* ============================================================
   MARKETING — Brand Hub, Publicações, Tráfego
============================================================ */

/* Brand Hub */
.brand-hub {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid var(--cinza-borda);
  background: var(--branco-puro);
  margin-bottom: var(--s-56);
}
.brand-asset {
  padding: var(--s-40);
  border-right: 1px solid var(--cinza-borda);
  border-bottom: 1px solid var(--cinza-borda);
  transition: background 0.15s;
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-24);
  min-height: 200px;
  text-align: left;
  width: 100%;
}
.brand-asset:nth-child(2n) { border-right: none; }
.brand-asset:nth-last-child(-n+2) { border-bottom: none; }
.brand-asset:hover { background: var(--branco); }

.brand-asset .asset-label {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cinza-medio);
}
.brand-asset h3 {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.brand-asset p {
  font-size: 13px;
  color: var(--asfalto);
  line-height: 1.5;
  max-width: 420px;
}
.brand-asset .asset-meta {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: var(--s-16);
  border-top: 1px solid var(--cinza-borda);
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cinza-medio);
}
.brand-asset .asset-meta .action {
  color: var(--preto);
  font-weight: 500;
}

.brand-preview {
  display: flex;
  gap: var(--s-8);
}
.brand-swatch {
  width: 36px;
  height: 36px;
  border: 1px solid var(--cinza-borda);
}
.brand-swatch.preto    { background: #0A0A0A; border-color: #0A0A0A; }
.brand-swatch.asfalto  { background: #3A3A3A; border-color: #3A3A3A; }
.brand-swatch.medio    { background: #888888; border-color: #888888; }
.brand-swatch.neve     { background: #FAFAFA; border-color: var(--cinza-borda); }

.brand-type {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.brand-type .t1 {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--preto);
}
.brand-type .t2 {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--asfalto);
}

/* Publicações — agenda semanal */
.publi-head {
  display: grid;
  grid-template-columns: 60px 1fr 140px 180px;
  gap: var(--s-16);
  padding: var(--s-16) var(--s-24);
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-bottom: none;
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cinza-medio);
}
.publi-list {
  border: 1px solid var(--cinza-borda);
  background: var(--branco-puro);
}
.publi-day {
  border-bottom: 1px solid var(--cinza-borda);
}
.publi-day:last-child { border-bottom: none; }
.publi-day-label {
  padding: var(--s-16) var(--s-24);
  background: var(--branco);
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--preto);
  border-bottom: 1px solid var(--cinza-borda);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.publi-day-label small {
  color: var(--cinza-medio);
  font-weight: 400;
}
.publi-item {
  display: grid;
  grid-template-columns: 60px 1fr 140px 180px;
  gap: var(--s-16);
  padding: var(--s-16) var(--s-24);
  align-items: center;
  border-bottom: 1px solid var(--cinza-borda);
  transition: background 0.15s;
  cursor: pointer;
}
.publi-item:last-child { border-bottom: none; }
.publi-item:hover { background: var(--branco); }

.publi-time {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--preto);
}
.publi-title {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.publi-platform {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--asfalto);
}
.publi-platform::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--preto);
}
.publi-platform.instagram::before { background: var(--preto); }
.publi-platform.pinterest::before { background: var(--asfalto); }
.publi-platform.linkedin::before  { background: var(--cinza-medio); }
.publi-platform.site::before      { background: var(--branco-puro); border: 1px solid var(--asfalto); }

.publi-format {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cinza-medio);
  text-align: right;
}

/* Tráfego */
.traf-big {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--cinza-borda);
  background: var(--branco-puro);
  margin-bottom: var(--s-40);
}
.traf-card {
  padding: var(--s-40) var(--s-32);
  border-right: 1px solid var(--cinza-borda);
}
.traf-card:last-child { border-right: none; }
.traf-card .label {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cinza-medio);
  margin-bottom: var(--s-16);
}
.traf-card .big {
  font-size: 56px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.95;
}
.traf-card .big small {
  font-family: var(--ff-mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--cinza-medio);
  letter-spacing: 0;
  margin-left: 6px;
  vertical-align: top;
  position: relative;
  top: 8px;
}
.traf-card .sub {
  margin-top: var(--s-16);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--asfalto);
}
.traf-card .sub strong { color: var(--preto); font-weight: 500; }

/* Origem de leads */
.leads-table {
  border: 1px solid var(--cinza-borda);
  background: var(--branco-puro);
}
.leads-row {
  display: grid;
  grid-template-columns: 40px 1fr 100px 2fr 80px;
  gap: var(--s-16);
  align-items: center;
  padding: var(--s-16) var(--s-24);
  border-bottom: 1px solid var(--cinza-borda);
}
.leads-row:last-child { border-bottom: none; }
.leads-row.head {
  background: var(--branco);
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cinza-medio);
}
.leads-row .rank {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--cinza-medio);
}
.leads-row .name {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.leads-row .count {
  font-family: var(--ff-mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--preto);
}
.leads-row .bar {
  height: 4px;
  background: var(--cinza-borda);
  position: relative;
}
.leads-row .bar span {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: var(--preto);
}
.leads-row .pct {
  text-align: right;
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--asfalto);
}

/* Termômetro de engajamento */
.engaj {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-16);
}
.engaj-item {
  padding: var(--s-32);
  border: 1px solid var(--cinza-borda);
  background: var(--branco-puro);
}
.engaj-item .platform {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--s-24);
}
.engaj-item .platform-name {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cinza-medio);
}
.engaj-item .trend {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--preto);
  font-weight: 500;
}
.engaj-item .trend.down { color: var(--cinza-medio); }
.engaj-item .metric {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}
.engaj-item .metric small {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--cinza-medio);
  margin-left: 4px;
  letter-spacing: 0;
}
.engaj-item .metric-label {
  margin-top: var(--s-8);
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--asfalto);
  text-transform: uppercase;
}
.engaj-spark {
  margin-top: var(--s-16);
  height: 24px;
  display: flex;
  align-items: flex-end;
  gap: 3px;
}
.engaj-spark span {
  flex: 1;
  background: var(--cinza-borda);
}
.engaj-spark span.on { background: var(--preto); }

.section-divider {
  height: 1px;
  background: var(--cinza-borda);
  margin: var(--s-56) 0;
}

/* ============================================================
   PIPELINE — Diretório de Clientes + Foco (drill-down)
============================================================ */

/* Visão 1 — métricas macro em faixa única */
.dir-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--cinza-borda);
  background: var(--branco-puro);
  margin-bottom: var(--s-56);
}
.dir-metric {
  padding: var(--s-32) var(--s-24);
  border-right: 1px solid var(--cinza-borda);
}
.dir-metric:last-child { border-right: none; }
.dir-metric .label {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cinza-medio);
  margin-bottom: var(--s-16);
}
.dir-metric .value {
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}
.dir-metric .delta {
  margin-top: var(--s-16);
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--asfalto);
  letter-spacing: 0.04em;
}

.dir-section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--s-24);
}
.dir-section-head h2 {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.dir-section-head .count {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cinza-medio);
}

/* Grid de clientes */
.clients-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--cinza-borda);
  background: var(--branco-puro);
}
.client-card {
  padding: var(--s-32) var(--s-24);
  border-right: 1px solid var(--cinza-borda);
  border-bottom: 1px solid var(--cinza-borda);
  background: var(--branco-puro);
  text-align: left;
  cursor: pointer;
  transition: background 0.3s cubic-bezier(0.25, 1, 0.5, 1), transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
  display: flex;
  flex-direction: column;
  gap: var(--s-24);
  min-height: 180px;
  width: 100%;
}
.client-card:nth-child(3n) { border-right: none; }
.client-card:hover { background: var(--branco); transform: translateY(-1px); }
.client-card:hover .arrow { transform: translateX(4px); opacity: 1; }
.client-card:active { transform: translateY(0) scale(0.997); transition: transform 0.12s cubic-bezier(0.4, 0, 0.6, 1); }
.client-card .arrow { transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s; }

.client-card .top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.client-card .client-name {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--preto);
  line-height: 1.2;
}
.client-card .project-name {
  margin-top: 6px;
  font-size: 13px;
  color: var(--asfalto);
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.client-card .arrow {
  width: 14px; height: 14px;
  stroke: var(--preto);
  fill: none; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: 0.4;
  transition: transform 0.2s ease, opacity 0.2s ease;
  flex-shrink: 0;
}

.client-card .bottom {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: var(--s-16);
  border-top: 1px solid var(--cinza-borda);
}
.client-card .phase {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--preto);
}
.client-card .phase small {
  color: var(--cinza-medio);
  margin-right: 6px;
}
.client-card .id {
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--cinza-medio);
  letter-spacing: 0.05em;
}

/* Visão 2 — Foco do cliente */
.client-focus { display: none; }
.client-focus.active { display: block; }
.client-directory.hidden { display: none; }

.focus-back {
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
  padding: 8px 14px;
  border: 1px solid var(--cinza-borda);
  background: transparent;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--asfalto);
  margin-bottom: var(--s-40);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.focus-back:hover { background: var(--preto); color: var(--branco); border-color: var(--preto); }
.focus-back svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.focus-header {
  padding-bottom: var(--s-32);
  border-bottom: 1px solid var(--cinza-borda);
  margin-bottom: var(--s-56);
}
.focus-header .client-label {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cinza-medio);
  margin-bottom: var(--s-16);
}
.focus-header h1 {
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin-bottom: var(--s-8);
}
.focus-header .subproject {
  font-size: 18px;
  font-weight: 300;
  color: var(--cinza-medio);
  letter-spacing: -0.01em;
}
.focus-header .meta-row {
  display: flex;
  gap: var(--s-40);
  margin-top: var(--s-24);
  flex-wrap: wrap;
}
.focus-header .meta-row .item {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--asfalto);
}
.focus-header .meta-row .item small {
  display: block;
  font-size: 9px;
  color: var(--cinza-medio);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 3px;
}

/* Timeline horizontal */
.timeline-section { margin-bottom: var(--s-56); }
.timeline-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--s-32);
}
.timeline-head h2 {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.timeline-head .progress-text {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--cinza-medio);
}
.timeline-head .progress-text strong { color: var(--preto); font-weight: 500; }

.timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding-top: var(--s-16);
}
.timeline::before {
  content: '';
  position: absolute;
  left: 7.14%;
  right: 7.14%;
  top: 38px;
  height: 1px;
  background: var(--cinza-borda);
  z-index: 0;
}
.timeline-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-16);
  padding: 0 var(--s-8);
  z-index: 1;
}
.timeline-step .node {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--branco-puro);
  border: 1px solid var(--cinza-claro);
  margin-top: 8px;
  position: relative;
  z-index: 2;
  transition: all 0.2s ease;
}
.timeline-step.done .node {
  background: var(--preto);
  border-color: var(--preto);
}
.timeline-step.active .node {
  background: var(--preto);
  border-color: var(--preto);
  box-shadow: 0 0 0 4px var(--branco), 0 0 0 5px var(--preto);
  width: 14px;
  height: 14px;
  margin-top: 7px;
}
.timeline-step .num {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--cinza-medio);
}
.timeline-step.done .num,
.timeline-step.active .num { color: var(--preto); }
.timeline-step .step-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--cinza-medio);
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.timeline-step.done .step-name { color: var(--asfalto); }
.timeline-step.active .step-name { color: var(--preto); font-weight: 600; }

/* Sub-etapas da fase ativa */
.active-substeps {
  margin-top: var(--s-32);
  padding: var(--s-24);
  border: 1px solid var(--cinza-borda);
  background: var(--branco-puro);
}
.active-substeps .label {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cinza-medio);
  margin-bottom: var(--s-16);
}
.active-substeps .subs {
  display: flex;
  gap: var(--s-24);
  flex-wrap: wrap;
}
.active-substeps .sub {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--cinza-medio);
}
.active-substeps .sub::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cinza-claro);
}
.active-substeps .sub.done { color: var(--asfalto); }
.active-substeps .sub.done::before { background: var(--preto); }
.active-substeps .sub.current { color: var(--preto); font-weight: 500; }
.active-substeps .sub.current::before { background: var(--preto); box-shadow: 0 0 0 3px var(--cinza-borda); }

/* Ações rápidas */
.quick-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--cinza-borda);
  background: var(--branco-puro);
}
.quick-action {
  padding: var(--s-24);
  border-right: 1px solid var(--cinza-borda);
  display: flex;
  align-items: center;
  gap: var(--s-16);
  cursor: pointer;
  transition: background 0.15s;
  background: transparent;
  text-align: left;
  width: 100%;
}
.quick-action:last-child { border-right: none; }
.quick-action:hover { background: var(--branco); }
.quick-action .ico {
  width: 36px; height: 36px;
  border: 1px solid var(--cinza-borda);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.quick-action .ico svg {
  width: 14px; height: 14px;
  stroke: var(--preto);
  fill: none; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.quick-action .txt .t {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.quick-action .txt .d {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--cinza-medio);
  text-transform: uppercase;
}

/* ============================================================
   Responsive
============================================================ */
@media (max-width: 1100px) {
  .app { grid-template-columns: 72px 1fr; }
  .brand-block .brand, .profile-info, .nav-group-title, .sidebar-footer { display: none; }
  .brand-block, .profile { padding: var(--s-16); justify-content: center; border-bottom: 1px solid var(--asfalto); }
  .nav-item { justify-content: center; padding: 14px; }
  .nav-item span:not(.count), .nav-item .count { display: none; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .metrics .metric:nth-child(2) { border-right: none; }
  .metrics .metric:nth-child(1), .metrics .metric:nth-child(2) { border-bottom: 1px solid var(--cinza-borda); }
  .home-layout { grid-template-columns: 1fr; gap: var(--s-32); }
  .home-hero h1 { font-size: 32px; }
  #hub, .subhub, .light-page { padding: var(--s-32) var(--s-24); }
  .light-header h1 { font-size: 36px; }
  .light-metrics { grid-template-columns: 1fr; }
  .light-metric { border-right: none; border-bottom: 1px solid #E5E5E5; padding: var(--s-24) 0; }
  .light-metric:last-child { border-bottom: none; }
  .light-metric .big { font-size: 44px; }
  .light-leads-row { grid-template-columns: 30px 1fr 60px; gap: var(--s-16); }
  .light-leads-row .bar, .light-leads-row .pct { display: none; }
  .light-engaj-row { grid-template-columns: 1fr; row-gap: var(--s-8); padding: var(--s-24) 0; }
  .light-grid.cols-2, .light-grid.cols-3, .light-grid.cols-4 { grid-template-columns: 1fr; }
  .light-grid .light-cell { border-right: none !important; }
  .light-timeline { grid-template-columns: repeat(7, minmax(80px, 1fr)); overflow-x: auto; }
  .light-list.cols-pipeline .light-list-row,
  .light-list.cols-clientes .light-list-row,
  .light-list.cols-agenda   .light-list-row,
  .light-list.cols-publi    .light-list-row,
  .light-list.cols-financ   .light-list-row {
    grid-template-columns: 1fr 1fr; row-gap: 6px;
  }
  .hub-pillars { grid-template-columns: repeat(2, 1fr); }
  .subhub-pillars { grid-template-columns: 1fr; }
  .pillar { min-height: 260px; padding: var(--s-32) var(--s-24); border-right: 1px solid var(--asfalto); }
  .pillar:nth-child(2n) { border-right: none; }
  .pillar:nth-child(-n+2) { border-bottom: 1px solid var(--asfalto); }
  .subhub-pillars .pillar { border-right: none; border-bottom: 1px solid var(--asfalto); }
  .subhub-pillars .pillar:last-child { border-bottom: none; }
  .pillar-name { font-size: 22px; }
  .hub-top, .subhub-top { margin-bottom: var(--s-40); }
  .hub-header, .subhub-header { margin-bottom: var(--s-40); }
  .fin-cards { grid-template-columns: repeat(2, 1fr); }
  .fin-cards .fin-card:nth-child(2) { border-right: none; }
  .fin-cards .fin-card:nth-child(1), .fin-cards .fin-card:nth-child(2) { border-bottom: 1px solid var(--cinza-borda); }
  .rentab { grid-template-columns: 1fr; }
  .fin-totals { grid-template-columns: 1fr; }
  .fin-totals .t { border-right: none; border-bottom: 1px solid var(--cinza-borda); }
  .fin-totals .t:last-child { border-bottom: none; }
  .brand-hub { grid-template-columns: 1fr; }
  .brand-asset { border-right: none; border-bottom: 1px solid var(--cinza-borda); }
  .brand-asset:last-child { border-bottom: none; }
  .publi-head { display: none; }
  .publi-item { grid-template-columns: 1fr 1fr; row-gap: 4px; }
  .traf-big { grid-template-columns: 1fr; }
  .traf-card { border-right: none; border-bottom: 1px solid var(--cinza-borda); }
  .traf-card:last-child { border-bottom: none; }
  .traf-card .big { font-size: 44px; }
  .leads-row { grid-template-columns: 30px 1fr 60px; }
  .leads-row .bar, .leads-row .pct { display: none; }
  .engaj { grid-template-columns: 1fr; }
  .dir-metrics { grid-template-columns: repeat(2, 1fr); }
  .dir-metric { border-right: 1px solid var(--cinza-borda); }
  .dir-metric:nth-child(2n) { border-right: none; }
  .dir-metric:nth-child(-n+2) { border-bottom: 1px solid var(--cinza-borda); }
  .dir-metric .value { font-size: 36px; }
  .clients-grid { grid-template-columns: 1fr; }
  .client-card { border-right: none; }
  .focus-header h1 { font-size: 28px; }
  .timeline { grid-template-columns: repeat(7, minmax(80px, 1fr)); overflow-x: auto; }
  .timeline-step .step-name { font-size: 11px; }
  .quick-actions { grid-template-columns: 1fr 1fr; }
  .quick-action { border-right: 1px solid var(--cinza-borda); border-bottom: 1px solid var(--cinza-borda); }
  .quick-action:nth-child(2n) { border-right: none; }
  .quick-action:nth-last-child(-n+2) { border-bottom: none; }
  .receber .fin-table-head { display: none; }
  .receber .fin-row { grid-template-columns: 1fr 1fr; row-gap: var(--s-8); }
  .pagar .fin-table-head { display: none; }
  .pagar .fin-row { grid-template-columns: 1fr 1fr; row-gap: var(--s-8); }
  .content { padding: var(--s-24); }
  .topbar { padding: var(--s-16) var(--s-24); }
}

/* ============================================================
   LIGHT PAGE — Grid de projetos (Pipeline)
============================================================ */
.projects-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-24);
  margin-bottom: var(--s-24);
}
.projects-head h2 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.projects-head .meta {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cinza-medio);
}
.projects-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cinza-medio);
  border: 1px solid var(--cinza-borda);
  padding: 10px 14px;
  border-radius: 2px;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
  cursor: pointer;
}
.projects-toggle:hover { color: var(--preto); border-color: var(--preto); }
.projects-toggle .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--cinza-claro);
  transition: background 0.2s;
}
.projects-toggle.on { color: var(--preto); border-color: var(--preto); }
.projects-toggle.on .dot { background: var(--preto); }

.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-24);
}
.project-card {
  display: block;
  text-align: left;
  background: #FFFFFF;
  border: 1px solid var(--cinza-borda);
  border-radius: 2px;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  transition:
    border-color 0.25s ease,
    transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
  animation: cardFadeIn 0.5s cubic-bezier(0.25, 1, 0.5, 1) backwards;
}
@keyframes cardFadeIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.projects-grid .project-card:nth-child(1) { animation-delay: 0.05s; }
.projects-grid .project-card:nth-child(2) { animation-delay: 0.10s; }
.projects-grid .project-card:nth-child(3) { animation-delay: 0.15s; }
.projects-grid .project-card:nth-child(4) { animation-delay: 0.20s; }
.projects-grid .project-card:nth-child(5) { animation-delay: 0.25s; }
.projects-grid .project-card:nth-child(6) { animation-delay: 0.30s; }
.projects-grid .project-card:nth-child(7) { animation-delay: 0.35s; }
.projects-grid .project-card:nth-child(8) { animation-delay: 0.40s; }
.projects-grid .project-card:nth-child(n+9) { animation-delay: 0.45s; }
.project-card:hover {
  border-color: var(--preto);
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -20px rgba(10,10,10,0.35);
}
.project-card:active {
  transform: translateY(-1px) scale(0.997);
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.6, 1);
}
.project-card .cover img,
.project-card .cover svg {
  transition: transform 0.55s cubic-bezier(0.25, 1, 0.5, 1);
}
.project-card:hover .cover img,
.project-card:hover .cover svg {
  transform: scale(1.04);
}
.project-card .cover {
  aspect-ratio: 16 / 9;
  background: var(--preto);
  position: relative;
  overflow: hidden;
}
.project-card .cover svg,
.project-card .cover img {
  width: 100%;
  height: 100%;
  display: block;
}
.project-card .cover img {
  object-fit: cover;
}
.project-card .cover-edit {
  position: absolute;
  top: var(--s-16);
  right: var(--s-16);
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: rgba(10,10,10,0.72);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 2px;
  backdrop-filter: blur(4px);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s, background 0.15s;
  z-index: 2;
}
.project-card:hover .cover-edit { opacity: 1; }
.project-card .cover-edit:hover { background: rgba(10,10,10,0.92); }
.project-card .cover-edit svg {
  width: 16px; height: 16px; display: block;
  stroke: var(--branco); fill: none; stroke-width: 1.8;
}
/* Botão de excluir projeto — fica ao lado do cover-edit, só aparece no hover */
.project-card .card-del {
  position: absolute;
  top: var(--s-16);
  right: calc(var(--s-16) + 42px);
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: rgba(10,10,10,0.72);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 2px;
  backdrop-filter: blur(4px);
  cursor: pointer;
  color: var(--branco);
  opacity: 0;
  transition: opacity 0.2s, background 0.15s, color 0.15s;
  z-index: 2;
}
.project-card:hover .card-del { opacity: 1; }
.project-card .card-del:hover { background: rgba(220,80,60,0.95); color: #FFF; }
.project-card .card-del svg { width: 16px; height: 16px; display: block; }
.project-card .cover .cover-tag {
  position: absolute;
  left: var(--s-16);
  bottom: var(--s-16);
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--branco);
  background: rgba(10,10,10,0.72);
  padding: 6px 10px;
  border-radius: 2px;
  backdrop-filter: blur(4px);
}
.project-card .info { padding: var(--s-24); }
.project-card .info .pid {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--cinza-medio);
  text-transform: uppercase;
  margin-bottom: var(--s-8);
}
.project-card .info h3 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.project-card .info .sub {
  font-size: 13px;
  color: var(--cinza-medio);
  margin-bottom: var(--s-16);
}
.project-card .info .foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-16);
  border-top: 1px solid var(--cinza-borda);
  padding-top: var(--s-16);
}
.project-card .info .foot .phase {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--preto);
}
.project-card .info .foot .next {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--cinza-medio);
}
.project-card.inactive { opacity: 0.55; }
.project-card.inactive .cover { filter: grayscale(1); }

@media (max-width: 1100px) {
  .projects-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .projects-grid { grid-template-columns: 1fr; }
  .projects-head { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   LIGHT PAGE — Planilha (Receitas / Despesas)
============================================================ */
.sheet-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-24);
  margin-bottom: var(--s-24);
  flex-wrap: wrap;
}
.sheet-filters { display: flex; gap: var(--s-16); flex-wrap: wrap; }
.sheet-field { display: flex; flex-direction: column; gap: 6px; min-width: 180px; }
.sheet-field .lbl {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cinza-medio);
}
.sheet-field select,
.sheet-field input {
  font-family: var(--ff-sans);
  font-size: 14px;
  color: var(--preto);
  background: var(--branco-puro);
  border: 1px solid var(--cinza-borda);
  border-radius: 2px;
  padding: 10px 12px;
  outline: none;
  transition: border-color 0.15s;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}
.sheet-field select:focus,
.sheet-field input:focus { border-color: var(--preto); }

.sheet-actions { display: flex; gap: var(--s-8); }
.sheet-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--preto);
  background: var(--branco-puro);
  border: 1px solid var(--cinza-borda);
  border-radius: 2px;
  padding: 10px 14px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.sheet-btn:hover { border-color: var(--preto); }
.sheet-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
.sheet-btn.primary { background: var(--preto); color: var(--branco); border-color: var(--preto); }
.sheet-btn.primary:hover { background: #1A1A1A; }

/* Cards de resumo por categoria */
.sheet-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0;
  border-top: 1px solid var(--cinza-borda);
  border-left: 1px solid var(--cinza-borda);
  border-right: 1px solid var(--cinza-borda);
  margin-bottom: var(--s-24);
}
.sheet-summary-cell {
  padding: var(--s-16) var(--s-16);
  border-right: 1px solid var(--cinza-borda);
  border-bottom: 1px solid var(--cinza-borda);
}
.sheet-summary-cell:last-child { border-right: none; }
.sheet-summary-cell.total { background: var(--preto); color: var(--branco); border-bottom-color: var(--preto); }
.sheet-summary-cell .label {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.7;
  margin-bottom: 6px;
}
.sheet-summary-cell .v {
  font-family: var(--ff-sans);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.sheet-summary-cell .c {
  font-family: var(--ff-mono);
  font-size: 11px;
  margin-top: 2px;
  opacity: 0.6;
}

/* Tabela-planilha */
.sheet-wrap {
  border: 1px solid var(--cinza-borda);
  border-radius: 2px;
  background: var(--branco-puro);
  overflow: hidden;
}
.sheet-table { display: flex; flex-direction: column; }
.sheet-row {
  display: grid;
  gap: 0;
  align-items: stretch;
  border-bottom: 1px solid var(--cinza-borda);
  transition: background 0.15s;
}
.sheet-row:last-child { border-bottom: none; }
.sheet-table.receitas .sheet-row,
.sheet-table.despesas .sheet-row {
  grid-template-columns: 130px 1.6fr 1fr 1.2fr 140px 40px;
}
.sheet-row > div {
  padding: 12px 14px;
  border-right: 1px solid var(--cinza-borda);
  display: flex;
  align-items: center;
  font-size: 13.5px;
  min-width: 0;
}
.sheet-row > div:last-child { border-right: none; }
.sheet-row.head > div {
  background: #FCFCFC;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cinza-medio);
  padding-top: 10px;
  padding-bottom: 10px;
}
.sheet-row .sheet-cell {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  font: inherit;
  color: var(--preto);
  padding: 0;
  appearance: none;
}
.sheet-row .sheet-cell.val { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--ff-mono); }
.sheet-row .sheet-cell:focus {
  background: #F4F4F4;
  padding: 0 6px;
  margin: 0 -6px;
  border-radius: 2px;
}
.sheet-row select.sheet-cell {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0 center;
  padding-right: 16px;
}
.sheet-row .act {
  padding: 0;
  justify-content: center;
}
.sheet-row .del {
  width: 28px; height: 28px;
  display: inline-flex;
  align-items: center; justify-content: center;
  border-radius: 2px;
  opacity: 0;
  cursor: pointer;
  background: none; border: none;
  color: var(--cinza-medio);
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}
.sheet-row .del svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.sheet-row:hover .del { opacity: 1; }
.sheet-row .del:hover { background: #F4F4F4; color: var(--preto); }
.sheet-row:hover { background: #FAFAFA; }
.sheet-row.empty > div { color: var(--cinza-medio); }

.sheet-foot {
  display: grid;
  grid-template-columns: 130px 1.6fr 1fr 1.2fr 140px 40px;
  background: #FAFAFA;
  border-top: 2px solid var(--preto);
}
.sheet-foot > div {
  padding: 14px;
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--preto);
  border-right: 1px solid var(--cinza-borda);
}
.sheet-foot > div:last-child { border-right: none; }
.sheet-foot .tot {
  font-family: var(--ff-sans);
  font-size: 16px;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
  text-transform: none;
}

.sheet-empty {
  padding: var(--s-40);
  text-align: center;
  color: var(--cinza-medio);
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
}

@media (max-width: 960px) {
  .sheet-toolbar { flex-direction: column; align-items: stretch; }
  .sheet-actions { justify-content: flex-end; }
  .sheet-wrap { overflow-x: auto; }
  .sheet-table.receitas,
  .sheet-table.despesas { min-width: 900px; }
}

/* ============================================================
   LIGHT PAGE — Fluxo de Caixa (Gráficos)
============================================================ */
.flow-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--cinza-borda);
  margin-bottom: var(--s-32);
  background: var(--branco-puro);
}
.flow-kpi {
  padding: var(--s-24);
  border-right: 1px solid var(--cinza-borda);
}
.flow-kpi:last-child { border-right: none; }
.flow-kpi .label {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cinza-medio);
  margin-bottom: 8px;
}
.flow-kpi .big {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1;
}
.flow-kpi .big.receita { color: var(--acc-receita); }
.flow-kpi .big.despesa { color: var(--acc-despesa); }
.flow-kpi .big.pos { color: var(--acc-receita); }
.flow-kpi .big.neg { color: var(--acc-despesa); }
.flow-kpi .sub {
  margin-top: 6px;
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--cinza-medio);
}
.flow-kpi .sub strong { color: var(--preto); font-weight: 600; }

.flow-chart-card {
  background: var(--branco-puro);
  border: 1px solid var(--cinza-borda);
  padding: var(--s-24);
  margin-bottom: var(--s-24);
}
.flow-chart-host {
  width: 100%;
  height: 280px;
  margin-top: var(--s-16);
}
.flow-chart-host.donut { height: 240px; display: flex; align-items: center; justify-content: center; }
.flow-chart-host canvas { display: block; width: 100%; height: 100%; }

.flow-chart-row {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--s-24);
}
.flow-chart-row .flow-chart-card { margin-bottom: 0; }

.flow-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-16);
  margin-top: var(--s-16);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--cinza-medio);
}
.flow-legend span { display: inline-flex; align-items: center; gap: 8px; }
.flow-legend i.sw {
  width: 10px; height: 10px;
  display: inline-block;
  border-radius: 2px;
  background: var(--cinza-medio);
}
.flow-legend i.sw.receitas { background: var(--acc-receita); }
.flow-legend i.sw.despesas { background: var(--acc-despesa); }

@media (max-width: 1100px) {
  .flow-kpis { grid-template-columns: repeat(2, 1fr); }
  .flow-kpi:nth-child(2) { border-right: none; }
  .flow-kpi:nth-child(1), .flow-kpi:nth-child(2) { border-bottom: 1px solid var(--cinza-borda); }
  .flow-chart-row { grid-template-columns: 1fr; }
}

/* ============================================================
   Marketing · Publicações (Meta Business)
============================================================ */
.meta-account {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-16);
  background: var(--branco-puro);
  border: 1px solid var(--cinza-borda);
  padding: var(--s-16) var(--s-24);
  margin-bottom: var(--s-24);
  flex-wrap: wrap;
}
.meta-account-info { display: flex; align-items: center; gap: var(--s-16); }
.meta-account-pic {
  width: 56px; height: 56px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--cinza-borda);
}
.meta-account-name {
  font-family: var(--ff-mono);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--preto);
}
.meta-account-handle {
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--cinza-medio);
  margin-top: 2px;
}
.meta-account-actions { display: flex; gap: var(--s-8); flex-wrap: wrap; }

.meta-posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--s-16);
  margin-top: var(--s-16);
}
.meta-post {
  background: var(--branco-puro);
  border: 1px solid var(--cinza-borda);
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: border-color 0.2s, transform 0.2s;
  cursor: pointer;
}
.meta-post:hover { border-color: var(--asfalto); transform: translateY(-2px); }
.meta-post .thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--cinza-claro);
  background-size: cover;
  background-position: center;
  position: relative;
}
.meta-post .thumb .badge {
  position: absolute; top: 8px; right: 8px;
  background: rgba(10,10,10,0.7);
  color: var(--branco);
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  padding: 4px 8px;
  border-radius: 2px;
  text-transform: uppercase;
}
.meta-post .body { padding: var(--s-16); display: flex; flex-direction: column; gap: 8px; }
.meta-post .caption {
  font-size: 12px;
  line-height: 1.4;
  color: var(--asfalto);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 33px;
}
.meta-post .date {
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--cinza-medio);
  letter-spacing: 0.05em;
}
.meta-post .stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--cinza-borda);
  font-family: var(--ff-mono);
  font-size: 11px;
}
.meta-post .stats .stat {
  display: flex; flex-direction: column; gap: 2px;
}
.meta-post .stats .stat .v { color: var(--preto); font-weight: 600; }
.meta-post .stats .stat .k { color: var(--cinza-medio); font-size: 9px; letter-spacing: 0.05em; text-transform: uppercase; }

/* ============================================================
   Composer (nova publicação)
============================================================ */
/* Dialogs cross-browser ROBUSTOS — Safari iPadOS é especialmente exigente:
   - Centralização via top/left/transform (inset+margin:auto falha lá)
   - ALTURA EXPLÍCITA no large (não só max-height): com max-height sem
     height + child height:100%, Safari colapsa pra 0px. Chrome resolve
     do conteúdo, mas Safari não — daí o "backdrop aparece, dialog não".
   - Sem display:flex no dialog: deixa o UA `display: block` natural, e o
     .mc-shell lá dentro lida com seu próprio flex. Menos conflito com UA. */
.ui-dialog-large,
.ui-dialog-medium {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
}
.ui-dialog-large {
  width: min(1240px, 97vw);
  max-width: 1240px;
  /* ALTURA EXPLÍCITA — Safari precisa disso pra .mc-shell { height: 100% }
     funcionar corretamente. Sem, o shell colapsa pra 0px no iPadOS. */
  height: 92vh;
  max-height: 92vh;
  padding: 0;
  border: 1px solid var(--cinza-borda);
  background: var(--branco-puro);
  border-radius: 4px;
  overflow: hidden;
}
.ui-dialog-large::backdrop { background: rgba(0,0,0,0.55); backdrop-filter: blur(2px); }
.ui-dialog-medium {
  width: min(720px, 92vw);
  max-width: 720px;
  max-height: 80vh;
  padding: 24px;
  border: 1px solid var(--cinza-borda);
  background: var(--branco-puro);
  border-radius: 4px;
}
.ui-dialog-medium::backdrop { background: rgba(0,0,0,0.55); backdrop-filter: blur(2px); }
.ui-dialog-close {
  position: absolute; top: 14px; right: 14px;
  background: none; border: none; cursor: pointer;
  color: var(--cinza-medio); padding: 6px;
  transition: color 0.2s;
}
.ui-dialog-close:hover { color: var(--preto); }

/* mc-shell: container de flex column dentro do dialog. Toma 100% do
   dialog (que agora tem height EXPLÍCITA). Sem max-height próprio —
   o dialog já limita o tamanho externo. Crítico pro Safari iPadOS. */
.mc-shell { display: flex; flex-direction: column; width: 100%; height: 100%; }
.mc-header {
  padding: 24px 28px 16px; border-bottom: 1px solid var(--cinza-borda);
}
.mc-header h3 { margin: 0 0 6px; font-size: 20px; font-weight: 600; }
.mc-hint { margin: 0; color: var(--cinza-medio); font-size: 12.5px; line-height: 1.5; }
.mc-hint code { background: var(--cinza-claro); padding: 1px 6px; border-radius: 2px; font-family: var(--ff-mono); font-size: 11px; }

.mc-body {
  display: grid; grid-template-columns: 1fr 1.05fr 0.95fr;
  gap: 0;
  flex: 1; min-height: 0;
  overflow: hidden;
}
.mc-left, .mc-center, .mc-right {
  padding: 20px 22px; overflow-y: auto;
}
.mc-left   { border-right: 1px solid var(--cinza-borda); }
.mc-center { border-right: 1px solid var(--cinza-borda); background: var(--cinza-claro); }
.mc-right  { display: flex; flex-direction: column; }

/* Preview tabs */
.mc-preview-tabs {
  display: flex; gap: 4px; margin-bottom: 14px;
  border-bottom: 1px solid var(--cinza-borda);
}
.mc-prev-tab {
  background: none; border: none; padding: 8px 12px;
  font-family: var(--ff-sans); font-size: 12px; font-weight: 500;
  color: var(--cinza-medio); cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.mc-prev-tab:hover { color: var(--preto); }
.mc-prev-tab.active { color: var(--preto); border-bottom-color: var(--preto); }
.mc-preview-stage { display: flex; justify-content: center; }
.mc-preview-stage[hidden] { display: none !important; }

/* Instagram-style post preview */
.ig-post {
  width: 100%; max-width: 360px;
  background: var(--branco-puro);
  border: 1px solid var(--cinza-borda);
  border-radius: 8px; overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.ig-post-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--cinza-borda);
}
.ig-post-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--cinza-claro) center/cover no-repeat;
  border: 1px solid var(--cinza-borda);
  flex-shrink: 0;
}
.ig-post-handle { font-size: 13px; font-weight: 600; flex: 1; }
.ig-post-more { background: none; border: none; cursor: pointer; color: var(--preto); padding: 4px; }

.ig-post-media {
  position: relative;
  width: 100%; aspect-ratio: 4/5;
  background: #000 center/cover no-repeat;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  max-height: 520px;
}
.ig-post-media.reel-ratio { aspect-ratio: 9/16; max-height: 520px; }
.ig-post-media video,
.ig-post-media img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.ig-post-empty {
  color: var(--cinza-medio); font-size: 12px; text-align: center;
  font-family: var(--ff-sans);
  padding: 0 16px;
}
.ig-post-dots {
  position: absolute; bottom: 10px; left: 0; right: 0;
  display: flex; justify-content: center; gap: 4px;
  z-index: 2;
}
.ig-post-dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.5);
  transition: background 0.15s;
}
.ig-post-dots span.active { background: #fff; }

.ig-post-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,0.92); border: none;
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--preto);
  z-index: 2;
}
.ig-post-arrow.prev { left: 8px; }
.ig-post-arrow.next { right: 8px; }

.ig-post-actions {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 12px 4px;
  color: var(--preto);
}
.ig-post-actions svg { cursor: default; }
.ig-post-caption {
  padding: 4px 12px 14px;
  font-size: 13px; line-height: 1.4;
  word-break: break-word;
  white-space: pre-wrap;
}
.ig-post-caption strong { font-weight: 600; margin-right: 4px; }
.ig-cap-text { color: var(--asfalto); }
.ig-post-date {
  padding: 4px 12px 12px;
  font-size: 10px; text-transform: uppercase;
  color: var(--cinza-medio); letter-spacing: 0.05em;
}

/* Perfil completo estilo IG */
.ig-profile {
  width: 100%; max-width: 380px;
  background: var(--branco-puro);
  border: 1px solid var(--cinza-borda);
  border-radius: 8px;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.ig-profile-top {
  padding: 10px 14px 6px;
  border-bottom: 1px solid var(--cinza-borda);
}
.ig-profile-handle-bar {
  display: flex; align-items: center; gap: 6px;
  font-size: 15px; font-weight: 600;
}
.ig-profile-handle-name { line-height: 1; }
.ig-profile-meta {
  display: flex; align-items: center; gap: 22px;
  padding: 16px 14px 10px;
}
.ig-profile-avatar {
  width: 78px; height: 78px; border-radius: 50%;
  background: var(--cinza-medio) center/cover no-repeat;
  flex-shrink: 0;
  border: 1px solid var(--cinza-borda);
}
.ig-profile-stats {
  flex: 1;
  display: flex; justify-content: space-around;
  text-align: center;
}
.ig-profile-stats > div {
  display: flex; flex-direction: column; gap: 1px;
}
.ig-profile-stats strong { font-size: 14px; font-weight: 600; }
.ig-profile-stats span { font-size: 12px; color: var(--asfalto); }
.ig-profile-name {
  padding: 0 14px;
  font-size: 13px; font-weight: 600;
}
.ig-profile-bio {
  padding: 2px 14px 8px;
  font-size: 12.5px; line-height: 1.4;
  white-space: pre-wrap;
}
.ig-profile-link {
  display: block;
  padding: 0 14px 8px;
  font-size: 12.5px; color: #00376b; font-weight: 600;
  text-decoration: none;
}
.ig-profile-actions {
  display: flex; gap: 6px;
  padding: 4px 14px 12px;
}
.ig-btn-follow, .ig-btn-msg, .ig-btn-icon {
  font-family: inherit; font-size: 13px; font-weight: 600;
  border: none; border-radius: 6px; cursor: default;
  padding: 7px 0;
}
.ig-btn-follow {
  flex: 1; background: #0095f6; color: #fff;
}
.ig-btn-msg {
  flex: 1; background: #efefef; color: var(--preto);
}
.ig-btn-icon {
  width: 32px; background: #efefef; color: var(--preto);
  display: flex; align-items: center; justify-content: center;
}

/* Destaques */
.ig-highlights {
  display: flex; gap: 14px;
  padding: 10px 14px 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.ig-highlights::-webkit-scrollbar { display: none; }
.ig-hl {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  flex-shrink: 0;
}
.ig-hl-thumb {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--cinza-claro) center/cover no-repeat;
  border: 1px solid var(--cinza-borda);
  padding: 2px;
}
.ig-hl-name {
  font-size: 11px; color: var(--preto);
  max-width: 64px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
  text-align: center;
}
.ig-hl-loading, .ig-hl-empty {
  font-size: 11px; color: var(--cinza-medio);
  padding: 8px 0;
}

/* Tabs do perfil */
.ig-profile-tabs {
  display: flex;
  border-top: 1px solid var(--cinza-borda);
}
.ig-profile-tab {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 10px 0;
  font-size: 10px; font-weight: 600; letter-spacing: 0.05em;
  color: var(--cinza-medio);
  cursor: default;
}
.ig-profile-tab.active {
  color: var(--preto);
  border-top: 1px solid var(--preto);
  margin-top: -1px;
}

.ig-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--cinza-borda);
  padding: 1px;
}
.ig-grid-tile {
  aspect-ratio: 1/1;
  background: var(--cinza-claro) center/cover no-repeat;
  position: relative;
}
.ig-grid-tile.new {
  outline: 3px solid var(--preto);
  outline-offset: -3px;
  z-index: 2;
}
.ig-grid-tile.new::after {
  content: 'NOVO';
  position: absolute; top: 6px; left: 6px;
  background: var(--preto); color: var(--branco-puro);
  font-family: var(--ff-mono); font-size: 9px;
  letter-spacing: 0.1em;
  padding: 2px 6px;
}
.ig-grid-tile .ig-grid-icon {
  position: absolute; top: 6px; right: 6px;
  color: #fff;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}

/* Agendamento */
.mc-schedule { margin-bottom: 18px; }
.mc-schedule-mode {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 12px;
}
.mc-radio {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--cinza-borda); border-radius: 3px;
  cursor: pointer;
  font-size: 13px; font-weight: 500;
  transition: border-color 0.15s, background 0.15s;
}
.mc-radio:has(input:checked) {
  border-color: var(--preto);
  background: var(--cinza-claro);
}
.mc-radio input[type="radio"] { margin: 0; accent-color: var(--preto); }

.mc-schedule-when input[type="datetime-local"] {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--cinza-borda); border-radius: 3px;
  font-family: var(--ff-sans); font-size: 13px;
  background: var(--branco-puro);
}
.mc-schedule-when input[type="datetime-local"]:focus {
  outline: none; border-color: var(--preto);
}

@media (max-width: 980px){
  .mc-body { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .mc-left, .mc-center { border-right: none; border-bottom: 1px solid var(--cinza-borda); }
}

.mc-type-group {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-bottom: 20px;
}
.mc-type-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 10px;
  background: var(--branco-puro);
  border: 1px solid var(--cinza-borda);
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--ff-sans);
  font-size: 12px; font-weight: 500;
  color: var(--cinza-medio);
  transition: all 0.15s;
}
.mc-type-btn:hover { border-color: var(--asfalto); color: var(--asfalto); }
.mc-type-btn.active {
  border-color: var(--preto);
  background: var(--preto);
  color: var(--branco-puro);
}

.mc-media-section h4 { margin: 0 0 10px; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; }
.mc-media-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.mc-pick-btn { padding: 7px 14px; font-size: 12px; }

.mc-media-list {
  display: flex; flex-direction: column; gap: 8px;
  min-height: 60px;
  padding: 12px;
  background: var(--cinza-claro);
  border-radius: 3px;
}
.mc-media-empty {
  text-align: center; color: var(--cinza-medio); font-size: 12px;
  padding: 16px 0;
}
.mc-media-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--branco-puro);
  border: 1px solid var(--cinza-borda);
  border-radius: 3px;
  padding: 8px;
}
.mc-media-item .thumb {
  width: 48px; height: 48px; border-radius: 3px;
  background: var(--cinza-claro) center/cover no-repeat;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--cinza-medio);
}
.mc-media-item .info { flex: 1; min-width: 0; }
.mc-media-item .info .name {
  font-size: 12.5px; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mc-media-item .info .meta {
  font-size: 11px; color: var(--cinza-medio);
  font-family: var(--ff-mono); margin-top: 2px;
}
.mc-media-item .order {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--preto); color: var(--branco-puro);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-mono); font-size: 11px; font-weight: 600;
  flex-shrink: 0;
}
.mc-media-item button.remove {
  background: none; border: none; cursor: pointer;
  color: var(--cinza-medio); padding: 4px;
  display: flex; align-items: center; justify-content: center;
}
.mc-media-item button.remove:hover { color: var(--acc-despesa); }

.mc-tip { margin-top: 10px; font-size: 11.5px; color: var(--cinza-medio); line-height: 1.5; min-height: 16px; }

.mc-field { display: block; }
.mc-label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 6px; letter-spacing: 0.02em; }
.mc-right textarea,
.mc-left textarea {
  width: 100%; padding: 12px;
  border: 1px solid var(--cinza-borda);
  border-radius: 3px;
  font-family: var(--ff-sans); font-size: 13px;
  line-height: 1.5; resize: vertical;
  background: var(--branco-puro);
  min-height: 180px;
}
.mc-right textarea:focus,
.mc-left textarea:focus { outline: none; border-color: var(--preto); }
.mc-counter {
  display: block; margin-top: 4px;
  font-size: 11px; color: var(--cinza-medio);
  font-family: var(--ff-mono); text-align: right;
}

.mc-status {
  margin-top: 16px; padding: 12px 14px;
  border-radius: 3px;
  font-size: 12.5px; line-height: 1.5;
  background: var(--cinza-claro);
  border: 1px solid var(--cinza-borda);
}
.mc-status.success { background: #eafaef; border-color: #1F6B3A33; color: #1F6B3A; }
.mc-status.error   { background: #fdeeea; border-color: #B7432E33; color: #B7432E; }
.mc-status.working { background: #fef6e0; border-color: #b88d1133; color: #8a6612; }
.mc-status a { color: inherit; text-decoration: underline; }

.mc-actions {
  display: flex; gap: 10px; justify-content: flex-end;
  margin-top: auto; padding-top: 20px;
}

/* Drive picker */
.mcdp-breadcrumb {
  font-size: 12px; color: var(--cinza-medio);
  font-family: var(--ff-mono);
}
.mcdp-grid {
  flex: 1;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  overflow-y: auto;
  padding: 4px;
  margin: 12px 0 16px;
  min-height: 220px;
}
.mcdp-tile {
  position: relative;
  border: 1px solid var(--cinza-borda);
  border-radius: 3px;
  background: var(--branco-puro);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s, transform 0.1s;
}
.mcdp-tile:hover { border-color: var(--asfalto); }
.mcdp-tile.selected { border-color: var(--preto); border-width: 2px; }
.mcdp-tile.selected::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(0,0,0,0.06); pointer-events: none;
}
.mcdp-tile .thumb {
  width: 100%; aspect-ratio: 1/1;
  background: var(--cinza-claro) center/cover no-repeat;
  display: flex; align-items: center; justify-content: center;
  color: var(--cinza-medio);
}
.mcdp-tile .body {
  padding: 8px 10px;
  border-top: 1px solid var(--cinza-borda);
}
.mcdp-tile .name {
  font-size: 11.5px; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mcdp-tile .kind {
  font-size: 10px; color: var(--cinza-medio);
  font-family: var(--ff-mono); margin-top: 2px;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.mcdp-tile .selected-badge {
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--preto); color: var(--branco-puro);
  display: none; align-items: center; justify-content: center;
  font-family: var(--ff-mono); font-size: 11px; font-weight: 700;
  z-index: 2;
}
.mcdp-tile.selected .selected-badge { display: flex; }
.mcdp-tile.is-folder .thumb { background: var(--cinza-claro); }
.mcdp-empty {
  grid-column: 1/-1;
  text-align: center; color: var(--cinza-medio); font-size: 13px;
  padding: 40px 0;
}
.mcdp-actions { display: flex; gap: 10px; justify-content: flex-end; }

@media (max-width: 720px){
  .mc-body { grid-template-columns: 1fr; grid-template-rows: auto auto; }
  .mc-left { border-right: none; border-bottom: 1px solid var(--cinza-borda); }
}

.btn-primary, .btn-secondary {
  font-family: var(--ff-sans);
  font-size: 13px;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  border: 1px solid var(--preto);
}
.btn-primary { background: var(--preto); color: var(--branco); }
.btn-primary:hover { background: var(--asfalto); }
.btn-secondary { background: var(--branco-puro); color: var(--preto); border-color: var(--cinza-borda); }
.btn-secondary:hover { border-color: var(--asfalto); }

/* Modal de token manual segue o estilo do uiDialog */
#metaTokenDialog {
  position: fixed; inset: 0; z-index: 200;
  display: none; align-items: center; justify-content: center;
  background: rgba(10,10,10,0.55);
  backdrop-filter: blur(6px);
}
#metaTokenDialog.visible { display: flex; }
.meta-token-card {
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  padding: var(--s-32);
  width: 560px; max-width: calc(100vw - 48px);
  border-radius: 2px;
  box-shadow: 0 30px 80px -20px rgba(10,10,10,0.35);
}
.meta-token-card .ui-dialog-kicker {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cinza-medio);
  margin-bottom: 8px;
}
.meta-token-card .ui-dialog-title {
  font-size: 18px; font-weight: 600; color: var(--preto); margin-bottom: 12px;
}
.meta-token-card .ui-dialog-msg {
  font-size: 13px; color: var(--asfalto); line-height: 1.5; margin-bottom: 16px;
}
.meta-token-card .ui-dialog-msg code {
  font-family: var(--ff-mono);
  background: var(--cinza-borda);
  padding: 2px 5px;
  border-radius: 2px;
  font-size: 11px;
}
.meta-token-card .ui-dialog-actions {
  display: flex; justify-content: flex-end; gap: 8px;
}

/* ---------- Card destaque: melhor publicação ---------- */
.meta-best {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--s-24);
  background: var(--branco-puro);
  border: 1px solid var(--cinza-borda);
  padding: var(--s-16);
  margin-bottom: var(--s-24);
}
.meta-best-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
  background-color: var(--cinza-claro);
}
.meta-best-body {
  display: flex; flex-direction: column;
  gap: var(--s-8);
  padding: 4px 0;
}
.meta-best-tag {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cinza-medio);
}
.meta-best-caption {
  font-size: 14px;
  line-height: 1.5;
  color: var(--preto);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.meta-best-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-16);
  margin-top: var(--s-8);
}
.meta-best-stats > div {
  display: flex; flex-direction: column; gap: 2px;
  border-left: 2px solid var(--cinza-borda);
  padding-left: 12px;
}
.meta-best-stats .v {
  font-family: var(--ff-mono);
  font-size: 18px;
  font-weight: 600;
  color: var(--preto);
}
.meta-best-stats .k {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cinza-medio);
}
.meta-best-link {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--preto);
  text-decoration: underline;
  align-self: flex-start;
}
@media (max-width: 800px){
  .meta-best { grid-template-columns: 1fr; }
  .meta-best-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Seletor de período (gráfico) ---------- */
.meta-range {
  display: inline-flex;
  border: 1px solid var(--cinza-borda);
  border-radius: 2px;
  overflow: hidden;
}
.meta-range-btn {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  padding: 6px 12px;
  background: transparent;
  color: var(--cinza-medio);
  border: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.meta-range-btn + .meta-range-btn { border-left: 1px solid var(--cinza-borda); }
.meta-range-btn:hover { color: var(--preto); }
.meta-range-btn.active { background: var(--preto); color: var(--branco); }

/* ---------- Filtros do grid de publicações ---------- */
.meta-filters {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-16);
  margin-bottom: var(--s-16);
  flex-wrap: wrap;
}

/* Lista de agendados */
.meta-scheduled-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 16px;
  margin-bottom: 40px;
}
.sched-card {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: 16px; align-items: start;
  padding: 14px;
  background: var(--branco-puro);
  border: 1px solid var(--cinza-borda);
  border-radius: 4px;
  transition: border-color 0.2s;
}
.sched-card:hover { border-color: var(--asfalto); }
.sched-thumb {
  position: relative;
  width: 88px; height: 88px; border-radius: 3px;
  overflow: hidden;
  background: var(--cinza-claro);
}
.sched-thumb img, .sched-thumb video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.sched-count {
  position: absolute; top: 4px; right: 4px;
  background: rgba(0,0,0,0.7); color: #fff;
  font-family: var(--ff-mono); font-size: 10px;
  padding: 2px 6px; border-radius: 10px;
}
.sched-body { min-width: 0; }
.sched-top {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 4px;
}
.sched-type {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--cinza-medio); font-family: var(--ff-mono);
}
.sched-badge {
  display: inline-block; padding: 2px 8px;
  border-radius: 2px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase;
}
.sched-badge.scheduled { background: #eef4fb; color: #1c4f8a; border: 1px solid #1c4f8a33; }
.sched-badge.working   { background: #fef6e0; color: #8a6612; border: 1px solid #b88d1133; }
.sched-badge.failed    { background: #fdeeea; color: #B7432E; border: 1px solid #B7432E33; }
.sched-badge.sched-source-site {
  background: var(--branco-puro); color: var(--cinza-medio);
  border: 1px solid var(--cinza-borda);
}
.sched-badge.sched-source-bs {
  background: #f4ecfb; color: #5a2a8a; border: 1px solid #5a2a8a33;
}
.sched-actions a.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 12px; font-size: 11px; text-decoration: none;
  text-align: center;
}
.sched-when {
  font-family: var(--ff-mono); font-size: 12px;
  color: var(--preto); font-weight: 600;
  margin-bottom: 6px;
}
.sched-caption {
  font-size: 12.5px; line-height: 1.4; color: var(--asfalto);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; word-break: break-word;
}
.sched-caption em { font-style: italic; }
.sched-error {
  margin-top: 6px;
  font-size: 11px; color: var(--acc-despesa);
  padding: 6px 8px;
  background: #fdeeea; border-radius: 2px;
  word-break: break-word;
}
.sched-actions {
  display: flex; flex-direction: column; gap: 6px;
}
.sched-actions button {
  padding: 6px 12px; font-size: 11px;
}
.meta-filter-group {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.meta-chip {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 6px 12px;
  border-radius: 2px;
  border: 1px solid var(--cinza-borda);
  background: var(--branco-puro);
  color: var(--asfalto);
  cursor: pointer;
  transition: all 0.15s;
}
.meta-chip:hover { border-color: var(--asfalto); }
.meta-chip.active { background: var(--preto); color: var(--branco); border-color: var(--preto); }
.meta-filter-sort {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--cinza-medio);
  letter-spacing: 0.05em;
}
.meta-filter-sort select {
  font-family: var(--ff-mono);
  font-size: 11px;
  padding: 6px 10px;
  border: 1px solid var(--cinza-borda);
  background: var(--branco-puro);
  color: var(--preto);
  border-radius: 2px;
  cursor: pointer;
}

/* ---------- Modal de detalhes da publicação ---------- */
#metaPostDialog {
  position: fixed; inset: 0; z-index: 200;
  display: none; align-items: center; justify-content: center;
  background: rgba(10,10,10,0.65);
  backdrop-filter: blur(8px);
  padding: var(--s-24);
}
#metaPostDialog.visible { display: flex; }
.meta-post-modal-card {
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: 2px;
  width: 920px; max-width: 100%;
  max-height: calc(100vh - 48px);
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 80px -20px rgba(10,10,10,0.5);
}
.meta-post-modal-close {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 2;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: var(--branco-puro);
  border: 1px solid var(--cinza-borda);
  border-radius: 50%;
  color: var(--preto);
  cursor: pointer;
  transition: background 0.15s;
}
.meta-post-modal-close:hover { background: var(--cinza-borda); }
.meta-post-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-height: calc(100vh - 48px);
}
.meta-post-modal-media {
  background: #000;
  display: flex; align-items: center; justify-content: center;
  min-height: 400px;
  overflow: hidden;
}
.meta-post-modal-media img,
.meta-post-modal-media video {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.meta-post-modal-info {
  padding: var(--s-32);
  display: flex; flex-direction: column;
  gap: var(--s-16);
  overflow-y: auto;
}
.meta-post-modal-kicker {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cinza-medio);
}
.meta-post-modal-date {
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--asfalto);
}
.meta-post-modal-caption {
  font-size: 14px;
  line-height: 1.6;
  color: var(--preto);
  white-space: pre-wrap;
  max-height: 240px;
  overflow-y: auto;
}
.meta-post-modal-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-8);
  border-top: 1px solid var(--cinza-borda);
  padding-top: var(--s-16);
}
.meta-post-modal-metrics > div {
  display: flex; justify-content: space-between;
  font-family: var(--ff-mono);
  font-size: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--cinza-borda);
}
.meta-post-modal-metrics .k {
  color: var(--cinza-medio);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 10px;
  align-self: center;
}
.meta-post-modal-metrics .v {
  color: var(--preto);
  font-weight: 600;
}
.meta-post-modal-link {
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--preto);
  text-decoration: underline;
  margin-top: auto;
}
@media (max-width: 800px){
  .meta-post-modal-grid { grid-template-columns: 1fr; }
  .meta-post-modal-media { min-height: 280px; }
}

/* ============================================================
   Marketing · Publicações — REFINO VISUAL (escopado)
   Suaviza cantos, adiciona sombras discretas, melhora hierarquia.
   Mantém a paleta monocromática e a malha 12-col existente.
============================================================ */
#lightPublicacoes .light-header h1 { letter-spacing: -0.02em; }
#lightPublicacoes .light-section-head { margin-bottom: 18px; }
#lightPublicacoes .light-section-head h2 {
  font-size: 18px; font-weight: 500;
  letter-spacing: -0.015em;
}
#lightPublicacoes .light-section-head .meta {
  font-size: 10px; letter-spacing: 0.14em;
}

/* --- Cartão da conta --- */
#lightPublicacoes .meta-account {
  border-radius: 14px;
  padding: 20px 24px;
  border: 1px solid #ECECEC;
  background: linear-gradient(180deg, #FFFFFF 0%, #FCFCFC 100%);
  box-shadow: 0 1px 0 rgba(10,10,10,0.02), 0 8px 24px -16px rgba(10,10,10,0.10);
  margin-bottom: 28px;
}
#lightPublicacoes .meta-account-info { gap: 18px; }
#lightPublicacoes .meta-account-pic {
  width: 60px; height: 60px;
  box-shadow: 0 0 0 1px #ECECEC, 0 2px 6px -2px rgba(10,10,10,0.10);
  background: #F4F4F4;
}
#lightPublicacoes .meta-account-name {
  font-family: var(--ff-sans);
  font-size: 17px; font-weight: 600;
  letter-spacing: -0.015em;
}
#lightPublicacoes .meta-account-handle {
  font-size: 12.5px;
  letter-spacing: 0.01em;
}
#lightPublicacoes .meta-account-actions { gap: 10px; }
#lightPublicacoes .meta-account-actions .btn-primary,
#lightPublicacoes .meta-account-actions .btn-secondary {
  border-radius: 8px;
  padding: 9px 16px;
  font-size: 12.5px;
  letter-spacing: 0.01em;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.15s ease, color 0.15s ease;
}
#lightPublicacoes .meta-account-actions .btn-primary {
  box-shadow: 0 4px 12px -6px rgba(10,10,10,0.35);
}
#lightPublicacoes .meta-account-actions .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -8px rgba(10,10,10,0.45);
}
#lightPublicacoes .meta-account-actions .btn-secondary:hover {
  transform: translateY(-1px);
}

/* --- KPIs (mesma estrutura, visual mais refinado) --- */
#lightPublicacoes .flow-kpis {
  grid-template-columns: repeat(5, 1fr);
  border: 1px solid #ECECEC;
  border-radius: 14px;
  overflow: hidden;
  background: var(--branco-puro);
  box-shadow: 0 1px 0 rgba(10,10,10,0.02), 0 12px 28px -20px rgba(10,10,10,0.10);
  margin-bottom: 28px;
}
@media (max-width: 1280px) {
  #lightPublicacoes .flow-kpis { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  #lightPublicacoes .flow-kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  #lightPublicacoes .flow-kpis { grid-template-columns: 1fr; }
}
#lightPublicacoes .flow-kpi {
  padding: 22px 24px;
  border-right: 1px solid #F0F0F0;
  position: relative;
  transition: background 0.2s ease;
}
#lightPublicacoes .flow-kpi:hover { background: #FCFCFC; }
#lightPublicacoes .flow-kpi .label {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: #A0A0A0;
  margin-bottom: 12px;
}
#lightPublicacoes .flow-kpi .big {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
#lightPublicacoes .flow-kpi .sub {
  margin-top: 10px;
  font-size: 11px;
  color: #999;
  letter-spacing: 0.01em;
}

/* --- Card Destaque --- */
#lightPublicacoes .meta-best {
  grid-template-columns: 220px 1fr;
  gap: 28px;
  background: var(--branco-puro);
  border: 1px solid #ECECEC;
  border-radius: 14px;
  padding: 22px;
  margin-bottom: 28px;
  box-shadow: 0 1px 0 rgba(10,10,10,0.02), 0 12px 28px -20px rgba(10,10,10,0.10);
}
#lightPublicacoes .meta-best-thumb {
  border-radius: 10px;
  box-shadow: 0 4px 18px -8px rgba(10,10,10,0.20);
}
#lightPublicacoes .meta-best-tag {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: #A0A0A0;
}
#lightPublicacoes .meta-best-caption {
  font-size: 14.5px;
  line-height: 1.55;
}
#lightPublicacoes .meta-best-stats > div {
  border-left: 1px solid #ECECEC;
  padding-left: 14px;
}
#lightPublicacoes .meta-best-stats .v {
  font-size: 20px;
  letter-spacing: -0.02em;
  font-feature-settings: "tnum" 1;
}
#lightPublicacoes .meta-best-stats .k {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: #A0A0A0;
}
#lightPublicacoes .meta-best-link {
  font-family: var(--ff-sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-decoration: none;
  color: var(--preto);
  padding: 7px 14px;
  border: 1px solid #E5E5E5;
  border-radius: 8px;
  align-self: flex-start;
  transition: all 0.18s ease;
}
#lightPublicacoes .meta-best-link:hover {
  background: var(--preto);
  color: var(--branco);
  border-color: var(--preto);
  transform: translateY(-1px);
}

/* --- Gráfico --- */
#lightPublicacoes .flow-chart-card {
  border: 1px solid #ECECEC;
  border-radius: 14px;
  padding: 22px 24px;
  background: var(--branco-puro);
  box-shadow: 0 1px 0 rgba(10,10,10,0.02), 0 12px 28px -20px rgba(10,10,10,0.10);
  margin-bottom: 32px;
}
#lightPublicacoes .meta-range {
  border: 1px solid #E8E8E8;
  border-radius: 8px;
  background: #FAFAFA;
  padding: 3px;
  gap: 2px;
}
#lightPublicacoes .meta-range-btn {
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 11px;
  letter-spacing: 0.04em;
  transition: all 0.15s ease;
}
#lightPublicacoes .meta-range-btn + .meta-range-btn { border-left: none; }
#lightPublicacoes .meta-range-btn:hover { color: var(--preto); background: rgba(10,10,10,0.04); }
#lightPublicacoes .meta-range-btn.active {
  background: var(--branco-puro);
  color: var(--preto);
  box-shadow: 0 1px 3px rgba(10,10,10,0.08), 0 0 0 1px rgba(10,10,10,0.04);
}

/* --- Filtros --- */
#lightPublicacoes .meta-filters {
  background: var(--branco-puro);
  border: 1px solid #ECECEC;
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 20px;
  box-shadow: 0 1px 0 rgba(10,10,10,0.02);
}
#lightPublicacoes .meta-chip {
  font-family: var(--ff-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  padding: 6px 14px;
  border: 1px solid #E8E8E8;
  border-radius: 999px;
  background: var(--branco-puro);
  color: var(--asfalto);
  transition: all 0.15s ease;
}
#lightPublicacoes .meta-chip:hover {
  border-color: #C8C8C8;
  background: #FAFAFA;
}
#lightPublicacoes .meta-chip.active {
  background: var(--preto);
  color: var(--branco);
  border-color: var(--preto);
  box-shadow: 0 2px 6px -2px rgba(10,10,10,0.25);
}
#lightPublicacoes .meta-filter-sort {
  font-family: var(--ff-sans);
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
  color: #A0A0A0;
}
#lightPublicacoes .meta-filter-sort label { color: #A0A0A0; }
#lightPublicacoes .meta-filter-sort select {
  font-family: var(--ff-sans);
  font-size: 12px;
  padding: 6px 28px 6px 12px;
  border: 1px solid #E8E8E8;
  border-radius: 8px;
  background: var(--branco-puro)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%23888' stroke-width='1.5'><path d='M1 1l4 4 4-4'/></svg>")
    no-repeat right 10px center;
  -webkit-appearance: none; appearance: none;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
#lightPublicacoes .meta-filter-sort select:hover { border-color: #C8C8C8; }
#lightPublicacoes .meta-filter-sort select:focus {
  outline: none;
  border-color: var(--preto);
  box-shadow: 0 0 0 3px rgba(10,10,10,0.06);
}

/* --- Grid de posts --- */
#lightPublicacoes .meta-posts-grid {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
  margin-top: 8px;
}
#lightPublicacoes .meta-post {
  border: 1px solid #ECECEC;
  border-radius: 12px;
  background: var(--branco-puro);
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.2s ease;
  box-shadow: 0 1px 0 rgba(10,10,10,0.02);
}
#lightPublicacoes .meta-post:hover {
  transform: translateY(-3px);
  border-color: #D8D8D8;
  box-shadow: 0 14px 28px -16px rgba(10,10,10,0.20), 0 1px 0 rgba(10,10,10,0.02);
}
#lightPublicacoes .meta-post .thumb {
  background-color: #F4F4F4;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
#lightPublicacoes .meta-post .thumb .badge {
  background: rgba(255,255,255,0.95);
  color: var(--preto);
  font-family: var(--ff-sans);
  font-weight: 600;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  padding: 4px 9px;
  border-radius: 999px;
  box-shadow: 0 2px 6px -2px rgba(10,10,10,0.20);
  text-transform: uppercase;
}
#lightPublicacoes .meta-post .body { padding: 14px 16px 16px; gap: 10px; }
#lightPublicacoes .meta-post .caption {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--asfalto);
}
#lightPublicacoes .meta-post .date {
  font-size: 10px;
  letter-spacing: 0.06em;
  color: #A0A0A0;
}
#lightPublicacoes .meta-post .stats {
  padding-top: 10px;
  border-top: 1px solid #F0F0F0;
  font-size: 11.5px;
}
#lightPublicacoes .meta-post .stats .stat .v {
  font-size: 13px;
  letter-spacing: -0.01em;
  font-feature-settings: "tnum" 1;
}
#lightPublicacoes .meta-post .stats .stat .k {
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: #A0A0A0;
}

/* --- Agendados --- */
#lightPublicacoes .meta-scheduled-list { gap: 14px; margin-bottom: 32px; }
#lightPublicacoes .sched-card {
  border: 1px solid #ECECEC;
  border-radius: 12px;
  padding: 16px;
  background: var(--branco-puro);
  box-shadow: 0 1px 0 rgba(10,10,10,0.02);
  transition: transform 0.18s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
#lightPublicacoes .sched-card:hover {
  transform: translateY(-2px);
  border-color: #D8D8D8;
  box-shadow: 0 10px 22px -14px rgba(10,10,10,0.18);
}
#lightPublicacoes .sched-thumb { border-radius: 8px; }
#lightPublicacoes .sched-when { font-size: 13px; letter-spacing: -0.005em; }
#lightPublicacoes .sched-actions button { border-radius: 8px; padding: 7px 13px; }

/* --- Estado vazio (não conectado) --- */
#lightPublicacoes #metaStateDisconnected .light-empty {
  background: var(--branco-puro);
  border: 1px solid #ECECEC;
  border-radius: 14px;
  padding: 48px 32px;
  box-shadow: 0 1px 0 rgba(10,10,10,0.02), 0 12px 28px -20px rgba(10,10,10,0.10);
}
#lightPublicacoes #metaStateDisconnected .btn-primary,
#lightPublicacoes #metaStateDisconnected .btn-secondary {
  border-radius: 8px;
  padding: 10px 18px;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
#lightPublicacoes #metaStateDisconnected .btn-primary:hover,
#lightPublicacoes #metaStateDisconnected .btn-secondary:hover {
  transform: translateY(-1px);
}
#lightPublicacoes #metaStateDisconnected .btn-primary:hover {
  box-shadow: 0 8px 18px -8px rgba(10,10,10,0.45);
}

@media (max-width: 1100px) {
  #lightPublicacoes .meta-best { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  #lightPublicacoes .meta-account { padding: 16px 18px; border-radius: 12px; }
  #lightPublicacoes .meta-account-actions { width: 100%; }
  #lightPublicacoes .meta-account-actions .btn-primary,
  #lightPublicacoes .meta-account-actions .btn-secondary { flex: 1; }
}

/* ============================================================
   REFINO VISUAL GLOBAL — todas as light-pages
   Aplica a mesma linguagem de Publicações (cantos suaves,
   sombras discretas, controles em pill, hover com elevação).
   Escopado em .light-page para não vazar pro restante do site.
   Marca (#lightMarca) tem estilo editorial intencional — preservado.
============================================================ */

/* --- Comum: heads, vazios, KPIs, charts, range tabs --- */
.light-page .light-section-head h2 {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.light-page .light-section-head .meta {
  font-size: 10px;
  letter-spacing: 0.14em;
}

.light-page .light-empty {
  padding: 56px 32px;
  border: 1px solid #ECECEC;
  border-radius: 14px;
  background: var(--branco-puro);
  box-shadow: 0 1px 0 rgba(10,10,10,0.02), 0 12px 28px -20px rgba(10,10,10,0.10);
  font-family: var(--ff-sans);
  font-size: 14px;
  letter-spacing: 0;
  color: var(--asfalto);
}
.light-page .light-empty strong { color: var(--preto); font-weight: 600; }

.light-page .flow-kpis {
  border: 1px solid #ECECEC;
  border-radius: 14px;
  overflow: hidden;
  background: var(--branco-puro);
  box-shadow: 0 1px 0 rgba(10,10,10,0.02), 0 12px 28px -20px rgba(10,10,10,0.10);
  margin-bottom: 28px;
}
.light-page .flow-kpi {
  padding: 22px 24px;
  border-right: 1px solid #F0F0F0;
  transition: background 0.2s ease;
}
.light-page .flow-kpi:hover { background: #FCFCFC; }
.light-page .flow-kpi .label {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: #A0A0A0;
  margin-bottom: 12px;
}
.light-page .flow-kpi .big {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.light-page .flow-kpi .sub {
  margin-top: 10px;
  font-size: 11px;
  color: #999;
}

.light-page .flow-chart-card {
  border: 1px solid #ECECEC;
  border-radius: 14px;
  padding: 22px 24px;
  background: var(--branco-puro);
  box-shadow: 0 1px 0 rgba(10,10,10,0.02), 0 12px 28px -20px rgba(10,10,10,0.10);
  margin-bottom: 24px;
}
.light-page .flow-chart-row { gap: 22px; }

.light-page .meta-range {
  border: 1px solid #E8E8E8;
  border-radius: 8px;
  background: #FAFAFA;
  padding: 3px;
  gap: 2px;
}
.light-page .meta-range-btn {
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 11px;
  transition: all 0.15s ease;
}
.light-page .meta-range-btn + .meta-range-btn { border-left: none; }
.light-page .meta-range-btn:hover { background: rgba(10,10,10,0.04); color: var(--preto); }
.light-page .meta-range-btn.active {
  background: var(--branco-puro);
  color: var(--preto);
  box-shadow: 0 1px 3px rgba(10,10,10,0.08), 0 0 0 1px rgba(10,10,10,0.04);
}

/* --- Pipeline / Obras (project cards) --- */
.light-page .projects-head { margin-bottom: 20px; }
.light-page .projects-head h2 {
  font-size: 20px;
  letter-spacing: -0.015em;
}
.light-page .projects-toggle {
  border: 1px solid #E8E8E8;
  border-radius: 999px;
  padding: 8px 14px;
  font-family: var(--ff-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--asfalto);
  transition: all 0.18s ease;
}
.light-page .projects-toggle:hover {
  border-color: #C8C8C8;
  background: #FAFAFA;
  color: var(--preto);
}
.light-page .projects-toggle.on {
  border-color: var(--preto);
  color: var(--preto);
  background: var(--branco-puro);
}
.light-page .project-card {
  border: 1px solid #ECECEC;
  border-radius: 12px;
  box-shadow: 0 1px 0 rgba(10,10,10,0.02);
  transition: border-color 0.25s ease, transform 0.4s cubic-bezier(0.25,1,0.5,1), box-shadow 0.4s cubic-bezier(0.25,1,0.5,1);
}
.light-page .project-card:hover {
  border-color: #D8D8D8;
  box-shadow: 0 18px 36px -18px rgba(10,10,10,0.22);
}
.light-page .project-card .cover {
  border-top-left-radius: 11px;
  border-top-right-radius: 11px;
  overflow: hidden;
}
.light-page .project-card .info .pid {
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #A0A0A0;
}
.light-page .project-card .info .foot { border-top-color: #F0F0F0; }

.light-page .gdrive-banner {
  border-radius: 12px;
  border: 1px solid #ECECEC;
}

/* --- Propostas --- */
.light-page .proposals-summary {
  border: 1px solid #ECECEC;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(10,10,10,0.02), 0 12px 28px -20px rgba(10,10,10,0.10);
  margin-bottom: 24px;
}
.light-page .proposals-summary .cell {
  padding: 20px 22px;
  border-right: 1px solid #F0F0F0;
}
.light-page .proposals-summary .cell .label {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: #A0A0A0;
  margin-bottom: 10px;
}
.light-page .proposals-summary .cell .big {
  font-size: 24px;
  letter-spacing: -0.02em;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.light-page .proposals-list {
  border: 1px solid #ECECEC;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(10,10,10,0.02), 0 12px 28px -20px rgba(10,10,10,0.10);
}
.light-page .proposal-row { border-bottom-color: #F0F0F0; }
.light-page .proposal-row.head { background: #FAFAFA; }
.light-page .proposal-row.head:hover { background: #FAFAFA; }
.light-page .proposal-row:not(.head):hover { background: #FCFCFC; }
.light-page .p-status {
  border: 1px solid #E8E8E8;
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 10px;
  letter-spacing: 0.08em;
}

/* --- Clientes / listas genéricas --- */
.light-page .light-list { border-top-color: #ECECEC; }
.light-page .light-list-row { border-bottom-color: #F0F0F0; }
.light-page .light-list-row .tag {
  border: 1px solid #E8E8E8;
  border-radius: 999px;
  padding: 5px 11px;
}

/* --- Sheet (Receitas / Despesas) --- */
.light-page .sheet-toolbar { margin-bottom: 20px; }
.light-page .sheet-field select,
.light-page .sheet-field input {
  border: 1px solid #E8E8E8;
  border-radius: 8px;
  padding: 10px 12px;
  padding-right: 32px;
  background-color: var(--branco-puro);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.light-page .sheet-field select:focus,
.light-page .sheet-field input:focus {
  border-color: var(--preto);
  box-shadow: 0 0 0 3px rgba(10,10,10,0.06);
}
.light-page .sheet-field .lbl {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: #A0A0A0;
}
.light-page .sheet-btn {
  border: 1px solid #E8E8E8;
  border-radius: 8px;
  padding: 9px 14px;
  font-family: var(--ff-sans);
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--preto);
  transition: all 0.18s ease;
}
.light-page .sheet-btn:hover {
  border-color: #C8C8C8;
  background: #FAFAFA;
  transform: translateY(-1px);
}
.light-page .sheet-btn.primary {
  background: var(--preto);
  color: var(--branco);
  border-color: var(--preto);
  box-shadow: 0 4px 12px -6px rgba(10,10,10,0.35);
}
.light-page .sheet-btn.primary:hover {
  background: var(--preto);
  box-shadow: 0 8px 18px -8px rgba(10,10,10,0.45);
}
.light-page .sheet-summary {
  border: 1px solid #ECECEC;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(10,10,10,0.02), 0 12px 28px -20px rgba(10,10,10,0.10);
  margin-bottom: 24px;
}
.light-page .sheet-summary-cell {
  border-right-color: #F0F0F0;
  border-bottom-color: #F0F0F0;
  padding: 18px 20px;
}
.light-page .sheet-summary-cell .label {
  font-size: 10px;
  letter-spacing: 0.16em;
}
.light-page .sheet-summary-cell .v {
  font-size: 22px;
  letter-spacing: -0.02em;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.light-page .sheet-wrap {
  border: 1px solid #ECECEC;
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(10,10,10,0.02), 0 12px 28px -20px rgba(10,10,10,0.10);
}
.light-page .sheet-row { border-bottom-color: #F0F0F0; }
.light-page .sheet-row > div { border-right-color: #F0F0F0; }
.light-page .sheet-row.head > div { background: #FAFAFA; }

/* --- Tráfego --- */
.light-page .trafego-account-bar {
  border-radius: 14px;
  padding: 20px 24px;
  border: 1px solid #ECECEC;
  background: linear-gradient(180deg, #FFFFFF 0%, #FCFCFC 100%);
  box-shadow: 0 1px 0 rgba(10,10,10,0.02), 0 8px 24px -16px rgba(10,10,10,0.10);
  margin-bottom: 28px;
}
.light-page .trafego-account-bar .kicker {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: #A0A0A0;
}
.light-page .trafego-account-bar .name {
  font-family: var(--ff-sans);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.light-page .trafego-account-actions .btn-primary,
.light-page .trafego-account-actions .btn-secondary {
  border-radius: 8px;
  padding: 9px 16px;
  font-size: 12.5px;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.light-page .trafego-account-actions .btn-primary {
  box-shadow: 0 4px 12px -6px rgba(10,10,10,0.35);
}
.light-page .trafego-account-actions .btn-primary:hover,
.light-page .trafego-account-actions .btn-secondary:hover {
  transform: translateY(-1px);
}
.light-page .trafego-camps { gap: 12px; }
.light-page .trafego-camp {
  border: 1px solid #ECECEC;
  border-radius: 12px;
  padding: 18px;
  background: var(--branco-puro);
  box-shadow: 0 1px 0 rgba(10,10,10,0.02);
  transition: transform 0.2s ease, box-shadow 0.22s ease, border-color 0.2s ease;
}
.light-page .trafego-camp:hover {
  transform: translateY(-2px);
  border-color: #D8D8D8;
  box-shadow: 0 12px 24px -16px rgba(10,10,10,0.20);
}
.light-page .trafego-camp .status {
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 9.5px;
  letter-spacing: 0.10em;
}

/* --- Processos (Método) — grid de blocos --- */
.light-page .light-grid {
  border: 1px solid #ECECEC;
  border-radius: 14px;
  overflow: hidden;
  background: var(--branco-puro);
  box-shadow: 0 1px 0 rgba(10,10,10,0.02), 0 12px 28px -20px rgba(10,10,10,0.10);
}
.light-page .light-cell {
  border-right-color: #F0F0F0;
  border-bottom-color: #F0F0F0;
  transition: background 0.18s ease;
}
.light-page .light-cell:hover { background: #FCFCFC; }
.light-page .light-cell .foot { border-top-color: #F0F0F0; }

/* --- Agenda --- */
.light-page .cal-toolbar {
  border: 1px solid #ECECEC;
  border-radius: 14px;
  padding: 14px 18px;
  background: var(--branco-puro);
  box-shadow: 0 1px 0 rgba(10,10,10,0.02), 0 8px 22px -18px rgba(10,10,10,0.10);
}
.light-page .cal-btn {
  border: 1px solid #E8E8E8;
  border-radius: 8px;
  padding: 8px 14px;
  font-family: var(--ff-sans);
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--preto);
  transition: all 0.18s ease;
}
.light-page .cal-btn:hover {
  border-color: #C8C8C8;
  background: #FAFAFA;
  transform: translateY(-1px);
}
.light-page .cal-btn.primary {
  background: var(--preto);
  color: var(--branco);
  border-color: var(--preto);
  box-shadow: 0 4px 12px -6px rgba(10,10,10,0.35);
}
.light-page .cal-btn.primary:hover {
  background: var(--preto);
  box-shadow: 0 8px 18px -8px rgba(10,10,10,0.45);
}
.light-page .cal-icon-btn {
  border: 1px solid #E8E8E8;
  border-radius: 8px;
  transition: all 0.15s ease;
}
.light-page .cal-icon-btn:hover {
  border-color: #C8C8C8;
  background: #FAFAFA;
}
.light-page .cal-views {
  border: 1px solid #E8E8E8;
  border-radius: 8px;
  background: #FAFAFA;
  padding: 3px;
  gap: 2px;
}
.light-page .cal-view-btn {
  border-radius: 6px;
  padding: 6px 14px;
  font-family: var(--ff-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  transition: all 0.15s ease;
}
.light-page .cal-view-btn + .cal-view-btn { border-left: none; }
.light-page .cal-view-btn:hover { background: rgba(10,10,10,0.04); color: var(--preto); }
.light-page .cal-view-btn.active {
  background: var(--branco-puro);
  color: var(--preto);
  box-shadow: 0 1px 3px rgba(10,10,10,0.08), 0 0 0 1px rgba(10,10,10,0.04);
}
.light-page .cal-container {
  border: 1px solid #ECECEC;
  border-radius: 14px;
  overflow: hidden;
  background: var(--branco-puro);
  box-shadow: 0 1px 0 rgba(10,10,10,0.02), 0 12px 28px -20px rgba(10,10,10,0.10);
}
.light-page .cal-gsync {
  border-radius: 10px;
}

/* --- Botões padrão dentro de light-pages --- */
.light-page .btn-primary,
.light-page .btn-secondary {
  border-radius: 8px;
  padding: 9px 16px;
  font-size: 12.5px;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.light-page .btn-primary {
  box-shadow: 0 4px 12px -6px rgba(10,10,10,0.35);
}
.light-page .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -8px rgba(10,10,10,0.45);
}
.light-page .btn-secondary {
  border-color: #E8E8E8;
}
.light-page .btn-secondary:hover {
  transform: translateY(-1px);
  border-color: #C8C8C8;
  background: #FAFAFA;
}

/* --- Filtros de propostas --- */
.light-page .proposals-filters .sheet-field select { min-width: 160px; }

@media (max-width: 1100px) {
  .light-page .flow-kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 800px) {
  .light-page .trafego-account-bar { padding: 16px 18px; border-radius: 12px; }
}

/* ============================================================
   Gestão · Método (lightProcessos) — timeline interativa
   - Variant selector (4 variantes, default = 01)
   - Stepper (7 etapas clicáveis)
   - Detail panel (mostra apenas a etapa selecionada)
============================================================ */

/* Hero */
#lightProcessos .method-hero {
  margin: 0 0 28px;
  padding: 56px 48px;
  background: var(--preto);
  color: var(--branco);
  border-radius: 16px;
  box-shadow: 0 12px 32px -16px rgba(10,10,10,0.30);
}
#lightProcessos .method-hero-inner { max-width: 720px; }
#lightProcessos .method-hero-kicker {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cinza-medio);
  margin-bottom: 18px;
}
#lightProcessos .method-hero-quote {
  font-size: 36px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 12px;
}
#lightProcessos .method-hero-sub {
  margin: 0;
  font-size: 16px;
  color: var(--cinza-claro);
  font-style: italic;
}
@media (max-width: 720px){
  #lightProcessos .method-hero { padding: 36px 24px; }
  #lightProcessos .method-hero-quote { font-size: 26px; }
}

/* Variant selector */
#lightProcessos .method-variant-selector {
  background: var(--branco-puro);
  border: 1px solid #ECECEC;
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 16px;
  box-shadow: 0 1px 0 rgba(10,10,10,0.02), 0 8px 24px -18px rgba(10,10,10,0.10);
}
#lightProcessos .mvs-label {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #A0A0A0;
  margin-bottom: 12px;
}
#lightProcessos .mvs-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
@media (max-width: 1000px) {
  #lightProcessos .mvs-options { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  #lightProcessos .mvs-options { grid-template-columns: 1fr; }
}
#lightProcessos .mvs-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--branco-puro);
  border: 1px solid #E8E8E8;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: all 0.18s ease;
  font-family: inherit;
}
#lightProcessos .mvs-option:hover {
  border-color: #C8C8C8;
  background: #FCFCFC;
  transform: translateY(-1px);
}
#lightProcessos .mvs-option .num {
  font-family: var(--ff-mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--cinza-medio);
  flex-shrink: 0;
  width: 28px;
  text-align: center;
  transition: color 0.15s ease;
}
#lightProcessos .mvs-option .name {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--asfalto);
  line-height: 1.3;
}
#lightProcessos .mvs-option.active {
  background: var(--preto);
  border-color: var(--preto);
  box-shadow: 0 6px 16px -8px rgba(10,10,10,0.35);
}
#lightProcessos .mvs-option.active .num { color: var(--cinza-claro); }
#lightProcessos .mvs-option.active .name { color: var(--branco); }

/* Variant context note */
#lightProcessos .method-variant-note {
  display: flex;
  align-items: baseline;
  gap: 14px;
  background: #FFF8E6;
  border: 1px solid #F0E1B0;
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 20px;
  animation: zaMvNote 0.25s ease-out;
}
#lightProcessos .method-variant-note[hidden] { display: none; }
@keyframes zaMvNote {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
#lightProcessos .mvn-kicker {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8A6612;
  flex-shrink: 0;
}
#lightProcessos .mvn-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--asfalto);
}

/* Stepper (timeline clicável) */
#lightProcessos .method-stepper {
  position: sticky;
  top: 12px;
  z-index: 5;
  background: var(--branco-puro);
  border: 1px solid #ECECEC;
  border-radius: 14px;
  padding: 18px 14px 22px;
  margin: 0 0 28px;
  box-shadow: 0 4px 16px -10px rgba(10,10,10,0.10);
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  position: relative;
}
#lightProcessos .method-stepper::before {
  content: '';
  position: absolute;
  left: calc(7.14% + 6px);
  right: calc(7.14% + 6px);
  top: 51px;
  height: 1px;
  background: #E5E5E5;
  z-index: 0;
}
#lightProcessos .method-stepper .step {
  position: relative;
  z-index: 1;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 4px 0;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: transform 0.18s ease;
}
#lightProcessos .method-stepper .step:hover { transform: translateY(-2px); }
#lightProcessos .method-stepper .step .s-num {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #A0A0A0;
  font-weight: 500;
  transition: color 0.15s ease;
}
#lightProcessos .method-stepper .step .s-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--branco-puro);
  border: 1.5px solid #CCC;
  transition: all 0.2s ease;
}
#lightProcessos .method-stepper .step .s-name {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--asfalto);
  letter-spacing: -0.005em;
  transition: color 0.15s ease;
}
#lightProcessos .method-stepper .step:hover .s-dot {
  background: var(--preto);
  border-color: var(--preto);
}
#lightProcessos .method-stepper .step:hover .s-num,
#lightProcessos .method-stepper .step:hover .s-name { color: var(--preto); }
#lightProcessos .method-stepper .step.active .s-dot {
  background: var(--preto);
  border-color: var(--preto);
  width: 14px; height: 14px;
  box-shadow: 0 0 0 4px var(--branco-puro), 0 0 0 5px var(--preto);
}
#lightProcessos .method-stepper .step.active .s-num { color: var(--preto); font-weight: 600; }
#lightProcessos .method-stepper .step.active .s-name { color: var(--preto); font-weight: 600; }
@media (max-width: 720px) {
  #lightProcessos .method-stepper { grid-template-columns: repeat(7, minmax(60px, 1fr)); overflow-x: auto; }
  #lightProcessos .method-stepper .step .s-name { font-size: 10px; }
}

/* Detail Panel */
#lightProcessos .method-detail {
  margin-bottom: 48px;
}
#lightProcessos .step-panel {
  animation: zaStepFade 0.28s ease-out;
}
#lightProcessos .step-panel[hidden] { display: none; }
@keyframes zaStepFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
#lightProcessos .step-panel .sp-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid #ECECEC;
}
#lightProcessos .step-panel .sp-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--preto);
  color: var(--branco);
  font-family: var(--ff-mono);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  flex-shrink: 0;
  box-shadow: 0 8px 20px -10px rgba(10,10,10,0.40);
}
#lightProcessos .step-panel .sp-titles { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#lightProcessos .step-panel .sp-titles h2 {
  margin: 0;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
#lightProcessos .step-panel .sp-tagline {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--cinza-medio);
  text-transform: uppercase;
}

/* Grupos de conteúdo */
#lightProcessos .method-groups { display: grid; gap: 16px; }
#lightProcessos .method-groups.one-col   { grid-template-columns: 1fr; }
#lightProcessos .method-groups.two-col   { grid-template-columns: repeat(2, 1fr); }
#lightProcessos .method-groups.three-col { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) {
  #lightProcessos .method-groups.three-col { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  #lightProcessos .method-groups.two-col,
  #lightProcessos .method-groups.three-col { grid-template-columns: 1fr; }
}
#lightProcessos .method-group {
  padding: 22px 24px;
  background: var(--branco-puro);
  border: 1px solid #ECECEC;
  border-radius: 12px;
  box-shadow: 0 1px 0 rgba(10,10,10,0.02);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#lightProcessos .method-group:hover {
  border-color: #D8D8D8;
  box-shadow: 0 8px 20px -14px rgba(10,10,10,0.16);
}
#lightProcessos .method-group h3 {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--preto);
  padding-bottom: 10px;
  border-bottom: 1px solid #F0F0F0;
}

/* Checklist */
#lightProcessos .method-checklist {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 8px;
}
#lightProcessos .method-checklist li {
  position: relative;
  padding: 6px 0 6px 24px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--asfalto);
}
#lightProcessos .method-checklist li::before {
  content: '';
  position: absolute;
  left: 0; top: 12px;
  width: 14px; height: 14px;
  border: 1.5px solid #D4D4D4;
  border-radius: 4px;
  background: var(--branco-puro);
  transition: all 0.15s ease;
}
#lightProcessos .method-checklist li::after {
  content: '';
  position: absolute;
  left: 4px; top: 16px;
  width: 6px; height: 3px;
  border-left: 1.5px solid var(--preto);
  border-bottom: 1.5px solid var(--preto);
  transform: rotate(-45deg);
  opacity: 0;
  transition: opacity 0.15s ease;
}
#lightProcessos .method-checklist li:hover::before { border-color: var(--preto); background: var(--preto); }
#lightProcessos .method-checklist li:hover::after { opacity: 1; border-color: var(--branco); }
#lightProcessos .method-checklist li strong { color: var(--preto); font-weight: 600; }

/* Seções (Documentos) */
#lightProcessos .method-section {
  padding: 40px 0 16px;
  border-top: 1px solid #ECECEC;
}
#lightProcessos .method-section-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 24px;
}
#lightProcessos .method-num {
  font-family: var(--ff-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--cinza-medio);
  padding: 4px 10px;
  border: 1px solid #E8E8E8;
  border-radius: 999px;
  background: #FAFAFA;
}
#lightProcessos .method-section-head h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
#lightProcessos .method-tagline {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--cinza-medio);
  text-transform: uppercase;
  margin-left: auto;
}

/* Documentos (cards clicáveis = <a>) */
#lightProcessos .method-docs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
#lightProcessos .method-doc {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 22px;
  background: var(--branco-puro);
  border: 1px solid #ECECEC;
  border-radius: 12px;
  box-shadow: 0 1px 0 rgba(10,10,10,0.02);
  transition: border-color 0.2s ease, box-shadow 0.22s ease, transform 0.2s ease;
  text-decoration: none;
  color: inherit;
}
#lightProcessos .method-doc:hover {
  border-color: var(--preto);
  box-shadow: 0 12px 24px -14px rgba(10,10,10,0.22);
  transform: translateY(-2px);
}
#lightProcessos .method-doc .md-kicker {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #A0A0A0;
}
#lightProcessos .method-doc h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--preto);
}
#lightProcessos .method-doc p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--asfalto);
}
#lightProcessos .method-doc .md-meta {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid #F0F0F0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--cinza-medio);
}
#lightProcessos .method-doc .md-type {
  background: var(--preto);
  color: var(--branco);
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.08em;
  font-weight: 600;
}
#lightProcessos .method-doc .md-loc {
  flex: 1;
  text-align: right;
  font-weight: 500;
  color: var(--preto);
}
#lightProcessos .method-doc:hover .md-loc { text-decoration: underline; }

/* Signature */
#lightProcessos .method-signature {
  margin-top: 48px;
  padding: 28px 32px;
  border-top: 1px solid #ECECEC;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
#lightProcessos .method-signature .ms-quote {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--preto);
  font-style: italic;
}
#lightProcessos .method-signature .ms-version {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cinza-medio);
}

/* ============================================================
   Marketing · Tráfego (Meta Ads)
============================================================ */
.meta-accounts-list {
  margin-top: var(--s-24);
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.meta-account-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-16);
  background: var(--branco-puro);
  border: 1px solid var(--cinza-borda);
  transition: border-color 0.15s;
  cursor: pointer;
}
.meta-account-row:hover { border-color: var(--asfalto); }
.meta-account-row .info { display: flex; flex-direction: column; gap: 2px; }
.meta-account-row .info .nm { font-weight: 500; color: var(--preto); }
.meta-account-row .info .meta {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--cinza-medio);
}
.meta-account-row .pick {
  font-family: var(--ff-mono);
  font-size: 11px;
  padding: 6px 14px;
  border: 1px solid var(--preto);
  background: var(--preto);
  color: var(--branco);
  border-radius: 2px;
  cursor: pointer;
}

.trafego-account-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-16);
  background: var(--branco-puro);
  border: 1px solid var(--cinza-borda);
  padding: var(--s-16) var(--s-24);
  margin-bottom: var(--s-24);
  flex-wrap: wrap;
}
.trafego-account-bar .kicker {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cinza-medio);
}
.trafego-account-bar .name {
  font-family: var(--ff-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--preto);
  margin-top: 2px;
}
.trafego-account-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.trafego-camps { display: flex; flex-direction: column; gap: 8px; }
.trafego-camp {
  display: grid;
  grid-template-columns: 1fr auto auto auto auto;
  align-items: center;
  gap: var(--s-16);
  padding: var(--s-16);
  background: var(--branco-puro);
  border: 1px solid var(--cinza-borda);
  font-family: var(--ff-mono);
  font-size: 12px;
  transition: border-color 0.15s;
  cursor: pointer;
}
.trafego-camp:hover { border-color: var(--asfalto); }
.trafego-camp .info { display: flex; flex-direction: column; gap: 4px; }
.trafego-camp .nm {
  font-family: var(--ff-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--preto);
}
.trafego-camp .sub {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--cinza-medio);
  text-transform: uppercase;
}
.trafego-camp .stat { text-align: right; }
.trafego-camp .stat .v { display: block; font-weight: 600; color: var(--preto); font-size: 13px; }
.trafego-camp .stat .k {
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--cinza-medio);
  text-transform: uppercase;
}
.trafego-camp .status {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 2px;
  font-weight: 600;
}
.trafego-camp .status.active   { background: rgba(31,107,58,0.12); color: var(--acc-receita); }
.trafego-camp .status.paused   { background: rgba(136,136,136,0.12); color: var(--cinza-medio); }
.trafego-camp .status.deleted,
.trafego-camp .status.archived { background: rgba(183,67,46,0.12); color: var(--acc-despesa); }
@media (max-width: 900px){
  .trafego-camp {
    grid-template-columns: 1fr 1fr;
  }
  .trafego-camp .status { grid-column: 1 / -1; justify-self: start; }
}

/* ============================================================
   Projetos · Novo projeto (modal)
============================================================ */
.projects-head-actions {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  flex-wrap: wrap;
}

#newProjectDialog {
  position: fixed; inset: 0; z-index: 220;
  display: none; align-items: center; justify-content: center;
  background: rgba(10,10,10,0.6);
  backdrop-filter: blur(8px);
  padding: var(--s-24);
}
#newProjectDialog.visible { display: flex; }
.np-card {
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: 2px;
  width: 640px; max-width: 100%;
  padding: var(--s-32);
  position: relative;
  box-shadow: 0 30px 80px -20px rgba(10,10,10,0.5);
}
.np-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--cinza-borda);
  border-radius: 50%;
  color: var(--asfalto);
  cursor: pointer;
  transition: background 0.15s;
}
.np-close:hover { background: var(--cinza-borda); }
.np-kicker {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cinza-medio);
  margin-bottom: 8px;
}
.np-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--preto);
  margin-bottom: 8px;
}
.np-msg {
  font-size: 13px;
  color: var(--asfalto);
  line-height: 1.5;
  margin-bottom: var(--s-24);
}
.np-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-16);
}
.np-field { display: flex; flex-direction: column; gap: 6px; }
.np-field.full { grid-column: 1 / -1; }
.np-field .lbl {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cinza-medio);
}
.np-field input[type="text"] {
  font-family: var(--ff-sans);
  font-size: 14px;
  padding: 10px 12px;
  background: var(--branco-puro);
  border: 1px solid var(--cinza-borda);
  border-radius: 2px;
  color: var(--preto);
  transition: border-color 0.15s;
}
.np-field input[type="text"]:focus {
  outline: none;
  border-color: var(--preto);
}
.np-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.np-chips label { cursor: pointer; }
.np-chips input { display: none; }
.np-chips span {
  display: inline-block;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 8px 12px;
  border: 1px solid var(--cinza-borda);
  background: var(--branco-puro);
  color: var(--asfalto);
  border-radius: 2px;
  transition: all 0.15s;
}
.np-chips label:hover span { border-color: var(--asfalto); }
.np-chips input:checked + span {
  background: var(--preto);
  color: var(--branco);
  border-color: var(--preto);
}
.np-status {
  font-size: 12px;
  color: var(--cinza-medio);
  min-height: 18px;
  margin-top: var(--s-16);
}
.np-status.error { color: var(--acc-despesa); }
.np-status.ok { color: var(--acc-receita); }
.np-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-8);
  margin-top: var(--s-16);
}
@media (max-width: 600px){
  .np-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Modal de Gerenciamento (categorias / fontes)
============================================================ */
#manageModal {
  position: fixed; inset: 0; z-index: 140;
  pointer-events: none;
}
#manageModal .mm-overlay {
  position: absolute; inset: 0;
  background: rgba(10,10,10,0.55);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.3s;
}
#manageModal .mm-panel {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, calc(-50% + 12px));
  width: 480px; max-width: calc(100vw - 48px);
  max-height: calc(100vh - 80px);
  max-height: calc(100dvh - 80px);
  display: flex; flex-direction: column;
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: 2px;
  box-shadow: 0 30px 80px -20px rgba(10,10,10,0.35);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s;
}
#manageModal.visible { pointer-events: auto; }
#manageModal.visible .mm-overlay { opacity: 1; }
#manageModal.visible .mm-panel {
  transform: translate(-50%, -50%);
  opacity: 1;
}
.mm-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: var(--s-24) var(--s-24) var(--s-16);
  border-bottom: 1px solid var(--cinza-borda);
}
.mm-head .label {
  font-family: var(--ff-mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--cinza-medio);
  margin-bottom: 4px;
}
.mm-head h2 {
  font-size: 20px; font-weight: 600; letter-spacing: -0.01em;
}
.mm-close {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--cinza-borda); border-radius: 2px;
  background: var(--branco-puro);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.mm-close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.mm-close:hover { background: var(--preto); color: var(--branco); border-color: var(--preto); }

.mm-add {
  display: flex; gap: var(--s-8);
  padding: var(--s-16) var(--s-24);
  border-bottom: 1px solid var(--cinza-borda);
}
.mm-add input {
  flex: 1;
  font-family: var(--ff-sans); font-size: 14px; color: var(--preto);
  background: var(--branco-puro);
  border: 1px solid var(--cinza-borda);
  border-radius: 2px;
  padding: 10px 12px;
  outline: none;
  transition: border-color 0.15s;
}
.mm-add input:focus { border-color: var(--preto); }
.mm-add button {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--ff-mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--branco); background: var(--preto);
  border: 1px solid var(--preto); border-radius: 2px;
  padding: 10px 14px; cursor: pointer;
  transition: background 0.15s;
}
.mm-add button:hover { background: #1A1A1A; }
.mm-add button:disabled { opacity: 0.4; cursor: not-allowed; }

.mm-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}
.mm-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--s-8);
  align-items: center;
  padding: 10px var(--s-24);
  border-bottom: 1px solid #F4F4F4;
  transition: background 0.15s;
}
.mm-item:hover { background: #FAFAFA; }
.mm-item:last-child { border-bottom: none; }
.mm-item .name { font-size: 14px; color: var(--preto); }
.mm-item .count {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--cinza-medio);
  letter-spacing: 0.04em;
}
.mm-item .rem {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--cinza-borda); border-radius: 2px;
  background: var(--branco-puro);
  color: var(--cinza-medio);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.mm-item .rem svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; }
.mm-item .rem:hover:not(:disabled) { border-color: var(--preto); color: var(--preto); background: #FFFFFF; }
.mm-item .rem:disabled { opacity: 0.35; cursor: not-allowed; }

.mm-error {
  padding: 10px var(--s-24);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--preto);
  background: #F4F4F4;
  border-top: 1px solid var(--cinza-borda);
  min-height: 0;
  max-height: 0;
  overflow: hidden;
  padding-top: 0; padding-bottom: 0;
  transition: max-height 0.25s, padding 0.25s;
}
.mm-error.show {
  max-height: 60px;
  padding-top: 10px; padding-bottom: 10px;
}

.mm-foot {
  padding: var(--s-16) var(--s-24);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--cinza-medio);
  border-top: 1px solid var(--cinza-borda);
}

/* ============================================================
   LIGHT PAGE — Propostas
============================================================ */
.proposals-summary {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: 1px solid var(--cinza-borda);
  margin-bottom: var(--s-24);
  background: var(--branco-puro);
}
.proposals-summary .cell {
  padding: var(--s-16) var(--s-24);
  border-right: 1px solid var(--cinza-borda);
}
.proposals-summary .cell:last-child { border-right: none; }
.proposals-summary .cell .label {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cinza-medio);
  margin-bottom: 6px;
}
.proposals-summary .cell .big {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.proposals-summary .cell .sub {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--cinza-medio);
  margin-top: 2px;
}

.proposals-filters { display: flex; gap: var(--s-16); align-items: flex-end; }

.proposals-list {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--cinza-borda);
  background: var(--branco-puro);
}
.proposal-row {
  display: grid;
  grid-template-columns: 2fr 1.2fr 160px 140px 140px 36px;
  align-items: center;
  padding: var(--s-16) var(--s-24);
  border-bottom: 1px solid var(--cinza-borda);
  cursor: pointer;
  transition: background 0.15s, padding 0.2s;
  gap: var(--s-16);
}
.proposal-row .actions {
  display: flex; justify-content: flex-end;
}
.proposal-row .row-del {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent;
  border-radius: 2px; cursor: pointer;
  color: var(--cinza-medio);
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  opacity: 0; /* só aparece no hover da linha */
}
.proposal-row:hover .row-del { opacity: 1; }
.proposal-row .row-del:hover {
  color: var(--acc-despesa);
  border-color: var(--acc-despesa);
  background: #FBEBE7;
}
.proposal-row .row-del svg { display: block; }
.proposal-row:last-child { border-bottom: none; }
.proposal-row:hover { background: #FAFAFA; }
.proposal-row.head {
  padding-top: 12px;
  padding-bottom: 12px;
  background: #FCFCFC;
  cursor: default;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cinza-medio);
}
.proposal-row.head:hover { background: #FCFCFC; }
.proposal-row .pid {
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--preto);
}
.proposal-row .client .primary {
  font-size: 15px; font-weight: 500; color: var(--preto);
  margin-bottom: 2px;
}
.proposal-row .client .secondary {
  font-size: 13px; color: var(--cinza-medio);
}
.proposal-row .project {
  font-size: 13px; color: var(--asfalto);
}
.proposal-row .val {
  font-family: var(--ff-mono);
  font-size: 15px;
  font-weight: 500;
  color: var(--preto);
  font-variant-numeric: tabular-nums;
}
.proposal-row .when {
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--cinza-medio);
}
.proposal-row .when small {
  display: block; margin-top: 2px; font-size: 10px; letter-spacing: 0.04em;
}

.p-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 2px;
  border: 1px solid var(--cinza-borda);
  background: var(--branco-puro);
  color: var(--preto);
  white-space: nowrap;
}
.p-status::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cinza-medio);
}
.p-status.pendente  { background: #FAFAFA; }
.p-status.pendente::before  { background: var(--cinza-medio); }
.p-status.enviada   { background: #F5F5F5; color: var(--preto); border-color: var(--cinza-medio); }
.p-status.enviada::before   { background: var(--asfalto); }
.p-status.aceita    { background: #E6F2EA; color: var(--acc-receita); border-color: var(--acc-receita); }
.p-status.aceita::before    { background: var(--acc-receita); }
.p-status.recusada  { background: #F5E6E3; color: var(--acc-despesa); border-color: var(--acc-despesa); }
.p-status.recusada::before  { background: var(--acc-despesa); }
.p-status.vencida   { background: var(--preto); color: var(--branco); border-color: var(--preto); }
.p-status.vencida::before   { background: var(--branco); }
.p-status.espera    { background: #FFF7E6; color: #8A5A00; border-color: #E6B84D; }
.p-status.espera::before    { background: #E6B84D; }

@media (max-width: 1100px) {
  .proposals-summary { grid-template-columns: repeat(2, 1fr); }
  .proposals-summary .cell:nth-child(2n) { border-right: none; }
  .proposals-summary .cell:not(:nth-last-child(-n+1)) { border-bottom: 1px solid var(--cinza-borda); }
}
@media (max-width: 820px) {
  .proposal-row { grid-template-columns: 1fr; gap: 6px; }
  .proposal-row.head { display: none; }
}

/* ============================================================
   Slide-over de Documentação Burocrática
   (reutilizado em Clientes e Propostas)
============================================================ */
#docModal {
  position: fixed; inset: 0; z-index: 130;
  pointer-events: none;
}
#docModal .doc-overlay {
  position: absolute; inset: 0;
  background: rgba(10,10,10,0.55);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.3s;
}
#docModal .doc-panel {
  position: absolute;
  top: 0; right: 0;
  width: 680px; max-width: 100vw;
  height: 100%;
  background: var(--branco);
  display: flex; flex-direction: column;
  transform: translateX(40px);
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.35s;
  box-shadow: -20px 0 60px -20px rgba(10,10,10,0.30);
  overflow-y: auto;
}
#docModal.visible { pointer-events: auto; }
#docModal.visible .doc-overlay { opacity: 1; }
#docModal.visible .doc-panel { transform: translateX(0); opacity: 1; }

.doc-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: var(--s-32) var(--s-32) var(--s-24);
  border-bottom: 1px solid var(--cinza-borda);
}
.doc-head .label {
  font-family: var(--ff-mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--cinza-medio);
  margin-bottom: 8px;
}
.doc-head h2 {
  font-size: 28px; font-weight: 700; letter-spacing: -0.015em;
  color: var(--preto);
}
.doc-head .project {
  font-size: 15px; font-weight: 300;
  color: var(--asfalto); margin-top: 4px;
}
.doc-close {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--cinza-borda); border-radius: 2px;
  background: var(--branco-puro);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.doc-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.doc-close:hover { background: var(--preto); color: var(--branco); border-color: var(--preto); }

.doc-body { padding: var(--s-24) var(--s-32) var(--s-40); }
.doc-section-title {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cinza-medio);
  margin-bottom: var(--s-16);
}

.doc-items {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--cinza-borda);
}
.doc-item {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: var(--s-16);
  align-items: center;
  padding: var(--s-16) var(--s-24);
  border-bottom: 1px solid var(--cinza-borda);
  background: var(--branco-puro);
}
.doc-item:last-child { border-bottom: none; }

.doc-item .num {
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--cinza-medio);
  letter-spacing: 0.05em;
}
.doc-item .info .title {
  font-size: 15px; font-weight: 500; color: var(--preto); margin-bottom: 2px;
}
.doc-item .info .hint {
  font-size: 12px; color: var(--cinza-medio);
}
.doc-item .info .date {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--cinza-medio);
  margin-top: 4px;
}

.doc-status-group {
  display: inline-flex;
  border: 1px solid var(--cinza-borda);
  border-radius: 2px;
  overflow: hidden;
  background: var(--branco-puro);
}
.doc-status-opt {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 12px;
  background: var(--branco-puro);
  color: var(--cinza-medio);
  border: none;
  border-right: 1px solid var(--cinza-borda);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.doc-status-opt:last-child { border-right: none; }
.doc-status-opt:hover { background: #FAFAFA; color: var(--preto); }
.doc-status-opt.active.pendente   { background: #F5F5F5; color: var(--preto); }
.doc-status-opt.active.andamento  { background: var(--asfalto); color: var(--branco); }
.doc-status-opt.active.concluido  { background: var(--acc-receita); color: #FFFFFF; }

.doc-progress {
  margin-top: var(--s-24);
  padding: var(--s-16) var(--s-24);
  background: var(--branco-puro);
  border: 1px solid var(--cinza-borda);
  display: flex;
  align-items: center;
  gap: var(--s-24);
}
.doc-progress .label {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cinza-medio);
}
.doc-progress .track {
  flex: 1;
  height: 4px;
  background: #EAEAEA;
  position: relative;
}
.doc-progress .fill {
  position: absolute; top: 0; left: 0; bottom: 0;
  background: var(--preto);
  width: 0%;
  transition: width 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.doc-progress .value {
  font-family: var(--ff-mono);
  font-size: 14px; font-weight: 600;
  color: var(--preto);
  font-variant-numeric: tabular-nums;
}
.doc-progress .value small { font-weight: 400; font-size: 10px; color: var(--cinza-medio); }

@media (max-width: 640px) {
  .doc-head, .doc-body { padding-left: var(--s-24); padding-right: var(--s-24); }
  .doc-item { grid-template-columns: 1fr; }
  .doc-item .num { display: none; }
  .doc-item .doc-status-group { justify-self: start; }
}

/* ============================================================
   EDITOR DE PROPOSTA — Fullscreen (Briefing + Proposta)
============================================================ */
.proposal-editor {
  position: fixed; inset: 0;
  z-index: 120;
  background: var(--branco);
  color: var(--preto);
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.proposal-editor.visible { display: flex; }

.pe-top {
  display: grid;
  grid-template-columns: 220px 1fr 220px;
  align-items: center;
  padding: var(--s-24) var(--s-32);
  border-bottom: 1px solid var(--cinza-borda);
  background: var(--branco-puro);
  gap: var(--s-24);
  flex-shrink: 0;
}
.pe-back {
  display: inline-flex; align-items: center; gap: var(--s-8);
  background: none; border: none; cursor: pointer;
  padding: 0; color: var(--preto);
  text-align: left;
}
.pe-back .brand-top { display: inline-flex; align-items: center; gap: 6px; }
.pe-back .back-arrow { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; transition: transform 0.2s; }
.pe-back .name { font-weight: 600; font-size: 15px; }
.pe-back .back-label {
  font-family: var(--ff-mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--cinza-medio); margin-left: var(--s-16);
}
.pe-back:hover .back-arrow { transform: translateX(-3px); }

.pe-center {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
}
.pe-meta {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--ff-mono); font-size: 11px;
  color: var(--cinza-medio); letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pe-meta .client { color: var(--preto); font-weight: 500; text-transform: none; letter-spacing: 0; font-family: var(--ff-sans); font-size: 14px; }

.pe-tabs {
  display: inline-flex; gap: 0;
  border: 1px solid var(--cinza-borda); border-radius: 2px;
  background: var(--branco-puro);
}
.pe-tab {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 10px 22px;
  border: none; background: transparent;
  color: var(--cinza-medio); cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.pe-tab + .pe-tab { border-left: 1px solid var(--cinza-borda); }
.pe-tab:hover { color: var(--preto); }
.pe-tab.active { color: var(--branco); background: var(--preto); }

.pe-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--s-12); }
.pe-status-wrap {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px 6px 12px;
  border: 1px solid var(--cinza-borda);
  border-radius: 2px; background: var(--branco-puro);
}
.pe-status-lbl {
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--cinza-medio);
}
.pe-status-select {
  border: 0; background: transparent;
  font-family: var(--ff-sans); font-size: 13px; font-weight: 500;
  color: var(--preto); cursor: pointer; outline: none;
  padding-right: 4px;
}
/* Botões na barra de ações do editor (Imprimir/Excluir) ficam com a mesma
   altura do .pe-status-wrap (status select à esquerda) — alinhamento visual. */
.pe-actions .sheet-btn { padding: 6px 14px; }

.pe-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--s-40) var(--s-32);
  background: var(--branco);
}
.pe-pane[hidden] { display: none; }
.pe-pane {
  max-width: 1080px; margin: 0 auto;
}

.pe-pane-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: var(--s-40);
  gap: var(--s-32); padding-bottom: var(--s-24);
  border-bottom: 1px solid var(--cinza-borda);
}
.pe-pane-head .kicker {
  font-family: var(--ff-mono); font-size: 10px;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--cinza-medio); margin-bottom: 8px;
}
.pe-pane-head h1 {
  font-size: 38px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.05;
}
.pe-pane-head .subtitle {
  font-size: 15px; color: var(--cinza-medio); margin-top: 8px;
}
.pe-pane-head-right .hint {
  font-family: var(--ff-mono); font-size: 10px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--cinza-medio);
  max-width: 240px; text-align: right;
  line-height: 1.5;
}

.pe-block {
  margin-bottom: var(--s-40);
}
.pe-block-title {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--preto);
  margin-bottom: var(--s-24);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--cinza-borda);
}
.pe-block-title small {
  font-size: 10px; color: var(--cinza-medio);
  font-weight: 400; margin-left: 8px;
  letter-spacing: 0.08em;
}
.pe-block-diag { background: #FCFCFC; padding: var(--s-24); border: 1px solid var(--cinza-borda); }

.pe-grid {
  display: grid;
  gap: var(--s-24);
}
.pe-grid.cols-1 { grid-template-columns: 1fr; }
.pe-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.pe-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.pe-grid + .pe-grid { margin-top: var(--s-24); }

.pe-field { display: flex; flex-direction: column; gap: 8px; }
.pe-field.full { grid-column: 1 / -1; }
.pe-field .lbl {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cinza-medio);
}
.pe-field input[type="text"],
.pe-field input[type="date"],
.pe-field textarea {
  font-family: var(--ff-sans);
  font-size: 14px;
  color: var(--preto);
  background: var(--branco-puro);
  border: 1px solid var(--cinza-borda);
  border-radius: 2px;
  padding: 10px 12px;
  outline: none;
  transition: border-color 0.15s;
  resize: vertical;
  min-height: 40px;
  width: 100%;
}
.pe-field textarea { font-family: var(--ff-sans); line-height: 1.5; }
.pe-field input:focus, .pe-field textarea:focus { border-color: var(--preto); }

.pe-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pe-chips label {
  display: inline-flex;
  align-items: center; gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--cinza-borda);
  border-radius: 2px;
  background: var(--branco-puro);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.pe-chips label input { appearance: none; width: 10px; height: 10px; border: 1px solid var(--cinza-medio); border-radius: 50%; margin: 0; }
.pe-chips label input:checked { background: var(--preto); border-color: var(--preto); }
.pe-chips label span {
  font-family: var(--ff-sans); font-size: 13px; color: var(--preto);
}
.pe-chips label:hover { border-color: var(--preto); }
.pe-chips label:has(input:checked) { background: var(--preto); border-color: var(--preto); }
.pe-chips label:has(input:checked) span { color: var(--branco); }
.pe-chips label:has(input:checked) input { background: var(--branco); border-color: var(--branco); }

/* Tabela de Investimento (editor) */
.pe-invest-table {
  border: 1px solid var(--cinza-borda);
  background: var(--branco-puro);
}
.pe-invest-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1.2fr 40px;
  align-items: center;
  border-bottom: 1px solid var(--cinza-borda);
}
.pe-invest-row:last-child { border-bottom: none; }
.pe-invest-row > div {
  padding: 10px 12px;
  border-right: 1px solid var(--cinza-borda);
  font-size: 13.5px;
}
.pe-invest-row > div:last-child { border-right: none; }
.pe-invest-row input {
  width: 100%; border: none; background: transparent;
  font: inherit; outline: none; padding: 0;
}
.pe-invest-row input:focus { background: #F4F4F4; padding: 0 4px; margin: 0 -4px; }
.pe-invest-row.head > div {
  background: #FCFCFC;
  font-family: var(--ff-mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--cinza-medio);
  padding-top: 10px; padding-bottom: 10px;
}
.pe-invest-row.total {
  background: #FAFAFA;
  border-top: 2px solid var(--preto);
  font-weight: 600;
}
.pe-invest-row.total > div {
  font-family: var(--ff-sans);
  font-size: 15px; font-weight: 600;
}
.pe-invest-row .act { padding: 0; justify-content: center; display: flex; }
.pe-invest-row .del {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: var(--cinza-medio);
  opacity: 0;
  transition: opacity 0.15s, color 0.15s, background 0.15s;
  border-radius: 2px;
}
.pe-invest-row:hover .del { opacity: 1; }
.pe-invest-row .del svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.pe-invest-row .del:hover { background: #F4F4F4; color: var(--preto); }

.pe-hint {
  font-family: var(--ff-mono); font-size: 11px;
  color: var(--cinza-medio); letter-spacing: 0.04em;
}

/* ============================================================
   DOCUMENTO IMPRIMÍVEL — A4 paisagem, fiel ao PDF
   Dimensão alvo: 297mm × 210mm (≈ 1123 × 794px em 96dpi).
   Uso 1050 × 742 na tela (razão 1.414) para previews generosos.
============================================================ */
.prop-doc {
  display: flex;
  flex-direction: column;
  gap: var(--s-32);
  margin-top: var(--s-24);
  padding: var(--s-24);
  background: #F4F4F4;
  border: 1px solid var(--cinza-borda);
}
.prop-doc, .prop-doc * {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.p-page {
  width: 1050px;
  height: 742px;
  background: #FAFAFA;
  color: #0A0A0A;
  padding: 60px 80px 56px;
  position: relative;
  margin: 0 auto;
  box-shadow: 0 8px 28px -14px rgba(10,10,10,0.25);
  overflow: hidden;
  font-family: var(--ff-sans);
}

/* Páginas estáticas (usam imagem do PDF original) */
.p-page.p-static {
  padding: 0 !important;
  background: #FAFAFA;
  display: flex;
  align-items: center;
  justify-content: center;
}
.p-page.p-static .p-static-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  pointer-events: none;
}
/* Placeholder caso a imagem não exista ainda */
.p-page.p-static .p-static-img[src=""],
.p-page.p-static .p-static-img:not([src]) {
  display: none;
}
.p-page.p-static::before {
  content: attr(data-placeholder);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--cinza-medio);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
}
/* Quando a imagem carrega, o ::before fica atrás (z-index) — não atrapalha */
.p-page.p-static .p-static-img { position: relative; z-index: 2; }

/* ---------- Header e footer (usados nas páginas dinâmicas 12 e 14) ---------- */
.p-header {
  font-family: var(--ff-mono); font-size: 11px;
  letter-spacing: 0.32em; color: #888888;
  margin-bottom: 72px;
}
.p-footer {
  position: absolute;
  left: 80px; right: 80px; bottom: 36px;
  display: flex; justify-content: space-between;
  font-family: var(--ff-mono); font-size: 11px;
  color: #888888; letter-spacing: 0.06em;
}
.p-footer span:first-child { font-weight: 700; color: #0A0A0A; }

/* ---------- Hero e corpo base ---------- */
.p-body { min-height: calc(100% - 180px); position: relative; }
.p-hero {
  font-size: 54px; font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.05;
  color: #0A0A0A;
  margin-bottom: var(--s-24);
}

/* ---------- Página Proposta (pg 12) ---------- */
.p-proposta .p-hero {
  font-size: 46px;
  line-height: 1.1;
  margin-bottom: 48px;
  max-width: none;
}
.p-fields { display: flex; flex-direction: column; gap: 28px; }
.pf .pf-lbl {
  font-family: var(--ff-mono); font-size: 11px;
  letter-spacing: 0.06em; text-transform: none;
  color: #888888;
  margin-bottom: 10px;
}
.pf .pf-val {
  font-size: 15px; color: #0A0A0A; line-height: 1.6;
  white-space: pre-wrap;
  padding-bottom: 10px;
  border-bottom: 1px solid #CCCCCC;
  min-height: 1.8em;
}

/* ---------- O que está incluso (pg 13) ---------- */
.p-included { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; }
.inc-col h3 {
  font-size: 20px; font-weight: 700; letter-spacing: -0.01em;
  border-bottom: 1.5px solid #0A0A0A;
  padding-bottom: 4px; margin-bottom: 14px;
  display: inline-block;
  color: #0A0A0A;
}
.inc-col h3 + h3 { margin-top: 36px; }
.inc-col ul { display: flex; flex-direction: column; gap: 6px; }
.inc-col li {
  font-size: 13.5px; color: #3A3A3A;
  padding-left: 20px; position: relative; line-height: 1.5;
}
.inc-col li::before { content: '—'; position: absolute; left: 0; color: #888888; }

/* ---------- Investimento (pg 14) ---------- */
.inv-table { margin-top: 20px; }
.inv-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1.2fr;
  padding: 16px 0;
  border-bottom: 1px solid #E5E5E5;
  font-size: 14.5px;
  align-items: center;
}
.inv-row.head {
  font-family: var(--ff-mono); font-size: 11px;
  letter-spacing: 0.06em; color: #888888;
  text-transform: none;
  padding: 10px 0;
  border-bottom: 1px solid #CCCCCC;
}
.inv-row.total {
  border-bottom: 1.5px solid #0A0A0A;
  border-top: 1.5px solid #0A0A0A;
  font-weight: 700; font-size: 19px;
  padding: 14px 0;
}
.inv-row.total > div:first-child { font-weight: 700; }
.p-note {
  font-size: 12.5px; color: #888888;
  margin-top: 22px; line-height: 1.5;
}
.p-signatures {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 40px; margin-top: 80px;
}
.p-signatures .sig .line { height: 1px; background: #0A0A0A; margin-bottom: 10px; }
.p-signatures .sig .role { font-size: 14px; font-weight: 600; color: #0A0A0A; }
.p-signatures .sig .date {
  font-family: var(--ff-mono); font-size: 11px;
  color: #888888; margin-top: 4px;
}

/* ============================================================
   LOGIN — tela entre splash e hub (dark mode)
============================================================ */
#login {
  position: fixed;
  inset: 0;
  background: var(--preto);
  color: var(--branco);
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease, visibility 0.7s;
  z-index: 60;
  overflow: hidden;
}
#login.visible { opacity: 1; visibility: visible; }
#login[aria-hidden="false"] { opacity: 1; visibility: visible; }

.login-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 22%, rgba(250,250,250,0.04), transparent 40%),
    radial-gradient(circle at 82% 78%, rgba(250,250,250,0.025), transparent 45%);
}

.login-top {
  position: relative;
  z-index: 1;
  padding: var(--s-32) var(--s-40);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.login-brand {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--branco);
}
.login-brand small {
  display: block;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--cinza-medio);
  margin-top: 2px;
  font-weight: 400;
}

.login-stage {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-24);
}
.login-card {
  width: 100%;
  max-width: 440px;
}

.login-kicker {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cinza-medio);
  margin-bottom: var(--s-16);
}
.login-title {
  font-size: 40px;
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: var(--s-40);
}
.login-title .strong {
  display: block;
  font-weight: 700;
  color: var(--branco);
}
.login-title .soft {
  display: block;
  font-weight: 300;
  color: var(--cinza-medio);
  font-size: 22px;
  margin-top: 6px;
  line-height: 1.2;
}

.login-form { display: flex; flex-direction: column; gap: var(--s-16); }

.login-field { display: flex; flex-direction: column; gap: 8px; }
.login-field .lbl {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cinza-medio);
}
.login-field input {
  font-family: var(--ff-sans);
  font-size: 15px;
  color: var(--branco);
  background: rgba(255,255,255,0.04);
  border: 1px solid #2A2A2A;
  border-radius: 2px;
  padding: 14px 16px;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.login-field input::placeholder { color: #555555; }
.login-field input:focus {
  border-color: var(--branco);
  background: rgba(255,255,255,0.06);
}
.login-field input:-webkit-autofill,
.login-field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--branco);
  -webkit-box-shadow: 0 0 0 1000px #1A1A1A inset;
  caret-color: var(--branco);
}

.login-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-16);
  margin: 4px 0 var(--s-8);
}
.login-remember {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.login-remember input[type="checkbox"] {
  appearance: none;
  width: 14px; height: 14px;
  border: 1px solid var(--cinza-medio);
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: background 0.15s, border-color 0.15s;
}
.login-remember input[type="checkbox"]:checked {
  background: var(--branco);
  border-color: var(--branco);
}
.login-remember input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 3px; top: 0;
  width: 4px; height: 8px;
  border: solid var(--preto);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.login-remember span {
  font-size: 13px;
  color: var(--cinza-medio);
}
.login-link {
  background: none;
  border: none;
  color: var(--cinza-medio);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s;
}
.login-link:hover { color: var(--branco); }

.login-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  background: var(--branco);
  color: var(--preto);
  border: 1px solid var(--branco);
  border-radius: 2px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
  margin-top: 6px;
}
.login-submit svg {
  width: 14px; height: 14px;
  fill: none; stroke: currentColor; stroke-width: 2;
  transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}
.login-submit:hover { background: #E5E5E5; }
.login-submit:hover svg { transform: translateX(3px); }

.login-divider {
  display: flex;
  align-items: center;
  gap: var(--s-16);
  margin: var(--s-16) 0 8px;
  color: #3A3A3A;
}
.login-divider::before,
.login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #2A2A2A;
}
.login-divider span {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cinza-medio);
}

.login-google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 16px;
  background: transparent;
  color: var(--branco);
  border: 1px solid #2A2A2A;
  border-radius: 2px;
  font-family: var(--ff-sans);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.login-google svg { width: 18px; height: 18px; flex-shrink: 0; }
.login-google:hover {
  background: rgba(255,255,255,0.04);
  border-color: #3A3A3A;
}

.login-note {
  margin-top: var(--s-16);
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: #555555;
  text-align: center;
  line-height: 1.5;
}

.login-foot {
  position: relative;
  z-index: 1;
  padding: var(--s-24) var(--s-40);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: #555555;
}

@media (max-width: 720px) {
  .login-title { font-size: 32px; }
  .login-title .soft { font-size: 18px; }
  .login-top { padding: var(--s-24); }
  .login-foot { padding: var(--s-16) var(--s-24); flex-direction: column; gap: 4px; }
}

/* ============================================================
   FILE VIEWER — Tela fullscreen de arquivos do projeto
============================================================ */
.file-viewer {
  position: fixed; inset: 0;
  z-index: 115;
  background: var(--branco);
  color: var(--preto);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.985);
  transition:
    opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1),
    transform 0.55s cubic-bezier(0.25, 1, 0.5, 1),
    visibility 0s linear 0.45s;
}
.file-viewer.visible {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition:
    opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1),
    transform 0.55s cubic-bezier(0.25, 1, 0.5, 1),
    visibility 0s linear 0s;
}
.file-viewer .fv-top,
.file-viewer .fv-body {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1), transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  transition-delay: 0.15s;
}
.file-viewer.visible .fv-top,
.file-viewer.visible .fv-body {
  opacity: 1;
  transform: translateY(0);
}
.file-viewer.visible .fv-body { transition-delay: 0.25s; }

.fv-top {
  display: grid;
  grid-template-columns: 220px 1fr 220px;
  align-items: center;
  padding: var(--s-24) var(--s-32);
  border-bottom: 1px solid var(--cinza-borda);
  background: var(--branco-puro);
  gap: var(--s-24);
  flex-shrink: 0;
}
.fv-close {
  display: inline-flex; align-items: center; gap: var(--s-8);
  background: none; border: none; cursor: pointer;
  padding: 0; color: var(--preto); text-align: left;
}
.fv-close .brand-top { display: inline-flex; align-items: center; gap: 6px; }
.fv-close .back-arrow { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; transition: transform 0.2s; }
.fv-close .name { font-weight: 600; font-size: 15px; }
.fv-close .back-label {
  font-family: var(--ff-mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--cinza-medio); margin-left: var(--s-16);
}
.fv-close:hover .back-arrow { transform: translateX(-3px); }

.fv-center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.fv-meta {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--ff-mono); font-size: 11px;
  color: var(--cinza-medio); letter-spacing: 0.06em;
  text-transform: uppercase;
}
.fv-meta .client { color: var(--preto); font-weight: 500; text-transform: none; letter-spacing: 0; font-family: var(--ff-sans); font-size: 14px; }
.fv-sub { font-size: 12px; color: var(--cinza-medio); }

.fv-actions { display: flex; justify-content: flex-end; }

.fv-body {
  flex: 1;
  display: grid;
  grid-template-columns: 340px 1fr;
  overflow: hidden;
  background: var(--branco);
}

/* Sidebar — timeline + checklist */
.fv-sidebar {
  border-right: 1px solid var(--cinza-borda);
  background: var(--branco-puro);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.fv-side-head {
  padding: var(--s-24);
  border-bottom: 1px solid var(--cinza-borda);
  background: var(--branco-puro);
  position: sticky; top: 0;
  z-index: 2;
}
.fv-side-head .kicker {
  font-family: var(--ff-mono); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--cinza-medio);
  margin-bottom: 4px;
}
.fv-side-head h2 {
  font-size: 18px; font-weight: 600;
  letter-spacing: -0.01em; color: var(--preto);
  margin-bottom: var(--s-16);
}
.fv-progress .fv-progress-top {
  display: flex; justify-content: space-between;
  align-items: baseline; margin-bottom: 8px;
}
.fv-progress .lbl {
  font-family: var(--ff-mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--cinza-medio);
}
.fv-progress .val {
  font-family: var(--ff-mono); font-size: 15px;
  font-weight: 600; color: var(--preto);
  font-variant-numeric: tabular-nums;
}
.fv-progress .val small { font-size: 10px; font-weight: 400; color: var(--cinza-medio); }
.fv-progress-track {
  height: 3px; background: #EAEAEA; position: relative;
}
.fv-progress-fill {
  position: absolute; top: 0; left: 0; bottom: 0;
  background: var(--preto);
  width: 0%;
  transition: width 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Timeline vertical */
.fv-timeline {
  position: relative;
  padding: var(--s-24) var(--s-16);
}
.fv-timeline::before {
  content: '';
  position: absolute;
  left: calc(var(--s-16) + 15px);
  top: var(--s-24);
  bottom: var(--s-24);
  width: 1px;
  background: var(--cinza-borda);
}
.fv-stage {
  position: relative;
  padding-left: 46px;
  padding-bottom: 20px;
}
.fv-stage:last-child { padding-bottom: 0; }
.fv-stage .stage-dot {
  position: absolute;
  left: 8px; top: 6px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--branco-puro);
  border: 2px solid var(--cinza-claro);
  z-index: 1;
  transition: background 0.2s, border-color 0.2s;
}
.fv-stage.active .stage-dot { border-color: var(--preto); }
.fv-stage.done .stage-dot { background: var(--preto); border-color: var(--preto); }

.fv-stage-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  margin-left: -10px;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.15s;
  background: none;
  border: none;
  width: calc(100% + 10px);
  text-align: left;
  font: inherit;
  color: var(--preto);
}
.fv-stage-head:hover { background: #F4F4F4; }
.fv-stage-head .num {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--cinza-medio);
  letter-spacing: 0.08em;
  flex-shrink: 0;
}
.fv-stage-head .title {
  flex: 1;
  font-size: 13.5px;
  font-weight: 500;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fv-stage-head .count {
  font-family: var(--ff-mono); font-size: 10px;
  color: var(--cinza-medio);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.fv-stage-head .chevron {
  width: 12px; height: 12px;
  stroke: var(--cinza-medio);
  fill: none; stroke-width: 2;
  transition: transform 0.2s;
  flex-shrink: 0;
}
.fv-stage.open .fv-stage-head .chevron { transform: rotate(90deg); }

.fv-stage-body {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.fv-stage.open .fv-stage-body { max-height: 1000px; }
.fv-stage-items {
  padding: 6px 0 10px 0;
  display: flex;
  flex-direction: column;
}
.fv-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 10px 6px 10px;
  margin-left: -10px;
  cursor: pointer;
  border-radius: 2px;
  transition: background 0.15s;
}
.fv-check:hover { background: #FAFAFA; }
.fv-check input[type="checkbox"] {
  appearance: none;
  width: 14px; height: 14px;
  border: 1px solid var(--cinza-medio);
  border-radius: 2px;
  background: var(--branco-puro);
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 2px;
  position: relative;
  transition: background 0.15s, border-color 0.15s;
}
.fv-check input[type="checkbox"]:checked {
  background: var(--preto);
  border-color: var(--preto);
}
.fv-check input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 3px; top: 0px;
  width: 4px; height: 8px;
  border: solid #FFFFFF;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.fv-check .txt {
  font-size: 12.5px;
  color: var(--preto);
  line-height: 1.4;
  transition: color 0.15s, text-decoration-color 0.15s;
}
.fv-check input:checked ~ .txt {
  color: var(--cinza-medio);
  text-decoration: line-through;
  text-decoration-color: var(--cinza-claro);
}

.fv-stage-folder-link {
  display: inline-flex;
  align-items: center; gap: 6px;
  font-family: var(--ff-mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--cinza-medio);
  margin-top: 6px; padding: 4px 8px;
  border: 1px solid var(--cinza-borda);
  border-radius: 2px;
  background: var(--branco-puro);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.fv-stage-folder-link:hover { color: var(--preto); border-color: var(--preto); }
.fv-stage-folder-link svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2; }

/* Conteúdo principal (arquivos) */
.fv-main {
  display: flex; flex-direction: column;
  overflow: hidden; min-height: 0;
}

.fv-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-24);
  padding: var(--s-24) var(--s-32) var(--s-16);
  border-bottom: 1px solid var(--cinza-borda);
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* Breadcrumb */
.fv-breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px;
  font-size: 14px;
}
.fv-breadcrumb .crumb {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  border-radius: 2px;
  color: var(--cinza-medio);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  background: none; border: none;
  font: inherit;
}
.fv-breadcrumb .crumb:hover { background: #F4F4F4; color: var(--preto); }
.fv-breadcrumb .crumb.current { color: var(--preto); font-weight: 500; cursor: default; }
.fv-breadcrumb .crumb.current:hover { background: transparent; }
.fv-breadcrumb .sep { color: var(--cinza-claro); font-size: 12px; }

.fv-tools { display: flex; gap: var(--s-8); }
.fv-tools .sheet-btn { cursor: pointer; }

/* Conteúdo: dropzone (preview aparece só ao clicar num arquivo) */
.fv-content {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
  min-height: 0;
  transition: grid-template-columns 0.25s ease;
}
.fv-content.with-preview { grid-template-columns: 1fr 380px; }
.fv-content > .fv-dropzone { overflow-y: auto; padding: var(--s-32); }
.fv-preview { display: none; }
.fv-content.with-preview .fv-preview { display: flex; }

/* Preview à direita — fica oculto até o user clicar num arquivo.
   Layout: nome (topo) → imagem → botões, sem espaço vazio entre eles. */
.fv-preview {
  border-left: 1px solid var(--cinza-borda);
  background: var(--branco-puro);
  flex-direction: column;
  overflow-y: auto;
  min-height: 0;
}
.fv-preview-head {
  padding: var(--s-16) var(--s-20) var(--s-12);
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-16);
  flex-shrink: 0;
}
.fv-preview-head .info { flex: 1; min-width: 0; }
.fv-preview-name {
  font-size: 14px; font-weight: 500; color: var(--preto);
  word-break: break-word;
}
.fv-preview-meta {
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.06em;
  color: var(--cinza-medio); margin-top: 4px; text-transform: uppercase;
}
.fv-preview-close {
  width: 28px; height: 28px; flex-shrink: 0;
  background: transparent; border: 1px solid transparent;
  border-radius: 2px; cursor: pointer;
  display: grid; place-items: center;
  color: var(--cinza-medio);
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.fv-preview-close:hover { color: var(--preto); border-color: var(--cinza-borda); background: #F4F4F4; }
.fv-preview-body {
  padding: 0 var(--s-20);
  display: flex; justify-content: center;
  flex-shrink: 0;
}
.fv-preview-body img {
  max-width: 100%; height: auto; display: block;
  background: #FFF; box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  border: 1px solid var(--cinza-borda);
}
.fv-preview-body .fv-preview-generic {
  text-align: center; color: var(--cinza-medio);
  display: flex; flex-direction: column; align-items: center; gap: var(--s-12);
  padding: var(--s-32) var(--s-16);
  width: 100%;
  background: #F4F4F4;
  border: 1px solid var(--cinza-borda);
}
.fv-preview-body .fv-preview-generic svg { width: 56px; height: 56px; stroke: currentColor; fill: none; stroke-width: 1.5; opacity: 0.6; }
.fv-preview-body .fv-preview-loading {
  font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.08em;
  color: var(--cinza-medio); text-transform: uppercase;
}
.fv-preview-foot {
  padding: var(--s-12) var(--s-20) var(--s-20);
  display: flex; gap: var(--s-8);
  flex-shrink: 0;
}
.fv-preview-foot .sheet-btn { padding: 6px 12px; flex: 1; justify-content: center; }
.fv-files .row.selected { background: #EAEAEA; }

@media (max-width: 1100px) {
  .fv-content { grid-template-columns: 1fr; }
  .fv-preview { display: none; }
}

/* Dropzone + grid */
.fv-dropzone {
  position: relative;
  min-height: 400px;
  border-radius: 2px;
  transition: background 0.2s;
  /* iOS Safari: long-press normalmente abre o menu nativo (Copiar/Compartilhar
     /Salvar imagem). Desabilitamos só nessa zona porque vamos disparar o
     menu do app no long-press via JS. */
  -webkit-touch-callout: none;
}
.fv-dropzone.dragover { background: #F4F4F4; }
.fv-dropzone.dragover .fv-drop-indicator { display: flex; }

.fv-drop-indicator {
  display: none;
  position: absolute; inset: 0;
  align-items: center; justify-content: center;
  z-index: 2;
  pointer-events: none;
  border: 2px dashed var(--preto);
  background: rgba(250,250,250,0.9);
}
.fv-drop-indicator .dr-inner {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-16);
  color: var(--preto);
}
.fv-drop-indicator svg {
  width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 1.5;
}
.fv-drop-indicator div {
  font-family: var(--ff-mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
}

/* Grid de pastas */
.fv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--s-16);
  margin-bottom: var(--s-32);
}
.fv-folder {
  display: flex;
  align-items: center;
  gap: var(--s-16);
  padding: var(--s-16) var(--s-24);
  background: var(--branco-puro);
  border: 1px solid var(--cinza-borda);
  border-radius: 2px;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.2s;
  text-align: left;
}
.fv-folder:hover {
  border-color: var(--preto);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -12px rgba(10,10,10,0.2);
}
.fv-folder .icon {
  width: 36px; height: 36px;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: #F4F4F4;
  border-radius: 2px;
  color: var(--preto);
}
.fv-folder .icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.fv-folder .info { flex: 1; min-width: 0; }
.fv-folder .name {
  font-size: 14px; font-weight: 500;
  color: var(--preto);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fv-folder .meta {
  font-family: var(--ff-mono); font-size: 10px;
  letter-spacing: 0.06em; color: var(--cinza-medio);
  text-transform: uppercase;
  margin-top: 4px;
}

/* Lista de arquivos */
.fv-files {
  border: 1px solid var(--cinza-borda);
  border-radius: 2px;
  background: var(--branco-puro);
  overflow: hidden;
}
.fv-files:empty { display: none; }
.fv-files .head,
.fv-files .row {
  display: grid;
  grid-template-columns: 36px 2fr 140px 160px 72px;
  align-items: center;
  padding: 10px var(--s-24);
  border-bottom: 1px solid var(--cinza-borda);
  gap: var(--s-16);
}
.fv-files .head {
  font-family: var(--ff-mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--cinza-medio);
  background: #FCFCFC;
  cursor: default;
}
.fv-files .row { transition: background 0.15s; }
.fv-files .row:hover { background: #FAFAFA; }
.fv-files .row:last-child, .fv-files .head:last-child { border-bottom: none; }
.fv-files .row .icon {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #F4F4F4;
  border-radius: 2px;
  color: var(--preto);
}
.fv-files .row .icon svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.fv-files .row .name {
  font-size: 14px; color: var(--preto);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fv-files .row .kind,
.fv-files .row .size {
  font-family: var(--ff-mono); font-size: 11px; color: var(--cinza-medio);
  letter-spacing: 0.04em;
}
.fv-files .row .actions { display: flex; justify-content: flex-end; gap: 4px; opacity: 0; transition: opacity 0.15s; }
.fv-files .row:hover .actions { opacity: 1; }
.fv-files .row .act-btn {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid transparent;
  color: var(--cinza-medio); cursor: pointer;
  border-radius: 2px;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.fv-files .row .act-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.fv-files .row .act-btn:hover { border-color: var(--preto); color: var(--preto); background: #FFFFFF; }

.fv-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s-16);
  padding: var(--s-80) var(--s-24);
  text-align: center;
}
.fv-empty svg {
  width: 48px; height: 48px; fill: none; stroke: var(--cinza-claro); stroke-width: 1.5;
}
.fv-empty .t { font-size: 16px; font-weight: 500; color: var(--preto); }
.fv-empty .s { font-size: 13px; color: var(--cinza-medio); max-width: 360px; }

@media (max-width: 1000px) {
  .fv-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; overflow-y: auto; }
  .fv-sidebar { border-right: none; border-bottom: 1px solid var(--cinza-borda); max-height: 380px; }
}
@media (max-width: 720px) {
  .fv-top { grid-template-columns: 1fr; gap: var(--s-16); }
  .fv-actions { justify-content: flex-start; }
  .fv-files .head, .fv-files .row { grid-template-columns: 28px 1fr 80px; }
  .fv-files .head .kind, .fv-files .head .size,
  .fv-files .row .kind, .fv-files .row .size { display: none; }
}

/* ============================================================
   File Viewer — REFINO VISUAL (escopado em .file-viewer)
   Aplica a mesma linguagem das light-pages: cantos suaves,
   sombras discretas, hover com elevação, pills, focus rings.
============================================================ */

/* Header */
.file-viewer .fv-top {
  padding: 18px 32px;
  border-bottom: 1px solid #ECECEC;
  background: var(--branco-puro);
  box-shadow: 0 1px 0 rgba(10,10,10,0.02);
}
.file-viewer .fv-meta {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: #A0A0A0;
}
.file-viewer .fv-sub {
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--cinza-medio);
}

/* Botões do header e da toolbar — estilo pill consistente */
.file-viewer .sheet-btn {
  border: 1px solid #E8E8E8;
  border-radius: 8px;
  padding: 9px 14px;
  font-family: var(--ff-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--preto);
  transition: all 0.18s ease;
}
.file-viewer .sheet-btn:hover {
  border-color: #C8C8C8;
  background: #FAFAFA;
  transform: translateY(-1px);
}
.file-viewer .sheet-btn.primary {
  background: var(--preto);
  color: var(--branco);
  border-color: var(--preto);
  box-shadow: 0 4px 12px -6px rgba(10,10,10,0.35);
}

/* Sidebar (timeline do método) */
.file-viewer .fv-body { background: var(--branco); }
.file-viewer .fv-sidebar {
  border-right: 1px solid #ECECEC;
  transition: width 0.28s cubic-bezier(0.25, 1, 0.5, 1),
              min-width 0.28s cubic-bezier(0.25, 1, 0.5, 1),
              opacity 0.2s ease,
              border-color 0.2s ease;
}
.file-viewer .fv-side-head {
  padding: 22px 24px;
  border-bottom: 1px solid #ECECEC;
}
.file-viewer .fv-side-head .kicker {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: #A0A0A0;
}
.file-viewer .fv-side-head h2 {
  font-size: 18px;
  letter-spacing: -0.015em;
}
.file-viewer .fv-progress .lbl {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: #A0A0A0;
}
.file-viewer .fv-progress-track {
  height: 4px;
  background: #F0F0F0;
  border-radius: 999px;
  overflow: hidden;
}
.file-viewer .fv-progress-fill { border-radius: 999px; }

/* Timeline vertical: dots maiores, linha mais clara */
.file-viewer .fv-timeline::before { background: #ECECEC; }
.file-viewer .fv-stage-head { border-radius: 8px; padding: 8px 12px; margin-left: -12px; width: calc(100% + 12px); }
.file-viewer .fv-stage-head:hover { background: #FAFAFA; }
.file-viewer .fv-stage .stage-dot {
  border-width: 1.5px;
  transition: all 0.2s ease;
}
.file-viewer .fv-stage.active .stage-dot {
  background: var(--preto);
  border-color: var(--preto);
  width: 16px; height: 16px;
  left: 7px; top: 5px;
  box-shadow: 0 0 0 3px var(--branco-puro), 0 0 0 4px var(--preto);
}
.file-viewer .fv-stage-head .num {
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #A0A0A0;
}
.file-viewer .fv-stage-head .title { font-size: 13.5px; letter-spacing: -0.005em; }
.file-viewer .fv-stage-head .count { font-size: 10px; letter-spacing: 0.06em; color: #A0A0A0; }

/* Checklist */
.file-viewer .fv-check { border-radius: 8px; padding: 7px 12px; margin-left: -12px; }
.file-viewer .fv-check:hover { background: #FAFAFA; }
.file-viewer .fv-check input[type="checkbox"] { border-radius: 4px; border-width: 1.5px; }
.file-viewer .fv-check .txt { font-size: 12.5px; line-height: 1.45; }

.file-viewer .fv-stage-folder-link {
  border-radius: 999px;
  padding: 5px 12px;
  font-family: var(--ff-sans);
  font-size: 11px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--asfalto);
  border-color: #E8E8E8;
}
.file-viewer .fv-stage-folder-link:hover {
  border-color: var(--preto);
  background: var(--preto);
  color: var(--branco);
}

/* Toolbar */
.file-viewer .fv-toolbar {
  padding: 20px 32px 16px;
  border-bottom: 1px solid #ECECEC;
  gap: 18px;
}
.file-viewer .fv-breadcrumb .crumb {
  border-radius: 8px;
  font-size: 13.5px;
  padding: 6px 10px;
}
.file-viewer .fv-breadcrumb .crumb:hover { background: #FAFAFA; }
.file-viewer .fv-breadcrumb .sep { font-family: var(--ff-mono); }

/* Botão de toggle do sidebar — fica no início da toolbar */
.file-viewer .fv-side-toggle {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--branco-puro);
  border: 1px solid #E8E8E8;
  border-radius: 8px;
  color: var(--asfalto);
  cursor: pointer;
  transition: all 0.18s ease;
  flex-shrink: 0;
}
.file-viewer .fv-side-toggle:hover {
  border-color: var(--preto);
  color: var(--preto);
  background: #FAFAFA;
  transform: translateY(-1px);
}
.file-viewer .fv-side-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.file-viewer .fv-toolbar-left {
  display: flex; align-items: center; gap: 12px;
  flex: 1; min-width: 0;
}

/* Estado colapsado: sidebar fora, main toma tudo */
.file-viewer .fv-body.fv-side-collapsed {
  grid-template-columns: 0 1fr;
}
.file-viewer .fv-body.fv-side-collapsed .fv-sidebar {
  width: 0;
  min-width: 0;
  opacity: 0;
  pointer-events: none;
  border-right-color: transparent;
  overflow: hidden;
}
.file-viewer .fv-body.fv-side-collapsed .fv-side-toggle svg { transform: scaleX(-1); }

/* Dropzone + grid */
.file-viewer .fv-content > .fv-dropzone { padding: 28px 32px; }
.file-viewer .fv-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}
.file-viewer .fv-folder {
  border: 1px solid #ECECEC;
  border-radius: 12px;
  padding: 18px 22px;
  background: var(--branco-puro);
  box-shadow: 0 1px 0 rgba(10,10,10,0.02);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.2s ease;
}
.file-viewer .fv-folder:hover {
  transform: translateY(-3px);
  border-color: #D8D8D8;
  box-shadow: 0 14px 28px -16px rgba(10,10,10,0.20);
}
.file-viewer .fv-folder .icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: #F4F4F4;
}
.file-viewer .fv-folder .name { font-size: 14.5px; letter-spacing: -0.005em; }
.file-viewer .fv-folder .meta { font-size: 10px; letter-spacing: 0.12em; color: #A0A0A0; }

/* Lista de arquivos */
.file-viewer .fv-files {
  border: 1px solid #ECECEC;
  border-radius: 12px;
  box-shadow: 0 1px 0 rgba(10,10,10,0.02);
  overflow: hidden;
}
.file-viewer .fv-files .head { background: #FAFAFA; }
.file-viewer .fv-files .head > div,
.file-viewer .fv-files .row > div { border-bottom-color: #F0F0F0; }
.file-viewer .fv-files .row:hover { background: #FCFCFC; }
.file-viewer .fv-files .row .act-btn { border-radius: 8px; }

/* Skeleton cards (loading state) — mesma estrutura do .fv-folder mas com
   placeholders cinza que fazem shimmer. Substitui a mensagem áspera
   "CARREGANDO DO DRIVE..." que aparecia anteriormente. */
.fv-folder.fv-folder-skel {
  cursor: default;
  pointer-events: none;
}
.fv-folder.fv-folder-skel:hover {
  transform: none;
  border-color: #ECECEC;
  box-shadow: 0 1px 0 rgba(10,10,10,0.02);
}
.fv-folder.fv-folder-skel .icon {
  background: #ECECEC;
  position: relative;
  overflow: hidden;
}
.fv-folder.fv-folder-skel .icon::after,
.fv-folder.fv-folder-skel .skel-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.7) 50%,
    transparent 100%);
  animation: zaSkelShimmer 1.4s ease-in-out infinite;
}
.fv-folder.fv-folder-skel .skel-bar {
  background: #ECECEC;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
.fv-folder.fv-folder-skel .skel-name { height: 12px; width: 62%; }
.fv-folder.fv-folder-skel .skel-meta { height: 9px;  width: 32%; margin-top: 8px; }
@keyframes zaSkelShimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%);  }
}
/* Fade-in suave do grid quando termina de carregar — substitui o "salto"
   de skeleton pra cards reais por uma transição sutil */
.file-viewer .fv-grid > .fv-folder:not(.fv-folder-skel) {
  animation: zaFolderFadeIn 0.32s cubic-bezier(0.25, 1, 0.5, 1) backwards;
}
@keyframes zaFolderFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Estado vazio refinado */
.file-viewer .fv-empty {
  background: var(--branco-puro);
  border: 1px dashed #E0E0E0;
  border-radius: 14px;
  padding: 64px 32px;
  margin: 8px auto;
  max-width: 580px;
  box-shadow: 0 1px 0 rgba(10,10,10,0.02);
}
/* O atributo HTML `hidden` precisa vencer o `display: flex` do .fv-empty base */
.file-viewer .fv-empty[hidden] { display: none !important; }
.file-viewer .fv-empty svg {
  width: 56px; height: 56px;
  stroke: #C8C8C8;
  background: #FAFAFA;
  border-radius: 14px;
  padding: 14px;
  box-sizing: content-box;
}
.file-viewer .fv-empty .t {
  font-size: 16px;
  letter-spacing: -0.01em;
}
.file-viewer .fv-empty .s {
  font-size: 13px;
  line-height: 1.55;
}

/* Drop indicator: cantos arredondados */
.file-viewer .fv-drop-indicator {
  border: 2px dashed var(--preto);
  border-radius: 16px;
  margin: 8px;
  background: rgba(250,250,250,0.96);
  backdrop-filter: blur(2px);
}

/* Preview panel refinado */
.file-viewer .fv-preview { border-left-color: #ECECEC; }
.file-viewer .fv-preview-close { border-radius: 8px; }
.file-viewer .fv-preview-body img { border-radius: 8px; border-color: #ECECEC; }

/* Quando sidebar tá colapsado em telas largas, ajusta o grid principal */
@media (min-width: 1001px) {
  .file-viewer .fv-body { grid-template-columns: 340px 1fr; }
}

/* Seleção visual ao clicar com botão direito */
.fv-folder.ctx-target,
.fv-files .row.ctx-target { outline: 2px solid var(--preto); outline-offset: -2px; background: #F4F4F4; }

/* Context menu */
#fvContextMenu {
  position: fixed;
  min-width: 200px;
  background: var(--branco-puro);
  border: 1px solid var(--cinza-borda);
  border-radius: 2px;
  box-shadow: 0 12px 28px -10px rgba(10,10,10,0.25);
  padding: 6px 0;
  z-index: 200;
  display: none;
  font-family: var(--ff-sans);
  user-select: none;
}
#fvContextMenu.visible { display: block; }
#fvContextMenu .ctx-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  font-size: 13px;
  color: var(--preto);
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  transition: background 0.1s;
}
#fvContextMenu .ctx-item:hover:not(:disabled) { background: #F4F4F4; }
#fvContextMenu .ctx-item:disabled {
  color: var(--cinza-claro);
  cursor: not-allowed;
}
#fvContextMenu .ctx-item svg {
  width: 14px; height: 14px;
  fill: none; stroke: currentColor; stroke-width: 2;
  flex-shrink: 0;
}
#fvContextMenu .ctx-item .shortcut {
  margin-left: auto;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--cinza-medio);
}
#fvContextMenu .ctx-item:hover:not(:disabled) .shortcut { color: var(--preto); }
#fvContextMenu .ctx-item.danger:hover:not(:disabled) {
  background: #F5E6E3;
  color: var(--acc-despesa);
}
#fvContextMenu .ctx-sep {
  height: 1px; background: var(--cinza-borda);
  margin: 4px 0;
}

/* ============================================================
   IMPRESSÃO — A4 paisagem, fiel ao PDF original.
   Estratégia: páginas estáticas = imagem PNG do PDF; páginas
   dinâmicas (12 Proposta e 14 Investimento) = HTML renderizado.
============================================================ */
@media print {
  @page { size: A4 landscape; margin: 0; }

  html, body {
    background: #FFFFFF !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  *, *::before, *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Só o documento imprimível sobrevive */
  body > *:not(#proposalEditor) { display: none !important; }
  #proposalEditor {
    position: static !important;
    display: block !important;
    background: #FFFFFF !important;
    height: auto !important;
    overflow: visible !important;
  }
  #proposalEditor .pe-top,
  #proposalEditor .pe-pane[data-pane="briefing"],
  #proposalEditor .pe-pane-head,
  #proposalEditor .pe-pane > .pe-block {
    display: none !important;
  }
  #proposalEditor .pe-body {
    overflow: visible !important;
    padding: 0 !important;
    background: #FFFFFF !important;
  }
  #proposalEditor .pe-pane { max-width: none !important; margin: 0 !important; }
  #proposalEditor .pe-pane[data-pane="proposta"] { display: block !important; }
  #proposalEditor .pe-pane[data-pane="proposta"][hidden] { display: block !important; }

  .prop-doc {
    display: block !important;
    background: #FFFFFF !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
  }

  /* Páginas A4 paisagem exatas em mm */
  .p-page {
    width: 297mm !important;
    height: 210mm !important;
    margin: 0 !important;
    padding: 14mm 22mm 14mm !important;
    box-shadow: none !important;
    page-break-after: always;
    break-after: page;
    overflow: hidden;
    position: relative;
    background: #FFFFFF;
  }
  .p-page:last-child { page-break-after: auto; break-after: auto; }

  /* Páginas estáticas (imagens do PDF) — sem padding, imagem ocupa 100% */
  .p-page.p-static {
    padding: 0 !important;
  }
  .p-page.p-static .p-static-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }
  /* Esconde o placeholder no print */
  .p-page.p-static::before { display: none !important; }

  /* Rodapé das páginas dinâmicas (pg 12 e 14) */
  .p-footer {
    position: absolute !important;
    bottom: 10mm !important;
    left: 22mm !important;
    right: 22mm !important;
  }
  .p-proposta .p-hero { font-size: 42px !important; }

  /* Bordas e linhas das páginas dinâmicas */
  .inv-row.total,
  .p-signatures .sig .line {
    background: #0A0A0A !important;
    border-color: #0A0A0A !important;
  }
  .inv-row { border-bottom-color: #EAEAEA !important; }
  .pf .pf-lbl { border-bottom-color: #EAEAEA !important; color: #888888 !important; }
}
.light-empty {
  padding: 48px 32px; text-align: center;
  border: 1px dashed var(--cinza-borda); background: var(--branco-puro);
  color: var(--cinza-medio); font-size: 14px;
  font-family: var(--ff-mono); letter-spacing: 0.03em;
}
.light-empty p { margin: 0; }

/* ============================================================
   CALENDÁRIO — estilo Google Agenda
============================================================ */
.cal-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 14px 18px;
  background: var(--branco-puro); border: 1px solid var(--cinza-borda);
  margin-bottom: 16px;
}
.cal-toolbar-left { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cal-toolbar-right { display: flex; align-items: center; gap: 10px; }
.cal-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border: 1px solid var(--cinza-borda);
  background: var(--branco); color: var(--preto);
  font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; cursor: pointer; border-radius: 2px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.cal-btn:hover { border-color: var(--preto); }
.cal-btn.primary {
  background: var(--preto); color: var(--branco); border-color: var(--preto);
}
.cal-btn.primary:hover { background: var(--asfalto); }
.cal-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
.cal-nav { display: inline-flex; gap: 4px; }
.cal-icon-btn {
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--cinza-borda); background: var(--branco);
  cursor: pointer; border-radius: 2px; transition: border-color 0.15s;
}
.cal-icon-btn:hover { border-color: var(--preto); }
.cal-icon-btn svg { width: 14px; height: 14px; stroke: var(--preto); fill: none; stroke-width: 2; }
.cal-title {
  margin: 0; font-size: 20px; font-weight: 500; letter-spacing: -0.01em;
  color: var(--preto);
}
.cal-views {
  display: inline-flex; border: 1px solid var(--cinza-borda); border-radius: 2px;
  background: var(--branco);
}
.cal-view-btn {
  padding: 8px 16px; border: 0; background: transparent;
  font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--cinza-medio);
  cursor: pointer; transition: color 0.15s, background 0.15s;
}
.cal-view-btn + .cal-view-btn { border-left: 1px solid var(--cinza-borda); }
.cal-view-btn:hover { color: var(--preto); }
.cal-view-btn.active { background: var(--preto); color: var(--branco); }

.cal-container { background: var(--branco-puro); border: 1px solid var(--cinza-borda); }

/* View: Mês */
.cal-month-head {
  display: grid; grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--cinza-borda);
}
.cal-month-head .dow {
  padding: 10px 8px; text-align: center;
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--cinza-medio);
}
.cal-month-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-month-cell {
  min-height: 120px; padding: 8px;
  border-right: 1px solid var(--cinza-borda);
  border-bottom: 1px solid var(--cinza-borda);
  position: relative; cursor: pointer;
  transition: background 0.15s;
}
.cal-month-cell:nth-child(7n) { border-right: 0; }
.cal-month-cell:hover { background: #FAFAFA; }
.cal-month-cell.other-month { background: #F7F7F7; }
.cal-month-cell.other-month .day-num { color: var(--cinza-medio); opacity: 0.5; }
.cal-month-cell.today .day-num {
  background: var(--preto); color: var(--branco);
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px;
}
.cal-month-cell .day-num {
  font-family: var(--ff-mono); font-size: 12px; font-weight: 500;
  color: var(--preto); margin-bottom: 6px;
}
.cal-month-cell .day-events { display: flex; flex-direction: column; gap: 2px; }

/* Feriados — label discreta no topo da célula (mês) */
.cal-holiday {
  font-size: 10px; font-weight: 500;
  color: var(--acc-despesa);
  margin-bottom: 4px;
  padding: 1px 5px;
  background: rgba(183, 67, 46, 0.08);
  border-left: 2px solid var(--acc-despesa);
  border-radius: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-month-cell.is-holiday .day-num {
  color: var(--acc-despesa);
}
/* Feriado no header das views semana/dia */
.dow .dow-holiday {
  display: block; margin-top: 2px;
  font-size: 10px; font-weight: 500;
  color: var(--acc-despesa);
}
.dow.is-holiday .dow-num {
  color: var(--acc-despesa);
}
.cal-event-chip {
  font-size: 11px; line-height: 1.3;
  padding: 3px 6px; border-radius: 2px;
  background: var(--preto); color: var(--branco);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer; border: 0; text-align: left;
  font-family: inherit;
}
.cal-event-chip:hover { filter: brightness(1.2); }
.cal-event-chip.cat-reuniao       { background: #1F6B3A; }
.cal-event-chip.cat-levantamento  { background: #3A3A3A; }
.cal-event-chip.cat-apresentacao  { background: #8A5A00; }
.cal-event-chip.cat-revisao       { background: #5A5AAD; }
.cal-event-chip.cat-entrega       { background: #B7432E; }
.cal-event-chip.cat-outro         { background: #888888; }
.cal-more {
  font-family: var(--ff-mono); font-size: 10px;
  color: var(--cinza-medio); padding: 2px 6px;
  cursor: pointer; background: transparent; border: 0; text-align: left;
}
.cal-more:hover { color: var(--preto); }

/* View: Semana e Dia (grade horária) */
.cal-time-wrap { display: grid; grid-template-columns: 60px 1fr; height: 72vh; height: 72dvh; overflow-y: auto; }
.cal-time-col {
  border-right: 1px solid var(--cinza-borda); background: var(--branco);
  position: sticky; left: 0;
}
.cal-time-col .cal-time-slot {
  height: 48px; padding: 4px 8px; text-align: right;
  font-family: var(--ff-mono); font-size: 10px; color: var(--cinza-medio);
  border-bottom: 1px solid var(--cinza-borda);
}
.cal-week-head, .cal-day-head {
  display: grid; position: sticky; top: 0;
  background: var(--branco-puro); z-index: 2;
  border-bottom: 1px solid var(--cinza-borda);
}
.cal-week-head { grid-template-columns: 60px repeat(7, 1fr); }
.cal-day-head  { grid-template-columns: 60px 1fr; }
.cal-week-head .dow, .cal-day-head .dow {
  padding: 10px 8px; text-align: center;
  border-right: 1px solid var(--cinza-borda);
}
.cal-week-head .dow:last-child, .cal-day-head .dow:last-child { border-right: 0; }
.cal-week-head .dow.today .dow-num, .cal-day-head .dow.today .dow-num {
  background: var(--preto); color: var(--branco);
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-grid; place-items: center;
}
.cal-week-head .dow-name, .cal-day-head .dow-name {
  display: block; font-family: var(--ff-mono); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--cinza-medio);
}
.cal-week-head .dow-num, .cal-day-head .dow-num {
  display: inline-block; font-size: 18px; font-weight: 500; margin-top: 4px;
}

.cal-week-grid { display: grid; grid-template-columns: 60px repeat(7, 1fr); position: relative; }
.cal-day-grid  { display: grid; grid-template-columns: 60px 1fr; position: relative; }
.cal-week-col, .cal-day-col {
  border-right: 1px solid var(--cinza-borda);
  position: relative; min-height: calc(48px * 24);
}
.cal-week-col:last-child, .cal-day-col:last-child { border-right: 0; }
.cal-slot {
  height: 48px; border-bottom: 1px solid #EDEDED;
}
.cal-event-block {
  position: absolute; left: 4px; right: 4px;
  background: var(--preto); color: var(--branco);
  padding: 6px 8px; border-radius: 3px; overflow: hidden;
  cursor: pointer; border: 0; text-align: left;
  font-family: inherit; font-size: 12px;
  z-index: 1;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.cal-event-block:hover { filter: brightness(1.15); }
.cal-event-block.cat-reuniao       { background: #1F6B3A; }
.cal-event-block.cat-levantamento  { background: #3A3A3A; }
.cal-event-block.cat-apresentacao  { background: #8A5A00; }
.cal-event-block.cat-revisao       { background: #5A5AAD; }
.cal-event-block.cat-entrega       { background: #B7432E; }
.cal-event-block.cat-outro         { background: #888888; }
.cal-event-block .ttl { font-weight: 600; display: block; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-event-block .sub { font-size: 10px; opacity: 0.85; font-family: var(--ff-mono); letter-spacing: 0.04em; }

.cal-now-line {
  position: absolute; left: 0; right: 0; height: 2px;
  background: #E74C3C; z-index: 3; pointer-events: none;
}
.cal-now-line::before {
  content: ''; position: absolute; left: -5px; top: -4px;
  width: 10px; height: 10px; background: #E74C3C; border-radius: 50%;
}

/* Banner de sync com Google Calendar */
.cal-gsync {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  margin: 0 0 14px;
  padding: 10px 14px;
  background: var(--branco-puro);
  border: 1px solid var(--cinza-borda);
  border-radius: 3px;
}
.cal-gsync[hidden] { display: none !important; }
.cal-gsync.ok      { border-color: #1F6B3A55; background: #f3faf5; }
.cal-gsync.warning { border-color: #b88d1155; background: #fef6e0; }
.cal-gsync.error   { border-color: #B7432E55; background: #fdeeea; }
.cal-gsync-info {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--asfalto);
}
.cal-gsync.ok      .cal-gsync-info { color: #1F6B3A; }
.cal-gsync.warning .cal-gsync-info { color: #8a6612; }
.cal-gsync.error   .cal-gsync-info { color: #B7432E; }
.cal-gsync-actions { display: flex; gap: 8px; }

/* Modal de evento */
#calEventModal {
  position: fixed; inset: 0; z-index: 150;
  display: none; align-items: center; justify-content: center;
  background: rgba(10,10,10,0.55); backdrop-filter: blur(8px);
}
#calEventModal.visible { display: flex; }
#calEventModal .cem-panel {
  background: var(--branco); border: 1px solid var(--cinza-borda);
  width: min(560px, 92vw); max-height: 88vh; max-height: 88dvh;
  display: flex; flex-direction: column;
  box-shadow: 0 40px 80px rgba(0,0,0,0.25);
}
#calEventModal .cem-head {
  padding: 20px 28px; border-bottom: 1px solid var(--cinza-borda);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
}
#calEventModal .cem-head .kicker {
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--cinza-medio); margin-bottom: 4px;
}
#calEventModal .cem-head h2 { margin: 0; font-size: 20px; font-weight: 500; letter-spacing: -0.01em; }
#calEventModal .cem-close {
  width: 32px; height: 32px; border: 1px solid var(--cinza-borda);
  background: var(--branco-puro); cursor: pointer; border-radius: 2px;
  display: grid; place-items: center;
}
#calEventModal .cem-close svg { width: 14px; height: 14px; stroke: var(--preto); fill: none; stroke-width: 2; }
#calEventModal .cem-body {
  padding: 20px 28px; overflow-y: auto; flex: 1;
  display: flex; flex-direction: column; gap: 14px;
}
#calEventModal .cem-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px;
}
#calEventModal .cem-field { display: flex; flex-direction: column; gap: 4px; }
#calEventModal .cem-field.full { grid-column: 1 / -1; }
#calEventModal .cem-field .lbl {
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--cinza-medio);
}
#calEventModal .cem-field input,
#calEventModal .cem-field select,
#calEventModal .cem-field textarea {
  border: 1px solid var(--cinza-borda); background: var(--branco-puro);
  padding: 10px 12px; font-family: var(--ff-sans); font-size: 14px;
  color: var(--preto); border-radius: 2px; outline: none; resize: vertical;
}
#calEventModal .cem-field input:focus,
#calEventModal .cem-field select:focus,
#calEventModal .cem-field textarea:focus { border-color: var(--preto); }
#calEventModal .cem-foot {
  padding: 14px 28px; border-top: 1px solid var(--cinza-borda);
  display: flex; justify-content: space-between; gap: 12px;
  background: #FAFAFA;
}
#calEventModal .cem-foot-right { display: flex; gap: 10px; margin-left: auto; }
#calEventModal .cem-btn {
  border: 1px solid var(--preto); background: transparent; color: var(--preto);
  padding: 10px 18px; font-family: var(--ff-mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer;
  border-radius: 2px; transition: background 0.15s, color 0.15s;
}
#calEventModal .cem-btn:hover { background: var(--preto); color: var(--branco); }
#calEventModal .cem-btn.ghost { border-color: var(--cinza-borda); color: var(--cinza-medio); }
#calEventModal .cem-btn.ghost:hover { background: transparent; color: var(--preto); border-color: var(--preto); }
#calEventModal .cem-btn.ghost#cemDelete:hover {
  background: var(--acc-despesa); color: var(--branco); border-color: var(--acc-despesa);
}

/* ============================================================
   GESTÃO DA MARCA — brand identity guide (light page)
============================================================ */
.brand-index {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  padding: 14px 18px; margin-bottom: 40px;
  background: var(--branco-puro); border: 1px solid var(--cinza-borda);
}
.brand-index a {
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--cinza-medio); text-decoration: none;
  padding: 4px 8px; border: 1px solid transparent; border-radius: 2px;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.brand-index a:hover { color: var(--preto); border-color: var(--preto); }
.brand-index a.pdf-link {
  color: var(--branco); background: var(--preto); border-color: var(--preto);
  margin-left: auto;
}
.brand-index a.pdf-link:hover { background: var(--asfalto); border-color: var(--asfalto); }

.brand-section {
  padding: 64px 0 48px;
  border-top: 1px solid var(--cinza-borda);
  scroll-margin-top: 90px;
}
.brand-section:first-of-type { border-top: 0; padding-top: 24px; }
.brand-section-head {
  display: flex; align-items: baseline; gap: 16px;
  margin-bottom: 32px;
}
.brand-num {
  font-family: var(--ff-mono); font-size: 13px; font-weight: 500;
  color: var(--cinza-medio); letter-spacing: 0.1em;
}
.brand-section-head h2 {
  margin: 0; font-size: 32px; font-weight: 500; letter-spacing: -0.02em;
  color: var(--preto);
}
.brand-lead {
  font-size: 18px; line-height: 1.5; color: var(--asfalto);
  margin: 0 0 32px; max-width: 720px; font-style: italic;
}
.brand-note {
  font-size: 13px; color: var(--cinza-medio); line-height: 1.6;
  margin-top: 24px; max-width: 820px;
}
.brand-label {
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--cinza-medio);
  padding-bottom: 8px; margin-bottom: 12px;
  border-bottom: 1px solid var(--cinza-borda);
}
.brand-label.ok  { color: var(--acc-receita); border-bottom-color: var(--acc-receita); }
.brand-label.bad { color: var(--acc-despesa); border-bottom-color: var(--acc-despesa); }

.brand-grid { display: grid; gap: 24px; }
.brand-grid.two   { grid-template-columns: 1fr 1fr; }
.brand-grid.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
  .brand-grid.two, .brand-grid.three { grid-template-columns: 1fr; }
}

.brand-block {
  padding: 24px 26px;
  background: var(--branco-puro); border: 1px solid var(--cinza-borda);
}
.brand-block h3 {
  margin: 8px 0 8px; font-size: 18px; font-weight: 500;
  color: var(--preto);
}
.brand-block p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--asfalto); }
.brand-block ul { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.8; color: var(--asfalto); }
.brand-block.correct { border-color: var(--acc-receita); }
.brand-block.wrong   { border-color: var(--acc-despesa); background: #FDFAF9; }

.brand-card {
  padding: 24px 26px;
  background: var(--branco-puro); border: 1px solid var(--cinza-borda);
}
.brand-card ul { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.8; color: var(--asfalto); }
.brand-card p  { margin: 0; font-size: 14px; line-height: 1.6; color: var(--asfalto); }
.brand-card.emphasis { background: var(--preto); color: var(--branco); border-color: var(--preto); }
.brand-card.emphasis .brand-label { color: var(--cinza-medio); border-bottom-color: var(--asfalto); }
.brand-card.emphasis .quote {
  font-size: 22px; line-height: 1.3; font-style: italic; color: var(--branco);
  margin: 0; letter-spacing: -0.01em;
}

.brand-hero {
  padding: 72px 48px;
  background: var(--preto); color: var(--branco);
  margin-bottom: 32px;
}
.brand-anchor {
  font-family: var(--ff-sans); font-size: 72px; font-weight: 700;
  line-height: 0.95; letter-spacing: -0.04em; margin: 0;
}
@media (max-width: 700px) { .brand-anchor { font-size: 44px; } }

.brand-signature {
  margin-top: 40px; padding: 28px 32px;
  background: var(--branco-puro); border: 1px solid var(--cinza-borda);
  display: flex; flex-direction: column; gap: 4px;
}
.brand-signature .sig-name {
  font-family: var(--ff-sans); font-size: 36px; font-weight: 700;
  letter-spacing: -0.02em; color: var(--preto);
}
.brand-signature .sig-tag {
  font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.14em;
  color: var(--cinza-medio);
}

.brand-manifesto {
  padding: 48px 48px; background: var(--branco-puro);
  border: 1px solid var(--cinza-borda); margin-bottom: 32px;
}
.brand-manifesto .manifesto-lead {
  font-size: 28px; line-height: 1.25; letter-spacing: -0.015em;
  color: var(--preto); margin: 0 0 20px; font-weight: 500;
}
.brand-manifesto .manifesto-lead em { font-style: italic; color: var(--preto); }
.brand-manifesto p { font-size: 16px; line-height: 1.7; color: var(--asfalto); margin: 0 0 14px; }
.brand-manifesto p:last-child { margin-bottom: 0; }

.brand-logos {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
  margin-bottom: 32px; background: var(--cinza-borda);
  border: 1px solid var(--cinza-borda);
}
@media (max-width: 900px) { .brand-logos { grid-template-columns: repeat(2, 1fr); } }
.brand-logo {
  padding: 48px 24px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 18px;
  text-align: center;
}
.brand-logo.v1 { background: var(--branco-puro); color: var(--preto); }
.brand-logo.v2 { background: var(--preto); color: var(--branco); }
.brand-logo.v3 { background: var(--asfalto); color: var(--branco); }
.brand-logo.v4 { background: #F5F1EC; color: var(--preto); }
.brand-logo .logo-wrap {
  display: flex; flex-direction: column; gap: 6px; align-items: center;
}
.brand-logo .logo-name {
  font-family: var(--ff-sans); font-size: 32px; font-weight: 700;
  letter-spacing: -0.02em;
}
.brand-logo .logo-tag {
  font-family: var(--ff-mono); font-size: 9px; letter-spacing: 0.14em;
  opacity: 0.8;
}
.brand-logo .logo-caption {
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; opacity: 0.6;
}

/* Paleta */
.brand-palette {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
  margin-bottom: 24px; background: var(--cinza-borda);
  border: 1px solid var(--cinza-borda);
}
@media (max-width: 900px) { .brand-palette { grid-template-columns: repeat(2, 1fr); } }
.swatch {
  padding: 40px 28px 32px; border: 0; cursor: pointer; text-align: left;
  min-height: 260px; display: flex; flex-direction: column;
  justify-content: flex-end; gap: 6px; font-family: inherit;
  transition: transform 0.2s;
  position: relative;
}
.swatch:hover { transform: translateY(-2px); }
.swatch.light { border: 1px solid var(--cinza-borda); }
.swatch-name {
  font-family: var(--ff-sans); font-size: 20px; font-weight: 500;
  letter-spacing: -0.01em;
}
.swatch-hex {
  font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.06em;
  opacity: 0.75;
}
.swatch-use {
  font-size: 12px; line-height: 1.5; opacity: 0.7; margin-top: 8px;
}
.swatch-copy {
  position: absolute; top: 16px; right: 16px;
  font-family: var(--ff-mono); font-size: 9px; letter-spacing: 0.1em;
  text-transform: uppercase; opacity: 0.55;
}
.swatch.copied .swatch-copy::before { content: 'Copiado! '; }

/* Tipografia */
.brand-typeface {
  padding: 32px 28px;
  background: var(--branco-puro); border: 1px solid var(--cinza-borda);
}
.brand-typeface .typeface-name {
  font-size: 72px; line-height: 1; letter-spacing: -0.03em;
  margin: 12px 0 20px; color: var(--preto);
}
.brand-typeface .typeface-sample {
  display: flex; gap: 28px; font-size: 32px; color: var(--asfalto);
  padding: 16px 0; border-top: 1px dashed var(--cinza-borda);
  border-bottom: 1px dashed var(--cinza-borda);
}
.brand-typeface .typeface-meta {
  font-family: var(--ff-mono); font-size: 11px; line-height: 1.6;
  color: var(--cinza-medio); margin-top: 16px;
}
.brand-hierarchy {
  margin-top: 32px; padding: 32px;
  background: var(--branco-puro); border: 1px solid var(--cinza-borda);
}
.brand-hierarchy .hier-row {
  display: grid; grid-template-columns: 280px 1fr; gap: 24px;
  padding: 14px 0; border-bottom: 1px dashed var(--cinza-borda);
  align-items: baseline;
}
.brand-hierarchy .hier-row:last-child { border-bottom: 0; }
.brand-hierarchy .hier-tag {
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--cinza-medio);
}
.brand-hierarchy .hier-sample { color: var(--preto); }
@media (max-width: 700px) {
  .brand-hierarchy .hier-row { grid-template-columns: 1fr; gap: 6px; }
}

/* Voz */
.brand-voice {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  margin-bottom: 24px;
}
@media (max-width: 900px) { .brand-voice { grid-template-columns: 1fr; } }
.voice-card {
  padding: 28px 26px; background: var(--branco-puro);
  border: 1px solid var(--cinza-borda);
}
.voice-card .voice-title {
  font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--preto); font-weight: 600;
  padding-bottom: 10px; margin-bottom: 16px;
  border-bottom: 2px solid var(--preto);
}
.voice-card .voice-desc {
  font-size: 14px; line-height: 1.6; color: var(--asfalto); margin: 0 0 16px;
}
.voice-card .voice-example {
  font-size: 14px; line-height: 1.5; font-style: italic;
  padding: 14px 16px; background: #F5F5F5; color: var(--preto);
  margin: 0; border-left: 2px solid var(--preto);
}
.brand-anchor-box {
  padding: 24px 28px; background: var(--branco-puro);
  border: 1px solid var(--cinza-borda);
  border-left: 4px solid var(--preto);
}
.brand-anchor-box.emphasis {
  background: var(--preto); color: var(--branco); border-color: var(--preto);
  padding: 32px 32px; margin-top: 32px;
}
.brand-anchor-box.emphasis p {
  font-size: 22px; font-style: italic; color: var(--branco);
  line-height: 1.35; margin: 0;
}
.brand-anchor-box p { font-size: 16px; line-height: 1.6; margin: 0; color: var(--preto); }
.brand-anchor-box p em { color: var(--cinza-medio); font-size: 14px; }

/* Evitar x Preferir */
.brand-compare {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  background: var(--cinza-borda); border: 1px solid var(--cinza-borda);
}
@media (max-width: 900px) { .brand-compare { grid-template-columns: 1fr; } }
.compare-col { padding: 32px 28px; background: var(--branco-puro); }
.compare-col.evitar    { background: #FDFAF9; }
.compare-col.preferir  { background: #F5FBF7; }
.compare-item {
  padding: 14px 0; border-bottom: 1px dashed var(--cinza-borda);
}
.compare-item:last-child { border-bottom: 0; }
.compare-item .phrase { margin: 0 0 4px; font-size: 14px; line-height: 1.5; color: var(--preto); }
.compare-item .reason { margin: 0; font-size: 12px; color: var(--cinza-medio); font-family: var(--ff-mono); }

/* Layout num */
.layout-num {
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.14em;
  color: var(--cinza-medio); margin-bottom: 6px;
}

/* Spacing scale */
.brand-spacing { margin-top: 32px; padding: 32px; background: var(--branco-puro); border: 1px solid var(--cinza-borda); }
.spacing-scale {
  display: flex; gap: 32px; align-items: flex-end; flex-wrap: wrap;
  margin-top: 16px;
}
.spacing-item { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 64px; }
.spacing-box { background: var(--preto); }
.spacing-item span { font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--cinza-medio); }

/* Digital */
.brand-subsection {
  margin: 48px 0 20px; font-size: 20px; font-weight: 500;
  letter-spacing: -0.01em; color: var(--preto);
}
.brand-email-sigs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
@media (max-width: 900px) { .brand-email-sigs { grid-template-columns: 1fr; } }
.email-sig {
  padding: 24px 28px; background: var(--branco-puro);
  border: 1px solid var(--cinza-borda); font-family: Arial, Helvetica, sans-serif;
  font-size: 13px; line-height: 1.6; color: var(--preto);
}
.email-sig strong { font-size: 15px; }
.email-sig .sig-brand { font-family: var(--ff-sans); font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.email-sig .sig-tag { font-family: var(--ff-mono); font-size: 9px; letter-spacing: 0.12em; color: var(--cinza-medio); }
.email-sig .sig-contact { font-size: 12px; color: var(--cinza-medio); }

/* ============================================================
   Modal genérico in-page (alert / confirm / prompt)
============================================================ */
#uiDialog {
  position: fixed; inset: 0; z-index: 250;
  display: none; align-items: center; justify-content: center;
  background: rgba(10,10,10,0.55); backdrop-filter: blur(8px);
}
#uiDialog.visible { display: flex; }
#uiDialog .uid-panel {
  background: var(--branco); border: 1px solid var(--cinza-borda);
  width: min(440px, 92vw);
  display: flex; flex-direction: column;
  box-shadow: 0 40px 80px rgba(0,0,0,0.25);
}
#uiDialog .uid-head {
  padding: 20px 24px 12px;
}
#uiDialog .uid-kicker {
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--cinza-medio); margin-bottom: 4px;
}
#uiDialog .uid-head h2 {
  margin: 0; font-size: 18px; font-weight: 500; letter-spacing: -0.01em;
  color: var(--preto);
}
#uiDialog .uid-body {
  padding: 4px 24px 20px;
  display: flex; flex-direction: column; gap: 14px;
}
#uiDialog .uid-msg {
  margin: 0; font-size: 14px; line-height: 1.5; color: var(--asfalto);
  white-space: pre-wrap;
}
#uiDialog .uid-field { display: flex; flex-direction: column; gap: 4px; }
#uiDialog .uid-field[hidden] { display: none; }
#uiDialog .uid-field .lbl {
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--cinza-medio);
}
#uiDialog .uid-field input {
  border: 1px solid var(--cinza-borda); background: var(--branco-puro);
  padding: 10px 12px; font-family: var(--ff-sans); font-size: 14px;
  color: var(--preto); border-radius: 2px; outline: none;
}
#uiDialog .uid-field input:focus { border-color: var(--preto); }
#uiDialog .uid-foot {
  padding: 14px 24px; border-top: 1px solid var(--cinza-borda);
  display: flex; justify-content: flex-end; gap: 10px; background: #FAFAFA;
}
#uiDialog .uid-btn {
  border: 1px solid var(--preto); background: var(--preto); color: var(--branco);
  padding: 9px 16px; font-family: var(--ff-mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer;
  border-radius: 2px; transition: opacity 0.15s, background 0.15s, color 0.15s;
}
#uiDialog .uid-btn:hover { opacity: 0.88; }
#uiDialog .uid-btn.ghost {
  background: transparent; color: var(--cinza-medio); border-color: var(--cinza-borda);
}
#uiDialog .uid-btn.ghost:hover { background: transparent; color: var(--preto); border-color: var(--preto); opacity: 1; }
#uiDialog .uid-btn.danger {
  background: var(--acc-despesa); color: var(--branco); border-color: var(--acc-despesa);
}

/* Modal "Nova proposta" — reutiliza estética do uiDialog */
#newPropostaDialog {
  position: fixed; inset: 0; z-index: 250;
  display: none; align-items: center; justify-content: center;
  background: rgba(10,10,10,0.55); backdrop-filter: blur(8px);
}
#newPropostaDialog.visible { display: flex; }
#newPropostaDialog .uid-panel {
  background: var(--branco); border: 1px solid var(--cinza-borda);
  width: min(440px, 92vw);
  display: flex; flex-direction: column;
  box-shadow: 0 40px 80px rgba(0,0,0,0.25);
}
#newPropostaDialog .uid-head { padding: 20px 24px 12px; }
#newPropostaDialog .uid-kicker {
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--cinza-medio); margin-bottom: 4px;
}
#newPropostaDialog .uid-head h2 {
  margin: 0; font-size: 18px; font-weight: 500; letter-spacing: -0.01em;
  color: var(--preto);
}
#newPropostaDialog .uid-body { padding: 4px 24px 20px; display: flex; flex-direction: column; gap: 14px; }
#newPropostaDialog .uid-field { display: flex; flex-direction: column; gap: 4px; }
#newPropostaDialog .uid-field .lbl {
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--cinza-medio);
}
#newPropostaDialog .uid-field input {
  border: 1px solid var(--cinza-borda); background: var(--branco-puro);
  padding: 10px 12px; font-family: var(--ff-sans); font-size: 14px;
  color: var(--preto); border-radius: 2px; outline: none;
}
#newPropostaDialog .uid-field input:focus { border-color: var(--preto); }
#newPropostaDialog .uid-foot {
  padding: 14px 24px; border-top: 1px solid var(--cinza-borda);
  display: flex; justify-content: flex-end; gap: 10px; background: #FAFAFA;
}
#newPropostaDialog .uid-btn {
  border: 1px solid var(--preto); background: var(--preto); color: var(--branco);
  padding: 9px 16px; font-family: var(--ff-mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer;
  border-radius: 2px; transition: opacity 0.15s;
}
#newPropostaDialog .uid-btn:hover { opacity: 0.88; }
#newPropostaDialog .uid-btn:disabled { opacity: 0.5; cursor: wait; }
#newPropostaDialog .uid-btn.ghost {
  background: transparent; color: var(--cinza-medio); border-color: var(--cinza-borda);
}
#newPropostaDialog .uid-btn.ghost:hover { color: var(--preto); border-color: var(--preto); }

/* ============================================================
   Modal "Dados do Cliente" — preenchido ao aceitar uma proposta
============================================================ */
#clientDataModal {
  position: fixed; inset: 0; z-index: 140;
  display: none; align-items: center; justify-content: center;
  background: rgba(10,10,10,0.55); backdrop-filter: blur(8px);
}
#clientDataModal.visible { display: flex; }
#clientDataModal .cdm-panel {
  background: var(--branco); border: 1px solid var(--cinza-borda);
  width: min(760px, 92vw); max-height: 88vh; max-height: 88dvh;
  display: flex; flex-direction: column;
  box-shadow: 0 40px 80px rgba(0,0,0,0.25);
}
#clientDataModal .cdm-head {
  padding: 20px 28px; border-bottom: 1px solid var(--cinza-borda);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
}
#clientDataModal .cdm-head .kicker {
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--cinza-medio); margin-bottom: 4px;
}
#clientDataModal .cdm-head h2 { margin: 0; font-size: 22px; font-weight: 500; letter-spacing: -0.01em; }
#clientDataModal .cdm-head .sub { color: var(--cinza-medio); font-size: 13px; margin-top: 4px; }
#clientDataModal .cdm-close {
  width: 32px; height: 32px; border: 1px solid var(--cinza-borda);
  background: var(--branco-puro); cursor: pointer; border-radius: 2px;
  display: grid; place-items: center;
}
#clientDataModal .cdm-close svg { width: 14px; height: 14px; stroke: var(--preto); fill: none; stroke-width: 2; }
#clientDataModal .cdm-body { padding: 20px 28px; overflow-y: auto; flex: 1; }
#clientDataModal .cdm-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px;
}
#clientDataModal .cdm-field { display: flex; flex-direction: column; gap: 4px; }
#clientDataModal .cdm-field.full { grid-column: 1 / -1; }
#clientDataModal .cdm-field .lbl {
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--cinza-medio);
}
#clientDataModal .cdm-field input,
#clientDataModal .cdm-field select,
#clientDataModal .cdm-field textarea {
  border: 1px solid var(--cinza-borda); background: var(--branco-puro);
  padding: 10px 12px; font-family: var(--ff-sans); font-size: 14px;
  color: var(--preto); border-radius: 2px; outline: none;
}
#clientDataModal .cdm-field input:focus,
#clientDataModal .cdm-field select:focus,
#clientDataModal .cdm-field textarea:focus { border-color: var(--preto); }
#clientDataModal .cdm-section { margin-top: 22px; }
#clientDataModal .cdm-section:first-child { margin-top: 0; }
#clientDataModal .cdm-section-title {
  font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--preto); margin-bottom: 12px;
  padding-bottom: 8px; border-bottom: 1px solid var(--cinza-borda);
}
#clientDataModal .cdm-foot {
  padding: 16px 28px; border-top: 1px solid var(--cinza-borda);
  display: flex; justify-content: flex-end; gap: 12px; background: #FAFAFA;
}
#clientDataModal .cdm-btn {
  border: 1px solid var(--preto); background: transparent; color: var(--preto);
  padding: 10px 18px; font-family: var(--ff-mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer;
  border-radius: 2px; transition: background 0.15s, color 0.15s;
}
#clientDataModal .cdm-btn:hover { background: var(--preto); color: var(--branco); }
#clientDataModal .cdm-btn.ghost { border-color: var(--cinza-borda); color: var(--cinza-medio); }
#clientDataModal .cdm-btn.ghost:hover { background: transparent; color: var(--preto); border-color: var(--preto); }

/* ============================================================
   Abas do Dossiê do Cliente (Dados · Proposta · Contrato)
   injetadas no docModal quando o contexto é Cliente
============================================================ */
.doc-tabs {
  display: flex; gap: 0; margin-bottom: 20px;
  border: 1px solid var(--cinza-borda); border-radius: 2px;
  background: var(--branco-puro);
}
.doc-tab {
  flex: 1; padding: 10px 14px; border: 0; background: transparent;
  font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--cinza-medio); cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.doc-tab + .doc-tab { border-left: 1px solid var(--cinza-borda); }
.doc-tab:hover { color: var(--preto); }
.doc-tab.active { color: var(--branco); background: var(--preto); }
.doc-pane { display: none; }
.doc-pane.active { display: block; }
.doc-pane h4 {
  margin: 0 0 12px; font-size: 13px; font-weight: 500;
  font-family: var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--cinza-medio);
}
.doc-pane .kv {
  display: grid; grid-template-columns: 160px 1fr; gap: 8px 16px;
  font-size: 14px; padding: 12px 14px; background: var(--branco-puro);
  border: 1px solid var(--cinza-borda);
}
.doc-pane .kv .k { color: var(--cinza-medio); font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.doc-pane .kv .v { color: var(--preto); }
.doc-pane .kv .v.empty { color: var(--cinza-medio); font-style: italic; }
.doc-pane .download-row {
  margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap;
}
.doc-pane .dl-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border: 1px solid var(--preto); background: var(--preto);
  color: var(--branco); cursor: pointer; border-radius: 2px;
  font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase;
}
.doc-pane .dl-btn.alt { background: transparent; color: var(--preto); }
.doc-pane .dl-btn:hover { opacity: 0.85; }
.doc-pane .dl-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
.doc-pane .note {
  margin-top: 10px; font-size: 12px; color: var(--cinza-medio);
  font-family: var(--ff-mono); letter-spacing: 0.04em;
}
.doc-pane .contract-preview {
  margin-top: 14px; padding: 18px 20px;
  background: var(--branco-puro); border: 1px solid var(--cinza-borda);
  max-height: 360px; overflow-y: auto;
  font-size: 13px; line-height: 1.55; color: var(--preto);
}
.doc-pane .contract-status {
  margin: 0 0 18px; padding: 14px 18px;
  background: var(--branco-puro); border: 1px solid var(--cinza-borda);
  display: flex; align-items: center; gap: 14px;
}
.doc-pane .contract-status .cs-lbl {
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--cinza-medio);
}
.doc-pane .contract-status select {
  border: 1px solid var(--cinza-borda); background: var(--branco);
  padding: 8px 12px; font-family: var(--ff-sans); font-size: 13px; font-weight: 500;
  color: var(--preto); border-radius: 2px; outline: none; cursor: pointer;
}
.doc-pane .contract-status select:focus { border-color: var(--preto); }
.doc-pane .contract-status .cs-note {
  font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.04em;
  color: var(--cinza-medio); margin-left: auto;
}
.doc-pane .contract-status .cs-note.ok { color: var(--acc-receita); }
.doc-pane .contract-preview h5 {
  margin: 14px 0 6px; font-size: 12px; font-family: var(--ff-mono);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--preto);
}
.doc-pane .contract-preview h5:first-child { margin-top: 0; }
.doc-pane .contract-preview p { margin: 0 0 8px; }

/* ============================================================
   Banner inline pra reconectar Google quando token expirou
   (aparece no topo das pages que dependem do Drive: Projetos, Obras)
============================================================ */
.gdrive-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-16);
  padding: 12px var(--s-16);
  margin-bottom: var(--s-16);
  background: #FFF8E6;
  border: 1px solid #F0C808;
  border-radius: 2px;
  font-size: 13px;
  color: #5A4500;
  flex-wrap: wrap;
}
/* O CSS de display: flex sobrescreve o atributo `hidden`. Forçar invisibilidade. */
.gdrive-banner[hidden] { display: none !important; }
.gdrive-banner .gb-msg { display: flex; align-items: center; gap: 10px; }
.gdrive-banner .gb-msg svg {
  width: 18px; height: 18px;
  stroke: #B58A00; fill: none; stroke-width: 2;
  flex-shrink: 0;
}
.gdrive-banner .gb-actions { display: flex; gap: 8px; }
.gdrive-banner button {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  padding: 6px 12px;
  border-radius: 2px;
  border: 1px solid #5A4500;
  background: #5A4500;
  color: #FFF8E6;
  cursor: pointer;
}
.gdrive-banner button.ghost {
  background: transparent;
  color: #5A4500;
}
.gdrive-banner button:hover { opacity: 0.85; }

/* ============================================================
   COFRE DE CREDENCIAIS (#lightDados)
   Estética arquitetônica: square corners, borda fina, mono labels.
============================================================ */
.cofre-state { width: 100%; }

/* --- Toolbar superior --- */
.cofre-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 20px;
  background: var(--branco-puro);
  border: 1px solid var(--cinza-borda);
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.cofre-toolbar-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cofre-stat {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cinza-medio);
}
.cofre-stat-dot { color: var(--cinza-claro); }
.cofre-toolbar-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* --- Gate (setup/locked) --- */
.cofre-gate {
  max-width: 520px;
  background: var(--branco-puro);
  border: 1px solid var(--cinza-borda);
  padding: 40px 48px;
  margin: 32px auto 0;
}
.cofre-gate-num {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--cinza-medio);
  margin-bottom: 8px;
}
.cofre-gate-title {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}
.cofre-gate-desc {
  font-size: 14px;
  line-height: 1.65;
  color: var(--cinza-medio);
  margin-bottom: 28px;
}
.cofre-gate-desc strong { color: var(--preto); }
.cofre-gate-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
}
.cofre-gate-link {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--cinza-borda);
  text-align: center;
}
.cofre-link-btn {
  background: none;
  border: none;
  padding: 4px 8px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--cinza-medio);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s;
}
.cofre-link-btn:hover { color: var(--acc-despesa); }

/* --- Labels e inputs (estilo arquitetura, igual ao resto) --- */
.cofre-lbl {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cinza-medio);
  margin: 18px 0 6px;
}
.cofre-lbl-hint {
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--cinza-claro);
}
.cofre-input {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--cinza-borda);
  border-radius: 2px;
  background: var(--branco);
  font-family: var(--ff-sans);
  font-size: 14px;
  color: var(--preto);
  transition: border-color 0.15s;
}
.cofre-input::placeholder { color: var(--cinza-claro); }
.cofre-input:focus { outline: none; border-color: var(--preto); }
textarea.cofre-input { resize: vertical; min-height: 80px; line-height: 1.5; }

.cofre-pass-row { display: flex; gap: 6px; align-items: stretch; }
.cofre-pass-row .cofre-input { flex: 1; }
.cofre-eye {
  border: 1px solid var(--cinza-borda);
  background: var(--branco);
  width: 44px;
  border-radius: 2px;
  cursor: pointer;
  color: var(--cinza-medio);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, color 0.15s;
}
.cofre-eye:hover { border-color: var(--preto); color: var(--preto); }

.cofre-msg {
  margin-top: 14px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  min-height: 16px;
  color: var(--cinza-medio);
}
.cofre-msg.error { color: var(--acc-despesa); }
.cofre-msg.success { color: var(--acc-receita); }

/* --- Lista de credenciais --- */
.cofre-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1px;
  background: var(--cinza-borda);
  border: 1px solid var(--cinza-borda);
}
.cofre-item {
  background: var(--branco-puro);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  cursor: pointer;
  transition: background 0.15s;
  position: relative;
}
.cofre-item:hover { background: var(--branco); }
.cofre-item:hover::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--preto);
  pointer-events: none;
  z-index: 1;
}
.cofre-item-head { display: flex; flex-direction: column; gap: 4px; }
.cofre-item-sistema {
  font-size: 16px;
  font-weight: 600;
  color: var(--preto);
  letter-spacing: -0.01em;
}
.cofre-item-login {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--cinza-medio);
}
.cofre-item-actions {
  display: flex;
  gap: 6px;
  margin-top: auto;
  flex-wrap: wrap;
}
.cofre-item-actions .cofre-act {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--cinza-borda);
  background: var(--branco);
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cinza-medio);
  cursor: pointer;
  border-radius: 2px;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.cofre-item-actions .cofre-act:hover {
  border-color: var(--preto);
  color: var(--preto);
  background: var(--branco-puro);
}
.cofre-item-actions .cofre-act.copied {
  border-color: var(--acc-receita);
  color: var(--acc-receita);
}

/* --- Modal de edição --- */
.cofre-modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px;
}
.cofre-modal-card {
  background: var(--branco-puro);
  border-radius: 2px;
  padding: 36px 40px;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  border: 1px solid var(--cinza-borda);
}
.cofre-modal-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 22px;
}
.cofre-modal-num {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--cinza-medio);
}
.cofre-modal-card h2 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}
.cofre-modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 28px;
}
.cofre-modal-actions-right { display: flex; gap: 10px; }
.cofre-modal-delete {
  color: var(--acc-despesa);
  border-color: var(--acc-despesa) !important;
}
.cofre-modal-delete:hover {
  background: var(--acc-despesa-soft);
}

@media (max-width: 720px){
  .cofre-gate { padding: 28px 24px; margin-top: 16px; }
  .cofre-gate-title { font-size: 22px; }
  .cofre-modal-card { padding: 24px 22px; }
  .cofre-modal-actions { flex-direction: column-reverse; align-items: stretch; }
  .cofre-modal-actions-right { justify-content: space-between; }
  .cofre-toolbar { padding: 14px 16px; }
}