/* 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; }
.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; }

.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);
}
.capa .capa-rodape { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.capa .capa-nome {
  font-size: 13px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* barra de progresso SEMPRE a vista (antes so aparecia no hover, e o toque nao tem hover): <progress>, sem largura em style */
.capa-prog { display: flex; align-items: center; gap: 8px; }
.capa-prog progress {
  -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 6px; border: 0; border-radius: var(--raio-full);
  background: var(--border); overflow: hidden;
}
.capa-prog progress::-webkit-progress-bar { background: var(--border); border-radius: var(--raio-full); }
.capa-prog progress::-webkit-progress-value { background: linear-gradient(90deg, var(--accent), var(--accent-hover)); border-radius: var(--raio-full); }
.capa-prog progress::-moz-progress-bar { background: linear-gradient(90deg, var(--accent), var(--accent-hover)); border-radius: var(--raio-full); }
.capa-pct { flex: 0 0 auto; min-width: 3ch; text-align: right; font-size: 11px; font-weight: 600; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.capa .cadeado {
  position: absolute; top: 8px; right: 8px;
  width: 30px; height: 30px; border-radius: var(--raio-full);
  background: var(--scrim); backdrop-filter: var(--blur);
  display: grid; place-items: center; color: var(--warning); font-size: 15px;
}
.capa.bloqueada .capa-img img, .capa.bloqueada .capa-placeholder { filter: grayscale(.55) brightness(.7); }

/* 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) {
  .capa { width: min(250px, 42vw); }
  .capa.horizontal { width: min(380px, 72vw); }
  .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-secao img { width: 100%; display: block; }  /* banner sempre 100% da largura */

/* 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; }
.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; }
.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); }
.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-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 240px));
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.ma-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--raio);
  padding: var(--sp-4);
  transition: var(--transicao);
}
.ma-card i { font-size: 26px; color: var(--text-dim); }
.ma-card .ma-titulo { font-weight: 700; font-size: 14px; letter-spacing: -.01em; color: var(--text); }
.ma-card .ma-sub { font-size: 12px; color: var(--text-fraco); }
.ma-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.ma-card.ativo { border-color: var(--accent); background: var(--accent-soft); }
.ma-card.ativo i { color: var(--accent); }

.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; }

/* 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; }

.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; }
.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); }

/* ---------- 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; }
.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; }
}

/* ---------- 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; }
.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: 640px; }
.seg-form { display: flex; flex-direction: column; gap: 14px; }
.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 { font-size: 16px; margin: 8px 0 0; color: var(--text); }
.priv-texto p { margin: 0; }
.priv-texto ul { 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; }
.priv-dados {
  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 { font-weight: 600; color: var(--text-dim); }
.priv-dados dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.lgpd-resumo { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; line-height: 1.5; color: var(--text-dim); }
.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; }
@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); }
.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; }
.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; }

/* ---------- 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-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;
}
.sino-painel {
  position: absolute; left: 12px; bottom: calc(100% - 6px); 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);
}
.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: 240px minmax(0, 1fr); gap: var(--sp-4); align-items: start; flex: 1 1 auto; }
.com-layout > .com-principal { align-self: stretch; }   /* o .vz{flex:1} do canal vazio centra na altura que sobrou */
.com-canais {
  position: sticky; top: var(--sp-5); max-height: calc(100vh - 48px); overflow-y: auto;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--raio); padding: 10px 8px;
  display: flex; flex-direction: column; gap: 12px;
}
.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; }

.com-principal { min-width: 0; max-width: 860px; display: flex; flex-direction: column; gap: var(--sp-3); }
.com-cab { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.com-cab-titulo { flex: 1; min-width: 200px; }
.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; border-left: 2px solid var(--borda); }
.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) {
  .com-layout { grid-template-columns: minmax(0, 1fr); }
  .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-cab .btn-primario { width: 100%; justify-content: center; }
  .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; }
}

/* ======================================================================
   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(6, 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); }
@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; }
}
/* ======================================================================
   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; }
/* 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; }
.estrelas button { min-width: 32px; min-height: 32px; }
.estrelas button.on { color: var(--warning); }

/* 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-pane { display: none; max-height: calc(100vh - 220px); overflow-y: auto; }
.aula-pane.ativo { display: block; }
.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); }
.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); }
.aula-respostas { display: flex; flex-direction: column; gap: var(--sp-2); padding-left: var(--sp-3); border-left: 2px solid var(--borda); }
.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); }
.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); }
.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; }
  .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; }
  .estrelas button { min-width: 44px; 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); }
.ma-favoritas { max-width: 720px; }
.ma-fav-texto { flex: 1; }
.ma-fav-sub { display: block; font-size: 11px; color: var(--text-fraco); }
.ma-cursos-turma { font-size: 12.5px; }
.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; }

@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: cada grupo da sidebar leva a cor dele num pontinho (classe .gv-<grupo> do proprio grupo, tokens --grupo-*; CV-001) */
.sidebar-nav .grupo-label::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: var(--raio-full); margin-right: 8px;
  background: var(--gv-cor, var(--grupo-padrao)); vertical-align: 1px;
}

/* 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; }
.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; }
.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); }
.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 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 ---------- */
.ma-card[aria-current="page"] { border-color: var(--accent); background: var(--accent-soft); }
.ma-card[aria-current="page"] i { color: var(--accent); }
.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 (.ma-card, .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;
  }
  .ma-card:hover, .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); }
.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); }   /* 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; }
.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; }

/* ---------- 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) { width: 34%; }
.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:nth-child(1), .ial-tab-previa td:nth-child(1), .ial-tab-previa th:nth-child(4), .ial-tab-previa td:nth-child(4) { width: 100%; }
  .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); }
}

/* ---------- 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; }
.av-gatilho.fu-presets button { flex: 1 1 auto; height: auto; min-height: 34px; padding: 6px 12px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.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; }
.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 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; }

/* ---------- 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; } }

/* ---------- 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-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; }
.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; }
.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) */