/* EasyLaudos — o sistema visual.
 *
 * A referência é um painel de CRM: fundo cinza quente, cartões de canto muito arredondado,
 * painel de vidro fosco, número grande com rótulo pequeno em cinza, e uma pílula de acento
 * marcando o pico do gráfico. O verde-limão da referência é o azul aqui.
 *
 * Toda cor é token. Nenhuma cor literal fora do :root — é isso que faz o tema escuro ser
 * uma troca de bloco e não uma varredura de arquivo.
 *
 * ============================================================================
 * A MARCA
 * ============================================================================
 *
 * `--azul` é o AZUL DA MARCA (#0062FC), medido nos arquivos do logotipo — não um azul
 * escolhido aqui. Os assets em `web/estatico/marca/` são gerados por `marca/gerar.py` e
 * recoloridos para esse mesmo valor: **trocar um sem o outro é a divergência que aquele
 * script existe para impedir.** Leia `marca/LEIA-ME.md` antes de mexer em qualquer um dos
 * dois.
 *
 * O logotipo é PNG e PNG não obedece `currentColor`: são dois arquivos, `logo-claro.png`
 * ("laudos" preto) e `logo-escuro.png` ("laudos" branco), e o CSS esconde o que não é do
 * tema. O errado no tema errado é logotipo branco em fundo branco — invisível, sem erro
 * nenhum na tela. É por isso que o `teste_e2e` confere qual dos dois está visível.
 *
 * ============================================================================
 * O VIDRO — spec, e não "deixa bonito"
 * ============================================================================
 *
 * 1. VIDRO PRECISA DE ALGO ATRÁS. Desfoque sobre fundo liso é um retângulo claro, e foi
 *    assim que o cartão de vidro do painel viveu até aqui. Por isso existe o CAMPO DE LUZ
 *    (`body::before`): três manchas radiais fixas, em token, que não rolam com a página.
 *    É ele que o vidro refrata. Tirar o campo de luz é tirar o vidro.
 *
 * 2. DOIS NÍVEIS, E A LINHA ENTRE ELES É LEGIBILIDADE.
 *      --vidro-forte  (opaco ~.88 claro / ~.80 escuro) → superfície que CARREGA TEXTO:
 *                     cartão, barra lateral, formulário de entrada. Vidro de verdade, mas
 *                     opaco o bastante para o texto medir 4,5:1 em cima dele.
 *      --vidro        (~.62)                            → CROMO que flutua sobre conteúdo:
 *                     diálogo, aviso, o painel do cartão de foto, botão, pílula calma.
 *    Dado tabular NUNCA fica sobre vidro fino. Contraste que oscila com o que passa por
 *    trás não é estilo, é defeito de leitura.
 *
 * 3. A BORDA É O QUE FAZ PARECER VIDRO, não o desfoque. Fio claro em cima
 *    (`box-shadow: inset 0 1px 0 var(--vidro-brilho)`), borda de 1px em `--vidro-borda`, e
 *    sombra em duas camadas para separar do campo de luz. Sem o fio de cima, o mesmo
 *    desfoque lê como "fundo translúcido".
 *
 * 4. O QUE NÃO FAZER
 *      - não empilhar vidro sobre vidro: dois `backdrop-filter` aninhados desfocam o
 *        desfoque e a segunda camada vira leitosa;
 *      - não pôr vidro em `input`, `textarea` nem `code`: campo de digitação precisa de
 *        fundo estável. Eles usam `--poco`, que é afundado e opaco;
 *      - não usar cor literal em rgba() fora do :root;
 *      - não usar `opacity` no elemento para simular vidro — isso apaga o texto junto.
 *
 * 5. QUANDO NÃO HÁ VIDRO. `@supports` sem `backdrop-filter` e
 *    `prefers-reduced-transparency: reduce` levam os tokens a OPACO. Nesses casos a tela
 *    fica igual à de antes desta rodada — o que não pode acontecer é texto sobre uma
 *    superfície translúcida sem desfoque, que é o pior dos dois mundos.
 *
 * 6. ACEITE. `testes/teste_e2e.py` mede o contraste compondo alfa camada por camada até
 *    achar fundo opaco (`K-claro`/`K-escuro`) — medir `rgba(255,255,255,.62)` como se
 *    fosse branco aprovaria qualquer vidro. Mais: `G-*` conferem que o vidro está ligado,
 *    que o campo de luz existe, e que o fallback opaco entra quando o desfoque não existe.
 */

@font-face{
  font-family:'Hanken Grotesk';
  src:url('/estatico/fonte.woff2') format('woff2-variations');
  font-weight:400 800; font-style:normal; font-display:swap;
}

:root{
  /* O véu atrás dos diálogos e a sombra deles. Escuros nos dois temas: o véu escurece o
     que está atrás, qualquer que seja. */
  --veu:rgba(0,0,0,.48);
  --sombra-dialogo:0 24px 70px rgba(0,0,0,.28);
  --branco:#FFFFFF;
  --papel:#F1F1EF;          /* o cinza quente do fundo */
  --papel-2:#E9E9E6;
  --preto:#0B0B0C;
  --grafite:#1B1C1F;
  --grafite-2:#2A2C31;

  /* O AZUL DA MARCA, e não um azul escolhido aqui: #0062FC saiu da medição dos arquivos
     do logotipo — que discordavam entre si (#0052FB no logotipo, #006FFC no ícone,
     #0062FC no terceiro, três gerações do mesmo desenho). Este é a mediana, os assets
     foram todos recoloridos para ele, e é por isso que o token e o PNG batem.

     `--azul-tinta` é o texto SOBRE o azul, e virou BRANCO por medição: preto sobre
     #0062FC dá 4,1:1 e não passa; branco dá 5,1:1. Era preto quando o azul era claro. */
  --azul:#0062FC;
  --azul-forte:#0052D6;
  --azul-lavado:#E7EEFF;
  --azul-tinta:#FFFFFF;

  /* Os dois primeiros são TEXTO e por isso são medidos, não escolhidos: cada um passa de
     4,5:1 contra o pior fundo em que aparece (o papel, não o cartão branco). O #9CA3AF que
     estava aqui dava 2,5:1 — bonito na tela do desenhista e ilegível no sol. */
  --cinza:#5E6470;          /* 5,9:1 no cartão · 5,3:1 no papel */
  --cinza-2:#666D7A;        /* 5,2:1 no cartão · 4,6:1 no papel */
  --cinza-3:#C9CBC7;        /* decoração: trilho vazio, hachura */
  --grafico-barra:#8E918A;  /* barra do gráfico: é DADO, precisa dos 3:1 */
  --linha:#E4E4E1;

  /* 4,69:1 sobre o lavado e 4,87:1 sobre o cartão de vidro. Era #2F8F5B, que dava 3,57:1
     na pílula "ativo" — reprovado. Clarear o fundo não resolvia: o máximo que o lavado
     alcança é 3,88:1, então quem tinha que escurecer era o verde. */
  --ok:#237A4A;  --ok-lavado:#E7F4EC;
  --alerta:#C2410C; --alerta-lavado:#FEEDE3;

  /* A NOITE: a única superfície que NÃO inverte com o tema.
   *
   * Todo o resto deste arquivo é um par que troca de lado no escuro — `--papel` e
   * `--preto` são o mesmo eixo visto dos dois lados. Para o cartão de decisão e o bloco da
   * conta, na vitrine, isso saía errado: eles são pensados como um retângulo escuro que
   * PARA a rolagem, e no tema escuro viravam um retângulo claro e berrante no meio de uma
   * página escura — o contraste continuava medido, e a intenção tinha se invertido junto.
   *
   * Então estes três não são redefinidos lá embaixo, de propósito, e por isso valem nos
   * dois temas. Medidos: a tinta dá 16,9:1 e o cinza 8,2:1 sobre o fundo. */
  --noite:#0E1117; --noite-tinta:#F5F6F8; --noite-cinza:#AEB6C4;
  /* O azul que vale SOBRE a noite. O `--azul` da marca dá 2,7:1 contra esse fundo e
     reprovaria até no limite de texto grande; este dá 8,1:1. Ele não substitui a marca —
     é o mesmo azul clareado para sobreviver ao contraste, e só se usa lá. */
  --noite-azul:#7FB0FF;

  /* --- o vidro. Ver o spec no cabeçalho: dois níveis, e o fio de luz na borda. --- */
  --vidro:rgba(255,255,255,.62);        /* cromo que flutua sobre conteúdo */
  --vidro-forte:rgba(255,255,255,.88);  /* superfície que carrega texto */
  --vidro-borda:rgba(255,255,255,.8);
  --vidro-brilho:rgba(255,255,255,.9);  /* o fio de luz da aresta de cima */
  --vidro-desfoque:blur(26px) saturate(1.5);
  --poco:rgba(11,11,12,.045);           /* campo de digitação: afundado e opaco */
  --poco-linha:rgba(11,11,12,.09);

  /* O campo de luz: o que o vidro refrata. Fixo, não rola com a página. */
  --luz-1:rgba(59,158,255,.20);
  --luz-2:rgba(47,143,91,.13);
  --luz-3:rgba(11,11,12,.05);

  --sombra:0 1px 2px rgba(11,11,12,.04), 0 8px 24px rgba(11,11,12,.05);
  --sombra-2:0 2px 6px rgba(11,11,12,.06), 0 18px 44px rgba(11,11,12,.09);

  /* --barra é LARGURA (px). Cor de barra de gráfico é --grafico-barra: quando as duas
     dividiram o nome, o tema escuro pintou a largura da lateral com uma cor e o fill do
     gráfico virou preto — e o teste de contraste passou, porque preto contrasta ótimo. */
  --r:26px;                 /* raio do cartão */
  --r-2:16px;               /* raio de controle */
  --barra:248px;
  --gap:14px;
}

:root[data-tema="escuro"]{
  --branco:#17181B;
  --papel:#0B0B0C;
  --papel-2:#131417;
  --preto:#F3F3F1;
  --grafite:#EDEDEB;
  --grafite-2:#C9CBC7;

  /* No escuro o azul da marca continua o mesmo — é marca, não decoração. Sobre o cartão
     escuro ele dá 3,3:1 como elemento gráfico (mínimo 3:1), e o branco em cima dele
     continua nos 5,1:1. `--azul-forte` é o que clareia no hover, e aí sim sobe. */
  --azul:#0062FC;
  --azul-forte:#3D8BFF;
  --azul-lavado:#0E1E33;
  --azul-tinta:#FFFFFF;

  --cinza:#A1A9B6;          /* 7,5:1 no cartão */
  --cinza-2:#98A0AC;        /* 6,7:1 no cartão */
  --cinza-3:#3A3D43;
  --grafico-barra:#666B75;  /* 3,3:1 */
  --linha:#26272B;

  --ok:#4FBF85;  --ok-lavado:#12251B;
  --alerta:#F08A50; --alerta-lavado:#2A1710;

  --vidro:rgba(35,37,42,.62);
  --vidro-forte:rgba(29,30,34,.86);
  --vidro-borda:rgba(255,255,255,.10);
  --vidro-brilho:rgba(255,255,255,.14);
  --vidro-desfoque:blur(26px) saturate(1.4);
  --poco:rgba(255,255,255,.045);
  --poco-linha:rgba(255,255,255,.09);

  /* No escuro a luz é mais forte: sem isso o campo desaparece no preto e o vidro volta a
     ser um retângulo. O azul continua sendo o acento, não um segundo fundo. */
  --luz-1:rgba(79,168,255,.20);
  --luz-2:rgba(79,191,133,.11);
  --luz-3:rgba(255,255,255,.05);

  --sombra:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
  --sombra-2:0 2px 6px rgba(0,0,0,.35), 0 18px 44px rgba(0,0,0,.5);
}

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

/* `hidden` tem que ganhar de qualquer regra de componente.
   O `[hidden]` do navegador tem especificidade ZERO — `.cartao{display:flex}` vence, e o
   elemento "escondido" continua na tela. Já custou duas vezes: no caderno de campo o painel
   de recurso vazava pela borda, e aqui o botão "Abrir o laudo" aparecia depois de a geração
   FALHAR, oferecendo um arquivo que não existe. Uma linha, no topo, para toda a folha. */
[hidden]{ display:none !important }
html{ color-scheme:light }
html[data-tema="escuro"]{ color-scheme:dark }

body{
  margin:0; background:var(--papel); color:var(--preto);
  font:400 15px/1.5 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* O CAMPO DE LUZ: o que o vidro refrata.
 *
 * Sem ele, `backdrop-filter` desfoca um fundo liso — e desfoque de fundo liso é um
 * retângulo claro. Foi assim que o único cartão de vidro do painel viveu até agora: o
 * efeito só aparecia porque havia uma logo atrás dele.
 *
 * `position:fixed` e não `absolute`: o campo NÃO rola com a página. Quem rola é o
 * conteúdo, e é por isso que a superfície de vidro muda de tom enquanto se rola — que é
 * exatamente o que faz parecer vidro e não plástico. `z-index:-1` o põe atrás de tudo sem
 * precisar de contexto de empilhamento em cada tela. */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(58% 46% at 12% 8%,   var(--luz-1), transparent 62%),
    radial-gradient(48% 42% at 88% 22%,  var(--luz-2), transparent 60%),
    radial-gradient(70% 60% at 62% 100%, var(--luz-3), transparent 66%);
}
a{ color:inherit; text-decoration:none }
button,input,select,textarea{ font:inherit; color:inherit }
:focus-visible{ outline:2px solid var(--azul); outline-offset:2px; border-radius:6px }
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important } }

/* ---------------------------------------------------------------- estrutura */
.tela{ display:flex; min-height:100vh; min-height:100dvh; gap:0 }

/* A barra flutua: cartão arredondado com folga, não painel colado na borda.
   É o que dá o ar da referência sem mexer na navegação que o profissional já conhece. */
.barra{
  position:fixed; inset:var(--gap) auto var(--gap) var(--gap); width:var(--barra);
  border-radius:var(--r); display:flex; flex-direction:column;
  padding:22px 14px 14px; z-index:20;
  /* vidro forte: carrega texto (nome, e-mail, itens de menu) */
  background:var(--vidro-forte); border:1px solid var(--vidro-borda);
  -webkit-backdrop-filter:var(--vidro-desfoque); backdrop-filter:var(--vidro-desfoque);
  box-shadow:inset 0 1px 0 var(--vidro-brilho), var(--sombra);
}
.marca{ display:flex; align-items:center; gap:10px; padding:0 8px 22px }
/* O ícone é a marca na barra estreita do celular; no computador quem fala é o logotipo.
   `display:none` num e noutro conforme a largura — nunca os dois ao mesmo tempo. */
.marca .simbolo{ width:34px; height:34px; flex:0 0 auto; display:none }
.marca .logo{ display:block; width:132px; height:auto }
.marca span{ font-size:11px; color:var(--cinza-2); letter-spacing:.06em; text-transform:uppercase }

/* A troca de logotipo por tema. PNG não obedece `currentColor`, então são dois arquivos e
   um deles fica fora da tela. A regra vale para a barra e para as telas públicas. */
.logo.escuro{ display:none }
:root[data-tema="escuro"] .logo.claro{ display:none }
:root[data-tema="escuro"] .logo.escuro{ display:block }

.itens{ display:flex; flex-direction:column; gap:2px }
.item{
  display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:var(--r-2);
  color:var(--cinza); font-weight:500; font-size:14.5px; cursor:pointer;
  transition:background .14s, color .14s;
}
.item svg{ width:19px; height:19px; flex:0 0 auto }
.item:hover{ background:var(--poco); color:var(--preto) }
.item.on{ background:var(--preto); color:var(--papel) }
.item .cont{ margin-left:auto; font-size:12px; font-weight:600; color:var(--cinza-2) }
.item.on .cont{ color:var(--papel) }
.item .cont:empty{ display:none }     /* zero documentos não vira pílula vazia */

.rodape-barra{ margin-top:auto; padding:14px 12px 4px; border-top:1px solid var(--linha) }
.quem{ display:flex; align-items:center; gap:10px; min-width:0 }
.quem .av{ width:32px; height:32px; border-radius:50%; background:var(--papel-2);
  display:grid; place-items:center; font-weight:700; font-size:13px; flex:0 0 auto }
.quem .txt{ min-width:0 }
.quem b{ display:block; font-size:13.5px; font-weight:600; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis }
.quem small{ display:block; font-size:11.5px; color:var(--cinza-2) }

.palco{ margin-left:calc(var(--barra) + var(--gap)*2); flex:1; min-width:0;
  padding:var(--gap) var(--gap) 40px 0 }

/* ---------------------------------------------------------------- topo */
/* `relative` por causa do menu de comandos: a paleta do cabeçalho é ancorada AQUI, e sem
   isto ela se pendura no primeiro pai posicionado — que é a tela inteira. */
.topo{ display:flex; align-items:flex-start; gap:16px; padding:14px 10px 22px; flex-wrap:wrap;
  position:relative }
.migalha{ display:flex; gap:14px; font-size:12.5px; color:var(--cinza-2); margin-bottom:6px }
h1{ margin:0; font-size:40px; line-height:1.05; font-weight:600; letter-spacing:-.035em }
.topo .acoes{ margin-left:auto; display:flex; gap:8px; align-items:center; padding-top:8px }

.b{
  display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 16px;
  border:1px solid var(--vidro-borda); border-radius:999px;
  background:var(--vidro); color:var(--preto);
  -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:inset 0 1px 0 var(--vidro-brilho);
  font-size:13.5px; font-weight:500; cursor:pointer; white-space:nowrap;
  transition:background .14s, border-color .14s, transform .1s;
}
.b:hover{ background:var(--vidro-forte) }
.b:active{ transform:translateY(1px) }
/* Botão de ação é OPACO, e por isso não leva vidro: desfocar o que passa atrás de um
   fundo sólido não muda um pixel e, num elemento pequeno de canto redondo, o Chromium
   deixa a amostra do fundo escapar pela curva — um anel escuro em volta do botão. Vidro
   onde há transparência; cor cheia onde a ação é a coisa mais importante da tela. */
.b.pri, .b.acento{ -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none }
.b.pri{ background:var(--preto); color:var(--papel); border-color:var(--preto) }
.b.pri:hover{ background:var(--grafite-2) }
.b.acento{ background:var(--azul); color:var(--azul-tinta); border-color:var(--azul); font-weight:600 }
.b.excluir{ color:var(--perigo); border-color:color-mix(in srgb, var(--perigo) 35%, transparent) }
.b.excluir:hover{ background:var(--alerta-lavado) }
.confirmar-exclusao{ width:min(460px, calc(100% - 32px)); border:1px solid var(--linha);
  border-radius:18px; padding:26px; color:var(--texto); background:var(--vidro-forte);
  box-shadow:var(--sombra-dialogo) }
.confirmar-exclusao::backdrop{ background:var(--veu); backdrop-filter:blur(3px) }
.confirmar-exclusao h2{ margin:0 0 12px; font-size:24px }
.confirmar-exclusao p{ margin:8px 0 }
.confirmar-exclusao form .acoes{ justify-content:flex-end; margin-top:22px }
/* Os textos fixos pedidos na primeira geração do Basic. Mesmo vidro do diálogo de
   exclusão, mais largo: são três caixas de texto, não uma frase. */
.dialogo-textos{ width:min(640px, calc(100% - 32px)); max-height:calc(100% - 32px);
  overflow:auto; border:1px solid var(--linha); border-radius:18px; padding:26px;
  color:var(--texto); background:var(--vidro-forte); box-shadow:var(--sombra-dialogo) }
.dialogo-textos::backdrop{ background:var(--veu); backdrop-filter:blur(3px) }
.dialogo-textos h2{ margin:0 0 8px; font-size:22px }
.dialogo-textos label{ display:block; margin-top:16px }
.dialogo-textos textarea{ width:100% }
.dialogo-textos .acoes{ display:flex; gap:10px; justify-content:flex-end; margin-top:18px }
.b.redondo{ width:38px; padding:0; justify-content:center }
.b svg{ width:16px; height:16px }

/* ---------------------------------------------------------------- cartões */
.grade{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gap); padding:0 10px }
.cartao{
  border-radius:var(--r); padding:22px 24px; min-width:0; position:relative;
  display:flex; flex-direction:column;
  background:var(--vidro-forte); border:1px solid var(--vidro-borda);
  -webkit-backdrop-filter:var(--vidro-desfoque); backdrop-filter:var(--vidro-desfoque);
  /* O fio de luz em cima é o que faz parecer vidro; o desfoque sozinho lê como
     "fundo translúcido". Duas camadas de sombra separam o cartão do campo de luz. */
  box-shadow:inset 0 1px 0 var(--vidro-brilho), var(--sombra);
}
.cartao > header{ display:flex; align-items:center; gap:10px; margin-bottom:18px }
.cartao > header h2{ margin:0; font-size:16px; font-weight:600; letter-spacing:-.015em }
.cartao > header .acoes{ margin-left:auto; display:flex; gap:6px }

.c3{ grid-column:span 3 } .c4{ grid-column:span 4 } .c5{ grid-column:span 5 }
.c6{ grid-column:span 6 } .c7{ grid-column:span 7 } .c8{ grid-column:span 8 }
.c12{ grid-column:span 12 }

.rotulo{ font-size:12px; color:var(--cinza-2); font-weight:500; letter-spacing:.005em }
.numerao{ font-size:46px; font-weight:600; letter-spacing:-.045em; line-height:1.02;
  font-variant-numeric:tabular-nums }
.numerao small{ font-size:.42em; font-weight:500; color:var(--cinza-2); letter-spacing:-.01em }
.sub{ font-size:13px; color:var(--cinza); margin-top:4px }

/* `white-space:nowrap` e `flex:none`: pílula é um selo. Quebrada em duas linhas ("sem /
   miolo") ela deixa de ler como selo e vira texto solto — foi o que aconteceu na lista de
   pendências a 390px, onde o flex a comprimiu até caber na sobra. */
.pilula{ display:inline-flex; align-items:center; gap:5px; min-height:24px; padding:2px 10px;
  border-radius:999px; background:var(--azul); color:var(--azul-tinta); flex:none;
  white-space:nowrap; font-size:12px; font-weight:600; font-variant-numeric:tabular-nums }
.pilula.calma{ background:var(--poco); color:var(--cinza) }
.pilula.boa{ background:var(--ok-lavado); color:var(--ok) }
.pilula.ruim{ background:var(--alerta-lavado); color:var(--alerta) }

/* O vidro fino: cromo que FLUTUA sobre conteúdo. backdrop-filter é nativo — não há
   biblioteca envolvida. Aninhado dentro de um `.cartao`, que já é vidro, o desfoque
   dele desfoca o desfoque de baixo: por isso o cartão que hospeda um `.vidro` desliga o
   seu (`.cartao.foto`, logo abaixo). Vidro sobre vidro fica leitoso. */
.vidro{
  background:var(--vidro); border:1px solid var(--vidro-borda); border-radius:22px;
  -webkit-backdrop-filter:var(--vidro-desfoque); backdrop-filter:var(--vidro-desfoque);
  box-shadow:inset 0 1px 0 var(--vidro-brilho);
  padding:18px 20px;
}
/* `background-color` é `--papel-2` porque é ONDE O GRADIENTE TERMINA: a cor declarada tem
   que ser a cor que realmente fica atrás do vidro, senão a medição de contraste mede uma
   coisa e o olho vê outra. Estava `--grafite`, que o gradiente cobria inteiro — e no tema
   escuro `--grafite` é quase BRANCO. O painel media 4,4:1 no escuro contra um fundo que
   nunca foi pintado. `background-image` separado de `background-color` de propósito: a
   forma abreviada zera a cor, e a medição volta a não ter âncora. */
.cartao.foto{ padding:0; overflow:hidden; min-height:300px;
  background-color:var(--papel-2);
  background-image:radial-gradient(120% 90% at 30% 15%, var(--azul-lavado), var(--papel-2));
  /* vidro sobre vidro: o painel de dentro é o vidro desta tela, então este cartão volta
     a ser superfície opaca. Com os dois ligados, o de dentro sai leitoso. */
  -webkit-backdrop-filter:none; backdrop-filter:none }
/* **O logo vive numa caixa que TERMINA onde o painel começa.** Antes ele era
   `position:absolute; inset:0` — flutuava sobre o cartão inteiro e a única coisa que o
   mantinha visível era um `max-height` em pixel, calibrado à mão para a altura que o painel
   tinha naquele dia. Bastou o painel crescer 45px no celular (uma linha da lista que passou
   a quebrar) para metade do desenho ficar desfocada atrás do vidro. Agora é item de fluxo:
   `flex:1` toma o espaço que sobra, `max-height:100%` encolhe o desenho até caber, e não
   existe número para calibrar. */
.cartao.foto .fundo{ position:relative; flex:1 1 auto; min-height:56px;
  display:grid; place-items:center; padding:9% 10% 3% }
/* Teto em pixel ALÉM do percentual: em cartão de 780px, 34% são 265px de logo de cliente
   — vira outdoor. O percentual cuida do cartão estreito, o pixel cuida do largo. */
.cartao.foto .fundo img{ max-width:min(34%, 190px); max-height:100%; opacity:.95 }
.cartao.foto .vidro{ position:relative; flex:none; margin:16px; border-radius:20px }

.trilho{ height:8px; border-radius:999px; background:var(--poco); overflow:hidden; margin-top:12px }
.trilho > i{ display:block; height:100%; border-radius:999px; background:var(--azul) }
.trilho > i.ruim{ background:var(--alerta) }

.lista{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column }
.lista li{ display:flex; align-items:center; gap:12px; padding:11px 0;
  border-bottom:1px solid var(--linha); font-size:14px }
.lista li:last-child{ border-bottom:0 }
.lista li .dir{ margin-left:auto; color:var(--cinza-2); font-size:12.5px; white-space:nowrap }
/* Tabela: rola dentro do próprio cartão. O corpo da página nunca rola para o lado. */
.tabela{ width:100%; border-collapse:collapse; font-size:14px }
/* **Quem rola é o ENVELOPE, não a tabela.** `display:block` numa <table> a tira do layout
   de tabela: ela passa a se dimensionar pelo conteúdo, e o `width:100%` deixa de valer —
   numa tela larga a última coluna parava no meio do cartão, com um vão à direita. Com o
   `div` por fora, a tabela continua tabela e a rolagem horizontal fica onde precisa
   estar: no celular, onde sete colunas não cabem. */
.rolagem{ overflow-x:auto; max-width:100% }
/* Espaçamento nas DUAS bordas da célula. Com `padding-right:0` numa coluna alinhada à
   direita, o número encosta no começo da coluna seguinte e as duas se leem como uma só. */
.tabela th, .tabela td{ padding:13px 18px; vertical-align:middle }
.tabela th:first-child, .tabela td:first-child{ padding-left:0 }
.tabela th:last-child, .tabela td:last-child{ padding-right:0 }
.tabela th{ text-align:left; font-weight:500; font-size:12px; color:var(--cinza-2);
  padding-top:0; padding-bottom:10px; white-space:nowrap;
  border-bottom:1px solid var(--linha) }
.tabela td{ border-bottom:1px solid var(--linha) }
.tabela tr:last-child td{ border-bottom:0 }
.tabela .num{ text-align:right; color:var(--cinza); font-variant-numeric:tabular-nums;
  white-space:nowrap }
.tabela td .pilula + .pilula{ margin-left:5px }

/* A oficina: o laudo sendo escrito. Rola por dentro e nunca empurra a página. */
.fluxo{ margin:14px 0 0; padding:16px 18px; max-height:420px; overflow:auto;
  background:var(--poco); border:1px solid var(--poco-linha); border-radius:var(--r-2);
  font:12.5px/1.65 ui-monospace,SFMono-Regular,Menlo,monospace;
  white-space:pre-wrap; word-break:break-word; color:var(--cinza) }
.fluxo:empty{ display:none }
#oficina-fim{ margin-top:16px; display:flex; flex-direction:column; gap:12px;
  align-items:flex-start }

.consumo{ display:flex; flex-direction:column; gap:5px; min-width:120px;
  font-variant-numeric:tabular-nums }
.consumo .trilho{ margin-top:0; height:5px }
input.teto{ width:82px; height:32px; padding:0 8px; text-align:right;
  border:1px solid var(--poco-linha); border-radius:10px; background:var(--poco);
  font-variant-numeric:tabular-nums }
.recado.boa{ background:var(--ok-lavado); color:var(--ok) }
.porta.largo form, .porta.largo .cartao{ max-width:560px; width:100%; }
.porta h2{ font-size:17px; margin:28px 0 0 }
.porta label i{ color:var(--cinza-2); font-style:normal }
input[type=file]{ width:100%; padding:11px 12px; border:1px dashed var(--poco-linha);
  border-radius:var(--r-2); background:var(--poco); font-size:13.5px }
.rotulo.centro{ text-align:center; margin-top:18px }
.migalha a{ text-decoration:underline; text-underline-offset:2px }

.endereco{ display:flex; gap:8px; align-items:center; margin:16px 0 0 }
.endereco code{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; background:var(--poco); border:1px solid var(--poco-linha);
  border-radius:var(--r-2); padding:10px 14px; font:13px ui-monospace,Menlo,monospace }

.vazio{ color:var(--cinza-2); font-size:13.5px; padding:18px 0; text-align:center }

/* As três séries de numeração. Tabular-nums porque são números que se comparam de cima a
   baixo: sem isso o 1 é mais estreito que o 8 e a coluna dança. */
.serie{ list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column;
  gap:2px }
.serie li{ display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:9px 12px; border-radius:var(--r-2); background:var(--poco) }
.serie li span{ font-size:12.5px; color:var(--cinza) }
.serie li b{ font-size:19px; font-weight:600; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums }

/* Espaçamento por relação, não por atributo style=.
   A CSP proíbe estilo embutido (style-src 'self'), e essa proibição é o que impede que uma
   injeção de HTML consiga pintar um formulário falso por cima da tela. Vale o incômodo. */
.cartao .numerao{ margin:0 }
.cartao .rotulo + .numerao{ margin-top:2px }
.cartao .numerao + .sub{ margin-top:4px }
.cartao .numerao + [data-grafico],
.cartao .sub + [data-grafico]{ margin-top:16px }
.cartao .vidro .lista{ margin-top:10px }
.cartao .rodape{ margin-top:auto; padding-top:14px }
.topo .acoes form{ margin:0 }

/* ---------------------------------------------------------------- gráficos */
/* Sem `width:100%`: o SVG já é desenhado na largura da caixa (ver `larguraDe` no
   app.js), então esticar de novo é o que escalava o texto do eixo. */
.grafico{ max-width:100%; height:auto; display:block; overflow:visible }
.grafico .barra-f{ fill:var(--grafico-barra) }
.grafico .barra-f.pico{ fill:var(--azul) }
.grafico .eixo{ fill:var(--cinza-2); font-size:11px; font-weight:500 }
.grafico .area-f{ fill:url(#hachura) }
.grafico .linha-f{ fill:none; stroke:var(--preto); stroke-width:1.6; stroke-linejoin:round }
.grafico .ponto{ fill:var(--preto) }
.grafico .hach{ stroke:var(--cinza-3); stroke-width:1 }

/* ---------------------------------------------------------------- entrar */
.porta{ min-height:100dvh; display:grid; place-items:center; padding:24px }
.porta form{ width:100%; max-width:380px; border-radius:var(--r); padding:34px 30px;
  background:var(--vidro-forte); border:1px solid var(--vidro-borda);
  -webkit-backdrop-filter:var(--vidro-desfoque); backdrop-filter:var(--vidro-desfoque);
  box-shadow:inset 0 1px 0 var(--vidro-brilho), var(--sombra-2) }
.porta h1{ font-size:26px; margin:0 0 4px }
/* Na porta de entrada o logotipo É o título: o `<h1>` continua existindo para o leitor de
   tela e para o SEO, e o texto dele vive no `alt` da imagem. */
.porta h1.marca-porta{ margin:0 0 10px; line-height:0 }
.porta h1.marca-porta .logo{ width:196px; height:auto }
.porta p.sub{ margin:0 0 24px }
label{ display:block; font-size:12.5px; color:var(--cinza); font-weight:500; margin:14px 0 6px }
/* Campo de digitação é POÇO, não vidro: fundo afundado e estável. Vidro aqui muda de
   tom com o que passa atrás e o cursor fica difícil de achar. */
input[type=email],input[type=password],input[type=text]{
  width:100%; height:44px; padding:0 14px; border:1px solid var(--poco-linha);
  border-radius:var(--r-2); background:var(--poco); }
input:focus{ outline:2px solid var(--azul); outline-offset:0; border-color:transparent }
.porta .b{ width:100%; height:44px; justify-content:center; margin-top:22px }
.recado{ margin:14px 0 0; padding:11px 14px; border-radius:var(--r-2);
  background:var(--alerta-lavado); color:var(--alerta); font-size:13.5px }

/* ---------------------------------------------------------------- sem vidro */
/* Duas situações em que o vidro sai de cena, e nas duas o caminho é o MESMO: os tokens
   viram opacos. O que não pode existir é superfície translúcida sem desfoque — aí o texto
   fica sobre o que passa atrás, sem nada quebrando o fundo, e é ilegível.
 *
 * 1. O navegador não tem `backdrop-filter`. Fica a tela de antes desta rodada.
 * 2. A pessoa PEDIU menos transparência no sistema operacional. É acessibilidade, não
 *    preferência estética: quem liga isso costuma ter dificuldade real de leitura. */
/* `:root[data-tema]` e não só `:root`: o bloco do tema escuro é `:root[data-tema="escuro"]`
   e ganharia de um `:root` solto por especificidade — o fallback valeria no claro e o
   escuro continuaria translúcido sem desfoque, que é o pior caso possível. Mesma
   especificidade, e este vem depois no arquivo. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root, :root[data-tema]{
    --vidro:var(--branco); --vidro-forte:var(--branco);
    --vidro-borda:var(--linha); --vidro-brilho:transparent;
    --luz-1:transparent; --luz-2:transparent; --luz-3:transparent;
  }
}
@media (prefers-reduced-transparency:reduce){
  :root, :root[data-tema]{
    --vidro:var(--branco); --vidro-forte:var(--branco);
    --vidro-borda:var(--linha); --vidro-brilho:transparent;
    --luz-1:transparent; --luz-2:transparent; --luz-3:transparent;
  }
}

/* ---------------------------------------------------------------- responsivo */
@media (max-width:1100px){
  .c3,.c4,.c5{ grid-column:span 6 } .c7,.c8{ grid-column:span 12 }
}
@media (max-width:820px){
  :root{ --barra:100% }
  /* **A COLUNA.** `.tela` é `display:flex` — no computador isso põe a barra ao LADO do
     conteúdo, que é o que se quer. No celular a barra vira horizontal e tem que ficar
     EM CIMA, e sem esta linha ela continuava sendo um item de linha do mesmo flex: ficava
     ao lado, com a largura do conteúdo dela, e empurrava o palco 318px para fora da tela.
     A página rolava 588px numa tela de 390. Estava assim desde o primeiro commit do design
     system, e nenhuma prova viu porque todas mediam 1440px. */
  .tela{ flex-direction:column }
  .barra{ position:static; width:auto; margin:var(--gap) var(--gap) 0; inset:auto;
    flex-direction:row; align-items:center; padding:12px 14px; gap:10px }
  /* Barra virada na horizontal: cabe o ícone, não o logotipo inteiro. */
  .marca{ padding:0 }  .marca .txt{ display:none }
  .marca .simbolo{ display:block }
  .itens{ flex-direction:row; overflow-x:auto; gap:4px; flex:1 }
  .item{ padding:9px 12px; white-space:nowrap }
  .rodape-barra{ display:none }
  .palco{ margin-left:0; padding:0 var(--gap) 40px }
  .grade{ padding:0 }
  h1{ font-size:30px }
  .c3,.c4,.c5,.c6,.c7,.c8{ grid-column:span 12 }
  /* Dedo não é ponteiro: 38px de botão é confortável no mouse e escorregadio no polegar.
     44px é o mínimo que a Apple e a WCAG (2.5.5) pedem, e vale para o botão redondo — que
     é justamente onde ficam sair e trocar de tema. */
  .b{ height:44px }
  .b.redondo{ width:44px }
  .item{ min-height:44px }
  .topo{ padding:14px 0 18px }
  .topo .acoes{ padding-top:0 }
  /* Na conversa, cinco ações cabem numa linha no celular se a ação secundária virar
     ícone; assim o compositor continua na área visível, sem esconder controles. */
  #cv-novo{ position:relative; width:44px; padding:0; overflow:hidden; justify-content:center;
    font-size:12px }
  #cv-novo span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0) }
  #cv-novo::before{ content:"+"; position:absolute; font-size:24px;
    font-weight:400; line-height:1 }
  /* Campo de digitação também é alvo de toque. E o corpo vai a 16px por um motivo
     específico do iPhone: com fonte menor que 16px o Safari DÁ ZOOM na página ao focar o
     campo, e o formulário sai do lugar embaixo do dedo de quem está digitando. */
  input[type=email], input[type=password], input[type=text], textarea, select,
  .dossie input.campo, input.teto, input[type=file], .campo.nome-vistoria{ min-height:44px;
    font-size:16px }
  .campo.nome-vistoria{ height:auto; width:100% }
  .dossie input.campo, input.teto{ height:auto }
  .textos textarea.campo{ font-size:15px }
  /* Link de tabela e de migalha são navegação, não prosa: precisam de área para o polegar. */
  .tabela a:not(.b){ display:inline-flex; align-items:center; min-height:44px }
  /* Três dados numa linha de 358px viram três colunas de 100px, e o nome do contratante
     quebra no meio. Em duas linhas cada um tem a largura que precisa.
     `:has(.pilula)` limita isso às linhas de TRÊS dados: a linha de dois ("Próximo número
     · 041-2026") continua rótulo à esquerda e valor à direita, que é como ela cabe. Sem o
     `:has`, ela também quebrava — e o painel de vidro crescia 45px, o bastante para cobrir
     o logo do cliente. */
  .lista li{ flex-wrap:wrap; row-gap:4px }
  .lista li:has(.pilula) .dir{ width:100%; margin-left:0; text-align:left }
  /* Sem calibragem em pixel: o logo encolhe sozinho porque a caixa dele é o que sobra. */
  .cartao.foto{ min-height:320px }
  .migalha{ margin-bottom:0 }
  .migalha a, .migalha span{ display:inline-flex; align-items:center; min-height:40px }
}

/* Ícone sem rótulo é ícone que se aprende por tentativa. Ele só fica sozinho quando os
   cinco rótulos não cabem na largura da barra — a partir de 560px eles cabem, e no tablet
   estavam escondidos sem motivo. O `aria-label` no link vale nos dois casos. */
@media (max-width:560px){
  .item span.rot{ display:none }
}

/* ---------------------------------------------------------------- carimbador */
/* A linha de ação embrulha em telas estreitas em vez de empurrar o botão para fora. */
.linha-acao{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:14px 0 0 }
/* O campo de texto que fica NUMA LINHA DE AÇÃO, ao lado dos botões — hoje é o nome da
   vistoria. Ele cresce com a linha e não some no celular, onde vira a linha inteira. */
.campo.nome-vistoria{ flex:1; min-width:240px; height:38px; padding:0 14px; font-size:14px;
  border:1px solid var(--poco-linha); border-radius:999px; background:var(--poco) }
.b.arquivo{ cursor:pointer }            /* label vestida de botão: o input fica escondido */
.b[disabled]{ opacity:.45; cursor:not-allowed }
.b[disabled]:hover{ background:var(--preto) }
/* Grade que se ajusta sozinha: em tela larga são quatro colunas, no notebook duas, e no
   celular uma — sem media query e sem campo cortado no meio do endereço. */
.dossie{ display:grid; gap:12px 18px; margin-top:16px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr)) }
.dossie label{ margin:0 0 5px; display:flex; align-items:center; gap:7px }
.dossie input.campo{ width:100%; height:38px; padding:0 12px; font-size:13.5px;
  border:1px solid var(--poco-linha); border-radius:var(--r-2); background:var(--poco) }
.campo-linha.obrigatorio input.campo{ border-color:var(--cinza-2) }
/* O `select` da aba Conversar veste o mesmo campo do dossiê. Sem esta linha ele sai com o
   controle nativo do sistema no meio de campos desenhados — e, no escuro, com o fundo
   claro do navegador, que é onde a medição de contraste reprova. */
.dossie select.campo{ width:100%; height:38px; padding:0 10px; font-size:13.5px;
  border:1px solid var(--poco-linha); border-radius:var(--r-2); background:var(--poco) }
/* 11,5px é o piso: abaixo disso a pílula 'falta' — que é justamente a que avisa que
   algo está errado — vira o menor texto da tela. Estava 10,5px. */
.dossie .pilula{ font-size:11.5px }
/* Os textos fixos são parágrafos de laudo, não uma linha de cadastro: uma coluna só, e
   altura que caiba o OBJETIVO inteiro sem rolar dentro de uma caixa de 38px. */
.textos{ display:grid; gap:18px; margin-top:16px; grid-template-columns:1fr }
.textos label{ margin:0 0 5px; display:flex; align-items:center; gap:7px }
.textos textarea.campo{ width:100%; min-height:152px; padding:10px 12px; font-size:13px;
  line-height:1.55; resize:vertical; border:1px solid var(--poco-linha);
  border-radius:var(--r-2); background:var(--poco) }

/* Fotos importadas são organizadas antes do envio: a legenda é o dado que reaparece no
   laudo, então não pode ficar escondida atrás da miniatura. */
.im-grade{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px;
  margin-top:16px }
.im-foto{ padding:10px; border:1px solid var(--linha); border-radius:var(--r-2);
  background:var(--poco) }
.im-foto img{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:10px; margin-bottom:8px }
.im-foto-nome{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:var(--cinza); font-size:11px; margin-bottom:6px }
.im-foto .b{ margin-top:8px }
.im-arquivos{ display:grid; gap:6px; margin-top:8px }
.im-arquivo-item{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 10px; border:1px solid var(--linha); border-radius:8px; background:var(--poco);
  font-size:12px }
.im-arquivo-item b{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.im-arquivo-item span{ flex:0 0 auto; color:var(--ok) }
.im-arquivo-item.ruim span{ color:var(--perigo) }
.im-audio-status{ display:block; margin-top:6px; color:var(--cinza); font-size:12px;
  font-weight:400; letter-spacing:normal; text-transform:none }
.etiqueta{ display:inline-flex; align-items:center; min-height:24px; padding:0 9px;
  border-radius:999px; background:var(--azul-lavado); color:var(--azul-forte); font-size:11px;
  font-weight:700; letter-spacing:.08em; text-transform:uppercase }
.origem-intro{ padding:28px }
.origem-intro header{ margin:10px 0 0 }
.origem-intro h2, .im-intro h2{ margin:0; font-size:24px; letter-spacing:-.035em }
.origem-intro .sub{ max-width:640px; margin:7px 0 0 }
.im-origens{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:22px }
.im-origem{ display:flex; align-items:flex-start; gap:14px; min-height:160px; padding:20px;
  border:1px solid var(--linha); border-radius:var(--r-2); color:var(--preto);
  background:var(--poco); text-decoration:none; transition:border-color .16s ease, transform .16s ease,
  box-shadow .16s ease }
.im-origem:hover{ transform:translateY(-2px); border-color:var(--azul); box-shadow:var(--sombra) }
.im-origem:focus-visible{ border-color:var(--azul-forte); box-shadow:var(--sombra) }
.im-icone{ display:grid; place-items:center; flex:0 0 42px; width:42px; height:42px;
  border-radius:13px; color:var(--azul-forte); background:var(--azul-lavado) }
.im-icone.externo{ color:var(--ok); background:var(--ok-lavado) }
.im-icone svg{ width:21px; height:21px }
.im-origem-corpo{ display:grid; gap:5px; color:var(--cinza); font-size:13px; line-height:1.5 }
.im-origem-titulo{ color:var(--preto); font-size:16px; font-weight:700 }
.im-seta{ align-self:center; margin-left:auto; color:var(--cinza); font-size:22px }
.im-intro{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:3px 2px 6px }
.im-intro h2{ margin-top:7px }
.im-intro p{ max-width:680px; margin:5px 0 0; color:var(--cinza) }
.im-secao{ padding:24px }
.im-secao header{ align-items:center; margin-bottom:7px }
.im-secao header > div{ display:flex; align-items:center; gap:10px }
.im-secao h2{ margin:0; font-size:17px }
.im-passo{ display:grid; place-items:center; width:26px; height:26px; border-radius:50%;
  background:var(--azul); color:var(--azul-tinta); font-size:12px; font-weight:700 }
.im-secao .sub{ margin:0 0 16px }
.im-upload{ display:flex; align-items:center; justify-content:center; gap:12px; min-height:104px;
  padding:18px; border:1.5px dashed var(--poco-linha); border-radius:var(--r-2); cursor:pointer;
  background:var(--poco); color:var(--cinza); text-align:center; transition:border-color .16s ease,
  background .16s ease; letter-spacing:normal; text-transform:none }
.im-upload:hover{ border-color:var(--azul); background:var(--azul-lavado) }
.im-upload:focus-within{ border-color:var(--azul-forte); box-shadow:0 0 0 3px var(--azul-lavado) }
.im-upload, .im-anexo{ position:relative; overflow:hidden }
.im-arquivo.so-leitor{ position:absolute; inset:0; width:100%; height:100%; padding:0; margin:0;
  opacity:0; cursor:pointer; border:0 }
.im-upload.soltar, .im-anexo.soltar{ border-color:var(--azul-forte); background:var(--azul-lavado) }
.im-foto.ruim{ border-color:var(--perigo) }
.im-selo{ display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%;
  color:var(--branco); background:var(--azul); font-size:12px; font-weight:700 }
.im-estado{ display:block; min-height:18px; color:var(--cinza); font-size:12px }
.im-foto.ruim .im-estado{ color:var(--perigo) }
.im-acoes{ display:flex; gap:6px; margin-top:8px }
.im-audio-status{ display:grid; gap:8px; margin-top:10px; color:var(--cinza) }
.im-audio-status audio{ width:100% }
.im-arquivo{ position:static; display:block; width:100%; height:44px; padding:8px 10px; margin:10px 0 0;
  opacity:1; cursor:pointer; border:1px solid var(--poco-linha); border-radius:var(--r-2);
  background:var(--poco); color:var(--cinza); font-size:13px }
.im-arquivo::file-selector-button{ min-height:30px; margin-right:9px; padding:0 11px; border:0;
  border-radius:7px; background:var(--azul); color:var(--azul-tinta); font:inherit; font-weight:700; cursor:pointer }
.im-anexo .im-arquivo{ width:auto; min-width:220px; margin:0 0 0 10px }
.im-arquivo-status{ min-height:18px; margin:8px 0 0 }
.im-upload b, .im-upload small{ display:block }
.im-upload b{ color:var(--preto); font-size:14px }
.im-upload small{ margin-top:2px; font-size:12px }
.im-upload-icone{ display:grid; place-items:center; width:32px; height:32px; border-radius:10px;
  background:var(--azul); color:var(--azul-tinta); font-size:23px; font-weight:400; line-height:1 }
.im-detalhe{ margin-top:14px; padding-top:14px; border-top:1px solid var(--linha) }
.im-detalhe summary{ color:var(--cinza); cursor:pointer; font-size:13px; font-weight:600 }
.im-detalhe .campo{ width:100%; margin-top:10px }
.im-anexo{ display:inline-flex; align-items:center; margin-top:4px; cursor:pointer }
.importar label{ display:block; margin:0 0 12px; color:var(--preto); font-size:12px; font-weight:700;
  letter-spacing:.035em; text-transform:uppercase }
.importar label .campo{ display:block; width:100%; margin-top:6px; font-size:14px; font-weight:400;
  letter-spacing:normal; text-transform:none; min-height:44px }
.im-campos{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 12px }
/* `select` tem largura própria, vinda da opção mais longa: num cartão estreito ele empurra
   a página inteira para o lado em vez de encolher. Fora da grade de campos não havia nada
   segurando isso — e "Relatório Técnico de Vistoria Residencial (LTVR)" é uma opção longa. */
.cartao label.im-largo{ display:block; min-width:0 }
.cartao select.campo{ width:100%; max-width:100% }
.im-campos .im-largo{ grid-column:1/-1 }
.im-final{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 24px }
.im-final > div{ display:grid; gap:2px; min-width:0 }
.im-final b{ font-size:14px }
.im-final span{ color:var(--cinza); font-size:13px }
.im-final .im-requisitos{ color:var(--cinza); font-size:12px; line-height:1.4 }
.im-final .b{ min-width:210px; min-height:44px }
.ln-fora{ display:flex; align-items:center; justify-content:space-between; gap:18px;
  margin-top:12px; padding:18px; border:1px solid var(--linha); border-radius:var(--r-2);
  background:var(--azul-lavado) }
.ln-fora > div{ display:grid; gap:4px }
.ln-fora b{ color:var(--preto); font-size:15px }
.ln-fora span{ color:var(--cinza); font-size:13px }
.ln-fora .b{ flex:0 0 auto }
.ln-fora .b.pri{ background:var(--azul); color:var(--azul-tinta) }
@media (max-width:820px){
  .origem-intro, .im-secao{ padding:20px }
  .im-origens, .im-campos{ grid-template-columns:1fr }
  .im-campos .im-largo{ grid-column:auto }
  .im-intro, .im-final{ align-items:flex-start; flex-direction:column }
  .im-final .b{ width:100% }
  .ln-fora{ align-items:flex-start; flex-direction:column }
  .im-origem{ min-height:0; padding:17px }
}

/* ---------------------------------------------------------------- a conversa
 *
 * A aba Conversar é a única tela do sistema que NÃO é uma pilha de cartões: é uma coluna
 * de mensagens com o compositor sempre no mesmo lugar. Três cartões empilhados obrigavam
 * a rolar a página para reencontrar onde a resposta caiu, e a rolagem é o que faz uma
 * conversa parecer um formulário.
 *
 * O cartão vira a MOLDURA (padding zero, canto arredondado, recorte) e quem rola é a
 * coluna de dentro. É por isso que ele tem altura fixa em vez de crescer: com altura de
 * conteúdo, o compositor desce junto com a conversa e some da tela.
 *
 * O compositor não leva vidro. Campo de digitação precisa de fundo estável — é a regra 4
 * do spec, no cabeçalho deste arquivo — e por isso ele é `--poco`, afundado e opaco.
 */
.cartao.chat{ padding:0; overflow:hidden; display:grid; grid-template-columns:236px 1fr;
  grid-template-rows:minmax(0, 1fr); height:calc(100dvh - 232px); min-height:460px }

.fios{ border-right:1px solid var(--linha); padding:16px 10px; overflow-y:auto;
  display:flex; flex-direction:column; gap:2px; min-width:0; min-height:0 }
.fios-tit{ font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--cinza); padding:10px 10px 6px }
.fios-vazio{ font-size:12.5px; color:var(--cinza-2); padding:0 10px; margin:0 }
.fio{ display:block; width:100%; text-align:left; background:none; border:0;
  border-radius:12px; padding:9px 10px; cursor:pointer; min-width:0 }
.fio:hover{ background:var(--poco) }
/* O fio ativo é lavado, não preto: a barra de navegação já usa o preto para dizer "você
   está aqui", e dois pretos na mesma tela disputam a mesma frase. */
.fio.on{ background:var(--azul-lavado) }
.fio b{ display:block; font-size:13.5px; font-weight:600; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis }
.fio span{ display:block; font-size:11.5px; color:var(--cinza); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis }

/* Sem mínimo zero, o item de grid cresce com as mensagens e esconde o compositor. */
.conversa{ display:flex; flex-direction:column; min-width:0; min-height:0; position:relative; overflow-x:hidden }

.msgs{ flex:1; overflow-y:auto; padding:22px 24px; display:flex; flex-direction:column;
  gap:20px; min-height:0; scroll-behavior:smooth }
.msg{ max-width:760px }
.msg .quem{ font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--cinza); margin-bottom:6px }
.msg.eu .quem{ color:var(--azul-forte) }
/* `pre-wrap` porque a resposta vem com parágrafo e recuo do modelo, e `anywhere` porque
   uma URL colada sem espaço estoura a coluna e leva a rolagem horizontal junto. */
.msg .txt{ font-size:14.5px; line-height:1.65; color:var(--preto);
  white-space:pre-wrap; overflow-wrap:anywhere }
.msg.eu .txt{ background:var(--poco); border:1px solid var(--poco-linha);
  border-radius:var(--r-2); padding:11px 15px }
.msg.nota .txt{ font-size:13px; color:var(--cinza) }
/* O botão que vive DENTRO de uma nota da conversa: menor que o da tela, mas ainda alvo
   de toque no celular (a regra dos 44px vale abaixo de 820px como em todo botão). */
.b.pequeno{ height:32px; padding:0 13px; font-size:12.5px; margin-top:9px }

.compositor{ border-top:1px solid var(--linha); padding:14px 24px 16px }
.alvo{ display:flex; align-items:center; gap:8px; margin-bottom:10px; flex-wrap:wrap }
.alvo select.campo{ flex:1; min-width:180px; max-width:420px; height:36px; padding:0 10px;
  font-size:13px; border:1px solid var(--poco-linha); border-radius:var(--r-2);
  background:var(--poco) }
.compositor .caixa{ display:flex; align-items:flex-end; gap:8px; padding:8px 8px 8px 10px;
  background:var(--poco); border:1px solid var(--poco-linha); border-radius:var(--r-2) }
.compositor .caixa:focus-within{ border-color:var(--cinza-2) }
.compositor textarea{ flex:1; min-width:0; border:0; resize:none; background:none;
  font-size:14.5px; line-height:1.5; max-height:180px; padding:7px 2px }
/* Sem `outline:0` de propósito: a caixa inteira acende no `:focus-within`, mas o anel de
   foco do NAVEGADOR é o que quem tabula enxerga. Tirar o anel de um campo escondido dentro
   de uma caixa desenhada é apagar a única pista de onde o cursor está. */
.compositor textarea:focus-visible{ outline-offset:0 }
.icone{ display:inline-flex; align-items:center; justify-content:center; width:34px;
  height:34px; flex:0 0 auto; border:0; border-radius:10px; background:none;
  color:var(--cinza); cursor:pointer }
.icone:hover{ background:var(--poco-linha); color:var(--preto) }
.icone svg{ width:18px; height:18px }
.dica{ font-size:11.5px; color:var(--cinza-2); margin-top:9px }
.est{ display:inline; margin-left:6px; font-weight:600; color:var(--cinza) }
.est.boa{ color:var(--ok) }
.est.ruim{ color:var(--alerta) }

/* A paleta flutua SOBRE a conversa, ancorada no compositor — ela é a continuação da
   barra "/", não um painel de outra parte da tela. */
.paleta{ position:absolute; left:24px; right:24px; bottom:104px; z-index:30; padding:8px;
  max-height:52vh; overflow-y:auto; background:var(--branco);
  border:1px solid var(--linha); border-radius:var(--r-2); box-shadow:var(--sombra-2) }
/* A mesma paleta, ancorada no cabeçalho em vez do compositor: é o menu de comandos que
   toda tela tem. `right:0` e não `left`, porque o botão que a abre é o último da fileira
   de ações — menu que abre longe do botão parece de outro elemento. */
.paleta.topo{ left:auto; right:10px; bottom:auto; top:calc(100% - 8px);
  width:min(420px,92vw); max-height:70vh }
/* Numa caixa de 420px o rótulo e a dica lado a lado embrulham e o texto passa a começar
   em duas alturas diferentes na mesma linha. Empilhados, a coluna fica com um eixo só —
   é como o menu do caderno de campo, que tem a mesma largura. */
.paleta.topo button{ display:block }
.paleta.topo button b, .paleta.topo button span{ display:block }
.paleta.topo button span{ margin-top:1px }
.paleta .grupo{ font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--cinza); padding:10px 12px 5px }
.paleta button{ display:flex; align-items:baseline; gap:10px; width:100%; text-align:left;
  background:none; border:0; border-radius:10px; padding:8px 12px; cursor:pointer }
.paleta button:hover{ background:var(--poco) }
.paleta button b{ font-size:13.5px; font-weight:600; white-space:nowrap }
.paleta button span{ font-size:12px; color:var(--cinza); line-height:1.4 }

@media (max-width:820px){
  /* No celular a lista de fios vira uma faixa que se arrasta na horizontal: a conversa é
     o que a pessoa veio ver, e uma coluna de 236px come metade da tela. */
  /* No celular a altura NÃO é calculada: `100dvh menos o topo` depende de quanto o topo
     mede, e o topo mede coisas diferentes conforme o nome do escritório quebra em uma ou
     duas linhas. Aqui o cartão cresce com o conteúdo, quem rola por dentro é a lista de
     mensagens (com teto em `dvh`), e o compositor fica logo abaixo dela — alcançável sem
     depender de nenhum número mágico. */
  .cartao.chat{ grid-template-columns:1fr; grid-template-rows:auto auto;
    height:auto; min-height:0 }
  /* 46dvh e não mais: com o cabeçalho da tela somado, é o que deixa o COMPOSITOR
     aparecer sem rolar num iPhone de 780px de altura — uma conversa cuja caixa de digitar
     nasce fora da tela lê como uma tela de leitura, não de conversa. */
  .msgs{ max-height:46dvh }
  .fios{ flex-direction:row; align-items:center; gap:6px; overflow-x:auto; padding:10px;
    border-right:0; border-bottom:1px solid var(--linha) }
  .fios-tit, .fios-vazio{ display:none }
  .fio{ width:auto; flex:0 0 auto; max-width:190px; padding:8px 12px; min-height:44px }
  .msgs{ padding:18px 16px }
  .compositor{ padding:12px 16px 14px }
  .compositor textarea{ font-size:16px }   /* abaixo de 16px o Safari dá zoom ao focar */
  .icone{ width:44px; height:44px }
  .paleta{ left:16px; right:16px; bottom:112px; max-height:60vh }
  .paleta.topo{ left:0; right:0; width:auto; bottom:auto }
  .alvo select.campo{ min-height:44px; font-size:16px }
}


/* --------------------------------------------------------- a entrevista pelo chat
 *
 * Reusa o visual da Conversar (`.msgs`, `.msg`, `.compositor`) de propósito: é a mesma
 * ação — escrever e receber — e duas linguagens para isso seriam duas telas para
 * aprender. O que é próprio daqui são as fichas de resposta rápida e a altura, que numa
 * entrevista curta não pode ser a de uma conversa de dezesseis turnos.
 */
.cartao.chat #ev-msgs{ min-height:min(46dvh, 420px) }
.ev-fichas{ display:flex; flex-wrap:wrap; gap:8px; margin:2px 0 4px }
/* 44px também aqui: no celular a ficha é o jeito de responder, e o nome de um tipo de
   laudo é longo o bastante para a ficha ocupar a linha inteira — alvo de linha inteira
   com 36px de altura é alvo pequeno do mesmo jeito. */
.ev-fichas .b{ min-height:44px; text-align:left }
.compositor .dica .b.pequeno{ margin-left:8px }
.compositor .dica .est.ruim{ color:var(--alerta) }
/* A entrevista não tem fios de conversa: uma coluna só, e o cabeçalho dentro dela. */
.cartao.chat.entrevista{ grid-template-columns:1fr; height:auto }
.ev-topo{ display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:16px 24px; border-bottom:1px solid var(--linha) }
.ev-topo h2{ margin:0; font-size:17px }
.ev-topo .acoes{ display:flex; align-items:center; gap:10px }
/* `.etiqueta` é inline-flex, mas como item de grade ela ESTICA: no celular a pílula
   "novo laudo" virava uma faixa de ponta a ponta. Quem manda num item de grade é o
   alinhamento do eixo, não o `display`. */
.origem-intro .etiqueta{ justify-self:start }

/* O estado vazio de Documentos: é a primeira tela de quem acabou de pagar, e uma frase
   centrada num cartão não diz o que fazer. Os botões vêm do template, que sabe o que
   aquele PLANO tem: o Basic não tem caderno de campo, e oferecer o que ele não comprou é
   pior que oferecer menos. */
.vazio-guia{ padding:34px 18px 30px; text-align:center }
.vazio-titulo{ margin:0; font-size:17px; font-weight:600; color:var(--preto) }
.vazio-texto{ margin:8px auto 0; max-width:46ch; color:var(--cinza-2); font-size:13.5px;
  line-height:1.55; text-wrap:pretty }
.vazio-guia .acoes{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
  margin-top:20px }

/* ---------------------------------------------------------------- painel de laudos (E-34)
   O painel do Basic, como o da Redatora da Maia: filtros em linha acima da tabela. */
.rotulo-campo{ display:block; font-size:12px; font-weight:500; color:var(--cinza-2); margin-bottom:6px }
.lz-filtros{ display:grid; grid-template-columns:minmax(0,2fr) repeat(4, minmax(0,1fr));
  gap:12px; margin:4px 0 18px }
.lz-filtros .campo{ width:100%; min-height:40px; padding:0 10px }
@media (max-width:900px){ .lz-filtros{ grid-template-columns:1fr 1fr } .lz-busca{ grid-column:1 / -1 } }
.dialogo-textos select.campo, .dialogo-textos input.campo{ width:100%; min-height:40px; padding:0 10px }

/* ---------------------------------------------------------------- o assistente (E-34)
   Sete etapas, uma por vez. A barra de passos é navegação de verdade (botões), e o nome
   da etapa vem por extenso logo abaixo, porque no celular só cabem os números. */
.as{ display:flex; flex-direction:column; gap:var(--gap); padding:0 10px }
.as-passos ol{ list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(7, minmax(0,1fr)); gap:6px }
.as-passo{ width:100%; min-height:44px; display:flex; align-items:center; gap:8px;
  padding:6px 10px; border:1px solid var(--linha); border-radius:12px; background:var(--vidro);
  color:var(--cinza); cursor:pointer; font:inherit; text-align:left }
.as-passo .as-num{ flex:none; width:24px; height:24px; border-radius:50%; display:inline-flex;
  align-items:center; justify-content:center; font-size:12px; font-weight:600;
  background:var(--poco); color:var(--cinza) }
.as-passo .as-rot{ font-size:12.5px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.as-passo.on{ border-color:var(--azul); color:var(--preto) }
.as-passo.on .as-num{ background:var(--azul); color:var(--azul-tinta) }
.as-passo.feito .as-num{ background:var(--ok-lavado); color:var(--ok) }
@media (max-width:900px){ .as-passo .as-rot{ display:none } .as-passo{ justify-content:center } }
.as-passo-nome{ margin:0; font-weight:600 }
.as-etapa > header{ margin-bottom:14px }
.as-sub{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:10px; margin:22px 0 12px }
.as-grade{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px 18px }
@media (max-width:700px){ .as-grade{ grid-template-columns:1fr } }
.as-campo{ display:flex; flex-direction:column; gap:6px; min-width:0 }
.as-largo{ grid-column:1 / -1; margin-top:14px }
.as-grade .as-largo{ margin-top:0 }
.as-campo label, .as-rotulo label{ font-size:13px; font-weight:500 }
.as-campo input.campo, .as-campo select.campo{ width:100%; min-height:42px; padding:0 12px }
.as-campo textarea.campo{ width:100%; padding:10px 12px; font-size:14px; line-height:1.5 }
.as-rotulo{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px }
.as-botoes{ display:flex; flex-wrap:wrap; gap:6px }
.as-obrig{ color:var(--alerta) }
.as-fixo{ margin:0; min-height:42px; display:flex; align-items:center; font-weight:600 }
.as-escolha{ display:flex; flex-wrap:wrap; gap:6px 14px }
.as-escolha label{ display:inline-flex; align-items:center; gap:6px; min-height:40px; font-size:13.5px }
.as-escolha input{ width:18px; height:18px; accent-color:var(--azul) }
.as-linha-add{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:8px 0 }
.as-linha-add .campo{ flex:1 1 220px; min-height:40px; padding:0 10px }
.as-fichas{ list-style:none; margin:0 0 10px; padding:0; display:flex; flex-wrap:wrap; gap:6px }
.as-fichas li{ display:inline-flex; align-items:center; gap:6px; padding:2px 2px 2px 12px;
  border:1px solid var(--linha); border-radius:999px; font-size:13px }
.as-tirar{ min-height:40px }
.as-doc-grupo{ margin-bottom:16px }
.as-doc-grupo h3{ font-size:13px; font-weight:600; margin:10px 0 6px; color:var(--cinza) }
.as-doc{ display:grid; grid-template-columns:minmax(0,1.4fr) auto minmax(0,1fr); gap:8px 14px;
  align-items:center; padding:8px 0; border-bottom:1px solid var(--linha) }
.as-doc .campo{ width:100%; min-height:40px; padding:0 10px }
.as-doc-nome{ font-size:13.5px; min-width:0 }
@media (max-width:700px){ .as-doc{ grid-template-columns:1fr } }
.as-novo-amb{ display:flex; flex-wrap:wrap; gap:8px; align-items:flex-end; margin-bottom:14px }
.as-novo-amb .campo{ flex:1 1 240px; min-height:42px; padding:0 12px }
.as-novo-amb .rotulo-campo{ flex-basis:100%; margin:0 }
.as-amb{ border:1px solid var(--linha); border-radius:14px; padding:12px 14px; margin-bottom:12px }
.as-amb summary{ cursor:pointer; font-weight:600; min-height:32px; display:flex; align-items:center }
.as-amb textarea.campo{ width:100%; margin:6px 0 10px; padding:10px 12px }
.as-amb label{ font-size:13px; font-weight:500 }
.as-fotos{ display:grid; grid-template-columns:repeat(auto-fill, minmax(160px,1fr)); gap:12px; margin:10px 0 }
.as-fotos figure{ margin:0; display:flex; flex-direction:column; gap:6px }
.as-fotos img{ width:100%; aspect-ratio:4 / 3; object-fit:cover; border-radius:10px; background:var(--poco) }
.as-fotos .campo{ min-height:38px; padding:0 8px }
.as-arquivo{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0) }
.as-resumo{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px }
@media (max-width:700px){ .as-resumo{ grid-template-columns:1fr 1fr } }
.as-num-caixa{ display:flex; flex-direction:column; gap:4px; padding:14px; border:1px solid var(--linha);
  border-radius:14px; background:var(--poco) }
.as-num-caixa span{ font-size:12px; color:var(--cinza) }
.as-num-caixa b{ font-size:26px; font-variant-numeric:tabular-nums }
.as-num-caixa.boa b{ color:var(--ok) }
.as-num-caixa.ruim b{ color:var(--alerta) }
.as-selos{ list-style:none; margin:0 0 16px; padding:0 }
.as-selos li{ display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:10px; align-items:center;
  padding:10px 0; border-bottom:1px solid var(--linha); font-size:14px }
.as-gerar, .as-exportar{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:10px }
.as-exportar .sub{ flex-basis:100% }
.as-navegar{ display:flex; justify-content:space-between; gap:10px; padding-bottom:24px }
.as-navegar .b[hidden]{ display:none }
.as-cad-lista{ list-style:none; margin:10px 0; padding:0; display:flex; flex-direction:column; gap:6px }
/* Todo campo do painel de laudos, do assistente e dos diálogos veste o campo do dossiê.
   Sem isto o `select`, a `textarea` e os campos montados pelo JS saíam com a borda nativa
   do navegador no meio de campos desenhados, e no escuro com o fundo claro dele. */
.as .campo, .lz-filtros .campo, .dialogo-textos .campo{ border:1px solid var(--poco-linha);
  border-radius:var(--r-2); background:var(--poco); color:var(--preto); font:inherit;
  font-size:14px }
.as textarea.campo, .dialogo-textos textarea.campo{ resize:vertical; line-height:1.55 }

/* ---------------------------------------------------------------- Meus textos (E-34)
   A lista escolhe, o editor escreve. Sem JavaScript os seis painéis aparecem um embaixo do
   outro (é um formulário que funciona); com ele (`.com-js`) só o escolhido aparece. */
.mt{ display:grid; grid-template-columns:minmax(260px, 340px) minmax(0,1fr); gap:var(--gap);
  padding:0 10px; align-items:start }
@media (max-width:900px){ .mt{ grid-template-columns:1fr } }
.mt-lista{ position:sticky; top:16px; gap:12px }
@media (max-width:900px){ .mt-lista{ position:static } }
.mt-intro{ margin:0; max-width:60ch }
.mt-itens{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px }
.mt-item{ width:100%; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 10px;
  align-items:center; padding:10px 12px; border:1px solid transparent; border-radius:var(--r-2);
  background:transparent; color:var(--preto); font:inherit; text-align:left; cursor:pointer;
  transition:background .14s, border-color .14s }
.mt-item:hover{ background:var(--poco) }
.mt-item.on{ background:var(--azul-lavado); border-color:var(--azul) }
.mt-item-nome{ font-weight:600; font-size:14px; grid-column:1 }
.mt-item-onde{ font-size:12px; color:var(--cinza); grid-column:1 }
.mt-item .pilula{ grid-column:2; grid-row:1 / span 2 }
.mt-editores{ display:flex; flex-direction:column; gap:var(--gap); min-width:0 }
.mt.com-js .mt-painel[hidden]{ display:none }
.mt-painel header h2{ margin:0 0 4px }
.mt-painel header .sub{ margin:0 }
.mt-texto{ width:100%; min-height:360px; margin-top:10px; padding:14px 16px; font:inherit;
  font-size:14.5px; line-height:1.6; resize:vertical; border:1px solid var(--poco-linha);
  border-radius:var(--r-2); background:var(--poco); color:var(--preto) }
.mt-rodape{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-top:12px }
.mt-conta{ font-size:12.5px; color:var(--cinza); font-variant-numeric:tabular-nums }
.mt-rodape [data-estado]{ font-size:12.5px; flex:1 }
.mt-rodape .ruim{ color:var(--alerta) }
.mt-rodape .boa{ color:var(--ok) }
.mt-painel header h2{ font-size:20px; font-weight:600; letter-spacing:-.01em }

/* ---------------------------------------------------------------- retorno e conta
 * A pergunta "o que faltou?" e o formulário de cancelamento. Duas peças do mesmo gesto:
 * um campo de texto, um recado e os botões. */
.retorno textarea.campo, #form-cancelar textarea.campo{ display:block; width:100%; min-height:88px;
  resize:vertical }
.retorno-acoes{ display:flex; flex-wrap:wrap; gap:10px; margin:14px 0 0 }
.retorno-acoes .b, #form-cancelar .b{ min-height:44px }
#form-cancelar fieldset{ display:grid; gap:4px; margin:0 0 16px; padding:0; border:0 }
#form-cancelar fieldset label{ display:flex; align-items:center; gap:10px; min-height:44px;
  color:var(--preto); font-size:14px }
/* No celular o alvo é o próprio botão de rádio, e 13px não se acerta com o dedo. */
@media (max-width:480px){
  #form-cancelar fieldset input{ width:40px; height:40px; flex:none; margin:0;
    accent-color:var(--azul) }
}
/* "Continuar com Google", igual na porta de entrada e no checkout. Superfície clara e
   opaca (por isso sem vidro, como os botões de ação), borda de linha, o "G" à esquerda e
   o texto do tema. Largura inteira do lugar onde está: é uma escolha, não um atalho. */
.b.b-google, .b.b-largo{ display:flex; justify-content:center; width:100%; height:48px;
  gap:10px; font-size:14.5px; font-weight:600; text-decoration:none }
.b.b-google, .b.b-largo{ background:var(--branco); border-color:var(--linha);
  color:var(--preto); -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none }
.b.b-google:hover, .b.b-largo:hover{ background:var(--branco); border-color:var(--cinza-2) }
/* Na porta, o link de "esqueci a senha" vem logo depois do botão: precisa de respiro. */
.porta .b.b-google + p.sub{ margin-top:18px }
.b-google-g{ flex:none; display:block }
.porta .b.b-google{ margin-top:0 }
/* O "ou" entre dois caminhos: uma linha de cada lado, e a palavra no meio. */
.ou{ display:flex; align-items:center; gap:12px; margin:16px 0; color:var(--cinza-2);
  font-size:12.5px; line-height:1 }
.ou::before, .ou::after{ content:""; flex:1; height:1px; background:var(--linha) }
/* O cartão na tela da conta: trocar, reativar, voltar a pagar. Uma coluna estreita, e os
   pares (validade e código, CEP e número) lado a lado. */
.conta-dobra > summary{ display:inline-flex; align-items:center; min-height:44px; cursor:pointer;
  list-style:none }
.conta-dobra > summary::-webkit-details-marker{ display:none }
.conta-dobra[open] > summary{ margin-bottom:14px }
.conta-cartao{ display:grid; gap:6px; max-width:420px }
.conta-cartao .campo{ display:block; width:100%; min-height:44px; margin-bottom:8px }
.conta-cartao .b{ min-height:44px }
.conta-par{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
a.quem{ color:inherit; text-decoration:none; border-radius:var(--r-2) }
.bonus-item .b, .cartao > p > a.b{ min-height:44px }