/* components.css - botoes, cards, vitrine, player, forms */

/* ---------- Botoes ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: var(--raio-sm);
  font-size: var(--fs-sm); font-weight: 500;
  border: 1px solid var(--border);
  background: var(--surface); color: var(--text);
  cursor: pointer; transition: var(--transicao);
}
.btn:hover { border-color: var(--text-fraco); }
.btn-primario {
  background: linear-gradient(135deg, var(--accent), var(--accent-escuro));
  /* letra sobre o laranja: quase preto do tema (decisao 7 do dono): 7,13:1 no accent e 4,66:1 na ponta escura do degrade */
  border-color: transparent; color: var(--texto-sobre-accent); font-weight: 600;
}
.btn-primario:hover { filter: brightness(1.08); border-color: transparent; }
.btn-fantasma { background: transparent; border-color: transparent; color: var(--texto-secundario); }
.btn-fantasma:hover { background: var(--fundo); color: var(--texto); border-color: transparent; }
.btn-sm { padding: 6px 10px; font-size: 12px; }
.btn { min-height: 36px; }
/* toque no celular: alvo de 44px em todo botao (Responsividade_Sempre, CV-194). Na barra de filtros (.ra-bar, 40px) o
   min-height vence o height: 40px, e o botao fica com 44px ate 720px. Nao desalinha: nessa largura cada .campo ocupa a
   linha inteira (flex 1 1 100%, regra "Minha conta" la embaixo), entao campo e botao ficam empilhados; acima de 720px os
   dois voltam a 40px na mesma linha. Medido no navegador em 30/09 04:56 (/adm/termos e /admin/conta, CV-113 e CV-194). */
@media (max-width: 720px) {
  .btn { min-height: 44px; padding: 11px 16px; }
}
.btn.ativo { border-color: var(--accent); color: var(--accent-texto); }
/* botao desabilitado (Padrao_Upload_Arquivo: opacity .45 e cursor not-allowed): em TODO .btn, e sem mudanca no hover (nem filtro, nem borda, nem fundo). A regra
   generica vem primeiro e cada variante repoe a borda e o fundo que o hover dela mudaria */
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:disabled:hover { border-color: var(--border); filter: none; }
.btn-primario:disabled:hover, .btn-perigo:disabled:hover { border-color: transparent; }
.btn-secundario:disabled:hover { background: transparent; border-color: var(--accent); }
.btn-fantasma:disabled:hover { background: transparent; border-color: transparent; color: var(--texto-secundario); }

/* ---------- Card base (Padrao_Box_Card) ---------- */
.cd {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 16px;
  box-shadow: var(--sombra-sm);
  display: flex; flex-direction: column; gap: 12px;
}
.cd-clicavel { cursor: pointer; transition: var(--transicao); }
.cd-clicavel:hover { border-color: var(--cor-primaria); box-shadow: var(--sombra); transform: translateY(-2px); }
.cd-header { display: flex; align-items: center; justify-content: space-between; }
.cd-titulo { font-size: 14px; font-weight: 600; color: var(--texto); margin: 0; }
.grid-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px; align-items: stretch;
}
.grid-cards > .cd { height: 100%; }

/* ---------- Formularios ---------- */
.campo { display: flex; flex-direction: column; gap: 5px; }
.campo label { font-size: 13px; font-weight: 600; color: var(--texto-secundario); }
.input {
  height: 40px; padding: 0 12px;
  border-radius: var(--raio-sm); border: 1px solid var(--borda);
  background: var(--fundo); color: var(--texto);
  font-size: 14px; outline: none; transition: var(--transicao);
}
.input:focus { border-color: var(--accent); background: var(--branco); }

/* Input de imagem (toda imagem vira WebP no banco) */
.input-arquivo {
  font-size: 13px; color: var(--texto-secundario);
  padding: 7px 8px; height: 40px; box-sizing: border-box;
  border: 1px dashed var(--borda); border-radius: var(--raio-sm);
  background: var(--fundo); width: 100%;
}
.input-arquivo::file-selector-button {
  border: 1px solid var(--borda); border-radius: var(--raio-xs);
  background: var(--branco); color: var(--texto);
  padding: 4px 10px; margin-right: 10px;
  font-size: 12px; font-weight: 600; cursor: pointer;
}
.input-arquivo::file-selector-button:hover { border-color: var(--cor-primaria); color: var(--accent-texto); }

/* ---------- VITRINE (Netflix dark, Fase 8 parte A) ---------- */
.pagina-titulo { font-size: var(--fs-2xl); }

/* busca da vitrine e da pagina de busca: altura de 44 px (toque) e 16 px de letra (o iOS nao da zoom no foco) */
.vit-busca { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.vit-busca-pagina { justify-content: flex-start; max-width: 640px; margin-bottom: var(--sp-5); }
.vit-busca-campo { position: relative; display: flex; align-items: center; flex: 0 1 360px; min-width: 0; }
.vit-busca-pagina .vit-busca-campo { flex: 1 1 auto; }
.vit-busca-campo i { position: absolute; left: 14px; font-size: 18px; color: var(--text-fraco); pointer-events: none; }
.vit-busca-campo input {
  width: 100%; height: 44px; padding: 0 14px 0 42px; font-size: 16px;
  border: 1px solid var(--border); border-radius: var(--raio-full); background: var(--bg-elev); color: var(--text);
  outline: none; transition: border-color var(--transicao);
}
.vit-busca-campo input::placeholder { color: var(--text-fraco); }
.vit-busca-campo input:focus-visible { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 2px; }
.vit-busca-ir { min-height: 44px; }

/* prateleira: titulo, trilho que rola de lado e as setas. A pagina NUNCA rola de lado: so o trilho rola, dentro dele. O trilho
   sangra a folga (margem negativa) e devolve como padding, pra o card ampliado no hover nao ser cortado pelo overflow (o
   overflow-x: auto forca o overflow-y: auto e cortaria o scale do primeiro e do ultimo card, em cima e dos lados). */
.prateleira { --prat-folga: min(16px, var(--pad-aluno, 16px)); margin-bottom: var(--sp-5); }
.prateleira-titulo {
  font-family: var(--font-titulo); font-weight: 700; font-size: 15px;
  letter-spacing: -.02em;
  color: var(--text-dim); margin: 0 0 var(--sp-3);
  display: flex; align-items: center; gap: 8px;
}
.prateleira-titulo::before {
  content: ""; width: 4px; height: 16px; border-radius: var(--raio-full); background: var(--accent);
}
.prat-sem-margem { margin: 0; }

/* a VITRINE DE OUTRA AREA embutida (dono, 09/10, a "vitrine especial"): aberta, a continuidade com o titulo e uma linha fina em cima;
   recolhida, uma faixa (<details>) com o icone, o nome, quantos cursos tem e o Ver/Recolher, que abre as secoes dela por baixo */
/* no admin, o olhinho da vitrine embutida: uma linha por secao da outra Area (o olho, o icone do tipo, o nome); a escondida fica esmaecida */
.vt-vit { display: flex; flex-direction: column; gap: var(--sp-3); }
.vt-vit-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: 280px; overflow-y: auto; }
.vt-vit-linha { display: flex; align-items: center; gap: var(--sp-2); min-height: 40px; padding: 2px 8px 2px 2px; border-radius: var(--raio-sm); }
.vt-vit-linha:hover { background: var(--fundo); }
.vt-vit-linha.escondida .vt-vit-nome, .vt-vit-linha.escondida .vt-vit-tipo { opacity: .45; text-decoration: line-through; }
.vt-vit-olho[aria-pressed="true"] { color: var(--accent-texto); }
.vt-vit-tipo { color: var(--texto-fraco); font-size: 16px; flex: 0 0 auto; }
.vt-vit-nome { flex: 1 1 auto; min-width: 0; font-size: 13.5px; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 720px), (pointer: coarse) { .vt-vit-linha { min-height: 44px; } .vt-vit-olho { width: 44px; height: 44px; } }
.vit-embutida { margin: var(--sp-6) 0 var(--sp-5); }
.vit-aberta { padding-top: var(--sp-5); border-top: 1px solid var(--border); }
.vit-aberta > .vit-titulo {
  display: block; margin: 0 0 var(--sp-4); font-size: 20px; font-weight: 700; letter-spacing: -.02em;
  color: var(--texto);
}
.vit-faixa {
  display: flex; align-items: center; gap: var(--sp-3); min-height: 64px; padding: 12px 16px; list-style: none; cursor: pointer;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--raio-lg); transition: border-color var(--transicao);
}
.vit-faixa::-webkit-details-marker { display: none; }
.vit-faixa:hover { border-color: var(--accent); }
.vit-faixa:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: 2px; }
.vit-faixa-icone {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 40px; height: 40px;
  border-radius: var(--raio-sm); background: var(--cor-primaria-suave); color: var(--accent-texto); font-size: 20px;
}
.vit-faixa-textos { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vit-faixa .vit-titulo { font-size: 16px; font-weight: 700; color: var(--texto); overflow-wrap: anywhere; }
.vit-faixa-sub { font-size: 12.5px; color: var(--texto-secundario); }
.vit-faixa-acao { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; font-size: 13px; font-weight: 600; color: var(--accent-texto); }
.vit-faixa-seta { transition: transform .2s ease; }
.vit-faixa-esconder, .vit-recolhida[open] .vit-faixa-ver { display: none; }
.vit-recolhida[open] .vit-faixa-esconder { display: inline; }
.vit-recolhida[open] .vit-faixa-seta { transform: rotate(180deg); }
.vit-conteudo { padding-top: var(--sp-5); }
/* ABERTA, a recolhida vira uma CAIXA independente (dono, 09/10: "quero o box independente... o scroll faz o conteudo rolar dentro do box"):
   uma moldura cinza discreta, a faixa como cabecalho fixo dela e, no computador, o acervo rolando DENTRO da caixa (a pagina fica parada),
   com um desfoque leve logo abaixo da faixa, onde o conteudo some ao rolar. Dentro dela o banner e o billboard nao sangram ate a borda da
   pagina (ficam dentro da moldura, com o raio). No celular a caixa nao rola por dentro: o acervo segue no fluxo da pagina. */
.vit-recolhida[open] { border: 1px solid var(--border); border-radius: var(--raio-lg); overflow: hidden; }
.vit-recolhida[open] > .vit-faixa { border-color: transparent; border-bottom-color: var(--border); border-radius: var(--raio-lg) var(--raio-lg) 0 0; }
.vit-recolhida[open] > .vit-conteudo { padding: var(--sp-5) var(--sp-4) var(--sp-2); }
.vit-recolhida .vit-conteudo .banner-secao { margin-left: 0; margin-right: 0; border: 1px solid var(--border); border-radius: var(--raio-lg); }
.vit-recolhida .vit-conteudo .billboard { margin-left: 0; margin-right: 0; border-radius: var(--raio-lg); }
@media (min-width: 881px) {
  /* a caixa tem a ALTURA da barra lateral (dono, 09/10: "o teto da caixa nao esta alinhado com o teto do sidebar"): 14 px do alto e do fundo
     da janela quando encaixada; a faixa tem altura fixa (72 px) e a area que rola fica com o resto. Rolando a pagina perto dela, a pagina
     ENCAIXA a caixa nessa linha (scroll-snap de proximidade, so com a caixa aberta), e o Ver ja a leva pra la (static/js/vitrine.js) */
  html:has(.vit-recolhida[open]) { scroll-snap-type: y proximity; }
  .vit-recolhida[open] { scroll-snap-align: start; scroll-margin-top: 14px; }
  .vit-recolhida[open] > .vit-faixa { height: 72px; min-height: 0; padding-right: 76px; }   /* o Recolher nunca fica por baixo do sino */
  .vit-recolhida[open] > .vit-conteudo {
    max-height: calc(100vh - 28px - 72px - 2px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: auto; padding-top: 0;
  }
  /* o desfoque embaixo da faixa: uma tira grudada no topo da area que rola (sticky dentro dela), que desfaz o que passa por baixo */
  .vit-recolhida[open] > .vit-conteudo::before {
    content: ""; position: sticky; top: 0; z-index: 3; display: block; height: var(--sp-5); margin: 0 calc(-1 * var(--sp-4));
    background: linear-gradient(var(--vit-faixa-fundo, var(--bg-elev)), transparent); pointer-events: none;
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    -webkit-mask-image: linear-gradient(black, transparent); mask-image: linear-gradient(black, transparent);
  }
}
@media (prefers-reduced-motion: reduce) { .vit-faixa, .vit-faixa-seta { transition: none; } }
.prat-janela { position: relative; }
.prateleira-trilho {
  list-style: none; display: flex; align-items: stretch; gap: var(--sp-3);
  margin: -8px calc(-1 * var(--prat-folga)); padding: 18px var(--prat-folga) 22px;
  overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity; scroll-padding-inline: var(--prat-folga);
  scrollbar-width: none;
}
.prateleira-trilho::-webkit-scrollbar { display: none; }
.prat-item { flex: 0 0 auto; position: relative; scroll-snap-align: start; }
.prat-item:hover, .prat-item:focus-within { z-index: 3; }

/* setas: a faixa cobre a altura toda, degrade do fundo da pagina (o fade da borda) e o botao redondo no meio. So aparecem quando
   ha pra onde rolar (classe tem-esq e tem-dir no .prat-janela, posta pelo vitrine.js): no inicio nao ha seta pra esquerda e no
   fim nao ha pra direita, entao o primeiro e o ultimo card nunca ficam sob o fade. Sao <button>: alcancaveis por Tab e Enter. */
.prat-seta {
  position: absolute; top: 0; bottom: 0; z-index: 4; width: 64px; display: none;
  align-items: center; border: 0; padding: 0 10px; margin: 0; cursor: pointer; color: var(--text);
}
.prat-seta i {
  width: 40px; height: 40px; border-radius: var(--raio-full); display: grid; place-items: center; font-size: 18px;
  background: var(--scrim); border: 1px solid var(--border); transition: border-color var(--transicao), background var(--transicao);
}
.prat-seta:hover i, .prat-seta:focus-visible i { border-color: var(--accent); background: var(--scrim-forte); }
.prat-seta:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.prat-seta-esq { left: calc(-1 * var(--prat-folga)); justify-content: flex-start; background: linear-gradient(to right, var(--bg) 30%, transparent); }
.prat-seta-dir { right: calc(-1 * var(--prat-folga)); justify-content: flex-end; background: linear-gradient(to left, var(--bg) 30%, transparent); }
.prat-janela.tem-esq .prat-seta-esq, .prat-janela.tem-dir .prat-seta-dir { display: flex; }

/* O CONVITE da seta (dono, 08/10, tarefa-ad74ca06: "as secoes com muitos cursos estao mortas"): quando a prateleira que tem mais cursos
   a direita entra na tela, o vitrine.js poe .convida no .prat-janela por 2 ciclos. A bolinha da um empurrao pra direita com o anel na cor
   da marca que se abre (outline, que segue o raio e nao briga com o relevo do tema), e uma luz atravessa o fade da direita pra esquerda,
   como um ar vindo dos cursos escondidos. Some no primeiro toque da pessoa na prateleira; sem movimento (reduced-motion) nao existe. */
.prat-seta-dir::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(to left, transparent 0%, var(--accent-brilho) 45%, transparent 90%) no-repeat;
  background-size: 220% 100%; background-position: -20% 0;
}
.prat-seta-dir i { position: relative; z-index: 1; }
.prat-janela.convida .prat-seta-dir i { animation: pratConviteSeta 1.8s ease-in-out 1; }
.prat-janela.convida .prat-seta-dir::after { animation: pratConviteAr 1.8s ease-out 1; }
/* e os cursos se arrastam pro lado, sozinhos (dono, 15/10: "oi, to aqui"): dois puxoes pra esquerda que voltam, mostrando mais do
   card escondido na borda. O vitrine.js repete o convite enquanto a prateleira esta na tela e ninguem mexeu nela. */
.prat-janela.convida .prat-item { animation: pratEspia 1.8s cubic-bezier(.3, .7, .3, 1) 1; }
@keyframes pratEspia {
  0%, 100% { transform: none; }
  22% { transform: translateX(-38px); }
  42% { transform: translateX(-4px); }
  58% { transform: translateX(-22px); }
  80% { transform: none; }
}
@keyframes pratConviteSeta {
  0%, 100% { transform: translateX(0); outline: 2px solid transparent; outline-offset: 0; }
  20% { transform: translateX(5px); outline-color: var(--accent); border-color: var(--accent); }
  40% { transform: translateX(0); }
  55% { transform: translateX(3px); }
  70% { transform: translateX(0); outline: 2px solid transparent; outline-offset: 12px; }
}
@keyframes pratConviteAr {
  0% { opacity: 0; background-position: -20% 0; }
  25% { opacity: 1; }
  100% { opacity: 0; background-position: 120% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .prat-janela.convida .prat-seta-dir i, .prat-janela.convida .prat-seta-dir::after, .prat-janela.convida .prat-item { animation: none; }
}

.capa {
  display: flex; flex-direction: column; width: 250px;
  border-radius: var(--raio); overflow: hidden; position: relative;
  background: var(--surface); border: 1px solid var(--border);
  transition: transform var(--transicao), border-color var(--transicao), box-shadow var(--transicao);
}
.capa.horizontal { width: 380px; }
/* hover e foco do teclado iguais; a ampliacao cabe na folga do trilho (ver acima) */
.capa:hover, .capa:focus-visible { transform: scale(1.05); border-color: var(--accent); box-shadow: var(--sombra); }
.capa:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.capa .capa-img { aspect-ratio: 2 / 3; background: var(--bg-elev); position: relative; }
.capa.horizontal .capa-img { aspect-ratio: 3 / 2; }  /* mesma arte da vertical, deitada */
.capa .capa-img img { width: 100%; height: 100%; object-fit: cover; }
.capa-placeholder {
  position: absolute; inset: 0; display: grid; place-items: center;
  text-align: center; padding: var(--sp-3);
  background: linear-gradient(160deg, var(--surface), var(--accent-soft));
  font-weight: 700; font-size: 15px;
  letter-spacing: -.01em; color: var(--text);
}
/* Fase 18: o card tem a proporcao da capa (2:3 ou 3:2, a arte do CursEduca e 720 x 1080): o nome e o progresso ficam POR CIMA da base da
   capa, num degrade, e nao numa faixa embaixo dela. O nome ja esta na arte: fica para o leitor de tela (e no placeholder sem imagem) */
.capa .capa-rodape {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 22px 10px 8px; display: flex; flex-direction: column; gap: 6px;
}
.capa .capa-nome { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.capa .capa-nome {
  font-size: 13px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* o progresso SEMPRE a vista (nada so no :hover; o toque nao tem hover). Fase 18 (dono, 07/10): no lugar da barra, um ANEL em volta do %
   (templates/vitrine/_anel.html): o quanto enche vem do stroke-dasharray do SVG; o <progress> fica no HTML pro leitor de tela, fora da vista */
.capa-prog { display: flex; align-items: center; gap: 8px; }
.capa-prog .anel-leitor { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.capa-prog .anel {
  position: relative; display: inline-grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  background: var(--anel-fundo, var(--scrim-forte)); box-shadow: var(--anel-sombra);
}
.capa-prog .anel-svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; }
.anel-svg circle { fill: none; stroke-width: 3.2; }
.anel-trilho { stroke: var(--anel-trilho); }
.anel-valor { stroke: var(--anel-cor, var(--accent)); stroke-linecap: round; transition: stroke-dasharray .6s cubic-bezier(.22, 1, .36, 1); }
.capa-prog .capa-pct { position: relative; font-size: 10.5px; font-weight: 700; letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.capa .capa-rodape:has(.capa-prog) { align-items: flex-end; }
.capa-trofeu { position: relative; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; min-width: 40px; min-height: 40px;
  color: var(--trofeu-ouro); font-size: 26px; line-height: 1; filter: drop-shadow(var(--trofeu-sombra)); }   /* sozinho, sem o anel (Fase 18) */   /* Fase 18: o certificado do curso, no lugar do % */
.capa-trofeu:hover i { filter: brightness(1.15); }
/* Fase 18 (pedido do dono): o curso sem acesso fica em tons de cinza e o cadeado laranja vai numa bola chumbo em neumorfismo (luz em cima a
   esquerda, sombra embaixo a direita, o brilho de dentro em cima), que destaca da capa cinza */
.capa .cadeado {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 36px; height: 36px; border-radius: var(--raio-full);
  background: linear-gradient(145deg, var(--cadeado-chumbo-claro), var(--cadeado-chumbo-escuro));
  box-shadow: -3px -3px 6px var(--cadeado-luz), 4px 4px 9px var(--cadeado-sombra),
              inset 1px 1px 1px var(--cadeado-luz), inset -1px -1px 2px var(--cadeado-sombra);
  display: grid; place-items: center; color: var(--accent); font-size: 17px;
}
.capa.bloqueada .capa-img img, .capa.bloqueada .capa-placeholder { filter: grayscale(1) brightness(.8); }

/* billboard: um curso em destaque, sangrado, com a arte escurecida pra o texto ler (nunca preto puro: o tom do tema) */
.billboard {
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end;
  margin: 0 calc(-1 * var(--pad-aluno, 24px)) var(--sp-5); min-height: clamp(340px, 56vh, 600px);
  background: var(--bg-elev);
}
.bb-arte { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
/* a faixa escura cobre o bloco do texto inteiro (a largura dele mais a margem) e so depois desvanece: o texto le sobre qualquer arte,
   inclusive uma clara (0,94 de opacidade sobre branco da 7:1 com o texto claro) */
.billboard::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, var(--scrim-forte) 0, var(--scrim-forte) calc(var(--pad-aluno, 24px) + 640px), transparent calc(var(--pad-aluno, 24px) + 640px + 24vw)),
    linear-gradient(0deg, var(--bg) 0%, transparent 34%);
}
.bb-texto { position: relative; z-index: 2; width: min(620px, 100%); padding: var(--sp-6) var(--pad-aluno, 24px) var(--sp-6); }
.bb-titulo { font-size: clamp(28px, 4vw, 52px); line-height: 1.05; margin: 0 0 var(--sp-2); color: var(--text); }
.bb-sub { margin: 0 0 var(--sp-4); font-size: 15px; line-height: 1.5; color: var(--text); max-width: 52ch; }
.bb-acoes { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.bb-btn { min-height: 44px; padding: 10px 20px; font-size: 14px; }
.bb-info { background: var(--scrim); border-color: var(--border); }
.bb-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.conteudo-aluno > .billboard-hero:first-child { margin-top: calc(-1 * var(--pad-aluno, 24px)); }

/* prefers-reduced-motion: sem ampliacao, sem deslize e sem animacao de entrada; o realce por borda fica */
@media (prefers-reduced-motion: reduce) {
  .capa { transition: border-color var(--transicao); }
  .capa:hover, .capa:focus-visible { transform: none; }
  .prateleira-trilho { scroll-behavior: auto; }
}

/* toque e celular: a rolagem nativa com snap faz o trabalho, sem seta; cards menores que a tela (o horizontal de 380 px passava dos
   375 px do celular) e a busca ocupa a linha toda */
@media (pointer: coarse), (max-width: 720px) {
  .prat-seta, .prat-janela.tem-esq .prat-seta-esq, .prat-janela.tem-dir .prat-seta-dir { display: none; }
}
@media (max-width: 720px) {
  /* Fase 18 (dono, 06/10): no celular a prateleira mostra 2,5 capas (a meia capa na borda e o convite pra arrastar, como na Netflix e no
     CursEduca): a largura util (100vw menos as duas margens de 12 px e os dois vaos de 12 px) dividida por 2,5; deitada, 1,5 */
  .capa { width: min(250px, calc((100vw - 48px) / 2.5)); }
  .capa.horizontal { width: min(380px, calc((100vw - 36px) / 1.5)); }
  .capa .cadeado { width: 28px; height: 28px; font-size: 14px; top: 6px; right: 6px; }   /* a capa menor pede a bola menor */
  .vit-busca-campo { flex: 1 1 auto; }
  .billboard { min-height: clamp(380px, 62vh, 520px); }
  .billboard::after {
    background: linear-gradient(0deg, var(--scrim-forte) 0%, var(--scrim-forte) 62%, transparent 100%);
  }
  .bb-btn { flex: 1 1 auto; justify-content: center; }
}

.banner-secao {
  margin-bottom: var(--sp-6);
  border-radius: var(--raio-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  position: relative;
}
/* banner sempre 100% da largura, com a altura da PROPORCAO da arte: o width e o height do <img> so reservam o espaco (sem pulo ao carregar);
   sem o height: auto o navegador mantinha a altura em pixels do atributo e a arte esticava (Fase 18, pedido do dono) */
.banner-secao img { width: 100%; height: auto; display: block; }

/* CTA sobre o banner: bloco posicionado num grid 3x3 (esq/cen/dir x sup/cen/inf) */
.banner-cta {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; gap: 10px;
  padding: clamp(16px, 4vw, 40px);
  pointer-events: none;
}
.banner-cta > * { pointer-events: auto; max-width: 60%; }
.banner-cta .bc-antes {
  font-weight: 800; font-size: clamp(16px, 2.2vw, 26px);
  letter-spacing: -.02em; color: var(--sobre-imagem); text-shadow: var(--sombra-sobre-imagem);
  margin: 0;
}
.banner-cta .bc-depois {
  font-size: clamp(11px, 1.2vw, 14px); color: var(--sobre-imagem-suave);
  text-shadow: var(--sombra-sobre-imagem-leve); margin: 0;
}
/* desktop x mobile: qual bloco de CTA aparece */
.banner-cta.cta-mobile { display: none; }
@media (max-width: 700px) {
  .banner-cta.cta-desktop.tem-mobile { display: none; }
  .banner-cta.cta-mobile { display: flex; }
}

/* horizontal (align-items) */
.banner-cta.pos-esq-sup, .banner-cta.pos-esq-cen, .banner-cta.pos-esq-inf { align-items: flex-start; text-align: left; }
.banner-cta.pos-cen-sup, .banner-cta.pos-cen-cen, .banner-cta.pos-cen-inf { align-items: center; text-align: center; }
.banner-cta.pos-dir-sup, .banner-cta.pos-dir-cen, .banner-cta.pos-dir-inf { align-items: flex-end; text-align: right; }
/* vertical (justify-content) */
.banner-cta.pos-esq-sup, .banner-cta.pos-cen-sup, .banner-cta.pos-dir-sup { justify-content: flex-start; }
.banner-cta.pos-esq-cen, .banner-cta.pos-cen-cen, .banner-cta.pos-dir-cen { justify-content: center; }
.banner-cta.pos-esq-inf, .banner-cta.pos-cen-inf, .banner-cta.pos-dir-inf { justify-content: flex-end; }

/* Mockups de upload do banner: simulam a tela real (desktop com sidebar +
   prateleiras fake, celular idem). A imagem do banner entra na .mock-banner. */
.mock-wrap { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.mock { cursor: pointer; display: block; }
.mock .im-inp { position: absolute; left: -9999px; }
.mock-rotulo {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--texto-secundario);
  margin-bottom: 6px;
}
.mock:hover .mock-tela { outline: 2px solid var(--cor-primaria); outline-offset: 2px; }

/* pecas comuns da tela fake (proporcoes reais da vitrine) */
.mock-tela { overflow: hidden; background: var(--mock-bg); display: flex; }
.mock-side {
  background: var(--mock-lateral); border-right: 1px solid var(--mock-linha);
  padding: 6px 5px; display: flex; flex-direction: column; gap: 4px;
  flex-shrink: 0;
}
.mock-side i { height: 4px; border-radius: var(--raio-full); background: var(--mock-barra); display: block; }
.mock-side i.on { background: var(--accent); opacity: .8; }
.mock-body { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.mock-banner {
  position: relative; overflow: hidden;
  display: grid; place-items: center;
  background: repeating-linear-gradient(45deg, var(--mock-lateral), var(--mock-lateral) 8px, var(--mock-faixa) 8px, var(--mock-faixa) 9px);
}
.mock-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* sem arte escolhida a <img> nasce sem src: fica escondida por regra, sem style= no template (o ui.js poe o src e ela aparece) */
.mock-banner img:not([src]) { display: none; }
.mock-banner .mock-dica {
  font-size: 10px; font-weight: 600; color: var(--texto-fraco);
  text-align: center; padding: 4px; z-index: 1; line-height: 1.3;
}
.mock-rows { padding: 6px; display: flex; gap: 5px; flex: 1; }
.mock-rows i { flex: 1; border-radius: var(--raio-2xs); background: var(--mock-card); border: 1px solid var(--mock-linha); display: block; }

/* monitor 16:9 + pezinho. Banner desktop = capa horizontal (3:2), 100% da largura */
.mock-desktop .mock-tela {
  width: min(340px, 100%); aspect-ratio: 16 / 9;   /* 100%: no celular o modal tem ~316 px de corpo e a maquete de 340 passava dele */
  border: 6px solid var(--mock-moldura); border-radius: var(--raio-sm);
}
.mock-desktop .mock-side { width: 44px; }
.mock-desktop .mock-banner { width: 100%; aspect-ratio: 16 / 6; }
.mock-desktop::after {
  content: ""; display: block;
  width: 90px; height: 10px; margin: 4px auto 0;
  background: var(--mock-moldura); border-radius: 0 0 var(--raio-sm) var(--raio-sm);
}
/* celular: banner = capa vertical (2:3), 100% da largura do celular */
.mock-phone .mock-tela {
  width: 128px; aspect-ratio: 9 / 19;
  border: 5px solid var(--mock-moldura); border-radius: var(--raio-lg);
  position: relative;
}
.mock-phone .mock-tela::before {
  content: ""; position: absolute; top: 4px; left: 50%;
  transform: translateX(-50%);
  width: 40px; height: 5px; background: var(--mock-moldura); border-radius: var(--raio-2xs);
  z-index: 2;
}
.mock-phone .mock-body { width: 100%; padding-top: 10px; }
.mock-phone .mock-banner { width: 100%; aspect-ratio: 2 / 3; }
.mock-phone .mock-rows { flex-direction: column; }
.mock-phone .mock-rows i { height: 20px; flex: none; }

/* Toggle "habilitar botao" e area do CTA */
.cta-toggle {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: var(--fundo); border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
}
.cta-toggle strong { font-size: 14px; }
.cta-toggle small { display: block; font-size: 12px; color: var(--texto-suave); }

/* Preview visual da posicao do CTA no banner (ao lado do grid 3x3) */
.cta-config { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; }
.cta-config .pos-grid { grid-template-columns: repeat(3, 40px); grid-auto-rows: 30px; gap: 6px; }
.cta-preview {
  position: relative;
  aspect-ratio: 16 / 6;
  background: linear-gradient(120deg, var(--mock-cta), var(--mock-card) 70%);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  overflow: hidden;
  min-height: 90px;
}
.cta-preview .cp-marca {
  position: absolute;
  padding: 4px 12px;
  background: var(--cor-primaria); color: var(--texto-sobre-accent);
  font-size: 11px; font-weight: 700; border-radius: var(--raio-full);
  box-shadow: var(--sombra-flutuante);
  white-space: nowrap;
  transition: var(--transicao);
}
.cta-preview .cp-marca.pos-esq-sup { top: 8%; left: 4%; }
.cta-preview .cp-marca.pos-cen-sup { top: 8%; left: 50%; transform: translateX(-50%); }
.cta-preview .cp-marca.pos-dir-sup { top: 8%; right: 4%; }
.cta-preview .cp-marca.pos-esq-cen { top: 50%; left: 4%; transform: translateY(-50%); }
.cta-preview .cp-marca.pos-cen-cen { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.cta-preview .cp-marca.pos-dir-cen { top: 50%; right: 4%; transform: translateY(-50%); }
.cta-preview .cp-marca.pos-esq-inf { bottom: 8%; left: 4%; }
.cta-preview .cp-marca.pos-cen-inf { bottom: 8%; left: 50%; transform: translateX(-50%); }
.cta-preview .cp-marca.pos-dir-inf { bottom: 8%; right: 4%; }

/* Drag-and-drop das secoes da vitrine */
.secao-arrastavel { cursor: grab; }
.secao-arrastavel.arrastando { opacity: .45; cursor: grabbing; }
.drag-handle { color: var(--texto-fraco); cursor: grab; font-size: 18px; }
.drag-handle:hover { color: var(--cor-primaria); }

/* Seletor de posicao 3x3 (admin): clica no quadradinho */
.pos-grid {
  display: grid; grid-template-columns: repeat(3, 30px); grid-auto-rows: 22px;
  gap: 4px; padding: 6px;
  border: 1px solid var(--borda); border-radius: var(--raio-sm);
  background: var(--fundo); width: max-content;
}
.pos-cel input { display: none; }
.pos-cel span {
  display: block; width: 100%; height: 100%;
  border: 1px solid var(--borda); border-radius: var(--raio-2xs);
  background: var(--branco); cursor: pointer;
  transition: var(--transicao);
}
.pos-cel span:hover { border-color: var(--cor-primaria); }
.pos-cel input:checked + span { background: var(--cor-primaria); border-color: var(--cor-primaria); }

/* ---------- PLAYER ---------- */
.player-topo {
  display: flex; align-items: center; gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.player-topo .voltar {
  width: 38px; height: 38px; border-radius: var(--raio-full);
  display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text-dim); transition: var(--transicao);
}
.player-topo .voltar:hover { color: var(--text); border-color: var(--text-fraco); }
.player-topo .curso-titulo { font-weight: 700; font-size: 18px; letter-spacing: -.02em; flex: 1; }
.player-topo .pl-volta-trilha { flex: none; min-height: 40px; }   /* Fase 91: o Voltar para a trilha (aula aberta pela lista de uma etapa) */
.prog-geral { display: flex; align-items: center; gap: 10px; min-width: 220px; }
.prog-geral .pct { font-size: var(--fs-xs); font-weight: 600; color: var(--text-dim); }

.player-video {
  border-radius: var(--raio); overflow: hidden;
  background: var(--fundo-video); border: 1px solid var(--border);
  aspect-ratio: 16 / 9; position: relative;
}
.player-video iframe { width: 100%; height: 100%; border: 0; }
/* Fase 18 (dono, 07/10): a proxima aula automatica (static/js/aula_auto.js): o canto direito do player escurece e o cartao conta 5 s com a
   barra que esvazia; o resto do player segue clicavel por baixo (so o cartao pega o clique) */
.auto-proxima {
  position: absolute; inset: 0; z-index: 3; display: flex; align-items: flex-end; justify-content: flex-end; padding: 18px;
  background: var(--veu-proxima); pointer-events: none;
}
.auto-proxima[hidden] { display: none; }
.auto-proxima-card { pointer-events: auto; display: flex; flex-direction: column; gap: 8px; width: min(320px, 70%); color: var(--text); }
.auto-proxima-rot { font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--sobre-imagem-fraco); font-variant-numeric: tabular-nums; }
.auto-proxima-titulo { font-size: 16px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.auto-proxima-barra { display: block; height: 4px; border-radius: var(--raio-full); background: var(--trilho-sobre-imagem); overflow: hidden; }
.auto-proxima-barra > span { display: block; height: 100%; background: var(--accent); transform-origin: right center; animation: autoProximaBarra 5s linear forwards; }   /* esvazia ate o canto direito (dono, 07/10) */
@keyframes autoProximaBarra { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.auto-proxima-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 560px) {
  .auto-proxima { align-items: flex-end; justify-content: stretch; padding: 10px;
    background: var(--veu-proxima-celular); }
  .auto-proxima-card { width: 100%; gap: 6px; }
  .auto-proxima-titulo { font-size: 14px; }
}
/* o "Voce ainda esta assistindo?": a tela inteira escurece e desfoca (o video, que pausou, inclusive) */
.ainda-assistindo {
  position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 24px;
  background: var(--veu-ainda-assistindo); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.ainda-assistindo[hidden] { display: none; }
.ainda-caixa { display: flex; flex-direction: column; gap: 12px; width: min(360px, 100%); text-align: center; }
.ainda-titulo { margin: 0 0 8px; font-size: 24px; font-weight: 700; line-height: 1.25; color: var(--text); }
.ainda-caixa .btn { justify-content: center; width: 100%; min-height: 48px; font-size: 15px; }
html.ainda-aberto, html.ainda-aberto body { overflow: hidden; }
/* Fase 18 (dono, 07/10): a protecao contra copia da area de membros (static/js/protecao.js): no F12, no print, na gravacao e no botao direito
   a plataforma escurece e desfoca, com a frase em negrito no meio. Popover manual (a camada de cima, por cima de um modal aberto); sem
   suporte a popover, vale o z-index. Na impressao (fora da Ementa) a folha sai so com a frase */
.protecao-aviso {
  position: fixed; inset: 0; z-index: 10000; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  padding: 24px; background: var(--scrim-forte); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  -webkit-user-select: none; user-select: none;
}
.protecao-aviso.aberto { display: flex; }
.protecao-aviso[popover] { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border: 0; overflow: hidden; color: var(--sobre-imagem); }
.protecao-icone { font-size: 56px; color: var(--sobre-imagem-suave); }
.protecao-texto { margin: 0; max-width: 24ch; font-size: clamp(20px, 3.4vw, 30px); font-weight: 800; line-height: 1.3; text-align: center; color: var(--sobre-imagem); }
html.protecao-aberta, html.protecao-aberta body { overflow: hidden; }
.player-video:focus { outline: none; }   /* a moldura recebe o foco de volta do player (protecao.js), fora da ordem do Tab */
@media print {
  html.protegido:not(.pode-imprimir) body > *:not(.protecao-aviso) { display: none !important; }
  html.protegido:not(.pode-imprimir) .protecao-aviso { display: flex !important; position: static; height: auto; min-height: 60vh; background: none; backdrop-filter: none; }
  html.protegido:not(.pode-imprimir) .protecao-icone, html.protegido:not(.pode-imprimir) .protecao-texto { color: var(--impressao-texto); }
}
.player-texto {
  border-radius: var(--raio); border: 1px solid var(--border);
  background: var(--surface); padding: var(--sp-6);
  font-size: var(--fs-base); line-height: 1.7;
}

.aula-acoes { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-4); flex-wrap: wrap; }
.aula-titulo { font-size: var(--fs-xl); margin: var(--sp-4) 0 var(--sp-1); }
.aula-modulo-nome { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); }
.aula-descricao { color: var(--text-dim); font-size: var(--fs-sm); line-height: 1.7; margin-top: var(--sp-3); }

/* Painel lateral de modulos */
.painel-modulos {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--raio); overflow: hidden;
  max-height: calc(100vh - 140px); overflow-y: auto;
}
.painel-modulos .mod {
  border-bottom: 1px solid var(--border);
}
.painel-modulos .mod-cab {
  width: 100%; background: transparent; border: none; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; text-align: left; color: var(--text);
}
.painel-modulos .mod-cab:hover { background: var(--bg-elev); }
.painel-modulos .mod-nome { flex: 1; font-size: 13px; font-weight: 600; }
.painel-modulos .mod-pct { font-size: 11px; font-weight: 700; color: var(--accent); }
.painel-modulos .mod-chevron { font-size: 12px; color: var(--text-fraco); transition: transform .22s ease; }
.painel-modulos .mod.aberto .mod-chevron { transform: rotate(90deg); }
.painel-modulos .mod-corpo { display: none; }
.painel-modulos .mod.aberto .mod-corpo { display: block; }

.aula-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px 10px 20px;
  font-size: 13px; color: var(--text-dim);
  border-left: 3px solid transparent;
  transition: var(--transicao);
}
.aula-item:hover { background: var(--bg-elev); color: var(--text); }
.aula-item.atual { border-left-color: var(--accent); color: var(--text); background: var(--accent-soft); font-weight: 600; }
.aula-item .check { font-size: 16px; color: var(--text-fraco); flex-shrink: 0; }
.aula-item.feita .check { color: var(--success); }
.aula-item .nome { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Materiais da aula (bloco destacado, estilo Hotmart) */
.materiais-box, .anotacao-box {
  margin-top: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--raio);
  padding: var(--sp-4);
}
.materiais-box { border-left: 3px solid var(--accent); }
.materiais-titulo {
  font-size: 13px; font-weight: 700;
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px; color: var(--text);
}
.material-item {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; margin-bottom: 6px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--raio-sm);
  font-size: 13.5px; font-weight: 500; color: var(--text);
  transition: var(--transicao);
}
.material-item:hover { border-color: var(--accent); color: var(--accent); }
/* Fase 18 (dono, 07/10): o cartao do link da aula (a aba Links): o globo, a headline, a subheadline, o endereco e a seta de abrir fora */
.aula-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.link-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--raio-sm);
  color: var(--text); text-decoration: none; transition: var(--transicao);
}
.link-item:hover { border-color: var(--accent); }
.link-item:hover .link-abrir { color: var(--accent-texto); transform: translate(2px, -2px); }
.link-icone {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: var(--raio-icone); display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent-texto); font-size: 19px;
}
.link-textos { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.link-headline { font-size: 14px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.link-sub { font-size: 12.5px; line-height: 1.4; color: var(--text-dim); overflow-wrap: anywhere; }
.link-host { font-size: 11.5px; color: var(--text-fraco); overflow-wrap: anywhere; }
.link-abrir { flex: 0 0 auto; font-size: 16px; color: var(--text-dim); transition: var(--transicao); }
.anotacao-texto {
  width: 100%; box-sizing: border-box;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--raio-sm);
  color: var(--text);
  padding: 10px 12px; font-size: 14px; line-height: 1.6;
  outline: none; resize: vertical;
}
.anotacao-texto:focus { border-color: var(--accent); }

/* Avisos na vitrine */
.aviso-banner {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(90deg, var(--accent-soft), transparent 70%);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--raio);
  padding: 12px 16px;
  margin-bottom: var(--sp-3);
}
.aviso-banner i { color: var(--accent); font-size: 20px; flex-shrink: 0; }
.aviso-banner .av-titulo { font-weight: 700; font-size: 14px; }
.aviso-banner .av-corpo { font-size: 13px; color: var(--text-dim); }

/* Eventos na vitrine */
.eventos-faixa { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-6); }
.evento-chip {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--raio); padding: 12px 16px;
  transition: var(--transicao);
}
.evento-chip:hover { border-color: var(--accent); }
.evento-chip .ev-data {
  font-weight: 800; font-size: 15px;
  color: var(--accent); text-align: center; line-height: 1.15; letter-spacing: -.02em;
}
.evento-chip .ev-data small { display: block; font-size: 10px; color: var(--text-fraco); font-weight: 600; text-transform: uppercase; }
.evento-chip .ev-titulo { font-size: 13.5px; font-weight: 600; }
.evento-chip .ev-desc { font-size: 12px; color: var(--text-dim); }

.evento-chip .ev-capa {
  width: 72px; height: 44px; object-fit: cover;
  border-radius: var(--raio-sm); flex-shrink: 0;
}
.agenda-lista { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 720px; }
.agenda-card {
  display: flex; gap: var(--sp-4);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--raio); overflow: hidden;
}
.agenda-card .ag-capa { width: 220px; object-fit: cover; }
.agenda-card .ag-corpo { padding: var(--sp-4); display: flex; flex-direction: column; flex: 1; }
@media (max-width: 700px) {
  .agenda-card { flex-direction: column; }
  .agenda-card .ag-capa { width: 100%; max-height: 160px; }
}

/* Minha Area: quadrados de selecao do template */
.ma-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}
.ma-vazio {
  background: var(--surface); border-color: var(--border);
  align-items: center; text-align: center; padding: 40px 20px; max-width: 520px;
}
.ma-vazio .mv-titulo { font-size: 15px; font-weight: 600; margin: 8px 0 0; color: var(--text); }
.ma-vazio .mv-msg { font-size: 13px; color: var(--text-dim); margin: 0; }
/* curso com termo de uso pendente: os itens dele ficam escondidos, so o link do aceite (vitrine/_termo_pendente.html) */
.ma-bloqueado { margin-top: var(--sp-3); }
.ma-bloqueado-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: var(--sp-3); }
.caderno-nota .cn-data { font-size: 11px; color: var(--text-fraco); margin-top: 8px; }

/* Caderno (Minha Area) */
.caderno-nota {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--raio); padding: var(--sp-4);
  margin-bottom: var(--sp-3);
}
.caderno-nota .cn-aula { font-size: 13px; font-weight: 700; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.caderno-nota .cn-modulo { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); font-weight: 700; }
.caderno-nota .cn-conteudo { font-size: 13.5px; color: var(--text-dim); line-height: 1.65; white-space: pre-wrap; margin-top: 8px; }
/* dono, 09/10: o Meu Caderno em linhas, na proporcao 3:8 (Fibonacci): a capa do curso ou a data a esquerda e os cartoes pautados a direita */
.com-busca.cn-busca { flex: 0 1 420px; min-width: 0; margin-left: auto; }   /* dono, 09/10: colada a esquerda dos botoes da ordem */
.com-busca.cn-busca .input { height: 44px; border-radius: var(--raio-full); }
.cn-grupo.cd { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: var(--sp-5); align-items: start; margin-bottom: var(--sp-4); }
.cn-lado { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cn-capa.ml-capa { flex: 0 0 auto; width: 100%; margin-bottom: 6px; }
.cn-capa.ml-capa img, .ma-fav-curso .ml-capa img { object-position: top; }   /* dono, 09/10: a parte de cima da capa (o titulo da arte), nao o centro; tambem nas Aulas Salvas (10/10) */
.cn-curso { margin: 0; font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.cn-conta { font-size: 12.5px; color: var(--text-fraco); }
.cn-dia { align-items: flex-start; }
.cn-dia-num { font-size: 56px; font-weight: 800; line-height: 1; color: var(--text); }
.cn-dia-mes { font-size: 15px; font-weight: 600; color: var(--text-fraco); }
/* dono, 09/10: os cartoes empilhados em colunas, estilo Pinterest (o de baixo encosta no de cima, com respiro; sem vao) */
.cn-cartoes { column-width: 320px; column-gap: var(--sp-3); }
.cn-cartao.caderno-nota { margin: 0 0 var(--sp-3); position: relative; background: var(--bg-elev, var(--surface)); break-inside: avoid; display: block; }
/* o titulo da aula em ate 2 linhas, com reticencias (o title leva o nome inteiro) */
.cn-aula-titulo { flex: 1 1 160px; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cn-cartao .cn-conteudo.caderno-pautado { margin-top: 10px; font-size: 14px; color: var(--text); border-radius: var(--raio-sm); }
@media (max-width: 880px) {
  .cn-grupo.cd { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  .cn-lado { display: grid; grid-template-columns: 120px minmax(0, 1fr); column-gap: var(--sp-3); align-items: center; }
  .cn-lado .cn-capa.ml-capa { grid-row: span 2; margin: 0; }
  .cn-lado.cn-dia { display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2); }
  .cn-lado .cn-capa.ml-capa { flex: 0 0 120px; width: 120px; }
  .cn-dia { flex-direction: row; align-items: baseline; gap: var(--sp-2); }
  .cn-dia-num { font-size: 36px; }
  .cn-cartoes { column-width: auto; column-count: 1; }
}
@media (max-width: 720px) { .cn-busca .btn, .cn-busca .input { min-height: 44px; } .com-busca.cn-busca { order: 3; flex-basis: 100%; max-width: none; margin: 0; } }

/* Estrelas de avaliacao */
.estrelas { display: inline-flex; gap: 2px; }
.estrelas button { background: none; border: none; cursor: pointer; font-size: 18px; color: var(--text-fraco); padding: 2px; }
.estrelas button.on { color: var(--warning); }

/* ---------- Topbar admin (Padrao_Acao_Primaria_na_Topbar) ---------- */
.topbar {
  height: 58px;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  padding: 0 var(--sp-5);
  background: var(--branco);
  border-bottom: 1px solid var(--borda);
  position: sticky; top: 0; z-index: 30;
  margin: calc(-1 * var(--sp-5)) calc(-1 * var(--sp-5)) var(--sp-5);
}
.topbar .titulo-pagina {
  font-family: var(--font-titulo); font-weight: 700; font-size: 18px;
  letter-spacing: -.02em; color: var(--texto);
  flex: 1; min-width: 0;
}
.topbar .tb-acoes { display: flex; align-items: center; gap: var(--sp-2); }

/* ---------- Botao perigo e badges ---------- */
.btn-perigo {
  background: var(--danger-botao); border-color: transparent; color: var(--texto-sobre-danger); font-weight: 600;
}
.btn-perigo:hover { filter: brightness(1.1); border-color: transparent; }
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600;
  padding: 3px 10px; border-radius: var(--raio-full);
  background: var(--fundo); color: var(--texto-secundario);
}
.badge.on  { background: var(--verde-suave); color: var(--verde-escuro); }
.badge.off { background: var(--vermelho-suave); color: var(--vermelho-escuro); }

/* ---------- Tabela (Padrao_Tabela) ---------- */
.te-tab {
  width: 100%; border-collapse: collapse;
  background: var(--branco);
  border: 1px solid var(--borda); border-radius: var(--raio);
  overflow: hidden;
  box-shadow: var(--sombra-sm);
}
.te-tab thead th {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--texto-secundario);
  text-align: left; padding: 12px 14px;
  border-bottom: 1px solid var(--borda);
  background: var(--fundo);
  white-space: nowrap;
}
.te-tab thead th.ordenavel { cursor: pointer; user-select: none; }
.te-tab thead th.ordenavel:hover { color: var(--accent-texto); }
.te-tab thead th.asc::after  { content: " \25B2"; font-size: 9px; }
.te-tab thead th.desc::after { content: " \25BC"; font-size: 9px; }
.te-tab tbody td {
  font-size: 14px; padding: 10px 14px;
  border-bottom: 1px solid var(--borda);
  color: var(--texto);
  vertical-align: middle;
}
.te-tab tbody tr:last-child td { border-bottom: none; }
.te-tab tbody tr:hover td { background: var(--fundo); }
.te-tab .col-acoes { text-align: right; width: 1%; white-space: nowrap; }
.te-tab tbody td.te-expirada { color: var(--vermelho-escuro); font-weight: 600; }   /* a matricula que ja venceu (dono, 22/10) */

.celula-acoes { display: inline-flex; gap: 4px; align-items: center; justify-content: flex-end; }
.btn-icone {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--raio-sm);
  background: transparent; border: none; cursor: pointer;
  color: var(--texto-secundario);
  transition: background var(--transicao), color var(--transicao);
}
.btn-icone:hover { background: var(--fundo); color: var(--texto); }
.btn-icone.perigo:hover { color: var(--danger); }
.btn-icone.desabilitado { opacity: .30; cursor: not-allowed; }
.btn-icone.desabilitado:hover { background: transparent; color: var(--texto-secundario); }
.inline { display: inline; }

/* ---------- Barra de filtros / formulario (Padrao_Formulario, 40px) ---------- */
.ra-bar {
  display: flex; gap: 14px;
  align-items: flex-end; flex-wrap: wrap;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 14px 18px;
  margin-bottom: 14px;
}
.ra-bar .campo { display: flex; flex-direction: column; gap: 5px; }
.ra-bar label { font-size: 13px; font-weight: 600; color: var(--texto-secundario); }
.ra-bar .input,
.ra-bar .selectbusca .sb-display,
.ra-bar > .campo > .btn,
.ra-bar .campo .btn {
  height: 40px; box-sizing: border-box;
}
.ra-bar .input { min-width: 240px; }
.ra-bar .selectbusca { min-width: 170px; }

/* ---------- SelectBusca (Componente_SelectBusca) ---------- */
.selectbusca { position: relative; min-width: 200px; }
.selectbusca input[type=hidden] { display: none; }
.selectbusca .sb-display {
  padding: 0 12px; height: 40px;
  background: var(--fundo);
  border: 1px solid var(--borda); border-radius: var(--raio-sm);
  cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  font-size: 14px; color: var(--texto);
}
.selectbusca .sb-display i { color: var(--texto-fraco); font-size: 13px; }
.selectbusca .sb-panel {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 80;
  background: var(--branco); border: 1px solid var(--borda);
  border-radius: var(--raio-sm); margin-top: 4px; box-shadow: var(--sombra);
  max-height: 280px; overflow-y: auto; display: none;
}
.selectbusca.open .sb-panel { display: block; }
/* a lista que flutua (selectbusca.js: SelectBusca dentro de tabela ou da faixa de baixo): fixa na janela, por cima de tudo, sem empurrar linha */
.selectbusca .sb-panel.sb-flutua { position: fixed; right: auto; margin-top: 0; z-index: 400; }
.selectbusca .sb-search {
  width: 100%; padding: 10px 12px; box-sizing: border-box;
  background: var(--fundo); border: none;
  border-bottom: 1px solid var(--borda); color: var(--texto);
  font-size: 13px; outline: none;
}
.selectbusca .sb-opt { padding: 9px 12px; cursor: pointer; font-size: 13.5px; color: var(--texto); }
.selectbusca .sb-opt:hover { background: var(--cor-primaria-suave); color: var(--accent-texto); }
/* Dentro de modal de div (.modal-bg): painel expande inline (nao corta pelo overflow do modal). Segue em uso: os modais de avisos, eventos, produtos,
   modulos e aulas, termos e turmas (fases anteriores; os de usuarios ja viraram dialog na Fase 17) ainda sao .modal-bg com SelectBusca dentro; migrar cada um pra <dialog class="popup-centrado">
   e a revisao dessas telas, e ai esta regra sai. Os modais novos (Menu da Area, secao da Vitrine, canais) ja sao <dialog> e nao passam por aqui. */
.modal-corpo .selectbusca .sb-panel { position: static; margin-top: 4px; box-shadow: none; }

/* ---------- Toggle on/off (Padrao_Toggle_OnOff) ---------- */
.cv-sw { position: relative; width: 42px; height: 24px; flex: 0 0 auto; display: inline-block; }
/* o input real fica no DOM, na ordem do Tab e na arvore de acessibilidade (Fase 17, f17_corr): visualmente escondido e por cima da pista, sem pegar o mouse (o clique segue no label).
   Nunca display none: isso o tira do teclado e do leitor de tela. A caixinha nativa nao aparece (opacity 0); Espaco liga e desliga e o anel de foco acende na pista (abaixo). */
.cv-sw input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
/* o wrapper que ja fala como switch (role=switch: o desabilitado que o JS de equipe/canais monta e o do de/para) nao expoe o checkbox de dentro: anunciaria o mesmo controle duas vezes */
.cv-sw[role="switch"] input { display: none; }
.cv-sw label {
  position: absolute; inset: 0;
  background: var(--borda); border-radius: var(--raio-full);
  cursor: pointer; transition: .15s;
}
.cv-sw label::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; background: var(--bolinha-switch); border-radius: 50%;
  transition: .15s; box-shadow: var(--sombra-bolinha);
}
.cv-sw input:checked + label { background: var(--verde); }
.cv-sw input:checked + label::after { transform: translateX(18px); }
.cv-sw input:focus-visible + label { outline: 2px solid var(--cor-primaria); outline-offset: 2px; }
/* sem EDITAR: o slot fica (alinhamento da coluna), esmaecido e sem clique, com o motivo no title do wrapper */
.cv-sw.desabilitado { opacity: .45; cursor: not-allowed; }
.cv-sw.desabilitado label { cursor: not-allowed; }

/* ---------- Modal (Padrao_Modal: vw/vh Fibonacci) ---------- */
.modal-bg {
  position: fixed; inset: 0;
  background: var(--overlay);
  z-index: 200; display: none;
  align-items: center; justify-content: center;
  padding: 20px;
  backdrop-filter: blur(2px);
}
.modal-bg.visivel { display: flex; }
.modal-caixa {
  background: var(--branco);
  border-radius: var(--raio-lg);
  width: 100%;
  overflow: hidden;                 /* preserva os 4 cantos arredondados */
  display: flex; flex-direction: column;
  box-shadow: var(--sombra-lg);
  animation: modalSobe .2s ease;
}
/* scroll fica SO no miolo; cabecalho e rodape SEMPRE visiveis.
   min-height: 0 e obrigatorio: sem ele o flex nao deixa o miolo encolher
   e o rodape e empurrado pra fora da caixa (some). */
.modal-corpo { overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.modal-cab, .modal-rodape { flex-shrink: 0; }
/* <form> que embrulha corpo e rodape dentro da caixa (modais de cadastro): o form vira a coluna flex e o miolo (.modal-corpo)
   e quem rola; sem isto o form e um bloco mais alto que a caixa e o overflow:hidden corta o rodape (Padrao_Modal: cabecalho
   e rodape sempre visiveis). */
.modal-caixa > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.modal-caixa.modal-sm { width: 34vw; max-height: 42vh; }
.modal-caixa.modal-md { width: 55vw; max-height: 70vh; }
.modal-caixa.modal-lg { width: 89vw; max-height: 90vh; }
@media (max-width: 1280px) { .modal-caixa.modal-md { width: 68vw; } }
@media (max-width: 880px) {
  .modal-caixa.modal-sm, .modal-caixa.modal-md, .modal-caixa.modal-lg { width: 96vw; max-height: 92vh; }
}
/* modal-alto DEPOIS dos tamanhos: em CSS, o ultimo declarado vence o empate.
   (declarado antes, o modal-md anulava a variante e o modal ficava pequeno) */
.modal-caixa.modal-alto { width: 68vw; max-height: 92vh; }
@media (max-width: 1280px) { .modal-caixa.modal-alto { width: 82vw; } }
@media (max-width: 880px)  { .modal-caixa.modal-alto { width: 96vw; max-height: 92vh; } }
/* variante 80/88: forms bem largos (secao da vitrine com CTA por dispositivo) */
.modal-caixa.modal-80 { width: 80vw; max-height: 88vh; }
@media (max-width: 880px) { .modal-caixa.modal-80 { width: 96vw; max-height: 92vh; } }

/* CTA por dispositivo: colunas desktop/celular, linhas Texto|Tamanho|Estilo|Cor */
.cta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 1100px) { .cta-grid { grid-template-columns: 1fr; } }
.cta-col {
  border: 1px solid var(--borda); border-radius: var(--raio-sm);
  padding: 12px; background: var(--fundo);
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
}
.cta-linha { display: flex; gap: 8px; align-items: center; }
.cta-linha .cta-texto { flex: 1; min-width: 0; }
.cta-linha .cta-tam { width: 58px; flex: none; }
.cta-linha .selectbusca { width: 132px; flex: none; min-width: 0; }
.cta-linha .selectbusca .sb-display { height: 40px; }
/* cor: so o quadradinho; clicar abre a roda de cor nativa */
.cta-cor {
  width: 40px; height: 40px; flex: none;
  padding: 2px; border: 1px solid var(--borda);
  border-radius: var(--raio-sm); background: var(--branco); cursor: pointer;
}
.cta-cor::-webkit-color-swatch-wrapper { padding: 0; }
.cta-cor::-webkit-color-swatch { border: none; border-radius: var(--raio-2xs); }
@keyframes modalSobe {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.modal-cab {
  padding: 18px 22px;
  border-bottom: 1px solid var(--borda);
  display: flex; align-items: center; justify-content: space-between;
}
.modal-cab h3 { font-size: 17px; margin: 0; }
.modal-x {
  background: none; border: none; cursor: pointer;
  font-size: 22px; color: var(--texto-fraco);
  display: grid; place-items: center;
}
.modal-x:hover { color: var(--texto); }
.modal-corpo { padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.modal-corpo .linha2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 880px) { .modal-corpo .linha2 { grid-template-columns: 1fr; } }
.modal-rodape {
  padding: 16px 22px;
  border-top: 1px solid var(--borda);
  display: flex; gap: 10px; justify-content: flex-end;
}
.modal-caixa.modal-confirm { width: 34vw; max-height: 42vh; text-align: center; }
@media (max-width: 880px) { .modal-caixa.modal-confirm { width: 96vw; max-height: 92vh; } }
/* miolo do confirm rola sozinho se a janela for baixa: o rodape (os botoes) fica sempre a vista */
.confirm-corpo { padding: 32px 28px 12px; overflow-y: auto; min-height: 0; flex: 1 1 auto; }
.confirm-corpo h3 { font-size: 18px; margin-bottom: 8px; }
.confirm-corpo p { color: var(--texto-suave); font-size: 14px; line-height: 1.5; margin: 0; }
.confirm-icone {
  width: 68px; height: 68px; border-radius: 50%;
  display: grid; place-items: center; margin: 0 auto 18px;
}
.confirm-icone i { font-size: 36px; }
.confirm-icone.confirm-info { background: var(--accent-soft); color: var(--accent-texto); }
.confirm-icone.confirm-perigo { background: var(--vermelho-suave); color: var(--danger); }
.modal-confirm .modal-rodape { justify-content: center; }

/* ---------- Loading (Padrao_Loading_Estado) ---------- */
.loading-inline {
  padding: 80px 20px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  background: var(--branco);
}
.spinner-circle {
  width: 44px; height: 44px;
  border: 4px solid var(--borda);
  border-top-color: var(--cor-primaria);
  border-radius: 50%;
  animation: spinner-rotate .8s linear infinite;
}
@keyframes spinner-rotate { to { transform: rotate(360deg); } }
.loading-text { font-size: 14px; font-weight: 600; color: var(--texto); }

/* ---------- Matriz de permissoes ---------- */
.matriz-grupo { margin-bottom: var(--sp-5); }
.matriz-grupo .mg-cab {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-2);
}
.matriz-grupo .mg-nome {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--texto-secundario);
}
.matriz-grupo .mg-auto { display: flex; gap: 16px; align-items: center; font-size: 12px; color: var(--texto-suave); }
.matriz-grupo .mg-auto .campo-marcar { gap: 6px; font-size: 12px; color: var(--texto-suave); }   /* o Auto-liberar VER e EDITAR: a caixa da casa com a tipografia que a linha ja tinha */

/* ---------- Upload drag-and-drop (Padrao_Upload_Arquivo) ---------- */
.im-drop {
  display: block;
  border: 2px dashed var(--borda);
  border-radius: var(--raio-sm);
  padding: 32px;
  text-align: center;
  color: var(--texto-secundario);
  cursor: pointer;
  transition: .15s;
  user-select: none;
}
.im-drop:hover, .im-drop.over {
  border-color: var(--cor-primaria);
  background: var(--cor-primaria-suave);
  color: var(--accent-texto);
  border-style: solid;
}
.im-drop.loaded {
  border-style: solid;
  border-color: var(--verde);
  background: var(--verde-suave);
  color: var(--verde-escuro);
}
.im-drop i { font-size: 36px; display: block; margin-bottom: 6px; }
.im-drop small { color: var(--verde-escuro); font-weight: 600; margin-top: 6px; display: block; }
.im-inp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
/* label de form comum (Padrao_Formulario, CV-114): 13px, peso 600, sem caixa alta e sem letter-spacing */
.im-lbl {
  font-size: 13px; font-weight: 600; color: var(--texto-secundario);
  display: block; margin-bottom: 8px;
}
/* Importar Aulas (CSV do Panda): o que era style= no template (limpeza de 04/10); as medidas sao as de antes, conferidas no Chromium em 360 e 1440 px */
.cd.iau-cartao { max-width: 760px; margin-bottom: 16px; }
.iau-form { display: flex; flex-direction: column; gap: 14px; }
.iau-produto { max-width: 420px; }
.iau-linha2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
textarea.input.iau-remover { height: auto; padding: 8px 12px; }
/* a linha de acao (Acao_Primaria_a_Direita, Padrao_Upload_Arquivo 6 e 6-B, o mesmo padrao da aba Planilha, .ial-acoes-planilha): a nota vem ANTES do botao no HTML e leva o
   margin-right:auto, e e isso que encosta o botao na direita; o botao nao encolhe e o rotulo fica numa linha so */
.iau-acoes { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: flex-end; }
.iau-nota { flex: 1 1 280px; margin-right: auto; font-size: 12.5px; color: var(--texto-suave); }
.iau-acoes .btn { flex: 0 0 auto; white-space: nowrap; }
/* ate 720 px (o ponto de quebra do projeto): o par de campos vira UMA coluna (em duas ele passava da tela a 360 px) e o botao ocupa a linha, como na aba Planilha */
@media (max-width: 720px) {
  .iau-linha2 { grid-template-columns: minmax(0, 1fr); }
  .iau-acoes .btn { flex: 1 1 100%; justify-content: center; }
}

/* ---------- Codigo/token copiavel ---------- */
.code-box {
  font-family: "Consolas", monospace; font-size: 12.5px;
  background: var(--fundo); border: 1px solid var(--borda);
  border-radius: var(--raio-sm); padding: 10px 12px;
  word-break: break-all; color: var(--texto);
}
details.payload summary { cursor: pointer; font-size: 12px; color: var(--accent-texto); }
details.payload pre {
  max-width: 480px; max-height: 240px; overflow: auto;
  font-size: 11px; background: var(--fundo);
  border: 1px solid var(--borda); border-radius: var(--raio-sm);
  padding: 8px; white-space: pre-wrap; word-break: break-all;
}

/* ---------- Tela de mapeamento de webhook (proporcao aurea 1.618:1) ---------- */
.mapear-grid {
  display: grid;
  grid-template-columns: 1.618fr 1fr;
  gap: 16px;
  align-items: start;
}
.mapear-grid > * { min-width: 0; }   /* impede a tabela de estourar a coluna */
@media (max-width: 1100px) { .mapear-grid { grid-template-columns: 1fr; } }

.payload-tab-wrap {
  overflow: auto;
  max-height: 72vh;
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
}
.payload-tab-wrap .te-tab { border: none; box-shadow: none; border-radius: 0; }
.payload-tab-wrap thead th { position: sticky; top: 0; z-index: 1; }
.payload-campo {
  font-family: Consolas, monospace;
  font-size: 11.5px;
  word-break: break-all;
}
.payload-valor {
  font-size: 12px;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Matriz de auditoria ---------- */
.tabela-scroll { overflow-x: auto; }
.matriz-check { color: var(--verde); font-size: 16px; }
.matriz-vazio { color: var(--borda); }

/* ---------- Login ---------- */
.login-wrap {
  min-height: 100vh; display: grid; place-items: center;
  background:
    radial-gradient(1200px 500px at 80% -10%, var(--accent-brilho), transparent 60%),
    var(--bg);
  padding: var(--sp-4);
}
.login-card {
  width: 100%; max-width: 400px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--raio-lg); padding: var(--sp-6);
  box-shadow: var(--sombra-lg);
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.login-card .marca {
  font-family: var(--font-titulo); font-weight: 800; font-size: 17px;   /* marca da tela de login: 800 e 17px (Sistema_de_Estilos) */
  letter-spacing: -.02em; text-align: center;
}
.login-card .marca em { color: var(--accent); font-style: normal; }
.login-card .sub { text-align: center; color: var(--text-dim); font-size: var(--fs-sm); margin-top: -10px; }
.login-card .btn-primario { height: 44px; justify-content: center; font-size: 14px; }
.login-sep { display: flex; align-items: center; gap: 10px; color: var(--text-fraco); font-size: var(--fs-xs); }
.login-sep::before, .login-sep::after { content: ""; flex: 1; height: 1px; background: var(--border); }
/* Botao do Google (diretrizes de marca, botao claro): a marca G em quatro cores vem do SVG embutido no template, preenchida pelas classes
   .g-* (as cores moram em tokens.css); o rotulo e "Continuar com o Google". Alvo de toque de 44 px. */
.btn-google {
  height: 44px; justify-content: center; gap: 10px;
  background: var(--google-fundo); color: var(--google-texto); border-color: var(--google-borda); font-weight: 500; font-size: 14px;
}
.btn-google:hover { background: var(--google-fundo-hover); border-color: var(--google-borda); }
.btn-google:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.google-g { width: 20px; height: 20px; flex: none; }
.google-g .g-azul { fill: var(--google-azul); }
.google-g .g-verde { fill: var(--google-verde); }
.google-g .g-amarelo { fill: var(--google-amarelo); }
.google-g .g-vermelho { fill: var(--google-vermelho); }
.login-dica-google { margin: -6px 0 0; text-align: center; font-size: 13px; line-height: 1.45; color: var(--text-dim); }
/* Fase 29 (D29): Receber um link de acesso no e-mail, logo abaixo do Entrar (a largura e os 44 px vem de .login-card .btn) */

/* ---------- Telas de acesso (login, primeiro acesso, esqueci, definir senha) ---------- */
.login-coluna { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: var(--sp-4); }
.login-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.login-card .btn { width: 100%; justify-content: center; min-height: 44px; }
.login-titulo {
  font-family: var(--font-titulo); font-weight: 700; font-size: 20px;
  text-align: center; margin: 0; color: var(--text);
}
.login-texto { margin: 0; text-align: center; color: var(--text-dim); font-size: 14px; line-height: 1.55; }
.login-texto-menor { font-size: 13px; }
.login-icone { display: grid; place-items: center; font-size: 40px; color: var(--accent); }
.login-link-esqueci { align-self: flex-end; margin-top: -6px; font-size: 13px; color: var(--text-dim); }
.login-link-esqueci:hover, .login-voltar:hover { color: var(--accent); }
.login-voltar {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 13px; color: var(--text-dim); text-align: center;
}
.login-destaque {
  display: flex; flex-direction: column; gap: 8px; text-align: center;
  padding: 14px 16px; border-radius: var(--raio);
  border: 1px solid var(--accent-borda); background: var(--accent-soft);
}
.login-destaque-titulo { margin: 0; font-size: 15px; font-weight: 700; color: var(--text); }
.login-destaque-texto { margin: 0; font-size: 13px; color: var(--text-dim); line-height: 1.5; }
/* Fase 51 (dono, 17/10): o Google recomendado no Primeiro acesso e no Esqueci, e o aviso do remetente no Confira seu e-mail (card de
   alerta tipo aviso, Padrao_Box_Card: a borda e o fundo ambar, como o .oauth-alerta) */
.acesso-google { display: flex; flex-direction: column; gap: 10px; }
.acesso-google-tag {
  align-self: center; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
  font-size: var(--fs-xs); font-weight: 700; color: var(--accent-texto); background: var(--accent-soft); border: 1px solid var(--accent-borda);
}
.acesso-google-texto { margin: 0; text-align: center; color: var(--text); font-size: 14px; line-height: 1.5; }
.acesso-aviso { border-color: var(--ambar); background: var(--ambar-suave); }
.acesso-aviso .login-destaque-titulo i { color: var(--ambar-escuro); }
.acesso-aviso-remetente { display: block; overflow-wrap: anywhere; }
.btn-secundario { background: transparent; border-color: var(--accent); color: var(--accent-texto); font-weight: 600; }
.btn-secundario:hover { background: var(--accent-soft); border-color: var(--accent); }
.dica-campo { margin: 0; font-size: 12px; line-height: 1.45; color: var(--text-dim); }
.login-rodape {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px;
  font-size: 12px; line-height: 1.5; color: var(--text-dim); text-align: center;
}
.login-rodape a { color: var(--text-dim); text-decoration: underline; }
.login-rodape a:hover { color: var(--accent); }
/* honeypot (Padrao_Honeypot): fora da tela por classe, nunca display:none (o robo ingenuo pula) */
.isca { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 720px) {
  .login-card { padding: var(--sp-5); }
  .login-card .input { font-size: 16px; }   /* abaixo de 16px o iOS da zoom no foco */
  .login-card .btn { min-height: 44px; }
  /* alvo de toque de 44 px tambem no campo de e-mail e senha (Responsividade_Sempre); acima de 720 px o campo segue com os 40 px do componente */
  .login-card .input, .conta-form .input { height: 44px; min-height: 44px; }
}

/* ---------- Fase 44 (dono, 16/10): a pagina Sem acesso (/sem-acesso/<porta>, templates/auth/sem_acesso.html), no layout das telas de
   acesso. Um cartao por porta, todos da mesma altura (grid com stretch): o liberado e link e acende a borda; o fechado fica cinza, com o
   cadeado e o cursor de proibido. Antes do bloco da Marca de IA (usa a cor da marca). ---------- */
.login-coluna.sa-coluna { max-width: 560px; }
.login-card.sa-card { max-width: none; }
/* o VIDRO dos popups (o mesmo do modal do Especialistas, tokens --mk-vidro-*): o reflexo claro em cima, o cinza transparente, o desfoque, a
   luz fina na borda e o brilho que segue o mouse (tema_brilho.js poe --mx, --my e --brilho); vale na pagina Sem acesso e na de erro e, desde
   23/10 (dono), no cartao de toda tela de acesso escura (.com-fundo, templates/auth/_base_acesso.html) */
.login-card.sa-vidro, .com-fundo .login-card {
  position: relative; border: 1px solid var(--mk-vidro-borda); background: var(--mk-vidro-reflexo), var(--mk-vidro-caixa);
  -webkit-backdrop-filter: blur(36px) saturate(200%); backdrop-filter: blur(36px) saturate(200%); box-shadow: var(--mk-vidro-sombra);
  animation: mkModalEntra .22s cubic-bezier(.16, 1, .3, 1);
}
.login-card.sa-vidro::before, .com-fundo .login-card::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--mk-brilho);
  -webkit-mask: var(--mascara-cheia) content-box, var(--mascara-cheia); -webkit-mask-composite: xor;
  mask: var(--mascara-cheia) content-box, var(--mascara-cheia); mask-composite: exclude;
  opacity: var(--brilho, 0); transition: opacity .25s cubic-bezier(.16, 1, .3, 1);
}
@media (prefers-reduced-motion: reduce) {
  .login-card.sa-vidro, .com-fundo .login-card { animation: none; }
  .login-card.sa-vidro::before, .com-fundo .login-card::before { transition: none; }
}
/* os cartoes das portas no mesmo vidro, mais leve */
.sa-vidro .sa-porta { background: var(--mk-vidro-reflexo); border-color: var(--mk-vidro-borda); }
.sa-vidro .sa-fechada { background: transparent; }
/* o FUNDO das telas de acesso escuras (dono, 23/10: "pode usar a tela da dataevo como fundo fake"): o print da vitrine da DataEvo, ja
   desfocado no arquivo (scripts/acesso/gerar_fundo.py: a pagina e publica e o arquivo nao deixa ler o texto pequeno), esmaecido pelo veu
   mais escuro nas bordas; o cartao de vidro por cima o desfoca de novo. A pagina Sem acesso troca pelo desenho da porta pedida (abaixo) */
.acesso-fundo {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: var(--acesso-veu), url("../img/acesso/fundo_vitrine_v1.webp") 30% center / cover no-repeat, var(--bg);
}
/* no computador o print corta pela direita: o menu da esquerda, o destaque e as capas ficam; no celular, o meio (as capas) */
@media (min-width: 881px) { .acesso-fundo { background-position: center, left center; } }
.login-wrap.com-fundo > :not(.sa-fundo):not(.acesso-fundo) { position: relative; z-index: 1; }
/* a SILHUETA da pagina pedida no fundo (templates/auth/_sem_acesso_fundo.html, dono 16/10): so formas, nenhum dado; esmaecida e desfocada
   atras do cartao de vidro (o backdrop-filter do .sa-vidro a desfoca de novo, o efeito do popup). A prateleira nunca passa da largura da
   janela: as capas que nao cabem descem pra linha de baixo e somem */
.sa-fundo {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  display: flex; flex-direction: column; gap: var(--sp-5); padding: var(--sp-5);
  filter: blur(3px); opacity: .55;
}
.sa-fundo::after { content: ""; position: absolute; inset: 0; background: var(--mk-vidro-fundo); }
.sa-fundo span { display: block; }
.sa-f-topo { display: flex; align-items: center; gap: var(--sp-3); height: 56px; padding: 0 var(--sp-4); border-radius: var(--raio); background: var(--surface); }
.sa-f-marca { width: 120px; height: 18px; border-radius: var(--raio-full); background: var(--accent-soft); margin-right: auto; }
.sa-f-pilula { width: 110px; height: 30px; border-radius: var(--raio-full); background: var(--border); }
.sa-f-corpo { flex: 1; display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.sa-f-com-lado { flex: 1; display: flex; gap: var(--sp-5); min-height: 0; }
.sa-f-lado { width: 220px; flex: none; display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--raio-lg); background: var(--surface); }
.sa-f-item { height: 14px; border-radius: var(--raio-full); background: var(--border); }
.sa-f-item:first-child { height: 26px; width: 70%; background: var(--accent-soft); margin-bottom: var(--sp-3); }
.sa-f-faixa { display: flex; align-items: center; gap: var(--sp-4); height: 110px; padding: 0 var(--sp-5); border-radius: var(--raio-lg); background: var(--surface); }
.sa-f-anel { width: 70px; height: 70px; border-radius: 50%; border: 8px solid var(--accent-soft); border-top-color: var(--accent); }
.sa-f-texto { flex: 1; height: 16px; max-width: 360px; border-radius: var(--raio-full); background: var(--border); }
.sa-f-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.sa-f-kpi { height: 96px; border-radius: var(--raio-lg); background: var(--surface); border-top: 3px solid var(--accent-soft); }
.sa-f-par { display: grid; grid-template-columns: 2fr 1fr; gap: var(--sp-4); flex: 1; min-height: 0; }
.sa-f-grafico { display: flex; align-items: flex-end; gap: var(--sp-2); padding: var(--sp-5); border-radius: var(--raio-lg); background: var(--surface); }
.sa-f-barra { flex: 1; border-radius: var(--raio-xs) var(--raio-xs) 0 0; background: var(--accent-soft); height: 40%; }
.sa-f-barra:nth-child(3n) { height: 70%; } .sa-f-barra:nth-child(4n+1) { height: 55%; } .sa-f-barra:nth-child(5n) { height: 85%; }
.sa-f-barra:last-child { height: 92%; background: var(--accent); }
.sa-f-lista { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--raio-lg); background: var(--surface); }
.sa-f-linha { height: 16px; border-radius: var(--raio-full); background: var(--border); }
.sa-f-linha:nth-child(2n) { width: 80%; }
.sa-f-tabela { flex: 1; }
.sa-f-tabela .sa-f-linha { height: 22px; width: 100%; }
.sa-f-titulo { width: 240px; max-width: 60%; height: 20px; border-radius: var(--raio-full); background: var(--border); }
.sa-f-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.sa-f-card { height: 170px; border-radius: var(--raio-lg); background: var(--surface); border-left: 3px solid var(--accent-soft); }
.sa-f-billboard { height: 38vh; min-height: 180px; border-radius: var(--raio-lg); background: var(--mk-vidro-reflexo), var(--surface); border-bottom: 3px solid var(--accent-soft); }
.sa-f-capas { display: flex; flex-wrap: wrap; gap: var(--sp-3); height: 225px; overflow: hidden; flex: none; }
.sa-f-capa { flex: none; width: 150px; aspect-ratio: 2 / 3; border-radius: var(--raio); background: var(--surface); }
.sa-f-capa:nth-child(3n+2) { background: var(--accent-soft); }
@media (max-width: 720px) {
  .sa-fundo { padding: var(--sp-3); gap: var(--sp-3); }
  .sa-f-lado { display: none; }
  .sa-f-kpis { grid-template-columns: repeat(2, 1fr); }
  .sa-f-par { grid-template-columns: 1fr; }
  .sa-f-cards { grid-template-columns: 1fr; }
  .sa-f-pilula:nth-child(n+3) { display: none; }
  .sa-f-capas { height: 165px; }
  .sa-f-capa { width: 110px; }
}

/* a faixa do exemplo (so a equipe, ?exemplo=): qual perfil de teste e os outros pra trocar */
.sa-exemplo {
  display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-radius: var(--raio);
  border: 1px dashed var(--accent-borda); background: var(--accent-soft); font-size: 13px;
}
.sa-exemplo-tit { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--text); }
.sa-exemplo-links { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); }
.sa-exemplo-links a { color: var(--text-dim); text-decoration: underline; min-height: 32px; display: inline-flex; align-items: center; }
.sa-exemplo-links a[aria-current] { color: var(--accent-texto); font-weight: 700; text-decoration: none; }
@media (max-width: 720px) { .sa-exemplo-links a { min-height: 44px; } }
.sa-portas {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3); align-items: stretch;
}
.sa-item { display: flex; }
.sa-porta {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--sp-2);
  min-height: 112px; padding: var(--sp-4) var(--sp-3); text-align: center;
  border: 1px solid var(--border); border-radius: var(--raio); background: var(--surface);
  color: var(--text); text-decoration: none;
}
.sa-icone { font-size: 30px; line-height: 1; }
.sa-rotulo { font-size: 14px; font-weight: 600; line-height: 1.3; }
.sa-situacao { display: inline-flex; align-items: center; gap: 4px; margin-top: auto; font-size: 12px; color: var(--text-dim); }
.sa-aberta .sa-icone { color: var(--accent); }
.sa-aberta .sa-situacao { color: var(--accent-texto); font-weight: 600; }
.sa-aberta:hover { border-color: var(--accent-borda); color: var(--text); }
.sa-aberta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* o fechado fica apagado pela cor (o --text-fraco passa de 4,5:1 sobre a superficie), nunca pela opacidade, que derrubava o contraste */
.sa-fechada { cursor: not-allowed; background: transparent; border-style: dashed; }
.sa-fechada .sa-icone, .sa-fechada .sa-rotulo, .sa-fechada .sa-situacao { color: var(--text-fraco); }
.sa-fechada .sa-rotulo { font-weight: 500; }
.sa-acoes { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); }
.sa-acoes .login-voltar { min-height: 44px; }
/* o Falar com o suporte e o botao verde do WhatsApp com a letra e o logo brancos (dono, 16/10): do tamanho do texto, nunca a largura toda;
   o logo maior que a letra */
.login-card .sa-acoes .btn { width: auto; padding: 0 var(--sp-5); }
.btn.btn-zap { background: var(--sp-zap); border-color: var(--sp-zap); color: var(--sp-zap-texto); font-weight: 700; font-size: 15px; gap: var(--sp-2); }
.btn.btn-zap .ph { font-size: 22px; }
.btn.btn-zap:hover { background: var(--sp-zap-hover); border-color: var(--sp-zap-hover); color: var(--sp-zap-texto); }
.btn.btn-zap:focus-visible { outline: 2px solid var(--sp-zap); outline-offset: 2px; }
/* balão do suporte no login (dono, 16/10): o círculo verde do WhatsApp com o logo branco, fixo no canto de baixo à direita das telas de quem
   não consegue entrar (templates/auth/_balao_zap.html); acima do cartão e abaixo do aviso de espera (.loading-overlay, 9999), sem animação.
   Até 720 px, e SÓ quando o balão está na tela (sem número ele não existe, e a tela fica como as outras de acesso): a coluna, de quem o balão
   é filho direto, ganha folga embaixo do tamanho dele (rolada até o fim, nada do cartão nem do rodapé fica debaixo dele) e o html ganha o
   scroll-padding-bottom da faixa dele com 8 px de sobra (o controle que recebe o foco pelo Tab para acima do balão, com o anel de foco) */
.zap-balao {
  position: fixed; z-index: 100;
  right: calc(24px + env(safe-area-inset-right)); bottom: calc(24px + env(safe-area-inset-bottom));
  width: 56px; height: 56px; border-radius: var(--raio-full);
  display: grid; place-items: center;
  background: var(--sp-zap); color: var(--sp-zap-texto); box-shadow: var(--sombra-flutuante); text-decoration: none;
}
.zap-balao .ph { font-size: 30px; line-height: 1; }
.zap-balao:hover { background: var(--sp-zap-hover); color: var(--sp-zap-texto); }
.zap-balao:focus-visible { outline: 2px solid var(--sp-zap); outline-offset: 3px; }
@media (max-width: 720px) {
  .zap-balao { right: calc(16px + env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); width: 52px; height: 52px; }
  .login-coluna:has(> .zap-balao) { padding-bottom: calc(52px + 16px + env(safe-area-inset-bottom)); }
  html:has(.zap-balao) { scroll-padding-bottom: calc(52px + 16px + 8px + env(safe-area-inset-bottom)); }
}

/* ---------- Loading global (Padrao_Loading_Estado): #loadingGlobal ---------- */
.loading-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--overlay-leve); backdrop-filter: blur(2px);
  display: none; align-items: center; justify-content: center;
}
.loading-overlay.aberto { display: flex; }
/* o aviso global e um popover manual: mora na camada de cima do navegador, a mesma do <dialog>, e so assim aparece POR CIMA de
   um popup aberto (o z-index nao alcanca a camada de cima). Sem suporte a popover, vale o z-index de sempre. */
.loading-overlay[popover] { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; overflow: visible; color: inherit; }
.loading-spinner {
  background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 28px 44px; box-shadow: var(--sombra-popup);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
/* a espera de um modal que salva por fetch (static/js/modal_espera.js): mora DENTRO do <dialog>, porque o dialog modal torna inerte o aviso global que fica fora dele.
   Cobre a area VISIVEL do modal (sticky no topo, altura medida pelo JS na variavel --espera-h, e a margem negativa a tira do fluxo: o layout nao se mexe) e
   bloqueia o clique no que esta embaixo; o giro de 44 px e o texto embaixo sao os do .loading-spinner (Padrao_Loading_Estado) */
.modal-espera {
  position: sticky; top: 0; z-index: 5;
  height: var(--espera-h, 100%); margin-bottom: calc(-1 * var(--espera-h, 0px));
  display: flex; align-items: center; justify-content: center;
  background: var(--overlay-leve); backdrop-filter: blur(2px); border-radius: inherit;
}
.modal-espera[hidden] { display: none; }
.modal-espera:focus { outline: none; }
.modal-espera .loading-spinner { max-width: calc(100% - 2 * var(--sp-3)); padding: 24px 32px; text-align: center; }

/* ---------- Verificacao em duas etapas (telas de acesso) ---------- */
.mfa-codigo { font-size: 22px; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; }
.mfa-chave { font-family: Consolas, monospace; font-size: 14px; letter-spacing: .04em; }
.mfa-passos { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.5; color: var(--text-dim); }
.mfa-acoes-chave { display: flex; gap: 8px; flex-wrap: wrap; }
/* o olhinho do campo de senha (static/js/senha_olho.js, dono 17/10) */
.senha-caixa { position: relative; display: block; }
.senha-caixa > .input { width: 100%; padding-right: 48px; }
.senha-olho {
  position: absolute; top: 0; right: 0; bottom: 0; width: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: none; color: var(--text-dim); font-size: 18px; cursor: pointer; border-radius: var(--raio-sm);
}
.senha-olho:hover { color: var(--text); }
.senha-olho:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.mfa-qr { display: block; width: 200px; height: 200px; margin: 0 auto; border-radius: var(--raio); image-rendering: pixelated; }
.login-card .mfa-acoes-chave .btn { flex: 1 1 140px; width: auto; }
.mfa-codigos {
  list-style: none; margin: 0; padding: 12px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  border: 1px dashed var(--border); border-radius: var(--raio);
  font-family: Consolas, monospace; font-size: 15px; text-align: center; letter-spacing: .05em;
}
.login-alternativa { border-top: 1px solid var(--border); padding-top: 12px; }
.login-alternativa summary { cursor: pointer; font-size: 13px; color: var(--text-dim); text-align: center; }
.login-alternativa summary:hover { color: var(--accent); }
/* alvo de toque de 44 px no "Sem o celular?" do segundo fator (Responsividade_Sempre): o summary e o botao que abre o formulario do codigo de recuperacao */
@media (max-width: 720px) { .login-alternativa summary { display: flex; align-items: center; justify-content: center; min-height: 44px; } }
.login-alternativa .login-form { margin-top: 12px; }
/* conteudo pro botao Copiar: fora da tela por classe (leitor de tela ignora pelo aria-hidden do elemento) */
.fora-da-tela { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Convite (tela publica e card da tela de Usuarios) ---------- */
.convite-cracha {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 14px; border-radius: var(--raio);
  border: 1px solid var(--accent-borda); background: var(--accent-soft);
}
.convite-cracha-rotulo { font-size: 12px; font-weight: 600; color: var(--text-dim); }
.convite-cracha-perfil { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; color: var(--text); }
.convite-cracha-texto { font-size: 13px; line-height: 1.45; color: var(--text-dim); }
.convite-novo { margin-bottom: 14px; border-color: var(--success); }
.convite-aviso { margin: 0; font-size: 13px; line-height: 1.5; color: var(--texto-secundario); }
.convite-link-bar { margin-bottom: 0; padding: 0; border: none; }
.convite-link-campo { flex: 1 1 320px; }
.convite-link-campo .input { min-width: 0; width: 100%; }
.convites-card { margin-top: 16px; }
.convite-vazio { margin: 0; font-size: 13px; color: var(--texto-secundario); }

/* ---------- Tela de Seguranca ---------- */
.seg-card { max-width: none; }
.seg-form { display: flex; flex-direction: column; gap: 14px; }
/* Fase 18 (dono, 06/10): os parametros agrupados por assunto, de 2 a 5 caixas por linha; o campo encosta embaixo (rotulos de alturas diferentes) */
.seg-grupo { margin: 0; padding: var(--sp-3) var(--sp-4) var(--sp-4); border: 1px solid var(--borda); border-radius: var(--raio); min-width: 0; }
.seg-grupo-titulo { padding: 0 6px; font-size: 13px; font-weight: 700; color: var(--texto); display: inline-flex; align-items: center; gap: 6px; }
.seg-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: var(--sp-3) var(--sp-4); }
.seg-grade > .campo { display: flex; flex-direction: column; justify-content: flex-end; margin: 0; min-width: 0; }
.seg-grade-ip { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.seg-grade-ip > .campo { justify-content: flex-start; }
.seg-rotulo { display: flex; align-items: flex-end; gap: 4px; }
.seg-rotulo label { margin-bottom: 0; flex: 0 1 auto; }
/* o (i) com a explicacao (Fase 18): aparece no hover e no foco do teclado, por cima de tudo */
.info-dica { position: relative; display: inline-flex; flex: none; }
.info-dica-btn { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: var(--raio-full);
  background: transparent; color: var(--texto-fraco); font-size: 16px; cursor: help; }
.info-dica-btn:hover, .info-dica-btn:focus-visible { color: var(--texto); background: var(--fundo); }
.info-dica-btn:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: 1px; }
.info-dica-texto { position: absolute; bottom: calc(100% + 6px); right: -8px; z-index: 300; width: min(300px, 80vw);
  padding: 10px 12px; border-radius: var(--raio-sm); background: var(--kpi-cinza-b); color: var(--sobre-imagem);
  font-size: 12.5px; font-weight: 400; line-height: 1.45; box-shadow: var(--sombra); visibility: hidden; opacity: 0; transition: opacity .12s; pointer-events: none; }
.info-dica:hover .info-dica-texto, .info-dica-btn:focus-visible + .info-dica-texto { visibility: visible; opacity: 1; }
@media (max-width: 720px), (pointer: coarse) { .info-dica-btn { width: 44px; height: 44px; margin: -11px -11px -11px -7px; }
  .info-dica-btn:focus + .info-dica-texto { visibility: visible; opacity: 1; } }
.seg-form .selectbusca { max-width: 360px; }
.seg-rodape { display: flex; justify-content: flex-end; }
.seg-confirma {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 14px; border-radius: var(--raio);
  border: 1px solid var(--warning); background: var(--ambar-suave);
}
.seg-confirma-pergunta { margin: 0; font-size: 14px; font-weight: 700; color: var(--texto); }
.seg-confirma-texto { margin: 0; font-size: 13px; line-height: 1.5; color: var(--texto-secundario); }
.seg-confirma-check { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: var(--texto); cursor: pointer; }
.seg-card-largo { margin-top: 16px; }
.seg-nota { margin: 0; font-size: 13px; line-height: 1.5; color: var(--texto-secundario); }
.seg-campo-principal { flex: 1 1 200px; }
.seg-campo-principal .input { min-width: 0; width: 100%; }
.seg-ip { font-family: Consolas, monospace; font-size: 13px; }

/* ---------- Minha conta ---------- */
.conta-card { max-width: 480px; margin-top: 16px; }
.conta-texto { margin: 0; font-size: 14px; line-height: 1.55; color: var(--texto); }
.conta-texto-menor { font-size: 13px; color: var(--texto-secundario); }
.conta-email { overflow-wrap: anywhere; }   /* e-mail longo no celular quebra no cartao em vez de empurrar a pagina de lado */
.conta-email i { color: var(--texto-fraco); }
.conta-acoes { display: flex; justify-content: flex-end; }
@media (max-width: 720px) {
  .mfa-codigos { grid-template-columns: 1fr; }
  .ra-bar .input { min-width: 0; width: 100%; }
  .ra-bar .campo { flex: 1 1 100%; }
  .seg-form .selectbusca { max-width: none; }
}

/* ---------- Estado vazio de tabela (Padrao_Estado_Vazio): a tabela sai e entra o bloco centrado ---------- */
.vz {
  flex: 1; min-height: 300px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 32px 20px;
}
.vz .vz-icone { font-size: 40px; color: var(--texto-fraco); line-height: 1; margin-bottom: 16px; }
.vz-titulo { margin: 0; font-family: var(--font-titulo); font-size: 17px; font-weight: 700; letter-spacing: -.02em; color: var(--texto); }
.vz-sub { margin: 7px 0 0; font-size: 13.5px; color: var(--texto-suave); line-height: 1.5; max-width: 400px; }
.vz-inline { flex: none; min-height: 150px; padding: 22px 16px; }
.vz-inline .vz-icone { font-size: 30px; margin-bottom: 10px; }
.vz-inline .vz-titulo { font-size: 14.5px; }
.vz-inline .vz-sub { font-size: 12.5px; }

/* ---------- Privacidade (LGPD): pagina publica, ciencia e links de rodape ---------- */
.login-coluna.coluna-larga { max-width: 760px; }
.login-card.priv-card { max-width: none; }
.priv-versao { margin: -8px 0 0; text-align: center; font-size: 12.5px; color: var(--text-dim); }
.priv-texto { display: flex; flex-direction: column; gap: 12px; font-size: 14px; line-height: 1.6; color: var(--text-dim); }
.priv-texto h2, .priv-texto h3 { font-size: 16px; margin: 8px 0 0; color: var(--text); }
.priv-texto p { margin: 0; }
.priv-texto ul, .priv-texto ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.priv-texto strong { color: var(--text); }
.priv-texto a, .lgpd-resumo a, .lgpd-link { color: var(--accent-texto); text-decoration: underline; }
/* Fase 70: o texto vem do banco pelo html_rico, que tira a classe: a lista de dados e qualquer <dl> do texto */
.priv-dados, .priv-texto dl {
  display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--raio); font-size: 13.5px;
}
.priv-dados dt, .priv-texto dt { font-weight: 600; color: var(--text-dim); }
.priv-dados dd, .priv-texto dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.lgpd-resumo { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; line-height: 1.5; color: var(--text-dim); }
.lgpd-resumo ul, .lgpd-resumo ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.lgpd-resumo p { margin: 0; }
.lgpd-erro {
  margin: 0; padding: 10px 12px; border-radius: var(--raio-sm);
  border: 1px solid var(--danger); background: var(--vermelho-suave);
  font-size: 13.5px; line-height: 1.5; color: var(--text);
}
/* caixa de aceite: a linha inteira e clicavel (44px no toque), o quadrado fica grande o bastante pro dedo */
.caixa-aceite {
  display: flex; gap: 10px; align-items: flex-start; min-height: 44px;
  padding: 11px 12px; border: 1px solid var(--border); border-radius: var(--raio-sm);
  font-size: 14px; line-height: 1.45; color: var(--text); cursor: pointer;
}
.caixa-aceite:hover { border-color: var(--accent); }
/* checkbox desenhado por nos (Padrao_Selecao_em_Lote: nunca o do SO): quadrado de 20px, marcado no laranja com o visto em
   quase preto (decisao 7); a borda usa o texto secundario pra passar de 3:1 nos dois temas */
.tsel {
  appearance: none; -webkit-appearance: none;
  width: 20px; height: 20px; flex: 0 0 auto; margin: 0; position: relative;
  border: 1.5px solid var(--texto-secundario); border-radius: var(--raio-2xs); background: var(--branco); cursor: pointer;
  transition: background .12s, border-color .12s;
}
.tsel:hover { border-color: var(--cor-primaria); }
.tsel:checked { background: var(--cor-primaria); border-color: var(--cor-primaria); }
.tsel:checked::after {
  content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px;
  border: solid var(--texto-sobre-accent); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.tsel:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: 2px; }
/* checkbox do cabecalho de tabela com 3 estados (Padrao_Selecao_em_Lote; os videos do Panda): parte marcada = quadrado cheio com traco */
.tsel:indeterminate { background: var(--cor-primaria); border-color: var(--cor-primaria); }
.tsel:indeterminate::after { content: ""; position: absolute; left: 3px; top: 7px; width: 10px; height: 2px; background: var(--texto-sobre-accent); border: 0; transform: none; }
.tsel:disabled { cursor: not-allowed; }
.caixa-aceite .tsel { margin-top: 1px; }
.sidebar-privacidade { display: flex; flex-wrap: wrap; gap: 2px 12px; padding: 6px 10px 0; font-size: 11.5px; }
.sidebar-privacidade a { color: var(--texto-fraco); text-decoration: underline; }
.sidebar-privacidade a:hover { color: var(--accent); }
@media (max-width: 520px) {
  .priv-dados { grid-template-columns: 1fr; gap: 2px; }
  .priv-dados dd { margin-bottom: 8px; }
}

/* ---------- Termos de uso: tela de aceite do aluno ---------- */
.termos-pagina { width: 100%; max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--sp-4); }   /* width 100%: dentro da coluna flex do .conteudo a margem automatica encolheria o bloco */
.termos-cab h1 { font-size: var(--fs-xl); margin: 0; }
.termos-cab p { margin: 6px 0 0; color: var(--text-dim); font-size: 14px; line-height: 1.55; }
.termo-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--text-dim); }
.termo-texto {
  max-height: 320px; overflow-y: auto;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--raio-sm);
  background: var(--bg); font-size: 14px; line-height: 1.65; color: var(--text-dim);
}
.termo-texto > :first-child { margin-top: 0; }
.termo-texto > :last-child { margin-bottom: 0; }
.termo-texto a { color: var(--accent-texto); text-decoration: underline; }
.termo-texto h1, .termo-texto h2, .termo-texto h3 { font-size: 15px; margin: 12px 0 6px; }
.termos-acoes { display: flex; gap: 10px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
/* o PAPEL dos textos legais (dono, 22/10): o quadro do texto dos termos de uso e da politica de privacidade com fundo branco e letra #0A0A0B,
   tambem no tema escuro do aluno; o titulo, o negrito e a definicao na mesma tinta e o link no laranja escuro do papel (os tokens -legal) */
.termo-texto, .priv-texto { background: var(--papel-legal); color: var(--tinta-legal); border: 1px solid var(--borda-legal); border-radius: var(--raio-sm); }
.priv-texto { padding: 16px 18px; }
.termo-texto h1, .termo-texto h2, .termo-texto h3, .termo-texto strong, .termo-texto b, .priv-texto h2, .priv-texto h3, .priv-texto strong,
.priv-texto dd { color: var(--tinta-legal); }
.priv-texto dt { color: var(--tinta-legal-suave); }
.termo-texto a, .priv-texto a { color: var(--link-legal); }
@media (max-width: 720px) {
  .termos-acoes .btn { width: 100%; justify-content: center; min-height: 44px; }
  .termo-texto { max-height: 260px; }
}

/* ---------- Termos de uso: telas do admin ---------- */
.termo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.termo-grid > * { min-width: 0; }
@media (max-width: 1100px) { .termo-grid { grid-template-columns: 1fr; } }
.termo-editor {
  height: auto; min-height: 320px; padding: 10px 12px; resize: vertical;
  font-family: Consolas, monospace; font-size: 13px; line-height: 1.5; width: 100%;
}
.termo-previa { max-height: 420px; background: var(--fundo); color: var(--texto); }
.termo-acoes { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.termo-dica { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--texto-secundario); }
/* Fase 70: a Politica de Privacidade (templates/juridico): o resumo da ciencia e mais curto que o texto; os rotulos da previa */
.jur-resumo { min-height: 120px; padding: 10px 12px; resize: vertical; font-family: Consolas, monospace; font-size: 13px; line-height: 1.5; width: 100%; height: auto; }
.jur-previa-rotulo { margin: 4px 0 6px; font-size: 12px; font-weight: 600; color: var(--texto-secundario); }
.termo-dica code { font-size: 12px; }
.cab-voltar { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--texto-secundario); margin-bottom: 12px; }
.cab-voltar:hover { color: var(--accent-texto); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chips-rotulo { font-size: 12.5px; color: var(--texto-secundario); margin-right: 2px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
  border: 1px solid var(--borda); border-radius: var(--raio-full); background: var(--branco);
  font-size: 12.5px; color: var(--texto-secundario);
}
.chip:hover { border-color: var(--cor-primaria); color: var(--accent-texto); }
.chip.ativo { border-color: var(--cor-primaria); background: var(--cor-primaria-suave); color: var(--accent-texto); font-weight: 600; }
/* paginador completo (Padrao_Paginacao_Servidor): contador com unidade a esquerda, controles a direita */
.paginador {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 4px 0; font-size: 13px; color: var(--texto-secundario);
}
.paginador-controles { display: inline-flex; align-items: center; gap: 4px; }
.paginador-controles .paginador-pos { padding: 0 8px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.confirm-icone.confirm-aviso { background: var(--ambar-suave); color: var(--ambar-escuro); }
.ip-celula { font-family: Consolas, monospace; font-size: 12.5px; }
/* Fase 70: a prova do aceite (termos e Politica de Privacidade): o navegador cortado com o inteiro no title, o hash curto em fonte fixa */
.ac-navegador { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.ac-hash { font-family: Consolas, monospace; font-size: 12.5px; }
.termo-cab-meta .ac-hash { overflow-wrap: anywhere; word-break: break-all; min-width: 0; }
.termo-cab-meta > span { min-width: 0; }
.ra-bar .campo-principal { flex: 1 1 240px; }
.ra-bar .campo-principal .input { min-width: 0; width: 100%; }
.btn.desabilitado { opacity: .45; cursor: not-allowed; filter: none; }
.termo-cab-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 13px; color: var(--texto-secundario); }
.termo-grid { margin-top: 16px; }
.ra-bar.ra-bar-limpo { border: none; padding: 0; margin: 0; background: transparent; }
/* cabecalho de card com titulo e ferramentas da tabela: no celular as ferramentas descem pra linha de baixo */
.cd-header.cab-tabela { flex-wrap: wrap; gap: 8px 12px; }
.cd-header.cab-tabela .cd-titulo { white-space: nowrap; }
/* tabela de registros que rola de lado no celular: linha de uma altura so, sem quebrar nome e e-mail */
.te-tab.tabela-nowrap td { white-space: nowrap; }

/* ---------- Campo de digitar no celular (Responsividade_Sempre, "Inputs no iOS"; CV-194) ----------
   Abaixo de 16px o iOS da zoom no foco e desorienta (Minha conta, Seguranca, busca do SelectBusca, anotacao da aula).
   Ate 720px todo campo de digitar sobe pra 16px; acima disso nada muda: cada componente segue com o proprio tamanho
   (.input 14px, busca do SelectBusca 13px), porque a regra so existe dentro deste @media. :not(.mfa-codigo) preserva o
   campo do codigo do segundo fator, que ja e maior (22px). Os :not([type=...]) deixam a regra forte o bastante pra
   vencer a classe do componente (.anotacao-texto, .selectbusca .sb-search, .termo-editor) sem !important. */
@media (max-width: 720px) {
  .input:not(.mfa-codigo), .textarea, select, textarea:not(.mfa-codigo), .selectbusca .sb-search,
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=range]):not([type=color]):not([type=submit]):not([type=button]):not([type=reset]):not([type=image]):not(.mfa-codigo) {
    font-size: 16px;
  }
}

/* ---------- Migracao do CursEduca (/op/migracao) ---------- */
/* a pagina preenche a area que sobrou: o .vz{flex:1} centra o bloco vazio na altura da janela (Padrao_Estado_Vazio) */
.mig-pagina { display: flex; flex-direction: column; gap: 16px; flex: 1 1 auto; }
/* "Importando ...": o loading inline do projeto (Padrao_Loading_Estado): spinner de 44 px, gerundio com o nome da etapa e o
   contador logo abaixo (.loading-sub). O spinner usa o tamanho padrao, sem override. */
.mig-andamento {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 20px 16px;
  text-align: center; font-size: 13.5px; line-height: 1.5;
  border: 1px solid var(--borda); border-radius: var(--raio); background: var(--branco);
}
.mig-andamento .spinner-circle { flex: 0 0 auto; }
.loading-sub { font-size: 12px; color: var(--texto-secundario); font-variant-numeric: tabular-nums; }
.mig-alerta {
  padding: 12px 16px; border-radius: var(--raio); font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere;
  border: 1px solid var(--vermelho-borda); background: var(--vermelho-suave); color: var(--texto);
}
.mig-dados { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 16px; margin: 0; }
.mig-dados dt { font-size: 12px; color: var(--texto-secundario); }
.mig-dados dd { margin: 2px 0 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.mig-dados-listas { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.mig-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mig-explica { font-size: 12.5px; color: var(--texto-secundario); line-height: 1.45; min-width: 260px; }
.mig-lista { margin: 0; padding-left: 16px; font-size: 12.5px; line-height: 1.5; }
.mig-ids { font-family: Consolas, monospace; font-size: 12.5px; font-weight: 400; overflow-wrap: anywhere; }
.mig-sub { margin: 0; font-size: 12px; line-height: 1.45; color: var(--texto-secundario); }
.mig-texto { margin: 0; font-size: 14px; line-height: 1.55; color: var(--texto); }
/* andamento "x de y" da etapa que esta rodando (<progress>: sem largura em style) */
.mig-progresso { display: block; width: 120px; height: 6px; margin-top: 4px; border: 0; border-radius: var(--raio-full); }
.mig-progresso::-webkit-progress-bar { background: var(--border); border-radius: var(--raio-full); }
.mig-progresso::-webkit-progress-value { background: var(--accent); border-radius: var(--raio-full); }
.mig-progresso::-moz-progress-bar { background: var(--accent); border-radius: var(--raio-full); }
@media (max-width: 520px) {
  .mig-dados { grid-template-columns: 1fr 1fr; }
  .mig-dados-listas { grid-template-columns: 1fr; }
  .mig-explica { min-width: 200px; }
}
/* Fase 10, parte B: o botao de icone das telas de migracao (trocar o destino do canal, importar so uma etapa) tem 44 px no toque */
@media (max-width: 720px), (pointer: coarse) { .mig-pagina .btn-icone { min-width: 44px; min-height: 44px; } }

/* ---------- Migracao do CursEduca, correcao de UI da Fase 10 (CV-032 a CV-199 da matriz seguem; so conformidade da tela) ---------- */
/* aviso de estado (o Importar tudo parou pra revisar os canais; de/para confirmado): ambar pede atencao, verde diz que esta feito */
.mig-aviso {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-radius: var(--raio);
  border: 1px solid var(--ambar); background: var(--ambar-suave); color: var(--texto); font-size: 13.5px; line-height: 1.5;
}
.mig-aviso > i { flex: 0 0 auto; font-size: 20px; color: var(--ambar-escuro); line-height: 1.2; }
.mig-aviso > div { min-width: 0; overflow-wrap: anywhere; }
.mig-aviso a { color: var(--accent-texto); font-weight: 600; }
.mig-aviso.ok { border-color: var(--verde-borda); background: var(--verde-suave); }
.mig-aviso.ok > i { color: var(--verde-escuro); }
/* rolagem de lado com pista de sombra (Responsividade_Sempre): a sombra aparece na borda que ainda tem conteudo escondido */
.mig-pagina .tabela-scroll {
  background:
    linear-gradient(to right, var(--branco) 30%, transparent) left center / 24px 100% no-repeat local,
    linear-gradient(to left, var(--branco) 30%, transparent) right center / 24px 100% no-repeat local,
    linear-gradient(to right, color-mix(in srgb, var(--texto) 14%, transparent), transparent) left center / 12px 100% no-repeat scroll,
    linear-gradient(to left, color-mix(in srgb, var(--texto) 14%, transparent), transparent) right center / 12px 100% no-repeat scroll,
    var(--branco);
}
.mig-pagina .te-tab { background: transparent; }
/* resumo do <details> (Detalhe tecnico, Arquivos do pacote...): alvo de 44 px no toque e o contexto no proprio texto */
@media (max-width: 720px), (pointer: coarse) {
  .mig-pagina details.payload summary { padding: 13px 0; }
}
/* lista de erros por linha do lote (modal): so id da origem e motivo; o texto quebra, nunca vira <pre> numa celula sem quebra */
.mig-erros { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mig-erros li { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--borda); font-size: 13px; line-height: 1.5; }
.mig-erros li:last-child { border-bottom: none; }
.mig-erro-id { flex: 0 0 auto; font-family: Consolas, monospace; font-size: 12.5px; color: var(--texto-secundario); }
.mig-erro-motivo { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 520px) { .mig-erros li { flex-direction: column; gap: 2px; } }
/* etapas da importacao: tabela que cabe no cartao de 1110 px (o numero de cada coluna) e vira um cartao por etapa quando o cartao
   fica estreito (container query: vale pela largura do cartao, nao da janela). A acao de cada etapa fica no canto do cartao. */
.mig-etapas-caixa { container-type: inline-size; container-name: migetapas; }
.mig-etapas thead th { padding: 10px 8px; font-size: 11px; letter-spacing: .03em; white-space: normal; vertical-align: bottom; }
.mig-etapas tbody td { padding: 9px 8px; white-space: normal; vertical-align: top; }
.mig-etapas .mig-num { white-space: nowrap; }
.mig-etapas .col-acoes { width: 1%; white-space: nowrap; }
.mig-etapas .mig-etapa-nome { min-width: 150px; font-size: 13.5px; }
.mig-etapas .mig-quando { display: block; margin-top: 4px; white-space: nowrap; }
.mig-etapas .mig-espera { display: block; margin-top: 4px; }
@container migetapas (max-width: 1100px) {
  .mig-etapas, .mig-etapas tbody { display: block; width: 100%; min-width: 0; }
  .mig-etapas thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .mig-etapas tbody tr {
    position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px 12px;
    padding: 14px 12px; border-bottom: 1px solid var(--borda);
  }
  .mig-etapas tbody tr:last-child { border-bottom: none; }
  .mig-etapas tbody td { display: block; padding: 0; border: 0; background: transparent; text-align: left; min-width: 0; }
  .mig-etapas tbody td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 2px; font-size: 11px; font-weight: 700; letter-spacing: .03em;
    text-transform: uppercase; color: var(--texto-secundario);
  }
  .mig-etapas tbody td.mig-etapa-nome { grid-column: 1 / -1; padding-right: 100px; min-width: 0; font-size: 14.5px; }
  .mig-etapas tbody td.mig-num { text-align: left; }
  .mig-etapas tbody td.col-acoes { position: absolute; top: 8px; right: 8px; width: auto; }
}
/* listas em tabela (de/para dos canais e comunidade por canal): a acao fica colada na borda direita quando a tabela rola de lado */
.mig-lista-tabela th.col-acoes, .mig-lista-tabela td.col-acoes {
  position: sticky; right: 0; z-index: 1; background: var(--branco); box-shadow: -1px 0 0 var(--borda);
}
.mig-lista-tabela tbody tr:hover td.col-acoes { background: var(--fundo); }
.vz .mig-motivo { margin: 10px 0 0; max-width: 520px; overflow-wrap: anywhere; }
.mig-form-aviso { margin: 10px 0 0; }
.mig-etapas details.mig-detalhes { margin-top: 4px; }
.mig-etapas details.mig-detalhes .mig-lista { padding-left: 16px; }
.mig-lista-tabela thead th { padding: 10px 8px; font-size: 11px; letter-spacing: .03em; white-space: normal; vertical-align: bottom; }
.mig-lista-tabela tbody td { padding: 10px 8px; }
.mig-lista-tabela td[data-col="canal"] { min-width: 150px; }
.mig-lista-tabela td .cv-sw { vertical-align: middle; margin-right: 8px; }
.mig-lista-tabela td[data-col="destino"] { min-width: 180px; }
.mig-lista-tabela td.mig-explica { min-width: 220px; }

/* ---------- Fase 5, parte C, correcao de UI: a tela dos arquivos do CursEduca (/op/migracao/arquivos) ---------- */
/* titulo da barra em duas linhas ate 720 px: a 360 px sobram uns 120 px entre o menu e os tres botoes (o resto da barra nao muda) */
@media (max-width: 720px) {
  .topbar .titulo-pagina .titulo-2-linhas { display: block; white-space: normal; font-size: 15px; line-height: 1.15; }
}
/* a acao do bloco encosta na direita (Acao_Primaria_a_Direita): a dica vem ANTES e come a folga (flex: 1), o formulario fica a direita; sem
   lugar pros dois na mesma linha, o botao desce e continua na direita */
.mig-acao-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.mig-acao-linha > p { flex: 1 1 260px; min-width: 0; }
.mig-acao-linha > form { margin-left: auto; }
/* o tamanho baixado logo abaixo da contagem, na celula da prancha */
.mig-tam { display: block; font-size: 11px; font-weight: 400; color: var(--texto-secundario); }
/* a prancha dos arquivos tem so 8 colunas curtas: a tabela pede 821 px (medido no Chromium, test_f5c_corr_tela.py), bem menos que as 20 etapas
   (.mig-etapas-caixa, 1100 px). O container proprio (conteudo do cartao) vira cartao por tipo abaixo de 840 px: nos 1280 e 1366 px da janela
   o cartao tem 950 e 1036 px de conteudo e a tabela aparece inteira, sem empilhar os 7 cartoes a toa */
.mig-arquivos-caixa { container-type: inline-size; container-name: migarquivos; }
.mig-arquivos .mig-total td { border-top: 2px solid var(--borda); background: var(--fundo); }
@container migarquivos (max-width: 840px) {
  .mig-arquivos, .mig-arquivos tbody { display: block; width: 100%; min-width: 0; }
  .mig-arquivos thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .mig-arquivos tbody tr {
    position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px 12px;
    padding: 14px 12px; border-bottom: 1px solid var(--borda);
  }
  .mig-arquivos tbody tr:last-child { border-bottom: none; }
  .mig-arquivos tbody td { display: block; padding: 0; border: 0; background: transparent; text-align: left; min-width: 0; }
  .mig-arquivos tbody td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 2px; font-size: 11px; font-weight: 700; letter-spacing: .03em;
    text-transform: uppercase; color: var(--texto-secundario);
  }
  .mig-arquivos tbody td.mig-etapa-nome { grid-column: 1 / -1; min-width: 0; font-size: 14.5px; }
  .mig-arquivos tbody td.mig-num { text-align: left; }
  .mig-arquivos .mig-total { background: var(--fundo); }
  .mig-arquivos .mig-total td { border-top: 0; }
}

/* ======================================================================
   Fase 5 (parte B): tabela paginada no servidor (tela de Usuarios) e o que ela usa
   ====================================================================== */
/* atributo hidden vence o display de componente (.vz, .oc-pag e os popups tem display proprio) */
[hidden] { display: none !important; }

/* ---------- Barra de filtros (Padrao_Barra_de_Filtros): altura unica 38px, label 11px caixa alta ---------- */
.fu-bar {
  display: flex; gap: 10px 12px; flex-wrap: wrap; align-items: flex-end;
  margin-bottom: 16px; --fu-h: 38px;
}
.fu-bar .g { display: flex; flex-direction: column; gap: 4px; }
.fu-lbl {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--texto-secundario);
}
.fu-bar .input, .fu-bar .btn, .fu-bar .selectbusca .sb-display {
  height: var(--fu-h); min-height: var(--fu-h); box-sizing: border-box; font-size: 13px;
}
.fu-bar .btn { padding: 0 14px; }
.fu-bar .selectbusca { min-width: 150px; }
.fu-bar .fu-g-largo .selectbusca { min-width: 220px; }
.fu-bar .selectbusca .sb-display { background: var(--branco); }
.fu-bar .fu-acoes { flex-direction: row; gap: 8px; align-self: flex-end; margin-left: auto; }
.fu-presets {
  display: inline-flex; align-items: center; gap: 4px; flex-wrap: nowrap;
  height: var(--fu-h); padding: 3px; box-sizing: border-box;
  border: 1px solid var(--borda); border-radius: var(--raio-xs); background: var(--branco);
}
.fu-presets button {
  height: calc(var(--fu-h) - 8px); border: 1px solid transparent; background: var(--branco);
  border-radius: var(--raio-2xs); padding: 0 10px; font-size: 12px; font-weight: 600;
  color: var(--texto-secundario); cursor: pointer; white-space: nowrap;
}
.fu-presets button:hover { color: var(--accent-texto); }
.fu-presets button.on {
  border-color: var(--cor-primaria); background: var(--cor-primaria-suave); color: var(--accent-texto);
}
.fu-periodo-sem { font-size: 12px; color: var(--texto-suave); }
.fu-periodo-datas { display: flex; gap: 8px; flex-wrap: wrap; }
.fu-data { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--texto-secundario); }
.fu-data .input { width: 150px; }
/* (dono, 23/10) no Periodo customizado as datas ficam AO LADO dos presets, na mesma linha dos outros campos: embaixo, o grupo crescia e
   desalinhava a barra. O rotulo ocupa a linha de cima; sem espaco, as datas descem dentro do grupo */
@media (min-width: 721px) {
  .fu-bar .g[data-periodo] { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 8px; }
  .fu-bar .g[data-periodo] > .fu-lbl { flex: 1 0 100%; }
}

/* ---------- Visao geral: cartao de cada grupo do menu; a cor do icone vem da classe .gv-<grupo> (tokens --grupo-*) ---------- */
.cd-grupo { --gv-cor: var(--grupo-padrao); }
.gv-conteudo { --gv-cor: var(--grupo-conteudo); }
.gv-comunidade { --gv-cor: var(--grupo-comunidade); }
.gv-operacao { --gv-cor: var(--grupo-operacao); }
.gv-integracoes { --gv-cor: var(--grupo-integracoes); }
.gv-admin { --gv-cor: var(--grupo-admin); }
.gv-desenvolvedor { --gv-cor: var(--grupo-desenvolvedor); }
.gv-juridico { --gv-cor: var(--grupo-juridico); }
.gv-ads { --gv-cor: var(--grupo-ads); }
.gv-recompensas { --gv-cor: var(--grupo-recompensas); }
.gv-titulo { display: flex; align-items: center; gap: var(--sp-2); }
.gv-icone { font-size: 20px; color: var(--gv-cor); }
.gv-desc { margin: 0; font-size: 13px; color: var(--texto-suave); }
.gv-itens { display: flex; flex-direction: column; gap: var(--sp-1); }

/* ---------- Card da tabela (Padrao_Cabecalho_da_Tabela): titulo e menu na 1a faixa, SEM overflow no card ----------
   O popup do menu mora dentro do card: overflow:hidden aqui o cortaria. O raio vai pro container de rolagem. */
.tabela-wrap{ background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra-sm); position: relative; }
.tabela-wrap > .tabela-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 0 0 var(--raio) var(--raio); }
.tabela-wrap > .tabela-scroll:first-child { border-radius: var(--raio); }
.tabela-wrap .te-tab { border: none; border-radius: 0; box-shadow: none; overflow: visible; min-width: 760px; }
.tabela-wrap .te-tab thead th { background: var(--branco); }   /* header de colunas branco: a borda separa */
/* nome e e-mail longos cortam com reticencias (o texto inteiro fica no title da celula): a coluna Acoes cabe em 1280 px */
.tabela-wrap td[data-col="nome"], .tabela-wrap td[data-col="email"] { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.tabela-cab {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; border-bottom: 1px solid var(--borda);
}
.tabela-titulo { margin: 0; font-size: 14px; font-weight: 600; color: var(--texto); }

/* menu sanduiche (ph-list) e popups: Filtro por coluna / Ordenar / Colunas / Exportar CSV / Exportar Excel / Linhas */
.ta-menu-wrapper { position: relative; }
.btn-filtro.ta-menu-btn {
  width: 36px; height: 36px; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--borda); border-radius: var(--raio-sm); background: var(--branco);
  color: var(--texto-secundario); cursor: pointer;
}
.ta-menu-btn:hover { border-color: var(--cor-primaria); color: var(--accent-texto); }
.ta-menu-btn i { font-size: 18px; }
.ta-menu, .ta-popup {
  position: absolute; top: 100%; right: 0; margin-top: 6px; z-index: 60;
  background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra);
}
.ta-menu { min-width: 210px; padding: 4px 0; }
.ta-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px;
  font-size: 13px; color: var(--texto); background: none; border: none; cursor: pointer; text-align: left;
}
.ta-menu-item:hover { background: var(--fundo); color: var(--accent-texto); }
.ta-menu-item i { font-size: 16px; color: var(--texto-secundario); }
.ta-menu-item:hover i, .ta-menu-item.ativo, .ta-menu-item.ativo i { color: var(--accent-texto); }
.ta-menu-item.ativo { font-weight: 600; }
.ta-menu-divider { height: 1px; background: var(--borda); margin: 4px 0; }
.ta-popup { min-width: 280px; max-width: calc(100vw - 32px); }
.ta-popup.ta-popup-estreito { min-width: 220px; }
.ta-popup-cab {
  padding: 12px 14px; border-bottom: 1px solid var(--borda); font-weight: 700; font-size: 13px;
  display: flex; align-items: center; gap: 8px;
}
.ta-popup-cab i { color: var(--cor-primaria); }
.ta-popup-corpo { padding: 8px; display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto; }
.ta-popup-rodape { padding: 10px 14px; border-top: 1px solid var(--borda); display: flex; gap: 8px; justify-content: flex-end; }
.ta-popup-rodape button {
  padding: 7px 14px; border-radius: var(--raio-sm); border: 1px solid var(--borda); background: var(--branco);
  cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--texto);
}
.ta-popup-rodape .ta-aplicar { background: var(--cor-primaria); border-color: var(--cor-primaria); color: var(--texto-sobre-accent); }
.ta-ordem-item {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 10px;
  border: 1px solid transparent; border-radius: var(--raio-sm); background: none; cursor: pointer;
  font-size: 13px; color: var(--texto); text-align: left;
}
.ta-ordem-item:hover { background: var(--fundo); }
.ta-ordem-item.ativo { border-color: var(--cor-primaria); background: var(--cor-primaria-suave); }
.ta-ordem-dir { color: var(--texto-secundario); font-size: 12px; white-space: nowrap; }
.ta-coluna-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; font-size: 13px; cursor: pointer; border-radius: var(--raio-sm); }
.ta-coluna-item:hover { background: var(--fundo); }
.ta-coluna-item input { accent-color: var(--cor-primaria); margin: 0; }
.ta-popup-corpo.ta-tamanhos { flex-direction: row; flex-wrap: wrap; }
.ta-tamanho {
  min-width: 52px; height: 34px; border: 1px solid var(--borda); border-radius: var(--raio-sm);
  background: var(--branco); cursor: pointer; font-weight: 600; color: var(--texto);
}
.ta-tamanho.ativo { border-color: var(--cor-primaria); background: var(--cor-primaria-suave); color: var(--accent-texto); }
/* ordem de varias colunas: a prioridade aparece junto da seta */
.te-tab thead th.asc[data-prioridade]::after { content: " \25B2" attr(data-prioridade); font-size: 9px; }
.te-tab thead th.desc[data-prioridade]::after { content: " \25BC" attr(data-prioridade); font-size: 9px; }
/* linha de filtro por coluna dentro do thead (Padrao_Filtro_por_Coluna): campo de 30px, placeholder minusculo */
.te-tab thead tr.th-filtro th { padding: 6px 8px; text-transform: none; letter-spacing: 0; }
.th-filtro-campo {
  width: 100%; min-width: 80px; height: 30px; box-sizing: border-box; padding: 0 8px;
  border: 1px solid var(--borda); border-radius: var(--raio-xs); font-size: 12.5px; font-weight: 400;
  background: var(--branco); color: var(--texto);
}
.th-filtro-campo:focus { border-color: var(--cor-primaria); outline: none; }
.te-tab tr.tabela-vazia td { text-align: center; color: var(--texto-secundario); padding: 28px 14px; white-space: normal; }
.loading-inline.loading-compacto { padding: 24px 16px; background: transparent; }
.loading-compacto .spinner-circle { width: 32px; height: 32px; border-width: 3px; }

/* ---------- Rodape da tabela paginada: contagem a esquerda, paginador completo no centro (grid 1fr auto 1fr) ---------- */
.oc-pag { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px 12px; padding: 12px 4px 0; font-size: 13px; }
.oc-pag-info { grid-column: 1; justify-self: start; }
.oc-pag-nav { grid-column: 2; display: inline-flex; align-items: center; gap: 4px; }
.muted { color: var(--texto-secundario); }
.pag-btn {
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0;
  border: 1px solid var(--borda); border-radius: var(--raio-sm); background: var(--branco);
  color: var(--texto-secundario); cursor: pointer;
}
.pag-btn:hover:not(:disabled) { border-color: var(--cor-primaria); color: var(--accent-texto); }
.pag-btn:disabled { opacity: .35; cursor: not-allowed; }
.pag-pos { padding: 0 10px; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--texto); }

/* ---------- Minhas exportacoes (Padrao_Exportacao_em_Segundo_Plano) ---------- */
.exp-card { margin-top: 16px; }
.exp-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.exp-item { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--texto); }
.exp-desc { font-variant-numeric: tabular-nums; }
.exp-vazio { margin: 0; font-size: 13px; color: var(--texto-secundario); }

/* ---------- Importar Alunos e Importar Aulas: fila e historico (o worker importa) ---------- */
.imp-fila { max-width: 760px; margin-bottom: 16px; border-color: var(--cor-primaria); }
.imp-fila-lista { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }
.imp-fila-quando { color: var(--texto-secundario); font-size: 12.5px; }
.imp-fila-nota { margin: 0; font-size: 12.5px; color: var(--texto-secundario); }

/* ---------- 375 px: a tabela rola de lado no proprio card; nada so no :hover; alvo de toque de 44px ---------- */
@media (max-width: 720px) {
  .fu-bar .g { flex: 1 1 100%; }
  .fu-bar .selectbusca, .fu-bar .fu-g-largo .selectbusca { min-width: 0; width: 100%; }
  .fu-presets { flex-wrap: wrap; height: auto; }
  .fu-presets button { height: 36px; flex: 1 1 auto; }
  .fu-bar .fu-acoes { margin-left: 0; }
  .fu-bar .fu-acoes .btn { flex: 1 1 0; justify-content: center; }
  .fu-bar .input, .fu-bar .btn, .fu-bar .selectbusca .sb-display { height: 44px; min-height: 44px; }
  .btn-filtro.ta-menu-btn, .pag-btn { width: 44px; height: 44px; }
  .tabela-wrap .btn-icone { width: 44px; height: 44px; }
  .ta-menu-item { min-height: 44px; }
  .th-filtro-campo { height: 40px; }
  .oc-pag { grid-template-columns: 1fr; justify-items: center; }
  .oc-pag-info, .oc-pag-nav { grid-column: 1; justify-self: center; }
}

/* ======================================================================
   Fase 6 (parte A): comunidade (templates/comunidade), sino, gaveta e as pecas que ela usa
   ====================================================================== */

/* ---------- Card: acoes e vazio (Padrao_Box_Card, CV-086) ---------- */
.cd-acoes { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.cd-vazio { align-items: center; text-align: center; padding: 40px 20px; gap: 8px; }
.cd-vazio-titulo { font-size: 16px; font-weight: 600; margin: 8px 0 0; color: var(--texto); }
.cd-vazio-msg { font-size: 13px; color: var(--texto-suave); margin: 0 0 16px; }

/* ---------- Upload: linha de acao com a mensagem ANTES do botao (Padrao_Upload_Arquivo, CV-174) ---------- */
.im-acao { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; justify-content: flex-end; margin-top: 14px; }
.im-acao .im-msg { margin-right: auto; font-size: 12.5px; color: var(--texto-secundario); }
.im-acao .im-msg.ok { color: var(--verde-escuro); font-weight: 600; }
.im-acao .im-msg.erro { color: var(--vermelho-escuro); font-weight: 600; }
.modal-rodape.im-acao { margin-top: 0; }
/* enviando: so o TEXTO no gerundio, em destaque, na propria mensagem (Padrao_Loading_Estado: o giro so existe em
   .loading-inline e .loading-overlay; a mensagem ao lado do botao nao ganha uma terceira variante de spinner) */
.im-msg.carregando { color: var(--texto); font-weight: 600; }
.im-acao .im-msg.carregando { color: var(--texto); font-weight: 600; }
.im-arq { display: block; margin-top: 6px; font-weight: 600; color: var(--verde-escuro); }
.im-texto { display: block; font-size: 13px; }

/* ---------- Popup centrado (<dialog>, Padrao_Modal_Popup_Centrado, CV-149 e CV-150) ---------- */
dialog.popup-centrado {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  margin: 0; border: 0; border-radius: var(--raio); padding: 0;
  max-width: 520px; width: 92%;
  background: var(--branco); color: var(--texto);
  box-shadow: var(--sombra-popup);
  overflow: visible !important;
}
dialog.popup-centrado::backdrop { background: var(--overlay-dialog); }
.popup-cab {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: 14px 18px; border-bottom: 1px solid var(--borda); font-weight: 700; font-size: 15px;
}
.popup-cab span { display: inline-flex; align-items: center; gap: 8px; }
.popup-cab h3 { margin: 0; font-size: 15px; }
dialog.popup-centrado.popup-largo { max-width: 680px; }   /* formulario mais largo (nova conversa): o padrao e 520px */
.popup-corpo { padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.popup-corpo .linha2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 880px) { .popup-corpo .linha2 { grid-template-columns: 1fr; } }
/* rodape do popup: o primario a direita (Padrao_Modal), a mensagem (.im-msg) a esquerda */
.popup-rodape {
  padding: 14px 18px; border-top: 1px solid var(--borda);
  display: flex; gap: var(--sp-3); justify-content: flex-end; align-items: center; flex-wrap: wrap;
}
.popup-rodape.im-acao { margin-top: 0; }
/* SelectBusca dentro do <dialog> (top layer): o painel ancora no proprio dialog (selectbusca.js marca sb-in-dialog) */
.sb-popup.sb-in-dialog, .selectbusca .sb-panel.sb-in-dialog { position: absolute; }
/* Janela baixa (celular deitado, notebook pequeno): o overflow visivel do popup deixaria o rodape fora da tela. Ai o
   proprio <dialog> rola e o cabecalho e o rodape ficam colados (sticky), sempre a vista. Com a lista do SelectBusca
   aberta, ela aumenta a area rolavel em vez de sumir. O limite de altura de cada popup: padrao 560px; .popup-alto
   (formularios compridos, como a nova conversa) ja a partir de 820px. */
@media (max-height: 560px) {
  dialog.popup-centrado { max-height: calc(100dvh - 2 * var(--sp-3)); overflow-y: auto !important; }
  dialog.popup-centrado .popup-cab { position: sticky; top: 0; z-index: 2; background: var(--branco); }
  dialog.popup-centrado .popup-rodape { position: sticky; bottom: 0; z-index: 2; background: var(--branco); }
}
@media (max-height: 820px) {
  dialog.popup-centrado.popup-alto { max-height: calc(100dvh - 2 * var(--sp-3)); overflow-y: auto !important; }
  dialog.popup-centrado.popup-alto .popup-cab { position: sticky; top: 0; z-index: 2; background: var(--branco); }
  dialog.popup-centrado.popup-alto .popup-rodape { position: sticky; bottom: 0; z-index: 2; background: var(--branco); }
}

/* ---------- Rodape da sidebar: icone quadrado por classe, nunca style= (Padrao_Sidebar_Rodape, CV-161) ---------- */
.btn-icone-rodape { padding: 7px; position: relative; justify-content: center; }
.marca-destaque { color: var(--accent); font-style: normal; }
.sidebar-rodape { position: relative; }
.sino-badge {
  position: absolute; top: -3px; right: -5px;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--raio-full);
  background: var(--accent); color: var(--texto-sobre-accent); border: 2px solid var(--branco);
  font-size: 10px; font-weight: 700; line-height: 14px; text-align: center;
}
/* Fase 18 (dono, 07/10): o sino fixo no canto de cima a direita (no celular, dentro da altura da barra de cima, ao lado da lupa). Fica na
   MESMA margem do conteudo (--sp-5, o --pad-aluno do computador; dono, 09/10: o sino desalinhado do Postar e da coluna da direita da
   comunidade): o topo dele e o da primeira linha da pagina e a borda direita e a das colunas */
.sino-fixo { position: fixed; top: var(--sp-5); right: var(--sp-5); z-index: 46; }
.btn.btn-sino {
  position: relative; width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; border-radius: var(--raio-full);
  background: var(--sino-fundo, var(--scrim)); border: 1px solid var(--border); color: var(--text); box-shadow: var(--sombra);
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
}
.btn.btn-sino i { font-size: 20px; }
.btn.btn-sino:hover, .btn.btn-sino[aria-expanded="true"] { border-color: var(--accent); color: var(--accent-texto); }
.sino-fixo .sino-badge { top: -2px; right: -2px; }
/* no computador o cabecalho das telas que poe botao na direita guarda o canto do sino (ele nunca cobre o Nova conversa nem o PDF) */
@media (min-width: 881px) {
  .conteudo-aluno .com-cab, .conteudo-aluno .em-topo { padding-right: 56px; }   /* o sino (44 px) e 12 px de folga */
  /* a faixa do aviso na vitrine (dono, 20/10) termina ANTES do sino; sem a sidebar o sino mora na barra fina e o canto e dela */
  html:not(.sem-sidebar) .conteudo-aluno .aviso-banner { margin-right: 56px; }
  .com-cab-acoes { align-self: flex-start; }   /* a busca, o menu e o Postar na linha do sino (o topo da pagina), nao no meio do titulo */
  /* a Ementa (dono, 08/10): o Filtrar, o Baixar PDF e o Compartilhar na linha do sino, centrados na altura dele (44 px) */
  .conteudo-aluno .em-acoes { align-self: flex-start; min-height: 44px; }
}
/* no celular o sino entra na barra de cima: ela reserva o canto da direita (a lupa, ou o que a pagina poe ali, como o PDF da Ementa, fica antes) */
@media (max-width: 880px) {
  .sino-fixo { top: 4px; right: 8px; }
  .aluno-topbar-mobile { padding-right: calc(var(--sp-3) + 48px); }
  .btn.btn-sino { background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.sino-painel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 90;
  width: min(340px, calc(100vw - 24px)); max-height: min(70vh, 460px); overflow-y: auto;
  background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra-lg);
}
/* o vidro do iOS (dono, 07/10): com as notificacoes abertas o fundo da plataforma escurece e desfoca e o painel fica legivel por cima;
   o fundo mora no proprio .sino-fixo (camada 46, por cima da pagina e da barra), e o clique nele fecha o painel (sino.js, o clique fora) */
html.sino-aberto .sino-fixo::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background: var(--overlay-gaveta); -webkit-backdrop-filter: blur(10px) saturate(120%); backdrop-filter: blur(10px) saturate(120%);
  animation: sinoFundo .2s ease-out;
}
@keyframes sinoFundo { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { html.sino-aberto .sino-fixo::before { animation: none; } }
.sino-cab {
  position: sticky; top: 0; background: var(--branco);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--borda);
}
.sino-titulo { font-weight: 700; font-size: 14px; color: var(--texto); }
.sino-lista { list-style: none; margin: 0; padding: 4px 0; }
.sino-lista:empty { display: none; }
.sino-item a {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 14px;
  font-size: 13px; line-height: 1.45; color: var(--texto); border-left: 3px solid transparent;
}
.sino-item a:hover { background: var(--fundo); }
.sino-item.nao-lida a { border-left-color: var(--accent); }
.sino-quando { font-size: 11.5px; color: var(--texto-fraco); }
.usuario-acoes { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.usuario-box .info .papel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* celular: os botoes do rodape descem pra linha de baixo (o nome fica inteiro) e viram alvo de toque de 44 px */
@media (max-width: 720px) {
  .usuario-box { flex-wrap: wrap; row-gap: 4px; }
  .usuario-box .info { flex: 1 1 calc(100% - 44px); }
  .usuario-acoes { flex: 1 1 100%; justify-content: flex-end; }
  .btn.btn-icone-rodape { width: 44px; height: 44px; padding: 0; }
  .modal-x { width: 44px; height: 44px; }
}

/* ---------- Layout da comunidade: canais a esquerda, conversa a direita ---------- */
.com-layout { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: var(--sp-4); align-items: start; flex: 1 1 auto; }
/* a coluna dos chats mais larga na tela grande (dono, 09/10: "ta comendo demais os textos"): o feed ainda sobra */
@media (min-width: 1440px) { .com-layout { grid-template-columns: 300px minmax(0, 1fr); } }
/* o centro (dono, 09/10): o cabecalho, que fica no topo ao rolar, e embaixo o miolo, com o feed e a coluna da direita. O cabecalho mora
   no centro (e nao numa linha da grade de fora) pra o sticky valer a pagina inteira: o sticky nunca sai do bloco que o contem */
.com-centro { min-width: 0; align-self: stretch; display: flex; flex-direction: column; gap: var(--sp-4); }
.com-miolo { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); align-items: start; min-width: 0; }
.com-miolo > .com-principal { align-self: stretch; }   /* o .vz{flex:1} do canal vazio centra na altura que sobrou */
.com-miolo > .com-lado { display: none; }
/* as 4 colunas no computador largo (dono, 09/10: a barra principal, a dos chats, o feed e o calendario com as propagandas embaixo); sem a
   coluna da direita (nada por vir e nenhuma propaganda) o feed vai ate o fim da linha. O cabecalho ocupa o feed E a coluna da direita: o
   Postar encosta no sino. */
@media (min-width: 1280px) {
  .com-layout.com-com-lado .com-miolo { grid-template-columns: minmax(0, 1fr) 300px; }
  .com-layout.com-com-lado .com-miolo > .com-lado { display: flex; }
}
/* o cabecalho fixo no topo ao rolar (dono, 09/10: "nao pode sumir as opcoes do topo"), no computador: ele sobe ate a borda da janela e o
   respiro de cima vira o padding dele (a busca, o Postar e o menu seguem na linha do sino); o fundo e um vidro escuro que some embaixo, por
   tras dele (::before, pra a mascara nao cortar o menu aberto), e cobre tambem o vao ate a borda da direita, embaixo do sino */
@media (min-width: 881px) {
  .com-centro > .com-cab {
    position: sticky; top: 0; z-index: 40; margin-top: calc(-1 * var(--pad-aluno)); padding-top: var(--pad-aluno); padding-bottom: var(--sp-3);
  }
  .com-centro > .com-cab::before {
    content: ""; position: absolute; z-index: -1; top: 0; bottom: calc(-1 * var(--sp-3)); left: calc(-1 * var(--sp-4)); right: calc(-1 * var(--pad-aluno));
    background: var(--com-cab-fundo, var(--bg)); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    -webkit-mask-image: linear-gradient(black calc(100% - 24px), transparent); mask-image: linear-gradient(black calc(100% - 24px), transparent);
    pointer-events: none;
  }
  /* a coluna da direita para logo abaixo do cabecalho (a altura dele vem do comunidade.js em --com-cab-h; sem JS, a medida tipica) */
  .com-miolo > .com-lado {
    top: calc(var(--com-cab-h, 112px) + var(--sp-2));
    /* mais alta que a janela (o calendario e as propagandas numa tela baixa), ela rola por dentro: o fim nunca fica escondido */
    max-height: calc(100vh - var(--com-cab-h, 112px) - var(--sp-2) - var(--sp-5)); overflow-y: auto; overscroll-behavior: contain;
  }
}
/* a coluna dos chats: o cartao (a borda e o brilho) por fora e a lista que rola por dentro, com a barra DENTRO do cartao, longe dos cantos
   arredondados (dono, 09/10: a barra vazava pra fora do elemento) */
.com-canais {
  position: sticky; top: var(--sp-5); max-height: calc(100vh - 48px); display: flex; flex-direction: column; min-height: 0;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--raio); overflow: hidden;
}
.com-canais-rolo {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 6px 10px 8px;
  display: flex; flex-direction: column; gap: 2px;
}
.com-canais-rolo::-webkit-scrollbar-track { margin-block: 10px; }
/* o topo fixo da lista (dono, 09/10): o Feed e o rotulo Canais grudam no alto e o resto corre por baixo, num vidro desfocado que se
   desfaz embaixo (o ::after estende o desfoque uns pixels abaixo, pra a passagem nao virar um corte seco) */
.com-canais-topo {
  position: sticky; top: 0; z-index: 3; display: flex; flex-direction: column; gap: 2px;
  margin: 0 -6px 0 -8px; padding: 10px 6px 0 8px;
  background: var(--com-canais-topo-fundo, var(--bg-elev)); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.com-canais-topo::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; pointer-events: none;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  -webkit-mask-image: linear-gradient(black, transparent); mask-image: linear-gradient(black, transparent);
  background: linear-gradient(var(--com-canais-topo-fundo, var(--bg-elev)), transparent);
}
.com-area { display: flex; flex-direction: column; gap: 2px; }
.com-area-nome {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--texto-fraco); padding: 4px 10px 6px;
}
.com-canal {
  display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 10px;
  border-radius: var(--raio-sm); color: var(--texto-secundario); font-size: 13.5px; font-weight: 500;
}
.com-canal i { font-size: 16px; flex: 0 0 auto; }
.com-canal:hover { background: var(--branco); color: var(--texto); }
.com-canal.ativo { background: var(--cor-primaria-suave); color: var(--accent-texto); font-weight: 600; }
.com-canal-nome { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.com-ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }
.com-canal-lock { color: var(--texto-fraco); font-size: 14px; }

/* ---------- Minha Area: a segunda barra (dono, 21/10, no lugar dos cartoes) ----------
   A partir de 1280 px a barra de vidro ao lado, com o visual da lista de chats (.com-canais: o cartao, o brilho da borda e o grude no topo,
   na linha da barra principal pelo ios-dark.css); abaixo, o titulo da secao vira o menu. Nunca overflow nem container query no .ma-layout:
   o primeiro desliga o grude da previa das Duvidas e o segundo prende os modais (position: fixed) dentro dele. */
.ma-nav { display: none; }
.ma-principal { min-width: 0; }
@media (min-width: 1280px) {
  .ma-layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
  .ma-nav { display: flex; border-radius: var(--raio-lg); }
  .ma-cab-sobre, .ma-trocar { display: none; }
  /* as Duvidas (a lista e a previa) com a barra nova: meio a meio ate 1600 px, senao a linha da lista fica estreita demais */
  .ma-layout .md-caixa { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 1600px) {
  .ma-layout { grid-template-columns: 248px minmax(0, 1fr); }
  .ma-layout .md-caixa { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
.ma-nav-titulo { margin: 0; padding: 18px 16px 8px; font-size: 20px; font-weight: 700; letter-spacing: -.03em; color: var(--texto); }
.ma-nav-rolo {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 8px 8px;
  display: flex; flex-direction: column; gap: var(--sp-3);
}
/* o Perfil no pe da barra, como o rodape da barra principal: a sombra de cima separa (o neo) ou a linha fina (fora do tema) */
.ma-nav-pe { flex: none; padding: 10px 8px; border-top: 1px solid var(--border); }
html.tema-neo .ma-nav-pe { border-top: 0; box-shadow: var(--neo-divisao-cima); }
.ma-nav-grupo { display: flex; flex-direction: column; }
.ma-nav-lista, .ma-trocar-lista { list-style: none; margin: 0; padding: 0; }
.ma-nav-lista { display: flex; flex-direction: column; gap: 2px; }
.ma-nav .ma-nav-item { min-height: 40px; padding: 0 10px 0 12px; gap: 10px; border-radius: var(--raio-full); text-decoration: none; }
.ma-nav .ma-nav-item i { font-size: 18px; }
.ma-nav .ma-nav-item:hover { background: var(--pasta-fundo); color: var(--texto); }
.ma-nav .ma-nav-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* o ativo AFUNDADO, como o item ativo do menu e a aba aberta da aula (os tokens --aba-pilula-*): o texto branco e so o icone na cor da marca */
.ma-nav .ma-nav-item.ativo { background: var(--aba-pilula-fundo, var(--pasta-fundo-forte)); box-shadow: var(--aba-pilula-sombra, none);
  color: var(--aba-pilula-texto, var(--texto)); font-weight: 600; }
.ma-nav .ma-nav-item.ativo i { color: var(--accent-texto); }
/* a cor pede acao: so as Duvidas nao lidas levam o selo laranja; o resto e o numero cinza da pasta da Comunidade (.com-pasta-n) */
.ma-nav-novas {
  flex: 0 0 auto; min-width: 20px; height: 18px; padding: 0 6px; border-radius: var(--raio-full); font-size: 10.5px; font-weight: 700;
  line-height: 18px; text-align: center; color: var(--texto-sobre-accent); background: var(--accent);
}
.ma-nav .ma-nav-item .ma-nav-sai { font-size: 14px; color: var(--texto-fraco); }

/* o cabecalho da secao: um titulo so, grande, como o do iOS, e embaixo a legenda que ficava no cartao */
.ma-cab { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--sp-4); min-width: 0; }
.ma-cab-sobre { margin: 0; font-size: 13px; font-weight: 600; color: var(--texto-suave); }
.ma-cab-linha { position: relative; display: flex; align-items: center; gap: 6px; min-height: 44px; min-width: 0; }
.ma-cab-titulo { margin: 0; min-width: 0; font-size: 28px; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; color: var(--texto); }
.ma-cab-sub { margin: 0; font-size: 13.5px; color: var(--texto-suave); }
@media (min-width: 881px) { .ma-cab { padding-right: 64px; } }   /* o sino fixo no canto */
@media (max-width: 560px) { .ma-cab-titulo { font-size: 24px; } }

/* abaixo de 1280 px: o menu no titulo. A linha inteira do titulo abre (o ::before do summary cobre a linha); a caixa e a lista agrupada,
   inset, estilo Ajustes; o fundo escurece como o do sino aberto (o ::before do details, que o minha_area_nav.js usa pra fechar) */
.ma-trocar { flex: none; }
.ma-trocar > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; }
.ma-trocar > summary::-webkit-details-marker { display: none; }
.ma-trocar > summary::before { content: ""; position: absolute; inset: 0; }
.ma-trocar > summary:focus-visible { outline: none; }
.ma-trocar > summary:focus-visible .ma-trocar-seta { outline: 2px solid var(--accent); outline-offset: 2px; }
.ma-trocar-seta {
  position: relative; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--raio-full); font-size: 14px;
  color: var(--texto); background: var(--pasta-fundo-forte); transition: transform .2s cubic-bezier(.22, 1, .36, 1);
}
.ma-trocar[open] .ma-trocar-seta { transform: rotate(180deg); }
/* o summary NAO e posicionado: o ::before dele cobre a linha do titulo (a .ma-cab-linha); o ponto das nao lidas mora na seta */
.ma-trocar-ponto { position: absolute; top: -2px; right: -2px; box-shadow: 0 0 0 2px var(--bg); }
.ma-trocar[open]::before {
  content: ""; position: fixed; inset: 0; z-index: 44; background: var(--overlay-gaveta, rgba(0, 0, 0, .38));
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.ma-trocar[open] > summary { z-index: 46; }
.ma-trocar[open] > summary::before { inset: auto; }
.ma-trocar-caixa {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 45; width: min(340px, calc(100vw - 24px)); max-height: calc(100dvh - 200px);
  overflow-y: auto; overscroll-behavior: contain; padding: 10px 8px; display: flex; flex-direction: column; gap: 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--raio); box-shadow: var(--sombra);
}
.ma-trocar-grupo .com-area-nome { padding: 0 10px 6px; }
.ma-trocar-lista { border-radius: var(--raio-sm); background: var(--pasta-fundo); overflow: hidden; }
.ma-trocar-lista li { position: relative; }
.ma-trocar-lista li + li::before { content: ""; position: absolute; top: 0; left: 44px; right: 0; height: 1px; background: var(--border); }
.ma-trocar-item { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 12px; font-size: 15px; color: var(--texto); text-decoration: none; }
.ma-trocar-item > i:first-child { flex: none; width: 20px; font-size: 20px; color: var(--texto-suave); }
.ma-trocar-item.ativo { font-weight: 600; }
.ma-trocar-item.ativo > i:first-child, .ma-trocar-fim { color: var(--accent-texto); }
.ma-trocar-item:hover, .ma-trocar-item:focus-visible { background: var(--pasta-fundo-forte); outline: none; }
.ma-trocar-nome { flex: 1 1 auto; min-width: 0; }
.ma-trocar-valor { flex: none; font-size: 13px; color: var(--texto-suave); white-space: nowrap; }
.ma-trocar-novas { color: var(--accent-texto); font-weight: 600; }
.ma-trocar-fim { flex: none; font-size: 15px; }
@media (prefers-reduced-motion: reduce) { .ma-trocar-seta { transition: none; } }

/* ---------- a ENGRENAGEM da Minha Area (dono, 21/10) ----------
   De 1280 px pra cima, ao lado do sino, a pessoa escolhe como as secoes aparecem (a classe ma-modo-<modo> no .ma-layout, posta pelo
   servidor e trocada na hora pelo minha_area_modo.js): barra e barra_recolhe sao a barra ao lado de sempre (a segunda tambem recolhe o
   menu principal, pela classe menu-recolhido no <html>); popup e o menu no titulo, como abaixo de 1280 px; cartoes e a pagina dos
   cartoes no centro (/minha-area sem secao, .ma-hub) e a secao aberta sozinha, com o Minha Area de cima voltando pros cartoes.
   Abaixo de 1280 px a engrenagem some e todo mundo tem o menu no titulo (a pagina dos cartoes segue, em 2 colunas no celular). */
.ma-engrenagem { display: none; }
@media (min-width: 1280px) {
  .ma-engrenagem { display: block; position: fixed; top: var(--sp-5); right: calc(var(--sp-5) + 52px); z-index: 46; }
  .ma-cab { padding-right: 116px; }   /* o sino e a engrenagem (44 px cada, 8 de folga) */
  .ma-layout.ma-modo-popup, .ma-layout.ma-modo-cartoes { display: block; }
  .ma-modo-popup > .ma-nav, .ma-modo-cartoes > .ma-nav { display: none; }
  .ma-modo-popup .ma-cab-sobre, .ma-modo-popup .ma-trocar { display: block; }
  .ma-modo-popup .md-caixa, .ma-modo-cartoes .md-caixa { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .ma-modo-cartoes .ma-cab-sobre { display: inline-flex; }   /* o caminho de volta pros cartoes */
}
.ma-engrenagem > summary { list-style: none; cursor: pointer; }
.ma-engrenagem > summary::-webkit-details-marker { display: none; }
.ma-engrenagem[open] > summary { border-color: var(--accent); color: var(--accent-texto); }
.ma-engrenagem-caixa {
  position: absolute; top: calc(100% + 8px); right: 0; width: 320px; padding: 10px 8px; display: flex; flex-direction: column; gap: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--raio); box-shadow: var(--sombra);
}
.ma-engrenagem-caixa .com-area-nome { padding: 2px 10px 4px; }
.ma-modos { display: flex; flex-direction: column; gap: 2px; }
.ma-modo {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 8px 12px; text-align: left; cursor: pointer;
  background: transparent; border: 0; border-radius: var(--raio-sm); color: var(--texto); font: inherit;
}
.ma-modo:hover, .ma-modo:focus-visible { background: var(--pasta-fundo-forte); outline: none; }
.ma-modo-icone { flex: none; font-size: 22px; color: var(--texto-suave); }
.ma-modo.on .ma-modo-icone { color: var(--accent-texto); }
.ma-modo-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ma-modo-nome { font-size: 14px; font-weight: 600; }
.ma-modo-sub { font-size: 12.5px; line-height: 1.35; color: var(--texto-suave); }
.ma-modo-check { flex: none; font-size: 16px; color: var(--accent-texto); visibility: hidden; }
.ma-modo.on .ma-modo-check { visibility: visible; }

/* a pagina dos cartoes: o titulo e os cartoes no centro da tela (no computador tambem na altura); 3 por linha, a linha que sobra
   (8 secoes: 3, 3 e 2) no meio; no celular 2 por linha */
.ma-hub-centro { display: flex; flex-direction: column; align-items: center; gap: var(--sp-5); }
.ma-hub-centro .ma-cab-titulo { text-align: center; }
@media (min-width: 881px) { .ma-hub-centro { min-height: calc(100dvh - 2 * var(--pad-aluno, var(--sp-5))); justify-content: center; } }
.ma-cartoes { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); width: 100%; max-width: 760px; margin: 0 auto; }
.ma-cartao {
  flex: 0 0 calc((100% - 2 * var(--sp-3)) / 3); min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: var(--sp-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--raio); text-decoration: none;
  transition: var(--transicao);
}
.ma-cartao i { font-size: 26px; color: var(--texto-suave); }
.ma-cartao-nome { font-weight: 700; font-size: 14px; letter-spacing: -.01em; color: var(--texto); }
.ma-cartao-valor { font-size: 12px; color: var(--texto-fraco); }
.ma-cartao-novas { color: var(--accent-texto); font-weight: 600; }
.ma-cartao:hover, .ma-cartao:focus-visible { border-color: var(--accent); }
.ma-cartao:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ma-cartao.ativo { border-color: var(--accent); background: var(--accent-soft); }
.ma-cartao.ativo i { color: var(--accent-texto); }
@media (max-width: 720px) { .ma-cartao { flex-basis: calc((100% - var(--sp-3)) / 2); padding: var(--sp-3); } }
.ma-cab-voltar { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; text-decoration: none; }
.ma-cab-voltar:hover, .ma-cab-voltar:focus-visible { color: var(--texto); }
@media (max-width: 720px) { .ma-cab-voltar { min-height: 44px; } }

.com-principal { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.com-cab { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.com-cab-titulo { flex: 1 1 260px; min-width: 0; }
.com-cab-titulo h1 { font-size: var(--fs-xl); margin: 0; }
.com-cab-sub { margin: 4px 0 0; font-size: 13px; color: var(--texto-secundario); }
.btn.com-btn-canais { display: none; }
.com-voltar { margin: 0; }
.com-filtro-aula { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; }
.com-filtro-aula a { color: var(--accent-texto); text-decoration: underline; }

.com-busca { position: relative; display: flex; align-items: center; gap: 8px; }
.com-busca > i { position: absolute; left: 12px; color: var(--texto-fraco); font-size: 16px; pointer-events: none; }
.com-busca .input { flex: 1; min-width: 0; padding-left: 36px; }

.com-novidade { display: flex; justify-content: center; }

/* ---------- Cards e posts (Padrao_Box_Card: .cd, raio e padding do token, CV-084) ---------- */
.com-lista, .com-respostas { display: flex; flex-direction: column; gap: 12px; }
.com-card { gap: var(--sp-3); transition: var(--transicao); }
.com-card:hover { border-color: var(--cor-primaria); box-shadow: var(--sombra); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .com-card:hover { transform: none; } }
.com-fixada { border-color: var(--accent); }
.com-card-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.com-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.com-avatar { width: 30px; height: 30px; font-size: 11.5px; }
.com-autor { font-weight: 600; font-size: 13.5px; color: var(--texto); overflow-wrap: anywhere; }
.com-quando { font-size: 12px; color: var(--texto-fraco); }
.com-selo {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--raio-full);
  font-size: 11px; font-weight: 700; border: 1px solid var(--borda); color: var(--texto-secundario);
}
.com-selo-equipe { border-color: var(--accent); color: var(--accent-texto); background: var(--cor-primaria-suave); }
body.tema-claro .com-selo-equipe { border-color: var(--accent-escuro); background: var(--branco); }
.com-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; max-width: 100%; }   /* min-width 0: chip de aula com titulo longo nao alarga a pagina no celular */
.com-chip {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 3px 10px;
  border: 1px solid var(--borda); border-radius: var(--raio-full); font-size: 12px; color: var(--texto-secundario);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
a.com-chip:hover { border-color: var(--accent); color: var(--accent-texto); }
.com-chip-fixada { border-color: var(--accent); color: var(--accent-texto); }
.com-card-link { display: flex; flex-direction: column; gap: 6px; color: inherit; }
.com-card-link:hover .com-titulo { color: var(--accent-texto); }
.com-titulo { font-size: 16px; margin: 0; color: var(--texto); overflow-wrap: anywhere; }
.com-titulo-grande { font-size: var(--fs-xl); }
.com-resumo {
  margin: 0; font-size: 14px; line-height: 1.6; color: var(--texto-secundario); white-space: pre-wrap;
  overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.com-rodape { gap: 14px; font-size: 12.5px; color: var(--texto-secundario); }
.com-num { display: inline-flex; align-items: center; gap: 5px; }
.com-status { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--texto-secundario); }
.com-status-ok { color: var(--verde-escuro); }

/* texto de aluno: escapado; quebra de linha pelo pre-wrap, nunca por <br> montado */
.com-corpo { font-size: 14.5px; line-height: 1.65; color: var(--texto); white-space: pre-wrap; overflow-wrap: anywhere; }
.com-corpo a { color: var(--accent-texto); text-decoration: underline; }
.com-mencao { color: var(--accent-texto); font-weight: 600; }
.com-imagens { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.com-imagem { display: block; border: 1px solid var(--borda); border-radius: var(--raio-sm); overflow: hidden; background: var(--fundo); }
.com-imagem img { width: 100%; height: 140px; object-fit: cover; }
.com-acoes { gap: 6px; }
.com-util.ativo { border-color: var(--accent); color: var(--accent-texto); }
.com-util-n { font-variant-numeric: tabular-nums; }
.com-moderacao {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding-top: 10px; border-top: 1px dashed var(--borda);
}
.com-moderacao-rotulo { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--texto-secundario); margin-right: 4px; }
.com-subtitulo { font-size: 15px; margin: 6px 0 0; }
.com-resposta { gap: var(--sp-3); }
.com-da-equipe { border-left: 3px solid var(--accent); }
.com-filhos { display: flex; flex-direction: column; gap: var(--sp-3); padding-left: 16px; }   /* sem a linha cinza (dono, 07/10): o recuo basta */
.com-filho { box-shadow: none; }
.com-fechada { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; color: var(--texto-secundario); }

/* edicao no lugar (o autor, no proprio post) */
.com-edicao { display: flex; flex-direction: column; gap: 8px; }
.com-edicao .input { width: 100%; }
.com-edicao .com-texto { min-height: 120px; }

/* ---------- Composer (nova conversa e resposta) ---------- */
.com-form .campo .input, .com-composer .input { width: 100%; }
.com-texto { height: auto; min-height: 110px; padding: 10px 12px; resize: vertical; line-height: 1.55; }
.com-opcional { font-weight: 400; color: var(--texto-fraco); }
.com-campo-texto, .com-composer { position: relative; }
.com-drop { padding: 18px; }
.com-aviso { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--texto-secundario); }
.com-aviso i { font-size: 16px; margin-top: 1px; flex: 0 0 auto; }
.com-respondendo {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 4px 4px 4px 12px; border: 1px solid var(--borda); border-radius: var(--raio-sm); font-size: 13px;
}
.com-similares { border: 1px solid var(--borda); border-radius: var(--raio-sm); padding: 10px 12px; background: var(--fundo); }
.com-similares-titulo { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 12.5px; font-weight: 700; color: var(--texto-secundario); }
.com-similares-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.com-similares-lista a { display: flex; flex-direction: column; font-size: 13px; color: var(--texto); }
.com-similares-lista a:hover { color: var(--accent-texto); }
.com-similares-lista small { color: var(--texto-fraco); font-size: 11.5px; }
/* @ mencao: lista de quem pode ser chamado, logo abaixo do campo. O campo mora numa caixa (.com-mencao-caixa,
   position: relative) e a lista ancora nela com top: 100% (segue o campo mesmo redimensionado). Sem posicao calculada em JS. */
.com-mencao-caixa { position: relative; display: flex; flex-direction: column; }
.com-mencoes {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 85; margin-top: 4px; padding: 4px 0;
  list-style: none; background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio-sm);
  box-shadow: var(--sombra); max-height: 220px; overflow-y: auto;
}
.com-mencoes li { padding: 8px 12px; font-size: 13.5px; cursor: pointer; color: var(--texto); }
.com-mencoes li.ativo, .com-mencoes li:hover { background: var(--cor-primaria-suave); color: var(--accent-texto); }

/* ---------- Rolagem infinita: carregando, "Carregar mais" e o fim explicito ---------- */
.com-fim { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); padding: 8px 0 24px; }
.com-sentinela { width: 100%; height: 1px; }
.com-fim-lista { margin: 0; font-size: 12.5px; color: var(--texto-fraco); }

@media (max-width: 880px) {
  /* no celular, uma coluna: o cabecalho (com o botao Canais), a lista dos chats quando aberta e o feed */
  .com-layout { display: flex; flex-direction: column; }
  .com-centro { display: contents; }
  .com-layout > .com-canais { order: 1; }
  .com-centro > .com-cab { order: 0; }
  .com-centro > .com-miolo { order: 2; }
  .com-canais { display: none; position: static; max-height: none; }
  .com-layout.canais-abertos .com-canais { display: flex; }
  .btn.com-btn-canais { display: inline-flex; }
  .com-principal { max-width: none; }
}
@media (max-width: 520px) {
  .com-imagens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .com-imagem img { height: 110px; }
  .com-filhos { padding-left: 10px; }
}
/* alvos de toque de 44px no celular (Responsividade_Sempre, CV-194): canal da lista, chip que e link e SelectBusca
   (o campo, a busca do painel e cada opcao). Acima de 720px nada muda. */
@media (max-width: 720px) {
  .com-canal { min-height: 44px; }
  a.com-chip { min-height: 44px; }
  .selectbusca .sb-display, .selectbusca .sb-search { min-height: 44px; }
  .selectbusca .sb-opt { min-height: 44px; display: flex; align-items: center; }
}

/* ---------- O Feed, as pastas dos chats, o compositor e o modal da publicacao (dono, 08/10) ---------- */
.com-layout.com-sem-canais { grid-template-columns: minmax(0, 1fr); }   /* sem Feed e sem chat (a turma sem a comunidade): uma coluna */
.com-canal-feed { color: var(--texto); font-weight: 600; }
.com-canais-topo > .com-area-nome { padding-top: 12px; }
.com-canal-icone { color: var(--texto-fraco); }
.com-canal:hover .com-canal-icone, .com-canal.ativo .com-canal-icone { color: inherit; }
/* a pasta: o item PAI da arvore, que so agrupa (abre e fecha; nunca recebe conversa). Ela se distingue do canal (dono, 09/10): o cabecalho
   com fundo, a pasta PREENCHIDA na cor da marca (aberta ou fechada), o nome em caixa alta, a quantidade de canais e a seta na direita; os
   canais dela ficam numa guia recuada, com a linha da pasta na esquerda */
.com-pasta { display: flex; flex-direction: column; margin-top: 6px; }
.com-pasta-cab {
  display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 8px 6px 10px; border-radius: var(--raio-sm);
  list-style: none; cursor: pointer; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--texto);
  background: var(--pasta-fundo);
}
.com-pasta-cab::-webkit-details-marker { display: none; }
.com-pasta-cab:hover { background: var(--pasta-fundo-forte); }
.com-pasta-cab:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: -2px; }
.com-pasta-icone { display: inline-flex; flex: 0 0 auto; color: var(--accent-texto); font-size: 17px; }
.com-pasta-aberta, .com-pasta[open] > .com-pasta-cab .com-pasta-fechada { display: none; }
.com-pasta[open] > .com-pasta-cab .com-pasta-aberta { display: inline; }
.com-pasta-n {
  flex: 0 0 auto; min-width: 20px; height: 18px; padding: 0 6px; border-radius: var(--raio-full); font-size: 10.5px; line-height: 18px;
  text-align: center; letter-spacing: 0; color: var(--texto-secundario); background: var(--pasta-fundo-forte);
}
.com-pasta-seta { font-size: 13px; flex: 0 0 auto; color: var(--texto-fraco); transition: transform .15s ease; transform: rotate(-90deg); }
.com-pasta[open] > .com-pasta-cab .com-pasta-seta { transform: none; }
.com-pasta-nome { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.com-pasta-canais {
  display: flex; flex-direction: column; gap: 2px; margin: 4px 0 2px 16px; padding-left: 4px; border-left: 1px solid var(--border);
}
@media (prefers-reduced-motion: reduce) { .com-pasta-seta { transition: none; } }

.com-compor-avatar { width: 40px; height: 40px; flex: 0 0 auto; font-size: 13px; }   /* a foto de quem publica, no modal */

/* o cabecalho: na direita a busca, o menu (o sanduiche) e o + Postar, na altura do sino (44 px) */
.com-cab-acoes { display: flex; align-items: center; gap: 12px; flex: 1 1 420px; justify-content: flex-end; min-width: 0; }
.com-cab-acoes .com-busca { flex: 1 1 220px; max-width: 380px; min-width: 0; }
.com-cab-acoes .com-busca .input { height: 44px; border-radius: var(--raio-full); }
.btn.com-postar { flex: 0 0 auto; min-height: 44px; border-radius: var(--raio-full); padding: 0 18px; }
.com-menu { position: relative; flex: 0 0 auto; }
.btn.com-menu-btn {
  width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; border-radius: var(--raio-full); list-style: none; cursor: pointer;
}
.com-menu-btn::-webkit-details-marker { display: none; }
.com-menu-btn i { font-size: 20px; }
.com-menu[open] > .com-menu-btn, .btn.com-menu-btn:hover { border-color: var(--accent); color: var(--accent-texto); }
/* com filtro ou ordem fora do padrao o botao ganha o ponto laranja (a lista nao e a de sempre) */
.btn.com-menu-btn.com-menu-filtrado { position: relative; }
.btn.com-menu-btn.com-menu-filtrado::after {
  content: ""; position: absolute; top: 6px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
}
.com-menu-painel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: 270px; padding: 6px;
  background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra-lg);
  display: flex; flex-direction: column; gap: 2px;
}
.com-menu-titulo {
  margin: 6px 10px 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-fraco);
}
.com-menu-item {
  display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 10px; border-radius: var(--raio-sm);
  font-size: 13.5px; color: var(--texto-secundario); white-space: nowrap;
}
.com-menu-item i { font-size: 17px; flex: 0 0 auto; }
.com-menu-item:hover, .com-menu-item:focus-visible { background: var(--cor-primaria-suave); color: var(--texto); }
.com-menu-item.on { color: var(--accent-texto); font-weight: 600; }
.com-menu-marca { margin-left: auto; visibility: hidden; }
.com-menu-item.on .com-menu-marca { visibility: visible; }

/* a coluna da direita: o calendario do mes e os proximos eventos, e as propagandas embaixo */
.com-lado { position: sticky; top: var(--sp-5); flex-direction: column; gap: 12px; min-width: 0; }
.com-lado > * { flex-shrink: 0; }   /* o cartao nao encolhe (a imagem da propaganda nao e cortada): quem rola e a coluna */   /* o top no computador: abaixo do cabecalho */
.cd.com-agenda { gap: 12px; padding: 14px; }
.com-agenda-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.com-lado-titulo { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 14px; color: var(--texto); }
.com-lado-titulo i { color: var(--accent-texto); font-size: 17px; }
.com-lado-link { font-size: 12.5px; color: var(--accent-texto); }
.com-lado-link:hover { text-decoration: underline; }
.com-cal { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12px; text-align: center; }
.com-cal th { padding: 2px 0 6px; font-size: 10.5px; font-weight: 700; color: var(--texto-fraco); }
.com-cal td { padding: 2px 0; color: var(--texto-secundario); }
.com-cal-dia { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; position: relative; }
.com-cal td.fora { color: var(--texto-fraco); opacity: .45; }
.com-cal td.hoje .com-cal-dia { background: var(--accent); color: var(--texto-sobre-accent); font-weight: 700; }
.com-cal td.tem-evento .com-cal-dia { font-weight: 700; color: var(--texto); }
.com-cal td.tem-evento .com-cal-dia::after {
  content: ""; position: absolute; bottom: 2px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--accent);
}
.com-cal td.hoje.tem-evento .com-cal-dia { color: var(--texto-sobre-accent); }
.com-cal td.hoje.tem-evento .com-cal-dia::after { background: var(--texto-sobre-accent); }
.com-proximos { list-style: none; margin: 0; padding: 10px 0 0; display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--border); }
.com-proximos li { display: flex; align-items: center; gap: 12px; min-width: 0; }
.com-proximo-data {
  display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 0 0 auto; width: 40px; height: 40px;
  border-radius: var(--raio-sm); background: var(--cor-primaria-suave); color: var(--accent-texto); font-size: 10px; text-transform: uppercase; line-height: 1.1;
}
.com-proximo-data strong { font-size: 15px; }
.com-proximo-txt { display: flex; flex-direction: column; min-width: 0; color: var(--texto); }
.com-proximo-titulo { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.com-proximo-txt:hover .com-proximo-titulo { color: var(--accent-texto); }
.com-proximo-hora { font-size: 11.5px; color: var(--texto-fraco); }
.cd.com-anuncio { padding: 0; gap: 0; overflow: hidden; color: inherit; }
.com-anuncio-img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.com-anuncio-txt { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px 12px; }
.com-anuncio-titulo { font-size: 13.5px; font-weight: 600; color: var(--texto); }
.com-anuncio-sub { font-size: 12px; color: var(--texto-secundario); }
a.com-anuncio:hover .com-anuncio-titulo { color: var(--accent-texto); }

/* a pergunta da aula no card: o curso e a aula em letra pequena e cinza, um em cada linha, e o botao de ir pra aula a direita */
.com-origem { display: flex; align-items: center; gap: 8px; margin-left: auto; min-width: 0; max-width: 60%; }
.com-origem-textos { display: flex; flex-direction: column; align-items: flex-end; min-width: 0; text-align: right; }
.com-origem-linha { max-width: 100%; font-size: 11.5px; line-height: 1.4; color: var(--texto-fraco); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn-icone.com-origem-ir { flex: 0 0 auto; width: 36px; height: 36px; border: 1px solid var(--borda); border-radius: var(--raio-sm); }
.btn-icone.com-origem-ir i { font-size: 18px; }
.btn-icone.com-origem-ir:hover { border-color: var(--accent); color: var(--accent-texto); }

/* o modal da publicacao: quem publica e onde no topo, o titulo grande, a descricao e os anexos */
.com-post-quem { display: flex; align-items: flex-start; gap: 12px; }
.com-post-quem-textos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.com-post-autor { font-size: 14px; color: var(--texto); overflow-wrap: anywhere; }
.com-post-onde { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--texto-secundario); overflow-wrap: anywhere; }
.campo.com-post-canal { margin: 0; }
.com-post-canal label { font-size: 12px; color: var(--texto-secundario); }
.input.com-post-titulo { width: 100%; min-height: 48px; font-size: 17px; font-weight: 600; }
.com-post-rodape { flex-wrap: wrap; }
.com-post-rodape .im-msg:not(:empty) { flex: 1 1 100%; text-align: right; }   /* o aviso numa linha so dele, os botoes embaixo */
.com-post-descricao { min-height: 150px; }

@media (max-width: 720px) {
  .btn-icone.com-origem-ir { width: 44px; height: 44px; }
  .com-menu-item { min-height: 44px; }
}
@media (max-width: 520px) {
  /* no celular o curso e a aula descem pra baixo do autor, alinhados a esquerda, com o botao na direita */
  .com-origem { max-width: none; width: 100%; margin-left: 0; justify-content: space-between; }
  .com-origem-textos { align-items: flex-start; text-align: left; }
  .com-cab-acoes { flex-wrap: wrap; }
  .com-cab-acoes .com-busca { flex-basis: 100%; max-width: none; order: 3; }
  .com-menu-painel { width: min(270px, calc(100vw - 24px)); }
}

/* ======================================================================
   Fase 6 (parte B): Visao geral (KPIs), Caixa da equipe e lista de canais
   ====================================================================== */

/* ---------- KPIs da Visao geral (Padrao_KPI_Dashboard, CV-128 e CV-129): so em dashboard, nunca em listagem ---------- */
.mg-kpis { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin-bottom: 18px; }
@media (max-width: 1300px) { .mg-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .mg-kpis { grid-template-columns: repeat(2, 1fr); gap: 8px; } }
.mg-kpi {
  background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio); padding: 14px;
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px;
}
.mg-kpi::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--borda); }
.mg-kpi.ac-ok::before  { background: linear-gradient(90deg, var(--verde-claro), var(--verde)); }
.mg-kpi.ac-neutro::before { background: linear-gradient(90deg, var(--kpi-cinza-a), var(--kpi-cinza-b)); }
.mg-kpi.pos::before { background: linear-gradient(90deg, var(--verde-claro), var(--verde)); }
.mg-kpi.neg::before { background: linear-gradient(90deg, var(--vermelho-claro), var(--vermelho)); }
.mg-kpi .ico {
  width: 44px; height: 44px; border-radius: var(--raio); display: grid; place-items: center; font-size: 22px;
  flex-shrink: 0; align-self: center; background: var(--fundo); color: var(--texto-secundario);
}
.mg-kpi.ac-ok .ico, .mg-kpi.pos .ico { background: var(--verde-suave); color: var(--verde-escuro); }
.mg-kpi.neg .ico { background: var(--vermelho-suave); color: var(--vermelho-escuro); }
.mg-kpi .corpo { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.mg-kpi .lbl {
  font-size: 10.5px; color: var(--texto-secundario); text-transform: uppercase; letter-spacing: .03em; font-weight: 700;
  line-height: 1.2; min-height: 25px; display: flex; align-items: flex-end;
}
.mg-kpi .val {
  font-size: 20px; font-weight: 800; letter-spacing: -.5px; line-height: 1; font-variant-numeric: tabular-nums;
  margin-top: 3px; color: var(--texto); overflow-wrap: anywhere;
}
.mg-kpi .disc { font-size: 10.5px; color: var(--texto-fraco); margin-top: 4px; line-height: 1.2; font-style: italic; min-height: 14px; }
.mg-kpi.pos { background: var(--verde-suave); border-color: var(--verde-borda); }
.mg-kpi.pos .lbl, .mg-kpi.pos .val { color: var(--verde-escuro); }
.mg-kpi.neg { background: var(--vermelho-suave); border-color: var(--vermelho-borda); }
.mg-kpi.neg .lbl, .mg-kpi.neg .val { color: var(--vermelho-escuro); }
.mg-legenda { margin: -6px 0 18px; font-size: 12px; line-height: 1.5; color: var(--texto-suave); max-width: 760px; }
@media (max-width: 720px) {
  .mg-kpi { padding: 12px 11px; gap: 9px; }
  .mg-kpi .ico { width: 36px; height: 36px; font-size: 18px; border-radius: var(--raio-sm); }
  .mg-kpi .lbl { font-size: 9.5px; min-height: 23px; }
  .mg-kpi .val { font-size: 18px; }
  .mg-kpi .disc { font-size: 10px; min-height: 13px; }
}

/* ---------- Caixa da equipe: listagem em cards (sem KPI), faixas por tempo de espera, resposta ali mesmo ---------- */
.cx-lista { display: flex; flex-direction: column; gap: 12px; }
.cx-lista:has(> .vz) { flex: 1 1 auto; }   /* so quando a lista esta vazia: o .vz{flex:1} centra na altura que sobrou; com conversas o paginador segue logo abaixo */
.cx-faixa {
  display: flex; align-items: center; gap: 8px; margin: 10px 0 0;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-secundario);
}
.cx-faixa:first-child { margin-top: 0; }
.cx-faixa::before { content: ""; width: 9px; height: 9px; border-radius: var(--raio-full); background: var(--verde); flex: 0 0 auto; }
.cx-faixa-24a72::before { background: var(--ambar); }
.cx-faixa-mais72::before { background: var(--vermelho); }
.cx-item { gap: var(--sp-3); }
.cx-espera { font-variant-numeric: tabular-nums; }
.cx-bloqueado { border-style: dashed; }
.cx-bloqueado .com-autor { display: inline-flex; align-items: center; gap: var(--sp-2); }
.cx-espera.faixa-menos24 { background: var(--verde-suave); color: var(--verde-escuro); }
.cx-espera.faixa-24a72 { background: var(--ambar-suave); color: var(--ambar-escuro); }
.cx-espera.faixa-mais72 { background: var(--vermelho-suave); color: var(--vermelho-escuro); }
.cx-conversa { display: flex; flex-direction: column; gap: 6px; color: inherit; }
.cx-conversa:hover .com-titulo { color: var(--accent-texto); }
.cx-resposta { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px dashed var(--borda); }
.cx-resposta .input { width: 100%; }
.cx-resposta .com-texto { min-height: 84px; }
.cx-resposta .im-acao { margin-top: 0; }
.cx-resposta-nota { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; color: var(--verde-escuro); font-weight: 600; }
.cx-carregando { min-height: 300px; }
.sino-caixa {
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 14px;
  border-bottom: 1px solid var(--borda); font-size: 13px; font-weight: 600; color: var(--accent-texto);
}
.sino-caixa:hover { background: var(--fundo); }
.vz.vz-ok .vz-icone { color: var(--verde); }
@media (max-width: 720px) {
  .cx-barra .fu-presets button { height: 44px; min-height: 44px; }
  .cx-item .btn { min-height: 44px; }
}

/* ---------- Lista de canais (/equipe/canais): tabela paginada com o switch Ativo e o modal de canal ---------- */
.cn-nome { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cn-nome i { color: var(--texto-fraco); font-size: 16px; flex: 0 0 auto; }
.cn-nome-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* nome longo corta com reticencias (o texto inteiro fica no title da celula): o switch e a acao cabem sem rolar de lado */
.tabela-wrap td[data-col="canal"] { max-width: 260px; }
.cn-turmas { max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.cn-turmas-lista { display: flex; flex-wrap: wrap; gap: 6px; }
.cn-turma-chip {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 3px 4px 3px 10px;
  border: 1px solid var(--borda); border-radius: var(--raio-full); font-size: 12.5px; color: var(--texto);
}
.cn-turma-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-turma-chip button {
  width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; padding: 0;
  border: none; border-radius: var(--raio-full); background: transparent; color: var(--texto-secundario); cursor: pointer;
}
.cn-turma-chip button:hover { background: var(--fundo); color: var(--texto); }
.cn-area-fixa { margin: 0; padding: 9px 12px; border: 1px solid var(--borda); border-radius: var(--raio-sm); background: var(--fundo); font-size: 14px; }
.cn-dica { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--texto-secundario); }
/* as pastas da lista (dono, 08/10): o cartao acima da tabela, uma linha por pasta com o lapis e a lixeira */
.cn-pastas { margin-bottom: var(--sp-4); }
.cn-pastas-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cn-pasta { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 4px 4px 4px 8px; border-bottom: 1px solid var(--borda); }
.cn-pasta:last-child { border-bottom: 0; }
.cn-pasta-icone { color: var(--texto-fraco); font-size: 18px; flex: 0 0 auto; }
.cn-pasta-nome { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-pasta-info { flex: 0 0 auto; font-size: 12.5px; color: var(--texto-secundario); white-space: nowrap; }
.tabela-wrap td[data-col="pasta"] { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto-secundario); }
@media (max-width: 720px) {
  .tabela-wrap td[data-col="canal"] { max-width: 170px; }
  .cn-turma-chip button { width: 44px; height: 44px; }
  .cn-turma-chip { padding-right: 0; }
  .cn-pasta { flex-wrap: wrap; }
  .cn-pasta-info { order: 3; flex-basis: 100%; padding-left: 28px; white-space: normal; }
}
/* o icone do canal (dono, 09/10): a previa, a busca no catalogo do Phosphor e a grade (a .mi-previa e a .mi-icones sao as do menu da Area) */
.cn-icone { display: flex; flex-direction: column; gap: 8px; }
.cn-icone-linha { display: flex; align-items: center; gap: var(--sp-3); }
.cn-icone-linha .input { flex: 1 1 auto; min-width: 0; }
.cn-icone-linha .btn { flex: 0 0 auto; }
.cn-icones { max-height: 264px; overflow-y: auto; padding: 2px; }
/* as abas de categoria do seletor de icone (dono, 21/10; static/js/canal_icone.js): o toggle tipo 1 que quebra em linhas */
.ci-abas.fu-presets { display: flex; flex-wrap: wrap; height: auto; width: 100%; }
.ci-abas.fu-presets button { flex: 0 1 auto; height: auto; min-height: 34px; padding: 6px 10px; }
.ci-abas.fu-presets button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (max-width: 720px), (pointer: coarse) { .ci-abas.fu-presets button { min-height: 44px; } }
/* no celular as abas ficam numa linha so, que rola de lado DENTRO da caixa (17 abas quebradas tomavam a tela inteira) */
@media (max-width: 720px) { .ci-abas.fu-presets { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; } .ci-abas.fu-presets button { flex: 0 0 auto; white-space: nowrap; } }
/* a ordem da lista (dono, 09/10): a arvore dos chats da Area, com Subir e Descer em cada item e a pasta com os canais dela recuados */
.cn-ordem { margin-bottom: var(--sp-4); }
.cn-ordem > .cn-dica { margin-bottom: var(--sp-3); }
.cn-ordem-lista, .cn-ordem-filhos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cn-ordem-filhos { margin-left: 28px; border-left: 2px solid var(--borda); padding-left: 8px; }
.cn-ordem-item { border-bottom: 1px solid var(--borda); }
.cn-ordem-item:last-child { border-bottom: 0; }
.cn-ordem-filhos .cn-ordem-item { border-bottom: 0; }
.cn-ordem-item[draggable="true"] > .cn-ordem-linha { cursor: grab; }
.cn-ordem-item.arrastando { opacity: .45; }
.cn-ordem-item.arrastando > .cn-ordem-linha { cursor: grabbing; }
.cn-ordem-linha { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 4px 4px 8px; }
.cn-ordem-icone { color: var(--texto-fraco); font-size: 18px; flex: 0 0 auto; }
.cn-ordem-pasta > .cn-ordem-linha .cn-ordem-nome { font-weight: 600; }
.cn-ordem-nome { flex: 1 1 auto; min-width: 0; font-size: 14px; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-ordem-mover { display: inline-flex; gap: 4px; flex: 0 0 auto; margin-left: auto; }
.cn-mover[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.cn-mover[aria-disabled="true"]:hover { background: transparent; color: var(--texto-secundario); }
@media (max-width: 720px) {
  .cn-icone-linha { flex-wrap: wrap; }
  .cn-icone-linha .input { flex-basis: calc(100% - 44px - var(--sp-3)); }
  .cn-icone-linha .btn { min-height: 44px; }
  .cn-ordem-filhos { margin-left: 12px; }
  .cn-mover { width: 44px; height: 44px; }
}
/* ======================================================================
   Fase 7: area da aula. No computador o video fica com as abas ao lado (decisao 1 do dono); no celular o video fica fixo no
   topo e as abas rolam de lado. Tudo por token; icone com tamanho por classe, nunca style inline.
   ====================================================================== */
.aula-grid {
  display: grid;
  /* O painel de abas tem que caber as 4 abas numa fileira so, nos valores do Padrao_Tabs (padding 10px 16px, gap 6px, 13px/600:
     474 px de abas + 18 de vao = 492 px, medidos no navegador). A fileira sangra ate a borda do painel, entao o painel precisa de
     uns 500 px; o video fica com o que sobra (468 px a 1280, 554 a 1366, 628 a 1440). Abaixo de 1280 o video e o painel nao cabem
     lado a lado com essa largura: uma coluna so (video em cima, abas embaixo), como no tablet. */
  grid-template-columns: minmax(0, 1fr) clamp(500px, 40%, 540px);
  grid-template-areas: "midia abas" "info abas" "modulos abas";
  grid-template-rows: auto auto 1fr;
  gap: var(--sp-4);
  align-items: start;
}
.aula-midia { grid-area: midia; min-width: 0; }
.aula-info { grid-area: info; min-width: 0; }
.aula-modulos { grid-area: modulos; min-width: 0; }
.aula-abas {
  --pad-abas: var(--sp-4);
  grid-area: abas; min-width: 0; position: sticky; top: var(--sp-4);
  background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio); padding: var(--pad-abas);
}
.player-video.player-video-4x3 { aspect-ratio: 4 / 3; }
.player-texto a, .aula-descricao a { color: var(--accent-texto); text-decoration: underline; text-underline-offset: 2px; }
/* a imagem do texto rico (o html_rico guarda o width e o height do CursEduca): o max-width do base.css encolhe a largura e, sem o
   height: auto, a altura ficava a do atributo e a imagem esticava na vertical (dono, 20/10, aula 3). Vale em todo lugar que desenha o texto rico. */
.player-texto img, .aula-descricao img, .dz-texto img, .onb-texto img, .ind-regras-texto img, .io-regras img, .termo-texto img,
.lgpd-resumo img, .cur-descricao img, .cur-instr-bio img { height: auto; }
/* estado vazio sem card, sem borda e sem fundo (Padrao_Estado_Vazio): so o bloco centrado */
.aula-midia .aula-vazio { min-height: 260px; }

/* barra de progresso do curso (<progress>: sem largura em style) */
.aula-barra {
  -webkit-appearance: none; appearance: none; flex: 1; min-width: 60px; height: 6px; border: 0; border-radius: var(--raio-full);
  background: var(--border); overflow: hidden;
}
.aula-barra::-webkit-progress-bar { background: var(--border); border-radius: var(--raio-full); }
.aula-barra::-webkit-progress-value { background: linear-gradient(90deg, var(--accent), var(--accent-hover)); border-radius: var(--raio-full); }
.aula-barra::-moz-progress-bar { background: linear-gradient(90deg, var(--accent), var(--accent-hover)); border-radius: var(--raio-full); }

/* aula que abre fora daqui (YouTube e o resto que nao e do Panda) */
.aula-link { flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--sp-4); padding: var(--sp-5); }
.aula-link-icone { font-size: 40px; color: var(--accent); flex: 0 0 auto; line-height: 1; }
.aula-link-texto { display: flex; flex-direction: column; gap: 4px; flex: 1 1 220px; min-width: 0; font-size: var(--fs-sm); color: var(--text-dim); }
.aula-link-texto strong { color: var(--text); font-size: var(--fs-base); }

/* titulo, acoes e a linha de status (Padrao_Loading_Estado: gerundio na linha, o botao so desabilita) */
.aula-info .aula-titulo { margin: var(--sp-1) 0 0; }
.aula-info .aula-acoes { margin-top: var(--sp-3); }
.aula-status { margin: var(--sp-2) 0 0; min-height: 20px; font-size: 12.5px; color: var(--texto-secundario); }
.aula-status.ok { color: var(--verde-escuro); font-weight: 600; }
.aula-status.erro { color: var(--danger-texto); font-weight: 600; }
.aula-status.carregando { color: var(--texto); font-weight: 600; }
/* Salvar, Curtir e Encaminhar da aula (Fase 18, dono 08/10, estilo Instagram; o pulo do icone e do tema, temas/ios-dark.css): ligado, o
   icone enche (o marcador na cor do texto, o coracao na cor da marca); no celular so o icone, e o rotulo fica pro leitor de tela */
.aula-social { display: inline-flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.btn-social i { font-size: 18px; }
.btn-social.ligado { color: var(--text); }
.btn-curtir.ligado i, .btn-social.ligado#btnFavoritar i { color: var(--accent); }   /* a aula salva tambem na cor da marca (dono, 15/10: o padrao do coracao) */
.aula-concluir-seta { display: none; }
@media (max-width: 720px) {
  .btn-social { min-width: 44px; padding-left: 0; padding-right: 0; justify-content: center; }
  .btn-social .rotulo { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* a linha toda so de icones (dono, 15/10): Anterior, Concluir e proxima (o certo e a seta) e Proxima na esquerda, Salvar, Curtir e
     Encaminhar empurrados pra direita; cada botao com 44 px e o nome (.rotulo) so pro leitor de tela */
  .aula-acoes .btn { min-width: 44px; padding-left: 0; padding-right: 0; justify-content: center; gap: 2px; }
  .aula-acoes .btn .rotulo { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .aula-acoes #btnConcluir { padding-left: 12px; padding-right: 12px; }
  /* o Concluir no PADRAO DO CORACAO (dono, 15/10): o fundo e a borda nunca mudam (os do botao comum, nem o laranja do primario nem a borda
     do ativo); concluida, so o certo CHEIO fica laranja e da o pulo (temas/ios-dark.css, o .pulo posto pelo player.js) */
  .aula-acoes #btnConcluir, .aula-acoes #btnConcluir.btn-primario, .aula-acoes #btnConcluir.ativo {
    background: var(--surface); border-color: var(--border); color: var(--text); box-shadow: none;
  }
  .aula-acoes #btnConcluir.ativo i:first-child { color: var(--accent); }
  .aula-acoes #btnConcluir i:first-child { font-size: 20px; }
  .aula-acoes #btnConcluir[data-concluida="0"][data-tem-proxima="1"] .aula-concluir-seta { display: inline-block; }
  .aula-acoes .aula-social { margin-left: auto; }
}

/* O AVISO FLUTUANTE da area do aluno (Fase 18, dono 08/10; static/js/aviso_flutuante.js): o cartao de vidro do iOS (o mesmo vidro da barra
   de abas) no canto de baixo a direita, que entra subindo com a mola e some em 3 s; no celular fica acima da barra de abas. Nunca pega o
   clique e nunca cobre a tela: so o recado de que deu certo */
.aviso-flutuante {
  position: fixed; right: 24px; bottom: 24px; z-index: 70; display: flex; align-items: center; gap: 12px;
  max-width: min(360px, calc(100vw - 32px)); padding: 8px 18px 8px 8px; border-radius: var(--raio-full);
  background: var(--tabbar-fundo, var(--surface)); color: var(--text); font-size: 14px; font-weight: 600; letter-spacing: -.01em;
  -webkit-backdrop-filter: var(--vidro-blur, blur(24px) saturate(180%)); backdrop-filter: var(--vidro-blur, blur(24px) saturate(180%));
  border: 1px solid var(--tabbar-borda, var(--border)); box-shadow: var(--tabbar-sombra, var(--sombra));
  opacity: 0; transform: translateY(18px) scale(.94); pointer-events: none;
  transition: opacity .22s ease, transform .5s cubic-bezier(.2, .9, .3, 1.25);
}
.aviso-flutuante.visivel { opacity: 1; transform: none; }
.aviso-flutuante.saindo { opacity: 0; transform: translateY(10px) scale(.97); transition: opacity .24s ease, transform .26s ease; }
.aviso-flutuante-icone { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--texto-sobre-accent); font-size: 17px; }
.aviso-flutuante-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 880px) {
  html.com-tabbar .aviso-flutuante { right: 16px; bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  .aviso-flutuante, .aviso-flutuante.saindo { transform: none; transition: opacity .2s ease; }
}

/* abas (Padrao_Tabs): ativa em --cor-primaria com 2px, regua de 1px na fileira, <button> com icone em toda aba */
/* UMA fileira so, em qualquer largura: nunca quebra em 2 linhas (a regua de 1px ficava so sob a ultima). Sangra ate a borda do
   painel (margem negativa = o padding dele) e, se faltar largura (fonte de reserva, zoom), rola de lado como no celular. */
.aula-tabs {
  display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--borda) transparent;
  border-bottom: 1px solid var(--borda); margin: 0 calc(-1 * var(--pad-abas)) var(--sp-4);
}
.aula-tab {
  flex: 0 0 auto; white-space: nowrap; padding: 10px 16px; font-size: 13px; font-weight: 600; color: var(--texto-secundario);
  cursor: pointer; border: none; background: transparent; border-bottom: 2px solid transparent;
  display: inline-flex; align-items: center; gap: 6px; font-family: inherit;
}
.aula-tab:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: -2px; }   /* dentro da aba: o overflow da fileira cortaria o anel de fora */
.aula-tab:hover { color: var(--texto); }
.aula-tab.ativo { color: var(--cor-primaria); border-bottom-color: var(--cor-primaria); }
.aula-tab i { font-size: 16px; flex: 0 0 auto; }
.aula-tabs-pilula { display: none; }       /* a pilula que desliza e do tema do aluno (temas/ios-dark.css); fora dele, a aba de sempre */
.rotulo-aba { white-space: nowrap; }
.aula-pane { display: none; max-height: calc(100vh - 220px); overflow-y: auto; }
.aula-pane.ativo { display: block; }
/* Fase 18 (dono, 07/10): no computador (as abas ao lado do video) a caixa vai ate a linha de baixo da barra do menu (a altura que o
   player.js mede, --abas-alto) e o quadro rola dentro dela; a barra de rolagem do quadro se afasta do conteudo (10 px) e fica a 6 px da borda
   da caixa (o quadro entra no respiro da caixa e devolve com o padding: o conteudo fica com a mesma largura) */
@media (min-width: 1280px) {
  .aula-abas.abas-cheia { display: flex; flex-direction: column; height: var(--abas-alto); top: var(--abas-topo, var(--sp-4));
    margin-bottom: calc(-1 * var(--abas-sobra, 0px)); }   /* entra no respiro de baixo da pagina sem a grade crescer (player.js, 08/10) */
  /* so o quadro encolhe e rola: a fileira das abas (que tem overflow e, por isso, encolheria) fica do tamanho dela, com o quadro cheio de
     duvidas ou nao (dono, 07/10: com muitas interacoes as abas ficavam espremidas) */
  .aula-abas.abas-cheia > * { flex-shrink: 0; }
  .aula-abas.abas-cheia .aula-pane.ativo { flex: 1 1 0; min-height: 0; max-height: none; }
  .aula-pane { margin-right: calc(6px - var(--pad-abas)); padding-right: calc(var(--pad-abas) - 6px); }
  /* o caderno vai ate o fim da caixa (dono, 07/10: nada mais mora ali): as linhas crescem ate a frase de salvar, sem a alca de redimensionar */
  .aula-abas.abas-cheia #pane-caderno.ativo { display: flex; flex-direction: column; }
  .aula-abas.abas-cheia #pane-caderno .anotacao-texto { flex: 1 1 auto; min-height: 220px; resize: none; }
}
/* RECOLHER as abas (dono, 15/10, como o botao de recolher o menu do aluno): so no computador, com as abas ao lado do video. O botao redondo
   fica no canto direito da caixa, na linha da barra das abas; recolhido (.abas-recolhidas na .aula-grid, posta pelo player.js e guardada pela
   sessao do navegador), a caixa some e o video, o titulo e o Conteudo do curso ocupam a largura. No lugar dela fica o RAIL (dono, 15/10):
   os mesmos icones das abas numa coluna em pilula, presa na direita, centrada na altura da tela e na linha do sino, com a aba aberta marcada;
   o clique num icone abre a caixa ja naquela aba (player.js). Abaixo de 1280 px as abas ficam embaixo do video: sem botao nem rail. */
.abas-recolher { display: none; }
@media (min-width: 1280px) {
  .aula-abas { --abas-botao: 28px; }
  .abas-recolher {
    display: inline-flex; align-items: center; justify-content: center; position: absolute; z-index: 3;
    top: calc(var(--pad-abas) + 25px - var(--abas-botao) / 2); right: var(--pad-abas);
    width: var(--abas-botao); height: var(--abas-botao); padding: 0; border-radius: var(--raio-full); border: 1px solid var(--border);
    background: var(--bg); color: var(--text-dim); cursor: pointer; box-shadow: var(--sombra-sm);
  }
  .abas-recolher:hover { color: var(--text); border-color: var(--text-fraco); }
  .abas-recolher:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .abas-recolher i { font-size: 13px; transition: transform var(--transicao); }
  .aula-grid.abas-recolhidas .aula-abas,
  .aula-grid.abas-recolhidas .aula-abas.abas-cheia {
    display: block; height: auto; margin-bottom: 0; padding: 0; border: 0; background: none; box-shadow: none;
  }
  .aula-grid.abas-recolhidas .aula-abas::before { display: none; }
  /* com o id: o caderno aberto tem regra propria com id (#pane-caderno.ativo, o caderno ate o fim da caixa) e ficava a vista atras do rail */
  .aula-grid.abas-recolhidas #aulaAbas.aula-abas > :not(.aula-tabs) { display: none; }
  /* a coluna de 44 px que sobra na grade guarda o lugar do rail: o video nunca passa por baixo. O #aulaAbas vence o tema das abas
     (temas/ios-dark.css) sem !important. O fundo e o relevo sao os do sino (os do neo.css, com reserva fora do tema). */
  .aula-grid.abas-recolhidas { grid-template-columns: minmax(0, 1fr) 44px; }
  .aula-grid.abas-recolhidas #aulaAbas .aula-tabs {
    position: fixed; z-index: 45; right: var(--sp-5); top: 50%; transform: translateY(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 4px; width: 44px; padding: 2px; margin: 0; overflow: visible;
    border: 0; border-radius: var(--raio-full); background: var(--neo-alto, var(--sino-fundo, var(--scrim)));
    box-shadow: var(--neo-relevo-sm, var(--sombra));
  }
  .aula-grid.abas-recolhidas #aulaAbas .aula-tabs-pilula { display: none; }
  .aula-grid.abas-recolhidas #aulaAbas .aula-tab {
    width: 40px; min-width: 40px; height: 40px; padding: 0; margin: 0; justify-content: center; border: 0; border-radius: var(--raio-full);
    background: transparent; box-shadow: none; color: var(--text-dim);
  }
  .aula-grid.abas-recolhidas #aulaAbas .aula-tab:hover { color: var(--text); background: var(--bg-elev); }
  .aula-grid.abas-recolhidas #aulaAbas .aula-tab.ativo {
    color: var(--aba-pilula-texto, var(--text)); background: var(--aba-pilula-fundo, var(--bg-elev)); box-shadow: var(--aba-pilula-sombra, none);
  }
  .aula-grid.abas-recolhidas #aulaAbas .rotulo-aba { max-width: 0; margin: 0; opacity: 0; overflow: hidden; }   /* o nome so pro leitor de tela */
  /* com a largura toda, o video 16:9 passaria da altura da janela: ele cabe nela (menos o respiro e a linha do titulo do curso) e centra */
  .aula-grid.abas-recolhidas .player-video:not(.player-video-4x3) { max-width: calc((100vh - 140px) * 16 / 9); margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) { .abas-recolher i { transition: none; } }
.aula-dica { font-weight: 400; font-size: 11px; color: var(--text-fraco); }
.aula-caderno-rodape { margin-top: var(--sp-2); }
.aula-pane .aula-descricao { margin-top: 0; }

/* materiais: link e arquivo na mesma lista */
.aula-materiais { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.aula-materiais .material-item { margin-bottom: 0; flex-wrap: wrap; }
.material-nome { flex: 1 1 140px; min-width: 0; overflow-wrap: anywhere; }
.material-meta { flex: 0 0 auto; font-size: 12px; font-weight: 400; color: var(--text-fraco); }
/* o icone de download na direita do que se baixa (dono, 07/10), no lugar do idioma e do tamanho; acende com o item */
.material-item .material-baixar { margin-left: auto; font-size: 18px; color: var(--text-dim); transition: color var(--transicao), transform var(--transicao); }
.material-item:hover .material-baixar, .material-item:focus-visible .material-baixar { color: var(--accent); transform: translateY(2px); }
.material-item i { flex: 0 0 auto; font-size: 18px; }

/* duvidas */
.aula-duvida-form { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.aula-drop { padding: var(--sp-4); }
.aula-duvidas-titulo { margin-top: var(--sp-2); }
.aula-duvidas { display: flex; flex-direction: column; gap: var(--sp-3); }
.aula-duvida { padding: var(--sp-3); gap: var(--sp-3); }
.aula-duvida-nova { border-color: var(--accent); }
/* o rodape da duvida (dono, 08/10): o balao com "N respostas" no CENTRO e, na direita, a bolinha do Download Completo (o Abrir a conversa
   saiu). A coluna da esquerda e o espelho da direita, pro numero ficar no meio de verdade */
.aula-duvida > .cd-acoes { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sp-2); }
.aula-duvida > .cd-acoes > .com-num { grid-column: 2; }
/* a bolinha do Download Completo (templates/player/_duvida.html): o botao da casa (btn btn-sm btn-fantasma: no tema do aluno o relevo do
   neomorfismo), redondo e so com o icone no computador e no celular; o clique abre o popover (abaixo) e, sem JavaScript, o link baixa direto */
.duvida-baixar {
  grid-column: 3; justify-self: end; justify-content: center; gap: 0;
  width: 36px; min-width: 36px; min-height: 0; height: 36px; padding: 0; text-decoration: none;
}
.duvida-baixar i { font-size: 15px; }
.duvida-baixar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 720px), (pointer: coarse) { .duvida-baixar { width: 44px; min-width: 44px; height: 44px; } }
/* a bolinha na comunidade (dono, 19/10): no topo da conversa, na linha do nome, depois dos chips; no fim, antes de Sua resposta, com a frase
   na esquerda; no card do feed, discreta no canto direito do rodape */
.com-topo-dir { display: flex; align-items: center; gap: 8px; margin-left: auto; min-width: 0; max-width: 100%; }
.com-baixar-fim {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-3); margin: var(--sp-2) 0 var(--sp-4);
  color: var(--text-dim); font-size: 13px;
}
.com-baixar-fim-texto { text-align: right; }
.com-rodape .com-baixar-card { margin-left: auto; opacity: .7; }
.com-rodape .com-baixar-card:hover, .com-rodape .com-baixar-card:focus-visible { opacity: 1; }
@media (min-width: 721px) and (pointer: fine) { .com-rodape .com-baixar-card { width: 30px; min-width: 30px; height: 30px; } }

/* o POPOVER do Download Completo (dono, 08/10; templates/player/aula.html e static/js/player.js): o cartao de vidro do iOS (o vidro do aviso
   flutuante e da barra de abas) que nasce da bolinha, em cima dela (embaixo, se nao couber), com o fundo da plataforma escurecido e desfocado
   como o do sino aberto. O player.js poe --dbp-x, --dbp-y e a classe dbp-abaixo; o X, o ESC e o clique fora fecham */
.duvida-baixar-pop {
  position: fixed; inset: auto; left: var(--dbp-x, 16px); top: var(--dbp-y, 16px); margin: 0; padding: 0; border: 0;
  width: min(340px, calc(100vw - 32px)); max-width: none; max-height: none; overflow: visible; background: transparent; color: var(--text);
}
.duvida-baixar-pop::backdrop {
  background: var(--overlay-gaveta); -webkit-backdrop-filter: blur(10px) saturate(120%); backdrop-filter: blur(10px) saturate(120%);
  animation: sinoFundo .2s ease-out;
}
.dbp-caixa {
  position: relative; display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4);
  border-radius: var(--raio); background: var(--tabbar-fundo, var(--surface)); border: 1px solid var(--tabbar-borda, var(--border));
  box-shadow: var(--tabbar-sombra, var(--sombra));
  -webkit-backdrop-filter: var(--vidro-blur, blur(24px) saturate(180%)); backdrop-filter: var(--vidro-blur, blur(24px) saturate(180%));
  transform-origin: bottom right; animation: dbpNasce .42s cubic-bezier(.2, .9, .3, 1.2);
}
.duvida-baixar-pop.dbp-abaixo .dbp-caixa { transform-origin: top right; }
@keyframes dbpNasce { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }
.dbp-fechar {
  position: absolute; top: 6px; right: 6px; width: 36px; height: 36px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: var(--raio-full); background: transparent; color: var(--text-dim); font-size: 18px; cursor: pointer;
}
.dbp-fechar:hover { color: var(--text); }
.dbp-fechar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dbp-cab { display: flex; align-items: center; gap: var(--sp-3); padding-right: 36px; }
.dbp-icone {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--raio-full); display: grid; place-items: center;
  background: var(--accent); color: var(--texto-sobre-accent); font-size: 21px;
}
.dbp-titulo { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.dbp-texto { margin: 0; color: var(--text-dim); font-size: 14px; line-height: 1.45; }
.dbp-baixar { justify-content: center; min-height: 44px; font-size: 15px; }
@media (max-width: 720px), (pointer: coarse) { .dbp-fechar { top: 2px; right: 2px; width: 44px; height: 44px; } }
@media (prefers-reduced-motion: reduce) { .dbp-caixa, .duvida-baixar-pop::backdrop { animation: none; } }
/* sem a linha cinza na esquerda (dono, 07/10: a resposta da equipe ja tem a borda laranja, e a cinza do lado sobrava): o recuo diz o que e resposta */
.aula-respostas { display: flex; flex-direction: column; gap: var(--sp-2); padding-left: var(--sp-3); }
/* os anexos de arquivo da duvida e da comunidade (Fase 18): a mesma linha do material da aula, com o icone de download na direita */
.com-arquivos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.com-arquivos .com-arquivo { margin-bottom: 0; }
/* o que esta dentro do zip da mensagem (dono, 08/10: os arquivos vao num zip so), embaixo do nome, menor */
.com-arquivos .com-arquivo-itens { display: block; font-size: 11.5px; color: var(--text-fraco); margin-top: 2px; }
/* a segunda linha da caixa de anexar (o que e aceito), menor */
.im-texto-sub { display: block; font-size: 11.5px; color: var(--text-fraco); margin-top: 2px; }
.aula-resposta { display: flex; flex-direction: column; gap: 6px; padding: var(--sp-2) var(--sp-3); background: var(--bg-elev); border-radius: var(--raio-sm); }
/* a letra da aba Duvidas na escala da lista de aulas ao lado (dono, 15/10: num monitor comum o texto da duvida, 14,5 px, ficava maior que a
   lista, 13 px, e o painel lateral pesava mais que o conteudo). So aqui: a pagina da conversa na comunidade segue com o tamanho dela. No
   celular a aba ocupa a tela inteira e e a leitura principal: fica um degrau acima, 14 px. */
.aula-duvida .com-corpo { font-size: 13px; line-height: 1.6; }
.aula-duvida .com-autor { font-size: 13px; }
.aula-duvida .com-titulo { font-size: 14px; }
@media (max-width: 720px) {
  .aula-duvida .com-corpo { font-size: 14px; }
  .aula-duvida .com-titulo { font-size: 15px; }
}
.aula-duvidas-canal { margin-top: var(--sp-3); }

/* modulos e aulas com progresso; o cabecalho dobra a lista (fechada no celular, aberta no computador) */
.aula-modulos-cab {
  width: 100%; display: flex; align-items: center; gap: var(--sp-3); padding: 12px 16px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--raio) var(--raio) 0 0;
  color: var(--text); font-size: 13px; font-weight: 700; text-align: left;
}
.aula-modulos-titulo { display: inline-flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.aula-modulos-resumo { font-size: 12px; font-weight: 500; color: var(--text-dim); }
/* Fase 18 (dono, 07/10): o anel do progresso no curso no cabecalho do Conteudo do curso (o das capas da vitrine, um pouco menor) e o trofeu aos 100% */
.aula-modulos-prog { display: inline-flex; align-items: center; flex: 0 0 auto; }
.aula-modulos-prog .anel-leitor { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.aula-modulos-prog .anel {
  position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--anel-fundo, var(--scrim-forte)); box-shadow: var(--anel-sombra);
}
.aula-modulos-prog .anel[hidden], .aula-modulos-prog .aula-trofeu[hidden] { display: none; }
.aula-modulos-prog .anel-svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; }
.aula-modulos-prog .capa-pct { position: relative; font-size: 9.5px; font-weight: 700; letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.aula-trofeu { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; color: var(--trofeu-ouro); font-size: 24px;
  line-height: 1; filter: drop-shadow(var(--trofeu-sombra)); }
.aula-modulos-seta { font-size: 14px; color: var(--text-fraco); transition: transform .22s ease; }
.aula-modulos.aberto .aula-modulos-seta { transform: rotate(180deg); }
.aula-modulos:not(.aberto) .painel-modulos { display: none; }
.aula-modulos:not(.aberto) .aula-modulos-cab { border-radius: var(--raio); }
.aula-modulos .painel-modulos { border-top: 0; border-radius: 0 0 var(--raio) var(--raio); max-height: 60vh; }
.painel-modulos .mod-cont { font-size: 11px; color: var(--text-fraco); }
.aula-item .dur { flex: 0 0 auto; font-size: 11px; color: var(--text-fraco); }

/* tablet, celular grande e notebook pequeno (ate 1279 px): uma coluna so, video no topo e as abas embaixo */
@media (max-width: 1279px) {
  .aula-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "midia" "info" "abas" "modulos"; grid-template-rows: auto; }
  .aula-abas { position: static; }
  .aula-pane { max-height: none; }
}

/* celular (Responsividade_Sempre): video fixo no topo, abas com rolagem de lado, botoes de 44 px, sem rolagem horizontal */
@media (max-width: 880px) {
  .player-topo { flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); }
  .player-topo .curso-titulo { min-width: 0; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .prog-geral { min-width: 0; flex: 1 1 100%; }
  .aula-midia-video { position: sticky; top: 52px; z-index: 20; background: var(--bg); }
  .aula-midia-video .player-video { max-height: 45vh; max-height: 45dvh; }
  .aula-abas { --pad-abas: var(--sp-3); }
  .aula-tabs { -webkit-overflow-scrolling: touch; }
  .aula-tab { min-height: 44px; }
  .player-topo .voltar { width: 44px; height: 44px; }
  .player-topo .pl-volta-trilha { min-height: 44px; }
  .aula-materiais .material-item { min-height: 44px; }
  .im-item .btn-icone { min-width: 44px; min-height: 44px; }
  .aula-info .aula-acoes .btn, .aula-abas .btn, .aula-modulos-cab, .painel-modulos .mod-cab { min-height: 44px; }
  .aula-item { min-height: 44px; }
  .aula-abas .input, .aula-abas .anotacao-texto { font-size: 16px; }
  .aula-link { padding: var(--sp-4); }
}

/* ---------- Fase 7: materiais da aula no admin (link e arquivo; Padrao_Upload_Arquivo) ---------- */
/* cards irmaos: mesma altura (Padrao_Box_Card) e o botao de cada um no pe do card */
.am-forms { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--sp-4); align-items: stretch; margin-bottom: var(--sp-5); }
.am-form { display: flex; flex-direction: column; gap: var(--sp-3); flex: 1 1 auto; }
.am-form .im-acao { margin-top: auto; padding-top: var(--sp-2); }
.am-dica { margin: 0; font-size: 12.5px; color: var(--texto-suave); }
.am-titulo { display: flex; align-items: center; gap: 8px; }
.am-detalhe { margin-top: 2px; font-size: 12.5px; color: var(--texto-suave); overflow-wrap: anywhere; white-space: normal; }
.am-detalhe a { color: var(--accent-texto); }
.am-invalido { color: var(--texto-secundario); font-style: italic; }
.am-aula { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--sp-4); font-weight: 600; overflow-wrap: anywhere; }
.am-col-ordem { width: 96px; }
.am-col-tipo { width: 100px; }
.am-tab td { white-space: normal; }
/* celular: o tipo ja aparece no icone da linha (a coluna some) e os botoes da linha ganham alvo de 44 px */
@media (max-width: 720px) {
  .am-tab .am-col-tipo { display: none; }
  .am-tab .am-col-ordem, .am-tab .col-acoes { width: 52px; }
  .am-tab th, .am-tab td { padding-left: 6px; padding-right: 6px; }
  .am-tab .celula-acoes { flex-direction: column; gap: 0; }
  .am-tab .btn-icone { min-width: 44px; min-height: 44px; }
}

/* ---------- Fase 7, lote de correcoes (30/09): lista de imagens da duvida e o switch de duvidas do curso ---------- */
/* varios arquivos (Padrao_Upload_Arquivo): a lista fica abaixo da caixa, cada arquivo com o seu ph-x */
.im-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.im-lista[hidden] { display: none; }
.im-item {
  display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 10px; font-size: 13px;
  border: 1px solid var(--borda); border-radius: var(--raio-sm); background: var(--fundo);
}
.im-item > i { font-size: 18px; color: var(--texto-secundario); flex: 0 0 auto; }
.im-item-nome { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto); }
.im-item-tam { flex: 0 0 auto; font-size: 12px; color: var(--texto-secundario); }
.im-item .btn-icone { flex: 0 0 auto; }

/* switch "Duvidas na aula" na tela de conteudo do curso (Padrao_Toggle_OnOff + Padrao_Box_Card) */
.pc-duvidas { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.pc-duvidas-texto { min-width: 0; }
.pc-duvidas .cd-titulo { display: flex; align-items: center; gap: 8px; }
.pc-dica { margin: 4px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--texto-suave); }

/* ---------- Fase 8 (parte A): detalhe do curso em modal, busca e Minha lista ---------- */
/* pagina de tras nao rola enquanto o modal do curso esta aberto (a rolagem e a do corpo do modal) */
body.modal-aberto { overflow: hidden; }
.modal-curso .modal-cab { gap: var(--sp-3); }
.modal-curso .modal-cab h3 { min-width: 0; overflow-wrap: anywhere; }
.modal-curso .modal-x { flex: 0 0 auto; min-width: 44px; min-height: 44px; }
.modal-curso .modal-corpo { gap: var(--sp-4); }
.modal-curso .loading-inline { padding: 64px 20px; }
.cur { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.cur-topo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--sp-5); align-items: start; }
.cur-arte { position: relative; aspect-ratio: 3 / 2; border-radius: var(--raio); overflow: hidden; background: var(--bg-elev); }
.cur-arte img { width: 100%; height: 100%; object-fit: cover; }
.cur-info { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.cur-sub { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text); }
.cur-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; list-style: none; margin: 0; padding: 0; font-size: 13px; color: var(--text-dim); }
.cur-meta li { display: inline-flex; align-items: center; gap: 6px; }
.cur-prog { display: flex; align-items: center; gap: var(--sp-3); }
.cur-pct { flex: 0 0 auto; font-size: var(--fs-xs); font-weight: 600; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.cur-acoes { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.cur-acoes .btn { min-height: 44px; }
.cur-status { margin: 0; min-height: 18px; font-size: 12.5px; color: var(--text-dim); }
.cur-status.ok { color: var(--verde-escuro); font-weight: 600; }
.cur-status.erro { color: var(--danger-texto); font-weight: 600; }
.cur-status.carregando { color: var(--text); font-weight: 600; }
.cur-aviso { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-dim); }
.cur-descricao { font-size: var(--fs-sm); line-height: 1.7; color: var(--text-dim); overflow-wrap: anywhere; }
.cur-descricao a { color: var(--accent-texto); text-decoration: underline; text-underline-offset: 2px; }
.cur-secao { margin: var(--sp-2) 0 0; font-size: 15px; }
/* modulos: boxes .cd numa grade de alturas iguais (Padrao_Box_Card; .grid-cards estica e o .cd leva height: 100%) */
.cur-mods { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.cur-mod { gap: var(--sp-2); min-width: 0; }
.cur-mod .cd-header { gap: var(--sp-2); }
.cur-mod .cd-titulo { min-width: 0; overflow-wrap: anywhere; }
.cur-mod-cont { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.cur-aulas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.cur-aula {
  display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 8px; border-radius: var(--raio-sm);
  font-size: 13px; color: var(--text-dim); transition: background var(--transicao), color var(--transicao);
}
.cur-aula:hover { background: var(--bg-elev); color: var(--text); }
.cur-aula:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cur-aula .check { flex: 0 0 auto; font-size: 16px; color: var(--text-fraco); }
.cur-aula.feita .check { color: var(--success); }
.cur-aula-titulo { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cur-aula .dur { flex: 0 0 auto; font-size: 11px; color: var(--text-fraco); }
.cur-mod-vazio { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-fraco); }

/* busca e Minha lista: cards .cd em grade de alturas iguais, com a capa, o progresso e os botoes no pe do card */
.bus-grid { margin-bottom: var(--sp-5); }
.bus-curso, .bus-aula { min-width: 0; }
.bus-capa { position: relative; display: block; aspect-ratio: 3 / 2; border-radius: var(--raio-sm); overflow: hidden; background: var(--bg-elev); }
.bus-capa img { width: 100%; height: 100%; object-fit: cover; }
.bus-sub { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-dim); }
.bus-acoes { margin-top: auto; }
.bus-aula .cn-modulo { overflow-wrap: anywhere; }
.bus-aula .cd-titulo, .bus-curso .cd-titulo { overflow-wrap: anywhere; }

/* Minha Area e agenda sem style= (antes inline) */
.ma-ordens.fu-presets { --fu-h: 40px; }   /* toggle da ordem do caderno */
@media (max-width: 720px), (pointer: coarse) {   /* no toque, cada botao do toggle tem 44 px */
  .ma-ordens.fu-presets { height: auto; }
  .ma-ordens.fu-presets button { height: 44px; min-height: 44px; }
}
.adm-dica { margin: 6px 0 0; font-size: 12px; color: var(--texto-suave); }
.ma-produto-titulo { font-size: 16px; margin-top: var(--sp-4); }
/* Minhas aulas salvas (dono, 09/10): um box por curso na linha toda, a capa a esquerda e as aulas dentro */
.ma-favoritas { display: flex; flex-direction: column; gap: var(--sp-3); }
.ma-fav-curso { display: flex; flex-direction: row; align-items: flex-start; gap: var(--sp-4); }   /* row: o .cd e coluna */
.ma-fav-corpo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ma-fav-corpo .ma-produto-titulo { margin: 0 0 4px; }
@media (max-width: 720px) {
  .ma-fav-curso { flex-direction: column; align-items: stretch; }
  .ma-fav-curso .ml-capa { flex: 0 0 auto; width: 100%; }
}
.ma-fav-texto { flex: 1; }
.ma-fav-sub { display: block; font-size: 11px; color: var(--text-fraco); }
.ma-cursos-turma { font-size: 12.5px; }
/* os conteudos da turma em capsulas (dono, 10/10: no lugar do texto com barras) */
.ma-capsulas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ma-capsula {
  display: inline-flex; align-items: center; min-height: 30px; padding: 6px 14px; border-radius: var(--raio-full);
  background: var(--tabbar-ativo-fundo, var(--accent-soft)); border: 1px solid var(--border); color: var(--text);
  font-size: 12.5px; line-height: 1.35; overflow-wrap: anywhere;
}
/* a caixa da tabela ganha o brilho da borda (o ::before do neo.css segue o raio dela) e a turma expirada "perde o brilho": esmaecida e sem cor */
.ma-turmas { border-radius: var(--raio); }
.ma-expirada td { opacity: .5; }
.ma-expirada td:not(.ma-status) { filter: grayscale(1); }   /* o Expirado segue vermelho, so esmaecido (dono, 10/10) */
/* dono, 23/10: no celular (ate 880 px, a experiencia da barra de abas) as Turmas viram CARTOES, um por turma, e o botao abre o <dialog> com a
   lista dos cursos dela; a tabela fica so no computador. A turma expirada esmaece como a linha da tabela (o Expirado segue vermelho) */
.ma-tc-cards { display: none; list-style: none; margin: 0; padding: 0; }
.ma-tc { margin: 0; display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.ma-tc-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); }
.ma-tc-nome { min-width: 0; font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.ma-tc-topo .badge { flex: none; }
.ma-tc-datas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin: 0; }
.ma-tc-datas dt { font-size: 11px; color: var(--text-dim); }
.ma-tc-datas dd { margin: 2px 0 0; font-size: 13px; font-weight: 600; }
.ma-tc-btn { width: 100%; min-height: 44px; justify-content: center; }
.ma-tc-vazio { margin: 0; font-size: 12.5px; color: var(--text-dim); }
.ma-tc-expirada .ma-tc-nome, .ma-tc-expirada .ma-tc-datas, .ma-tc-expirada .ma-tc-btn, .ma-tc-expirada .ma-tc-vazio { opacity: .5; filter: grayscale(1); }
.ma-tc-expirada .badge { opacity: .5; }
.ma-tc-dlg .popup-cab h3 { min-width: 0; overflow-wrap: anywhere; }
.ma-tc-corpo { gap: var(--sp-2); }
.ma-tc-sub { margin: 0; font-size: 12.5px; color: var(--text-dim); }
.ma-tc-lista { list-style: none; margin: 0; padding: 0; max-height: min(60dvh, 480px); overflow-y: auto; }
.ma-tc-lista li { display: flex; align-items: flex-start; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--border);
  font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.ma-tc-lista li:last-child { border-bottom: 0; }
.ma-tc-lista i { flex: none; margin-top: 2px; color: var(--text-dim); }
@media (max-width: 880px) {
  .ma-turmas { display: none; }
  .ma-tc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-3); }
}
.nowrap { white-space: nowrap; }
.ag-data { margin-bottom: 4px; }
.ag-titulo { margin: 0 0 6px; font-size: 16px; }
.ag-desc { margin: 0; font-size: 13px; color: var(--text-dim); line-height: 1.6; }
.ag-participar { margin-top: 12px; align-self: flex-start; }
.sem-area { max-width: 480px; margin: 60px auto; align-items: center; text-align: center; padding: 40px 20px; }
.sem-area p { color: var(--text-dim); font-size: 13px; margin: 0; }
.av-texto { flex: 1; }
.modal-aviso { background: var(--surface); border: 1px solid var(--border); }
.modal-aviso .modal-cab, .modal-aviso .modal-rodape { border-color: var(--border); }
.aviso-texto { margin: 0; color: var(--text-dim); line-height: 1.6; white-space: pre-wrap; }
/* o alinhamento da mensagem do aviso (avisos.alinhamento = centro): no popup o texto, na faixa o titulo e o texto */
.modal-aviso.aviso-centro .aviso-texto, .modal-aviso.aviso-centro .aviso-teste-nota { text-align: center; }
.aviso-banner.aviso-centro .av-texto { text-align: center; }
/* a faixa FIXA (avisos.faixa_fixa = 1): gruda no topo ao rolar a vitrine, com o fundo da pagina por baixo do degrade (nada aparece atras dela) */
.aviso-banner.aviso-fixo { position: sticky; top: var(--sp-3); z-index: 40; background-color: var(--bg); box-shadow: var(--sombra-lg); }
.aviso-teste-nota { margin: 0 0 12px; padding: 8px 10px; border-radius: 8px; border: 1px dashed var(--accent); color: var(--text-dim); font-size: .85rem; }

@media (max-width: 880px) {
  .cur-topo { grid-template-columns: minmax(0, 1fr); }
  .cur-aula { min-height: 44px; }
  /* o fundo do modal perde a folga de 20 px: sem isso a caixa de 96vw encolhia pra 89% numa tela de 375 px */
  .modal-bg { padding: 2vw; }
}

/* reducao de movimento: no fim do arquivo, depois do .modal-caixa da base (mesma especificidade, o ultimo vence) */
@media (prefers-reduced-motion: reduce) {
  .modal-caixa { animation: none; }
}

/* ---------- Fase 8 (parte B): marca da Area e da empresa, busca rapida (Ctrl+K) e itens de menu por Area ---------- */

/* admin: o pontinho colorido na frente do nome de cada grupo da sidebar SAIU (decisao do dono de 06/10, Fase 18); a cor do grupo
   (.gv-<grupo>, tokens --grupo-*; CV-001) segue nos cartoes da Visao geral */

/* sidebar do aluno: busca, itens da Area e o marcador de "abre em outra aba" */
.sidebar-busca { padding: 12px 12px 0; }
.busca-gatilho {
  width: 100%; min-height: 44px; display: flex; align-items: center; gap: var(--sp-3); padding: 0 12px;
  border: 1px solid var(--border); border-radius: var(--raio-sm); background: var(--bg); color: var(--text-dim);
  font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; transition: var(--transicao);
}
.busca-gatilho:hover { border-color: var(--text-fraco); color: var(--text); }
.busca-gatilho:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.busca-gatilho i { font-size: 18px; flex-shrink: 0; }
.busca-gatilho-texto { flex: 1; }
.busca-atalho {
  font-family: var(--font); font-size: 11px; font-weight: 600; line-height: 1; color: var(--text-fraco);
  border: 1px solid var(--border); border-radius: var(--raio-xs); padding: 4px 6px; background: var(--bg-elev);
}
.sidebar-aluno .nav-item-area .nav-rotulo { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.nav-item-nova-aba::after { content: "\e5de"; font-family: "Phosphor"; font-size: 14px; opacity: .65; margin-left: auto; flex: 0 0 auto; }
.btn.btn-busca-topo { margin-left: auto; }

/* dialogo da busca rapida: modal do aluno (ESC e clique fora fecham); a lista e um listbox, o campo e o combobox */
.busca-rapida-corpo { gap: var(--sp-3); }
.busca-rapida-form { margin: 0; }
.busca-rapida-form .vit-busca-campo { flex: 1 1 auto; width: 100%; }
.busca-rapida-status { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-dim); }
.busca-rapida-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.busca-rapida-lista:empty { display: none; }
.busca-rapida-grupo { padding: 10px 10px 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-fraco); }
.busca-rapida-item { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 10px; border-radius: var(--raio-sm); color: var(--text); }
.busca-rapida-item i { font-size: 20px; color: var(--text-dim); flex: 0 0 auto; }
.busca-rapida-item:hover, .busca-rapida-item.marcada { background: var(--accent-soft); }
.busca-rapida-item.marcada { outline: 2px solid var(--accent); outline-offset: -2px; }
.busca-rapida-textos { display: flex; flex-direction: column; min-width: 0; }
.busca-rapida-titulo { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.busca-rapida-detalhe { font-size: 12.5px; color: var(--text-dim); overflow-wrap: anywhere; }
/* a busca PULA ao abrir e os resultados saem do campo pulando (dono, 09/10, tarefa-4d4d1142, a referencia 42 Search feature - animated search
   bar): a caixa abre com a mola; cada resultado nasce pequeno e desfocado no meio do campo (--br-dy, posto pelo busca_rapida.js), sobe um pouco,
   cai no lugar com o quique e o seguinte vem 55 ms depois (--br-atraso); o lado do giro alterna (--br-giro). Sem movimento: aparece parado */
#buscaRapida .modal-caixa { animation: buscaAbre .6s cubic-bezier(.2, .9, .3, 1); }
@keyframes buscaAbre {
  0%   { opacity: 0; transform: translateY(-18px) scale(.86); }
  50%  { opacity: 1; transform: translateY(5px) scale(1.025); }
  72%  { transform: translateY(-2px) scale(.995); }
  100% { opacity: 1; transform: none; }
}
.busca-rapida-lista.pulando .busca-rapida-item, .busca-rapida-lista.pulando .busca-rapida-grupo {
  animation: buscaPula .8s cubic-bezier(.25, .8, .35, 1) both; animation-delay: var(--br-atraso, 0ms);
}
@keyframes buscaPula {
  0%   { opacity: 0; transform: translateY(var(--br-dy, -40px)) scale(.2) rotate(var(--br-giro, -8deg)); filter: blur(8px); }
  30%  { opacity: 1; transform: translateY(calc(var(--br-dy, -40px) - 28px)) scale(.4) rotate(calc(var(--br-giro, -8deg) / 2)); filter: blur(3px); }
  68%  { transform: translateY(5px) scale(1.03) rotate(0deg); filter: none; }
  84%  { transform: translateY(-2px) scale(.99); }
  100% { opacity: 1; transform: none; filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  #buscaRapida .modal-caixa, .busca-rapida-lista.pulando .busca-rapida-item, .busca-rapida-lista.pulando .busca-rapida-grupo { animation: none; }
}
.busca-rapida-todos { align-self: flex-end; display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; color: var(--accent-texto); text-decoration: underline; }

/* telas de entrada: a marca da empresa (logo opcional e nome) */
.login-card .marca { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); }
.login-card .marca-logo { width: 40px; height: 40px; border-radius: var(--raio-full); object-fit: contain; flex: 0 0 auto; }
.login-card .marca-texto { min-width: 0; overflow-wrap: anywhere; }

/* admin, Menu da Area (/adm/areas/<id>/menu): lista em ordem manual, como a de materiais da aula */
.mi-intro { margin: 0 0 var(--sp-4); font-size: 13px; line-height: 1.55; color: var(--texto-secundario); max-width: 720px; }
.mi-titulo { display: flex; align-items: center; gap: 8px; }
.mi-detalhe { margin-top: 2px; font-size: 12.5px; color: var(--texto-suave); overflow-wrap: anywhere; white-space: normal; }
.mi-col-ordem { width: 96px; }
.mi-col-tipo { width: 130px; }
.mi-col-ativo { width: 76px; }
.mi-tab td { white-space: normal; }
.mi-campo-icone { display: flex; align-items: center; gap: var(--sp-3); }
.mi-campo-icone .input { flex: 1 1 auto; min-width: 0; }
.mi-previa { flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--borda); border-radius: var(--raio-sm); background: var(--fundo); }
.mi-previa-glifo { font-size: 24px; color: var(--texto); }
.mi-icones { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; }
.mi-icones button {
  min-height: 44px; display: grid; place-items: center; border: 1px solid var(--borda); border-radius: var(--raio-sm);
  background: var(--branco); color: var(--texto-secundario); font-size: 20px; cursor: pointer; transition: var(--transicao);
}
.mi-icones button:hover { border-color: var(--cor-primaria); color: var(--accent-texto); }
.mi-icones button[aria-pressed="true"] { border-color: var(--cor-primaria); background: var(--cor-primaria-suave); color: var(--accent-texto); }
.mi-icones button:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: 2px; }
.mi-aviso { padding: 10px 12px; border: 1px solid var(--vermelho-borda); border-radius: var(--raio-sm); background: var(--vermelho-suave); color: var(--vermelho-escuro); font-size: 13px; line-height: 1.5; }
.mi-aviso ul { margin: 6px 0 0; padding-left: 18px; }
.mi-dica { margin: 0; font-size: 12.5px; color: var(--texto-suave); }
.campo [aria-invalid="true"], .campo input[aria-invalid="true"] { border-color: var(--vermelho-escuro); }
@media (max-width: 720px) {
  .mi-tab .mi-col-tipo { display: none; }
  .mi-tab .mi-col-ordem, .mi-tab .col-acoes { width: 52px; }
  .mi-tab .mi-col-ativo { width: 56px; }
  .mi-tab thead th, .mi-tab tbody td { padding-left: 6px; padding-right: 6px; }
  .mi-tab thead th { font-size: 10.5px; letter-spacing: .02em; }
  .mi-tab .celula-acoes { flex-direction: column; gap: 0; }
  .mi-tab .btn-icone { min-width: 44px; min-height: 44px; }
  .oculta-celular { display: none; }   /* o rotulo do botao some no celular e sobra o icone (o aria-label e o title seguem) */
}

/* admin, logo e favicon (Empresa e Areas): o bloco de envio com a previa e o "remover" */
.mu { display: flex; gap: var(--sp-4); align-items: flex-start; }
.mu-previa { flex: 0 0 auto; width: 64px; height: 64px; object-fit: contain; padding: 4px; border: 1px solid var(--borda); border-radius: var(--raio-sm); background: var(--fundo); }
.mu-corpo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.mu .im-drop { margin-top: 0; padding: 14px; }
.mu .im-drop i { font-size: 26px; margin-bottom: 2px; }
.mu-remover { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--texto-secundario); cursor: pointer; min-height: 32px; }
.mu-dica { margin: 0; font-size: 12.5px; color: var(--texto-suave); }
.em-forma { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); max-width: 760px; }
.em-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.em-previa { display: flex; align-items: center; gap: var(--sp-3); padding: 12px 14px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--fundo); }
.em-previa .logo-quadro { width: 40px; height: 40px; border-radius: 50%; background: var(--branco); border: 2px solid var(--cor-primaria); overflow: hidden; flex: 0 0 auto; }
.em-previa .logo-quadro img { width: 100%; height: 100%; object-fit: contain; display: block; }
.em-previa .marca-nome { font-family: var(--font-titulo); font-weight: 700; font-size: 15px; letter-spacing: -.02em; color: var(--texto); }
.em-previa .marca-sub { font-size: 11px; color: var(--texto-fraco); font-weight: 500; }
.ar-detalhe { color: var(--texto-fraco); font-size: 12px; }
.em-linha2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
@media (max-width: 880px) { .em-linha2 { grid-template-columns: minmax(0, 1fr); } }

/* Minha conta (tela do aluno e da equipe): largura e espacamento por classe, nada de style= */
.cd.conta-card { max-width: 480px; }
.cd.conta-card-aviso { margin-bottom: var(--sp-4); }
.conta-aviso-texto { margin: 0; font-size: 14px; }
.conta-form { display: flex; flex-direction: column; gap: 14px; }
.conta-acoes { display: flex; justify-content: flex-end; }
.busca-rapida-form input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* toque na gaveta (ate 880 px): todo item do menu, os icones do rodape e os links de privacidade com alvo de 44 px (Responsividade_Sempre, CV-194) */
@media (max-width: 880px) {
  .sidebar .nav-item { min-height: 44px; }
  .btn.btn-icone-rodape { min-width: 44px; min-height: 44px; }
  .sidebar-privacidade a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* toque: o switch on/off (42 x 24) ganha area de clique de 44 px de altura sem mudar o desenho (o label herda o clique do pseudo-elemento) */
@media (max-width: 720px) {
  .cv-sw label::before { content: ""; position: absolute; inset: -10px -2px; }
}

/* ======================================================================
   Fase 8, lote de correcoes (30/09): conformidade com a base de conhecimento. Tudo por token; nada de style= nas telas.
   ====================================================================== */

/* ---------- SelectBusca por teclado (Componente_SelectBusca): o campo entra na ordem do Tab, mostra onde esta e a lista tem a opcao ativa ---------- */
.selectbusca .sb-display:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: 2px; }
.selectbusca .sb-lista { display: block; }
/* o SelectBusca remoto (data-sb-remoto): Buscando..., Nada encontrado */
.selectbusca .sb-vazio { padding: 10px 12px; font-size: 13px; color: var(--texto-secundario); }
.selectbusca .sb-opt.ativa { background: var(--cor-primaria-suave); color: var(--accent-texto); box-shadow: inset 3px 0 0 var(--cor-primaria); }
.selectbusca .sb-opt[aria-selected="true"] { font-weight: 600; }

/* ---------- Caixa de marcar dos formularios (Padrao_Toggle_OnOff x Padrao_Selecao_em_Lote): formulario salvo por botao usa a caixa, o switch grava na hora ---------- */
.campo-marcar {
  display: flex; align-items: center; gap: var(--sp-3); min-height: 32px;
  font-size: 14px; line-height: 1.45; color: var(--texto); cursor: pointer;
}
.campo-marcar .tsel { flex: 0 0 auto; }
.campo label.campo-marcar { font-size: 14px; font-weight: 400; color: var(--texto); }   /* vence o .campo label (13px, 600, cinza) */
/* a caixa travada (o perfil de quem edita nao pode conceder aquilo: matriz de permissoes) parece travada: esmaecida, com o cursor de proibido no rotulo tambem */
.campo-marcar .tsel:disabled { opacity: .45; }
.campo-marcar:has(.tsel:disabled) { cursor: not-allowed; }
.modal-caixa[tabindex="-1"]:focus { outline: none; }   /* o modal recebe o foco por script ao abrir: sem anel no quadro todo */
@media (max-width: 720px), (pointer: coarse) { .campo-marcar, .mu-remover { min-height: 44px; } }

/* ---------- foco visivel nas areas de envio de arquivo: o <input type=file> e escondido fora da tela, o anel vai pra area clicavel ---------- */
.im-drop:focus-within { outline: 2px solid var(--cor-primaria); outline-offset: 2px; }
.im-drop:has(+ .im-inp:focus-visible) { outline: 2px solid var(--cor-primaria); outline-offset: 2px; }
.mock:focus-within .mock-tela { outline: 2px solid var(--cor-primaria); outline-offset: 2px; }

/* ---------- popup de formulario comprido (secao da vitrine): rola sozinho em qualquer altura, cabecalho e rodape colados ---------- */
dialog.popup-centrado.popup-secao { max-width: 1040px; max-height: calc(100dvh - 2 * var(--sp-3)); overflow-y: auto !important; }
dialog.popup-centrado.popup-secao .popup-cab { position: sticky; top: 0; z-index: 2; background: var(--branco); }
dialog.popup-centrado.popup-secao .popup-rodape { position: sticky; bottom: 0; z-index: 2; background: var(--branco); }
.cta-toggle .campo-marcar { align-items: flex-start; flex: 1 1 auto; }
.cta-toggle .campo-marcar .tsel { margin-top: 2px; }

/* ---------- adm/vitrine: as secoes da vitrine e o modal (antes com style= no template) ---------- */
.cta-legenda { font-weight: 400; color: var(--texto-fraco); }
.cta-dica-cor { margin: 0; font-size: 12px; line-height: 1.45; color: var(--texto-suave); }
.sec-card { margin-bottom: 16px; }
.sec-titulo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.sec-ordem { color: var(--texto-fraco); }
.sec-adicionar { margin-bottom: 0; }
.sec-itens { display: flex; gap: 8px; flex-wrap: wrap; }
.badge.badge-item { gap: 8px; padding: 6px 6px 6px 12px; }
.badge-item .btn-icone { width: 24px; height: 24px; }
.sec-vazia { font-size: 13px; color: var(--texto-fraco); }
.sec-arte { max-height: 120px; border-radius: var(--raio-sm); align-self: flex-start; }
/* reordenar as secoes pelo teclado: nas pontas o botao fica esmaecido, mas continua no Tab (aria-disabled, nao disabled) */
.sec-mover[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.sec-mover[aria-disabled="true"]:hover { background: transparent; color: var(--texto-secundario); }
/* com os quatro botoes de 44 px o titulo nao cabe ao lado deles no celular: o cabecalho quebra e as acoes vao pra linha de baixo, alinhadas a direita */
@media (max-width: 720px) {
  .sec-card > .cd-header { flex-wrap: wrap; gap: 4px 12px; }
  .sec-card > .cd-header .cd-acoes { margin-left: auto; }
}
/* ---------- Fase 17, f17_telas_b: turmas, turma, produtos, conteudo do curso e eventos sem style= (a mesma caixa de antes) ---------- */
.te-resumo { margin-bottom: 16px; }
.te-resumo-lista { display: flex; gap: 24px; flex-wrap: wrap; font-size: 13px; color: var(--texto-suave); }
/* Fase 102: "Esta turma está dentro de" (as turmas que englobam esta), uma linha só de leitura embaixo do resumo; o nome longo quebra */
.te-dentro { margin: 10px 0 0; font-size: 13px; color: var(--texto-suave); overflow-wrap: anywhere; }
.te-h2 { font-size: 16px; }
.te-tab.te-tab-cursos { margin-bottom: 32px; }
.pc-modulo { margin-bottom: 16px; }
.pc-ordem { color: var(--texto-fraco); margin-right: 6px; }
.pc-qtd { margin-left: 8px; }
.pc-vazio-msg { margin: 0; font-size: 13px; color: var(--texto-suave); }
.te-tab thead th.pc-col-ordem { width: 60px; }
.te-tab:has(.pc-puxador) thead th.pc-col-ordem { width: 84px; }
/* a ordem das aulas por arrastar (dono, 17/10; static/js/aulas_ordem.js): o puxador na coluna Ordem, a linha arrastada destacada */
.pc-ordem-cel { white-space: nowrap; }
.pc-puxador { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-right: 4px; padding: 0;
  border: 0; border-radius: var(--raio-sm); background: transparent; color: var(--text-fraco); cursor: grab; touch-action: none; vertical-align: middle; }
.pc-puxador:hover { background: var(--pasta-fundo); color: var(--text); }
.pc-puxador:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: 1px; }
.pc-puxador i { font-size: 18px; }
/* o arrastar com vida (dono, 17/10, "muito seca"): a copia suspensa segue o ponteiro, a vaga tracejada mostra onde a aula cai e as outras
   linhas deslizam pra abrir espaco; ao soltar a copia pousa na vaga e a linha da um pulinho */
.pc-fantasma { position: fixed; z-index: 1000; margin: 0; pointer-events: none; overflow: hidden; background: var(--branco); border-radius: var(--raio-sm);
  box-shadow: var(--sombra-sm); transform-origin: 30% 50%; transition: transform .16s ease, box-shadow .16s ease, top .18s ease; }
.pc-fantasma table { margin: 0; }
.pc-fantasma td { background: var(--branco); border-bottom: 0; }
.pc-fantasma.pc-suspenso { transform: scale(1.025) rotate(-.6deg); box-shadow: var(--sombra-popup); transition: transform .16s ease, box-shadow .16s ease; }
.pc-fantasma.pc-suspenso .pc-puxador { color: var(--accent-texto); background: var(--cor-primaria-suave); }
.pc-fantasma.pc-pousando { transform: none; box-shadow: var(--sombra-sm); }
.pc-aulas tr.pc-vaga > td { background: var(--cor-primaria-suave); border-top: 2px dashed var(--cor-primaria); border-bottom: 2px dashed var(--cor-primaria); }
.pc-aulas tr.pc-vaga > td:first-child { border-left: 2px dashed var(--cor-primaria); border-radius: var(--raio-sm) 0 0 var(--raio-sm); }
.pc-aulas tr.pc-vaga > td:last-child { border-right: 2px dashed var(--cor-primaria); border-radius: 0 var(--raio-sm) var(--raio-sm) 0; }
.pc-aulas tr.pc-vaga > td > * { visibility: hidden; }
.pc-aulas tr.pc-vaga > td { color: transparent; }
.pc-aulas tr { position: relative; }
.pc-aulas tr.pc-pulou { animation: pcPulou .28s ease; }
@keyframes pcPulou { 0% { background: var(--cor-primaria-suave); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .pc-fantasma, .pc-fantasma.pc-suspenso { transition: none; transform: none; } .pc-aulas tr.pc-pulou { animation: none; } }
html.pc-arrastando-pagina, html.pc-arrastando-pagina * { cursor: grabbing !important; user-select: none; }
@media (max-width: 720px), (pointer: coarse) { .pc-puxador { width: 44px; height: 44px; } }
.te-tab thead th.pc-col-tipo { width: 120px; }
textarea.input.input-area { height: auto; padding: 10px 12px; }
.pr-slug { color: var(--texto-fraco); font-size: 12px; }
.te-tab tbody td.ae-quando { white-space: nowrap; }
.ae-desc { font-size: 12px; color: var(--texto-suave); }
.badge.ae-so-agenda { margin-left: 6px; }
.te-tab tbody td.ae-vazio { text-align: center; color: var(--texto-fraco); padding: 32px; }
/* o booleano de FORMULARIO salvo por botao e a caixa de marcar da casa (.campo-marcar com .tsel, LASTRO: Padrao_Toggle_OnOff x Padrao_Selecao_em_Lote; o switch cv-sw so na lista que grava
   ao clicar). A de eventos encosta na base do campo de arquivo ao lado (a grade de duas colunas), com a mesma folga de 8 px que a linha do switch tinha. */
.campo.campo-marcar-fim { align-self: end; padding-bottom: 8px; }
/* campo de arquivo dos formularios (Padrao_Upload_Arquivo): o rotulo, a area de clicar e soltar (.im-drop, o input .im-inp fora da tela logo depois dela, o anel de
   foco vai pra area), o nome do escolhido e o aviso de erro; o static/js/marca_upload.js faz o resto (soltar, tipo, tamanho, zerar ao reabrir o modal) */
.upl-campo { display: flex; flex-direction: column; min-width: 0; }
.upl-campo .im-lbl { margin-bottom: 5px; }
.upl-campo .im-arq { overflow-wrap: anywhere; }
.upl-campo .im-msg { font-size: 12.5px; color: var(--texto-secundario); }
.upl-campo .im-msg:not(:empty) { margin-top: 5px; }
.upl-campo .im-msg.erro { color: var(--vermelho-escuro); font-weight: 600; }
.cta-coluna { display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 720px), (pointer: coarse) { .badge-item .btn-icone, .sec-card .cd-acoes .btn-icone { width: 44px; height: 44px; } }
/* 375 px: o campo de texto do botao ocupa a linha (antes sobrava ~36 px entre o tamanho, o estilo e a cor) e a previa cai pra baixo da grade */
@media (max-width: 720px) {
  .cta-linha { flex-wrap: wrap; }
  .cta-linha .cta-texto { flex: 1 1 100%; }
  .cta-linha .selectbusca { flex: 1 1 120px; width: auto; }
  .cta-config { grid-template-columns: minmax(0, 1fr); }
  .cta-config .cta-preview { min-height: 110px; }
  .mock-wrap { gap: 16px; }
}

/* ---------- toque: o X dos modais tem 44 x 44 px em qualquer largura quando o ponteiro e o dedo (ate 720 px ja era; o tablet de 721 a 880 px ficava com 34 x 24) ---------- */
@media (pointer: coarse) { .modal-x { min-width: 44px; min-height: 44px; } }

/* ---------- validacao DENTRO do modal do admin (Padrao_Modal_Nao_Fecha_Sozinho): a mensagem fica ao lado do campo, o campo ganha a marca e
   o aviso do topo diz a saida; nada de balao do navegador (o <form> do modal tem novalidate, static/js/ui.js) ---------- */
.campo-erro { margin: 0; font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--danger-texto); }
.input.campo-invalido, textarea.campo-invalido, .selectbusca.campo-invalido .sb-display { border-color: var(--danger); }
.modal-validacao {
  margin: 0 0 12px; padding: 10px 12px; font-size: 13px; font-weight: 600; line-height: 1.45; color: var(--danger-texto);
  background: var(--vermelho-suave); border: 1px solid var(--vermelho-borda); border-radius: var(--raio-sm);
}

/* ---------- busca rapida: grupos de resultado dentro do listbox (role=group com titulo), nao como item solto ---------- */
.busca-rapida-lista ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }

/* ---------- Minha Area e tela sem area ---------- */
.capa-placeholder.cur-placeholder { font-size: clamp(18px, 3vw, 28px); padding: var(--sp-5); }
.sem-area h1 { margin: 8px 0 0; font-size: var(--fs-xl); }

/* ---------- movimento reduzido: uma regra so pra tela toda (Fase 8, correcoes) ----------
   Sem transicao, sem animacao e sem deslocamento no hover (.cd-clicavel, .com-card, .btn-home-side, .capa), e a gaveta do menu
   aparece sem deslizar: o estado muda na hora. O giro do spinner e o unico movimento que fica (devagar): e o sinal de que algo carrega. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important; transition-delay: 0s !important;
    animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .cd-clicavel:hover, .com-card:hover, .btn-home-side:hover, .capa:hover, .capa:focus-visible { transform: none; }
  .sidebar, .sidebar.aberta { transition: none; }
  .spinner-circle { animation-duration: 1.6s !important; animation-iteration-count: infinite !important; }
}

/* ======================================================================
   Fase 9, correcao de UI (30/09): /int/plataformas, mapeamento do webhook, escuta e mapear-json sem style=, por token, de 360 a 1440 px.
   Fica ANTES do bloco de marca de IA: o teste dele le do bloco ate o fim do arquivo e proibe --accent e --cor-primaria ali.
   ====================================================================== */

/* ---------- topbar: o titulo nunca fica sem lugar (Padrao_Acao_Primaria_na_Topbar, Responsividade_Sempre) ---------- */
.topbar .titulo-pagina { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar .tb-acoes { flex: 0 0 auto; }
/* ate 720 px a acao da topbar vira so o icone (alvo de 44 px): o texto (.rotulo-btn) fica pro leitor de tela e o title mostra o nome */
@media (max-width: 720px) {
  .topbar { gap: var(--sp-2); }
  .tb-acoes .rotulo-btn {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  .tb-acoes .btn:has(.rotulo-btn) { width: 44px; min-width: 44px; padding: 0; justify-content: center; }
}

/* ---------- marca de IA fora do bloco: o sparkle do Chat IA (sidebar do aluno, turmas) e roxo, nunca o laranja (CV-199) ---------- */
.icone-ia { color: var(--roxo-icone); }
.vz .vz-icone.icone-ia { color: var(--roxo-icone); }   /* o estado vazio de IA (o Tutor IA em breve) com o sparkle roxo da marca de IA */
.texto-forte { color: var(--texto); }

/* ---------- texto de apoio, alerta e badge de estado (no lugar do style= que cada tela repetia) ---------- */
.nota-suave { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--texto-suave); }
.nota-corpo { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--texto); }
.nota-fraca { font-size: 12px; color: var(--texto-fraco); }
.nota-alerta { color: var(--ambar-escuro); }
.cd-alerta { margin-bottom: 16px; border-left: 4px solid var(--warning); }
.cd-largo { max-width: 860px; }
.cd.cd-bloco { margin-bottom: 16px; }
.badge.badge-escuta { background: var(--ambar-suave); color: var(--ambar-escuro); }
.badge.badge-leitura { background: var(--fundo); color: var(--texto-suave); box-shadow: inset 0 0 0 1px var(--borda); }   /* Guru e Hotmart: o formato pronto no sistema (dono, 08/10) */
.plat-protecao { display: flex; align-items: flex-start; gap: 6px; margin: 0 0 var(--sp-3); }
.plat-protecao i { margin-top: 2px; }   /* 4,72:1 no tema claro (tokens.css) */

/* ---------- recursos em beta da venda (so leitura) ---------- */
.beta-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.beta-item { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; font-size: 13.5px; }
.beta-texto { min-width: 0; overflow-wrap: anywhere; color: var(--texto); }
.beta-variavel { font-family: Consolas, monospace; font-size: 12px; color: var(--texto-secundario); }

/* ---------- Plataformas conectadas: um cartao por plataforma, em coluna unica no celular ---------- */
.plat-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.plat-card {
  display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; padding: var(--sp-3) var(--sp-4);
  background: var(--fundo); border: 1px solid var(--borda); border-radius: var(--raio-sm);
}
.plat-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.plat-nome { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 220px; }
.plat-titulo { font-size: 15px; color: var(--texto); overflow-wrap: anywhere; }
.plat-selos { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.plat-dados { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--sp-3) var(--sp-4); }
.plat-dado { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.plat-dado dt { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-secundario); }
.plat-dado dd { margin: 0; font-size: 13px; line-height: 1.5; color: var(--texto); overflow-wrap: anywhere; }
.plat-dado-url { grid-column: 1 / -1; }
.plat-campo { font-family: Consolas, monospace; font-size: 12px; overflow-wrap: anywhere; }
.plat-url { display: flex; align-items: center; gap: 6px; min-width: 0; }
.plat-url-caixa { flex: 1 1 auto; min-width: 0; padding: 6px 10px; font-size: 12px; }
.plat-ajustes { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sp-3) var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--borda); }
.plat-liga { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; }
.plat-liga-rotulo { font-size: 13px; color: var(--texto); }
.plat-turmas-form { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sp-3) var(--sp-4); flex: 1 1 260px; min-width: 0; }
.plat-turmas { flex: 1 1 260px; min-width: 0; }
.plat-turmas summary { display: flex; align-items: center; min-height: 32px; font-size: 13px; color: var(--texto); cursor: pointer; }
.plat-turmas summary:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: 2px; }
/* a sanfona mostra que abre (dono, 08/10: "falta algo informando que tem que clicar"): a seta numa bolinha, que gira ao abrir e acende no mouse */
.plat-turmas summary { gap: 8px; list-style: none; }
.plat-turmas summary::-webkit-details-marker { display: none; }
.plat-turmas summary .plat-seta {
  flex: 0 0 auto; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--borda); border-radius: var(--raio-full); background: var(--branco); font-size: 12px; color: var(--texto-secundario);
  transition: transform .15s;
}
.plat-turmas[open] > summary .plat-seta { transform: rotate(90deg); }
.plat-turmas summary:hover { color: var(--accent-texto); }
.plat-turmas summary:hover .plat-seta { border-color: currentColor; color: var(--accent-texto); }
@media (prefers-reduced-motion: reduce) { .plat-turmas summary .plat-seta { transition: none; } }
.plat-turmas-lista { max-height: 200px; overflow-y: auto; margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }

/* ---------- formulario de mapeamento e mapear-json: uma coluna que o campo ocupa inteira, duas quando cabem ---------- */
.mapear-form { display: flex; flex-direction: column; gap: 14px; }
.mapear-form .campo { min-width: 0; }
.mapear-linha2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 14px; }
.mapear-form .selectbusca { min-width: 0; }
.mapear-form .selectbusca .sb-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mapear-form .sb-opt { overflow-wrap: anywhere; }
.mapear-rodape { display: flex; justify-content: flex-end; gap: var(--sp-3); flex-wrap: wrap; }
.json-area { width: 100%; height: auto; padding: 12px; box-sizing: border-box; resize: vertical; font-family: Consolas, monospace; font-size: 12.5px; }
.im-drop.im-drop-compacto { padding: 18px; }
/* Fase 18: a capa ATUAL do produto dentro da area de envio (o modal mostrava a area vazia, como se o curso nao tivesse capa). Fica por
   cima, encostada a esquerda, fora do fluxo: a area mantem a mesma caixa com e sem capa; sem imagem (sem src) nao aparece */
.im-drop.im-drop-compacto:has(.pr-capa-previa) { position: relative; }
.pr-capa-previa {
  position: absolute; left: 8px; top: 8px; bottom: 8px; height: calc(100% - 16px); width: auto; max-width: 40%;
  object-fit: contain; border-radius: var(--raio-2xs); border: 1px solid var(--borda); background: var(--fundo); pointer-events: none;
}
.pr-capa-previa:not([src]) { display: none; }
/* com a imagem, o texto da area fica a direita dela (dono, 21/10: a imagem cobria o "Clique ou arraste a imagem" da capa pronta) */
.im-drop.im-drop-compacto:has(.pr-capa-previa[src]) { padding-left: calc(40% + var(--sp-3)); }

/* ---------- escuta do webhook de teste ---------- */
.escuta-url { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.escuta-url-caixa { flex: 1 1 260px; min-width: 0; }
.escuta-acoes { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }

/* ---------- toque (celular ou tablet): alvo de 44 px e 16 px de letra nas telas da Fase 9 (Responsividade_Sempre) ---------- */
@media (max-width: 720px), (pointer: coarse) {
  .plat-card .btn-icone, .plat-card .btn, .escuta-url .btn, .escuta-acoes .btn, .mapear-rodape .btn { min-width: 44px; min-height: 44px; }
  .plat-liga, .plat-turmas summary { min-height: 44px; }
  .btn-filtro.ta-menu-btn, .pag-btn, .tabela-wrap .btn-icone { width: 44px; height: 44px; }
  .ta-menu-item { min-height: 44px; }
  .th-filtro-campo, .json-area { font-size: 16px; }
  .th-filtro-campo { height: 40px; }
  #tabWebhooks details.payload summary { padding: 13px 0; }   /* a linha da tabela tem o resumo 'payload' de 19 px: com o padding vira alvo de 45 px */
  .ra-bar input.input, .mapear-form input.input { height: 44px; min-height: 44px; }
  .json-area { min-height: 140px; }
}
@media (pointer: coarse) {
  body.tema-claro .input, body.tema-claro textarea, body.tema-claro .selectbusca .sb-search { font-size: 16px; }
}
@media (max-width: 720px) {
  .mapear-rodape .btn { flex: 1 1 100%; justify-content: center; }
  .beta-item .badge { align-self: flex-start; }
}

/* ---------- Importar Alunos: colar a lista (Fase 13, parte A; templates/op/importar_alunos.html, static/js/importar_alunos.js) ----------
   Abas pelo Padrao_Tabs (sublinhado), quatro passos em cartoes (.cd), previa curta que rola dentro do cartao e nunca na pagina. Toda cor e
   token; ate 720 px a previa vira uma pilha de linhas (sem rolagem lateral) e todo alvo de toque tem 44 px. Fica ANTES do bloco de marca de IA: o teste dele le dali ate o fim do arquivo e proibe --accent e --cor-primaria, e as abas e o resultado daqui usam a cor da marca. */
.ial-pagina { display: flex; flex-direction: column; gap: 16px; max-width: 920px; min-width: 0; }
.ial-pagina [hidden] { display: none !important; }
.ial-tabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--borda); }
.ial-tab {
  padding: 10px 16px; font-size: 13px; font-weight: 600; color: var(--texto-secundario); cursor: pointer; border: none; background: transparent;
  border-bottom: 2px solid transparent; display: inline-flex; align-items: center; gap: 6px; font-family: inherit;
}
.ial-tab:hover { color: var(--texto); }
.ial-tab:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: -2px; }
.ial-tab.ativo { color: var(--accent-texto); border-bottom-color: var(--cor-primaria); }
.ial-tab i { font-size: 16px; }
.ial-pane { display: none; flex-direction: column; gap: 16px; min-width: 0; }
.ial-pane.ativo { display: flex; }
.ial-passo { min-width: 0; }
.ial-cab { justify-content: flex-start; }
.ial-num {
  display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: 6px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-texto); font-size: 12px; font-weight: 700;
}
.ial-contagem { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; }
.ial-contador { font-size: 13px; font-weight: 600; color: var(--texto-secundario); font-variant-numeric: tabular-nums; }
.ial-contador.estouro { color: var(--danger-texto); }
textarea.ial-texto {
  width: 100%; box-sizing: border-box; height: auto; min-height: 220px; padding: 10px 12px; resize: vertical;
  font-family: Consolas, "Courier New", monospace; font-size: 13.5px; line-height: 1.5; white-space: pre; overflow: auto;
}
.ial-linha { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px 16px; align-items: start; }
.ial-linha .selectbusca { max-width: none; }
.ial-travado { pointer-events: none; opacity: .6; }
.ial-campo-data .input { width: 100%; box-sizing: border-box; }
.ial-acoes { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; justify-content: flex-end; }
/* a nota vem ANTES do botao no HTML e leva o margin-right:auto: e isso que encosta o botao na direita (Acao_Primaria_a_Direita, Padrao_Upload_Arquivo) */
.ial-acoes-planilha { justify-content: flex-end; }
.ial-acoes-planilha .nota-suave { flex: 1 1 280px; margin-right: auto; }
.ial-form-planilha { display: flex; flex-direction: column; gap: 14px; }
.ial-sb-planilha { max-width: 420px; }
.ial-planilha { max-width: 760px; }
/* o titulo da aba Planilha quebra a linha: o nowrap comum de .cd-header.cab-tabela (acima) o fazia rolar 7 px de lado a 320 px */
.ial-planilha .cd-header.cab-tabela .cd-titulo { white-space: normal; min-width: 0; overflow-wrap: anywhere; }
.ial-previa { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ial-erros { min-width: 0; }
.ial-resumo { margin: 0; font-size: 14px; color: var(--texto); overflow-wrap: anywhere; }
.ial-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ial-chips li {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--raio-full); font-size: 12.5px; font-weight: 600;
  background: var(--fundo); color: var(--texto-secundario); font-variant-numeric: tabular-nums;
}
.ial-chips li.novo { background: var(--verde-suave); color: var(--verde-escuro); }
.ial-chips li.aviso { background: var(--ambar-suave); color: var(--ambar-escuro); }
.ial-chips li.erro { background: var(--vermelho-suave); color: var(--vermelho-escuro); }
.ial-subtitulo { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--texto-secundario); }
.ial-lista-erros { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; }
.ial-lista-erros li { font-size: 13px; line-height: 1.45; color: var(--texto); overflow-wrap: anywhere; }
.ial-lista-erros strong { color: var(--vermelho-escuro); }
.ial-amostra .tabela-scroll { max-height: 340px; overflow-y: auto; border: 1px solid var(--borda); border-radius: var(--raio-sm); }
.ial-tab-previa { border: none; border-radius: 0; box-shadow: none; table-layout: fixed; }
.ial-tab-previa th:nth-child(1), .ial-tab-previa td:nth-child(1) { width: 72px; }
.ial-tab-previa th:nth-child(4), .ial-tab-previa td:nth-child(4), .ial-tab-previa th:nth-child(5), .ial-tab-previa td:nth-child(5) { width: 104px; }
.ial-tab-previa th:nth-child(6), .ial-tab-previa td:nth-child(6) { width: 26%; }
/* dono, 19/10: as turmas em pilulas e as escolhas das datas (o inicio fixo ou da linha; a expiracao calculada ou da linha), nas duas abas */
.ial-turmas { min-width: 0; }
.ial-turmas .selectbusca { max-width: 520px; }
.ial-datas { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: flex-start; }
.ial-datas .campo { min-width: 0; margin: 0; }
.ial-datas .ial-campo-data { flex: 0 1 200px; }
.ial-datas-largo { flex: 1 1 100%; }
.ial-rot { display: block; font-size: 13px; font-weight: 600; color: var(--texto-secundario); }   /* o mesmo rotulo do .campo label */
.ial-datas { align-items: flex-end; }
.ial-toggle { --fu-h: 40px; }   /* a altura do .input, pra o toggle e a data ficarem na mesma linha */
.ial-toggle.fu-presets button { display: inline-flex; align-items: center; gap: 6px; }
.ial-toggle.fu-presets button i { font-size: 15px; }
.ial-toggle.fu-presets button:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: 1px; }
.ial-datas .ial-campo-anterior { flex: 0 1 340px; }
.ial-toggle.ial-travado { pointer-events: none; opacity: .6; }
.ial-form-planilha .nota-suave { margin: 0; }
.ial-tab-previa tbody td { overflow-wrap: anywhere; font-size: 13px; }
.ial-tab-previa tbody tr.erro td { background: var(--vermelho-suave); }
.ial-tab-previa tbody tr.repetida td { color: var(--texto-secundario); }
.ial-resultado { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: var(--raio-sm); border: 1px solid var(--borda); }
.ial-resultado:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: 2px; }
.ial-resultado-icone { font-size: 28px; flex: 0 0 auto; line-height: 1; }
.ial-resultado-texto { min-width: 0; }
.ial-resultado-titulo { margin: 0; font-size: 15px; font-weight: 700; color: var(--texto); overflow-wrap: anywhere; }
.ial-resultado-detalhe { margin: 4px 0 0; font-size: 13.5px; color: var(--texto-secundario); overflow-wrap: anywhere; }
.ial-resultado.ok { background: var(--verde-suave); }
.ial-resultado.ok .ial-resultado-icone { color: var(--verde-escuro); }
.ial-resultado.misto { background: var(--ambar-suave); }
.ial-resultado.misto .ial-resultado-icone { color: var(--ambar-escuro); }
.ial-resultado.nenhum { background: var(--vermelho-suave); }
.ial-resultado.nenhum .ial-resultado-icone { color: var(--vermelho-escuro); }
@media (max-width: 720px) {
  .ial-linha { grid-template-columns: minmax(0, 1fr); }
  .ial-tab { min-height: 44px; }
  .ial-campo-data .input { min-height: 44px; }
  .ial-acoes .btn { flex: 1 1 100%; justify-content: center; }
  .ial-tab-previa, .ial-tab-previa tbody, .ial-tab-previa tr, .ial-tab-previa td { display: block; width: 100%; box-sizing: border-box; }
  .ial-tab-previa thead { display: none; }
  .ial-tab-previa th, .ial-tab-previa td { width: 100% !important; }
  .ial-toggle { --fu-h: 44px; max-width: 100%; }
  .ial-toggle button { white-space: normal; padding: 0 10px; }
  .ial-datas .ial-campo-data, .ial-datas .ial-campo-anterior { flex: 1 1 100%; }
  .ial-toggle.fu-presets { display: flex; flex-wrap: wrap; width: 100%; height: auto; }
  .ial-toggle.fu-presets button { flex: 1 1 auto; justify-content: center; height: auto; min-height: 44px; white-space: normal; }
  .ial-tab-previa tbody tr { padding: 8px 4px; border-bottom: 1px solid var(--borda); }
  .ial-tab-previa tbody td { border: none; padding: 2px 10px; font-size: 13px; }
  .ial-tab-previa tbody td::before { content: attr(data-rotulo) ": "; font-weight: 600; color: var(--texto-secundario); }
  .ial-tab-previa tbody tr:hover td { background: transparent; }
  .ial-tab-previa tbody tr.erro td { background: transparent; }
  .ial-tab-previa tbody tr.erro { background: var(--vermelho-suave); }
}

/* ---------- Fase 93: a EVOLUCAO DA TURMA numa trilha (prefixo ev-): o resumo do topo e a situacao de cada aluno ---------- */
.ev-resumo { display: flex; flex-direction: column; gap: var(--sp-3); }
.ev-numeros { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--sp-3); }
.ev-numeros li { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--borda); border-radius: var(--raio-sm); }
.ev-numeros strong { font-size: 22px; color: var(--texto); }
.ev-numeros span { font-size: 12.5px; color: var(--texto-fraco); }
.ev-trava { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 14px; color: var(--texto-suave); }
.ev-trava i { color: var(--ambar-escuro); font-size: 18px; }
.ev-situacao { margin: var(--sp-4) 0 var(--sp-3); flex-wrap: wrap; }
.ev-cel-etapa { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.ev-sit-concluiu { background: var(--verde-suave); color: var(--verde-escuro); }
.ev-sit-aguardando { background: var(--ambar-suave); color: var(--ambar-escuro); }
.ev-sit-parado { background: var(--fundo); color: var(--texto-suave); }
.ev-sit-andamento { background: var(--accent-soft); color: var(--accent-texto); }

/* ---------- Fase 96: o Log de acesso (/op/log-acesso). A barra, os tres toggles tipo 1, a pessoa com o e-mail embaixo, o "o que" com o icone, o
   codigo do aparelho e o selo do alerta (vermelho: o mesmo aparelho em varias contas; ambar: o sinal mais fraco, IP e navegador no mesmo dia) ---------- */
.la-toggles { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); margin: var(--sp-3) 0; }
.la-toggles .fu-presets { flex-wrap: wrap; }
.la-recorte { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 var(--sp-2); font-size: 14px; color: var(--texto-suave); }
.la-nota { margin: 0 0 var(--sp-3); font-size: 12.5px; color: var(--texto-fraco); }
.la-pessoa { display: inline-flex; flex-direction: column; gap: 1px; max-width: 280px; }
.la-pessoa > a, .la-pessoa > span { overflow: hidden; text-overflow: ellipsis; }
.la-email, .la-sim { font-size: 12px; color: var(--texto-fraco); overflow: hidden; text-overflow: ellipsis; }
.la-sim { display: inline-flex; align-items: center; gap: 4px; }
.la-oque { display: inline-flex; align-items: center; gap: 6px; max-width: 360px; min-width: 0; }
.la-oque a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.la-oque i { flex: 0 0 auto; color: var(--texto-suave); font-size: 16px; }
.la-aparelho { display: inline-flex; align-items: center; }
.la-aparelho code { font-size: 12.5px; }
.la-selo { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 12.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.la-selo-vermelho { background: var(--vermelho-suave); color: var(--vermelho-escuro); border: 1px solid var(--vermelho-borda); }
.la-selo-ambar { background: var(--ambar-suave); color: var(--ambar-escuro); }
.la-selo:focus-visible, .la-aparelho:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.la-linha-vermelho td:first-child { box-shadow: inset 3px 0 0 var(--vermelho); }
.la-linha-ambar td:first-child { box-shadow: inset 3px 0 0 var(--ambar); }
@media (max-width: 720px), (pointer: coarse) {
  .la-selo, .la-aparelho { min-height: 44px; }
  .la-pessoa > a, .la-oque a { line-height: 44px; }
  button.ind-link-pg { min-height: 44px; }   /* o alvo de toque do link da pagina de venda do indique (a varredura da Fase 96 achou) */
  /* o alvo de toque dos toggles tipo 1 das telas novas (Fases 89, 90, 93 e 96: a cor da insignia, a situacao e o tipo da pergunta, a situacao da
     evolucao e os tres do Log de acesso), como as ordens da Minha Area */
  .ins-cores.fu-presets, .pg-situacao.fu-presets, [data-pg-tipo].fu-presets, .ev-situacao.fu-presets, .la-toggles .fu-presets { height: auto; }
  .ins-cores.fu-presets button, .pg-situacao.fu-presets button, [data-pg-tipo].fu-presets button, .ev-situacao.fu-presets button,
  .la-toggles .fu-presets button { height: 44px; min-height: 44px; }
}

/* ---------- Toggle de duas opcoes, tipo 2 (Fase 13, correcao de UI). Fica ANTES do bloco da Marca de IA: dali pra baixo o CSS nao usa a cor da marca ---------- */
/* Toggle de duas opcoes, tipo 2 (Padrao_Toggle_Tipos): as duas coladas, divisor interno, icone em cada uma e a escolhida em fundo SOLIDO. A letra da escolhida e o
   quase preto do tema (--texto-sobre-accent, 7,13:1 sobre o laranja) e nao branco (nao passa de 4,5:1 no laranja). Botoes type=button num radiogroup; .on e a escolha. */
.fu-dois {
  display: inline-flex; align-items: stretch; align-self: flex-start; height: var(--fu-h, 38px); box-sizing: border-box;
  border: 1px solid var(--borda); border-radius: var(--raio-xs); overflow: hidden; background: var(--branco);
}
.fu-dois button {
  display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; border: 0; background: var(--branco);
  font-size: 12px; font-weight: 700; color: var(--texto-secundario); cursor: pointer; white-space: nowrap;
}
.fu-dois button + button { border-left: 1px solid var(--borda); }
.fu-dois button:hover { color: var(--accent-texto); }
.fu-dois button.on, .fu-dois button.on:hover { background: var(--cor-primaria); color: var(--texto-sobre-accent); }
.fu-dois button:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: -2px; }
.fu-dois button i { font-size: 15px; }
@media (max-width: 720px) {
  .fu-dois { flex-direction: column; align-self: stretch; height: auto; width: 100%; }
  .fu-dois button { min-height: 44px; justify-content: center; white-space: normal; text-align: center; }
  .fu-dois button + button { border-left: 0; border-top: 1px solid var(--borda); }
}

/* ---------- Fase 16 (central de popups): a lista de avisos com a coluna Gatilho e o formulario do aviso (/adm/avisos). So tokens. Fica ANTES do bloco da Marca de IA: dali pra baixo o CSS nao usa a cor da marca ---------- */
.av-resumo { font-size: 12px; color: var(--texto-suave); }
.av-freq { margin-top: 4px; }
.av-segmento, .av-periodo { font-size: 12.5px; }
.av-periodo { white-space: nowrap; }
.av-col-gatilho { font-size: 12.5px; min-width: 170px; }
#tabAvisos td:first-child { min-width: 220px; }
#tabAvisos .badge { white-space: nowrap; }   /* a pilula nao quebra em varias linhas (vira uma bolha) quando o cartao da tabela fica estreito */
.av-gatilho-rotulo { font-weight: 600; color: var(--texto); }
.av-sem-gatilho { color: var(--texto-suave); }
textarea.input.av-texto { height: auto; padding: 10px 12px; resize: vertical; }
.av-ajuda, .av-explica { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--texto-suave); }
.av-var { padding: 1px 5px; font-family: Consolas, monospace; font-size: 12px; color: var(--texto); background: var(--fundo); border: 1px solid var(--borda); border-radius: var(--raio-2xs); }
.av-rotulo { font-size: 13px; font-weight: 600; color: var(--texto-secundario); }
.av-bloco-gatilho { gap: 8px; }
.av-numero { max-width: 220px; }
/* o toggle do gatilho (Padrao_Toggle_Tipos, tipo 1, o .fu-presets de sempre): as cinco opcoes QUEBRAM em linhas em vez de estourar o modal; no toque o alvo tem 44 px */
.av-gatilho.fu-presets { --fu-h: 40px; display: flex; flex-wrap: wrap; width: 100%; height: auto; }
/* padding de 8 px (era 12): com a Poppins (Fase 18), mais larga que a Inter, as cinco opcoes voltam a caber numa linha a 1440 px */
.av-gatilho.fu-presets button { flex: 1 1 auto; height: auto; min-height: 34px; padding: 6px 8px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.av-gatilho.fu-presets button i { font-size: 15px; }
.av-gatilho.fu-presets button:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: 1px; }
@media (max-width: 720px), (pointer: coarse) { .av-gatilho.fu-presets button { min-height: 44px; } }
/* o editor da grade de datas: o campo do dia e o botao Adicionar numa linha (quebra no celular), e os dias escolhidos em chips com o X de remover */
.av-grade { gap: 8px; }
.av-grade-linha { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.av-grade-linha .input { flex: 1 1 160px; min-width: 0; }
/* o campo de data e o Adicionar dia na MESMA altura (os 40 px do .input do projeto; ate 720 px o min-height de 44 px que o projeto ja da aos dois vence) e a acao ANCORADA na
   direita (Acao_Primaria_a_Direita): na mesma linha encosta no fim, e quando a linha quebra (360 px) o botao sozinho na segunda linha segue na direita */
.av-grade-linha .input, .av-grade-linha .btn { height: 40px; box-sizing: border-box; }
.av-grade-linha .btn { flex: 0 0 auto; margin-left: auto; }
/* na PAGINA do aviso (fora do dialog) o campo nao herda os 44 px de toque do modal: o campo de data acompanha o botao ate 720 px */
@media (max-width: 720px), (pointer: coarse) { .av-grade-linha .input { min-height: 44px; } }
.av-grade-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.av-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 12px; font-size: 13px; color: var(--texto); background: var(--fundo); border: 1px solid var(--borda); border-radius: var(--raio-full); }
.av-chip-texto { overflow-wrap: anywhere; }
.av-chip-x {
  width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%; background: transparent; color: var(--texto-secundario); cursor: pointer;
}
.av-chip-x:hover { background: var(--vermelho-suave); color: var(--danger-texto); }
.av-chip-x:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: 1px; }
@media (max-width: 720px), (pointer: coarse) { .av-chip-x { width: 44px; height: 44px; } }
.av-grade-vazia { margin: 0; font-size: 13px; color: var(--texto-suave); }
.av-grade-aviso { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--texto-secundario); }
.av-grade-aviso.erro { color: var(--danger-texto); }
.av-grade-aviso:empty { display: none; }
/* a previa: so a contagem, na area do resultado (Padrao_Loading_Estado: o aviso de espera vai AQUI, nunca dentro do botao). A espera e o .loading-inline INTEIRO da nota
   (giro de 44 px com borda de 4 px e o texto embaixo); so o respiro de cima e de baixo e menor que o de 80 px do exemplo, que e de tabela */
.av-previa { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding-top: 14px; border-top: 1px solid var(--borda); }
.av-previa-res { align-self: stretch; font-size: 14px; font-weight: 600; color: var(--texto); }
.av-previa-res.erro { color: var(--danger-texto); }
.av-previa-res:empty { display: none; }
.av-previa-res .loading-inline { padding: 16px 20px; }
/* a PAGINA do aviso (dono, 20/10: o modal virou pagina, /adm/avisos/novo e /adm/avisos/<id>): os cartoes um embaixo do outro, o fieldset sem moldura, o
   Salvar na direita do rodape que gruda no fim da janela, e a tabela de quem veria dentro do cartao que rola de lado */
.av-link-titulo { color: inherit; text-decoration: none; }
.av-link-titulo:hover strong { text-decoration: underline; }
.av-pg { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 1100px; }
.av-pg-campos { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.av-pg-cartao { display: flex; flex-direction: column; gap: 14px; }
.av-pg .linha2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px var(--sp-4); }
.av-pg .linha2 > .campo { margin: 0; min-width: 0; }
@media (max-width: 720px) { .av-pg .linha2 { grid-template-columns: 1fr; } }
.av-pg-titulo { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--texto); }
.av-pg-titulo i { color: var(--cor-primaria); font-size: 18px; }
.av-pg .av-previa { padding-top: 0; border-top: 0; }
.av-previa-tab { align-self: stretch; }
.av-previa-tab td { font-size: 13px; }
.av-previa-mais { align-self: center; }
.av-pg-rodape {
  position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap;
  padding: 12px 0; background: var(--fundo); border-top: 1px solid var(--borda);
}
/* a recusa do servidor (e a do 429 e da rede) ganha o foco por script: tem que aparecer pra quem navega por teclado */
.modal-validacao:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: 2px; }

/* ---------- Fase 18 (todo o CSS da fase mora AQUI, antes do bloco da Marca de IA: os testes da Marca de IA proibem --accent e --cor-primaria depois dela) ---------- */
/* ---------- Fase 18: curso em varias Areas (modal do produto) ---------- */
.pr-areas { border: 1px solid var(--borda); border-radius: var(--raio-sm); padding: 12px 14px; margin: 4px 0 0; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pr-areas legend { padding: 0 6px; }
.pr-areas-lista { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.pr-capa-modo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.pr-capas-area { display: flex; flex-direction: column; gap: 14px; }
.pr-capa-area { display: flex; flex-direction: column; gap: 8px; }
.pr-capa-atual { color: var(--text-fraco); font-weight: 400; }
/* Fase 18: instrutores no detalhe do curso */
.cur-instrutores { display: flex; flex-direction: column; gap: var(--sp-3); }
.cur-instr-tit { margin: var(--sp-2) 0 0; font-size: 15px; }
.cur-instr { display: flex; gap: var(--sp-3); align-items: flex-start; min-width: 0; }
.cur-instr-foto { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: var(--bg-elev); }
.cur-instr-sem-foto { display: inline-flex; align-items: center; justify-content: center; font-size: 28px; color: var(--text-dim); }
.cur-instr-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cur-instr-nome { font-size: 14px; color: var(--text); }
.cur-instr-bio { font-size: var(--fs-sm); line-height: 1.6; color: var(--text-dim); overflow-wrap: anywhere; }

/* ---------- Fase 18: card vertical grande (VERTICAL_LARGE do CursEduca) e a secao TOP N ---------- */
.capa.vertical_grande { width: 320px; }
/* TOP N: o numero grande vazado a esquerda, com a capa por cima da ponta dele, e a tag vermelha "TOP N" no canto da capa (o estilo das
   capas top1..top5 que o CursEduca desenhava na imagem; aqui o numero e a tag sao da tela e a capa e a do curso) */
/* a capa do TOP N e menor que a das prateleiras (como no CursEduca) e cada par numero + capa tem folga antes do numero seguinte */
.prateleira-topn .prateleira-trilho { gap: 40px; }
.topn-item { --topn-capa-w: 180px; display: flex; align-items: flex-end; padding-left: 4px; }
/* o numero tem a ALTURA da capa (o item estica e o SVG acompanha, com a largura pela proporcao do viewBox) e fica por tras da ponta esquerda dela */
/* a capa COME a parte de tras do numero (28% da largura dele, como nas capas que o dono desenhava): a margem negativa e 28% da largura do
   SVG, que e a altura (1,5 x a capa) vezes a largura do viewBox sobre 100 */
.topn-num { --topn-larg: 60; flex: 0 0 auto; height: calc(var(--topn-capa-w) * 1.5); width: auto;
  margin-right: calc(var(--topn-capa-w) * 1.5 * var(--topn-larg) / 100 * -0.28); position: relative; z-index: 0; overflow: visible; pointer-events: none; }
.topn-num text {
  font-family: var(--font-numero-topn); font-weight: 400; font-size: 114px;
  fill: transparent; stroke: var(--topn-contorno); stroke-width: 2.5px; vector-effect: non-scaling-stroke;
}
.topn-num[data-larg="42"] { --topn-larg: 42; }
.topn-num[data-larg="98"] { --topn-larg: 98; }
.topn-item .capa { position: relative; z-index: 1; flex: 0 0 auto; width: var(--topn-capa-w); }
.topn-tag {
  position: absolute; top: 0; right: 8px; z-index: 2;
  padding: 6px 7px 7px; border-radius: 0 0 var(--raio-2xs) var(--raio-2xs);
  background: var(--danger-botao); color: var(--texto-sobre-danger);
  font-weight: 800; font-size: 13px; line-height: .95; text-align: center; letter-spacing: .02em; max-width: 44px; white-space: normal;
}
.topn-item .capa .cadeado { top: auto; bottom: 8px; }
@media (max-width: 720px) {
  .capa.vertical_grande { width: min(320px, calc((100vw - 48px) / 2.5)); }   /* no celular a grande tambem mostra 2,5 (no computador segue maior) */
  .topn-item { --topn-capa-w: min(180px, 38vw); }
  .prateleira-topn .prateleira-trilho { gap: 24px; }

  .topn-tag { font-size: 11px; padding: 5px 6px 6px; }
}

/* Fase 18: a equipe visitando a vitrine de uma Area (tela de Areas, icone Abrir a area): o aviso flutua no canto de baixo, fora do fluxo */
.visita-area {
  position: fixed; right: 16px; bottom: 16px; z-index: 50; max-width: calc(100vw - 32px);
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  padding: 10px 12px 10px 14px; border-radius: var(--raio); border: 1px solid var(--border);
  background: var(--bg-elev); box-shadow: var(--sombra); color: var(--text); font-size: 13px;
}
.visita-area i { color: var(--accent); font-size: 18px; }
@media (max-width: 720px) { .visita-area .btn { min-height: 44px; } }
/* Fase 67 (dono, 18/10): o MODO VISITANTE. A faixa fixa embaixo, no meio, que nao sai (o Sair tira a visita); acima da barra de abas do
   celular; a pagina ganha a folga de baixo pra o ultimo card nunca ficar escondido atras dela */
.faixa-visitante {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 50; width: max-content; max-width: calc(100vw - 24px);
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2) var(--sp-3); flex-wrap: wrap;
  padding: 10px 14px; border-radius: var(--raio); border: 1px solid var(--accent); background: var(--bg-elev); box-shadow: var(--sombra-lg);
  color: var(--text); font-size: 14px; font-weight: 600; text-align: center;
}
.faixa-visitante > i { color: var(--accent); font-size: 18px; }
.faixa-visitante .fv-texto { line-height: 1.35; }
.faixa-visitante form { margin: 0; }
.conteudo-aluno:has(.faixa-visitante) { padding-bottom: calc(var(--pad-aluno) + 88px); }
@media (max-width: 880px) {
  html.com-tabbar .faixa-visitante { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  html.com-tabbar .conteudo-aluno:has(.faixa-visitante) { padding-bottom: calc(200px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 720px) { .faixa-visitante .btn { min-height: 44px; } }
/* a secao das capas das Areas da Home: o trilho e a capa da prateleira, toda capa igual (sem cadeado: a Area sem matricula abre no modo visitante) */
.prateleira-areas .capa-rodape { justify-content: flex-start; }
/* Fase 69 (dono, 18/10): o DESTAQUE da Home, a hero em elementos (a stream-feature da vitrine do site). Celular primeiro: o cartao em pe, a
   foto em cima e o texto centrado embaixo; de 700 px a foto vai pra direita esmaecendo e o texto pra esquerda. So token (--dq-*, ios-dark.css) */
.dq {
  position: relative; isolation: isolate; overflow: hidden; width: 100%; min-height: 480px; aspect-ratio: 3 / 4.4; margin-bottom: var(--sp-5);
  border: 1px solid var(--dq-borda); border-radius: var(--raio-lg); background: var(--dq-fundo); box-shadow: var(--sombra);
}
.dq.dq-sem-foto { aspect-ratio: auto; min-height: 360px; }
.dq-foto { position: absolute; inset: 0; width: 100%; height: 76%; object-fit: cover; object-position: 50% 22%;
  -webkit-mask-image: linear-gradient(180deg, black 65%, transparent 100%); mask-image: linear-gradient(180deg, black 65%, transparent 100%); }
.dq-sombra { position: absolute; inset: 0; background: var(--dq-sombra-cel); }
.dq-selo { position: absolute; top: 22px; left: 22px; max-width: calc(100% - 44px); font-size: 11px; font-weight: 700; letter-spacing: .17em;
  text-transform: uppercase; color: var(--text); }
.dq-conteudo { position: absolute; left: 20px; right: 20px; bottom: 22px; text-align: center; }
.dq-meta { margin: 0 0 10px; color: var(--dq-texto-suave); font-size: 12px; }
.dq-titulo { margin: 0 0 12px; color: var(--text); font-size: clamp(28px, 7vw, 52px); font-weight: 800; line-height: 1.04; letter-spacing: -.03em;
  overflow-wrap: anywhere; text-wrap: balance; }
.dq-descricao { margin: 0 0 18px; color: var(--dq-texto-suave); font-size: 14px; line-height: 1.6; }
.dq-acoes { display: grid; grid-template-columns: 1.25fr 1fr; gap: 8px; }
.dq-acoes > :only-child { grid-column: 1 / -1; }
.dq-botao, .dq-botao2 { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 16px;
  border-radius: var(--raio-sm); font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; min-width: 0;
  transition: background var(--transicao); }
.dq-botao { background: var(--dq-botao-fundo); color: var(--dq-botao-texto); border: 1px solid var(--dq-botao-fundo); }
.dq-botao:hover { background: var(--dq-botao-fundo-hover); color: var(--dq-botao-texto); }
.dq-botao2 { color: var(--text); background: var(--dq-vidro); border: 1px solid var(--dq-vidro-borda);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.dq-botao2:hover { background: var(--dq-vidro-hover); color: var(--text); }
.dq-botao:focus-visible, .dq-botao2:focus-visible { outline: 3px solid var(--accent-texto); outline-offset: 4px; }
.dq-status { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 12px 0 0; color: var(--dq-texto-suave); font-size: 12px; }
.dq-ponto { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }
.dq-ancora { display: block; scroll-margin-top: 80px; }
.dq.dq-sem-foto .dq-conteudo { position: relative; left: auto; right: auto; bottom: auto; padding: 72px 20px 24px; }
@media (min-width: 700px) {
  .dq { aspect-ratio: 1.8; min-height: 450px; max-height: 580px; }
  .dq-foto { width: 74%; height: 100%; left: auto; right: 0; object-position: 50% 36%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, black 24%); mask-image: linear-gradient(90deg, transparent 0, black 24%); }
  .dq-sombra { background: var(--dq-sombra-pc); }
  .dq-selo { top: 32px; left: 36px; }
  .dq-conteudo { text-align: left; left: 36px; right: auto; bottom: 30px; width: 55%; max-width: 560px; }
  .dq-titulo { font-size: clamp(32px, 4.4vw, 56px); }
  .dq-descricao { font-size: 15px; }
  .dq-acoes { display: flex; flex-wrap: wrap; gap: 10px; }
  .dq-botao, .dq-botao2 { font-size: 14px; padding: 10px 18px; }
  .dq-status { justify-content: flex-start; }
  .dq.dq-sem-foto .dq-conteudo { padding: 84px 36px 32px; width: auto; }
}
@media (min-width: 1100px) {
  .dq { aspect-ratio: 2.55; min-height: 480px; }
  .dq-selo, .dq-conteudo { left: 48px; }
  .dq-conteudo { bottom: 36px; }
  .dq-foto { width: 67%; object-position: 50% 32%; }
}
.simulacao-aviso form { margin: 0; }
/* a simulacao da visao do aluno (Fase 18): o mesmo aviso flutuante, com o Sair */

/* ---------- Fase 18: a Ementa da Area (templates/vitrine/_ementa_arvore.html; logada no layout do aluno e publica em /ementa/<area>) ---------- */
.em { width: 100%; }
.em-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.em-h1 { font-family: var(--font-titulo); font-size: 26px; font-weight: 700; margin: 0; color: var(--text); }
.em-sub { margin: 4px 0 0; color: var(--text-dim); font-size: 14px; }
.em-acoes { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
/* o campo e os botoes da barra com a MESMA altura (36 px; 44 no celular, mais abaixo) */
.em-acoes .btn { height: 36px; box-sizing: border-box; }
.em-busca { position: relative; display: flex; align-items: center; }
.em-busca > i { position: absolute; left: 12px; color: var(--text-fraco); pointer-events: none; }   /* so a lupa (o X do celular e um botao) */
.em-busca input {
  height: 36px; width: 280px; max-width: 100%; padding: 0 12px 0 36px; box-sizing: border-box; border-radius: var(--raio-sm); border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font: inherit; font-size: 14px;
}
.em-busca input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }
.em-alcance { margin: 0 0 var(--sp-4); font-size: 13px; }
.em-alcance a { color: var(--accent); }
.em-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); margin: 0 0 var(--sp-5); }
.em-kpi { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--raio); padding: var(--sp-3) var(--sp-4); }
/* o icone grande e bem esmaecido no canto do cartao (enfeite: aria-hidden) */
.em-kpi-icone { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 52px; color: var(--text-dim); opacity: .14; pointer-events: none; }
.em-kpi dt { font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; }
.em-kpi dd { margin: 4px 0 0; font-family: var(--font-titulo); font-size: 24px; font-weight: 700; color: var(--text); }
.em-area { font-family: var(--font-titulo); font-size: 18px; margin: var(--sp-5) 0 var(--sp-3); color: var(--text); }
.em-nada, .em-vazio { color: var(--text-dim); padding: var(--sp-4) 0; }
.em details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--sp-3); }
.em details > summary::-webkit-details-marker { display: none; }
.em details > summary::before {
  content: "\203A"; flex: 0 0 auto; width: 14px; color: var(--text-fraco); font-size: 18px; line-height: 1; transition: transform .15s;
}
.em details[open] > summary::before { transform: rotate(90deg); }
.em summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--raio-xs); }
.em-nome { flex: 1 1 auto; min-width: 0; color: var(--text); }
.em-meta { flex: 0 0 auto; color: var(--text-dim); font-size: 12px; white-space: nowrap; }
.em-secao { background: var(--bg-elev); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--raio);
  margin-bottom: var(--sp-3); }
.em-secao > summary { padding: var(--sp-3) var(--sp-4); font-weight: 700; font-size: 15px; }
.em-curso { border-top: 1px solid var(--border); }
.em-curso > summary { padding: 10px var(--sp-4) 10px calc(var(--sp-4) + 8px); font-weight: 600; font-size: 14px; }
.em-capa { width: 30px; height: 45px; object-fit: cover; border-radius: var(--raio-2xs); flex: 0 0 auto; }
.em-cadeado { flex: 0 0 auto; display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--raio-full);
  background: linear-gradient(145deg, var(--cadeado-chumbo-claro), var(--cadeado-chumbo-escuro)); color: var(--accent); font-size: 12px;
  box-shadow: -2px -2px 4px var(--cadeado-luz), 2px 2px 5px var(--cadeado-sombra), inset 1px 1px 1px var(--cadeado-luz), inset -1px -1px 1px var(--cadeado-sombra); }
/* o cadeado do modulo e da aula do curso sem acesso: a MESMA bola chumbo neomorfa do curso, menor */
.em-cadeado.em-cadeado-p { width: 20px; height: 20px; font-size: 10px; }
.em-modulo > summary { padding: 8px var(--sp-4) 8px calc(var(--sp-4) + 30px); font-size: 13px; }
.em-modulo > summary .em-nome { color: var(--text-dim); }
.em-aulas { list-style: none; margin: 0; padding: 0 var(--sp-4) var(--sp-2) calc(var(--sp-4) + 52px); }
.em-aulas li { display: flex; align-items: baseline; gap: var(--sp-3); padding: 6px 0; border-top: 1px dashed var(--border); font-size: 13px; }
.em-num { flex: 0 0 22px; color: var(--text-fraco); font-variant-numeric: tabular-nums; }
.em-aulas a.em-nome { color: var(--text); text-decoration: none; }
.em-aulas a.em-nome:hover, .em-aulas a.em-nome:focus-visible { color: var(--accent); text-decoration: underline; }
.em-dur { flex: 0 0 72px; text-align: right; color: var(--text-dim); font-variant-numeric: tabular-nums; }   /* largura fixa: os cadeados das aulas ficam alinhados */
/* a pagina publica (sem o layout do aluno) */
.em-publica { background: var(--bg); color: var(--text); margin: 0; }
.em-cab { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--border); }
.em-logo { width: 32px; height: 32px; border-radius: var(--raio-full); object-fit: cover; }
.em-marca { font-family: var(--font-titulo); font-weight: 700; }
.em-cab-acoes { margin-left: auto; position: relative; display: flex; align-items: center; gap: var(--sp-2); }
.em-btn-icone { width: 36px; height: 36px; padding: 0; justify-content: center; }
.em-btn-icone i { font-size: 18px; }
.em-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 70; min-width: 240px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--raio); box-shadow: var(--sombra); }
.em-menu-item { display: flex; align-items: center; gap: var(--sp-2); padding: 10px 12px; border-radius: var(--raio-sm); color: var(--text); text-decoration: none; font-size: 14px; }
.em-menu-item i { color: var(--accent); font-size: 18px; }
.em-menu-item:hover, .em-menu-item:focus-visible { background: var(--bg-elev); }
/* a barra de cima do aluno no celular: os dois icones no lugar da lupa */
.em-topbar-acoes { display: flex; align-items: center; gap: 6px; }
/* a lupa flutuante (publica), a lupa e o Baixar da barra de cima (logado) e o X da busca so existem no celular */
.em-fab, .em-busca-fechar, .em-lupa-topo { display: none; }
.em-main { padding: var(--sp-5); display: flex; justify-content: center; }
.em-main .em { width: 100%; }
/* o modal do Baixar do celular (dono, 13/10): Baixar PDF, WhatsApp e e-mail, um por linha */
.em-dl-opcoes { display: flex; flex-direction: column; gap: var(--sp-2); }
.em-dl-opcao { display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: 56px; padding: 10px var(--sp-3); box-sizing: border-box;
  border: 1px solid var(--border); border-radius: var(--raio); background: var(--surface); color: var(--text); font: inherit; font-size: 15px;
  font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; }
.em-dl-opcao:hover, .em-dl-opcao:focus-visible { border-color: var(--accent); }
.em-dl-opcao:disabled { opacity: .5; cursor: progress; border-color: var(--border); }   /* enquanto o PDF e preparado */
.em-dl-opcao:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.em-dl-opcao i { display: grid; place-items: center; flex: 0 0 40px; height: 40px; border-radius: var(--raio-sm); background: var(--accent-soft);
  color: var(--accent); font-size: 22px; }
.em-dl-status { margin: 0; font-size: 13px; color: var(--text-dim); }
.em-dl-status:empty { display: none; }
/* no celular (onde a barra de cima existe, ate 880 px; dono, 13/10): na barra, a lupa, o Baixar e o sino, nessa ordem; o corpo perde a busca e
   os botoes. A busca aberta e uma barra presa no TOPO, por cima da barra de cima (embaixo ela ficava atras da barra de abas e do teclado) */
@media (max-width: 880px) {
  .em-acoes { width: 100%; }
  .em-acoes-botoes { display: none; }
  .em-busca { display: none; }
  .em-lupa-topo { display: inline-flex; }
  .em.em-buscando .em-busca { display: flex; position: fixed; left: 8px; right: 8px; top: calc(4px + env(safe-area-inset-top, 0px)); width: auto; z-index: 50;   /* acima da barra de cima (45) e do sino (46), abaixo da gaveta do menu (55 e 60) */
    padding: 8px; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--raio); box-shadow: var(--sombra);
    -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); }   /* a barra de cima some por tras do vidro */
  .em.em-buscando .em-busca input { width: 100%; height: 44px; min-height: 44px; flex: 1 1 auto; }
  .em.em-buscando .em-busca > i { left: 20px; }
  .em.em-buscando .em-busca-fechar { display: grid; place-items: center; flex: 0 0 44px; height: 44px; border-radius: var(--raio-sm);
    border: 1px solid var(--border); background: var(--bg-elev); color: var(--text); }
  .em-fab { display: grid; place-items: center; position: fixed; right: 16px; bottom: 16px; z-index: 50; width: 56px; height: 56px;
    border: 0; border-radius: var(--raio-full); background: var(--accent); color: var(--texto-sobre-accent); font-size: 24px; box-shadow: var(--sombra); cursor: pointer; }
  .em.em-buscando .em-fab { display: none; }
  .em-btn-icone { width: 44px; height: 44px; }
}
@media (max-width: 720px) {
  .em-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .em-kpi dd { font-size: 20px; white-space: nowrap; }
  .em-cab { padding: var(--sp-2) var(--sp-4); }
  .em-kpi-icone { font-size: 40px; }
  .em details > summary { flex-wrap: wrap; }
  .em details > summary .em-nome { flex: 1 1 0; }   /* o nome encolhe na linha da capa e do cadeado, nunca empurra os dois pra baixo */
  .em-meta { width: 100%; padding-left: 26px; white-space: normal; }
  .em-curso > summary, .em-modulo > summary { padding-left: var(--sp-4); }
  .em-aulas { padding-left: var(--sp-4); }
  .em-main { padding: var(--sp-4); }
}
@media print {
  .sidebar, .aluno-topbar-mobile, .em-acoes, .em-alcance, .em-cab, .visita-area, .em-fab, #emBaixarModal { display: none !important; }
  body, .em-publica { background: var(--impressao-fundo); color: var(--impressao-texto); }
  .em-h1, .em-nome, .em-kpi dd, .em-area { color: var(--impressao-texto); }
  .em-secao, .em-kpi { background: var(--impressao-fundo); border-color: var(--impressao-borda); }
  .em-meta, .em-dur, .em-sub, .em-kpi dt, .em-modulo > summary .em-nome { color: var(--impressao-fraco); }
  .em details { break-inside: avoid-page; }
}
.em-titulos { min-width: 0; }

/* ---------- Fase 18: a barra de rolagem padrao da casa (.rolagem-fina) ----------
   Fina, arredondada, sem as setas e na cor do fundo (o trilho e transparente; o polegar sai de --text, tokens --rolagem-*). Vale pro
   elemento que leva a classe E pra tudo o que rola dentro dele: no <html> da experiencia do aluno (base_aluno.html e a Ementa publica) ela
   cobre a pagina, a sidebar, os modais e as listas. Chrome, Edge e Safari usam o ::-webkit-scrollbar (que desenha o raio); o Firefox, que
   nao tem esse seletor, usa as propriedades padrao (fina e na mesma cor). */
.rolagem-fina::-webkit-scrollbar, .rolagem-fina ::-webkit-scrollbar { width: 8px; height: 8px; }
.rolagem-fina::-webkit-scrollbar-track, .rolagem-fina ::-webkit-scrollbar-track { background: transparent; }
.rolagem-fina::-webkit-scrollbar-thumb, .rolagem-fina ::-webkit-scrollbar-thumb {
  background: var(--rolagem-polegar); border-radius: var(--raio-full); border: 2px solid transparent; background-clip: padding-box;
}
.rolagem-fina::-webkit-scrollbar-thumb:hover, .rolagem-fina ::-webkit-scrollbar-thumb:hover { background-color: var(--rolagem-polegar-hover); }
.rolagem-fina::-webkit-scrollbar-button, .rolagem-fina ::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.rolagem-fina::-webkit-scrollbar-corner, .rolagem-fina ::-webkit-scrollbar-corner { background: transparent; }
@supports not selector(::-webkit-scrollbar) {
  .rolagem-fina, .rolagem-fina * { scrollbar-width: thin; scrollbar-color: var(--rolagem-polegar) transparent; }
}

/* ---------- Vitrine do admin (Fase 18, pedido do dono de 06/10): a Area na faixa de cima e o quadro "Configuracoes da area" ---------- */
.va-area { display: flex; align-items: center; gap: var(--sp-2); margin: 0; }
.va-area .selectbusca { min-width: 0; width: 220px; }
.va-area .sb-display { height: 32px; }
.va-cd { margin-bottom: var(--sp-5); }
.va-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.va-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-5); }
.va-grade .campo { margin: 0; }
.va-acao { display: flex; justify-content: flex-end; }
/* Fase 66 (dono, 18/10): o Habilita sidebar, fora do formulario (grava ao clicar), separado do Salvar por uma linha */
.va-sidebar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--border); }
.va-sidebar-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.va-sidebar-rotulo { font-weight: 600; color: var(--texto); }
.va-sidebar .mu-dica { margin: 0; }
/* Fase 67: a capa vertical e a horizontal da Area no quadro (a previa na proporcao dela) e o bloco da secao Areas do modal */
.mu-previa.mu-previa-vertical { width: 48px; height: 72px; object-fit: cover; }
.mu-previa.mu-previa-horizontal { width: 96px; height: 64px; object-fit: cover; }
.vt-areas, .vt-destaque { display: flex; flex-direction: column; gap: var(--sp-3); }
/* a capa de cada Area no cartao da secao Areas da Home (dono, 18/10): uma por linha, a previa na proporcao da capa */
.va-capas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--sp-4); }
.va-capa-item form { margin: 0; }
.va-capa-item .btn { margin-top: var(--sp-2); }
@media (max-width: 720px) {
  .va-grade { grid-template-columns: minmax(0, 1fr); }
  .va-area .selectbusca { width: min(200px, 46vw); }
  .va-area .sb-display { height: 44px; }
}

/* ---------- Fase 18: o certificado (templates/certificados/; montado na hora a partir da tabela certificados) ----------
   Papel claro em qualquer tema (tokens --cert-*), A4 deitado na impressao (o Baixar PDF), moldura dourada dupla. No celular a folha
   perde a proporcao fixa e o texto encolhe; nada rola de lado. */
.cert-corpo { background: var(--bg); color: var(--text); min-height: 100vh; }
.cert-faixa {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap;
  max-width: 1100px; margin: 0 auto; padding: var(--sp-4) 16px var(--sp-3);
}
.cert-valido { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--verde); }
.cert-valido i { font-size: 20px; }
.cert-valido.cert-previa { color: var(--accent-texto); }   /* a previa do modelo, com dados de exemplo */
.cert-acoes { display: inline-flex; gap: var(--sp-2); flex-wrap: wrap; }
.cert-palco { padding: 0 16px var(--sp-6); display: flex; justify-content: center; }
.cert {
  width: 100%; max-width: 1100px; aspect-ratio: 297 / 210; background: var(--cert-papel); color: var(--cert-tinta);
  padding: 2.4%; box-shadow: var(--sombra); border-radius: var(--raio-sm);
}
.cert-moldura {
  height: 100%; border: 3px double var(--cert-ouro); outline: 1px solid var(--cert-ouro-claro); outline-offset: 6px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 3% 6%; gap: 6px;
}
.cert-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 2%; }
.cert-logo { width: 56px; height: 56px; border-radius: 50%; object-fit: contain; }
.cert-empresa { font-weight: 700; font-size: 18px; letter-spacing: .02em; }
.cert-tipo { margin: 0 0 2%; font-size: 15px; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; color: var(--cert-ouro); }
.cert-texto { margin: 0; font-size: 16px; color: var(--cert-fraco); }
.cert-texto strong { color: var(--cert-tinta); }
.cert-nome { margin: 4px 0 8px; font-size: 40px; font-weight: 700; line-height: 1.1; color: var(--cert-tinta); overflow-wrap: anywhere; }
.cert-curso { margin: 4px 0 10px; font-size: 26px; font-weight: 600; line-height: 1.2; color: var(--cert-tinta); overflow-wrap: anywhere; }
.cert-rodape { width: 100%; margin-top: auto; padding-top: 3%; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.cert-conferencia { display: flex; align-items: center; gap: 14px; text-align: left; min-width: 0; }
.cert-qr { width: 96px; height: 96px; flex: 0 0 auto; }
.cert-codigo { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--cert-fraco); min-width: 0; }
.cert-codigo strong { font-size: 16px; letter-spacing: .08em; color: var(--cert-tinta); }
.cert-url { overflow-wrap: anywhere; }
.cert-assina { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; color: var(--cert-fraco); min-width: 200px; }
.cert-linha { display: block; width: 100%; border-top: 1px solid var(--cert-tinta); }
.cert-conferir { max-width: 460px; width: 100%; margin-top: var(--sp-6); display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); text-align: center; }
.cert-conferir-titulo { margin: 0; font-size: 22px; }
.cert-conferir-sub { margin: 0; color: var(--text-fraco); }
.cert-erro { margin: 0; display: inline-flex; align-items: center; gap: 6px; color: var(--vermelho); font-weight: 600; }
.cert-conferir-form { display: flex; gap: var(--sp-2); width: 100%; }
.cert-conferir-form .input { flex: 1 1 auto; min-width: 0; text-transform: uppercase; }
@media (max-width: 720px) {
  .cert { aspect-ratio: auto; padding: 14px; }
  .cert-moldura { padding: 20px 14px; outline-offset: 4px; }
  .cert-nome { font-size: 26px; }
  .cert-curso { font-size: 19px; }
  .cert-texto { font-size: 14px; }
  .cert-tipo { letter-spacing: .18em; font-size: 12px; }
  .cert-rodape { flex-direction: column; align-items: center; gap: 18px; }
  .cert-conferencia { flex-direction: column; text-align: center; }
  .cert-codigo { align-items: center; }
  .cert-acoes .btn, .cert-conferir-form .btn, .cert-conferir-form .input { min-height: 44px; }
  .cert-conferir-form { flex-direction: column; }
}
@media print {
  @page { size: A4 landscape; margin: 0; }
  .cert-faixa { display: none !important; }
  .cert-corpo { background: var(--cert-papel); }
  .cert-palco { padding: 0; }
  .cert { width: 297mm; height: 210mm; max-width: none; aspect-ratio: auto; box-shadow: none; border-radius: 0; padding: 10mm; }
}

/* Fase 19: a folha 2 do certificado (o complemento), embaixo da folha 1; na impressao, uma folha por pagina */
.cert-palco-pilha { flex-direction: column; align-items: center; gap: var(--sp-5); }
.cert-comp {
  width: 100%; max-width: 1100px; aspect-ratio: 297 / 210; background: var(--cert-papel); color: var(--cert-tinta);
  padding: 4%; box-shadow: var(--sombra); border-radius: var(--raio-sm); display: flex; flex-direction: column; gap: var(--sp-3);
}
.cert-comp-titulo { margin: 0; font-size: 26px; font-weight: 700; }
.cert-comp-sub { margin: 0; color: var(--cert-fraco); }
.cert-comp-mod { display: flex; flex-direction: column; gap: 4px; }
.cert-comp-linha { display: flex; justify-content: space-between; gap: var(--sp-3); margin: 0; overflow-wrap: anywhere; }
.cert-comp-modnome { font-size: 16px; font-weight: 600; }
.cert-comp-aulas { list-style: none; margin: 0; padding: 0 0 0 var(--sp-4); display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.cert-comp-h { color: var(--cert-fraco); flex: 0 0 auto; }
.cert-comp-total { margin: 0; padding-top: var(--sp-3); border-top: 1px solid var(--cert-ouro-claro); font-weight: 700; }
.cert-comp-rodape { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); }
@media (max-width: 720px) {
  .cert-comp { aspect-ratio: auto; padding: 16px; }
  .cert-comp-titulo { font-size: 20px; }
}
@media print {
  .cert-palco-pilha { display: block; }
  .cert-comp { break-before: page; width: 297mm; height: 210mm; max-width: none; aspect-ratio: auto; box-shadow: none; border-radius: 0; padding: 14mm; }
}

/* o botao do certificado (Fase 18): o dourado do trofeu, no detalhe do curso e em Meus Certificados */
.btn.btn-trofeu i { color: var(--trofeu-ouro); }
.cur-form-cert { display: contents; }

/* ---------- Fase 19: o parabens do curso concluido (templates/certificados/_modal_parabens.html, static/js/certificado_modal.js) ----------
   O trofeu do cabecalho do Conteudo do curso e um botao FORA do botao que dobra a lista (botao nao mora dentro de botao): fica por cima do
   lugar reservado dentro do cabecalho (.aula-trofeu-lugar). O trofeu da Minha Lista e da busca tambem e botao. */
.aula-modulos-topo { position: relative; }
.aula-trofeu-lugar { display: inline-block; width: 36px; height: 36px; }
.aula-trofeu-lugar[hidden], .aula-trofeu[hidden] { display: none; }
button.aula-trofeu {
  position: absolute; top: 50%; right: calc(16px + 14px + var(--sp-3)); transform: translateY(-50%);
  background: none; border: 0; padding: 0; cursor: pointer; border-radius: 50%;
}
button.aula-trofeu:hover i { filter: brightness(1.15); }
button.aula-trofeu:focus-visible, button.ml-trofeu:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button.ml-trofeu { display: inline-flex; background: none; border: 0; padding: 0; cursor: pointer; min-width: 40px; min-height: 40px; align-items: center;
  justify-content: center; border-radius: 50%; }
.pz-corpo { display: flex; flex-direction: column; gap: var(--sp-3); }
.pz-topo { display: flex; align-items: center; gap: var(--sp-3); }
.pz-trofeu { flex: 0 0 auto; font-size: 44px; color: var(--trofeu-ouro); filter: drop-shadow(var(--trofeu-sombra)); }
.pz-texto { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
.pz-sub, .pz-comp { margin: 0; font-size: 13px; color: var(--text-fraco); overflow-wrap: anywhere; }
.pz-comp { color: var(--text); font-weight: 600; }
.pz-erro { margin: 0; color: var(--vermelho); font-weight: 600; }
.pz-estado { display: flex; flex-direction: column; gap: var(--sp-3); }
.pz-corpo .loading-inline[hidden], .pz-estado[hidden], .pz-erro[hidden], .pz-comp[hidden] { display: none; }
/* a previa (20/10): a MOLDURA ja reserva a folha A4 deitada antes do PNG chegar (o modal nao pula de tamanho) e a imagem cabe nela sem esticar;
   ate o load a espera do projeto (o .loading-inline inteiro, o giro de 44 px e o texto embaixo), no error a frase curta (certificado_modal.js, data-carga) */
.pz-previa { position: relative; display: block; width: 100%; aspect-ratio: 3508 / 2479; overflow: hidden; border-radius: var(--raio-sm);
  background: var(--cert-papel); box-shadow: var(--sombra); }
.pz-previa:not([data-carga="pronta"]) { background: var(--branco); }
.pz-previa-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.pz-previa:not([data-carga="pronta"]) .pz-previa-img { visibility: hidden; }
.loading-inline.pz-previa-espera { position: absolute; inset: 0; justify-content: center; padding: var(--sp-4); }
.pz-previa-falhou { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; padding: var(--sp-4);
  text-align: center; font-size: 14px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.pz-previa:not([data-carga="carregando"]) .pz-previa-espera, .pz-previa:not([data-carga="falhou"]) .pz-previa-falhou { display: none; }
.pz-acoes { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
/* dono, 09/10: o parabens GRANDE e tudo a vista sem rolar (a previa ao lado das acoes, presa a altura da janela), o fundo preto e desfocado
   do sino aberto (o --overlay do .modal-bg e azulado) e a caixa de vidro da barra de abas e do aviso flutuante */
.modal-bg.pz-bg { background: var(--overlay-gaveta); -webkit-backdrop-filter: blur(10px) saturate(120%); backdrop-filter: blur(10px) saturate(120%); }
.modal-bg.pz-bg .modal-caixa.pz-caixa {
  width: min(89vw, 1400px); max-height: calc(100dvh - 40px);
  background: var(--tabbar-fundo, var(--surface)); -webkit-backdrop-filter: var(--vidro-blur, blur(30px) saturate(180%));
  backdrop-filter: var(--vidro-blur, blur(30px) saturate(180%)); border: 1px solid var(--border); box-shadow: var(--sombra), var(--vidro-luz, none);
}
.pz-estado[data-pz-estado="gerado"]:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: var(--sp-5); align-items: center; }
.pz-caixa .pz-previa { width: min(100%, calc((100dvh - 236px) * 3508 / 2479)); justify-self: center; }   /* a altura presa a janela, pela largura */
.pz-lado { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.pz-acoes-lado { flex-direction: column; }
.pz-acoes-lado .btn { justify-content: flex-start; }
@media (max-width: 880px) {
  .pz-estado[data-pz-estado="gerado"]:not([hidden]) { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  .pz-caixa .pz-previa { width: min(100%, calc(30dvh * 3508 / 2479)); }
  .pz-acoes-lado { flex-direction: row; }
}
@media (max-width: 720px) {
  button.aula-trofeu { width: 44px; height: 44px; right: calc(16px + 14px + var(--sp-3) - 4px); }
  button.ml-trofeu { min-width: 44px; min-height: 44px; }
  .pz-acoes .btn { min-height: 44px; flex: 1 1 auto; justify-content: center; }
}

/* Meus Certificados na Minha Area (Fase 18) */
.ma-cert-lista { display: flex; flex-direction: column; gap: var(--sp-3); }
.ma-cert-item { display: flex; flex-direction: row; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }   /* row: o .cd e coluna */
.ma-cert-icone { font-size: 18px; color: var(--trofeu-ouro); vertical-align: -2px; }
.ma-cert-texto { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.ma-cert-sub { font-size: 13px; color: var(--text-fraco); }
.ma-cert-acoes { display: inline-flex; gap: var(--sp-2); flex-wrap: wrap; }
.ma-cert-prontos { margin-bottom: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }
.ma-cert-prontos .ma-cert-item { margin: 0; }
.ma-cert-prontos-titulo { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.ma-cert-prontos-titulo i { color: var(--trofeu-ouro); }
@media (max-width: 720px) {
  .ma-cert-acoes .btn, .ma-cert-item .btn { min-height: 44px; }
  .ma-cert-item .ml-capa, .ma-cert-texto, .ma-cert-acoes { flex-basis: 100%; }
}

/* ---------- Fase 18: o modelo de certificado (servicos/certificados_layouts.py) ----------
   .cl: a folha publica do certificado com o modelo (a proporcao e o lugar de cada variavel vem do CSS gerado, /certificado/modelo/<id>.css;
   a letra em cqw cresce e encolhe com a folha). .cme-*: o editor (/adm/certificados/<id>), que desenha com a MESMA conta. */
.cl { position: relative; container-type: inline-size; width: 100%; max-width: 1100px; aspect-ratio: 842 / 595; overflow: hidden;
  background: var(--cert-papel); color: var(--cert-tinta); box-shadow: var(--sombra); border-radius: var(--raio-sm); }
.cl-fundo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cl-c { position: absolute; margin: 0; line-height: 1.15; overflow-wrap: anywhere; }
.cl-c-qr { height: auto; }
@media print { .cl { box-shadow: none; border-radius: 0; max-width: none; } }
.cm-cd { margin-bottom: var(--sp-5); }
.cm-sub { margin: 2px 0 var(--sp-3); font-size: 13px; color: var(--text-fraco); }
.cm-titulo { margin: var(--sp-4) 0 var(--sp-2); font-size: 15px; }
.cm-filtro { max-width: 360px; margin-bottom: var(--sp-2); }
.cm-sb { min-width: 220px; }
.cm-vale { color: var(--text-fraco); font-size: 13px; }
.cm-form-novo { margin: 0; }
.cme { margin: 0; }
.cme-grade { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--sp-4); align-items: start; }
.cme-palco { position: sticky; top: var(--sp-4); min-width: 0; }
.cme-folha { position: relative; container-type: inline-size; aspect-ratio: 842 / 595; overflow: hidden; background: var(--cert-papel);
  border: 1px solid var(--border); border-radius: var(--raio-sm); }
.cme-folha.em_pe { aspect-ratio: 595 / 842; max-width: 520px; margin: 0 auto; }
.cme-fundo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.cme-fundo[hidden] { display: none; }
.cme-caixa { position: absolute; line-height: 1.15; color: var(--cert-tinta); cursor: move; touch-action: none; user-select: none;
  overflow-wrap: anywhere; outline: 1px dashed var(--cert-ouro); outline-offset: 2px; }
.cme-caixa[hidden] { display: none; }
.cme-caixa.sel { outline: 2px solid var(--accent); }
.cme-caixa:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.cme-qr { display: block; width: 100%; height: auto; pointer-events: none; }
.cme-dica { margin: var(--sp-2) 0 0; font-size: 13px; color: var(--text-fraco); display: flex; align-items: center; gap: 6px; }
.cme-painel { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.cme-titulo { margin: 0 0 var(--sp-2); font-weight: 700; }
.cme-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cme-item { display: flex; align-items: center; gap: var(--sp-2); }
.cme-escolher { flex: 1 1 auto; text-align: left; background: transparent; border: 1px solid transparent; border-radius: var(--raio-xs);
  padding: 6px 8px; color: var(--text); cursor: pointer; font: inherit; }
.cme-escolher:hover { background: var(--bg-elev); }
.cme-escolher.on { border-color: var(--accent); color: var(--accent-texto); font-weight: 600; }
.cme-linha3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.cme-cor { width: 100%; height: 40px; padding: 2px; border: 1px solid var(--border); border-radius: var(--raio-xs); background: var(--fundo); }
.cme-props [hidden] { display: none; }
@media (max-width: 1100px) {
  .cme-grade { grid-template-columns: minmax(0, 1fr); }
  .cme-palco { position: static; }
}
@media (max-width: 720px) {
  .cme-escolher { min-height: 44px; }
  .cme-props .fu-presets { height: auto; }
  .cme-props .fu-presets button { height: 44px; min-height: 44px; }
  .cme-linha3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ---------- Fase 18: Minha Lista (os cursos da lista e os iniciados, com as datas) e Meu Cadastro ---------- */
.ml-lista { display: flex; flex-direction: column; gap: var(--sp-3); }
.ml-item { display: flex; flex-direction: row; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }   /* row: o .cd e coluna, e na coluna a base de 100% da capa virava ALTURA (a linha vazava de lado) */
.ml-capa { flex: 0 0 160px; aspect-ratio: 3 / 2; border-radius: var(--raio-sm); overflow: hidden; background: var(--bg-elev); display: block;
  position: relative; max-width: 100%; }   /* Fase 19: o .capa-placeholder (absoluto) fica DENTRO da capa; sem isto, o curso sem capa alargava a linha a 360 px */
.ml-capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ml-corpo { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ml-titulo { margin: 0; font-size: 16px; overflow-wrap: anywhere; }
.ml-prog { max-width: 420px; }
.ml-trofeu { position: relative; flex: 0 0 auto; color: var(--trofeu-ouro); font-size: 24px; line-height: 1; display: inline-flex; }
.ml-datas { margin: 0; font-size: 13px; color: var(--text-fraco); }
.ml-acoes { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.mc-form { display: flex; flex-direction: column; gap: var(--sp-4); }   /* a largura toda do conteudo (dono, 09/10) */
.mc-foto { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; padding: 0; }
.mc-foto[hidden] { display: none; }
.mc-bolinha { flex: 0 0 auto; }
/* as iniciais no lugar da foto (o switch Mostrar minha foto desligado): a bolinha laranja do menu, no tamanho da previa */
.mc-iniciais { width: 96px; height: 96px; font-size: 32px; }
.mc-iniciais[hidden] { display: none; }
.mc-mostrar { display: flex; align-items: center; gap: var(--sp-3); min-height: 32px; }
.mc-mostrar-rotulo { font-size: 13px; color: var(--texto-secundario); cursor: pointer; }
.mc-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-4); }
.mc-grade .campo { margin: 0; }
.mc-rotulo { font-size: 13px; font-weight: 600; color: var(--texto-secundario); }   /* o mesmo do .campo label */
/* Meu Cadastro: o e-mail so leitura e texto puro, na altura do campo ao lado, sem borda nem fundo de input */
.mc-email { display: flex; align-items: center; gap: 8px; min-height: 40px; margin: 0; font-size: 14px; color: var(--texto); overflow-wrap: anywhere; }
.mc-email i { color: var(--texto-fraco); flex-shrink: 0; }
.mc-email + .dica-campo { margin-top: -10px; }   /* a dica encosta no e-mail: a sobra dos 40 px fica so em cima */
/* De onde voce e (dono, 09/10): a linha inteira da grade, com pais, estado e cidade lado a lado (um embaixo do outro no celular) */
.mc-origem { grid-column: 1 / -1; margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.mc-origem > legend { padding: 0; }
.mc-origem-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-4); }
.mc-origem-grade .campo { margin: 0; min-width: 0; }
.mc-origem-grade .campo[hidden] { display: none; }
/* as abas Acesso e Bio (dono, 09/10; static/js/abas.js, a regua .ial-tabs) */
.mc-abas { min-width: 0; }
.mc-pane { display: none; min-width: 0; padding-top: var(--sp-4); }
.mc-pane.ativo { display: flex; flex-direction: column; gap: var(--sp-4); }
/* competencias: a caixa de marcar da casa dentro de uma pilula, varias por linha */
.mc-competencias { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.campo-marcar.mc-pilula { gap: 8px; min-height: 36px; padding: 4px 14px 4px 10px; border: 1px solid var(--borda); border-radius: var(--raio-full); font-size: 13px; }
.campo-marcar.mc-pilula:has(.tsel:checked) { border-color: var(--cor-primaria); color: var(--accent-texto); }
.mc-largo { grid-column: 1 / -1; }
.mc-bio { min-height: 120px; resize: vertical; }
.mc-conta { text-align: right; }
/* os links com o icone dentro do campo (o LinkedIn e o globo do site) */
.mc-link { position: relative; }
.mc-link > i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 18px; color: var(--texto-fraco); pointer-events: none; }
.mc-link > .input { width: 100%; padding-left: 38px; }
.mc-privado { display: flex; align-items: flex-start; gap: 6px; margin: 0; }
.mc-privado > i { margin-top: 3px; flex-shrink: 0; }
.mc-acoes { display: flex; justify-content: flex-end; gap: var(--sp-2); flex-wrap: wrap; }
.avatar.avatar-foto { object-fit: cover; padding: 0; }
.mc-foto-dica { display: block; margin: 2px 0 6px; }   /* Meu Cadastro: onde a foto aparece (a bolinha das perguntas e respostas) */
@media (max-width: 720px) {
  .ml-capa { flex-basis: 100%; }
  .ml-corpo, .ml-acoes { flex-basis: 100%; }
  .ml-acoes .btn, .mc-acoes .btn, .mc-mostrar, .campo-marcar.mc-pilula { min-height: 44px; }
  .mc-grade, .mc-origem-grade { grid-template-columns: minmax(0, 1fr); }
}

.pr-certificado { margin-top: var(--sp-3); }   /* Fase 18: Habilita certificado no modal do produto (o switch da casa, pedido do dono) */
.pr-sw-linha { display: flex; align-items: center; gap: var(--sp-3); }
.cv-sw.cv-sw-modal { flex: 0 0 auto; }
.pr-sw-texto { cursor: pointer; font-size: 14px; color: var(--text); }
.pr-sw-dica { color: var(--text-fraco); }
@media (max-width: 720px), (pointer: coarse) { .pr-sw-linha { min-height: 44px; } }

/* ---------- Fase 18: "Onde cada modelo vale" em duas abas; Produtos por Area > secao da vitrine > curso, com a faixa de lote ---------- */
.cm-tabs { margin: var(--sp-3) 0 var(--sp-4); }
.cm-pane { gap: var(--sp-4); }
.cm-grupo { display: flex; flex-direction: column; gap: var(--sp-3); }
.cm-grupo[hidden], .cm-secao[hidden] { display: none; }
.cm-area { margin: var(--sp-2) 0 0; display: flex; align-items: center; gap: 8px; font-size: 16px; }
.cm-area i { color: var(--accent-texto); }
.cm-secao { display: flex; flex-direction: column; gap: var(--sp-2); padding-left: var(--sp-3); border-left: 2px solid var(--border); }
.cm-secao-nome { margin: 0; display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13.5px; color: var(--text-fraco); }
.cm-tab-cursos { table-layout: fixed; width: 100%; }   /* largura fixa por coluna: as secoes alinham entre si */
/* a lista do SelectBusca de cada linha abre POR CIMA da tabela: o envoltorio de rolagem cortava (overflow); as tabelas daqui cabem na
   largura (colunas fixas e o texto quebra), entao ele nao rola de lado */
.cm-pane .tabela-scroll { overflow: visible; }
.cm-tab-areas { table-layout: fixed; width: 100%; }
.cm-tab-areas .cm-col-modelo { width: 55%; }
.cm-tab-areas .cm-sb { min-width: 0; }
.cm-tab-cursos .col-sel { width: 56px; }
.cm-tab-cursos .cm-col-curso { width: auto; }
.cm-tab-cursos .cm-col-modelo { width: 340px; }
.cm-tab-cursos .cm-col-vale { width: 280px; }
.cm-tab-cursos td { overflow-wrap: anywhere; }
.cm-tab-cursos .cm-sb { min-width: 0; }
.pn-barra.cm-barra { animation-name: pnSobe; }
.cm-barra .cm-sb-lote { min-width: 220px; color: var(--text); }
.cm-barra .sb-panel { top: auto; bottom: 100%; margin: 0 0 4px; }   /* a faixa mora no rodape: a lista abre pra cima */
.cm-pane-fim { height: 72px; }
@media (max-width: 720px) {
  .cm-tab-cursos .col-sel { width: 48px; }
  .cm-tab-cursos .cm-col-modelo { width: 42%; }
  .cm-tab-cursos .cm-col-vale { width: 26%; }
  .cm-barra .cm-sb-lote { flex: 1 1 100%; }
  .cm-barra .btn { min-height: 44px; }
}

/* Fase 18 (dono, 06/10): o Remover da imagem e a lixeira embaixo do quadradinho da previa (a caixa .tsel fica escondida por cima dela) */
.mu-lado { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); }
.mu-lixeira {
  position: relative; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; cursor: pointer;
  border: 1px solid var(--borda); border-radius: var(--raio-xs); background: var(--fundo); color: var(--text-fraco);
}
.mu-lixeira:hover { color: var(--vermelho-escuro); border-color: var(--vermelho-escuro); }
.mu-lixeira[hidden] { display: none; }
.mu-lixeira .mu-lixeira-caixa { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.mu-lixeira:has(.mu-lixeira-caixa:checked) { background: var(--vermelho-escuro); border-color: var(--vermelho-escuro); color: var(--sobre-imagem); }
.mu-lixeira:has(.mu-lixeira-caixa:focus-visible) { outline: 2px solid var(--cor-primaria); outline-offset: 2px; }
@media (max-width: 720px), (pointer: coarse) { .mu-lixeira { width: 44px; height: 44px; } }

/* ---------- Fase 18 (dono, 07/10): a turma em abas (Matriculados, Cursos e Grupos Suporte, static/js/abas.js) e a comunidade da turma ---------- */
.te-abas { min-width: 0; }
.te-pane { display: none; min-width: 0; padding-top: var(--sp-4); }
.te-pane.ativo { display: block; }
.te-h3 { font-size: 14px; margin: var(--sp-4) 0 var(--sp-2); }
.ct-tipo, .ct-aviso { margin-bottom: var(--sp-3); }
.ct-tipo-linha { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.ct-rotulo { margin: 0 0 2px; font-size: 13.5px; font-weight: 700; color: var(--texto); }
.ct-nota { margin: var(--sp-2) 0 0; font-size: 12.5px; line-height: 1.5; color: var(--texto-secundario); }
.ct-tipo-linha .ct-nota { margin: 0; max-width: 62ch; }
.ct-tipo-form { margin: 0; }
.ct-tab td i { color: var(--texto-fraco); margin-right: 4px; }
.ct-col-sw { width: 120px; text-align: center; }
.ct-sempre { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--texto-secundario); }
.ct-desligado td { color: var(--texto-fraco); }
.ct-link { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--texto-secundario); }
.ct-pede { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--sp-3); padding: 10px 14px; border-radius: var(--raio-sm);
  background: var(--accent-soft); color: var(--accent-texto); font-size: 13px; font-weight: 600; }

/* ---------- Fase 18 (dono, 07/10): a pagina do canal e a do grupo de WhatsApp (templates/equipe/canal.html e whatsapp_grupo.html) ---------- */
.vt-cartao { max-width: 860px; }
.vt-form { display: flex; flex-direction: column; gap: var(--sp-3); }
.vt-form .linha2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3) var(--sp-4); }
.vt-form .linha2 > .campo { margin: 0; min-width: 0; }
@media (max-width: 720px) { .vt-form .linha2 { grid-template-columns: 1fr; } }
.vt-rodape { display: flex; justify-content: flex-end; gap: var(--sp-2); flex-wrap: wrap; padding-top: var(--sp-2); }
.vt-copiar { max-width: 860px; margin-top: var(--sp-4); }
.vt-copiar-form { display: flex; align-items: flex-end; gap: var(--sp-3); flex-wrap: wrap; }
.vt-copiar-campo { flex: 1 1 280px; margin: 0; }
.vt-copiar-campo .selectbusca { min-width: 0; }
@media (max-width: 720px) { .vt-rodape .btn, .vt-copiar-form .btn { min-height: 44px; flex: 1 1 auto; justify-content: center; } }

/* ---------- Fase 18 (dono, 07/10): o Suporte do aluno (templates/_suporte_modal.html) e a secretaria na tela Empresa ---------- */
.nav-item.nav-item-botao { width: 100%; border: 0; background: none; font-family: inherit; line-height: inherit; text-align: left; cursor: pointer; }   /* sem font: inherit (o tamanho do item vem da regra do .nav-item) */
.sp-caixa .modal-cab { gap: var(--sp-2); }
.sp-voltar { flex: none; }
.sp-corpo { min-height: 180px; }
.sp-passo[hidden] { display: none; }
.sp-caixa .modal-cab h3 { flex: 1 1 auto; }
.sp-intro { margin: 0 0 var(--sp-3); color: var(--text-dim); font-size: 14px; }
.sp-opcoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--sp-3); }
.sp-opcao {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: var(--sp-4); text-align: left; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--raio); background: var(--surface); color: var(--text); font: inherit;
  transition: border-color var(--transicao), transform var(--transicao), box-shadow var(--transicao);
}
.sp-opcao:hover, .sp-opcao:focus-visible { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--sombra); }
.sp-opcao:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sp-opcao-icone { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--raio-sm); background: var(--accent-soft); color: var(--accent); font-size: 24px; }
.sp-opcao-titulo { font-weight: 700; font-size: 16px; }
.sp-opcao-sub { font-size: 13px; color: var(--text-dim); }
.sp-exemplos { display: flex; flex-direction: column; gap: 6px; margin-top: var(--sp-2); font-size: 12.5px; color: var(--text-dim); }
.sp-exemplos span { display: inline-flex; align-items: center; gap: 8px; }
.sp-exemplos i { color: var(--accent); font-size: 15px; }
.sp-acoes { display: flex; flex-direction: column; gap: var(--sp-2); }
.sp-acao {
  display: flex; align-items: center; gap: var(--sp-3); padding: 12px 14px; min-height: 56px; border-radius: var(--raio);
  border: 1px solid var(--border); background: var(--surface); color: var(--text); text-decoration: none;
}
.sp-acao + .sp-acao, .sp-acoes + .sp-acao { margin-top: var(--sp-2); }
.sp-acao:hover, .sp-acao:focus-visible { border-color: var(--accent); }
.sp-acao:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sp-acao-icone { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 22px; }
.sp-icone-zap { background: var(--sp-zap-fundo); color: var(--sp-zap); }
.sp-acao-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.sp-acao-texto small { color: var(--text-dim); font-size: 12.5px; overflow-wrap: anywhere; }
.sp-acao-seta { color: var(--text-dim); font-size: 18px; flex: none; }
.sp-info { display: flex; gap: var(--sp-3); align-items: flex-start; margin-top: var(--sp-3); padding: 12px 14px; border-radius: var(--raio);
  background: var(--accent-soft); color: var(--text); font-size: 13.5px; line-height: 1.5; }
.sp-info i { font-size: 22px; color: var(--accent); flex: none; margin-top: 1px; }
.sp-info p { margin: 0; }
.sp-horario { display: flex; align-items: center; gap: 8px; margin: var(--sp-3) 0 0; color: var(--text-dim); font-size: 13px; }
.sp-sem { margin: var(--sp-2) 0 0; color: var(--text-dim); font-size: 13px; }
/* Fase 18 (dono, 07/10): o atendimento individual (o Anjo da Guarda e o Mentor): a foto (ou o icone) com o selo do tipo e o prazo, discreto */
.sp-individual:not(:empty) { margin-top: var(--sp-2); }
.sp-foto { position: relative; }
.sp-foto img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.sp-selo { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--bg-elev); color: var(--accent); font-size: 12px; box-shadow: var(--sombra-sm); }
.sp-quem { font-size: 12px; font-weight: 600; color: var(--accent-texto); }
.sp-aviso { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 var(--sp-3); color: var(--text); font-size: 14px; line-height: 1.5; }
.sp-aviso i { flex: none; margin-top: 2px; color: var(--accent); font-size: 18px; }
.sp-sem-turma .sp-acao + .sp-acao { margin-top: var(--sp-2); }
.sp-com-turma { min-width: 0; }   /* o Conteudo de quem tem turma (o bloco que some sem turma ativa na Area) */
.sp-prazo { display: flex; align-items: center; justify-content: center; gap: 6px; margin: var(--sp-4) 0 0; color: var(--text-fraco); font-size: 12px; }
/* Comunidade > Contatos de suporte: um cartao por pessoa, agrupados por tipo; e a pagina do contato */
.sc-intro { margin: 0 0 var(--sp-4); max-width: 72ch; color: var(--texto-secundario); font-size: 13.5px; line-height: 1.5; }
.sc-grupo + .sc-grupo { margin-top: var(--sp-5); }
.sc-titulo { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--sp-3); font-size: 15px; }
.sc-titulo i { color: var(--accent-texto); font-size: 18px; }
.sc-grade { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--sp-3); }
.sc-card { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: var(--sp-3); margin: 0; padding: var(--sp-3) var(--sp-4); min-width: 0; text-align: left; }
.sc-card.sc-desligado { opacity: .6; }
.sc-foto { flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.sc-iniciais { display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-texto); font-size: 15px; font-weight: 700; }
.sc-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.sc-nome { font-size: 14px; color: var(--texto); overflow-wrap: anywhere; }
.sc-numero { font-size: 12.5px; color: var(--texto-secundario); }
.sc-acoes { display: flex; align-items: center; gap: var(--sp-2); flex: none; }
/* Propagandas (dono, 22/10): um cartao por linha, na largura toda; os dados lado a lado, com o titulo em cima */
.an-grade { grid-template-columns: 1fr; }
.an-grade .sc-info { flex-direction: row; flex-wrap: wrap; column-gap: var(--sp-4); row-gap: 2px; }
.an-grade .sc-nome { flex-basis: 100%; }
.vt-cartao.an-cartao { max-width: none; }   /* a pagina da propaganda tambem na largura toda */
.sc-intro.an-intro { max-width: none; }   /* o texto do topo das propagandas na largura toda */
.sc-vazio { margin: 0; color: var(--texto-secundario); font-size: 13px; }
/* o tipo do contato: o toggle de varias opcoes (tipo 1), com o icone em cada uma; 44 px no toque */
.sc-tipo.fu-presets { --fu-h: 40px; display: flex; flex-wrap: wrap; width: 100%; height: auto; }
.sc-tipo.fu-presets button { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: auto; min-height: 34px; padding: 6px 10px; }
@media (max-width: 720px), (pointer: coarse) { .sc-tipo.fu-presets button { min-height: 44px; } }
.sc-foto-linha { display: flex; align-items: flex-end; gap: var(--sp-3); flex-wrap: wrap; }
.sc-foto-linha .upl-campo { flex: 1 1 260px; min-width: 0; }
.sc-foto-atual { flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
/* a aba Grupos Suporte da turma: o que o Suporte do aluno mostra e quem atende */
.ts-titulo { margin-top: var(--sp-5); }
.ts-nota { margin-bottom: var(--sp-2); }
.ts-item { display: inline-flex; align-items: flex-start; gap: 8px; }
.ts-item i { margin-top: 2px; color: var(--accent-texto); font-size: 17px; }
.ts-item > span { display: flex; flex-direction: column; gap: 1px; }
.ts-item small { color: var(--texto-secundario); font-size: 12px; }
.ts-auto { color: var(--texto-secundario); font-size: 12.5px; }
.ts-falta { color: var(--vermelho-escuro); font-size: 12.5px; }
.ts-sb { width: 240px; max-width: 100%; min-width: 0; }
.ts-status { min-height: 1.2em; margin: var(--sp-2) 0 0; color: var(--texto-secundario); font-size: 12.5px; }
.ts-status.erro { color: var(--vermelho-escuro); }
.em-secretaria { margin: 0; padding: var(--sp-3) var(--sp-4) var(--sp-4); border: 1px solid var(--borda); border-radius: var(--raio); min-width: 0; }
.em-secretaria-titulo { padding: 0 6px; font-size: 13px; font-weight: 700; color: var(--texto); display: inline-flex; align-items: center; gap: 6px; }

/* (antes da Marca de IA: daqui pra baixo nada usa a cor da marca, test_f9_conformidade) o SelectBusca de VÁRIAS opções (selectbusca_multi.js, dono 08/10): cada escolha é uma PÍLULA com o X que a tira; a opção escolhida sai da lista */
.sb-pilulas { display: flex; flex-wrap: wrap; gap: 6px; }
.sb-pilulas:empty { display: none; }
.sb-pilula {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 3px 4px 3px 12px;
  border: 1px solid var(--borda); border-radius: var(--raio-full); background: var(--cor-primaria-suave); font-size: 13px; color: var(--texto);
}
.sb-pilula span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-pilula button {
  width: 26px; height: 26px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; padding: 0;
  border: none; border-radius: var(--raio-full); background: transparent; color: var(--texto-secundario); cursor: pointer;
}
.sb-pilula button:hover, .sb-pilula button:focus-visible { background: var(--branco); color: var(--vermelho-escuro); }
@media (max-width: 720px), (pointer: coarse) {
  .sb-pilula button { width: 44px; height: 44px; }
  .sb-pilula { padding-right: 0; }
}

/* Fase 28: os blocos das Fases 20, 21 e 23 a 26 moram ANTES do bloco da Marca de IA (a regra dos testes da IA: nada de --accent nem --cor-primaria dali ate o fim do arquivo; test_ia_f9, test_f9_conformidade e test_f13_conformidade) */
/* ---------- Minhas Duvidas (Fases 20 e 21): a lista das conversas da pessoa e, ao lado, a previa (cara de e-mail, dono 10/10) ---------- */
.md-toolbar .md-quem { flex: none; }   /* a capsula da Minha Area, como a da situacao (dono, 10/10) */
.md-quem-linha { display: flex; align-items: center; gap: var(--sp-3); }   /* o quem e a bolinha da ordem na mesma linha (dono, 15/10) */
.md-barra { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.md-barra .md-estados { flex: none; }
.com-busca.md-busca { flex: 1 1 300px; min-width: 0; }
.com-busca.md-busca .input { height: 44px; border-radius: var(--raio-full); }

/* os popovers (a ordem, a pasta nova, gerenciar e mover): <details> com a caixa por cima, sem campo de busca */
.md-pop { position: relative; flex: none; }
.md-pop > summary { list-style: none; cursor: pointer; }
.md-pop > summary::-webkit-details-marker { display: none; }
.md-bolinha {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--surface); border: 1px solid var(--border); color: var(--texto);
}
.md-bolinha i { font-size: 20px; }
.md-pop[open] > .md-bolinha, .md-bolinha:hover { border-color: var(--accent-borda); color: var(--accent-texto); }
.md-pop-caixa {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; min-width: 230px;
  display: flex; flex-direction: column; gap: 4px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--raio); box-shadow: var(--sombra);
}
.md-pastas .md-pop-caixa { right: auto; left: 0; padding: var(--sp-3); gap: var(--sp-2); }
.md-pop-item {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 8px 10px;
  border: 0; border-radius: var(--raio-sm); background: transparent; color: var(--texto); font: inherit; font-size: 14px;
  text-align: left; text-decoration: none; cursor: pointer;
}
.md-pop-item:hover, .md-pop-item:focus-visible { background: var(--fundo); }
.md-pop-item.on { color: var(--accent-texto); font-weight: 600; }
.md-pop-item i { font-size: 16px; color: var(--md-cor, currentColor); }
.md-pop-rotulo { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--texto-suave); }
.md-pop-vazio { margin: 0; padding: 8px 10px; font-size: 13px; color: var(--texto-fraco); }
.md-pop-erro:empty { display: none; }
.md-ordem { margin-left: auto; }   /* a bolinha da ordem fecha a barra, na direita */
/* o Mover pra pasta no canto direito, na linha do titulo (dono, 10/10); a caixa desce dentro da previa e rola por dentro dela mesma
   (com muitas pastas ela nao passa da previa, que tambem rola) */
.md-pv-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.md-pv-topo .md-pv-titulo { flex: 1 1 auto; min-width: 0; }
.md-mover { flex: none; }
.md-mover > summary { display: inline-flex; white-space: nowrap; }
.md-mover .md-pop-caixa { right: 0; left: auto; min-width: 240px; max-height: 260px; overflow: auto; }
.md-pasta-nova .md-pop-caixa, .md-pasta-gerenciar .md-pop-caixa { box-shadow: var(--sombra); }
.md-pasta-gerenciar .md-pasta-acao { padding: 6px 12px; }
.md-ver { box-shadow: var(--sombra); }

/* as cores das pastas: lista fechada (servicos/minhas_duvidas.CORES_PASTA), cada uma um token */
.md-cor-laranja { --md-cor: var(--accent); }
.md-cor-verde { --md-cor: var(--verde); }
.md-cor-roxo { --md-cor: var(--roxo); }
.md-cor-ambar { --md-cor: var(--ambar); }
.md-cor-vermelho { --md-cor: var(--vermelho); }
.md-cor-cinza { --md-cor: var(--texto-fraco); }
.md-cores { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; border: 0; }
.md-cor { position: relative; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.md-cor input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.md-cor-bola { width: 22px; height: 22px; border-radius: 50%; background: var(--md-cor); }
.md-cor input:checked + .md-cor-bola { outline: 2px solid var(--md-cor); outline-offset: 2px; }   /* o anel da cor escolhida (sem sombra solta) */
.md-cor input:focus-visible + .md-cor-bola { outline: 2px solid var(--accent); outline-offset: 4px; }

/* a fileira das pastas */
.md-pastas { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.md-pasta {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 14px;
  border: 1px solid var(--border); border-radius: var(--raio-full); background: var(--surface);
  color: var(--texto-suave); font-size: 13.5px; font-weight: 500; text-decoration: none;
}
.md-pasta i { color: var(--md-cor, currentColor); font-size: 16px; }
.md-pasta:hover, .md-pasta:focus-visible { color: var(--texto); border-color: var(--accent-borda); }
.md-pasta.on { color: var(--texto); font-weight: 700; border-color: var(--md-cor, var(--accent)); background: var(--fundo); }
.md-pasta-n { font-size: 12px; color: var(--texto-fraco); font-weight: 500; }
.md-pasta-acao { color: var(--accent-texto); }
/* o botao Pasta do celular (dono, 15/10): no computador nao aparece; a lista mostra o nome, a contagem e o visto na escolhida */
.md-pasta-escolha { display: none; }
.md-pasta-escolha > summary { max-width: 100%; }
.md-pasta-escolha-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-pasta-escolha .md-pasta-seta { color: currentColor; font-size: 14px; transition: transform var(--transicao); }
.md-pasta-escolha[open] .md-pasta-seta { transform: rotate(180deg); }
.md-pop-nome { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.md-pop-item .md-pop-visto { color: var(--accent-texto); }
.md-pasta-form { width: 280px; }
.md-pasta-form .btn { align-self: flex-end; }
.md-gerenciar { width: 340px; max-height: 60vh; overflow: auto; }
.md-gerenciar-linha { display: flex; flex-direction: column; gap: 6px; padding-bottom: var(--sp-2); border-bottom: 1px solid var(--border); }
.md-gerenciar-linha:last-child { border-bottom: 0; padding-bottom: 0; }
.md-gerenciar-acoes { display: flex; justify-content: flex-end; gap: var(--sp-2); }
.btn.md-apagar[data-confirmando] { color: var(--vermelho-escuro); border-color: var(--vermelho-borda); }
.md-pasta-pilula {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: var(--raio-full);
  border: 1px solid var(--border); font-size: 11.5px; font-weight: 600; color: var(--texto-suave);
}
.md-pasta-pilula i { color: var(--md-cor); }

/* as duas colunas: a lista e a previa (que gruda no topo e rola por dentro) */
.md-caixa { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-4); align-items: start; }
.md-coluna-lista { min-width: 0; display: flex; flex-direction: column; }
.md-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.md-item {
  position: relative; cursor: pointer;
  display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: start; gap: var(--sp-3);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--raio);
  padding: var(--sp-3) var(--sp-4);
}
.md-item.md-selecionada { border-color: var(--accent-borda); background: var(--fundo); }
.md-ponto { width: 10px; height: 10px; margin-top: 7px; border-radius: 50%; background: transparent; }
.md-nao-lida .md-ponto { background: var(--accent); }
.md-corpo { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.md-titulo {
  color: var(--texto); font-weight: 500; font-size: 15px; line-height: 1.35; text-decoration: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
.md-titulo:hover, .md-titulo:focus-visible { color: var(--accent-texto); text-decoration: underline; }
.md-nao-lida .md-titulo { font-weight: 700; }
.md-anotacao { margin: 0; display: flex; gap: 6px; align-items: flex-start; font-size: 13px; color: var(--texto-suave); white-space: pre-line; overflow-wrap: anywhere; }
.md-anotacao[hidden] { display: none; }
.md-anotacao i { margin-top: 2px; color: var(--accent-texto); }
.md-meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 12.5px; color: var(--texto-fraco); }
.md-onde, .md-ultimo, .md-quando { display: inline-flex; align-items: center; gap: 5px; min-width: 0; overflow-wrap: anywhere; }
.md-etiquetas { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
/* a SITUACAO (dono, 10/10): Pendente vermelho; Respondida verde (colegas); pela equipe, verde com o selo da aba Duvidas */
.badge.md-situacao { white-space: nowrap; }
.badge.md-pendente { background: var(--vermelho-suave); color: var(--vermelho-escuro); }
.badge.md-respondida { background: var(--verde-suave); color: var(--verde-escuro); }
.badge.md-pela-equipe i { font-size: 13px; }
.md-acoes { display: flex; gap: 4px; }
.md-acoes .btn-icone { width: 36px; height: 36px; }
.md-acoes .btn-icone i { font-size: 18px; }
.btn-icone.md-estrela.ligada, .btn-icone.md-estrela.ligada:hover { color: var(--ambar); }
.md-mais { align-self: center; margin: var(--sp-3) auto 0; display: flex; width: max-content; }
#mdCarregando[hidden] { display: none; }
/* o grupo Comunidade do Meu Caderno: sem capa de curso, o icone dos baloes no mesmo quadro (dono, 10/10) */
.cn-capa.cn-capa-comunidade { display: flex; align-items: center; justify-content: center; background: var(--fundo); color: var(--accent-texto); }
.cn-capa.cn-capa-comunidade i { font-size: 64px; }

.md-previa {
  position: sticky; top: var(--sp-4); min-width: 0; max-height: calc(100vh - 2 * var(--sp-4)); overflow: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--raio); padding: var(--sp-5);
}
/* o tema poe position: relative em todo .com-brilho, e o top da previa grudada virava um desnivel de 16 px (dono, 10/10): aqui ela segue grudada */
.md-caixa .md-previa.com-brilho { position: sticky; }
.md-previa-vazia { min-height: 280px; }
/* a coluna da previa (dono, 15/10): a previa e, embaixo dela, a PROPAGANDA das Minhas Duvidas (servicos/anuncios, local duvidas), grudadas no
   topo juntas (quem gruda agora e a coluna; a previa encolhe e rola dentro dela). O cartao e DEITADO: a arte 4:5 na esquerda e o texto ao lado,
   porque o espaco e largo e baixo. Ate 880 px a previa abre por cima da tela e a propaganda nao aparece. */
.md-lado { min-width: 0; }
.md-anuncio { display: none; }
@media (min-width: 881px) {
  .md-lado { position: sticky; top: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-4); max-height: calc(100vh - 2 * var(--sp-4)); }
  .md-caixa .md-lado .md-previa, .md-caixa .md-lado .md-previa.com-brilho { position: relative; top: auto; max-height: none; flex: 0 1 auto; min-height: 0; }
  .md-anuncio { display: block; flex: 0 0 auto; }
  .md-anuncio .com-anuncio { display: flex; flex-direction: row; align-items: center; }
  .md-anuncio .com-anuncio-img { width: 160px; flex: 0 0 160px; }
  .md-anuncio .com-anuncio-txt { padding: var(--sp-4) var(--sp-5); gap: 6px; }
  .md-anuncio .com-anuncio-titulo { font-size: 16px; }
  .md-anuncio .com-anuncio-sub { font-size: 13px; }
}
.md-pv { display: flex; flex-direction: column; gap: var(--sp-4); }
.md-pv-cab { display: flex; flex-direction: column; gap: var(--sp-2); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--border); }
.md-voltar { display: none; align-self: flex-start; }
.md-pv-titulo { margin: 0; font-size: 19px; line-height: 1.3; color: var(--texto); overflow-wrap: anywhere; }
.md-pv-acoes { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
/* o modal da anotacao no caderno (dono, 10/10) */
.md-nota-caixa .modal-cab h3 { display: flex; align-items: center; gap: 8px; }
.md-nota-form { display: flex; flex-direction: column; gap: var(--sp-2); }
.md-nota-onde { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--texto-suave); }
.md-nota-onde i { color: var(--accent-texto); font-size: 16px; }
.md-nota-conversa { margin: 0; font-weight: 600; color: var(--texto); overflow-wrap: anywhere; }
.md-nota-conversa:empty { display: none; }
.md-nota-campo { width: 100%; resize: vertical; }
.md-nota-erro:empty { display: none; }
.md-nota-acoes { display: flex; justify-content: flex-end; gap: var(--sp-2); }
.md-pv-corpo { position: relative; }
.md-pv-rotulo { margin: 0 0 var(--sp-3); display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--texto-suave); }
/* a MASCARA (dono, 10/10): o texto e o cartao vao sumindo e se misturam com o fundo da previa (a mascara apaga tudo, sombra inclusive);
   o padding deixa o relevo do cartao inteiro antes do sumico */
.md-pv-lista {
  list-style: none; margin: 0; padding: 6px 8px 12px; display: flex; flex-direction: column; gap: var(--sp-3);
  -webkit-mask-image: linear-gradient(black 35%, transparent); mask-image: linear-gradient(black 35%, transparent);
}
.md-pv-item { padding: var(--sp-3) var(--sp-4); border-radius: var(--raio-sm); background: var(--fundo); }
.md-pv-quem { margin: 0 0 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13.5px; color: var(--texto); }
.badge.md-papel { padding: 1px 8px; font-size: 11px; }
.md-pv-texto {
  margin: 0; font-size: 14px; line-height: 1.5; color: var(--texto-suave); white-space: pre-line; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
/* o botao vem logo abaixo do fim que sumiu, sem caixa nem fundo proprio (sobreposto, cobria o texto da mensagem curta) */
.md-pv-mascara { position: relative; margin-top: var(--sp-1); display: flex; justify-content: center; }

/* ate 880 px a lista ocupa a tela e a previa abre por cima, com Voltar */
@media (max-width: 880px) {
  .md-caixa { grid-template-columns: minmax(0, 1fr); }
  .md-previa { display: none; }
  .md-caixa.md-com-previa .md-previa {
    display: block; position: fixed; inset: 0; z-index: 70; max-height: none; border: 0; border-radius: 0;
    padding: var(--sp-4) var(--sp-4) calc(var(--sp-5) + 80px);
  }
  .md-voltar { display: inline-flex; min-height: 44px; }
}
@media (max-width: 720px) {
  .md-barra .md-estados, .com-busca.md-busca { flex: 1 1 100%; }
  .md-quem-linha { flex: 1 1 100%; }   /* a capsula na esquerda e a ordem na direita (margin-left: auto) */
  .md-pasta { min-height: 44px; }
  .md-cor { width: 44px; height: 44px; }
  .md-pop-item { min-height: 44px; }
  /* a Nova pasta e o Gerenciar presos a largura da fileira (a 360 px a caixa saia pela direita da tela) */
  .md-pastas { position: relative; }
  .md-pastas .md-pop { position: static; }
  /* as pilulas viram o botao Pasta (a lista por cima, na largura da fileira); Nova pasta e Gerenciar seguem ao lado */
  .md-pastas > a.md-pasta { display: none; }
  .md-pastas { flex-wrap: nowrap; }   /* uma linha: o nome da pasta corta com reticencias */
  .md-pasta-escolha { display: block; order: -1; flex: 0 1 auto; min-width: 0; }
  .md-pastas > .md-pop:not(.md-pasta-escolha) { flex: none; }
  .md-pastas .md-rot-largo { display: none; }   /* a Nova pasta so com o icone (o nome fica no aria-label e no title) */
  .md-pastas .md-pasta-acao { justify-content: center; min-width: 44px; padding: 6px 12px; }
  .md-pastas .md-pop-caixa { left: 0; right: 0; width: auto; }
  .md-nota-acoes .btn, .md-pv-acoes .btn, .md-mais, .md-gerenciar-acoes .btn { min-height: 44px; }
}

/* Fase 22: o aviso do link antigo do CursEduca sem par (templates/_sumiu_modal.html, modal do aluno) */
.sumiu-caixa .modal-cab h3 { display: flex; align-items: center; gap: var(--sp-2); }
.sumiu-texto { margin: 0 0 var(--sp-4); color: var(--text-fraco); line-height: 1.5; }
.sumiu-acoes { display: flex; justify-content: flex-end; }
@media (max-width: 720px) { .sumiu-acoes .btn { min-height: 44px; } }

/* ---------- Fase 23, parte B: o ONBOARDING no admin (/adm/onboarding e o editor dos passos) e a aba Recursos da turma ---------- */
.ob-dica { margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--texto-secundario); }
.ob-resumo { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.ob-resumo-acoes { flex: none; }
.ob-intro { margin: 0 0 var(--sp-3); font-size: 13px; line-height: 1.55; color: var(--texto-secundario); max-width: 720px; }
.ob-passos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); max-width: 880px; }
.ob-passo {
  display: flex; align-items: center; gap: var(--sp-3); min-width: 0;
  padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--raio);
}
.ob-passo[draggable="true"] { cursor: grab; }
.ob-passo.arrastando { opacity: .45; cursor: grabbing; }
.ob-alca { flex: none; font-size: 18px; color: var(--texto-fraco); }
.ob-num {
  flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--raio-full);
  background: var(--accent-soft); color: var(--accent-texto); font-size: 12.5px; font-weight: 700;
}
.ob-tipo-icone { flex: none; font-size: 20px; color: var(--texto-secundario); }
.ob-passo-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ob-passo-titulo { font-size: 14px; color: var(--texto); overflow-wrap: anywhere; }
.ob-passo-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12px; color: var(--texto-secundario); }
.ob-passo-acoes { flex: none; }
.rt-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3); }
.rt-form .campo-principal { flex: 1 1 280px; min-width: 0; }
.rt-acoes { display: flex; justify-content: flex-end; margin-left: auto; }
.rt-vazio { margin: var(--sp-2) 0 0; font-size: 13px; color: var(--texto-secundario); }
.rt-titulo { margin-top: var(--sp-5); }
@media (max-width: 720px) {
  .ob-passo { flex-wrap: wrap; }
  .ob-passo-acoes { width: 100%; justify-content: flex-end; }
  .ob-passo-acoes .btn-icone { min-width: 44px; min-height: 44px; }
  .rt-acoes, .rt-acoes .btn { width: 100%; }
  .rt-acoes .btn { justify-content: center; min-height: 44px; }
}

/* ---------- Fase 24: PONTOS E RANK. Admin (/adm/pontos, prefixo pt-): a linha do estado do calculo, a tabela dos tipos e os dois modais.
   Aluno (/rank, prefixo rk-): static/css/rank.css (Fase 106). ---------- */
.pt-estado { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--sp-3); }
.pt-estado-linha { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--texto); }
.pt-estado-linha i { font-size: 18px; color: var(--verde-escuro); }
.pt-calculando i { color: var(--ambar-escuro); }
.pt-estado-sub { font-size: 13px; color: var(--texto-fraco); }
.pt-tab td { vertical-align: middle; }
.pt-tab td[data-col="peso"], .pt-tab td[data-col="teto"] { white-space: nowrap; }
.pt-tipo { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.pt-tipo i { font-size: 18px; color: var(--accent-texto); }
.pt-conta { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto-secundario); }
.pt-situacao { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: var(--raio-full); font-size: 12px; font-weight: 600; }
.pt-on { background: var(--verde-suave); color: var(--verde-escuro); }
.pt-off { background: var(--fundo); color: var(--texto-fraco); }
.pt-erro { margin: 0 0 var(--sp-3); padding: 10px 12px; border-radius: var(--raio-sm); background: var(--vermelho-suave); color: var(--vermelho-escuro);
  font-size: 13px; }
.pt-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.pt-dica, .pt-texto { margin: 6px 0 var(--sp-3); font-size: 13px; color: var(--texto-fraco); line-height: 1.5; }
.pt-texto { color: var(--texto-secundario); font-size: 14px; }
@media (max-width: 560px) {
  .pt-campos { grid-template-columns: 1fr; }
}
/* Fase 106: as abas Configuracoes | Pontuacoes e a tabela do livro (prefixo pe-) */
.pt-abas { min-width: 0; }
.pe-tab td { vertical-align: middle; }
.pe-pessoa { display: inline-block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; font-weight: 600; }
.pe-pontos { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.pe-limite { color: var(--texto-fraco); font-weight: 400; }
.pe-ref { display: inline-block; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
  color: var(--texto-secundario); }
.pe-exportacoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--sp-3); margin-top: var(--sp-3); }
.pe-exportacoes .exp-card { margin: 0; }

/* o /rank (prefixo rk-) mora em static/css/rank.css desde a Fase 106 */

.mc-rank { margin-top: var(--sp-4); }
.mc-rank-dica { display: block; margin-top: 2px; }

/* ---------- Fase 25: DESAFIOS. Admin (/adm/desafios, prefixo ds-): o chip da situacao, o resumo do editor e os campos do modal do desafio.
   As partes do editor usam a lista ordenada dos passos do onboarding (ob-passos). Aluno (/desafios, prefixo dz-): os cartoes em grade, a
   pagina do desafio (topo, partes, video do Panda) e a entrega. Nenhuma cor fora dos tokens. */
.badge.ds-situacao, .badge.dz-estado, .badge.dz-meu { white-space: nowrap; }
.badge.ds-sit-rascunho { background: var(--fundo); color: var(--texto-suave); box-shadow: inset 0 0 0 1px var(--borda); }
.badge.ds-sit-publicado { background: var(--verde-suave); color: var(--verde-escuro); }
.badge.ds-sit-encerrado { background: var(--ambar-suave); color: var(--ambar-escuro); }
.ds-resumo-acoes { flex-wrap: wrap; gap: var(--sp-2); }
.ds-resumo-acoes form { display: inline-flex; }
.ds-resumo-txt { white-space: pre-line; }
.ds-linha3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.ds-linha2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.ds-dica-topo { margin: -6px 0 var(--sp-3); }
.ds-marcas { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin-top: 6px; }
/* o editor do desafio em abas (dono, 12/10): a Configuracao e as Turmas na pagina, no lugar do modal longo */
.ds-config, .ds-turmas { display: flex; flex-direction: column; gap: var(--sp-3); }
.ds-config-corpo { display: flex; flex-direction: column; gap: var(--sp-3); }
.ds-config-rodape { display: flex; justify-content: flex-end; padding-top: var(--sp-2); border-top: 1px solid var(--borda); }
.ds-turmas-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.ds-turmas-topo .ob-dica { flex: 1 1 320px; margin: 0; }
.ds-turma[hidden], .ds-grupo[hidden] { display: none; }
.ds-grupo th { text-align: left; font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--text); background: var(--bg); }
@media (max-width: 720px) {
  .ds-linha3, .ds-linha2 { grid-template-columns: minmax(0, 1fr); }
}

.dz { display: flex; flex-direction: column; gap: var(--sp-4); }
.dz-grade {
  list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-4);
  align-items: stretch;
}
.dz-item { min-width: 0; }
.dz-cartao {
  display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--bg-elev); color: var(--texto); text-decoration: none; box-shadow: var(--sombra-sm);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
/* o card clicavel da casa (Padrao_Box_Card): so a borda, a sombra e a microelevacao no hover */
a.dz-cartao:hover, a.dz-cartao:focus-visible { border-color: var(--accent-borda); box-shadow: var(--sombra); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { a.dz-cartao:hover, a.dz-cartao:focus-visible { transform: none; } }
.dz-capa {
  position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 2; background: var(--fundo);
  color: var(--accent-texto); overflow: hidden;
}
.dz-capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dz-capa > i { font-size: 48px; opacity: .85; }
/* a insignia da trilha estampada no centro da capa (dono, 21/10); a imagem da capa, se houver, escurecida por tras */
.dz-capa-ins { position: absolute; inset: 0; display: grid; place-items: center; }
.dz-capa-trilha img { filter: brightness(.4); }
/* o tipo no canto de cima a direita da capa (dono, 21/10) */
.dz-capa .dz-tipo { position: absolute; top: var(--sp-3); right: var(--sp-3); box-shadow: var(--sombra-sm); }
.dz-corpo { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4) var(--sp-4); min-width: 0; }
.dz-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dz-titulo { font-size: 17px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
/* o rodape do cartao no pe (o progresso, o premio, o aviso do cadeado): os cartoes da mesma linha alinham por baixo */
.dz-rodape { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: auto; padding-top: var(--sp-1); min-width: 0; }
.dz-resumo {
  font-size: 13px; line-height: 1.5; color: var(--texto-suave); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.dz-premio { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; color: var(--texto); overflow-wrap: anywhere; min-width: 0; }
.dz-premio i { color: var(--trofeu-ouro); margin-top: 2px; }
/* Fase 91: o selo do tipo e o andamento da trilha no cartao (o anel e as 3 ultimas insignias) */
.dz-tipo { display: inline-flex; align-items: center; gap: 4px; background: var(--bg-elev); color: var(--texto-suave); }
.dz-tipo-trilha { background: var(--accent-soft); color: var(--accent-texto); }
.dz-trilha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.dz-trilha-prog { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--texto); }
.dz-trilha-ins { display: inline-flex; gap: 4px; }
.badge.dz-est-aberto { background: var(--verde-suave); color: var(--verde-escuro); }
.badge.dz-est-fechado { background: var(--fundo); color: var(--texto-suave); box-shadow: inset 0 0 0 1px var(--borda); }
.badge.dz-est-encerrado { background: var(--ambar-suave); color: var(--ambar-escuro); }
.badge.dz-env-enviado { background: var(--accent-soft); color: var(--accent-texto); }
.badge.dz-env-liberado { background: var(--verde-suave); color: var(--verde-escuro); }
.badge.dz-env-devolvido { background: var(--ambar-suave); color: var(--ambar-escuro); }
.badge.dz-env-reprovado { background: var(--vermelho-suave); color: var(--vermelho-escuro); }
.dz-fim { margin: 0; text-align: center; font-size: 13px; color: var(--texto-fraco); }
.dz-mais { align-self: center; }

.dz-pagina { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 920px; }
.dz-voltar { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--texto-suave); text-decoration: none; }
.dz-voltar:hover { color: var(--texto); }
.dz-topo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.dz-topo-com-capa { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.dz-topo-capa { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--raio-sm); display: block; }
.dz-topo-txt { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); min-width: 0; }
/* o titulo do cabecalho no MESMO tamanho do titulo dos outros cartoes, .dz-parte-titulo (dono, 21/10: "o titulo de todos os cards tem que ter
   o mesmo tamanho de fonte"); segue h1 pro leitor de tela */
.dz-h1 { margin: 0; font-size: 17px; overflow-wrap: anywhere; }
/* a contagem regressiva no canto do topo (dono, 21/10): o selo na esquerda e a contagem na direita; abaixo de 720 px ela desce e ocupa a
   linha. Falta menos de um dia: o numero na cor da marca; menos de uma hora: vermelho. No fim, so a frase (dz-cont-fim). */
.dz-topo-linha { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--sp-2) var(--sp-3); width: 100%; }
.dz-contagem { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; margin-left: auto; }
.dz-cont-rotulo { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--texto-suave); }
.dz-cont-blocos { display: flex; gap: 6px; }
.dz-cont-bloco { display: flex; flex-direction: column; align-items: center; min-width: 50px; padding: 6px 8px; border-radius: var(--raio-sm);
  background: var(--fundo); box-shadow: inset 0 0 0 1px var(--borda); }
.dz-cont-bloco b { font-size: 20px; line-height: 1.15; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--texto); }
.dz-cont-bloco small { font-size: 11px; color: var(--texto-fraco); }
.dz-cont-perto .dz-cont-bloco b { color: var(--accent-texto); }
.dz-cont-urgente .dz-cont-bloco b, .dz-cont-urgente .dz-cont-rotulo { color: var(--danger-texto); }
.dz-cont-fim .dz-cont-blocos { display: none; }
@media (max-width: 720px) {
  .dz-contagem { width: 100%; margin-left: 0; align-items: stretch; }
  .dz-cont-bloco { flex: 1 1 0; min-width: 0; }
}
.dz-topo-resumo { margin: 0; font-size: 14px; line-height: 1.6; color: var(--texto-suave); white-space: pre-line; overflow-wrap: anywhere; }
.dz-prazos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--texto-suave); }
.dz-prazos li { display: flex; align-items: flex-start; gap: 6px; }
.dz-parte, .dz-entrega { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
/* o desafio com o precedente ainda nao conquistado (dono, 21/10): apagado, sem clique, com o aviso do cadeado */
/* o desafio travado (dono, 21/10): TODO cinza, sem clique */
.dz-cartao-travado { cursor: not-allowed; filter: grayscale(1); box-shadow: none; }
.dz-cartao-travado .dz-corpo, .dz-cartao-travado .dz-capa > :not(.dz-capa-cadeado) { opacity: .45; }
/* o cadeado grande no centro da capa do travado: nao se apaga com o resto do cartao */
.dz-capa-cadeado { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; }
.dz-capa-cadeado i {
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: var(--raio-full); font-size: 30px; color: var(--texto);
  background: var(--bg); border: 2px solid var(--texto-suave); box-shadow: var(--sombra);
}
.dz-travado-aviso { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; line-height: 1.45; color: var(--texto-suave); min-width: 0; overflow-wrap: anywhere; }
.dz-travado-aviso > i { flex: none; margin-top: 2px; }
/* a SEQUENCIA de precedentes (dono, 21/10): o bloco da largura toda alinhado as colunas da grade (subgrid), com a LINHA DO TEMPO embaixo de
   cada cartao (no celular, a esquerda). O desenho da linha e o bloco lt- (o MESMO da secao Desafios da Vitrine, dono 22/10), mais abaixo,
   antes da Marca de IA; aqui so a geometria do bloco (o vao entre os cartoes e o --lt-vao, que o fio atravessa). */
.dz-cadeia { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; row-gap: var(--sp-3); overflow-x: clip; }
.dz-cadeia-rot { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; margin: var(--sp-2) 0 0; font-size: 13px; font-weight: 600; color: var(--texto-suave); }
.dz-cadeia-rot i { color: var(--accent-texto); }
.dz-cadeia-lista { --lt-vao: var(--sp-4); grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: subgrid; row-gap: var(--sp-4); }
.dz-elo { position: relative; display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.dz-elo > .dz-cartao { flex: 1 1 auto; height: auto; }
.dz-parte-titulo { display: flex; align-items: center; gap: var(--sp-3); margin: 0; font-size: 17px; overflow-wrap: anywhere; }
.dz-parte-num {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--raio-full);
  background: var(--accent-soft); color: var(--accent-texto); font-size: 14px; font-weight: 700;
}
.dz-texto { font-size: 15px; line-height: 1.65; color: var(--texto); overflow-wrap: anywhere; }
.dz-texto p, .dz-texto ul, .dz-texto ol { margin: 0 0 12px; }
.dz-texto ul, .dz-texto ol { padding-left: 22px; }
.dz-texto li + li { margin-top: 4px; }
.dz-texto > :first-child { margin-top: 0; }
.dz-texto > :last-child { margin-bottom: 0; }
.dz-texto a { color: var(--accent-texto); text-decoration: underline; }
.dz-texto img { max-width: 100%; height: auto; border-radius: var(--raio-sm); }
.dz-video { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--raio); overflow: hidden; background: var(--fundo-video); }
.dz-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.dz-envio { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); border: 1px solid var(--borda); border-radius: var(--raio-sm); }
.dz-envio-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; }
.dz-envio-quando { font-size: 12.5px; color: var(--texto-fraco); }
.dz-obs { padding: 10px 12px; border-radius: var(--raio-sm); background: var(--ambar-suave); }
.dz-obs-rot { display: block; font-size: 12.5px; color: var(--ambar-escuro); }
.dz-obs-txt { margin: 4px 0 0; font-size: 14px; line-height: 1.55; color: var(--texto); white-space: pre-line; overflow-wrap: anywhere; }
.dz-envio-texto { margin: 0; font-size: 14px; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.dz-envio-link, .dz-envio-arquivo {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; max-width: 100%; color: var(--accent-texto); text-decoration: none;
  overflow-wrap: anywhere;
}
.dz-envio-link span, .dz-envio-arquivo span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dz-envio-arquivo small { flex: none; color: var(--texto-fraco); }
/* dono, 21/10: a entrega leva ate 5 arquivos. O que o zip do envio tem (desafios/_itens.html) e a lista dos escolhidos no formulario, cada um
   com o X que o tira (desafios.js; 44 px no toque ate 720 px) */
.dz-envio-itens { display: block; margin-top: -4px; font-size: 12.5px; line-height: 1.45; color: var(--texto-fraco); overflow-wrap: anywhere; }
/* a caixa de soltar da entrega, baixa e em linha (dono, 21/10: "a caixa de anexo pode ser menor, e a frase pode ir dentro dela"): o icone
   na esquerda e, na direita, o convite, a frase do que vale (.im-texto-sub) e, escolhidos os arquivos, o total (.im-arq) */
.im-drop.dz-drop { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 16px; text-align: left; }
.im-drop.dz-drop i { flex: none; font-size: 28px; margin: 0; }
.dz-drop-txt { display: flex; flex-direction: column; min-width: 0; }
.dz-drop-txt .im-texto-sub { margin-top: 3px; line-height: 1.4; font-weight: 400; overflow-wrap: anywhere; }
.im-drop.dz-drop small { margin-top: 4px; }
.im-drop.dz-drop small:empty { display: none; }
.dz-arqs { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.dz-arqs[hidden] { display: none; }
.dz-arq {
  display: flex; align-items: center; gap: 8px; min-width: 0; padding: 4px 4px 4px 10px; border: 1px solid var(--borda);
  border-radius: var(--raio-sm); font-size: 13px;
}
.dz-arq > i { flex: none; color: var(--texto-fraco); }
.dz-arq-nome { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dz-arq small { flex: none; color: var(--texto-fraco); }
.dz-arq-tirar {
  flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--raio-full);
  background: transparent; color: var(--texto-suave); cursor: pointer;
}
.dz-arq-tirar:hover { background: var(--fundo); color: var(--danger-texto); }
.dz-arq-tirar:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: 1px; }
@media (max-width: 720px), (pointer: coarse) {
  .dz-arq-tirar { width: 44px; height: 44px; }
}
.dz-fechado { margin: 0; padding: 10px 12px; border-radius: var(--raio-sm); background: var(--fundo); color: var(--texto-suave); font-size: 14px; }
.dz-form { display: flex; flex-direction: column; gap: var(--sp-3); }
.dz-dica { margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--texto-fraco); }
.dz-acao { justify-content: flex-end; }
/* a pagina do desafio em duas colunas no computador (dono, 20/10: "algo mais preenchido"): na esquerda o cabecalho e a descricao, cada um com
   metade da altura; na direita a entrega e o quadro Avaliacao, que pega o que sobra. As duas terminam na linha de baixo do menu (--dz-alto,
   medido pelo desafios.js; sem ele, a janela menos o topo). O que nao cabe rola DENTRO do cartao. Abaixo de 1280 px, uma coluna. */
.dz-colunas, .dz-col, .dz-partes { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.dz-avaliacao { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.dz-rolo { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.dz-av-vazio { margin: 0; font-size: 14px; line-height: 1.55; color: var(--texto-suave); }
.dz-av-prazo { display: flex; align-items: center; gap: 6px; margin-top: auto; }
/* o prazo do professor no centro do quadro Avaliacao (dono, 21/10: "ate 8 horas uteis depois do envio"): o icone, o rotulo, o prazo em
   destaque, quanto falta e as horas uteis */
.dz-av-centro {
  flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: var(--sp-3) var(--sp-2); text-align: center;
}
.dz-av-icone { font-size: 30px; color: var(--accent-texto); margin-bottom: 4px; }
.dz-av-rot { font-size: 13px; color: var(--texto-suave); }
.dz-av-destaque { font-size: 17px; line-height: 1.35; color: var(--texto); overflow-wrap: anywhere; }
.dz-av-centro .dz-dica { margin-top: 4px; }
/* a contagem regressiva do prazo do professor no centro do quadro (dono, 21/10: "para o ansioso ver"): a caixa .dz-contagem do topo, no
   centro e sem o vermelho de urgencia (a pressa e do professor, nao do aluno); no zero fica so a frase de alta demanda */
.dz-contagem.dz-cont-av { align-items: center; margin-left: 0; gap: 8px; }
.dz-cont-av .dz-cont-rotulo { font-size: 13px; }
.dz-cont-av .dz-cont-bloco b, .dz-cont-av.dz-cont-urgente .dz-cont-bloco b, .dz-cont-av.dz-cont-urgente .dz-cont-rotulo { color: var(--texto); }
.dz-cont-av.dz-cont-perto .dz-cont-bloco b, .dz-cont-av.dz-cont-urgente .dz-cont-bloco b { color: var(--accent-texto); }
.dz-cont-av.dz-cont-fim .dz-av-quando { display: none; }
.dz-cont-av.dz-cont-fim .dz-cont-rotulo { font-size: 17px; font-weight: 700; line-height: 1.35; color: var(--texto); }
@media (max-width: 720px) {
  .dz-contagem.dz-cont-av { width: auto; align-items: center; }
  .dz-cont-av .dz-cont-bloco { flex: 0 0 auto; min-width: 50px; }
}
@media (min-width: 1280px) {
  .dz-pagina { max-width: none; }
  .dz-colunas { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: stretch;
    height: var(--dz-alto, calc(100dvh - 140px)); min-height: 560px; }
  .dz-col { min-height: 0; }
  .dz-col-esq > .dz-topo, .dz-col-esq > .dz-partes { flex: 1 1 50%; min-height: 0; overflow-y: auto; box-sizing: border-box; }
  .dz-col-esq > .dz-topo { align-content: start; }
  /* o cabecalho tem o brilho da borda (.com-brilho, desenhado no cartao): nunca rola por dentro, senao a borda acesa rolaria com o texto */
  .dz-col-esq > .dz-topo.com-brilho { min-height: auto; overflow: visible; }
  /* as partes enchem a metade de baixo (dono, 21/10: "quando tem mais de 1 parte, fica esse espaco em branco... faca que os cartoes se
     ajustem"): cada uma cresce por igual ate o fim da coluna; o que nao cabe rola na caixa das partes */
  .dz-partes > .dz-parte { flex: 1 0 auto; }
  .dz-entrega { flex: 0 1 auto; min-height: 0; overflow-y: auto; box-sizing: border-box; }
  .dz-avaliacao { flex: 1 1 0; min-height: 160px; overflow-y: auto; box-sizing: border-box; }
  /* dono, 21/10 ("reduzir a altura do box avaliacao", e depois "pode seguir fibonacci, dando a menor parte ao avaliacao"): com o formulario
     aberto, a coluna se divide na proporcao aurea, 61,8% pra entrega e 38,2% pro quadro Avaliacao (cada um rola por dentro), com o
     comentario crescendo ate o Enviar ficar no pe do cartao. Sem formulario (liberado, reprovado, entrega fechada) vale o de cima: a
     Avaliacao, onde estao a nota e os comentarios, pega a sobra */
  .dz-col-dir:has(.dz-form) > .dz-entrega { flex: 0 1 calc((100% - var(--sp-4)) * .618); }
  .dz-col-dir:has(.dz-form) > .dz-avaliacao { flex: 1 1 0; min-height: 120px; }
  /* o brilho da borda (.com-brilho) e desenhado no cartao: o cartao da direita nao rola, o titulo fica e so o miolo (.dz-rolo) rola */
  .dz-col-dir > .dz-entrega, .dz-col-dir > .dz-avaliacao { overflow: hidden; }
  .dz-col-dir > .dz-entrega > .dz-rolo, .dz-col-dir > .dz-avaliacao > .dz-rolo { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  .dz-col-dir:has(.dz-form) .dz-form, .dz-col-dir:has(.dz-form) .dz-campo-texto { flex: 1 1 auto; }
  .dz-col-dir:has(.dz-form) .dz-campo-texto textarea { flex: 1 1 auto; min-height: 76px; resize: none; }
}
@media (max-width: 720px) {
  .dz-topo-com-capa { grid-template-columns: minmax(0, 1fr); }
  .dz-grade { grid-template-columns: minmax(0, 1fr); }
  /* uma coluna (dono, 21/10): a linha do tempo a ESQUERDA dos cartoes, descendo. O fio em duas metades por cartao, que emendam no vao: a
     que CHEGA (do meio do vao de cima ate o ponto, na cor deste) e a que SAI (do ponto ate o meio do vao de baixo, na cor do proximo, --lt-sai
     do bloco lt-) */
  .dz-elo { padding-left: 46px; }
  .dz-elo > .lt-passo { position: absolute; left: 0; top: 0; bottom: 0; width: var(--lt-ponto-agora); height: auto; }
  .dz-elo.lt-fio > .lt-passo::before {
    top: calc(var(--lt-vao) / -2); bottom: 50%; right: auto; left: 50%; width: var(--lt-trilho); height: auto;
    transform: translateX(-50%); border-radius: 0; background: var(--lt-fio-v);
  }
  .dz-elo:has(+ .dz-elo) > .lt-passo::after {
    content: ""; position: absolute; top: 50%; bottom: calc(var(--lt-vao) / -2); left: 50%; width: var(--lt-trilho);
    transform: translateX(-50%); background: var(--lt-sai);
  }
}

/* Fase 30: os ESPECIALISTAS (prefixo ep-): o diretorio dos colegas (cartoes em grade, rolagem infinita), o perfil, o bloco do Meu Cadastro
   (a aba Bio) e a tela do admin. O selo e a pilula verde com o ph-seal-check (a cor do Respondida das Minhas Duvidas). */
.ep { display: flex; flex-direction: column; gap: var(--sp-4); }
.ep-voltar { margin-bottom: calc(var(--sp-2) - var(--sp-4)); align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 14px; color: var(--texto-suave); text-decoration: none; }
.ep-voltar:hover { color: var(--texto); }
.ep-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.ep-titulos { min-width: 0; }
/* o .ep-sub do admin das empresas (o mesmo prefixo ep-) e outra coisa, negrito: aqui so o de dentro do cabecalho */
.ep-titulos .ep-sub { margin: 4px 0 0; font-size: 14px; font-weight: 400; color: var(--texto-suave); }
.ep-meu {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--borda);
  border-radius: var(--raio); background: var(--bg-elev);
}
.ep-meu-icone { font-size: 28px; color: var(--accent-texto); flex: none; }
.ep-meu-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 260px; font-size: 14px; color: var(--texto-suave); }
.ep-meu-txt strong { color: var(--texto); }
.ep-meu-acoes { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.ep-filtro { flex-wrap: wrap; }
.ep-grade { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-4); }
.ep-item { min-width: 0; }
.ep-cartao {
  display: flex; flex-direction: column; gap: var(--sp-3); height: 100%; padding: var(--sp-4); border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--bg-elev); color: var(--texto); text-decoration: none;
}
.ep-cartao:hover, .ep-cartao:focus-visible { border-color: var(--accent-borda); }
.ep-quem { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.ep-foto { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
.ep-iniciais { width: 56px; height: 56px; font-size: 18px; flex: none; }
.ep-nomes { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ep-nome { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-titulo { font-size: 13px; color: var(--texto-suave); overflow-wrap: anywhere; }
.ep-comps { display: flex; flex-wrap: wrap; gap: 6px; }
.ep-comp {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--raio-full); font-size: 12.5px; background: var(--fundo);
  color: var(--texto-suave); box-shadow: inset 0 0 0 1px var(--borda);
}
.ep-verificada { background: var(--verde-suave); color: var(--verde-escuro); box-shadow: none; }
.ep-verificada i { font-size: 14px; }
.ep-fim { margin: 0; text-align: center; font-size: 13px; color: var(--texto-fraco); }
.ep-mais { align-self: center; }
.ep-pagina { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 920px; }
.ep-aviso {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; padding: 10px 14px; border-radius: var(--raio-sm);
  background: var(--accent-soft); color: var(--texto); font-size: 14px;
}
.ep-aviso-off { background: var(--ambar-suave); }
.ep-aviso a { color: var(--accent-texto); text-decoration: underline; }
.ep-topo {
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; padding: var(--sp-4); border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--bg-elev);
}
.ep-foto-g { width: 96px; height: 96px; }
.ep-iniciais-g { width: 96px; height: 96px; font-size: 30px; }
.ep-topo-txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 240px; }
.ep-h1 { margin: 0; overflow-wrap: anywhere; }
.ep-titulo-g { margin: 0; font-size: 15px; color: var(--texto-suave); overflow-wrap: anywhere; }
.ep-links { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: 0; }
.ep-links a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--accent-texto); }
.ep-bloco { display: flex; flex-direction: column; gap: var(--sp-2); }
.ep-h2 { margin: 0; font-size: 17px; }
.ep-comps-lista { list-style: none; margin: 0; padding: 0; }
.ep-origem { font-size: 11.5px; opacity: .85; }
.ep-bio { margin: 0; font-size: 15px; line-height: 1.65; white-space: pre-line; overflow-wrap: anywhere; }
.ep-projetos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.ep-projeto {
  display: flex; align-items: center; gap: var(--sp-3); min-height: 44px; padding: 10px 14px; border: 1px solid var(--borda);
  border-radius: var(--raio-sm); color: var(--texto); text-decoration: none;
}
.ep-projeto:hover, .ep-projeto:focus-visible { border-color: var(--accent-borda); }
.ep-projeto i { flex: none; color: var(--accent-texto); font-size: 20px; }
.ep-projeto-txt { display: flex; flex-direction: column; min-width: 0; }
.ep-projeto-txt strong { overflow-wrap: anywhere; }
.ep-projeto-txt span { font-size: 12.5px; color: var(--texto-fraco); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-mc { display: flex; flex-direction: column; gap: var(--sp-3); }
.ep-mc-projetos { display: flex; flex-direction: column; gap: var(--sp-2); }
.ep-mc-projeto { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--sp-2); }
.ep-adm-aviso {
  display: flex; align-items: center; gap: 8px; margin: 0 0 var(--sp-3); padding: 10px 14px; border-radius: var(--raio-sm);
  background: var(--ambar-suave); color: var(--texto); font-size: 14px;
}
.ep-erro {
  margin: 0 0 var(--sp-3); padding: 10px 12px; border-radius: var(--raio-sm); background: var(--vermelho-suave); color: var(--vermelho-escuro);
  font-size: 13.5px;
}
.ep-caixas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-2); border: 0; margin: 0 0 var(--sp-3); padding: 0; }
.ep-dica { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--texto-fraco); }
@media (max-width: 720px) {
  .ep-grade { grid-template-columns: minmax(0, 1fr); }
  .ep-mc-projeto { grid-template-columns: minmax(0, 1fr); }
  .ep-meu-acoes .btn { min-height: 44px; }
}

/* Fase 25, parte B: a fila do professor (/equipe/desafios, prefixo dr-), a galeria e o placar (prefixo dg-: o placar usa a lista do rank,
   rk-) e as avaliacoes do meu envio. */
.dr-escolha .selectbusca { width: 300px; max-width: 100%; }
.dr-escolha .sb-display { min-width: 0; }
.dr-escolha .sb-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge.dr-pendentes { background: var(--accent-soft); color: var(--accent-texto); font-weight: 700; }
.dr-situacao { margin-bottom: var(--sp-3); }
.dr-envio { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.dr-envio-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; }
.dr-sub { margin: var(--sp-3) 0 0; font-size: 14px; }
.dr-avaliacoes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; line-height: 1.5;
  overflow-wrap: anywhere; }
.dr-nota { display: inline-block; min-width: 36px; font-weight: 700; color: var(--accent-texto); }
.dr-form { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-2); }
.dr-acoes { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: flex-end; }
.dr-podio { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.dr-erro { margin: 6px 0 0; font-size: 12.5px; font-weight: 600; color: var(--vermelho-escuro); }
@media (max-width: 720px) {
  .dr-escolha .selectbusca { width: 180px; }   /* a topbar divide a linha com o titulo: o nome longo do desafio corta com reticencias */
  .dr-acoes .btn, .dr-podio .btn { min-height: 44px; }
  .dr-situacao.fu-presets button { height: 44px; min-height: 44px; }   /* o alvo de toque da situacao, como as ordens da Minha Area */
}

.dz-galeria { align-self: flex-start; margin-top: var(--sp-2); }
.dg-grade { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }   /* o envio leva o formulario da nota: cartao mais largo */
.dz-minhas { display: flex; flex-direction: column; gap: 6px; }
.dz-comentarios { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; line-height: 1.5;
  overflow-wrap: anywhere; }
.dg-intro { margin: 0; font-size: 13.5px; color: var(--texto-suave); }
.dg-placar { display: flex; flex-direction: column; gap: var(--sp-3); }
.dg-podio { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
.dg-podio-item { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.badge.dg-lugar { white-space: nowrap; }
.badge.dg-lugar-1 { background: var(--ambar-suave); color: var(--trofeu-ouro); }
.badge.dg-lugar-2 { background: var(--fundo); color: var(--texto-suave); box-shadow: inset 0 0 0 1px var(--borda); }
.badge.dg-lugar-3 { background: var(--ambar-suave); color: var(--ambar-escuro); }
.badge.dg-em-avaliacao { background: var(--fundo); color: var(--texto-suave); box-shadow: inset 0 0 0 1px var(--borda); }
.dg-envio {
  display: flex; flex-direction: column; gap: var(--sp-2); height: 100%; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--borda);
  border-radius: var(--raio); background: var(--bg-elev); min-width: 0;
}
.dg-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.dg-autor { font-size: 15px; overflow-wrap: anywhere; }
.dg-media { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 13.5px; color: var(--texto-suave); }
.dg-media i { color: var(--trofeu-ouro); }
.dg-minha { margin: 0; font-size: 13.5px; color: var(--texto-suave); }
.dg-avaliar { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: auto; }
.dg-estrelas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.dg-estrelas legend { padding: 0; margin-bottom: 4px; font-size: 13px; font-weight: 600; color: var(--texto-suave); }
.dg-estrela {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 44px; min-height: 36px; padding: 0 10px;
  border: 1px solid var(--borda); border-radius: var(--raio-full); font-size: 14px; cursor: pointer;
}
.dg-estrela:has(input:checked) { border-color: var(--accent-borda); background: var(--accent-soft); color: var(--accent-texto); }
.dg-estrela { position: relative; }
/* o radio nativo fica por cima da pilula, invisivel e alcancavel (Tab, setas e Espaco); o anel de foco acende na pilula */
.dg-estrela input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.dg-estrela:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.dg-acao { margin-top: 0; }
@media (max-width: 720px) {
  .dg-estrela { min-height: 44px; }
  .dg-grade { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Fase 26: INDIQUE E GANHE. Admin: as ofertas e as regras (/adm/indique/ofertas, prefixo io-) e as comissoes (/adm/indique/comissoes,
   prefixo ic-: o chip da situacao e a transacao em fonte de largura fixa). Aluno: o painel (/indique, prefixo ind-): os cartoes das ofertas na
   MESMA altura (Padrao_Box_Card), as Regras do programa colapsaveis abaixo deles, as duas tabelas do componente e o toggle da situacao. */
.io-num, .te-tab th.io-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.io-linha2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-3); }
/* o Publico da oferta (Fase 85, toggle tipo 1: Turmas | Area | Geral): as tres opcoes dividem a linha e, no toque, o alvo tem 44 px */
.io-publico.fu-presets { --fu-h: 40px; display: flex; flex-wrap: wrap; width: 100%; height: auto; }
.io-publico.fu-presets button { flex: 1 1 auto; height: auto; min-height: 34px; padding: 6px 8px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.io-publico.fu-presets button:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: 1px; }
@media (max-width: 720px), (pointer: coarse) { .io-publico.fu-presets button { min-height: 44px; } }
.io-linha3 { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-3); }
.io-linha3 + .ob-dica { margin-top: calc(-1 * var(--sp-2)); }
.io-imagem-linha { display: flex; align-items: stretch; gap: var(--sp-3); min-width: 0; }
.io-imagem-linha .im-drop { flex: 1; min-width: 0; }
.io-imagem-previa { width: 96px; aspect-ratio: 3 / 2; height: auto; object-fit: cover; border-radius: var(--raio-sm); border: 1px solid var(--borda);
  background: var(--fundo); flex: 0 0 auto; }
.io-imagem[hidden], [data-io-capa][hidden], [data-io-publico][hidden] { display: none; }
/* a pagina da oferta (dono, 19/10: saiu do modal): os campos num fieldset sem moldura; o erro do servidor no topo */
.io-campos { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3) var(--sp-6, 24px); margin: 0; padding: 0; border: 0; min-width: 0; }
.io-col { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.io-pagina.vt-cartao { max-width: none; }
.io-pagina .io-linha3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (min-width: 1100px) { .io-campos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.io-imagem-previa[hidden] { display: none; }
.io-erro {
  margin: 0 0 var(--sp-3); padding: 10px 12px; border-radius: var(--raio-sm); background: var(--vermelho-suave); color: var(--vermelho-escuro);
  font-size: 13.5px;
}
.io-regras { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 920px; }
.io-regras-texto { min-height: 280px; font-family: inherit; }
.io-regras-acoes { display: flex; justify-content: flex-end; }
.io-regras-ler { font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; }
/* a versao no ar e os aceites, acima do editor (dono, 23/10) */
.io-regras-versao { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; max-width: 920px; margin-bottom: var(--sp-3);
  font-size: 13px; color: var(--texto-secundario); }
.io-regras-versao > span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.io-regras-versao .btn { margin-left: auto; }
.ic-mono { font-family: Consolas, monospace; font-size: 12.5px; }
.badge.ic-sit { white-space: nowrap; }
.badge.ic-sit-garantia { background: var(--ambar-suave); color: var(--ambar-escuro); }
.badge.ic-sit-a_repassar { background: var(--accent-soft); color: var(--accent-texto); }
.badge.ic-sit-repassada { background: var(--verde-suave); color: var(--verde-escuro); }
.badge.ic-sit-cancelada { background: var(--vermelho-suave); color: var(--vermelho-escuro); }
.badge.ic-sit-conferencia { background: var(--fundo); color: var(--texto-suave); box-shadow: inset 0 0 0 1px var(--borda); }

.ind { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.ind-grade { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: var(--sp-4); align-items: stretch; }
/* com 1 ou 2 produtos (19/10): os cartoes ocupam ate 820 px em vez de um cartao pequeno num canto; com 1 e capa, a capa vai pra esquerda */
.ind-grade-1, .ind-grade-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); max-width: 820px; }
.ind-grade-1 .ind-oferta:has(.ind-capa) { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-rows: 1fr auto; }
.ind-grade-1 .ind-oferta:has(.ind-capa) .ind-capa { grid-row: 1 / 3; height: 100%; aspect-ratio: auto; min-height: 220px; }
.ind-oferta { display: flex; flex-direction: column; gap: 0; height: 100%; padding: 0; overflow: hidden; min-width: 0; }
.ind-capa { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--fundo); }
.ind-oferta-corpo { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4) 0; flex: 1; min-width: 0; }
.ind-oferta-sem-capa .ind-oferta-corpo { padding-top: var(--sp-4); }
/* com 2 ou mais cartoes, as partes de todos andam nas MESMAS linhas da grade (subgrid; dono, 19/10): o titulo, o %, a comissao, o selo e o botao
   ficam alinhados mesmo com o titulo de uma ou duas linhas. O corpo vira display: contents e cada parte ganha a sua linha (sem capa, o topo
   ocupa a linha da capa). */
.ind-grade:not(.ind-grade-1) > .ind-oferta { display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: var(--sp-2); height: auto; }
.ind-grade:not(.ind-grade-1) .ind-oferta-corpo { display: contents; }
.ind-grade:not(.ind-grade-1) .ind-capa { grid-row: 1; }
.ind-grade:not(.ind-grade-1) .ind-oferta-topo { grid-row: 2; align-self: start; padding: var(--sp-1) var(--sp-4) 0; }
.ind-grade:not(.ind-grade-1) .ind-oferta-sem-capa .ind-oferta-topo { grid-row: 1 / 3; padding-top: var(--sp-4); }
.ind-grade:not(.ind-grade-1) .ind-ganho { grid-row: 3; align-self: end; padding: 0 var(--sp-4); }
.ind-grade:not(.ind-grade-1) .ind-ganho-valor, .ind-grade:not(.ind-grade-1) .ind-ganho-valor-vago { grid-row: 4; margin: 0; padding: 0 var(--sp-4); }
.ind-grade:not(.ind-grade-1) .ind-oferta-acoes { grid-row: 5; padding-top: var(--sp-2); }
.ind-ganho-valor-vago { margin: 0; }
.ind-oferta-topo { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.ind-selo { flex: 0 0 48px; height: 48px; display: grid; place-items: center; border-radius: var(--raio-sm); background: var(--accent-soft);
  color: var(--accent-texto); font-size: 24px; }
.ind-ganho { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-1) 0 0; color: var(--texto-suave); font-size: 14px; }
.ind-ganho-valor { margin: 0; font-size: 16px; font-weight: 700; color: var(--accent-texto); font-variant-numeric: tabular-nums; }
.ind-ganho-num { font-size: 34px; line-height: 1; font-weight: 800; color: var(--accent-texto); font-variant-numeric: tabular-nums; }
.ind-desconto { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; margin: 0; padding: 5px 10px; border-radius: var(--raio-full);
  background: var(--verde-suave); color: var(--verde-escuro); font-size: 12px; font-weight: 600; line-height: 1.35; white-space: nowrap; }
.ind-desconto span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ind-desconto-vago { height: calc(10px + 12px * 1.35); margin: 0; }
.ind-meu-link { display: flex; flex-direction: column; gap: var(--sp-2); width: 100%; min-width: 0; }
/* o rodape do track (dono, 19/10): uma faixa fixa no fim da tela, SEM contorno, com o desfoque que some pra cima: o cartao que rola por tras
   vai desaparecendo e nunca encosta no texto; o texto no meio, discreto; no celular o texto fica acima da barra de abas e o desfoque segue
   por tras dela. A pagina ganha a folga de baixo pra o ultimo cartao poder sair de tras da faixa */
.ind-rodape { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: flex-start; justify-content: center; gap: 6px;
  margin: 0; padding: 44px 16px 16px; background: linear-gradient(to top, var(--bg) calc(100% - 44px), transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  -webkit-mask-image: linear-gradient(to top, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to top, #000 calc(100% - 40px), transparent);
  font-size: 12px; line-height: 1.45; color: var(--texto-suave); text-align: center; pointer-events: none; }
.ind-rodape i { flex: 0 0 auto; margin-top: 2px; }
.conteudo-aluno:has(.ind-rodape) { padding-bottom: calc(var(--pad-aluno) + 72px); }
@media (max-width: 880px) {
  html.com-tabbar .ind-rodape { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
  html.com-tabbar .conteudo-aluno:has(.ind-rodape) { padding-bottom: calc(200px + env(safe-area-inset-bottom, 0px)); }
}
.ind-meu-botoes { display: flex; gap: var(--sp-2); }
.ind-meu-botoes .btn { flex: 1; min-height: 44px; justify-content: center; }
.ind-link-pg { align-self: center; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 var(--sp-2); border: 0;
  background: none; color: var(--texto-fraco); font: inherit; font-size: 12px; font-weight: 400; cursor: pointer; border-radius: var(--raio-sm); }
.ind-link-pg:hover { color: var(--texto); }
.ind-link-pg[hidden] { display: none; }
/* sem pagina de vendas: o aviso no lugar do link, na mesma altura; e a area das acoes sempre com as duas linhas, pros botoes alinharem (dono, 19/10) */
.ind-sem-pg { align-self: center; display: flex; align-items: center; justify-content: center; min-height: 36px; margin: 0; font-size: 12px; font-weight: 400;
  color: var(--texto-fraco); text-align: center; }
.ind-oferta-acoes form { display: flex; flex-direction: column; gap: var(--sp-2); }
.ind-sem-pg[hidden] { display: none; }
.ind-oferta-acoes form, .ind-meu-link { min-height: calc(44px + var(--sp-2) + 36px); }
.ind-oferta-sub { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; line-height: 1.4; color: var(--texto-suave); }
.ind-gerar { width: 100%; min-height: 44px; justify-content: center; }
.ind-oferta-acoes form { width: 100%; }
.ind-abas { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.ind-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.ind-tabs .ial-tab { white-space: nowrap; }
.ind-aba-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 2px; border-radius: var(--raio-full);
  background: var(--accent-soft); color: var(--accent-texto); font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ind-pane { display: none; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.ind-pane.ativo { display: flex; }
@media (max-width: 400px) { .ind-tabs .ial-tab > i { display: none; } }
.ind-ancora { display: block; height: 0; scroll-margin-top: 80px; }
.ind-dica { margin: 0; }
.ind-libera { display: block; margin-top: 3px; font-size: 11.5px; color: var(--texto-fraco); }
.ind-etapas { list-style: none; margin: 0; padding: var(--sp-4); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: var(--sp-3); counter-reset: etapa; }
.ind-etapas li { display: flex; gap: var(--sp-2); align-items: flex-start; font-size: 13px; color: var(--texto-suave); line-height: 1.45; }
.ind-etapas i { flex: 0 0 auto; font-size: 20px; color: var(--accent-texto); margin-top: 1px; }
.ind-etapas strong { display: block; color: var(--texto); font-size: 13.5px; }
.ind-oferta-nome { margin: 0; font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; }
.ind-oferta-acoes { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4) var(--sp-4); min-width: 0; }
.ind-regras.ind-regras-texto { padding: var(--sp-4) var(--sp-5, 20px); }
.ind-regras-texto { padding: 0 var(--sp-4) var(--sp-4); font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; }
.ind-regras-texto > :first-child { margin-top: 0; }
.ind-regras-texto a { color: var(--accent-texto); text-decoration: underline; }
/* o regulamento em itens (dono, 23/10): o titulo de cada item cola na lista dele, como no papel legal do modal */
.ind-regras-texto h2, .ind-regras-texto h3, .ind-regras-texto h4 { font-size: 16px; line-height: 1.35; margin: 20px 0 6px; }
.ind-regras-texto p, .ind-regras-texto ul, .ind-regras-texto ol { margin: 0 0 10px; }
.ind-regras-texto li + li { margin-top: 4px; }
/* o ACEITE das regras (dono, 23/10): no modal, o texto no papel legal (.termo-texto) ocupa o que sobra e rola por dentro (a caixa nunca passa da
   janela e o rodape com a caixa de marcar e os botoes fica a vista); na aba Regras, o mesmo aceite sem JavaScript e a data de quem ja aceitou */
.ind-aceite-caixa .modal-corpo { overflow: hidden; }
.ind-aceite-sub { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-dim); }
.ind-aceite-texto { flex: 1 1 auto; min-height: 140px; max-height: none; }
.modal-rodape.ind-aceite-rodape { flex-direction: column; align-items: stretch; gap: 10px; }
.ind-aceite-erro { margin: 0; }
.ind-aceite-erro[hidden] { display: none; }
.ind-aceite-acoes { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.ind-aceite-acoes .btn-primario:disabled { opacity: .55; cursor: not-allowed; }
.ind-aceite-form { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); margin-top: var(--sp-3); padding: var(--sp-4); }
.ind-aceite-feito { display: flex; align-items: center; gap: 8px; margin: var(--sp-3) 0 0; font-size: 13px; color: var(--text-dim); }
.ind-aceite-feito i { color: var(--verde); font-size: 18px; }
/* a chave PIX do Meu Cadastro (dono, 23/10): o tipo em capsula, que quebra em linhas no celular, e o campo embaixo */
.ic-pix-falta { color: var(--texto-fraco); }
.mc-pix { display: flex; flex-direction: column; gap: 5px; }   /* o mesmo espaco do .campo: o rotulo e a linha da chave na altura do Telefone */
.mc-pix-tipos { flex-wrap: wrap; align-self: flex-start; max-width: 100%; }
/* o tipo e a chave lado a lado (dono, 23/10); o campo pega o resto da linha e desce quando fica abaixo de 180 px */
.mc-pix-linha { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px 16px; }
.mc-pix-linha .mc-pix-tipos { flex: 0 1 auto; margin: 0; }
/* o campo na MESMA altura da capsula (stretch) e com o respiro dela (dono, 23/10: "nao ta alinhado, falta respiro") */
.mc-pix-linha .input { flex: 1 1 180px; min-width: 0; width: auto; height: auto; min-height: 40px; padding: 0 16px; border-radius: 999px; }
.mc-pix > .dica-campo { margin-top: 4px; }
/* no computador a capsula tem os 40 px do campo do Telefone ao lado (dono, 23/10: "telefone e chaves continuam desalinhados"); no celular
   os botoes ficam com a altura de toque do tema */
@media (min-width: 721px) {
  html.tema-ios-dark .mc-pix-tipos.fu-capsula button { height: 30px; }   /* o tema vem depois deste arquivo: a classe a mais vence */
}
/* Fase 108: com chave, so o tipo e o fim (a chave mora cifrada), o Tirar ao lado e o Trocar chave que abre o tipo e o campo vazio */
.mc-pix-atual { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.mc-pix-trocar > summary { list-style: none; align-self: flex-start; width: fit-content; }
.mc-pix-trocar > summary::-webkit-details-marker { display: none; }
.mc-pix-trocar[open] > summary { margin-bottom: 8px; }
.mc-rotulo-leve { font-weight: 400; }   /* (dono, 23/10) so 'Chave PIX' em negrito no rotulo */
.mc-pix-aviso { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--ambar); }
@media (max-width: 720px) {
  .ind-aceite-acoes { flex-direction: column-reverse; }
  .ind-aceite-acoes .btn { min-height: 44px; justify-content: center; }
  .mc-pix-atual .btn, .mc-pix-trocar > summary, .mc-pix-linha .input { min-height: 44px; }
}
.ind-titulo { margin: var(--sp-2) 0 0; font-size: 18px; scroll-margin-top: 80px; }
.ind-link { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }
.ind-url { display: inline-block; max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px;
  color: var(--texto-suave); vertical-align: middle; }
.ind-situacoes { align-self: flex-start; max-width: 100%; }
@media (max-width: 720px) {
  .io-linha2 { grid-template-columns: minmax(0, 1fr); }
  .io-linha3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .io-linha3 > :first-child { grid-column: 1 / -1; }
  .ind-url { max-width: 160px; }
  .ind-situacoes.fu-presets { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; height: auto; max-width: 100%; }
  .ind-situacoes.fu-presets button { height: 44px; min-height: 44px; white-space: nowrap; flex: 0 0 auto; }
  .ind-grade-1 .ind-oferta:has(.ind-capa) { display: flex; }
  .ind-tabs { gap: 0; }
  .ind-tabs .ial-tab { padding-left: 10px; padding-right: 10px; gap: 5px; font-size: 13px; }
  .ind-grade-1 .ind-oferta:has(.ind-capa) .ind-capa { height: auto; aspect-ratio: 3 / 2; min-height: 0; }
}
/* o cartao PREMIUM (dono, 23/10: "nao to achando essa tela convidativa e premium"): a capa emoldurada dentro do cartao, o dinheiro em BRANCO
   como o numero grande (o laranja fica no detalhe: o %, a aba e o botao), o selo do desconto em vidro, mais respiro e o cartao que sobe com
   o mouse em cima, junto do brilho da borda (.com-brilho). O botao do Gerar meu link e o .ind-cta; o Copiar link, depois de gerar, e o
   btn-fantasma do Perguntas desta aula (o alto relevo do neo.css; dono, 23/10) */
.ind-oferta { transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s cubic-bezier(.16, 1, .3, 1); }
.ind-capa { width: calc(100% - 16px); margin: 8px 8px 0; border-radius: calc(var(--raio) - 8px); }
.ind-grade-1 .ind-oferta:has(.ind-capa) .ind-capa { margin: 8px; height: calc(100% - 16px); }
.ind-grade:not(.ind-grade-1) .ind-oferta-topo { padding: var(--sp-2) var(--sp-5, 20px) 0; }
.ind-grade:not(.ind-grade-1) .ind-ganho, .ind-grade:not(.ind-grade-1) .ind-ganho-valor,
.ind-grade:not(.ind-grade-1) .ind-ganho-valor-vago { padding-left: var(--sp-5, 20px); padding-right: var(--sp-5, 20px); }
.ind-oferta-acoes { padding: var(--sp-3) var(--sp-5, 20px) var(--sp-5, 20px); }
.ind-oferta-nome { font-size: 17px; letter-spacing: -.01em; }
.ind-ganho-reais { flex-direction: column; align-items: flex-start; gap: 4px; margin-top: var(--sp-2); }
.ind-ganho-rotulo { font-size: 12.5px; color: var(--texto-fraco); }
.ind-ganho-reais .ind-ganho-num { font-size: 32px; letter-spacing: -.02em; color: var(--texto); }
.ind-ganho-valor { font-size: 13px; font-weight: 400; color: var(--texto-suave); }
.ind-ganho-valor strong { color: var(--accent-texto); font-weight: 700; }
.ind-desconto { background: var(--verde-suave); box-shadow: inset 0 0 0 1px var(--verde-borda); color: var(--texto-suave); font-weight: 500; }
.ind-desconto i { color: var(--verde-escuro); }
/* o botao do cartao e o CLARO do Destaque da Home (os tokens --dq-botao-*, ios-dark.css): no escuro, o branco e o botao mais nobre, e o laranja
   cheio com o brilho embaixo deixava o cartao com cara de anuncio (dono, 23/10; comparado com o laranja, o vidro laranja, o laranja queimado
   e o vermelho escuro, que le como erro). Sem o tema, cai no primario da casa */
.ind-oferta .ind-cta.btn-primario { background: var(--dq-botao-fundo, var(--accent)); color: var(--dq-botao-texto, var(--texto-sobre-accent));
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
.ind-oferta .ind-cta.btn-primario:hover { background: var(--dq-botao-fundo-hover, var(--accent)); filter: none; }
@media (hover: hover) and (min-width: 881px) {
  .ind-grade .ind-oferta:hover { transform: translateY(-4px);
    box-shadow: 0 34px 70px -24px rgba(0, 0, 0, 0.95), 0 2px 8px rgba(0, 0, 0, 0.4), var(--vidro-luz, 0 0 0 transparent); }
}
@media (prefers-reduced-motion: reduce) { .ind-oferta { transition: none; } .ind-grade .ind-oferta:hover { transform: none; } }
@media (max-width: 720px) {
  .ind-grade-1 .ind-oferta:has(.ind-capa) .ind-capa { margin: 8px 8px 0; height: auto; }
}

/* ---------- Relatorio de Recebimento (Fase 9): sem style= no template (CV-116); toggle de status e o .fu-presets (CV-172) ---------- */
.rr-kpis { margin-bottom: 16px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.rr-kpi-rotulo { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-secundario); }
.rr-kpi-valor { font-weight: 700; font-size: 28px; letter-spacing: -.02em; }   /* Inter: o Sora so onde o Sistema_de_Estilos manda */
.rr-kpi-valor.rr-ok { color: var(--verde-escuro); }
.rr-kpi-valor.rr-falha { color: var(--vermelho-escuro); }
.rr-kpi-valor.rr-suave { color: var(--texto-suave); }
.ra-bar .campo.rr-busca { flex: 1; }
.rr-filtro .fu-presets { --fu-h: 40px; }
.rr-nowrap { white-space: nowrap; }
.rr-erro { font-size: 12px; color: var(--vermelho-escuro); }
.rr-erro.rr-nota { color: var(--texto-fraco); }   /* o Detalhe que nao pede acao (dono, 08/10): processado, duplicado, evento sem efeito */
.rr-vazio { text-align: center; color: var(--texto-fraco); padding: 32px; }
@media (max-width: 720px), (pointer: coarse) {   /* no toque, cada botao do toggle tem 44 px */
  .rr-filtro .fu-presets { height: auto; }
  .rr-filtro .fu-presets button { height: 44px; min-height: 44px; }
}

/* relatorio como Padrao_Tabela (correcao de UI): aviso de dado protegido, celulas que cortam com reticencias, corpo do webhook */
.rr-aviso { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 14px; padding: 10px 12px; font-size: 13px; line-height: 1.45; color: var(--texto); background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio-sm); }
.rr-aviso i { flex: 0 0 auto; margin-top: 1px; font-size: 16px; color: var(--verde-escuro); }
#tabWebhooks th, #tabWebhooks td { padding-left: 10px; padding-right: 10px; }   /* 8 colunas: com 14 px de cada lado a tabela passava do card de 1440 px */
#tabWebhooks td[data-col="plataforma"] { max-width: 120px; }
#tabWebhooks td[data-col="evento"] { max-width: 160px; }
#tabWebhooks td[data-col="email"] { max-width: 190px; }
#tabWebhooks td[data-col="codigo"] { max-width: 110px; }
#tabWebhooks td[data-col="plataforma"], #tabWebhooks td[data-col="evento"], #tabWebhooks td[data-col="codigo"] { overflow: hidden; text-overflow: ellipsis; }
#tabWebhooks td[data-col="plataforma"] .badge { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* o selo da plataforma corta com reticencias dentro da celula */
#tabWebhooks .rr-erro { display: block; max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
/* a coluna Acoes fica colada na borda direita quando a tabela rola dentro do card: o botao nunca some atras da rolagem */
#tabWebhooks th.col-acoes, #tabWebhooks td.col-acoes { position: sticky; right: 0; z-index: 1; background: var(--branco); box-shadow: -1px 0 0 var(--borda); }
#tabWebhooks tbody tr:hover td.col-acoes { background: var(--fundo); }
#tabWebhooks details.payload pre { max-width: min(480px, 70vw); }
.rr-corpo-nota { margin: 4px 0 0; max-width: 480px; font-size: 11.5px; color: var(--texto-suave); white-space: normal; }

/* ---------- Tokens do MCP (Fase 11, /dev/mcp/tokens) ---------- */
/* coluna flex como a .conteudo (Padrao_Estado_Vazio): o .vz{flex:1} herda a altura que sobrou da janela e o bloco centra em Y */
.tk-pagina { display: flex; flex-direction: column; flex: 1 1 auto; }
.tk-intro { margin-bottom: 14px; }
.tk-intro p { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--texto-secundario); }
.tk-alerta { margin-bottom: 14px; border-left: 3px solid var(--ambar); }
.tk-alerta p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--texto-secundario); }
.tk-alerta-texto { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: var(--texto); }
.tk-alerta-texto i { color: var(--ambar); }
.tk-prefixo, .tk-comando { font-family: Consolas, monospace; font-size: 12.5px; }
.tk-linha { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.tk-linha .input { flex: 1 1 260px; min-width: 0; }
/* o comando e UMA linha longa: nunca quebra no meio da palavra ("Authorization: Bearer" inteiro); a caixa rola pro lado (wrap="off" no textarea) */
.tk-comando { width: 100%; height: auto; padding-top: 10px; resize: none; line-height: 1.45; white-space: pre; overflow-x: auto; overflow-wrap: normal; word-break: normal; }
.tk-copiar-comando { align-self: flex-start; }
/* 8 colunas: com 14 px de cada lado a tabela passava do cartao a 1280 px; a coluna Acoes fica colada na borda direita quando o cartao rola
   (o botao de revogar nunca some atras da rolagem), como no relatorio de recebimento */
#tabTokens th, #tabTokens td { padding-left: 10px; padding-right: 10px; }
#tabTokens td[data-col="nome"] { max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
#tabTokens td[data-col="dono"] { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
#tabTokens th.col-acoes, #tabTokens td.col-acoes { position: sticky; right: 0; z-index: 1; background: var(--branco); box-shadow: -1px 0 0 var(--borda); }
#tabTokens tbody tr:hover td.col-acoes { background: var(--fundo); }
.tk-sw { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--fu-h, 38px); }
.tk-sw-texto { font-size: 13px; font-weight: 600; color: var(--texto); cursor: pointer; }
/* no toque (e ate 720 px) todo alvo da tela tem 44 x 44 px: revogar, o sanduiche e o paginador da tabela, os itens do menu, o campo do
   filtro por coluna e o interruptor de revogados */
@media (max-width: 720px), (pointer: coarse) {
  .tk-pagina .btn-icone, .tk-pagina .pag-btn, .tk-pagina .btn-filtro.ta-menu-btn { width: 44px; height: 44px; }
  .tk-pagina .ta-menu-item { min-height: 44px; }
  .tk-pagina .th-filtro-campo { min-height: 44px; }
  .tk-pagina .tk-sw, .tk-pagina .tk-sw-texto { min-height: 44px; }
  .tk-pagina .tk-sw-texto { display: inline-flex; align-items: center; }
}
.tk-erro { margin: 10px 0 0; font-size: 13px; font-weight: 600; color: var(--danger-texto); }
.modal-caixa [hidden] { display: none !important; }

/* ---------- Fase 12: pedidos do titular e incidentes (templates/admin/titular.html e incidentes.html). So tokens. ---------- */
/* coluna flex como a .conteudo (Padrao_Estado_Vazio): o .vz{flex:1} herda a altura que sobrou da janela e o bloco centra em Y */
.ti-pagina { display: flex; flex-direction: column; gap: var(--sp-4); flex: 1 1 auto; }
.ti-vencido td:first-child { box-shadow: inset 3px 0 0 var(--vermelho-escuro); }
.badge.badge-prazo-vencido { background: var(--vermelho-suave); color: var(--vermelho-escuro); }
.badge.badge-prazo-urgente { background: var(--ambar-suave); color: var(--ambar-escuro); }
.badge.badge-prazo-ok { background: var(--verde-suave); color: var(--verde-escuro); }
.ti-erro { color: var(--vermelho-escuro); font-size: 12.5px; font-weight: 600; }
.ti-texto { white-space: normal; min-width: 150px; max-width: 250px; }
.ti-area { height: auto; min-height: 96px; padding: 10px 12px; resize: vertical; font-family: inherit; line-height: 1.45; }
.ti-rotulo { font-size: 13px; font-weight: 600; color: var(--texto-secundario); }
.ti-categorias { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px var(--sp-4); }
@media (max-width: 720px) { .ti-categorias { grid-template-columns: minmax(0, 1fr); } }
/* as duas tabelas: 10 px de cada lado da celula (com 14 px a de incidentes passava do cartao a 1440 px); texto longo corta ou quebra
   dentro da propria celula. A coluna Acoes fica colada na borda direita quando o cartao rola: o botao nunca some atras da rolagem */
#tiTab th, #tiTab td, #incTab th, #incTab td { padding-left: 10px; padding-right: 10px; }
#tiTab td[data-col="conta"] { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
#tiTab td[data-col="tratado"] { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
#incTab td.ti-texto { min-width: 130px; max-width: 220px; }
#incTab td[data-col="soubemos"], #incTab td[data-col="qtd"], #incTab td[data-col="prazo"] { white-space: nowrap; }
#tiTab th.col-acoes, #tiTab td.col-acoes, #incTab th.col-acoes, #incTab td.col-acoes,
#tiTab.ti-com-acoes .th-filtro th:last-child, #incTab.ti-com-acoes .th-filtro th:last-child {
  position: sticky; right: 0; z-index: 1; background: var(--branco); box-shadow: -1px 0 0 var(--borda);
}
#tiTab tbody tr:hover td.col-acoes, #incTab tbody tr:hover td.col-acoes { background: var(--fundo); }
/* tamanhos do <dialog class="popup-centrado"> pelo Padrao_Modal (vw, nunca px): .popup-sm = pequeno (1 a 3 campos), .popup-md = medio
   (formulario). Notebook (ate 1280 px) o medio vai a 68vw e no celular (ate 880 px) os dois ocupam 96vw. */
dialog.popup-centrado.popup-sm { width: 34vw; max-width: none; min-width: min(92vw, 420px); }
dialog.popup-centrado.popup-md { width: 55vw; max-width: none; }
@media (max-width: 1280px) { dialog.popup-centrado.popup-md { width: 68vw; } }
@media (max-width: 880px) { dialog.popup-centrado.popup-sm, dialog.popup-centrado.popup-md { width: 96vw; min-width: 0; } }
/* formulario comprido (o de incidente, 11 campos): o proprio dialog rola em QUALQUER altura de janela, com o cabecalho e o rodape colados (o .popup-alto so
   faz isso abaixo de 820 px de altura, e o formulario passa disso: o rodape ficava fora da tela). Com a lista do SelectBusca aberta, ela aumenta a area rolavel. */
dialog.popup-centrado.popup-rola { max-height: calc(100dvh - 2 * var(--sp-3)); overflow-y: auto !important; }
dialog.popup-centrado.popup-rola .popup-cab { position: sticky; top: 0; z-index: 2; background: var(--branco); }
dialog.popup-centrado.popup-rola .popup-rodape { position: sticky; bottom: 0; z-index: 2; background: var(--branco); }
/* no toque (e ate 720 px) todo alvo da tela tem 44 x 44 px: o campo do filtro por coluna e os itens do menu da tabela */
@media (max-width: 720px), (pointer: coarse) {
  .ti-pagina .ta-menu-item { min-height: 44px; }
  .ti-pagina .th-filtro-campo { min-height: 44px; }
}

/* ---------- Fase 13 (parte B): os videos do Panda (templates/adm/panda.html e _panda_linhas.html, static/js/panda.js). So tokens. ---------- */
/* coluna flex como a .conteudo (Padrao_Estado_Vazio): o .vz{flex:1} herda a altura que sobrou da janela e o bloco centra em Y */
.pn-pagina { display: flex; flex-direction: column; gap: var(--sp-4); flex: 1 1 auto; }
.pn-pagina .fu-bar { margin-bottom: 0; }
/* a faixa de acoes e fixa no rodape: a pagina reserva a altura REAL dela (o panda.js mede a faixa e poe --pn-barra-h; 124 px sem JS, as duas linhas do celular)
   mais uma folga, entao o paginador e a ultima linha nunca ficam embaixo dela em largura nenhuma */
.pn-pagina.pn-com-barra { padding-bottom: calc(var(--pn-barra-h, 124px) + var(--sp-3)); }
.pn-tentar { margin-top: var(--sp-4); }
/* 5 colunas: 10 px de cada lado da celula; o titulo quebra dentro da propria celula (nunca empurra a tabela pra fora do cartao) */
#pnTab th, #pnTab td { padding-left: 10px; padding-right: 10px; }
#pnTab th.pn-col-sel, #pnTab td.pn-col-sel { width: 44px; padding-left: 4px; padding-right: 4px; text-align: center; }
#pnTab td.pn-titulo { white-space: normal; min-width: 180px; max-width: 460px; overflow-wrap: anywhere; }
#pnTab td.pn-num { white-space: nowrap; font-variant-numeric: tabular-nums; }
#pnTab td.pn-situacao { white-space: normal; min-width: 130px; }
#pnTab td.pn-legenda { white-space: normal; min-width: 110px; }
/* o filtro Legenda (Toggle tipo 1): as cinco opcoes quebram em linhas em vez de estourar a barra; no toque o alvo tem 44 px */
.pn-leg-filtro.fu-presets { display: flex; flex-wrap: wrap; height: auto; }
.pn-leg-filtro.fu-presets button { flex: 1 1 auto; height: auto; min-height: 34px; padding: 6px 10px; }
@media (max-width: 720px), (pointer: coarse) { .pn-leg-filtro.fu-presets button { min-height: 44px; } }
/* Fase 18: o quadro Legendas das aulas (templates/adm/_panda_legendas.html, static/js/panda_legendas.js) */
.pn-leg { display: flex; flex-direction: column; gap: var(--sp-3); padding: 14px 16px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--branco); }
.pn-leg-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); }
.pn-leg-titulo { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 600; }
.pn-leg-titulo i { font-size: 18px; }
.pn-leg-corpo { display: flex; flex-direction: column; gap: var(--sp-2); }
.pn-leg-numeros { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin: 0; padding: 0; list-style: none; }
.pn-leg-numeros li { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.pn-leg-numeros strong { font-size: 16px; font-variant-numeric: tabular-nums; }
.pn-leg-frase { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; line-height: 1.45; color: var(--texto-secundario); overflow-wrap: anywhere; }
.pn-leg-erros { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--vermelho-escuro); overflow-wrap: anywhere; }
.pn-leg-giro { flex: 0 0 auto; font-size: 18px; animation: spinner-rotate 1.4s linear infinite; }
@media (prefers-reduced-motion: reduce) { .pn-leg-giro { animation: none; } }
@media (max-width: 720px) { #pnLegBuscar { min-height: 44px; } }
.pn-uso { display: block; margin-top: 3px; font-size: 12px; line-height: 1.35; max-width: 280px; overflow-wrap: anywhere; }
#pnTab tr.pn-fora td.pn-titulo { color: var(--texto-secundario); }
/* a caixa de marcar e o rotulo que a envolve: o alvo de clique e o rotulo (32 px; 44 px no toque) */
.pn-caixa { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; cursor: pointer; }
.pn-sel-off { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; opacity: .35; cursor: not-allowed; }
.pn-sel-off .tsel { cursor: not-allowed; }
/* a faixa de acoes em lote: escura (modo temporario do sistema), sobe do rodape, so existe com algo marcado */
.pn-barra {
  position: fixed; left: var(--sidebar-width); right: 0; bottom: 0; z-index: 90;
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-5); background: var(--kpi-cinza-b); color: var(--sobre-imagem); font-size: 13.5px;
  box-shadow: var(--sombra-faixa-rodape); animation: pnSobe .18s ease;
}
.pn-barra-qtd { margin-right: auto; font-weight: 600; }
.pn-barra .btn { min-height: 36px; }
@keyframes pnSobe { from { transform: translateY(100%); } to { transform: translateY(0); } }
@media (max-width: 880px) { .pn-barra { left: 0; padding: var(--sp-3) var(--sp-4); } }
/* previa do lote no modal: lista rolavel, uma linha por video, o motivo de quem fica de fora embaixo do titulo */
.pn-previa { list-style: none; margin: 0; padding: 0; max-height: 44vh; overflow-y: auto; border: 1px solid var(--borda); border-radius: var(--raio-sm); }
.pn-previa-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px var(--sp-3); align-items: center; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--borda); font-size: 13.5px; }
.pn-previa-item:last-child { border-bottom: 0; }
.pn-previa-titulo { min-width: 0; overflow-wrap: anywhere; }
.pn-previa-dur { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 12.5px; }
.pn-previa-motivo { grid-column: 1 / -1; font-size: 12.5px; overflow-wrap: anywhere; }
.pn-previa-criar .pn-previa-titulo { color: var(--texto); }
.pn-previa-pular .pn-previa-titulo { color: var(--texto-secundario); }
.pn-ordem { --fu-h: 40px; }      /* a mesma altura do campo de texto do modal */
.pn-resumo { overflow-wrap: anywhere; }      /* nome de modulo ou de curso sem espaco quebra dentro do modal, nunca o estoura */
/* o campo de curso e o de modulo mostram o nome escolhido numa linha so, com reticencias, e a lista quebra a palavra comprida: nome longo nunca estoura o modal */
#modalAulas .selectbusca .sb-display { min-width: 0; }
#modalAulas .selectbusca .sb-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#modalAulas .selectbusca .sb-opt { overflow-wrap: anywhere; }
/* no toque (e ate 720 px) todo alvo da tela tem 44 x 44 px: as caixas de marcar, o sanduiche e o paginador da tabela, os itens do menu, o campo do
   filtro por coluna, o interruptor, os botoes da faixa e do modal */
@media (max-width: 720px), (pointer: coarse) {
  .pn-pagina .pn-caixa, .pn-pagina .pn-sel-off { min-width: 44px; min-height: 44px; }
  #pnTab th.pn-col-sel, #pnTab td.pn-col-sel { width: 52px; }
  .pn-pagina .pag-btn, .pn-pagina .btn-filtro.ta-menu-btn { width: 44px; height: 44px; }
  .pn-pagina .ta-menu-item { min-height: 44px; }
  .pn-pagina .th-filtro-campo { min-height: 44px; }
  .pn-pagina .tk-sw, .pn-pagina .tk-sw-texto { min-height: 44px; }
  .pn-pagina .tk-sw-texto { display: inline-flex; align-items: center; }
  .pn-barra .btn, #modalAulas .btn, #modalAulas .modal-x, #modalAulas .fu-dois button { min-height: 44px; }
  #modalAulas .modal-x { min-width: 44px; }
}

/* ---------- Fase 13, correcao de UI (corr_ui): alvos de 44 px e o historico das importacoes. So tokens; depois do bloco da Marca de IA, entao nada de --accent nem --cor-primaria aqui. ---------- */
/* toque (ate 720 px): o campo de texto de TODO modal do admin tem 44 px de altura (Responsividade_Sempre; o .input e de 40 px). Checkbox, radio e arquivo ficam de fora */
@media (max-width: 720px) {
  .modal-caixa input.input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  dialog.popup-centrado input.input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) { height: 44px; min-height: 44px; }
}
/* O interruptor das barras de filtro (.tk-sw: Mostrar so orfaos, Mostrar revogados) no toque: o label (a pista) ganha a caixa de 46 x 44 px, que e o alvo de clique, e a pista
   desenhada de 42 x 24 px passa pro ::before, entao nada muda no que se ve (a bolinha acompanha: 12 px do topo, 4 px da esquerda) */
@media (max-width: 720px), (pointer: coarse) {
  .tk-sw .cv-sw { width: 46px; height: 44px; }
  .tk-sw .cv-sw label { background: transparent; border-radius: 0; }      /* sem o canto redondo do label: a caixa inteira de 46 x 44 px recebe o clique */
  .tk-sw .cv-sw label::before { content: ""; position: absolute; inset: 10px 2px; background: var(--borda); border-radius: var(--raio-full); transition: .15s; }
  .tk-sw .cv-sw label::after { top: 12px; left: 4px; }
  .tk-sw .cv-sw input:checked + label { background: transparent; }
  .tk-sw .cv-sw input:checked + label::before { background: var(--verde); }
}
/* historico das importacoes (a tabela das telas Importar Alunos e Importar Aulas): 10 px de cada lado da celula; arquivo e quem cortam com reticencias dentro da celula; a
   coluna Acoes fica colada na borda direita quando o cartao rola (o botao nunca some atras da rolagem), como nas outras tabelas */
#hiTab th, #hiTab td { padding-left: 10px; padding-right: 10px; }
#hiTab td[data-col="arquivo"] { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
#hiTab td[data-col="quem"] { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
#hiTab th.col-acoes, #hiTab td.col-acoes { position: sticky; right: 0; z-index: 1; background: var(--branco); box-shadow: -1px 0 0 var(--borda); }
#hiTab tbody tr:hover td.col-acoes { background: var(--fundo); }
.hi-erros { margin: 0; padding-left: 22px; font-size: 13px; line-height: 1.45; color: var(--texto); }
.hi-erros li { overflow-wrap: anywhere; }
.hi-erros li + li { margin-top: 6px; }
@media (max-width: 720px), (pointer: coarse) { #hiWrap .th-filtro-campo { min-height: 44px; } }

/* ---------- Fase 14 (OAuth do MCP): a tela "Autorizar <aplicativo>" (templates/oauth) e a lista de conexoes (/dev/mcp/conexoes). So tokens. ---------- */
.oauth-card .login-titulo { overflow-wrap: anywhere; }
.oauth-nome-aviso { margin-top: -8px; font-size: 12px; }
.oauth-dados {
  margin: 0; padding: var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3);
  border: 1px solid var(--border); border-radius: var(--raio); background: var(--bg-elev);
}
.oauth-linha { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.oauth-linha dt { font-size: var(--fs-xs); color: var(--text-dim); }
.oauth-linha dd { margin: 0; font-size: 14px; color: var(--text); overflow-wrap: anywhere; }
.oauth-host { font-size: 16px; font-weight: 800; }
.oauth-email { display: block; font-size: 13px; font-weight: 400; color: var(--text-dim); overflow-wrap: anywhere; }
.oauth-alerta { border-color: var(--ambar); background: var(--ambar-suave); }
.oauth-alerta .login-destaque-titulo i { color: var(--ambar-escuro); }
.oauth-acoes { display: flex; gap: var(--sp-3); }
.oauth-acoes .btn { flex: 1 1 0; width: auto; min-width: 0; }
@media (max-width: 360px) { .oauth-acoes { flex-direction: column-reverse; } .oauth-acoes .btn { flex: none; width: 100%; } }
/* os links do rodape das telas de acesso (privacidade e o e-mail do titular) no toque: alvo de 44 px (Responsividade_Sempre) */
@media (max-width: 720px) { .login-rodape a { display: inline-flex; align-items: center; min-height: 44px; } }
/* a lista de conexoes (admin, tema claro): o endereco que o dono cola no claude.ai e no ChatGPT, e o host de volta em destaque */
.cn-endereco { margin-top: 12px; }
.tk-intro > .btn { margin-top: 12px; }
@media (max-width: 720px), (pointer: coarse) { .cn-endereco .input { height: 44px; min-height: 44px; } }
.cn-host { font-family: Consolas, monospace; font-size: 12.5px; }
.cn-app { font-weight: 700; overflow-wrap: anywhere; }
/* O nome do aplicativo e do host de volta chegam de fora (ate 100 caracteres): cortam com reticencias dentro da celula e a coluna Acoes fica colada na borda
   direita quando o cartao rola (o botao Encerrar nunca sai do alcance), como no #hiTab e no #tabTokens (correcao da Fase 14) */
#tabConexoes td[data-col="aplicativo"] { max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
#tabConexoes td[data-col="retorno"] { max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
#tabConexoes td[data-col="pessoa"] { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
#tabConexoes th.col-acoes, #tabConexoes td.col-acoes { position: sticky; right: 0; z-index: 1; background: var(--branco); box-shadow: -1px 0 0 var(--borda); }
#tabConexoes tbody tr:hover td.col-acoes { background: var(--fundo); }

/* ======================================================================
   Fase 17, f17_telas_a (início): seis telas antigas do admin no padrão da base (liberação em massa, auditoria de acessos, alocação de turmas,
   matriz de permissões, segurança e os modais de usuários). Nada de style= nos templates: cada inline virou classe, só com token. Onde o inline
   vencia uma regra de especificidade maior (.ra-bar, .te-tab), a classe leva a classe do componente junto para vencer do mesmo jeito.
   ====================================================================== */

/* ajudantes das telas: o campo que cresce na linha, a nota miúda e a tabela sem a moldura (ela mora dentro de um quadro que já tem a borda) */
.campo-cresce { flex: 1; }
.nota-tela { margin: 0; font-size: 12.5px; color: var(--texto-suave); }
.te-tab.te-tab-sem-moldura { border: none; box-shadow: none; }

/* ---------- liberação em massa ---------- */
.lib-form { display: flex; flex-direction: column; gap: 14px; }
.campo.lib-campo-curso { max-width: 420px; }
.lib-scroll { max-height: 320px; overflow-y: auto; border: 1px solid var(--borda); border-radius: var(--raio-sm); }
/* a linha de ação (Acao_Primaria_a_Direita, o mesmo desenho das telas de importar): a nota antes do botão; o botão encosta na direita e não quebra o rótulo; até 720 px ele ocupa a linha, com a nota em cima */
.lib-acao { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; justify-content: flex-end; }
.lib-acao .nota-tela { flex: 1 1 280px; margin-right: auto; }
.lib-acao .btn { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 720px) { .lib-acao .btn { flex: 1 1 100%; justify-content: center; } }
.lib-marcar-todas { margin-left: 10px; }
.te-tab thead th.lib-col-sel { width: 40px; }

/* ---------- auditoria de acessos ---------- */
.aud-erro { margin: 0; font-size: 13px; color: var(--vermelho-escuro); }
.aud-aluno { margin: 0; font-size: 13px; }
.te-tab tbody td.aud-cursos { font-size: 12.5px; }
.te-tab tbody td.aud-vazio { text-align: center; color: var(--texto-fraco); }
.te-tab tbody td.aud-celula { text-align: center; }
.te-tab thead th.aud-th-turma { writing-mode: vertical-rl; transform: rotate(180deg); max-height: 160px; font-size: 10.5px; }
.aud-curso-nome { font-size: 12.5px; }

/* ---------- alocação de turmas ---------- */
.ra-bar.aloc-form { margin-bottom: 8px; align-items: flex-start; }   /* as pilulas das turmas crescem pra baixo; os rotulos ficam na mesma linha */
.ra-bar .selectbusca.aloc-sb-alvo { min-width: 190px; }
.ra-bar .input.aloc-caminho { min-width: 200px; }
.te-tab tbody td.aloc-regra { font-size: 13px; }
.aloc-caminho-txt { font-family: Consolas, monospace; }
.aloc-vazio { margin: 0; font-size: 13px; color: var(--texto-fraco); }

/* ---------- matriz de permissões ---------- */
.mp-aviso { margin: 0; font-size: 13px; color: var(--texto-suave); }
.te-tab thead th.mp-col-perm { width: 90px; }
.mp-icone { margin-right: 6px; color: var(--texto-fraco); }
.mp-rodape { display: flex; justify-content: flex-end; gap: var(--sp-3); }
/* ---------- a caixa de marcar da casa nas tabelas (Padrao_Selecao_em_Lote): a área de clique é um label do tamanho da caixa (20 px), de modo que a linha não
   cresce; no toque (até 720 px) a área vai a 44 x 44 px e a coluna perde o padding, para o alvo ter o tamanho que a Responsividade_Sempre pede ---------- */
.tsel-alvo { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; cursor: pointer; }
.te-tab th.col-sel { padding-top: 10px; padding-bottom: 10px; }
@media (max-width: 720px), (pointer: coarse) {
  .tsel-alvo { width: 44px; height: 44px; }
  .te-tab th.col-sel, .te-tab td.col-sel { padding: 0; }
}

/* ---------- liberação em massa: o título do grupo de turmas (o que era um label que embrulhava os botões) e a contagem viva ---------- */
.lib-turmas-cab { font-size: 13px; font-weight: 600; color: var(--texto-secundario); }
.lib-contagem { margin-left: 10px; font-size: 12.5px; font-weight: 400; color: var(--texto-suave); }
/* ---------- matriz de permissões: a barra global (CV-073), o cabeçalho de coluna com a caixa de três estados e a caixa travada esmaecida ---------- */
.cd.mp-global { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3); }
.mp-global-nome { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-secundario); }
.mp-global-acoes { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.mp-col-cab { display: inline-flex; align-items: center; gap: var(--sp-2); vertical-align: middle; }
.col-sel .tsel:disabled { opacity: .45; }
/* ---------- segurança: a confirmação do bloqueio com a caixa da casa (.tsel), o alvo de 44 px no toque ---------- */
.seg-confirma-check .tsel { margin-top: 1px; }
@media (max-width: 720px), (pointer: coarse) { .seg-confirma-check { min-height: 44px; align-items: center; } }
/* a linha de ações do grupo quebra (a 360 px ela passava 134 px da borda e a página rolava de lado); o espaço entre colunas segue de 16 px, entre linhas 8 px */
.matriz-grupo .mg-auto { flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
/* Fase 17, f17_telas_a (fim) */
/* Fase 17, f17_jornada (início): alvo de toque de 44 px (Responsividade_Sempre, CV-194) nos ícones de ação das tabelas antigas do admin e nos botões de período, até 720 px; acima disso nada muda */
@media (max-width: 720px) {
  .btn-icone { min-width: 44px; min-height: 44px; }
  [data-periodo] .fu-presets button { min-height: 44px; }
  /* o cabeçalho do módulo (título e as três ações): com 44 px por ícone a linha de ações já não cabe a 360 px e quebrava em coluna ao lado do título; ela não encolhe, o título é que cede */
  .pc-modulo > .cd-header .cd-acoes { flex-shrink: 0; }
}
/* Fase 17, f17_jornada (fim) */

/* ---------- Central de vendas com IA (Fase 18, dono 08/10; docs/CENTRAL_VENDAS.md) ----------
   A regra escrita em portugues em /int/alocacao (#regraPt, o .bloco-ia de sempre) e os eventos da plataforma com IA em /int/plataformas. */
.rpt-texto { width: 100%; min-height: 76px; resize: vertical; }
/* o produto que o Criar regra trouxe (dono, 08/10): as etiquetas reconhecidas acima da caixa da regra */
.rpt-origem { display: flex; flex-direction: column; gap: var(--sp-2); margin: 0 0 var(--sp-3); padding: 10px 12px; background: var(--branco);
  border: 1px solid var(--roxo-borda); border-radius: var(--raio-sm); }
.rpt-origem[hidden] { display: none; }
.rpt-origem-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13px; color: var(--texto); }
.rpt-origem-topo > i { color: var(--roxo-icone); }
.rpt-origem-rot, .rpt-origem-meta { color: var(--texto-suave); }
.rpt-origem-fechar { margin-left: auto; }
.rpt-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.rpt-tag { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 10px; font-size: 12px; color: var(--texto);
  background: var(--roxo-suave); border-radius: var(--raio-full); overflow-wrap: anywhere; }
.rpt-tag-rot { font-size: 11px; font-weight: 600; color: var(--roxo-texto); }
.rpt-tag-interno { background: var(--fundo); color: var(--texto-suave); }
.rpt-tag-interno .rpt-tag-rot { color: var(--texto-suave); }
.bloco-ia p.rpt-dica { margin: 0; font-size: 12px; color: var(--texto-suave); }
.rpt-regra {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-3) 0; border-top: 1px solid var(--roxo-borda); color: var(--texto);
}
.rpt-regra strong { flex: 1 1 320px; min-width: 0; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.rpt-acoes { padding-top: var(--sp-3); border-top: 1px solid var(--roxo-borda); }
.rpt-teste-area:empty { display: none; }
.rpt-teste-area { display: flex; flex-direction: column; gap: var(--sp-2); }
.bloco-ia p.rpt-teste-cab { color: var(--texto); }
.rpt-teste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; max-height: 320px; overflow-y: auto; }
.rpt-teste li {
  display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); align-items: baseline;
  padding: var(--sp-2) 0; border-top: 1px solid var(--border); font-size: 13px; color: var(--texto); overflow-wrap: anywhere;
}
.rpt-teste li span { color: var(--texto-suave); }
.rpt-teste li .rpt-turma { color: var(--texto); font-weight: 600; }
/* o quadro das vendas esperando regra, acima da regra em portugues */
.sr-quadro .nota-tela { margin: 0 0 var(--sp-3); }
.sr-liberar { display: flex; justify-content: flex-end; margin-top: var(--sp-3); }
.sr-criar { white-space: nowrap; }
.sr-acoes { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--sp-2); }
.sr-acoes .sr-descartar { flex: 0 0 auto; }
.sr-produto { min-width: 0; overflow-wrap: anywhere; }
.sr-produto strong { display: block; }
.sr-sub { display: block; margin-top: var(--sp-1); font-size: 12px; color: var(--texto-suave); }
/* ate 720 px o Criar regra fica so com o icone (44 px) e o nome do produto ganha a largura; o rotulo segue pro leitor de tela */
@media (max-width: 720px) {
  .sr-criar { width: 44px; min-width: 44px; height: 44px; padding: 0; justify-content: center; }
  .sr-criar .sr-criar-rot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sr-quadro th, .sr-quadro td { padding-left: var(--sp-2); padding-right: var(--sp-2); }
}
.sr-meta[hidden] { display: none; }
/* o quadro Modelo da IA em /int/plataformas: as opcoes em cartoes (o toggle tipo 1), o nome em cima e a nota embaixo */
.iam-form { display: flex; flex-direction: column; gap: var(--sp-3); }
.iam-opcoes.fu-presets { display: flex; height: auto; flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-1); }
.iam-opcoes button {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-1); height: auto; min-height: 64px;
  padding: var(--sp-3); text-align: left; white-space: normal; flex: 1 1 220px; font-size: 13px;
}
.iam-nome { font-weight: 700; display: inline-flex; align-items: center; gap: var(--sp-2); }
.iam-nota { font-size: 12px; font-weight: 400; color: var(--texto-suave); }
.iam-acoes { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.iam-acoes .nota-suave { margin: 0; flex: 1 1 320px; }
.iam-outro { max-width: 520px; }
/* a tela de plataformas em abas (dono, 08/10): as abas do Padrao_Tabs (.ial-tabs) e um painel por vez; 44 px de toque no celular */
.pl-abas { min-width: 0; }
.pl-pane { display: none; min-width: 0; padding-top: var(--sp-4); }
.pl-pane.ativo { display: block; }
@media (max-width: 720px), (pointer: coarse) { .pl-abas .ial-tab { min-height: 44px; } }
@media (max-width: 720px) { .pl-abas .ial-tabs { gap: 2px; flex-wrap: nowrap; } .pl-abas .ial-tab { padding: 0 8px; gap: 4px; white-space: nowrap; } }
@media (max-width: 720px), (pointer: coarse) { .iam-outro .input, .iam-form .campo-principal .input { min-height: 44px; font-size: 16px; } }
.aloc-desc { display: block; margin-top: var(--sp-1); font-size: 12px; color: var(--texto-suave); overflow-wrap: anywhere; }
.plat-card > .plat-eventos { flex: 0 0 auto; }   /* o .plat-turmas cresce 260 px na fileira do ajuste; aqui ele mora na coluna do cartao */
.plat-eventos form { display: flex; flex-direction: column; gap: var(--sp-2); align-items: flex-start; margin-top: var(--sp-2); }
.plat-eventos .tabela-scroll { width: 100%; }
.plat-eventos select.input { min-width: 220px; }

/* ---------- Fase 18 (dono, 08/10): o POPUP tem SEMPRE os 4 cantos arredondados e a lista do SelectBusca fica POR CIMA DE TUDO ----------
   O popup que rola (.popup-rola, .popup-secao, .popup-alto e a janela baixa) e o proprio <dialog>: a barra padrao do navegador (o trilho cinza e as
   setas) desenhava os cantos da direita quadrados. No popup a barra e a fina da casa (a da .rolagem-fina), com o trilho transparente: o raio aparece. */
dialog.popup-centrado::-webkit-scrollbar { width: 8px; height: 8px; }
dialog.popup-centrado::-webkit-scrollbar-track, dialog.popup-centrado::-webkit-scrollbar-corner { background: transparent; }
dialog.popup-centrado::-webkit-scrollbar-thumb {
  background: var(--rolagem-polegar); border-radius: var(--raio-full); border: 2px solid transparent; background-clip: padding-box;
}
dialog.popup-centrado::-webkit-scrollbar-thumb:hover { background-color: var(--rolagem-polegar-hover); }
dialog.popup-centrado::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
@supports not selector(::-webkit-scrollbar) {
  dialog.popup-centrado { scrollbar-width: thin; scrollbar-color: var(--rolagem-polegar) transparent; }
}
/* A lista do SelectBusca num popup que CORTA (o que rola): o selectbusca.js a abre como popover (o top layer, acima do proprio popup), presa ao campo
   pela medida da hora; no popup que nao corta ela segue ancorada nele (.sb-in-dialog). */
.selectbusca .sb-panel.sb-topo { position: fixed; inset: auto; margin: 0; padding: 0; color: var(--texto); }
/* o evento SEM TIPO da plataforma com IA (dono, 08/10): o nome e o seletor em vermelho e negrito, e a contagem do titulo tambem */
.plat-eventos tr.ev-sem-tipo .plat-campo, .plat-eventos tr.ev-sem-tipo select.input { color: var(--vermelho-escuro); font-weight: 700; }
.plat-eventos tr.ev-sem-tipo select.input { border-color: var(--vermelho-escuro); }
.plat-eventos tr.ev-sem-tipo select.input option { color: var(--texto); font-weight: 400; }
.ev-sem-tipo-n { color: var(--vermelho-escuro); font-weight: 700; }
/* os eventos da plataforma (dono, 08/10): todas as caixas do tipo com a MESMA largura (a coluna inteira) e mais ar em cada linha */
.plat-eventos .te-tab { width: 100%; }
.plat-eventos .te-tab th:first-child, .plat-eventos .te-tab td:first-child { width: 30%; }
.plat-eventos .te-tab tbody td { padding-top: 14px; padding-bottom: 14px; }
.plat-eventos select.input { width: 100%; }

/* ---------- Fase 27: EVENTOS DE FORA (/dev/engajamento, prefixo eg-). Os interruptores com o texto ao lado, um cartao por fonte na mesma
   altura (Padrao_Box_Card), o endereco do webhook com o Copiar e as contagens em lista de definicao (nao e KPI: numeros de conferencia). */
.eg-pagina { display: flex; flex-direction: column; gap: 14px; }
.eg-intro p, .eg-bloco p { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--texto-secundario); }
.eg-intro .btn, .eg-bloco > .btn { margin-top: 12px; align-self: flex-start; }
.eg-secao { margin: 8px 0 0; font-size: 15px; font-weight: 600; color: var(--texto); }
.eg-interruptor { display: flex; align-items: center; gap: var(--sp-2); min-height: 38px; margin-top: 12px; }
.eg-interruptor-texto { font-size: 13.5px; font-weight: 600; color: var(--texto); cursor: pointer; }
.eg-interruptor > span.eg-interruptor-texto { cursor: default; }
.eg-nota { font-size: 12.5px; line-height: 1.5; color: var(--texto-secundario); overflow-wrap: anywhere; }
.eg-fontes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 14px; align-items: stretch; }
.eg-fonte { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.eg-fonte .cd-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.eg-mono { font-family: Consolas, monospace; font-size: 12.5px; }
.eg-tipos { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
.eg-numeros { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px 14px; margin: 6px 0 0; }
.eg-numeros div { min-width: 0; }
.eg-numeros dt { font-size: 11.5px; color: var(--texto-secundario); }
.eg-numeros dd { margin: 2px 0 0; font-size: 14px; font-weight: 600; color: var(--texto); font-variant-numeric: tabular-nums; }
.eg-por-tipo td:not(:first-child), .eg-por-tipo th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }   /* Fase 103: a ultima rodada por tipo */
@media (max-width: 720px), (pointer: coarse) {
  .eg-interruptor { min-height: 44px; }
  .eg-interruptor-texto { min-height: 44px; display: inline-flex; align-items: center; }
  .eg-pagina .btn { min-height: 44px; }
}
/* o Resolver da conferencia com o ERP (Fase 27B): o que o ERP disse, em destaque no topo do modal */
.ic-resolver-motivo { margin: 0 0 var(--sp-3); padding: 10px 12px; border-radius: var(--raio-sm); background: var(--ambar-suave); color: var(--ambar-escuro); }
/* a coluna Acoes das comissoes fica presa na direita quando a tabela rola de lado (o Resolver nunca some atras da rolagem; Fase 27B) */
#icTab th.col-acoes, #icTab td.col-acoes { position: sticky; right: 0; z-index: 1; background: var(--branco); box-shadow: -1px 0 0 var(--borda); }
#icTab tbody tr:hover td.col-acoes { background: var(--fundo); }
.eg-alerta { margin-top: 10px; padding: 10px 12px; border-radius: var(--raio-sm); background: var(--ambar-suave); color: var(--ambar-escuro); }

/* Fase 31: o MARKETPLACE Especialistas (prefixo mk-): a pagina publica e a area de quem contrata (layout proprio, tema claro, sem vitrine),
   as sub-abas do aluno (ep-abas) e os cartoes do mural e das propostas. O botao Conectar e o principal; a situacao em pilula (badge). */
.mk { background: var(--bg); color: var(--text); margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
.mk-cab {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--border); background: var(--bg-elev);
}
.mk-marca { display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0; color: var(--text); text-decoration: none; font-weight: 700; }
.mk-logo { width: 32px; height: 32px; border-radius: var(--raio-full); object-fit: cover; flex: none; }
.mk-marca-sub { font-weight: 400; color: var(--texto-suave); }
.mk-cab-acoes { display: flex; align-items: center; gap: var(--sp-2); }
.mk-main { flex: 1 0 auto; width: 100%; max-width: 1040px; margin: 0 auto; padding: var(--sp-5) var(--sp-4); box-sizing: border-box; }
.mk-rodape { padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--border); font-size: 13px; color: var(--texto-suave); text-align: center; }
.mk-rodape p { margin: 0 auto var(--sp-2); max-width: 760px; line-height: 1.5; }
.mk-rodape a { color: var(--accent-texto); }
.mk-hero { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-5) 0; }
.mk-h1 { margin: 0; font-size: clamp(26px, 4vw, 40px); line-height: 1.2; max-width: 820px; overflow-wrap: anywhere; }
.mk-sub { margin: 0; font-size: 17px; line-height: 1.6; color: var(--texto-suave); max-width: 720px; }
.mk-cta { min-height: 48px; font-size: 16px; }
.mk-gratis { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 14px; color: var(--texto-suave); }
.mk-bloco { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4) 0; }
.mk-h2 { margin: 0; font-size: 20px; }
.mk-passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-3); }
.mk-passo {
  display: flex; flex-direction: column; gap: 6px; padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--raio);
  background: var(--bg-elev); font-size: 14px; line-height: 1.55; color: var(--texto-suave);
}
.mk-passo i { font-size: 28px; color: var(--accent-texto); }
.mk-passo strong { font-size: 16px; color: var(--text); }
.mk-comps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--sp-2); }
.mk-comp {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--raio-sm);
  background: var(--bg-elev); font-size: 13px; color: var(--texto-suave);
}
.mk-comp strong { font-size: 15px; color: var(--text); }
.mk-nota { margin: 0; font-size: 13px; color: var(--texto-fraco); }
.mk-pagina { display: flex; flex-direction: column; gap: var(--sp-4); }
.mk-estreita { max-width: 640px; }
.mk-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.mk-h1-pagina { margin: 0; font-size: 24px; line-height: 1.3; overflow-wrap: anywhere; }
.mk-lista, .mk-propostas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.mk-item {
  display: flex; flex-direction: column; gap: 6px; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); border-radius: var(--raio);
  background: var(--bg-elev); color: var(--text); text-decoration: none; min-width: 0;
}
a.mk-item:hover, a.mk-item:focus-visible { border-color: var(--accent-borda); }
.mk-item-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mk-item-data { font-size: 12.5px; color: var(--texto-fraco); margin-left: auto; }
.mk-item-titulo { font-size: 16px; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
a.mk-item-titulo { text-decoration: none; }
.mk-item-sub { font-size: 13px; color: var(--texto-suave); overflow-wrap: anywhere; }
.badge.mk-sit { white-space: nowrap; }
.badge.mk-sit-aberta { background: var(--verde-suave); color: var(--verde-escuro); }
.badge.mk-sit-em_conversa, .badge.mk-sit-escolhida { background: var(--accent-soft); color: var(--accent-texto); }
.badge.mk-sit-fechada, .badge.mk-sit-cancelada, .badge.mk-sit-vencida, .badge.mk-sit-nao_escolhida {
  background: var(--fundo); color: var(--texto-suave); box-shadow: inset 0 0 0 1px var(--borda);
}
.badge.mk-sit-enviada { background: var(--ambar-suave); color: var(--ambar-escuro); }
.badge.mk-sit-oculta { background: var(--vermelho-suave); color: var(--vermelho-escuro); }
.mk-form { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 760px; }
.mk-descricao { min-height: 160px; }
.mk-campo-grupo { border: 0; margin: 0; padding: 0; }
.mk-linha2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-3); }
.mk-acoes { display: flex; justify-content: flex-end; gap: var(--sp-2); flex-wrap: wrap; }
.mk-acoes-linha { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; }
.mk-demanda {
  display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--raio);
  background: var(--bg-elev);
}
.mk-descricao-txt { margin: 0; font-size: 15px; line-height: 1.65; white-space: pre-line; overflow-wrap: anywhere; }
.mk-meta { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13.5px; color: var(--texto-suave); }
.mk-meta li { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.mk-meta a { color: var(--accent-texto); min-height: 44px; display: inline-flex; align-items: center; }
.mk-contato {
  display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-radius: var(--raio);
  background: var(--accent-soft); border: 1px solid var(--accent-borda);
}
.mk-contato p { margin: 0; font-size: 14px; line-height: 1.55; }
.mk-proposta {
  display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--raio);
  background: var(--bg-elev);
}
.mk-escolhida { border-color: var(--accent-borda); }
.mk-perfil { display: flex; flex-direction: column; gap: var(--sp-2); }
/* a bolinha das iniciais na proposta: o _base_mk nao carrega o layout.css (onde mora o .avatar da area logada), entao a regra vem aqui */
.mk .avatar { border-radius: var(--raio-full); background: linear-gradient(135deg, var(--cor-primaria), var(--cor-primaria-escura)); color: var(--texto-sobre-accent); display: grid; place-items: center; font-weight: 700; }
.mk-bio { font-size: 14px; }
.mk-proposta-txt { display: flex; flex-direction: column; gap: var(--sp-2); }
.mk-conectar { align-self: flex-start; }
.mk-cartao-titulo { white-space: normal; overflow-wrap: anywhere; }
.mk-cartao-desc {
  font-size: 13.5px; line-height: 1.5; color: var(--texto-suave); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; overflow-wrap: anywhere;
}
.ep-abas { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.ep-aba {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: var(--raio-full); border: 1px solid var(--borda);
  color: var(--texto-suave); text-decoration: none; font-size: 14px;
}
.ep-aba.on { background: var(--accent-soft); color: var(--accent-texto); border-color: var(--accent-borda); font-weight: 600; }
@media (max-width: 720px) {
  .mk-cab { padding: var(--sp-2) var(--sp-4); }
  .mk-main { padding: var(--sp-4) var(--sp-4); }
  .mk-linha2 { grid-template-columns: minmax(0, 1fr); }
  .ep-aba { min-height: 44px; }
  .mk-marca-sub { display: none; }
}
/* Fase 31: com a terceira aba (Demandas) a fileira de /adm/especialistas nao cabe a 360 px; o rotulo encurta pra Cursos ate 720 px */
@media (max-width: 720px) { .ea-longo { display: none; } }
/* Fase 31: o Continuar com o Google de quem contrata e um POST com CSRF; o formulario nao muda a caixa do botao */
.mk-google-form { display: contents; }

/* o modal de entrada do marketplace Especialistas (dono, 12/10; static/js/mk_entrar.js): o padrao dos popups do aluno (o tema ios-dark): o fundo
   esmaecido e desfocado, a caixa de VIDRO (o reflexo claro em cima, o cinza transparente, o desfoque e a luz fina na borda) e o brilho na borda
   que segue o mouse (a receita do neo.css: o degrade radial no ponteiro recortado so na borda, --mx, --my e --brilho do mk_entrar.js) */
dialog.mk-modal {
  width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; overflow: auto; color: var(--text);
  border-radius: var(--raio-lg); border: 1px solid var(--mk-vidro-borda);
  background: var(--mk-vidro-reflexo), var(--mk-vidro-caixa);
  -webkit-backdrop-filter: blur(36px) saturate(200%); backdrop-filter: blur(36px) saturate(200%);
  box-shadow: var(--mk-vidro-sombra);
}
dialog.mk-modal::backdrop { background: var(--mk-vidro-fundo); -webkit-backdrop-filter: blur(10px) saturate(120%); backdrop-filter: blur(10px) saturate(120%); }
dialog.mk-modal[open] { animation: mkModalEntra .22s cubic-bezier(.16, 1, .3, 1); }
@keyframes mkModalEntra { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
dialog.mk-modal::before {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--mk-brilho);
  -webkit-mask: var(--mascara-cheia) content-box, var(--mascara-cheia); -webkit-mask-composite: xor;
  mask: var(--mascara-cheia) content-box, var(--mascara-cheia); mask-composite: exclude;
  opacity: var(--brilho, 0); transition: opacity .25s cubic-bezier(.16, 1, .3, 1);
}
.mk-modal-card { max-width: none; background: transparent; border: 0; box-shadow: none; }
.mk-modal-x { position: absolute; top: var(--sp-3); right: var(--sp-3); z-index: 3; }
/* Faca login e Criar acesso (dono, 12/10): o painel escondido pelo mk_entrar.js; o botao que troca de painel tem cara de link */
.mk-painel { display: flex; flex-direction: column; gap: var(--sp-3); }
.mk-painel[hidden] { display: none; }
.mk-troca-linha { margin: 0; }
.mk-troca { background: none; border: 0; padding: 0; font: inherit; color: var(--accent-texto, var(--accent)); text-decoration: underline; cursor: pointer; }
.mk-troca:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--raio-2xs); }
/* o alvo de toque de 44 px no celular, sem mudar a cara de link */
@media (max-width: 720px), (pointer: coarse) { .mk-troca { min-height: 44px; min-width: 44px; padding: 0 var(--sp-1); } }
.mk-acesso-erro { color: var(--danger-texto); border: 1px solid var(--danger); border-radius: var(--raio-sm); padding: var(--sp-2) var(--sp-3); font-size: 14px; }
.mk-acesso-erro p { margin: 0; }
.mk-completar { display: flex; justify-content: center; }
.mk-completar-card { width: 100%; }
@media (prefers-reduced-motion: reduce) { dialog.mk-modal[open] { animation: none; } dialog.mk-modal::before { transition: none; } }

/* Fase 33: a pagina do evento da Agenda (templates/adm/evento.html): os campos num fieldset sem moldura e o quadro Areas, uma linha por
   Area com o switch que grava na hora */
.ev-campos { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.ev-areas { margin-top: var(--sp-4); }
.ev-areas-titulo { font-size: 16px; display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-2); }
.ev-areas-off { opacity: .8; }
.ev-areas-lista { list-style: none; margin: var(--sp-3) 0 0; padding: 0; border: 1px solid var(--borda); border-radius: var(--raio-sm); }
.ev-area { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); min-height: 48px; }
.ev-area + .ev-area { border-top: 1px solid var(--borda); }
.ev-area-nome { min-width: 0; overflow-wrap: anywhere; }

/* Fase 34: os POSICIONAMENTOS da propaganda (templates/equipe/anuncio.html): um cartao por local com a miniatura de onde a peca fica, desenhada
   so com caixas (sem imagem): .an-mini-a e .an-mini-b sao as colunas da tela e .an-mini-ad e a propaganda, na cor da marca */
.an-pos { border: 0; margin: 0; padding: 0; min-width: 0; }
.an-pos-titulo { font-weight: 600; font-size: 14px; padding: 0; margin-bottom: var(--sp-1); }
.an-pos-grade { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-3); }
.an-pos-card { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); border: 1px solid var(--borda); border-radius: var(--raio-sm); min-width: 0; }
.an-pos-onde { font-size: 12.5px; color: var(--texto-suave); }
.an-mini { position: relative; display: block; height: 72px; border-radius: var(--raio-xs); background: var(--fundo); border: 1px solid var(--borda); overflow: hidden; }
.an-mini-a, .an-mini-b, .an-mini-ad { position: absolute; border-radius: 3px; }
.an-mini-a, .an-mini-b { background: var(--borda); }
.an-mini-ad { background: var(--accent); }
.an-mini-comunidade .an-mini-a { left: 6%; top: 10%; width: 18%; height: 80%; }
.an-mini-comunidade .an-mini-b { left: 28%; top: 10%; width: 46%; height: 80%; }
.an-mini-comunidade .an-mini-ad { left: 78%; top: 52%; width: 16%; height: 38%; }
.an-mini-agenda .an-mini-a { left: 6%; top: 10%; width: 40%; height: 80%; }
.an-mini-agenda .an-mini-b { left: 52%; top: 10%; width: 42%; height: 44%; }
.an-mini-agenda .an-mini-ad { left: 52%; top: 60%; width: 42%; height: 30%; }
/* Minhas Duvidas (dono, 15/10): a lista na esquerda, a previa na direita e a propaganda deitada embaixo dela */
.an-mini-duvidas .an-mini-a { left: 6%; top: 10%; width: 34%; height: 80%; }
.an-mini-duvidas .an-mini-b { left: 44%; top: 10%; width: 50%; height: 50%; }
.an-mini-duvidas .an-mini-ad { left: 44%; top: 66%; width: 50%; height: 24%; }

/* Fase 35: a AGENDA do aluno (templates/vitrine/agenda.html). O calendario do mes estilo iOS (hoje no circulo da cor da marca, o ponto no
   dia com evento, o dia de fora do mes esmaecido), a lista dos proximos e a propaganda. De 1280 px pra cima: calendario | lista, com a
   propaganda embaixo da lista, no canto de baixo a direita; abaixo, uma coluna */
.ag-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.ag-cal { min-width: 0; }
.ag-cal-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin: 0 0 var(--sp-3); }
.ag-cal-titulo { font-size: 17px; display: flex; align-items: center; gap: var(--sp-2); margin: 0; min-width: 0; }
.ag-cal-nav { display: flex; align-items: center; gap: var(--sp-1); flex-shrink: 0; }
.ag-cal-seta.desabilitado { opacity: .35; }
@media (max-width: 720px) { .ag-cal-seta, .ag-cal-hoje { min-width: 44px; min-height: 44px; justify-content: center; } }
/* o sino mora fixo no canto de cima a direita (.sino-fixo): no computador a grade desce pra o primeiro cartao nao encostar nele */
@media (min-width: 881px) { .ag-grade { margin-top: var(--sp-5); } }
.ag-mes { width: 100%; border-collapse: collapse; table-layout: fixed; text-align: center; }
.ag-mes th { padding: 0 0 var(--sp-2); font-size: 11px; font-weight: 700; color: var(--texto-fraco); }
.ag-mes th abbr { text-decoration: none; }
.ag-mes td { padding: 3px 0; color: var(--texto-secundario); }
.ag-dia { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;
  font-size: 15px; color: inherit; text-decoration: none; }
a.ag-dia:hover, a.ag-dia:focus-visible { background: var(--cor-primaria-suave); }
.ag-mes td.fora .ag-dia { opacity: .4; }
.ag-mes td.tem-evento .ag-dia { font-weight: 700; color: var(--texto); }
.ag-mes td.tem-evento .ag-dia::after { content: ""; position: absolute; bottom: 4px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px;
  border-radius: 50%; background: var(--accent); }
.ag-mes td.hoje .ag-dia { background: var(--accent); color: var(--texto-sobre-accent); font-weight: 700; }
.ag-mes td.hoje.tem-evento .ag-dia::after { background: var(--texto-sobre-accent); }
.ag-lista { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.ag-lista .agenda-card { scroll-margin-top: 80px; }
.ag-anuncio { width: 100%; max-width: 360px; min-width: 0; }
.ag-anuncio .com-anuncio { display: flex; flex-direction: column; }
@media (max-width: 400px) { .ag-dia { width: 34px; height: 34px; font-size: 14px; } }
@media (min-width: 1280px) {
  /* a propaganda embaixo do calendario (dono, 14/10: no buraco da coluna da esquerda); a lista ocupa a coluna da direita inteira */
  .ag-grade { grid-template-columns: minmax(320px, 400px) minmax(0, 1fr); grid-template-rows: auto 1fr;
    grid-template-areas: "cal lista" "anuncio lista"; }
  .ag-cal { grid-area: cal; }
  .ag-lista { grid-area: lista; }
  .ag-anuncio { grid-area: anuncio; max-width: none; }
  /* a imagem termina na linha de baixo do menu lateral (static/js/agenda.js mede o que sobra; dono, 14/10) */
  .ag-anuncio .com-anuncio-img { max-height: var(--ag-anuncio-img-max, none); }
}
@media (min-width: 881px) {
  /* o cartao do evento no computador (dono, 20/10: "poderia ser maior, com mais evidencia na capa"): a capa 3:2 grande e o texto maior */
  .ag-lista .agenda-card { gap: 0; min-height: 240px; }
  .ag-lista .agenda-card .ag-capa { width: clamp(280px, 42%, 480px); aspect-ratio: 3 / 2; height: auto; flex-shrink: 0; align-self: stretch; }
  .ag-lista .agenda-card .ag-corpo { padding: var(--sp-5) var(--sp-6); justify-content: center; }
  .ag-lista .ag-data { font-size: 15px; margin-bottom: var(--sp-2); }
  .ag-lista .ag-titulo { font-size: 24px; line-height: 1.25; margin-bottom: var(--sp-2); }
  .ag-lista .ag-desc { font-size: 15px; }
  .ag-lista .ag-participar { margin-top: var(--sp-4); }
}
@media (min-width: 1280px) {
  /* QUATRO cartoes de evento na altura da lista, que vai ate a linha de baixo do menu (dono, 20/10: "4 linhas de altura, e com isso da de
     aumentar a capa"); rola por dentro, com o fim em degrade enquanto ha mais (static/js/agenda.js poe --ag-card-h, --ag-lista-max e .ag-lista-mais) */
  .ag-lista { max-height: var(--ag-lista-max, none); overflow-y: auto; overscroll-behavior: contain; }
  .ag-lista .agenda-card { flex-shrink: 0; height: var(--ag-card-h, auto); min-height: 0; }
  .ag-lista .agenda-card .ag-capa { width: min(calc(var(--ag-card-h, 220px) * 1.5), 45%); aspect-ratio: auto; height: 100%; }
  .ag-lista .agenda-card .ag-corpo { padding: var(--sp-4) var(--sp-6); min-width: 0; }
  .ag-lista .ag-titulo { font-size: 22px; }
  .ag-lista .ag-desc { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .ag-lista.ag-lista-mais { -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 160px), transparent);
    mask-image: linear-gradient(to bottom, black calc(100% - 160px), transparent); }
}

/* ======================================================================
   Fases 37 e 39 (tarefa-f0e25365): o PORTAL DA EMPRESA (/dedoduro, prefixo po-) e a administracao das empresas (/adm/empresas, prefixo ep-).
   Tema claro do admin; cor so por token; nenhum style= nos templates. O grafico e SVG do servidor: a cor das barras e da grade vem daqui.
   ====================================================================== */
.po-corpo .po-sidebar .sidebar-nav { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; }
/* o topo do portal nunca estoura: os seletores encolhem (o nome do passaporte corta com reticencias) e ate 720 px o passaporte unico some */
@media (max-width: 720px) {
}
.po-aviso-leitura { margin: 0 0 var(--sp-3); padding: 10px 14px; border-radius: var(--raio-sm); background: var(--fundo); border: 1px dashed var(--borda);
  font-size: 13px; color: var(--texto-secundario); display: flex; gap: 8px; align-items: center; }
.po-h2 { margin: 0; font-family: var(--font-titulo); font-size: 16px; font-weight: 700; color: var(--texto); display: flex; align-items: center; gap: 8px; }
.po-h2 .ph { color: var(--accent-texto); }
.po-h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--texto); }
.po-fraco { margin: 0; font-size: 13px; color: var(--texto-suave); line-height: 1.45; }
.po-mini { font-size: 12px; }
.po-num { text-align: right; font-variant-numeric: tabular-nums; }
.po-link { color: var(--accent-texto); font-weight: 600; text-decoration: none; }
.po-link:hover, .po-link:focus-visible { text-decoration: underline; }
.te-tab td > .po-link { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.po-duas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-4); }
@media (max-width: 960px) { .po-duas { grid-template-columns: minmax(0, 1fr); } }

/* o periodo e os filtros de situacao: o toggle tipo 1 da casa, que quebra em linhas no celular */
.po-conta { margin-left: 4px; font-variant-numeric: tabular-nums; color: var(--texto-fraco); font-weight: 700; }
.fu-presets button.on .po-conta { color: var(--accent-texto); }
@media (max-width: 720px), (pointer: coarse) {
}

/* (1) o contrato */
.po-vagas { display: flex; flex-direction: column; gap: 6px; }
.po-vagas-num { font-size: 14px; color: var(--texto-secundario); }
.po-vagas-num strong { font-size: 22px; color: var(--texto); font-variant-numeric: tabular-nums; }
.po-prazo { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.po-barra { appearance: none; -webkit-appearance: none; width: 100%; height: 10px; border: 0; border-radius: var(--raio-full); background: var(--fundo);
  overflow: hidden; }
.po-barra::-webkit-progress-bar { background: var(--fundo); border-radius: var(--raio-full); }
.po-barra::-webkit-progress-value { background: var(--cor-primaria); border-radius: var(--raio-full); }
.po-barra::-moz-progress-bar { background: var(--cor-primaria); border-radius: var(--raio-full); }
.po-barra-fina { height: 6px; }
.po-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--raio-full); font-size: 12.5px; font-weight: 700; }
.po-chip-verde { background: var(--verde-suave); color: var(--verde-escuro); }
.po-chip-ambar { background: var(--ambar-suave); color: var(--ambar-escuro); }
.po-chip-vermelho { background: var(--vermelho-suave); color: var(--vermelho-escuro); }

/* (3) os indicadores: 5 cartoes (Padrao_KPI_Dashboard: 3 colunas ate 1300 px, 2 no celular) */
.po-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1300px) { .po-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .po-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* (2) o que precisa de atencao */

/* a evolucao: dois mini-graficos SVG (Leitura_Correta_do_Grafico: titulo a esquerda, grade fina, rotulo reto) */
@media (max-width: 960px) { .po-graficos { grid-template-columns: minmax(0, 1fr); } }
.po-grafico-vazio { padding: 40px 0; text-align: center; }
.po-svg { width: 100%; height: auto; display: block; }
.po-grade { stroke: var(--borda); stroke-width: 1; }
.po-eixo, .po-rotulo-x { fill: var(--texto-secundario); font-size: 15px; font-family: inherit; }

/* (4) os destaques */
.po-top { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.po-top a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--raio-sm); text-decoration: none; color: var(--texto);
  min-height: 40px; }
.po-top a:hover, .po-top a:focus-visible { background: var(--fundo); }
.po-top-pos { width: 26px; height: 26px; border-radius: 50%; background: var(--cor-primaria-suave); color: var(--accent-texto); font-weight: 800; font-size: 13px;
  display: inline-grid; place-items: center; flex: 0 0 auto; }
.po-top-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.po-top-val { font-variant-numeric: tabular-nums; color: var(--texto-secundario); font-size: 13px; }
.po-cursos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.po-cursos li { display: flex; flex-direction: column; gap: 5px; }
.po-curso-linha { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.po-curso-nome { font-weight: 600; font-size: 13.5px; color: var(--texto); min-width: 0; overflow-wrap: anywhere; }

/* quando a equipe estuda: a magnitude por saturacao de UMA cor so (Leitura_Correta_do_Grafico 8) */
.po-mapa { border-collapse: separate; border-spacing: 4px; width: 100%; max-width: 560px; table-layout: fixed; }
.po-mapa th { font-size: 11.5px; font-weight: 700; color: var(--texto-secundario); text-align: center; padding: 2px; }
.po-mapa th[scope="row"] { text-align: left; width: 48px; }
.po-mapa td { height: 34px; border-radius: var(--raio-xs); text-align: center; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--texto); }
.po-niv-0 { background: var(--fundo); }
.po-niv-1 { background: color-mix(in srgb, var(--cor-primaria) 18%, var(--branco)); }
.po-niv-2 { background: color-mix(in srgb, var(--cor-primaria) 40%, var(--branco)); }
.po-niv-3 { background: color-mix(in srgb, var(--cor-primaria) 68%, var(--branco)); }
.po-niv-4 { background: var(--cor-primaria); color: var(--texto-sobre-accent); font-weight: 700; }

/* a situacao das pessoas (o rotulo sempre escrito; a cor reforca) */
.po-sit { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: var(--raio-full); font-size: 12px; font-weight: 700; white-space: nowrap;
  background: var(--fundo); color: var(--texto-secundario); }
.po-sit-ativa, .po-mb-ativo { background: var(--verde-suave); color: var(--verde-escuro); }
.po-sit-esfriando, .po-mb-pendente { background: var(--ambar-suave); color: var(--ambar-escuro); }
.po-sit-parada, .po-sit-nunca, .po-mb-recusado { background: var(--vermelho-suave); color: var(--vermelho-escuro); }

/* a pagina da pessoa */
.po-voltar { color: var(--texto-secundario); text-decoration: none; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; }
.po-voltar:hover, .po-voltar:focus-visible { background: var(--fundo); }
.po-pessoa-cab { flex-direction: row; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.po-avatar { width: 48px; height: 48px; font-size: 18px; flex: 0 0 auto; }
.po-pessoa-id { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 2px; }
.po-pessoa-sit { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
@media (max-width: 720px) { .po-pessoa-sit { align-items: flex-start; } }
.po-calendario { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 2px; }
.po-cal-semana { display: flex; flex-direction: column; gap: 4px; }
.po-cal-dia { display: inline-block; width: 16px; height: 16px; border-radius: 4px; background: var(--fundo); border: 1px solid var(--borda); }
.po-cal-dia.on { background: var(--cor-primaria); border-color: var(--cor-primaria); }
.po-cal-dia.futuro { visibility: hidden; }
.po-cal-legenda { display: flex; align-items: center; gap: 6px; }
.po-certs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.po-certs li { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--borda); }
.po-certs li:last-child { border-bottom: 0; }
.po-cert-curso { font-weight: 600; flex: 1; min-width: 180px; }
.po-codigo { font-size: 12px; background: var(--fundo); padding: 2px 6px; border-radius: var(--raio-xs); }
.po-exportacoes { margin-top: var(--sp-3); }

/* acessos */
.po-aviso { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--sp-3); padding: 10px 14px; border-radius: var(--raio-sm); font-size: 13.5px;
  background: var(--ambar-suave); color: var(--ambar-escuro); }
.po-aviso-vermelho { background: var(--vermelho-suave); color: var(--vermelho-escuro); }
.po-emails { min-height: 120px; font-family: var(--font-mono, ui-monospace, monospace); font-size: 13px; }
.po-incluir-acoes { display: flex; justify-content: flex-end; gap: var(--sp-2); flex-wrap: wrap; }
.po-previa { border: 1px solid var(--borda); border-radius: var(--raio-sm); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px;
  max-height: 320px; overflow: auto; }
.po-previa-resumo { margin: 0; font-weight: 700; font-size: 13.5px; }
.po-previa-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.po-previa-item { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 4px 0; border-bottom: 1px solid var(--borda); }
.po-previa-email { overflow-wrap: anywhere; }
.po-previa-res { font-weight: 600; color: var(--texto-secundario); }
.po-res-entra .po-previa-res { color: var(--verde-escuro); }
.po-res-aprovacao .po-previa-res { color: var(--ambar-escuro); }
.po-res-recusado .po-previa-res, .po-res-sem_vaga .po-previa-res, .po-res-invalido .po-previa-res { color: var(--vermelho-escuro); }
.po-erro { margin: 0; color: var(--danger-texto); font-size: 13px; font-weight: 600; }

/* contrato */
.po-passaportes { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-3); }
.po-passaporte.po-vencido { opacity: .8; }
.po-pass-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.po-dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: 13px; }
.po-dl dt { color: var(--texto-secundario); font-weight: 600; }
.po-dl dd { margin: 0; color: var(--texto); overflow-wrap: anywhere; }
.po-pass-notas { display: flex; gap: 8px; flex-wrap: wrap; }
.po-pass-ir { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }

/* o aviso do Meu Cadastro do aluno (Fase 39, LGPD): a empresa que paga o acesso e o portal de quem e gestor */
.mc-empresa { margin-bottom: var(--sp-3); gap: 10px; }
.mc-empresa-linha { margin: 0; display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; font-size: 13.5px; line-height: 1.5; }
.mc-empresa-linha > .ph { font-size: 20px; color: var(--accent-texto); flex: 0 0 auto; margin-top: 1px; }
.mc-empresa-linha > span { flex: 1; min-width: 200px; }

/* a conta de gestor sem empresa */
.po-sozinho { min-height: 100vh; display: grid; place-items: center; background: var(--fundo); }
.po-sem-empresa { width: 100%; max-width: 520px; padding: var(--sp-4); }

/* a administracao das empresas (ep-) */
.ep-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ep-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 4px 4px 10px; border-radius: var(--raio-full); background: var(--fundo);
  border: 1px solid var(--borda); font-size: 13px; }
.ep-chip form { display: inline; }
.ep-linha { display: flex; gap: var(--sp-2); align-items: flex-end; flex-wrap: wrap; }
.ep-linha .campo { flex: 1; min-width: 200px; margin: 0; }
.ep-gestores { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ep-gestores li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid var(--borda); }
.ep-gestores li:last-child { border-bottom: 0; }
.ep-gestor-nome { font-weight: 600; flex: 1; min-width: 160px; }
.ep-grade2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.ep-grade3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
@media (max-width: 720px) { .ep-grade2, .ep-grade3 { grid-template-columns: minmax(0, 1fr); } }
.ep-acoes { display: flex; justify-content: flex-end; gap: var(--sp-2); flex-wrap: wrap; }
/* os passaportes da empresa (dono, 16/10: o cartao estreito e o formulario solto ficavam feios): uma linha por passaporte, o nome, os
   tres dados e as acoes lado a lado; o Editar e o Novo passaporte abrem o modal */
.ep-pass-lista { display: flex; flex-direction: column; gap: var(--sp-3); }
.ep-pass { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(0, 3fr) auto; gap: var(--sp-3) var(--sp-4); align-items: center; }
.ep-pass-id { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.ep-pass-id .po-h3 { overflow-wrap: anywhere; }
.ep-pass-dados { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); margin: 0; }
.ep-pass-dados dt { font-size: 12px; font-weight: 600; color: var(--texto-secundario); margin: 0 0 4px; }
.ep-pass-dados dd { margin: 0; font-size: 14px; color: var(--texto); }
.ep-vagas-barra { display: block; width: 100%; max-width: 220px; height: 6px; margin-top: 6px; border: 0; border-radius: var(--raio-full);
  overflow: hidden; background: var(--borda); appearance: none; }
.ep-vagas-barra::-webkit-progress-bar { background: var(--borda); border-radius: var(--raio-full); }
.ep-vagas-barra::-webkit-progress-value { background: var(--accent); border-radius: var(--raio-full); }
.ep-vagas-barra::-moz-progress-bar { background: var(--accent); border-radius: var(--raio-full); }
.ep-pass-acoes { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.ep-pass .ep-aviso-turma { grid-column: 1 / -1; }
@media (max-width: 1100px) { .ep-pass { grid-template-columns: minmax(0, 1fr); } .ep-pass-acoes { justify-content: flex-start; } }
@media (max-width: 560px) { .ep-pass-dados { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px), (pointer: coarse) { .ep-pass-acoes .btn { min-height: 44px; } }
/* o formulario do passaporte no modal: o nome em duas colunas, as notas numa linha cada com o PDF compacto */
.ep-span2 { grid-column: span 2; }
@media (max-width: 720px) { .ep-span2 { grid-column: auto; } }
.ep-sub { margin: var(--sp-4) 0 var(--sp-2); font-size: 13px; font-weight: 700; color: var(--texto); }
.ep-nota { align-items: end; margin-bottom: var(--sp-2); }
.ep-nota .campo { margin: 0; }
.im-drop.ep-nota-arq { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 12px; min-height: 44px; }
.im-drop.ep-nota-arq i { font-size: 20px; display: inline; margin: 0; }
.im-drop.ep-nota-arq small { margin: 0; display: inline; }
.ep-form-pas .ep-acoes { margin-top: var(--sp-3); }
/* as turmas do passaporte em pilulas (a linha inteira da grade) e o Incluir pessoas (16/10): o toggle dos tres jeitos, a busca dos alunos e
   as escolhas */
.ep-span3 { grid-column: 1 / -1; }
.ep-rotulo { font-size: 13px; font-weight: 600; color: var(--texto-secundario); }   /* o rotulo do toggle Com data | Vitalicio do passaporte (Fase 87): mesmo desenho do .campo label */
/* o aviso do passaporte sem turma na aba Pessoas; os tres jeitos do Incluir pessoas */
.ep-aviso-aba { margin-bottom: var(--sp-3); }
.ep-incluir { display: flex; flex-direction: column; gap: var(--sp-3); }
.ep-modos { align-self: flex-start; }
.ep-modo[hidden] { display: none; }
.ep-aviso-turma { font-size: 12.5px; color: var(--ambar-escuro); background: var(--ambar-suave); border-radius: var(--raio-xs); padding: 6px 10px; margin: 0; }
.ep-barra { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding: 10px 14px;
  margin-top: var(--sp-3); background: var(--texto); color: var(--branco); border-radius: var(--raio); box-shadow: var(--sombra-lg); }
.ep-barra[hidden] { display: none; }
.ep-barra-txt { font-weight: 700; flex: 1; min-width: 140px; }
.ep-tag-generico { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: var(--raio-full); font-size: 11px; font-weight: 700;
  background: var(--ambar-suave); color: var(--ambar-escuro); }
.ep-pendentes { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--raio-full);
  background: var(--vermelho); color: var(--branco); font-size: 11px; font-weight: 800; margin-left: 4px; }

/* os ganchos que faltavam regra: o Editar do passaporte abre com alvo de toque; a grade de horarios nao estica alem do que precisa; o
   botao Imprimir some na propria impressao; o filtro de situacao das Pessoas quebra em linhas */
.ep-editar > summary { cursor: pointer; display: flex; align-items: center; min-height: 36px; }
@media (max-width: 720px), (pointer: coarse) { .ep-editar > summary { min-height: 44px; } }
.ep-editar[open] > summary { margin-bottom: var(--sp-2); }
.po-imprimir { white-space: nowrap; }
@media print { .po-corpo .po-imprimir { display: none !important; } }

/* a pagina da empresa no admin: as 4 abas quebram em linhas no celular (a regua do .pl-abas as deixava numa linha so); emp-, porque o ep-abas e das abas dos Especialistas */
@media (max-width: 720px) { .emp-abas .ial-tabs { flex-wrap: wrap; } }

/* impressao: a Visao geral e a pagina da pessoa saem limpas (sem menu, sem botoes, sem a lista de numeros escondida) */
@media print {
  .po-corpo .sidebar, .po-corpo .overlay-mob, .po-corpo .btn-menu,
  .po-corpo .po-aviso-leitura, .po-corpo .flashes, .po-corpo .po-voltar { display: none !important; }
  .po-corpo .app-shell { display: block; }
  .po-corpo .conteudo { margin: 0; padding: 0; }
  .po-corpo .cd, .po-corpo .mg-kpi { box-shadow: none; break-inside: avoid; }
}

/* ======================================================================
   Fase 42 (16/10): o PORTAL DA EMPRESA versao 2 (00_GENESIS/PLANO_PORTAL_V2.md). Executivo e calmo: o tema claro do admin, UMA cor de dado
   (a da marca) mais os cinzas; verde e vermelho so na seta pequena da tendencia e nos chips de situacao; nenhum fundo colorido de cartao.
   Coluna central de no maximo 1200 px; cartoes da mesma linha com a mesma altura; espacos em multiplos de 8.
   ====================================================================== */
.po-pagina { width: 100%; max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--sp-5); flex: 1; }
.po-pagina > .vz { flex: 1; }
.po-pagina > * { margin-top: 0; margin-bottom: 0; }
.po-corta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* a barra de filtros, igual em toda tela: rotulos curtos em cima, a acao na direita */
.po-filtros { margin: 0; align-items: flex-end; }
.po-filtros .g { min-width: 0; }
.po-filtros .po-g-periodo { min-width: 0; max-width: 100%; }
.po-periodo-txt { margin-left: 6px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--texto-suave); font-size: 11.5px; }
.po-seletor { min-width: 0; }
.po-seletor .selectbusca { min-width: 200px; max-width: 320px; }
.po-seletor .sb-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; min-width: 0; }
@media (max-width: 720px) { .po-seletor .selectbusca { min-width: 0; max-width: 100%; } }
.po-situacoes { max-width: none; }
.po-pas-unico { align-items: center; gap: 6px; font-weight: 600; min-width: 0; overflow: hidden; white-space: nowrap; }
.po-filtros .po-pas-unico { height: var(--fu-h); padding: 0 12px; border: 1px solid var(--borda); border-radius: var(--raio-xs); background: var(--branco);
  color: var(--texto); font-size: 13px; max-width: 320px; display: inline-flex; }
.po-pas-unico .ph { color: var(--texto-suave); flex: 0 0 auto; }
.po-rola { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.po-rola::-webkit-scrollbar { display: none; }
.po-filtros .po-acao { margin-left: auto; }
.po-filtros .po-acao:empty { display: none; }
@media (max-width: 720px) {
  .po-filtros { gap: var(--sp-3); }
  .po-filtros .g { flex: 1 1 100%; }
  .po-filtros .po-acao { flex: 0 0 auto; margin-left: 0; }
  .po-filtros .po-pas-unico { max-width: 100%; width: 100%; display: inline-flex; }
}
@media (max-width: 720px), (pointer: coarse) {
  .po-filtros .po-periodos, .po-pagina > .po-rola .fu-presets { height: auto; }
  .po-filtros .po-periodos button, .po-pagina > .po-rola .fu-presets button { height: 44px; min-height: 44px; flex: 0 0 auto; }
}

/* (1) o contrato: quem e | o anel das vagas | o prazo */
.po-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--sp-5); align-items: center; padding: var(--sp-5); }
.po-hero > * + * { border-left: 1px solid var(--borda); padding-left: var(--sp-5); }
.po-sobre { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); }
.po-hero-id { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.po-hero-nome { margin: 0; font-family: var(--font-titulo); font-size: 22px; font-weight: 700; color: var(--texto); line-height: 1.2; overflow-wrap: anywhere; }
.po-hero .po-vagas { display: flex; flex-direction: row; align-items: center; gap: var(--sp-4); min-width: 0; }
.po-anel { width: 96px; height: 96px; flex: 0 0 auto; }
.po-anel circle { fill: none; stroke-width: 10; }
.po-anel-fundo { stroke: var(--bg-elev); }
.po-anel-ativo { stroke: var(--accent); }
.po-anel-pend { stroke: color-mix(in srgb, var(--accent) 38%, var(--branco)); }
.po-anel-num { font-size: 20px; font-weight: 800; fill: var(--texto); font-family: inherit; }
.po-vagas-txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.po-hero .po-vagas-num { margin: 0; font-size: 14px; color: var(--texto-secundario); }
.po-hero .po-vagas-num strong { font-size: 22px; font-variant-numeric: tabular-nums; color: var(--texto); }
.po-legenda { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--texto-secundario); }
.po-legenda li { display: flex; align-items: center; gap: 8px; }
.po-ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--bg-elev); border: 1px solid var(--borda); flex: 0 0 auto; }
.po-ponto-ativo { background: var(--accent); border-color: var(--accent); }
.po-ponto-pend { background: color-mix(in srgb, var(--accent) 38%, var(--branco)); border-color: transparent; }
.po-hero .po-prazo { display: flex; flex-direction: column; gap: 8px; align-items: stretch; min-width: 0; }
.po-prazo-num { margin: 0; font-size: 24px; font-weight: 800; color: var(--texto); font-variant-numeric: tabular-nums; line-height: 1.1; }
.po-prazo-num span { font-size: 14px; font-weight: 600; color: var(--texto-secundario); }
.po-renovar { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.po-selo-ambar { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--raio-full); background: var(--ambar-suave);
  color: var(--ambar-escuro); font-size: 12.5px; font-weight: 700; }
@media (max-width: 1024px) {
  .po-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .po-hero-id { grid-column: 1 / -1; }
  .po-hero > .po-vagas { border-left: 0; padding-left: 0; }
}
@media (max-width: 640px) {
  .po-hero { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); padding: var(--sp-4); }
  .po-hero > * + * { border-left: 0; padding-left: 0; border-top: 1px solid var(--borda); padding-top: var(--sp-4); }
}

/* (2) os 4 indicadores: brancos e iguais, numero grande, a seta pequena da tendencia */
.po-kpis.mg-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); margin: 0; }
@media (max-width: 1100px) { .po-kpis.mg-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.po-kpis .mg-kpi { padding: var(--sp-4); align-items: flex-start; }
.po-kpis .mg-kpi::before { display: none; }
.po-kpis .mg-kpi .ico { background: var(--accent-soft); color: var(--accent-texto); width: 40px; height: 40px; font-size: 20px; }
.po-kpis .mg-kpi .lbl { min-height: 0; }
.po-kpis .mg-kpi .val { font-size: 26px; margin-top: 6px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.po-kpis .mg-kpi .disc { font-style: normal; margin-top: 4px; }
@media (max-width: 480px) {
  .po-kpis .mg-kpi { flex-direction: column; gap: 8px; padding: var(--sp-3); }
  .po-kpis .mg-kpi .ico { width: 32px; height: 32px; font-size: 17px; }
  .po-kpis .mg-kpi .val { font-size: 22px; }
}
.po-tend { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 700; letter-spacing: 0; color: var(--texto-suave); }
.po-tend-sobe { color: var(--verde-escuro); }
.po-tend-desce { color: var(--vermelho-escuro); }

/* os blocos (cartoes de secao): o titulo igual em todo lugar; duas colunas com a mesma altura */
.po-pagina .po-duas { margin: 0; gap: var(--sp-3); align-items: stretch; }
.po-bloco { gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); min-width: 0; }
.po-bloco .po-h2 { font-size: 15px; }
.po-bloco-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.po-bloco-tit { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
@media (max-width: 640px) { .po-bloco { padding: var(--sp-4); } }

/* quem precisa de voce: linhas compactas, o numero em destaque, o Ver na direita */
.po-acoes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.po-acoes li + li { border-top: 1px solid var(--borda); }
.po-acao-linha { display: flex; align-items: center; gap: 12px; padding: 10px 6px; min-height: 48px; color: var(--texto); text-decoration: none;
  border-radius: var(--raio-sm); }
.po-acao-linha:hover, .po-acao-linha:focus-visible { background: var(--fundo); }
.po-acao-ico { font-size: 20px; color: var(--texto-suave); flex: 0 0 auto; }
.po-acao-num { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; min-width: 2.2ch; text-align: right; }
.po-acao-txt { flex: 1; min-width: 0; font-size: 14px; color: var(--texto-secundario); }
.po-acao-ir { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 600; color: var(--accent-texto); flex: 0 0 auto; }
.po-tudo-ok { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--texto-secundario); }
.po-tudo-ok .ph { font-size: 20px; color: var(--verde-escuro); }

/* destaques: nome, horas e a barra relativa ao primeiro */
.po-bloco .po-top { gap: 2px; }
.po-bloco .po-top a { align-items: center; padding: 8px 6px; min-height: 48px; }
.po-top-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.po-top-linha { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.po-bloco .po-top-pos { background: var(--fundo); color: var(--texto-secundario); }
.po-top-corpo .po-barra-fina { height: 4px; }

/* a evolucao: um grafico largo; o toggle tipo 2 troca a serie; a frase diz a tendencia */
.po-frase { margin: 0; font-size: 13px; color: var(--texto-suave); }
.po-frase-sobe, .po-frase-desce { color: var(--texto-secundario); font-weight: 600; }
.po-frase-sobe .ph { color: var(--verde-escuro); }
.po-frase-desce .ph { color: var(--vermelho-escuro); }
.po-evolucao .po-grafico { margin: 0; display: flex; flex-direction: column; gap: 6px; overflow-x: auto; }
.po-evolucao .po-grafico-tit { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.po-evolucao .po-svg { min-width: 560px; }
.po-bar { fill: var(--accent); }
.po-bar-atual { fill: color-mix(in srgb, var(--accent) 40%, var(--branco)); }
.po-evolucao .po-eixo, .po-evolucao .po-rotulo-x { font-size: 12px; fill: var(--texto-suave); }
@media (max-width: 720px) {
  .po-series.fu-dois { width: 100%; flex-direction: row; }
  .po-series.fu-dois button { flex: 1; }
  .po-series.fu-dois button + button { border-left: 1px solid var(--borda); border-top: 0; }
}
@media (max-width: 720px), (pointer: coarse) { .po-series button { min-height: 44px; } }

/* os cursos: o nome, o % da equipe que concluiu, a barra e a conta pequena */
.po-curso-num { font-size: 13px; color: var(--texto-secundario); white-space: nowrap; font-variant-numeric: tabular-nums; }
.po-curso-num strong { color: var(--texto); }

/* quando a equipe estuda: compacto, uma cor so em tons, sem numero dentro (o numero mora no title e no leitor de tela) */
.po-bloco .po-mapa { max-width: 100%; border-spacing: 4px; }
.po-bloco .po-mapa td { height: 26px; }
.po-mapa-leg { margin: 0; display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
.po-mapa-leg span { display: inline-block; width: 14px; height: 14px; border-radius: var(--raio-2xs); }

.po-nota { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--texto-suave); }

/* impressao: o relatorio em A4, papel branco, sem a casca, com o cabecalho do relatorio */
.po-print-cab { display: none; }
@media print {
  @page { size: A4; margin: 12mm; }
  .po-corpo, .po-corpo .conteudo { background: var(--branco); min-height: 0; }
  .po-corpo .po-filtros, .po-corpo .topbar, .po-corpo .po-series, .po-corpo .po-acao-ir { display: none !important; }
  .po-print-cab { display: block; margin: 0; font-size: 13px; font-weight: 700; color: var(--texto); }
  .po-pagina { max-width: none; gap: 10px; }
  .po-evolucao .po-grafico[hidden] { display: flex !important; }
  .po-evolucao .po-svg { min-width: 0; }
  .po-frase[hidden] { display: none !important; }
  .po-hero, .po-bloco, .po-kpis .mg-kpi { padding: 10px 12px; }
  .po-pagina .po-duas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Pessoas (v2): a pessoa numa celula so (o nome forte e o e-mail pequeno), o progresso em barra, a linha inteira clicavel */
.po-pessoa-cel { display: flex; flex-direction: column; gap: 1px; min-width: 0; text-decoration: none; color: var(--texto); }
.po-pessoa-nome { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.po-pessoa-email { font-size: 12px; color: var(--texto-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.po-pessoa-cel:hover .po-pessoa-nome, .po-pessoa-cel:focus-visible .po-pessoa-nome { color: var(--accent-texto); text-decoration: underline; }
tr.po-linha-ir { cursor: pointer; }
tr.po-linha-ir:hover td { background: var(--fundo); }
.po-prog { display: flex; flex-direction: column; gap: 4px; min-width: 120px; }
.po-prog .po-barra-fina { height: 5px; }
.po-prog-txt { font-size: 12px; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.po-pagina > .po-rola .fu-presets { flex-wrap: nowrap; }
details.po-exportacoes { padding: 12px 16px; }
.po-exp-sum { cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--texto-secundario); min-height: 32px; }
details.po-exportacoes[open] .po-exp-sum { margin-bottom: 8px; }
@media (max-width: 720px), (pointer: coarse) { .po-exp-sum { min-height: 44px; } }

/* a pagina da pessoa (v2): quem e, a situacao e o progresso no passaporte numa faixa; os 4 numeros no estilo dos indicadores */
.po-pagina .po-pessoa-cab { display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(180px, 240px); align-items: center; gap: var(--sp-4);
  padding: var(--sp-5); margin: 0; }
.po-pessoa-cab .po-pessoa-id { min-width: 0; }
.po-pessoa-prog { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
@media (max-width: 900px) {
  .po-pagina .po-pessoa-cab { grid-template-columns: auto minmax(0, 1fr); }
  .po-pessoa-cab .po-pessoa-sit { align-items: flex-start; grid-column: 2; }
  .po-pessoa-prog { grid-column: 1 / -1; }
}
.po-kpis-pessoa .mg-kpi .val { font-size: 22px; }

/* certificados e acessos (v2): as exportacoes e o historico recolhidos; a regra do dominio numa linha */
.po-exp-duas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
@media (max-width: 720px) { .po-exp-duas { grid-template-columns: minmax(0, 1fr); } }
.po-exp-tit { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--texto); }
.po-pagina .po-aviso { margin: 0; }
.po-regra-linha { flex-wrap: wrap; }
.po-regra-linha .ph { color: var(--texto-suave); }
#poModalIncluir .po-previa { max-height: 260px; }

/* contrato (v2): a empresa como cabecalho e os passaportes em cartoes largos */
.po-empresa-cab { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; padding: var(--sp-5); }
.po-empresa-contato { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; }
.po-empresa-contato .ph { font-size: 18px; color: var(--texto-suave); }
.po-pagina .po-passaportes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
@media (max-width: 900px) { .po-pagina .po-passaportes { grid-template-columns: minmax(0, 1fr); } }
.po-pass-medidas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
@media (max-width: 480px) { .po-pass-medidas { grid-template-columns: minmax(0, 1fr); } }
.po-pass-medida { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.po-pass-medida strong { font-size: 15px; color: var(--texto); font-variant-numeric: tabular-nums; }
.po-pass-rodape { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--borda); padding-top: var(--sp-3); }
.po-pass-rodape .po-pass-ir { margin-left: auto; }
.po-pagina .po-passaporte.po-vencido { opacity: 1; }
.po-passaporte.po-vencido .po-barra::-webkit-progress-value { background: var(--texto-fraco); }
.po-passaporte.po-vencido .po-barra::-moz-progress-bar { background: var(--texto-fraco); }
@media (max-width: 720px), (pointer: coarse) { .po-pass-rodape .btn, .po-pass-ir { min-height: 44px; } }
.te-tab th.po-num { text-align: right; }
.po-pagina .po-passaporte:only-child { grid-column: 1 / -1; }
details.po-exportacoes:not([open]) { gap: 0; }
.po-rola > .fu-presets { width: max-content; max-width: none; }
#poIncluirForm.po-incluir-form { display: flex; flex-direction: column; gap: 10px; }
/* a revisao de tela da v2: alvos de 44 px no toque (o nome nas listas, o Voltar), o indicio de que o periodo rola de lado no celular */
@media (max-width: 720px), (pointer: coarse) {
  .po-pessoa-cel { min-height: 44px; justify-content: center; }
  #ccCorpo td[data-col="nome"] .po-link { display: flex; align-items: center; min-height: 44px; }
  .po-voltar { width: 44px; height: 44px; }
}
@media (max-width: 720px) {
  .po-rola { -webkit-mask-image: linear-gradient(to right, black 82%, transparent); mask-image: linear-gradient(to right, black 82%, transparent); }
}

/* Fase 46: o bloco da Marca de IA mudou pro FIM do arquivo (era no meio). Os testes da Marca de IA (test_ia_f9, test_f9_conformidade,
   test_f13_conformidade) proibem --accent e --cor-primaria em tudo o que vem depois dele; no fim, nada vem depois. Todas as regras dele
   sao escopadas em classes de IA (conferido), entao a ordem nao muda o que elas pintam. */
/* Fase 57 (dono, 17/10): a pagina da aula Multi Curso (prefixo amp-) e as dicas do modal do curso */
.amp-erro { margin: 0 0 var(--sp-3); }
.amp-form { display: flex; flex-direction: column; gap: var(--sp-3); }
.amp-campos { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.amp-modo, .amp-dica, .amp-previa { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-fraco); }
.amp-curto { max-width: 320px; }
.amp-mini { margin: var(--sp-2) 0 0; display: flex; flex-direction: column; gap: 4px; }
.amp-mini[hidden] { display: none; }
.amp-mini img { display: block; max-width: min(360px, 100%); max-height: 240px; width: auto; height: auto; object-fit: contain; border: 1px solid var(--border); border-radius: var(--raio-sm); background: var(--bg-elev); }
.amp-mini figcaption { font-size: 12.5px; color: var(--text-fraco); }
.amp-acoes { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-3); }
.amp-acoes .nota-suave { margin-right: auto; }
.amp-sub { font-size: 12.5px; color: var(--text-fraco); overflow-wrap: anywhere; }
.amp-h4 { display: flex; align-items: center; gap: 6px; margin: var(--sp-4) 0 var(--sp-2); font-size: 15px; }
.amp-area { min-width: 0; }
.amp-tab { table-layout: fixed; width: 100%; }
.amp-tab .col-sel { width: 56px; }
.amp-tab .amp-col-ja { width: 110px; color: var(--text-fraco); }
.amp-previa { min-height: 1.5em; color: var(--text); }
@media (max-width: 720px) { .amp-abas .ial-tabs { flex-wrap: wrap; } }
/* o + Aula com o toggle Aula local | Aula Multi Curso no topo do modal (dono, 17/10) */
.pc-modo-aula { padding: 18px 22px 0; flex-shrink: 0; }
.pc-modo-aula .fu-dois { width: 100%; }
.pc-modo-aula .fu-dois button { flex: 1 1 0; justify-content: center; }
@media (max-width: 720px) { .pc-modo-aula .fu-dois button { min-height: 44px; } }
/* dono, 21/10: o PDF da aula Documento no modal da aula (static/js/aula_pdf.js): o arquivo de hoje com o icone, o nome e o tamanho (no lugar do
   /anexo/<id> digitado) e, embaixo, a area de soltar o PDF novo */
.pc-pdf .im-drop { margin-top: 0; }
.pc-pdf-atual { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; margin-bottom: var(--sp-2); padding: var(--sp-3);
  border: 1px solid var(--borda); border-radius: var(--raio-sm); background: var(--bg); }
.pc-pdf-atual[hidden], .pc-pdf-externo[hidden] { display: none; }
.pc-pdf-icone { flex-shrink: 0; font-size: 40px; line-height: 1; color: var(--vermelho-escuro); }
.pc-pdf-info { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.pc-pdf-nome { font-size: 14px; color: var(--text); overflow-wrap: anywhere; }
.pc-pdf-tam { font-size: 12.5px; color: var(--text-fraco); }
.pc-pdf-externo { display: flex; align-items: center; gap: 6px; margin: 0 0 var(--sp-2); }
@media (max-width: 720px) { .pc-pdf-atual .btn { min-height: 44px; } }
/* Fase 59: a aba Juntar copias (a situacao de cada candidata) */
.amp-tab-copias .amp-col-situ { width: 220px; }
.amp-entra { display: inline-flex; align-items: center; gap: 4px; color: var(--verde-escuro); font-weight: 600; }
.amp-fora { color: var(--text-fraco); }
@media (max-width: 720px) { .amp-tab-copias .amp-col-situ { width: 130px; } }
/* com o botao Multi Curso as acoes do modulo nao cabem a 360 px ao lado do titulo: a linha quebra e elas descem (quando cabem, nada muda) */
@media (max-width: 720px) { .pc-modulo > .cd-header { flex-wrap: wrap; row-gap: var(--sp-2); } }
@media (max-width: 720px) { .amp-acoes .btn { min-height: 44px; } .amp-tab .col-sel { width: 48px; } }
/* Fase 57 (dono, 17/10): a marca Multi Curso no conteudo do curso e o aviso da tela de materiais do espelho */
.am-multi, .pc-multi-aviso { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--sp-3); padding: var(--sp-2) var(--sp-3); font-size: 13.5px;
  border: 1px solid var(--accent-borda); background: var(--accent-soft); border-radius: var(--raio-sm); color: var(--text); }
.pc-multi { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; font-size: 11.5px; font-weight: 700; padding: 1px 8px;
  border-radius: 999px; color: var(--accent-texto); background: var(--accent-soft); vertical-align: middle; }
/* Fase 56 (dono, 17/10): a aula de imagem (inteira, sem cortar), o link do YouTube embaixo do player e o Ir para da aula pivo */
/* A imagem da aula ocupa a largura toda e a altura segue a proporcao dela (dono, 19/10: o teto de altura dentro do flex a esmagava). */
.aula-imagem { margin: 0; display: block; }
.aula-imagem img { display: block; width: 100%; height: auto; border-radius: var(--raio); user-select: none; }
.aula-youtube { margin: var(--sp-2) 0 0; font-size: 13px; }
.aula-youtube a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--text-dim); }
.aula-indicada { display: flex; justify-content: center; margin: var(--sp-3) 0; }
.aula-indicada .btn { min-height: 44px; max-width: 100%; white-space: normal; text-align: center; }
/* Fase 47 (dono, 17/10): o LIVRO da aula PDF (templates/player/_livro.html, static/js/livro_pdf.js). As paginas sao imagens; duas lado a lado
   a partir de 880 px de quadro, uma abaixo disso; a virada animada respeita o prefers-reduced-motion; setas de 44 px. So tokens. */
.livro { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.livro:fullscreen { background: var(--bg); padding: var(--sp-4); justify-content: center; }
.livro-palco { display: flex; justify-content: center; align-items: flex-start; gap: 4px; min-width: 0; outline: none; perspective: 1600px;
  border-radius: var(--raio); }
.livro-palco:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.livro-folha { margin: 0; flex: 1 1 0; min-width: 0; max-width: 100%; position: relative; display: flex; justify-content: center;
  background: transparent; border-radius: var(--raio-xs); overflow: hidden; min-height: 240px; }
.livro-duplo .livro-folha { max-width: 50%; }
.livro-duplo .livro-folha-a { justify-content: flex-end; }
.livro-duplo .livro-folha-b { justify-content: flex-start; }
.livro-img { display: block; width: auto; max-width: 100%; height: auto; max-height: calc(100vh - 200px); user-select: none; -webkit-user-drag: none; }
.livro:fullscreen .livro-img { max-height: calc(100vh - 120px); width: auto; max-width: 100%; }
.livro-espera, .livro-erro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: var(--surface); text-align: center; color: var(--text-dim); }
.livro-erro p { margin: 0; }
.livro-espera[hidden], .livro-erro[hidden], .livro-folha[hidden], .livro-img[hidden] { display: none; }
.livro-barra { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); flex-wrap: wrap; }
.livro-seta { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
  border: 1px solid var(--borda); background: var(--surface); color: var(--text); font-size: 18px; cursor: pointer; }
.livro-seta:disabled { opacity: .4; cursor: default; }
.livro-cheia { margin-left: var(--sp-2); }
.livro-seta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.livro-pos { min-width: 150px; text-align: center; font-size: 14px; color: var(--text-dim); }
.livro-vira-frente .livro-folha { animation: livroVira .38s ease; transform-origin: left center; }
.livro-vira-tras .livro-folha { animation: livroVira .38s ease reverse; transform-origin: right center; }
.livro-baixar { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); text-align: center; }
.livro-baixar .btn { min-height: 44px; }
.livro-baixar-nota { margin: 0; font-size: 13px; color: var(--text-dim); }
/* a espera do Baixar PDF (dono, 17/10): o modal do aluno no centro (o vidro e o brilho vem do tema, ios-dark e neo); aqui so o miolo */
.lbm-caixa .modal-cab h3 { display: flex; align-items: center; gap: var(--sp-2); }
.lbm-caixa:focus { outline: none; }
.lbm-corpo { display: flex; flex-direction: column; align-items: center; text-align: center; }
.lbm-espera { background: transparent; padding: var(--sp-5) var(--sp-4); }
.lbm-sub { max-width: 34ch; line-height: 1.5; }
.lbm-espera[hidden], .lbm-erro[hidden] { display: none; }
.lbm-erro { display: flex; flex-direction: column; gap: var(--sp-4); width: 100%; text-align: left; }
.lbm-erro-txt { margin: 0; color: var(--danger-texto); line-height: 1.5; }
.lbm-acoes { display: flex; justify-content: flex-end; gap: var(--sp-3); flex-wrap: wrap; }
@media (max-width: 720px) { .lbm-acoes .btn { min-height: 44px; } }
@keyframes livroVira { from { transform: rotateY(-14deg); opacity: .55; } to { transform: rotateY(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .livro-vira-frente .livro-folha, .livro-vira-tras .livro-folha { animation: none; } }
/* Fase 49 (dono, 17/10): a tela /op/downloads (prefixo dw-): a aba Conferir PDF com o upload da casa e o resultado; o tema claro do admin */
.dw-conferir { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 720px; }
.dw-sub { margin: 0; font-size: 14px; color: var(--text-fraco); line-height: 1.5; }
.dw-acoes { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-3); flex-wrap: wrap; }
.dw-acoes .nota-suave { margin-right: auto; }
.dw-resultado { display: flex; flex-direction: column; gap: 6px; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--borda); border-radius: var(--raio-sm); }
.dw-resultado[hidden] { display: none; }
.dw-resultado.dw-achou { border-color: var(--ambar); background: var(--ambar-suave); }
.dw-titulo { margin: 0; font-weight: 700; }
.dw-linha { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.dw-tag { font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: 999px; background: var(--bg-elev); color: var(--text-fraco); }
.dw-codigo { font-size: 12.5px; }
@media (max-width: 720px) { .dw-acoes .btn { min-height: 44px; width: 100%; justify-content: center; } }
/* O SEND (Fases 53 e 54; o Send v2 da Fase 60, dono 17/10; prefixo sd-): templates/int/send.html (as abas Conexoes, Modelos e Gatilhos), os parciais
   _send_conexoes_linhas.html e _send_modelos_linhas.html e templates/int/send_modelo.html (a pagina do modelo com a previa ao vivo). So tokens.
   Fica ANTES do bloco da Marca de IA: dali pra baixo o CSS nao usa a cor da marca. */
.sd-abas { min-width: 0; }
.sd-pane { display: none; min-width: 0; padding-top: var(--sp-4); }
.sd-pane.ativo { display: flex; flex-direction: column; gap: var(--sp-4); }
@media (max-width: 720px), (pointer: coarse) { .sd-abas .ial-tab { min-height: 44px; } }
@media (max-width: 720px) { .sd-abas .ial-tabs { gap: 2px; flex-wrap: wrap; } .sd-abas .ial-tab { padding: 0 8px; gap: 4px; white-space: nowrap; } }   /* Fase 64: com a quarta aba (Fila) a fileira quebra a 360 px */
.sd-sub { margin: 2px 0 var(--sp-3); font-size: 13px; line-height: 1.5; color: var(--text-fraco); }
.sd-tag { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 1px 8px; border-radius: var(--raio-full); color: var(--accent-texto); background: var(--accent-soft); white-space: nowrap; }
.sd-tag-off { color: var(--texto-secundario); background: var(--fundo); }
.sd-var { font-size: 12.5px; padding: 0 4px; border-radius: 4px; background: var(--bg-elev); }
.sd-linha2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-3); }
@media (max-width: 560px) { .sd-linha2 { grid-template-columns: minmax(0, 1fr); } }
/* as duas listas (o componente de tabela): a coluna Acoes fica presa na direita quando a tabela rola de lado */
.sd-tab-lista th.col-acoes, .sd-tab-lista td.col-acoes { position: sticky; right: 0; z-index: 1; background: var(--branco); box-shadow: -1px 0 0 var(--borda); }
.sd-tab-lista tbody tr:hover td.col-acoes { background: var(--fundo); }
.sd-cel-sub { display: block; font-size: 12px; color: var(--texto-secundario); }
/* as celulas que quebram linha (o resto da lista e tabela-nowrap): o nome com a etiqueta e o tipo embaixo, o remetente e o ultimo teste */
.tabela-wrap .te-tab.sd-tab-lista td.sd-cel-nome { max-width: 240px; min-width: 150px; white-space: normal; overflow: visible; }
.te-tab.tabela-nowrap.sd-tab-lista td.sd-cel-rem { white-space: normal; max-width: 210px; overflow-wrap: anywhere; }
.sd-cel-url { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.te-tab.tabela-nowrap.sd-tab-lista td[data-col="teste"] { white-space: normal; min-width: 160px; max-width: 210px; }
.sd-teste { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.sd-teste-ok { color: var(--verde-escuro); }
.sd-teste-falha { color: var(--danger-texto); }
.sd-teste-nunca { color: var(--texto-secundario); font-weight: 500; }
.sd-giro { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--borda); border-top-color: var(--cor-primaria); border-radius: 50%; animation: spinner-rotate .8s linear infinite; }
@media (prefers-reduced-motion: reduce) { .sd-giro { animation-duration: 2.4s; } }
.sd-uso { font-size: 13px; }
.sd-uso-nao { color: var(--texto-secundario); }
/* os e-mails parados (o Reenviar os parados da aba Conexoes) */
.sd-parados { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.sd-parados-texto { flex: 1 1 320px; min-width: 0; }
.sd-parados-titulo { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 15px; }
.sd-parados .sd-sub { margin: 0; }
.sd-parados-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.sd-parados-acoes form { margin: 0; }
/* Fase 62: na edicao da conexao o Tipo nao muda (o servidor recusa trocar) */
.sd-tipo-travado { pointer-events: none; opacity: .6; }
/* a fila de e-mails (Fase 61): o alerta da SECRET_KEY, o topo com o toggle da situacao, a tabela com a caixa e a situacao em selo */
.sdf-aviso { margin-bottom: var(--sp-4); }
.sdf-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.sdf-topo .sd-sub { flex: 1 1 320px; margin: 0; }
.sdf-tab .col-sel { width: 52px; }
.sdf-barra .sd-sb-lote { min-width: 240px; }   /* Fase 64: o Mandar por da faixa da fila */
.sdf-cel-para { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.sdf-cel-motivo { max-width: 320px; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; color: var(--texto-secundario); }
.sdf-sit { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: var(--raio-full); font-size: 12px; font-weight: 600; }
.sdf-sit-na_fila { background: var(--fundo); color: var(--texto-secundario); }
.sdf-sit-parado { background: var(--ambar-suave); color: var(--ambar-escuro); }
.sdf-sit-falhou { background: var(--vermelho-suave); color: var(--vermelho-escuro); }
@media (max-width: 720px) { .sdf-situacao button { min-height: 44px; } .sd-parados-acoes .btn { flex: 1 1 100%; } }
/* o modal da conexao */
.sd-modal-erro { margin: 0 0 var(--sp-3); padding: 10px 12px; border-radius: var(--raio-sm); background: var(--vermelho-suave); color: var(--vermelho-escuro); font-size: 13.5px; }
.sd-modal-teste { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 var(--sp-3); padding: 10px 12px; border: 1px solid var(--ambar); border-radius: var(--raio-sm); background: var(--ambar-suave); }
.sd-modal-teste > i { font-size: 20px; color: var(--danger-texto); flex: 0 0 auto; }
.sd-modal-teste p { margin: 0; font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.sd-modal-teste[hidden], .sd-modal-erro[hidden] { display: none; }
/* as opcoes desligadas do SelectBusca (os tipos e os gatilhos Em breve, os canais sem conexao) */
.selectbusca .sb-opt.sb-opt-off { display: flex; align-items: center; gap: 8px; color: var(--texto-fraco); cursor: not-allowed; }
.selectbusca .sb-opt.sb-opt-off:hover, .selectbusca .sb-opt.sb-opt-off.ativa { background: transparent; color: var(--texto-fraco); box-shadow: none; }
/* a aba Gatilhos: o SelectBusca do gatilho, a grade com uma coluna por canal (a conexao no cabecalho) e a faixa do lote */
.sd-gat { min-width: 0; }
.sd-grade-rola { margin-top: var(--sp-2); }
.sd-gatilho { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.sd-rotulo { font-weight: 600; font-size: 14px; }
.sd-sb { min-width: 0; }
.sd-sb-gatilho { width: 340px; max-width: 100%; }
.sd-tab-grade { width: 100%; table-layout: fixed; }
.sd-tab-grade .col-sel { width: 52px; }
.sd-tab-grade .sd-col-quem { width: 220px; }
.sd-tab-grade .sd-col-canal { width: 250px; }
.sd-tab-grade .sd-col-canal-off { width: 170px; }
.sd-tab-grade thead th { vertical-align: top; white-space: normal; }
.sd-tab-grade td { vertical-align: middle; overflow-wrap: anywhere; }
.sd-canal-nome { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13.5px; color: var(--texto); }
.sd-por { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; font-weight: 500; text-transform: none; letter-spacing: 0; }
.sd-por-rot { flex: 0 0 auto; font-size: 12.5px; color: var(--texto-secundario); }
.sd-por .sd-sb-por { flex: 1 1 150px; }
.sd-sb-por .sb-display { min-width: 0; }
.sd-sb-por .sb-label { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-por-dica { display: block; margin-top: 4px; font-size: 11.5px; font-weight: 500; color: var(--texto-secundario); text-transform: none; letter-spacing: 0; }
.sd-por-off { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--texto-secundario); text-transform: none; letter-spacing: 0; }
.sd-por-link { display: inline-block; margin-top: 2px; font-size: 12.5px; font-weight: 600; color: var(--accent-texto); text-transform: none; letter-spacing: 0; }
.sd-cel-off { display: inline-flex; align-items: center; min-height: 36px; padding: 0 10px; border: 1px dashed var(--borda); border-radius: var(--raio-sm); font-size: 12.5px; color: var(--texto-fraco); cursor: not-allowed; }
.sd-area-linha th, .sd-area-linha td { background: var(--fundo); }
.sd-area-linha th { text-align: left; font-size: 13.5px; font-weight: 700; color: var(--texto); }
.sd-area-linha th i { margin-right: 4px; }
.sd-linha-todos td:first-child { font-size: 14px; }
.sd-pane-fim { height: 72px; }
.pn-barra.sd-barra { animation-name: pnSobe; }
.sd-barra .sd-sb-lote { min-width: 220px; color: var(--texto); }
.sd-barra .sd-sb-canal { min-width: 150px; color: var(--texto); }
/* a pagina do modelo: duas colunas a partir de 1024 px (o texto e a previa ao vivo) */
.sd-mod { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); align-items: start; min-width: 0; }
@media (min-width: 1024px) { .sd-mod { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.sd-mod-esq, .sd-mod-dir { min-width: 0; }
.sd-mod-form { display: flex; flex-direction: column; min-width: 0; }
.sd-mod-titulo { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--sp-2); font-size: 16px; }
.sd-aviso { display: block; margin: 0 0 var(--sp-3); padding: 8px 12px; border-radius: var(--raio-sm); background: var(--accent-soft); color: var(--accent-texto); font-size: 13px; }
.sd-campos { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.sd-fmt { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 6px; padding: 4px; border: 1px solid var(--borda); border-radius: var(--raio-sm); background: var(--fundo); }
.sd-fmt-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid transparent; border-radius: var(--raio-xs); background: transparent; color: var(--texto-secundario); font-size: 17px; cursor: pointer; }
.sd-fmt-btn:hover { background: var(--branco); border-color: var(--borda); color: var(--texto); }
.sd-fmt-btn:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: 1px; }
.sd-fmt-btn:disabled { opacity: .45; cursor: not-allowed; }
.sd-corpo { min-height: 240px; font-family: monospace; font-size: 13px; line-height: 1.5; }
/* Fase 63: o editor visual do modelo (parecido com o Word), as etiquetas de variável e a cor dos botões (o banner da Fase 63 virou a Imagem da Fase 65) */
.campo .campo-rotulo { font-size: 13px; font-weight: 600; color: var(--texto-secundario); }
.sd-fmt-sep { width: 1px; align-self: stretch; margin: 4px 2px; background: var(--borda); }
.campo label.sd-fmt-btn { position: relative; font-size: 17px; font-weight: 400; color: var(--texto-secundario); cursor: pointer; }
.sd-fmt-cor { overflow: hidden; }   /* a faixa da cor escolhida no pe do botao nao vaza */
.sd-fmt-cor-inp { position: absolute; inset: auto 0 0 0; width: 100%; height: 4px; padding: 0; border: 0; opacity: .9; cursor: pointer; }
.sd-editor { min-height: 260px; max-height: 560px; overflow-y: auto; padding: 14px 16px; border: 1px solid var(--borda); border-radius: var(--raio-sm);
  background: var(--branco); color: var(--texto); font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; outline: none; }
.sd-editor:focus { border-color: var(--cor-primaria); box-shadow: 0 0 0 3px var(--cor-primaria-suave); }
.sd-editor:empty::before { content: attr(data-placeholder); color: var(--text-fraco); }
.sd-editor[contenteditable="false"] { background: var(--fundo); }
.sd-editor p, .sd-editor ul, .sd-editor ol { margin: 0 0 12px; }
.sd-editor h2 { margin: 6px 0 12px; font-size: 20px; line-height: 1.3; }
.sd-editor a { color: var(--accent-texto); text-decoration: underline; }
/* Fase 65 (dono, 18/10): Botao, Link e Imagem, ferramentas separadas com o nome a vista; o botao e a imagem sao BLOCOS do texto (o que se ve e o
   que vai no e-mail): o botao na cor dos botoes do modelo (--sd-cor-botao, posta pelo send_modelo.js), a imagem na largura do texto, a area
   de soltar a imagem tracejada, e a lixeira de cada bloco (sempre a vista no toque e ate 720 px) */
.sd-fmt-btn.sd-fmt-ins { width: auto; gap: 6px; padding: 0 10px; font-size: 13.5px; font-weight: 600; }   /* vence o 44 px quadrado do celular */
.sd-fmt-ins i { font-size: 17px; }
.sd-editor .sd-bloco { position: relative; margin: 14px 0; }
.sd-editor a.sd-botao { display: inline-block; padding: 12px 26px; border-radius: 8px; background: var(--sd-cor-botao, var(--accent-texto)); color: var(--branco);
  font-weight: 700; text-decoration: none; cursor: pointer; }
.sd-editor a.sd-botao:hover, .sd-editor a.sd-botao:focus-visible { outline: 2px dashed var(--cor-primaria); outline-offset: 3px; }
.sd-editor .sd-bloco-img img { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: var(--raio-xs); }
.sd-bloco-tirar { position: absolute; top: 6px; right: 6px; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border: 1px solid var(--borda); border-radius: var(--raio-full); background: var(--branco); color: var(--vermelho-escuro); font-size: 16px; cursor: pointer;
  opacity: 0; transition: opacity .15s; }
.sd-bloco:hover .sd-bloco-tirar, .sd-bloco:focus-within .sd-bloco-tirar, .sd-bloco-tirar:focus-visible { opacity: 1; }
.sd-bloco-tirar:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: 1px; }
.sd-img-alvo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 130px; padding: 18px 48px;
  border: 2px dashed var(--borda); border-radius: var(--raio-sm); background: var(--fundo); color: var(--texto-secundario); text-align: center;
  cursor: pointer; user-select: none; }
.sd-img-alvo > i { font-size: 30px; color: var(--accent-texto); }
.sd-img-alvo-txt { font-weight: 600; color: var(--texto); }
.sd-img-alvo-sub { font-size: 12.5px; }
.sd-img-alvo.sd-arrastando, .sd-img-alvo:hover, .sd-img-alvo:focus-visible { border-color: var(--cor-primaria); background: var(--cor-primaria-suave); outline: none; }
.sd-img-alvo.sd-subindo { cursor: progress; opacity: .8; }
.sd-img-alvo.sd-erro { border-color: var(--vermelho-borda); background: var(--vermelho-suave); }
.sd-img-alvo.sd-erro .sd-img-alvo-txt { color: var(--vermelho-escuro); }
.popup-rodape .sd-tirar { margin-right: auto; color: var(--vermelho-escuro); }
@media (hover: none), (max-width: 720px) { .sd-bloco-tirar { opacity: 1; width: 44px; height: 44px; } }
.sd-chip { display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; margin: 0 1px; border-radius: var(--raio-full);
  background: var(--cor-primaria-suave); color: var(--accent-texto); font-size: 13px; font-weight: 600; line-height: 1.7; user-select: all; white-space: nowrap; }
.sd-var-btn i { font-size: 14px; }
.sd-aparencia { margin-top: var(--sp-2); }
.sd-cor { display: flex; align-items: center; gap: var(--sp-2); }
.sd-cor-inp { width: 56px; height: 40px; padding: 2px; border: 1px solid var(--borda); border-radius: var(--raio-sm); background: var(--branco); cursor: pointer; }
.sd-cor-hex { font-size: 13px; color: var(--texto-secundario); }
.sd-link-dest { flex-wrap: wrap; }
@media (max-width: 720px) { .sd-cor-inp { height: 44px; } .campo label.sd-fmt-btn { width: 44px; height: 44px; } }
.sd-vars { display: flex; flex-direction: column; gap: var(--sp-2); }
.sd-vars-titulo { margin: 0; font-size: 13px; font-weight: 600; color: var(--texto); }
.sd-vars-grupo { padding: 8px 10px; border: 1px solid var(--borda); border-radius: var(--raio-sm); }
.sd-vars-destaque { border-color: var(--cor-primaria); background: var(--cor-primaria-suave); }
.sd-vars-rot { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 12.5px; font-weight: 600; color: var(--texto-secundario); }
.sd-vars-destaque .sd-vars-rot { color: var(--accent-texto); }
.sd-vars-lista { display: flex; flex-wrap: wrap; gap: 6px; }
.sd-var-btn { display: inline-flex; align-items: center; min-height: 30px; padding: 0 10px; border: 1px solid var(--borda); border-radius: var(--raio-full); background: var(--branco); color: var(--texto); font-size: 12.5px; cursor: pointer; }
.sd-var-btn:hover { border-color: var(--cor-primaria); color: var(--accent-texto); }
.sd-var-btn:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: 1px; }
.sd-var-btn:disabled { opacity: .45; cursor: not-allowed; }
.sd-mod-rodape { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--borda); }
.sd-mod-rodape:empty { display: none; }
.sd-teste-msg { margin: var(--sp-2) 0 0; text-align: right; }
.sd-previa-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.sd-previa-topo .sd-mod-titulo { margin: 0; }
.sd-previa-topo .fu-dois { align-self: center; }
.sd-previa-palco { --sd-previa-alto: 640px; position: relative; overflow: hidden; height: calc(var(--sd-previa-alto) * var(--sd-escala, 1)); border-radius: var(--raio-sm); background: var(--fundo); }
.sd-previa-moldura { position: absolute; top: 0; left: 50%; height: var(--sd-previa-alto); transform: translateX(-50%) scale(var(--sd-escala, 1)); transform-origin: top center; }
.sd-previa-pc { width: 600px; }
.sd-previa-cel { width: 360px; }
.sd-previa-frame { display: block; width: 100%; height: 100%; border: 1px solid var(--borda); border-radius: var(--raio-sm); background: var(--branco); }
@media (max-width: 720px) {
  .sd-tab-grade .col-sel { width: 48px; }
  .sd-tab-grade .sd-col-quem { width: 140px; }
  .sd-tab-grade .sd-col-canal { width: 220px; }
  .sd-tab-grade .sd-col-canal-off { width: 150px; }
  .sd-sb-gatilho { width: 100%; }
  .sd-barra .sd-sb-lote, .sd-barra .sd-sb-canal { flex: 1 1 100%; }
  .sd-barra .btn, .sd-parados .btn, .sd-mod-rodape .btn { min-height: 44px; }
  .sd-fmt-btn { width: 44px; height: 44px; }
  .sd-var-btn { min-height: 44px; }
  .sd-previa-topo .fu-dois { flex-direction: row; width: auto; }
  .sd-previa-topo .fu-dois button + button { border-left: 1px solid var(--borda); border-top: 0; }
}

/* ---------- Fase 89 (dono, 20/10): o editor da TRILHA DE EVOLUCAO. A insignia (prefixo ins-, o MESMO desenho do aluno), a lista de aulas
   (da-), as etapas e a pagina da etapa (ds-). So tokens; antes do bloco da Marca de IA (usa a cor da marca). ---------- */
.ins { --ins-cor: var(--accent); --ins-tam: 56px; position: relative; display: inline-flex; align-items: center; justify-content: center;
  flex: none; width: var(--ins-tam); height: var(--ins-tam); border-radius: 50% 50% 46% 46% / 42% 42% 58% 58%;
  background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .45), transparent 58%), var(--ins-cor);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18), 0 2px 6px rgba(0, 0, 0, .18); color: var(--ins-glifo-escuro); overflow: hidden; }
.ins-p { --ins-tam: 36px; }
.ins-m { --ins-tam: 56px; }
.ins-g { --ins-tam: 112px; }
.ins-icone { font-size: calc(var(--ins-tam) * .52); line-height: 1; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25)); }
.ins-arte { width: 100%; height: 100%; object-fit: cover; display: block; }
.ins-com-arte { background: var(--borda); }
.ins-apagada { filter: grayscale(1); opacity: .45; }
.ins-campos { border: 0; margin: 0; padding: 0; min-width: 0; }
.ins-legenda { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--sp-3); padding: 0; font-size: 15px; font-weight: 700; color: var(--texto); }
.ins-legenda i { color: var(--accent-texto); font-size: 18px; }
.ins-grade { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.ins-previa-caixa { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--sp-4) var(--sp-3);
  border: 1px dashed var(--borda); border-radius: var(--raio); text-align: center; }
.ins-previa-nome { margin: 4px 0 0; font-weight: 700; color: var(--texto); overflow-wrap: anywhere; }
.ins-previa-caixa .ob-dica { margin: 0; }
.ins-campos-corpo { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.ins-cor-pessego { --ins-cor: var(--ins-pessego); }
.ins-cor-damasco { --ins-cor: var(--ins-damasco); }
.ins-cor-queimado { --ins-cor: var(--ins-queimado); }
.ins-cor-laranja { --ins-cor: var(--ins-laranja); }
.ins-cor-terracota { --ins-cor: var(--ins-terracota); }
.ins-cor-vermelho { --ins-cor: var(--ins-vermelho); }
.ins-cor-vinho { --ins-cor: var(--ins-vinho); }
.ins-cor-areia { --ins-cor: var(--ins-areia); }
.ins-cor-dourado { --ins-cor: var(--ins-dourado); }
.ins-cor-verde { --ins-cor: var(--ins-verde); }
.ins-cor-petroleo { --ins-cor: var(--ins-petroleo); }
.ins-cor-carvao { --ins-cor: var(--ins-carvao); }
.ins-cor-nevoa { --ins-cor: var(--ins-nevoa); }
.ins-cor-grafite { --ins-cor: var(--ins-grafite); }
.ins-cor-cinza { --ins-cor: var(--ins-cinza); }
.ins-cores { flex-wrap: wrap; width: fit-content; max-width: 100%; }
/* o seletor e so a bolinha (dono, 21/10: 'nao preciso do nome das cores'); o nome vai no aria-label e no title. A escolhida ganha o anel */
.ins-cores.fu-presets button { padding: 0 6px; min-width: 34px; justify-content: center; }
.ins-cores .ins-amostra { width: 22px; height: 22px; vertical-align: middle; }
.ins-cores button.on .ins-amostra { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent-texto); }
/* a escolhida e so o anel da bolinha: sem a caixa do toggle por tras (dono, 21/10) */
.ins-cores.fu-presets button.on { border-color: transparent; background: transparent; }
.ins-cores.fu-presets button:focus-visible { outline: 2px solid var(--accent-texto); outline-offset: 1px; border-radius: 50%; }
.ins-amostra { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--ins-cor); vertical-align: -2px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
@media (max-width: 720px) {
  .ins-grade { grid-template-columns: 1fr; }
  .ins-previa-caixa { flex-direction: row; justify-content: flex-start; text-align: left; }
}

.da-aulas { display: flex; flex-direction: column; gap: var(--sp-3); }
.da-aulas-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.da-titulo { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--texto); }
.da-titulo i { color: var(--accent-texto); font-size: 18px; }
.da-conta { font-size: 13px; color: var(--text-fraco); }
.da-lista { margin: 0; max-width: none; }
.da-aula .ob-passo-titulo { overflow-wrap: anywhere; }
.da-fora { display: flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 12.5px; color: var(--vermelho-escuro); }
.da-acrescentar { display: flex; align-items: flex-end; gap: var(--sp-3); flex-wrap: wrap; }
.da-busca { flex: 1 1 320px; min-width: 0; margin: 0; }
.da-acrescentar .campo-marcar { min-height: 40px; }
.da-msg { margin: 0; min-height: 1.3em; font-size: 13px; color: var(--text-fraco); }
/* o modal Escolher aulas (dono, 21/10): a turma exemplo e a arvore; o rodape com quantas aulas a lista tem e o Concluir */
.da-modal .popup-corpo { display: flex; flex-direction: column; gap: var(--sp-3); }
.da-modal .da-busca { flex: none; }
.da-modal .popup-rodape { justify-content: space-between; align-items: center; }
.da-modal-conta { font-size: 13px; color: var(--text-fraco); }
/* a arvore da TURMA EXEMPLO (dono, 21/10): Secao > Curso > Modulo > Aula em <details>; a seta gira no aberto */
.ds-partes-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.ds-partes-topo .av-pg-titulo { margin: 0; }
.da-arvore { display: flex; flex-direction: column; gap: 6px; }
.da-arvore details { border-radius: var(--raio-xs); }
.da-arvore summary { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 10px; cursor: pointer; list-style: none;
  border-radius: var(--raio-xs); }
.da-arvore summary::-webkit-details-marker { display: none; }
.da-arvore summary:hover { background: var(--fundo); color: var(--accent-texto); }
.da-arvore summary:focus-visible { outline: 2px solid var(--accent-texto); outline-offset: 1px; }
.da-arv-seta { transition: transform .15s; color: var(--text-fraco); }
.da-arvore details[open] > summary > .da-arv-seta { transform: rotate(90deg); }
.da-arv-nome { flex: 1 1 auto; min-width: 0; font-weight: 600; color: var(--texto); overflow-wrap: anywhere; }
.da-arv-conta { flex: none; font-size: 12.5px; color: var(--text-fraco); }
.da-arv-secao { border: 1px solid var(--borda); }
.da-arv-curso, .da-arv-modulo { margin-left: 18px; }
.da-arv-modulo .da-arv-nome { font-weight: 500; }
.da-arv-aulas { list-style: none; margin: 0 0 6px 46px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.da-arv-aula { min-height: 36px; font-size: 13.5px; color: var(--texto); }
@media (max-width: 720px) {
  .da-arvore summary, .da-arv-aula { min-height: 44px; }
  .da-arv-curso, .da-arv-modulo { margin-left: 8px; }
  .da-arv-aulas { margin-left: 16px; }
}
.vz-compacto { padding: var(--sp-4) var(--sp-3); }

.ds-tipo { display: inline-flex; align-items: center; gap: 4px; }
.ds-tipo-cel { display: inline-flex; align-items: center; gap: 6px; }
.ds-tipo-cel i { color: var(--accent-texto); }
.ds-tipo-fixo { margin: 0; display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.ds-tipo-fixo .ob-dica { margin: 0; }
.ds-review { align-items: flex-start; }
.ds-etapas { margin: 0; max-width: none; }   /* as etapas na linha toda (dono, 21/10) */
.ds-etapa .ins { margin-right: 2px; }
.ds-etapa[draggable="true"] { cursor: pointer; }   /* o clique abre a etapa, o arrasto reordena (desafio_editor.js) */
.ds-etapa[draggable="true"]:hover { border-color: var(--accent-texto); }
.ds-etapa-link { color: var(--texto); text-decoration: none; }
.ds-etapa-link:hover, .ds-etapa-link:focus-visible { color: var(--accent-texto); text-decoration: underline; }
.ds-etapa-info { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--text-fraco); }
.ds-etapa-revisao .ob-tipo-icone { color: var(--accent-texto); }
.ds-etapa-oculta { opacity: .6; }
.ds-etapa-fim { list-style: none; display: flex; align-items: center; gap: var(--sp-3); padding: 10px var(--sp-3);
  border: 1px dashed var(--borda); border-radius: var(--raio-sm); }
.ds-etapa-fim .ob-passo-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ds-num { max-width: 160px; }
.ds-aviso-perguntas { display: flex; align-items: flex-start; gap: 6px; margin: 6px 0 0; font-size: 13px; color: var(--vermelho-escuro); }
.ds-msg-erro { margin: 0; padding: 10px 12px; border: 1px solid var(--vermelho-escuro); border-radius: var(--raio-sm); color: var(--vermelho-escuro); }
.ds-msg-erro:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ds-etapa-extra { margin-top: var(--sp-4); }
/* a pagina da etapa na largura toda (dono, 21/10) */
#dsFormEtapa.av-pg, .av-pg.ds-etapa-extra { max-width: none; }
/* Fase 97 (dono, 21/10): a etapa feita de PARTES. O + Nova parte abre os tres cartoes da escolha; cada parte e um cartao com o cabecalho (a
   alca, o numero, o icone, o titulo com o resumo e as acoes) e, na Assistir Aulas e no Entregar Exercicio, o corpo (a lista de aulas; os
   anexos e links). O arrasto que comeca no corpo nao move a parte (desafio_editor.js). */
.ds-nova-parte { margin: var(--sp-2) 0 var(--sp-3); }
.ds-nova-parte > summary { list-style: none; width: fit-content; }
.ds-nova-parte > summary::-webkit-details-marker { display: none; }
.ds-tipos-op { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-3); margin-top: var(--sp-3); }
.ds-tipo-op { display: flex; align-items: flex-start; gap: var(--sp-3); min-width: 0; padding: var(--sp-3); text-align: left; cursor: pointer;
  font: inherit; color: var(--texto); background: var(--surface); border: 1px solid var(--borda); border-radius: var(--raio); }
.ds-tipo-op:hover, .ds-tipo-op:focus-visible { border-color: var(--accent-texto); }
.ds-tipo-op:focus-visible { outline: 2px solid var(--accent-texto); outline-offset: 2px; }
.ds-tipo-op[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.ds-tipo-op[aria-disabled="true"]:hover { border-color: var(--borda); }
.ds-tipo-op-icone { flex: none; font-size: 24px; color: var(--accent-texto); }
.ds-tipo-op-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ds-tipo-op-txt strong { font-size: 14px; }
.ds-tipo-op-txt small { font-size: 12.5px; line-height: 1.4; color: var(--text-fraco); }
.ds-partes { margin: 0; max-width: none; }   /* as partes na linha toda, da etapa e da Entrega única (dono, 21/10) */
.ds-parte { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
.ds-parte-cab { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.ds-parte-corpo { padding-top: var(--sp-3); border-top: 1px solid var(--borda); cursor: auto; }
.da-na-parte { gap: var(--sp-2); }
.da-titulo-parte { font-size: 14px; }
.ds-materiais { display: flex; flex-direction: column; gap: var(--sp-3); }
.ds-materiais-titulo { margin: 0; font-size: 14px; font-weight: 700; color: var(--texto); }
.ds-materiais-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.ds-material { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; padding: 8px 10px; border: 1px solid var(--borda); border-radius: var(--raio-sm); }
.ds-material > i { flex: none; font-size: 18px; color: var(--accent-texto); }
.ds-material-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; color: var(--texto); text-decoration: none; }
.ds-material-txt strong { overflow-wrap: anywhere; }
.ds-material-txt small { font-size: 12.5px; color: var(--text-fraco); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-material-txt:hover strong, .ds-material-txt:focus-visible strong { color: var(--accent-texto); text-decoration: underline; }
.ds-materiais-acoes { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
@media (max-width: 880px) {
  .ds-tipos-op { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .ds-parte-cab { flex-wrap: wrap; }
  .ds-tipo-op { min-height: 44px; }
  .ds-material .btn-icone { min-width: 44px; min-height: 44px; }
  .ds-materiais-acoes .btn { min-height: 44px; }
}
@media (max-width: 720px) {
  .da-acrescentar .btn, .da-acrescentar .campo-marcar { min-height: 44px; }
  .da-acrescentar .btn { width: 100%; justify-content: center; }
  .ds-num { max-width: none; }
}

/* ---------- Fase 90 (dono, 20/10): o BANCO DE PERGUNTAS (/adm/perguntas, prefixo pg-). So tokens; antes do bloco da Marca de IA. ---------- */
.pg-ia { margin-bottom: var(--sp-4); }
.pg-geracao { margin-top: var(--sp-3); }
.pg-geracao-fim { margin: 0; font-size: 13.5px; color: var(--texto); }
.pg-barra { display: flex; align-items: flex-end; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.pg-situacao { flex-wrap: wrap; }
.pg-filtros { display: flex; align-items: flex-end; gap: var(--sp-3); flex-wrap: wrap; flex: 1 1 420px; min-width: 0; }
.pg-filtro { margin: 0; flex: 1 1 200px; min-width: 0; }
.pg-filtro-aula { margin: 0; font-size: 13px; color: var(--text-fraco); }
.pg-cel-enunciado { max-width: 420px; overflow: hidden; text-overflow: ellipsis; }
.pg-cel-aula { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.badge.pg-sit-aprovada { background: var(--verde-suave); color: var(--verde-escuro); }
.badge.pg-sit-descartada { color: var(--text-fraco); }
.pg-opcoes { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pg-opcao { display: flex; align-items: center; gap: 8px; }
.pg-opcao .input { flex: 1 1 auto; min-width: 0; }
.pg-certa { flex: none; }
.pg-aceitos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.pg-minuto, .pg-quantidade { max-width: 160px; }
.pg-previa { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px dashed var(--borda); border-radius: var(--raio-sm); font-size: 13.5px; }
.pg-previa p { margin: 0; }
.pg-previa-titulo { font-weight: 700; color: var(--texto); }
.pg-previa-espera { color: var(--text-fraco); }
.pg-previa-sem { margin: 0; padding-left: 18px; color: var(--text-fraco); }
.pg-previa-aviso { color: var(--vermelho-escuro); }
@media (max-width: 720px) {
  .pg-aceitos { grid-template-columns: 1fr; }
  .pg-certa { min-height: 44px; min-width: 44px; }
  .pg-minuto, .pg-quantidade { max-width: none; }
}

/* ---------- Fase 99 (dono, 21/10): a CAPA COMPOSTA do curso na pagina do produto (prefixo cc-) e a pagina do produto (prefixo pr-). So tokens;
   antes do bloco da Marca de IA. ---------- */
/* a PAGINA do produto numa pagina so (dono, 21/10: "acho que da de colocar tudo isso em 1 pagina so, bem encaixadinho, com UI otimizada, rola
   sim"; templates/adm/produto.html e _produto_capa.html). Uma grade de cartoes medida pela largura do conteudo (container query: a sidebar muda de
   largura), sempre na ordem Dados, Campos da capa, Previa, capa pronta, Historico:
     ate 859 px  uma coluna, um cartao embaixo do outro
     860 px      a Previa vai pra direita (300 px) e gruda embaixo da topbar enquanto a pagina rola
     1300 px     os Dados e os Campos da capa abrem em duas colunas por dentro, e a capa pronta e o historico ficam lado a lado na MESMA altura
                 (o historico nao empurra a linha: contain: size, e a lista dele rola por dentro)
   No produto novo (.pr-grade-nova) sao so os Dados e o cartao da capa que vem depois de salvar. */
.pr-pagina { container-type: inline-size; container-name: prpagina; min-width: 0; }
.pr-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); grid-template-areas: "dados" "campos" "previa" "pronta" "hist"; }
.pr-grade.pr-grade-nova { grid-template-areas: "dados" "previa"; }
.pr-grade > .cd { min-width: 0; margin: 0; scroll-margin-top: calc(58px + var(--sp-4)); }     /* 58 px: a topbar grudada do admin */
.pr-grade > .cd > .cc-titulo { margin: 0; }
.pr-dados { grid-area: dados; }
.cc-form-cartao { grid-area: campos; }
.cc-previa-cartao, .pr-capa-depois { grid-area: previa; align-self: start; }
.cc-pronta { grid-area: pronta; }
.cc-historico { grid-area: hist; }
.pr-colunas, .cc-colunas { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3) var(--sp-5); align-items: start; }
.pr-col, .cc-col { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
@container prpagina (min-width: 860px) {
  .pr-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); grid-template-areas: "dados previa" "campos previa" "pronta previa" "hist previa"; }
  .pr-grade.pr-grade-nova { grid-template-areas: "dados previa"; }
  .cc-previa-cartao { position: sticky; top: calc(58px + var(--sp-4)); }
  .cc-previa-cartao .cc-previa { max-height: calc(100vh - 250px); }       /* a previa grudada cabe na janela baixa (a imagem fica inteira, contain) */
}
@container prpagina (min-width: 1300px) {
  .pr-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) clamp(300px, 22cqw, 360px);
    grid-template-areas: "dados dados previa" "campos campos previa" "pronta hist previa"; }
  .pr-grade:not(:has(> .cc-pronta)) { grid-template-areas: "dados dados previa" "campos campos previa" "hist hist previa"; }
  .pr-grade.pr-grade-nova { grid-template-columns: minmax(0, 1fr) clamp(300px, 22cqw, 360px); grid-template-areas: "dados previa"; }
  .pr-colunas, .cc-colunas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pr-grade:has(> .cc-pronta) > .cc-historico { contain: size; }
  .pr-grade:has(> .cc-pronta) > .cc-historico .cc-versoes { grid-template-columns: minmax(0, 1fr); flex: 1 1 auto; min-height: 0; overflow-y: auto; }
}
@media (min-width: 721px) { .vt-form .cc-etiqueta-cor { grid-template-columns: minmax(0, 1fr) auto; } }
.cc-icones .cc-logo { padding-left: var(--sp-4); border-left: 1px solid var(--borda); }
.cc-titulo { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-3); font-size: 15px; font-weight: 700; }
.cc-campos { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2) var(--sp-3); }
.cc-rotulo { display: block; margin-bottom: var(--sp-2); font-size: 13px; font-weight: 600; color: var(--text-fraco); }
.cc-arte-linha { display: flex; align-items: flex-end; gap: var(--sp-3); }
.cc-arte-linha .cc-arte { flex: 1 1 auto; min-width: 0; }
.cc-arte-mini { flex: 0 0 auto; width: 48px; height: 72px; object-fit: cover; border: 1px solid var(--borda); border-radius: var(--raio-sm); background: var(--fundo); }
@media (max-width: 720px) { .cc-arte-linha { flex-wrap: wrap; } }
.cc-ordem-apoio .cc-ordem-dica { grid-column: 1 / -1; margin: 0; }
.cc-ordem-apoio .input:disabled { opacity: .55; cursor: not-allowed; }
.cc-icones { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
.cc-icones .cc-rotulo { flex: 0 0 100%; padding: 0; }
.campo-marcar.campo-marcar-off { opacity: .55; }
/* o campo de cor numa linha propria: extensao de conta-gotas do navegador (a ColorPick do Chrome do dono, 21/10) poe uma imagem ao lado de todo
   input de cor, e na coluna do .campo ela esticava na largura toda; aqui ela fica do lado, no tamanho de um icone */
.cc-cor-linha { display: flex; align-items: center; gap: var(--sp-2); }
.cc-cor-linha img { width: 24px; height: 24px; }
.cc-cor { width: 64px; height: 40px; padding: var(--sp-1); border: 1px solid var(--borda); border-radius: var(--raio-sm); background: var(--surface); cursor: pointer; }
.cc-marca { max-width: 160px; }
.pc-capa .btn { flex: 0 0 auto; }      /* o cartao Capa do curso no conteudo do curso: o texto quebra, o botao nao encolhe */
.cc-erro-geral { margin: 0; font-size: 13px; font-weight: 600; color: var(--danger-texto); }
.cc-aviso { display: flex; align-items: center; gap: var(--sp-2); margin: 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--raio-sm);
  background: var(--ambar-suave); color: var(--ambar-escuro); font-size: 13.5px; font-weight: 600; }
.cc-previa-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; }
.cc-previa-topo .cc-titulo { margin: 0; }
.cc-previa { position: relative; display: flex; align-items: center; justify-content: center; min-height: 240px; border-radius: var(--raio);
  background: var(--fundo); overflow: hidden; }
.cc-previa[data-formato="vertical"] { aspect-ratio: 2 / 3; }
.cc-previa[data-formato="horizontal"] { aspect-ratio: 3 / 2; min-height: 0; }
.cc-previa img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cc-previa .loading-inline { position: absolute; inset: 0; background: var(--fundo); }
.cc-previa-vazia { margin: 0; padding: var(--sp-4); text-align: center; font-size: 13px; color: var(--text-fraco); }
/* a previa que nao saiu (o texto nao cabe): a imagem de antes esmaece e o motivo aparece em cima dela, nunca a imagem velha como se fosse a nova */
.cc-previa.cc-previa-erro img { opacity: .3; filter: grayscale(1); }
.cc-previa-aviso { position: absolute; left: var(--sp-3); right: var(--sp-3); bottom: var(--sp-3); margin: 0; padding: var(--sp-2) var(--sp-3);
  border-radius: var(--raio-sm); background: var(--surface); color: var(--danger-texto); font-size: 13px; font-weight: 600; text-align: center; }
.cc-oculto { display: none !important; }
/* o fieldset dos Dados da pagina do produto */
.pr-campos { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.cc-versoes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-3); }
.cc-versao { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2); border: 1px solid var(--borda); border-radius: var(--raio-sm); min-width: 0; }
.cc-versao-img { flex: 0 0 auto; display: block; border-radius: var(--raio-xs); overflow: hidden; background: var(--fundo); }
.cc-versao-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cc-versao-vertical { width: 44px; height: 66px; }
.cc-versao-horizontal { width: 72px; height: 48px; }
.cc-versao-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: var(--text-fraco); }
.cc-versao-info strong { font-size: 13.5px; color: var(--text); }
@media (max-width: 720px) {
  .cc-versao .btn { min-height: 44px; }
  .cc-cor { height: 44px; }
}

/* a ALTURA das barrinhas (dono 21/10: "um slicer vertical sobre a imagem"): a linha tracejada no centro delas, de ponta a ponta da previa, com a
   alca na esquerda (sobre a barrinha); --cc-altura vem do produto_capa.js. So na previa vertical e com a imagem a vista. */
.cc-altura { position: absolute; left: 0; right: 0; top: var(--cc-altura, 62.5%); z-index: 2; height: 32px; transform: translateY(-50%);
  display: flex; align-items: center; cursor: ns-resize; touch-action: none; }
.cc-altura::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed var(--cc-linha-altura);
  filter: drop-shadow(0 0 2px var(--cc-linha-sombra)); }
.cc-altura-alca { position: relative; display: inline-flex; align-items: center; gap: var(--sp-1); margin-left: var(--sp-2); padding: 3px var(--sp-2);
  border-radius: 999px; background: var(--accent); color: var(--texto-sobre-accent); font-size: 12px; font-weight: 700; box-shadow: var(--sombra-flutuante); }
.cc-altura:focus-visible { outline: none; }
.cc-altura:focus-visible .cc-altura-alca, .cc-altura.arrastando .cc-altura-alca { outline: 2px solid var(--cc-linha-altura); outline-offset: 2px; }
.cc-previa[data-formato="horizontal"] .cc-altura, .cc-previa:has(> #ccPrevia.cc-oculto) .cc-altura { display: none; }
.cc-altura-rodape { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; }
.cc-altura-rodape .ob-dica { margin: 0; flex: 1 1 180px; }
@media (max-width: 720px), (pointer: coarse) { .cc-altura { height: 44px; } .cc-altura-rodape .btn { min-height: 44px; } }
/* o Mostrar o logo (o switch) e, ligado, a escolha da logo da Miscelanea; com icone marcado os dois apagam */
.cc-logo-campo { min-width: 0; }
.cc-logo-escolha { display: flex; flex-direction: column; gap: var(--sp-1); margin-top: var(--sp-2); }
/* o tamanho, a opacidade e a distancia do pe do logo (dono 21/10): tres lado a lado, um por linha quando o cartao estreita */
.cc-logo-escolha { container-type: inline-size; container-name: cclogo; }
/* a distancia do pe tem o rotulo mais comprido: leva a largura que a opacidade (3 digitos) nao usa; as caixas alinham pela base */
.cc-logo-ajustes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .7fr) minmax(0, 1.4fr); align-items: end; gap: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-2); }
@container cclogo (max-width: 520px) { .cc-logo-ajustes { grid-template-columns: minmax(0, 1fr); } }
.cc-logo-ajustes .cc-logo-dica { grid-column: 1 / -1; margin: 0; }
.cc-logo-off .pr-sw-texto { opacity: .55; }

/* ---------- Admin > Miscelanea (dono, 21/10; templates/admin/miscelanea.html, prefixo msc-): as abas (hoje so Logos) e um cartao por logo, a
   imagem sobre o fundo escuro da capa (a logo do pe e clara). ---------- */
.msc-abas { min-width: 0; }
.msc-pane { display: none; min-width: 0; padding-top: var(--sp-4); }
.msc-pane.ativo { display: flex; flex-direction: column; gap: var(--sp-4); }
.msc-intro { margin: 0; font-size: 13.5px; color: var(--text-fraco); }
.msc-grade { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--sp-3); }
.msc-card { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: var(--sp-3); margin: 0; padding: var(--sp-3);
  min-width: 0; text-align: left; }
.msc-img { flex: 0 0 auto; width: 132px; height: 72px; padding: var(--sp-2); display: flex; align-items: center; justify-content: center;
  border-radius: var(--raio-sm); background: var(--msc-logo-fundo); }
.msc-img img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.msc-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.msc-nome { font-size: 14px; overflow-wrap: anywhere; }
.msc-usos { font-size: 12.5px; color: var(--text-fraco); }
.msc-acoes { flex: 0 0 auto; }
.msc-previa { background: var(--msc-logo-fundo); }

/* ---------- Fase 100 (dono, 22/10): a SECAO DESAFIOS da Vitrine (00_GENESIS/PLANO_VITRINE_DESAFIOS.md). So tokens. Fica ANTES do bloco da Marca
   de IA (a linha do tempo usa a cor da marca). Cor e espaco por token. O admin: a lista dos blocos no modal da secao (static/js/vitrine_desafios.js) e o cartao da
   secao; o aluno: o trilho da prateleira com a LINHA DO TEMPO dentro dele (templates/vitrine/_secao_desafios.html) ---------- */
.vt-desafios { display: flex; flex-direction: column; gap: var(--sp-3); }
.vt-desafios .loading-inline { padding: var(--sp-4) var(--sp-3); background: transparent; }   /* a espera inteira (o giro de 44 px), so mais baixa */
.vt-desafios [hidden] { display: none; }   /* a espera (.loading-inline e flex) e o vazio somem pelo atributo hidden */
.vd-lista-caixa { display: flex; flex-direction: column; gap: var(--sp-1); }
.vd-blocos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.vd-bloco {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3); border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--surface, var(--bg-elev)); touch-action: pan-y;
}
.vd-bloco-seq { border-left: 3px solid var(--accent-escuro); }
.vd-bloco.vd-arrastando { border-style: dashed; border-color: var(--accent-escuro); box-shadow: var(--sombra); opacity: .92; }
.vd-puxador { cursor: grab; touch-action: none; }
.vd-arrastando .vd-puxador { cursor: grabbing; }
.vd-bloco-n {
  display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 var(--sp-1); border-radius: var(--raio-full);
  background: var(--accent-soft); color: var(--accent-texto); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.vd-bloco-corpo { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.vd-seq-rot { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: 12px; font-weight: 600; color: var(--accent-texto); }
.vd-seq { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.vd-seq-item { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); min-width: 0; font-size: 13.5px; }
.vd-seq-n { flex: none; min-width: 18px; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.vd-seq-n::after { content: "."; }
.vd-seq-titulo { color: var(--texto); font-weight: 600; overflow-wrap: anywhere; }
.vd-seq-meta { color: var(--texto-suave); font-size: 12.5px; }
.vd-bloco-acoes { display: flex; align-items: center; gap: var(--sp-1); }
.vd-mover[aria-disabled="true"] { opacity: .35; cursor: default; }
.vd-cartao-lista { list-style: none; margin: 0; padding: 0 var(--sp-1); display: flex; flex-direction: column; gap: var(--sp-2); }
.vd-cartao-bloco { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); }
.vd-cartao-meta { color: var(--texto-suave); font-weight: 400; }
.vd-seta { color: var(--texto-suave); }
@media (max-width: 720px) {
  /* no celular os tres botoes vao numa linha propria embaixo do bloco: o texto fica com a largura toda */
  .vd-bloco { grid-template-columns: auto minmax(0, 1fr); row-gap: var(--sp-1); }
  .vd-bloco-n { display: none; }
  .vd-bloco-acoes { grid-column: 1 / -1; justify-content: flex-end; gap: var(--sp-2); }   /* 8 px entre os alvos de toque */
  .vd-bloco .btn-icone { min-width: 44px; min-height: 44px; }
}

/* o aluno: o trilho da prateleira com a LINHA DO TEMPO dentro de cada item, embaixo da capa (rola junto); o desenho e o bloco lt- logo abaixo */
.prateleira-desafios .prateleira-titulo { flex-wrap: wrap; }   /* o titulo e o x de y quebram juntos no celular */
.vd-resumo { font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.vd-trilho { --lt-vao: var(--sp-3); align-items: flex-start; }   /* cada item com a altura dele: a linha fica logo embaixo da capa */
.prateleira-desafios .capa.vertical { flex: none; }
.vd-item { display: flex; flex-direction: column; }

/* A LINHA DO TEMPO DOS DESAFIOS (dono, 22/10: "essa linha do tempo e a do /desafios tem que ser iguais"): UM desenho so pra secao Desafios
   da Vitrine e pra sequencia da lista /desafios (templates/desafios/_linha_tempo.html; a regra dos passos e servicos/desafios.passos_da_linha).
   O ponto de AGORA pulsa; o que JA PASSOU (o conquistado, o ponto e o fio que chega nele, e o fio que chega no de agora) e laranja pastel; o
   que AINDA VAI PASSAR e cinza e esmaece ate o chumbo, sumindo: lt-longe-1 a 4 (o fio vai do tom do ponto anterior ao deste e o ponto
   apaga). O passo fica embaixo do cartao; o fio que CHEGA no item (lt-fio) vai do centro do ponto anterior ao deste: a largura do item mais o
   vao entre os itens (--lt-vao, de quem usa). No celular da /desafios a linha desce a esquerda (a geometria mora la; aqui a cor de cada metade). */
.lt-item {
  --lt-ponto: 28px; --lt-ponto-agora: 34px; --lt-trilho: 5px; --lt-faixa: 42px;
  --lt-laranja: color-mix(in srgb, var(--accent) 52%, white);
  --lt-tom-0: var(--texto-suave);
  --lt-tom-1: color-mix(in srgb, var(--texto-suave) 70%, var(--cadeado-chumbo-escuro));
  --lt-tom-2: color-mix(in srgb, var(--texto-suave) 44%, var(--cadeado-chumbo-escuro));
  --lt-tom-3: color-mix(in srgb, var(--texto-suave) 20%, var(--cadeado-chumbo-escuro));
  --lt-tom-4: var(--cadeado-chumbo-escuro);
  --lt-de: var(--lt-laranja); --lt-ate: var(--lt-laranja);
  --lt-fio-v: linear-gradient(180deg, color-mix(in srgb, var(--lt-de) 50%, var(--lt-ate)), var(--lt-ate));
  --lt-sai: transparent;
}
.lt-longe-1 { --lt-de: var(--lt-tom-0); --lt-ate: var(--lt-tom-1); }
.lt-longe-2 { --lt-de: var(--lt-tom-1); --lt-ate: var(--lt-tom-2); }
.lt-longe-3 { --lt-de: var(--lt-tom-2); --lt-ate: var(--lt-tom-3); }
.lt-longe-4 { --lt-de: var(--lt-tom-3); --lt-ate: var(--lt-tom-4); }
/* a metade que SAI de um ponto (so na linha que desce) e a primeira metade do fio do proximo */
.lt-item:has(+ .lt-passou), .lt-item:has(+ .lt-agora) { --lt-sai: var(--lt-laranja); }
.lt-item:has(+ .lt-longe-1) { --lt-sai: linear-gradient(180deg, var(--lt-tom-0), color-mix(in srgb, var(--lt-tom-0) 50%, var(--lt-tom-1))); }
.lt-item:has(+ .lt-longe-2) { --lt-sai: linear-gradient(180deg, var(--lt-tom-1), color-mix(in srgb, var(--lt-tom-1) 50%, var(--lt-tom-2))); }
.lt-item:has(+ .lt-longe-3) { --lt-sai: linear-gradient(180deg, var(--lt-tom-2), color-mix(in srgb, var(--lt-tom-2) 50%, var(--lt-tom-3))); }
.lt-item:has(+ .lt-longe-4) { --lt-sai: linear-gradient(180deg, var(--lt-tom-3), color-mix(in srgb, var(--lt-tom-3) 50%, var(--lt-tom-4))); }
.lt-passo { position: relative; display: flex; align-items: center; justify-content: center; height: var(--lt-faixa); flex: none; }
.lt-fio > .lt-passo::before {
  content: ""; position: absolute; top: 50%; right: 50%; width: calc(100% + var(--lt-vao, var(--sp-3))); height: var(--lt-trilho);
  transform: translateY(-50%); border-radius: var(--raio-full); background: linear-gradient(90deg, var(--lt-de), var(--lt-ate));
}
.lt-passou.lt-fio > .lt-passo::before, .lt-agora.lt-fio > .lt-passo::before {
  box-shadow: 0 0 12px color-mix(in srgb, var(--lt-laranja) 40%, transparent);
}
.lt-ponto {
  position: relative; z-index: 1; display: grid; place-items: center; width: var(--lt-ponto); height: var(--lt-ponto); font-size: 13px;
  border-radius: var(--raio-full); color: var(--lt-ate);
  background: var(--vidro-reflexo, none), var(--vidro-caixa, var(--bg-elev));
  -webkit-backdrop-filter: var(--vidro-blur, none); backdrop-filter: var(--vidro-blur, none);
  border: 1px solid color-mix(in srgb, var(--lt-ate) 55%, transparent); box-shadow: var(--vidro-luz, none), var(--sombra-sm);
}
.lt-passou .lt-ponto {
  background: var(--lt-laranja); border-color: transparent; color: var(--texto-sobre-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--lt-laranja) 18%, transparent), 0 4px 14px color-mix(in srgb, var(--lt-laranja) 35%, transparent);
}
.lt-longe-2 .lt-ponto { opacity: .85; }
.lt-longe-3 .lt-ponto { opacity: .7; }
.lt-longe-4 .lt-ponto { opacity: .55; }
/* o de AGORA: o primeiro liberado e nao conquistado da linha, o ponto maior com o anel e o miolo na cor da marca, e a onda que pulsa */
.lt-agora { --lt-ponto: var(--lt-ponto-agora); }
.lt-agora .lt-ponto {
  border: 2px solid var(--accent); color: var(--accent);
  box-shadow: 0 0 0 6px var(--accent-soft), 0 0 22px color-mix(in srgb, var(--accent) 55%, transparent);
  animation: ltPulsa 2s ease-out infinite;
}
.lt-agora .lt-ponto::after {
  content: ""; width: 12px; height: 12px; border-radius: var(--raio-full); background: var(--accent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 70%, transparent);
}
@keyframes ltPulsa {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent), 0 0 18px color-mix(in srgb, var(--accent) 45%, transparent); }
  70% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--accent) 0%, transparent), 0 0 26px color-mix(in srgb, var(--accent) 60%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent), 0 0 18px color-mix(in srgb, var(--accent) 45%, transparent); }
}
/* a CAPA MONTADA (D-VD1): a insignia do desafio grande no centro, sobre a capa dele escurecida ou sobre o degrade da cor da insignia; o
   titulo embaixo dela em ate 2 linhas e, centrado abaixo dele, o sub (x de y etapas, o envio, Conquistado ou o aviso do travado, dono 22/10);
   o anel do % no canto de baixo a direita, como no card de curso: so com ele a capa guarda o pe livre */
.vd-capa {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-3); text-align: center; overflow: hidden;
  background: radial-gradient(circle at 50% 34%, color-mix(in srgb, var(--ins-cor) 70%, var(--bg)) 0%, color-mix(in srgb, var(--ins-cor) 26%, var(--bg)) 62%, var(--bg) 100%);
}
.vd-capa-fundo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vd-capa-com-fundo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, var(--scrim), var(--scrim-forte)); }
.vd-cartao:has(.vd-prog .anel) .vd-capa { padding-bottom: 60px; }   /* o pe livre pro anel do canto */
.vd-capa-ins, .vd-capa-titulo, .vd-capa .vd-sub { position: relative; z-index: 2; }
.vd-capa-ins { display: flex; align-items: center; justify-content: center; flex: none; }
.vd-capa .ins-g { --ins-tam: 96px; }
.vd-capa-titulo {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; color: var(--sobre-imagem, var(--texto)); text-shadow: var(--sombra-sobre-imagem, none);
}
.capa .vd-tipo { position: absolute; top: 8px; right: 8px; z-index: 3; box-shadow: var(--sombra-sm); }
.vd-cartao.bloqueada .vd-capa { filter: grayscale(1) brightness(.75); }
/* o travado: o cadeado grande no lugar da insignia (na capa montada) ou no centro da Capa para vitrine (vd-cadeado-sobre) */
.vd-cadeado {
  width: 64px; height: 64px; border-radius: var(--raio-full); display: grid; place-items: center; font-size: 28px; color: var(--accent);
  background: linear-gradient(145deg, var(--cadeado-chumbo-claro), var(--cadeado-chumbo-escuro));
  box-shadow: -3px -3px 6px var(--cadeado-luz), 4px 4px 9px var(--cadeado-sombra), inset 1px 1px 1px var(--cadeado-luz), inset -1px -1px 2px var(--cadeado-sombra);
}
.vd-cadeado-sobre { position: absolute; left: 50%; top: 42%; z-index: 3; transform: translate(-50%, -50%); }
/* o sub da Capa para vitrine (o nome ja esta na arte) fica no pe dela, centrado, sobre o degrade; o anel sozinho dispensa o degrade */
.capa .vd-rodape:has(.vd-sub) { background: linear-gradient(0deg, var(--scrim-forte) 0%, var(--scrim-forte) 45%, transparent 100%); padding-top: 28px; }
.vd-rodape .vd-sub { align-self: center; }
.vd-travado .vd-rodape .vd-sub { filter: brightness(.75); }   /* esmaecido como a capa montada do travado (o filtro dela nao chega no pe) */
.vd-sub { max-width: 100%; text-align: center; }
.vd-aviso {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden;
  font-size: 12px; line-height: 1.35; color: var(--sobre-imagem, var(--texto));
}
.vd-aviso i { margin-right: 2px; vertical-align: -1px; }
.vd-aviso strong { overflow-wrap: anywhere; }
.vd-selo { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--trofeu-ouro, var(--accent)); }
.vd-selo i { font-size: 18px; }
.vd-etapas { font-size: 12.5px; font-weight: 600; color: var(--sobre-imagem, var(--texto)); text-shadow: var(--sombra-sobre-imagem, none); }
.vd-envio { white-space: normal; }
.vd-cartao[role="link"] { cursor: not-allowed; }
.capa.vd-cartao[role="link"]:hover { transform: none; border-color: var(--border); box-shadow: none; }   /* o travado nao convida ao clique (vence o hover do tema) */
.vd-cartao[role="link"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 720px) {
  .vd-capa { padding: var(--sp-3) var(--sp-2); gap: var(--sp-2); }
  .vd-cartao:has(.vd-prog .anel) .vd-capa { padding-bottom: 52px; }
  .vd-capa .ins-g { --ins-tam: 56px; }
  .vd-capa-titulo { font-size: 12.5px; }
  .vd-cadeado { width: 44px; height: 44px; font-size: 20px; }
  /* a capa do celular e estreita: o selo do tipo fica so com o icone (o nome segue pro leitor de tela) */
  .vd-tipo { padding: 4px 6px; }
  .vd-tipo-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .vd-aviso { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .lt-agora .lt-ponto { animation: none; }
  .vd-bloco { transition: none; }
}

/* ---------- Fase 101 (dono, 22/10): o TERMO DE USO DA AREA (00_GENESIS/PLANO_TERMOS_POR_AREA.md). So tokens. Fica ANTES do bloco da Marca de IA
   (os testes da IA proibem --accent dali ate o fim do arquivo). O modal fixo da entrada (templates/termos/_modal_area.html, o molde do onboarding:
   por cima da vitrine desfocada, sem X), a BOLA a esquerda da engrenagem da Minha Area (so de 1280 px pra cima, onde a engrenagem existe) e o
   link do rodape, que mora no .ind-rodape do Indique (a MESMA classe, sem copiar as regras: so o link ganha o clique) ---------- */
.modal-bg.tma-bg { z-index: 400; background: var(--overlay-gaveta); -webkit-backdrop-filter: blur(10px) saturate(120%); backdrop-filter: blur(10px) saturate(120%); }
html.tma-aberto, html.tma-aberto body { overflow: hidden; }
.tma-caixa.modal-lg { width: min(860px, 94vw); max-height: 92vh; display: flex; flex-direction: column; }
.tma-caixa:focus { outline: none; }
.tma-cab { flex: none; padding: 20px 24px 8px; }
.tma-titulo { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.3px; line-height: 1.3; overflow-wrap: anywhere; }
.tma-sub { margin: 4px 0 0; font-size: 13px; color: var(--text-dim); line-height: 1.45; }
.tma-form { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.tma-miolo { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px 24px 16px; display: flex; flex-direction: column; gap: var(--sp-3); }
.tma-miolo .cd { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.tma-erro { margin: 0 24px 12px; }
.tma-erro[hidden] { display: none; }
.tma-rodape { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap;
  padding: 14px 24px 20px; border-top: 1px solid var(--border); }
.tma-saidas { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.tma-rodape .btn-primario:disabled { opacity: .55; cursor: not-allowed; }
@media (max-width: 720px) {
  .tma-cab { padding: 16px 16px 6px; }
  .tma-miolo { padding: 6px 16px 12px; }
  .tma-erro { margin: 0 16px 10px; }
  .tma-rodape { padding: 12px 16px 16px; flex-direction: column-reverse; align-items: stretch; }
  .tma-saidas { justify-content: space-between; }
  .tma-rodape .btn { min-height: 44px; justify-content: center; }
  .tma-rodape .btn-primario { width: 100%; }
}
.btn.btn-sino.ma-termos-bola { display: none; }   /* tres classes: vence o .btn.btn-sino de cima */
@media (min-width: 1280px) {
  .btn.btn-sino.ma-termos-bola { display: inline-flex; position: fixed; top: var(--sp-5); right: calc(var(--sp-5) + 104px); z-index: 46; }
  .ma-layout:has(.ma-termos-bola) .ma-cab { padding-right: 168px; }   /* o sino, a engrenagem e a bola (44 px cada, 8 de folga) */
}
.ma-termos-rodape a { pointer-events: auto; color: var(--accent-texto); font-weight: 600; text-decoration: underline; }
/* o alvo de 44 px no toque sem mexer na linha do texto: o padding de um elemento em linha cresce a area do clique, nao a altura da linha */
@media (max-width: 720px) { .ma-termos-rodape a { padding: 14px 0; } }
/* a segunda barra da Minha Area passa por cima do desfoque do rodape (senao o ultimo item, o Cadastro, fica embaixo dele) */
.ma-layout:has(.ma-termos-rodape) > .ma-nav { z-index: 31; }
/* de 1280 px pra cima a segunda barra ocupa o lado esquerdo: o texto do rodape vai pra direita, na coluna do conteudo (nunca por baixo da barra) */
@media (min-width: 1280px) { .ind-rodape.ma-termos-rodape { justify-content: flex-end; padding-right: var(--sp-5); } }
@media (max-width: 720px) { .mt-pendente .btn { min-height: 44px; } }
.mt-texto-aberto { max-height: none; overflow: visible; }
/* os botoes de subir ao topo e descer ao final (dono, 22/10; templates/_rolar_pontas.html): no canto de baixo a DIREITA, alinhados com o
   sino na mesma margem; ate 880 px encostam na direita, acima da barra de abas. Aparecem ao rolar (classe visivel) */
.rolar-pontas { position: fixed; right: var(--sp-5); bottom: var(--sp-5); z-index: 45; display: flex; flex-direction: column;
  gap: 8px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease, visibility .2s; }
.rolar-pontas.visivel { opacity: 1; visibility: visible; transform: none; }
@media (max-width: 880px) {
  .rolar-pontas { right: 12px; }
  html.com-tabbar .rolar-pontas { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .rolar-pontas { transition: none; transform: none; } }

/* ---------- Marca de IA (Fase 9, parte B; Padrao_Marca_IA, Sempre_Marcar_IA; CV-136 a CV-138, CV-199, CV-200) ----------
   TODA funcionalidade de IA e roxa (tokens --roxo* em tokens.css, nunca o --accent) e leva ph-sparkle. O texto "A IA vai ler X e te entregar Y"
   acompanha o botao; o resultado de IA leva .tag-ia ate a pessoa confirmar; o loading de IA e a variante roxa do .loading-inline. */
.bloco-ia {
  background: linear-gradient(135deg, var(--roxo-pastel-1), var(--roxo-pastel-2));
  border: 1px solid var(--roxo-borda);
  border-radius: var(--raio);
  padding: 16px 18px; margin-bottom: 16px;
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.bloco-ia h3 {
  margin: 0; font-size: 14px; font-weight: 700; color: var(--roxo-texto);
  display: flex; align-items: center; gap: 8px;
}
.bloco-ia h3 i { font-size: 18px; color: var(--roxo-icone); }
.bloco-ia p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--roxo-texto); }
.bloco-ia .campo label { color: var(--roxo-texto); }
.bloco-ia [hidden] { display: none !important; }
.bloco-ia .loading-inline { background: transparent; }
.bloco-ia-acoes { display: flex; gap: var(--sp-3) var(--sp-4); align-items: center; flex-wrap: wrap; }

.btn-ia {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px;
  padding: 10px 18px; border: 0; border-radius: var(--raio-sm);
  background: var(--roxo); color: var(--texto-sobre-roxo);
  font-size: 13px; font-weight: 700; cursor: pointer; transition: background .15s;
}
.btn-ia:hover { background: var(--roxo-escuro); }
.btn-ia:disabled { background: var(--roxo-claro); cursor: wait; }
.btn-ia:focus-visible { outline: 2px solid var(--roxo-texto); outline-offset: 2px; }
/* recurso desligado (sem IA_PROVEDOR ou sem chave): nao e espera, entao nao leva o cursor de espera, e o rotulo continua legivel */
.btn-ia.ia-off:disabled { background: var(--roxo-pastel-2); color: var(--roxo-texto); border: 1px solid var(--roxo-borda); cursor: not-allowed; }

.tag-ia {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--roxo-suave); color: var(--roxo-texto);
  border: 1px solid var(--roxo-borda); border-radius: var(--raio-full);
  padding: 2px 8px; font-size: 11px; font-weight: 700; line-height: 1.3;
  text-transform: uppercase; letter-spacing: .03em; white-space: nowrap;
}
.tag-ia i { font-size: 11px; color: var(--roxo-icone); }
.campo label .tag-ia { margin-left: 4px; vertical-align: middle; }
/* selo "escrito com IA, revisado por <nome>" da resposta redigida por IA (MCP do dono): uma frase, nao uma sigla, entao sem caixa alta */
.tag-ia.com-marca-ia { text-transform: none; letter-spacing: 0; font-weight: 600; white-space: normal; max-width: 100%; overflow-wrap: anywhere; }

.mg-kpi.ac-ia::before { background: linear-gradient(90deg, var(--roxo-claro), var(--roxo)); }
.mg-kpi.ac-ia .ico { background: var(--roxo-suave); color: var(--roxo-icone); }

/* loading de IA: o mesmo .loading-inline do Padrao_Loading_Estado, com o giro e o texto em roxo (o texto e gerundio e especifico) */
.loading-ia .spinner-circle { border-top-color: var(--roxo); }
.loading-ia .loading-text { color: var(--roxo-texto); }

/* bloco "Sugerir mapeamento com IA" em /int/plataformas */
.ia-form { display: flex; flex-direction: column; gap: 12px; }
.ia-campos { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; }
.ia-campos .campo { flex: 1 1 240px; min-width: 0; }
.ia-campos .campo.campo-origem { flex: 0 1 auto; }
.ia-origem.fu-presets { --fu-h: 40px; }
/* o toggle de origem mora dentro do bloco de IA: a opcao marcada leva o roxo, nunca o laranja da marca */
.bloco-ia .fu-presets button:hover { color: var(--roxo-texto); }
.bloco-ia .fu-presets button.on { border-color: var(--roxo); background: var(--roxo-suave); color: var(--roxo-texto); }
.ia-json { flex: 1 1 100%; }
.ia-json textarea {
  width: 100%; height: auto; min-height: 140px; padding: 12px; box-sizing: border-box; resize: vertical;
  font-family: Consolas, monospace; font-size: 12.5px;
}
.ia-ajuda { font-size: 12px; color: var(--roxo-texto); }
.ia-custo { font-size: 12px; color: var(--texto-suave); }
.bloco-ia p.ia-desligada {
  display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; color: var(--texto);
  background: var(--branco); border: 1px dashed var(--roxo-borda); border-radius: var(--raio-sm);
}
.ia-desligada i { color: var(--roxo-icone); font-size: 16px; margin-top: 1px; }
.ia-resultado:empty { display: none; }
.ia-res {
  background: var(--branco); border: 1px solid var(--roxo-borda); border-radius: var(--raio-sm);
  padding: 14px; display: flex; flex-direction: column; gap: var(--sp-3);
}
.ia-res-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--texto); }
.bloco-ia .ia-res p.ia-res-nota { color: var(--texto-secundario); font-size: 12.5px; }
.ia-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ia-linha {
  display: grid; grid-template-columns: minmax(130px, 200px) minmax(0, 1fr) auto; gap: 6px 14px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--borda); font-size: 13px;
}
.ia-linha:last-child { border-bottom: 0; }
.ia-rotulo { font-weight: 600; color: var(--texto); }
.ia-chave { font-family: Consolas, monospace; font-size: 12px; color: var(--texto); overflow-wrap: anywhere; }
.ia-fim { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.ia-conf {
  font-size: 11.5px; font-weight: 600; color: var(--roxo-texto); background: var(--roxo-suave);
  padding: 2px 8px; border-radius: var(--raio-full); white-space: nowrap;
}
.ia-sem-campo { font-size: 11.5px; color: var(--texto-suave); }
.ia-acoes { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.ia-erro {
  display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; font-size: 13px;
  background: var(--vermelho-suave); color: var(--vermelho-escuro);
  border: 1px solid var(--vermelho-borda); border-radius: var(--raio-sm);
}
.ia-erro i { font-size: 16px; margin-top: 1px; }
/* formulario de mapeamento pre-preenchido: o campo que a IA sugeriu ganha o contorno roxo e a tag no rotulo ate a pessoa mudar */
.campo.ia-sugerido .sb-display { border-color: var(--roxo); }
.ia-extra code { font-family: Consolas, monospace; font-size: 12px; }
@media (max-width: 720px) {
  .bloco-ia { padding: 14px; }
  .ia-linha { grid-template-columns: minmax(0, 1fr); }
  .ia-fim { justify-content: flex-start; }
  .bloco-ia-acoes .btn-ia, .ia-acoes .btn, .ia-acoes .btn-ia { width: 100%; justify-content: center; min-height: 44px; }
  .ia-origem.fu-presets { height: auto; }
  .ia-origem.fu-presets button { height: 44px; min-height: 44px; flex: 1 1 100%; white-space: normal; }
}
@media (pointer: coarse) {
  .btn-ia { min-height: 44px; }
  .ia-origem.fu-presets button { min-height: 44px; }
}

/* foco, hover e contorno DENTRO do bloco de IA sao roxos (tokens --roxo*), nunca o laranja da marca: SelectBusca, area de texto, opcoes e botoes */
.bloco-ia .input:focus, .bloco-ia textarea:focus { border-color: var(--roxo); background: var(--branco); outline: 2px solid var(--roxo-texto); outline-offset: 1px; }
.bloco-ia .selectbusca .sb-display:hover { border-color: var(--roxo); }
.bloco-ia .selectbusca .sb-display:focus-visible { outline: 2px solid var(--roxo-texto); outline-offset: 2px; }
.bloco-ia .selectbusca .sb-search:focus, .bloco-ia .selectbusca .sb-search:focus-visible { outline: 2px solid var(--roxo-texto); outline-offset: -2px; }
.bloco-ia .selectbusca .sb-opt:hover { background: var(--roxo-suave); color: var(--roxo-texto); }
.bloco-ia .selectbusca .sb-opt.ativa { background: var(--roxo-suave); color: var(--roxo-texto); box-shadow: inset 3px 0 0 var(--roxo); }
.bloco-ia .fu-presets button:focus-visible, .bloco-ia .btn:focus-visible { outline: 2px solid var(--roxo-texto); outline-offset: 2px; }
/* depois de pedir a sugestao o foco vai pro resultado (ou pra mensagem de erro): o anel tambem e roxo */
.ia-res:focus-visible, .ia-erro:focus-visible { outline: 2px solid var(--roxo-texto); outline-offset: 2px; }
@media (max-width: 720px) { .ia-json textarea { font-size: 16px; } }
@media (pointer: coarse) { .ia-json textarea { font-size: 16px; } }

/* ---------- Fase 71 (dono, 19/10): a PAGINA do usuario (templates/admin/usuario.html), no lugar do modal Editar ---------- */
.up-cab { margin-bottom: var(--sp-3); }
.up-diario { margin-top: var(--sp-4); }   /* o diario de acessos embaixo das compras (dono, 19/10) */
.up-cab-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-width: 0; }
.up-meta { font-size: 13px; color: var(--texto-secundario); overflow-wrap: anywhere; }
.up-campos { border: 0; margin: 0; padding: 0; min-width: 0; }
.up-acoes { display: flex; justify-content: flex-end; gap: 10px; margin-top: var(--sp-3); }
.up-atrelar { margin-bottom: var(--sp-3); flex-wrap: wrap; }
.up-campo-marcar { justify-content: flex-end; }
.up-linha-off td { color: var(--texto-secundario); }
.up-sub { display: block; font-size: 12px; color: var(--texto-secundario); white-space: normal; max-width: 320px; }
.up-mono { font-family: Consolas, monospace; font-size: 12.5px; overflow-wrap: anywhere; }
/* dono, 23/10: as abas Certificados e Pontos e rank (so leitura); a linha da ofensiva no topo do cartao */
.up-linha-info { margin: 0; font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.up-pilha > .cd + .cd { margin-top: var(--sp-4); }
/* a coluna Aceites da lista: o check verde, ou o vazio com o que falta no title */
.usr-aceite-ok { color: var(--verde); font-size: 18px; }
.usr-aceite-falta { display: inline-block; width: 18px; height: 18px; border: 2px solid var(--borda); border-radius: 50%; vertical-align: middle; }

/* Fase 71: os convites abertos dentro do modal Convidar */
.convites-no-modal { border-top: 1px solid var(--borda); }

/* ---------- o editor visual de texto longo (static/js/editor_rico.js; a Politica de Privacidade, dono 19/10: colar do Word com a formatacao) ---------- */
.ed-rico { border: 1px solid var(--borda); border-radius: var(--raio); background: var(--fundo); min-width: 0; }
.ed-barra { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px; border-bottom: 1px solid var(--borda); }
.ed-botao { width: 34px; height: 34px; }
.ed-campo { min-height: 320px; max-height: 70vh; overflow: auto; padding: 12px 14px; font-size: 14px; line-height: 1.6; color: var(--texto); outline: none; overflow-wrap: anywhere; }
.ed-campo-curto { min-height: 110px; }
.ed-campo:focus-visible { box-shadow: inset 0 0 0 2px var(--cor-primaria); }
.ed-campo h2, .ed-campo h3 { margin: 12px 0 4px; font-size: 16px; }
.ed-campo p { margin: 0 0 8px; }
.ed-campo ul, .ed-campo ol { margin: 0 0 8px; padding-left: 22px; }
.ed-campo table { border-collapse: collapse; margin: 8px 0; }
.ed-campo td, .ed-campo th { border: 1px solid var(--borda); padding: 4px 8px; }
.ed-campo a { color: var(--accent-texto); text-decoration: underline; }
@media (max-width: 720px) { .ed-botao { width: 44px; height: 44px; } }
.ed-rico.ed-arrastando { box-shadow: 0 0 0 2px var(--cor-primaria); }
.ed-aviso { margin: 0; padding: 6px 12px; font-size: 12.5px; color: var(--texto-secundario); border-top: 1px solid var(--borda); }
.ed-aviso-erro { color: var(--vermelho-escuro); }
.ed-modo { margin-left: auto; align-self: center; }
.ed-rico .ed-codigo { display: block; width: 100%; min-height: 320px; max-height: 70vh; border: 0; border-radius: 0; resize: vertical; padding: 12px 14px;
  font-family: ui-monospace, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.55; background: var(--fundo); }
.ed-rico .ed-codigo[hidden] { display: none; }
.ed-rico .ed-codigo:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--cor-primaria); }

/* Fase 71: o olhinho da senha na pagina do usuario ganha o alvo de toque de 44 px no celular (o campo cresce junto) */
@media (max-width: 720px) { .up-campos .senha-caixa > .input { min-height: 44px; } }

/* dono, 19/10: o interruptor dos termos de entrada no topo de /adm/termos */
.termos-entrada { margin-bottom: var(--sp-4); }
.termos-entrada-linha { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.termos-entrada-titulo { margin: 0 0 4px; font-weight: 600; color: var(--texto); }

/* ---------- dono, 19/10: o registro dos aceites (templates/vitrine/meus_termos.html e o quadro da Privacidade) ---------- */
.sidebar-privacidade { justify-content: center; align-items: center; gap: 2px 6px; white-space: nowrap; }
.sidebar-sep { color: var(--texto-fraco); }
.mt-pagina { width: 100%; max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.mt-titulo { margin: 0; font-size: var(--fs-xl); }
.mt-sub, .mt-meta { margin: 0; font-size: 13.5px; color: var(--texto-secundario); }
.mt-termo { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mt-termo-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mt-termo-titulo { margin: 0; font-size: 16px; }
.mt-prova { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; padding: 12px 14px; border: 1px solid var(--borda); border-radius: var(--raio); font-size: 13.5px; }
.mt-prova dt { font-weight: 600; color: var(--texto-secundario); }
.mt-prova dd { margin: 0; color: var(--texto); overflow-wrap: anywhere; min-width: 0; }
.mt-pendente { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px; }
.mt-texto summary { cursor: pointer; font-weight: 600; min-height: 32px; display: flex; align-items: center; }
.mt-prova-caixa { display: flex; flex-direction: column; gap: 8px; }
.mt-prova-titulo { margin: 0; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.ma-link-termos { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-texto); text-decoration: underline; min-height: 32px; }
.ma-aceites { margin: 0; font-size: 13px; color: var(--texto-secundario); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ma-aceites a { color: var(--accent-texto); text-decoration: underline; }
/* dono, 22/10: a /privacidade de quem entrou mostra so o ultimo aceite, com o botao que abre todos (templates/lgpd/_privacidade_registro.html) */
.priv-reg-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.priv-aceites { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
@media (max-width: 520px) { .mt-prova { grid-template-columns: 1fr; gap: 2px; } .mt-prova dd { margin-bottom: 8px; } }
@media (max-width: 720px) { .ma-link-termos, .mt-texto summary, .priv-todos { min-height: 44px; } }

/* Fases 72 e 73 (dono, 19/10): o modal Duplicar turma, a previa do que vai junto e do que fica de fora (templates/adm/_turma_duplicar.html) */
.td-previa { border-top: 1px solid var(--borda); padding-top: var(--sp-3); min-height: 120px; }
.td-titulo { margin: 0 0 6px; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; color: var(--texto); }
.td-titulo + .td-lista { margin-bottom: var(--sp-3); }
.td-lista { margin: 0; padding-left: 20px; font-size: 13.5px; line-height: 1.55; color: var(--texto-secundario); overflow-wrap: anywhere; }
.td-motivo { color: var(--text-fraco); }
.td-aviso { margin: var(--sp-2) 0 0; padding: 10px 12px; border-radius: var(--raio-sm); background: var(--ambar-suave); font-size: 13px; color: var(--texto); overflow-wrap: anywhere; }

/* dono, 19/10: o botao Conectar ao Claude e a chave da valvula na tela Conexoes do MCP (templates/dev/mcp_conexoes.html, static/js/conectar_claude.js) */
.cn-claude { display: flex; flex-direction: column; gap: var(--sp-3); }
.cn-claude-topo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.cn-claude-btn { min-height: 48px; padding: 0 20px; gap: 10px; font-size: 15px; font-weight: 600; }
.cn-claude-logo { width: 22px; height: 22px; flex: 0 0 auto; }
.cn-claude-aviso { margin: 0; font-size: 14px; font-weight: 600; color: var(--texto); }
.cn-claude-passos { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.6; color: var(--texto-secundario); }
.cn-claude-valvula { border-top: 1px solid var(--borda); padding-top: var(--sp-3); display: flex; flex-direction: column; gap: 6px; }
.cn-claude-nota { margin: 0; font-size: 13px; color: var(--texto-secundario); }

/* ---------- Fase 104 (dono, 22/10): a ARVORE das turmas (templates/adm/turmas_arvore.html). A arvore recuada: cada nivel tem a linha vertical
   do pai (border-left do .arv-filhos) e o traco horizontal ate o cartao (::before do .arv-no); so tokens, sem a cor da marca. ---------- */
.arv-legenda { margin: 0 0 var(--sp-4); font-size: 13px; color: var(--texto-suave); max-width: 72ch; }
.arv-arvore, .arv-filhos { list-style: none; margin: 0; padding: 0; }
.arv-arvore > .arv-no + .arv-no { margin-top: var(--sp-5); }
.arv-filhos { margin-left: var(--sp-5); padding-left: var(--sp-5); border-left: 2px solid var(--borda); }
.arv-filhos > .arv-no { position: relative; margin-top: var(--sp-3); }
.arv-filhos > .arv-no::before { content: ""; position: absolute; left: calc(-1 * var(--sp-5)); top: 26px; width: var(--sp-5); border-top: 2px solid var(--borda); }
.arv-cartao { padding: var(--sp-3) var(--sp-4); max-width: 640px; min-width: 0; }
.arv-nomes { display: flex; flex-direction: column; gap: 2px; }
.arv-nome { font-weight: 600; color: var(--texto); text-decoration: none; overflow-wrap: anywhere; }
.arv-nome:hover, .arv-nome:focus-visible { text-decoration: underline; }
.arv-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-2); font-size: 13px; color: var(--texto-secundario); }
.arv-meta span { display: inline-flex; align-items: center; gap: var(--sp-1); }
.arv-a-mais { color: var(--texto-suave); }
.arv-tambem { margin: var(--sp-2) 0 0; font-size: 12.5px; color: var(--texto-suave); overflow-wrap: anywhere; }
.arv-cursos { margin-top: var(--sp-2); font-size: 13px; }
.arv-cursos summary { cursor: pointer; color: var(--texto-secundario); display: inline-flex; align-items: center; min-height: 32px; }
.arv-cursos ul { margin: var(--sp-1) 0 0; padding-left: var(--sp-5); color: var(--texto-secundario); line-height: 1.6; }
.arv-sem-curso { margin-top: var(--sp-6); padding: var(--sp-4); max-width: 640px; }
.arv-sem-titulo { margin: 0; font-size: 15px; font-weight: 700; color: var(--texto); }
.arv-sem-curso ul { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.arv-sem-curso li { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: baseline; }
.arv-qtde { font-size: 12.5px; color: var(--texto-suave); }
@media (max-width: 720px) {
  .arv-filhos { margin-left: var(--sp-2); padding-left: var(--sp-3); }
  .arv-filhos > .arv-no::before { left: calc(-1 * var(--sp-3)); width: var(--sp-3); }
  .arv-cursos summary, .arv-nome { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ---------- A COBERTURA do banco de perguntas (Fase 105, /adm/perguntas/cobertura): a faixa com a trilha e o resumo (uma linha de texto, sem
   KPI), um .cd por no do caminho com a etiqueta (icone e texto) a direita e a prancha fixa ol.cb-aulas. So tokens, sem a cor da marca. ---------- */
.cb-faixa { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-2) var(--sp-5); margin-bottom: var(--sp-5); }
.cb-trilha { margin: 0; min-width: 0; }
.cb-campo { margin: 0; }
.cb-campo .selectbusca { width: min(420px, 100%); }
.cb-resumo { margin: 0; padding-bottom: 8px; font-size: 13px; color: var(--texto-secundario); min-width: 0; overflow-wrap: anywhere; }
.cb-cartao { margin-bottom: var(--sp-4); min-width: 0; }
.cb-cartao .cd-header { gap: var(--sp-3); flex-wrap: wrap; }
.cb-cartao .cd-titulo { min-width: 0; overflow-wrap: anywhere; }
.cb-etiqueta { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 3px 10px;
  border-radius: var(--raio-full); white-space: nowrap; }
.cb-ok { background: var(--verde-suave); color: var(--verde-escuro); }
.cb-alerta { background: var(--ambar-suave); color: var(--ambar-escuro); }
.cb-erro { background: var(--vermelho-suave); color: var(--vermelho-escuro); }
.cb-neutro { background: var(--fundo); color: var(--texto-secundario); }
.cb-conta { margin: 0; font-size: 13px; color: var(--texto-secundario); }
.cb-aulas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cb-aula { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-1) var(--sp-4);
  padding: var(--sp-2) 0; border-top: 1px solid var(--borda); min-width: 0; }
.cb-aula-nome { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 280px; }
.cb-aula-nome a { color: var(--texto); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.cb-aula-nome a:hover, .cb-aula-nome a:focus-visible { text-decoration: underline; }
.cb-curso { font-weight: 400; color: var(--texto-secundario); }
.cb-onde { font-size: 12.5px; color: var(--texto-suave); overflow-wrap: anywhere; }
.cb-aula-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); font-size: 12.5px; color: var(--texto-secundario); min-width: 0; }
.cb-fonte { display: inline-flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); }
.cb-fonte span { display: inline-flex; align-items: center; gap: 4px; }
.cb-leg-chegou { color: var(--verde-escuro); }
.cb-leg-erro { color: var(--vermelho-escuro); }
.cb-aprovadas { font-weight: 600; color: var(--texto); }
.cb-rascunhos { color: var(--accent-texto); font-weight: 600; }
.cb-fora .cb-aula-nome a, .cb-fora .cb-aprovadas { color: var(--texto-suave); }
@media (max-width: 720px) {
  .cb-aula-nome a, .cb-rascunhos { min-height: 44px; display: inline-flex; align-items: center; }
  .cb-campo .sb-display { min-height: 44px; }
}