/* ============================================================
   Magis Educação: folha única da plataforma.
   Identidade do brandbook Magispharma (HIKE, 2023):
   Marcellus para títulos, Inconsolata para textos, paleta
   monocromática de verdes (Pantone 4209C, 2263C, 2404C, 6190C).
   ============================================================ */

/* ---------- fontes autohospedadas ---------- */
@font-face {
  font-family: 'Marcellus';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/marcellus-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Marcellus';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/marcellus-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0;
}
@font-face {
  font-family: 'Inconsolata';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('/assets/fonts/inconsolata-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Inconsolata';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('/assets/fonts/inconsolata-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0;
}

/* ---------- tokens ---------- */
:root {
  /* Paleta da marca (logomarca amostrada + brandbook) */
  --mg-verde-950: #1B342B;
  --mg-verde-900: #234439;
  --mg-verde-800: #2D594A;   /* primária: verde da logomarca */
  --mg-verde-700: #3A6B59;
  --mg-verde-500: #6E8F70;   /* Pantone 2263C aproximado */
  --mg-sage:      #A5B99C;   /* secundária: sage da logomarca */
  --mg-sage-suave:#C3D0B8;   /* Pantone 2404C aproximado */
  --mg-amarelo:   #E6ECC3;   /* Pantone 6190C aproximado */
  --mg-creme:     #F1F3EA;
  --mg-base:      #F7F8F3;   /* cor base off-white */
  --mg-branco:    #FFFFFF;
  --mg-tinta:     #22302A;
  --mg-tinta-2:   #51635A;
  --mg-borda:     #DCE3D2;
  --mg-erro:      #A94436;
  --mg-erro-bg:   #F7E8E4;
  --mg-ok-bg:     #E4EFE0;
  --mg-aviso-bg:  #F4F0D8;

  --ff-titulo: 'Marcellus', Georgia, serif;
  --ff-texto: 'Inconsolata', Consolas, monospace;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --sombra-sm: 0 1px 3px rgba(34, 48, 42, .08);
  --sombra: 0 8px 28px rgba(34, 48, 42, .10);
  --sombra-lg: 0 18px 50px rgba(27, 52, 43, .16);
  --transicao: .18s ease;
  --larg-conteudo: 1120px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* O 100% vai por var() de propósito (15/09/2026). No Firefox o
 * -webkit-text-size-adjust é apelido do -moz-text-size-adjust, que só aceita
 * auto ou none: o "100%" literal saía no console de TODA página como "Erro ao
 * analisar o valor", e o QA registrou. Valor com var() só é validado na hora
 * de calcular, onde o Firefox o descarta calado; o Safari do iPhone, que é
 * quem precisa da regra (não aumentar a letra ao virar o aparelho), recebe o
 * mesmo 100% de antes. */
html { -webkit-text-size-adjust: var(--mg-ajuste-texto, 100%); scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--ff-texto);
  font-size: 16px;
  line-height: 1.65;
  color: var(--mg-tinta);
  background: var(--mg-base);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: inline-block; }
a { color: var(--mg-verde-800); }
h1, h2, h3, h4 { font-family: var(--ff-titulo); font-weight: 400; line-height: 1.18; margin: 0 0 .5em; color: var(--mg-verde-900); letter-spacing: .01em; }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--mg-verde-700); outline-offset: 2px; border-radius: 3px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

.pular-conteudo {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--mg-verde-900); color: #fff; padding: 10px 18px; border-radius: 0 0 var(--r-sm) 0;
}
.pular-conteudo:focus { left: 0; }

/* TEXTO SO PARA LEITOR DE TELA.
 * Serve para dar contexto a controle que se repete linha a linha ("Aprovar" em
 * trinta linhas vira trinta botoes com o mesmo nome na lista do leitor) e para
 * nomear coluna de acoes, que na tela nao precisa de titulo escrito.
 * `display:none` e `visibility:hidden` NAO servem: tiram do leitor tambem.
 * `clip-path` com 1px preserva o texto na arvore de acessibilidade.
 * `white-space: nowrap` evita que a caixa de 1px quebre o texto letra a letra
 * em alguns leitores antigos. */
.so-leitor {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* Marca de campo obrigatorio. A cor sozinha nao pode carregar a informacao
 * (WCAG 1.4.1): quem enxerga ve o asterisco, quem usa leitor ouve o
 * "obrigatorio" que vem junto no .so-leitor, e o `required` do HTML segue
 * valendo para o navegador. */
.campo-obrigatorio { color: var(--mg-erro); margin-left: 2px; font-weight: 700; }
.form-obrigatorio-nota { font-size: 12.5px; color: var(--mg-tinta-2); margin: 0 0 14px; }

.ic { width: 20px; height: 20px; flex: 0 0 auto; }

/* ---------- etiqueta (chip da marca: mono, caixa alta, borda fina) ---------- */
.etiqueta {
  display: inline-block;
  font-family: var(--ff-texto);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mg-verde-800);
  border: 1px solid currentColor;
  padding: 4px 12px;
  border-radius: 3px;
  margin-bottom: 16px;
}
.etiqueta-clara { color: var(--mg-amarelo); }

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--ff-texto); font-size: 15px; font-weight: 700;
  padding: 13px 28px; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; text-decoration: none; transition: background var(--transicao), color var(--transicao), border-color var(--transicao), transform var(--transicao);
  line-height: 1.2;
  /* Botão de rótulo longo ("Criar e enviar link de senha") PRECISA quebrar:
     com nowrap no .btn genérico ele esticava o cartão e empurrava a página
     inteira em telefone. O nowrap fica só no compacto, que tem rótulo curto. */
  max-width: 100%;
}
.btn:active { transform: translateY(1px); }
.btn-primario { background: var(--mg-verde-800); color: var(--mg-creme); }
.btn-primario:hover { background: var(--mg-verde-900); }
.btn-claro { background: var(--mg-amarelo); color: var(--mg-verde-900); }
.btn-claro:hover { background: #EDF2CF; }
.btn-contorno { background: transparent; color: var(--mg-verde-800); border-color: var(--mg-verde-800); }
.btn-contorno:hover { background: var(--mg-verde-800); color: var(--mg-creme); }
.btn-contorno-claro { background: transparent; color: var(--mg-creme); border-color: var(--mg-sage); }
.btn-contorno-claro:hover { background: rgba(255,255,255,.12); }
.btn-perigo { background: transparent; color: var(--mg-erro); border-color: var(--mg-erro); }
.btn-perigo:hover { background: var(--mg-erro); color: #fff; }
.btn-compacto { padding: 9px 20px; font-size: 14px; white-space: nowrap; }
.btn-bloco { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ---------- formulários ---------- */
.campo { margin-bottom: 18px; }
.campo label { display: block; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mg-tinta-2); margin-bottom: 6px; }
.campo input, .campo select, .campo textarea {
  width: 100%; font-family: var(--ff-texto); font-size: 16px; color: var(--mg-tinta);
  background: var(--mg-branco); border: 1px solid var(--mg-borda); border-radius: var(--r-sm);
  padding: 12px 14px; transition: border-color var(--transicao), box-shadow var(--transicao);
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--mg-verde-700); box-shadow: 0 0 0 3px rgba(45, 89, 74, .14);
}
.campo textarea { min-height: 130px; resize: vertical; }
.campo .campo-dica { font-size: 12.5px; color: var(--mg-tinta-2); margin-top: 5px; }
/* Endereço colado no texto ("https://magispharma.seusaude.com/evento/slug") não
 * tem onde quebrar e estica a caixa: em telefone isso vira rolagem horizontal. */
/* Fora da tabela: a tabela rola na própria caixa, e ali quebrar o e-mail no
 * meio da palavra é pior do que rolar. */
.campo-dica, .texto-apoio, .celula-detalhe, .pod-assinar-url { overflow-wrap: anywhere; }
.campo-linha { display: grid; grid-template-columns: 1fr; gap: 0 16px; }
@media (min-width: 640px) {
  .campo-linha { grid-template-columns: 1fr 1fr; }
  .campo-linha-3 { grid-template-columns: 2fr 1fr 1fr; }
  .campo-linha-21 { grid-template-columns: 2fr 1fr; }
}
.campo-check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; }
.campo-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--mg-verde-800); flex: 0 0 auto; }
.consentimento { background: var(--mg-creme); border: 1px solid var(--mg-borda); border-radius: var(--r-sm); padding: 14px 16px; margin: 22px 0 18px; }
.consentimento label { color: var(--mg-tinta-2); line-height: 1.55; }
/* Rótulo de frase corrida (consentimento, "manter conectado"): sem caixa alta.
 * Precisa de `label.` para vencer `.campo label`, que é mais específico que
 * uma classe sozinha e devolvia a frase inteira em MAIÚSCULAS. */
label.rotulo-simples { text-transform: none; letter-spacing: 0; font-size: 13.5px; font-weight: 400; }
.campo-check-alinhado { align-items: center; }
.campo-check-alinhado label { text-transform: none; letter-spacing: 0; margin: 0; }
.campo-area-alta { min-height: 200px; }
/* armadilha de robô: fora da tela sem display:none, que o preenchedor ignora */
.campo-armadilha { position: absolute; left: -9999px; }

/* ---------- flash ---------- */
.flash { padding: 14px 18px; border-radius: var(--r-sm); margin-bottom: 20px; font-size: 14.5px; border: 1px solid transparent; }
.flash-ok { background: var(--mg-ok-bg); color: #2A5433; border-color: #BDD6B4; }
.flash-erro { background: var(--mg-erro-bg); color: var(--mg-erro); border-color: #E4BDB2; }
.flash-aviso { background: var(--mg-aviso-bg); color: #6E6220; border-color: #DED9A8; }

/* ---------- badges de status ---------- */
.badge { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; }
.badge-ok { background: var(--mg-ok-bg); color: #2A5433; }
/* `badge-aviso` é o mesmo desenho de `badge-pendente`, com outro nome: em
 * "Últimas 3 vagas" nada está pendente, e classe com nome errado no lugar
 * certo é o começo de uma paleta que ninguém mais entende. */
.badge-pendente, .badge-aviso { background: var(--mg-aviso-bg); color: #6E6220; }
.badge-neutro { background: var(--mg-creme); color: var(--mg-tinta-2); }
.badge-erro { background: var(--mg-erro-bg); color: var(--mg-erro); }

/* ============================================================
   SITE PÚBLICO
   ============================================================ */
.tema-site { background: var(--mg-base); }

/* `padding-top` da area segura: o viewport-fit=cover que entrou no head faz o
 * conteudo ir ate a borda do iPhone, e sem isto a barra fica por baixo do
 * relogio e da bateria. Vale 0 em qualquer aparelho sem recorte. */
.site-topo { position: sticky; top: 0; z-index: 60; padding-top: env(safe-area-inset-top); background: rgba(247, 248, 243, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--mg-borda); }
.site-topo-inner { max-width: var(--larg-conteudo); margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; gap: 26px; }
.site-logo { display: flex; align-items: center; }
.site-logo img { display: block; }
/* O height="40" do HTML não vale aqui: o reset global `img { height: auto }`
 * anula o atributo e a logomarca renderizava no tamanho natural, 578px de
 * largura. A altura precisa morar no CSS. */
.site-logo .logo-completa { height: 40px; width: auto; }
.app-topbar-logo .logo-completa { height: 34px; width: auto; }
/* Em tela estreita a logomarca horizontal disputava espaço com o botão e o
 * menu, e o navegador a espremia até 10px de altura, ilegível. Abaixo de 520px
 * entra o símbolo da marca, que é legível em qualquer tamanho.
 * Precisa de `.site-logo .logo-simbolo`: com `.logo-simbolo` sozinha (0,1,0)
 * a regra perdia para `.site-logo img` (0,1,1) e o símbolo aparecia DUPLICADO
 * abaixo da logomarca completa em desktop. */
.site-logo .logo-simbolo, .app-topbar-logo .logo-simbolo { display: none; }
@media (max-width: 520px) {
  .site-logo .logo-completa, .app-topbar-logo .logo-completa { display: none; }
  .site-logo .logo-simbolo, .app-topbar-logo .logo-simbolo { display: block; height: 34px; width: auto; }
  .site-topo-inner { gap: 12px; padding: 12px 14px; }
  .site-topo-acoes { gap: 10px; }
}
.site-nav { display: none; gap: 24px; margin-left: 8px; }
.site-nav a { text-decoration: none; color: var(--mg-tinta); font-size: 15px; padding: 6px 2px; border-bottom: 2px solid transparent; white-space: nowrap; }
.site-nav a:hover { color: var(--mg-verde-800); }
.site-nav a.ativo { color: var(--mg-verde-800); border-bottom-color: var(--mg-verde-800); font-weight: 700; }
.site-topo-acoes { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.site-nav-login { display: none; text-decoration: none; color: var(--mg-verde-800); font-weight: 700; font-size: 15px; }
/* ALVO DE TOQUE DE 44px NOS BOTOES DO TOPO.
 * Medidos ao vivo em 390px: .site-burger e .app-burger nasciam com 38x38 e o
 * .app-topbar-perfil com 32x40, porque o icone tem 26px e o padding era 6px.
 * `min-width` junto com `min-height`: altura sozinha deixa o alvo estreito, que
 * e a armadilha classica dessa correcao. */
.site-burger { display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; color: var(--mg-verde-900); padding: 9px; min-width: 44px; min-height: 44px; cursor: pointer; }
.site-burger .ic { width: 26px; height: 26px; }
.site-menu-mobile { border-top: 1px solid var(--mg-borda); background: var(--mg-branco); display: flex; flex-direction: column; }
/* display:flex acima venceria o atributo hidden; sem esta regra o menu nasce aberto. */
.site-menu-mobile[hidden] { display: none; }
.site-menu-mobile a { padding: 14px 22px; text-decoration: none; color: var(--mg-tinta); border-bottom: 1px solid var(--mg-creme); font-size: 15.5px; }
@media (min-width: 860px) {
  .site-nav { display: flex; }
  .site-nav-login { display: inline; }
  .site-burger, .site-menu-mobile { display: none; }
}

/* hero: assimétrico, texto dominante à esquerda, arte da marca à direita */
.hero { background: var(--mg-verde-900); color: var(--mg-creme); position: relative; overflow: hidden; }
.hero-inner { max-width: var(--larg-conteudo); margin: 0 auto; padding: clamp(56px, 9vw, 96px) 20px clamp(60px, 9vw, 104px); position: relative; z-index: 1; }
.hero-grade { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
@media (min-width: 900px) { .hero-grade { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); } }
.hero h1 { color: var(--mg-branco); font-size: clamp(2.15rem, 5.4vw, 3.6rem); max-width: 15em; margin-bottom: 20px; }
.hero h1 em { font-style: normal; color: var(--mg-amarelo); }
.hero p { font-size: clamp(1rem, 2vw, 1.15rem); max-width: 36em; color: var(--mg-sage-suave); margin-bottom: 32px; }
.hero-acoes { display: flex; flex-wrap: wrap; gap: 14px; }

/* arte do herói: foto do acervo da marca emoldurada, com o círculo de traço
   fino do brandbook atrás. A foto entra a partir de 900px: em telefone ela
   empurraria a chamada e o botão para baixo da dobra. */
.hero-arte { position: relative; display: none; }
@media (min-width: 900px) { .hero-arte { display: block; } }
.hero-circulo { position: absolute; border: 1px solid rgba(195, 208, 184, .45); border-radius: 50%; }
.hero-circulo-1 { width: 300px; height: 300px; right: -40px; top: -34px; }
.hero-foto {
  position: relative; margin: 0; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid rgba(195, 208, 184, .35); box-shadow: var(--sombra-lg);
}
.hero-foto img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.hero-foto figcaption {
  position: absolute; left: 14px; bottom: 14px;
  background: rgba(27, 52, 43, .84); color: var(--mg-amarelo);
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 4px;
}

/* índice editorial (o que você encontra): linhas, não cards */
.secao-indice { padding-bottom: 84px; }
.indice { border-top: 1px solid var(--mg-verde-800); }
.indice-item {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'nome seta' 'desc seta';
  gap: 2px 18px; align-items: center;
  padding: 26px 6px; border-bottom: 1px solid var(--mg-borda);
  text-decoration: none; color: inherit;
  transition: background var(--transicao), padding-left var(--transicao);
}
@media (min-width: 860px) {
  .indice-item { grid-template-columns: minmax(200px, 300px) 1fr auto; grid-template-areas: 'nome desc seta'; gap: 24px; padding: 30px 10px; }
}
.indice-item:hover { background: var(--mg-creme); padding-left: 16px; }
/* A numeração 01/02/03/04 do índice saiu em 03/09/2026: videoaula, podcast,
 * material e evento não têm ordem entre si, então o número não informava nada e
 * era só o tique de página gerada por máquina. A numeração do FLUXO de acesso
 * fica, porque ali a sequência é real: cadastrar, entrar na lista, receber o
 * convite. */
/* miniatura do índice: some abaixo de 860px, onde a linha vira empilhada e a
   foto competiria com o título em vez de apoiar. */
.indice-miniatura { display: none; }
@media (min-width: 860px) {
  .indice-item { grid-template-columns: 104px minmax(180px, 260px) 1fr auto; grid-template-areas: 'foto nome desc seta'; }
  .indice-miniatura { grid-area: foto; display: block; width: 104px; border-radius: 10px; overflow: hidden; background: var(--mg-sage-suave); }
  .indice-miniatura img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
}
.indice-nome { grid-area: nome; font-family: var(--ff-titulo); font-size: clamp(1.35rem, 2.4vw, 1.7rem); color: var(--mg-verde-900); line-height: 1.15; }
.indice-desc { grid-area: desc; font-size: 14px; color: var(--mg-tinta-2); max-width: 44em; }
.indice-seta { grid-area: seta; color: var(--mg-verde-800); transition: transform var(--transicao); }
.indice-item:hover .indice-seta { transform: translateX(6px); }
.indice-seta .ic { width: 24px; height: 24px; }

/* manifesto: citação da promessa de marca sobre sage */
.manifesto { background: var(--mg-sage); padding: clamp(64px, 9vw, 104px) 0; position: relative; overflow: hidden; }
.manifesto-inner { position: relative; }
.manifesto-circulo { position: absolute; right: -40px; top: 50%; transform: translateY(-50%); width: 340px; height: 340px; border: 1px solid rgba(35, 68, 57, .25); border-radius: 50%; pointer-events: none; }
.manifesto blockquote { margin: 0; max-width: 30em; }
.manifesto blockquote p { font-family: var(--ff-titulo); font-size: clamp(1.4rem, 3vw, 2.05rem); line-height: 1.4; color: var(--mg-verde-950); margin: 0 0 22px; }
.manifesto cite { font-style: normal; font-family: var(--ff-texto); font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mg-verde-900); }

/* seção institucional: fotos reais da farmácia e do laboratório */
.secao-sobre { background: var(--mg-amarelo); }
.sobre-grade { display: grid; gap: 40px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 960px) { .sobre-grade { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 60px; } }
.sobre-grade > * { min-width: 0; }
.sobre-texto p { color: var(--mg-tinta); max-width: 34em; }
.sobre-fatos { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 13px; }
.sobre-fatos li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; }
.sobre-fatos .ic { color: var(--mg-verde-800); margin-top: 3px; width: 18px; height: 18px; }
.sobre-fotos { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
.sobre-fotos > * { min-width: 0; }
.sobre-fotos figure { margin: 0; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sombra); position: relative; }
.sobre-fotos figure:first-child { grid-column: 1 / -1; }
.sobre-fotos img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sobre-fotos figure:first-child img { aspect-ratio: 16 / 9; }
.sobre-fotos figure:not(:first-child) img { aspect-ratio: 4 / 3; }
.sobre-legenda {
  position: absolute; left: 12px; bottom: 12px;
  background: rgba(27, 52, 43, .84); color: var(--mg-amarelo);
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 4px;
}

/* como funciona: linha do tempo tipográfica, sem cards */
.secao-fluxo { padding-bottom: 90px; }
.fluxo { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 34px; counter-reset: nada; }
@media (min-width: 860px) { .fluxo { grid-template-columns: repeat(3, 1fr); gap: 44px; } }
.fluxo li { position: relative; padding-top: 20px; border-top: 1px solid var(--mg-borda); }
.fluxo li::before { content: ''; position: absolute; left: 0; top: -1px; width: 56px; height: 3px; background: var(--mg-verde-800); }
/* Mesmo caso da numeração do índice: 3,38:1 sobre o creme da página. */
.fluxo-num { font-family: var(--ff-texto); font-size: 13px; font-weight: 700; letter-spacing: .14em; color: var(--mg-verde-700); display: block; margin-bottom: 8px; }
.fluxo h3 { font-size: 1.3rem; margin-bottom: 8px; }
.fluxo p { font-size: 14.5px; color: var(--mg-tinta-2); margin: 0; max-width: 30em; }

/* seções genéricas */
.secao { padding: clamp(52px, 8vw, 76px) 0; }
.secao-inner { max-width: var(--larg-conteudo); margin: 0 auto; padding: 0 20px; }
.titulo-secao { font-size: clamp(1.7rem, 3.6vw, 2.4rem); max-width: 22em; }
.titulo-pagina { font-size: clamp(1.9rem, 4vw, 2.7rem); }
.secao-cab { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 34px; }
.secao-cab p { max-width: 46em; color: var(--mg-tinta-2); margin: 0; }

/* cartões de conteúdo (videoaula, podcast, material, evento) */
.grade-cartoes { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .grade-cartoes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grade-cartoes { grid-template-columns: repeat(3, 1fr); } }
.grade-cartoes-2 { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 800px) { .grade-cartoes-2 { grid-template-columns: repeat(2, 1fr); } }
/* Item de grade nasce com min-width:auto, ou seja, nunca fica menor que o
 * conteúdo. Foi assim que a tabela de 640px de /admin/categorias empurrou a
 * página inteira 344px para o lado em telefone: a caixa que deveria rolar
 * sozinha não podia encolher. Vale para toda grade da plataforma. */
.grade-cartoes > *, .grade-cartoes-2 > *, .evento-grade > *, .campo-linha > *, .atalhos > * { min-width: 0; }

.cartao { background: var(--mg-branco); border: 1px solid var(--mg-borda); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sombra-sm); display: flex; flex-direction: column; transition: box-shadow var(--transicao), transform var(--transicao); }
a.cartao { text-decoration: none; color: inherit; }
a.cartao:hover { box-shadow: var(--sombra); transform: translateY(-2px); }
.cartao-capa { position: relative; aspect-ratio: 16 / 9; background: var(--mg-sage-suave); overflow: hidden; }
.cartao-capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cartao-capa-selo { position: absolute; left: 12px; top: 12px; background: rgba(27, 52, 43, .85); color: var(--mg-amarelo); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; border-radius: 4px; }
.cartao-capa-tempo { position: absolute; right: 12px; bottom: 12px; background: rgba(27, 52, 43, .85); color: #fff; font-size: 12px; padding: 3px 9px; border-radius: 4px; }
.cartao-corpo { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.cartao-corpo h3 { font-size: 1.18rem; margin: 0; }
.cartao-corpo h3 a { text-decoration: none; color: inherit; }
.cartao-meta { font-size: 12.5px; color: var(--mg-tinta-2); letter-spacing: .04em; text-transform: uppercase; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.cartao-meta .ic { width: 15px; height: 15px; vertical-align: -3px; }
/* A caixa alta da meta transformava "19h30" em "19H30": o símbolo da hora é
 * minúsculo (12/09/2026). A hora fica em <time class="hora"> e escapa. */
.cartao-meta .hora { text-transform: none; }
.cartao-desc { font-size: 14px; color: var(--mg-tinta-2); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* evento em destaque na home e listas */
.evento-linha { display: flex; gap: 18px; align-items: stretch; background: var(--mg-branco); border: 1px solid var(--mg-borda); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sombra-sm); text-decoration: none; color: inherit; transition: box-shadow var(--transicao); }
.evento-linha:hover { box-shadow: var(--sombra); }
.evento-data { flex: 0 0 92px; background: var(--mg-verde-800); color: var(--mg-creme); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px 8px; text-align: center; }
@media (max-width: 480px) { .evento-data { flex-basis: 74px; } .evento-data strong { font-size: 1.5rem; } }
.evento-data strong { font-family: var(--ff-titulo); font-size: 1.9rem; line-height: 1; color: #fff; }
.evento-data span { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; margin-top: 4px; }
.evento-corpo { padding: 16px 18px 16px 4px; display: flex; flex-direction: column; gap: 6px; justify-content: center; min-width: 0; }
.evento-corpo h3 { font-size: 1.2rem; margin: 0; }

/* chamada final: faixa cheia assimétrica */
.cta-final { background: var(--mg-verde-900); color: var(--mg-creme); position: relative; overflow: hidden; }
.cta-final::after {
  content: ''; position: absolute; right: -90px; bottom: -170px; width: 380px; height: 380px;
  background: radial-gradient(circle at 50% 0%, rgba(165, 185, 156, .22) 0 49.5%, transparent 50%);
  border-radius: 50%;
}
/* faixa com foto: a camada verde sobre a imagem existe para o texto claro
   manter contraste no PIOR pixel da foto, que é bem claro. */
.cta-final-foto { background-image: linear-gradient(100deg, rgba(27, 52, 43, .95) 0%, rgba(27, 52, 43, .88) 46%, rgba(35, 68, 57, .72) 100%), url('/assets/img/faixa-loja.jpg'); background-size: cover; background-position: center 55%; }
.cta-final-foto::after { display: none; }
.cta-final-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 26px; padding-top: clamp(48px, 7vw, 72px); padding-bottom: clamp(48px, 7vw, 72px); position: relative; z-index: 1; }
.cta-final h2 { color: #fff; font-size: clamp(1.5rem, 3vw, 2.1rem); max-width: 20em; margin-bottom: 8px; }
.cta-final p { color: var(--mg-sage-suave); margin: 0; }

/* rodapé do site */
.site-rodape { background: var(--mg-verde-950); color: var(--mg-sage-suave); margin-top: 80px; }
/* Depois da faixa de chamada o respiro branco virava uma falha de 80px entre
   duas areas escuras: colar o rodape na faixa.
   A regra `.cta-final + .site-rodape` NUNCA casava (10/09/2026): a faixa e o
   ultimo filho de <main> e o rodape e irmao do <main>, nao da faixa. Medido
   em 5 tamanhos: 80px de branco entre as duas areas escuras. A seletora
   certa olha o <main> cujo ultimo filho e a faixa.
   E `:last-child` TAMBEM nao casava na home (medido de novo em 10/09/2026,
   80px em 1440 e em 390): o ultimo filho de <main> ali e o <script> do
   Turnstile, impresso depois da faixa. `:last-of-type` olha so as <section>,
   que e o que importa: a faixa e a ultima secao da pagina. */
main:has(> section.cta-final:last-of-type) + .site-rodape { margin-top: 0; }
.site-rodape a { color: var(--mg-creme); text-decoration: none; }
.site-rodape a:hover { color: var(--mg-amarelo); }
.site-rodape-inner { max-width: var(--larg-conteudo); margin: 0 auto; padding: 54px 20px 30px; display: grid; gap: 34px; grid-template-columns: 1fr; }
@media (min-width: 820px) { .site-rodape-inner { grid-template-columns: 1.4fr 1fr 1.2fr; } }
.site-rodape-col { display: flex; flex-direction: column; gap: 9px; font-size: 14.5px; }
/* A coluna e flex em coluna e ESTICA o filho: a etiqueta "Plataforma" media
   281px de caixa para 77px de texto (10/09/2026). O chip fica do tamanho da
   palavra. */
.site-rodape-col > .etiqueta { align-self: flex-start; width: auto; }
.site-rodape-col p { margin: 0; font-size: 14px; }
.site-rodape-base {
  border-top: 1px solid rgba(165, 185, 156, .25); font-size: 12.5px; padding: 16px 20px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 26px; text-align: center;
}
/* crédito de desenvolvimento: texto + logomarca SeuSaúde */
/* O credito e uma frase MAIS a logomarca. Sem `flex-wrap`, o texto quebrava em
   duas linhas dentro do proprio item e a logomarca ficava pendurada na lateral,
   fora do centro, em toda tela de telefone (visto em 06/09/2026 no rodape do
   app e do site). Quebrando o grupo, a logomarca desce centralizada. */
.credito-dev { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 9px; text-align: center; color: var(--mg-sage-suave); text-decoration: none; min-height: 40px; }
.credito-dev img { height: 13px; width: auto; display: block; }
.credito-dev:hover { color: var(--mg-creme); }

/* ---------- botão flutuante de WhatsApp (site público, 10/09/2026) ----------
   Fixo no canto inferior direito, 56px de alvo, verde da logomarca com o glifo
   em branco (monocromático da paleta, sem o verde do WhatsApp). Em telefone
   vira só o círculo. Regras da casa para botão fixo: some enquanto o popup de
   lead está aberto (senão cobre o "Agora não") e o rodapé ganha folga embaixo,
   para no fim da rolagem o botão não ficar sobre o crédito da plataforma. */
.wa-flutuante {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 56px; padding: 0 20px 0 14px; border-radius: 999px;
  background: var(--mg-verde-800); color: #fff; text-decoration: none;
  font-family: var(--ff-texto); font-weight: 700; font-size: 14.5px; line-height: 1;
  box-shadow: var(--sombra-lg);
  transition: background var(--transicao), transform var(--transicao), opacity var(--transicao);
}
.wa-flutuante svg { width: 28px; height: 28px; flex: 0 0 auto; fill: currentColor; }
.wa-flutuante:hover { background: var(--mg-verde-900); color: #fff; transform: translateY(-2px); }
.wa-flutuante:focus-visible { outline: 3px solid var(--mg-amarelo); outline-offset: 3px; }
@media (max-width: 640px) {
  .wa-flutuante { width: 56px; height: 56px; padding: 0; justify-content: center; right: 14px; bottom: 14px; }
  .wa-flutuante-rotulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
body:has([data-lead-popup]:not([hidden])) .wa-flutuante { opacity: 0; pointer-events: none; }
body:has(> .wa-flutuante) .site-rodape-base { padding-bottom: 86px; }
@media (prefers-reduced-motion: reduce) { .wa-flutuante:hover { transform: none; } }

.secao-erro { text-align: left; padding: 90px 0; }

/* ============================================================
   AUTENTICAÇÃO (login, cadastro, tokens)
   ============================================================ */
.tema-auth { background: var(--mg-base); }
.auth-grade { min-height: 100vh; display: grid; grid-template-columns: 1fr; }
@media (min-width: 980px) { .auth-grade { grid-template-columns: minmax(380px, 44%) 1fr; } }
/* painel do acesso: recepção real da farmácia (foto oficial, com a frase
   "Transformamos fórmulas em bem-estar" na parede) sob camada verde forte. A
   foto tem áreas claras, então a camada precisa ser opaca o bastante para o
   texto creme passar no contraste, não só decorativa. */
.auth-painel {
  display: none; color: var(--mg-creme); padding: 48px 52px;
  flex-direction: column; justify-content: space-between; position: relative; overflow: hidden;
  background-color: var(--mg-verde-900);
  background-image: linear-gradient(180deg, rgba(27, 52, 43, .92) 0%, rgba(27, 52, 43, .84) 55%, rgba(35, 68, 57, .92) 100%), url('/assets/img/painel-acesso-loja.jpg');
  background-size: cover; background-position: center 30%;
}
.auth-painel::after { content: ''; position: absolute; left: -140px; bottom: -220px; width: 460px; height: 460px; border-radius: 50%; background: rgba(165, 185, 156, .18); }
@media (min-width: 980px) { .auth-painel { display: flex; } }
.auth-painel-logo img { display: block; }
/* Era um <h2> e vinha ANTES do <h1> da tela no DOM: a pagina de login abria a
 * hierarquia no nivel 2 e quem navega por titulos comecava pelo meio. Virou
 * paragrafo com aparencia de titulo, porque o texto e da moldura da marca, nao
 * da tarefa. As tres declaracoes abaixo repoem o que a regra de h1..h4 dava. */
.auth-painel-titulo { color: #fff; font-family: var(--ff-titulo); font-weight: 400; line-height: 1.18; letter-spacing: .01em; font-size: clamp(1.7rem, 2.6vw, 2.4rem); max-width: 13em; margin: 0 0 .5em; }
.auth-painel-texto p { color: var(--mg-sage-suave); max-width: 34em; }
.auth-painel-selo { font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--mg-sage); position: relative; }
/* min-width:0: item de grid nasce com min-width:auto e o conteúdo do cartão
 * (campo de 300px, widget do Turnstile) empurrava a coluna para além da tela,
 * criando rolagem horizontal em telefone estreito. */
.auth-conteudo { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; min-width: 0; }
.auth-logo-mobile { margin-bottom: 26px; max-width: 100%; }
/* A logomarca tem altura fixa de 44px no HTML: em tela de 320px a largura
   correspondente passava dos 300px e o nome da marca aparecia cortado.
   `object-fit: contain` deixa a altura fixa e encolhe o desenho quando o
   max-width corta a largura. */
.auth-logo-mobile img { height: 44px; width: auto; max-width: 100%; object-fit: contain; }
/* A âncora em volta da logomarca era inline: a caixa dela media a linha de
 * texto (338x17) e não a imagem de 44px que ela envolve. O clique na imagem
 * já chegava ao link, mas o alvo medido pelo auditor de responsividade era
 * de 17px em todas as telas de acesso (04/09/2026). */
.auth-logo-mobile a { display: inline-flex; align-items: center; max-width: 100%; }
@media (min-width: 980px) { .auth-logo-mobile { display: none; } }
.auth-cartao { width: 100%; min-width: 0; max-width: 460px; background: var(--mg-branco); border: 1px solid var(--mg-borda); border-radius: var(--r-lg); padding: 36px 32px; box-shadow: var(--sombra); }
@media (max-width: 480px) { .auth-conteudo { padding: 26px 14px; } .auth-cartao { padding: 28px 20px; } }
/* O cadastro em coluna única de 640px exigia duas telas e meia de rolagem em
 * desktop: cartão mais largo + campos pareados derrubam a altura pela metade. */
.auth-cartao-largo { max-width: 780px; }
/* Em desktop o cadastro precisa caber SEM rolagem: respiros menores valem só
 * aqui, o telefone continua com o espaçamento confortável. */
@media (min-width: 980px) {
  /* No cadastro o painel encolhe para dar largura ao formulário: com 44% a
   * coluna do cartão ficava com 758px e o formulário não cabia sem rolagem. */
  .auth-grade-largo { grid-template-columns: minmax(300px, 30%) 1fr; }
  .auth-conteudo-largo { padding: 12px 20px; justify-content: flex-start; }
  .auth-cartao-largo { max-width: 940px; padding: 24px 34px 18px; }
  .auth-cartao-largo h1 { font-size: 1.45rem; margin-bottom: 3px; }
  .auth-cartao-largo .auth-sub { margin-bottom: 8px; font-size: 13.5px; }
  .form-compacto .campo { margin-bottom: 9px; }
  .form-compacto .campo label { margin-bottom: 4px; font-size: 12px; }
  .form-compacto .campo input, .form-compacto .campo select { padding: 9px 12px; font-size: 15px; }
  .form-compacto .campo .campo-dica { margin-top: 3px; font-size: 11.5px; }
  /* A nota de campos obrigatorios custava 34,6px e devolvia 9px de rolagem ao
   * cadastro em 1366x768, que foi ajustado justamente para caber sem rolar.
   * Encolhida ela ocupa cerca de 19px e a tela volta a caber. */
  .form-compacto .form-obrigatorio-nota { font-size: 11.5px; margin: 0 0 2px; }
  .form-compacto .form-secao-titulo { margin: 12px 0 10px; padding-bottom: 5px; font-size: 12px; }
  .form-compacto .consentimento { margin: 10px 0 8px; padding: 10px 12px; }
  .form-compacto .consentimento label { font-size: 12.5px; }
  /* O painel já leva ao início pela logomarca; o link solto embaixo do cartão
   * era o que devolvia a rolagem. */
  .auth-conteudo-largo .auth-voltar { display: none; }
}
/* Tela baixa (notebook 768p): o que ainda sobrar sai dos detalhes, não do campo. */
@media (min-width: 980px) and (max-height: 860px) {
  .auth-conteudo-largo { padding: 8px 20px; }
  .auth-cartao-largo { padding: 16px 28px 12px; border-radius: var(--r-md); }
  .auth-cartao-largo h1 { font-size: 1.3rem; }
  .auth-cartao-largo .auth-sub { margin-bottom: 6px; }
  .form-compacto .campo .campo-dica { display: none; }
  .form-compacto .campo { margin-bottom: 6px; }
  .form-compacto .campo input, .form-compacto .campo select { padding: 7px 11px; }
  .form-compacto .form-secao-titulo { margin: 8px 0 7px; }
  .form-compacto .consentimento label { font-size: 11.5px; }
}
.form-compacto .campo { margin-bottom: 14px; }
.form-compacto .form-secao-titulo { margin: 22px 0 14px; }
.form-compacto .form-secao-titulo:first-of-type { margin-top: 4px; }
.form-compacto .consentimento { margin: 16px 0 14px; padding: 12px 14px; }
.form-compacto .consentimento label { font-size: 13px; }
/* Fecho do cadastro: no telefone tudo empilha; em desktop o consentimento fica
 * ao lado da verificação + botão, cortando uns 60px de altura. */
.envio-coluna { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.envio-coluna .turnstile-caixa { margin: 0; }
@media (min-width: 980px) {
  .final-linha { display: flex; gap: 18px; align-items: stretch; margin-top: 6px; }
  .final-linha .consentimento { flex: 1; margin: 0; }
  /* Coluna do envio com a LARGURA do widget do Turnstile (300px): widget e
   * botão empilhados no mesmo eixo, sem sobra morta ao redor. */
  .final-linha .envio-coluna { flex: 0 0 302px; justify-content: center; margin-top: 0; }
  .final-linha .envio-coluna .btn { width: 100%; padding-left: 12px; padding-right: 12px; }
}
.auth-cartao h1 { font-size: 1.75rem; margin-bottom: 6px; }
.auth-cartao .auth-sub { font-size: 14.5px; color: var(--mg-tinta-2); margin-bottom: 24px; }
/* cabeçalho do cartão com ação secundária no canto ("Já tenho acesso"):
 * solta no rodapé ela deixava uma linha órfã e um vazio embaixo do cartão */
.auth-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px 22px; flex-wrap: wrap; }
/* O bloco do título precisa de flex:1 1 0: com a largura automática ele ocupava
 * a linha inteira e empurrava o link para baixo, abrindo um vazio no cartão. */
.auth-cab > div { flex: 1 1 0; min-width: min(260px, 100%); }
.auth-cab-link { font-size: 14px; font-weight: 700; white-space: nowrap; margin-top: 9px; display: inline-flex; align-items: center; min-height: 32px; }
.auth-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: 14px; margin-top: 18px; }
/* Ação que precisa de POST (o "Sair sem definir agora" da primeira senha, 12/09/2026):
 * o formulário fica em linha e o botão veste o mesmo desenho dos links do bloco,
 * inclusive o alvo de 48px e a cor do tema escuro (herdada de `a`). */
.auth-links .form-inline { display: inline; margin: 0; }
.auth-links .btn-link { background: none; border: 0; padding: 0; font: inherit; color: var(--mg-verde-800); text-decoration: underline; cursor: pointer; min-height: 48px; display: inline-flex; align-items: center; }
html[data-tema="escuro"] .auth-links .btn-link { color: #8FC29B; }
.auth-voltar { margin-top: 22px; font-size: 14px; }
/* Alvo de toque: no telefone, link de texto solto tinha 23px de altura, metade
 * do mínimo confortável. Cresce a área sem mudar o desenho da tipografia. */
@media (max-width: 768px) {
  .auth-links a, .auth-voltar a, .site-rodape-col a { display: inline-flex; align-items: center; min-height: 48px; }
  /* "Já tenho acesso" no canto do cartão de cadastro tinha 32px no toque (12/09/2026). */
  .auth-cab-link { min-height: 48px; margin-top: 0; }
  .site-rodape-col { gap: 0; }
  /* Mesma regra para os links de navegação secundária das áreas internas:
     "Ver todas", "Voltar", os aplicativos de podcast e o Sair da gestão. */
  .bloco-secao-cab a, .voltar-linha a, .pod-assinar-apps a { display: inline-flex; align-items: center; min-height: 48px; }
  .adm-sidebar-rodape button, .app-sidebar-nav a, .adm-grupo a { min-height: 40px; }
  .detalhes-cartao summary { min-height: 40px; display: flex; align-items: center; }
  .tabela td a { display: inline-flex; align-items: center; min-height: 40px; }
}
.auth-voltar a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.ic-voltar { transform: rotate(180deg); }
.ic-cima { transform: rotate(-90deg); }
.ic-baixo { transform: rotate(90deg); }
/* O widget do Turnstile tem largura FIXA de 300px. Em tela de 360px, com o
 * respiro do cartão, sobram 276px: a página passava a rolar na horizontal
 * (achado do eixo de layout em 18/08/2026). Reduzir o widget é a única saída,
 * porque a largura vem de dentro de um iframe de outro domínio. */
.turnstile-caixa { margin: 6px 0 16px; min-height: 66px; max-width: 100%; overflow: hidden; }
/* O widget do Turnstile tem 300px FIXOS, vindos de um iframe de outro domínio:
 * em tela de 360px sobram 276px dentro do cartão e a página passava a rolar na
 * horizontal. `transform: scale()` não resolve, porque encolhe só o desenho e
 * deixa a CAIXA com os mesmos 300px, que continuam esticando o cartão. `zoom`
 * encolhe a caixa de verdade, que é o que o layout enxerga. */
@media (max-width: 400px) {
  .turnstile-caixa { zoom: .88; }
}
/* 320px (iPhone SE): sobram 237px dentro do cartão, 300 x .88 ainda estoura. */
@media (max-width: 360px) {
  .turnstile-caixa { zoom: .8; }
  .auth-cartao { padding: 24px 16px; }
  .auth-conteudo { padding: 22px 10px; }
}

/* ============================================================
   ÁREA DO PRESCRITOR
   ============================================================ */
.tema-app { background: var(--mg-base); }
.app-grade { min-height: 100vh; display: flex; }

/* MENU FORA DA TELA CONTINUA NA ORDEM DE TABULACAO.
 * `transform: translateX(-100%)` so muda a pintura: os links seguem focaveis.
 * No telefone, com o menu fechado, o Tab depois do botao de menu entrava numa
 * lista de seis links invisiveis e o foco sumia da tela. `visibility: hidden`
 * tira o ramo inteiro do teclado E do leitor de tela sem mexer no desenho.
 * A visibilidade e adiada por 0,22s no FECHAMENTO (a transicao roda com o
 * elemento ainda visivel) e volta na hora na ABERTURA. */
.app-sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 90; width: 264px;
  background: var(--mg-verde-950); color: var(--mg-creme);
  display: flex; flex-direction: column; padding: 26px 18px 20px;
  transform: translateX(-100%); visibility: hidden;
  transition: transform .22s ease, visibility 0s linear .22s;
}
.app-sidebar.aberto { transform: translateX(0); visibility: visible; box-shadow: var(--sombra-lg); transition: transform .22s ease, visibility 0s; }
@media (min-width: 1024px) {
  .app-sidebar { transform: none; visibility: visible; position: sticky; top: 0; height: 100vh; flex: 0 0 264px; }
}
.app-sidebar-logo { display: block; margin: 0 8px 30px; }
.app-sidebar-nav { display: flex; flex-direction: column; gap: 4px; }
.app-sidebar-nav a, .app-sidebar-perfil, .form-sair button {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 10px;
  color: var(--mg-sage-suave); text-decoration: none; font-size: 15px; font-family: var(--ff-texto);
  background: none; border: 0; width: 100%; cursor: pointer; text-align: left;
  transition: background var(--transicao), color var(--transicao);
}
.app-sidebar-nav a:hover, .app-sidebar-perfil:hover, .form-sair button:hover { background: rgba(165, 185, 156, .14); color: #fff; }
.app-sidebar-nav a.ativo { background: var(--mg-verde-800); color: #fff; font-weight: 700; position: relative; }
.app-sidebar-nav a.ativo::before { content: ''; position: absolute; left: -18px; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--mg-amarelo); }
.app-sidebar-rodape { margin-top: auto; border-top: 1px solid rgba(165, 185, 156, .22); padding-top: 14px; display: flex; flex-direction: column; gap: 4px; }
.app-sidebar-perfil.ativo { background: var(--mg-verde-800); color: #fff; }
.app-sidebar-perfil-textos { display: flex; flex-direction: column; min-width: 0; }
.app-sidebar-perfil-textos strong { font-size: 14px; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-sidebar-perfil-textos small { font-size: 12px; opacity: .8; }

.app-backdrop { position: fixed; inset: 0; z-index: 80; background: rgba(27, 52, 43, .5); }

.app-principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* Mesma área segura do `.site-topo`: com `viewport-fit=cover` no head, sem o
 * `padding-top` a barra fica por baixo do relógio e da bateria do iPhone. */
.app-topbar {
  position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 14px;
  background: rgba(247, 248, 243, .94); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--mg-borda);
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
}
@media (min-width: 1024px) { .app-topbar { display: none; } }
.app-burger { background: none; border: 0; color: var(--mg-verde-900); padding: 9px; min-width: 44px; min-height: 44px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.app-burger .ic { width: 26px; height: 26px; }
.app-topbar-logo { margin-right: auto; display: flex; }
.app-topbar-perfil { color: var(--mg-verde-900); padding: 6px; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* O respiro que afastava o conteúdo da barra inferior fixa (110px) desceu para
 * o rodapé, que agora fecha a coluna. */
.app-conteudo { flex: 1; width: 100%; max-width: 1060px; margin: 0 auto; padding: 30px 20px 34px; }
@media (min-width: 1024px) { .app-conteudo { padding: 40px 36px 40px; } }

/* rodapé da área do prescritor (04/09/2026): aviso de privacidade e crédito da
 * plataforma. Fundo claro, então a logomarca é a colorida e o crédito herda a
 * cor de texto de apoio, não a do rodapé escuro do site. O padding-bottom no
 * telefone é o que o tira de baixo da barra inferior fixa (cerca de 62px mais a
 * área segura do iPhone); em desktop a barra não existe. */
.app-rodape {
  border-top: 1px solid var(--mg-borda); margin-top: auto;
  padding: 14px 20px calc(92px + env(safe-area-inset-bottom));
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 26px;
  font-size: 12.5px; color: var(--mg-tinta-2); text-align: center;
}
.app-rodape a, .app-rodape .credito-dev { color: var(--mg-tinta-2); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.app-rodape a:hover, .app-rodape .credito-dev:hover { color: var(--mg-verde-800); }
@media (min-width: 1024px) { .app-rodape { padding: 14px 36px 24px; } }

/* convite para instalar o aplicativo (app.js): só aparece fora do modo
 * instalado, e só quando o navegador ofereceu o beforeinstallprompt ou é o
 * Safari do iPhone, que não oferece nada e precisa da instrução escrita. */
.instalar-app {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
  background: var(--mg-branco); border: 1px solid var(--mg-borda); border-left: 4px solid var(--mg-verde-800);
  border-radius: var(--r-md); padding: 16px 18px; margin: 0 0 34px; box-shadow: var(--sombra-sm);
}
.instalar-app > img { width: 40px; height: auto; flex: 0 0 auto; }
.instalar-app-texto { flex: 1 1 240px; min-width: 0; }
.instalar-app-texto strong { font-family: var(--ff-titulo); font-weight: 400; font-size: 1.1rem; color: var(--mg-verde-900); display: block; margin-bottom: 2px; }
.instalar-app-texto p { margin: 0; font-size: 13.5px; color: var(--mg-tinta-2); }
.instalar-app-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.instalar-app-acoes .btn { min-height: 44px; }

.app-bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: flex; background: var(--mg-branco); border-top: 1px solid var(--mg-borda);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
@media (min-width: 1024px) { .app-bottom-nav { display: none; } }
.app-bottom-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; text-decoration: none; color: var(--mg-tinta-2); font-size: 11px; border-radius: 8px; }
.app-bottom-nav a.ativo { color: var(--mg-verde-800); font-weight: 700; }
.app-bottom-nav .ic { width: 22px; height: 22px; }

/* cabeçalho de página interna */
.pagina-cab { margin-bottom: 26px; }
.pagina-cab h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: 4px; }
.pagina-cab p { color: var(--mg-tinta-2); margin: 0; max-width: 56em; }
.pagina-cab-linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }

/* filtros por categoria */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.filtros a { text-decoration: none; font-size: 13.5px; padding: 7px 16px; border-radius: 999px; border: 1px solid var(--mg-borda); color: var(--mg-tinta-2); background: var(--mg-branco); transition: all var(--transicao); }
.filtros a:hover { border-color: var(--mg-verde-700); color: var(--mg-verde-800); }
.filtros a.ativo { background: var(--mg-verde-800); border-color: var(--mg-verde-800); color: var(--mg-creme); font-weight: 700; }

/* player de vídeo */
.player-moldura { position: relative; aspect-ratio: 16 / 9; background: var(--mg-verde-950); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sombra); margin-bottom: 24px; }
.player-moldura iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* assinar o podcast no aplicativo */
.pod-assinar { background: var(--mg-verde-900); color: var(--mg-creme); border-radius: var(--r-md); padding: 24px 24px 22px; margin-bottom: 26px; position: relative; overflow: hidden; }
.pod-assinar::after { content: ''; position: absolute; right: -70px; top: -110px; width: 240px; height: 240px; border: 1px solid rgba(195, 208, 184, .3); border-radius: 50%; pointer-events: none; }
.pod-assinar h2 { color: #fff; font-size: 1.3rem; margin-bottom: 6px; }
.pod-assinar p { color: var(--mg-sage-suave); font-size: 14px; margin: 0 0 14px; max-width: 52em; }
.pod-assinar-linha { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; position: relative; z-index: 1; }
.pod-assinar-url { flex: 1 1 260px; min-width: 0; font-family: var(--ff-texto); font-size: 12.5px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(195, 208, 184, .35); border-radius: 9px; padding: 10px 12px; color: var(--mg-amarelo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pod-assinar-apps { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; position: relative; z-index: 1; }
/* Alvo de toque de verdade nesta linha.
 * O botão de gerar novo link do feed tinha `padding:0` e nascia com 260x13:
 * 13px de altura não se acerta com o dedo, e é justamente o botão que a pessoa
 * procura com pressa, depois de perceber que compartilhou o link pessoal sem
 * querer. Altura sozinha não resolveria se a largura fosse curta, mas aqui a
 * largura já passa de 200px: o que faltava era altura.
 * Os links irmãos recebem o mesmo tratamento para a linha não ficar desalinhada,
 * com um alvo alto no meio de vários baixos. */
.pod-assinar-apps a,
.pod-assinar-rotacionar { display: inline-flex; align-items: center; min-height: 44px; }
.pod-assinar-apps a { color: var(--mg-creme); font-size: 13px; }
.pod-assinar-apps form { display: inline-flex; }
.pod-assinar-rotacionar {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--ff-texto); font-size: 13px; color: var(--mg-sage-suave);
  text-decoration: underline; text-align: left;
}
.pod-assinar-rotacionar:hover { color: #fff; }
/* Tema escuro (board 8): no claro o fundo usa --mg-verde-900 (verde escuro),
   mas no escuro esse token é claro (#D6E3D2), o que virava uma caixa clara com
   título branco por cima, ilegível. Superfície escura própria, como os demais
   cartões do app. */
html[data-tema="escuro"] .pod-assinar { background: #182420; border: 1px solid var(--mg-borda); color: var(--mg-tinta); }
html[data-tema="escuro"] .pod-assinar h2 { color: var(--mg-verde-900); }
html[data-tema="escuro"] .pod-assinar p { color: var(--mg-sage-suave); }
html[data-tema="escuro"] .pod-assinar::after { border-color: var(--mg-borda); }
html[data-tema="escuro"] .pod-assinar-url { background: rgba(143, 194, 155, .12); border-color: var(--mg-borda); color: var(--mg-verde-800); }
html[data-tema="escuro"] .pod-assinar-apps a { color: var(--mg-verde-800); }
html[data-tema="escuro"] .pod-assinar-rotacionar { color: var(--mg-sage-suave); }
html[data-tema="escuro"] .pod-assinar-rotacionar:hover { color: var(--mg-tinta); }

/* retomar reprodução */
.player-retomar { margin: 6px 0 0; }
.player-retomar button { background: none; border: 1px solid var(--mg-verde-700); color: var(--mg-verde-800); font-family: var(--ff-texto); font-size: 12.5px; font-weight: 700; border-radius: 999px; padding: 6px 14px; cursor: pointer; transition: background var(--transicao), color var(--transicao); }
.player-retomar button:hover { background: var(--mg-verde-800); color: var(--mg-creme); }

/* item de podcast */
.podcast-item { display: flex; flex-direction: column; gap: 14px; background: var(--mg-branco); border: 1px solid var(--mg-borda); border-radius: var(--r-md); padding: 20px; box-shadow: var(--sombra-sm); }
.podcast-cab { display: flex; gap: 16px; align-items: flex-start; }
.podcast-capa { flex: 0 0 86px; width: 86px; height: 86px; border-radius: 12px; object-fit: cover; background: var(--mg-sage-suave); }
.podcast-cab h3 { font-size: 1.2rem; margin: 0 0 4px; }
.podcast-item audio { width: 100%; }
.podcast-embed iframe { width: 100%; border: 0; border-radius: 12px; }

/* material (linha com download) */
.material-item { display: flex; align-items: center; gap: 16px; background: var(--mg-branco); border: 1px solid var(--mg-borda); border-radius: var(--r-md); padding: 16px 18px; box-shadow: var(--sombra-sm); }
.material-icone { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 10px; background: var(--mg-creme); color: var(--mg-verde-800); display: flex; align-items: center; justify-content: center; }
.material-icone .ic { width: 24px; height: 24px; }
.material-textos { min-width: 0; flex: 1; }
.material-textos h3 { font-size: 1.05rem; margin: 0 0 2px; }
.material-textos p { margin: 0; font-size: 13px; color: var(--mg-tinta-2); }
.lista-materiais { display: flex; flex-direction: column; gap: 12px; }

/* painel do prescritor: atalhos */
.atalhos { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); margin-bottom: 34px; }
@media (min-width: 1000px) { .atalhos { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
/* No telefone o atalho vira LINHA, nao cartao (09/09/2026).
   Antes: quatro cartoes de 120px em 2x2, com icone redondo e o nome, ou seja,
   os mesmos quatro destinos da barra inferior repetidos logo acima dela,
   gastando 250px antes do primeiro conteudo do painel. Agora cada atalho e uma
   linha de 60px com o icone a esquerda, o nome e a CONTAGEM do acervo: os 250px
   caem para 130px e o atalho passa a dizer algo que a barra de baixo nao diz.
   A descricao continua fora, que e o que nao cabe em tela estreita. */
@media (max-width: 639px) {
  .atalhos { grid-template-columns: 1fr; gap: 8px; }
  .atalhos .atalho {
    flex-direction: row; align-items: center; gap: 12px;
    min-height: 58px; padding: 10px 14px;
  }
  .atalho-icone { width: 36px; height: 36px; flex: 0 0 auto; }
  .atalho .ic { width: 20px; height: 20px; }
  .atalho strong { flex: 0 0 auto; font-size: 1rem; }
  .atalho .atalho-desc { display: none; }
  .atalho .atalho-conta { margin-left: auto; text-align: right; white-space: nowrap; }
}
.atalho { display: flex; flex-direction: column; gap: 8px; background: var(--mg-branco); border: 1px solid var(--mg-borda); border-radius: var(--r-md); padding: 20px; text-decoration: none; color: inherit; box-shadow: var(--sombra-sm); transition: box-shadow var(--transicao), transform var(--transicao); }
.atalho:hover { box-shadow: var(--sombra); transform: translateY(-2px); }
.atalho-icone { width: 46px; height: 46px; border-radius: 50%; background: var(--mg-creme); display: flex; align-items: center; justify-content: center; }
.atalho .ic { width: 24px; height: 24px; color: var(--mg-verde-800); }
.atalho strong { font-family: var(--ff-titulo); font-weight: 400; font-size: 1.1rem; color: var(--mg-verde-900); }
.atalho span { font-size: 13px; color: var(--mg-tinta-2); }
/* A contagem e o unico numero do cartao: tabular para os quatro alinharem. */
.atalho-conta { font-size: 12.5px; font-weight: 700; color: var(--mg-verde-800); font-variant-numeric: tabular-nums; }

.bloco-secao { margin-bottom: 40px; }
.bloco-secao-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.bloco-secao-cab h2 { font-size: 1.4rem; margin: 0; }
.bloco-secao-cab a { font-size: 13.5px; }

/* busca dentro da área do prescritor */
.barra-busca { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 18px; }
.barra-busca input[type="search"] {
  flex: 1 1 260px; min-width: 0; font-family: var(--ff-texto); font-size: 15px;
  background: var(--mg-branco); border: 1px solid var(--mg-borda); border-radius: 999px; padding: 11px 18px;
}
.barra-busca input[type="search"]:focus { outline: none; border-color: var(--mg-verde-700); box-shadow: 0 0 0 3px rgba(45, 89, 74, .14); }
.barra-busca-limpar { font-size: 13.5px; }

/* cartão com alvo de clique e botão de salvar por cima */
.cartao { position: relative; }
.cartao-alvo { display: flex; flex-direction: column; flex: 1; text-decoration: none; color: inherit; }
.cartao-salvar { position: absolute; right: 10px; top: 10px; z-index: 2; }
.cartao-salvar button {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(27, 52, 43, .78); color: var(--mg-creme);
  transition: background var(--transicao), color var(--transicao);
}
.cartao-salvar button:hover { background: var(--mg-verde-800); }
.cartao-salvar button.salvo { background: var(--mg-amarelo); color: var(--mg-verde-900); }
.cartao-salvar .ic { width: 17px; height: 17px; }

.acao-salvar { display: inline-flex; }
.btn-icone.salvo, .btn.salvo { border-color: var(--mg-verde-800); background: var(--mg-amarelo); color: var(--mg-verde-900); }

/* ações do player de videoaula */
.aula-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 28px; }
.voltar-linha { margin-bottom: 10px; font-size: 13.5px; }
.voltar-linha a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.cartao-meta-solta { margin-top: 6px; }
.cartao-desc-4 { -webkit-line-clamp: 4; }
.bloco-texto { max-width: 760px; }
.titulo-bloco { font-size: 1.25rem; }
.podcast-textos { min-width: 0; flex: 1; }
.podcast-convidado { margin: 0; font-size: 13.5px; color: var(--mg-tinta-2); }
.material-acoes { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
@media (max-width: 560px) {
  .material-item { flex-wrap: wrap; }
  .material-acoes { width: 100%; justify-content: flex-end; }
  /* No painel o botão Baixar é filho DIRETO do item, sem passar por
   * `.material-acoes`, então a regra acima não o alcançava: ele continuava ao
   * lado do texto, e o título espremia em quatro linhas de duas palavras.
   * `flex-basis:100%` é o que força a quebra de linha; `width` sozinho não
   * quebra flex. */
  .material-item > .btn { flex: 1 0 100%; justify-content: center; }
}

/* recado da equipe no topo da área do prescritor */
.aviso-plataforma {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--mg-amarelo); border: 1px solid #DCE3B0; border-radius: var(--r-md);
  padding: 14px 18px; margin-bottom: 22px; color: var(--mg-verde-950);
}
.aviso-plataforma .ic { color: var(--mg-verde-800); margin-top: 2px; }
.aviso-plataforma p { margin: 0; font-size: 14.5px; }

/* faixa de boas-vindas do painel do prescritor: foto real da farmácia sob
 * camada verde opaca o bastante para o texto claro passar no contraste */
.painel-hero {
  background-color: var(--mg-verde-900);
  background-image: linear-gradient(100deg, rgba(27, 52, 43, .95) 0%, rgba(27, 52, 43, .87) 55%, rgba(35, 68, 57, .68) 100%), url('/assets/img/faixa-loja.jpg');
  background-size: cover; background-position: center 55%;
  border-radius: var(--r-lg); color: var(--mg-creme);
  padding: clamp(24px, 4vw, 38px) clamp(20px, 4vw, 38px);
  margin-bottom: 28px;
}
.painel-hero .etiqueta { color: var(--mg-amarelo); margin-bottom: 12px; }
.painel-hero h1 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: 4px; }
.painel-hero p { color: var(--mg-sage-suave); margin: 0; max-width: 56em; }
.grade-topo { align-items: start; }

/* estado vazio */
.vazio { text-align: center; padding: 56px 24px; background: var(--mg-branco); border: 1px dashed var(--mg-borda); border-radius: var(--r-md); color: var(--mg-tinta-2); }
.vazio .ic { width: 34px; height: 34px; color: var(--mg-sage); margin-bottom: 10px; }
.vazio p { margin: 0; font-size: 14.5px; }

/* ============================================================
   ADMIN
   ============================================================ */
.tema-admin { background: var(--mg-base); }
.adm-grade { min-height: 100vh; display: flex; }
/* Mesma armadilha do menu do prescritor: fora da tela, mas focavel pelo Tab.
 * Ver o comentario em `.app-sidebar`. */
.adm-sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 90; width: 252px;
  background: var(--mg-verde-950); color: var(--mg-creme);
  display: flex; flex-direction: column; padding: 24px 16px 18px; overflow-y: auto;
  transform: translateX(-100%); visibility: hidden;
  transition: transform .22s ease, visibility 0s linear .22s;
}
.adm-sidebar.aberto { transform: translateX(0); visibility: visible; box-shadow: var(--sombra-lg); transition: transform .22s ease, visibility 0s; }
@media (min-width: 1024px) { .adm-sidebar { transform: none; visibility: visible; position: sticky; top: 0; height: 100vh; flex: 0 0 252px; } }
.adm-sidebar-logo { display: block; margin: 0 8px 8px; }
.adm-selo { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--mg-sage); margin: 0 8px 22px; }
.adm-sidebar-nav { display: flex; flex-direction: column; gap: 18px; }
.adm-grupo { display: flex; flex-direction: column; gap: 2px; }
.adm-grupo-titulo { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(195, 208, 184, .65); padding: 0 12px 6px; }
.adm-grupo a { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 9px; color: var(--mg-sage-suave); text-decoration: none; font-size: 14.5px; transition: background var(--transicao), color var(--transicao); }
.adm-grupo a:hover { background: rgba(165, 185, 156, .14); color: #fff; }
.adm-grupo a.ativo { background: var(--mg-verde-800); color: #fff; font-weight: 700; position: relative; }
.adm-grupo a.ativo::before { content: ''; position: absolute; left: -16px; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--mg-amarelo); }
.adm-grupo .ic { width: 18px; height: 18px; }
.adm-sidebar-rodape { margin-top: auto; border-top: 1px solid rgba(165, 185, 156, .22); padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.adm-admin-nome { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-sidebar-rodape button { display: inline-flex; align-items: center; gap: 7px; background: none; border: 1px solid rgba(165, 185, 156, .4); color: var(--mg-sage-suave); border-radius: 999px; padding: 6px 14px; font-family: var(--ff-texto); font-size: 12.5px; cursor: pointer; }
.adm-sidebar-rodape button:hover { background: rgba(165, 185, 156, .14); color: #fff; }
.adm-sidebar-rodape .ic { width: 15px; height: 15px; }

.adm-principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.adm-topbar { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 14px; background: rgba(247, 248, 243, .94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--mg-borda); padding: 12px 22px; }
/* O título encolhe antes de cortar: "Materiais técnicos" saía com reticências
 * no celular. A elipse continua como última defesa para título mais longo. */
.adm-topbar-titulo { font-size: clamp(1rem, 2.6vw + .45rem, 1.25rem); margin: 0; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* No telefone o titulo da gestao carrega o nome do conteudo ("Inscricoes:
   <nome do evento>", "Transmissao: <nome do evento>") e a reticencia cortava
   justamente o nome, que e a unica coisa que diz QUAL evento esta aberto.
   Ate 768px ele passa a caber em duas linhas; no desktop segue em uma linha,
   onde a barra tem altura fixa por causa do contrato de pagina sem rolagem. */
@media (max-width: 768px) {
  .adm-topbar-titulo { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.25; }
}
.adm-topbar-site { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 13px; text-decoration: none; color: var(--mg-tinta-2); min-height: 40px; padding: 0 6px; }
.adm-topbar-site:hover { color: var(--mg-verde-800); }
.adm-topbar-site .ic { width: 16px; height: 16px; }
/* No telefone o rótulo roubava a largura do título da página, que aparecia
 * cortado com reticências. Fica só o ícone, com área de toque de 40px. */
@media (max-width: 640px) {
  .adm-topbar-site span { display: none; }
  .adm-topbar-site { min-width: 40px; }
  .adm-topbar-site .ic { width: 20px; height: 20px; }
}
.adm-topbar .app-burger { display: inline-flex; }
@media (min-width: 1024px) { .adm-topbar .app-burger { display: none; } }
.adm-conteudo { flex: 1; width: 100%; max-width: 1160px; margin: 0 auto; padding: 28px 22px 70px; }

/* ações rápidas do painel admin */
.acoes-rapidas { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.acoes-rapidas a { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; text-decoration: none; color: var(--mg-verde-800); border: 1px dashed var(--mg-verde-500); border-radius: 999px; padding: 9px 18px; transition: all var(--transicao); }
.acoes-rapidas a:hover { background: var(--mg-verde-800); border-style: solid; color: var(--mg-creme); }
.acoes-rapidas .ic { width: 16px; height: 16px; }

/* kpis compactos (chips, nunca gigantes) */
/* Grade, e nao flex por conteudo: com largura livre os cartoes saiam de
 * tamanhos diferentes na mesma linha (um numero de tres digitos alargava o
 * cartao inteiro) e a ultima linha ficava com um cartao solto e esticado.
 * `auto-fit` mantem colunas iguais e reflui sozinho no tablet e no celular. */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); gap: 12px; margin-bottom: 28px; }
.kpi { display: flex; align-items: center; gap: 12px; background: var(--mg-branco); border: 1px solid var(--mg-borda); border-left: 3px solid var(--mg-sage); border-radius: 12px; padding: 12px 18px; box-shadow: var(--sombra-sm); }
.kpi .ic { width: 20px; height: 20px; color: var(--mg-verde-800); }
.kpi strong { font-size: 1.25rem; font-weight: 700; color: var(--mg-verde-900); }
.kpi span { font-size: 12.5px; color: var(--mg-tinta-2); }
.kpi-alerta { border-color: #DED9A8; background: var(--mg-aviso-bg); }

/* tabelas */
/* A sombra da direita avisa que a tabela continua para o lado: sem ela, em
 * telefone, a coluna cortada parece defeito e não conteúdo rolável. Ela some
 * sozinha quando a rolagem chega ao fim (truque do background-attachment). */
.tabela-caixa {
  background: var(--mg-branco); border: 1px solid var(--mg-borda); border-radius: var(--r-md);
  box-shadow: var(--sombra-sm); overflow-x: auto;
  /* Ancestral POSICIONADO de propósito: os `.so-leitor` das células são
   * position:absolute e, sem isto, escapavam do recorte do overflow (o
   * containment de absoluto é o ancestral posicionado, não o rolável) e
   * esticavam a PÁGINA na horizontal em toda lista da gestão no celular. */
  position: relative;
  background-image:
    linear-gradient(to right, var(--mg-branco), var(--mg-branco)),
    linear-gradient(to right, rgba(34, 48, 42, .13), rgba(34, 48, 42, 0));
  background-position: right center, right center;
  background-repeat: no-repeat;
  background-size: 22px 100%, 16px 100%;
  background-attachment: local, scroll;
}
table.tabela { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px; }
.tabela th { text-align: left; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--mg-tinta-2); padding: 13px 16px; border-bottom: 1px solid var(--mg-borda); background: var(--mg-creme); white-space: nowrap; }
.tabela td { padding: 12px 16px; border-bottom: 1px solid var(--mg-creme); vertical-align: middle; }
.tabela tbody tr:nth-child(even) td { background: #FBFCF7; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover td { background: var(--mg-creme); }
/* NUNCA `display: flex` num <td>: a celula deixa de participar do layout da
 * tabela e a coluna inteira descola das linhas. Em /admin/prescritores os
 * botoes Aprovar, Reenviar link e Bloquear flutuavam em faixas brancas
 * proprias, fora da linha do prescritor a que pertenciam, e o mesmo acontecia
 * em toda listagem da gestao. O alinhamento sai por `text-align`; quem e flex
 * sao os FILHOS. Abaixo de 900px a tabela vira cartao e la o flex volta a ser
 * o certo, na media query mais adiante. */
.tabela .acoes { text-align: right; white-space: nowrap; }
.tabela .acoes > * { vertical-align: middle; }
.tabela .acoes > * + * { margin-left: 8px; }
.tabela .acoes form { display: inline-flex; }

/* TABELA QUE VIRA CARTÃO NO TELEFONE.
 * A caixa rolável acima resolve CONSULTA, não OPERAÇÃO. Numa tela de 390px a
 * tabela de 640px mostra o nome e metade da profissão: a coluna de ações, com
 * o botão Aprovar, fica fora da vista, e aprovar cadastro é a tarefa mais
 * frequente da gestão. Quem administra pelo celular precisava rolar de lado
 * até achar o botão, em cada linha.
 * Aqui cada linha vira um cartão e cada célula ganha o próprio rótulo, tirado
 * do `data-rotulo`. Célula sem `data-rotulo` (a de ações) não exibe rótulo.
 * Vale só onde a classe está declarada, e só abaixo de 900px: no desktop a
 * tabela continua tabela, que é o formato certo para comparar linhas.
 * O corte era 760px e subiu para 900px em 04/09/2026: no tablet em pé (834px)
 * toda listagem da gestão cortava a coluna de ações, e Aprovar, Recusar e
 * Excluir ficavam fora da vista, atrás de uma rolagem lateral que ninguém
 * percebe. Abaixo de 1024px a barra lateral já está recolhida, então 900px
 * cobre o tablet inteiro sem encostar no desktop. */
@media (max-width: 900px) {
  .tabela-caixa:has(.tabela-cartoes) { background-image: none; border: 0; box-shadow: none; overflow-x: visible; background: transparent; }
  table.tabela-cartoes { min-width: 0; display: block; }
  .tabela-cartoes thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tabela-cartoes tbody { display: block; }
  .tabela-cartoes tbody tr {
    display: block; background: var(--mg-branco); border: 1px solid var(--mg-borda);
    border-radius: var(--r-md); box-shadow: var(--sombra-sm); padding: 4px 14px 12px; margin-bottom: 12px;
  }
  .tabela-cartoes tbody tr:nth-child(even) td,
  .tabela-cartoes tbody tr:hover td { background: transparent; }
  .tabela-cartoes td { display: flex; gap: 12px; align-items: baseline; justify-content: space-between;
    padding: 8px 0; border-bottom: 1px solid var(--mg-creme); text-align: right; }
  .tabela-cartoes td:last-child { border-bottom: 0; }
  .tabela-cartoes td[data-rotulo]::before {
    content: attr(data-rotulo); flex: 0 0 auto; text-align: left;
    font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--mg-tinta-2);
  }
  /* O nome ocupa a linha inteira e vira o título do cartão. A classe
   * .td-titulo estende a mesma regra às listas de conteúdo, cujo primeiro
   * campo não se chama "Nome". */
  .tabela-cartoes td[data-rotulo="Nome"], .tabela-cartoes td.td-titulo { display: block; text-align: left; padding-top: 10px; }
  .tabela-cartoes td[data-rotulo="Nome"]::before, .tabela-cartoes td.td-titulo::before { display: block; margin-bottom: 2px; }
  .tabela-cartoes td[data-rotulo="Nome"] small, .tabela-cartoes td.td-titulo small { display: block; word-break: break-word; }
  /* Ações em largura cheia: alvo de toque de verdade, não botão espremido. */
  .tabela-cartoes td.acoes { justify-content: stretch; flex-wrap: wrap; gap: 8px; padding-top: 12px; }
  .tabela-cartoes td.acoes > * + * { margin-left: 0; }
  .tabela-cartoes td.acoes form { display: flex; flex: 1 1 auto; }
  .tabela-cartoes td.acoes .btn { width: 100%; justify-content: center; min-height: 48px; }
  /* Botão só de ícone tem 34px no desktop, onde o mouse acerta; no cartão o
   * dedo precisa dos 44px da WCAG 2.5.5, e o desenho do ícone fica igual. */
  .tabela-cartoes td.acoes .btn-icone { width: 48px; height: 48px; }
  .tabela-cartoes td.acoes form:has(.btn-icone) { flex: 0 0 auto; }
  /* O formulário de renomear categoria mora na célula do título, fora do
   * td.acoes: em 320px o campo espremia o botão de salvar para 31px. O botão
   * fica fixo em 44px e a linha pode quebrar. */
  .tabela-cartoes .linha-inline { flex-wrap: wrap; }
  .tabela-cartoes .linha-inline .btn-icone { width: 48px; height: 48px; flex: 0 0 48px; }
  .tabela-cartoes .linha-inline .campo-inline { flex: 1 1 140px; }
  .tabela-cartoes td.acoes:empty { display: none; }
}

.btn-icone { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--mg-borda); background: var(--mg-branco); color: var(--mg-tinta-2); cursor: pointer; text-decoration: none; transition: all var(--transicao); }
.btn-icone:hover { border-color: var(--mg-verde-700); color: var(--mg-verde-800); }
.btn-icone.perigo:hover { border-color: var(--mg-erro); color: var(--mg-erro); }
.btn-icone .ic { width: 17px; height: 17px; }

/* formulário em cartão (admin) */
.form-cartao { background: var(--mg-branco); border: 1px solid var(--mg-borda); border-radius: var(--r-md); box-shadow: var(--sombra-sm); padding: 28px 26px; max-width: 860px; }
.form-acoes { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 8px; }
/* Estes titulos passaram de <p> para <h2>/<h3> para o leitor de tela navegar
 * o formulario por secao. A regra de h1..h4 aplica Marcellus e line-height de
 * titulo: as duas declaracoes abaixo devolvem a aparencia anterior, que e a de
 * um rotulo em caixa alta, nao a de um titulo da marca. */
.form-secao-titulo { font-family: var(--ff-texto); line-height: 1.3; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mg-verde-800); border-bottom: 1px solid var(--mg-borda); padding-bottom: 8px; margin: 26px 0 18px; }
.form-secao-titulo:first-child { margin-top: 0; }

.miniatura-atual { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
/* Limite nos DOIS lados desde 08/09/2026: a miniatura era só `width: 120px`,
   o que servia para capa em 16 por 9 (120 por 67) e estourava para capa EM PÉ,
   que é a da lâmina: 900 por 1273 virava 120 por 170 e sozinha colocava 74px
   de rolagem no formulário. Com os dois limites cada formato encolhe pelo lado
   maior e nenhum passa de 96px de altura. */
.miniatura-atual img { max-width: 120px; max-height: 72px; width: auto; height: auto; border-radius: 8px; border: 1px solid var(--mg-borda); }
.miniatura-atual span { font-size: 13px; color: var(--mg-tinta-2); }

/* barra de filtros do admin */
.adm-filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 20px; }
.adm-filtros form { display: flex; gap: 8px; flex: 1; min-width: 220px; }
/* min-width:0: sem isto o campo de busca não encolhe abaixo do tamanho padrão
 * do navegador (cerca de 170px) e empurra o botão "Buscar" para fora do form. */
.adm-filtros input[type="search"] { flex: 1; min-width: 0; font-family: var(--ff-texto); font-size: 14px; padding: 9px 14px; border: 1px solid var(--mg-borda); border-radius: 999px; background: var(--mg-branco); }

/* Barra de aprovação em lote da fila de prescritores.
   Fica acima da tabela e não dentro dela: as caixas de seleção se ligam ao
   formulário por form=, porque cada linha já tem formulários de ação e
   formulário aninhado é HTML inválido. */
.adm-lote { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 14px; padding: 12px 16px; border: 1px solid var(--mg-borda); border-radius: 12px; background: var(--mg-base); }
.adm-lote .rotulo-simples { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; color: var(--mg-tinta-2); }
/* Alvo de toque: a caixa nativa tem 13px e o dedo erra. O padding cresce a área
   clicável sem mexer no desenho, e a célula inteira fica confortável. */
.adm-lote input[type="checkbox"], .cel-selecao input[type="checkbox"] { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--mg-verde-800); }
.cel-selecao { width: 44px; text-align: center; }
/* No modo cartão a célula de seleção vira uma linha do cartão como as outras:
   sem o flex:0 0 auto a caixa de 18px herdava o `justify-content: space-between`
   do .tabela-cartoes td e esticava para o vão inteiro, vazando 57px do próprio
   td em 320px e 360px. Apanhado pelo qa/audita-responsivo.js, não pela leitura.
   O corte acompanha o da .tabela-cartoes, que vira cartão abaixo de 900px. */
@media (max-width: 900px) {
  .cel-selecao { width: auto; }
}
/* Equipe e Categorias: tabela ao lado do formulário só quando há largura para
 * as duas. Em 1024px a coluna da tabela ficava com cerca de 350px e escondia
 * "Último acesso" e o botão de desativar atrás de uma rolagem lateral; no
 * tablet os nomes quebravam letra a letra ("Vit or Lea l"). Até 1199px a
 * tabela ocupa a linha inteira e o formulário vem embaixo. */
.grade-tabela-lado { grid-template-columns: 1fr; }
@media (min-width: 1200px) { .grade-tabela-lado { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }

/* textos de apoio e utilitários do admin */
.texto-apoio { color: var(--mg-tinta-2); font-size: 13.5px; }
.texto-apoio-inline { margin: 0; }
.texto-erro { color: var(--mg-erro); }
.bloco-topo { margin-bottom: 22px; }
/* 24/09/2026 (pedido do revisor da gestão): a classe sozinha perdia para
 * `table.tabela { min-width: 640px }` (elemento + classe), e a tabela estreita
 * nunca ficou estreita em lugar nenhum. O seletor repete elemento e as duas
 * classes para vencer por peso. */
table.tabela.tabela-estreita { min-width: 520px; }
/* No telefone o piso de 520px somado a uma URL que nao quebra empurrava a
 * PAGINA inteira para o lado (67px a 94px medidos de 320 a 430 de largura).
 * Endereco longo em tabela de duas colunas nao precisa de largura minima:
 * precisa poder quebrar. */
@media (max-width: 640px) {
  /* `table.tabela` (linha 932) tem min-width de 640px e especificidade maior que
   * a classe sozinha: sem repetir o seletor de elemento aqui, o piso vencia e a
   * regra abaixo nao fazia nada. */
  table.tabela.tabela-estreita { min-width: 0; }
  .tabela-estreita td { overflow-wrap: anywhere; word-break: break-word; }
}
/* A tabela estreita que também vira cartão (abaixo de 900px) continua sem piso:
 * sem isto o seletor de peso maior acima devolvia os 520px ao cartão. */
@media (max-width: 900px) {
  table.tabela.tabela-cartoes { min-width: 0; }
}
.form-cartao-largo { max-width: none; }
.filtros-inline { margin: 0; }
/* No celular a faixa de filtros do prescritor sangra até a borda da tela com
 * margem negativa (regra no fim do arquivo). Dentro da barra da gestão, que é
 * um flex com gap, a mesma margem vazava 20px do .adm-filtros em seis
 * larguras de telefone (prescritores, relatórios e auditoria). Aqui a faixa
 * ocupa a linha inteira da barra e rola dentro dela, sem sangrar. */
@media (max-width: 640px) {
  .adm-filtros .filtros { margin: 0; padding-left: 0; padding-right: 0; flex: 1 1 100%; max-width: 100%; }
}
.adm-filtros-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.celula-detalhe { font-size: 12.5px; color: var(--mg-tinta-2); word-break: break-word; }
.implantacao-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.implantacao-lista li { display: flex; align-items: center; gap: 11px; font-size: 14.5px; padding: 7px 0; border-bottom: 1px solid var(--mg-creme); }
.implantacao-lista li:last-child { border-bottom: 0; }
.implantacao-lista li .ic { width: 18px; height: 18px; color: var(--mg-verde-500); flex: 0 0 auto; }
.implantacao-lista li.feito { color: var(--mg-tinta-2); }
.implantacao-lista li.feito span { text-decoration: line-through; }
.implantacao-lista li.feito .ic { color: var(--mg-verde-800); }
/* Sem `nowrap`: em 320px "Abrir configurações" vazava 23px do item (medido
 * pelo qa/audita-responsivo.js). O link quebra em duas linhas e fica dentro. */
.implantacao-lista li a { margin-left: auto; font-size: 13px; text-align: right; flex: 0 1 auto; }

/* barra de proporção em relatório */
.barra-proporcao { display: inline-block; vertical-align: middle; width: 110px; height: 8px; border-radius: 999px; background: var(--mg-creme); overflow: hidden; margin-right: 8px; }
.barra-proporcao span { display: block; height: 100%; background: var(--mg-sage); }

/* linha editável de categoria */
.linha-inline { display: flex; gap: 8px; align-items: center; }
/* O campo do nome cresce com o espaço que houver. Com `max-width:180px` fixo,
 * "Endocrinologia e metabologia" aparecia como "Endocrinologia e met" e
 * "Dermatologia e estética" como "Dermatologia e estét": o valor estava
 * inteiro, mas quem edita não conseguia LER o que estava editando. */
.campo-inline { font-family: var(--ff-texto); font-size: 14px; padding: 7px 10px; border: 1px solid var(--mg-borda); border-radius: 8px; flex: 1 1 auto; min-width: 0; max-width: 340px; }
.detalhes-cartao { margin-bottom: 22px; max-width: none; }
.detalhes-cartao summary { cursor: pointer; font-weight: 700; color: var(--mg-verde-800); }
.detalhes-cartao form { margin-top: 18px; }

/* página do evento (pública) */
.evento-banner { border-radius: var(--r-lg); overflow: hidden; margin-bottom: 28px; box-shadow: var(--sombra); }
.evento-banner img { width: 100%; display: block; }
.evento-grade { display: grid; gap: 34px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .evento-grade { grid-template-columns: 1.6fr 1fr; align-items: start; } }
.evento-descricao { font-size: 15.5px; }
.evento-descricao p { margin-bottom: 1em; }
.evento-lateral { background: var(--mg-branco); border: 1px solid var(--mg-borda); border-radius: var(--r-md); padding: 24px; box-shadow: var(--sombra-sm); }
@media (min-width: 900px) { .evento-lateral { position: sticky; top: 90px; } }
.evento-fatos { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 14.5px; }
.evento-fatos li { display: flex; gap: 11px; align-items: flex-start; }
.evento-fatos .ic { width: 19px; height: 19px; color: var(--mg-verde-800); margin-top: 2px; }
.evento-resumo { font-size: 1.1rem; color: var(--mg-tinta-2); max-width: 44em; }
.evento-descricao-espaco { margin-top: 22px; }
.evento-linha-passado { opacity: .75; }
.evento-data-passado { background: var(--mg-tinta-2); }
.texto-apoio-largo { max-width: 46em; }
.texto-apoio-espaco { margin-top: 12px; }
.bloco-secao-espaco { margin-top: 38px; }

/* ---------- gráficos dos relatórios (SVG desenhado no servidor) ---------- */
.graficos-grade { display: grid; gap: 22px; grid-template-columns: 1fr; margin-bottom: 6px; }
@media (min-width: 980px) { .graficos-grade { grid-template-columns: 1.7fr 1fr; align-items: stretch; } }
.grafico-cartao { background: var(--mg-branco); border: 1px solid var(--mg-borda); border-radius: var(--r-md); padding: 20px 22px; box-shadow: var(--sombra-sm); }
.grafico-eixo { font-family: var(--ff-texto); font-size: 11px; fill: var(--mg-tinta-2); }
.grafico-donut { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 6px; }
.grafico-donut svg { width: 132px; height: 132px; flex: 0 0 auto; }
.grafico-donut-total { font-family: var(--ff-texto); font-size: 22px; font-weight: 700; fill: var(--mg-verde-900); }
.grafico-legenda { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; min-width: 170px; flex: 1; }
.grafico-legenda li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--mg-tinta-2); }
.grafico-legenda strong { margin-left: auto; color: var(--mg-verde-900); }
.grafico-legenda small { color: var(--mg-tinta-2); min-width: 34px; text-align: right; }
.grafico-legenda-cor { width: 12px; height: 12px; border-radius: 4px; flex: 0 0 auto; border: 1px solid rgba(34, 48, 42, .12); }

/* ---------- toast das ações rápidas (salvar, concluir) ---------- */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px); max-width: min(92vw, 30em); background: var(--mg-verde-900); color: var(--mg-creme); font-size: 14px; line-height: 1.45; padding: 11px 20px; border-radius: 999px; box-shadow: var(--sombra); opacity: 0; visibility: hidden; transition: opacity var(--transicao), transform var(--transicao), visibility var(--transicao); z-index: 90; text-align: center; }
.toast.visivel { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.toast-erro { background: var(--mg-erro); color: #FFFFFF; }
/* No telefone a barra inferior ocupa o rodapé: o toast sobe para não cobrir. */
@media (max-width: 1023px) { .tema-app .toast { bottom: calc(76px + env(safe-area-inset-bottom)); } }
.lista-contagem { margin: -8px 0 16px; }

/* ---------- alvos de toque (auditoria 30/08/2026) ---------- */
/* A armadilha anti-robô vive fora da tela, mas o campo herdava a fonte padrão
 * de 13px do navegador e acionava o aviso de zoom do iOS na auditoria. */
.campo-armadilha input { font-size: 16px; }
/* Botões compactos do topo e links de apoio das telas de acesso: o desenho
 * fica como está e só a área SENSÍVEL cresce até os 44px da WCAG 2.5.5. */
.site-topo-acoes .btn, .site-topo-acoes .site-nav-login, .auth-links a, .auth-voltar a { position: relative; }
.site-topo-acoes .btn::after, .site-topo-acoes .site-nav-login::after, .auth-links a::after, .auth-voltar a::after {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; min-width: 44px; transform: translateY(-50%);
}
/* No celular o gráfico rola na própria caixa, com largura mínima para o
 * rótulo do eixo continuar legível; o resto do cartão fica parado. */
.grafico-rolagem { overflow-x: auto; }
@media (max-width: 640px) { }
/* Item de grid tem min-width:auto e esticaria a pagina em vez de deixar a
 * caixa interna rolar: o minimo explicito devolve o recorte ao cartao. */
.graficos-grade > .grafico-cartao { min-width: 0; }

/* ============================================================
   COMPONENTES DA GESTAO (02/09/2026)
   Ajuda em balao, barra de filtros, cabecalho e rodape do admin.
   ============================================================ */

/* ---------- ajuda em balao (a interrogacao) ---------- */
/* O texto explicativo saiu do paragrafo corrido e entrou aqui. O balao aparece
 * ao passar o mouse, ao focar pelo teclado e ao tocar (o toque nao tem hover,
 * entao o botao tambem alterna no clique). O conteudo existe no HTML e esta
 * ligado ao botao por aria-describedby: o leitor de tela le a explicacao mesmo
 * com o balao escondido e mesmo sem JavaScript. */
.ajuda-caixa { position: relative; display: inline-flex; flex: none; vertical-align: middle; margin: -13px 0 -13px -13px; }
/* O BOTAO e a area de toque de 44px da WCAG 2.5.5; o glifo dentro dele e que
 * tem 18px. A versao anterior desenhava um botao de 18px e esticava o alvo com
 * um pseudoelemento de 44px, e isso falhava de duas formas: o auditor de layout
 * mede a caixa do elemento, nao o pseudoelemento, e reprovava as 125 ocorrencias;
 * e o retangulo invisivel, por ser posicionado, pintava por cima do campo logo
 * abaixo e roubava o toque de quem ia escrever na busca. */
.ajuda-btn {
  width: 44px; height: 44px; flex: 0 0 44px; padding: 0; border: 0; background: none;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.ajuda-glifo {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid var(--mg-sage); background: var(--mg-creme); color: var(--mg-verde-800);
  font-family: var(--ff-texto); font-size: 12px; font-weight: 700; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--transicao), color var(--transicao), border-color var(--transicao);
}
.ajuda-btn:hover .ajuda-glifo, .ajuda-btn[aria-expanded="true"] .ajuda-glifo { background: var(--mg-verde-800); color: var(--mg-creme); border-color: var(--mg-verde-800); }
.ajuda-btn:focus-visible { outline: 2px solid var(--mg-verde-800); outline-offset: -8px; border-radius: 50%; }
.ajuda-bolha {
  position: absolute; left: 50%; bottom: calc(100% + 9px); transform: translateX(-50%) translateY(4px);
  width: max-content; max-width: min(19rem, 78vw); z-index: 80;
  background: var(--mg-verde-950); color: var(--mg-creme);
  font-family: var(--ff-texto); font-size: 12.8px; font-weight: 400; line-height: 1.55; letter-spacing: 0;
  text-align: left; text-transform: none; padding: 10px 13px; border-radius: 10px;
  box-shadow: var(--sombra); pointer-events: none;
  /* `display: none`, e nao `visibility: hidden`: elemento apenas invisivel
   * continua ocupando area de rolagem, e o balao (ate 304px) pendurado a
   * direita de cada interrogacao esticava a PAGINA da gestao no telefone, de
   * 54px a 81px conforme a largura. Medido pelo auditor de responsividade em
   * seis tamanhos, e some com esta linha. O texto segue sendo lido pelo leitor
   * de tela: `aria-describedby` calcula a descricao a partir do conteudo
   * referenciado mesmo escondido. */
  display: none;
}
.ajuda-bolha::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -6px; border: 6px solid transparent; border-top-color: var(--mg-verde-950); }
.ajuda-caixa:hover .ajuda-bolha,
.ajuda-btn:focus-visible + .ajuda-bolha,
.ajuda-btn[aria-expanded="true"] + .ajuda-bolha { display: block; transform: translateX(-50%) translateY(0); }
/* Perto da borda da janela o balao sairia da tela: o JS marca o lado e a
 * ancoragem troca de centro para a borda. */
.ajuda-caixa.ajuda-esquerda .ajuda-bolha { left: 0; transform: translateX(0) translateY(4px); }
.ajuda-caixa.ajuda-esquerda:hover .ajuda-bolha,
.ajuda-caixa.ajuda-esquerda .ajuda-btn:focus-visible + .ajuda-bolha,
.ajuda-caixa.ajuda-esquerda .ajuda-btn[aria-expanded="true"] + .ajuda-bolha { display: block; transform: translateX(0) translateY(0); }
.ajuda-caixa.ajuda-esquerda .ajuda-bolha::after { left: 14px; }
.ajuda-caixa.ajuda-direita .ajuda-bolha { left: auto; right: 0; transform: translateX(0) translateY(4px); }
.ajuda-caixa.ajuda-direita:hover .ajuda-bolha,
.ajuda-caixa.ajuda-direita .ajuda-btn:focus-visible + .ajuda-bolha,
.ajuda-caixa.ajuda-direita .ajuda-btn[aria-expanded="true"] + .ajuda-bolha { display: block; transform: translateX(0) translateY(0); }
.ajuda-caixa.ajuda-direita .ajuda-bolha::after { left: auto; right: 14px; margin-left: 0; }
/* Perto do topo o balao vira para baixo em vez de sair pela tela. */
.ajuda-caixa.ajuda-abaixo .ajuda-bolha { bottom: auto; top: calc(100% + 9px); }
.ajuda-caixa.ajuda-abaixo .ajuda-bolha::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--mg-verde-950); }

/* Escopada a `adm-`: `titulo-secao` ja existe no site publico com 2,4rem, e
 * redefinir a mesma classe encolhia os quatro titulos da pagina inicial. */
.adm-titulo-secao { display: flex; align-items: center; gap: 0; margin: 0 0 10px; min-height: 44px; }
.adm-titulo-secao > h2, .adm-titulo-secao > h3, .adm-titulo-secao > h4 { font-size: 1.05rem; margin: 0; color: var(--mg-verde-900); }
/* Rotulo de campo e de filtro com a ajuda ao lado, como irmaos. */
.campo-rotulo, .filtro-rotulo { display: flex; align-items: center; min-height: 44px; }
.campo-rotulo > label, .filtro-rotulo > label { margin: 0; }

/* ---------- barra de filtros das listagens ---------- */
.filtro-barra {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 14px;
  background: var(--mg-branco); border: 1px solid var(--mg-borda); border-radius: var(--r-md);
  padding: 14px 16px; margin-bottom: 18px; box-shadow: var(--sombra-sm);
}
.filtro-campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1 1 170px; }
.filtro-campo-busca { flex: 2 1 240px; }
.filtro-campo label { display: flex; align-items: center; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--mg-tinta-2); margin: 0; }
.filtro-campo input, .filtro-campo select {
  width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--mg-borda); border-radius: var(--r-sm);
  /* 16px e o piso: abaixo disso o Safari do iPhone da zoom ao focar e a
   * listagem sai do enquadramento. O resto do projeto ja usa 16px. */
  background: var(--mg-base); font-family: var(--ff-texto); font-size: 16px; color: var(--mg-tinta);
}
.filtro-campo input:focus, .filtro-campo select:focus { outline: 2px solid var(--mg-verde-800); outline-offset: 1px; border-color: var(--mg-verde-800); background: var(--mg-branco); }
.filtro-acoes { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.filtro-acoes .btn { min-height: 44px; }
.filtro-resumo { flex: 1 0 100%; margin: 2px 0 0; font-size: 13px; color: var(--mg-tinta-2); }
/* No telefone os campos empilham e os botoes ocupam a linha inteira: meia
 * largura deixava "Filtrar" e "Limpar" com alvo abaixo dos 44px. */
@media (max-width: 560px) {
  .filtro-campo, .filtro-campo-busca { flex: 1 1 100%; }
  .filtro-acoes { flex: 1 1 100%; }
  .filtro-acoes .btn { flex: 1; justify-content: center; }
}

/* ---------- cabecalho da gestao ---------- */
.adm-topbar-info { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.adm-migalha { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--mg-tinta-2); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-migalha a { color: inherit; text-decoration: none; }
.adm-migalha a:hover { color: var(--mg-verde-800); text-decoration: underline; }
.adm-topbar-info .adm-topbar-titulo { flex: none; }
.adm-topbar-conta { display: none; align-items: center; gap: 9px; padding-left: 14px; border-left: 1px solid var(--mg-borda); }
@media (min-width: 860px) { .adm-topbar-conta { display: flex; } }
.adm-conta-texto { display: flex; flex-direction: column; line-height: 1.25; }
.adm-conta-nome { font-size: 13px; font-weight: 700; color: var(--mg-tinta); }
.adm-conta-nivel { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--mg-tinta-2); }

/* ---------- rodape da gestao ---------- */
/* Nao existia rodape nenhum: a pagina simplesmente acabava. Aqui ficam as tres
 * coisas que a equipe precisa saber sem perguntar: em que versao esta, se a
 * plataforma ja abriu para os prescritores e para onde ir quando travar. */
.adm-rodape {
  margin-top: auto; border-top: 1px solid var(--mg-borda); background: var(--mg-branco);
  padding: 18px 22px calc(18px + env(safe-area-inset-bottom));
}
.adm-rodape-inner { max-width: 1160px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; font-size: 12.5px; color: var(--mg-tinta-2); }
.adm-rodape-marca { display: flex; align-items: center; gap: 9px; font-weight: 700; color: var(--mg-verde-900); }
.adm-rodape-marca img { height: 22px; width: auto; display: block; }
.adm-rodape-links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-left: auto; }
.adm-rodape-links a { color: var(--mg-tinta-2); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.adm-rodape-links a:hover { color: var(--mg-verde-800); text-decoration: underline; }
.adm-rodape-ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--mg-verde-500); flex: 0 0 8px; }
.adm-rodape-ponto.pre { background: #6E6220; }
@media (max-width: 640px) {
  .adm-rodape-inner { flex-direction: column; align-items: flex-start; }
  .adm-rodape-links { margin-left: 0; }
}

/* ---------- tela de acesso: senha e Caps Lock ---------- */
/* A caixa relativa envolve SO o input. Presa ao `.campo`, ela crescia junto com
 * a dica e com o aviso de Caps Lock, e o olho descia para cima do texto no meio
 * da digitacao (e ja nascia errado no /ativar, que tem dica). */
.campo-senha-linha { position: relative; display: block; }
.campo-senha-linha input { width: 100%; padding-right: 52px; }
.senha-olho {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 50%; cursor: pointer; color: var(--mg-tinta-2);
}
.senha-olho:hover { color: var(--mg-verde-800); background: var(--mg-creme); }
.senha-olho:focus-visible { outline: 2px solid var(--mg-verde-800); outline-offset: 1px; }
.senha-olho .ic { width: 19px; height: 19px; }
.aviso-capslock { display: none; margin: 7px 0 0; font-size: 12.5px; color: #6E6220; align-items: center; gap: 6px; }
.aviso-capslock.visivel { display: flex; }
.aviso-capslock .ic { width: 15px; height: 15px; flex: 0 0 15px; }

/* ---------- botao em envio ---------- */
/* O guarda de envio duplicado desabilita o botao e marca `data-travado`. A regra
 * antiga mirava `data-enviando`, que e marca do FORM e nunca do botao: nao
 * pintava nada. */
button[data-travado] { opacity: .72; cursor: progress; }

/* O cadeado do selo da tela de acesso da gestao encostava na primeira letra. */
.auth-painel-selo .ic-selo { width: 13px; height: 13px; margin-right: 7px; vertical-align: -2px; }
.evento-agenda { margin: 18px 0 0; }

/* ---------- campo de arquivo ---------- */
/* O input de arquivo cru mostra "Choose File" e "No file chosen", em INGLES e
 * com o botao cinza do sistema, no meio de um formulario em portugues com a
 * cara da marca. O texto do navegador nao passa pelo verificador de idioma
 * porque nao existe no HTML. Aqui o botao nativo vira botao da marca pelo
 * ::file-selector-button, e o rotulo nativo ao lado some (a classe so entra
 * quando o JavaScript esta vivo para escrever o nome do arquivo em portugues:
 * sem script, o texto nativo continua aparecendo e o campo segue funcionando). */
.campo input[type="file"] {
  width: 100%; padding: 8px; border: 1px dashed var(--mg-borda); border-radius: var(--r-sm);
  background: var(--mg-base); font-family: var(--ff-texto); font-size: 14px; color: var(--mg-tinta-2);
  cursor: pointer;
}
.campo input[type="file"]:hover { border-color: var(--mg-verde-500); }
.campo input[type="file"]:focus-visible { outline: 2px solid var(--mg-verde-800); outline-offset: 1px; }
.campo input[type="file"]::file-selector-button {
  margin-right: 12px; padding: 9px 18px; border: 0; border-radius: 999px;
  background: var(--mg-verde-800); color: var(--mg-creme);
  font-family: var(--ff-texto); font-size: 13.5px; font-weight: 700; cursor: pointer;
  transition: background var(--transicao);
}
.campo input[type="file"]::file-selector-button:hover { background: var(--mg-verde-900); }
/* Com o JavaScript vivo, o input inteiro sai do olho (continua focavel e
 * ligado ao rotulo) e quem aparece e o botao da marca mais o nome do arquivo
 * em portugues. Sem script, o input nativo fica visivel e o campo funciona
 * igual, so com o texto do navegador. */
.campo-arquivo { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
/* `.campo input[type="file"]` tem especificidade maior que `.so-leitor` e
 * devolvia ao input escondido a largura de 100% e o padding: absoluto e com a
 * largura do formulario, ele passou a estourar a pagina de lado (314px no
 * desktop, medido). Aqui as tres propriedades voltam ao valor de escondido. */
.campo-arquivo input[type="file"].so-leitor { width: 1px; height: 1px; padding: 0; border: 0; }
.arquivo-botao { flex: 0 0 auto; }
/* O foco do teclado cai no input escondido: o anel precisa aparecer no botao,
 * senao a pessoa navega para um campo que nao da sinal nenhum na tela. */
/* O botao vem ANTES do input no DOM, entao nao ha combinador de irmao que o
 * alcance a partir do foco: quem resolve e o `:has()` no pai, que o arquivo ja
 * usa na caixa de tabela. */
.campo-arquivo:has(input[type="file"]:focus-visible) .arquivo-botao { outline: 2px solid var(--mg-verde-800); outline-offset: 2px; }
.arquivo-escolhido { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--mg-tinta-2); word-break: break-word; }
.arquivo-escolhido strong { color: var(--mg-verde-900); font-weight: 700; }

/* ---------- aviso de abertura do painel ---------- */
/* Eram dois blocos de texto corrido empilhados, ocupando quase um terco da tela
 * no tablet antes do primeiro numero. Viraram um bloco com titulo e uma linha
 * por pendencia: a leitura passa a ser de relance, e o porque foi para a ajuda. */
.aviso-abertura { display: block; }
.aviso-abertura-titulo { display: flex; align-items: center; margin: 0 0 8px; font-weight: 700; color: var(--mg-verde-900); }
.aviso-abertura-lista { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.aviso-abertura-lista li { line-height: 1.55; }
.aviso-abertura-lista a { color: var(--mg-verde-800); }

/* ---------- filtros do prescritor no celular ---------- */
/* As seis categorias de material viravam SEIS linhas de pilula no telefone,
 * ~220px de filtro antes do primeiro item da biblioteca. Numa tela de 844px de
 * altura isso e um quarto da tela gasto com navegacao que a pessoa usa uma vez.
 * Viram uma faixa que rola de lado, com encaixe: a rolagem e da FAIXA, nunca da
 * pagina, entao o eixo de layout continua limpo. */
@media (max-width: 640px) {
  .filtros {
    flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity;
    padding-bottom: 6px; margin-bottom: 18px;
    /* A faixa sangra ate a borda da tela para a pilula cortada indicar que ha
     * mais a ver, em vez de terminar exatamente no limite do conteudo. */
    margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px;
    scrollbar-width: thin;
  }
  .filtros a { flex: 0 0 auto; scroll-snap-align: start; }
  /* O botao de buscar ao lado do campo, e nao embaixo: empilhado ele gastava
   * mais uma linha inteira para uma acao que o Enter ja resolve. */
  .barra-busca { flex-wrap: nowrap; }
  .barra-busca input[type="search"] { flex: 1 1 auto; min-width: 0; }
  .barra-busca .btn { flex: 0 0 auto; }
}

/* ============================================================
   05/09/2026 (v1.21.0): vídeo hospedado, live no portal, progresso
   real, barra lateral recolhível e revisão de rolagem no desktop.
   ============================================================ */

/* ---------- selos e sinal de "ao vivo" ---------- */
.badge-ao-vivo { background: var(--mg-erro); color: #FFFFFF; }
.live-ponto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--mg-erro); vertical-align: middle; margin-right: 6px; box-shadow: 0 0 0 0 rgba(169, 68, 54, .55); animation: live-pulso 1.6s ease-out infinite; }
@keyframes live-pulso { 0% { box-shadow: 0 0 0 0 rgba(169, 68, 54, .55); } 70% { box-shadow: 0 0 0 9px rgba(169, 68, 54, 0); } 100% { box-shadow: 0 0 0 0 rgba(169, 68, 54, 0); } }

/* ---------- barra lateral recolhível (desktop) ---------- */
.app-sidebar-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 8px 26px; }
.adm-sidebar .app-sidebar-topo { margin-bottom: 6px; }
.app-sidebar-logo, .adm-sidebar-logo { display: flex; align-items: center; min-width: 0; margin: 0; }
.app-sidebar-logo .logo-completa, .adm-sidebar-logo .logo-completa { display: block; width: auto; max-width: 100%; }
.app-sidebar-logo .logo-completa { height: 44px; }
.adm-sidebar-logo .logo-completa { height: 40px; }
.app-sidebar-logo .logo-simbolo, .adm-sidebar-logo .logo-simbolo { display: none; }
/* Botão de recolher: só no desktop, onde a barra é fixa. No telefone é drawer. */
.sidebar-recolher { display: none; width: 36px; height: 36px; flex: 0 0 36px; align-items: center; justify-content: center; border: 1px solid rgba(165, 185, 156, .35); border-radius: 9px; background: none; color: var(--mg-sage-suave); cursor: pointer; transition: background var(--transicao), color var(--transicao); }
.sidebar-recolher:hover { background: rgba(165, 185, 156, .14); color: #fff; }
.sidebar-recolher .ic { width: 18px; height: 18px; transform: rotate(180deg); transition: transform var(--transicao); }
@media (min-width: 1024px) {
  .sidebar-recolher { display: inline-flex; }
  .sidebar-recolhida .app-sidebar, .sidebar-recolhida .adm-sidebar { width: 76px; flex-basis: 76px; padding-left: 12px; padding-right: 12px; }
  .sidebar-recolhida .app-sidebar-topo { flex-direction: column; margin-left: 0; margin-right: 0; gap: 12px; }
  .sidebar-recolhida .app-sidebar-logo .logo-completa, .sidebar-recolhida .adm-sidebar-logo .logo-completa { display: none; }
  .sidebar-recolhida .app-sidebar-logo .logo-simbolo, .sidebar-recolhida .adm-sidebar-logo .logo-simbolo { display: block; height: 34px; width: auto; }
  .sidebar-recolhida .sidebar-recolher .ic { transform: rotate(0deg); }
  .sidebar-recolhida .app-sidebar-nav a span, .sidebar-recolhida .adm-grupo a span, .sidebar-recolhida .adm-grupo-titulo,
  .sidebar-recolhida .adm-selo, .sidebar-recolhida .app-sidebar-perfil-textos, .sidebar-recolhida .form-sair button span,
  .sidebar-recolhida .adm-admin-nome { display: none; }
  .sidebar-recolhida .app-sidebar-nav a, .sidebar-recolhida .adm-grupo a, .sidebar-recolhida .app-sidebar-perfil, .sidebar-recolhida .form-sair button { justify-content: center; padding-left: 0; padding-right: 0; }
  .sidebar-recolhida .app-sidebar-nav a.ativo::before, .sidebar-recolhida .adm-grupo a.ativo::before { left: -12px; }
  .sidebar-recolhida .adm-sidebar-rodape { justify-content: center; }
  .sidebar-recolhida .adm-sidebar-rodape button { padding: 6px 9px; }
  .sidebar-recolhida .app-sidebar-nav .ic, .sidebar-recolhida .adm-grupo .ic { width: 22px; height: 22px; }
  /* O conteúdo ganha os 190px devolvidos: a grade de cartões e o player crescem. */
  .sidebar-recolhida .app-conteudo { max-width: 1240px; }
  .sidebar-recolhida .adm-conteudo { max-width: 1320px; }
}

/* ---------- menos rolagem no desktop ---------- */
/* Os blocos de seção somavam 40px de respiro cada, e o painel do prescritor
 * tinha seis empilhados: 240px só de vão. O respiro cai a 28px de 1024px para
 * cima e as seções principais viram duas colunas. */
@media (min-width: 1024px) {
  .bloco-secao { margin-bottom: 28px; }
  .app-conteudo { padding: 26px 32px 32px; }
  .adm-conteudo { padding: 22px 26px 60px; }
  .pagina-cab { margin-bottom: 18px; }
  .painel-hero { margin-bottom: 20px; }
  .atalhos { margin-bottom: 22px; }
  .kpis { margin-bottom: 18px; }
  .acoes-rapidas { margin-bottom: 18px; }
}
.pagina-cab-compacta h1 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); }
.pagina-cab-compacta p { font-size: 14.5px; }
.vazio-compacto { padding: 26px 18px; }
.vazio-compacto .ic { width: 26px; height: 26px; margin-bottom: 6px; }

/* Painel do prescritor: faixa mais baixa, com o resumo de estudo dentro dela
 * (eram três cartões de KPI ocupando uma linha inteira abaixo dos atalhos). */
.painel-hero-compacto { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 28px; padding: clamp(18px, 3vw, 26px) clamp(18px, 3vw, 28px); }
.painel-hero-compacto .etiqueta { margin-bottom: 8px; }
.painel-hero-compacto h1 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); }
.painel-hero-compacto p { font-size: 14px; }
.painel-hero-resumo { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 13px; color: var(--mg-sage-suave); }
.painel-hero-resumo strong { color: #fff; font-size: 1.15rem; margin-right: 4px; }
.painel-colunas { display: grid; grid-template-columns: 1fr; gap: 0 28px; }
@media (min-width: 1024px) { .painel-colunas { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.painel-coluna { min-width: 0; }
.lista-materiais-compacta .material-item { padding: 12px 14px; gap: 12px; }
.lista-materiais-compacta .material-icone { width: 38px; height: 38px; flex-basis: 38px; }
.lista-materiais-compacta .material-textos h3 { font-size: .98rem; }
.lista-eventos-compacta { display: flex; flex-direction: column; gap: 10px; }
.lista-eventos-compacta .evento-data { flex-basis: 72px; padding: 12px 6px; }
.lista-eventos-compacta .evento-data strong { font-size: 1.5rem; }
.lista-eventos-compacta .evento-corpo { padding: 12px 14px 12px 4px; }
.lista-eventos-compacta .evento-corpo h3 { font-size: 1.05rem; }

/* Aula em miniatura (lista lateral): capa pequena + título + barra de progresso. */
.lista-aulas-lateral { display: flex; flex-direction: column; gap: 10px; }
.aula-mini { display: flex; gap: 12px; align-items: center; background: var(--mg-branco); border: 1px solid var(--mg-borda); border-radius: 12px; padding: 8px; text-decoration: none; color: inherit; box-shadow: var(--sombra-sm); transition: box-shadow var(--transicao), transform var(--transicao); min-height: 44px; }
.aula-mini:hover { box-shadow: var(--sombra); transform: translateY(-1px); }
.aula-mini-capa { position: relative; flex: 0 0 118px; width: 118px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--mg-sage-suave); }
.aula-mini-capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aula-mini-capa .cartao-capa-tempo { right: 6px; bottom: 6px; font-size: 11px; padding: 2px 6px; }
.aula-mini-textos { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.aula-mini-textos strong { font-family: var(--ff-titulo); font-weight: 400; font-size: 1.02rem; color: var(--mg-verde-900); line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.aula-mini-textos small { font-size: 12.5px; color: var(--mg-tinta-2); }
.aula-mini-barra { display: block; height: 4px; border-radius: 999px; background: var(--mg-creme); overflow: hidden; margin-top: 2px; }
.aula-mini-barra span { display: block; height: 100%; background: var(--mg-verde-800); }
@media (max-width: 400px) { .aula-mini-capa { flex-basis: 96px; width: 96px; } }

/* ---------- tela da aula: player + lateral ---------- */
.aula-grade { display: grid; grid-template-columns: 1fr; gap: 0 28px; }
@media (min-width: 1100px) { .aula-grade { grid-template-columns: minmax(0, 1fr) 300px; } .aula-lateral { position: sticky; top: 24px; align-self: start; } }
/* Abaixo de 1100px a grade tem UMA coluna e a lateral inteira cai DEPOIS do
   texto: quem terminava a aula no telefone precisava rolar a descricao toda
   para achar "Marcar como concluida", "Baixar o certificado" e "Salvar esta
   aula". `display: contents` dissolve as duas colunas dentro da grade e a
   ordem passa a ser a da leitura: video, progresso, acoes, texto, relacionadas. */
@media (max-width: 1099px) {
  .aula-principal, .aula-lateral { display: contents; }
  .aula-principal > * { order: 1; }
  .aula-lateral > .aula-acoes { order: 2; }
  .aula-principal > .bloco-texto { order: 3; }
  .aula-lateral > * { order: 4; }
}
.aula-principal, .aula-lateral { min-width: 0; }
.player-moldura video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; }
/* A moldura do player ocupava a largura inteira e, em 1366x768 com a barra
 * lateral, o vídeo terminava embaixo da dobra: teto de altura na tela baixa. */
@media (min-width: 1024px) and (max-height: 820px) { .player-moldura { max-height: 52vh; aspect-ratio: auto; height: 52vh; } }
.aula-progresso { margin: -10px 0 22px; }
.aula-progresso-barra { height: 6px; border-radius: 999px; background: var(--mg-creme); overflow: hidden; border: 1px solid var(--mg-borda); }
.aula-progresso-barra span { display: block; height: 100%; background: var(--mg-verde-800); transition: width .4s ease; }
.aula-progresso-texto { margin: 6px 0 0; font-size: 12.5px; color: var(--mg-tinta-2); }
.aula-lateral .aula-acoes { flex-direction: column; gap: 10px; margin-bottom: 22px; }
.aula-lateral .aula-acoes form { width: 100%; }
.bloco-secao-lateral .bloco-secao-cab h2 { font-size: 1.15rem; }
.btn[disabled].btn-primario { background: var(--mg-sage); color: var(--mg-verde-950); opacity: 1; }
@media (min-width: 1100px) { }
.live-palco { position: relative; aspect-ratio: 16 / 9; background: var(--mg-verde-950); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sombra); margin-bottom: 14px; min-height: 260px; }
.live-palco-aberto { aspect-ratio: auto; height: min(78vh, 720px); }
@media (max-width: 640px) { .live-palco-aberto { height: 70vh; } }
.live-espera { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; color: var(--mg-creme); background: linear-gradient(160deg, rgba(27, 52, 43, .96), rgba(45, 89, 74, .92)); }
.live-espera h2 { color: #fff; font-size: clamp(1.3rem, 2.6vw, 1.8rem); margin-bottom: 8px; }
.live-espera p { color: var(--mg-sage-suave); max-width: 40em; margin-bottom: 14px; }
.live-espera a { color: var(--mg-amarelo); }
.live-espera .texto-apoio { color: var(--mg-sage); font-size: 12.5px; }
.live-espera .live-ponto { width: 14px; height: 14px; margin: 0 0 12px; }
.live-contagem { font-family: var(--ff-titulo); font-size: clamp(2rem, 6vw, 3.2rem); color: #fff; line-height: 1; margin-bottom: 14px; }
.live-sala { position: absolute; inset: 0; }
.live-sala iframe { width: 100%; height: 100%; border: 0; display: block; }
.live-aviso { margin: 0 0 16px; padding: 10px 14px; border-radius: var(--r-sm); background: var(--mg-ok-bg); color: #2A5433; font-size: 14px; }
.live-aviso-erro { background: var(--mg-erro-bg); color: var(--mg-erro); }
.evento-linha-ao-vivo { border-color: var(--mg-erro); }
.evento-linha-ao-vivo .evento-data { background: var(--mg-erro); }

/* chamada para a transmissão (painel do prescritor e da gestão) */
.lista-lives { display: flex; flex-direction: column; gap: 10px; }
.live-chamada { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; background: var(--mg-verde-900); color: var(--mg-creme); border-radius: var(--r-md); padding: 14px 18px; text-decoration: none; box-shadow: var(--sombra-sm); transition: box-shadow var(--transicao), transform var(--transicao); min-height: 44px; }
.live-chamada:hover { box-shadow: var(--sombra); transform: translateY(-1px); }
.live-chamada-ao-vivo { background: linear-gradient(100deg, var(--mg-verde-950), var(--mg-verde-800)); border-left: 4px solid var(--mg-erro); }
.live-chamada-selo { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--mg-amarelo); }
.live-chamada-selo .ic { width: 15px; height: 15px; }
.live-chamada strong { font-family: var(--ff-titulo); font-weight: 400; font-size: 1.1rem; color: #fff; flex: 1 1 240px; min-width: 0; }
.live-chamada-acao { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--mg-amarelo); }
.live-chamada-acao .ic { width: 16px; height: 16px; }
.live-chamada-gestao { margin-bottom: 18px; }

/* palco do palestrante (página sem menu) */
.palco { width: 100%; }
.palco .etiqueta { margin-bottom: 10px; }
.palco h1 { font-size: 1.6rem; margin-bottom: 4px; }
.palco-form { max-width: 420px; }
.palco-form .btn { margin: 4px 0 10px; }
.live-palco-palestrante { margin-top: 12px; height: min(74vh, 700px); aspect-ratio: auto; }
.palco-ativo .auth-cartao { max-width: 1100px; }
.live-palco-gestao { height: min(70vh, 640px); aspect-ratio: auto; margin-top: 16px; }

/* painel da transmissão na gestão */
.grade-2-colunas { display: grid; grid-template-columns: 1fr; gap: 0 22px; }
@media (min-width: 1100px) { .grade-2-colunas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.grade-2-colunas > * { min-width: 0; }
.kpi-situacao strong { font-size: 1rem; }
.kpi-ao-vivo { border-left-color: var(--mg-erro); }
.form-acoes-empilha { gap: 10px; }
.form-acoes-empilha form { display: inline-flex; }
.tx-link-palestrante { margin-top: 14px; }
.tx-link-linha { background: var(--mg-creme); border: 1px solid var(--mg-borda); border-radius: 10px; padding: 8px 10px; }
.tx-link-linha .pod-assinar-url { background: transparent; border: 0; color: var(--mg-verde-900); padding: 6px 4px; }
.link-transmissao { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; margin-top: 4px; text-decoration: none; }
.link-transmissao .ic { width: 14px; height: 14px; }

/* ---------- envio em pedaços ---------- */
.upload-progresso { margin-top: 10px; }
.upload-progresso-barra { height: 10px; border-radius: 999px; background: var(--mg-creme); border: 1px solid var(--mg-borda); overflow: hidden; }
.upload-progresso-barra span { display: block; height: 100%; width: 0; background: var(--mg-verde-800); transition: width .3s ease; }
.upload-progresso-ok .upload-progresso-barra span { background: var(--mg-verde-500); }
.upload-progresso-erro .upload-progresso-barra span { background: var(--mg-erro); }
.upload-progresso-texto { margin: 6px 0 0; font-size: 13px; color: var(--mg-tinta-2); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.upload-progresso-erro .upload-progresso-texto { color: var(--mg-erro); }
.arquivo-atual { align-items: flex-start; }
.arquivo-atual > span:first-child { display: inline-flex; width: 42px; height: 42px; flex: 0 0 42px; border-radius: 10px; background: var(--mg-creme); color: var(--mg-verde-800); align-items: center; justify-content: center; }
.arquivo-atual .ic { width: 22px; height: 22px; }
button[data-upload-travado] { opacity: .6; cursor: progress; }

/* formulário da gestão em duas colunas no desktop: a ficha da videoaula
 * tinha nove campos empilhados e pedia duas telas de rolagem em 1366x768. */
@media (min-width: 1024px) {
  .form-duas-colunas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 32px; }
  .form-duas-colunas .form-acoes-largura { grid-column: 1 / -1; }
  .form-duas-colunas .form-secao-titulo:first-child { margin-top: 0; }
  .form-cartao .campo { margin-bottom: 14px; }
  /* 96px e nao 110: o campo cresce sozinho com o texto (`data-cresce`), entao
     a altura minima so precisa acomodar a descricao curta. Os 14px devolvidos
     sao o que faltava para a ficha de material com capa e arquivo ja enviados
     caber inteira em 1366 por 768. */
  .form-cartao .campo textarea { min-height: 96px; }
}
.form-coluna { min-width: 0; }

/* ---------- alvos de toque em tela de toque ---------- */
/* Medido em 28/08/2026 e relatado no portão: botão do topo com 37px e links
 * do cartão de acesso com 23px. Em tela de toque a altura sobe sem mudar o
 * desenho no mouse.
 * 06/09/2026: o piso passou de 44px para 48px. A sonda de toque do portão
 * mede o clique a 21px do CENTRO do alvo: num alvo de 44px exatos a metade é
 * 22px e o arredondamento de subpixel joga a sonda para fora, então o alvo
 * reprova parecendo falso positivo. O dedo erra no mesmo lugar. Quatro pixels
 * de folga resolvem a classe inteira, e por isso a correção é aqui, na regra
 * raiz, e não seletor a seletor. */
@media (any-pointer: coarse) {
  .site-topo-acoes .btn, .site-nav-login, .auth-links a, .auth-voltar a, .bloco-secao-cab a, .voltar-linha a, .filtros a, .barra-busca-limpar { min-height: 48px; display: inline-flex; align-items: center; }
  .filtros a { padding-top: 0; padding-bottom: 0; }
  .btn-compacto { min-height: 48px; }
  .btn-icone { width: 48px; height: 48px; }

  /* 18/09/2026: a cobertura logada do portao entrou e mostrou quatro alvos
     entre 43 e 44px que ninguem tinha medido, porque /app e /admin nunca
     foram medidos. Tres deles nasceram na propria rodada 1.32.0. O piso desta
     casa e 48px pelo motivo escrito acima, entao nao adianta 44. */
  .fcol-limpar { min-height: 48px; }
  .aulas-busca-campo input[type="search"] { min-height: 48px; }

  /* 16px e o piso de fonte em campo de telefone: abaixo disso o Safari do
     iPhone da zoom ao focar e a tela sai do enquadramento. Os tres campos de
     busca do acervo estavam em 15px, e so apareceram quando /app entrou na
     medicao. Mesmo motivo escrito no .filtro-campo. */
  .aulas-busca-campo input[type="search"] { font-size: 16px; }

  /* `.adm-marcadores` entrou em 08/09/2026, com os objetivos clinicos da
     lamina: e a mesma caixa de marcacao nativa das outras tres, e cresce
     igual. O alvo de verdade continua sendo o ROTULO ao lado, que ocupa a
     linha inteira e e clicavel por `for`. */
  .campo-check input, .adm-lote input[type="checkbox"], .cel-selecao input[type="checkbox"],
  .adm-marcadores input[type="checkbox"] { width: 22px; height: 22px; }
  .adm-marcadores-grade li { min-height: 44px; }
  .adm-marcadores-grade label { display: flex; align-items: center; min-height: 44px; }
}

/* ---------- tabelas da gestão no desktop: sem rolagem lateral até 1160px ---------- */
/* min-width de 640px numa caixa de 1160px nunca estoura; o que estourava era o
 * conjunto de oito colunas do ranking novo. Fonte um ponto menor e células
 * mais justas resolvem sem virar cartão. */
@media (min-width: 1024px) {
  table.tabela { font-size: 13.5px; }
  .tabela th { padding: 10px 12px; }
  .tabela td { padding: 10px 12px; }
}

/* ---------- ajustes no celular ---------- */
@media (max-width: 1023px) {
  .aula-progresso { margin-top: -6px; }
  .aula-lateral .aula-acoes { flex-direction: row; }
  .aula-lateral .aula-acoes form { flex: 1 1 220px; width: auto; }
}

/* Faixa de filtros DENTRO de um bloco de seção (ranking das videoaulas nos
 * relatórios): a sangria de -20px do celular vazava 20px do bloco, medido pelo
 * qa/audita-responsivo.js em seis larguras. Dentro de bloco a faixa ocupa a
 * largura do bloco e rola dentro dela. */
@media (max-width: 640px) {
  .bloco-secao .filtros { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; max-width: 100%; }
}

/* Ficha da videoaula em duas colunas: em 1024px a linha de três campos
 * ("Publicada", "Destaque", "Ordem") ficava com colunas de 90px e o rótulo em
 * caixa alta vazava 16px da caixa de marcação (qa/audita-responsivo.js). Entre
 * 1024 e 1199px a linha vira duas colunas, e o rótulo pode quebrar. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .form-duas-colunas .campo-linha-3 { grid-template-columns: 1fr 1fr; }
}
.campo-check-alinhado label { min-width: 0; overflow-wrap: anywhere; }
/* O consentimento LGPD leva o e-mail de contato inteiro (33 caracteres sem espaço):
 * a 320px ele passava 9 a 17px da caixa em /cadastro e /evento (12/09/2026). */
.campo-check label.rotulo-simples { min-width: 0; overflow-wrap: anywhere; }

/* ============================================================
   05/09/2026 (v1.21.0, parte 2): aplicativo do prescritor no telefone.
   Barra inferior no padrão do app do paciente do SeuNutricionista, tema
   escuro, tela de abertura, cabeçalho com título e polimento iOS/Android.
   ============================================================ */

/* ---------- polimento de toque (iOS e Android) ---------- */
html { -webkit-tap-highlight-color: transparent; }
body { overscroll-behavior-y: none; }
.tema-app { min-height: 100vh; min-height: 100dvh; }
.app-grade { min-height: 100dvh; }
/* Rolagem com inércia nas faixas horizontais e nas tabelas. */
.filtros, .tabela-caixa, .grafico-rolagem { -webkit-overflow-scrolling: touch; }
/* Botão e link não selecionam texto no toque longo. */
.btn, .nav-item, .atalho, .cartao-alvo, .aula-mini, .evento-linha, .live-chamada { -webkit-user-select: none; user-select: none; }

/* ---------- cabeçalho do aplicativo ---------- */
.app-topbar { gap: 8px; padding-left: 8px; padding-right: 8px; }
.app-topbar-logo { margin-right: 0; }
/* Título da tela no centro do cabeçalho, como aplicativo nativo: no telefone o
 * logo vira o símbolo e sobra espaço para o nome da seção. Some no desktop,
 * onde o cabeçalho não existe. */
/* O titulo da barra e o nome da aula, do episodio ou do material aberto: a
   reticencia cortava justamente o nome ("Aula de teste com ..."). Ate 768px
   ele cabe em duas linhas. */
@media (max-width: 768px) {
}
.app-topbar-tema, .app-topbar-perfil { color: var(--mg-verde-900); background: none; border: 0; padding: 6px; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 12px; }
.app-topbar-perfil.ativo { background: var(--mg-creme); }
.app-topbar-tema .ic, .app-topbar-perfil .ic { width: 22px; height: 22px; }
/* O botão de tema carrega os dois desenhos e mostra o que se GANHA ao tocar. */
[data-alterna-tema] use { }
html[data-tema="claro"] [data-alterna-tema] .ic:nth-of-type(2), html[data-tema="escuro"] [data-alterna-tema] .ic:nth-of-type(1) { display: none; }
.app-sidebar-tema { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 10px; color: var(--mg-sage-suave); background: none; border: 0; width: 100%; cursor: pointer; font-family: var(--ff-texto); font-size: 15px; text-align: left; transition: background var(--transicao), color var(--transicao); }
.app-sidebar-tema:hover { background: rgba(165, 185, 156, .14); color: #fff; }
/* Revisão de 11/09/2026 (PORT-2): o botão da barra lateral tinha saído no B5
   por repetir o do cabeçalho no telefone, só que em >=1024px o cabeçalho não
   existe e o computador ficou sem controle de tema. Ele volta SÓ no computador;
   no telefone quem alterna é o cabeçalho (e a folha "Mais"). */
@media (max-width: 1023px) { .app-sidebar-tema { display: none; } }
.app-sidebar-tema .ic { width: 20px; height: 20px; flex: 0 0 auto; }
@media (max-width: 520px) { .app-topbar-logo .logo-completa { display: none; } .app-topbar-logo .logo-simbolo { display: block; height: 30px; width: auto; } }

/* ---------- barra inferior (padrão app.seunutricionista.com) ---------- */
.app-bottom-nav {
  display: flex; align-items: center; justify-content: space-around;
  background: var(--mg-branco); border-top: 1px solid var(--mg-borda);
  box-shadow: 0 -4px 14px rgba(34, 48, 42, .06);
  padding: 4px 4px clamp(4px, calc(env(safe-area-inset-bottom, 0px) * .35), 12px);
}
.app-bottom-nav .nav-item { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 54px; padding: 2px 2px 3px; gap: 1px; text-decoration: none; color: var(--mg-tinta-2); border-radius: 12px; font-size: 11px; font-weight: 600; line-height: 1.1; letter-spacing: .01em; -webkit-tap-highlight-color: transparent; }
.nav-item-icone { width: 52px; min-height: 40px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; transition: background .22s ease, transform .18s ease; }
.nav-item-icone .ic { width: 23px; height: 23px; }
.nav-item-rotulo { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-bottom-nav .nav-item.ativo { color: var(--mg-verde-900); }
.app-bottom-nav .nav-item.ativo .nav-item-icone { background: var(--mg-amarelo); color: var(--mg-verde-900); }
.app-bottom-nav .nav-item:active .nav-item-icone { transform: scale(.94); }
@media (max-width: 340px) { .nav-item-icone { width: 46px; } .app-bottom-nav .nav-item { font-size: 11px; } }
/* O rodapé do conteúdo precisa terminar acima da barra (62px + área segura). */
.app-rodape { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
@media (min-width: 1024px) { .app-rodape { padding-bottom: 24px; } }

/* ---------- tela de abertura ---------- */
.app-splash {
  position: fixed; inset: 0; z-index: 300; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: var(--mg-base); color: var(--mg-verde-900);
  animation: splash-some .35s ease 2.1s forwards;
  pointer-events: none;
}
.app-splash img { width: 64px; height: auto; animation: splash-pulso 1.2s ease-in-out infinite; }
.app-splash-nome { font-family: var(--ff-titulo); font-size: 1.15rem; letter-spacing: .02em; }
.app-splash-barra { width: 120px; height: 3px; border-radius: 999px; background: var(--mg-creme); overflow: hidden; }
.app-splash-barra span { display: block; width: 40%; height: 100%; background: var(--mg-verde-800); border-radius: 999px; animation: splash-varre 1.1s ease-in-out infinite; }
.app-splash.some { animation: splash-some .28s ease forwards; }
@keyframes splash-some { to { opacity: 0; visibility: hidden; } }
@keyframes splash-pulso { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.94); opacity: .82; } }
@keyframes splash-varre { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } }
@media (prefers-reduced-motion: reduce) { .app-splash { animation: none; display: none; } }

/* ---------- opções de tema no perfil ---------- */
.tema-opcoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tema-opcao { position: relative; }
.tema-opcao input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tema-opcao span { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 8px 10px; border: 1px solid var(--mg-borda); border-radius: 12px; background: var(--mg-base); color: var(--mg-tinta-2); font-size: 14px; font-weight: 700; cursor: pointer; transition: border-color var(--transicao), background var(--transicao), color var(--transicao); }
.tema-opcao .ic { width: 18px; height: 18px; }
.tema-opcao input:checked + span { border-color: var(--mg-verde-800); background: var(--mg-amarelo); color: var(--mg-verde-900); }
.tema-opcao input:focus-visible + span { outline: 2px solid var(--mg-verde-800); outline-offset: 2px; }
@media (max-width: 400px) { .tema-opcoes { grid-template-columns: 1fr; } }

/* ---------- responsividade dos DADOS ---------- */
/* Número tabular: contagens e tempos alinham em coluna e não "dançam" ao
 * mudar de 9 para 10. Título longo em cartão corta em duas linhas, nome de
 * arquivo e e-mail quebram na letra em vez de esticar a caixa. */
.kpi strong, .painel-hero-resumo strong, .tabela td, .grafico-legenda strong, .live-contagem, .aula-progresso-texto, .upload-progresso-texto { font-variant-numeric: tabular-nums; }
.cartao-corpo h3, .evento-corpo h3, .material-textos h3, .podcast-cab h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.material-textos p, .tabela td small, .celula-detalhe, .arquivo-escolhido, .adm-conta-nome { overflow-wrap: anywhere; }
.kpi span { overflow-wrap: anywhere; min-width: 0; }
.kpi { min-width: 0; }
.kpi strong { flex: 0 0 auto; }
.badge { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.cartao-meta > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Dado vazio nunca deixa buraco: célula sem valor mostra um traço discreto. */
.tabela td:empty::after { content: "\2014"; color: var(--mg-borda); }
.tabela-cartoes td:empty { display: none; }
@media (max-width: 900px) { .tabela-cartoes td:empty { display: none; } }
/* Gráfico em cartão: a legenda embaixo do donut no telefone, não ao lado. */
@media (max-width: 480px) { .grafico-donut { flex-direction: column; align-items: flex-start; } }
/* Barra de proporção acompanha a largura da célula no cartão. */
@media (max-width: 900px) { .barra-proporcao { width: 80px; } }

/* ============================================================
   TEMA ESCURO
   Tokens trocados em html[data-tema="escuro"]: quase tudo obedece porque usa
   var(--mg-*). O que tinha cor literal (#fff no hero, zebra da tabela,
   badges, flash) recebe regra própria abaixo. Contraste conferido no par
   texto/fundo principal (E8ECE4 sobre 141F1A: 12,8:1) e nos cartões
   (E8ECE4 sobre 1C2A24: 10,9:1).
   ============================================================ */
html[data-tema="escuro"] {
  color-scheme: dark;
  --mg-base:      #141F1A;
  --mg-branco:    #1C2A24;
  --mg-creme:     #223329;
  --mg-amarelo:   #3A4F3A;
  --mg-tinta:     #E8ECE4;
  --mg-tinta-2:   #A9B8AB;
  --mg-borda:     #33463C;
  --mg-verde-950: #0E1714;
  --mg-verde-900: #D6E3D2;
  --mg-verde-800: #8FC29B;
  --mg-verde-700: #7FB08B;
  --mg-verde-500: #6E8F70;
  --mg-sage:      #7E9A82;
  --mg-sage-suave:#9DB39F;
  --mg-erro:      #E38A7C;
  --mg-erro-bg:   #3A2320;
  --mg-ok-bg:     #1E3527;
  --mg-aviso-bg:  #3A3620;
  --sombra-sm: 0 1px 3px rgba(0, 0, 0, .35);
  --sombra: 0 8px 28px rgba(0, 0, 0, .45);
  --sombra-lg: 0 18px 50px rgba(0, 0, 0, .55);
}
html[data-tema="escuro"] body { background: var(--mg-base); color: var(--mg-tinta); }
html[data-tema="escuro"] .tema-site, html[data-tema="escuro"] .tema-app, html[data-tema="escuro"] .tema-admin, html[data-tema="escuro"] .tema-auth { background: var(--mg-base); }
html[data-tema="escuro"] h1, html[data-tema="escuro"] h2, html[data-tema="escuro"] h3, html[data-tema="escuro"] h4 { color: var(--mg-verde-900); }
/* Fundos que usam o verde escuro da marca continuam escuros: aqui ele vira
 * um verde de superfície, com o texto claro que já tinham. */
html[data-tema="escuro"] .app-sidebar, html[data-tema="escuro"] .adm-sidebar { background: #0E1714; border-right: 1px solid var(--mg-borda); }
html[data-tema="escuro"] .app-sidebar-nav a.ativo, html[data-tema="escuro"] .adm-grupo a.ativo, html[data-tema="escuro"] .app-sidebar-perfil.ativo { background: #2D594A; color: #fff; }
html[data-tema="escuro"] .app-sidebar-nav a.ativo::before, html[data-tema="escuro"] .adm-grupo a.ativo::before { background: #E6ECC3; }
html[data-tema="escuro"] .app-topbar, html[data-tema="escuro"] .adm-topbar, html[data-tema="escuro"] .site-topo { background: rgba(20, 31, 26, .94); }
html[data-tema="escuro"] .app-bottom-nav { background: #1A2620; border-top-color: var(--mg-borda); box-shadow: 0 -4px 14px rgba(0, 0, 0, .35); }
html[data-tema="escuro"] .app-bottom-nav .nav-item { color: var(--mg-tinta-2); }
html[data-tema="escuro"] .app-bottom-nav .nav-item.ativo { color: #E6ECC3; }
html[data-tema="escuro"] .app-bottom-nav .nav-item.ativo .nav-item-icone { background: #2D594A; color: #E6ECC3; }
html[data-tema="escuro"] .painel-hero, html[data-tema="escuro"] .hero, html[data-tema="escuro"] .cta-final, html[data-tema="escuro"] .pod-assinar, html[data-tema="escuro"] .live-chamada, html[data-tema="escuro"] .auth-painel { color: #F1F3EA; }
html[data-tema="escuro"] .painel-hero h1, html[data-tema="escuro"] .hero h1, html[data-tema="escuro"] .pod-assinar h2, html[data-tema="escuro"] .live-chamada strong, html[data-tema="escuro"] .cta-final h2, html[data-tema="escuro"] .live-espera h2 { color: #fff; }
html[data-tema="escuro"] .painel-hero p, html[data-tema="escuro"] .painel-hero-resumo { color: #C3D0B8; }
html[data-tema="escuro"] .painel-hero .etiqueta, html[data-tema="escuro"] .live-chamada-selo, html[data-tema="escuro"] .live-chamada-acao, html[data-tema="escuro"] .etiqueta-clara { color: #E6ECC3; }
html[data-tema="escuro"] .painel-hero-resumo strong { color: #fff; }
html[data-tema="escuro"] .live-chamada { background: #223329; }
html[data-tema="escuro"] .live-chamada-ao-vivo { background: linear-gradient(100deg, #0E1714, #2D594A); }
html[data-tema="escuro"] .btn-primario { background: #8FC29B; color: #0E1714; }
html[data-tema="escuro"] .btn-primario:hover { background: #A5D2AF; }
html[data-tema="escuro"] .btn-contorno { color: #8FC29B; border-color: #8FC29B; }
html[data-tema="escuro"] .btn-contorno:hover { background: #8FC29B; color: #0E1714; }
html[data-tema="escuro"] .btn-claro { background: #E6ECC3; color: #1B342B; }
html[data-tema="escuro"] .btn[disabled].btn-primario { background: #33463C; color: #A9B8AB; }
html[data-tema="escuro"] .cartao-salvar button { background: rgba(14, 23, 20, .82); color: #E6ECC3; }
html[data-tema="escuro"] .cartao-salvar button.salvo, html[data-tema="escuro"] .btn-icone.salvo, html[data-tema="escuro"] .btn.salvo { background: #E6ECC3; color: #1B342B; border-color: #E6ECC3; }
html[data-tema="escuro"] .cartao-capa-selo, html[data-tema="escuro"] .cartao-capa-tempo, html[data-tema="escuro"] .hero-foto figcaption, html[data-tema="escuro"] .sobre-legenda { background: rgba(14, 23, 20, .88); }
html[data-tema="escuro"] .tabela tbody tr:nth-child(even) td { background: #1A2620; }
html[data-tema="escuro"] .tabela tbody tr:hover td { background: #223329; }
html[data-tema="escuro"] .tabela th { background: #182420; }
html[data-tema="escuro"] .tabela-caixa { background-image: linear-gradient(to right, #1C2A24, #1C2A24), linear-gradient(to right, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0)); }
html[data-tema="escuro"] .flash-ok, html[data-tema="escuro"] .badge-ok { background: #1E3527; color: #A9D8B4; border-color: #2F5A3C; }
html[data-tema="escuro"] .flash-erro, html[data-tema="escuro"] .badge-erro { background: #3A2320; color: #F0A99C; border-color: #5A3530; }
html[data-tema="escuro"] .flash-aviso, html[data-tema="escuro"] .badge-pendente, html[data-tema="escuro"] .badge-aviso, html[data-tema="escuro"] .kpi-alerta { background: #3A3620; color: #E7DD9A; border-color: #5A5430; }
html[data-tema="escuro"] .badge-neutro { background: #223329; color: var(--mg-tinta-2); }
html[data-tema="escuro"] .badge-ao-vivo { background: #C4574A; color: #fff; }
html[data-tema="escuro"] .aviso-plataforma { background: #3A3620; border-color: #5A5430; color: #F1EFD8; }
html[data-tema="escuro"] .aviso-capslock { color: #E7DD9A; }
html[data-tema="escuro"] .etiqueta { color: #8FC29B; }
html[data-tema="escuro"] a { color: #8FC29B; }
html[data-tema="escuro"] .site-nav a, html[data-tema="escuro"] .site-menu-mobile a { color: var(--mg-tinta); }
html[data-tema="escuro"] .site-menu-mobile { background: #1C2A24; }
html[data-tema="escuro"] .site-rodape { background: #0E1714; }
html[data-tema="escuro"] .ajuda-bolha, html[data-tema="escuro"] .toast { background: #E8ECE4; color: #141F1A; }
html[data-tema="escuro"] .ajuda-bolha::after { border-top-color: #E8ECE4; }
html[data-tema="escuro"] .ajuda-caixa.ajuda-abaixo .ajuda-bolha::after { border-bottom-color: #E8ECE4; border-top-color: transparent; }
html[data-tema="escuro"] .toast-erro { background: #E38A7C; color: #141F1A; }
html[data-tema="escuro"] .ajuda-glifo { background: #223329; border-color: #7E9A82; color: #8FC29B; }
html[data-tema="escuro"] .campo input, html[data-tema="escuro"] .campo select, html[data-tema="escuro"] .campo textarea, html[data-tema="escuro"] .barra-busca input[type="search"], html[data-tema="escuro"] .filtro-campo input, html[data-tema="escuro"] .filtro-campo select, html[data-tema="escuro"] .adm-filtros input[type="search"], html[data-tema="escuro"] .campo-inline { background: #182420; color: var(--mg-tinta); border-color: var(--mg-borda); }
html[data-tema="escuro"] .campo input:focus, html[data-tema="escuro"] .campo select:focus, html[data-tema="escuro"] .campo textarea:focus { box-shadow: 0 0 0 3px rgba(143, 194, 155, .25); }
html[data-tema="escuro"] .campo input[type="file"] { background: #182420; }
html[data-tema="escuro"] .campo input[type="file"]::file-selector-button, html[data-tema="escuro"] .arquivo-botao { background: #8FC29B; color: #0E1714; }
html[data-tema="escuro"] .filtros a { background: #1C2A24; color: var(--mg-tinta-2); border-color: var(--mg-borda); }
html[data-tema="escuro"] .filtros a.ativo { background: #2D594A; border-color: #2D594A; color: #F1F3EA; }
html[data-tema="escuro"] .atalho-icone, html[data-tema="escuro"] .material-icone { background: #223329; }
html[data-tema="escuro"] .vazio { background: #1C2A24; border-color: var(--mg-borda); }
html[data-tema="escuro"] .acoes-rapidas a { border-color: #7E9A82; color: #8FC29B; }
html[data-tema="escuro"] .acoes-rapidas a:hover { background: #8FC29B; color: #0E1714; }
html[data-tema="escuro"] .implantacao-lista li.feito .ic { color: #8FC29B; }
html[data-tema="escuro"] .adm-rodape { background: #182420; }
html[data-tema="escuro"] .player-moldura { background: #000; }
html[data-tema="escuro"] .aula-progresso-barra span, html[data-tema="escuro"] .aula-mini-barra span, html[data-tema="escuro"] .upload-progresso-barra span { background: #8FC29B; }
html[data-tema="escuro"] .barra-proporcao span { background: #7E9A82; }
html[data-tema="escuro"] .grafico-eixo { fill: var(--mg-tinta-2); }
html[data-tema="escuro"] .grafico-donut-total { fill: var(--mg-verde-900); }
html[data-tema="escuro"] .live-espera { background: linear-gradient(160deg, rgba(14, 23, 20, .97), rgba(34, 51, 41, .95)); }
html[data-tema="escuro"] .app-splash { background: #141F1A; color: #D6E3D2; }
html[data-tema="escuro"] .instalar-app { border-left-color: #8FC29B; }
html[data-tema="escuro"] .auth-cartao, html[data-tema="escuro"] .form-cartao, html[data-tema="escuro"] .cartao, html[data-tema="escuro"] .podcast-item, html[data-tema="escuro"] .material-item, html[data-tema="escuro"] .evento-linha, html[data-tema="escuro"] .kpi, html[data-tema="escuro"] .grafico-cartao, html[data-tema="escuro"] .filtro-barra, html[data-tema="escuro"] .implantacao, html[data-tema="escuro"] .aula-mini, html[data-tema="escuro"] .evento-lateral, html[data-tema="escuro"] .live-lateral .evento-fatos, html[data-tema="escuro"] .instalar-app, html[data-tema="escuro"] .atalho, html[data-tema="escuro"] .tabela-caixa { background: var(--mg-branco); border-color: var(--mg-borda); }
html[data-tema="escuro"] .tabela-cartoes tbody tr { background: var(--mg-branco); border-color: var(--mg-borda); }
html[data-tema="escuro"] .tabela td { border-bottom-color: #223329; }
html[data-tema="escuro"] .evento-data { background: #2D594A; color: #F1F3EA; }
html[data-tema="escuro"] .evento-data strong { color: #fff; }
html[data-tema="escuro"] .evento-data-passado { background: #33463C; }
html[data-tema="escuro"] .evento-linha-ao-vivo .evento-data { background: #C4574A; }
html[data-tema="escuro"] .site-topo, html[data-tema="escuro"] .app-topbar, html[data-tema="escuro"] .adm-topbar { border-bottom-color: var(--mg-borda); }
html[data-tema="escuro"] .app-topbar-tema, html[data-tema="escuro"] .app-topbar-perfil, html[data-tema="escuro"] .app-burger, html[data-tema="escuro"] .site-burger { color: var(--mg-verde-900); }
html[data-tema="escuro"] .consentimento, html[data-tema="escuro"] .adm-lote, html[data-tema="escuro"] .tx-link-linha { background: #182420; border-color: var(--mg-borda); }
html[data-tema="escuro"] .tema-opcao span { background: #182420; }
html[data-tema="escuro"] .tema-opcao input:checked + span { background: #2D594A; color: #F1F3EA; border-color: #8FC29B; }
html[data-tema="escuro"] img.logo-completa, html[data-tema="escuro"] .auth-logo-mobile img, html[data-tema="escuro"] .app-topbar-logo .logo-completa { filter: brightness(0) invert(.92) sepia(.18) saturate(1.4) hue-rotate(70deg); }
html[data-tema="escuro"] .app-rodape .credito-dev img, html[data-tema="escuro"] .adm-rodape-marca img { filter: brightness(0) invert(.85); }
html[data-tema="escuro"] .credito-dev, html[data-tema="escuro"] .app-rodape a { color: var(--mg-tinta-2); }
html[data-tema="escuro"] .pod-assinar-url { color: #E6ECC3; }
html[data-tema="escuro"] .senha-olho:hover { background: #223329; }
html[data-tema="escuro"] .form-secao-titulo { color: #8FC29B; border-bottom-color: var(--mg-borda); }
html[data-tema="escuro"] .campo label { color: var(--mg-tinta-2); }

/* Palco da transmissão no telefone: `aspect-ratio` junto com `min-height`
 * faz o navegador calcular a LARGURA a partir da altura mínima (260 x 16/9 =
 * 462px), e a caixa estourava a tela de 390px. Sem altura mínima: no
 * telefone a proporção vira 4:3, que dá altura suficiente para a contagem. */
.live-palco { min-height: 0; }
@media (max-width: 640px) { .live-palco:not(.live-palco-aberto) { aspect-ratio: 4 / 3; } }
.live-espera p { max-width: 100%; }
/* A barra inferior é do telefone: a regra nova de desenho (parte 2) vinha
 * depois da media query original e a religava no desktop. */
@media (min-width: 1024px) { .app-bottom-nav { display: none; } }

/* Alvo de toque do símbolo no cabeçalho do aplicativo: media 31x30 em todo
 * telefone (qa/audita-responsivo.js, 48 medições). A área sensível sobe a
 * 44px sem mudar o desenho. */
.app-topbar-logo { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
/* Opções de tema: três colunas fixas não cabiam no cartão de 1024px (o
 * rótulo vazava 28px). A grade reflui pela largura que houver. */
.tema-opcoes { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }

/* Regra do dono (05/09/2026): o escuro é só da área do prescritor. Se por
 * qualquer caminho o atributo chegar à gestão ou ao site, o CSS ignora. */
html[data-tema-area="fixo"] { color-scheme: light; }

/* ============================================================
   TIPOGRAFIA (regra do dono, 05/09/2026): Marcellus e Inconsolata, as fontes
   do brandbook Magispharma, ficam SÓ no site público. A área do prescritor,
   a gestão e as telas de acesso usam a Inter, fonte de interface, para
   leitura longa em tabela, formulário e player. Autohospedada (a CSP não
   admite fonts.googleapis), variável de 400 a 700.
   ============================================================ */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/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: 400 700; font-display: swap; src: url('/assets/fonts/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; }
.tema-app, .tema-admin, .tema-auth {
  --ff-titulo: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --ff-texto: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  letter-spacing: 0;
}
.tema-app h1, .tema-app h2, .tema-app h3, .tema-app h4,
.tema-admin h1, .tema-admin h2, .tema-admin h3, .tema-admin h4,
.tema-auth h1, .tema-auth h2, .tema-auth h3, .tema-auth h4 { font-weight: 600; letter-spacing: -.012em; line-height: 1.22; }
.tema-app .etiqueta, .tema-admin .etiqueta, .tema-auth .etiqueta, .tema-admin .adm-grupo-titulo, .tema-admin .adm-selo, .tema-admin .adm-migalha,
.tema-app .campo label, .tema-admin .campo label, .tema-auth .campo label, .tema-admin .tabela th, .tema-admin .form-secao-titulo,
.tema-app .cartao-meta, .tema-admin .cartao-meta, .tema-app .badge, .tema-admin .badge, .tema-auth .badge { letter-spacing: .04em; }
.tema-app .painel-hero h1, .tema-app .pagina-cab h1, .tema-app .aula-mini-textos strong, .tema-app .atalho strong,
.tema-app .cartao-corpo h3, .tema-app .evento-corpo h3, .tema-app .material-textos h3, .tema-app .podcast-cab h3, .tema-app .instalar-app-texto strong { font-weight: 600; }
.tema-admin .kpi strong { font-weight: 700; }
.tema-app .btn, .tema-admin .btn, .tema-auth .btn, .tema-app .app-bottom-nav .nav-item, .tema-admin .adm-grupo a, .tema-app .app-sidebar-nav a { font-weight: 600; }
.tema-admin .adm-topbar-titulo { font-weight: 600; }
.tema-admin table.tabela { font-size: 13.5px; }
.tema-admin .campo input, .tema-admin .campo select, .tema-admin .campo textarea, .tema-app .campo input, .tema-app .campo select, .tema-app .campo textarea, .tema-auth .campo input, .tema-auth .campo select { font-size: 15px; }
@media (max-width: 640px) { .tema-app .campo input, .tema-app .campo select, .tema-app .campo textarea, .tema-auth .campo input, .tema-auth .campo select, .tema-admin .campo input, .tema-admin .campo select, .tema-admin .campo textarea { font-size: 16px; } }

/* ---------- hero do site: revisao de 05/09/2026 (regra do dono) ----------
   Dois botoes de verdade, os outros dois caminhos viram links de texto, uma
   linha de provas abaixo, e a foto da farmacia aparece em TODAS as telas: no
   telefone vira faixa larga abaixo do texto, em vez de sumir. */
/* O brilho do canto era o verde brand do SeuNutricionista escrito em rgba, que
   o portão não enxerga (revisão de 11/09/2026, marca): agora é o --mg-verde-500
   da paleta (110, 143, 112) com a mesma opacidade. */
.tema-site .hero { background: radial-gradient(120% 90% at 85% 10%, rgba(110, 143, 112, .28), transparent 55%), var(--mg-verde-900); }
.tema-site .hero-inner { padding: clamp(40px, 7vw, 84px) 20px clamp(44px, 7vw, 88px); }
.tema-site .hero-grade { gap: 28px; }
@media (min-width: 900px) { .tema-site .hero-grade { gap: 48px; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } }
.tema-site .hero h1 { margin-bottom: 16px; }
.tema-site .hero p { margin-bottom: 24px; }
.tema-site .hero-acoes { gap: 12px; margin-bottom: 14px; }
.tema-site .hero-acoes .btn { min-width: 172px; justify-content: center; }
@media (max-width: 480px) { .tema-site .hero-acoes { display: grid; grid-template-columns: 1fr 1fr; } .tema-site .hero-acoes .btn { min-width: 0; width: 100%; } }
.hero-links { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0 0 22px; }
.hero-link { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0; background: none; border: 0; color: var(--mg-sage-suave); font-family: var(--ff-texto); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.hero-link:hover { color: var(--mg-amarelo); }
.hero-link .ic { width: 16px; height: 16px; color: var(--mg-amarelo); }
.hero-provas { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid rgba(195, 208, 184, .28); display: grid; gap: 8px 22px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .hero-provas { grid-template-columns: repeat(3, auto); justify-content: start; } }
.hero-provas li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mg-sage-suave); }
.hero-provas .ic { width: 16px; height: 16px; color: var(--mg-amarelo); flex: 0 0 auto; }
.tema-site .hero-arte { display: block; }
@media (max-width: 899px) {
  .tema-site .hero-circulo { display: none; }
  .tema-site .hero-foto img { aspect-ratio: 16 / 9; }
  .tema-site .hero-foto { box-shadow: var(--sombra); }
}
@media (min-width: 900px) { .tema-site .hero-foto img { aspect-ratio: 4 / 5; } }
.tema-site .hero h1 em { white-space: nowrap; }
/* Bloco do áudio entre o player e a barra de progresso: a barra deixa de subir por cima do texto. */
.aula-audio + .aula-progresso { margin-top: 14px; }
/* Telefone e tablet: o selo quebra linha em vez de cortar o texto.
   O corte era 360px e subiu para 900px em 06/09/2026. Abaixo de 900px a tabela
   vira cartao e o selo passa a dividir a largura com o rotulo da celula: a
   360px cabia, a 375px nao. Era assim que "Transmissao no portal" (/app/eventos),
   "Qualificado" (/admin/crm) e "Videoaula" (/admin/certificados) apareciam
   cortados com reticencias em telefone comum. Selo cortado nao informa nada:
   e o unico texto da celula que diz o ESTADO da linha. */
@media (max-width: 900px) {
  /* `.cartao-meta > span` (0,2,0) vence `.badge` (0,1,0) e devolvia o nowrap:
     era por isso que "Transmissao no portal" e "Inscricao confirmada"
     continuavam cortados nos cartoes de /app/eventos a 320px depois da
     primeira correcao. O seletor precisa empatar em especificidade. */
  .badge, .cartao-meta > .badge { white-space: normal; overflow: visible; text-overflow: clip; }
}
/* Modo cartao: o cabecalho escondido continuava a ter uma linha de 375px, que
   vazava a largura da pagina quando a caixa deixa de recortar (auditoria a
   320px). A linha e as celulas encolhem junto com o thead. */
@media (max-width: 900px) {
  .tabela-cartoes thead tr, .tabela-cartoes thead th { display: block; width: 1px; height: 1px; overflow: hidden; padding: 0; border: 0; }
}

/* ---------- certificados (05/09/2026) ---------- */
.cert-valida { max-width: 720px; }
.cert-cartao { background: var(--mg-branco); border: 1px solid var(--mg-borda); border-left: 4px solid var(--mg-verde-800); border-radius: var(--r-md); padding: 22px 24px; box-shadow: var(--sombra-sm); margin-top: 16px; }
.cert-cartao-revogado { border-left-color: var(--mg-erro); }
.cert-dados { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 16px 0; }
.cert-dados dt { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--mg-tinta-2); font-weight: 700; }
.cert-dados dd { margin: 0; }
@media (max-width: 520px) { .cert-dados { grid-template-columns: 1fr; gap: 2px 0; } .cert-dados dd { margin-bottom: 8px; } }
.cert-busca { margin-top: 18px; max-width: 420px; }
.cert-busca-linha { display: flex; gap: 8px; margin-top: 6px; }
.cert-busca-linha input { flex: 1; min-width: 0; padding: 11px 13px; border: 1px solid var(--mg-borda); border-radius: var(--r-sm); font-family: var(--ff-texto); font-size: 16px; text-transform: uppercase; letter-spacing: .08em; }
.cert-lista { display: grid; gap: 14px; grid-template-columns: 1fr; margin: 4px 0 26px; }
@media (min-width: 760px) { .cert-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cert-item { background: var(--mg-branco); border: 1px solid var(--mg-borda); border-left: 4px solid var(--mg-verde-800); border-radius: var(--r-md); padding: 16px 18px; box-shadow: var(--sombra-sm); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cert-item h2 { font-size: 1.1rem; margin: 0; }
.cert-item-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.cert-item-data { font-size: 12.5px; color: var(--mg-tinta-2); }
.cert-item-meta { margin: 0; font-size: 13.5px; color: var(--mg-tinta-2); overflow-wrap: anywhere; }
.cert-item-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.cert-pendentes { display: grid; gap: 10px; }
.cert-pendente { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border: 1px dashed var(--mg-borda); border-radius: var(--r-sm); text-decoration: none; color: inherit; background: var(--mg-branco); }
.cert-pendente span { font-size: 13.5px; color: var(--mg-tinta-2); }
a.cert-pendente:hover { border-style: solid; border-color: var(--mg-verde-800); }
.aula-cert-aviso { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; }
.aula-cert-aviso .ic { width: 16px; height: 16px; color: var(--mg-verde-800); flex: 0 0 auto; }
.presenca-lista { display: grid; gap: 12px; }
.presenca-form { background: var(--mg-branco); border: 1px solid var(--mg-borda); border-radius: var(--r-md); padding: 14px 16px; }
.presenca-form label { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin-bottom: 8px; }
.presenca-form label span { font-size: 13px; color: var(--mg-tinta-2); }
.presenca-linha { display: flex; gap: 8px; }
.presenca-linha input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--mg-borda); border-radius: var(--r-sm); font-family: var(--ff-texto); font-size: 16px; text-transform: uppercase; letter-spacing: .1em; }
html[data-tema="escuro"] .cert-cartao, html[data-tema="escuro"] .cert-item, html[data-tema="escuro"] .cert-pendente, html[data-tema="escuro"] .presenca-form { background: #1C2A24; border-color: var(--mg-borda); }
html[data-tema="escuro"] .presenca-linha input, html[data-tema="escuro"] .cert-busca-linha input { background: #182420; color: var(--mg-tinta); border-color: var(--mg-borda); }
/* Caixas de marcação de 24px (WCAG 2.5.8) em todas as telas, com o rótulo alinhado. */
.campo-check input, .consentimento input[type="checkbox"], .adm-lote input[type="checkbox"], .cel-selecao input[type="checkbox"] { width: 24px; height: 24px; }

/* TITULO nao se corta. Em coluna unica (telefone) o cartao nao precisa ter a
   mesma altura do vizinho, que e a unica razao do recorte em duas linhas; o
   preco era "Encontro Magis: dermatologia magistral..." e "Webinar Magis:
   nutrologia e..." na agenda do prescritor, medido em 390px em 06/09/2026.
   Fica no FIM do arquivo porque precisa vencer a regra de recorte declarada
   antes, e media query nao soma especificidade. A previa (p.cartao-desc)
   continua recortada de proposito: ali o corte e resumo, nao perda de nome. */
@media (max-width: 700px) {
  .cartao-corpo h3, .evento-corpo h3, .material-textos h3, .podcast-cab h3,
  .aula-mini-textos strong {
    display: block; -webkit-line-clamp: none; overflow: visible;
  }
  /* Resumo do topo: tres numeros em tres colunas. Em linha corrida o terceiro
     ("3 salvos") caia sozinho numa segunda linha, com um vao grande do lado. */
  .painel-hero-resumo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: start; }
  .painel-hero-resumo > * { min-width: 0; }
  .painel-hero-resumo strong { display: block; margin-right: 0; }
}

/* Piso de 48px no botao do site, do aplicativo e das telas de acesso.
   O `.btn` generico fecha 46px por conta do padding (13 + 18 de linha + 13 + 2
   de borda), e 46 nao passa: a sonda de toque mede o clique a 23px do CENTRO,
   e com meia altura de 23px o arredondamento de subpixel joga a sonda para
   fora. Foram 17 avisos em 06/09/2026, todos em "Entrar", "Criar acesso" e
   "Quero receber", que sao os botoes que mais recebem dedo na plataforma.
   A gestao fica de FORA de proposito: ali o `.tema-admin` ja tem o proprio
   piso de 48px abaixo de 1024px, e no desktop a casca compacta depende da
   altura menor para caber sem rolagem em 1366x768. */
@media (any-pointer: coarse), (max-width: 1024px) {
  .tema-site .btn, .tema-app .btn, .tema-auth .btn { min-height: 48px; }
}

/* ============================================================================
   FRENTE 7 DA RODADA 1.25 (07/09/2026): titulo de conteudo NUNCA e cortado.

   Em 06/09 o recorte de duas linhas foi desligado ate 700px, e o problema
   parecia resolvido porque os titulos da base tinham 40 a 55 caracteres. Com um
   titulo de 90 caracteres, medido em 07/09, o cartao no COMPUTADOR ainda cortava:
   92px de texto numa caixa de 46px, ou seja, quatro linhas presas em duas.
   Metade do nome da aula sumia justamente na tela em que a pessoa escolhe o que
   assistir.

   A razao do recorte era manter os cartoes da grade com a mesma altura. Isso
   nao se perde: numa grade CSS as celulas da MESMA LINHA ja crescem juntas, e o
   que muda e a linha ficar mais alta quando um titulo e mais longo. Altura de
   linha diferente e um preco pequeno; nome de aula pela metade, nao.

   A previa (`p.cartao-desc`) continua recortada em tres linhas de proposito:
   ali o corte e RESUMO, e nao perda de nome.

   Fica no FIM do arquivo porque precisa vencer a regra de recorte declarada
   antes, e media query nao soma especificidade.
   ============================================================================ */
.cartao-corpo h3, .evento-corpo h3, .material-textos h3, .podcast-cab h3,
.aula-mini-textos strong {
  display: block;
  -webkit-line-clamp: none;
  overflow: visible;
  overflow-wrap: anywhere;
}

/* Onde o texto e do PRESCRITOR (descricao da aula, resumo do evento), URL colada
   e palavra inquebravel nao podem esticar a caixa: quem quebra e a palavra, e so
   quando nao ha espaco. `anywhere` em vez de `break-all` para a quebra acontecer
   SO no aperto, e nao no meio de toda palavra. */
.aula-texto, .evento-descricao, .evento-texto,
.material-textos p, .podcast-desc, .cartao-desc,
.bloco-texto p, .live-chamada strong, .aula-mini-textos small,
.evento-cab p, .secao-inner p {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Certificados pendentes: o cartao cresce com o titulo em vez de esticar a
   pagina. O item de grade nasce com largura minima igual ao CONTEUDO, entao um
   titulo de 90 caracteres empurrava a pagina 27px a 320px e o cartao passava
   7px do pai a 360px, medido em 07/09/2026. `min-width: 0` deixa ele encolher,
   e a quebra acontece no texto. */
.cert-pendentes > * { min-width: 0; }
.cert-pendente { min-width: 0; }
.cert-pendente strong, .cert-pendente span { min-width: 0; overflow-wrap: anywhere; }

/* A pagina da aula em coluna unica: o item de grade tem de poder ENCOLHER.
   Medido em 07/09/2026 com um titulo de 90 caracteres: a pagina rolava 69px de
   lado a 320px e 29px a 360px, e TODOS os blocos apareciam com 369px numa tela
   de 320px, o que e a assinatura de trilha de grade esticada pelo conteudo, e
   nao de um elemento largo solto.
   Duas causas somadas:
   1. `grid-template-columns: 1fr` tem minimo implicito `auto`, que e o
      min-content: basta um filho que nao encolhe para a coluna inteira crescer;
   2. abaixo de 1100px `.aula-principal` e `.aula-lateral` sao `display: contents`,
      ou seja, a caixa delas se dissolve, e o `min-width: 0` declarado nelas
      deixa de valer. Quem vira item de grade sao os FILHOS delas, e e neles
      que o minimo precisa ser zerado. */
.aula-grade { grid-template-columns: minmax(0, 1fr); }
.aula-grade > *,
.aula-principal > *,
.aula-lateral > * { min-width: 0; }

/* ============================================================================
   GALERIA DE LÂMINAS (/app/materiais), 08/09/2026.

   Por que capa e não linha: as lâminas da Magispharma são peças desenhadas, e
   o prescritor reconhece a que quer pela capa antes de ler o título. A lista
   antiga desenhava o MESMO ícone de documento vinte e três vezes e obrigava a
   ler vinte e três linhas para achar uma.

   A proporção 900/1273 é a das capas geradas na importação, que é a folha A4
   exata (210/297 = 0,7071). Com `cover` nessa proporção não há corte nenhum:
   a página inteira aparece, e não um pedaço dela.
   ============================================================================ */

/* ---------- busca ---------- */
.lam-busca { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 18px; }
.lam-busca-campo { position: relative; flex: 1 1 260px; max-width: 460px; min-width: 0; display: flex; align-items: center; }
.lam-busca-campo .ic { position: absolute; left: 14px; width: 18px; height: 18px; color: var(--mg-tinta-2); pointer-events: none; }
.lam-busca-campo input[type="search"] {
  width: 100%; padding: 13px 14px 13px 42px; font: inherit; font-size: 15px;
  border: 1px solid var(--mg-borda); border-radius: 999px;
  background: var(--mg-branco); color: var(--mg-tinta);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.lam-busca-campo input[type="search"]:focus { outline: none; border-color: var(--mg-verde-700); box-shadow: 0 0 0 3px rgba(45, 89, 74, .14); }
/* Piso de 32px na regra RAIZ: o auditor de responsividade cobra alvo em janela
   estreita mesmo com mouse, e o link de limpar media 22px de altura. Em tela de
   toque ele sobe para 48px, mais abaixo. */
.lam-busca-limpar, .lam-limpar { display: inline-flex; align-items: center; min-height: 32px; font-size: 13.5px; }

/* ---------- filtros ---------- */
/* A caixa dobrável é feita com uma caixa de marcação escondida e o irmão que
   vem depois dela. Sem JavaScript de propósito: a política de segurança da
   plataforma não permite script embutido, e um script adiado só fecharia a
   caixa DEPOIS de desenhar a página, com o salto de layout à vista de todos.
   No desktop a caixa nunca fecha: a regra que a esconde só existe dentro da
   media query do celular. */
.lam-filtros { margin: 0 0 4px; }
.lam-filtros-botao { display: none; }
.lam-filtro { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 0 0 10px; }
.lam-filtro-rotulo { flex: 0 0 auto; font-size: 12.5px; font-weight: 700; color: var(--mg-tinta-2); letter-spacing: .04em; }
.lam-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.lam-chip {
  display: inline-flex; align-items: center; gap: 7px; min-height: 34px;
  padding: 5px 12px; border-radius: 999px; text-decoration: none;
  font-size: 13px; line-height: 1.2;
  border: 1px solid var(--mg-borda); background: var(--mg-branco); color: var(--mg-tinta-2);
  transition: border-color var(--transicao), background var(--transicao), color var(--transicao);
}
.lam-chip:hover { border-color: var(--mg-verde-700); color: var(--mg-verde-800); }
.lam-chip.ativo { background: var(--mg-verde-800); border-color: var(--mg-verde-800); color: var(--mg-creme); font-weight: 700; }
/* O contador vive DENTRO do botão porque é a resposta à pergunta que o botão
   faz: "quantas lâminas existem para sono?". Fora dele viraria enfeite. */
.lam-chip-num { font-size: 11.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: var(--mg-creme); color: var(--mg-verde-800); }
.lam-chip.ativo .lam-chip-num { background: rgba(241, 243, 234, .22); color: var(--mg-creme); }

/* Bloco, e não flex: em `display: flex` cada trecho de texto vira um item e o
   `gap` abre um vão entre o número e a palavra que ele conta ("23    materiais").
   O respiro antes do atalho de limpar vem da margem dele. */
.lam-contagem { margin: 6px 0 18px; font-size: 13.5px; color: var(--mg-tinta-2); }
.lam-contagem .lam-limpar { margin-left: 14px; }
.lam-contagem strong { color: var(--mg-tinta); }


/* ---------- grade ---------- */
.lam-grade { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
/* `minmax(0, 1fr)` e `min-width: 0` porque o mínimo de um item de grade é o
   min-content dele: sem isso um título comprido empurra a coluna e a página
   ganha rolagem lateral, defeito medido três vezes nesta base. */
.lam-grade > * { min-width: 0; }

.lam-cartao {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--mg-branco); border: 1px solid var(--mg-borda);
  border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sombra-sm);
  transition: box-shadow var(--transicao), transform var(--transicao);
}
.lam-cartao:hover { box-shadow: var(--sombra); transform: translateY(-2px); }

.lam-alvo { display: block; text-decoration: none; color: inherit; }
.lam-capa { display: block; position: relative; aspect-ratio: 900 / 1273; background: var(--mg-creme); overflow: hidden; }
.lam-capa img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
/* Sem capa (PDF enviado pela gestão, que não passa pela renderização da
   importação): o título desenhado sobre o creme da marca diz mais do que um
   ícone genérico repetido, e mantém a grade alinhada. */
.lam-capa-vazia { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 18px; text-align: center; color: var(--mg-verde-800); }
.lam-capa-vazia .ic { width: 34px; height: 34px; }
.lam-capa-vazia span { font-family: 'Marcellus', Georgia, serif; font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
/* Sempre visível, e não só no `hover`: em telefone não existe `hover`, e uma
   dica que só o desktop enxerga não é dica. Mesmo desenho da etiqueta de
   duração do cartão de videoaula. */
.lam-capa-abrir { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; background: rgba(27, 52, 43, .85); color: var(--mg-creme); font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px; }
.lam-capa-abrir .ic { width: 14px; height: 14px; }
.lam-alvo:hover .lam-capa-abrir { background: var(--mg-verde-800); }

.lam-alvo h3 { margin: 14px 16px 0; font-size: 1.02rem; line-height: 1.3; overflow-wrap: anywhere; }
.lam-alvo:hover h3 { color: var(--mg-verde-800); }
.lam-meta { margin: 6px 16px 0; font-size: 12px; color: var(--mg-tinta-2); letter-spacing: .03em; overflow-wrap: anywhere; }
.lam-meta span { color: var(--mg-sage); margin: 0 2px; }
.lam-desc { margin: 8px 16px 0; font-size: 13px; line-height: 1.45; color: var(--mg-tinta-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }

.lam-objetivos { list-style: none; margin: 10px 16px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
/* `min-width: 0` e `overflow-wrap: anywhere` juntos: o minimo de um item de
   flex e o min-content dele, e "antienvelhecimento" sozinha mede 118px com o
   respiro. Num cartao de 134px (dois por linha a 320px) a etiqueta passava 18px
   do proprio cartao. Com os dois, a palavra quebra e a etiqueta encolhe.
   `min-height: 32px` na regra RAIZ, e nao so na media query de toque: o piso de
   alvo tambem e cobrado em janela estreita com mouse, que e como o auditor de
   responsividade mede. Em tela de toque ele sobe para 48px mais abaixo. */
.lam-objetivos li { min-width: 0; max-width: 100%; }
.lam-objetivos a { display: inline-flex; align-items: center; min-height: 32px; max-width: 100%; text-decoration: none; font-size: 11.5px; line-height: 1.25; padding: 5px 9px; border-radius: 6px; background: var(--mg-creme); color: var(--mg-verde-800); border: 1px solid transparent; overflow-wrap: anywhere; transition: border-color var(--transicao), background var(--transicao); }
.lam-objetivos a:hover { background: var(--mg-amarelo); border-color: var(--mg-sage-suave); }

.lam-acoes { margin: auto 16px 16px; padding-top: 14px; display: flex; gap: 8px; }
.lam-acoes .btn { flex: 1 1 auto; justify-content: center; }

.lam-salvar { position: absolute; right: 10px; top: 10px; z-index: 2; margin: 0; }
.lam-salvar button {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(27, 52, 43, .78); color: var(--mg-creme);
  transition: background var(--transicao), color var(--transicao);
}
.lam-salvar button:hover { background: var(--mg-verde-800); }
.lam-salvar button.salvo { background: var(--mg-amarelo); color: var(--mg-verde-900); }
.lam-salvar .ic { width: 18px; height: 18px; }

/* Duas colunas no telefone em vez de uma: em coluna única a capa A4 ficaria
   com mais de 500px de altura e caberia UMA lâmina por tela, o que transforma
   a galeria numa rolagem sem fim. Medido a 390px: dois cartões por linha, capa
   de 240px, quatro lâminas visíveis por tela. */
/* Abaixo de 760px os filtros viram uma caixa fechada. Medido a 390px com tudo
   aberto: 1.127px de botões antes da primeira lâmina, mais de uma tela inteira
   de rolagem para chegar ao conteúdo. */
@media (max-width: 760px) {
  .lam-filtros-botao {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px;
    padding: 10px 16px; margin-bottom: 12px; cursor: pointer;
    border: 1px solid var(--mg-borda); border-radius: 999px; background: var(--mg-branco);
    font-size: 13.5px; color: var(--mg-tinta-2);
  }
  .lam-filtros-botao .ic { width: 18px; height: 18px; flex: 0 0 auto; color: var(--mg-verde-800); }
  .lam-filtros-botao strong { color: var(--mg-verde-800); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lam-filtros-botao::after { content: ''; margin-left: auto; flex: 0 0 auto; width: 9px; height: 9px; border-right: 2px solid var(--mg-tinta-2); border-bottom: 2px solid var(--mg-tinta-2); transform: rotate(45deg) translate(-2px, -2px); }
  .lam-gatilho:checked ~ .lam-filtros .lam-filtros-botao::after { transform: rotate(225deg) translate(-3px, -3px); }
  .lam-gatilho:checked ~ .lam-filtros .lam-filtros-botao { background: var(--mg-creme); border-color: var(--mg-sage-suave); }
  .lam-gatilho:focus-visible ~ .lam-filtros .lam-filtros-botao { outline: 2px solid var(--mg-verde-700); outline-offset: 2px; }
  .lam-filtros-painel { display: none; }
  .lam-gatilho:checked ~ .lam-filtros .lam-filtros-painel { display: block; }
  .lam-filtro { margin-bottom: 14px; }
  .lam-filtro-rotulo { flex-basis: 100%; }
}

@media (max-width: 620px) {
  /* Busca em UMA linha: com `flex-basis` de 260px o campo não cabia ao lado do
     botão e a barra virava duas linhas, 111px de altura antes da galeria. */
  .lam-busca { flex-wrap: nowrap; gap: 8px; }
  .lam-busca-campo { flex: 1 1 auto; }
  .lam-busca .btn { flex: 0 0 auto; }
  .lam-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .lam-alvo h3 { margin: 12px 12px 0; font-size: .95rem; }
  .lam-meta { margin: 5px 12px 0; font-size: 11.5px; }
  .lam-desc { display: none; }
  .lam-objetivos { margin: 8px 12px 0; }
  .lam-acoes { margin: auto 12px 12px; padding-top: 12px; }
  .lam-capa-abrir { right: 7px; bottom: 7px; font-size: 11px; padding: 4px 9px; }
}
/* A descrição some no telefone de propósito: com 172px de largura ela empurra
   o botão de baixar para fora da primeira tela e o cartão vira parágrafo. O
   texto inteiro está na própria lâmina, a um toque. */

@media (any-pointer: coarse) {
  .lam-chip { min-height: 48px; padding-top: 0; padding-bottom: 0; }
  .lam-busca-limpar, .lam-limpar { min-height: 48px; display: inline-flex; align-items: center; }
  .lam-salvar button { width: 48px; height: 48px; }
  .lam-objetivos a { min-height: 48px; display: inline-flex; align-items: center; }
}

html[data-tema="escuro"] .lam-salvar button { background: rgba(14, 23, 20, .82); color: #E6ECC3; }
html[data-tema="escuro"] .lam-salvar button.salvo { background: #E6ECC3; color: #1B342B; }
html[data-tema="escuro"] .lam-capa-abrir { background: rgba(14, 23, 20, .88); }
html[data-tema="escuro"] .lam-cartao { background: var(--mg-branco); border-color: var(--mg-borda); }
html[data-tema="escuro"] .lam-chip { background: #1C2A24; border-color: var(--mg-borda); color: var(--mg-tinta-2); }
html[data-tema="escuro"] .lam-chip.ativo { background: #2D594A; border-color: #2D594A; color: #F1F3EA; }
html[data-tema="escuro"] .lam-chip-num { background: #223329; color: #8FC29B; }
html[data-tema="escuro"] .lam-chip.ativo .lam-chip-num { background: rgba(241, 243, 234, .18); color: #F1F3EA; }
html[data-tema="escuro"] .lam-objetivos a { background: #223329; color: #8FC29B; }
html[data-tema="escuro"] .lam-objetivos a:hover { background: #33463C; border-color: #7E9A82; }
html[data-tema="escuro"] .lam-capa { background: #223329; }
html[data-tema="escuro"] .lam-capa-vazia { color: #8FC29B; }
html[data-tema="escuro"] .lam-busca-campo input[type="search"] { background: #182420; color: var(--mg-tinta); border-color: var(--mg-borda); }

html[data-tema="escuro"] .lam-filtros-botao { background: #1C2A24; border-color: var(--mg-borda); }
html[data-tema="escuro"] .lam-gatilho:checked ~ .lam-filtros .lam-filtros-botao { background: #223329; border-color: #7E9A82; }

/* Miniatura da lâmina nas listas compactas (painel do prescritor e salvos).
   Em pé, com a proporção da folha: a capa espremida num quadrado de 46px
   perdia justamente o que faz reconhecer a lâmina, que é o título grande. */
.material-capa { flex: 0 0 40px; width: 40px; height: 57px; border-radius: 6px; overflow: hidden; background: var(--mg-creme); border: 1px solid var(--mg-borda); display: block; }
.material-capa img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.lista-materiais-compacta .material-capa { flex-basis: 34px; width: 34px; height: 48px; }
html[data-tema="escuro"] .material-capa { background: #223329; border-color: var(--mg-borda); }

/* ============================================================================
   ESTADO VAZIO GRANDE NA AREA DO PRESCRITOR (08/09/2026).

   O `estadoVazio()` nasceu para a gestao, na rodada 1.25, e as telas do
   prescritor ficaram com a caixa antiga: 190px de altura encostada no topo e
   cerca de 330px de nada embaixo, em 1366x768. Tela oca le como sistema
   quebrado, e aqui quem le e o cliente da farmacia.

   As regras estruturais de `.vazio-grande` ja vivem no admin.css, que e
   carregado em toda pagina; o que faltava era o tipo do titulo e do texto fora
   do `.tema-admin`, e uma altura minima, porque na area do prescritor nao ha
   pagina de altura fixa para o bloco preencher.
   ============================================================================ */
.tema-app .vazio-grande, .tema-site .vazio-grande { min-height: 340px; }
/* 52ch, e nao os 46ch da gestao: com duas acoes lado a lado ("Criar meu acesso"
   e "Conhecer a plataforma") o miolo estreito empilhava os botoes sem
   necessidade. */
.tema-app .vazio-miolo, .tema-site .vazio-miolo { max-width: 52ch; }
/* O site público NÃO carrega o admin.css, onde vivem o flex e o margin:auto do
 * estado vazio: em /eventos sem evento o miolo ficava colado à esquerda de um
 * cartão de 1300px (12/09/2026). Centralizado aqui, com as próprias regras. */
.tema-site .vazio-grande { display: flex; align-items: center; justify-content: center; padding: 32px 20px; margin: 0; text-align: center; }
.tema-site .vazio-miolo { margin: 0 auto; }
.tema-site .vazio-grande .vazio-icone { display: block; margin: 0 auto 10px; }
.tema-site .vazio-grande .vazio-icone .ic { width: 40px; height: 40px; color: var(--mg-sage); margin: 0; }
.tema-site .vazio-titulo { font-family: var(--ff-titulo); font-size: 1.5rem; line-height: 1.2; color: var(--mg-verde-900); margin: 0 0 8px; }
.tema-site .vazio-texto { font-size: 15px; line-height: 1.55; margin: 0 0 18px; }
.tema-site .vazio-acoes { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.tema-app .vazio-titulo, .tema-site .vazio-titulo {
  font-family: 'Marcellus', Georgia, serif;
  font-size: 1.42rem;
  line-height: 1.2;
  margin: 0 0 8px;
  color: var(--mg-verde-900);
  overflow-wrap: anywhere;
}
.tema-app .vazio-texto, .tema-site .vazio-texto { display: block; font-size: 14.5px; line-height: 1.55; margin: 0 0 18px; }
.tema-app .vazio-texto::first-letter, .tema-site .vazio-texto::first-letter { text-transform: uppercase; }
.tema-app .vazio-dicas li, .tema-site .vazio-dicas li { text-align: left; }

/* ============================================================================
   Rodada 10/09/2026, portal do prescritor (Frente B): análise do cliente.
   Bloco no FIM do arquivo de propósito: outras frentes editam este mesmo
   arquivo ao mesmo tempo, e regra nova aqui não colide com regra antiga lá.
   ============================================================================ */

/* B2: o clique na logomarca pintava uma linha verde (outline de :focus) no
   tema escuro. O contorno fica só para o TECLADO (:focus-visible). */
/* O drawer recebe foco no container ao abrir (app.js); sem isto o iPhone
   pintava o anel de foco na logomarca. Container não mostra contorno. */
.app-sidebar:focus, .app-sidebar:focus-visible { outline: none; }
.app-sidebar-logo:focus:not(:focus-visible), .app-topbar-logo:focus:not(:focus-visible) { outline: none; box-shadow: none; }
.app-sidebar-logo:focus-visible, .app-topbar-logo:focus-visible { outline: 2px solid var(--mg-verde-800); outline-offset: 3px; border-radius: 6px; }

/* B3: rolagem elástica nos extremos (o "espaço vazio" ao puxar a tela além do
   topo e do fim no iPhone). A regra em `body` já existia e o WebKit lê a do
   ELEMENTO RAIZ para o rubber-band do documento: `:has()` alcança o html só
   quando a página é do portal. O fundo do html acompanha o tema, para que a
   área que ainda aparecer no gesto tenha a cor da página, e não branco. */
html:has(body.tema-app) { overscroll-behavior: none; overscroll-behavior-y: none; background: var(--mg-base); }
html:has(body.tema-app) body { overscroll-behavior: none; }

/* B4/B5: sem título repetido no cabeçalho e sem botão de tema na barra
   lateral (o HTML já não os imprime; o cabeçalho ganha o respiro do centro). */
.app-topbar-logo { margin-right: auto; }

/* B6: cada fato do resumo é uma unidade que não quebra no meio, no COMPUTADOR
   (linha corrida com folga). No telefone os três fatos vivem em três colunas
   de 75 a 106px, e o nowrap fazia "de 1 aula concluída" (117px) invadir a
   coluna vizinha (revisão de 11/09/2026, PORT-1): ali o número fica em bloco e
   o rótulo quebra embaixo dele, palavra inteira, sem invadir ninguém. */
@media (min-width: 701px) { .painel-hero-resumo > span { white-space: nowrap; } }
@media (max-width: 700px) { .painel-hero-resumo > span { white-space: normal; overflow-wrap: normal; line-height: 1.25; } }

/* B9 e B26: cartão de material com a capa como protagonista e botões na
   largura do texto. */
.material-item-capa { align-items: flex-start; }
.material-capa-grande, .lista-materiais-compacta .material-capa-grande { flex: 0 0 88px; width: 88px; height: 124px; border-radius: 8px; }
.material-item-capa .material-textos { display: flex; flex-direction: column; gap: 4px; }
.material-item-capa .material-textos h3 { line-height: 1.25; }
.material-acoes { flex-wrap: wrap; }
.material-item-capa .material-acoes { margin-top: 6px; gap: 8px; width: auto; justify-content: flex-start; }
.btn-estreito { flex: 0 0 auto; padding-left: 14px; padding-right: 16px; min-height: 40px; }
.btn-estreito .ic { width: 16px; height: 16px; }
.material-item-capa .acao-salvar { margin: 0; }
@media (max-width: 480px) {
  .material-item-capa { gap: 12px; }
  .material-capa-grande, .lista-materiais-compacta .material-capa-grande { flex-basis: 88px; width: 88px; height: 124px; }
}

/* B11: categorias das videoaulas em dois desenhos. */
.filtros-pilulas { flex-wrap: wrap; overflow: visible; }
.filtro-seletor { display: none; align-items: center; gap: 10px; margin: 0 0 18px; }
.filtro-seletor label { font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mg-tinta-2); flex: 0 0 auto; }
.filtro-seletor select { flex: 1 1 auto; min-width: 0; min-height: 48px; font-size: 15px; padding: 10px 40px 10px 14px; border: 1px solid var(--mg-borda); border-radius: 12px; background: var(--mg-branco); color: var(--mg-tinta); font-family: var(--ff-texto); appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--mg-verde-800) 50%), linear-gradient(135deg, var(--mg-verde-800) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.filtro-seletor select:focus-visible { outline: 2px solid var(--mg-verde-800); outline-offset: 1px; }
.filtro-seletor .btn { flex: 0 0 auto; min-height: 48px; }
html.com-script .filtro-seletor [data-some-com-script] { display: none; }
@media (max-width: 640px) {
  .filtros-pilulas { display: none; }
  .filtro-seletor { display: flex; }
}

/* B13: aviso curto numa linha só no telefone. `width: max-content` é o que
   faltava (revisão de 11/09/2026, PORT-3): um fixed com left:50% só dispõe de
   metade do viewport, 195px em 390, e o texto de 231px quebrava em duas. */
.toast { white-space: normal; width: max-content; max-width: min(92vw, 34em); }

/* B16: a dica embaixo do botão de concluir. */
.aula-concluir-dica { margin: 8px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--mg-tinta-2); text-align: center; }
.aula-concluir-dica strong { color: var(--mg-verde-800); font-variant-numeric: tabular-nums; }
.aula-acoes form { width: 100%; }

/* B17: "Ouça no seu aplicativo de podcast" no tema escuro. Os tokens do tema
   escuro trocam --mg-verde-900 por um verde CLARO, e a caixa, que é escura por
   desenho, ficava clara com texto claro em cima. Fundo fixo escuro aqui. */
html[data-tema="escuro"] .pod-assinar { background: #1B342B; color: #E8ECE4; }
html[data-tema="escuro"] .pod-assinar h2 { color: #fff; }
html[data-tema="escuro"] .pod-assinar p { color: #C3D0B8; }
html[data-tema="escuro"] .pod-assinar-url { background: rgba(255, 255, 255, .08); border-color: rgba(195, 208, 184, .35); color: #E6ECC3; }
html[data-tema="escuro"] .pod-assinar-apps a, html[data-tema="escuro"] .pod-assinar-rotacionar { color: #E6ECC3; }
html[data-tema="escuro"] .pod-assinar .btn-claro { background: #E6ECC3; color: #1B342B; }
html[data-tema="escuro"] .pod-assinar::after { border-color: rgba(195, 208, 184, .25); }
.pod-assinar-nota { margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--mg-sage-suave); position: relative; z-index: 1; }
html[data-tema="escuro"] .pod-assinar-nota { color: #C3D0B8; }

/* B20 e B24: texto creme sobre fundo escuro FIXO no tema escuro. O token
   --mg-creme vira #223329 (escuro) no tema escuro, e todo lugar que o usava
   como cor de TEXTO sobre um fundo que continua escuro ficava invisível:
   "Abrir" na capa da lâmina, a duração e o selo sobre a capa da aula, e o
   número da página atual (a regra do tema escuro para .paginacao-num vence a
   de .atual por especificidade e deixava o fundo escuro com o texto escuro). */
html[data-tema="escuro"] .lam-capa-abrir, html[data-tema="escuro"] .cartao-capa-tempo, html[data-tema="escuro"] .cartao-capa-selo { color: #E6ECC3; }
html[data-tema="escuro"] .paginacao-num.atual { background: #8FC29B; border-color: #8FC29B; color: #0E1714; }
html[data-tema="escuro"] .paginacao-passo.desativado { opacity: .45; }
/* Board 8: número/seta da paginação estavam apagados no escuro (tinta-2 sobre
   fundo escuro). Texto claro para ler o "2" e as setas. */
html[data-tema="escuro"] .paginacao-num, html[data-tema="escuro"] .paginacao-passo { color: var(--mg-tinta); }
html[data-tema="escuro"] .paginacao-num.atual { color: #0E1714; }
html[data-tema="escuro"] .filtro-seletor select { background-color: #1C2A24; color: var(--mg-tinta); border-color: var(--mg-borda); }

/* B21: "12 páginas" não separa o número do rótulo. */
.lam-meta { overflow-wrap: normal; }
/* `.lam-meta span` pinta o separador de sage; o item, que virou <span>, volta
   à cor de texto (medido: 2,1:1 antes desta regra). */
.lam-meta .lam-meta-item { white-space: nowrap; color: var(--mg-tinta-2); margin: 0; }
.lam-meta > span[aria-hidden] { color: var(--mg-sage); margin: 0 2px; }

/* B23: "Limpar filtros" junto do gatilho de filtro. */
.lam-filtros-limpar { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 12px; margin: 0 0 8px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--mg-verde-800); text-decoration: none; border: 1px solid var(--mg-borda); background: var(--mg-branco); }
.lam-filtros-limpar .ic { width: 14px; height: 14px; }
.lam-filtros-limpar:hover { border-color: var(--mg-verde-700); background: var(--mg-creme); }
@media (min-width: 761px) { .lam-filtros { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 16px; } .lam-filtros-painel { flex: 1 1 100%; } .lam-filtros-limpar { order: -1; margin-bottom: 10px; } }

/* B25: cartão de evento em camadas. */
.evento-cartao .evento-corpo { padding: 16px 18px 16px 6px; gap: 8px; justify-content: flex-start; }
.evento-cartao h3 { font-size: 1.15rem; line-height: 1.25; }
.evento-fatos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.evento-fatos li { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--mg-tinta-2); min-width: 0; }
.evento-fatos .ic { width: 15px; height: 15px; flex: 0 0 auto; color: var(--mg-verde-800); }
.evento-selos { display: flex; flex-wrap: wrap; gap: 6px; }
.evento-cartao .cartao-desc { -webkit-line-clamp: 2; }
.evento-acao { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 13.5px; font-weight: 700; color: var(--mg-verde-800); }
.evento-acao .ic { width: 16px; height: 16px; transition: transform var(--transicao); }
.evento-cartao:hover .evento-acao .ic { transform: translateX(3px); }
.evento-cartao .evento-data { align-self: stretch; }
@media (max-width: 480px) { .evento-cartao .evento-corpo { padding: 14px 14px 14px 4px; } .evento-fatos li { font-size: 13px; } }

/* B27 e B28: estado vazio dos certificados (e os demais): botão menor e
   título sem palavra órfã. */
.tema-app .vazio-titulo { text-wrap: balance; overflow-wrap: normal; }
.tema-app .vazio-acoes .btn { padding: 10px 20px; font-size: 14px; min-height: 44px; }
.tema-app .vazio-acoes .btn .ic { width: 18px; height: 18px; flex: 0 0 auto; margin: 0; color: currentColor; }

/* B29: foto de perfil (cartão no perfil, miniatura na barra e no cabeçalho). */
.perfil-foto-cartao { margin-bottom: 22px; }
.perfil-foto-form { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.perfil-foto-previa { flex: 0 0 96px; width: 96px; height: 96px; border-radius: 50%; overflow: hidden; background: var(--mg-creme); color: var(--mg-verde-800); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--mg-borda); }
.perfil-foto-previa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.perfil-foto-previa .ic { width: 44px; height: 44px; }
.perfil-foto-campos { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.perfil-foto-campos .campo-dica { margin: 0; }
.perfil-foto-campos .form-acoes { margin-top: 2px; }
.perfil-foto-escolher { align-self: flex-start; cursor: pointer; }
.app-foto-perfil { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; border: 1px solid rgba(255, 255, 255, .25); }
.app-sidebar-perfil .app-foto-perfil { width: 36px; height: 36px; }
.app-topbar-perfil .app-foto-perfil { width: 30px; height: 30px; border-color: var(--mg-borda); }
html[data-tema="escuro"] .perfil-foto-previa { background: #1C2A24; border-color: var(--mg-borda); }

/* B30: respiro entre os cartões do perfil e a seção "Os seus dados", e entre
   os botões e o texto de apoio. */
.tema-app .grade-topo { margin-bottom: 30px; }
.tema-app .form-acoes + .campo-dica { margin-top: 16px; }

/* B10: o aviso de privacidade dentro do app. */
.app-privacidade { padding: 0; }
.app-privacidade .secao-inner { padding: 0; max-width: 760px; margin: 0; }
.app-privacidade .voltar-linha { margin: 0 0 14px; }

/* ============================================================================
   Rodada 10/09/2026, site (análise do cliente): botão do herói no telefone,
   página de obrigado, seção "A Magispharma" (fotos ampliáveis e ações
   visíveis), promessa de marca redesenhada, seção de vídeos, WhatsApp
   flutuante e a página de link na bio (/links). Tudo por token --mg-*.
   ============================================================================ */

/* C1: em 480px os dois botões viravam duas colunas de 169px e "Quero ser
   parceiro" quebrava em duas linhas (64px de altura, medido). Um por linha,
   largura total, 48px de alvo, sem quebra. */
@media (max-width: 480px) {
  .tema-site .hero-acoes { grid-template-columns: 1fr; gap: 10px; }
  .tema-site .hero-acoes .btn { min-height: 48px; white-space: nowrap; padding-left: 20px; padding-right: 20px; }
}

/* C3: página de obrigado. Entre o último cartão e o rodapé havia 132px no
   telefone e 156px no computador (padding da seção + 80px do rodapé). */
/* 21/09/2026 (C16): esta regra NUNCA valeu desde 15/09. `.tema-site .secao`
   (site.css:37, clamp(48px, 5vw, 88px)) tem o MESMO peso e vem numa folha
   carregada depois, entao vencia: medido por CDP em 2560x1440, padding-bottom
   de 88px com esta linha listada e riscada. A classe dobrada da o peso que
   faltava, sem !important. */
.tema-site .secao.secao-obrigado { padding-bottom: clamp(28px, 4vw, 40px); }
main:has(> .secao-obrigado) + .site-rodape { margin-top: 0; }

/* C4: as duas frases clicáveis da seção "A Magispharma" viraram ações com
   ícone e seta, cada uma com alvo de 44px. */
.sobre-acoes { display: flex; flex-direction: column; gap: 4px; margin-top: 22px; }
.link-acao {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; width: fit-content; max-width: 100%;
  font-family: var(--ff-texto); font-size: 14.5px; font-weight: 700; color: var(--mg-verde-800);
  text-decoration: underline; text-decoration-color: var(--mg-sage); text-underline-offset: 5px; text-decoration-thickness: 2px;
  transition: color var(--transicao), text-decoration-color var(--transicao);
}
.link-acao .ic { width: 18px; height: 18px; flex: 0 0 auto; }
.link-acao .ic:last-child { width: 16px; height: 16px; transition: transform var(--transicao); }
.link-acao span { min-width: 0; }
.link-acao:hover, .link-acao:focus-visible { color: var(--mg-verde-950); text-decoration-color: var(--mg-verde-800); }
.link-acao:hover .ic:last-child, .link-acao:focus-visible .ic:last-child { transform: translateX(4px); }
.link-acao:focus-visible { outline: 2px solid var(--mg-verde-800); outline-offset: 4px; border-radius: 3px; }

/* C4: foto ampliável. O link envolve a imagem e mostra uma lupa no canto;
   no telefone a lupa fica sempre visível, porque não há hover. */
.sobre-ampliar { display: block; position: relative; color: inherit; cursor: zoom-in; }
.sobre-ampliar img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.sobre-ampliar:hover img, .sobre-ampliar:focus-visible img { transform: scale(1.03); }
.sobre-lupa {
  position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(27, 52, 43, .78); color: var(--mg-creme); opacity: 0; transition: opacity var(--transicao);
}
.sobre-lupa .ic { width: 18px; height: 18px; }
.sobre-ampliar:hover .sobre-lupa, .sobre-ampliar:focus-visible .sobre-lupa { opacity: 1; }
.sobre-ampliar:focus-visible { outline: 3px solid var(--mg-amarelo); outline-offset: -3px; }
@media (hover: none) { .sobre-lupa { opacity: 1; } }
/* A caixa de ampliação (site.js). `hidden` vence qualquer display: ela é
   position fixed, e uma regra de display que ganhasse do atributo a deixaria
   sempre aberta. */
.ampliar-caixa { position: fixed; inset: 0; z-index: 1200; background: rgba(27, 52, 43, .92); display: flex; align-items: center; justify-content: center; padding: 20px; }
.ampliar-caixa[hidden] { display: none !important; }
.ampliar-figura { margin: 0; max-width: min(1400px, 100%); max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ampliar-figura img { display: block; max-width: 100%; max-height: calc(100dvh - 110px); width: auto; height: auto; border-radius: var(--r-md); box-shadow: 0 30px 60px rgba(0, 0, 0, .4); }
.ampliar-figura figcaption { color: var(--mg-creme); font-family: var(--ff-texto); font-size: 14px; letter-spacing: .04em; text-align: center; }
.ampliar-fechar {
  position: absolute; top: 14px; right: 14px; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(241, 243, 234, .5);
  background: rgba(27, 52, 43, .6); color: var(--mg-creme); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.ampliar-fechar .ic { width: 22px; height: 22px; }
.ampliar-fechar:hover, .ampliar-fechar:focus-visible { background: var(--mg-verde-800); outline: 2px solid var(--mg-amarelo); outline-offset: 2px; }
body.ampliar-aberto { overflow: hidden; }

/* C5: promessa de marca. Duas colunas no computador (citação e composição de
   foto), uma no telefone com a foto em cima. Sobrescreve a versão antiga da
   seção (texto e círculo). */
.manifesto-v2 { padding: clamp(56px, 8vw, 96px) 0; }
.manifesto-v2 .manifesto-inner { position: relative; }
.manifesto-grade { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: center; }
.manifesto-grade > * { min-width: 0; }
.manifesto-v2 .etiqueta { color: var(--mg-verde-900); border-color: rgba(35, 68, 57, .55); }
.manifesto-v2 blockquote { margin: 0; max-width: 24em; }
.manifesto-v2 blockquote p { font-family: var(--ff-titulo); font-size: clamp(1.45rem, 2.6vw, 2.05rem); line-height: 1.32; color: var(--mg-verde-950); margin: 0 0 18px; }
/* O trecho-chave em bloco creme: o mesmo sistema visual dos criativos
   aprovados pelo dono. `box-decoration-break` para o bloco acompanhar a
   quebra de linha sem perder o respiro nas pontas. */
.manifesto-destaque {
  background: var(--mg-creme); color: var(--mg-verde-900); padding: .04em .28em; border-radius: 6px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.manifesto-v2 cite { display: block; font-style: normal; font-family: var(--ff-texto); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mg-verde-900); }
.manifesto-pilares { list-style: none; margin: 30px 0 0; padding: 22px 0 0; border-top: 1px solid rgba(35, 68, 57, .28); display: grid; gap: 12px; }
.manifesto-pilares li { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: start; font-size: 14px; line-height: 1.5; color: var(--mg-verde-950); }
.manifesto-pilares strong { color: var(--mg-verde-900); }
.manifesto-pilar-num { font-family: var(--ff-texto); font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--mg-verde-950); border: 1px solid rgba(35, 68, 57, .35); border-radius: 999px; width: 34px; height: 24px; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.manifesto-arte { position: relative; display: grid; place-items: center; min-height: 300px; }
.manifesto-v2 .manifesto-circulo { position: absolute; width: min(78%, 420px); aspect-ratio: 1; height: auto; right: 4%; top: 50%; transform: translateY(-50%); border: 1px solid rgba(35, 68, 57, .3); border-radius: 50%; pointer-events: none; }
.manifesto-v2 .manifesto-circulo-2 { width: min(52%, 280px); right: auto; left: 2%; top: 14%; transform: none; border-color: rgba(241, 243, 234, .55); }
/* A foto em máscara orgânica: o desenho do brandbook é de curvas, não de
   caixa. A máscara muda de forma suavemente no hover só para dar vida. */
.manifesto-foto {
  margin: 0; position: relative; width: min(100%, 520px); aspect-ratio: 5 / 4; overflow: hidden;
  border-radius: 58% 42% 46% 54% / 48% 52% 48% 52%;
  box-shadow: 0 30px 60px rgba(27, 52, 43, .28);
  transition: border-radius 1.2s ease;
}
.manifesto-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.manifesto-arte:hover .manifesto-foto { border-radius: 46% 54% 56% 44% / 54% 46% 54% 46%; }
.manifesto-selo {
  position: absolute; right: 2%; bottom: 6%; width: 108px; height: 108px; border-radius: 50%;
  background: var(--mg-verde-900); color: var(--mg-amarelo); display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 16px 34px rgba(27, 52, 43, .35); border: 4px solid var(--mg-sage);
}
.manifesto-selo-num { font-family: var(--ff-titulo); font-size: 30px; line-height: 1; }
.manifesto-selo-txt { font-family: var(--ff-texto); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; margin-top: 4px; color: var(--mg-creme); }
@media (max-width: 899px) {
  .manifesto-grade { gap: 30px; }
  .manifesto-arte { order: -1; min-height: 0; }
  .manifesto-foto { width: min(100%, 440px); aspect-ratio: 4 / 3; }
  .manifesto-selo { width: 88px; height: 88px; right: 4%; bottom: 0; }
  .manifesto-selo-num { font-size: 24px; }
}
@media (min-width: 900px) {
  .manifesto-grade { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; }
  .manifesto-arte { min-height: 440px; }
}

/* C10: vídeos. Marcação de includes/site_publico.php (videosSiteSecaoHtml):
   .video-quadro com a capa e o botão de play; o site.js troca a capa pelo
   player (iframe ou <video>) só no clique, um por vez. Cartão vertical
   (Reels/Shorts) fica em 9:16 e ocupa uma coluna só. */
.secao-videos { background: var(--mg-branco); }
.videos-filtro { display: flex; flex-wrap: wrap; gap: 8px; margin: -14px 0 26px; }
.videos-filtro-btn {
  font-family: var(--ff-texto); font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--mg-verde-800); background: transparent; color: var(--mg-verde-800); cursor: pointer;
  transition: background var(--transicao), color var(--transicao);
}
.videos-filtro-btn:hover, .videos-filtro-btn:focus-visible { background: var(--mg-creme); }
.videos-filtro-btn.ativo { background: var(--mg-verde-800); color: var(--mg-creme); }
.videos-filtro-btn:focus-visible { outline: 2px solid var(--mg-verde-900); outline-offset: 2px; }
.videos-grade { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: start; }
.videos-grade > * { min-width: 0; }
@media (min-width: 640px) { .videos-grade { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .videos-grade { grid-template-columns: repeat(3, 1fr); } }
.video-cartao { display: flex; flex-direction: column; border-radius: var(--r-md); overflow: hidden; background: var(--mg-base); border: 1px solid var(--mg-borda); }
.video-cartao[hidden] { display: none !important; }
.video-quadro { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--mg-verde-950); overflow: hidden; }
.video-cartao-vertical .video-quadro { aspect-ratio: 9 / 16; }
.video-quadro img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.video-quadro:hover img { transform: scale(1.04); }
/* O botão de play cobre o quadro inteiro (alvo grande) e desenha o círculo
   no centro pelo pseudoelemento; o glifo fica no meio. */
.video-play {
  position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: var(--mg-verde-900);
}
.video-play::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
  background: rgba(241, 243, 234, .94); box-shadow: 0 10px 30px rgba(0, 0, 0, .3); transition: transform var(--transicao), background var(--transicao);
}
.video-play svg { position: relative; width: 28px; height: 28px; fill: currentColor; margin-left: 3px; }
.video-play:hover::before, .video-play:focus-visible::before { transform: scale(1.08); background: var(--mg-amarelo); }
.video-play:focus-visible { outline: 3px solid var(--mg-amarelo); outline-offset: -3px; }
.video-quadro iframe, .video-quadro video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
/* `hidden` tem de vencer o display declarado acima, senão a capa continua
   por cima do player. */
.video-quadro img[hidden], .video-play[hidden] { display: none !important; }
.video-corpo { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.video-categoria { font-family: var(--ff-texto); font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mg-verde-700); }
.video-titulo { font-family: var(--ff-titulo); font-size: 1.12rem; line-height: 1.3; margin: 0; color: var(--mg-verde-950); }
.video-desc { margin: 0; font-size: 14px; line-height: 1.5; color: var(--mg-tinta-2); }

/* C8: o botão flutuante do WhatsApp é o de includes/site_publico.php (regras
   em .wa-flutuante, mais acima nesta folha). Aqui só o que o site.js
   acrescenta: com a faixa final no visor, que tem o próprio botão à direita,
   o balão vai para a esquerda; com a foto ampliada aberta, some. */
/* Trocar de lado é regra de computador (11/09/2026): no telefone o balão some
   nas zonas com alvo à esquerda (site.js). */
@media (min-width: 900px) { .wa-flutuante.sobre-cta { right: auto; left: 18px; } }
body.ampliar-aberto .wa-flutuante { opacity: 0; pointer-events: none; }

/* C11: página de link na bio. Uma coluna de 440px, fundo verde profundo com
   os círculos de traço fino do brandbook, botões de 56px. Sem cabeçalho e
   sem rodapé do site: a página é a versão nossa do trakto.link. */
.tema-links { background: var(--mg-verde-950); color: var(--mg-creme); min-height: 100dvh; }
.links-marca { display: block; width: min(220px, 60vw); height: auto; margin: 0 auto 10px; }
.links-pagina { min-height: 100dvh; display: flex; justify-content: center; padding: clamp(28px, 6vw, 56px) 16px calc(28px + env(safe-area-inset-bottom)); position: relative; overflow: hidden; }
.links-pagina::before, .links-pagina::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(195, 208, 184, .22); pointer-events: none; }
.links-pagina::before { width: 520px; height: 520px; right: -180px; top: -140px; }
.links-pagina::after { width: 380px; height: 380px; left: -160px; bottom: -120px; border-color: rgba(230, 236, 195, .16); }
.links-caixa { width: 100%; max-width: 440px; position: relative; z-index: 1; display: flex; flex-direction: column; gap: 26px; }
.links-topo { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.links-nome { font-family: var(--ff-titulo); font-size: clamp(1.7rem, 6vw, 2.1rem); letter-spacing: .12em; text-transform: uppercase; color: var(--mg-branco); margin: 0; }
.links-frase { margin: 0; font-size: 14px; color: var(--mg-sage-suave); max-width: 32em; }
.links-arroba { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; color: var(--mg-amarelo); text-decoration: none; font-size: 14px; font-weight: 700; }
.links-arroba .ic { width: 18px; height: 18px; }
.links-lista { display: flex; flex-direction: column; gap: 12px; }
.links-botao {
  display: grid; grid-template-columns: 24px 1fr 18px; align-items: center; gap: 12px; min-height: 56px; padding: 10px 16px;
  border-radius: 14px; background: var(--mg-creme); color: var(--mg-verde-900); text-decoration: none;
  font-family: var(--ff-texto); font-size: 15px; font-weight: 700; line-height: 1.25;
  border: 1px solid transparent; box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
  transition: transform var(--transicao), background var(--transicao), color var(--transicao);
}
.links-botao .ic { width: 24px; height: 24px; }
.links-botao .ic-seta { width: 18px; height: 18px; opacity: .7; justify-self: end; }
.links-botao span { min-width: 0; overflow-wrap: anywhere; }
.links-botao:hover, .links-botao:focus-visible { background: var(--mg-amarelo); transform: translateY(-2px); }
.links-botao:focus-visible { outline: 2px solid var(--mg-amarelo); outline-offset: 3px; }
.links-botao-whatsapp { background: var(--mg-verde-800); color: var(--mg-creme); }
.links-botao-whatsapp:hover, .links-botao-whatsapp:focus-visible { background: var(--mg-verde-700); color: var(--mg-branco); }
.links-plataforma { margin-top: 6px; padding: 22px 18px 18px; border-radius: 18px; background: rgba(241, 243, 234, .07); border: 1px solid rgba(195, 208, 184, .25); display: flex; flex-direction: column; gap: 10px; }
.links-plataforma-logo { height: 34px; width: auto; align-self: flex-start; }
.links-plataforma h2 { font-family: var(--ff-titulo); font-size: 1.35rem; margin: 4px 0 0; color: var(--mg-branco); }
.links-plataforma p { margin: 0 0 6px; font-size: 14px; color: var(--mg-sage-suave); line-height: 1.5; }
.links-plataforma .links-botao { box-shadow: none; }
.links-rodape { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 6px; }
.links-rodape .credito-dev { color: var(--mg-sage-suave); }
.links-privacidade { color: var(--mg-sage-suave); font-size: 12.5px; min-height: 40px; display: inline-flex; align-items: center; }
.links-privacidade:hover { color: var(--mg-amarelo); }

/* B22: dois botões na lâmina. No cartão de duas colunas (<=620px) eles não
   cabem lado a lado (104 + 112 px num cartão de 171 px) e o segundo saía
   cortado: ali empilham, cada um na largura do cartão. */
.lam-acoes { flex-wrap: wrap; }
.lam-acoes .btn { min-height: 44px; }
@media (max-width: 620px) {
  .lam-acoes { flex-direction: column; gap: 6px; }
  .lam-acoes .btn { width: 100%; padding-left: 10px; padding-right: 10px; }
}

/* B1 (10/09/2026): o admin.css deixou de bloquear a pintura do portal (entra
   com media="print" e o app.js o liga depois do load). As regras que o portal
   usa no PRIMEIRO quadro estão aqui, copiadas do admin.css: a paginação das
   listas e a estrutura do estado vazio. As duas vivem em includes/ui.php
   (paginacao() e estadoVazio()), que é compartilhado. Se mudar lá, mude nos
   dois lugares. */
.tema-app .vazio-grande { display: flex; align-items: center; justify-content: center; padding: 24px 20px; margin: 0; text-align: center; }
.tema-app .vazio-miolo { margin: 0 auto; }
.tema-app .vazio-icone { display: block; margin-bottom: 10px; }
.tema-app .vazio-grande .vazio-icone .ic { width: 40px; height: 40px; color: var(--mg-sage); margin: 0; }
.tema-app .vazio-dicas { list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--mg-borda); text-align: left; display: grid; gap: 6px; }
.tema-app .vazio-dicas li { position: relative; padding-left: 18px; font-size: 12.5px; line-height: 1.5; }
.tema-app .paginacao { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; margin: 12px 0 0; padding: 10px 4px 0; border-top: 1px solid var(--mg-borda); }
.tema-app .paginacao-conta { font-size: 13px; color: var(--mg-tinta-2); font-variant-numeric: tabular-nums; }
.tema-app .paginacao-botoes { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tema-app .paginacao-num, .tema-app .paginacao-passo { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 10px; border: 1px solid var(--mg-borda); border-radius: var(--r-sm); background: var(--mg-branco); color: var(--mg-tinta-2); font-size: 14px; font-variant-numeric: tabular-nums; text-decoration: none; }
.tema-app a.paginacao-num:hover, .tema-app a.paginacao-passo:hover { border-color: var(--mg-verde-500); background: var(--mg-creme); }
.tema-app .paginacao-num.atual { background: var(--mg-verde-800); border-color: var(--mg-verde-800); color: var(--mg-creme); font-weight: 700; }
.tema-app .paginacao-passo .ic { width: 18px; height: 18px; }
.tema-app .paginacao-antes .ic { transform: rotate(180deg); }
.tema-app .paginacao-passo.desativado { opacity: .38; cursor: default; }
.tema-app .paginacao-salto { padding: 0 2px; color: var(--mg-tinta-2); }
@media (max-width: 899px) {
  .tema-app .paginacao { justify-content: center; padding-top: 12px; }
  .tema-app .paginacao-conta { flex: 1 0 100%; text-align: center; }
}
html[data-tema="escuro"] .tema-app .paginacao-num, html[data-tema="escuro"] .tema-app .paginacao-passo { background: #1C2A24; border-color: var(--mg-borda); }
html[data-tema="escuro"] .tema-app .paginacao-num.atual { background: #8FC29B; border-color: #8FC29B; color: #0E1714; }

/* Contraste no tema escuro medido pela outra sessão (10/09/2026): o link
   "Ir para o conteúdo" ficava em 1,52:1 quando recebia foco. */
html[data-tema="escuro"] .pular-conteudo { background: #E6ECC3; color: #0E1714; }

/* site: item 1 (magis-site, 10/09/2026). A faixa final carregava a foto de
   2200px (313 KB) em toda tela, por ser background do CSS; ate 1100px de
   largura a variante de 1100px (72 KB) e identica no olho. */
@media (max-width: 1100px) {
  .cta-final-foto { background-image: linear-gradient(100deg, rgba(27, 52, 43, .95) 0%, rgba(27, 52, 43, .88) 46%, rgba(35, 68, 57, .72) 100%), url('/assets/img/faixa-loja-1100.jpg'); }
}
@media (min-width: 1101px) and (max-width: 1600px) {
  .cta-final-foto { background-image: linear-gradient(100deg, rgba(27, 52, 43, .95) 0%, rgba(27, 52, 43, .88) 46%, rgba(35, 68, 57, .72) 100%), url('/assets/img/faixa-loja-1600.jpg'); }
}

/* [hidden] perde para `.btn { display: inline-flex }` (a mesma armadilha do
   modal da gestão): o "Salvar foto" escondido aparecia mesmo sem arquivo. */
.tema-app .btn[hidden], .tema-app [data-foto-salvar][hidden] { display: none !important; }

/* site: item 7 (magis-site). No telefone o botão do WhatsApp nasce recolhido
   e aparece na primeira rolagem (site.js): ao abrir a página ele tapava o fim
   do texto do herói em 360x800. */
.wa-flutuante.wa-recolhido { opacity: 0; pointer-events: none; transform: translateY(12px); }

/* site: item 4 (magis-site). O <li> do pilar e grade de duas colunas; o texto
   do pilar vive num <span> proprio (home.php), senao o no de texto solto vira
   item de grade na coluna de 34px e sai uma palavra por linha. */
.manifesto-pilares li { grid-template-columns: 34px minmax(0, 1fr); }
.manifesto-pilar-texto { min-width: 0; }

/* site: item 9 (magis-site). Filtro da secao de videos com alvo de 44px. */
.videos-filtro-btn { min-height: 44px; }

/* site: item 9, ficha de /admin/videos-site (magis-site). O campo de endereco
   (YouTube/Vimeo) e o de arquivo (MP4) se alternam pela origem escolhida, sem
   JavaScript: `option:checked` acompanha a selecao ao vivo. */
form[data-videos-site-ficha]:has(#origem option[value="arquivo"]:checked) [data-videos-site-campo="youtube vimeo"] { display: none; }
form[data-videos-site-ficha]:not(:has(#origem option[value="arquivo"]:checked)) [data-videos-site-campo="arquivo"] { display: none; }

/* ============================================================================
   Comunidade e avisos no aparelho (11/09/2026), no modelo do app do paciente do
   SeuNutricionista: quinto item "Mais" da barra inferior abrindo uma folha,
   número de mensagens não lidas no item Comunidade, feed de mensagens da
   farmácia, banner de ativar avisos e guia de instalação.
   ============================================================================ */
.app-badge {
  position: absolute; top: -4px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--mg-erro); color: #fff; font-size: 11px; font-weight: 700;
  line-height: 18px; text-align: center; letter-spacing: 0; pointer-events: none;
}
.app-sidebar-nav a { position: relative; }
.app-sidebar-nav a .app-badge { position: static; margin-left: auto; }
.nav-item-icone { position: relative; }
.app-bottom-nav button.nav-item { background: none; border: 0; font-family: inherit; cursor: pointer; }

/* Folha "Mais": sobe da barra inferior, com fundo escurecido atrás. */
.app-mais-fundo { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 80; }
.app-mais-fundo[hidden], .app-mais[hidden] { display: none; }
.app-mais {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 81;
  background: var(--mg-branco); color: var(--mg-tinta);
  border-radius: 18px 18px 0 0; padding: 10px 14px calc(14px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 30px rgba(0, 0, 0, .18); max-height: 82dvh; overflow: auto;
}
.app-mais-cab { display: flex; align-items: center; justify-content: space-between; padding: 6px 4px 10px; }
.app-mais-cab strong { font-size: 15px; }
.app-mais-fechar { width: 44px; height: 44px; border: 0; background: var(--mg-creme); border-radius: 12px; color: var(--mg-tinta); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.app-mais-fechar .ic { width: 20px; height: 20px; }
.app-mais-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.app-mais-item {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px;
  border-radius: 14px; background: var(--mg-creme); color: var(--mg-tinta); text-decoration: none;
  font: inherit; font-weight: 600; font-size: 14px; border: 0; cursor: pointer; text-align: left; width: 100%;
}
.app-mais-item .ic { width: 22px; height: 22px; flex: 0 0 auto; color: var(--mg-verde-800); }
.app-mais-item.ativo { background: var(--mg-amarelo); color: var(--mg-verde-900); }
.app-mais-sair { grid-column: 1 / -1; }
.app-mais-sair .app-mais-item { color: var(--mg-erro); }
@media (min-width: 1024px) { .app-mais, .app-mais-fundo { display: none !important; } }
body.app-mais-aberto { overflow: hidden; }

/* Feed da Comunidade. */
.com-feed { display: grid; gap: 14px; max-width: 760px; }
.com-post {
  background: var(--mg-branco); border: 1px solid var(--mg-borda); border-radius: 16px; padding: 16px 18px;
}
.com-post-nova { border-color: var(--mg-verde-800); box-shadow: 0 0 0 2px var(--mg-sage-suave) inset; }
.com-post-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; font-size: 13px; color: var(--mg-tinta-2); }
.com-post-autor { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--mg-verde-900); }
.com-post-autor .ic { width: 18px; height: 18px; }
.com-post-quando { margin-left: auto; }
.com-post-selo { background: var(--mg-amarelo); color: var(--mg-verde-900); font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; }
.com-post-titulo { margin: 0 0 8px; font-size: 1.15rem; line-height: 1.25; }
.com-post-corpo { line-height: 1.55; overflow-wrap: anywhere; }
.com-post-corpo a { color: var(--mg-verde-800); }
.com-post-link { margin-top: 12px; }

/* Banner de ativar avisos: uma faixa, some por 7 dias no "Agora não". */
.com-avisos {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap; max-width: 760px;
  background: var(--mg-sage-suave); border: 1px solid var(--mg-borda); border-radius: 16px; padding: 14px 16px; margin-bottom: 16px;
}
.com-avisos[hidden] { display: none; }
.com-avisos-texto { flex: 1 1 320px; min-width: 0; display: grid; gap: 4px; font-size: 14px; line-height: 1.4; }
.com-avisos-ios[hidden] { display: none; }
.com-avisos-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.com-avisos-acoes .btn { min-height: 44px; }

/* Guia de instalação. */
.instalar-grade { align-items: start; }
.instalar-bloco { background: var(--mg-branco); border: 1px solid var(--mg-borda); border-radius: 16px; padding: 18px; margin-bottom: 0; }
.instalar-titulo { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 1.05rem; }
.instalar-titulo .ic { width: 22px; height: 22px; color: var(--mg-verde-800); }
.instalar-passos { margin: 0 0 12px; padding-left: 20px; line-height: 1.5; display: grid; gap: 6px; }

/* Tema escuro. */
html[data-tema="escuro"] .app-mais { background: #1A2620; color: var(--mg-tinta); }
html[data-tema="escuro"] .app-mais-item { background: rgba(255, 255, 255, .06); }
html[data-tema="escuro"] .app-mais-fechar { background: rgba(255, 255, 255, .08); }
html[data-tema="escuro"] .com-post, html[data-tema="escuro"] .instalar-bloco { background: rgba(255, 255, 255, .04); }
html[data-tema="escuro"] .com-avisos { background: rgba(255, 255, 255, .06); }

/* Baixar material pela folha de compartilhar (revisão de 11/09/2026, PORT-5):
   o toque prepara o PDF com feedback, e o segundo toque (dentro do gesto)
   abre a folha. */
.tema-app [data-baixar-material][aria-busy="true"] { opacity: .65; pointer-events: none; }
.tema-app [data-baixar-material][data-pronto="1"] { background: var(--mg-amarelo); color: var(--mg-verde-900); border-color: var(--mg-amarelo); }

/* ============================================================================
   Revisão do site, 11/09/2026 (achados da revisão total).
   ============================================================================ */
/* SITE-8: o crédito contratual na casca de autenticação (/cadastro, /login,
   /esqueci), no rodapé do cartão claro: cor de texto do cartão, logomarca
   colorida (a creme é a do rodapé escuro do site). */
.auth-voltar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 18px; }
.auth-voltar .credito-dev { color: var(--mg-tinta-2); min-height: 44px; justify-content: flex-start; font-size: 12.5px; }
.auth-voltar .credito-dev:hover { color: var(--mg-verde-800); }
/* Em computador (painel esquerdo visível a partir de 980px) o crédito mora no
   PAINEL, no fim da coluna verde: não soma altura ao cartão, então o cadastro
   largo continua sem rolagem (768/768 e 900/900, exigência do dono). Abaixo
   disso o painel some e o crédito vai para o rodapé do cartão. */
.auth-painel-credito { position: relative; z-index: 1; margin-top: 18px; font-size: 12px; color: var(--mg-sage-suave); min-height: 32px; }
.auth-painel-credito:hover { color: var(--mg-creme); }
@media (min-width: 980px) { .auth-voltar .credito-dev { display: none; } }
/* Notebook 768p (1366x768): o crédito no painel empurrava a coluna verde 13px
   além do visor. Aperta o respiro do painel e do crédito nessa altura; medido
   768/768 depois da regra. */
@media (min-width: 980px) and (max-height: 860px) {
  .auth-painel { padding-top: 34px; padding-bottom: 30px; }
  .auth-painel-credito { margin-top: 8px; min-height: 24px; font-size: 11.5px; }
  /* 11/09/2026: o cartão do cadastro media 781px em 1366x768 (13px de rolagem,
     contra o contrato "sem rolagem" do dono). A nota de obrigatórios e os
     respiros entre linhas devolvem os 13px sem tirar campo nenhum. */
  .auth-cartao-largo .form-obrigatorio-nota { margin-bottom: 0; }
  .auth-cartao-largo .form-compacto .campo { margin-bottom: 4px; }
  .auth-cartao-largo { padding-bottom: 10px; }
}
/* PEER-4: alvos de toque do site abaixo de 44px em 360/390 (logomarca do
   topo, links do herói, "abra o formulário rápido", crédito do rodapé). Link
   dentro de frase corrida fica de fora de propósito (exceção "inline" da
   WCAG 2.5.5): aumentar quebraria o parágrafo. */
@media (any-pointer: coarse) {
  .tema-site .site-logo { min-height: 44px; display: inline-flex; align-items: center; }
  .tema-site .hero-link, .tema-site .link-botao, .tema-site .credito-dev, .tema-site .links-privacidade, .tema-site .lead-popup-depois { min-height: 44px; }
  .tema-site .link-botao { display: inline-flex; align-items: center; }
}
/* PEER-5: aviso para quem navega sem JavaScript no formulário de interesse. */
.lead-sem-js { margin: 0 0 14px; }

/* Verificação 02 do cliente (11/09/2026): o botão "Baixar" do material muda de
   rótulo depois do toque ("Preparando...", "Salvar ou compartilhar") e o texto
   saía cortado; o botão pode crescer e quebrar linha, nunca cortar. E o
   "Adicionar à minha agenda" colava na confirmação "Você já está inscrito". */
.tema-app [data-baixar-material] { white-space: normal; text-align: center; height: auto; min-height: 44px; line-height: 1.2; overflow: visible; text-overflow: clip; }
.tema-app [data-baixar-material][data-pronto="1"] { flex: 1 1 auto; }
.evento-agenda { margin-bottom: 16px; }
.evento-agenda + .flash { margin-top: 14px; }

/* ============================================================================
   Responsividade total do site (11/09/2026, revisao de responsividade):
   regra do dono: nenhuma faixa morta nem tela oca no desktop, e todo alvo de
   toque com 44px. O site ganha largura de conteudo proporcional acima de
   1600px (grades ganham colunas; paragrafos continuam legiveis pelo proprio
   max-width), /links vira duas colunas no desktop, telas de acesso e
   /obrigado crescem em telas de 1900px ou mais.
   ============================================================================ */
@media (any-pointer: coarse) {
  .tema-site .site-logo { min-width: 44px; min-height: 44px; justify-content: center; }
  .tema-site .auth-cab-link, .auth-cab-link { min-height: 44px; }
  .tema-links .links-arroba { min-height: 44px; }
  .tema-site .campo input:not([type="checkbox"]):not([type="radio"]), .tema-site .campo select,
  .lead-cartao .campo input:not([type="checkbox"]):not([type="radio"]), .lead-cartao .campo select,
  .auth-cartao .campo input:not([type="checkbox"]):not([type="radio"]), .auth-cartao .campo select { min-height: 44px; }
}
@media (min-width: 1600px) {
  :root { --larg-conteudo: min(1560px, 84vw); }
  .grade-cartoes { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 2200px) {
  :root { --larg-conteudo: min(1900px, 82vw); }
  .grade-cartoes { grid-template-columns: repeat(5, 1fr); }
}
/* /links no desktop: marca e QR de um lado, os botoes do outro. */
@media (min-width: 1024px) {
  .tema-links .links-caixa { max-width: 1040px; display: grid; grid-template-columns: minmax(300px, 1fr) minmax(420px, 1.25fr); gap: 40px 56px; align-items: start; }
  .tema-links .links-caixa > * { min-width: 0; }
  .tema-links .links-caixa > .links-cabecalho, .tema-links .links-caixa > header { grid-row: 1 / span 3; position: sticky; top: 24px; }
}
@media (min-width: 1600px) {
  .tema-links .links-caixa { max-width: 1320px; gap: 48px 72px; }
  .tema-links .links-botao { min-height: 64px; font-size: 17px; }
}
/* Telas de acesso e /obrigado em monitor grande: o cartao cresce com a tela. */
@media (min-width: 1900px) {
  .auth-cartao { max-width: 560px; padding: 44px 40px; font-size: 16px; }
  .auth-cartao-largo { max-width: 1180px; padding: 36px 48px 28px; }
  .auth-cartao h1 { font-size: 1.8rem; }
  .auth-grade { grid-template-columns: minmax(480px, 40%) 1fr; }
  /* 21/09/2026 (C16, cartão 362 item 3): saiu daqui o `min-height: calc(100vh
     - 120px)` com o conteúdo CENTRALIZADO na vertical. Ele reabria o vão entre o
     último cartão e o rodapé verde a partir de 1900px (medido: 168px em 1900,
     208px em 1920, 388px em 2560x1440). Quem ocupa a altura que sobra em tela
     alta agora é o próprio rodapé (regra logo abaixo do bloco de 2400px). */
  .tema-site .secao-obrigado .obrigado-passos { gap: 32px; }
  .tema-site .secao-obrigado .obrigado-passo { padding: 32px; font-size: 17px; }
}
@media (min-width: 2400px) {
  .auth-cartao { max-width: 640px; font-size: 17px; }
  .auth-cartao-largo { max-width: 1400px; }
}
/* /obrigado em tela alta (21/09/2026, C16): o vão fica no respiro da seção
   (clamp de 28 a 40px) e a altura que sobra do visor vai para o RODAPÉ, que
   cresce até o fim da tela. Sem isto, tirar o min-height da seção trocaria o
   vão de 388px por uma faixa creme de 215px ABAIXO do rodapé em 2560x1440, e a
   regra do dono é nenhuma faixa morta no desktop. Só vale nesta página (:has),
   e em página mais alta que o visor o `flex: 1 0 auto` não tem o que crescer. */
body.tema-site:has(> main > .secao-obrigado) { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body.tema-site:has(> main > .secao-obrigado) > .site-rodape { flex: 1 0 auto; }

/* Portal 11/09/2026: materiais, salvos e certificados */
/* Cartão de material padronizado: capa A4 (900/1273) em proporção fixa, título
 * Marcellus 16px em 2 linhas, resumo em EXATAMENTE 2 linhas, meta em 1, uma
 * fileira de chips e as ações presas ao pé. Todos os cartões da fileira têm a
 * mesma altura; a grade é fluida (200px por coluna: 5 em 1366, 8 em 1920). */
.lam-grade { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 16px; }
.lam-cartao { display: flex; flex-direction: column; }
/* 22/09/2026: o clamp de 2 linhas cortava o TÍTULO do material (57 caracteres em coluna de 140 a 196px: "MyoQuiron: inositóis na sín..."), 100 avisos de truncagem no portão. O título é a identidade do item e não tem ficha onde ler o resto (o alvo abre o PDF), então ele quebra inteiro; o min-height de 2 linhas continua alinhando os cartões curtos e o pé do cartão segue preso por margin-top: auto. */
.lam-alvo h3 { margin: 12px 14px 0; font-family: 'Marcellus', Georgia, serif; font-size: 16px; font-weight: 400; line-height: 1.3; min-height: 2.6em; display: block; overflow: visible; overflow-wrap: anywhere; text-wrap: balance; }
/* A meta em UMA linha cortava o fato em todo cartão ("Lâminas de linha | 7 pá...",
 * 12/09/2026): cabe em até 2 linhas, com altura fixa de 2 para os cartões da
 * fileira continuarem alinhados. Cada fato segue inteiro (nowrap no item). */
.lam-meta { margin: 4px 14px 0; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; min-height: 2.8em; font-variant-numeric: tabular-nums; }
.lam-desc { display: -webkit-box; margin: 6px 14px 0; font-size: 13px; line-height: 1.45; min-height: 2.9em; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lam-objetivos { margin: 8px 14px 0; flex-wrap: nowrap; overflow: hidden; }
/* O chip que não cabia era cortado seco pelo overflow da lista ("Longevidade e
 * antienvelhecime", 12/09/2026): o item pode encolher e o texto termina em
 * reticências, com o nome inteiro no title. */
.lam-objetivos li { flex: 0 1 auto; min-width: 0; }
.lam-objetivos a, .lam-objetivo-fixo { white-space: nowrap; }
.lam-objetivos a > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lam-objetivo-fixo { display: inline-flex; align-items: center; min-height: 32px; font-size: 11.5px; padding: 5px 9px; border-radius: 6px; background: var(--mg-creme); color: var(--mg-tinta-2); }
.lam-acoes { margin: auto 14px 14px; padding-top: 12px; }
@media (max-width: 599px) {
  .lam-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .lam-alvo h3 { margin: 10px 10px 0; font-size: 14px; }
  .lam-meta { margin: 4px 10px 0; }
  .lam-desc { margin: 6px 10px 0; font-size: 12.5px; }
  .lam-objetivos { margin: 8px 10px 0; }
  .lam-acoes { margin: auto 10px 10px; padding-top: 10px; }
}
@media (min-width: 600px) and (max-width: 760px) { .lam-grade { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; } }
@media (any-pointer: coarse) { .lam-objetivo-fixo { min-height: 48px; } }

/* Filtros: chips com contagem "(n)" em texto, painel com moldura no desktop,
 * dois selects nativos abaixo de 640px (o app.js aplica no change). */
.lam-chip-num { background: transparent; padding: 0; color: inherit; font-weight: 600; opacity: .8; }
.lam-chip-num::before { content: "("; }
.lam-chip-num::after { content: ")"; }
.lam-chip.ativo .lam-chip-num { background: transparent; color: inherit; }
.lam-contagem { margin: 8px 0 14px; }
.lam-selects { display: none; }
@media (min-width: 761px) {
  .lam-filtros-painel { background: var(--mg-branco); border: 1px solid var(--mg-borda); border-radius: var(--r-md); padding: 12px 14px 4px; }
  .lam-filtro { margin-bottom: 8px; }
}
@media (max-width: 639px) {
  .lam-selects { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 12px; }
  .lam-select { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 12.5px; font-weight: 700; color: var(--mg-tinta-2); }
  .lam-select select { width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid var(--mg-borda); border-radius: var(--r-sm); background: var(--mg-branco); color: var(--mg-tinta); font-family: var(--ff-texto); font-size: 14px; }
  .lam-filtros { display: none; }
}
@media (max-width: 359px) { .lam-selects { grid-template-columns: 1fr; } }

/* Estado vazio em uma linha (salvos e certificados): nada de caixa oca. */
.lam-vazio { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 12px 14px; border: 1px dashed var(--mg-borda); border-radius: var(--r-sm); background: var(--mg-branco); font-size: 14px; color: var(--mg-tinta-2); }
.lam-vazio .ic { width: 20px; height: 20px; flex: 0 0 auto; color: var(--mg-sage); }
.lam-vazio span { min-width: 0; }
.lam-vazio a { margin-left: auto; white-space: nowrap; font-weight: 700; display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 599px) { .lam-vazio { flex-wrap: wrap; } .lam-vazio a { margin-left: 30px; } }

/* Certificados: cartões de mesma altura numa grade fluida, ações no pé. */
.cert-lista { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.cert-item h2 { font-size: 16px; line-height: 1.3; min-height: 2.6em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cert-item-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.cert-item-acoes { margin-top: auto; }
.cert-pendentes { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
@media (max-width: 599px) { .cert-lista, .cert-pendentes { grid-template-columns: 1fr; } }

html[data-tema="escuro"] .lam-chip-num, html[data-tema="escuro"] .lam-chip.ativo .lam-chip-num { background: transparent; color: inherit; }
html[data-tema="escuro"] .lam-filtros-painel { background: #1C2A24; border-color: var(--mg-borda); }
html[data-tema="escuro"] .lam-select select { background: #182420; color: var(--mg-tinta); border-color: var(--mg-borda); }
html[data-tema="escuro"] .lam-vazio { background: #1C2A24; }
html[data-tema="escuro"] .lam-objetivo-fixo { background: #223329; color: var(--mg-tinta-2); }


/* Portal 11/09/2026: base e painel */
/* Largura fluida no computador (pedido do cliente: "não quero espaços vazios
   na tela no desktop"): o conteúdo acompanha a largura útil, com respiro
   lateral por faixa em vez de teto de 1060px. As grades do portal crescem em
   colunas (auto-fill) em vez de esticar cartões. */
.app-conteudo { max-width: none; padding: 24px 20px 34px; }
.sidebar-recolhida .app-conteudo { max-width: none; }
@media (min-width: 1024px) { .app-conteudo { padding: 32px 32px 40px; } }
@media (min-width: 1366px) { .app-conteudo { padding: 36px 40px 44px; } }
@media (min-width: 1920px) { .app-conteudo { padding: 40px 56px 48px; } .painel-colunas { gap: 0 40px; } }
@media (min-width: 2400px) { .app-conteudo { padding: 44px 72px 56px; } }

/* Chips do resumo no herói: tile do ícone + número na primeira linha, rótulo
   embaixo; todos da mesma altura; nunca ícone, número e rótulo em linha única. */
.painel-hero-resumo.resumo-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; grid-auto-rows: 1fr; align-items: stretch; flex: 1 1 320px; max-width: 560px; }
.painel-hero-resumo > .resumo-chip { display: flex; flex-direction: column; justify-content: center; gap: 6px; min-height: 76px; padding: 10px 14px; background: var(--mg-verde-800); border: 1px solid var(--mg-verde-700); border-radius: 12px; white-space: normal; }
.resumo-chip-topo { display: flex; align-items: center; gap: 10px; }
.resumo-chip-icone { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px; background: var(--mg-verde-700); flex: 0 0 auto; }
.resumo-chip-icone .ic { width: 18px; height: 18px; color: var(--mg-amarelo); }
.resumo-chip-topo strong { display: block; font-family: var(--ff-titulo); font-weight: 400; font-size: 1.45rem; line-height: 1; color: #fff; margin: 0; font-variant-numeric: tabular-nums; }
.resumo-chip-rotulo { display: block; font-size: 12.5px; line-height: 1.3; color: var(--mg-sage-suave); }
html[data-tema="escuro"] .painel-hero-resumo > .resumo-chip { background: var(--mg-creme); border-color: var(--mg-borda); }
html[data-tema="escuro"] .resumo-chip-icone { background: var(--mg-verde-950); }
html[data-tema="escuro"] .resumo-chip-icone .ic { color: var(--mg-sage-suave); }
@media (max-width: 700px) {
  .painel-hero-resumo.resumo-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: none; }
  .painel-hero-resumo > .resumo-chip { padding: 10px; min-height: 84px; }
  .resumo-chip-topo { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* Atalhos do painel: ícone profissional AO LADO do rótulo, no mesmo eixo,
   tile de 44px em sage suave, nome em Marcellus e contagem tabular.
   Hover só na cor de fundo e da borda (sem salto nem sombra). */
.atalhos { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 12px; margin-bottom: 30px; }
@media (min-width: 640px) { .atalhos { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; } }
@media (min-width: 1024px) { .atalhos { gap: 14px; } }
.atalho.atalho-linha { flex-direction: row; align-items: center; gap: 14px; padding: 16px; min-height: 78px; box-shadow: none; transition: background-color 150ms ease-out, border-color 150ms ease-out; }
.atalho.atalho-linha:hover { transform: none; box-shadow: none; background-color: var(--mg-creme); border-color: var(--mg-sage); }
.atalho.atalho-linha .atalho-icone { width: 44px; height: 44px; border-radius: 12px; background: var(--mg-sage-suave); flex: 0 0 auto; }
.atalho.atalho-linha .ic { width: 22px; height: 22px; color: var(--mg-verde-800); }
.atalho-textos { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.atalho.atalho-linha strong { font-size: 1.1rem; line-height: 1.2; text-wrap: balance; }
.atalho.atalho-linha .atalho-textos .atalho-conta { margin-left: 0; text-align: left; font-size: 13px; font-weight: 500; color: var(--mg-tinta-2); white-space: nowrap; }
html[data-tema="escuro"] .atalho.atalho-linha .atalho-icone { background: var(--mg-verde-950); }
html[data-tema="escuro"] .atalho.atalho-linha .ic { color: var(--mg-verde-800); }
html[data-tema="escuro"] .atalho.atalho-linha:hover { background-color: var(--mg-creme); border-color: var(--mg-verde-700); }
@media (max-width: 639px) {
  .atalhos .atalho.atalho-linha { gap: 10px; padding: 10px 12px; min-height: 60px; }
  .atalho.atalho-linha .atalho-icone { width: 40px; height: 40px; }
  .atalho.atalho-linha .ic { width: 20px; height: 20px; }
  .atalho.atalho-linha strong { font-size: 1rem; }
}

/* Estado vazio das seções do painel: uma linha, nunca uma caixa oca. */
.painel-colunas .vazio-compacto { display: flex; align-items: center; gap: 12px; text-align: left; padding: 14px 16px; }
.painel-colunas .vazio-compacto .ic { width: 22px; height: 22px; margin: 0; flex: 0 0 auto; }
.painel-colunas .vazio-compacto p { font-size: 14px; }
.painel-colunas .bloco-secao { margin-bottom: 28px; }
@media (min-width: 1600px) { .painel-colunas { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }


/* Portal 11/09/2026: aulas e podcast */
/* Pedido do dono: capa sem corte, grade fluida sem faixa morta no desktop,
   cartões da mesma altura, resumo em 2 linhas, filtros e categorias
   profissionais, podcast sem texto demais. `:has()` (Chrome 105+, Safari
   15.4+, Firefox 121+) alarga só o <main> destas páginas: onde não há
   suporte a página fica na medida antiga de 1060px, sem quebrar. */
.app-conteudo:has(> .aulas-pagina) { max-width: none; }   /* 11/09/2026: regra do dono, sem faixa morta em nenhuma largura */
.aulas-pagina { min-width: 0; }

/* Barra de filtro: busca com ícone dentro do campo, chips que quebram linha. */
.aulas-filtro { margin-bottom: 20px; }
.aulas-busca { margin-bottom: 12px; }
.aulas-busca-campo { position: relative; display: flex; flex: 1 1 260px; min-width: 0; }
.aulas-busca-campo .ic { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--mg-tinta-2); pointer-events: none; }
.aulas-busca-campo input[type="search"] { width: 100%; padding-left: 42px; }
.aulas-chips { gap: 8px; margin-bottom: 0; }
.aulas-chips a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; font-weight: 600; }
.filtro-n { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--mg-tinta-2); background: var(--mg-sage-suave); border-radius: 999px; padding: 1px 7px; line-height: 1.4; }
.aulas-chips a.ativo .filtro-n { background: rgba(255, 255, 255, .18); color: var(--mg-creme); }
.aulas-resultado { margin: 0 0 14px; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.aulas-resultado::first-letter { text-transform: uppercase; }

/* Grade de aulas: colunas nascem da largura (260px por cartão), com o mesmo
   gap em qualquer tela; nada de contar colunas por media query. */
.grade-aulas { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
@media (max-width: 479px) { .grade-aulas { grid-template-columns: 1fr; gap: 14px; } }
@media (min-width: 480px) and (max-width: 767px) { .grade-aulas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1920px) { .grade-aulas { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; } }
.grade-aulas .cartao { height: 100%; }
.grade-aulas .cartao-capa img { object-position: center; }
.grade-aulas .cartao-corpo { padding: 14px 16px 16px; gap: 6px; }
/* Categoria e palestrante na MESMA linha cortavam os dois em todo cartão de
 * 260px ("ENDOCRINOLOGIA E... · JAYME A...", 12/09/2026). Cada um tem a própria
 * linha: categoria em caixa alta, palestrante em caixa normal. Sem separador,
 * porque separador em item que quebra linha vira ponto órfão. */
.grade-aulas .aulas-meta { flex-wrap: wrap; overflow: hidden; gap: 2px 0; min-height: 18px; }
.grade-aulas .aulas-meta > span { flex: 1 0 100%; min-width: 0; }
.grade-aulas .aulas-meta > span + span { text-transform: none; letter-spacing: 0; font-size: 13px; }
/* Sem max-height (12/09/2026): a regra "título nunca é cortado" deixa o h3 com
 * overflow visível, e o teto de 2 linhas fazia a TERCEIRA linha do título
 * ("protocolo funciona") desenhar por cima do resumo em todo cartão de 3 linhas.
 * O título ocupa o que precisa; a fileira segue alinhada pelo grid e o resumo
 * fica preso ao pé pelo margin-top: auto. */
.grade-aulas .cartao-corpo h3 { font-size: 1.05rem; line-height: 1.3; min-height: calc(1.05rem * 1.3 * 2); }
.aulas-desc { -webkit-line-clamp: 2; line-height: 1.45; min-height: calc(14px * 1.45 * 2); margin-top: auto; }
.cartao-capa-selo-ok { left: 12px; top: auto; bottom: 12px; display: inline-flex; align-items: center; gap: 4px; color: var(--mg-creme); letter-spacing: .04em; text-transform: none; font-size: 12px; }
.cartao-capa-selo-ok .ic { width: 13px; height: 13px; }

/* Podcast: caixa de assinatura enxuta e episódios em grade fluida. */
.pod-assinar-enxuto { padding: 18px 22px 16px; margin-bottom: 20px; }
.pod-assinar-enxuto h2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 1.15rem; margin-bottom: 2px; }
.pod-assinar-enxuto > p { margin-bottom: 10px; font-size: 13.5px; }
.pod-assinar-enxuto .ajuda-btn { color: var(--mg-creme); }
.pod-assinar-enxuto .pod-assinar-apps { margin-top: 6px; }
.grade-episodios { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
@media (max-width: 767px) { .grade-episodios { grid-template-columns: 1fr; } }
.grade-episodios .podcast-item { height: 100%; gap: 10px; padding: 16px; }
.grade-episodios .podcast-cab h3 { font-size: 1.05rem; line-height: 1.3; min-height: calc(1.05rem * 1.3 * 2); }
.grade-episodios .podcast-capa { flex-basis: 72px; width: 72px; height: 72px; }
.grade-episodios .pod-ouvir, .grade-episodios .podcast-embed { margin-top: auto; }

/* Player: 16:9 sempre (a regra de 52vh deixava barras pretas em notebook);
   quando a altura da tela é curta, é a LARGURA que encolhe, centrada. */
.aula-pagina .aula-grade { max-width: 1440px; margin: 0 auto; }
@media (min-width: 1200px) { .aula-pagina .aula-grade { grid-template-columns: minmax(0, 1fr) 320px; gap: 0 32px; } }
@media (min-width: 1024px) and (max-height: 820px) {
  .aula-pagina .player-moldura { aspect-ratio: 16 / 9; height: auto; max-height: none; width: min(100%, calc(60vh * 16 / 9)); margin-left: auto; margin-right: auto; }
}
.aula-pagina .aula-mini-capa { aspect-ratio: 16 / 9; }
.aula-pagina .aula-mini-capa img { object-fit: cover; object-position: center; }

/* Tema escuro. */
html[data-tema="escuro"] .filtro-n { background: rgba(255, 255, 255, .08); color: var(--mg-tinta-2); }
html[data-tema="escuro"] .aulas-chips a.ativo .filtro-n { background: rgba(255, 255, 255, .16); color: #F1F3EA; }
html[data-tema="escuro"] .cartao-capa-selo-ok { color: #F1F3EA; }

/* Portal 11/09/2026: eventos, comunidade e perfil */
/* Eventos: grade fluida (a coluna nasce a 280px e cresce com a largura), cartões
   de mesma altura na linha, título e resumo com altura fixa de 2 linhas, fatos
   em 1 linha e a ação sempre no pé do cartão. */
.tema-app .evento-grade-fluida { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); align-items: stretch; }
.tema-app .evento-grade-fluida > * { min-width: 0; }
.tema-app .evento-grade-fluida .evento-cartao { height: 100%; }
.tema-app .evento-grade-fluida .evento-corpo { padding: 14px 16px 14px 4px; gap: 6px; justify-content: flex-start; }
.tema-app .evento-grade-fluida .evento-corpo h3 { font-size: 1.1rem; line-height: 1.25; min-height: 2.5em; text-wrap: balance; }
.tema-app .evento-grade-fluida .evento-fatos { flex-wrap: nowrap; gap: 4px 12px; overflow: hidden; }
.tema-app .evento-grade-fluida .evento-fatos li { flex: 0 1 auto; white-space: nowrap; }
/* 22/09/2026: o LOCAL do evento (último fato) quebra linha em vez de virar reticência: "auditorio de testes" saía cortado em 13 tamanhos. Data e hora seguem em uma linha, que nunca estouram. */
.tema-app .evento-grade-fluida .evento-fatos li:last-child { flex: 1 1 0; white-space: normal; overflow-wrap: anywhere; }
.tema-app .evento-grade-fluida .evento-fatos li span { overflow: hidden; text-overflow: ellipsis; }
.tema-app .evento-grade-fluida .evento-fatos li:last-child span { overflow: visible; text-overflow: clip; }
.tema-app .evento-grade-fluida .cartao-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; font-size: 14px; line-height: 1.45; min-height: 2.9em; }
.tema-app .evento-grade-fluida .evento-acao { margin-top: auto; padding-top: 4px; }
.tema-app .evento-grade-fluida .evento-data { flex-basis: 84px; padding: 14px 6px; }
/* 21/09/2026 (cartão 521, item 7: Eventos rolava 104px em 390x844). Duas sobras
   de layout, nenhuma de conteúdo:
   1. O título reserva 2 linhas (2.5em) para alinhar cartões VIZINHOS na mesma
      fileira. Abaixo de 600px a grade tem uma coluna só, não há vizinho, e a
      reserva era 22px de branco entre o título de uma linha e a data.
   2. O último bloco do <main> somava a própria margem (40px no .bloco-secao) ao
      respiro do <main> (32px): 72px de branco antes do rodapé, em toda tela do
      portal cujo último bloco tem margem. O respiro do <main> basta. */
@media (max-width: 599px) {
  .tema-app .evento-grade-fluida .evento-corpo h3 { min-height: 0; }
}
.tema-app .app-conteudo > :last-child { margin-bottom: 0; }
.tema-app .evento-grade-fluida .evento-data strong { font-size: 1.8rem; font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .tema-app .evento-grade-fluida .evento-fatos { flex-wrap: wrap; } .tema-app .evento-grade-fluida .evento-fatos li { white-space: normal; } }
/* Selo em cartão de 280px: "Transmissão no portal" saía cortado em "TRANSMISSÃO NO PO..."
 * a 1024 e 1920 (12/09/2026). O selo quebra a linha em vez de cortar. */
.tema-app .evento-grade-fluida .evento-selos .badge { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35; }
.tema-app .presenca-lista { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

/* Comunidade: feed + coluna lateral acima de 1200px; abaixo, a lateral desce. */
.tema-app .com-layout { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.tema-app .com-layout .com-feed { max-width: none; }
.tema-app .com-post-corpo { max-width: 78ch; }
.tema-app .com-lateral { display: grid; gap: 14px; }
.tema-app .com-lateral-cartao { background: var(--mg-branco); border: 1px solid var(--mg-borda); border-radius: var(--r-md); padding: 16px 18px; box-shadow: var(--sombra-sm); }
.tema-app .com-lateral-cartao p { margin: 0 0 10px; font-size: 14px; line-height: 1.45; color: var(--mg-tinta-2); }
.tema-app .com-lateral-cartao p:last-child { margin-bottom: 0; }
.tema-app .com-lateral-titulo { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 1.02rem; font-weight: 600; color: var(--mg-verde-900); }
.tema-app .com-lateral-titulo .ic { width: 20px; height: 20px; color: var(--mg-verde-800); flex: 0 0 auto; }
.tema-app .com-lateral-numeros { display: grid; gap: 6px; margin: 0; }
.tema-app .com-lateral-numeros > div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13.5px; color: var(--mg-tinta-2); }
.tema-app .com-lateral-numeros dt { margin: 0; }
.tema-app .com-lateral-numeros dd { margin: 0; font-weight: 700; color: var(--mg-verde-900); font-variant-numeric: tabular-nums; }
.tema-app .com-lateral-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.tema-app .com-lateral-acoes .btn { min-height: 44px; }
@media (min-width: 1200px) {
  .tema-app .com-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 26px; }
  .tema-app .com-lateral { position: sticky; top: 16px; }
}
@media (min-width: 1920px) { .tema-app .com-layout { grid-template-columns: minmax(0, 1fr) 340px; } }

/* Perfil: duas colunas independentes acima de 900px; campos com 44px de altura. */
.tema-app .perfil-colunas { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.tema-app .perfil-col-principal, .tema-app .perfil-col-lateral { display: grid; gap: 18px; min-width: 0; }
.tema-app .perfil-colunas .form-cartao { padding: 22px 22px; margin: 0; }
.tema-app .perfil-colunas .perfil-foto-cartao { margin-bottom: 0; }
.tema-app .perfil-colunas .campo input:not([type="checkbox"]):not([type="radio"]), .tema-app .perfil-colunas .campo select { min-height: 44px; }
/* 18/09/2026: era 44px e, com peso 0,4,0 e sem @media, vencia a regra de toque
   de 48px do .btn. O piso da casa e 48. */
.tema-app .perfil-colunas .form-acoes .btn { min-height: 48px; }
.tema-app .perfil-sair .form-acoes { margin-top: 4px; }
@media (min-width: 900px) {
  .tema-app .perfil-colunas { grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr); gap: 22px; }
  .tema-app .perfil-col-lateral { order: 2; }
  .tema-app .perfil-col-principal { order: 1; }
}
@media (min-width: 1600px) { .tema-app .perfil-colunas { grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr); } }

/* Instalar: os cartões crescem com a largura; privacidade em duas colunas de
   leitura no desktop largo, para o texto legal não deixar a tela oca. */
.tema-app .instalar-grade { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; align-items: stretch; }
.tema-app .instalar-bloco { display: flex; flex-direction: column; height: 100%; }
.tema-app .instalar-bloco .instalar-passos { flex: 1 1 auto; }
.tema-app .instalar-bloco > .btn, .tema-app .instalar-bloco > .texto-apoio { margin-top: auto; }
.tema-app .instalar-bloco > .texto-apoio { margin-bottom: 0; }
.tema-app .instalar-passos li { font-size: 14.5px; }
@media (min-width: 1200px) {
  .app-privacidade .secao-inner { max-width: none; columns: 2 44ch; column-gap: 48px; }
  .app-privacidade .secao-inner h1 { column-span: all; }
  .app-privacidade .secao-inner h2, .app-privacidade .secao-inner h3 { break-after: avoid; }
  .app-privacidade .secao-inner p, .app-privacidade .secao-inner li { break-inside: avoid; }
}

/* Tema escuro das superfícies novas. */
html[data-tema="escuro"] .com-lateral-cartao { background: rgba(255, 255, 255, .04); border-color: var(--mg-borda); }
html[data-tema="escuro"] .com-lateral-titulo, html[data-tema="escuro"] .com-lateral-numeros dd { color: var(--mg-creme); }

/* Revisão de 12/09/2026: hierarquia, densidade e toque no portal. */
.tema-app .app-conteudo { padding: 22px clamp(16px, 2.2vw, 40px) 32px; }
.tema-app .pagina-cab { margin-bottom: 20px; }
.tema-app .pagina-cab h1, .tema-app .painel-hero h1 {
  font-family: 'Marcellus', Georgia, serif; font-weight: 400; letter-spacing: -.02em;
  font-size: clamp(1.6rem, 2.3vw, 2rem); line-height: 1.2;
}
.tema-app .pagina-cab > .etiqueta { margin-bottom: 7px; }
.tema-app .pagina-cab p { max-width: 75ch; line-height: 1.5; }
.tema-app .painel-hero {
  background-image: url('/assets/img/faixa-loja.jpg'); background-blend-mode: multiply;
  border: 1px solid var(--mg-verde-700); border-radius: 14px;
  padding: 22px; margin-bottom: 20px;
}
.tema-app .painel-hero .etiqueta { border: 0; padding: 0; font-size: 11px; letter-spacing: .09em; }
.tema-app .painel-hero-resumo > .resumo-chip { border-radius: 8px; padding: 10px 12px; }
.tema-app .atalhos { gap: 10px; margin-bottom: 24px; }
.tema-app .atalho.atalho-linha { border-radius: 10px; padding: 14px; min-height: 72px; }
.tema-app .painel-colunas .bloco-secao { margin-bottom: 24px; }
.tema-app .cartao, .tema-app .aula-mini, .tema-app .evento-cartao, .tema-app .com-lateral-cartao {
  box-shadow: none; border-color: var(--mg-borda); border-radius: 12px;
}
.tema-app .cartao-capa, .tema-app .lam-capa { border-bottom: 1px solid var(--mg-borda); }
.tema-app .cartao-salvar button, .tema-app .lam-salvar button { width: 44px; height: 44px; }
.tema-app .vazio { padding: 28px 20px; border-style: solid; }
@media (max-width: 700px) {
  .tema-app .painel-hero { padding: 16px; gap: 14px; }
  .tema-app .painel-hero h1 { font-size: 1.6rem; }
  .tema-app .painel-hero-resumo > .resumo-chip { min-height: 80px; padding: 9px; gap: 6px; }
  .tema-app .resumo-chip-topo { flex-direction: row; align-items: center; gap: 6px; }
  .tema-app .resumo-chip-icone { width: 22px; height: 22px; border-radius: 5px; }
  .tema-app .resumo-chip-icone .ic { width: 15px; height: 15px; }
  .tema-app .resumo-chip-topo strong { font-size: 1.3rem; }
  .tema-app .resumo-chip-rotulo { font-size: 12px; }
  .tema-app .pagina-cab { margin-bottom: 16px; }
  .tema-app .pagina-cab p { font-size: 14px; }
  .tema-app .atalhos .atalho.atalho-linha { padding: 10px; min-height: 62px; gap: 8px; }
  .tema-app .atalho.atalho-linha .atalho-icone { width: 32px; height: 32px; border-radius: 8px; }
  .tema-app .atalho.atalho-linha strong { font-size: .95rem; }
  .tema-app .atalho.atalho-linha .atalho-textos .atalho-conta { font-size: 12px; }
  .tema-app .lam-busca { margin-bottom: 12px; }
  .tema-app .aulas-chips a { min-height: 44px; }
}
@media (max-width: 359px) {
  .tema-app .painel-hero { padding: 12px; }
  .tema-app .resumo-chip-topo { gap: 4px; }
  .tema-app .resumo-chip-icone { width: 18px; height: 18px; }
  .tema-app .painel-hero-resumo > .resumo-chip { padding: 8px 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .tema-app .cartao, .tema-app .atalho { transition: none; transform: none; }
}

/* Menu recolhido: rótulo acessível no botão, ícone contido na coluna. */
@media (min-width: 1024px) {
  .sidebar-recolhida .app-sidebar-tema { justify-content: center; padding-inline: 0; }
  .sidebar-recolhida .app-sidebar-tema span { display: none; }
}
@media (any-pointer: coarse) {
  .tema-app .sidebar-recolher, .tema-admin .sidebar-recolher { width: 44px; height: 44px; }
  .tema-app .form-sair button, .tema-admin .form-sair button { min-height: 44px; min-width: 44px; }
}

/* O fundo da fotografia continua escuro quando os tokens de texto clareiam. */
html[data-tema="escuro"] .tema-app .painel-hero { background-color: var(--mg-verde-950); border-color: var(--mg-borda); }

/* Perfil e aplicativo: dados essenciais primeiro; opções sob demanda. */
.tema-app .perfil-colunas, .tema-app .perfil-col-principal, .tema-app .perfil-col-lateral { gap: 14px; }
.tema-app .perfil-colunas .form-cartao { padding: 16px; border-radius: 12px; box-shadow: none; }
.tema-app .perfil-opcao > summary { cursor: pointer; min-height: 44px; align-content: center; color: var(--mg-tinta); font-weight: 600; }
.tema-app .perfil-opcao[open] > summary { margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--mg-borda); }
.tema-app .perfil-foto-form { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }
.tema-app .perfil-foto-previa { width: 64px; height: 64px; }
.tema-app .perfil-foto-campos .campo-dica { margin-bottom: 0; font-size: 13px; }
.tema-app .perfil-foto-campos .form-acoes:has(> [hidden]:only-child) { display: none; }
.tema-app .instalar-grade { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 14px; align-items: start; }
.tema-app .instalar-bloco { padding: 16px; height: auto; border-radius: 12px; }
.tema-app .instalar-bloco .instalar-passos { flex: none; }
.tema-app .vazio-grande { min-height: 0; padding: 24px; text-align: left; justify-content: flex-start; }
/* No computador o cartão vazio terminava a 400px do topo e a metade de baixo da tela
 * ficava oca (regra do dono: sem espaço vazio no desktop, 12/09/2026). Ele ocupa a
 * altura útil, com o miolo centralizado na vertical e alinhado à esquerda. */
@media (min-width: 1024px) { .tema-app .vazio-grande { min-height: calc(100dvh - 260px); } }
.tema-app .vazio-miolo { max-width: 70ch; margin: 0; text-align: left; }
.tema-app .vazio-acoes { justify-content: flex-start; }
.tema-app .vazio-icone { margin-left: 0; margin-right: 0; }
@media (any-pointer: coarse) {
  .tema-app .lv-bt-cheia, .tema-app .lv-form .btn-compacto { min-height: 44px; }
  .tema-app .lv-bt-cheia { min-width: 44px; }
}
@media (max-width: 700px) {
  .tema-app .perfil-colunas .form-cartao { padding: 14px; }
  .tema-app .perfil-opcao > summary { min-height: 44px; }
}

/* ============================================================
   EVENTOS EM DESTAQUE (15/09/2026): banner com carrossel no Início e na
   Agenda do portal (includes/eventos_destaque.php + bloco no fim do app.js).
   Cores LITERAIS de propósito: no tema escuro os tokens --mg-verde-* viram
   tons claros de texto, e o destaque é uma faixa escura nos dois temas, como
   a boas-vindas do painel. Os tons são os da própria paleta (950, 900, sage,
   sage suave, amarelo, creme).
   ============================================================ */
.ev-hero { container-type: inline-size; position: relative; margin: 0 0 26px; border-radius: var(--r-lg); overflow: hidden; background: #1B342B; color: #F1F3EA; box-shadow: var(--sombra-sm); }
.ev-hero-trilho { position: relative; display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.ev-hero-trilho::-webkit-scrollbar { display: none; }
.ev-hero-slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; display: grid; grid-template-columns: minmax(0, 1fr); }
/* A arte inteira, sem recorte: flyer fora do 2:1 ganha faixas escuras em vez
 * de perder o texto das bordas. */
.ev-hero-arte { display: block; aspect-ratio: 2 / 1; max-height: 340px; background: #0E1714; }
.ev-hero-arte img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ev-hero-info { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; padding: 16px 16px 18px; }
.ev-hero-selos { display: flex; flex-wrap: wrap; gap: 6px; }
.ev-hero-selo { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.5; background: rgba(241, 243, 234, .12); color: #F1F3EA; }
.ev-hero-selo-quando { background: #E6ECC3; color: #1B342B; }
.ev-hero-selo .ic { width: 14px; height: 14px; flex: 0 0 auto; }
.ev-hero-selo .live-ponto { width: 8px; height: 8px; margin-right: 2px; }
.tema-app .ev-hero-titulo { margin: 0; font-size: clamp(1.2rem, 2.2vw, 1.55rem); line-height: 1.22; color: #fff; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ev-hero-fatos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13.5px; line-height: 1.45; color: #C3D0B8; }
.ev-hero-fatos li { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.ev-hero-fatos span { min-width: 0; overflow-wrap: anywhere; }
.ev-hero-fatos .ic { width: 16px; height: 16px; flex: 0 0 auto; color: #A5B99C; }
.ev-hero-resumo { display: none; margin: 0; font-size: 14px; line-height: 1.5; color: #C3D0B8; }
.ev-hero-acao { margin-top: 2px; min-height: 44px; gap: 8px; }
.ev-hero-acao .ic { width: 18px; height: 18px; flex: 0 0 auto; }
.ev-hero-controles { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 0 12px 10px; }
.ev-hero-controles[hidden] { display: none; }
.ev-hero-botao { width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid rgba(241, 243, 234, .3); background: transparent; color: #F1F3EA; display: inline-grid; place-items: center; cursor: pointer; }
.ev-hero-botao:hover { background: rgba(241, 243, 234, .12); }
.ev-hero-botao .ic { width: 20px; height: 20px; }
.ev-hero-pontos { display: flex; align-items: center; }
.ev-hero-ponto { width: 28px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; display: inline-grid; place-items: center; }
.ev-hero-ponto::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: rgba(241, 243, 234, .45); transition: width var(--transicao), background-color var(--transicao); }
.ev-hero-ponto[aria-current="true"]::before { width: 22px; background: #E6ECC3; }
/* Pausa e retomar desenhados em CSS: dois traços viram um triângulo. */
.ev-hero-pausa-icone { display: block; width: 12px; height: 14px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; }
.ev-hero-pausa[data-pausado="1"] .ev-hero-pausa-icone { width: 0; height: 0; margin-left: 3px; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent currentColor; }
.ev-hero :focus-visible { outline: 2px solid #E6ECC3; outline-offset: 2px; }
/* No escuro, `html[data-tema="escuro"] h2` pinta títulos com o verde claro de
 * texto: sobre a faixa escura o título do slide sumia. */
html[data-tema="escuro"] .ev-hero-titulo { color: #fff; }

/* Lado a lado quando o CONTEÚDO tem largura para isso (container, e não a
 * tela: a barra lateral recolhida muda a conta sem mudar a janela). */
@container (min-width: 860px) {
  /* O próprio container não responde à consulta dele: a variável vai nos filhos. */
  .ev-hero-slide, .ev-hero-controles { --ev-hero-arte: 54%; }
  .ev-hero-slide { grid-template-columns: var(--ev-hero-arte) minmax(0, 1fr); }
  /* aspect-ratio SAI aqui: com a altura esticada pela linha (o texto é mais
   * alto que a arte), a proporção virava largura mínima e a arte invadia a
   * coluna do texto (596 px numa trilha de 563, medido em 1366). A altura
   * natural vem da própria imagem; object-fit contain cuida do resto. */
  .ev-hero-arte { aspect-ratio: auto; max-height: none; min-width: 0; align-self: stretch; }
  .ev-hero-info { justify-content: center; padding: 22px 26px; }
  /* Os controles moram no rodapé da coluna de texto, na mesma altura em todo
   * slide; a coluna reserva a faixa para o botão do evento não ficar por baixo. */
  .ev-hero-multi .ev-hero-info { padding-bottom: 70px; }
  .ev-hero-controles { position: absolute; left: calc(var(--ev-hero-arte) + 14px); bottom: 12px; padding: 0; justify-content: flex-start; }
}
@container (min-width: 1100px) {
  .ev-hero-resumo { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .ev-hero-info { padding-inline: 32px; }
  .ev-hero-controles { left: calc(var(--ev-hero-arte) + 20px); }
}
/* Tela larga: a arte para de crescer em 700 px (350 de altura) e o texto ganha
 * corpo, senão a faixa passava de 420 px de altura com a coluna de texto oca. */
@container (min-width: 1400px) {
  .ev-hero-slide, .ev-hero-controles { --ev-hero-arte: 700px; }
  .tema-app .ev-hero-titulo { font-size: 1.85rem; }
  .ev-hero-fatos { font-size: 14.5px; }
  .ev-hero-info { padding-inline: 44px; max-width: 860px; }
  .ev-hero-controles { left: calc(var(--ev-hero-arte) + 32px); }
}
@media (prefers-reduced-motion: reduce) {
  .ev-hero-ponto::before { transition: none; }
}

/* ============================================================
   COMUNIDADE SEM MENSAGENS (15/09/2026, sugestão do QA: "com-principal com
   muito espaço vazio"). A regra geral `.tema-app .vazio-grande` estica o
   estado vazio até a altura da tela (calc(100dvh - 260px)) para as telas de
   uma coluna só. Aqui há a coluna lateral ao lado, e o resultado era uma
   caixa de 820 px com o texto boiando no meio. O vazio da Comunidade ocupa
   só o que o texto precisa, alinhado ao topo da coluna lateral.
   ============================================================ */
.tema-app .com-principal .vazio-grande { min-height: 0; align-items: flex-start; padding: 22px 24px; }
@media (min-width: 700px) {
  .tema-app .com-principal .vazio-miolo { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 18px; align-items: start; }
  .tema-app .com-principal .vazio-icone { grid-row: 1 / span 3; display: grid; place-items: center; width: 56px; height: 56px; margin: 0; border-radius: 50%; background: var(--mg-creme); }
  .tema-app .com-principal .vazio-grande .vazio-icone .ic { width: 28px; height: 28px; }
  .tema-app .com-principal .vazio-titulo { grid-column: 2; margin-top: 2px; }
  .tema-app .com-principal .vazio-texto, .tema-app .com-principal .vazio-acoes { grid-column: 2; }
  .tema-app .com-principal .vazio-texto { margin-bottom: 14px; }
}

/* ============================================================================
   ESTADO VAZIO DO PRESCRITOR: ICONE A ESQUERDA, BLOCO BAIXO (18/09/2026)

   Relato do socio em /app/eventos: "esta com bloco muito grande, deixando um
   grande excesso de espaco em branco; icone de agenda deve estar a esquerda do
   bloco de texto; nessa pagina nao deve ter rolagem". Medido antes, com a
   agenda sem evento futuro: a caixa tinha `min-height: 340px`, o icone ficava
   centrado ACIMA do texto e a pagina rolava 247px em 1440x900 e 171px em
   390x844.

   A caixa deixa de ter altura minima e vira uma faixa de duas colunas: o
   desenho a esquerda, titulo, texto e acoes a direita, alinhados pela
   esquerda. Vale para TODOS os estados vazios do portal, e nao so para a
   agenda: eram o mesmo componente com o mesmo excesso.
   ============================================================================ */
.tema-app .vazio-grande { min-height: 0; padding: 20px; }
.tema-app .vazio-miolo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 16px;
  align-items: start;
  text-align: left;
  max-width: 64ch;
  width: 100%;
}
.tema-app .vazio-miolo > .vazio-icone {
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: center;
  margin: 0;
}
.tema-app .vazio-grande .vazio-icone .ic { width: 34px; height: 34px; }
.tema-app .vazio-miolo > .vazio-titulo,
.tema-app .vazio-miolo > .vazio-texto,
.tema-app .vazio-miolo > .vazio-acoes,
.tema-app .vazio-miolo > .vazio-ajuda { grid-column: 2; }
.tema-app .vazio-miolo > .vazio-titulo { font-size: 1.15rem; margin: 0 0 4px; }
.tema-app .vazio-miolo > .vazio-texto { margin: 0 0 12px; }
.tema-app .vazio-miolo > .vazio-acoes { justify-content: flex-start; }
/* No telefone a coluna do desenho encolhe em vez de roubar largura do texto. */
@media (max-width: 420px) {
  .tema-app .vazio-miolo { column-gap: 12px; }
  .tema-app .vazio-grande .vazio-icone .ic { width: 26px; height: 26px; }
  .tema-app .vazio-miolo > .vazio-titulo { font-size: 1.05rem; }
}

/* ============================================================================
   COMUNIDADE: "AVISOS NO APARELHO" NO MODO ESCURO, E O DESENHO DOS DOIS BLOCOS
   (18/09/2026)

   DEFEITO (relato do socio: "erro de CSS em avisos no aparelho, presente
   apenas no modo escuro"). Reproduzido e medido em 390x844 com
   localStorage magis-tema=escuro: o titulo "Avisos no aparelho:" e o numero de
   mensagens saiam em rgb(34,51,41), que e `--mg-creme` NO ESCURO, ou seja, um
   verde quase preto, sobre um cartao quase preto. A regra da linha 3460 pintava
   os dois com um token de SUPERFICIE, nao de texto: no claro `--mg-creme` e
   quase branco e o erro nao aparecia. A regra some; a base ja usa
   `--mg-verde-900`, que no escuro e claro (#D6E3D2) e fecha em 10:1.

   DESENHO: a faixa de avisos ganha o desenho do sino a esquerda e, no escuro,
   uma superficie de verdade com filete de destaque, em vez de um branco a 6%
   que mal se distingue do fundo. Os dois numeros do cartao "Sobre a Comunidade"
   deixam de ser linha de rótulo e valor separados pela largura do cartao.
   ============================================================================ */
html[data-tema="escuro"] .com-lateral-titulo,
html[data-tema="escuro"] .com-lateral-numeros dd { color: var(--mg-verde-900); }

/* Faixa de avisos: desenho, texto e acoes em tres areas. */
.com-avisos { align-items: flex-start; }
.com-avisos-icone {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--mg-branco);
  color: var(--mg-verde-800);
}
.com-avisos-icone .ic { width: 20px; height: 20px; }
.com-avisos-acoes { margin-left: auto; }
@media (max-width: 560px) {
  .com-avisos-acoes { margin-left: 0; width: 100%; }
  .com-avisos-acoes .btn { flex: 1 1 auto; justify-content: center; }
}
html[data-tema="escuro"] .com-avisos {
  background: rgba(255, 255, 255, .06);
  border-left: 3px solid var(--mg-verde-800);
}
html[data-tema="escuro"] .com-avisos-icone { background: rgba(255, 255, 255, .08); }

/* Os dois numeros lado a lado, valor em cima do rotulo. */
.tema-app .com-lateral-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tema-app .com-lateral-numeros > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 8px 10px;
  border: 1px solid var(--mg-borda);
  border-radius: var(--r-sm, 8px);
  background: var(--mg-base);
}
.tema-app .com-lateral-numeros dd { font-size: 1.25rem; line-height: 1.15; }
.tema-app .com-lateral-numeros dt { font-size: 11.5px; line-height: 1.25; color: var(--mg-tinta-2); }
html[data-tema="escuro"] .tema-app .com-lateral-numeros > div { background: rgba(255, 255, 255, .05); }

/* ============================================================================
   COLUNA DE FILTROS DO ACERVO (18/09/2026)

   Pedido do socio, nas tres telas de acervo: "em filtros e categorias, deve
   aparecer como coluna; a listagem deve ser por categoria; essa coluna deve
   atender ao modelo desktop; no mobile os filtros devem aparecer no modelo
   listagem para facilitar a navegacao".

   No computador: coluna de 232px a esquerda, grudenta, e o acervo a direita.
   No telefone: a MESMA lista, acima da grade, sem faixa que rola de lado (era
   ela que escondia metade das categorias, medido em 10/09/2026) e sem <select>
   nativo, que obrigava a abrir para saber o que existe.

   A hierarquia vem do banco (`pai_id`), nunca de recuo escrito a mao no PHP.
   ============================================================================ */
.acervo-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.acervo-conteudo { min-width: 0; }
@media (min-width: 900px) {
  .acervo-grade { grid-template-columns: 232px minmax(0, 1fr); gap: 24px; }
  .acervo-grade-sem-coluna { grid-template-columns: minmax(0, 1fr); }
  .fcol { position: sticky; top: 14px; max-height: calc(100dvh - 40px); overflow-y: auto; scrollbar-width: thin; }
}
@media (min-width: 1600px) {
  .acervo-grade { grid-template-columns: 264px minmax(0, 1fr); }
}

.fcol { min-width: 0; display: grid; gap: 16px; align-content: start; }
.fcol-secao { min-width: 0; }
.fcol-titulo {
  margin: 0 0 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mg-tinta-2);
}
.fcol-lista, .fcol-filhas { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.fcol-filhas { margin: 1px 0 2px 10px; padding-left: 10px; border-left: 2px solid var(--mg-borda); }
.fcol-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 7px 10px;
  border-radius: var(--r-sm, 8px);
  text-decoration: none;
  color: var(--mg-tinta);
  font-size: 14px;
  line-height: 1.3;
}
.fcol-item:hover { background: var(--mg-creme); }
.fcol-item.ativo { background: var(--mg-verde-800); color: var(--mg-branco); font-weight: 700; }
.fcol-nome { min-width: 0; overflow-wrap: anywhere; }
.fcol-n {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--mg-tinta-2);
  background: var(--mg-creme);
  border-radius: 999px;
  padding: 1px 7px;
}
.fcol-item.ativo .fcol-n { background: rgba(255, 255, 255, .22); color: inherit; }
.fcol-filhas .fcol-item { font-size: 13.5px; min-height: 40px; padding: 5px 9px; }
.fcol-limpar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-size: 13px;
  font-weight: 700;
  color: var(--mg-verde-800);
  text-decoration: none;
}
.fcol-limpar .ic { width: 15px; height: 15px; }
/* Alvo de toque de 44px no ponteiro grosso, sem mudar o desenho no mouse. */
/* 18/09/2026: 44 nao passa no piso desta casa, que e 48px (o motivo esta na
   regra de toque la em cima: a sonda mede o clique a 21px do CENTRO e o
   arredondamento joga para fora num alvo de 44 exatos). A correcao e AQUI, e
   nao numa regra nova mais acima: esta tem o mesmo peso e e declarada depois,
   entao qualquer concorrente de mesmo peso nasceria inerte. */
@media (pointer: coarse) {
  .fcol-item { min-height: 48px; }
  .fcol-filhas .fcol-item { min-height: 48px; }
}
html[data-tema="escuro"] .fcol-item:hover { background: rgba(255, 255, 255, .06); }
html[data-tema="escuro"] .fcol-n { background: rgba(255, 255, 255, .08); }
html[data-tema="escuro"] .fcol-item.ativo { color: var(--mg-verde-950); }

/* 24/09/2026 (portal do prescritor, toque): medido com pointer coarse.
 * 1) Barra lateral RECOLHIDA (1024px em diante, tablet deitado): o símbolo
 *    media 36x34, o botão de expandir 44x36 e o perfil 52x42. O botão ficava
 *    com 36 de altura apesar do "height: 44px" da regra de toque porque, no
 *    topo recolhido (flex em coluna), o "flex: 0 0 36px" vira ALTURA e vence o
 *    height. Piso da casa: 48.
 * 2) Chips de objetivo do cartão de material abaixo de 600px: com dois ou três
 *    objetivos na coluna de 139px (320px de tela), cada chip encolhia até 30 a
 *    41px de largura ("Imu...") e virava alvo que ninguém acerta. No telefone
 *    fica o primeiro chip, com piso de 48; os outros objetivos continuam na
 *    coluna de filtros, que é onde se filtra. */
@media (any-pointer: coarse) and (min-width: 1024px) {
  .tema-app.sidebar-recolhida .app-sidebar-logo { min-width: 48px; min-height: 48px; justify-content: center; }
  .tema-app.sidebar-recolhida .sidebar-recolher { width: 48px; height: 48px; flex-basis: 48px; }
  .tema-app.sidebar-recolhida .app-sidebar-perfil { min-height: 48px; }
}
@media (any-pointer: coarse) and (max-width: 599px) {
  .lam-objetivos li + li { display: none; }
  .lam-objetivos li:first-child { min-width: 48px; }
  .lam-objetivos li:first-child a { min-width: 48px; justify-content: center; }
}
@media (any-pointer: coarse) {
  .lam-objetivos li { min-width: 48px; }
  .lam-objetivos a { min-width: 48px; justify-content: center; }
}
/* 24/09/2026: aberto como aplicativo instalado, "Instalar o aplicativo" na
 * folha Mais oferecia instalar o que já está instalado. Sai da folha (a rota
 * /app/instalar continua, e ela mesma diz "já abre como aplicativo"), e Meu
 * perfil ocupa a fileira que ficou com um item só. */
@media (display-mode: standalone) {
  .app-mais-lista > a[href="/app/instalar"] { display: none; }
  .app-mais-lista > a[href="/app/perfil"] { grid-column: 1 / -1; }
}
/* Fechar da folha Mais: 44x44 no toque, abaixo do piso de 48 da casa. */
@media (any-pointer: coarse) {
  .app-mais-fechar { width: 48px; height: 48px; }
}
/* 24/09/2026: coluna de filtros das telas de acervo entre 600 e 899px (tablet
 * em pé). A lista empilhada (pedido do sócio, 18/09: "no mobile os filtros
 * devem aparecer no modelo listagem") continua lista, mas em DUAS colunas: com
 * uma só, os 11 objetivos de /app/materiais empurravam o primeiro material para
 * y=1108 em 768x900, fora da primeira tela. No telefone fica uma coluna: em
 * 390px a coluna dupla tem 116px de texto e partia "antienvelhecimento" no
 * meio da palavra. As filhas (subcategorias) seguem sob a mãe, na mesma célula. */
@media (min-width: 600px) and (max-width: 899px) {
  .fcol-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8px; row-gap: 4px; }
  .fcol-lista > .fcol-linha { min-width: 0; }
}
/* 24/09/2026: piso de 48px no TOQUE em todo o portal do prescritor. O config do
 * portão declara 48 (nível falha, nota de 06/09: em 44 a sonda do clique cai
 * fora pelo arredondamento), mas o portal só media 44 fora dos alvos
 * declarados: medido em 390x800 com pointer coarse, os 4 ícones do topo, o
 * salvar dos cartões (aula e material), a paginação, o "Abrir"/"Baixar" dos
 * materiais, o "Mostrar a senha", os dobráveis do perfil e os links do rodapé
 * tinham 44. A regra antiga do .lam-salvar (48) perdia para uma posterior de
 * mesmo peso; aqui o prefixo body.tema-app resolve o peso de uma vez, e nada
 * muda com mouse. */
@media (any-pointer: coarse) {
  body.tema-app .app-burger,
  body.tema-app .app-topbar-logo,
  body.tema-app .app-topbar-tema,
  body.tema-app .app-topbar-perfil { min-width: 48px; min-height: 48px; }
  body.tema-app .cartao-salvar button,
  body.tema-app .lam-salvar button { width: 48px; height: 48px; }
  body.tema-app .paginacao-num,
  body.tema-app .paginacao-passo { min-width: 48px; min-height: 48px; }
  body.tema-app .app-conteudo .btn { min-height: 48px; }
  body.tema-app .senha-olho { width: 48px; min-height: 48px; }
  body.tema-app .perfil-opcao > summary { min-height: 48px; }
  body.tema-app .app-rodape a,
  body.tema-app .app-rodape .credito-dev { min-height: 48px; }
  body.tema-app .lam-vazio a,
  body.tema-app .estado-vazio a { display: inline-flex; align-items: center; min-height: 48px; }
  /* O "?" cresce 4px de área sem empurrar o título: a margem negativa devolve o espaço. */
  body.tema-app .ajuda-btn { width: 48px; height: 48px; flex-basis: 48px; margin: -2px; }
  /* Barra lateral (fixa no computador, gaveta abaixo de 1024px). */
  body.tema-app .app-sidebar-nav a, body.tema-app .app-sidebar-perfil,
  body.tema-app .app-sidebar-tema, body.tema-app .app-sidebar .form-sair button { min-height: 48px; }
}

/* Detalhes do material no telefone (24/09/2026, portão): em 320 px "Lâminas de
 * ativo | 9 páginas | 22,0 MB" precisa de 3 linhas e o clamp de 2 escondia o
 * tamanho do arquivo, que é o que a pessoa quer saber antes de baixar. */
@media (max-width: 599px) {
  .lam-meta { display: block; -webkit-line-clamp: unset; overflow: visible; }
}