/* =============================================================================
   Agroonnet · base compartilhada do ui-lab

   O que é igual em toda tela mora aqui: reset, foco, botão, campo, badge,
   mensagem, barra de laboratório. As telas (login/, home/) trazem só a sua
   composição. Se um botão precisar ficar diferente numa tela, o lugar de
   resolver é aqui, não lá — senão o sistema se desfaz em variações.

   Depende de tokens.css, carregado antes.
   ============================================================================= */

/* ── Reset ────────────────────────────────────────────────────────────────── */

*,
*::before,
*::after { box-sizing: border-box; }

/* Qualquer regra de classe com `display` vence o `[hidden]` do user-agent e o
   elemento reaparece mesmo escondido no DOM. Uma linha resolve para a página toda. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  /* `clip` e não `hidden`: corta o transbordo horizontal sem transformar o body
     num contexto de rolagem, que quebraria o `position: sticky` do cabeçalho. */
  overflow-x: clip;
  font: var(--text-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

button,
input,
select,
textarea { font-family: inherit; }

svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pular {
  position: absolute;
  left: var(--space-4); top: -100px;
  z-index: 50;
  padding: 10px 16px;
  border-radius: var(--radius-button);
  background: var(--brand-700);
  color: #fff;
  font: var(--text-button);
  text-decoration: none;
  transition: top .15s ease-out;
}
.pular:focus { top: var(--space-4); }

/* Um único anel de foco para a interface inteira. */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Trilha por perfil ────────────────────────────────────────────────────────
   Tinge segmentação e progresso. Nunca a ação primária: o botão principal é
   verde de marca em qualquer perfil (DESIGN.md §2.4).                        */

html { --trilha: var(--brand-600); --trilha-bg: var(--brand-100); }
html[data-trilha="produtor"]    { --trilha: var(--track-produtor);    --trilha-bg: var(--track-produtor-bg); }
html[data-trilha="trabalhador"] { --trilha: var(--track-trabalhador); --trilha-bg: var(--track-trabalhador-bg); }
html[data-trilha="empresa"]     { --trilha: var(--track-empresa);     --trilha-bg: var(--track-empresa-bg); }

/* ── Palco ───────────────────────────────────────────────────────────────────
   O palco é o container de consulta: o layout responde à largura DELE, não à da
   janela, e é isso que faz a barra de laboratório simular 390px de verdade, com
   os breakpoints reais disparando.

   Em modo simulado ele vira um aparelho: altura fixa, três faixas, e só a do
   meio rola. Cabeçalho e navegação ficam FORA da área de rolagem, em vez de
   `fixed` — um ancestral com `transform` até faz o `fixed` ancorar no palco,
   mas ele passa a rolar junto com o conteúdo, que é o defeito oposto.

   Em modo Livre nada disso se aplica: o cabeçalho é `sticky` e a navegação é
   `fixed` na janela, que é o comportamento real do webview das lojas.       */

.palco {
  --tela: 100dvh;
  container-type: inline-size;
  min-height: var(--tela);
  margin-inline: auto;
  background: var(--bg);

  /* Nada pode empurrar o palco para além da tela.

     `container-type: inline-size` aplica `contain: layout`, e isso faz o palco
     virar o containing block de tudo que é `position: fixed` dentro dele — a
     barra de navegação inclusive. Se algum conteúdo estica o palco, a barra
     estica junto: ela tem `left: 0; right: 0`, então passa a medir a largura do
     palco e não a da tela, e as quatro colunas iguais se espalham por uma
     largura que não cabe. Na tela sobra o primeiro item.

     Foi o que o Gustavo viu no Galaxy S24 dele em 17/08: "em vez de aparecer
     início, comércio, planos e menu, aparece só o início para mim" — e tudo
     voltava ao dar zoom para trás, porque aí a largura inteira cabia na tela.

     É o mesmo mecanismo do `transform` que já tinha derrubado a barra uma vez
     (README de ui-lab): ancestral que vira containing block leva o `fixed`
     junto. Vale para qualquer coisa que crie containment aqui. */
  max-width: 100%;
  overflow-x: clip;
}

.palco[data-largura] {
  --tela: min(844px, calc(100dvh - 28px));
  height: var(--tela);
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin-block: 14px;
  border-radius: 18px;
  box-shadow: 0 0 0 1px var(--line), 0 18px 50px rgb(31 31 31 / .14);
}

/* Telas com barras fixas (o app) viram três faixas, e só a do meio rola. Telas
   sem elas (o fluxo de entrada) seguem rolando o palco inteiro. */
.palco[data-largura]:has(> main) {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.palco[data-largura]:has(> main) > main {
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Dentro do aparelho as duas barras já estão fora da rolagem: posicioná-las de
   novo só as tiraria do lugar. */
.palco[data-largura] .topo,
.palco[data-largura] .nav {
  position: static;
}

/* ── Tipografia ───────────────────────────────────────────────────────────── */

.titulo {
  margin: 0 0 6px;
  font: var(--text-h2);
  color: var(--ink);
  text-wrap: balance;
}
.titulo:focus { outline: none; }

.titulo--display {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.2;
}

.apoio {
  margin: 0 0 var(--space-6);
  font: var(--text-body);
  color: var(--ink-soft);
  max-width: 46ch;
  text-wrap: pretty;
}

/* ── Botões ───────────────────────────────────────────────────────────────── */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: var(--radius-button);
  font: var(--text-button);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease-out, border-color .15s ease-out, opacity .15s ease-out, transform .1s ease-out;
}
.btn:active:not(:disabled) { transform: scale(.99); }
.btn:disabled { opacity: .42; cursor: not-allowed; }
.btn--bloco { width: 100%; }
.btn--pequeno { min-height: 40px; padding: 0 16px; font-size: 14px; }

.btn--primario { background: var(--brand-700); color: #fff; }
.btn--secundario { background: var(--bg-raised); border-color: var(--brand-700); color: var(--brand-700); }
.btn--discreto { background: var(--bg-raised); border-color: var(--line); color: var(--ink); }

@media (hover: hover) {
  .btn--primario:hover:not(:disabled) { background: var(--brand-600); }
  .btn--secundario:hover:not(:disabled),
  .btn--discreto:hover:not(:disabled) { background: var(--brand-100); border-color: var(--brand-700); color: var(--brand-700); }
}

/* Exceção deliberada do DESIGN.md §2.6: o CTA de WhatsApp usa a cor oficial do
   WhatsApp, não o verde de marca. São duas ações diferentes na mesma tela. */
.btn--whatsapp { background: var(--whatsapp); color: #05331A; }
@media (hover: hover) {
  .btn--whatsapp:hover:not(:disabled) { background: #1EBC5C; }
}
.btn__icone { width: 20px; height: 20px; flex: 0 0 auto; }

/* WhatsApp que ainda não abriu: verde apagado, com cadeado. Fica com cara de
   WhatsApp de propósito — é o mesmo botão, esperando o plano (msg 287843). */
.btn--zap-fechado {
  background: var(--brand-100);
  color: var(--brand-700);
  border: 1px dashed var(--brand-500);
}
@media (hover: hover) {
  .btn--zap-fechado:hover:not(:disabled) { background: #D6EADC; }
}
/* Lixeira: ação destrutiva, então não compete com o botão principal — é ícone
   discreto que só fica vermelho quando a pessoa encosta nele. */
.btn--lixeira {
  width: 44px;
  min-width: 44px;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--bg-raised);
  color: var(--ink-faint);
}
.btn--lixeira svg { width: 20px; height: 20px; }
@media (hover: hover) {
  .btn--lixeira:hover:not(:disabled) { border-color: var(--error); color: var(--error); }
}

.btn__previa {
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--bg-raised);
  font: var(--text-small);
  font-weight: 600;
  letter-spacing: .04em;
}

.btn.is-carregando { pointer-events: none; }
.btn.is-carregando > * { visibility: hidden; }
.btn.is-carregando::after {
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: agn-spin .7s linear infinite;
}

.link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--brand-700);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.link--pequeno { font-size: 13px; font-weight: 600; }

/* ── Campos ───────────────────────────────────────────────────────────────── */

.campo { display: flex; flex-direction: column; }

.campo > label,
.campo__linha label {
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

/* Lista de exclusão, não de inclusão: enumerar os tipos aceitos faz o próximo
   tipo usado (foi o `email`) nascer com a aparência crua do navegador. */
input:not([type="checkbox"], [type="radio"], [type="file"]),
select,
/* `textarea` entrou junto quando o cadastro da empresa ganhou o campo "Sobre a
   empresa" (msg 412466 do Luiz): sem ele, o campo nascia com a moldura crua do
   navegador e fonte monoespaçada, destoando de tudo em volta. É o mesmo motivo
   que fez a lista virar exclusão em vez de inclusão, uma linha acima. */
textarea {
  width: 100%;
  min-height: 50px;
  padding: 0 14px;
  /* 16px é deliberado, acima dos 15px do DS: abaixo disso o Safari no iPhone dá
     zoom automático ao focar o campo e desloca a tela. Ver README, Achados. */
  font-size: 16px;
  color: var(--ink);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-input);
  transition: border-color .15s ease-out, box-shadow .15s ease-out;
}

input::placeholder,
textarea::placeholder { color: var(--ink-faint); }

/* Altura mínima de campo não serve para texto longo, e `resize: vertical`
   deixa a pessoa abrir mais espaço sem quebrar a largura da coluna. */
textarea {
  min-height: 96px;
  padding: 12px 14px;
  line-height: 1.5;
  resize: vertical;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 2px var(--brand-500);
}

input[aria-invalid="true"] { border-color: var(--error); }
input[aria-invalid="true"]:focus-visible { box-shadow: 0 0 0 2px var(--error); }

select {
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C5C5C' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px;
}

.rotulo-opcional {
  margin-left: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-faint);
}

.ajuda,
.erro {
  margin: 6px 0 0;
  font: var(--text-small);
}
.ajuda { color: var(--ink-faint); }
.erro { color: var(--error); font-weight: 500; }

/* ── Selos e pílulas ──────────────────────────────────────────────────────── */


.pilula {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.pilula--trilha { background: var(--trilha-bg); color: var(--trilha); }
.pilula--destaque { background: var(--accent-100); color: var(--accent-600); }
/* O destaque de PERFIL é verde, não âmbar — pedido do Gustavo em 02/09, para
   "ficar mais legal". Classe própria porque `--destaque` também veste Promoção,
   Urgente e Falhou, que continuam âmbar de propósito. */
.pilula--destaque-plano { background: var(--brand-100); color: var(--brand-700); }
.pilula--nota { background: var(--brand-100); color: var(--brand-700); }
.pilula--neutra { background: var(--line-soft); color: var(--ink-soft); }
/* O serviço é o que a vaga é. Sólida de propósito: precisa ganhar dos outros
   selos, senão volta a se perder na ficha lá embaixo — foi o que confundiu o
   Luiz na call de 17/08. */
.pilula--servico { background: var(--brand-700); color: var(--brand-100); }

/* ── Mensagens ────────────────────────────────────────────────────────────── */

.alerta,
.aviso {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--radius-input);
  font: var(--text-small);
  line-height: 1.5;
}
.alerta { background: #FBEEEE; border: 1px solid #EAC9C9; color: #8E2F2F; }
.aviso  { background: var(--brand-100); border: 1px solid #C7E2CF; color: var(--brand-700); }

/* ── Barra de laboratório ──────────────────────────────────────────────────
   Ferramenta de teste, não produto. Registro visual escuro de propósito, para
   nunca ser confundida com a interface que está sendo avaliada.             */

.lab {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--font-ui);
}

.lab__alternar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid #3A3E38;
  border-radius: var(--radius-pill);
  background: #22261F;
  color: #E6E8E2;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 14px rgb(20 24 18 / .28);
}
.lab__ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-500); }

.lab__painel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(300px, calc(100vw - 28px));
  max-height: min(70vh, 520px);
  overflow-y: auto;
  padding: 16px;
  border: 1px solid #3A3E38;
  border-radius: var(--radius-card);
  background: #22261F;
  box-shadow: 0 12px 34px rgb(20 24 18 / .38);
}

.lab__grupo { display: flex; flex-direction: column; gap: 8px; }

.lab__rotulo {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #8C9186;
}

.lab__botoes { display: flex; flex-wrap: wrap; gap: 6px; }

.lab__botoes button {
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid #3A3E38;
  border-radius: 8px;
  background: #2C312A;
  color: #D8DCD4;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .12s ease-out, border-color .12s ease-out;
}
.lab__botoes button[aria-pressed="true"] {
  background: var(--brand-600);
  border-color: var(--brand-500);
  color: #fff;
}
.lab__botoes button:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }

.lab__nota { margin: 0; font-size: 11.5px; line-height: 1.5; color: #8C9186; }
.lab__nota kbd {
  padding: 1px 5px;
  border-radius: 4px;
  background: #2C312A;
  font-family: ui-monospace, monospace;
  font-size: 11px;
}

/* Modos de teste acionados pela barra. */
body.teste-foco :is(button, input, select, a, label.perfil) {
  outline: 2px dashed var(--brand-500);
  outline-offset: 2px;
}
body.teste-sem-imagem :is(.painel__foto, .cartao__foto img, .anuncio img) { display: none; }

/* ── Movimento reduzido ───────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body.teste-sem-motion *,
body.teste-sem-motion *::before,
body.teste-sem-motion *::after {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
}