/* Raio-x · "Mesa de luz": sala neutra, mídia acesa. Cor só quando significa algo (estado, engine, beat).
   Fontes (colar no <head>, troca o link atual):
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wdth,wght@12..96,75..100,600..800&family=Schibsted+Grotesk:wght@400..700&family=JetBrains+Mono:wght@500&display=swap">
   Tema: escuro é o padrão. Claro entra por <html data-tema="claro"> ou pelo sistema (ver fim da seção 1).
   Razões de contraste (WCAG 2.x) ao lado de cada par, calculadas sobre fundo / sup-1 / sup-2 / sup-3. */

/* ───────────── 1. TOKENS ───────────── */
:root {
  color-scheme: dark;

  /* superfícies: cinza neutro levemente quente (o atual puxa pro azul e esfria a arte) */
  --fundo: #0E0E0D;          /* página */
  --sup-1: #1A1A18;          /* card, folha, campo */
  --sup-2: #252522;          /* chip, hover, controle em repouso */
  --sup-3: #31302D;          /* botão secundário, aba ativa, pressionado */
  --linha: #31302D;          /* divisor decorativo (1.46 no fundo; não carrega informação) */
  --borda: #85817A;          /* contorno de controle: 4.98 / 4.50 / 3.97 / 3.41 (≥ 3:1) */
  --palco: #000000;          /* atrás de vídeo e imagem, igual nos dois temas */
  --palco-texto: #F4F2ED;    /* 18.77 no palco; 5.13 sobre véu preto 60% em cima de branco */
  --veu: rgb(0 0 0 / .6);    /* fundo de folha/modal/lupa */

  /* texto */
  --texto: #F4F2ED;          /* 17.26 / 15.58 / 13.74 / 11.80 */
  --texto-2: #BDB9B1;        /* 9.88 / 8.91 / 7.86 / 6.75   apoio, meta */
  --texto-3: #9C988F;        /* 6.72 / 6.06 / 5.34 / 4.59   data, placeholder, legenda */

  /* ação primária = papel sobre tinta (sem cor: quem tem cor é a arte) */
  --acao: #F4F2ED;
  --acao-realce: #FFFFFF;    /* hover */
  --acao-tinta: #141413;     /* 16.48 sobre --acao */
  --inverso: #F4F2ED;        /* toast e popover */
  --inverso-tinta: #141413;  /* 16.48 */

  /* marca / info = lápis azul do animador: foco, link, "novo", seleção, contagem */
  --marca: #7FB2FF;          /* 8.93 / 8.06 / 7.11 / 6.10 */
  --marca-tinta: #141413;    /* 8.53 sobre --marca */
  --marca-fundo: #2A323D;    /* --marca em cima: 5.99 · --texto em cima: 11.57 */
  --marca-inversa: #1A55C0;  /* link dentro de toast/popover e traço do logo: 6.05 sobre --inverso */
  --info: var(--marca);
  --info-fundo: var(--marca-fundo);

  /* estados: sempre com ícone ou palavra junto, nunca só a cor */
  --ok: #5BD08C;             /* 9.98 / 9.00 / 7.94 / 6.82 */
  --ok-tinta: #06210F;       /* 8.80 sobre --ok */
  --ok-fundo: #24372B;       /* --ok em cima: 6.55 */
  --mudar: #FF7A66;          /* lápis vermelho · 7.57 / 6.83 / 6.02 / 5.17 · também perigo/erro */
  --mudar-tinta: #2B0A05;    /* 7.16 sobre --mudar */
  --mudar-fundo: #3F2924;    /* --mudar em cima: 5.29 */
  --aviso: #F5B84A;          /* 10.89 / 9.82 / 8.66 / 7.44 */
  --aviso-tinta: #2A1B02;    /* 9.42 sobre --aviso */
  --aviso-fundo: #3D3320;    /* --aviso em cima: 6.99 */

  /* engine (ponto de 8px + palavra; a palavra pode usar a cor) */
  --eng-microdrama: #FF8FC7; /* 9.20 / 8.30 / 7.32 / 6.29 */
  --eng-webtoon: #B9A3FF;    /* 8.96 / 8.09 / 7.13 / 6.12 */
  --eng-ideia: #D9C7A3;      /* 11.63 / 10.50 / 9.26 / 7.95 · areia: ainda é papel, não obra */

  /* beats: só como preenchimento (faixa, chip), texto em cima sempre --beat-tinta */
  --beat-tinta: #141413;
  --beat-hook: #FF5D7A;      /* tinta em cima 6.23 · no fundo 6.53 */
  --beat-pressao: #FF9248;   /* 8.30 · 8.70 */
  --beat-escalada: #FFD45E;  /* 13.02 · 13.64 */
  --beat-silencio: #9AA3AD;  /* 7.21 · 7.56 */
  --beat-virada: #B39DFF;    /* 8.06 · 8.45 */
  --beat-payoff: #35D6C5;    /* 10.16 · 10.65 */
  --beat-corte: #5AA9FF;     /* 7.51 · 7.87 */
  --beat-pista: #F08AEB;     /* 8.37 · 8.77 */
  --beat-sem: #6B6862;

  /* pessoas (avatar): hash do nome % 6. Sem verde nem vermelho (são ok/mudar). Letra em #141413 (≥ 7.5) */
  --pessoa-1: #FFD45E; --pessoa-2: #5AA9FF; --pessoa-3: #F08AEB;
  --pessoa-4: #B39DFF; --pessoa-5: #FF9248; --pessoa-6: #35D6C5;
  --pessoa-tinta: #141413;

  /* tipografia: 3 famílias, 6 tamanhos, nada abaixo de 12px */
  --fonte-titulo: "Bricolage Grotesque", "Schibsted Grotesk", system-ui, sans-serif;
  --fonte-texto: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-mono: "JetBrains Mono", ui-monospace, Menlo, monospace; /* só: id (p01, v3), timecode, prompt/código */
  --tipo-capa: 800 condensed 40px/40px var(--fonte-titulo);       /* título do trabalho, desktop */
  --tipo-titulo: 800 condensed 28px/30px var(--fonte-titulo);     /* título de página, celular */
  --tipo-sub: 700 semi-condensed 20px/24px var(--fonte-titulo);   /* seção, título de card */
  --tipo-texto: 400 16px/24px var(--fonte-texto);                 /* corpo, roteiro, comentário, campo */
  --tipo-apoio: 400 14px/20px var(--fonte-texto);                 /* apoio, botão (600), aba (600) */
  --tipo-micro: 600 12px/16px var(--fonte-texto);                 /* chip, meta, rótulo */
  --tipo-id: 500 12px/16px var(--fonte-mono);                     /* p01 · v3 · 0:11 */
  --leitura: 68ch;                                                /* largura máxima de texto corrido */

  /* espaço (base 4) */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; --e-7: 48px; --e-8: 64px;
  --calha: 16px;             /* margem lateral; 24px a partir de 700px */
  --largura: 1120px;
  --alvo: 44px;              /* toque mínimo */

  /* raio: 4 passos + pílula (hoje são 17 valores) */
  --raio-1: 6px;             /* chip, etiqueta, miniatura pequena */
  --raio-2: 10px;            /* botão, campo, aba */
  --raio-3: 16px;            /* card, capa, mídia, toast, popover */
  --raio-4: 24px;            /* folha, modal */
  --raio-pilula: 999px;

  /* elevação: no escuro quem sobe é a superfície; sombra só no que flutua */
  --sombra-1: 0 1px 2px rgb(0 0 0 / .4);
  --sombra-2: 0 8px 24px rgb(0 0 0 / .5), 0 0 0 1px rgb(255 255 255 / .06);
  --sombra-3: 0 24px 64px rgb(0 0 0 / .65), 0 0 0 1px rgb(255 255 255 / .06);

  /* movimento: entra desacelerando, sai mais rápido (≈ 65%) */
  --dur-toque: 120ms;        /* hover, pressionar, trocar estado */
  --dur-entra: 220ms;        /* popover, toast, troca de aba */
  --dur-sai: 140ms;
  --dur-folha: 320ms;        /* folha, modal, lupa */
  --dur-folha-sai: 200ms;
  --curva-entra: cubic-bezier(.2, .8, .2, 1);
  --curva-sai: cubic-bezier(.4, 0, 1, 1);
  --curva-padrao: cubic-bezier(.2, 0, 0, 1);

  /* os três estados que a cor conta: aprovado (verde) · pedido aberto (âmbar) · aviso da IA (coral) */
  --pedido: var(--aviso); --pedido-tinta: var(--aviso-tinta); --pedido-fundo: var(--aviso-fundo);
  --alerta: var(--mudar); --alerta-tinta: var(--mudar-tinta); --alerta-fundo: var(--mudar-fundo);
  --topo: 56px;              /* altura da barra do topo (48px no celular) */

  /* camadas */
  --z-grudado: 10; --z-topo: 20; --z-veu: 40; --z-folha: 50; --z-popover: 60; --z-toast: 70;
}

/* tema claro ("papel"): pro sol da rua e pra leitura longa. Mídia continua no palco preto. */
:root[data-tema="claro"] {
  color-scheme: light;
  --fundo: #F6F4EF; --sup-1: #FFFFFF; --sup-2: #EDEAE3; --sup-3: #E2DED5; --linha: #E2DED5;
  --borda: #7A756C;          /* 4.16 / 4.58 / 3.81 / 3.41 */
  --veu: rgb(20 20 19 / .5);
  --texto: #171716;          /* 16.32 / 17.94 / 14.93 / 13.36 */
  --texto-2: #4A4741;        /* 8.42 / 9.26 / 7.70 / 6.89 */
  --texto-3: #625E57;        /* 5.86 / 6.45 / 5.36 / 4.80 */
  --acao: #171716; --acao-realce: #34322F; --acao-tinta: #FFFFFF;      /* 17.94 */
  --inverso: #171716; --inverso-tinta: #F6F4EF;                        /* 16.32 */
  --marca: #1A55C0;          /* 6.15 / 6.76 / 5.63 / 5.04 */
  --marca-tinta: #FFFFFF;    /* 6.76 */
  --marca-fundo: #E4EBF7;    /* --marca em cima: 5.65 */
  --marca-inversa: #7FB2FF;  /* 8.30 sobre --inverso */
  --ok: #156B39;             /* 5.98 / 6.57 / 5.47 / 4.90 */
  --ok-tinta: #FFFFFF;       /* 6.57 */
  --ok-fundo: #E3EDE7;       /* 5.49 */
  --mudar: #B42915;          /* 5.84 / 6.42 / 5.35 / 4.79 */
  --mudar-tinta: #FFFFFF;    /* 6.42 */
  --mudar-fundo: #F6E5E3;    /* 5.27 */
  --aviso: #7A4F00;          /* 6.49 / 7.13 / 5.93 / 5.31 */
  --aviso-tinta: #FFFFFF;    /* 7.13 */
  --aviso-fundo: #EFEAE0;    /* 5.95 */
  --eng-microdrama: #A81C65; /* 6.33 / 6.96 / 5.79 / 5.18 */
  --eng-webtoon: #5B3FD1;    /* 6.21 / 6.83 / 5.68 / 5.08 */
  --eng-ideia: #6B552B;      /* 6.46 / 7.10 / 5.91 / 5.29 */
  --beat-tinta: #FFFFFF;     /* branco em cima de cada um ≥ 4.86; cada um no fundo ≥ 4.42 */
  --beat-hook: #D12B4F; --beat-pressao: #B8500A; --beat-escalada: #8A6100; --beat-silencio: #66707C;
  --beat-virada: #6D4FE0; --beat-payoff: #0B7F78; --beat-corte: #1F6FD6; --beat-pista: #B436A6;
  --beat-sem: #8A857C;
  --sombra-1: 0 1px 2px rgb(23 23 22 / .08);
  --sombra-2: 0 8px 24px rgb(23 23 22 / .14), 0 0 0 1px rgb(23 23 22 / .06);
  --sombra-3: 0 24px 64px rgb(23 23 22 / .22), 0 0 0 1px rgb(23 23 22 / .06);
}
/* Sem escolha salva, seguir o sistema: no <head>, antes do CSS,
   <script>document.documentElement.dataset.tema = localStorage.rxTema || (matchMedia("(prefers-color-scheme: light)").matches ? "claro" : "escuro")</script> */

/* ───────────── 2. BASE ───────────── */
* { box-sizing: border-box; min-width: 0; }
html, body { margin: 0; background: var(--fundo); color: var(--texto); font: var(--tipo-texto); -webkit-text-size-adjust: 100%; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
h1 { font: var(--tipo-titulo); letter-spacing: -.01em; }
h2, h3 { font: var(--tipo-sub); }
@media (min-width: 700px) { :root { --calha: 24px; } h1 { font: var(--tipo-capa); letter-spacing: -.015em; } }
a { color: inherit; } button, input, textarea { font: inherit; color: inherit; } button { cursor: pointer; }
img, video { max-width: 100%; display: block; } [hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.id, time, .tempo { font: var(--tipo-id); font-variant-numeric: tabular-nums; }
.apoio { font: var(--tipo-apoio); color: var(--texto-2); } .micro { font: var(--tipo-micro); color: var(--texto-3); }
.ic { width: 20px; height: 20px; flex: none; } .ic.p { width: 16px; height: 16px; } .ic.g { width: 24px; height: 24px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }

/* ───────────── 3. COMPONENTES-BASE ───────────── */

/* botão: 44px de altura (padrão), .p = 36px com área de toque de 44 */
.botao { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2); height: 44px; padding: 0 var(--e-4);
  border: 0; border-radius: var(--raio-2); background: var(--sup-3); color: var(--texto); font: var(--tipo-apoio); font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background var(--dur-toque) var(--curva-padrao), transform var(--dur-toque) var(--curva-padrao); }
.botao:hover { background: color-mix(in srgb, var(--texto) 12%, var(--sup-3)); }
.botao:active { transform: scale(.97); }
.botao.forte { background: var(--acao); color: var(--acao-tinta); }             /* primário: 1 por tela */
.botao.forte:hover { background: var(--acao-realce); }
.botao.leve { background: none; color: var(--texto-2); }                         /* fantasma */
.botao.leve:hover { background: var(--sup-2); color: var(--texto); }
.botao.p { height: 36px; padding: 0 var(--e-3); }
.botao.p::after { content: ""; position: absolute; inset: -4px 0; }               /* 36 visível, 44 tocável */
.botao.icone { width: 44px; padding: 0; } .botao.icone.p { width: 36px; }         /* sempre com aria-label */
.botao.icone.p::after { inset: -4px; }
.botao:disabled, .botao[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
/* ok / mudar: alternam (aria-pressed), ícone + palavra, nunca só cor */
.botao.ok[aria-pressed="true"] { background: var(--ok); color: var(--ok-tinta); }
.botao.mudar[aria-pressed="true"] { background: var(--mudar); color: var(--mudar-tinta); }

/* chip / etiqueta: 24px, não clicável. Clicável vira .botao.p */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 var(--e-2); border-radius: var(--raio-1);
  background: var(--sup-2); color: var(--texto-2); font: var(--tipo-micro); white-space: nowrap; }
.chip .ic { width: 14px; height: 14px; }
/* tom por atributo: as classes .aviso (toast) e .info (botão) já existem e colidiriam */
.chip.id { font: var(--tipo-id); }
.chip[data-tom="ok"] { background: var(--ok-fundo); color: var(--ok); }
.chip[data-tom="mudar"] { background: var(--mudar-fundo); color: var(--mudar); }
.chip[data-tom="aviso"] { background: var(--aviso-fundo); color: var(--aviso); }
.chip[data-tom="info"] { background: var(--info-fundo); color: var(--info); }
.chip.falta { background: none; box-shadow: inset 0 0 0 1px var(--linha); color: var(--texto-3); } /* etapa que ainda não existe (hoje: opacity .5 = 2.43:1) */
.chip.beat { background: var(--beat, var(--beat-sem)); color: var(--beat-tinta); }                 /* style="--beat: var(--beat-hook)" */
.engine { display: inline-flex; align-items: center; gap: 6px; font: var(--tipo-micro); color: var(--eng, var(--texto-2)); }
.engine::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.engine.microdrama { --eng: var(--eng-microdrama); } .engine.webtoon { --eng: var(--eng-webtoon); } .engine.ideia { --eng: var(--eng-ideia); }

/* bolha de contagem (pedidos abertos) e ponto de "novo" */
.bolha { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--raio-pilula);
  background: var(--marca); color: var(--marca-tinta); font: 700 12px/20px var(--fonte-texto); font-variant-numeric: tabular-nums; }
.bolha.calma { background: var(--sup-3); color: var(--texto-2); }
.novo { width: 8px; height: 8px; border-radius: 50%; background: var(--marca); }

/* card de trabalho: a capa é o card. Sem borda, sem caixa. */
.trabalhos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-5) var(--e-3); }
@media (min-width: 700px) { .trabalhos { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--e-6) var(--e-4); } }
.trab { display: grid; gap: var(--e-2); align-content: start; text-decoration: none; }
.trab .capa { position: relative; aspect-ratio: var(--capa, 3 / 4); border-radius: var(--raio-3); overflow: hidden; background: var(--sup-2); }
.trab.microdrama .capa { --capa: 9 / 16; }
.trab .capa img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-entra) var(--curva-entra); }
.trab:hover .capa img { transform: scale(1.03); } .trab:active .capa { transform: scale(.98); transition: transform var(--dur-toque); }
.trab .capa .bolha { position: absolute; top: var(--e-2); right: var(--e-2); box-shadow: 0 0 0 2px var(--palco); }
.trab h3 { font: var(--tipo-sub); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.trab .estado { font: var(--tipo-micro); color: var(--texto-2); }   /* "Ep. 1 · vídeo v3" */
.trab .meta { font: var(--tipo-micro); font-weight: 400; color: var(--texto-3); } /* "há 12 h · wilson" */

/* palco: onde vídeo e imagem aparecem, sempre preto */
.palco { background: var(--palco); color: var(--palco-texto); border-radius: var(--raio-3); overflow: hidden; }

/* abas: controle segmentado, 44px no total */
.abas { display: flex; gap: var(--e-1); padding: var(--e-1); background: var(--sup-1); border-radius: calc(var(--raio-2) + var(--e-1)); }
.aba { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 var(--e-3); border-radius: var(--raio-2);
  color: var(--texto-2); font: var(--tipo-apoio); font-weight: 600; text-decoration: none; white-space: nowrap; transition: background var(--dur-toque), color var(--dur-toque); }
.aba:hover { color: var(--texto); }
.aba[aria-current="page"] { background: var(--sup-3); color: var(--texto); box-shadow: var(--sombra-1); }
.aba .ic { width: 18px; height: 18px; } @media (max-width: 419px) { .aba .ic { display: none; } }

/* campo de texto: 16px (abaixo disso o iPhone dá zoom no foco) */
.campo { width: 100%; min-height: 44px; padding: 10px var(--e-3); border: 1px solid var(--borda); border-radius: var(--raio-2); background: var(--sup-1); color: var(--texto); font: var(--tipo-texto); resize: none;
  transition: border-color var(--dur-toque), box-shadow var(--dur-toque); }
.campo::placeholder { color: var(--texto-3); }
.campo:focus { outline: none; border-color: var(--marca); box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 30%, transparent); }
.campo[aria-invalid="true"] { border-color: var(--mudar); }
.campo-erro { display: flex; gap: 6px; align-items: center; margin-top: var(--e-1); font: var(--tipo-micro); color: var(--mudar); }

/* avatar: inicial colorida por pessoa; IA é neutra com ícone */
.av { position: relative; display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: var(--pessoa, var(--sup-3)); color: var(--pessoa-tinta); font: 700 14px/1 var(--fonte-texto); text-transform: uppercase; }
.av.p { width: 24px; height: 24px; font-size: 12px; }
.av.ia { background: var(--sup-3); color: var(--texto-2); } .av.ia .ic { width: 16px; height: 16px; }
.av[data-voto]::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--sup-1); }
.av[data-voto="ok"]::after { background: var(--ok); } .av[data-voto="mudar"]::after { background: var(--mudar); }

/* toast */
.aviso { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + var(--e-4)); translate: -50% 0; z-index: var(--z-toast);
  display: flex; align-items: center; gap: var(--e-2); max-width: min(360px, calc(100% - 32px)); padding: var(--e-3) var(--e-4); border-radius: var(--raio-3);
  background: var(--inverso); color: var(--inverso-tinta); font: var(--tipo-apoio); font-weight: 600; box-shadow: var(--sombra-2);
  animation: sobe var(--dur-entra) var(--curva-entra); }
.aviso a, .aviso button { color: var(--marca-inversa); background: none; border: 0; padding: 0; font-weight: 700; }
@keyframes sobe { from { opacity: 0; transform: translateY(8px); } }

/* popover de info */
.info { position: relative; display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--texto-3); vertical-align: middle; }
.info::after { content: ""; position: absolute; inset: -8px; }                      /* 44 tocável */
.info:hover, .info[aria-expanded="true"] { color: var(--texto); background: var(--sup-2); }
.info .ic { width: 16px; height: 16px; }
.popover { position: fixed; z-index: var(--z-popover); max-width: min(320px, calc(100vw - 32px)); padding: var(--e-3) var(--e-4); border-radius: var(--raio-3);
  background: var(--inverso); color: var(--inverso-tinta); font: var(--tipo-apoio); box-shadow: var(--sombra-2); animation: sobe var(--dur-entra) var(--curva-entra); }
.popover b { font-weight: 700; } .popover a { color: var(--marca-inversa); }

/* folha (celular) / modal (desktop) */
.modal { position: fixed; inset: 0; z-index: var(--z-folha); display: grid; place-items: end center; background: var(--veu); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: some var(--dur-entra); }
.modal .caixa { width: min(640px, 100%); max-height: 88dvh; overflow: auto; background: var(--sup-1); border-radius: var(--raio-4) var(--raio-4) 0 0; box-shadow: var(--sombra-3);
  padding: var(--e-5) var(--calha) calc(env(safe-area-inset-bottom, 0px) + var(--e-5)); animation: folha var(--dur-folha) var(--curva-entra); }
.modal .caixa::before { content: ""; display: block; width: 36px; height: 4px; margin: -12px auto var(--e-3); border-radius: 2px; background: var(--sup-3); } /* puxador */
@media (min-width: 700px) { .modal { place-items: center; } .modal .caixa { border-radius: var(--raio-4); padding: var(--e-6); } .modal .caixa::before { display: none; } }
@keyframes folha { from { transform: translateY(24px); opacity: 0; } } @keyframes some { from { opacity: 0; } }

/* estado vazio */
.vazio { display: grid; justify-items: center; gap: var(--e-3); padding: var(--e-7) var(--calha); text-align: center; }
.vazio .selo { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; color: var(--texto-3);
  background: radial-gradient(var(--sup-3) 1px, transparent 1.5px) 0 0 / 6px 6px, var(--sup-1); }   /* retícula de mangá */
.vazio .selo .ic { width: 28px; height: 28px; }
.vazio h3 { font: var(--tipo-sub); } .vazio p { margin: 0; max-width: 36ch; font: var(--tipo-apoio); color: var(--texto-2); }

/* skeleton */
.osso { border-radius: var(--raio-1); background: linear-gradient(90deg, var(--sup-1) 25%, var(--sup-2) 50%, var(--sup-1) 75%) 0 0 / 200% 100%; animation: brilho 1.2s linear infinite; }
.osso.capa { aspect-ratio: var(--capa, 3 / 4); border-radius: var(--raio-3); } .osso.linha { height: 12px; } .osso.linha.curta { width: 60%; }
@keyframes brilho { to { background-position: -200% 0; } }

/* marca */
.marca { display: inline-flex; align-items: center; gap: var(--e-2); color: var(--texto); text-decoration: none; font: 800 condensed 20px/1 var(--fonte-titulo); letter-spacing: -.01em; }
.marca svg { width: 28px; height: 28px; flex: none; }
.marca .selo { fill: var(--acao); } .marca .traco { stroke: var(--acao-tinta); } .marca .lapis { stroke: var(--marca-inversa); }

/* ───────────── 4. COMPLEMENTOS ───────────── */
html { scroll-padding-top: calc(var(--topo) + var(--e-4)); }
@media (max-width: 859px) { :root { --topo: 48px; } .so-desktop { display: none !important; } }
@media (min-width: 860px) { .so-celular { display: none !important; } }
.pular { position: fixed; left: var(--e-2); top: -60px; z-index: 99; padding: var(--e-2) var(--e-3); border-radius: var(--raio-2); background: var(--acao); color: var(--acao-tinta); font: var(--tipo-apoio); font-weight: 600; }
.pular:focus { top: var(--e-2); }
.chip[data-tom="pedido"] { background: var(--pedido-fundo); color: var(--pedido); }
.chip[data-tom="alerta"] { background: var(--alerta-fundo); color: var(--alerta); }
button.chip { border: 0; cursor: pointer; position: relative; } button.chip::after { content: ""; position: absolute; inset: -10px -4px; }
.av[data-voto="pedido"]::after { background: var(--pedido); }
.bolha.pedido-n { background: var(--pedido); color: var(--pedido-tinta); }
.botao.perigo { color: var(--alerta); }
.botao.enviando { pointer-events: none; opacity: .7; }
.botao.enviando .ic { animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.botao.ok[aria-pressed="true"] .ic { animation: confirma var(--dur-entra) var(--curva-entra); }
@keyframes confirma { from { transform: scale(.4); opacity: 0; } }
.aviso.saindo { opacity: 0; transition: opacity var(--dur-sai) var(--curva-sai); }
.aviso.erro .ic { color: var(--alerta-fundo); } .aviso .ic { flex: none; }
.aviso span { font-weight: 500; }
.modal.saindo { opacity: 0; transition: opacity var(--dur-folha-sai) var(--curva-sai); }
.modal.saindo .caixa { transform: translateY(24px); transition: transform var(--dur-folha-sai) var(--curva-sai); }
.sec { display: flex; align-items: baseline; gap: var(--e-3); margin: var(--e-6) 0 var(--e-3); }
.sec h2 { font: var(--tipo-sub); } .sec .micro { margin-left: auto; }
.marca .selo-traco { stroke: var(--acao); }
.aviso { max-width: min(520px, calc(100% - 32px)); } .aviso button { flex: none; min-height: 32px; cursor: pointer; }