/* O protótipo desenha dentro de um quadro de iPhone. Aqui o app roda na janela
   inteira, entao a .app ocupa a tela e nao tem moldura. Nada mais e redefinido:
   todo o resto vem do styles.css do protótipo, sem alteracao. */
body.real { margin: 0; background: var(--bg-window); }
body.real .app { position: static; width: 100%; height: 100dvh; border-radius: 0; box-shadow: none; overflow: hidden; }
body.real .app-inner { height: 100dvh; }

/* Menu lateral e abas NAO sao controlados aqui: o protótipo ja resolve isso com
   container queries sobre a largura do .app (@container app min-width 768px). Minhas
   @media proprias brigavam com elas e criavam uma faixa entre 768 e 899 pixels sem
   navegacao nenhuma: a container query escondia as abas e a minha media escondia o
   menu lateral. */

body.real.entrada-fora { display: grid; place-items: center; padding: 24px; height: 100dvh; }
body.real .folha-entrada { width: 100%; max-width: 380px; padding: 28px 26px; }

.sel-unidade { display: inline-block; }
.sel-unidade select {
  font: inherit; font-size: 12px; color: var(--ink-2); background: transparent;
  border: none; padding: 0; cursor: pointer;
}

/* O protótipo usa <button> na navegação, porque lá tudo é simulado. Aqui a navegação
   é link de verdade, para funcionar sem JavaScript e abrir em outra aba. As regras
   abaixo são as MESMAS do styles.css, espelhadas para <a>. Nada de visual novo. */
.app-side a {
  display: flex; align-items: center; gap: 9px; border: 0; background: transparent;
  padding: 6px 9px; border-radius: var(--r-control); font-size: 13px;
  text-align: left; color: var(--ink); text-decoration: none;
}
.app-side a .ico { color: var(--accent-ink); width: 16px; height: 16px; flex: none; }
.app-side a:hover { background: var(--hover); text-decoration: none; }
.app-side a.on { background: var(--selected); font-weight: 600; }

.tabbar a {
  margin: 6px 0; border: 0; background: transparent; border-radius: var(--r-capsule);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; font-size: 10px; font-weight: 600; color: var(--ink-2); text-decoration: none;
}
.tabbar a .ico { width: 20px; height: 20px; }
/* Sao cinco abas, nao quatro: o protótipo nao previa a aba Mais. Em tela estreita
   "Procedimentos" nao cabe inteiro, entao corta com reticencias em vez de quebrar
   em duas linhas e estourar a altura da barra. */
.tabbar { grid-template-columns: repeat(5, 1fr); }
.tabbar a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabbar a.on { background: var(--fill-3); color: var(--accent-ink); }

/* Item de lista que virou link: sem sublinhado, cor de texto normal. */
a.li, a.li:hover { text-decoration: none; color: var(--ink); }
a.li .ico, .li .ico { flex: none; }
a.li:hover { background: var(--hover); }
.li .lic { flex: none; display: grid; place-items: center; width: 28px; height: 28px;
  border-radius: 8px; background: var(--fill-3); color: var(--accent-ink); }
.li .lic .ico { width: 16px; height: 16px; }

/* Barra de progresso de "Onde pesa o custo". */
.bar { height: 6px; border-radius: 3px; background: var(--fill); overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--accent-solid); }

/* Tabela simples da tela "Tabela para o sistema". */
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { font-size: 12px; font-weight: 600; color: var(--ink-2); padding: 8px 10px;
  text-align: left; border-bottom: 0.5px solid var(--rule); }
.tbl td { padding: 9px 10px; border-bottom: 0.5px solid var(--rule); }
.tbl tr:last-child td { border-bottom: 0; }

/* "Voltar" e "Fechar" da barra: no protótipo são <button>, aqui são link. */
.nav a.back, .nav a.close { text-decoration: none; }
.nav a.back:hover, .nav a.close:hover { text-decoration: none; }

/* O protótipo nao tem formulario: as telas sao montadas por JavaScript e cada cartao
   e filho direto do .scr, que tem gap. Aqui os formularios sao de verdade, entao o
   <form> vira um filho so e os cartoes dentro dele ficavam colados, com a sombra de um
   cortando o outro. O form herda o mesmo empilhamento. */
.scr form { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.scr form > * { min-width: 0; }

/* Formulario que e uma LINHA so (campo mais botao ao lado). Sem isto a regra de cima
   vence por especificidade, o form vira coluna e o align-items:center do .row-wrap
   encolhe o campo ate o tamanho do texto: o campo fica minusculo e centralizado. */
.scr form.row-wrap { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }

/* Mesma armadilha com .bottom-actions: ".bottom-actions .btn" usa flex:1 1 140px, e num
   container em coluna esse 140px vira ALTURA e o botao vira um balao. */
.scr form.bottom-actions { flex-direction: row; flex-wrap: wrap; align-items: center; }

/* Link com cara de botao: o .btn do protótipo so vale para <button>. */
a.btn, a.btn:hover { text-decoration: none; }
.btn-block { width: 100%; }

/* Campo de texto e area, com a mesma cara dos campos do protótipo. */
.inp {
  width: 100%; height: var(--ctl-md); padding: 0 12px; font: inherit;
  font-size: var(--fs-call); color: var(--ink); background: var(--surface);
  border: 0; box-shadow: inset 0 0 0 1px var(--rule-strong);
  border-radius: var(--r-control); min-width: 0;
}
.inp:focus { outline: 2px solid var(--accent-solid); outline-offset: -1px; }
.inp.big { height: var(--ctl-lg); font-size: var(--fs-t2); font-weight: 600; }
textarea.inp { height: auto; padding: 10px 12px; line-height: 1.45; resize: vertical; }
select.inp { appearance: auto; }
.lbl { display: block; font-size: var(--fs-foot); color: var(--ink-2); margin-bottom: 4px; }
.rng { width: 100%; accent-color: var(--accent-solid); }
.sl { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.sl .lb { font-size: var(--fs-sub); color: var(--ink-2); }
.val { font-variant-numeric: tabular-nums; font-weight: 600; }

/* Segmento usado como link (escolher papel) e como radio (mes a mes). */
.seg a, .seg label {
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  text-decoration: none; color: var(--ink-2); padding: 0 12px; height: 28px;
  border-radius: var(--r-control); font-size: 13px; font-weight: 500;
}
.seg a.on, .seg label.on { background: var(--seg-selected); color: var(--ink); font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.04); }
.seg.full { display: flex; }
.seg.full a, .seg.full label { flex: 1; }

/* Chip que virou link de filtro: sem sublinhado, como o chip de <span>. */
a.chip, a.chip:hover { text-decoration: none; }

/* O protótipo só estiliza ".li .main"; no checklist de catálogo o conteúdo dele era
   uma linha de texto só. Aqui há nome e um segundo rótulo, então o bloco precisa
   empilhar, com os mesmos tamanhos da lista agrupada. */
.cat-it .main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cat-it .main .t { font-size: var(--fs-call); line-height: var(--lh-call); }
.cat-it .main .s { font-size: var(--fs-foot); line-height: var(--lh-foot);
  color: var(--ink-2); margin-top: 2px; }
.cat-it { cursor: pointer; }
.cat-it:hover { background: var(--hover); }

/* ------------------------------------------------------------------ marca */
.marca-lateral { width: 24px; height: 24px; border-radius: 6px; flex: none; display: block; }

.logo-entrada { display: flex; justify-content: center; margin-bottom: 18px; }
.logo-entrada img { width: 100%; max-width: 230px; height: auto; display: block; }

/* A logo tem versão para fundo claro e para fundo escuro. A troca segue o mesmo
   caminho do resto do protótipo: a preferência do sistema, e o data-theme vence
   quando existe. O atributo é "data-theme" com "dark" e "light", igual ao styles.css;
   eu tinha escrito "data-tema" e nunca casava.
   Os seletores repetem ".logo-entrada" de propósito: sem isso a regra de esconder
   perde para ".logo-entrada img { display: block }" e as duas logos aparecem. */
.logo-entrada .so-escuro { display: none; }
.logo-entrada .so-claro { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-entrada .so-claro { display: none; }
  :root:not([data-theme="light"]) .logo-entrada .so-escuro { display: block; }
}
:root[data-theme="dark"] .logo-entrada .so-claro { display: none; }
:root[data-theme="dark"] .logo-entrada .so-escuro { display: block; }
:root[data-theme="light"] .logo-entrada .so-claro { display: block; }
:root[data-theme="light"] .logo-entrada .so-escuro { display: none; }

/* Telas sem sessão (entrar, convite, recuperar). O formulário delas fica fora do
   .scr, então precisa do próprio empilhamento: sem isto o botão cola no campo. */
.folha-entrada form { display: flex; flex-direction: column; gap: 14px; }
.campo-bloco { display: flex; flex-direction: column; gap: 4px; }
.folha-entrada .t-sub { margin: 0; }
.folha-entrada p + p { margin-top: 4px; }

/* ------------------------------------------------------- botao de duvida */
/* Flutua sobre a tela, acima da barra de abas. Nasce escondido: o ajuda.js
   mostra. Sem JavaScript ninguem ve um botao que nao faz nada. */
.ajuda-btn {
  position: absolute; right: 12px; bottom: 80px; z-index: 9; width: 44px; height: 44px;
  padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); color: var(--accent-ink); box-shadow: var(--shadow-card);
  cursor: pointer;
}
.ajuda-btn[hidden] { display: none; }
.ajuda-btn .ico { width: 22px; height: 22px; }
.ajuda-btn:hover { background: var(--hover); }
/* Tela de passo a passo nao tem barra de abas embaixo. */
.ajuda-btn.baixo { bottom: 16px; }
@container app (min-width: 768px) { .ajuda-btn { bottom: 20px; right: 20px; } }

/* Camada que pega o toque fora do alvo: fecha a ajuda. */
.ajuda-fundo { position: fixed; inset: 0; z-index: 60; background: transparent; }
/* O circulo. A sombra gigante escurece todo o resto da tela de uma vez. */
.ajuda-furo {
  position: fixed; z-index: 61; border-radius: 14px; pointer-events: none;
  box-shadow: 0 0 0 3px var(--accent-solid), 0 0 0 9999px rgba(0, 0, 0, .55);
  transition: left .18s ease, top .18s ease, width .18s ease, height .18s ease;
}
.ajuda-caixa {
  position: fixed; z-index: 62; display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px; border-radius: var(--r-card); background: var(--surface);
  box-shadow: var(--shadow-card);
}
.ajuda-caixa p { margin: 0; }
.ajuda-caixa .btn { min-height: 34px; }