/* ============================================================
   app.css — UI da ferramenta (sóbria, tokens BeGreen) +
   folhas A4 do preview + regras de impressão (PDF).
   Linguagem quadrada: sem border-radius, sem sombras fortes.
   ============================================================ */

:root {
  --ink: #1B1C1B; --tx1: #2E302D; --tx2: #3A3C39;
  --g1: #6E736D; --g2: #8A8B83; --g3: #A9ABA4;
  --ln1: #D8DAD4; --ln2: #E4E6E1; --bg1: #F2F3F0; --bg2: #F7F8F5;
  --green: #3AAA35; --green-d: #2E8C2A; --green-l: #8CD07F; --resumo: #EEF6ED;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: Montserrat, sans-serif;
  background: #e8e9e4;
  color: var(--tx1);
  font-size: 13px;
  /* barra + status + área principal empilhados na altura exata da janela (o card nunca sai da tela) */
  display: flex; flex-direction: column; height: 100vh; overflow: hidden;
}

/* ── Barra superior ─────────────────────────────────────── */
.topbar {
  display: flex; align-items: center; gap: 14px;
  background: var(--ink); color: #fff;
  padding: 10px 16px;
  position: sticky; top: 0; z-index: 20; flex: none;
}
.topbar img { height: 18px; display: block; }
.topbar .titulo {
  font-family: Oswald, sans-serif; font-size: 11px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--green-l);
}
.topbar .sep { flex: 1; }
.topbar select {
  background: #2a2b2a; color: #fff; border: 1px solid #3a3c39;
  font-family: Montserrat, sans-serif; font-size: 12px; padding: 6px 8px;
  min-width: 180px;
}
.btn {
  font-family: Oswald, sans-serif; font-size: 11px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 8px 14px; border: 1px solid transparent; cursor: pointer;
  background: #2a2b2a; color: #fff; border-radius: 6px;
}
.btn:hover { background: #3a3c39; }
.btn.primario { background: var(--green); color: #fff; }
.btn.primario:hover { background: var(--green-d); }
.btn.perigo:hover { background: #5a2320; }
.btn.bloqueado { opacity: .55; cursor: not-allowed; }

#status {
  flex: none;
  font-size: 10px; color: var(--g2); background: var(--bg1);
  border-bottom: 1px solid var(--ln1);
  padding: 4px 16px; display: flex; justify-content: space-between; gap: 12px; align-items: center;
}
.status-dir { display: flex; gap: 14px; align-items: center; white-space: nowrap; }
.nuvem { font-size: 10px; color: var(--g2); }
.nuvem.ok { color: var(--green-d); }
.nuvem.erro { color: #C0392B; }
.link { background: none; border: none; color: var(--green-d); font: inherit; font-weight: 600; cursor: pointer; padding: 0; }
.link:hover { text-decoration: underline; }

/* ── Login ───────────────────────────────────────────────── */
.login { position: fixed; inset: 0; z-index: 80; background: #e8e9e4; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-caixa { width: min(380px, 100%); background: #fff; border-radius: 12px; padding: 28px 28px 22px; box-shadow: 0 10px 40px rgba(27, 28, 27, .18); }
.login-caixa img { height: 26px; display: block; margin-bottom: 14px; }
.login-app { font-family: Oswald, sans-serif; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--green-d); }
.login-caixa h1 { font-family: Oswald, sans-serif; font-weight: 600; font-size: 24px; text-transform: uppercase; color: var(--ink); margin: 4px 0 14px; }
.login-msg { font-size: 11.5px; line-height: 1.5; color: var(--g1); margin-bottom: 10px; min-height: 0; }
.login-msg.erro { color: #8a2d26; background: #FBEEEB; border-left: 3px solid #C0392B; padding: 7px 10px; border-radius: 6px; }
.login-msg:empty { display: none; }
.login-btn { width: 100%; margin-top: 6px; padding: 10px 14px; }
.login-btn:disabled { opacity: .6; cursor: wait; }
.login-links { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 14px; font-size: 11px; }
.login-links .link { font-size: 11px; font-weight: 500; }
body.sem-sessao .topbar, body.sem-sessao #status, body.sem-sessao .main { filter: blur(5px); pointer-events: none; user-select: none; }

/* ── Modal genérico (catálogo, métricas) ───────────────────── */
.modal { position: fixed; inset: 0; background: rgba(27, 28, 27, .45); z-index: 60; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal-caixa { background: #fff; border-radius: 10px; width: min(900px, 100%); max-height: 90vh; overflow: auto; box-shadow: 0 12px 40px rgba(0, 0, 0, .3); }
.modal-cab { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--ln1); font-family: Oswald, sans-serif; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); position: sticky; top: 0; background: #fff; }
#modal-corpo { padding: 14px 16px; font-size: 12px; }
.tab { width: 100%; border-collapse: collapse; font-size: 11.5px; margin-bottom: 12px; }
.tab th { text-align: left; font-family: Oswald, sans-serif; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--g2); padding: 6px 8px; border-bottom: 1px solid var(--ln1); }
.tab td { padding: 6px 8px; border-bottom: 1px solid var(--ln2); vertical-align: middle; }
.tab td input, .tab td select { padding: 5px 6px; font-size: 11.5px; }
.tab tr:nth-child(even) td { background: var(--bg2); }
.metr-titulo { font-family: Oswald, sans-serif; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--green-d); margin: 10px 0 6px; }
.metr-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 6px; }
.metr-card { background: var(--bg2); border-radius: 8px; padding: 10px 12px; }
.metr-card b { font-family: Oswald, sans-serif; font-size: 20px; font-weight: 500; display: block; color: var(--ink); }
.metr-card span { font-size: 10px; color: var(--g1); }

/* ── Fluxo de aprovação ───────────────────────────────────── */
/* fica na barra superior: pílula de status + botões; o texto explicativo vira dica (title) */
.fluxo { display: flex; align-items: center; gap: 6px; margin-left: 10px; padding-left: 14px; border-left: 1px solid #3a3c39; white-space: nowrap; }
.topbar .titulo { white-space: nowrap; }
@media (max-width: 1280px) { .topbar .titulo { display: none; } }
.fluxo-status { font-family: Oswald, sans-serif; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; padding: 6px 12px; border-radius: 6px; background: #3a3c39; color: #fff; }
.fluxo.revisado .fluxo-status { background: #B8860B; color: #fff; }
.fluxo.emitido .fluxo-status { background: var(--green-d); color: #fff; }
.fluxo .btn-mini { background: #2a2b2a; color: #fff; border: 1px solid #4a4c49; border-radius: 6px; padding: 6px 10px; font-size: 9.5px; }
.fluxo .btn-mini:hover { background: #3a3c39; color: #fff; border-color: #6a6c69; }
.fluxo .btn-mini.destaque { background: var(--green); color: #fff; border-color: var(--green); }
.fluxo .btn-mini.destaque:hover { background: var(--green-d); }
.fluxo .btn-mini:disabled { opacity: .4; cursor: not-allowed; }
.fluxo-info { display: none; }
#form.travado input:not(.rev-abrir), #form.travado select, #form.travado textarea { background: var(--bg2); color: var(--g1); }
.frase.off, .biblio-item.off { opacity: .45; pointer-events: none; }

/* ── Painel de projetos (histórico pesquisável) ──────────── */
.busca-wrap { display: flex; flex-direction: column; gap: 3px; width: 340px; }
#busca-projetos {
  width: 100%; background: #2a2b2a; color: #fff; border: 1px solid #3a3c39; border-radius: 6px;
  padding: 7px 10px; font-family: Montserrat, sans-serif; font-size: 12px;
}
#busca-projetos::placeholder { color: #8A8B83; }
#busca-projetos:focus { outline: none; border-color: var(--green); }
.busca-atual { font-size: 9.5px; color: var(--green-l); padding-left: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#painel-projetos {
  position: fixed; top: 72px; z-index: 40;
  width: 420px; max-height: 60vh; overflow-y: auto;
  background: #fff; border: 1px solid var(--ln1); border-radius: 8px;
  box-shadow: 0 6px 24px rgba(27, 28, 27, .18);
}
.proj-item {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; cursor: pointer; border-bottom: 1px solid var(--ln2);
}
.proj-item:hover { background: var(--bg2); }
.proj-item.ativo { border-left: 3px solid var(--green); background: var(--resumo); }
.proj-info { flex: 1; min-width: 0; }
.proj-nome { font-size: 12px; font-weight: 600; color: var(--ink); }
.proj-vazio { color: var(--g2); font-weight: 400; }
.proj-meta { font-size: 9.5px; color: var(--g1); margin-top: 2px; }
.proj-nenhum { padding: 14px; font-size: 11px; color: var(--g2); }

.proj-acoes { padding: 8px 12px; background: var(--bg1); border-top: 1px solid var(--ln1); display: flex; justify-content: flex-end; }
.proj-acoes .btn-mini:hover { color: var(--green-d); border-color: var(--green); }
.proj-duplicar:hover { color: var(--green-d) !important; border-color: var(--green) !important; }

/* ── Menu "Novo" (em branco ou a partir de modelo) ────────── */
.menu-wrap { position: relative; }
.menu {
  position: fixed; z-index: 70; width: 330px;
  background: #fff; border: 1px solid var(--ln1); border-radius: 8px;
  overflow-y: auto; overscroll-behavior: contain;
  box-shadow: 0 6px 24px rgba(27, 28, 27, .18);
}
.menu-principal { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-bottom: 1px solid var(--ln2); }
.menu-btn { width: 100%; text-align: center; padding: 10px 12px; }
.menu-btn:not(.primario) { background: var(--bg2); color: var(--ink); border: 1px solid var(--ln1); }
.menu-btn:not(.primario):hover { background: var(--resumo); color: var(--green-d); border-color: var(--green); }
.menu-titulo {
  font-family: Oswald, sans-serif; font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--g2); padding: 8px 12px 4px; background: var(--bg1);
}
.menu-item { display: flex; align-items: center; gap: 8px; padding: 9px 12px; font-size: 12px; color: var(--ink); cursor: pointer; border-bottom: 1px solid var(--ln2); }
.menu-item:hover { background: var(--bg2); }
.menu-item .nome { flex: 1; }
.menu-item.destaque { color: var(--green-d); font-weight: 600; }
.menu-tag { font-family: Oswald, sans-serif; font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--green-d); background: var(--resumo); padding: 2px 6px; border-radius: 4px; }
.menu-vazio { padding: 8px 12px; font-size: 11px; color: var(--g2); }

/* ── Pendências antes de emitir ───────────────────────────── */
#pendencias { position: relative; flex: none; margin-left: 6px; }
.pend-head {
  display: flex; align-items: center; gap: 7px; padding: 5px 11px; cursor: pointer; border-radius: 999px;
  font-family: Oswald, sans-serif; font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  background: #4a1c18; color: #F1B2AA; border: 1px solid #7a2f29;
}
.pend-head:hover { border-color: #C0392B; color: #fff; }
.pend-head::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #E0554A; box-shadow: 0 0 0 3px rgba(224, 85, 74, .25); flex: none; }
#pendencias.ok .pend-head { background: #1f4a1d; color: var(--green-l); border-color: var(--green-d); cursor: default; }
#pendencias.ok .pend-head::before { background: var(--green); box-shadow: 0 0 0 3px rgba(58, 170, 53, .25); }
.pend-lista {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 70; width: 380px; max-height: 60vh; overflow-y: auto;
  background: #fff; border: 1px solid var(--ln1); border-radius: 12px; padding: 6px 0;
  box-shadow: 0 12px 36px rgba(27, 28, 27, .22); color: var(--tx2);
}
.pend-item { display: flex; gap: 8px; padding: 5px 12px; font-size: 11px; color: var(--tx2); cursor: pointer; }
.pend-item:hover { background: var(--bg2); color: var(--ink); }
.pend-sec { font-family: Oswald, sans-serif; font-size: 9px; letter-spacing: .1em; color: var(--g2); min-width: 44px; padding-top: 2px; text-transform: uppercase; }

/* ── Campos compostos, revisões, frases e biblioteca de fotos ── */
.campo-linha { display: flex; gap: 6px; align-items: center; }
.campo-linha input { flex: 1; min-width: 0; }
.rev-lista { margin-top: 8px; font-size: 10.5px; color: var(--tx2); }
.rev-item { display: flex; gap: 8px; align-items: center; padding: 5px 0; border-top: 1px dashed var(--ln1); }
.rev-item .nome { flex: 1; }
.rev-item .btn-mini:hover { color: var(--green-d); border-color: var(--green); }
.frases { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.frase {
  display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; line-height: 1.35;
  border: 1px solid var(--ln1); background: var(--bg2); color: var(--tx2); border-radius: 14px; padding: 4px 10px; cursor: pointer;
}
.frase:hover { border-color: var(--green); color: var(--ink); }
.frase .x { color: var(--g2); font-weight: 600; padding-left: 2px; }
.frase .x:hover { color: #C0392B; }
.frase.add { border-style: dashed; color: var(--green-d); background: var(--resumo); }
.biblio { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 6px; }
.biblio-item { position: relative; border: 1px solid var(--ln1); border-radius: 6px; overflow: hidden; cursor: pointer; background: var(--bg2); }
.biblio-item img { width: 100%; height: 56px; object-fit: cover; display: block; }
.biblio-item:hover { border-color: var(--green); }
.biblio-item .btn-mini { position: absolute; top: 2px; right: 2px; padding: 1px 5px; }
.foto-item .fav-foto { position: absolute; top: 2px; right: 32px; }
.foto-item .fav-foto:hover { color: var(--green-d); border-color: var(--green); }

/* ── Layout: formulário + preview ───────────────────────── */
.main {
  display: grid; grid-template-columns: 440px 1fr;
  flex: 1; min-height: 0;
  /* foto de fundo proporcional cobrindo a área, centralizada (como papel de parede) */
  background: url(../assets/fundo.png) center center / cover no-repeat #cfd3cc;
}
.painel-wrap {
  /* card de cristal flutuante: altura do conteúdo (até caber na tela) */
  position: relative; display: flex; flex-direction: column; min-height: 0;
  height: calc(100% - 36px);
  margin: 18px 4px 18px 18px; border-radius: 24px;
  box-shadow: 0 1px 2px rgba(27, 28, 27, .08), 0 30px 70px rgba(27, 28, 27, .28), 0 0 0 .5px rgba(27, 28, 27, .08);
}
/* O vidro é um irmão absoluto (não um ancestral): assim o desfoque não vira "containing block" das listas fixas (combo) */
.painel-vidro {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  /* vidro transparente: pouco leite, desfoque médio, brilho só nas bordas */
  -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
  background:
    linear-gradient(118deg, rgba(255, 255, 255, .20) 0%, rgba(255, 255, 255, .04) 24%, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0) 66%, rgba(255, 255, 255, .12) 100%),
    rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .7);
  /* borda-luz e "lente": claro em cima/esquerda, sombra fina embaixo/direita */
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(255, 255, 255, .5),
    inset 0 0 0 1px rgba(255, 255, 255, .45), inset 0 0 34px rgba(255, 255, 255, .22),
    inset 3px 3px 10px rgba(255, 255, 255, .85), inset -3px -3px 10px rgba(27, 28, 27, .10),
    inset 0 -18px 28px -22px rgba(27, 28, 27, .28), inset 0 22px 28px -24px rgba(255, 255, 255, 1);
}
.painel-form {
  /* conteúdo do card: só o corpo da etapa rola, sem barra visível */
  position: relative; z-index: 1; display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden;
  padding: 12px 14px 12px; border-radius: inherit;
}
#form { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.painel-preview {
  overflow-y: auto; padding: 22px;
}

/* ── Formulário: cards de vidro (Liquid Glass) ─────────────── */
.vidro, details, .btn-recolher {
  background: linear-gradient(180deg, rgba(255, 255, 255, .84), rgba(255, 255, 255, .72));
  border: 1px solid rgba(255, 255, 255, .95);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 1px 2px rgba(27, 28, 27, .05),
    0 10px 28px rgba(27, 28, 27, .10);
  border-radius: 16px;
}
details { flex: 0 1 auto; min-height: 0; margin: 0; overflow: hidden; }
details[hidden] { display: none; }
/* o conteúdo do <details> vive num slot interno (::details-content): ele precisa ser o item flex para o corpo rolar */
details::details-content { display: flex; flex-direction: column; flex: 1; min-height: 0; }
details[open] { display: flex; flex-direction: column; overflow-y: auto; scrollbar-width: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 1px 2px rgba(27, 28, 27, .04), 0 8px 20px rgba(27, 28, 27, .08); }
/* No assistente a seção ativa fica sempre aberta: o título vira cabeçalho da etapa */
summary {
  display: flex; align-items: center; gap: 12px; list-style: none;
  font-family: Oswald, sans-serif; font-size: 19px; font-weight: 600; line-height: 1.1;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink);
  padding: 16px 16px 8px; cursor: default; user-select: none;
}
summary::-webkit-details-marker { display: none; }
.sec-num {
  width: 34px; height: 34px; flex: none; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; letter-spacing: 0; color: #fff;
  background: linear-gradient(180deg, var(--green), var(--green-d));
  box-shadow: 0 4px 10px rgba(58, 170, 53, .35), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.sec-sub { font-size: 11.5px; color: var(--g1); margin: 0 0 14px; }
.sec-body { padding: 0 16px 16px; flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; }
/* degradê no fim quando há mais campos abaixo — como camada sobreposta, e não mask (mask viraria "containing block" e cortaria a lista fixa do combo) */
details[open] { position: relative; }
details.mais::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 44px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, .9));
  border-radius: 0 0 16px 16px;
}
.sec-body::-webkit-scrollbar, details::-webkit-scrollbar { display: none; }

/* ── Assistente por etapas: barra de progresso e navegação ─── */
.etapas { margin: 2px 2px 12px; flex: none; }
.etapas-barra { display: flex; gap: 4px; }
.etapa-pt {
  flex: 1; height: 6px; border-radius: 3px; border: 0; padding: 0; cursor: pointer;
  background: rgba(27, 28, 27, .12); transition: background .2s, transform .15s;
}
.etapa-pt:hover { transform: scaleY(1.6); background: var(--green-l); }
.etapa-pt.ok { background: var(--green); }
.etapa-pt.pulada { background: repeating-linear-gradient(90deg, rgba(27, 28, 27, .18) 0 4px, transparent 4px 7px); cursor: default; }
.etapa-pt.pulada:hover { transform: none; }
.etapa-pt.atual { background: var(--ink); }
.etapas-rot {
  display: flex; justify-content: space-between; margin-top: 8px;
  font-family: Oswald, sans-serif; font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
}
.etapas-pend { color: var(--ink); }
.etapas-nav { display: flex; gap: 10px; padding: 10px 0 0; margin-top: auto; flex: none; }
.etapa-btn {
  flex: 1; font-family: Oswald, sans-serif; font-size: 11px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; padding: 12px; border-radius: 12px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .95); color: var(--tx1);
  background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .84));
  box-shadow: inset 0 1px 0 #fff, 0 4px 12px rgba(27, 28, 27, .12);
}
.etapa-btn:hover { color: var(--ink); }
.etapa-btn:disabled { opacity: .55; cursor: default; }
.etapa-btn.pri {
  color: #fff; border-color: transparent;
  background: linear-gradient(180deg, var(--green), var(--green-d));
  box-shadow: 0 6px 16px rgba(58, 170, 53, .35), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.etapa-btn.pri:hover { color: #fff; filter: brightness(1.06); }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 10px; }
.campo { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.grid2 .campo { margin-bottom: 0; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px 10px; }
.grid3 .campo { margin-bottom: 0; }
.campo-label {
  font-family: Oswald, sans-serif; font-size: 8.5px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
}
.campo-hint { font-size: 9.5px; color: var(--g1); }
.campo-hint strong { color: var(--green-d); }
input, select, textarea {
  font-family: Montserrat, sans-serif; font-size: 12.5px; color: var(--ink);
  border: 1px solid rgba(255, 255, 255, .9); background: rgba(255, 255, 255, .62); padding: 9px 11px;
  width: 100%; border-radius: 10px;
  box-shadow: inset 0 1px 2px rgba(27, 28, 27, .04);
  transition: border-color .15s, box-shadow .15s;
}
input:hover, select:hover, textarea:hover { border-color: rgba(27, 28, 27, .22); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--green); background: #fff;
  box-shadow: 0 0 0 3px rgba(58, 170, 53, .18);
}
textarea { resize: vertical; }

.ponto { border: 1px solid rgba(255, 255, 255, .95); padding: 12px; margin-bottom: 10px; background: rgba(255, 255, 255, .45); border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 2px 6px rgba(27, 28, 27, .05); }
.ponto-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ponto-id {
  font-family: Oswald, sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: .1em; color: var(--green-d);
}
.btn-mini {
  font-family: Oswald, sans-serif; font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; border: 1px solid var(--ln1); background: #fff;
  color: var(--g1); cursor: pointer; padding: 3px 8px; border-radius: 5px;
}
.btn-mini:hover { color: #C0392B; border-color: #C0392B; }
.btn-sec {
  font-family: Oswald, sans-serif; font-size: 10px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  border: 1px dashed var(--green); background: var(--resumo); color: var(--green-d);
  cursor: pointer; padding: 8px 12px; width: 100%; border-radius: 6px;
}
.btn-sec:hover { background: #e2f0e0; }
.campo-check {
  flex-direction: row; align-items: center; gap: 7px;
  font-size: 11px; color: var(--tx2); margin: 8px 0 0;
}
.campo-check input { width: auto; accent-color: var(--green); }

.calc-resumo {
  margin-top: 8px; padding: 8px 11px; background: rgba(58, 170, 53, .10);
  border: 1px solid rgba(58, 170, 53, .22); font-size: 10.5px; color: var(--tx2); border-radius: 10px;
}
.calc-resumo strong { color: var(--ink); }
/* ── Biblioteca de modelos de projeto ────────────────────── */
.mod-busca { width: 100%; margin-bottom: 10px; }
.mod-lista { max-height: 52vh; overflow-y: auto; border: 1px solid var(--ln1); border-radius: 8px; }
.mod-grupo {
  display: flex; justify-content: space-between; align-items: center;
  font-family: Oswald, sans-serif; font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--g2); padding: 8px 12px; background: var(--bg2); position: sticky; top: 0;
  border-bottom: 1px solid var(--ln2);
}
.mod-item { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--ln2); cursor: pointer; }
.mod-item:hover { background: var(--resumo); }
.mod-info { flex: 1; min-width: 0; }
.mod-nome { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.mod-det { font-size: 10.5px; color: var(--g1); margin-top: 2px; }
.mod-usar {
  font-family: Oswald, sans-serif; font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  background: var(--green); color: #fff; border: 1px solid var(--green); border-radius: 5px;
  padding: 6px 12px; cursor: pointer; flex: none;
}
.mod-usar:hover { background: var(--green-d); border-color: var(--green-d); }
.mod-excluir {
  font-family: Oswald, sans-serif; font-size: 13px; line-height: 1; font-weight: 600;
  background: #FBEEEB; color: #C0392B; border: 1px solid #E9B7B0; border-radius: 5px;
  padding: 5px 9px; cursor: pointer; flex: none;
}
.mod-excluir:hover { background: #C0392B; color: #fff; border-color: #C0392B; }
.eq-papel-sel { width: auto; min-width: 120px; padding: 4px 6px; font-size: 11.5px; }
.mod-vazio { padding: 12px; font-size: 11px; color: var(--g2); }
.mod-acoes { display: flex; justify-content: flex-end; margin-top: 10px; }
.mod-acoes .btn { padding: 8px 14px; }
.mod-rodape { font-size: 10.5px; color: var(--g2); line-height: 1.5; margin: 10px 0 0; }

/* ── Seletor de modelo (catálogo) ─────────────────────────── */
.combo { position: relative; }
.combo-input { padding-right: 30px; }
.combo-btn {
  position: absolute; right: 1px; top: 1px; bottom: 1px; width: 28px;
  border: none; background: transparent; color: var(--g1); cursor: pointer;
  font-size: 13px; line-height: 1; border-radius: 0 6px 6px 0;
}
.combo-btn:hover { color: var(--green-d); background: var(--bg2); }
.combo.aberto .combo-input { border-color: var(--green); }
.combo.aberto .combo-btn { color: var(--green-d); transform: rotate(180deg); }
.combo-lista {
  position: fixed; z-index: 60; width: 330px;
  overflow-y: auto; background: #fff;
  border: 1px solid var(--ln1); border-radius: 8px; box-shadow: 0 6px 20px rgba(27, 28, 27, .16);
  overscroll-behavior: contain;
}
.combo-grupo {
  font-family: Oswald, sans-serif; font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--g2); padding: 8px 10px 4px; background: var(--bg2); position: sticky; top: 0;
}
.combo-item { padding: 7px 10px; cursor: pointer; border-bottom: 1px solid var(--ln2); }
.combo-item:hover, .combo-item.ativo { background: var(--resumo); }
.combo-item .nome { display: block; font-size: 12px; color: var(--ink); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.combo-item .det { display: block; font-size: 10px; color: var(--g1); margin-top: 1px; }
.combo-vazio, .combo-rodape { padding: 9px 10px; font-size: 10.5px; color: var(--g1); line-height: 1.5; }
.combo-rodape { border-top: 1px solid var(--ln2); background: var(--bg2); color: var(--g2); }

.carga-info { margin-top: 8px; font-size: 10.5px; line-height: 1.6; color: var(--g1); }
.carga-info strong { color: var(--ink); font-weight: 600; }
.carga-info .falta { color: var(--g3); font-style: italic; }
.calc-resumo .ruim, .ruim { color: #C0392B; }
.alerta {
  margin-top: 6px; padding: 6px 9px; background: #FBEeeb;
  border-left: 3px solid #C0392B; font-size: 10.5px; color: #8a2d26; font-weight: 600; border-radius: 6px;
}

.fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.foto-item { position: relative; border: 1px solid var(--ln1); padding: 6px; background: var(--bg2); border-radius: 8px; }
.foto-item img { border-radius: 5px; }
.foto-item img { width: 100%; height: 90px; object-fit: cover; display: block; }
.foto-item input { margin-top: 5px; font-size: 10.5px; padding: 5px 6px; }
.foto-item .rm-foto { position: absolute; top: 2px; right: 2px; }

/* ── Páginas A4 do preview ──────────────────────────────── */
/* A paginação é feita em js/paginar.js: cada .pagina tem altura
   fixa de A4 com cabeçalho e rodapé, e a impressão usa as mesmas
   páginas, por isso o PDF sai idêntico à prévia. */
.pagina {
  width: 210mm; height: 297mm; margin: 0 auto 18px; padding: 12mm 18mm;
  background: #fff; box-shadow: 0 1px 4px rgba(27, 28, 27, .14);
  display: flex; flex-direction: column; overflow: hidden; position: relative;
}
.pagina-header > div { margin-bottom: 8mm; }
.pagina-corpo { flex: 1 1 auto; min-height: 0; width: 174mm; display: flow-root; overflow: hidden; }
.pagina-footer > div { margin-top: 8mm; }
#medidor-paginas { position: absolute; left: -9999px; top: 0; width: 210mm; visibility: hidden; pointer-events: none; }
#medidor-paginas .pagina-corpo-medicao { width: 174mm; display: flow-root; font-family: Montserrat, sans-serif; }

/* ── Impressão / PDF ────────────────────────────────────── */
@page { size: A4; margin: 0; }
@media print {
  html, body { height: auto; }
  body { background: #fff; display: block; overflow: visible; }
  .topbar, #status, .painel-wrap, #painel-projetos, #medidor-paginas { display: none !important; }
  .main { display: block; height: auto; }
  .painel-preview { overflow: visible; padding: 0; }
  .pagina { margin: 0; box-shadow: none; break-after: page; page-break-after: always; }
  .pagina:last-child { break-after: auto; page-break-after: auto; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Sub-item dentro de uma seção (ex.: Transformador) */
.sub-item { margin-top: 10px; padding: 12px; border: 1px solid rgba(255, 255, 255, .95); background: rgba(255, 255, 255, .45); border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 2px 6px rgba(27, 28, 27, .05); }
.sub-titulo {
  font-family: Oswald, sans-serif; font-size: 10px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--green-d); margin-bottom: 8px;
}


/* ── Painel de parâmetros recolhível ───────────────────── */
.btn-recolher {
  width: 100%; margin-bottom: 10px; flex: none;
  font-family: Oswald, sans-serif; font-size: 9.5px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--g1);
  cursor: pointer; padding: 6px 12px; text-align: left; border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 2px 8px rgba(27, 28, 27, .07);
}
.btn-recolher:hover { color: var(--green-d); }
.btn-expandir { display: none; }

.main.recolhido { grid-template-columns: 104px 1fr; }
.main.recolhido .painel-wrap { margin: 0; border-radius: 0; box-shadow: none; height: auto; align-self: start; background: transparent; }
.main.recolhido .painel-vidro { display: none; }
.main.recolhido .painel-form { padding: 18px 0 0; overflow: visible; align-items: center; }
.main.recolhido #form, .main.recolhido .btn-recolher { display: none; }
.main.recolhido .btn-expandir {
  display: flex; align-items: center; justify-content: center;
  width: 68px; height: 68px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
  background: var(--ink);
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--ink), 0 12px 30px rgba(27, 28, 27, .35);
  transition: transform .15s;
}
.main.recolhido .btn-expandir img { width: 44px; height: 44px; display: block; }
.main.recolhido .btn-expandir:hover { transform: scale(1.06); }

/* Circuitos dentro do bloco do Trecho 4 */
.sub-circuito { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--ln1); }
.sub-circuito-id {
  font-family: Oswald, sans-serif; font-size: 9.5px; font-weight: 600;
  letter-spacing: .1em; color: var(--ink); margin-bottom: 6px;
}