/* ============================================================================
   OrçaNoZap — Design System (global)
   Direção 2b · Índigo/Neutro · Sora + Plus Jakarta Sans
   ----------------------------------------------------------------------------
   Arquivo único de estilo global. Importar UMA vez no layout base
   (ex.: <link rel="stylesheet" href="/style.css"> em partials/head.ejs).
   Todas as telas usam as classes daqui — não escrever CSS por tela.
   Aliases legados preservados no fim (§20) para migração sem quebrar.
   ========================================================================== */

/* ===== 1. FONTES ==========================================================
   Auto-hospedadas em /public/fonts/ (.woff2) — sem chamada externa (LGPD). */
@font-face{font-family:'Sora';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/sora-400.woff2') format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/sora-600.woff2') format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/sora-700.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/jakarta-400.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/jakarta-500.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/jakarta-600.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/jakarta-700.woff2') format('woff2')}

/* ===== 2. TOKENS ========================================================== */
:root{
  /* Marca */
  --cor-primaria:#4f46e5;
  --cor-primaria-hover:#4338ca;
  --cor-primaria-clara:#eceafd;
  --cor-primaria-texto:#3730a3;

  /* Superfícies */
  --cor-fundo:#f5f6f9;
  --cor-card:#ffffff;
  --cor-card-alt:#fbfbfd;
  --cor-borda:#e6e8ec;
  --cor-borda-forte:#d6d9e0;

  /* Sidebar (rail) */
  --rail:#14152a;
  --rail-alt:#1c1d38;
  --rail-ink:#e9e9f5;
  --rail-muted:#8a89ad;

  /* Texto */
  --cor-texto:#191c24;
  --cor-texto-secundario:#5b616e;
  --cor-texto-fraco:#9096a1;
  --cor-texto-inverso:#ffffff;

  /* Status */
  --st-rascunho:#98a1b0;      --st-rascunho-bg:#eef0f4;
  --st-aguardando:#c2740a;    --st-aguardando-bg:#fdf0dc;
  --st-visualizado:#2f5fdb;   --st-visualizado-bg:#eaf0ff;
  --st-aprovado:#1b7a4b;      --st-aprovado-bg:#e6f5ec;
  --st-recusado:#b02a2a;      --st-recusado-bg:#fbe9e9;

  /* Feedback */
  --ok:#1b7a4b;  --ok-bg:#e6f5ec;
  --alerta:#c2740a; --alerta-bg:#fdf0dc;
  --erro:#b02a2a; --erro-bg:#fbe9e9; --erro-borda:#f1b0b0;

  /* Forma & profundidade */
  --raio-sm:8px;
  --raio:14px;
  --raio-lg:20px;
  --raio-full:999px;
  --ctrl-h:44px;            /* altura de inputs/botões */
  --ctrl-h-sm:38px;
  --sombra-sm:0 1px 3px rgba(25,28,36,.08);
  --sombra:0 6px 16px -10px rgba(25,28,36,.28);
  --sombra-lg:0 30px 66px -24px rgba(25,28,36,.34);
  --sombra-primaria:0 10px 22px -8px rgba(79,70,229,.6);

  /* Tipografia */
  --fonte-ui:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --fonte-display:'Sora',system-ui,sans-serif;

  /* Layout */
  --rail-w:248px;
  --rail-w-collapsed:66px;
  --topo-h:70px;
  --bottomnav-h:76px;

  --transicao:.18s cubic-bezier(.4,0,.2,1);
}

/* ===== 3. RESET / BASE ==================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--fonte-ui);
  font-size:14px;
  line-height:1.5;
  color:var(--cor-texto);
  background:var(--cor-fundo);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--fonte-display);font-weight:700;letter-spacing:-.02em;color:var(--cor-texto);margin:0}
p{margin:0}
a{color:var(--cor-primaria);text-decoration:none}
a:hover{color:var(--cor-primaria-hover)}
img{max-width:100%;display:block}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--cor-primaria);outline-offset:2px}
.tabular{font-variant-numeric:tabular-nums}
.mono{font-family:var(--fonte-display)}

/* ===== 4. LAYOUT SHELL ====================================================
   <div class="app">
     <aside class="sidebar">…</aside>
     <div class="conteudo">
       <header class="topo">…</header>
       <main class="pagina">…</main>
     </div>
   </div>  */
.app{display:flex;min-height:100vh}
.conteudo{flex:1;min-width:0;display:flex;flex-direction:column}
.pagina{flex:1;min-width:0;padding:24px 32px}
.pagina--estreita{max-width:960px;margin:0 auto;width:100%}

/* ===== 5. SIDEBAR ========================================================= */
.sidebar{
  width:var(--rail-w);flex-shrink:0;background:var(--rail);color:var(--rail-ink);
  display:flex;flex-direction:column;padding:18px 14px;gap:4px;
  transition:width var(--transicao);position:sticky;top:0;height:100vh;
}
.sidebar__logo{display:flex;align-items:center;gap:11px;padding:6px 8px 16px}
.sidebar__logo b{width:36px;height:36px;border-radius:10px;background:var(--cor-primaria);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--fonte-display);font-weight:700;font-size:17px;flex-shrink:0}
.sidebar__logo span{font-family:var(--fonte-display);font-weight:700;font-size:16px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.nav-item{
  display:flex;align-items:center;gap:12px;height:44px;padding:0 12px;border-radius:12px;
  color:var(--rail-muted);font-size:14px;font-weight:600;cursor:pointer;
  transition:background var(--transicao),color var(--transicao);white-space:nowrap;
}
.nav-item svg{width:19px;height:19px;flex-shrink:0}
.nav-item:hover{background:rgba(255,255,255,.06);color:var(--rail-ink)}
.nav-item.is-active{background:var(--cor-primaria);color:#fff}
.sidebar__foot{margin-top:auto}

/* Sidebar recolhida: adicionar .is-collapsed em .sidebar (persistir em localStorage) */
.sidebar.is-collapsed{width:var(--rail-w-collapsed);align-items:center}
.sidebar.is-collapsed .sidebar__logo span,
.sidebar.is-collapsed .nav-item span{display:none}
.sidebar.is-collapsed .nav-item{justify-content:center;padding:0;width:44px}
.sidebar.is-collapsed .sidebar__logo{justify-content:center;padding:6px 0 16px}
/* Duas setinhas prontas (uma por direção) em vez de girar uma só via CSS transform —
   mais simples e não depende do motor de renderização suportar transform em cima de svg. */
.sidebar__toggle-icone--expandir{display:none}
.sidebar.is-collapsed .sidebar__toggle-icone--recolher{display:none}
.sidebar.is-collapsed .sidebar__toggle-icone--expandir{display:block}

/* ===== 6. TOPO ============================================================ */
.topo{
  min-height:var(--topo-h);display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:16px 32px;background:var(--cor-card);border-bottom:1px solid var(--cor-borda);
}
.topo__titulo{font-family:var(--fonte-display);font-size:24px;font-weight:700}
.topo__sub{font-size:13px;color:var(--cor-texto-secundario);margin-top:3px}
.icon-btn{width:38px;height:38px;border-radius:10px;border:1px solid var(--cor-borda);background:var(--cor-card);display:flex;align-items:center;justify-content:center;color:var(--cor-texto-secundario);cursor:pointer}
.icon-btn:hover{background:var(--cor-fundo)}

/* ===== 7. BOTÕES ========================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:var(--ctrl-h);padding:0 18px;border-radius:11px;border:1px solid transparent;
  font-family:var(--fonte-ui);font-size:13.5px;font-weight:600;cursor:pointer;
  transition:background var(--transicao),border-color var(--transicao),transform .05s;white-space:nowrap;
}
.btn svg{width:16px;height:16px}
.btn:active{transform:translateY(1px)}
.btn--primario{background:var(--cor-primaria);color:#fff;box-shadow:var(--sombra-primaria)}
.btn--primario:hover{background:var(--cor-primaria-hover)}
.btn--secundario{background:var(--cor-card);border-color:var(--cor-borda);color:var(--cor-texto)}
.btn--secundario:hover{background:var(--cor-fundo)}
.btn--fantasma{background:transparent;color:var(--cor-texto-secundario)}
.btn--fantasma:hover{background:var(--cor-fundo)}
.btn--perigo{background:var(--cor-card);border-color:var(--erro-borda);color:var(--erro)}
.btn--sucesso{background:var(--ok);color:#fff}
.btn--sm{height:var(--ctrl-h-sm);padding:0 14px;font-size:13px;border-radius:9px}
.btn--lg{height:50px;padding:0 22px;font-size:15px;border-radius:13px}
.btn--bloco{width:100%}
.btn--tracejado{background:transparent;border:1px dashed var(--cor-primaria);color:var(--cor-primaria)}

/* ===== 8. CARDS =========================================================== */
.card{background:var(--cor-card);border:1px solid var(--cor-borda);border-radius:var(--raio)}
.card__pad{padding:18px 20px}
.card__head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--cor-borda)}
.card__title{font-family:var(--fonte-display);font-size:14px;font-weight:700}
.card--sticky{position:sticky;top:24px}
.card--escuro{background:linear-gradient(155deg,#1b1d3a,#3a3aa0);color:#fff;border:none}

/* Rótulo de seção */
.overline{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--cor-texto-fraco)}

/* ===== 9. KPI / MÉTRICAS ================================================== */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.kpi{background:var(--cor-card);border:1px solid var(--cor-borda);border-radius:var(--raio);padding:16px 18px}
.kpi__label{font-size:12px;font-weight:600;color:var(--cor-texto-secundario)}
.kpi__valor{font-family:var(--fonte-display);font-size:26px;font-weight:700;margin-top:6px;font-variant-numeric:tabular-nums}
.kpi__delta{font-size:12px;font-weight:600;margin-top:4px}
.kpi__delta.up{color:var(--ok)} .kpi__delta.down{color:var(--erro)}
.kpi--destaque{background:linear-gradient(150deg,#6f66ff,#4a41d6);color:#fff;border:none}
.kpi--destaque .kpi__label{color:#d7d4fb}

/* ===== 10. TABELAS ======================================================== */
.tabela{width:100%;border-collapse:collapse}
.tabela th{text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--cor-texto-fraco);padding:12px 20px}
.tabela td{padding:13px 20px;font-size:13.5px;border-top:1px solid var(--cor-borda);vertical-align:middle}
.tabela tbody tr:hover{background:var(--cor-card-alt)}
.tabela .num{text-align:right;font-variant-numeric:tabular-nums}
.tabela .forte{font-weight:700;color:var(--cor-texto)}
.cliente-cel{display:flex;align-items:center;gap:12px}

/* ===== 11. AVATAR ========================================================= */
.avatar{width:38px;height:38px;border-radius:11px;background:var(--cor-primaria-clara);color:var(--cor-primaria);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0}
.avatar--sm{width:34px;height:34px;border-radius:10px;font-size:12px}
.avatar--lg{width:64px;height:64px;border-radius:14px;font-size:26px}
.avatar--redondo{border-radius:var(--raio-full)}
.avatar svg{width:20px;height:20px}

/* ===== 11b. MENU DE CONFIGURAÇÕES (cartões-link) ========================= */
.config-item{text-decoration:none;color:inherit;transition:border-color var(--transicao),box-shadow var(--transicao)}
.config-item:hover{border-color:var(--cor-primaria);box-shadow:var(--sombra)}
.config-item__titulo{font-weight:700;font-size:14.5px}

/* ===== 12. BADGES / STATUS =============================================== */
.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--raio-full);font-size:11.5px;font-weight:700;line-height:1}
.badge::before{content:"";width:7px;height:7px;border-radius:var(--raio-full);background:currentColor}
.badge--rascunho{background:var(--st-rascunho-bg);color:var(--st-rascunho)}
.badge--aguardando{background:var(--st-aguardando-bg);color:var(--st-aguardando)}
.badge--visualizado{background:var(--st-visualizado-bg);color:var(--st-visualizado)}
.badge--aprovado{background:var(--st-aprovado-bg);color:var(--st-aprovado)}
.badge--recusado{background:var(--st-recusado-bg);color:var(--st-recusado)}
.badge--liso::before{display:none}

/* Chip / pill de filtro */
.chip{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:var(--raio-full);font-size:12px;font-weight:600;background:var(--cor-card);border:1px solid var(--cor-borda);color:var(--cor-texto-secundario);cursor:pointer}
.chip.is-active{background:var(--cor-primaria);color:#fff;border-color:var(--cor-primaria)}

/* Segmented control (toggle Lista/Semana etc.) */
.segmented{display:inline-flex;padding:3px;border-radius:10px;background:var(--cor-card);border:1px solid var(--cor-borda)}
.segmented button{border:none;background:none;padding:6px 13px;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--cor-texto-secundario);cursor:pointer}
.segmented button.is-active{background:var(--cor-primaria);color:#fff}

/* ===== 13. FORMULÁRIOS ==================================================== */
.campo{display:block;margin-bottom:14px}
.campo__label{display:block;font-size:12px;font-weight:600;color:var(--cor-texto-secundario);margin-bottom:6px}
.input,.select,.textarea{
  width:100%;height:var(--ctrl-h);border:1px solid var(--cor-borda);border-radius:10px;
  padding:0 13px;font-family:var(--fonte-ui);font-size:14px;color:var(--cor-texto);background:var(--cor-card);
}
.textarea{height:auto;min-height:80px;padding:11px 13px;line-height:1.5;resize:vertical}
.input::placeholder,.textarea::placeholder{color:var(--cor-texto-fraco)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--cor-primaria);box-shadow:0 0 0 3px var(--cor-primaria-clara)}
.busca{display:flex;align-items:center;gap:9px;height:var(--ctrl-h);padding:0 14px;border-radius:11px;background:var(--cor-card);border:1px solid var(--cor-borda);color:var(--cor-texto-fraco)}
.busca input{border:none;background:none;outline:none;flex:1;font-family:var(--fonte-ui);font-size:13.5px;color:var(--cor-texto)}

/* ===== 14. PIPELINE / KANBAN ============================================= */
.kanban{display:flex;gap:14px;overflow-x:auto;padding-bottom:8px}
.kanban__col{flex:1;min-width:210px;display:flex;flex-direction:column;background:var(--cor-card);border:1px solid var(--cor-borda);border-radius:var(--raio);overflow:hidden}
.kanban__head{padding:13px 15px;border-bottom:1px solid var(--cor-borda)}
.kanban__head .linha{display:flex;align-items:center;justify-content:space-between}
.kanban__head .titulo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:12.5px}
.kanban__head .ponto{width:9px;height:9px;border-radius:var(--raio-full)}
.kanban__head .cont{font-size:11.5px;font-weight:700;color:var(--cor-texto-fraco)}
.kanban__head .total{font-size:11px;color:var(--cor-texto-secundario);margin-top:3px}
.kanban__body{flex:1;overflow-y:auto;padding:11px;display:flex;flex-direction:column;gap:9px;background:var(--cor-fundo);min-height:120px}
.kanban-card{background:var(--cor-card);border:1px solid var(--cor-borda);border-radius:10px;padding:11px;cursor:grab}
.kanban-card:hover{box-shadow:var(--sombra)}
.kanban-card.is-dragging{opacity:.5;box-shadow:var(--sombra-lg)}
.kanban-card .nome{font-weight:700;font-size:12.5px}
.kanban-card .desc{font-size:11.5px;color:var(--cor-texto-secundario);margin-top:1px}
.kanban-card .rodape{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.kanban-card .valor{font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums}
/* coluna aprovado destacada: adicionar .kanban__col--ok */
.kanban__col--ok .kanban__head{background:var(--st-aprovado-bg)}

/* Aviso flutuante quando o servidor recusa mover um card (ex: falha de rede) */
.pipeline-aviso{
  position:fixed;left:50%;bottom:24px;transform:translate(-50%,16px);
  background:var(--erro-bg);color:var(--erro);border:1px solid var(--erro-borda);
  border-radius:var(--raio);padding:11px 18px;font-size:13px;font-weight:600;
  box-shadow:var(--sombra-lg);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:100;
}
.pipeline-aviso.is-visivel{opacity:1;transform:translate(-50%,0)}

/* ===== 15. TIMELINE (histórico do orçamento) ============================= */
.timeline{display:flex;flex-direction:column;gap:14px}
.timeline__item{display:flex;gap:11px}
.timeline__ponto{width:9px;height:9px;border-radius:var(--raio-full);margin-top:4px;flex-shrink:0;background:var(--cor-primaria)}
.timeline__titulo{font-size:13px;font-weight:600}
.timeline__data{font-size:12px;color:var(--cor-texto-secundario)}

/* ===== 16. AGENDA ========================================================= */
.agenda-dia{margin-bottom:24px}
.agenda-dia__label{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.agenda-dia__label span:first-child{font-family:var(--fonte-display);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--cor-texto-secundario)}
.agenda-dia__label .rule{flex:1;height:1px;background:var(--cor-borda)}
.agenda-dia.is-hoje .agenda-dia__label span:first-child{color:var(--cor-primaria)}
.agenda-item{display:flex;align-items:center;gap:18px;background:var(--cor-card);border:1px solid var(--cor-borda);border-radius:var(--raio);padding:15px 20px}
.agenda-item.is-hoje{border:1.5px solid var(--cor-primaria);box-shadow:0 8px 20px -12px rgba(79,70,229,.4)}
.agenda-item__hora{text-align:center;width:60px;flex-shrink:0}
.agenda-item__hora .dia{font-size:11px;font-weight:700;text-transform:uppercase;color:var(--cor-texto-fraco)}
.agenda-item__hora .h{font-family:var(--fonte-display);font-size:20px;font-weight:700}
.agenda-item__sep{width:1px;align-self:stretch;background:var(--cor-borda)}

/* ===== 17. BOTTOM NAV + FAB (mobile) =====================================
   Os dois só existem no celular — no desktop já tem "+ Novo orçamento" no
   cabeçalho de cada página, então o botão flutuante ali seria redundante. */
.bottom-nav{display:none}
.fab{
  display:none;position:fixed;right:20px;bottom:calc(var(--bottomnav-h) + 12px);z-index:40;
  width:56px;height:56px;border-radius:var(--raio-full);border:none;
  background:linear-gradient(140deg,#6f66ff,#4a41d6);color:#fff;
  align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 12px 24px -6px rgba(79,70,229,.7);
}
.fab svg{width:26px;height:26px}

/* ===== 18. PÁGINA PÚBLICA (documento do orçamento) ======================
   Estas superfícies recebem as cores do TEMA via variáveis inline no <body>
   ou no wrapper: --doc-cabecalho, --doc-fundo, --doc-texto, --doc-total.
   Definir defaults = tema Índigo. */
.doc{--doc-cabecalho:var(--cor-primaria);--doc-fundo:#ffffff;--doc-texto:#1f2430;--doc-total:var(--cor-primaria);
  background:var(--doc-fundo);color:var(--doc-texto);border-radius:var(--raio-lg);overflow:hidden;box-shadow:var(--sombra-lg)}
.doc__cabecalho{background:var(--doc-cabecalho);color:#fff;padding:26px 32px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.doc__total{display:inline-flex;align-items:center;gap:16px;background:var(--doc-total);color:#fff;padding:12px 22px;border-radius:12px}
.doc__total .v{font-family:var(--fonte-display);font-size:24px;font-weight:700;font-variant-numeric:tabular-nums}

/* ===== 19. UTILITÁRIOS ==================================================== */
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center}
.between{justify-content:space-between}
.center{align-items:center;justify-content:center}
.wrap{flex-wrap:wrap}
.gap-6{gap:6px}.gap-8{gap:8px}.gap-10{gap:10px}.gap-12{gap:12px}.gap-14{gap:14px}.gap-18{gap:18px}.gap-20{gap:20px}
.grid{display:grid}
.col-2{grid-template-columns:1fr 1fr}
.flex-1{flex:1;min-width:0}
.mt-auto{margin-top:auto}
.hide{display:none}
.text-muted{color:var(--cor-texto-secundario)}
.text-faint{color:var(--cor-texto-fraco)}
.divisor{height:1px;background:var(--cor-borda);border:none;margin:0}
.zona-perigo{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;background:var(--cor-card);border:1px solid var(--cor-borda);border-radius:var(--raio)}
.zona-perigo .t{font-size:13.5px;font-weight:700;color:var(--erro)}

/* ===== 20. RESPONSIVO ==================================================== */
@media (max-width:860px){
  .sidebar{display:none}
  .pagina{padding:16px 18px calc(var(--bottomnav-h) + 24px)}
  .topo{padding:14px 18px}
  .kpi-grid{grid-template-columns:1fr 1fr}
  .col-2{grid-template-columns:1fr}
  /* Barra inferior fixa */
  .bottom-nav{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;height:var(--bottomnav-h);
    background:var(--cor-card);border-top:1px solid var(--cor-borda);
    align-items:flex-start;justify-content:space-around;padding:11px 8px 0;
  }
  .fab{display:flex}
  .bottom-nav a{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--cor-texto-fraco);font-size:10px;font-weight:600;text-decoration:none}
  .bottom-nav a.is-active{color:var(--cor-primaria);font-weight:700}
  .bottom-nav svg{width:21px;height:21px}
}

/* ===== 21. ALIASES LEGADOS (remover após migração completa) ==============
   Mantêm o CSS antigo funcionando enquanto as telas são migradas.
   Apontam os nomes antigos para os novos tokens. */
:root{
  --cor-borda-legado:var(--cor-borda);
  --sombra-card:var(--sombra);
  --cor-texto-suave:var(--cor-texto-secundario);
  --sombra-media:var(--sombra);
}
.barra-lateral{ /* nome antigo da sidebar */ }
.fab-novo{ /* nome antigo do FAB — migrar para .fab */ }

/* ===== 22. COMPONENTES DO FORMULÁRIO DE ORÇAMENTO =======================
   Autocomplete (busca de cliente e de item do catálogo), cadastro rápido
   de cliente e linha de item editável. Reutilizáveis, tematizados. */
.btn:disabled{opacity:.5;cursor:not-allowed}

/* Grids de conteúdo + resumo lateral (colapsam para 1 coluna no mobile) */
.grid-form{display:grid;grid-template-columns:1fr 356px;gap:20px;align-items:start}
.grid-detalhe{display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start}
.grid-perfil{display:grid;grid-template-columns:1fr 320px;gap:20px;align-items:start}
@media (max-width:860px){.grid-form,.grid-detalhe,.grid-perfil{grid-template-columns:1fr}}

.busca-cliente-wrap,.item-busca-wrap{position:relative}
.sugestoes-lista{
  display:none;position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:20;
  background:var(--cor-card);border:1px solid var(--cor-borda);border-radius:12px;
  box-shadow:var(--sombra-lg);overflow:hidden;max-height:320px;overflow-y:auto;
}
.sugestoes-cabecalho{padding:9px 14px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--cor-texto-fraco);border-bottom:1px solid var(--cor-borda)}
.sugestao-item{display:flex;align-items:center;gap:11px;padding:10px 14px;cursor:pointer}
.sugestao-item:hover,.sugestao-item--ativo{background:var(--cor-primaria-clara)}
.sugestao-texto{flex:1;min-width:0}
.sugestao-nome{font-size:13.5px;font-weight:600;color:var(--cor-texto)}
.sugestao-nome mark{background:var(--cor-primaria-clara);color:var(--cor-primaria-texto);border-radius:3px;padding:0 1px}
.sugestao-contato{font-size:12px;color:var(--cor-texto-secundario)}
.sugestao-dica{font-size:11px;color:var(--cor-texto-fraco);white-space:nowrap}
.sugestao-vazia{padding:12px 14px;font-size:13px;color:var(--cor-texto-secundario)}
.sugestao-cadastrar{border-top:1px solid var(--cor-borda)}
.sugestao-cadastrar-icone{width:26px;height:26px;border-radius:8px;background:var(--cor-primaria);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}
.sugestao-avatar{flex-shrink:0}

/* Avatares coloridos (sugestões) — variações opcionais sobre o .avatar */
.avatar-lista{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;background:var(--cor-primaria-clara);color:var(--cor-primaria);flex-shrink:0}
.avatar--azul{background:#e5edff;color:#2f5fdb}
.avatar--laranja{background:#fdefdc;color:#c2740a}
.avatar--verde{background:#e3f5ea;color:#1b7a4b}
.avatar--roxo{background:#efe9fd;color:#6d40d6}

/* Cadastro rápido de cliente (inline no orçamento) */
.novo-cliente-form{margin-top:12px;padding:14px;border:1px solid var(--cor-borda);border-radius:12px;background:var(--cor-fundo)}
.novo-cliente-titulo{font-size:12.5px;font-weight:700;margin-bottom:10px}
.novo-cliente-form label{display:block;font-size:12px;font-weight:600;color:var(--cor-texto-secundario);margin:8px 0 6px}
.novo-cliente-acoes{display:flex;gap:8px;margin-top:12px}
.novo-cliente-tag{margin-top:12px;padding:10px 12px;border-radius:10px;background:var(--ok-bg);color:var(--ok);font-size:13px;font-weight:600}

/* Linha de item editável do orçamento */
.item-orc{display:flex;align-items:flex-start;gap:10px;padding:12px 20px;border-top:1px solid var(--cor-borda)}
.item-orc__desc{flex:1;min-width:0}
.item-orc__qtd{width:74px;flex-shrink:0;text-align:center}
.item-orc__preco{width:120px;flex-shrink:0;text-align:right}
.item-orc__total{width:104px;flex-shrink:0;text-align:right;font-weight:700;font-variant-numeric:tabular-nums;padding-top:11px;font-size:13.5px}
.item-orc__remover{border:none;background:none;color:var(--cor-texto-fraco);cursor:pointer;font-size:22px;line-height:1;padding:8px 2px 0}
.item-orc__remover:hover{color:var(--erro)}
.item-catalogo-nota{font-size:11.5px;color:var(--cor-texto-suave);margin-top:5px;font-weight:600;background:none;border:none;padding:0;cursor:pointer;text-align:left}
.item-catalogo-nota:hover{text-decoration:underline}
.item-catalogo-nota.is-marcado{color:var(--ok)}
@media (max-width:640px){
  .item-orc{flex-wrap:wrap}
  .item-orc__desc{flex-basis:100%}
  .item-orc__preco{flex:1}
  .item-orc__total{padding-top:0;align-self:center}
}

/* ===== 23. AGENDA — VISÃO SEMANA (grade de horários) ====================
   Grade de 08h–18h (11 linhas de 56px). Eventos posicionados por top inline. */
.semana-scroll{overflow-x:auto}
.semana-grade{display:grid;grid-template-columns:56px repeat(7,minmax(120px,1fr));background:var(--cor-card);border:1px solid var(--cor-borda);border-radius:var(--raio);overflow:hidden;min-width:820px}
.semana-gutter{border-right:1px solid var(--cor-borda)}
.semana-cabecalho-vazio{height:56px;border-bottom:1px solid var(--cor-borda)}
.semana-hora{height:56px;font-size:11px;color:var(--cor-texto-fraco);padding:4px 8px 0;text-align:right}
.semana-dia{border-right:1px solid var(--cor-borda);position:relative}
.semana-dia:last-child{border-right:none}
.semana-dia--hoje{background:rgba(79,70,229,.04)}
.semana-dia-cabecalho{height:56px;border-bottom:1px solid var(--cor-borda);padding:9px 10px;text-align:center}
.semana-dia-nome{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--cor-texto-secundario)}
.semana-dia--hoje .semana-dia-nome{color:var(--cor-primaria)}
.semana-dia-num{font-family:var(--fonte-display);font-size:16px;font-weight:700;margin-top:1px}
.semana-dia-corpo{position:relative}
.semana-slot{height:56px;border-bottom:1px solid var(--cor-borda)}
.semana-evento{position:absolute;left:5px;right:5px;min-height:50px;border-radius:9px;padding:7px 9px;overflow:hidden;border-left:3px solid;text-decoration:none;box-shadow:var(--sombra-sm)}
.semana-evento-nome{font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.semana-evento-hora{font-size:11px;margin-top:2px;opacity:.85}
.semana-evento--agendado{background:var(--st-visualizado-bg);border-color:var(--cor-primaria);color:var(--cor-primaria-texto)}
.semana-evento--em_andamento{background:var(--st-aguardando-bg);border-color:var(--st-aguardando);color:var(--st-aguardando)}
.semana-evento--concluido{background:var(--st-aprovado-bg);border-color:var(--st-aprovado);color:var(--st-aprovado)}
.semana-evento--cancelado{background:var(--st-recusado-bg);border-color:var(--st-recusado);color:var(--st-recusado)}
.agenda-legenda{display:flex;gap:18px;flex-wrap:wrap;margin-top:16px;font-size:12.5px;color:var(--cor-texto-secundario)}
.agenda-legenda span{display:inline-flex;align-items:center;gap:7px}
.legenda-cor{width:11px;height:11px;border-radius:4px;display:inline-block}
.legenda-cor.semana-evento--agendado{background:var(--cor-primaria)}
.legenda-cor.semana-evento--em_andamento{background:var(--st-aguardando)}
.legenda-cor.semana-evento--concluido{background:var(--st-aprovado)}

/* ===== 24. ACESSO (login / cadastro) — página standalone =============== */
.auth{min-height:100vh;display:flex}
.auth__marca{width:46%;flex-shrink:0;background:linear-gradient(165deg,#1b1d3a,#14152a);color:#fff;padding:44px 46px;display:flex;flex-direction:column}
.auth__marca h2{font-size:30px;font-weight:800;line-height:1.18;color:#fff}
.auth__metricas{display:flex;gap:26px;margin-top:30px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12)}
.auth__metricas strong{display:block;font-family:var(--fonte-display);font-size:20px;font-weight:800}
.auth__metricas span{font-size:12.5px;color:#9a97c4}
.auth__form{flex:1;display:flex;align-items:center;justify-content:center;padding:40px}
.auth__form form{width:100%;max-width:360px}
.campo-senha{position:relative}
.campo-senha .input{padding-right:44px}
.campo-senha-olho{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:34px;height:34px;border:none;background:none;color:var(--cor-texto-fraco);cursor:pointer;display:flex;align-items:center;justify-content:center}
.campo-senha-olho svg{width:18px;height:18px}
.checkbox-linha{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--cor-texto-secundario);margin:4px 0 18px;line-height:1.5}
.checkbox-linha input{margin-top:2px;flex-shrink:0}
@media (max-width:860px){
  .auth{flex-direction:column}
  .auth__marca{width:100%;padding:26px 22px}
  .auth__marca h2{font-size:22px}
  .auth__metricas{margin-top:18px;padding-top:16px;gap:18px}
  .auth__form{padding:28px 20px}
}

/* ===== 25. ASSINAR — passo numerado + planos ============================ */
.passo{width:26px;height:26px;border-radius:var(--raio-full);background:var(--cor-primaria-clara);color:var(--cor-primaria);font-size:12.5px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.beneficio-check{width:32px;height:32px;border-radius:9px;background:var(--cor-primaria-clara);color:var(--cor-primaria);display:flex;align-items:center;justify-content:center;flex-shrink:0}
@media (max-width:860px){.planos-grade{grid-template-columns:1fr !important}}

/* ===== 26. DOCUMENTO DO ORÇAMENTO (temas personalizado + tradicional) ====
   Preservado do stylesheet anterior. Subsistema de aparência dirigido
   pelas colunas tema_* da empresa (páginas pública e /aparencia, e paralelo
   ao PDF). Classes .orc-*/.doc-tradicional/.trad-* — não conflitam com o
   design system. Vars por-documento vêm inline nos partials. */
/* Aparência personalizável do orçamento (PDF e página pública)         */
/* Usa var(--cor-primaria)/var(--cor-primaria-escura), que já são       */
/* sobrescritas por empresa na página pública e no painel de ajuste.   */
/* ------------------------------------------------------------------ */

.orc-doc {
  color: #1c2333;
  font-size: 14.5px;
  line-height: 1.5;
}

.orc-cabecalho-wrap {
  position: relative;
  margin-bottom: 16px;
}

.orc-cabecalho {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  overflow: hidden;
}

.orc-cabecalho--faixa {
  background: var(--cor-primaria);
  border-color: var(--cor-primaria);
}

.orc-cabecalho--escuro {
  background: #141b2e;
  border-color: #141b2e;
}

.orc-cabecalho--lateral {
  border-left: 6px solid var(--cor-primaria);
}

.orc-cabecalho-info {
  flex: 1;
  min-width: 150px;
}

.orc-empresa-nome {
  font-size: 19px;
  font-weight: 700;
  color: var(--cor-primaria);
  margin-bottom: 4px;
}

.orc-cabecalho--faixa .orc-empresa-nome {
  color: var(--cor-sobre-primaria);
}

.orc-cabecalho--escuro .orc-empresa-nome {
  color: var(--cor-primaria);
}

.orc-empresa-linha {
  font-size: 12.5px;
  color: var(--cor-texto-suave);
}

.orc-cabecalho--faixa .orc-empresa-linha {
  color: var(--cor-sobre-primaria);
  opacity: 0.85;
}

.orc-cabecalho--escuro .orc-empresa-linha {
  color: #9aa5c0;
}

.orc-logo {
  max-height: 60px;
  max-width: 150px;
  object-fit: contain;
  flex-shrink: 0;
}

.orc-cabecalho-numero {
  text-align: right;
  flex-shrink: 0;
  /* Reserva espaço embaixo pra "Válido até" nunca entrar na área do selo,
     que fica de propósito sobrepondo o canto inferior direito do cabeçalho */
  padding-bottom: 14px;
}

.orc-num-titulo {
  font-size: 16px;
  font-weight: 700;
  color: var(--cor-primaria);
  margin-bottom: 4px;
}

.orc-cabecalho--faixa .orc-num-titulo {
  color: var(--cor-sobre-primaria);
}

.orc-cabecalho--escuro .orc-num-titulo {
  color: var(--cor-primaria);
}

.orc-num-linha {
  font-size: 12.5px;
  color: var(--cor-texto-suave);
}

.orc-cabecalho--faixa .orc-num-linha {
  color: var(--cor-sobre-primaria);
  opacity: 0.85;
}

.orc-cabecalho--escuro .orc-num-linha {
  color: #9aa5c0;
}

/* Decoração: círculo sutil, fita diagonal ou selo com iniciais no canto do cabeçalho */
.orc-decoracao-circulo .orc-cabecalho::after {
  content: '';
  position: absolute;
  top: -45px;
  right: -35px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--cor-primaria);
  opacity: 0.1;
}

.orc-decoracao-circulo .orc-cabecalho--faixa::after {
  background: var(--cor-sobre-primaria);
  opacity: 0.16;
}

.orc-decoracao-circulo .orc-cabecalho--escuro::after {
  background: #fff;
  opacity: 0.16;
}

.orc-decoracao-fita .orc-cabecalho::before {
  content: '';
  position: absolute;
  top: 14px;
  left: -42px;
  width: 170px;
  height: 26px;
  background: var(--cor-primaria);
  transform: rotate(-45deg);
}

.orc-selo {
  display: none;
  position: absolute;
  right: 26px;
  bottom: -22px;
  width: 44px;
  height: 44px;
  border-radius: 99px;
  background: var(--cor-primaria);
  border: 2px solid var(--cor-sobre-primaria);
  color: var(--cor-sobre-primaria);
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  box-shadow: var(--sombra-media);
}

.orc-decoracao-selo .orc-selo {
  display: flex;
}

.orc-cliente {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  padding: 10px 16px;
  margin-bottom: 16px;
}

.orc-cliente-rotulo {
  width: 100%;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--cor-texto-suave);
}

.orc-cliente-contato {
  font-size: 12.5px;
  color: var(--cor-texto-suave);
  margin-left: 10px;
}

.orc-tabela-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 16px;
}

.orc-tabela {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 13px;
}

.orc-tabela th {
  background: var(--cor-primaria);
  color: var(--cor-sobre-primaria);
  text-align: left;
  padding: 8px 10px;
  font-size: 11px;
  text-transform: uppercase;
}

.orc-tabela td {
  padding: 8px 10px;
}

.orc-tabela--zebra tbody tr:nth-child(even) td {
  background: var(--cor-tabela-alt, #f5f7fa);
}

.orc-tabela--zebra, .orc-tabela--bordas {
  border: 1px solid var(--cor-borda);
}

.orc-tabela--zebra th, .orc-tabela--zebra td,
.orc-tabela--bordas th, .orc-tabela--bordas td {
  border-right: 1px solid var(--cor-borda);
}

.orc-tabela--zebra th:last-child, .orc-tabela--zebra td:last-child,
.orc-tabela--bordas th:last-child, .orc-tabela--bordas td:last-child {
  border-right: none;
}

.orc-tabela--bordas td {
  border-bottom: 1px solid var(--cor-borda);
}

.orc-tabela--minimal td {
  border-bottom: 1px solid var(--cor-borda);
}

.orc-secao {
  margin-bottom: 14px;
}

.orc-secao-titulo {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--cor-texto-suave);
  margin-bottom: 4px;
}

.orc-totais {
  text-align: right;
  margin-top: 6px;
}

.orc-linha-total {
  font-size: 13px;
  color: var(--cor-texto-suave);
  margin-bottom: 2px;
}

.orc-desconto {
  color: #c53030;
}

.orc-total-destaque {
  display: inline-block;
  background: var(--cor-primaria);
  color: var(--cor-sobre-primaria);
  font-size: 16px;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 8px;
  margin-top: 6px;
}

/* Estilo dos cantos: "quadrado" deixa cabeçalho, caixa do cliente, total e */
/* selo com bordas retas — igual ao que o PDF desenha nessa opção */
.orc-cantos-quadrado .orc-cabecalho,
.orc-cantos-quadrado .orc-cliente,
.orc-cantos-quadrado .orc-total-destaque {
  border-radius: 0;
}

.orc-cantos-quadrado .orc-selo {
  border-radius: 6px;
}



/* ------------------------------------------------------------------ */
/* Modelo "tradicional" de orçamento — sempre preto/branco/cinza,      */
/* independente da cor escolhida pela empresa; só a logo pode ter cor. */
/* ------------------------------------------------------------------ */
.doc-tradicional {
  color: #000;
  font-size: 12.5px;
  line-height: 1.5;
  border: 1px solid #000;
  background: #fff;
}

.trad-cabecalho {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 20px;
  border-bottom: 2px solid #000;
}

.trad-logo-wrap {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}

.trad-logo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.trad-logo-placeholder {
  width: 80px;
  height: 80px;
  border: 2px dashed #999;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  color: #999;
  line-height: 1.3;
}

.trad-empresa-info {
  flex: 1;
  min-width: 0;
}

.trad-empresa-nome {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 4px;
}

.trad-linha {
  font-size: 11.5px;
  color: #333;
}

.trad-info-bar {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #000;
  font-size: 12px;
  font-weight: 600;
}

.trad-info-bar > div {
  flex: 1;
  padding: 8px 16px;
  border-right: 1px solid #000;
}

.trad-info-bar > div:last-child {
  border-right: none;
}

.trad-secao {
  border-bottom: 1px solid #000;
}

.trad-secao-titulo {
  background: #ececec;
  font-weight: 700;
  text-align: center;
  padding: 6px;
  border-bottom: 1px solid #000;
  letter-spacing: 0.03em;
  font-size: 12.5px;
}

.trad-secao-corpo {
  padding: 10px 16px;
}

.trad-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 24px;
}

.trad-campo-full {
  grid-column: 1 / -1;
}

.trad-tabela-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.trad-tabela {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 12px;
}

.trad-tabela th, .trad-tabela td {
  border: 1px solid #000;
  padding: 6px 10px;
  text-align: left;
}

.trad-tabela th {
  background: #ececec;
  text-align: center;
  font-weight: 700;
}

.trad-tabela td:first-child, .trad-tabela td:nth-child(3) {
  text-align: center;
}

.trad-tabela td:nth-child(4), .trad-tabela td:nth-child(5) {
  text-align: right;
}

.trad-totais {
  display: flex;
  border-bottom: 1px solid #000;
}

.trad-total-caixa {
  flex: 1;
  padding: 8px 16px;
  border-right: 1px solid #000;
  font-size: 12.5px;
}

.trad-total-caixa:last-child {
  border-right: none;
}

.trad-total-rotulo {
  font-weight: 700;
  font-size: 11px;
  margin-bottom: 2px;
}

.trad-fim-obs {
  margin-top: 10px;
  text-align: center;
  font-size: 11px;
  color: #666;
}

.trad-assinaturas {
  display: flex;
  gap: 40px;
  padding: 46px 24px 22px;
}

.trad-assinatura-linha {
  flex: 1;
  text-align: center;
  border-top: 1px solid #000;
  padding-top: 6px;
  font-size: 12px;
}

@media (max-width: 600px) {
  .trad-cabecalho {
    flex-direction: column;
    text-align: center;
  }

  .trad-info-bar {
    flex-direction: column;
  }

  .trad-info-bar > div {
    border-right: none;
    border-bottom: 1px solid #000;
  }

  .trad-info-bar > div:last-child {
    border-bottom: none;
  }

  .trad-grid {
    grid-template-columns: 1fr;
  }

  .trad-totais {
    flex-direction: column;
  }

  .trad-total-caixa {
    border-right: none;
    border-bottom: 1px solid #000;
  }

  .trad-total-caixa:last-child {
    border-bottom: none;
  }

  .trad-assinaturas {
    flex-direction: column;
    gap: 24px;
  }
}

/* ===== 27. EDITOR DE APARÊNCIA (/perfil/aparencia) ======================
   Preservado do stylesheet anterior. Layout do editor + paleta de cores
   + prévia ao vivo (usa os .orc-* do §26). */
.aparencia-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.preview-orcamento {
  background: var(--cor-card);
  border: 1px solid var(--cor-borda);
  border-radius: 12px;
  box-shadow: var(--sombra);
  padding: 20px;
  overflow-x: auto;
}

/* Só a prévia da tela de ajuste de aparência precisa de uma largura mínima */
/* (pra não amassar o layout lado a lado); a página pública do orçamento    */
/* deve encolher livremente pra caber em qualquer celular, sem cortar nada. */
.preview-orcamento .orc-doc {
  min-width: 360px;
}

.preview-logo-esquerda [data-logo="direita"] { display: none; }
.preview-logo-direita [data-logo="esquerda"] { display: none; }

.preview-estilo-personalizado [data-estilo="tradicional"] { display: none; }
.preview-estilo-tradicional [data-estilo="personalizado"] { display: none; }

@media (max-width: 800px) {
  .aparencia-layout {
    grid-template-columns: 1fr;
  }
}

/* Paleta de cores clicável (tela de Aparência) */
.paleta-cores {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
}

.amostra-cor {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--cor-texto-suave);
  transition: outline-color 0.15s ease;
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.amostra-cor--clara {
  border: 1px solid var(--cor-borda);
}

.amostra-cor--custom {
  border: 1.5px dashed #b9c2d4;
  background: #fff;
}

.amostra-cor.selecionada {
  outline-color: var(--cor-texto);
}

.input-cor-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ===== 28. SUPERFÍCIES DO DOCUMENTO DIRIGIDAS PELO TEMA (20 temas) =======
   O partial orcamento_conteudo sempre emite --doc-*. Estas regras fazem o
   fundo/texto/total/borda virem do tema escolhido — é o que deixa os temas
   escuros legíveis. Especificidade .orc-doc .X (0,2,0) vence os defaults. */
.orc-doc{background:var(--doc-fundo);color:var(--doc-texto);padding:22px;border-radius:12px}
.orc-doc .orc-empresa-nome{color:var(--doc-cabecalho-nome)}
.orc-doc .orc-empresa-linha,
.orc-doc .orc-cliente-contato,
.orc-doc .orc-cliente-rotulo,
.orc-doc .orc-num-linha,
.orc-doc .orc-secao > div,
.orc-doc .orc-linha-total{color:var(--doc-texto-suave)}
.orc-doc .orc-num-titulo,
.orc-doc .orc-cliente-linha strong,
.orc-doc .orc-secao-titulo{color:var(--doc-texto)}
.orc-doc .orc-cabecalho,
.orc-doc .orc-cliente,
.orc-doc .orc-secao,
.orc-doc .orc-tabela th,
.orc-doc .orc-tabela td{border-color:var(--doc-borda)}
.orc-doc .orc-cliente{background:var(--doc-zebra)}
.orc-doc.orc-tabela--zebra .orc-tabela tbody tr:nth-child(even) td{background:var(--doc-zebra)}
.orc-doc .orc-total-destaque{background:var(--doc-total);color:var(--doc-total-texto)}
/* Re-afirma os cabeçalhos preenchidos (faixa/escuro) sobre a regra geral do nome */
.orc-doc .orc-cabecalho--faixa .orc-empresa-nome,
.orc-doc .orc-cabecalho--faixa .orc-empresa-linha{color:var(--cor-sobre-primaria)}
.orc-doc .orc-cabecalho--escuro .orc-empresa-nome{color:#fff}
.orc-doc .orc-cabecalho--escuro .orc-empresa-linha{color:#9aa5c0}

/* ===== 29. GALERIA DE TEMAS + SUPERFÍCIES (editor de aparência) ========= */
.temas-chips{display:flex;gap:8px;margin-bottom:14px}
.temas-galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:12px}
.tema-card{text-align:left;padding:6px;border:2px solid var(--cor-borda);border-radius:12px;background:var(--cor-card);cursor:pointer;position:relative;font-family:inherit}
.tema-card:hover{border-color:var(--cor-borda-forte)}
.tema-card.is-selected{border-color:var(--cor-primaria)}
.tema-card.is-selected::after{content:"✓";position:absolute;top:8px;right:8px;width:20px;height:20px;border-radius:var(--raio-full);background:var(--cor-primaria);color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center;z-index:2}
.tema-mini{border-radius:7px;overflow:hidden;border:1px solid var(--cor-borda)}
.tema-mini__cab{padding:6px 8px;display:flex;justify-content:space-between;align-items:center;font-size:9px;font-weight:700}
.tema-mini__corpo{padding:8px}
.tema-mini__item{display:flex;justify-content:space-between;font-size:8.5px;margin-bottom:7px}
.tema-mini__total-wrap{display:flex;justify-content:flex-end}
.tema-mini__total{font-size:8px;font-weight:700;padding:2px 7px;border-radius:4px}
.tema-card__nome{font-size:11.5px;font-weight:600;margin-top:7px;padding:0 2px 2px}
/* Personalização por superfície */
.superficie-linha{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--cor-borda)}
.superficie-swatch{width:36px;height:36px;border-radius:9px;border:1px solid var(--cor-borda-forte);flex-shrink:0;position:relative;overflow:hidden;cursor:pointer}
.superficie-swatch input[type=color]{position:absolute;inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px);border:none;padding:0;background:none;cursor:pointer}
.superficie-nome{flex:1;font-size:13px;font-weight:600}
.contraste-selo{font-size:11px;font-weight:700;padding:3px 9px;border-radius:var(--raio-full);white-space:nowrap}
.contraste-selo.ok{background:var(--ok-bg);color:var(--ok)}
.contraste-selo.baixo{background:var(--alerta-bg);color:var(--alerta)}