/* MONK: tokens e pecas. Vem da referencia aprovada pelo Carvalho (monk.css da pasta referencia-monk, 11/10/2026), reorganizado em TRES CAMADAS:
     1) PRIMITIVOS  (--p-*): os valores crus, iguais nos dois temas. Ninguem fora deste arquivo os usa.
     2) SEMANTICOS  (--ink, --paper, --line, --ambar...): o que cada cor SIGNIFICA; o modo noite (classe .escuro no <html>) troca so esta camada.
     3) COMPONENTE  (--cartao-raio, --alvo, --nav-altura...): as medidas das pecas, em cima da escala de espaco 4/8/12/16/24/32/48.
   Regras de layout que isto cumpre (REGRAS-de-layout.md): vidro SO em controle flutuante (.vidro: barra de abas, botao "+", cabecalho de folha,
   compositor, botao de voltar); cartoes sao SOLIDOS com sombra; sombras tingidas de ardosia; texto 22/17/15/13/12/11 (nunca menor que 11); alvo de
   toque de 44; avatares redondos; movimento so por transform e opacity, e "reduzir movimento" troca por um esmaecer curto. O grao e LEVE (5%). */

@font-face {
  font-family: "Satoshi";
  src: url("fontes/Satoshi-Variable.woff2") format("woff2-variations"), url("fontes/Satoshi-Variable.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
}

/* ---------- 1) primitivos ---------- */
:root {
  --p-tinta-claro: #111111;
  --p-tinta-escuro: #f2f1ee;
  --p-papel-claro: #fcfcfb;
  --p-papel-escuro: #1c1c1b;
  --p-ambar-claro: #b06e1e;
  --p-ambar-escuro: #e2a35e;
  --p-salvia-claro: #3e7a55;
  --p-salvia-escuro: #86c29b;
  --p-ardosia-claro: #2f5f80;
  --p-ardosia-escuro: #8db9d6;
  --p-sombra-ardosia: 30, 41, 59; /* as sombras tem o azul-ardosia da referencia, nao o preto */
  --p-erro-claro: #a8321e;
  --p-erro-escuro: #ff9a85;
  /* escala de espaco */
  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 24px;
  --e6: 32px;
  --e7: 48px;
}

/* ---------- 2) semanticos: o modo claro (a "nevoa") ---------- */
:root {
  color-scheme: light;
  --ink: var(--p-tinta-claro);
  --ink2: #444444;
  --ink3: #5e5e5e;
  --on-ink: #fafaf8;
  --paper: var(--p-papel-claro);
  --paper-solid: var(--paper);
  --well: rgba(17, 17, 17, 0.045);
  --line: rgba(17, 17, 17, 0.07);
  --line2: rgba(17, 17, 17, 0.15);
  --halo: rgba(17, 17, 17, 0.1);
  --edge: 0 0 0 1px rgba(17, 17, 17, 0.05);
  --sh: 0 1px 2px rgba(17, 17, 17, 0.04), 0 14px 30px -18px rgba(40, 36, 30, 0.26);
  --sh-lg: 0 2px 4px rgba(17, 17, 17, 0.04), 0 28px 56px -26px rgba(40, 36, 30, 0.38);
  --sh-md: 0 4px 6px -1px rgba(var(--p-sombra-ardosia), 0.08), 0 2px 4px -2px rgba(var(--p-sombra-ardosia), 0.06);
  --hi: inset 0 1px 0 rgba(255, 255, 255, 0.95);
  --glass: rgba(250, 250, 248, 0.7);
  --glass-solido: rgba(250, 250, 248, 0.94); /* sem desfoque (transparencia reduzida) e para o texto nao se misturar com o que rola por tras */
  --glass-edge: rgba(255, 255, 255, 0.7);
  --btn-sh: 0 12px 26px -12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --ambar: var(--p-ambar-claro);
  --ambar-soft: rgba(196, 128, 46, 0.14);
  --ambar-tinta: #8a520f;
  --salvia: var(--p-salvia-claro);
  --salvia-soft: rgba(62, 122, 85, 0.13);
  --salvia-tinta: #2f6545;
  --ardosia: color-mix(in srgb, var(--destaque-claro, var(--p-ardosia-claro)) 88%, #000); /* a cor de destaque que a pessoa escolheu (Ajustes), senao a ardosia da referencia; um pouco mais escura para o texto de link ler com contraste AA sobre o papel */
  --ardosia-soft: rgba(47, 95, 128, 0.11);
  --erro: var(--p-erro-claro);
  --fumo: rgba(17, 17, 17, 0.13);
  --grao-op: 0.055;
  --foco: var(--ardosia);
  --marca-cabeca: #cfcbc3;
  --marca-boca: #5a5650;
  --fundo-0: #fcfcfa;
  --fundo-1: #f1f0ec;
  --fundo-2: #e5e3de;
  --fundo-topo: rgba(241, 240, 236, 0.94); /* o veu atras de um cabecalho que fica no alto ao rolar */
  --fade-0: rgba(225, 225, 222, 0);
  --fade-1: rgba(226, 226, 223, 0.94);
  --pano: rgba(13, 13, 13, 0.22); /* o escurecido atras de uma folha */
  --theme-color: #f1f0ec;
}

/* o modo noite (a classe .escuro, ligada pela tela Aparencia e pelo tema do aparelho) */
:root.escuro {
  color-scheme: dark;
  --ink: var(--p-tinta-escuro);
  --ink2: #c9c7c2;
  --ink3: #a09e99;
  --on-ink: #111111;
  --paper: var(--p-papel-escuro);
  --well: rgba(255, 255, 255, 0.055);
  --line: rgba(255, 255, 255, 0.08);
  --line2: rgba(255, 255, 255, 0.18);
  --halo: rgba(255, 255, 255, 0.14);
  --edge: 0 0 0 1px rgba(255, 255, 255, 0.06);
  --sh: 0 16px 32px -20px rgba(0, 0, 0, 0.9);
  --sh-lg: 0 30px 56px -26px rgba(0, 0, 0, 0.95);
  --sh-md: 0 16px 32px -20px rgba(0, 0, 0, 0.9);
  --hi: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --glass: rgba(28, 28, 27, 0.7);
  --glass-solido: rgba(28, 28, 27, 0.95);
  --glass-edge: rgba(255, 255, 255, 0.07);
  --btn-sh: 0 12px 26px -12px rgba(0, 0, 0, 0.85);
  --ambar: var(--p-ambar-escuro);
  --ambar-soft: rgba(226, 163, 94, 0.16);
  --ambar-tinta: #edb879;
  --salvia: var(--p-salvia-escuro);
  --salvia-soft: rgba(134, 194, 155, 0.15);
  --salvia-tinta: #9fd3b0;
  --ardosia: var(--destaque-escuro, var(--p-ardosia-escuro));
  --ardosia-soft: rgba(141, 185, 214, 0.13);
  --erro: var(--p-erro-escuro);
  --fumo: rgba(255, 255, 255, 0.07);
  --grao-op: 0.05;
  --marca-cabeca: #55524c;
  --fundo-0: #2a2928;
  --fundo-1: #151514;
  --fundo-2: #050505;
  --fundo-topo: rgba(10, 10, 10, 0.94);
  --fade-0: rgba(3, 3, 3, 0);
  --fade-1: rgba(3, 3, 3, 0.9);
  --pano: rgba(0, 0, 0, 0.5);
  --theme-color: #0a0a0a;
}

/* ---------- 3) componente ---------- */
:root {
  --cartao-raio: 24px;
  --poco-raio: 16px;
  --alvo: 44px; /* o menor toque */
  --nav-altura: 62px;
  --nav-circulo: 56px;
  --nav-fundo: 30px; /* a folga da barra flutuante ate o fundo da tela (mais a area segura) */
  --margem: 16px; /* margem lateral das telas */
  --margem-larga: 20px; /* as telas de lista da referencia usam 20 */
  --area-nav: calc(var(--nav-altura) + var(--nav-fundo) + 36px + env(safe-area-inset-bottom)); /* a folga embaixo do conteudo para a barra flutuante */
  --mola: cubic-bezier(0.22, 1, 0.36, 1);
  --fonte: "Satoshi", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

/* o fundo: a nevoa. Vive no <html> e num pseudo-elemento FIXO (uma camada so, pintada uma vez, sem custo na rolagem); o grao e outro pseudo-elemento
   fixo por cima de tudo, com opacidade pequena (sem modo de mistura: ele pesaria na rolagem do iPhone) */
html {
  /* a cor de BAIXO da nevoa (--fundo-2): no app instalado do iPhone as camadas fixas param ~50 pt antes do fim da tela e o que
     aparece ali e esta cor; igual ao fim da nevoa, a sobra nao se ve (fotos 12/10 12:31 e 12:38) */
  background: var(--fundo-2);
  color: var(--ink);
}
html::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(120% 70% at 72% 26%, var(--fundo-0) 0%, var(--fundo-1) 44%, var(--fundo-2) 100%);
}
html::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  background-image: url("imagens/grao.png");
  background-size: 220px 220px;
  opacity: var(--grao-op);
}
.fumo {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  /* o desfoque da referencia (blur de 42 px) e dispensado: o proprio degrade radial ja e macio, e um filtro em camadas grandes pesaria na rolagem do iPhone */
  background: radial-gradient(circle, var(--fumo) 0%, rgba(0, 0, 0, 0) 68%);
}
.fumo.ambar {
  background: radial-gradient(circle, var(--ambar-soft) 0%, rgba(0, 0, 0, 0) 68%);
}
.fumo.azul {
  background: radial-gradient(circle, var(--ardosia-soft) 0%, rgba(0, 0, 0, 0) 68%);
}

/* superficies: cartao SOLIDO com sombra; poco (rebaixado); vidro so em controle flutuante */
.cartao {
  position: relative;
  background: var(--paper);
  border-radius: var(--cartao-raio);
  box-shadow: var(--edge), var(--hi), var(--sh);
}
.cartao.alto {
  box-shadow: var(--edge), var(--hi), var(--sh-lg);
}
.poco {
  background: var(--well);
  border-radius: var(--poco-raio);
}
.vidro {
  background: var(--glass);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  backdrop-filter: blur(24px) saturate(1.2);
  box-shadow: inset 0 0 0 1px var(--glass-edge), var(--sh-lg);
}
.tinta {
  background: var(--ink);
  color: var(--on-ink);
  box-shadow: var(--btn-sh);
  border: none;
}
.contorno {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--line2);
}
.suave {
  background: var(--well);
  color: var(--ink);
  border: none;
}
.linha {
  border-bottom: 1px solid var(--line);
}

/* cores com papel: ambar = precisa de voce; salvia = vivo e bom; ardosia = ligacao e prova */
.ambar {
  color: var(--ambar-tinta);
}
.salvia {
  color: var(--salvia-tinta);
}
.ardosia {
  color: var(--ardosia);
}
.etiqueta {
  height: 24px;
  padding: 0 9px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--well);
  color: var(--ink2);
}
.etiqueta.ambar {
  background: var(--ambar-soft);
}
.etiqueta.salvia {
  background: var(--salvia-soft);
}
.etiqueta.ardosia {
  background: var(--ardosia-soft);
}

/* avatares REDONDOS: o retrato do agente (quando ha) ou a letra; o ponto de estado fica na borda a 45 graus, com um anel da cor do fundo */
.av {
  position: relative;
  flex-shrink: 0;
  width: var(--av, 40px);
  height: var(--av, 40px);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: max(11px, calc(var(--av, 40px) * 0.38)); /* nunca menor que 11 px, nem no avatar pequeno */
  color: #f5f5f3;
  background: radial-gradient(circle at 36% 30%, #6a6a6a 0%, #1e1e1e 52%, #080808 100%);
  box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.06), 0 8px 18px -10px rgba(0, 0, 0, 0.55);
}
.av.t3 {
  color: #151515;
  background: radial-gradient(circle at 36% 30%, #ffffff 0%, #d8d6d0 55%, #b6b3ac 100%);
}
.av-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 30%;
  background: #ededea;
}
.escuro .av-foto {
  filter: invert(0.92) contrast(1.05);
}
.av-ponto {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 30%;
  height: 30%;
  min-width: 9px;
  min-height: 9px;
  z-index: 1;
  box-shadow: 0 0 0 2px var(--paper);
  border-radius: 50%;
}

/* estado por forma E cor (a cor sozinha nunca diz o estado): vivo = ponto cheio com halo; parado = aro vazio; espera = meio cheio */
.vivo {
  border-radius: 50%;
  background: var(--salvia);
  box-shadow: 0 0 0 4px var(--salvia-soft);
}
.parado {
  border-radius: 50%;
  border: 2px solid var(--ink3);
  box-sizing: border-box;
}
.espera {
  border-radius: 50%;
  background: conic-gradient(var(--ambar) 0 50%, transparent 50% 100%);
  box-shadow: inset 0 0 0 2px var(--ambar);
}
.rotulo {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink3);
}
.nav-on {
  background: var(--well);
}

/* a marca: o rosto do macaco (as formas pintadas por classe, a partir de marca.js) e a palavra em Satoshi 800 */
.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--ink);
}
.marca-pequena {
  font-size: var(--fonte, 21px);
}
.marca-rosto {
  flex-shrink: 0;
}
.marca-tinta {
  fill: var(--ink);
}
.marca-cabeca {
  fill: var(--marca-cabeca);
}
.marca-boca {
  fill: var(--marca-boca);
}
.marca-anel {
  stroke: var(--ambar);
}
.marca-grande {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  font-size: 52px;
}

/* entrada da abertura (a nevoa em 1,6 s, o texto subindo; o anel do logo se desenha); parada com "reduzir movimento" */
@keyframes monk-nevoa {
  from {
    opacity: 0;
    transform: scale(1.07);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes monk-sobe {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes monk-anel {
  from {
    stroke-dasharray: 0 276.5;
  }
  to {
    stroke-dasharray: 250 26;
  }
}
@keyframes monk-respira {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.018);
  }
}
.entra-img {
  animation: monk-nevoa 1.6s var(--mola) both, monk-respira 9s ease-in-out 1.6s infinite;
}
.entra-1 {
  animation: monk-sobe 0.8s var(--mola) 0.7s both;
}
.entra-2 {
  animation: monk-sobe 0.8s var(--mola) 0.9s both;
}
.entra-3 {
  animation: monk-sobe 0.8s var(--mola) 1.1s both;
}
.entra-anel .marca-anel {
  animation: monk-anel 1.2s cubic-bezier(0.65, 0, 0.35, 1) 0.8s both;
}
@media (prefers-reduced-motion: reduce) {
  .entra-img,
  .entra-1,
  .entra-2,
  .entra-3,
  .entra-anel .marca-anel {
    animation: none;
  }
}