/* Sollus — design system.
   Azul e amarelo do logotipo: o azul carrega a estrutura (lateral, títulos,
   ações primárias) e o amarelo marca o que é sol, energia e decisão.
   Cartões de baixo contraste, tipografia curta, foco sempre visível.
   As duas cores são sobrescritas em tempo de execução pelo que estiver em
   Configurações → Empresa (`--marca` e `--destaque`). */
:root {
  --marca: #1668b0;
  --marca-escuro: #0f4b83;
  --marca-noite: #0a3459;
  --marca-claro: #e8f2fb;
  --marca-medio: #5b9ed6;
  --destaque: #f5c518;
  --destaque-escuro: #cc9f00;
  --destaque-claro: #fff8e0;

  --fundo: #f4f7f6;
  --superficie: #ffffff;
  --superficie-2: #fafbfb;
  --texto: #14231f;
  --texto-suave: #5d716b;
  --texto-fraco: #8a9a95;
  --borda: #e2eae7;
  --borda-forte: #ccdad5;

  --sucesso: #12876a;
  --sucesso-claro: #e2f5ef;
  --aviso: #b8790f;
  --aviso-claro: #fdf4e3;
  --perigo: #cf4141;
  --perigo-claro: #fdeaea;
  --info: #2f6fb3;
  --info-claro: #eaf2fb;
  --roxo: #6f5cbf;

  --sombra: 0 1px 2px rgba(7, 71, 47, .06), 0 1px 3px rgba(7, 71, 47, .05);
  --sombra-media: 0 4px 14px rgba(7, 71, 47, .10);
  --sombra-alta: 0 18px 48px rgba(5, 46, 33, .24);
  --raio: 12px;
  --raio-p: 8px;
  --lateral: 244px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, Roboto, Helvetica, sans-serif;
  background: var(--fundo); color: var(--texto); font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: var(--marca); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 21px; font-weight: 700; letter-spacing: -.2px; }
h2 { font-size: 16.5px; font-weight: 650; letter-spacing: -.1px; }
h3 { font-size: 14px; font-weight: 650; }
small, .pequeno { font-size: 12px; color: var(--texto-suave); }
.mono { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }

:focus-visible { outline: 3px solid rgba(11, 107, 82, .35); outline-offset: 2px; border-radius: 4px; }
.pular { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--marca);
  color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0; font-weight: 600; }
.pular:focus { left: 0; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.carregando { display: grid; place-items: center; height: 100vh; width: 100%; color: var(--texto-suave); }

/* ===================== layout ===================== */
#app { display: flex; min-height: 100vh; }

.lateral {
  width: var(--lateral); flex-shrink: 0; background: var(--marca-noite); color: #cfe4dc;
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.lateral .marca { display: flex; align-items: center; gap: 10px; padding: 16px 18px;
  border-bottom: 1px solid rgba(255,255,255,.07); color: #fff; }
.lateral .marca .sigla { width: 34px; height: 34px; border-radius: 9px; flex: none;
  background: linear-gradient(140deg, var(--destaque), #ffe07a); display: grid; place-items: center;
  font-weight: 800; font-size: 16px; color: #3a2704; overflow: hidden; }
.lateral .marca .sigla img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lateral .marca b { font-size: 15.5px; font-weight: 700; display: block; letter-spacing: -.2px; }
.lateral .marca span { font-size: 10.5px; color: var(--marca-medio); }
.lateral nav { flex: 1; padding: 6px 0 20px; }
.lateral .grupo { font-size: 10px; text-transform: uppercase; letter-spacing: 1.1px; color: #5c9080;
  padding: 14px 18px 5px; font-weight: 700; }
.lateral a.item { display: flex; align-items: center; gap: 10px; padding: 8px 18px; color: #cfe4dc;
  font-size: 13.5px; border-left: 3px solid transparent; }
.lateral a.item:hover { background: rgba(255,255,255,.06); color: #fff; text-decoration: none; }
.lateral a.item.ativo { background: rgba(245,165,36,.13); color: #ffd190; border-left-color: var(--destaque); font-weight: 600; }
.lateral .icone { width: 18px; text-align: center; flex: none; }
.lateral .selo-menu { margin-left: auto; background: var(--destaque); color: #3a2704; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; padding: 1px 7px; min-width: 18px; text-align: center; }
.lateral .rodape { padding: 13px 18px; border-top: 1px solid rgba(255,255,255,.07);
  font-size: 11.5px; color: #5c9080; line-height: 1.6; }

.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topo { background: var(--superficie); border-bottom: 1px solid var(--borda); padding: 9px 20px;
  display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 40; }
.topo .titulo { font-weight: 700; font-size: 15px; flex: 1; min-width: 0; }
.topo .titulo .contexto { font-weight: 400; font-size: 12px; color: var(--texto-suave); display: block; }
.pagina { padding: 18px 20px 60px; flex: 1; }
.abrir-menu { display: none; }

@media (max-width: 900px) {
  .lateral { position: fixed; z-index: 60; transform: translateX(-100%); transition: transform .2s; }
  .lateral.aberta { transform: none; box-shadow: var(--sombra-alta); }
  .abrir-menu { display: grid; }
  .pagina { padding: 14px 12px 60px; }
}

/* ===================== componentes ===================== */
.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
  box-shadow: var(--sombra); }
.cartao > header { padding: 13px 16px; border-bottom: 1px solid var(--borda);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cartao > header h2 { flex: 1; min-width: 0; }
.cartao .corpo { padding: 16px; }
.cartao .corpo.compacto { padding: 10px 12px; }

.grade { display: grid; gap: 14px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.linha { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.linha.fim { justify-content: flex-end; }
.espaco { flex: 1; }
.pilha { display: flex; flex-direction: column; gap: 14px; }

.indicador { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 13px 15px; box-shadow: var(--sombra); }
.indicador .rotulo { font-size: 11.5px; color: var(--texto-suave); text-transform: uppercase;
  letter-spacing: .5px; font-weight: 650; }
.indicador .valor { font-size: 23px; font-weight: 750; letter-spacing: -.6px; margin-top: 3px;
  font-variant-numeric: tabular-nums; }
.indicador .nota { font-size: 11.5px; color: var(--texto-fraco); margin-top: 2px; }
.indicador.destaque { background: linear-gradient(150deg, var(--marca), var(--marca-escuro)); border-color: transparent; color: #fff; }
.indicador.destaque .rotulo, .indicador.destaque .nota { color: rgba(255,255,255,.72); }
.indicador.ambar .valor { color: var(--destaque-escuro); }

button, .botao { font: inherit; cursor: pointer; border: 1px solid var(--borda-forte);
  background: var(--superficie); color: var(--texto); border-radius: var(--raio-p);
  padding: 7px 13px; font-weight: 600; font-size: 13.5px; display: inline-flex;
  align-items: center; gap: 7px; line-height: 1.3; }
button:hover, .botao:hover { background: var(--superficie-2); text-decoration: none; }
button:disabled { opacity: .5; cursor: not-allowed; }
.botao.primario, button.primario { background: var(--marca); border-color: var(--marca); color: #fff; }
.botao.primario:hover, button.primario:hover { background: var(--marca-escuro); }
.botao.acento, button.acento { background: var(--destaque); border-color: var(--destaque); color: #3a2704; }
.botao.acento:hover, button.acento:hover { background: var(--destaque-escuro); }
.botao.perigo, button.perigo { color: var(--perigo); border-color: #f0c9c9; }
.botao.perigo:hover, button.perigo:hover { background: var(--perigo-claro); }
.botao.fantasma, button.fantasma { border-color: transparent; background: transparent; }
.botao.fantasma:hover, button.fantasma:hover { background: var(--marca-claro); }
button.pequeno, .botao.pequeno { padding: 4px 9px; font-size: 12.5px; }
button.bloco { width: 100%; justify-content: center; }

input, select, textarea { font: inherit; width: 100%; padding: 8px 11px; border: 1px solid var(--borda-forte);
  border-radius: var(--raio-p); background: var(--superficie); color: var(--texto); }
input:focus, select:focus, textarea:focus { border-color: var(--marca-medio); outline: none;
  box-shadow: 0 0 0 3px rgba(11,107,82,.13); }
textarea { min-height: 76px; resize: vertical; }
label.campo { display: block; }
label.campo > span { display: block; font-size: 12px; font-weight: 650; color: var(--texto-suave); margin-bottom: 4px; }
label.campo > span .obrig { color: var(--perigo); }
.dica { font-size: 11.5px; color: var(--texto-fraco); margin-top: 3px; }
.formulario { display: grid; gap: 12px; }
.formulario.g2 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.formulario.g3 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
fieldset { border: 1px solid var(--borda); border-radius: var(--raio-p); padding: 12px; }
legend { font-size: 12px; font-weight: 700; color: var(--texto-suave); padding: 0 6px; }
.escolha { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.escolha input { width: auto; }

table { width: 100%; border-collapse: collapse; font-size: 13.3px; }
th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--texto-suave); font-weight: 700; padding: 9px 12px; border-bottom: 1px solid var(--borda);
  background: var(--superficie-2); position: sticky; top: 0; }
td { padding: 9px 12px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
tbody tr:hover { background: var(--superficie-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela-rolagem { overflow-x: auto; border-radius: var(--raio); }

.selo { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 650; white-space: nowrap; }
.selo.verde { background: var(--sucesso-claro); color: var(--sucesso); }
.selo.amarelo { background: var(--aviso-claro); color: var(--aviso); }
.selo.vermelho { background: var(--perigo-claro); color: var(--perigo); }
.selo.azul { background: var(--info-claro); color: var(--info); }
.selo.cinza { background: #eef2f1; color: var(--texto-suave); }
.selo.roxo { background: #efeafb; color: var(--roxo); }
.selo.ambar { background: var(--destaque-claro); color: var(--destaque-escuro); }

.aviso-caixa { display: flex; gap: 10px; padding: 11px 13px; border-radius: var(--raio-p); font-size: 13px; align-items: flex-start; }
.aviso-caixa.info { background: var(--info-claro); color: #1c4f85; }
.aviso-caixa.ok { background: var(--sucesso-claro); color: #0b6b52; }
.aviso-caixa.atencao { background: var(--aviso-claro); color: #8a5a08; }
.aviso-caixa.erro { background: var(--perigo-claro); color: #a02c2c; }
.aviso-caixa b { font-weight: 700; }

#toasts { position: fixed; bottom: 18px; right: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 200; }
.toast { background: var(--marca-noite); color: #fff; padding: 10px 15px; border-radius: 10px;
  box-shadow: var(--sombra-alta); font-size: 13.3px; display: flex; gap: 9px; align-items: center;
  animation: entra .18s ease-out; max-width: 380px; }
.toast.sucesso { background: var(--sucesso); }
.toast.erro { background: var(--perigo); }
.toast.aviso { background: var(--aviso); }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } }

.modal-fundo { position: fixed; inset: 0; background: rgba(5,46,33,.5); display: grid; place-items: center;
  z-index: 150; padding: 16px; }
.modal { background: var(--superficie); border-radius: 16px; box-shadow: var(--sombra-alta);
  width: min(680px, 100%); max-height: 90vh; display: flex; flex-direction: column; }
.modal.largo { width: min(1040px, 100%); }
.modal > header { padding: 15px 18px; border-bottom: 1px solid var(--borda); display: flex; align-items: center; gap: 10px; }
.modal > header h2 { flex: 1; }
.modal .corpo { padding: 18px; overflow-y: auto; }
.modal > footer { padding: 13px 18px; border-top: 1px solid var(--borda); display: flex; gap: 9px; justify-content: flex-end; }

.vazio { text-align: center; padding: 40px 20px; color: var(--texto-fraco); }
.vazio .icone { font-size: 34px; display: block; margin-bottom: 8px; opacity: .55; }

.abas { display: flex; gap: 2px; border-bottom: 1px solid var(--borda); overflow-x: auto; }
.abas button { border: none; background: none; border-bottom: 2px solid transparent; border-radius: 0;
  padding: 9px 13px; color: var(--texto-suave); font-weight: 600; white-space: nowrap; }
.abas button.ativa { color: var(--marca); border-bottom-color: var(--marca); }
.abas button:hover { background: var(--superficie-2); }

.barra { height: 7px; border-radius: 999px; background: #e8eeec; overflow: hidden; }
.barra > div { height: 100%; background: var(--marca); border-radius: 999px; }
.barra.ambar > div { background: var(--destaque); }

.lista-def { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; font-size: 13.3px; }
.lista-def dt { color: var(--texto-suave); }
.lista-def dd { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

/* progresso do projeto */
.trilha { display: flex; gap: 6px; flex-wrap: wrap; }
.trilha .passo { display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 4px 10px;
  border-radius: 999px; background: #eef2f1; color: var(--texto-suave); }
.trilha .passo.ok { background: var(--sucesso-claro); color: var(--sucesso); font-weight: 650; }
.trilha .passo .bolinha { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* gráficos simples em CSS */
.grafico-barras { display: flex; align-items: flex-end; gap: 4px; height: 150px; padding-top: 6px; }
.grafico-barras .col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
  align-items: center; gap: 4px; height: 100%; }
.grafico-barras .haste { width: 100%; background: var(--marca); border-radius: 4px 4px 0 0; min-height: 2px; display: block; }
.grafico-barras .haste.ambar { background: var(--destaque); }
.grafico-barras .rot { font-size: 10px; color: var(--texto-fraco); }
.grafico-barras .val { font-size: 10px; color: var(--texto-suave); font-variant-numeric: tabular-nums; }

.legenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--texto-suave); }
.legenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 5px; }

/* ===================== editor de telhado ===================== */
.editor { position: relative; background: #101613; border-radius: var(--raio); overflow: hidden;
  display: grid; place-items: center; min-height: 380px; }
.editor canvas { display: block; max-width: 100%; touch-action: none; cursor: crosshair; }
.editor .ferramentas { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column;
  gap: 5px; background: rgba(255,255,255,.94); border-radius: 10px; padding: 6px; box-shadow: var(--sombra-media); }
.editor .ferramentas button { padding: 6px 9px; font-size: 12.5px; justify-content: flex-start; width: 148px; }
.editor .ferramentas button.ativa { background: var(--marca); color: #fff; border-color: var(--marca); }
.editor .info { position: absolute; bottom: 10px; left: 10px; background: rgba(5,46,33,.85); color: #fff;
  padding: 6px 11px; border-radius: 8px; font-size: 12px; max-width: 70%; }
.editor .zoom { position: absolute; top: 10px; right: 10px; display: flex; gap: 4px;
  background: rgba(255,255,255,.94); border-radius: 10px; padding: 5px; box-shadow: var(--sombra-media); }

.painel-lateral { width: 300px; flex: none; }
@media (max-width: 1100px) { .painel-lateral { width: 100%; } }

.item-lista { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid var(--borda);
  border-radius: var(--raio-p); background: var(--superficie); font-size: 13px; }
.item-lista + .item-lista { margin-top: 6px; }
.item-lista .cor { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.item-lista b { display: block; }
.item-lista .meta { font-size: 11.5px; color: var(--texto-suave); }

/* ===================== login ===================== */
.login { min-height: 100vh; width: 100%; display: grid; grid-template-columns: 1fr 460px; }
.login .lado { background: linear-gradient(155deg, var(--marca-noite), var(--marca));
  color: #fff; padding: 46px; display: flex; flex-direction: column; justify-content: center; gap: 22px; }
.login .lado h1 { font-size: 32px; line-height: 1.15; letter-spacing: -1px; }
.login .lado p { color: rgba(255,255,255,.8); font-size: 15px; max-width: 460px; }
.login .lado ul { list-style: none; display: grid; gap: 9px; }
.login .lado li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.6px; color: rgba(255,255,255,.88); }
.login .lado li b { color: var(--destaque); }
.login .forma { background: var(--superficie); padding: 40px 36px; display: flex; flex-direction: column; justify-content: center; gap: 15px; }
.login .contas { display: grid; gap: 6px; }
.login .contas button { justify-content: flex-start; font-weight: 500; font-size: 12.8px; }
.login .contas button b { font-weight: 700; }
@media (max-width: 940px) { .login { grid-template-columns: 1fr; } .login .lado { padding: 30px 22px; } }

/* ===================== impressão ===================== */
.doc { background: #fff; color: #14231f; }
.doc .folha { max-width: 820px; margin: 0 auto; padding: 34px 40px; }
.doc h1 { font-size: 24px; }
.doc .capa { background: linear-gradient(150deg, var(--marca-noite), var(--marca)); color: #fff;
  padding: 40px; border-radius: var(--raio); }
.doc .capa h1 { font-size: 30px; letter-spacing: -.8px; }
.doc section { margin-top: 26px; page-break-inside: avoid; }
.doc section > h2 { border-bottom: 2px solid var(--marca); padding-bottom: 5px; margin-bottom: 11px; color: var(--marca); }
.doc p { margin-bottom: 9px; text-align: justify; }
.doc svg { max-width: 100%; height: auto; }

@media print {
  .lateral, .topo, .nao-imprime { display: none !important; }
  body, #app, .pagina { background: #fff; display: block; padding: 0; }
  .doc .folha { max-width: none; padding: 0; }
  .cartao { box-shadow: none; border: none; }
  a { color: inherit; }
}