/* ═══ TELAS ════════════════════════════════════════════════════════════════
   Shell (sidebar + barra inferior), login e o que é específico de cada aba.
   Cor sempre por token: nada de valor literal daqui para baixo.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Shell ───────────────────────────────────────────────────────────────
   As três regras de altura andam juntas. Antes eram
   body{height:100vh;overflow:hidden} + #app{height:100vh} +
   #content{overflow-y:auto}, e corrigir só uma deixava o scroll preso na
   outra — era isso que tornava o app inutilizável em celular.
   O body já virou min-height:100dvh em base.css. */
#app {
  display: flex;
  min-height: 100dvh;
}

#content {
  flex: 1;
  min-width: 0;
  padding: var(--sp-6);
}

/* Sem isto as cinco abas ficam empilhadas na mesma tela — e a tabela de
   Orçamentos, larga, passa a forçar rolagem horizontal no celular mesmo
   estando "escondida". */
.tab { display: none; }
.tab.active { display: block; }

/* ── Sidebar (desktop) ───────────────────────────────────────────────────── */
#sidebar {
  width: 200px;
  min-width: 200px;
  background: var(--hero);
  color: var(--hero-ink);
  display: flex;
  flex-direction: column;
  padding: var(--sp-4) 0;
  position: sticky;
  top: 0;
  height: 100dvh;
}

#sidebar .brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-5) var(--sp-5);
  color: var(--hero-ink);
}
#sidebar .brand .ic { width: 26px; height: 26px; }
#sidebar .brand span { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
#sidebar .brand b {
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: -0.015em;
}
/* A ferramenta é o subtítulo; a marca é o que fica em cima. */
#sidebar .brand small {
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hero-dim);
}

.nav-list { list-style: none; display: flex; flex-direction: column; gap: 2px; padding: 0 var(--sp-2); }

.nav-list li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--hero-dim);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.nav-list li:hover { background: color-mix(in srgb, var(--hero-ink) 8%, transparent); color: var(--hero-ink); }
.nav-list li.active {
  background: color-mix(in srgb, var(--hero-ink) 14%, transparent);
  color: var(--hero-ink);
  font-weight: 600;
}

.sidebar-foot {
  margin-top: auto;
  padding: var(--sp-4) var(--sp-4) 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  align-items: flex-start;
}

.btn-logout {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid color-mix(in srgb, var(--hero-ink) 16%, transparent);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--hero-dim);
  font-family: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
}
.btn-logout:hover { background: color-mix(in srgb, var(--hero-ink) 10%, transparent); color: var(--hero-ink); }

/* No herói o alternador precisa das cores do herói, não das da superfície. */
.sidebar-foot .theme-toggle { background: color-mix(in srgb, var(--hero-ink) 10%, transparent); }
.sidebar-foot .theme-opt { color: var(--hero-dim); }
.sidebar-foot .theme-opt:hover { color: var(--hero-ink); }
.sidebar-foot .theme-opt.is-active { background: color-mix(in srgb, var(--hero-ink) 18%, transparent); color: var(--hero-ink); }

/* ── Barra inferior (celular) ────────────────────────────────────────────── */
.bottom-nav { display: none; }

@media (max-width: 760px) {
  #app { flex-direction: column; }
  #sidebar { display: none; }

  #content {
    padding: var(--sp-4);
    /* Sem isto o último elemento da página fica debaixo da barra. */
    padding-bottom: calc(var(--navbar-h) + var(--sp-6) + env(safe-area-inset-bottom));
  }

  .bottom-nav {
    display: flex;
    position: fixed;
    inset: auto 0 0;
    z-index: 90;
    background: var(--hero);
    border-top: 1px solid var(--hero-line);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .bottom-nav button {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    /* 44px é o alvo de toque mínimo; --navbar-h dá 58 com folga para o rótulo. */
    min-height: var(--navbar-h);
    padding: var(--sp-1) 2px;
    border: none;
    background: transparent;
    color: var(--hero-dim);
    font-family: inherit;
    font-size: var(--fs-2xs);
    line-height: 1.1;
    cursor: pointer;
  }
  .bottom-nav button .ic { width: 22px; height: 22px; }
  .bottom-nav button span { text-align: center; }
  .bottom-nav button.active { color: var(--hero-ink); font-weight: 600; }
  .bottom-nav button.active .ic { color: var(--hero-positive); }
}

/* ── Login ───────────────────────────────────────────────────────────────
   #auth-overlay usa --hero: é a mesma superfície de destaque da sidebar, e
   acompanha o tema em vez de ficar presa a um roxo escuro fixo. */
#auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: var(--hero);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
}

.auth-card {
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--r-lg);
  padding: var(--sp-8);
  width: 360px;
  max-width: 100%;
  box-shadow: var(--shadow-md);
}
@media (max-width: 400px) { .auth-card { padding: var(--sp-6); } }

.auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: var(--sp-1);
}
.auth-subtitle {
  text-align: center;
  color: var(--ink-muted);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-6);
}
.auth-card h2 {
  text-align: center;
  font-size: var(--fs-md);
  margin-bottom: var(--sp-5);
}
.auth-fields { display: flex; flex-direction: column; gap: var(--sp-4); }

/* min-height reserva a linha: sem ela o card pula de altura quando o erro
   aparece, e o botão foge de debaixo do cursor. */
.auth-msg {
  min-height: 20px;
  margin: var(--sp-2) 0;
  font-size: var(--fs-sm);
  color: var(--negative);
}
.auth-msg--ok { color: var(--positive); }

.auth-submit { width: 100%; justify-content: center; margin-top: var(--sp-1); }

.auth-link {
  display: block;
  width: 100%;
  margin-top: var(--sp-2);
  padding: var(--sp-1);
  border: none;
  background: none;
  color: var(--ink-muted);
  font-family: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
}
.auth-link:hover { color: var(--ink); text-decoration: underline; }

/* ═══ CALCULADORA ══════════════════════════════════════════════════════════ */

.calc-grid { display: grid; gap: var(--sp-5); align-items: start; }
.calc-form { display: flex; flex-direction: column; gap: var(--sp-4); }

@media (min-width: 1024px) {
  .calc-grid { grid-template-columns: minmax(0, 1fr) 400px; }
  /* O painel acompanha a rolagem do formulário: o número muda enquanto se
     digita, e é ele que se está tentando enxergar. */
  .calc-result { position: sticky; top: var(--sp-5); }
}

.mkt-section { margin-top: var(--sp-7); }

/* auto-fit degrada 3 → 2 → 1 sozinho, sem breakpoint próprio. */
.mkt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-3);
}

@media (max-width: 760px) {
  /* display:contents dissolve o wrapper .calc-result, e painel e barra de ações
     viram itens do grid por conta própria. Sem isso os dois andariam juntos: ou
     as ações subiriam grudadas no topo, ou o painel perderia a fixação. */
  .calc-result { display: contents; }

  /* O painel grudento carrega só o preço sugerido. As 7 linhas de detalhe
     ocupariam um terço da viewport, e o que se acompanha enquanto digita é o
     total — o breakdown segue completo no orçamento salvo e no PDF. */
  .calc-result .panel-hero {
    order: -1;
    position: sticky;
    top: 0;
    z-index: 20;
    border-radius: var(--r-md);
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-1);
    box-shadow: var(--shadow-sm);
  }
  .calc-result .panel-label,
  .calc-result .panel-detail { display: none; }
  .calc-result .panel-total { margin-top: 0; padding-top: 0; border-top: none; }
  .calc-result .panel-total-value { font-size: var(--fs-xl); }

  /* Ações depois do formulário: é onde se chega ao terminar de preencher. */
  .calc-result .action-bar { order: 1; }
  .calc-result .action-bar .btn { flex: 1; justify-content: center; }
}

/* ═══ CONFIGURAÇÕES ════════════════════════════════════════════════════════ */

.cfg-wrap { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 760px; }
.cfg-row  { align-items: flex-start; gap: var(--sp-4); margin-bottom: var(--sp-3); }

.cfg-sub {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
  margin: var(--sp-5) 0 var(--sp-3);
}
.cfg-sub:first-of-type { margin-top: var(--sp-3); }

.cfg-logo-label { font-size: var(--fs-xs); color: var(--ink-muted); }
.cfg-logo-label.is-ok   { color: var(--positive); }
.cfg-logo-label.is-erro { color: var(--negative); }
.cfg-logo-preview {
  max-height: 60px;
  margin-top: var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

.cfg-note {
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--ink);
}
.cfg-note strong { font-weight: 600; }

.cfg-warn {
  display: flex;
  gap: var(--sp-1);
  align-items: flex-start;
  margin-top: var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--negative);
}
.cfg-warn:empty { display: none; }

.cfg-check {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  max-width: 560px;
  margin-bottom: var(--sp-3);
  font-size: var(--fs-sm);
  cursor: pointer;
}
.cfg-check input { margin-top: 3px; flex: none; }

.mkp-contribuinte {
  display: flex;
  gap: var(--sp-5);
  align-items: center;
  margin-bottom: var(--sp-3);
}
.mkp-contribuinte label {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-sm);
  cursor: pointer;
}

/* Tabela de faixas: densa de propósito, e dentro de .scroll-x para o corpo da
   página nunca rolar na horizontal em telas estreitas. */
.mkp-cfg-table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-size: var(--fs-xs);
  margin-bottom: var(--sp-3);
}
.mkp-cfg-table th {
  background: var(--sunken);
  color: var(--ink-muted);
  text-align: left;
  padding: var(--sp-2);
  border-bottom: 1px solid var(--line-strong);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--fs-2xs);
}
.mkp-cfg-table td { padding: var(--sp-1) var(--sp-2); border-bottom: 1px solid var(--line); }
.mkp-cfg-table input[type="number"] {
  width: 76px;
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
}
.mkp-cfg-table input[type="number"]:focus-visible {
  outline: none; border-color: var(--accent); box-shadow: var(--focus-ring);
}
.mkp-cfg-table input[readonly] { background: var(--sunken); color: var(--ink-muted); }
.mkp-cfg-cpf-info { font-style: italic; text-transform: none; letter-spacing: 0; }

/* ═══ PAINEL DE ADMINISTRAÇÃO ══════════════════════════════════════════════ */

.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}

/* Número grande é a forma certa quando o valor É o conteúdo. */
.stat-tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-4);
}
.stat-rotulo {
  font-size: var(--fs-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
}
.stat-valor {
  font-size: var(--fs-2xl);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.stat-nota { font-size: var(--fs-2xs); color: var(--ink-muted); }

.admin-secao { margin-bottom: var(--sp-4); }

/* ── Gráfico ────────────────────────────────────────────────────────────────
   Série única: a cor não identifica, só dá corpo à magnitude. Texto sempre em
   tinta, nunca na cor da série. */
.grafico { width: 100%; height: auto; display: block; }
.grafico .g-eixo { stroke: var(--line); stroke-width: 1; }
.grafico .g-barra rect { fill: var(--accent); }
.grafico .g-barra:hover rect { fill: color-mix(in srgb, var(--accent) 80%, var(--ink)); }
.grafico .g-mes {
  fill: var(--ink-muted);
  font-family: var(--font-ui);
  font-size: 11px;
}
.grafico .g-valor {
  fill: var(--ink);
  font-family: var(--font-num);
  font-size: 12px;
  font-weight: 600;
}

/* ── Barra de proporção ─────────────────────────────────────────────────── */
.barra-proporcao {
  height: 10px;
  border-radius: var(--r-pill);
  background: var(--sunken);
  overflow: hidden;
}
.barra-proporcao span {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--accent);
}
.admin-legenda { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--ink-muted); }
.admin-legenda b { color: var(--ink); }

/* ── Avisos de estado ───────────────────────────────────────────────────── */
.admin-aviso {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  max-width: 60ch;
}
.admin-aviso .ic { color: var(--warning); margin-top: 2px; }
.admin-aviso b { display: block; margin-bottom: var(--sp-1); }
.admin-aviso p { font-size: var(--fs-sm); color: var(--ink-muted); }
.admin-aviso button { margin-top: var(--sp-3); }

/* ── Marca ────────────────────────────────────────────────────────────────
   O logo é uma marca de duas cores, e o azul escuro dela (63% dos pixels)
   mede 2,0–2,5:1 sobre a sidebar e sobre o card de login no tema escuro.
   Recolorir a marca não é opção; o chip claro resolve preservando as cores
   originais em qualquer superfície. */
.marca-chip {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  padding: 3px;
  border-radius: var(--r-sm);
  background: var(--marca-fundo);
}
.marca-chip img { width: 100%; height: 100%; object-fit: contain; display: block; }
.marca-chip--lg { width: 44px; height: 44px; border-radius: var(--r-md); padding: 4px; }