/* Kit de telas do site v2 (PLANO-SITE-V2.md §5.5). Quatro tipos, uma família:
   conversa de WhatsApp, notificação de tela bloqueada, diagrama (filtro e cadeia) e página A4.
   Regras: texto das telas em 13 px no celular e 14 px no computador, nunca reduzido por scale;
   selo "dados fictícios" no mesmo lugar em toda tela (faixa de cima, 12 px);
   no celular a conversa é um recorte de borda a borda, sem aparelho desenhado. */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("fontes/schibsted-grotesk-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: only light;
  --papel: #F6F7F5;
  --branco: #FFFFFF;
  --tinta: #0B1611;
  --t2: #3F4B44;
  --t3: #5C6862;
  --linha: #DFE4E0;
  --linha-forte: #C9D1CB;
  --verde: #067F38;
  --verde-esc: #05602B;
  --nevoa: #EAF4EE;
  --ambar: #9A5B0C;
  --sombra-tela: 0 1px 2px rgba(11, 22, 17, .06), 0 24px 48px -24px rgba(11, 22, 17, .18);

  /* Texto dentro das telas: 13 px no celular, 14 px no computador (§5.5) */
  --tt: 13px;
  --tt-meta: 12px;
  --tt-nome: 14px;

  /* WhatsApp, tema claro (cores do app; só dentro das telas) */
  --wa-fundo: #EFEAE2;
  --wa-topo: #FFFFFF;
  --wa-in: #FFFFFF;
  --wa-out: #D9FDD3;
  --wa-txt: #111B21;
  --wa-meta: #667781;
  --wa-tique: #53BDEB;
  --wa-sistema: #FFF3C2;
  --wa-botao: #1DAA61;
  --wa-link: #027EB5;
}
@media (min-width: 1024px) {
  :root { --tt: 14px; --tt-nome: 15px; }
}

/* ---------- Moldura comum a toda tela ---------- */
.tela {
  font-family: "Schibsted Grotesk", system-ui, sans-serif;
  background: var(--branco);
  border: 1px solid var(--linha-forte);
  border-radius: 12px;
  box-shadow: var(--sombra-tela);
  overflow: hidden;
  color: var(--tinta);
  font-size: var(--tt);
  line-height: 1.35;
  position: relative;
}
.selo {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 12px;
  font-size: var(--tt-meta);
  color: var(--t3);
  background: var(--branco);
  border-bottom: 1px solid var(--linha);
  white-space: nowrap;
}
.selo::before {
  content: "";
  width: 6px; height: 6px;
  border: 1px solid var(--t3);
  border-radius: 999px;
}

/* ---------- Aparelho (só no computador) ---------- */
.aparelho {
  width: 320px;
  height: 640px;
  /* a moldura é contorno por fora: a tela de dentro fica na coluna (V3.1) */
  outline: 8px solid var(--tinta);
  border-radius: 40px; /* exceção nomeada: objeto físico, só no computador (Anexo B) */
  background: transparent;
  box-shadow: var(--sombra-tela);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.aparelho > .tela {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.barra-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 28px;
  padding: 0 20px;
  font-size: var(--tt-meta);
  font-weight: 600;
  background: var(--wa-topo);
  color: var(--wa-txt);
}
.barra-status svg { display: block; }

/* ---------- Conversa de WhatsApp ---------- */
.wa { display: flex; flex-direction: column; background: var(--branco); }
.wa-corpo, .wa-digitar { background: var(--wa-fundo); }
.wa-topo {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 12px 0 8px;
  background: var(--wa-topo);
  color: var(--wa-txt);
  border-bottom: 1px solid #E9EDEF;
}
.wa-topo .ic { color: var(--wa-txt); flex: none; }
.wa-av {
  width: 32px; height: 32px;
  border-radius: 999px;
  display: grid; place-items: center;
  font-size: var(--tt-meta);
  font-weight: 600;
  color: var(--branco);
  background: #6B7C85;
  flex: none;
}
.wa-av--verde { background: var(--verde); }
.wa-quem { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wa-nome { font-size: var(--tt-nome); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-estado { font-size: var(--tt-meta); color: var(--wa-meta); }
.wa-acoes { display: flex; gap: 18px; }

.wa-corpo {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  padding: 10px 14px 8px;
  overflow: hidden;
}
.wa-pilula {
  align-self: center;
  margin: 6px 0 8px;
  padding: 4px 10px;
  font-size: var(--tt-meta);
  color: var(--wa-meta);
  background: var(--branco);
  border-radius: 8px;
  box-shadow: 0 1px .5px rgba(11, 20, 26, .13);
}
.b {
  position: relative;
  max-width: 82%;
  padding: 6px 8px 6px 9px;
  border-radius: 8px;
  color: var(--wa-txt);
  box-shadow: 0 1px .5px rgba(11, 20, 26, .13);
  overflow-wrap: anywhere;
}
.b + .b--novo { margin-top: 8px; }
.b--in { align-self: flex-start; background: var(--wa-in); }
.b--out { align-self: flex-end; background: var(--wa-out); }
.b--cauda.b--in { border-top-left-radius: 0; }
.b--cauda.b--out { border-top-right-radius: 0; }
.b--cauda::before {
  content: "";
  position: absolute;
  top: 0;
  width: 8px; height: 13px;
  background: inherit;
}
.b--cauda.b--in::before { left: -8px; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.b--cauda.b--out::before { right: -8px; clip-path: polygon(0 0, 100% 0, 0 100%); }
/* Hora e tiques: flutuam no fim da última linha, como no app */
.b-meta {
  float: right;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin: 6px 0 -4px 10px;
  font-size: var(--tt-meta);
  line-height: 1;
  color: var(--wa-meta);
  white-space: nowrap;
}
.tique { color: var(--wa-tique); }

/* Áudio: tocar e onda em cima; duração à esquerda e hora à direita embaixo, como no app */
.b-audio { display: flex; align-items: center; gap: 10px; min-width: 200px; padding-top: 2px; }
.b-audio .ic-play { color: #54656F; flex: none; }
.onda { flex: 1; height: 24px; display: block; }
.b-audio-rodape { display: flex; justify-content: space-between; align-items: center; padding-left: 32px; margin-top: 2px; }
.b-audio-dur { font-size: var(--tt-meta); color: var(--wa-meta); }
.b-audio-rodape .b-meta { float: none; margin: 0; }

/* Mensagem do sistema (assumir) */
.wa-sistema {
  align-self: center;
  margin: 8px 0 4px;
  padding: 5px 10px;
  font-size: var(--tt-meta);
  color: #54656F;
  background: var(--wa-sistema);
  border-radius: 8px;
  text-align: center;
}

/* Aviso de caso: mensagem com campos e botão */
.aviso { padding: 8px 10px 0; min-width: 0; width: 88%; }
.aviso-titulo { font-weight: 600; margin-bottom: 6px; }
.aviso dl { margin: 0; display: grid; gap: 3px; }
/* campos em texto corrido: a linha seguinte volta à margem do balão, como no WhatsApp */
.aviso dl div { display: block; }
.aviso dt { font-weight: 600; display: inline; }
.aviso dd { margin: 0; display: inline; }
.aviso .b-meta { margin-bottom: 4px; }
.aviso-botao {
  clear: both;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  height: 40px;
  margin: 8px -10px 0;
  border-top: 1px solid #E9EDEF;
  color: var(--wa-link);
  font-weight: 600;
}

/* Barra de digitação */
.wa-digitar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 8px;
}
.wa-campo {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--branco);
  color: var(--wa-meta);
  box-shadow: 0 1px .5px rgba(11, 20, 26, .13);
}
.wa-campo span { flex: 1; }
.wa-mic {
  width: 40px; height: 40px;
  border-radius: 999px;
  display: grid; place-items: center;
  background: var(--wa-botao);
  color: var(--branco);
  flex: none;
}

/* Recorte do celular: de borda a borda, linha de 1 px em cima e embaixo, sem aparelho (§5.5) */
.recorte {
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Tema escuro do WhatsApp: hipótese a testar no mockup (§5.5), só nas telas da noite */
.wa--noite {
  --wa-fundo: #0B141A;
  --wa-topo: #202C33;
  --wa-in: #202C33;
  --wa-out: #005C4B;
  --wa-txt: #E9EDEF;
  --wa-meta: #8696A0;
  --wa-sistema: #182229;
  --wa-link: #53BDEB;
}
.wa--noite { background: var(--wa-topo); }
.wa--noite .wa-topo { border-bottom-color: #2A3942; }
.wa--noite .selo { background: #111B21; color: #8696A0; border-bottom-color: #2A3942; }
.wa--noite .selo::before { border-color: #8696A0; }
.wa--noite .wa-pilula { background: #182229; color: #8696A0; }
.wa--noite .wa-campo { background: #2A3942; color: #8696A0; }
.wa--noite .wa-sistema { color: #FFD279; }
.wa--noite .b-audio .ic-play { color: #8696A0; }
.wa--noite .aviso-botao { border-top-color: #2A3942; }
.aparelho:has(.wa--noite) .barra-status { background: #202C33; color: #E9EDEF; }

/* ---------- Notificação de tela bloqueada ---------- */
.bloqueio {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 12px 12px;
  background: #13241B;
  color: #F2F4F0;
}
.bloqueio-data { font-size: var(--tt); color: rgba(242, 244, 240, .82); }
.bloqueio-hora { font-size: 64px; font-weight: 500; line-height: 1; letter-spacing: -.02em; margin-top: 4px; }
.notif {
  align-self: stretch;
  margin-top: 28px;
  display: grid;
  grid-template-columns: 32px 1fr;
  column-gap: 10px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(246, 247, 245, .9);
  color: var(--wa-txt);
}
.notif-ic {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: grid; place-items: center;
  background: var(--wa-botao);
  color: var(--branco);
  grid-row: span 3;
}
.notif-app { display: flex; justify-content: space-between; font-size: var(--tt-meta); color: #54656F; }
.notif-titulo { font-weight: 600; margin-top: 2px; }
.notif-texto { color: #3B4A54; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Diagramas: filtro e cadeia ---------- */
.diagrama { background: var(--branco); }
.diagrama-corpo { padding: 20px; }

/* Filtro: três faixas, o símbolo da marca aberto (14/30/90%) */
.filtro { display: grid; gap: 12px; }
.faixa {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 10px;
  padding: 12px;
  border-radius: 8px;
  background: rgba(6, 127, 56, var(--forca));
  min-height: 0;
}
.faixa--1 { --forca: .06; }
.faixa--2 { --forca: .12; }
.faixa--3 { --forca: .9; color: var(--branco); }
.faixa-rotulo { font-size: var(--tt-meta); font-weight: 600; color: var(--verde-esc); display: flex; align-items: center; gap: 6px; }
.faixa--3 .faixa-rotulo { color: var(--branco); }
.faixa-itens { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.msg {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  max-width: 100%;
  padding: 7px 9px;
  border-radius: 8px;
  background: var(--branco);
  box-shadow: 0 1px .5px rgba(11, 20, 26, .13);
  color: var(--wa-txt);
}
.msg-hora { font-size: var(--tt-meta); color: var(--wa-meta); }
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 7px;
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  background: var(--branco);
  font-size: var(--tt-meta);
  color: var(--t2);
}
.parada { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.faixa--2 .parada .msg { opacity: .62; }

.caso {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--branco);
  color: var(--tinta);
  box-shadow: var(--sombra-tela);
  width: 100%;
}
.caso-tipo { display: flex; align-items: center; gap: 6px; font-size: var(--tt-meta); font-weight: 600; color: var(--verde); }
.caso-tipo::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--verde); }
.caso-quem { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.caso-onde { font-size: var(--tt-meta); color: var(--t3); }

/* Filtro horizontal no computador: corre da esquerda para a direita */
.filtro--horizontal { grid-template-columns: 1.15fr 1fr .95fr; }
.filtro--horizontal .faixa--3 { align-content: start; }

/* Cadeia: do anúncio ao caso e de volta ao Google */
.cadeia { list-style: none; margin: 0; padding: 0; display: grid; }
.elo {
  position: relative;
  display: grid;
  grid-template-columns: 20px 1fr;
  column-gap: 12px;
  padding-bottom: 18px;
}
.elo:last-child { padding-bottom: 0; }
.elo::before {
  content: "";
  position: absolute;
  left: 9.5px; top: 14px; bottom: -2px;
  border-left: 1px solid var(--verde);
}
.elo:last-child::before { display: none; }
.elo-ponto {
  width: 10px; height: 10px;
  margin: 4px 0 0 5px;
  border-radius: 999px;
  background: var(--verde);
}
.elo-rotulo { font-size: var(--tt-meta); color: var(--t3); }
.elo-valor { font-weight: 500; }
.elo--volta .elo-ponto { background: var(--branco); border: 1px solid var(--verde); }
.elo--construcao::before { border-left-style: dashed; border-left-color: var(--t3); }
.elo--construcao .elo-ponto { background: var(--branco); border: 1px dashed var(--t3); }
.elo--construcao .elo-valor { color: var(--t3); font-weight: 400; }
.elo--antes-construcao::before { border-left-style: dashed; border-left-color: var(--t3); }

.cadeia--horizontal { grid-auto-flow: column; grid-auto-columns: 1fr; column-gap: 0; }
.cadeia--horizontal .elo { grid-template-columns: 1fr; grid-template-rows: 20px auto auto; align-content: start; padding: 0 16px 0 0; row-gap: 6px; }
.cadeia--horizontal .elo::before { left: 10px; right: 0; top: 9.5px; bottom: auto; border-left: 0; border-top: 1px solid var(--verde); }
.cadeia--horizontal .elo--construcao::before,
.cadeia--horizontal .elo--antes-construcao::before { border-top-style: dashed; border-top-color: var(--t3); }
.cadeia--horizontal .elo-ponto { margin: 5px 0 0; }

/* ---------- Página A4: o relatório do Diagnóstico ---------- */
.a4 { background: var(--branco); }
.a4-pagina { padding: 20px; display: grid; gap: 14px; }
.a4-cab { display: flex; justify-content: space-between; font-size: var(--tt-meta); color: var(--t3); padding-bottom: 10px; border-bottom: 1px solid var(--linha); }
.a4-titulo { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.niveis { display: grid; }
.nivel {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  column-gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--linha);
}
.nivel-dim { display: flex; flex-direction: column; }
.nivel-decl { font-size: var(--tt-meta); color: var(--t3); }
.nivel-barra { display: flex; gap: 3px; }
.nivel-barra i { width: 16px; height: 6px; border-radius: 999px; background: var(--linha); }
.nivel-barra i.on { background: var(--verde); }
.nivel-nome { font-size: var(--tt-meta); color: var(--t2); min-width: 72px; text-align: right; }
.a4-conta { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--tt-meta); color: var(--t3); }
.a4-conta b { color: var(--tinta); font-weight: 600; }
.imda { display: grid; grid-template-columns: auto 1fr; align-items: end; column-gap: 12px; }
.imda-n { font-size: 40px; font-weight: 500; line-height: 1; letter-spacing: -.02em; }
.imda-n small { font-size: var(--tt); color: var(--t3); font-weight: 400; letter-spacing: 0; }
.imda-trilho { height: 6px; border-radius: 999px; background: var(--linha); position: relative; margin-bottom: 8px; }
.imda-trilho i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--verde); }
.imda-rotulo { grid-column: 1 / -1; font-size: var(--tt-meta); color: var(--t3); margin-top: 6px; }
.constatacao { padding: 10px 12px; border-radius: 8px; background: var(--papel); }
.constatacao b { font-weight: 600; }
.prioridade { display: flex; gap: 6px; align-items: baseline; font-weight: 600; color: var(--verde); }

/* ---------- Anotações (fora das telas, na página): ①②③ de planta ---------- */
.anot { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 20px; color: var(--t2); font-family: "Schibsted Grotesk", system-ui, sans-serif; }
.anot-n {
  flex: none;
  width: 20px; height: 20px;
  border: 1px solid var(--tinta);
  border-radius: 999px;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 600; color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
/* Marcador de cota no fio do caso */
.cota { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--t3); font-family: "Schibsted Grotesk", system-ui, sans-serif; }
.cota::before { content: ""; width: 12px; border-top: 1px solid var(--verde); }