/* Organização da página: cabeçalho, abas dos içamentos, etapas e resumo. */

/* ---------------------------------------------------------- cabeçalho */
.topo {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 8px 16px;
  background: #123040;
  border-bottom: 1px solid #0b2130;
}
.topo__marca { display: flex; align-items: center; gap: 10px; }
.topo__logo {
  display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 6px; background: var(--c-acento); color: #fff; font-weight: 800;
}
.topo__nome { font-weight: 700; }
.topo__sub { font-size: var(--t-xs); color: var(--c-texto-2); }
.topo__acoes { display: flex; gap: 8px; margin-left: auto; align-items: center; }

/* O botão de portfólio entra aqui dentro (o app move o elemento no início), em vez de ficar
   fixo no canto com uma faixa reservada só para ele. */
.topo__acoes #mr-portfolio-btn {
  position: static; top: auto; right: auto; margin: 0;
  box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}

.campo { display: flex; flex-direction: column; gap: 3px; font-size: var(--t-xs); color: var(--c-texto-2); min-width: 0; }
.campo--inline { flex-direction: row; align-items: center; gap: 6px; }
.campo--inline input { width: 190px; }
.campo input, .campo select { width: 100%; }

.bt {
  border: 0; border-radius: 5px; padding: 7px 14px;
  background: var(--c-acento); color: #fff; font-weight: 700; white-space: nowrap;
}
.bt:hover { filter: brightness(1.08); }
.bt--fantasma { background: transparent; color: var(--c-acento); border: 1px solid var(--c-acento); }
.bt--peq { padding: 4px 10px; font-weight: 600; font-size: var(--t-sm); }
.bt--risco { background: transparent; color: var(--c-erro); border: 1px solid var(--c-erro); }

/* ---------------------------------------------------------- abas dos içamentos */
.abas {
  display: flex; align-items: center; gap: 4px;
  padding: 6px 16px 0;
  background: var(--c-superficie);
  border-bottom: 1px solid var(--c-linha);
  overflow-x: auto;
}
.aba {
  border: 1px solid var(--c-linha); border-bottom: 0;
  border-radius: 6px 6px 0 0;
  padding: 6px 12px;
  background: transparent; color: var(--c-texto-2); white-space: nowrap;
}
.aba.on { background: var(--c-fundo); color: var(--c-texto); border-color: var(--c-linha-forte); font-weight: 700; }
.aba__peso { color: var(--c-texto-3); font-size: var(--t-xs); margin-left: 6px; }
.aba--novo { border-style: dashed; color: var(--c-acento); }

/* ---------------------------------------------------------- corpo */
.folha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--e-4);
  padding: var(--e-3) var(--e-4);
  align-items: start;
  min-height: 0;
}
/* Blocos lado a lado: cabe o que couber em colunas de ~330px — três numa tela grande,
   duas numa média, uma no celular. */
.etapas {
  display: grid; min-width: 0;
  gap: var(--e-3);
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  /* stretch: as caixas de uma mesma linha terminam na mesma altura. Com align-items:start
     cada uma parava onde o seu conteúdo acabava e a fileira ficava desalinhada. */
  align-items: stretch;
  /* dense: uma caixa estreita sobe para o buraco ao lado de outra, em vez de deixar
     meia tela vazia. Cada caixa leva o seu número no título, então a sequência do
     roteiro continua visível — e no papel volta tudo para uma coluna, na ordem. */
  grid-auto-flow: row dense;
}
/* etapa com tabela larga ou desenho: a linha inteira, senão fica ilegível */
.etapa--larga { grid-column: 1 / -1; }

.etapa {
  display: flex; flex-direction: column;     /* o corpo ocupa a altura que sobrar */
  background: var(--c-superficie);
  border: 1px solid var(--c-linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  overflow: hidden;
}
.etapa > h2 {
  display: flex; align-items: center; gap: 10px;
  padding: var(--e-2) var(--e-3);
  font-size: var(--t-md);
  background: var(--c-superficie-2);
  border-bottom: 1px solid var(--c-linha);
}
.etapa__dobra {
  margin-left: auto; width: 24px; height: 24px; line-height: 1;
  border: 1px solid var(--c-linha-forte); border-radius: 5px;
  background: transparent; color: var(--c-texto-2); font-weight: 700; font-size: var(--t-lg);
  display: grid; place-items: center;
}
.etapa__dobra:hover { border-color: var(--c-acento); color: var(--c-acento); }
/* botão do cálculo: fica aceso quando o memorial está à vista */
.etapa__dobra--mem { width: auto; padding: 0 7px; font-size: var(--t-xs); margin-left: auto; }
.etapa__dobra--mem.is-on { border-color: var(--c-acento); color: var(--c-acento); }
.etapa > h2 .etapa__dobra--mem + .etapa__dobra { margin-left: 4px; }
.etapa > h2 { cursor: pointer; user-select: none; }
.etapa.fechada > h2 { border-bottom: 0; }
.etapa.fechada > :not(h2) { display: none; }

.etapa__n {
  display: grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; background: var(--c-acento); color: #fff; font-size: var(--t-xs);
}
/* dentro da caixa, o espaço é curto: o que está junto é junto. Entre caixas, --e-3. */
.etapa__corpo { padding: var(--e-3); display: grid; gap: var(--e-2); }
.etapa--espera { opacity: .72; }
.etapa--espera .etapa__n { background: var(--c-texto-3); }

.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.grade--4 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.linha-campos { display: flex; gap: 12px; flex-wrap: wrap; }
.linha-campos .campo { min-width: 220px; }

.dica { margin: 0; font-size: var(--t-xs); color: var(--c-texto-3); }
.dica b { color: var(--c-texto-2); }

/* ---------------------------------------------------------- tipo de içamento */
.tipos { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; }
.tipo__fig svg { max-height: 120px; }
.tipo {
  display: grid; gap: 3px; text-align: left;
  padding: 7px 9px;
  border: 1px solid var(--c-linha-forte); border-radius: var(--raio);
  background: var(--c-superficie-2); color: var(--c-texto);
}
.tipo:hover { border-color: var(--c-acento); }
.tipo.on { border-color: var(--c-acento); background: var(--c-acento-suave); }
.tipo b { font-size: var(--t-sm); }
.tipo span { font-size: var(--t-xs); color: var(--c-texto-3); }

/* ---------------------------------------------------------- tabelas */
.tab { font-size: var(--t-sm); }
.tab th, .tab td { padding: 3px 7px; border-bottom: 1px solid var(--c-linha); text-align: right; white-space: nowrap; }
.tab th { color: var(--c-texto-3); font-weight: 600; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .4px; }
.tab th:first-child, .tab td:first-child { text-align: left; }
.tab tbody tr:hover td { background: var(--c-superficie-2); }
/* linha de verificação em destaque sobre o seu memorial */
.tab tbody tr:has(+ tr.linha-formula) td { background: var(--c-superficie-2); font-weight: 600; }
.tab td.num { font-family: var(--fonte-mono); }
.tab--pontos input { width: 96px; text-align: right; }
/* Ficha técnica: uma grade que se reparte em colunas conforme a largura, com o valor
   colado no rótulo. Como tabela, o valor ia parar do outro lado da linha. */
.ficha { margin-bottom: 6px; }
.ficha__t {
  font-size: var(--t-xs); color: var(--c-texto-3); text-transform: uppercase; letter-spacing: .4px;
  padding-bottom: 4px;
}
.ficha__grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 20px; }
.ficha__item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 3px 0; border-bottom: 1px solid var(--c-linha); font-size: var(--t-sm); min-width: 0;
}
.ficha__item span { color: var(--c-texto-2); }
.ficha__item b { font-family: var(--fonte-mono); white-space: nowrap; }

.tab--ficha { margin-bottom: 6px; max-width: 460px; }
.tab--ficha caption { text-align: left; font-size: var(--t-xs); color: var(--c-texto-3); text-transform: uppercase; letter-spacing: .4px; padding-bottom: 4px; }
.tab--ficha td:first-child { color: var(--c-texto-2); }
.tab--pontos td { padding: 4px 6px; }
/* texto à esquerda, número à direita — a tabela base alinha tudo à direita */
.tab--material th:nth-child(3), .tab--material td:nth-child(3),
.tab--material th:nth-child(4), .tab--material td:nth-child(4),
.tab--material th:nth-child(5), .tab--material td:nth-child(5) { text-align: left; }

/* a especificação é o texto longo da linha: ela quebra, o resto não */
.tab--material td.col-esp { white-space: normal; min-width: 260px; }
.tab--material tfoot td { border-top: 1px solid var(--c-linha-forte); font-weight: 700; padding-top: 5px; }
.tab--material tfoot td:first-child { color: var(--c-texto-2); font-weight: 400; }

.tab .maior td { color: var(--c-texto); font-weight: 700; }
.tab .adotada td { color: var(--c-texto); font-weight: 700; }
.tab .maior td:first-child::after { content: " ← maior carga"; color: var(--c-alerta); font-weight: 400; font-size: var(--t-xs); }

/* ---------------------------------------------------------- verificações (ok / falha) */
.selo { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-xs); font-weight: 700; padding: 2px 8px; border-radius: 10px; }
.selo--ok { color: var(--c-ok); background: rgba(47, 163, 107, .14); }
.selo--erro { color: var(--c-erro); background: rgba(226, 96, 78, .14); }
.tab td.selo-cel { text-align: center; }
.barra { position: relative; height: 6px; border-radius: 3px; background: var(--c-superficie-2); overflow: hidden; min-width: 60px; }
.barra > i { display: block; height: 100%; background: var(--c-ok); }
/* quem não distingue verde de vermelho precisa de um segundo sinal: a barra que estoura
   ganha hachura, a mesma que sai na impressão */
.barra.estourou > i {
  background: repeating-linear-gradient(45deg,
    var(--c-erro) 0 3px, color-mix(in srgb, var(--c-erro) 55%, #000) 3px 6px);
}
/* desenho do olhal ao lado dos campos: mexeu num número, o desenho muda */
.olhal-par { display: grid; grid-template-columns: minmax(360px, 560px) minmax(0, 1fr); gap: 10px; align-items: start; margin-bottom: 8px; }
/* sem width:100% a folha encolhe para o tamanho natural do desenho (fit-content herdado
   de .fig-topo) e o desenho sai minusculo dentro de uma coluna larga */
.olhal-par .fig-topo { position: sticky; top: 8px; width: 100%; }
.olhal-par .fig-topo svg { height: auto; width: 100%; max-height: 520px; }
/* o olhal comprado é uma peça alta e estreita: sem limite, o desenho estica a caixa muito
   além da ficha ao lado */
.olhal-par #fig-olhal svg { max-height: 300px; }
@media (max-width: 900px) { .olhal-par { grid-template-columns: 1fr; } }

.olhal-geom { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 8px; align-items: end; }
/* rótulo em cima, campo embaixo: com o rótulo quebrando em duas linhas, o campo descia
   junto e a fileira ficava torta. Agora todos os campos começam na mesma altura. */
.olhal-geom .campo { display: grid; grid-template-rows: 1fr auto; gap: 3px; height: 100%; }
.olhal-geom .campo > span { text-align: center; align-self: end; line-height: 1.25; }
.olhal-geom input, .olhal-geom select { width: 100%; }
.olhal-bloco { padding: 8px; border: 1px solid var(--c-linha); border-radius: var(--raio); margin-bottom: 10px; background: var(--c-superficie-2); }
.olhal-bloco h4 { margin: 0 0 8px; font-size: var(--t-sm); }
/* a tag diz de qual manilha saíram estas medidas, sem ter que voltar à etapa 7 */
.olhal-bloco__tag {
  font-family: var(--fonte-mono); font-size: var(--t-xs); font-weight: 700;
  color: var(--c-acento); background: var(--c-acento-suave);
  border: 1px solid var(--c-linha-forte); border-radius: 10px; padding: 1px 8px; margin-left: 6px;
}

/* ---------------------------------------------------------- fórmulas passo a passo */
/* memoriais ocultos: é o que faz a tela caber — cada perna e cada verificação traz um */
body.sem-memorial .formulas,
body.sem-memorial tr.linha-formula,
.etapa.sem-calculo .formulas,
.etapa.sem-calculo tr.linha-formula { display: none; }
/* a escolha da caixa vence o botão geral do topo, nos dois sentidos */
.etapa.com-calculo .formulas { display: grid; }
.etapa.com-calculo tr.linha-formula { display: table-row; }
.bt--ligado { background: var(--c-acento); color: #fff; border-color: var(--c-acento); }

.formulas {
  display: grid; gap: 5px; margin: 0; padding: 6px 8px; border-radius: 6px;
  border: 1px dashed var(--c-linha-forte); background: var(--c-superficie-2); text-align: left;
}
.formulas__titulo { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .4px; color: var(--c-texto-3); }

/* as contas à esquerda e a legenda das letras à direita, onde antes sobrava espaço */
.formulas--com-legenda { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 8px 16px; align-items: start; }
.formulas__contas { display: grid; gap: 5px; min-width: 0; }
.formulas__legenda { display: grid; gap: 2px; align-content: start; border-left: 1px dashed var(--c-linha-forte); padding: 0 6px 0 12px; }
.simbolo { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; gap: 8px; font-size: var(--t-xs); align-items: baseline; }
.simbolo__k { font-family: var(--fonte-mono); color: var(--c-texto); }
.simbolo__d { color: var(--c-texto-2); }
.simbolo__u { font-family: var(--fonte-mono); color: var(--c-texto-3); }
@media (max-width: 760px) { .formulas--com-legenda { grid-template-columns: minmax(0, 1fr); }
  .formulas__legenda { border-left: 0; padding-left: 0; border-top: 1px dashed var(--c-linha-forte); padding-top: 6px; } }
.passo { font-family: var(--fonte-mono); font-size: var(--t-xs); line-height: 1.5; overflow-wrap: anywhere; }
.passo__formula { color: var(--c-texto-3); }
.passo__sub { color: var(--c-texto-2); }
.passo__resultado { color: var(--c-texto); font-weight: 700; padding-top: 2px; margin-top: 2px; border-top: 1px dashed var(--c-linha); }
.passo sub { font-size: .74em; }
/* A linha do memorial é a explicação da linha de cima: fica presa a ela por uma faixa na
   lateral, e o texto dela quebra à vontade — a tabela é nowrap, e isso cortava a unidade
   na ponta da legenda. */
tr.linha-formula td {
  padding: 2px 8px 10px 0; border-bottom: 1px solid var(--c-linha-forte);
  white-space: normal;
}
/* o memorial pertence à linha de cima: fica preso a ela pela borda inteira e pelo fundo,
   não por uma tarja lateral */
tr.linha-formula .formulas { border-color: var(--c-linha-forte); background: var(--c-fundo); }

/* ---------------------------------------------------------- ficha + desenho lado a lado */
/* duas peças lado a lado; dentro de cada coluna a figura fica em cima da ficha, e é por
   isso que o desenho finalmente tem largura para ser lido */
.pecas-par { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 10px; align-items: start; }
.peca-bloco { min-width: 0; border: 1px solid var(--c-linha); border-radius: var(--raio); padding: 8px 10px; background: var(--c-superficie-2); }
.peca-bloco__t { margin: 0 0 6px; font-size: var(--t-sm); color: var(--c-texto-2); }
.ficha-par { display: grid; grid-template-columns: minmax(300px, 420px) max-content; gap: 12px; align-items: start; margin-bottom: 8px; justify-content: start; }
.ficha-par > .fig-topo { padding: 4px; }
@media (max-width: 640px) { .ficha-par { grid-template-columns: 1fr; } }

/* dentro de uma coluna estreita, a figura vai para cima da ficha e usa a largura toda */
.ficha-par.ficha-par--col { grid-template-columns: minmax(0, 1fr); }
.ficha-par.ficha-par--col .fig-topo { width: 100%; }
/* estes desenhos são altos (a peça é vertical): limitar a 340px deixava tudo minúsculo */
.ficha-par.ficha-par--col .fig-topo svg { height: auto; width: 100%; max-height: 560px; }
.ficha-par.ficha-par--col .tab--ficha { max-width: none; }

/* ---------------------------------------------------------- avisos */
/* aviso: borda inteira e fundo tingido. A tarja lateral colorida é o tique mais
   reconhecível de interface gerada — e não diz nada que a cor do fundo já não diga. */
.aviso {
  display: flex; gap: var(--e-2); align-items: flex-start;
  padding: var(--e-2) var(--e-3); margin-bottom: var(--e-2);
  border: 1px solid rgba(216, 162, 58, .45); border-radius: var(--raio);
  background: rgba(216, 162, 58, .10);
  font-size: var(--t-sm); color: var(--c-texto-2);
}
.aviso::before { content: "!"; font-weight: 700; color: var(--c-alerta); }
.aviso--erro { border-color: rgba(226, 96, 78, .5); background: rgba(226, 96, 78, .12); }
.aviso--erro::before { content: "\u00d7"; color: var(--c-erro); }
/* o aviso que já traz o seu próprio selo não precisa do sinal */
.aviso:has(.selo)::before { content: none; }

/* ---------------------------------------------------------- desenhos */
.desenhos { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.desenhos figure { margin: 0; background: var(--c-papel); border-radius: var(--raio); padding: 4px; width: fit-content; }
.desenhos svg { display: block; height: clamp(210px, 30vh, 330px); width: auto; max-width: 100%; }

/* ---------------------------------------------------------- resumo */
/* a coluna deixa de ser uma caixa só: é uma pilha, com uma caixa por içamento */
.resumo { position: sticky; top: var(--e-3); z-index: var(--z-grudado); display: grid; gap: 8px; align-content: start; }
.resumo__ic, .resumo__estudo {
  display: grid; gap: 10px;
  background: var(--c-superficie);
  border: 1px solid var(--c-linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 12px 14px;
}
/* o içamento que está sendo analisado */
.resumo__ic.is-atual { border-color: var(--c-acento); box-shadow: 0 0 0 1px var(--c-acento), var(--sombra); }
.resumo__ic:not(.is-atual) { cursor: pointer; opacity: .82; }
.resumo__ic:not(.is-atual):hover { opacity: 1; border-color: var(--c-linha-forte); }
.resumo__ver { float: right; text-transform: none; letter-spacing: 0; color: var(--c-acento); font-weight: 600; }
.resumo h3 { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .6px; color: var(--c-texto-3); }
.painel { display: grid; gap: 6px; }
.item { display: flex; justify-content: space-between; gap: 10px; font-size: var(--t-sm); }
.item b { font-family: var(--fonte-mono); }
.destaque {
  padding: 8px 10px; border-radius: 6px;
  background: var(--c-acento-suave); border: 1px solid var(--c-linha-forte);
}
.destaque .valor { font-size: var(--t-xl); font-weight: 700; font-family: var(--fonte-mono); }
.destaque .rot { font-size: var(--t-xs); color: var(--c-texto-2); }
.etiqueta { font-size: var(--t-xs); padding: 2px 7px; border-radius: 10px; border: 1px solid var(--c-linha-forte); color: var(--c-texto-2); }

/* ---------------------------------------------------------- rodapé */
.rodape {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 6px 16px;
  font-size: var(--t-xs); color: var(--c-texto-3);
  background: var(--c-superficie);
  border-top: 1px solid var(--c-linha);
}

@media (max-width: 980px) {
  .folha { grid-template-columns: minmax(0, 1fr); }
  .resumo { position: static; }
  .topo__acoes { margin-left: 0; }
}

/* ---------------------------------------------------------- figuras */
.tipo__fig { background: var(--c-papel); border-radius: 6px; padding: 4px; margin-bottom: 4px; }
.tipo__fig svg { display: block; width: 100%; height: auto; }
/* A folha branca tem a largura do desenho — antes ela esticava na largura da página e o
   desenho ficava pequeno no meio do branco. A altura é limitada para a página não crescer. */
.fig-topo, .figs figure {
  margin: 0 auto; padding: 5px; background: var(--c-papel); border-radius: var(--raio);
  display: grid; place-items: center; width: fit-content; max-width: 100%;
}
.fig-topo svg, .figs svg {
  display: block; height: clamp(210px, 30vh, 330px); width: auto;
  max-width: 100%; margin: 0 auto;
}
/* a figura ao lado da ficha mostra as letras da tabela: precisa ser lida, não só olhada */
.ficha-par .fig-topo svg { height: auto; width: 100%; max-height: 340px; }
#fig-encaixe { width: 100%; }
#fig-encaixe svg { height: auto; width: 100%; max-width: 980px; max-height: none; }

/* figuras que antes vinham empilhadas, uma por linha */
.figs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: start; }
.figs > figure { flex: 0 1 auto; min-width: 0; }