/* index01 — o estilo do portal (21/09/2026).
 *
 * A CASA E A DO FINANCE (pedido dele: "escuro · Finance · responsivo em todas as
 * resolucoes"). Mesmo preto puro, mesmo zinco, mesma barra lateral no desktop e
 * gaveta no celular, Inter no texto e JetBrains Mono em todo numero. O index01 e
 * irmao do Finance, nao primo: quem abre um sabe andar no outro.
 *
 * O que e so do index01:
 *   1. PRECISA DE VOCE PRIMEIRO. A unica cor alta da tela e o que pede a mao dele
 *      (ambar) ou o que quebrou (vermelho). Todo o resto e zinco.
 *   2. A FALA E A PROTAGONISTA. O que ele disse e o maior texto de qualquer card;
 *      o que a maquina fez vem embaixo, menor.
 *   3. COR QUER DIZER ESTADO, NUNCA ENFEITE. Verde = entrou / deu certo. Ambar =
 *      espera voce. Vermelho = quebrou. Azul = andando. Dinheiro e BRANCO, em mono:
 *      o R$ 1.063,00 errado do #141 nao pode ter a mesma cor de "deu certo".
 *   4. DINHEIRO, DATA E CONTAGEM EM MONO TABULAR — coluna de dinheiro alinha.
 *
 * Fontes hospedadas AQUI (public/fontes, OFL): nada de Google Fonts numa pagina
 * que poe dinheiro na fatura. Sem framework, sem build: e este arquivo e so.
 */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(/fontes/inter-latin.woff2) format("woff2");
  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; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(/fontes/inter-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/fontes/jetbrains-mono-latin.woff2) format("woff2");
  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; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/fontes/jetbrains-mono-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---- tokens (os do Finance, modo escuro) ---------------------------------- */
:root {
  color-scheme: dark;
  --fundo:   #000000;   /* background */
  --carta:   #09090b;   /* card */
  --poco:    #050506;   /* caixa DENTRO de um card */
  --borda:   #27272a;   /* border / muted */
  --borda-2: #1c1c1f;   /* divisoria fina dentro de caixa */
  --realce:  #18181b;   /* hover */
  --ativo:   #27272a;   /* item ativo do menu */
  --texto:   #f2f4f5;   /* foreground */
  --texto-2: #d4d4d8;   /* texto de apoio */
  --fraco:   #a1a1aa;   /* muted-foreground */
  --apagado: #71717a;   /* rotulo, legenda */
  --sucesso: #10b981;
  --alerta:  #f59e0b;
  --erro:    #ef4444;
  --info:    #3b82f6;
  --ouvido:  #5eead4;   /* a AssemblyAI: o outro OUVIDO, nao mais um leitor */

  --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --lateral: 240px;
  --gutter: 16px;
}
@media (min-width: 640px) { :root { --gutter: 24px; } }

/* ---- base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 15px/1.55 var(--sans);
       -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
       -webkit-tap-highlight-color: transparent; }
@supports (padding: env(safe-area-inset-left)) {
  body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
}
a { color: inherit; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--texto); outline-offset: 2px; border-radius: 4px; }
::selection { background: #3f3f46; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #3f3f46; border-radius: 9999px; }
svg.ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75;
         stroke-linecap: round; stroke-linejoin: round; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.rotulo { font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--apagado); }
[hidden] { display: none !important; }   /* o form do "outro valor" vivia aberto por causa disto (21/09) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---- a casca: barra lateral + area ------------------------------------------ */
.casca { display: flex; min-height: 100dvh; }
.lateral { position: fixed; inset: 0 auto 0 0; z-index: 40; width: 256px; display: flex; flex-direction: column;
           background: var(--fundo); border-right: 1px solid var(--borda);
           transform: translateX(-100%); transition: transform .2s ease; visibility: hidden; }
.menu-aberto .lateral { transform: none; visibility: visible; }
.veu { position: fixed; inset: 0; z-index: 35; background: rgba(0,0,0,.6); display: none; }
.menu-aberto .veu { display: block; }
.menu-aberto { overflow: hidden; }
.lateral .fecha { position: absolute; top: 18px; right: 12px; }

.marca { display: block; padding: 22px 20px 18px; text-decoration: none; }
.marca .nome { display: block; font-weight: 300; font-size: 21px; letter-spacing: .34em; color: var(--texto);
               line-height: 1; white-space: nowrap; }
.marca .de { display: block; margin-top: 7px; font-size: 8.5px; letter-spacing: .42em; color: var(--apagado);
             text-transform: uppercase; white-space: nowrap; }

.nav { flex: 1; overflow-y: auto; padding: 8px 12px 16px; display: flex; flex-direction: column; gap: 22px; }
.nav .rotulo { padding: 0 12px; margin: 0 0 8px; color: var(--apagado); }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.item { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: var(--r-md);
        font-size: 14px; color: var(--fraco); text-decoration: none; transition: background .12s, color .12s; }
.item:hover { background: var(--realce); color: #f4f4f5; }
.item[aria-current="page"] { background: var(--ativo); color: #fafafa; font-weight: 500; }
.item .qtd { margin-left: auto; font: 500 11.5px/1 var(--mono); color: var(--apagado); font-variant-numeric: tabular-nums; }
.item .qtd.alerta { color: #111; background: var(--alerta); border-radius: 999px; padding: 3px 7px; font-weight: 700; }
.item .qtd.erro   { color: #fff; background: var(--erro);   border-radius: 999px; padding: 3px 7px; font-weight: 700; }
.lateral .pe { border-top: 1px solid var(--borda); padding: 12px 16px; font-size: 12px; color: var(--apagado);
               display: flex; align-items: center; justify-content: center; gap: 7px; }

.area { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* ---- o topo ---------------------------------------------------------------- */
.topo { position: sticky; top: 0; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
        padding: 12px var(--gutter); padding-top: max(12px, env(safe-area-inset-top));
        background: rgba(0,0,0,.82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
        border-bottom: 1px solid var(--borda); }
.topo .titulo { flex: 1; min-width: 0; margin: 0; display: flex; align-items: baseline; gap: 10px; }
.topo h1 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap;
           overflow: hidden; text-overflow: ellipsis; }
.topo .sub { font-size: 12.5px; color: var(--apagado); white-space: nowrap; }
.icone-bt { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; flex: none;
            border: 1px solid var(--borda); border-radius: var(--r-md); background: transparent;
            color: var(--fraco); text-decoration: none; transition: background .12s, color .12s; }
.icone-bt:hover { background: var(--borda); color: var(--texto); }
.icone-bt svg.ic { width: 17px; height: 17px; }

.busca { order: 10; flex: 1 1 100%; position: relative; margin: 2px 0 0; }
.busca svg.ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--apagado);
                pointer-events: none; }
.busca input { width: 100%; height: 40px; padding: 0 12px 0 38px; border-radius: var(--r-md);
               border: 1px solid var(--borda); background: var(--carta); color: var(--texto); font-size: 14px; }
.busca input::placeholder { color: var(--apagado); }
.busca input:focus { outline: none; border-color: #52525b; }

.conteudo { width: 100%; max-width: 1152px; margin: 0 auto; flex: 1;
            padding: 20px var(--gutter) max(32px, env(safe-area-inset-bottom)); }

@media (min-width: 640px) {
  .busca { order: 0; flex: 0 1 380px; margin: 0; }
  .conteudo { padding-top: 28px; }
}
@media (min-width: 1024px) {
  .lateral { position: sticky; top: 0; height: 100dvh; width: var(--lateral); flex: none;
             transform: none; visibility: visible; transition: none; }
  .veu, .so-gaveta { display: none !important; }
  .menu-aberto { overflow: visible; }
}
@media (min-width: 1536px) { .conteudo { max-width: 1280px; } }

/* ---- chamadas: o que precisa dele, o que quebrou, o que so informa ---------- */
.alarme, .aviso, .chamada { border-radius: var(--r-lg); margin: 0 0 14px; }
.alarme { border: 1px solid rgba(239,68,68,.45); background: rgba(239,68,68,.08); color: #fecaca;
          padding: 14px 16px; font-size: 14px; animation: pulsa 2.4s ease-in-out infinite; }
.alarme b { color: #fca5a5; }
.alarme > b:first-child { display: block; margin-bottom: 4px; font-size: 15px; color: #fff; }
.alarme .det { color: #d4a5a5; font-size: 13px; margin-top: 6px; }
.alarme code, .aviso code { font: 12px var(--mono); background: rgba(0,0,0,.45); padding: 1px 6px; border-radius: 5px; }
@keyframes pulsa { 0%, 100% { border-color: rgba(239,68,68,.45); } 50% { border-color: rgba(239,68,68,.95); } }

.aviso { border: 1px solid var(--borda); background: var(--carta); color: var(--texto-2);
         padding: 12px 14px; font-size: 13.5px; }
.aviso b { color: var(--texto); }
.aviso a { color: var(--texto); text-underline-offset: 3px; }

.chamada { display: flex; align-items: center; gap: 14px; padding: 14px 16px; text-decoration: none;
           border: 1px solid var(--borda); background: var(--carta); }
.chamada .circ { width: 40px; height: 40px; border-radius: var(--r-md); display: flex; align-items: center;
                 justify-content: center; flex: none; }
.chamada .circ svg.ic { width: 19px; height: 19px; }
.chamada .txt { flex: 1; min-width: 0; }
.chamada .txt b { display: block; font-size: 15px; font-weight: 600; color: var(--texto); }
.chamada .txt small { display: block; font-size: 13px; color: var(--fraco); margin-top: 1px; }
.chamada .ir { flex: none; font-size: 13.5px; font-weight: 600; padding: 8px 14px; border-radius: var(--r-md); }
.chamada.alerta { border-color: rgba(245,158,11,.45); background: rgba(245,158,11,.07); }
.chamada.alerta .circ { background: rgba(245,158,11,.14); color: var(--alerta); }
.chamada.alerta .ir { background: var(--alerta); color: #111; }
.chamada.erro { border-color: rgba(239,68,68,.45); background: rgba(239,68,68,.07); }
.chamada.erro .circ { background: rgba(239,68,68,.14); color: var(--erro); }
.chamada.erro .ir { background: var(--erro); color: #fff; }
.chamada.quieta { padding: 12px 16px; }
.chamada.quieta .txt b { font-size: 14px; font-weight: 500; }
.chamada.quieta .circ { width: auto; height: auto; }
a.chamada:hover { filter: brightness(1.12); }
@media (max-width: 479px) {
  .chamada { flex-wrap: wrap; }
  .chamada .ir { width: 100%; text-align: center; }
}

.bola { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--sucesso); flex: none;
        box-shadow: 0 0 0 3px rgba(16,185,129,.16); }
.bola.ruim { background: var(--erro); box-shadow: 0 0 0 3px rgba(239,68,68,.18); }

/* ---- o painel -------------------------------------------------------------- */
/* O resumo e a faixa ENTRADAS / SAIDAS / SOBRA do Finance: uma caixa, celulas
   separadas por fio — nao vinte e dois quadradinhos do mesmo peso. */
.resumo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--borda);
          border: 1px solid var(--borda); border-radius: var(--r-lg); overflow: hidden; margin: 0 0 28px; }
.resumo .cel { background: var(--carta); padding: 14px 16px; text-decoration: none; display: flex; flex-direction: column;
               gap: 4px; min-width: 0; transition: background .12s; }
.resumo .cel:hover { background: var(--realce); }
.resumo .cel.grande { grid-column: 1 / -1; }
.resumo .n { font-size: 20px; font-weight: 600; color: var(--texto); line-height: 1.2; white-space: nowrap;
             overflow: hidden; text-overflow: ellipsis; }
.resumo .cel.grande .n { font-size: 26px; }
.resumo small { font-size: 12.5px; color: var(--fraco); }
@media (max-width: 379px) { .resumo .cel { padding: 12px; } .resumo .rotulo { letter-spacing: .04em; } }
@media (min-width: 900px) {
  .resumo { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
  .resumo .cel.grande { grid-column: auto; }
}

.painel-grade { display: grid; gap: 28px; }
@media (min-width: 1100px) { .painel-grade { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } }

.cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
.cab h2 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.005em; }
.cab h2 small { font-weight: 400; color: var(--apagado); font-size: 13.5px; margin-left: 4px; }
.cab a { font-size: 13px; color: var(--fraco); text-decoration: none; }
.cab a:hover { color: var(--texto); }

/* Lista em LINHAS, como "Acontece neste mes" do Finance. */
.linhas { border: 1px solid var(--borda); border-radius: var(--r-lg); background: var(--carta); overflow: hidden; }
.linha-fala { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 2px 14px; align-items: center;
              padding: 12px 16px; text-decoration: none; border-top: 1px solid var(--borda-2); }
.linha-fala:first-child { border-top: 0; }
.linha-fala:hover { background: var(--realce); }
.linha-fala .quando { font-size: 12px; color: var(--apagado); }
.linha-fala .t { display: block; font-size: 14.5px; color: var(--texto); white-space: nowrap; overflow: hidden;
                 text-overflow: ellipsis; }
.linha-fala .onde { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--apagado);
                    margin-top: 2px; white-space: nowrap; overflow: hidden; }
.linha-fala .onde svg.ic { width: 13px; height: 13px; }
.linha-fala .corpo { min-width: 0; }
.linha-fala .st.alerta { color: var(--alerta); font-weight: 500; }
.linha-fala .st.erro   { color: #f87171; font-weight: 500; }
.linha-fala .st.info   { color: #93c5fd; }
.linha-fala .valor { font-size: 14px; font-weight: 600; color: var(--texto); white-space: nowrap; }
@media (min-width: 480px) { .linha-fala { grid-template-columns: 92px minmax(0, 1fr) auto; } }
@media (max-width: 479px) {
  .linha-fala { grid-template-columns: minmax(0, 1fr) auto; padding: 12px 14px; }
  .linha-fala .quando { grid-column: 1 / -1; order: -1; }
}

.lado { display: grid; gap: 28px; align-content: start; }
.caixa { border: 1px solid var(--borda); border-radius: var(--r-lg); background: var(--carta); padding: 6px 16px; }
.par { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 0;
       border-top: 1px solid var(--borda-2); font-size: 13.5px; color: var(--fraco); text-decoration: none; }
.par:first-child { border-top: 0; }
.par .num { color: var(--texto); font-size: 13.5px; font-weight: 500; }
.par .num.zero { color: var(--apagado); font-weight: 400; }
.par .num.alerta { color: var(--alerta); } .par .num.erro { color: var(--erro); }
a.par:hover .num, a.par:hover { color: var(--texto); }

/* As barras dos leitores: a regua do "Situacao atual" do Finance. */
.barras { border: 1px solid var(--borda); border-radius: var(--r-lg); background: var(--carta); padding: 12px 16px; }
.barra-l { display: grid; grid-template-columns: minmax(0, 1fr) 36px; gap: 4px 12px; align-items: center; padding: 5px 0; }
.barra-l .rot { font-size: 13px; color: var(--texto-2); grid-column: 1 / -1; }
.barra-l .trilho { height: 6px; border-radius: 999px; background: var(--borda); overflow: hidden; }
.barra-l .trilho i { display: block; height: 100%; border-radius: 999px; background: var(--apagado); min-width: 3px; }
.barra-l.acordo .trilho i { background: var(--sucesso); }
.barra-l .num { font-size: 12.5px; color: var(--texto); text-align: right; }
.barras .nota { font-size: 12px; color: var(--apagado); margin: 8px 0 2px; }

.pulso { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 28px 0 0;
         font-size: 12px; color: var(--apagado); }

.vazio { text-align: center; color: var(--apagado); padding: 64px 16px; line-height: 1.9;
         border: 1px dashed var(--borda); border-radius: var(--r-lg); }

/* ---- as secoes: lista de cards + o resumo ao lado --------------------------- */
.feed-grade { display: flex; flex-direction: column; gap: 20px; }
.feed { min-width: 0; }
.trilho-lado .caixa + .caixa, .trilho-lado .caixa + .dica { margin-top: 12px; }
.dica { font-size: 12.5px; color: var(--apagado); line-height: 1.55; padding: 0 2px; }
@media (min-width: 1280px) {
  .feed-grade { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
  .trilho-lado { position: sticky; top: 88px; }
}
@media (max-width: 1279px) { .trilho-lado { order: -1; } .trilho-lado.leve { display: none; } }

/* ---- o card de uma fala ----------------------------------------------------- */
.card { background: var(--carta); border: 1px solid var(--borda); border-radius: var(--r-lg);
        padding: 14px 14px 10px; margin: 0 0 14px; scroll-margin-top: 90px; }
@media (min-width: 640px) { .card { padding: 18px 20px 12px; } }
.card.fav { border-color: #3f3f46; box-shadow: inset 2px 0 0 var(--alerta); }
.card.dup { opacity: .6; }
.card:target { border-color: #52525b; }

.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 12px;
        font-size: 12px; color: var(--apagado); }
.meta .quando { font-family: var(--mono); font-size: 12px; margin-right: 2px; }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px;
       border: 1px solid var(--borda); color: var(--fraco); font-size: 12px; font-weight: 500; line-height: 1.5;
       white-space: nowrap; }
.tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--apagado); flex: none; }
.tag.t-gatilho::before, .tag.t-leitor::before { display: none; }
.tag.t-gatilho { color: var(--texto-2); }
.tag.t-roteado { display: none; }   /* "roteado" e estado interno: o chip do envio ja conta a historia */
.t-pronto::before, .e-ok::before { background: var(--sucesso); }
.t-novo::before, .t-processando::before, .t-ouvindo::before { background: var(--info); }
.t-erro::before, .e-erro::before { background: var(--erro); }
.e-esp::before, .e-desc::before { background: var(--alerta); }
.e-ok { color: #a7f3d0; border-color: rgba(16,185,129,.35); }
.e-erro, .t-erro { color: #fecaca; border-color: rgba(239,68,68,.4); }
.e-rev { color: #111; background: var(--alerta); border-color: var(--alerta); font-weight: 600; }
.e-rev::before { background: #111; }
.t-leitor { color: var(--fraco); }

/* A fala: o maior texto do card. */
.falei { margin: 0 0 14px; font-size: 17px; line-height: 1.45; font-weight: 500; color: #fafafa;
         white-space: pre-wrap; overflow-wrap: anywhere; }
@media (min-width: 640px) { .falei { font-size: 18px; } }
.sem { color: var(--alerta); font-size: 14px; margin: 0 0 12px; }

/* As duas transcricoes (4i): a do app e a fala que AGIU — grande. A dela, embaixo. */
.transcr { margin: 0 0 14px; }
.transcr .linha { display: block; }
.transcr .linha + .linha { margin-top: 10px; }
.transcr .q { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; letter-spacing: .06em;
              text-transform: uppercase; color: var(--apagado); margin-bottom: 3px; }
.transcr .q.asm { color: color-mix(in srgb, var(--ouvido) 75%, var(--apagado)); }
.transcr .t { display: block; overflow-wrap: anywhere; }
.transcr .linha:first-child .t { font-size: 17px; line-height: 1.45; font-weight: 500; color: #fafafa; }
.transcr .linha + .linha .t { font-size: 14.5px; line-height: 1.5; color: var(--texto-2); }
@media (min-width: 640px) { .transcr .linha:first-child .t { font-size: 18px; } }
.transcr .t mark { background: transparent; color: inherit; border-radius: 2px;
                   box-shadow: inset 0 -2px 0 rgba(245,158,11,.75); padding: 0 1px; }
.transcr .t.vazio { color: var(--apagado); font-style: italic; font-size: 13.5px; }
.transcr .veredito { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 10px;
                     font-size: 12px; color: var(--apagado); }
.transcr .veredito .ok     { color: #6ee7b7; }
.transcr .veredito .difere { color: var(--apagado); }
.transcr .veredito .muda   { color: #fca5a5; font-weight: 600; }
.transcr .veredito .peso   { font-family: var(--mono); font-size: 11.5px; }

/* O que voltou: caixas DENTRO do card, um degrau abaixo da fala. */
.resp, .rota, .revisao, .semvalor { border-radius: var(--r-md); margin: 0 0 10px; }
.resp { background: var(--poco); border: 1px solid var(--borda-2); padding: 12px 14px; font-size: 15px;
        line-height: 1.65; color: var(--texto-2); overflow-wrap: anywhere; max-width: 75ch; }
.resp a { color: #93c5fd; text-underline-offset: 3px; }
.esperando { color: #93c5fd; font-size: 14px; margin: 0 0 10px; }

.rota { background: var(--poco); border: 1px solid var(--borda-2); padding: 12px 14px; font-size: 14px; color: var(--texto-2); }
.rota b { color: var(--texto); }
.rota .det { color: var(--fraco); font-size: 12.5px; margin-top: 6px; overflow-wrap: anywhere; }
.rota .prop { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 10px; padding-top: 10px;
              border-top: 1px solid var(--borda-2); }
.rota .prop .cli { color: var(--texto); font-weight: 600; }
.rota .prop .val { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--texto); font-weight: 600; }
.rota .prop .espaco { flex: 1; }
.rota .prop a { color: var(--texto); font-size: 13px; font-weight: 500; text-decoration: none; display: inline-flex;
                align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--borda); border-radius: var(--r-md); }
.rota .prop a:hover { background: var(--borda); }
.rota .apagada { color: var(--apagado); font-style: italic; font-size: 13px; margin-top: 8px; }
.rota a { color: var(--texto); }

/* O gasto: valor em mono, branco — dinheiro nao e "deu certo". */
.dindin .valor { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.dindin .valor .n { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 24px; font-weight: 600;
                    color: var(--texto); line-height: 1.15; }
.dindin .valor .d { font-size: 15px; font-weight: 500; color: var(--texto); }
.dindin .cartao { font-size: 12.5px; color: var(--fraco); margin-top: 6px; }
.dindin .cartao b { color: var(--texto-2); font-weight: 500; }
.dindin .diverge { margin-top: 10px; padding: 8px 10px; border-radius: var(--r-md); font-size: 12.5px;
                   border: 1px solid rgba(245,158,11,.35); background: rgba(245,158,11,.06); color: #fcd34d; }
.dindin .diverge b { color: #fde68a; }

/* ---- a revisao (4h) — o unico lugar onde ele poe dinheiro com o dedo -------- */
.revisao { border: 1px solid rgba(245,158,11,.45); background: rgba(245,158,11,.05); padding: 14px; }
.revisao .quem-leu { font-size: 13px; color: #fcd34d; margin: 0 0 12px; }
.revisao .escolha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 640px) {   /* com audio: as TRES leituras lado a lado, o "outro" embaixo */
  .revisao .escolha.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .revisao .escolha.tres .opc.asm { grid-column: auto; }
}
@media (max-width: 359px) { .revisao .escolha { grid-template-columns: 1fr; } }
.revisao .opc { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
                min-height: 88px; padding: 12px 10px; text-align: center; border-radius: var(--r-md);
                border: 1px solid var(--borda); background: var(--carta); color: var(--texto);
                transition: border-color .12s, background .12s; }
.revisao .opc:hover:not(:disabled) { border-color: var(--texto); background: var(--realce); }
.revisao .opc .quem { font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--fraco); }
.revisao .opc .n { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: clamp(16px, 4.5vw, 21px);
                   font-weight: 600; color: var(--texto); line-height: 1.2; white-space: nowrap; }
.revisao .opc .d { font-size: 12.5px; color: var(--fraco); overflow-wrap: anywhere; }
.revisao .opc:disabled { cursor: default; opacity: .6; }
.revisao .opc:disabled .n { font-family: var(--sans); font-size: 15px; color: #fca5a5; }
.revisao .opc:disabled .n.espera { color: var(--fraco); }
.revisao .opc.asm { grid-column: 1 / -1; }
.revisao .opc.asm .quem { color: var(--ouvido); }
.revisao .opc.outro { grid-column: 1 / -1; min-height: 0; padding: 10px; border-style: dashed; background: transparent; }
.revisao .opc.outro .n { font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--texto-2); }
.revisao form.manual { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.revisao form.manual input { flex: 1 1 140px; min-width: 0; height: 44px; padding: 0 12px; border-radius: var(--r-md);
                             border: 1px solid var(--borda); background: var(--carta); color: var(--texto); font-size: 16px; }
.revisao form.manual input[name=valor] { font-family: var(--mono); }
.revisao form.manual input:focus { outline: none; border-color: #71717a; }
.revisao form.manual button { flex: 0 0 auto; height: 44px; padding: 0 20px; border: 0; border-radius: var(--r-md);
                              background: var(--texto); color: #000; font-weight: 600; font-size: 14.5px; }
.revisao form.manual button:hover { background: #fff; }
.revisao .msg { min-height: 1em; margin-top: 10px; font-size: 13px; color: #fcd34d; }
.revisao .msg.erro { color: #fca5a5; }

.semvalor { border: 1px solid rgba(239,68,68,.4); background: rgba(239,68,68,.06); padding: 12px 14px;
            font-size: 13.5px; color: #fecaca; }
.semvalor b { color: #fff; }

/* ---- a barra de acoes do card ----------------------------------------------- */
.barra { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.barra .espaco { flex: 1; }
.bt { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; min-width: 32px;
      padding: 0 8px; border: 0; border-radius: var(--r-md); background: transparent; color: var(--apagado);
      font-size: 13px; transition: background .12s, color .12s; }
.bt:hover { background: var(--realce); color: var(--texto); }
.bt.ativa { color: var(--alerta); }
.bt.ativa svg.ic { fill: currentColor; }
.bt.texto { border: 1px solid var(--borda); color: var(--texto-2); padding: 0 12px; }
.bt.texto:hover { background: var(--borda); }
.bt:disabled { opacity: .5; cursor: default; }
.bt.feito { color: var(--sucesso); }

details { margin-top: 6px; }
summary { font-size: 12px; color: var(--apagado); cursor: pointer; padding: 3px 0; width: fit-content; }
summary:hover { color: var(--fraco); }
pre { margin: 6px 0 0; padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--borda-2);
      background: var(--poco); color: var(--fraco); font: 12px/1.55 var(--mono); overflow-x: auto;
      white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---- botoes, campos e mensagens (aparelhos e login) ------------------------- */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px;
         border: 1px solid var(--texto); border-radius: var(--r-md); background: var(--texto); color: #000;
         font-size: 14.5px; font-weight: 600; transition: background .12s, color .12s, border-color .12s; }
.botao:hover:not(:disabled) { background: #fff; }
.botao.contorno, .botao.fraco { background: transparent; color: var(--texto); border-color: var(--borda); }
.botao.contorno:hover:not(:disabled), .botao.fraco:hover:not(:disabled) { background: var(--borda); }
.botao:disabled { opacity: .5; cursor: default; }
.campo { height: 44px; padding: 0 12px; border-radius: var(--r-md); border: 1px solid var(--borda);
         background: var(--carta); color: var(--texto); font-size: 15px; min-width: 0; }
.campo::placeholder { color: var(--apagado); }
.campo:focus { outline: none; border-color: #71717a; }
.form-linha { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.form-linha .campo { flex: 1 1 200px; }
.form-linha .botao { flex: 1 1 auto; }
@media (min-width: 640px) { .form-linha .botao { flex: 0 0 auto; } }
.msg { min-height: 1.2em; margin-top: 10px; font-size: 13px; color: var(--fraco); }
.msg.ok { color: #6ee7b7; } .msg.erro { color: #fca5a5; }

/* ---- aparelhos --------------------------------------------------------------- */
.duas-col { display: grid; gap: 32px; }
@media (min-width: 1100px) { .duas-col { grid-template-columns: 1fr 1fr; align-items: start; } }
.duas-col .dica { margin-top: 12px; max-width: 62ch; }
.aparelho { display: flex; flex-direction: column; gap: 2px; padding: 11px 0; border-top: 1px solid var(--borda-2); }
.aparelho:first-child { border-top: 0; }
.aparelho .nome { font-size: 14.5px; color: var(--texto); font-weight: 500; }
.aparelho .det { font-size: 12.5px; color: var(--apagado); }

/* ---- a porta de entrada (login) ---------------------------------------------- */
.entrada { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.porta { width: 100%; max-width: 340px; text-align: center; }
.porta .marca { padding: 0; margin: 0 0 22px; }
.porta .marca .nome { font-size: 26px; padding-left: .34em; }
.porta .marca .de { padding-left: .42em; margin-top: 9px; font-size: 9px; }
.porta .sub { margin: 0 0 22px; font-size: 14px; color: var(--fraco); }
.porta .campo, .porta .botao { width: 100%; }
.porta .campo { margin-bottom: 10px; text-align: center; }
.porta .dica { margin-top: 18px; text-align: center; }
/* O anel — o objeto de onde tudo isto vem. E o unico movimento do portal fora do alarme. */
.anel { position: relative; width: 64px; height: 64px; margin: 0 auto 26px; border-radius: 50%;
        border: 2px solid var(--texto); animation: anel 2.8s ease-out infinite; }
.anel::after { content: ""; position: absolute; top: -5px; left: 50%; width: 8px; height: 8px; margin-left: -4px;
               border-radius: 50%; background: var(--texto); }
@keyframes anel { 0% { box-shadow: 0 0 0 0 rgba(242,244,245,.28); } 70% { box-shadow: 0 0 0 20px rgba(242,244,245,0); }
                  100% { box-shadow: 0 0 0 0 rgba(242,244,245,0); } }