/* =====================================================================
   TEMAS
   =====================================================================
   Dois temas completos. As telas não conhecem cor nenhuma direto: tudo sai
   destas variáveis, então trocar de tema não exige tocar em componente.
   O tema fica em data-tema no <html> (claro | escuro) e é escolhido pelo
   operador; sem escolha, vale a preferência do sistema. */

:root,
:root[data-tema='claro'] {
  --navy: #0B1F3A;
  --gold: #E0AF2D;
  --bg: #F4F2ED;
  --superficie: #FFFFFF;
  --superficie-2: #FAF8F3;
  --texto: #0A0A0A;
  --texto-suave: #23262B;
  --borda: #DAD6CB;
  --branco: #FFFFFF;
  --verde: #2E7D32;
  --vermelho: #B3261E;
  --lateral-fundo: #0B1F3A;
  --lateral-texto: #E8E6E1;
  --lateral-ativo: rgba(200, 162, 75, 0.16);
  --dourado: #E0AF2D;
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.04);

  /* ACENTO E BOTAO — ver o bloco "PADRAO DE BOTAO" mais abaixo.
     No claro o acento continua sendo o dourado do escritorio, e o botao
     primario continua solido: sobre fundo claro, contorno translucido
     nao tem contraste para ser lido como botao. */
  --acento: #E0AF2D;
  /* Dourado escurecido ate a letra passar de 7:1 sobre #F4F2ED.
     Mesma familia do #E0AF2D: e o mesmo dourado com menos luz. */
  --acento-texto: #5E4300;
  --ouro-texto: #5E4300;
  --acento-fraco: rgba(224, 175, 45, .14);
  --acento-fio: rgba(224, 175, 45, .42);
  --btn-fundo: #0B1F3A;
  --btn-texto: #F4F2ED;
  --btn-fio: transparent;
  --btn-ouro-fundo: #E0AF2D;
  --btn-ouro-texto: #0B1F3A;
  --btn-ouro-fio: transparent;
  --btn-2-fundo: #FFFFFF;
  --btn-2-fio: #DAD6CB;
  --brilho-ouro: 224, 175, 45;
  --brilho-acento: 200, 162, 75;
  --brilho-perigo: 179, 38, 30;
  --brilho-navy: 11, 31, 58;
}

:root[data-tema='escuro'] {
  --navy: #E8BC3E;
  --gold: #E8BC3E;
  --bg: #101418;
  --superficie: #171C22;
  --superficie-2: #1D242B;
  --texto: #ECEFF2;
  --texto-suave: #9AA4AE;
  --borda: #2A323B;
  --branco: #171C22;
  --verde: #5BBF6A;
  --vermelho: #F0776C;
  --lateral-fundo: #0B0E12;
  --lateral-texto: #D6DCE2;
  --lateral-ativo: rgba(224, 184, 76, 0.14);
  --dourado: #E8BC3E;
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.4);

  /* No escuro o acento e o ciano do Kairogen, e o botao primario e o
     dele: preenchimento translucido, fio de 1px e a letra na cor do
     acento. Medido no app.kairogen.ai em 10/09. */
  --acento: #00FFFF;
  --acento-texto: #00FFFF;
  --ouro-texto: #E8BC3E;
  --acento-fraco: rgba(0, 255, 255, .15);
  --acento-fio: rgba(0, 255, 255, .38);
  /* PREENCHIMENTO SOLIDO CONTINUA DOURADO, tambem no escuro. O padrao
     do Kairogen que vale para todo o sistema e a FORMA e a LINHA (canto
     arredondado, fio luminoso que pulsa), nao o preenchimento: trocar o
     dourado por ciano apagaria a marca do escritorio do botao principal
     de 24 telas. Quem vira contorno translucido e o secundario. */
  --btn-fundo: #E8BC3E;
  --btn-texto: #0A0D10;
  --btn-fio: transparent;
  --btn-ouro-fundo: #E8BC3E;
  --btn-ouro-texto: #0A0D10;
  --btn-ouro-fio: transparent;
  --btn-2-fundo: rgba(255, 255, 255, .04);
  --btn-2-fio: rgba(255, 255, 255, .16);
  /* O halo de cada familia, em canal cru para o rgba() montar a opacidade. */
  --brilho-ouro: 232, 188, 62;
  --brilho-acento: 0, 255, 255;
  --brilho-perigo: 240, 119, 108;
  --brilho-navy: 232, 188, 62;
}

/* Sem escolha salva, segue o sistema. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) {
    --navy: #E8BC3E;
    --gold: #E8BC3E;
    --bg: #101418;
    --superficie: #171C22;
    --superficie-2: #1D242B;
    --texto: #ECEFF2;
    --texto-suave: #9AA4AE;
    --borda: #2A323B;
    --branco: #171C22;
    --verde: #5BBF6A;
    --vermelho: #F0776C;
    --lateral-fundo: #0B0E12;
    --lateral-texto: #D6DCE2;
    --lateral-ativo: rgba(224, 184, 76, 0.14);
    --dourado: #E8BC3E;
    --sombra: 0 1px 2px rgba(0, 0, 0, 0.4);

    --acento: #00FFFF;
    --acento-texto: #00FFFF;
    --ouro-texto: #E8BC3E;
    --acento-fraco: rgba(0, 255, 255, .15);
    --acento-fio: rgba(0, 255, 255, .38);
    --btn-fundo: #E8BC3E;
    --btn-texto: #0A0D10;
    --btn-fio: transparent;
    --btn-ouro-fundo: #E8BC3E;
    --btn-ouro-texto: #0A0D10;
    --btn-ouro-fio: transparent;
    --btn-2-fundo: rgba(255, 255, 255, .04);
    --btn-2-fio: rgba(255, 255, 255, .16);
    --brilho-ouro: 232, 188, 62;
    --brilho-acento: 0, 255, 255;
    --brilho-perigo: 240, 119, 108;
    --brilho-navy: 232, 188, 62;

    /* MEDIDO 10/09: os tokens --hg-* tinham valor no :root claro e no
       :root[data-tema='escuro'], e NAO tinham aqui. Quem nunca escolheu
       tema e usa o Windows no escuro caia num meio-termo: fundo escuro
       com cartao #F7F8FA e letra #232833 por cima. Nao era escolha de
       design, era um bloco que faltava. */
    --hg-fundo: #1D242B;
    --hg-linha: rgba(255, 255, 255, 0.08);
    --hg-forte: #ECEFF2;
    --hg-medio: #C2CAD3;
    --hg-fraco: #9AA4AE;
    --hg-ativo: #2A323B;
    --hg-escuro: #E8BC3E;
    --hg-vivo: #5BBF6A;
  }
}

* { box-sizing: border-box; }

/* BOTAO SEM CLASSE — o desenho padrao, no lugar do desenho do navegador.
   ---------------------------------------------------------------------
   MEDIDO: 33 botoes do sistema nao tem className nenhum (os ✕ de fechar,
   o ⟳ de recarregar, os alternadores de nicho). Sem regra, eles herdam o
   botao cinza do proprio navegador — que no TEMA ESCURO aparece como uma
   caixa BRANCA no meio da tela preta. Isso ja era assim antes do fio
   luminoso; o fio so tornou obvio.

   `:not([class])` casa exatamente esses 33 e mais nada. E este bloco fica
   aqui em cima, logo depois do reset, DE PROPOSITO: qualquer regra com
   classe ou com pai (`.sino-cabecalho button`) vem depois e vence. E um
   piso, nao uma imposicao. */
/* MEDIDO: `<button class="card">` computava `color: rgb(0,0,0)` sobre um
   cartao #171C22 — preto no escuro, ilegivel. A causa nao e o `.card`, e
   o navegador: um <div> herda a cor do corpo, um <button> NAO — ele cai
   no `buttontext` do sistema operacional, que e preto. Toda regra deste
   arquivo que nao declara `color` tinha esse buraco; so aparecia onde a
   classe era usada num botao.

   Especificidade 0,0,1: qualquer regra com classe que declare cor vence.
   Isto so preenche o vazio. */
button { color: inherit; }

button:not([class]) {
  background: var(--superficie);
  color: var(--texto);
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 4px 10px;
  font: inherit;
  line-height: 1.3;
  cursor: pointer;
}
button:not([class]):hover { border-color: var(--acento-texto); color: var(--acento-texto); }
button:not([class]):disabled { opacity: .5; cursor: not-allowed; }

body {
  margin: 0;
  font-family: 'DejaVu Sans', 'Segoe UI', Arial, sans-serif;
  background: var(--bg);
  color: var(--texto);
}

/* =====================================================================
   LAYOUT COM BARRA LATERAL
   ===================================================================== */

.aplicacao {
  display: flex;
  min-height: 100vh;
}

.barra-lateral {
  /* A largura vira variável: o operador arrasta a borda e ela muda. O
     tamanho da letra acompanha, senão a barra larga fica com letra miúda
     no meio de um vazio. */
  width: var(--largura-lateral, 232px);
  flex: 0 0 var(--largura-lateral, 232px);
  font-size: var(--fonte-lateral, 13px);
  position: relative;
  background: var(--lateral-fundo);
  color: var(--lateral-texto);
  display: flex;
  flex-direction: column;
  position: sticky;
  /* CASCA NO PADRAO HEYGEN. Medido 09/09 em /home (viewport 1512x900): a
     barra nao encosta na borda — e um cartao flutuante em x=8, y=8, com
     884 de altura (8px de folga em cima e embaixo), raio 24 e um fio de
     1px. A COR fica a nossa: o azul e o dourado sao a identidade do
     escritorio, e copiar o branco do HeyGen jogaria fora a marca para
     ganhar nada. O que se copia aqui e a forma. */
  top: 8px;
  margin: 8px 0 8px 8px;
  height: calc(100vh - 16px);
  border-radius: 24px;
  border: 1px solid var(--borda);
  overflow-y: auto;
  transition: width 0.15s ease, flex-basis 0.15s ease;
}
.barra-lateral.recolhida {
  width: 64px;
  flex-basis: 64px;
  font-size: 13px;
}
/* Recolhimento TOTAL: a barra sai da tela e o conteúdo ocupa tudo. */
.barra-lateral.oculta {
  width: 0;
  flex-basis: 0;
  overflow: hidden;
  border: none;
}

/* A alça de arrasto: a linha da borda direita. Fica invisível até o mouse
   chegar perto — é uma borda que responde, não mais um controle na tela. */
.puxador-lateral {
  position: absolute;
  top: 0;
  right: -3px;
  width: 7px;
  height: 100%;
  cursor: col-resize;
  z-index: 20;
  background: transparent;
  transition: background 0.12s ease;
}
.puxador-lateral:hover,
.puxador-lateral.arrastando { background: var(--gold); }
.barra-lateral.oculta .puxador-lateral { display: none; }

/* Botão que traz a barra de volta quando ela está totalmente recolhida. */
.trazer-lateral {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 900;
  background: var(--lateral-fundo);
  color: var(--gold);
  border: 1px solid var(--borda);
  border-left: none;
  border-radius: 0 8px 8px 0;
  padding: 14px 5px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
}

.marca-lateral {
  padding: 16px 14px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.marca-lateral .nome { font-size: 14px; font-weight: 700; line-height: 1.25; }
.marca-lateral .nome .rotulo-item span { color: var(--gold); display: block; font-weight: 600; font-size: 12px; }
.marca-curta { display: none; font-size: 16px; color: var(--gold); }

/* Recolhida: sobram os ícones. Vale tanto pro botão quanto pra tela estreita. */
.barra-lateral.recolhida .rotulo-item,
.barra-lateral.recolhida .grupo-lateral { display: none; }
.barra-lateral.recolhida .marca-curta { display: block; text-align: center; }
.barra-lateral .item-lateral { font-size: inherit; }
.barra-lateral .grupo-lateral { font-size: calc(var(--fonte-lateral, 13px) - 3px); }
.barra-lateral .icone { font-size: calc(var(--fonte-lateral, 13px) + 2px); }
.marca-lateral .nome { font-size: calc(var(--fonte-lateral, 13px) + 1px); }
.barra-lateral.recolhida .item-lateral,
.barra-lateral.recolhida .botao-lateral { justify-content: center; }

.grupo-lateral {
  padding: 12px 10px 4px;
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}

.item-lateral {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 1px 8px;
  padding: 9px 10px;
  /* raio 16, como as fichas da trilha do HeyGen (48x76, raio 16) */
  border-radius: 16px;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--lateral-texto);
  border-left: 3px solid transparent;
  white-space: nowrap;
  overflow: hidden;
}
/* =====================================================================
   OS ITENS DA BARRA LATERAL NO PADRAO DO SISTEMA
   =====================================================================
   Eles estavam de fora, e a razao e que sao `<div>` e nao `<button>`: as
   regras do halo pulsante casam `button`, entao a barra lateral — que e a
   primeira coisa que se ve — era o unico lugar do painel sem a linha
   luminosa. O rotulo "botao" que o operador usou esta certo: eles se
   comportam como botao, so nao sao um.
   
   Aqui eles recebem o MESMO tratamento das outras familias:
     ativo ..... halo DOURADO pulsante, como `.botao.dourado`
     os demais . linha de acento pulsante, como `.botao.secundario`
   
   A BARRA DA ESQUERDA E SEMPRE ESCURA, nos dois temas (--lateral-fundo e
   #0B1F3A no claro e #0B0E12 no escuro). Por isso ela usa o pulso do tema
   ESCURO sempre: `pulso-suave` foi calibrado para brilhar sobre fundo
   claro e sobre a navy ele praticamente desaparece.
   
   O ATRASO ESCALONADO nao e enfeite. Trinta itens pulsando no MESMO
   compasso viram um alarme piscando no canto do olho; escalonados, a
   barra parece viva em vez de avisar sobre alguma coisa. E o mesmo
   recurso que ja separa `.botao` de `.botao.secundario` (-1.1s). */
.item-lateral {
  --brilho: var(--brilho-acento);
  animation: pulso-do-fio 3.2s ease-in-out infinite;
  transition: background .12s, color .12s;
}
/* Quatro compassos, distribuidos pela ordem dentro do grupo. */
.item-lateral:nth-child(4n + 1) { animation-delay: 0s; }
.item-lateral:nth-child(4n + 2) { animation-delay: -0.8s; }
.item-lateral:nth-child(4n + 3) { animation-delay: -1.6s; }
.item-lateral:nth-child(4n)     { animation-delay: -2.4s; }

.item-lateral:hover {
  background: rgba(255, 255, 255, 0.06);
  /* Mao em cima acende na hora, sem esperar o compasso — mesma regra dos
     botoes. */
  animation: none;
  box-shadow: 0 0 0 1px rgba(var(--brilho), .9), 0 0 14px rgba(var(--brilho), .38);
}
.item-lateral.ativo {
  background: var(--lateral-ativo);
  border-left-color: var(--gold);
  color: #fff;
  /* 600 e o peso do rotulo aceso no HeyGen (11/600 na trilha) */
  font-weight: 600;
  /* Dourado, como todo elemento aceso do sistema. */
  --brilho: var(--brilho-ouro);
}

/* Quem nao quer movimento nao tem movimento — a barra inteira incluida. */
@media (prefers-reduced-motion: reduce) {
  .item-lateral { animation: none; box-shadow: 0 0 0 1px rgba(var(--brilho), .45); }
}
.item-lateral .icone { width: 18px; text-align: center; flex: 0 0 18px; font-size: 15px; }

.rodape-lateral {
  margin-top: auto;
  padding: 10px 8px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.botao-lateral {
  width: calc(100% - 4px);
  margin: 3px 2px;
  background: transparent;
  color: var(--lateral-texto);
  /* Linha de acento, e nao o cinza de 16% que estava aqui: o cinza nao
     pertence a familia nenhuma do sistema e fazia os tres botoes do pe da
     barra parecerem de outro programa. */
  border: 1px solid rgba(var(--brilho-acento), 0.35);
  /* O raio final vem do bloco de harmonizacao la embaixo (10px, o mesmo
     de .dobra-titulo, .cartao-destino e .centro-comando). Nao repito o
     numero aqui: dois lugares com o mesmo valor divergem no dia em que um
     deles muda. */
  padding: 8px 10px;
  font-size: 12.5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
}
.botao-lateral:hover { background: rgba(255, 255, 255, 0.08); }

/* A BARRA E SEMPRE ESCURA, nos dois temas. No tema claro os botoes do
   sistema recebem `pulso-suave`, que foi calibrado para fundo claro e
   sobre a navy some. Aqui dentro o pulso e sempre o do escuro — senao a
   barra ficaria sem linha justamente no tema que o operador usa de dia. */
/* `:root` na frente para VENCER as regras de tema.
   `:root[data-tema='claro'] button` pesa (0,2,1) e `.barra-lateral
   .botao-lateral` pesa (0,2,0) — perdia por um ponto, e o resultado era o
   pulso do tema claro sobre a navy, onde ele nao aparece. */
:root .barra-lateral .botao-lateral,
:root .barra-lateral .item-lateral {
  --brilho: var(--brilho-acento);
  animation: pulso-do-fio 3.2s ease-in-out infinite;
}
:root .barra-lateral .item-lateral.ativo { --brilho: var(--brilho-ouro); }

/* OS ATRASOS VEM DEPOIS DO ATALHO, e isto custou uma medicao para
   perceber: `animation: pulso-do-fio 3.2s ...` e shorthand, e shorthand
   ZERA as sub-propriedades que nao lista — inclusive `animation-delay`.
   Declarados antes, os atrasos eram apagados e os 24 itens pulsavam no
   mesmo compasso, virando um alarme piscando no canto do olho. */
:root .barra-lateral .item-lateral:nth-of-type(4n + 2) { animation-delay: -0.8s; }
:root .barra-lateral .item-lateral:nth-of-type(4n + 3) { animation-delay: -1.6s; }
:root .barra-lateral .item-lateral:nth-of-type(4n)     { animation-delay: -2.4s; }
.barra-lateral .botao-lateral:nth-of-type(2) { animation-delay: -1.1s; }
.barra-lateral .botao-lateral:nth-of-type(3) { animation-delay: -2.2s; }
@media (prefers-reduced-motion: reduce) {
  .barra-lateral .botao-lateral { animation: none; }
}

.area-principal { flex: 1; min-width: 0; }

.topo {
  background: var(--superficie);
  color: var(--texto);
  border-bottom: 1px solid var(--borda);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 5;
}
.topo h1 { font-size: 17px; margin: 0; font-weight: 600; margin-right: auto; }
.alternar-painel {
  background: transparent;
  border: 1px solid var(--borda);
  color: var(--texto-suave);
  border-radius: 8px;
  width: 34px;
  height: 32px;
  margin-right: 12px;
  cursor: pointer;
  font-size: 15px;
}
.alternar-painel:hover { border-color: var(--navy); color: var(--texto); }
.topo span { color: var(--ouro-texto); }

/* LARGURA DO CONTEUDO — e por que nem todo painel quer a mesma.
   ---------------------------------------------------------------------
   O teto de 1100px existe por um motivo bom: linha de texto larga demais
   cansa de ler, porque o olho perde o comeco da linha seguinte. Para
   Registros, Auditoria, Textos e Configuracoes ele esta certo.

   MEDIDO 10/09, com a barra lateral recolhida numa janela de 1400px: o
   Editor de cena e uma BANCADA, nao um texto. A grade de quatro zonas
   media 1052px numa area de 1318px — a ultima coluna terminava em 1148 e
   a area ia ate 1390. Sobravam 240px de vazio a direita, e a coluna de
   propriedades ficava boiando no meio da tela.
   Era exatamente o "fica fora de contexto" relatado: recolher a barra
   liberava espaco que o painel nao usava.

   `.conteudo.largo` tira o teto. Ela vale para os paineis que sao mesa
   de trabalho — editor, studio, estudio de midia, dashboard — e nao para
   os que sao leitura. A largura passa a ser decisao do painel, e nao uma
   regra unica aplicada a naturezas diferentes. */
.conteudo {
  padding: 20px 24px 60px;
  /* O teto era 1100px FIXO: numa tela de 1440 sobravam 92px mortos a
     direita, e recolher a barra nao devolvia nada. O valor de hoje esta
     mais abaixo, junto do bloco da area morta, com a medicao. */
  /* A COLUNA DE CONTEUDO E O CONTEXTO DE MEDIDA DAS GRADES.
     MEDIDO 10/09: com o copiloto da AIRIA aberto, a coluna cai de 1052
     para 910px enquanto a JANELA continua em 1430. As grades de quatro
     colunas quebravam por `@media (max-width:...)`, que le a janela — e
     a janela nao mudou. Resultado: quatro ladrilhos de 219px em vez de
     254, com 10 blocos de texto cortados (a descricao pedia 34px de
     altura e recebia 27; a pilula pedia 200px de largura e recebia 189).
     Era esse o "letras suprimidas, emprensadas".
     Com `container-type: inline-size` as grades passam a perguntar a
     largura de QUEM AS CONTEM. Abrir o copiloto, recolher a sidebar ou
     mudar o zoom passam todos pelo mesmo caminho. */
  container-type: inline-size;
  container-name: coluna;
}
.conteudo.largo { max-width: none; }

/* =====================================================================
   COMPONENTES
   ===================================================================== */

.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
/* CARTAO NO PADRAO HEYGEN.
   Medido 09/09 em /home e /settings: painel de conteudo com raio 16 e
   respiro de 17px; o fio e #E2E3E6, mais claro que o nosso antigo. Raio
   10 e padding 16 eram do desenho velho. */
.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 16px;
  padding: 17px;
  box-shadow: var(--sombra);
}
.cartao .numero { font-size: 28px; font-weight: 700; color: var(--navy); }
.cartao .rotulo { font-size: 13px; color: var(--texto-suave); margin-top: 4px; }

/* BOTOES NO PADRAO HEYGEN.
   Medido 09/09 em /settings, viewport 1512x900: TODO botao e uma pilula
   de raio 100 com 32px de altura e texto 14/600. Tres variantes:
     primario   fundo #19191A, sem fio
     secundario fundo branco, fio 1px #E2E3E6
     perigo     fundo #E54945
   A COR do primario continua a nossa (dourado do escritorio) — copiar o
   preto do HeyGen jogaria fora a marca para ganhar nada. O que se copia
   e a FORMA: pilula, altura, peso da letra. */
/* PADRAO DE BOTAO — um so, para o sistema inteiro.
   ---------------------------------------------------------------------
   Havia dois desenhos de botao convivendo: o do sistema (preenchimento
   solido, dourado ou navy) e o do modulo Kairogen, que copiava o app
   deles (preenchimento translucido, fio de 1px e a letra na cor do
   acento). No tema escuro isso ficava evidente: um botao chapado de
   dourado ao lado de um botao vazado de ciano, na mesma tela.

   Agora e um desenho so, e a diferenca entre claro e escuro esta nos
   tokens, nao em regras duplicadas:

     claro   NADA MUDA. Continua solido: navy no primario, dourado no
             `.dourado`. Contorno translucido sobre fundo claro nao tem
             contraste bastante para ser lido como botao — seria forma
             bonita e alvo ruim, e o pedido era o escuro.
     escuro  o preenchimento SOLIDO continua dourado (primario e
             `.dourado` sao o mesmo dourado), e o que vem do Kairogen e
             a LINHA: fio luminoso de 1px que pulsa devagar em volta do
             botao. O secundario e que vira contorno translucido.
             O halo de cada botao sai do canal --brilho-* dele, entao o
             dourado brilha dourado e o secundario brilha ciano — halo
             de cor alheia faria o botao parecer de outra familia.

   A FORMA nao muda entre os temas: pilula de 100px, minimo de 32px de
   altura, 14/600. So a cor muda. */
.botao {
  background: var(--btn-fundo);
  color: var(--btn-texto);
  border: 1px solid var(--btn-fio);
  border-radius: 100px;
  min-height: 32px;
  padding: 6px 16px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  cursor: pointer;
  transition: opacity .12s, border-color .12s, background .12s;
}
.botao:hover { opacity: 0.9; }
/* `dourado` virou o nome do primario, e nao mais o nome de uma cor: as
   telas ja escreviam className="botao dourado" em toda parte, e trocar
   isso em 24 paineis so para renomear a classe seria remexer sem ganho.
   Ele e o mesmo do .botao — fica aqui explicito para nao parecer que
   uma das duas formas ficou para tras. */
.botao.dourado { background: var(--btn-ouro-fundo); color: var(--btn-ouro-texto); border-color: var(--btn-ouro-fio); }
/* PERIGO GUARDA A COR VERMELHA DE PROPOSITO. Ele recebe a FORMA nova
   (translucido com fio no escuro), mas nao o acento: aqui a cor e a
   mensagem, e um botao de apagar em ciano igual ao de salvar seria
   bonito e perigoso. */
.botao.perigo { background: var(--vermelho); color: #fff; border-color: transparent; }
.botao.secundario {
  background: var(--btn-2-fundo);
  color: var(--hg-forte);
  border: 1px solid var(--btn-2-fio);
}
.botao.secundario:hover { border-color: var(--acento-texto); color: var(--acento-texto); opacity: 1; }
.botao:disabled { opacity: 0.5; cursor: not-allowed; }
:root[data-tema='escuro'] .botao.perigo,
:root:not([data-tema='claro']) .botao.perigo {
  background: rgba(240, 119, 108, .15);
  border-color: rgba(240, 119, 108, .38);
  color: #F0776C;
}

/* =====================================================================
   LINHA LUMINOSA E PULSANTE — todo botao, so no tema escuro
   =====================================================================
   O pedido: canto arredondado com linha luminosa que pulsa, no escuro,
   em TODO botao do sistema.

   POR QUE A REGRA E SOBRE `button`, E NAO SOBRE UMA LISTA DE CLASSES.
   A primeira versao listava `.botao`, `.botao-lateral`, `.dobra-titulo`
   e mais seis. Contei depois: **442 botoes do sistema tinham uma dessas
   classes e 54 nao tinham** — 34 sem className nenhum (os ✕ de fechar,
   os controles pequenos) e 20 com classe propria (`.hg-prop`,
   `.hg-ficha`, `.hg-pasta`, `.voz-cartao`, `.busca-item`,
   `.copiloto-bolha`...). Uma lista de classes deixa esses 54 de fora hoje
   e deixa de fora o proximo botao que alguem criar amanha. O elemento
   `button` nao tem esse problema: quem e botao, brilha.

   TRES DECISOES QUE VALEM ESTAR ESCRITAS:

   1. E `box-shadow`, e nao `border`. Fio real muda a caixa e empurraria
      o texto de cada botao 1px — em 24 telas isso e realinhar tudo. O
      box-shadow desenha por fora, sem tocar no layout, e ainda permite
      duas camadas: o fio nitido de 1px e o halo difuso atras dele.

   2. O PULSO E LENTO E CURTO DE PROPOSITO: 3,2s, halo de 6px a 14px. Uma
      tela tem dezenas de botoes; pulso rapido ou amplo com todos juntos
      vira letreiro de vitrine e cansa em dois minutos de uso. O
      `animation-delay` negativo por familia tira os grupos de sincronia
      — pulsar TUDO no mesmo compasso e o que mais incomoda.

   3. `prefers-reduced-motion` desliga o pulso e deixa a linha ACESA.
      Quem marcou essa preferencia costuma ter motivo de saude, e a linha
      parada ja cumpre o pedido visual.

   AS DUAS EXCECOES, e o motivo de cada uma:
     desligado          pulsar e chamar, e ele nao aceita clique.
     opcao nao marcada  numa grade de seis opcoes, seis halos iguais
                        apagam qual esta escolhida. O halo ali E a
                        marca; dar a todas seria devolver o problema
                        que os quadrados de marcacao resolveram.

   No tema CLARO nada disso liga: halo sobre fundo claro nao brilha, so
   suja a borda. */
@keyframes pulso-do-fio {
  0%, 100% {
    box-shadow: 0 0 0 1px rgba(var(--brilho), .55), 0 0 6px rgba(var(--brilho), .18);
  }
  50% {
    box-shadow: 0 0 0 1px rgba(var(--brilho), .95), 0 0 14px rgba(var(--brilho), .42);
  }
}

:root[data-tema='escuro'] button,
:root:not([data-tema='claro']) button {
  --brilho: var(--brilho-acento);
  animation: pulso-do-fio 3.2s ease-in-out infinite;
}

/* Cada familia com o seu halo: dourado brilha dourado, perigo brilha
   vermelho. Halo de cor alheia faz o botao parecer de outra familia. */
:root[data-tema='escuro'] .botao,
:root:not([data-tema='claro']) .botao,
:root[data-tema='escuro'] .botao.dourado,
:root:not([data-tema='claro']) .botao.dourado,
:root[data-tema='escuro'] .hg-botao-rodape.escuro,
:root:not([data-tema='claro']) .hg-botao-rodape.escuro {
  --brilho: var(--brilho-ouro);
}
:root[data-tema='escuro'] .botao.secundario,
:root:not([data-tema='claro']) .botao.secundario {
  --brilho: var(--brilho-acento);
  animation-delay: -1.1s;
}
:root[data-tema='escuro'] .botao.perigo,
:root:not([data-tema='claro']) .botao.perigo {
  --brilho: var(--brilho-perigo);
  animation-delay: -2.1s;
}
:root[data-tema='escuro'] .botao-lateral,
:root:not([data-tema='claro']) .botao-lateral,
:root[data-tema='escuro'] .dobra-titulo,
:root:not([data-tema='claro']) .dobra-titulo,
:root[data-tema='escuro'] .kairogen-nav button,
:root:not([data-tema='claro']) .kairogen-nav button {
  animation-delay: -0.7s;
}

/* Passar o mouse acende sem esperar o pulso: resposta imediata vale mais
   que ritmo bonito quando a mao ja esta em cima do botao. */
:root[data-tema='escuro'] button:hover:not(:disabled),
:root:not([data-tema='claro']) button:hover:not(:disabled),
:root[data-tema='escuro'] button:focus-visible,
:root:not([data-tema='claro']) button:focus-visible {
  animation: none;
  box-shadow: 0 0 0 1px rgba(var(--brilho), 1), 0 0 18px rgba(var(--brilho), .5);
}

:root[data-tema='escuro'] button:disabled,
:root:not([data-tema='claro']) button:disabled,
:root[data-tema='escuro'] .direcao-opcao:not(.marcada),
:root:not([data-tema='claro']) .direcao-opcao:not(.marcada),
:root[data-tema='escuro'] .gs-celula:not(.marcada),
:root:not([data-tema='claro']) .gs-celula:not(.marcada) {
  animation: none;
  box-shadow: none;
}

/* =====================================================================
   A MESMA LINHA, SUAVE, NO TEMA CLARO
   =====================================================================
   O halo do escuro chega a 42% de opacidade porque precisa vencer um
   fundo #101418. Sobre #F4F2ED, 42% nao brilha: ENSEBA. Aqui o mesmo
   desenho vem com um terco da forca — fio de 1px entre 22% e 40%, halo
   de 3 a 7px entre 8% e 16%. E a mesma linha, na cor do proprio botao,
   sussurrada.

   O que NAO muda entre os dois temas: a forma (canto arredondado), o
   alcance (todo `button`), as duas excecoes (desligado, e opcao nao
   marcada) e a regra de que o halo tem a cor da familia. E isso que faz
   os dois parecerem o mesmo sistema em duas luzes, e nao dois sistemas.

   A DIFERENCA QUE FICA, e fica de proposito: no claro o botao primario e
   NAVY solido e o `.dourado` e DOURADO solido, dois preenchimentos; no
   escuro os dois sao o mesmo dourado. Sobre fundo claro, dois solidos
   distintos ainda se leem como duas hierarquias; sobre fundo escuro,
   nao — e ali quem separa hierarquia e a linha. */
@keyframes pulso-suave {
  0%, 100% {
    box-shadow: 0 0 0 1px rgba(var(--brilho), .22), 0 1px 3px rgba(var(--brilho), .08);
  }
  50% {
    box-shadow: 0 0 0 1px rgba(var(--brilho), .40), 0 1px 7px rgba(var(--brilho), .16);
  }
}

:root[data-tema='claro'] button,
:root:not([data-tema='escuro']) button {
  --brilho: var(--brilho-acento);
  animation: pulso-suave 3.2s ease-in-out infinite;
}
:root[data-tema='claro'] .botao,
:root:not([data-tema='escuro']) .botao {
  --brilho: var(--brilho-navy);
}
:root[data-tema='claro'] .botao.dourado,
:root:not([data-tema='escuro']) .botao.dourado,
:root[data-tema='claro'] .hg-botao-rodape.escuro,
:root:not([data-tema='escuro']) .hg-botao-rodape.escuro {
  --brilho: var(--brilho-ouro);
}
:root[data-tema='claro'] .botao.secundario,
:root:not([data-tema='escuro']) .botao.secundario {
  --brilho: var(--brilho-acento);
  animation-delay: -1.1s;
}
:root[data-tema='claro'] .botao.perigo,
:root:not([data-tema='escuro']) .botao.perigo {
  --brilho: var(--brilho-perigo);
  animation-delay: -2.1s;
}
:root[data-tema='claro'] .botao-lateral,
:root:not([data-tema='escuro']) .botao-lateral,
:root[data-tema='claro'] .dobra-titulo,
:root:not([data-tema='escuro']) .dobra-titulo,
:root[data-tema='claro'] .kairogen-nav button,
:root:not([data-tema='escuro']) .kairogen-nav button {
  animation-delay: -0.7s;
}
:root[data-tema='claro'] button:hover:not(:disabled),
:root:not([data-tema='escuro']) button:hover:not(:disabled),
:root[data-tema='claro'] button:focus-visible,
:root:not([data-tema='escuro']) button:focus-visible {
  animation: none;
  box-shadow: 0 0 0 1px rgba(var(--brilho), .55), 0 2px 10px rgba(var(--brilho), .22);
}
:root[data-tema='claro'] button:disabled,
:root:not([data-tema='escuro']) button:disabled,
:root[data-tema='claro'] .direcao-opcao:not(.marcada),
:root:not([data-tema='escuro']) .direcao-opcao:not(.marcada),
:root[data-tema='claro'] .gs-celula:not(.marcada),
:root:not([data-tema='escuro']) .gs-celula:not(.marcada) {
  animation: none;
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  :root[data-tema='claro'] button,
  :root:not([data-tema='escuro']) button {
    animation: none;
    box-shadow: 0 0 0 1px rgba(var(--brilho), .32), 0 1px 5px rgba(var(--brilho), .12);
  }
  :root[data-tema='claro'] button:disabled,
  :root:not([data-tema='escuro']) button:disabled,
  :root[data-tema='claro'] .direcao-opcao:not(.marcada),
  :root:not([data-tema='escuro']) .direcao-opcao:not(.marcada),
  :root[data-tema='claro'] .gs-celula:not(.marcada),
  :root:not([data-tema='escuro']) .gs-celula:not(.marcada) {
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-tema='escuro'] button,
  :root:not([data-tema='claro']) button {
    animation: none;
    box-shadow: 0 0 0 1px rgba(var(--brilho), .75), 0 0 10px rgba(var(--brilho), .3);
  }
  :root[data-tema='escuro'] button:disabled,
  :root:not([data-tema='claro']) button:disabled,
  :root[data-tema='escuro'] .direcao-opcao:not(.marcada),
  :root:not([data-tema='claro']) .direcao-opcao:not(.marcada),
  :root[data-tema='escuro'] .gs-celula:not(.marcada),
  :root:not([data-tema='claro']) .gs-celula:not(.marcada) {
    box-shadow: none;
  }
}

/* CANTOS ARREDONDADOS, a outra metade do pedido. O halo desenha a forma
   do botao: num canto reto ele vira um retangulo luminoso, que e
   exatamente o que nao se quer. Este `border-radius` e o piso — qualquer
   regra com classe (a pilula de 100px, o circulo do ✕) continua vencendo,
   porque vem depois e tem mais especificidade. */
button { border-radius: 8px; }
.dobra-titulo { border-radius: 10px; }
.direcao-opcao { border-radius: 8px; }
.direcao-quadro { border-radius: 5px; }

.kanban { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; align-items: start; }
.coluna { background: var(--superficie); border-radius: 10px; padding: 10px; border: 1px solid var(--borda); }
.coluna h3 { font-size: 13px; text-transform: uppercase; color: var(--texto-suave); margin: 4px 8px 10px; }
.cartao-video {
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 8px;
  font-size: 13px;
}
.cartao-video .titulo { font-weight: 600; margin-bottom: 6px; }
.cartao-video .acoes { display: flex; gap: 6px; margin-top: 8px; }
.cartao-video .acoes button { flex: 1; font-size: 12px; padding: 6px; }

table { width: 100%; border-collapse: collapse; background: var(--superficie); border-radius: 8px; overflow: hidden; }
th, td { text-align: left; padding: 10px; border-bottom: 1px solid var(--borda); font-size: 13px; }
th { color: var(--texto-suave); font-weight: 600; }

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.badge.pendente { background: #FFF3D6; color: #8A5A00; }
.badge.em_revisao { background: #EFE4FB; color: #5B3E8E; }
.badge.aprovado { background: #DFF3DF; color: #2E7D32; }
.badge.rejeitado { background: #FBDEDC; color: #B3261E; }
.badge.publicado { background: #E1EEFB; color: #0C447C; }

/* CAMPOS NO PADRAO HEYGEN.
   Medido 09/09 em /settings: rotulo 14/500 na cor forte (nao cinza), 4px
   de folga, e o campo com 38px de altura, raio 12, fio 1px #E2E3E6 e
   texto 14/400. Antes eram 13px cinza, raio 6 e 34px de altura — miudo
   demais para um painel que se opera o dia inteiro. */
.campo { margin-bottom: 18px; }
.campo label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--hg-forte);
  margin-bottom: 4px;
}
.campo input[type="text"], .campo input[type="number"], .campo input[type="password"],
.campo input[type="time"], .campo input[type="date"], .campo input[type="datetime-local"],
.campo input[type="email"], .campo input[type="url"], .campo input[type="search"],
.campo select, .campo textarea, textarea, select,
input[type="text"], input[type="number"], input[type="password"],
input[type="email"], input[type="url"], input[type="search"],
/* SEM ATRIBUTO type TAMBEM.
   `<input value={...} />` e campo de texto para o navegador, mas NAO
   casa com `input[type="text"]` no CSS — o seletor exige o atributo
   escrito. MEDIDO 10/09: os campos de "fonte de pesquisa" e de
   "pagina proibida" saiam com 200px em vez da largura cheia, e a
   causa era esta. Vale para todo campo escrito sem `type`. */
.campo input:not([type]), input:not([type]) {
  width: 100%;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--borda);
  border-radius: 12px;
  font-size: 14px;
  background: var(--superficie);
  color: var(--texto);
  transition: border-color .12s, box-shadow .12s;
}
.campo input:focus, .campo select:focus, .campo textarea:focus,
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-fraco);
}
textarea { font-family: inherit; line-height: 1.45; resize: vertical; }

.tag-lista { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tag {
  background: var(--navy);
  color: var(--bg);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  display: flex;
  gap: 6px;
  align-items: center;
}
.tag button { background: none; border: none; color: var(--ouro-texto); cursor: pointer; font-size: 12px; }

.vazio { color: var(--texto-suave); font-size: 14px; padding: 20px; text-align: center; }

a { color: var(--navy); }

/* Telas estreitas: a lateral vira uma faixa de ícones. */
@media (max-width: 860px) {
  .barra-lateral { width: 64px; flex-basis: 64px; }
  .barra-lateral .rotulo-item,
  .barra-lateral .grupo-lateral { display: none; }
  .barra-lateral .marca-curta { display: block; text-align: center; }
  .barra-lateral .item-lateral,
  .barra-lateral .botao-lateral { justify-content: center; }
  .kanban { grid-template-columns: repeat(2, 1fr); }
  .conteudo { padding: 16px 14px 60px; }
}

/* ---------------------------------------------------------------
   GRADE DE CARDS — 8 por linha
   O padrão de galeria do estúdio: aparências do avatar, projetos de
   gravação, modelos. São 8 por linha em tela larga, e a grade encolhe
   sozinha em tela estreita (6, 4, 3, 2) em vez de espremer o card a
   ponto de a foto não valer nada.
--------------------------------------------------------------- */
/* GALERIAS NO PADRAO HEYGEN.
   Medido 09/09 em /avatar/my-avatars e /projects (viewport 1512x900): o
   cartao tem 275x270, fundo branco e raio 24, com folga de 8px ate a
   midia, que por sua vez tem raio 16. O rotulo e 14/500 e a linha de
   apoio 12/400 — nao os 11px e 9px de antes, que so cabiam porque os
   cartoes eram estreitos demais.
   A grade era de 7 colunas fixas: em 1052px de area util isso dava
   cartoes de 140px, metade do tamanho do original. Agora ela se enche
   sozinha com cartoes de pelo menos 200px, que da a mesma leitura do
   HeyGen em qualquer largura de tela. */
.grade-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.grade-cards .card {
  border: 1px solid var(--borda);
  border-radius: 24px;
  padding: 8px;
  background: var(--superficie);
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s, transform .12s;
  display: flex;
  flex-direction: column;
}
/* CARD PONTILHADO — incluir dentro da grade, com o formato de uma foto.
   Tracejado porque a borda tracejada e a convencao universal de "aqui
   ainda nao tem nada, e voce pode pôr". Solida ele pareceria um item. */
.card-inclusao {
  border: 2px dashed var(--borda);
  border-radius: 10px;
  background: var(--superficie-2);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 12px 8px; min-height: 120px;
  cursor: pointer; text-align: center;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.card-inclusao:hover, .card-inclusao:focus-visible {
  border-color: var(--gold); background: var(--superficie); transform: translateY(-2px);
  outline: none;
}
/* Enquanto o arquivo esta sendo arrastado por cima: o alvo precisa ficar
   obvio, senao a pessoa solta no lugar errado e nada acontece. */
.card-inclusao.sobre {
  border-color: var(--gold); border-style: solid;
  background: rgba(200, 162, 75, .1);
}
.card-inclusao-mais { font-size: 26px; line-height: 1; color: var(--ouro-texto); font-weight: 300; }
.card-inclusao-rotulo { font-size: 12px; font-weight: 600; color: var(--texto); }
.card-inclusao-ajuda { font-size: 10px; color: var(--texto-suave); line-height: 1.3; }

.grade-cards .card:hover { border-color: var(--acento); transform: translateY(-2px); box-shadow: 0 6px 22px rgba(0,0,0,.10); }
.grade-cards .card.marcado { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
/* A foto é o card: proporção 9:16, que é a do vídeo. */
.grade-cards .foto {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  display: block;
  background: var(--superficie-2);
  border-radius: 16px;
}
.grade-cards .foto.larga { aspect-ratio: 16 / 9; }
.grade-cards .sem-foto {
  width: 100%;
  aspect-ratio: 9 / 16;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--superficie-2);
  color: var(--texto-suave);
  font-size: 22px;
  border-radius: 16px;
}
.grade-cards .rotulo {
  padding: 10px 6px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--hg-forte);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.grade-cards .selo {
  font-size: 12px;
  letter-spacing: .2px;
  color: var(--hg-fraco);
  padding: 4px 6px 6px;
}
/* auto-fill ja resolve toda largura; so o telefone precisa de piso menor,
   senao um cartao de 200px estoura a tela de 360. */
@media (max-width: 560px)  { .grade-cards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } }

/* ---------------------------------------------------------------
   LUZ DE SITUAÇÃO (Kanban)
   Pulsa só onde há decisão humana pendente. Quem prefere menos
   movimento na tela (ou tem sensibilidade a isso) tem o pulso
   desligado pelo próprio sistema operacional.
--------------------------------------------------------------- */
@keyframes pulso-luz {
  0%, 100% { box-shadow: 0 0 6px 1px var(--luz); opacity: 0.85; }
  50%      { box-shadow: 0 0 16px 5px var(--luz); opacity: 1; }
}
.luz-pulsante { animation: pulso-luz 1.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .luz-pulsante { animation: none; }
}

/* ---------------------------------------------------------------
   ARRASTO DOS MÓDULOS DA BARRA LATERAL
--------------------------------------------------------------- */
.item-lateral.arrastando { opacity: 0.4; }
.item-lateral.alvo-arrasto { box-shadow: inset 0 2px 0 0 var(--gold); }
.item-lateral .pega {
  cursor: grab;
  opacity: 0;
  font-size: 11px;
  margin-left: auto;
  padding-left: 6px;
  transition: opacity .12s ease;
}
.item-lateral:hover .pega { opacity: 0.5; }
.barra-lateral.recolhida .pega { display: none; }

/* ---------------------------------------------------------------
   CARD COLORIDO PELA SITUAÇÃO (Kanban)
   A cor não é decoração: é o estado do vídeo. Ao publicar, aprovar
   ou rejeitar, o card muda de seção e de cor na mesma passada — a
   transição existe para que a mudança seja vista, não adivinhada.
--------------------------------------------------------------- */
.grade-cards .card.card-situacao {
  border-color: color-mix(in srgb, var(--cor-situacao) 55%, var(--borda));
  box-shadow: inset 0 -3px 0 0 var(--cor-situacao);
  transition: border-color .35s ease, box-shadow .35s ease, transform .12s ease, background .35s ease;
}
.grade-cards .card.card-situacao:hover {
  border-color: var(--cor-situacao);
  background: color-mix(in srgb, var(--cor-situacao) 8%, var(--superficie));
}
.grade-cards .card.card-situacao .selo { color: var(--cor-situacao); }

/* ---------------------------------------------------------------
   IMAGEM INTEIRA (Banco de imagens)
   `contain` em vez de `cover`: num banco de imagens o corte esconde
   justamente o que faz você escolher. O xadrez atrás mostra onde a
   imagem é transparente — decisivo para logomarca em PNG.
--------------------------------------------------------------- */
.imagem-inteira {
  width: 100%;
  height: 170px;
  object-fit: contain;
  border-radius: 6px;
  border: 1px solid var(--borda);
  background-color: var(--superficie-2);
  background-image:
    linear-gradient(45deg, rgba(128,128,128,.10) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(128,128,128,.10) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(128,128,128,.10) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(128,128,128,.10) 75%);
  background-size: 14px 14px;
  background-position: 0 0, 0 7px, 7px -7px, -7px 0;
  display: block;
}

/* ---------------------------------------------------------------
   PEÇAS VIVAS DO PAINEL
--------------------------------------------------------------- */
/* A linha da série se desenha da esquerda para a direita ao entrar. */
@keyframes desenhar-linha { from { stroke-dashoffset: 2000; } to { stroke-dashoffset: 0; } }
.linha-desenhando {
  stroke-dasharray: 2000;
  animation: desenhar-linha 1.1s ease-out forwards;
}

/* A barra da hora corrente respira — é o "está vivo agora". */
@keyframes respirar-barra {
  0%, 100% { opacity: .55; box-shadow: 0 0 0 0 var(--cor-barra); }
  50%      { opacity: 1;  box-shadow: 0 0 8px 1px var(--cor-barra); }
}
.barra-viva { animation: respirar-barra 1.6s ease-in-out infinite; }

/* Marca a chegada de dados novos sem piscar a tela inteira. */
@keyframes pisca-uma-vez { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: .55; } }
.pisca-atualizacao { animation: pisca-uma-vez 1.2s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .linha-desenhando { animation: none; stroke-dasharray: none; }
  .barra-viva, .pisca-atualizacao { animation: none; }
}

/* ---------------------------------------------------------------
   CARTÕES DE DESTINO (Programação e Direcionamento)
   Um toque marca, outro desmarca. O cartão informativo (Ads) não
   tem interruptor de propósito: impulsionamento envolve dinheiro e
   nunca sai sozinho.
--------------------------------------------------------------- */
/* PALCO DO EDITOR DE CENA — medido na tela do HeyGen em 09/09.
   La o quadro 9:16 fica em 324x576 dentro de um palco de 691x644, sobre
   fundo #F7F8FA, com o proprio quadro em #2B2C2D. As proporcoes daqui
   seguem isso; o tamanho e calculado no componente para caber. */
/* O PALCO FICA COM TODA A ALTURA QUE SOBRA.
   ---------------------------------------------------------------------
   MEDIDO 11/09: com `min-height: 360px` numa coluna flex, o quadro 9:16
   saia em 270x480px — 25% do tamanho real. Revisar o corte do avatar e a
   posicao da legenda num quadro desse tamanho e aprovar o que nao se
   conseguiu ver.
   O `flex: 1` com `min-height: 0` e o par obrigatorio: sem o segundo, um
   filho flex nunca encolhe abaixo do proprio conteudo e o `flex: 1` nao
   tem efeito nenhum. */
.editor-palco-area {
  background: #F7F8FA;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 0;
  padding: 12px;
  position: relative;
}
:root[data-tema=escuro] .editor-palco-area,
:root:not([data-tema=claro]) .editor-palco-area { background: var(--superficie-2); }

.palco-cena {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .28);
  -webkit-user-select: none;
  user-select: none;
}
.alca-palco {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--gold);
  border: 1px solid #fff;
  border-radius: 2px;
  pointer-events: none;
}

/* QUATRO ZONAS: trilha | roteiro | palco+tempo | propriedades.
   As fracoes nao sao gosto: sao as larguras MEDIDAS na tela do HeyGen em
   09/09, viewport 1512x900 — roteiro 419, palco 691, propriedades 302. A
   trilha de 62px e a faixa de icones que o HeyGen mantem na borda (la ela
   tem 78px e vale para o app inteiro; aqui vale para o editor). */
.editor-heygen {
  display: grid;
  grid-template-columns: 62px minmax(0, 419fr) 6px minmax(0, 691fr) 6px minmax(0, 302fr);
  gap: 8px;
  align-items: stretch;
  /* A ALTURA VEM DA JANELA, como no HeyGen (medido: as tres zonas com
     630px numa janela de 738px). Antes a altura vinha do conteudo, e
     entao a zona mais comprida esticava a grade inteira — o palco ficava
     com a sobra, e a sobra era pouca. Os 210px descontados sao o topo do
     sistema mais a barra do projeto. */
  height: calc(100vh - 210px);
  min-height: 520px;
}
/* Cada zona rola por dentro. Sem isto, a altura fixa cortaria o painel de
   propriedades no meio, sem barra para alcancar o resto. */
.editor-heygen > .editor-zona { overflow: auto; }
.editor-zona {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 16px;
  padding: 12px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
/* Em coluna estreita a grade quebra e as divisas perdem o sentido: nao
   ha duas zonas lado a lado para repartir. Elas somem, e a altura volta a
   ser a do conteudo — numa tela baixa, prender a altura da janela deixaria
   o palco de 200px. */
@media (max-width: 1250px) {
  .editor-heygen {
    grid-template-columns: 62px minmax(0, 1fr) minmax(0, 1fr);
    height: auto;
  }
  .editor-heygen > .editor-zona:nth-child(6) { grid-column: 2 / -1; }
  .editor-heygen > .zona-divisa { display: none; }
  .editor-palco-area { min-height: 420px; }
}
@media (max-width: 820px) {
  .editor-heygen { grid-template-columns: 62px minmax(0, 1fr); }
  .editor-heygen > .editor-zona { grid-column: 2 / -1; }
}

/* GRADE DA SEMANA — 8 colunas em fracoes, nunca em pixels.
   A versao anterior era uma tabela de 640px minimos: em coluna estreita
   ela transbordava e ganhava barra de rolagem. Uma grade que rola some
   da vista, e o ponto de uma grade e ser vista inteira de relance. */
.grade-semana {
  display: grid;
  grid-template-columns: 44px repeat(7, minmax(0, 1fr));
  gap: 3px;
  align-items: stretch;
}
.grade-semana .gs-canto { }
.grade-semana .gs-cabecalho {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--texto-suave);
  text-align: center;
  padding-bottom: 3px;
  overflow: hidden;
}
.grade-semana .gs-hora {
  font-size: 10px;
  font-weight: 600;
  color: var(--texto-suave);
  display: flex;
  align-items: center;
  font-variant-numeric: tabular-nums;
}
.grade-semana .gs-celula {
  height: 22px;
  border: 1px solid var(--borda);
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background .12s ease, border-color .12s ease, transform .08s ease;
}
.grade-semana .gs-celula:hover:not(:disabled) {
  border-color: var(--cor-celula, var(--navy));
  background: color-mix(in srgb, var(--cor-celula, var(--navy)) 14%, transparent);
}
.grade-semana .gs-celula:active:not(:disabled) { transform: scale(.94); }
.grade-semana .gs-celula.marcada {
  background: var(--cor-celula, var(--navy));
  border-color: var(--cor-celula, var(--navy));
}
.grade-semana .gs-celula:disabled { opacity: .45; cursor: wait; }
@media (max-width: 520px) {
  .grade-semana { grid-template-columns: 38px repeat(7, minmax(0, 1fr)); gap: 2px; }
  .grade-semana .gs-celula { height: 19px; }
}

/* AGENDA DAS CAMPANHAS — sete colunas, uma por dia.
   Repete a mesma malha da grade da semana logo acima, para as duas se
   lerem como uma coisa so. Era uma pilha de cartoes, um por horario, e
   ver a terca inteira exigia caçar as linhas dela no meio das outras. */
.agenda-dias {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  margin-top: 6px;
  align-items: start;
}
.agenda-coluna {
  min-width: 0;
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 4px;
  background: var(--superficie);
}
.agenda-cabecalho {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--texto-suave);
  text-align: center;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--borda);
  margin-bottom: 4px;
}
.agenda-vazio {
  text-align: center;
  color: var(--texto-suave);
  opacity: .5;
  font-size: 11px;
  padding: 6px 0;
}
.agenda-hora {
  border-radius: 6px;
  background: var(--superficie-2);
  padding: 4px;
  margin-bottom: 4px;
}
.agenda-hora-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3px;
}
.agenda-relogio {
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ouro-texto);
}
.agenda-mais {
  background: transparent;
  border: 1px solid var(--borda);
  border-radius: 4px;
  color: var(--texto-suave);
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  padding: 0 4px;
}
.agenda-mais:hover:not(:disabled) { border-color: var(--acento-texto); color: var(--acento-texto); }
.agenda-mais:disabled { opacity: .35; cursor: not-allowed; }
.agenda-peca {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 3px;
  padding: 2px 4px;
  border-radius: 4px;
  background: var(--superficie);
  border-left: 2px solid var(--gold);
  font-size: 9px;
}
.agenda-peca-nome {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agenda-tirar {
  background: transparent;
  border: 0;
  color: var(--texto-suave);
  cursor: pointer;
  font-size: 10px;
  line-height: 1;
  padding: 0 2px;
  flex-shrink: 0;
}
.agenda-tirar:hover:not(:disabled) { color: var(--vermelho); }
.agenda-sem-peca {
  font-size: 9px;
  color: var(--texto-suave);
  opacity: .55;
  margin-top: 2px;
}
/* Sete colunas nao cabem em telefone: viram tres, depois duas. O dia
   continua sendo a unidade — so cabem menos por linha. */
@media (max-width: 900px) {
  .agenda-dias { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .agenda-dias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* DUAS COLUNAS lado a lado: a grade da semana e os destinos.
   Abaixo de 1100px empilha — a grade e larga, e espremida em meia tela
   deixa de ser legivel, que e o oposto de "organizado". */
.painel-duas-colunas {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
.painel-duas-colunas > section {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 14px 16px 16px;
}
@media (max-width: 1100px) {
  .painel-duas-colunas { grid-template-columns: 1fr; gap: 16px; }
}

.grade-destinos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 8px;
  margin-bottom: 6px;
}
.cartao-destino {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: var(--superficie);
  cursor: pointer;
  user-select: none;
  transition: border-color .15s ease, background .15s ease, transform .1s ease, box-shadow .15s ease;
}
.cartao-destino:hover { border-color: var(--cor-destino, var(--acento)); transform: translateY(-1px); }
.cartao-destino:active { transform: translateY(0) scale(.99); }
.cartao-destino:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.cartao-destino.ligado {
  border-color: var(--cor-destino, var(--gold));
  background: color-mix(in srgb, var(--cor-destino, var(--gold)) 10%, var(--superficie));
  box-shadow: inset 3px 0 0 0 var(--cor-destino, var(--gold));
}
.cartao-destino.informativo { cursor: default; opacity: .92; }
.cartao-destino.informativo:hover { transform: none; }
.cartao-destino.novo { border-style: dashed; }

.cartao-destino .marca-destino {
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
  background: var(--superficie-2);
  color: var(--cor-destino, var(--texto-suave));
}
.cartao-destino.ligado .marca-destino { background: var(--cor-destino); color: #fff; }
.cartao-destino .nome-destino {
  font-size: 13px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cartao-destino .estado-destino { font-size: 11px; color: var(--texto-suave); }

/* O pino é o interruptor: cinza apagado, colorido aceso. */
.cartao-destino .pino-destino {
  margin-left: auto; flex-shrink: 0;
  width: 34px; height: 18px; border-radius: 999px;
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  position: relative;
  transition: background .15s ease, border-color .15s ease;
}
.cartao-destino .pino-destino::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--texto-suave);
  transition: transform .15s ease, background .15s ease;
}
.cartao-destino .pino-destino.ligado { background: var(--cor-destino); border-color: var(--cor-destino); }
.cartao-destino .pino-destino.ligado::after { transform: translateX(16px); background: #fff; }

/* ---------------------------------------------------------------
   KANBAN EM COLUNAS
   O formato de sempre — cinco colunas lado a lado. O que mudou
   dentro delas: a luz no cabeçalho e o card com a cor da situação,
   que troca sozinha quando o vídeo é publicado ou rejeitado.
--------------------------------------------------------------- */
.kanban-colunas {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
.coluna-kanban { min-width: 0; }

/* =====================================================================
   KANBAN — o cabecalho de cada situacao
   =====================================================================
   O TOPO GRUDA. Numa coluna com quinze pecas, rolar fazia perder de vista
   em qual situacao se estava olhando — e "Aprovado" e "Rejeitado" sao
   parecidos o bastante para confundir sem o rotulo a vista.

   A cor e a da SITUACAO e nao a do sistema, de proposito: aqui a cor
   carrega informacao (pendente/aprovado/rejeitado), e trocar isso pelo
   dourado do padrao apagaria justamente o que a tela existe para dizer.
   O que vem do sistema e a FORMA — raio 10, fio de 1px, halo pulsante. */
.kb-topo {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 9px 11px;
  margin-bottom: 10px;
  border-radius: 10px;
  border: 1px solid var(--borda);
  /* Fundo opaco porque ele gruda: translucido deixaria os cards passarem
     por baixo do texto ao rolar. */
  background: var(--superficie);
}
.kb-topo.acesa {
  border-color: color-mix(in srgb, var(--cor-situacao) 60%, var(--borda));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cor-situacao) 30%, transparent);
}
.kb-luz {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--borda); flex-shrink: 0;
}
.kb-topo.acesa .kb-luz {
  background: var(--cor-situacao);
  box-shadow: 0 0 10px 2px var(--cor-situacao);
}
.kb-titulo { font-size: 13px; }
.kb-conta {
  font-size: 11.5px; font-weight: 700;
  color: var(--texto-suave);
  border: 1px solid var(--borda);
  border-radius: 999px;
  padding: 1px 9px;
  margin-left: auto;
}
.kb-topo.acesa .kb-conta { color: var(--cor-situacao); border-color: var(--cor-situacao); }
.kb-significado { font-size: 11px; color: var(--texto-suave); width: 100%; line-height: 1.3; }

/* ---- os cards ---- */
.cards-da-coluna { display: grid; grid-template-columns: 1fr; gap: 10px; }
.cards-da-coluna .card {
  border: 1px solid var(--borda);
  /* Raio 10, o mesmo da barra lateral, do .cartao-destino e do
     .centro-comando — a familia de superficie do sistema. */
  border-radius: 10px;
  overflow: hidden;
  background: var(--superficie);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: transform .12s ease, border-color .2s ease, box-shadow .2s ease;
}
.cards-da-coluna .card:hover { transform: translateY(-2px); }

/* A MINIATURA ERA 16/9 COM `cover`, e os videos da casa sao 9:16.
   Medido em 259 pecas arquivadas: 1080x1920 e o formato dominante. Numa
   caixa 16/9 com corte, o card mostrava uma faixa do meio do video — o
   mesmo defeito que ja tinha sido corrigido no banco. Caixa 4/5 e
   `contain`: nada cortado, tarja preta onde sobra. */
.cards-da-coluna .foto {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: contain;
  display: block;
  background: #000;
}
.cards-da-coluna .rotulo {
  padding: 7px 8px 3px;
  font-size: 11.5px;
  line-height: 1.3;
  /* Tres linhas e o teto: titulo de noticia passa de dez palavras e um
     card so de texto deixa de parecer um card. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cards-da-coluna .selo { font-size: 9.5px; text-transform: uppercase; letter-spacing: .4px; padding: 0 8px 8px; }
/* A LINHA LUMINOSA DO SISTEMA, na cor da situacao.
   
   O card tinha um fio estatico e uma barra de 3px embaixo. O resto do
   painel fala por HALO PULSANTE — e o Kanban, que e a tela onde algo
   ESPERA por voce, era a que menos pulsava.
   
   `--brilho` e a mesma variavel que os botoes usam; aqui ela recebe a cor
   da situacao em vez do dourado, e por isso `pulso-do-fio` funciona sem
   nenhuma regra propria. A barra de 3px embaixo fica: ela e o que se le
   de longe, quando a cor do fio ainda nao se distingue. */
/* Keyframe proprio, e nao `pulso-do-fio`, por duas razoes concretas:
   
   1. `pulso-do-fio` monta o halo com `rgba(var(--brilho), .55)`, e
      `--brilho` e um TRIO de numeros ("200, 162, 75"). As cores das
      situacoes sao hex (#2E7D32, #C0392B...), entao a substituicao daria
      `rgba(#2E7D32, .55)`, que e invalido e nao pinta nada.
   2. O halo e a barra de 3px vivem na MESMA propriedade. Uma animacao que
      so declarasse o halo apagaria a barra em cada quadro. */
@keyframes pulso-do-card {
  0%, 100% {
    box-shadow:
      inset 0 -3px 0 0 var(--cor-situacao),
      0 0 0 1px color-mix(in srgb, var(--cor-situacao) 45%, transparent),
      0 0 8px color-mix(in srgb, var(--cor-situacao) 16%, transparent);
  }
  50% {
    box-shadow:
      inset 0 -3px 0 0 var(--cor-situacao),
      0 0 0 1px color-mix(in srgb, var(--cor-situacao) 85%, transparent),
      0 0 16px color-mix(in srgb, var(--cor-situacao) 38%, transparent);
  }
}

.cards-da-coluna .card.card-situacao {
  border-color: color-mix(in srgb, var(--cor-situacao) 55%, var(--borda));
  animation: pulso-do-card 3.2s ease-in-out infinite;
  transition: border-color .35s ease, background .35s ease;
}
/* Compassos alternados: uma coluna inteira pulsando junto vira estrobo. */
.cards-da-coluna .card:nth-child(3n + 2) { animation-delay: -1.05s; }
.cards-da-coluna .card:nth-child(3n)     { animation-delay: -2.1s; }

.cards-da-coluna .card.card-situacao:hover,
.cards-da-coluna .card.card-situacao.marcado {
  /* Mao em cima, ou card aberto: acende e para de pulsar — o que esta em
     foco nao precisa chamar atencao, ja tem. */
  animation: none;
  border-color: var(--cor-situacao);
  box-shadow:
    inset 0 -3px 0 0 var(--cor-situacao),
    0 0 0 1px var(--cor-situacao),
    0 0 18px color-mix(in srgb, var(--cor-situacao) 40%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .cards-da-coluna .card.card-situacao { animation: none; }
}
.cards-da-coluna .card.card-situacao:hover { background: color-mix(in srgb, var(--cor-situacao) 8%, var(--superficie)); }
.cards-da-coluna .card.marcado { box-shadow: inset 0 0 0 1px var(--gold), inset 0 -3px 0 0 var(--cor-situacao); }

@media (max-width: 1280px) { .kanban-colunas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .kanban-colunas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .kanban-colunas { grid-template-columns: 1fr; } }


/* ---------------------------------------------------------------------
   REGISTRO DA AUDITORIA
   Antes era <table>: o detalhe de um evento pode ter 200 caracteres, e a
   tabela empurrava a coluna para fora da tela em vez de quebrar a linha.
   Aqui a linha é uma grade de quatro colunas — as três estreitas têm
   largura fixa, e o detalhe fica com o que sobra e quebra dentro dele.
   Em tela estreita a grade vira duas linhas, sem barra horizontal.
--------------------------------------------------------------------- */
.tabela-auditoria { border-top: 1px solid var(--borda); }
.linha-auditoria {
  display: grid;
  grid-template-columns: 132px 190px minmax(0, 1fr) 128px;
  gap: 10px;
  padding: 7px 2px;
  border-bottom: 1px solid var(--borda);
  font-size: 12px;
  align-items: baseline;
}
.linha-auditoria:hover { background: var(--superficie-2); }
.linha-auditoria .quando { color: var(--texto-suave); white-space: nowrap; font-variant-numeric: tabular-nums; }
.linha-auditoria .evento { font-weight: 600; overflow-wrap: anywhere; }
.linha-auditoria .detalhes { min-width: 0; overflow-wrap: anywhere; word-break: break-word; color: var(--texto); }
.linha-auditoria .motor { color: var(--texto-suave); font-size: 11px; text-align: right; overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .linha-auditoria {
    grid-template-columns: 1fr auto;
    row-gap: 2px;
  }
  .linha-auditoria .detalhes { grid-column: 1 / -1; }
  .linha-auditoria .motor { text-align: right; }
}


/* ---------------------------------------------------------------------
   FORMATOS DAS REDES
--------------------------------------------------------------------- */
.grade-formatos { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 8px; }
.cartao-formato {
  display: flex; gap: 10px; align-items: center;
  padding: 8px 10px; border: 1px solid var(--borda); border-radius: 8px;
  background: var(--superficie); cursor: pointer; transition: border-color .12s, transform .12s;
}
.cartao-formato:hover { border-color: var(--acento); transform: translateY(-1px); }
.cartao-formato:active { transform: translateY(0) scale(.995); }
.cartao-formato.ligado { border-color: var(--gold); background: rgba(200, 162, 75, .07); }
.etiqueta-nativa {
  font-size: 9px; text-transform: uppercase; letter-spacing: .06em;
  background: var(--gold); color: #14181f; border-radius: 3px; padding: 1px 5px;
}

/* ---------------------------------------------------------------------
   PERMISSÕES
--------------------------------------------------------------------- */
.grade-permissoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 4px; }
.permissao { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; padding: 4px 6px; border-radius: 5px; cursor: pointer; }
.permissao:hover { background: var(--superficie-2); }
.permissao.ligada { color: var(--texto); }
.permissao:not(.ligada) { color: var(--texto-suave); }
.permissao.excecao { background: rgba(200, 162, 75, .1); }
.permissao em { font-style: normal; color: var(--ouro-texto); font-size: 10px; }

/* ---------------------------------------------------------------------
   CENTRO DE COMANDO (botão direito)
--------------------------------------------------------------------- */
.centro-comando {
  position: fixed; z-index: 4000; min-width: 268px; max-width: 320px;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: 10px; box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
  padding: 5px; animation: surgir .11s ease-out;
}
@keyframes surgir { from { opacity: 0; transform: scale(.97) translateY(-3px); } to { opacity: 1; transform: none; } }
.centro-selecao {
  font-size: 11px; color: var(--texto-suave); padding: 6px 9px 7px;
  border-bottom: 1px solid var(--borda); margin-bottom: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.centro-item {
  display: flex; gap: 9px; align-items: flex-start; width: 100%;
  background: transparent; border: 0; border-radius: 6px;
  padding: 7px 9px; text-align: left; cursor: pointer; color: var(--texto);
}
.centro-item:hover:not(:disabled) { background: var(--superficie-2); }
.centro-item:disabled { opacity: .38; cursor: default; }
.centro-icone { color: var(--ouro-texto); width: 16px; flex-shrink: 0; font-size: 13px; }
.centro-rotulo { display: block; font-size: 13px; }
.centro-descricao { display: block; font-size: 11px; color: var(--texto-suave); }

/* ---------------------------------------------------------------------
   COPILOTO
--------------------------------------------------------------------- */
.copiloto-bolha {
  position: fixed; right: 22px; bottom: 22px; z-index: 3500;
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--gold); color: #14181f; border: 0;
  font-size: 21px; cursor: pointer; box-shadow: 0 6px 22px rgba(0, 0, 0, .4);
}
.copiloto-bolha:hover { transform: scale(1.05); }

.copiloto-janela {
  position: fixed; z-index: 3600; width: 400px; max-width: calc(100vw - 24px);
  height: 520px; max-height: calc(100vh - 100px);
  display: flex; flex-direction: column;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: 12px; box-shadow: 0 16px 50px rgba(0, 0, 0, .5); overflow: hidden;
}
.copiloto-janela.maximizada {
  left: 3vw; top: 3vh; width: 94vw; height: 94vh; max-height: 94vh;
}
/* ---------------------------------------------------------------
   COPILOTO ENCAIXADO — a tela encolhe em vez de ficar coberta

   A janela flutuante resolve o caso de "pergunta rápida": ela passa por
   cima, você lê, ela sai. Mas quando o Copiloto vira ferramenta de
   trabalho — conversa longa, ele executando comando e você conferindo o
   resultado — passar por cima é o defeito: metade do painel fica
   escondida justamente na hora em que você precisa olhar para ele.

   Encaixado, ele cola na direita e a AREA PRINCIPAL ganha uma margem do
   tamanho exato da janela. Nada fica embaixo de nada. Fechou, a margem
   volta a zero e o painel ocupa a tela inteira de novo.

   A largura vive numa variavel CSS porque duas coisas leem o mesmo
   numero: a janela e a margem. Se fossem dois valores, um dia divergem —
   e ai sobra uma faixa vazia ou o conteudo some por baixo da janela.
   --------------------------------------------------------------- */
:root { --copiloto-largura: 0px; }

.area-principal {
  /* MARGEM, e nao ENCHIMENTO — e sem transicao.
     MEDIDO 10/09: com o copiloto da AIRIA encaixado (400px), 142px da
     coluna de conteudo ficavam POR BAIXO da janela. A causa nao era a
     variavel (ela valia 400px) nem o seletor: era o `padding-right`
     desta regra, que chegava zerado. Prova: trocando a MESMA declaracao,
     com a MESMA variavel, para `margin-right`, a coluna caiu na hora de
     1100 para 958px — o valor certo. O encolhimento por padding ficava
     preso na transicao, que reinicia a cada escrita da variavel; e como
     o Copiloto reescreve a variavel a cada mudanca de estado, ela nunca
     terminava. Nem `padding-right: 400px !important` inline vencia, o
     que so acontece quando ha uma animacao rodando por cima.
     Margem faz o mesmo servico, e sem animacao nao ha o que travar. */
  margin-right: var(--copiloto-largura);
}

.copiloto-janela.encaixada {
  right: 0; top: 0; bottom: 0; left: auto;
  width: var(--copiloto-largura);
  height: 100vh; max-height: 100vh; max-width: none;
  border-radius: 0;
  border: 0; border-left: 1px solid var(--borda);
  box-shadow: -8px 0 26px rgba(0, 0, 0, .28);
}
.copiloto-janela.encaixada .copiloto-barra { cursor: default; }

/* Puxador para mudar a largura. Ele fica no proprio limite entre a
   janela e o painel, que e onde a mao procura. */
.copiloto-puxador {
  position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  cursor: col-resize; background: transparent; z-index: 2;
}
.copiloto-puxador:hover, .copiloto-puxador.arrastando { background: var(--acento); }

/* Tela estreita nao comporta encaixe: sobrariam 200px para o painel.
   Ai ele volta a flutuar sozinho, e a margem zera. */
@media (max-width: 900px) {
  .area-principal { margin-right: 0; }
  .copiloto-janela.encaixada {
    right: 8px; top: auto; bottom: 8px; left: 8px;
    width: auto; height: 60vh; border: 1px solid var(--borda); border-radius: 12px;
  }
}

.copiloto-barra {
  display: flex; gap: 6px; align-items: center;
  padding: 7px 9px; background: var(--superficie-2);
  border-bottom: 1px solid var(--borda); cursor: grab; user-select: none;
}
.copiloto-barra:active { cursor: grabbing; }
.copiloto-titulo { font-size: 13px; font-weight: 600; color: var(--ouro-texto); }
.copiloto-provedor { font-size: 11px; padding: 2px 4px; background: var(--superficie); color: var(--texto); border: 1px solid var(--borda); border-radius: 4px; }
.copiloto-barra button {
  background: transparent; border: 0; color: var(--texto-suave);
  cursor: pointer; font-size: 13px; padding: 2px 5px; border-radius: 4px;
}
.copiloto-barra button:hover { background: var(--superficie); color: var(--texto); }

.copiloto-nota, .copiloto-aviso {
  font-size: 11px; color: var(--ouro-texto); padding: 6px 10px;
  background: rgba(200, 162, 75, .08); border-bottom: 1px solid var(--borda);
}
.copiloto-ferramentas {
  font-size: 11px; padding: 8px 10px; max-height: 190px; overflow-y: auto;
  background: var(--superficie-2); border-bottom: 1px solid var(--borda);
}
.copiloto-corpo { flex: 1; overflow-y: auto; padding: 10px; font-size: 13px; }
.copiloto-vazio { color: var(--texto-suave); font-size: 12px; }
.copiloto-sugestoes { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.copiloto-sugestoes button {
  text-align: left; background: var(--superficie-2); border: 1px solid var(--borda);
  border-radius: 7px; padding: 6px 9px; font-size: 12px; color: var(--texto); cursor: pointer;
}
.copiloto-sugestoes button:hover { border-color: var(--acento); }
.copiloto-msg { margin-bottom: 9px; border-radius: 9px; padding: 7px 10px; max-width: 92%; }
.copiloto-msg p { margin: 0 0 4px; }
.copiloto-msg p:last-child { margin-bottom: 0; }
.copiloto-msg.usuario { background: var(--superficie-2); margin-left: auto; }
.copiloto-msg.copiloto { background: rgba(200, 162, 75, .07); border-left: 2px solid var(--gold); }
.copiloto-pendente {
  font-size: 12px; background: rgba(200, 162, 75, .1);
  border: 1px solid var(--gold); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px;
}
.copiloto-fontes { font-size: 11px; margin-bottom: 8px; }
.copiloto-fontes a { display: block; color: var(--ouro-texto); text-decoration: none; }
.copiloto-fontes a:hover { text-decoration: underline; }
.copiloto-qr { text-align: center; padding: 8px; }
.copiloto-qr svg { max-width: 240px; height: auto; }
.copiloto-entrada { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--borda); align-items: flex-end; }
.copiloto-entrada textarea { flex: 1; resize: none; font-size: 13px; }


/* ---------------------------------------------------------------------
   CRIADOR DE VOZES — o desenho da plataforma
   Estante de vozes à esquerda, texto no meio, ajustes à direita. Em tela
   estreita as três viram uma coluna só, na mesma ordem de uso.
--------------------------------------------------------------------- */
.selo-capacidade {
  font-size: 12px; padding: 7px 10px; margin-bottom: 12px;
  border-radius: 8px; background: rgba(46, 125, 50, .1);
  border: 1px solid rgba(46, 125, 50, .35); color: var(--texto);
}
.selo-capacidade .ponto {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--verde); margin-right: 6px;
}
.selo-capacidade.trocado { background: rgba(200, 162, 75, .1); border-color: rgba(200, 162, 75, .4); }
.selo-capacidade.trocado .ponto { background: var(--gold); }
.selo-capacidade.sem { background: rgba(224, 122, 107, .09); border-color: rgba(224, 122, 107, .4); }

.estudio-voz { display: grid; grid-template-columns: 260px minmax(0, 1fr) 240px; gap: 14px; align-items: start; }
@media (max-width: 1080px) { .estudio-voz { grid-template-columns: 1fr; } }
.estudio-coluna.estante { max-height: 560px; overflow-y: auto; }
.estudio-coluna.ajustes {
  background: var(--superficie-2); border: 1px solid var(--borda);
  border-radius: 10px; padding: 12px;
}
.estudio-textarea {
  width: 100%; min-height: 240px; resize: vertical;
  font-size: 15px; line-height: 1.6; padding: 14px;
  border-radius: 10px; border: 1px solid var(--borda); background: var(--superficie);
}
.estudio-rodape { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }

.estante-vozes { display: flex; flex-direction: column; gap: 4px; }
.voz-cartao {
  display: flex; gap: 9px; align-items: center; width: 100%; text-align: left;
  padding: 7px 9px; border-radius: 9px; cursor: pointer;
  background: var(--superficie); border: 1px solid var(--borda); color: var(--texto);
}
.voz-cartao:hover { border-color: var(--acento); }
.voz-cartao.escolhida { border-color: var(--gold); background: rgba(200, 162, 75, .1); }
.voz-inicial {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%;
  background: linear-gradient(140deg, var(--gold), #8c6f2f);
  color: #14181f; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
}
.voz-dados { min-width: 0; flex: 1; }
.voz-nome { display: block; font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voz-meta { display: block; font-size: 10px; color: var(--texto-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voz-previa { color: var(--ouro-texto); font-size: 11px; padding: 2px 5px; border-radius: 4px; }
.voz-previa:hover { background: var(--superficie-2); }


/* ---------------------------------------------------------------------
   BARRA DE ATUALIZAÇÃO
   Fica no rodapé, não no topo: no topo ela empurraria a tela inteira para
   baixo e o operador perderia a posição do que estava lendo.
--------------------------------------------------------------------- */
.barra-atualizacao {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 5000;
  display: flex;
  gap: 12px;
  align-items: center;
  max-width: min(760px, calc(100vw - 32px));
  padding: 10px 14px;
  font-size: 13px;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--gold);
  border-radius: 10px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .45);
  animation: subir .18s ease-out;
}
/* A FAIXA DE FALHAS.
   Mesma forma da faixa de atualizacao — quem ja aprendeu a olhar para
   baixo quando o painel quer falar nao precisa aprender outro lugar. A
   cor e a unica diferenca: vermelho de erro em vez do ouro de aviso, e
   ela sobe um pouco para nao cobrir a outra quando as duas aparecem. */
.barra-falhas {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 5001;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  max-width: min(760px, calc(100vw - 32px));
  padding: 10px 14px;
  font-size: 13px;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--vermelho);
  border-radius: 10px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .45);
  animation: subir .18s ease-out;
}
.barra-atualizacao ~ .barra-falhas,
.barra-falhas:has(~ .barra-atualizacao) { bottom: 86px; }
.ponto-falha {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--vermelho); flex: 0 0 auto; margin-top: 5px;
}
.falhas-lista { margin-top: 4px; display: flex; flex-direction: column; gap: 2px; }
.falha-linha { font-size: 12px; opacity: .9; word-break: break-word; }
.falha-linha code { font-size: 11.5px; color: var(--acento-texto, var(--texto)); }
.falha-vezes { opacity: .7; }
.falha-dica { margin-top: 5px; font-size: 12px; opacity: .85; }
@media (max-width: 640px) { .barra-falhas { flex-wrap: wrap; bottom: 10px; } }

@keyframes subir {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
.ponto-atualizacao {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
  background: var(--gold);
  animation: pulsar 1.6s ease-in-out infinite;
}
@keyframes pulsar {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}
@media (max-width: 700px) {
  .barra-atualizacao { flex-wrap: wrap; bottom: 10px; }
}

/* =====================================================================
   PADRAO VISUAL HEYGEN — tokens medidos, nao imaginados
   =====================================================================
   Tudo aqui saiu de medicao do app.heygen.com em 09/09/2026, viewport
   1512x900, lendo a geometria e o estilo computado de cada elemento
   (a captura de imagem vinha branca; a leitura do DOM nao mente).

   Telas medidas: Inicio (/home), Projetos (/projects) e o editor de
   cena (/create-v4). Os numeros de cada bloco estao no comentario do
   bloco, para que quem mexer depois saiba de onde vieram.

   As cores viram variaveis porque o sistema tem tema claro E escuro; o
   HeyGen so tem claro. No escuro, a superficie #F7F8FA vira a nossa. */

:root {
  --hg-fundo: #F7F8FA;
  --hg-linha: rgba(0, 0, 0, 0.06);
  /* Os tres sairam do HeyGen (srgb .137/.306/.506) e foram ESCURECIDOS um
     degrau a pedido do editor: letra mais preta e mais viva. O fraco levou
     dois degraus — em #6B7385 ele media 4,25:1 sobre o bege #F4F2ED, e o
     piso de leitura e 4,5. A distancia entre forte, medio e fraco continua
     a mesma; o bloco inteiro desceu junto. */
  --hg-forte: #0B0D11;
  --hg-medio: #1A1E26;
  --hg-fraco: #3A4049;
  --hg-ativo: #EAECEE;
  --hg-escuro: #19191A;  /* botao primario do HeyGen */
  --hg-vivo: #00BF8F;    /* ponto verde de "no ar" */
}
:root[data-tema='escuro'] {
  --hg-fundo: #1D242B;
  --hg-linha: rgba(255, 255, 255, 0.08);
  --hg-forte: #ECEFF2;
  --hg-medio: #C2CAD3;
  --hg-fraco: #9AA4AE;
  --hg-ativo: #2A323B;
  --hg-escuro: #E8BC3E;
  --hg-vivo: #5BBF6A;
}

/* Cabecalho de zona: 14px/600 com nota fraca a direita. */
.hg-zona-titulo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--hg-forte);
  margin-bottom: 10px;
}
.hg-zona-nota {
  font-size: 11px;
  font-weight: 500;
  color: var(--hg-fraco);
  white-space: nowrap;
}

/* Botao de largura cheia: no HeyGen, "Adicionar cena" tem 350x40. */
.hg-botao-largo {
  width: 100%;
  height: 40px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  margin-top: auto;
}

/* ---- ZONA DO PALCO ---- */
.hg-zona-palco { padding: 12px; }
.hg-barra-palco {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
/* Par Retrato/Paisagem do topo do HeyGen: pilulas de raio 9999. */
.hg-proporcoes { display: flex; gap: 4px; background: var(--hg-fundo); border-radius: 9999px; padding: 3px; }
.hg-prop {
  border: none;
  background: transparent;
  color: var(--hg-medio);
  font-size: 11px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 9999px;
  cursor: pointer;
  white-space: nowrap;
}
.hg-prop.ativa { background: var(--superficie); color: var(--hg-forte); box-shadow: 0 1px 2px rgba(0,0,0,.10); }

/* ---- LINHA DO TEMPO ----
   HeyGen: 691x180, branca, raio 16; ficha da cena 50x89. */
.hg-linha-tempo {
  margin-top: 10px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 16px;
  padding: 10px 12px 12px;
}
.hg-tempo-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.hg-relogio {
  font-size: 12px;
  font-weight: 600;
  color: var(--hg-forte);
  font-variant-numeric: tabular-nums;
}
.hg-fichas { display: flex; gap: 4px; align-items: stretch; }
.hg-ficha {
  flex-basis: 0;
  min-width: 42px;
  height: 66px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--hg-fundo);
  color: var(--hg-medio);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0 2px;
}
.hg-ficha:hover { border-color: var(--acento); }
.hg-ficha.ativa { border: 2px solid var(--gold); background: var(--superficie); color: var(--hg-forte); }
.hg-ficha-num { font-size: 14px; font-weight: 700; }
.hg-ficha-seg { font-size: 10px; opacity: .75; font-variant-numeric: tabular-nums; }

/* ---- ZONA DAS PROPRIEDADES ----
   HeyGen: 302x832, branca, raio "20px 0 0 20px" (encostada na borda).
   Aqui ela nao encosta na borda da janela, entao o raio e igual dos dois
   lados; o resto (largura, fundo, respiro) e o mesmo. */
/* O teto de 82vh saiu: quem limita a altura agora e a grade, e dois
   limites concorrentes dariam duas barras de rolagem encaixadas. */
.hg-propriedades { overflow: auto; }

/* ---------------------------------------------------------------------
   TELA DE PROJETOS — padrao /projects do HeyGen
   ---------------------------------------------------------------------
   Medido 09/09, viewport 1512x900: titulo 24/700; fichas de pasta 277x64
   raio 8; cartao 280x278 com miniatura 262x197 raio 20; etiquetas em
   pilula preta a 70% com 10/600; botao de tocar 48x48; titulo 14/500 e
   linha de dados 12/400. O passo da grade e 289 para pasta e 280 para
   cartao — aqui viram auto-fill, que da o mesmo desenho e ainda respeita
   telas menores sem barra de rolagem lateral. */
.hg-projetos { margin-bottom: 20px; }
.hg-cabecalho-projetos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.hg-cabecalho-projetos h2 { font-size: 24px; font-weight: 700; color: var(--hg-forte); margin: 0; }
.hg-acoes-cabecalho { display: flex; gap: 8px; align-items: center; }
.hg-busca {
  height: 40px;
  min-width: 220px;
  border-radius: 9999px;
  border: 1px solid var(--borda);
  background: var(--superficie);
  padding: 0 16px;
  font-size: 13px;
  color: var(--texto);
}

.hg-pastas { margin-bottom: 18px; }
.hg-pastas-titulo {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--hg-forte);
  margin-bottom: 8px;
}
.hg-pastas-fila {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.hg-pasta {
  height: 64px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  border-radius: 8px;
  border: 1px solid var(--borda);
  background: var(--superficie);
  color: var(--hg-medio);
  cursor: pointer;
  text-align: left;
}
.hg-pasta:hover { background: var(--hg-fundo); }
.hg-pasta.ativa { border: 2px solid var(--gold); background: var(--hg-fundo); color: var(--hg-forte); }
/* O quadradinho da pasta recebe a cor ESCOLHIDA pelo editor, que pode ser
   qualquer uma. Com uma cor clara (amarelo palido, por exemplo) ele
   desaparecia contra o cartao branco. O fio translucido garante que a
   pastilha continue visivel seja qual for a cor — e ele mesmo some
   contra cores escuras, entao nao atrapalha as outras. */
.hg-pasta-icone {
  width: 20px; height: 20px; border-radius: 5px; flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, .18);
}
.hg-pasta-nome { flex: 1; font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hg-pasta-conta { font-size: 12px; color: var(--hg-fraco); font-variant-numeric: tabular-nums; }

.hg-grupo { margin-bottom: 22px; }
.hg-grupo h3 {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--hg-fraco);
  margin: 0 0 12px;
}
.hg-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.hg-card {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 20px;
  padding: 9px;
  cursor: pointer;
  transition: box-shadow .12s, border-color .12s;
}
.hg-card:hover { box-shadow: 0 6px 22px rgba(0,0,0,.10); border-color: var(--acento); }
.hg-card.marcado { border: 2px solid var(--gold); padding: 8px; }
/* Miniatura 262x197 = 4:3 deitado, com o vertical do video no meio. */
.hg-miniatura {
  position: relative;
  aspect-ratio: 262 / 197;
  border-radius: 20px;
  overflow: hidden;
  background: var(--hg-fundo);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hg-miniatura video { height: 100%; width: auto; max-width: 100%; object-fit: cover; }
.hg-sem-previa {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--hg-fraco);
  font-size: 11px;
}
.hg-etiqueta {
  position: absolute;
  bottom: 8px;
  height: 24px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 9999px;
  background: rgba(0, 0, 0, .7);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  text-transform: capitalize;
}
.hg-etiqueta.esquerda { left: 8px; }
.hg-etiqueta.direita { right: 8px; }
.hg-tocar {
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  background: rgba(0, 0, 0, .7);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  pointer-events: none;
}
.hg-card-titulo {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--hg-forte);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hg-card-meta {
  margin-top: 6px;
  display: flex;
  gap: 10px;
  font-size: 12px;
  color: var(--hg-fraco);
  flex-wrap: wrap;
}

/* ---------------------------------------------------------------------
   TELA DE ENTRADA — padrao /home do HeyGen
   ---------------------------------------------------------------------
   Medido 09/09, viewport 1512x900: saudacao 34/700; secao 14/600 com
   pilula 115x32 a direita; painel raio 32; cartoes 262x186 raio 16 com
   botao de rodape 228x32 raio 100; ladrilhos 366x206 raio 16 com titulo
   30/700 e pilula 120x40. */
.hg-inicio { margin-bottom: 22px; }
.hg-saudacao {
  font-size: 34px;
  font-weight: 700;
  color: var(--hg-forte);
  margin: 0 0 18px;
  line-height: 1.25;
}
.hg-saudacao span { color: var(--ouro-texto); }
.hg-secao-titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--hg-forte);
  margin: 0 0 12px;
}
.hg-pilula-fina {
  height: 32px;
  padding: 0 14px;
  border-radius: 100px;
  border: 1px solid var(--borda);
  background: var(--superficie);
  color: var(--hg-medio);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.hg-pilula-fina:hover { border-color: var(--acento); color: var(--hg-forte); }

/* AS DUAS SUPERFICIES DA VISAO GERAL GANHAM A LINHA DO SISTEMA.
   MEDIDO 10/09: na tela de abrir — a primeira que se ve todo dia — os
   dois maiores blocos eram os UNICOS sem fio nenhum. Ladrilhos, pilulas e
   botoes ao redor deles pulsavam; eles eram duas manchas de fundo. O
   contraste fazia a tela parecer inacabada justamente onde ela deveria
   dar as boas-vindas. */
.hg-painel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  padding: 16px;
  border-radius: 32px;
  background: var(--hg-fundo);
  border: 1px solid var(--borda);
  margin-bottom: 22px;
}
/* O halo do painel de fora e mais discreto que o dos cartoes de dentro:
   dois brilhos da mesma forca, um dentro do outro, competem e a leitura
   se perde. O de fora delimita; os de dentro chamam. */
:root .hg-painel {
  --brilho: var(--brilho-acento);
  animation: pulso-do-fio 3.2s ease-in-out infinite;
  animation-delay: -1.6s;
}
:root .hg-cartao-painel {
  --brilho: var(--brilho-acento);
  animation: pulso-do-fio 3.2s ease-in-out infinite;
}
.hg-cartao-painel:nth-child(2) { animation-delay: -0.8s; }
.hg-cartao-painel:nth-child(3) { animation-delay: -1.6s; }
.hg-cartao-painel:nth-child(4) { animation-delay: -2.4s; }
@media (prefers-reduced-motion: reduce) {
  :root .hg-painel, :root .hg-cartao-painel { animation: none; }
}
.hg-cartao-painel {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 16px;
  padding: 17px;
  min-height: 186px;
  display: flex;
  flex-direction: column;
}
.hg-cartao-titulo { font-size: 16px; font-weight: 600; color: var(--hg-forte); }
.hg-cartao-corpo { flex: 1; margin: 14px 0; min-height: 0; }
.hg-nome { font-size: 16px; font-weight: 600; color: var(--hg-forte); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hg-sub { font-size: 12px; color: var(--hg-fraco); line-height: 1.45; margin: 0; }
.hg-foto-redonda { width: 80px; height: 80px; border-radius: 9999px; object-fit: cover; flex-shrink: 0; }
.hg-vazio-redondo {
  display: flex; align-items: center; justify-content: center;
  background: var(--hg-fundo); color: var(--hg-fraco); font-size: 30px;
}
.hg-botao-rodape {
  height: 32px;
  border-radius: 100px;
  border: 1px solid var(--borda);
  background: var(--superficie);
  color: var(--hg-forte);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
}
.hg-botao-rodape:hover { border-color: var(--acento-texto); color: var(--acento-texto); }
.hg-botao-rodape.escuro { background: var(--btn-fundo); color: var(--btn-texto); border-color: var(--btn-fio); }

.hg-pilula-voz {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 58px;
  border-radius: 9999px;
  background: var(--hg-fundo);
  padding: 0 14px;
}
.hg-tocar-pequeno {
  width: 20px; height: 20px; border-radius: 100px;
  display: flex; align-items: center; justify-content: center;
  background: var(--superficie); color: var(--hg-forte); font-size: 9px; flex-shrink: 0;
}
.hg-onda { display: flex; align-items: center; gap: 3px; height: 26px; }
.hg-onda i { display: block; width: 3px; border-radius: 2px; background: var(--hg-fraco); opacity: .6; }

.hg-tiras { display: flex; gap: 8px; align-items: center; }
.hg-tira { width: 51px; height: 68px; border-radius: 16px; object-fit: cover; flex-shrink: 0; }
.hg-tira-vazia, .hg-tira-mais {
  display: flex; align-items: center; justify-content: center;
  background: var(--hg-fundo); color: var(--hg-fraco);
}
.hg-tira-mais { font-size: 18px; font-weight: 600; }

.hg-ladrilhos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.hg-ladrilho {
  position: relative;
  aspect-ratio: 366 / 206;
  border: none;
  border-radius: 16px;
  padding: 20px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  text-align: left;
  color: #fff;
  overflow: hidden;
}
.hg-ladrilho:hover { outline: 2px solid var(--acento); }
.hg-ladrilho:disabled { opacity: .7; cursor: wait; }
.hg-ladrilho-titulo { font-size: 26px; font-weight: 700; line-height: 1.15; max-width: 60%; }

/* MODOS DE CRIACAO — QUATRO POR FILEIRA
   ---------------------------------------------------------------------
   O ladrilho comum usa `auto-fill, minmax(280px, 1fr)`: ele cabe quantos
   couberem, e com 11 cartoes a ultima fileira sobrava com um ou dois
   soltos, em larguras que mudavam a cada tamanho de janela.

   Aqui sao QUATRO colunas fixas, como pedido. `minmax(0, 1fr)` e o que
   permite a coluna encolher — sem o zero, o conteudo do cartao vira o
   piso da largura e a grade estoura para fora da tela.

   A proporcao tambem muda: 366x206 e um retangulo largo, feito para um
   titulo de 26px e nada mais. Com quatro por fileira cada cartao fica
   com ~25% da largura, e nesse espaco cabe menos — entao o cartao fica
   mais alto (4/3) e o titulo desce para 19px, para caber "Molduras —
   primeiro e ultimo quadro" sem cortar no meio da palavra.

   Abaixo de 1180px cai para tres, e assim por diante: quatro colunas
   fixas numa janela estreita nao e fidelidade ao pedido, e um cartao de
   140px onde nada se le. */
.hg-ladrilhos-quatro {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
/* Os `@media` ficam como reserva para navegador sem @container. Os
   `@container` vem depois e vencem quando existem.
   Os cortes sao a largura da COLUNA, nao da janela: 254px por ladrilho
   e o piso medido em que a descricao de tres linhas e a pilula mais
   longa ("movimento real · cinematografico", 200px) ainda cabem. */
@media (max-width: 1180px) { .hg-ladrilhos-quatro { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .hg-ladrilhos-quatro { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .hg-ladrilhos-quatro { grid-template-columns: minmax(0, 1fr); } }

@container coluna (min-width: 1044px) { .hg-ladrilhos-quatro { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container coluna (max-width: 1043px) { .hg-ladrilhos-quatro { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container coluna (max-width: 790px)  { .hg-ladrilhos-quatro { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container coluna (max-width: 530px)  { .hg-ladrilhos-quatro { grid-template-columns: minmax(0, 1fr); } }

/* Mesma cura para as outras duas grades de coluna FIXA do sistema. As
   de `auto-fill` ja se defendiam sozinhas — quem tem numero fixo de
   colunas e que nao se defende. */
@container coluna (max-width: 1043px) { .grade-cards.grade-quatro { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container coluna (max-width: 790px)  { .grade-cards.grade-quatro { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container coluna (max-width: 400px)  { .grade-cards.grade-quatro { grid-template-columns: minmax(0, 1fr); } }

.hg-ladrilho-origem {
  aspect-ratio: 4 / 3;
  padding: 14px;
  gap: 6px;
  justify-content: flex-start;
}
.hg-ladrilho-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
}
.hg-ladrilho-icone { font-size: 20px; line-height: 1; }
.hg-ladrilho-selo {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .3);
  white-space: nowrap;
}
.hg-ladrilho-selo.pronto { color: #BFF3D6; border-color: rgba(191, 243, 214, .45); }
.hg-ladrilho-selo.falta  { color: #FFC9C3; border-color: rgba(255, 201, 195, .45); }
.hg-ladrilho-titulo-origem {
  font-size: 19px;
  line-height: 1.2;
  max-width: 100%;
  margin-top: 2px;
}
/* A saida e a linha que mais importa do cartao: e ela que responde "o
   que eu recebo no fim". Fica com o espaco que sobra, e corta em tres
   linhas em vez de empurrar a pilula para fora do cartao. */
.hg-ladrilho-saida {
  font-size: 12px;
  line-height: 1.4;
  color: rgba(255, 255, 255, .78);
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.hg-ladrilho-origem .hg-ladrilho-pilula {
  height: 28px;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 600;
  align-self: flex-start;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hg-ladrilho-pilula {
  height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .28);
  font-size: 13px;
  font-weight: 500;
}

/* PORTA DE ENTRADA — a tela que pede o token quando a API devolve 401.
   Cobre tudo de proposito: com o painel protegido e sem token, nada
   atras dela carrega, e deixar a tela quebrada aparecendo por baixo so
   confundiria. */
.porta-fundo {
  position: fixed;
  inset: 0;
  z-index: 4000;
  background: rgba(11, 31, 58, .82);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.porta-caixa {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 24px;
  padding: 28px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .35);
}
.porta-titulo { font-size: 20px; font-weight: 700; color: var(--texto); margin-bottom: 10px; }
.porta-texto { font-size: 13px; color: var(--texto-suave); line-height: 1.5; margin: 0 0 16px; }
.porta-caixa input {
  width: 100%;
  height: 42px;
  border-radius: 100px;
  border: 1px solid var(--borda);
  background: var(--superficie-2);
  color: var(--texto);
  padding: 0 16px;
  font-size: 14px;
  margin-bottom: 12px;
}
.porta-caixa .botao { width: 100%; height: 42px; border-radius: 100px; font-weight: 600; }
.porta-rodape { font-size: 11px; color: var(--texto-suave); line-height: 1.45; margin: 14px 0 0; }

/* ---------------------------------------------------------------------
   TITULOS — escala medida do HeyGen
   ---------------------------------------------------------------------
   ACHADO 09/09: existiam 66 titulos (h2/h3/h4) no sistema e NENHUMA
   regra de CSS para eles. Cada um saia com o padrao do navegador —
   1.5em, 1.17em, margens gordas e desiguais. Era essa a maior causa de
   as telas por dentro parecerem de outro sistema.

   A escala vem da medicao: /projects usa 24/700 no titulo da pagina,
   /settings usa 18/700 na secao, o cartao usa 16/600 e o rotulo de
   grupo 14/600. */
/* O h1 da BARRA DE TITULO nao entra nesta escala. Ela tem regra propria
   (17/600, empurrada para a esquerda por margin-right:auto) e as duas
   regras tem a MESMA especificidade — a minha, por vir depois, vencia e
   deixava o titulo gigante e centralizado. Excluir e mais honesto do que
   subir a especificidade da outra. */
.area-principal h1:not(.topo h1) { font-size: 24px; font-weight: 700; color: var(--hg-forte); margin: 0 0 14px; line-height: 1.25; }
.topo h1 { font-size: 17px; font-weight: 600; margin: 0 auto 0 0; }
.area-principal h2 { font-size: 18px; font-weight: 700; color: var(--hg-forte); margin: 22px 0 10px; line-height: 1.3; }
.area-principal h3 { font-size: 16px; font-weight: 600; color: var(--hg-forte); margin: 18px 0 8px; line-height: 1.35; }
.area-principal h4 { font-size: 14px; font-weight: 600; color: var(--hg-forte); margin: 14px 0 6px; line-height: 1.4; }
/* O primeiro titulo de um bloco nao precisa empurrar de cima. */
.area-principal .cartao > h2:first-child,
.area-principal .cartao > h3:first-child,
.area-principal .cartao > h4:first-child { margin-top: 0; }

/* ---------------------------------------------------------------------
   SELETOR DE ARQUIVO — vira pilula, como todo botao do HeyGen
   ---------------------------------------------------------------------
   Sao 16 no sistema. Sem isto, cada um aparece como o botao cinza
   quadrado do Windows ao lado de "Nenhum arquivo escolhido" — o
   contraste mais gritante com o resto da tela. */
input[type="file"] {
  font-size: 13px;
  color: var(--texto-suave);
  border: none;
  background: transparent;
  padding: 0;
  min-height: 0;
  width: auto;
  max-width: 100%;
}
input[type="file"]::file-selector-button {
  background: var(--superficie);
  color: var(--hg-forte);
  border: 1px solid var(--borda);
  border-radius: 100px;
  min-height: 32px;
  padding: 6px 16px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  margin-right: 10px;
  transition: border-color .12s;
}
input[type="file"]::file-selector-button:hover { border-color: var(--acento); }

/* ---------------------------------------------------------------------
   TOCADOR DE AUDIO
   ---------------------------------------------------------------------
   O elemento nativo nao aceita ser redesenhado por dentro — o navegador
   monta os controles. O que da para fazer, e o que o HeyGen faz na
   pratica, e emoldurar: largura previsivel, cantos redondos e o mesmo
   fundo de superficie dos outros controles. Fingir uma onda desenhada
   aqui seria pior: o tocador precisa TOCAR. */
audio {
  height: 38px;
  max-width: 100%;
  border-radius: 100px;
  background: var(--hg-fundo);
  vertical-align: middle;
}
audio::-webkit-media-controls-enclosure { border-radius: 100px; background: var(--hg-fundo); }

/* Caixa de rolagem no padrao do resto: fina e discreta. */
* { scrollbar-width: thin; }

/* ---------------------------------------------------------------------
   ABAS INTERNAS — as duas formas do HeyGen
   ---------------------------------------------------------------------
   Medidas 09/09, viewport 1512x900:
     /avatar/my-avatars -> abas no TOPO: 18/700, traco de 2px embaixo da
                           ativa, 24px entre elas.
     /settings          -> COLUNA de 260px a esquerda: itens 14/500 (a
                           ativa 14/600), passo de 36px, e o conteudo
                           comecando em x=305 — 45px de respiro.
   A escolha entre uma e outra e por QUANTIDADE, como eles fazem: com 14
   abas no topo a fila quebra em tres linhas e ninguem acha nada. */
.abas-topo {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--borda);
  margin-bottom: 18px;
}
.abas-topo .aba-item {
  border: none;
  background: transparent;
  border-bottom: 2px solid transparent;
  color: var(--hg-medio);
  font-weight: 500;
  font-size: 16px;
  padding: 10px 2px;
}
.abas-topo .aba-item.marcada { color: var(--hg-forte); font-weight: 700; border-bottom-color: var(--acento); }

.abas-casca { display: flex; gap: 45px; align-items: flex-start; }
.abas-coluna {
  width: 244px;
  flex: 0 0 244px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: 12px;
}
.abas-coluna .aba-item {
  border: none;
  background: transparent;
  color: var(--hg-medio);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  padding: 8px 12px;
  border-radius: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* A mesma folga da barra principal: a coluna de abas internas
     tinha os itens colados uns nos outros e na borda. */
  margin: 4px 6px;
}
.abas-coluna .aba-item:hover { background: var(--hg-fundo); color: var(--hg-forte); }
.abas-coluna .aba-item.marcada { background: var(--hg-ativo); color: var(--hg-forte); font-weight: 600; }
/* A caixa do conteudo tem de PODER encolher, e conter o que nao encolhe.
   Medido 09/09: em janela de 845px, a aba Formatacao mede 1182px de
   largura propria (barra de ferramentas com regua) e empurrava a pagina
   inteira 433px para o lado. `min-width: 0` deixa a caixa encolher;
   `overflow-x: auto` faz o excesso rolar DENTRO dela, em vez de rolar a
   tela toda — barra de rolagem local e ruim, barra de rolagem na pagina
   inteira e pior. */
.abas-conteudo { min-width: 0; max-width: 100%; }
.abas-casca > .abas-conteudo { flex: 1; min-width: 0; }
@media (max-width: 1250px) {
  .abas-conteudo { overflow-x: auto; }
}

/* Tela estreita: a coluna vira uma fila que rola, senao ela come a
   largura toda do conteudo. */
@media (max-width: 900px) {
  .abas-casca { flex-direction: column; gap: 14px; }
  .abas-coluna {
    width: auto;
    flex: none;
    flex-direction: row;
    overflow-x: auto;
    position: static;
    padding-bottom: 6px;
    /* SEM ISTO A FILA ESTOURA A TELA. Item de flex nasce com
       `min-width: auto`, que significa "nunca menor que o conteudo" — e
       uma fila de 14 abas mede 1788px. O `overflow-x` acima so consegue
       conter depois que o minimo cai para zero. Medido: transbordava
       1039px em Configuracoes. */
    min-width: 0;
    max-width: 100%;
  }
  .abas-coluna .aba-item { flex: 0 0 auto; }
}

/* ---------------------------------------------------------------------
   PERSONALIZACAO — tela medida do HeyGen (Configuracoes > Personalizacao)
   ---------------------------------------------------------------------
   09/09, viewport 1512x900: sub-abas "Perfil"/"Memoria" 14/600 em x=305
   e x=363; barra da direita com pilula de filtro 163x32 raio 9999; cada
   entrada com titulo 14/600, contexto 12/400, corpo 14/400, e no canto
   direito o selo de raio 4, 12/600, altura 18, seguido de "Aceitar"
   70x32 raio 100. */
.hg-cabecalho-pers {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.hg-subabas { display: flex; gap: 24px; }
.hg-subabas button {
  border: none;
  background: transparent;
  color: var(--hg-fraco);
  font-size: 14px;
  font-weight: 600;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.hg-subabas button.ativa { color: var(--hg-forte); border-bottom-color: var(--gold); }
.hg-acoes-pers { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hg-filtro {
  width: auto;
  min-width: 163px;
  min-height: 32px;
  border-radius: 9999px;
  border: 1px solid var(--borda);
  background: var(--superficie);
  font-size: 14px;
  font-weight: 600;
  color: var(--hg-forte);
  padding: 4px 14px;
}

/* Uma memoria: corpo a esquerda, selo e acoes a direita. */
.hg-memoria {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 0;
  border-bottom: 1px solid var(--borda);
}
.hg-memoria-corpo { flex: 1; min-width: 0; }
.hg-memoria-titulo { font-size: 14px; font-weight: 600; color: var(--hg-forte); }
.hg-memoria-contexto { font-size: 12px; color: var(--hg-fraco); margin-top: 2px; }
.hg-memoria-texto { font-size: 14px; color: var(--hg-medio); line-height: 1.5; margin-top: 8px; white-space: pre-wrap; }
.hg-memoria-rodape { font-size: 11px; color: var(--hg-fraco); margin-top: 8px; }
.hg-memoria-lado { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.hg-selo {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 8px;
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.hg-memoria-acoes { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.hg-memoria-acoes .botao { font-size: 13px; padding: 5px 14px; min-height: 32px; }

@media (max-width: 720px) {
  .hg-memoria { flex-direction: column; }
  .hg-memoria-lado { align-items: flex-start; width: 100%; }
}

/* ---------------------------------------------------------------------
   PERSONALIZACAO — padrao medido de Configuracoes > Personalizacao
   ---------------------------------------------------------------------
   HeyGen, 09/09, viewport 1512x900: sub-abas "Perfil" e "Memoria" em
   14/600; barra de acoes a direita com pilula de filtro 163x32; entrada
   com titulo 14/600, contexto 12/400, corpo 14/400; selo de estado de
   raio 4 e 12/600 no canto direito, e as acoes embaixo dele. */
.hg-cabecalho-pers {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.hg-subabas { display: flex; gap: 24px; }
.hg-subabas button {
  border: none;
  background: transparent;
  color: var(--hg-medio);
  font-size: 14px;
  font-weight: 600;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.hg-subabas button.ativa { color: var(--hg-forte); border-bottom-color: var(--gold); }
.hg-acoes-pers { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hg-filtro {
  width: auto;
  min-width: 163px;
  min-height: 32px;
  border-radius: 9999px;
  border: 1px solid var(--borda);
  background: var(--superficie);
  font-size: 13px;
  font-weight: 600;
  padding: 4px 14px;
}

.hg-memoria {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 0;
  border-bottom: 1px solid var(--borda);
}
.hg-memoria:last-child { border-bottom: none; }
.hg-memoria-corpo { flex: 1; min-width: 0; }
.hg-memoria-titulo { font-size: 14px; font-weight: 600; color: var(--hg-forte); line-height: 1.4; }
.hg-memoria-contexto { font-size: 12px; color: var(--hg-fraco); margin-top: 2px; }
.hg-memoria-texto {
  font-size: 14px;
  color: var(--texto);
  line-height: 1.5;
  margin-top: 8px;
  white-space: pre-wrap;
}
.hg-memoria-rodape { font-size: 11px; color: var(--hg-fraco); margin-top: 8px; }
.hg-memoria-lado {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}
/* O selo do HeyGen e retangular de raio 4 — nao pilula. E de proposito:
   pilula ali brigaria com os botoes, que sao todos pilula. */
.hg-selo {
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  padding: 0 8px;
  white-space: nowrap;
}
.hg-memoria-acoes { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.hg-memoria-acoes .botao { font-size: 13px; padding: 5px 14px; }

@media (max-width: 760px) {
  .hg-memoria { flex-direction: column; }
  .hg-memoria-lado { align-items: flex-start; width: 100%; }
  .hg-memoria-acoes { justify-content: flex-start; }
}

/* ---------------------------------------------------------------------
   ACOMPANHAMENTO EM ATE 4 TELAS
   ---------------------------------------------------------------------
   Produzir um video atravessa modulos: a noticia entra na Operacao, vira
   projeto no Studio e sai pela Central de Publicacao. Com uma tela so,
   acompanhar isso e trocar de aba o tempo todo.

   Cada tela ROLA POR DENTRO (`overflow: auto`), e nao empurra a pagina.
   Sem isso, quatro paineis compridos virariam uma pagina de cinco metros
   e o operador perderia justamente a visao de conjunto que veio buscar. */
.grade-telas {
  display: grid;
  gap: 10px;
  /* Altura fixa da area util: e o que permite cada tela rolar sozinha. */
  height: calc(100vh - 150px);
  min-height: 420px;
}
.telas-1 { grid-template-columns: 1fr; }
.telas-2 { grid-template-columns: 1fr 1fr; }
.telas-3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.telas-3 > .tela-acompanhamento:first-child { grid-row: span 2; }
.telas-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }

.tela-acompanhamento {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 16px;
  overflow: hidden;
}
.tela-acompanhamento > header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--borda);
  background: var(--hg-fundo);
  flex-shrink: 0;
}
.tela-acompanhamento > header select {
  flex: 1;
  min-height: 30px;
  min-width: 0;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  padding: 2px 12px;
}
.tela-acompanhamento > header button {
  border: 1px solid var(--borda);
  background: var(--superficie);
  color: var(--hg-medio);
  border-radius: 100px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  flex-shrink: 0;
}
.tela-acompanhamento > header button:hover { border-color: var(--vermelho); color: var(--vermelho); }
.tela-corpo { flex: 1; overflow: auto; padding: 12px; min-height: 0; }

/* Tela estreita: quatro colunas viram uma pilha, senao cada painel fica
   com 180px e nao mostra nada. */
@media (max-width: 1100px) {
  .grade-telas,
  .telas-2,
  .telas-3,
  .telas-4 { grid-template-columns: 1fr; grid-template-rows: none; height: auto; }
  .telas-3 > .tela-acompanhamento:first-child { grid-row: auto; }
  .tela-corpo { max-height: 70vh; }
}

/* ---------------------------------------------------------------------
   CANTO DO TOPO — nome + sino, relogio, acompanhamento
   ---------------------------------------------------------------------
   Tres linhas alinhadas a direita. O sino fica na linha do NOME porque e
   a linha que o olho ja procura ao entrar; o acompanhamento fica embaixo,
   junto do relogio, porque os dois falam do agora. */
.canto-do-topo {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.canto-linha { display: flex; align-items: center; gap: 8px; }
.canto-botao { font-size: 12px; min-height: 28px; padding: 4px 12px; }

/* ---- SINO ---- */
.sino-area { position: relative; }
.sino {
  position: relative;
  border: 1px solid var(--borda);
  background: var(--superficie);
  border-radius: 100px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: border-color .12s;
}
.sino:hover { border-color: var(--acento); }
/* Anel vermelho quando ha ERRO — nao so contagem. A diferenca entre
   "tem coisa" e "tem coisa quebrada" precisa saltar sem abrir a lista. */
.sino.com-erro { border-color: var(--vermelho); box-shadow: 0 0 0 3px rgba(179, 38, 30, .16); }
.sino-icone { font-size: 15px; line-height: 1; }
.sino-conta {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9999px;
  background: #E54945;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.sino-lista {
  position: absolute;
  top: 40px;
  right: 0;
  width: 380px;
  max-width: 88vw;
  max-height: 60vh;
  overflow: auto;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
  z-index: 3000;
  padding: 8px;
  text-align: left;
}
.sino-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px 10px;
  font-size: 14px;
  color: var(--hg-forte);
}
.sino-cabecalho button {
  border: 1px solid var(--borda);
  background: var(--superficie);
  border-radius: 100px;
  width: 26px;
  height: 26px;
  cursor: pointer;
  color: var(--hg-medio);
}
.sino-vazio { font-size: 12px; color: var(--texto-suave); padding: 4px 8px 10px; margin: 0; line-height: 1.5; }
.sino-item {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  border-left: 3px solid var(--gold);
  background: var(--hg-fundo);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 6px;
  cursor: pointer;
}
.sino-item:hover { background: var(--hg-ativo); }
.sino-titulo { display: block; font-size: 13px; font-weight: 600; line-height: 1.35; }
.sino-detalhe { display: block; font-size: 12px; color: var(--texto-suave); line-height: 1.45; margin-top: 3px; }

/* Relogio e "Acompanhar" na MESMA linha, abaixo do nome. O Relogio tem
   alinhamento proprio a direita; aqui ele volta a ser um item de linha
   para o botao poder ficar ao lado dele, e nao embaixo. */
.canto-linha-agora { gap: 10px; }
.canto-linha-agora > *:first-child { text-align: right; }

/* ---------------------------------------------------------------------
   BUSCA GLOBAL — no centro da barra do topo
   --------------------------------------------------------------------- */
.busca-area { position: relative; flex: 1; max-width: 520px; margin: 0 16px; min-width: 0; }
.busca-campo {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  border: 1px solid var(--borda);
  background: var(--hg-fundo);
  border-radius: 100px;
  padding: 0 8px 0 14px;
  transition: border-color .12s, box-shadow .12s;
}
.busca-campo:focus-within { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-fraco); }
.busca-lupa { font-size: 16px; color: var(--hg-fraco); line-height: 1; }
.busca-campo input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-size: 13px;
  color: var(--texto);
  min-height: 0;
  padding: 0;
  border-radius: 0;
}
.busca-campo input:focus { outline: none; box-shadow: none; border: none; }
.busca-limpar {
  border: none;
  background: transparent;
  color: var(--hg-fraco);
  cursor: pointer;
  font-size: 13px;
  width: 22px;
  height: 22px;
  border-radius: 100px;
}
.busca-limpar:hover { background: var(--hg-ativo); color: var(--hg-forte); }

.busca-lista {
  position: absolute;
  top: 44px;
  left: 0;
  right: 0;
  max-height: 62vh;
  overflow: auto;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
  z-index: 3000;
  padding: 8px;
}
.busca-cabecalho { font-size: 11px; color: var(--hg-fraco); padding: 4px 10px 8px; }
.busca-item {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
}
.busca-item:hover { background: var(--hg-fundo); }
.busca-tipo {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  color: var(--hg-fraco);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.busca-titulo {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--hg-forte);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.busca-detalhe { display: block; font-size: 11px; color: var(--texto-suave); }

/* Tela estreita: a busca sai da barra para nao espremer o titulo e o
   nome do escritorio ate ambos ficarem ilegiveis. */
@media (max-width: 900px) { .busca-area { display: none; } }

/* DOBRA — titulo que abre e fecha um bloco longo.
   Nasce fechada e mostra a conta do que ha dentro. Bloco comprido aberto
   o tempo todo empurra para fora da vista justamente o botao que conclui
   a tarefa. */
.dobra-titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  border: 1px solid var(--borda);
  background: var(--hg-fundo);
  border-radius: 12px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--hg-forte);
  text-align: left;
}
.dobra-titulo:hover { border-color: var(--acento); }
.dobra-conta { font-size: 11px; font-weight: 500; color: var(--hg-fraco); white-space: nowrap; }
.dobra-resumo { font-size: 11px; color: var(--texto-suave); margin-top: 6px; line-height: 1.5; padding: 0 4px; }

/* QUATRO POR LINHA, na grade de aparencias do avatar.
   O `auto-fill` da grade comum enche a linha com o que couber — bom para
   catalogo, ruim aqui: com 300 aparencias do mesmo rosto, o que importa
   e comparar enquadramento lado a lado, e para isso a foto precisa ser
   grande e a contagem por linha, estavel.
   Nas larguras menores ela cede: quatro fotos de 90px nao servem para
   comparar nada. */
.grade-cards.grade-quatro {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* Vao menor que o da grade comum: com quatro colunas fixas, cada
     pixel de vao sai da foto. 16px x3 comiam 48px de imagem. */
  gap: 10px;
}
@media (max-width: 1000px) { .grade-cards.grade-quatro { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .grade-cards.grade-quatro { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* =====================================================================
   TEMA DO KAIROGEN — medido no app.kairogen.ai em 10/09
   =====================================================================
   Viewport 845x742, lendo geometria e estilo computado:
     fundo ............ #000 puro
     cartao ........... rgb(22,22,22), raio 8
     flutuante ........ rgba(15,15,15,.97)
     texto ............ #fff; secundario rgba(255,255,255,.78) e #9A9A9A
     ACENTO ........... ciano rgb(0,255,255) — o traco da marca deles
     acento suave ..... rgba(0,255,255,.06 / .08 / .15)
     destaque ......... #FFD700 (o selo "5/5 gratis")
     nav .............. pilulas raio 999, altura 34, 12/600
     filtros .......... botoes 26px raio 5, 10/500
     cartao de geracao  320x373 raio 8, imagem 318x280
     etiquetas ........ rgba(0,0,0,.45) raio 4, 8/500
     faixa do modelo .. rgba(0,255,255,.05) raio 5, 12/600 ciano

   O QUE FOI FEITO COM ESTA MEDICAO, E O QUE NAO FOI. Da lista acima
   ficou a FORMA — pilula de 34, cartao de raio 8, faixa do modelo — e
   ficou o ACENTO CIANO, que virou o acento do sistema INTEIRO no tema
   escuro, a pedido do editor: um so desenho de botao em toda parte, em
   vez de um dourado chapado ao lado de um ciano vazado na mesma tela.

   NAO ficaram o #000 puro nem o #fff fixo. Cor fixa aqui dava duas
   telas escuras diferentes lado a lado (preto puro contra a nossa
   superficie #171C22) e, no tema claro, um retangulo preto no meio de
   um sistema claro. Agora o fundo e a letra saem dos tokens do sistema,
   e no CLARO o acento continua sendo o dourado do escritorio — a marca
   nao foi jogada fora, ela e que manda no claro. */
/* MODULO KAIROGEN — a forma e deles, o TEMA e do sistema.
   ---------------------------------------------------------------------
   Esta casca comecou pintada de #000 com letra #fff, copiando o app do
   Kairogen ao pe da letra. Ficava assim: no tema claro, um retangulo
   preto no meio de um sistema inteiro claro; no escuro, um preto puro ao
   lado de superficies #171C22, que e escuro mas nao e preto — duas
   telas escuras diferentes, uma do lado da outra.

   Agora nao ha cor fixa aqui. O fundo, a letra e o acento saem dos
   mesmos tokens de todo o resto, e o modulo troca de tema junto com o
   sistema. O que sobrou de Kairogen e o que interessava: a FORMA — a
   barra de pilulas de 34px, o cartao de raio 8, a faixa do modelo. E o
   acento ciano continua la no escuro, porque o ciano deles virou o
   acento do sistema inteiro no escuro. */
.kairogen-tema {
  background: var(--bg);
  color: var(--texto);
  border: 1px solid var(--borda);
  border-radius: 16px;
  padding: 18px;
  margin: -4px 0 0;
}
.kairogen-tema .cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 8px;
}
.kairogen-tema code, .kairogen-tema pre {
  background: var(--acento-fraco) !important;
  border-color: var(--acento-fio) !important;
}

/* NAV EM PILULAS — a barra de modulos do Kairogen: raio 999, 34px de
   altura, 12/600, a ativa vazada na cor do acento. */
.kairogen-nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 0 16px;
  border-bottom: 1px solid var(--borda);
  margin-bottom: 16px;
}
.kairogen-nav button {
  height: 34px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--hg-medio);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.kairogen-nav button:hover { color: var(--texto); background: var(--hg-fundo); }
.kairogen-nav button.ativa { color: var(--acento-texto); background: transparent; border-color: var(--acento-fio); }

/* Faixa do nome do modelo, como no cartao de geracao deles. */
.kairogen-modelo {
  display: block;
  background: var(--acento-fraco);
  border-radius: 5px;
  color: var(--acento-texto);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
}
.kairogen-chip {
  display: inline-block;
  color: var(--acento-texto);
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--acento-fio);
  border-radius: 3px;
  padding: 1px 8px;
  margin-right: 6px;
}

/* =====================================================================
   DIRECAO DE CENA — quadrado de marcacao, alinhado entre si
   =====================================================================
   As opcoes eram pilulas num flex com `flex-wrap`. Pilula tem a largura
   do texto, entao "Meio-corpo" e "Plano americano fechado" viravam duas
   pilulas de larguras diferentes, e a quebra de linha caia num lugar
   diferente em cada grupo. Resultado: seis grupos empilhados sem uma
   unica coluna em comum, e o olho nao tinha por onde descer.

   Agora e uma GRADE de colunas iguais (minimo de 210px). O quadrado de
   marcacao tem 16px e fica sempre na mesma coluna — em Enquadramento, em
   Olhar e em Cenario. E por isso que os grupos alinham entre si: nao e
   ajuste de espacamento, e a mesma grade repetida.

   O quadrado marcado ganha o tique e o acento do tema; o vazio fica so
   com o fio. O selo de quem executa (● ◐ ○ ✕) continua a direita, que e
   onde ele nao disputa a leitura com o rotulo. */
.direcao-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 2px 10px;
}
.direcao-opcao {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 28px;
  padding: 3px 6px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--texto);
  font-size: 12px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.direcao-opcao:hover { background: var(--hg-fundo); }
.direcao-opcao.marcada { color: var(--acento-texto); font-weight: 600; }
.direcao-quadro {
  width: 16px;
  height: 16px;
  border: 1px solid var(--borda);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  flex-shrink: 0;
}
.direcao-opcao.marcada .direcao-quadro {
  border-color: var(--acento);
  background: var(--acento-fraco);
  color: var(--acento-texto);
}
.direcao-rotulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.direcao-selo { font-size: 11px; text-align: right; }
.direcao-titulo {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--texto-suave);
  margin-bottom: 4px;
}

/* =====================================================================
   CABECALHO DO PROJETO E AJUSTES DA CENA
   =====================================================================
   Segue a mesma gramatica do resto: pilula de raio 999 para escolha
   exclusiva, cartao de raio 8, rotulo 11/600 em maiuscula fina. O que
   muda aqui e a ORDEM, e ela e do HeyGen: o titulo e um campo de texto
   sem moldura no alto, as acoes ficam na mesma linha a direita, e o
   resto desce em faixa.

   POR QUE O TITULO NAO TEM CAIXA: com moldura, o titulo vira "mais um
   campo" e some no meio dos outros. Sem moldura, ele le como titulo — e
   a moldura aparece no foco, que e quando ela serve para alguma coisa. */
.proj-cabecalho { margin-bottom: 14px; }
.proj-linha-titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.proj-titulo {
  flex: 1 1 320px;
  min-width: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--hg-forte);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 6px 10px;
  margin: -6px -10px;
}
.proj-titulo:hover { border-color: var(--borda); }
.proj-titulo:focus { background: var(--superficie); border-color: var(--acento); outline: none; }
.proj-acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* O link de baixar e um <a>, e nao um <button> — precisa da mesma
   aparencia sem herdar o sublinhado nem a cor de link. */
.proj-acoes a.botao { text-decoration: none; display: inline-flex; align-items: center; }
.proj-acoes a.botao.desligado { opacity: .5; cursor: not-allowed; }

.proj-pilulas {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.proj-grupo { display: inline-flex; gap: 4px; }
.proj-pilula {
  height: 30px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--borda);
  background: transparent;
  color: var(--hg-medio);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.proj-pilula:hover { color: var(--texto); }
.proj-pilula.marcada { color: var(--acento-texto); border-color: var(--acento-fio); background: var(--acento-fraco); }
.proj-info { font-size: 12px; color: var(--hg-fraco); }

.proj-ajustes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--borda);
}
.proj-ajustes .campo { margin-bottom: 0; min-width: 0; }
.proj-largo { grid-column: 1 / -1; }
.proj-nota { font-size: 11px; color: var(--hg-fraco); margin-top: 4px; line-height: 1.45; }
.proj-caixa { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 400; }
.proj-partilha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  padding: 5px 0;
  border-bottom: 1px solid var(--borda);
}
.proj-partilha-morta { color: var(--hg-fraco); text-decoration: line-through; }

/* AJUSTES DA CENA — fechado e uma linha, aberto e uma grade.
   Cena que segue o projeto em tudo mostra "segue o projeto em tudo" e
   nada mais: e a diferenca entre poder ajustar tudo e ter de olhar tudo. */
.cena-ajustes { margin-top: 10px; border-top: 1px solid var(--borda); padding-top: 8px; }
.cena-ajustes-puxador {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 5px 8px;
  margin: 0 -8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--hg-medio);
  cursor: pointer;
  text-align: left;
}
.cena-ajustes-puxador:hover { color: var(--texto); background: var(--hg-fundo); }
.cena-ajustes-conta { font-size: 11px; font-weight: 500; color: var(--hg-fraco); }
.cena-ajustes-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-top: 10px;
}
.cena-ajustes-grade .campo { margin-bottom: 0; min-width: 0; }
.cena-pilulas { display: flex; gap: 4px; flex-wrap: wrap; }
.cena-cor { display: flex; gap: 8px; align-items: center; }
.cena-cor input[type="color"] {
  width: 42px; height: 30px; padding: 0; border: 1px solid var(--borda);
  border-radius: 6px; background: none; cursor: pointer;
}

/* =====================================================================
   BARRA LATERAL NO MESMO PADRAO DOS CARTOES
   =====================================================================
   A barra tinha uma gramatica so dela: raio 8, fio branco a 16%, item
   ativo marcado por uma FAIXA A ESQUERDA. O resto do sistema fala outra
   lingua — raio 10, fio --borda, e o marcado com fundo de acento e a
   letra na cor do acento (e o que a pilula de proporcao, a opcao de
   direcao e a aba do Kairogen ja faziam).

   Duas gramaticas na mesma tela obrigam o olho a aprender duas vezes.
   Agora e uma: mesmo raio, mesmo fio, mesma marcacao. O que a barra
   guarda de proprio e o FUNDO ESCURO — ela e navy nos dois temas, por
   identidade do escritorio, e por isso os fios dela sao brancos
   translucidos em vez de --borda, que sumiria contra o navy. */
.botao-lateral,
.item-lateral {
  border-radius: 10px;
}
/* A LINHA DA BARRA PASSA A SER A LINHA DO SISTEMA — 10/09.
   
   Este bloco ja tinha unificado o RAIO e a MARCACAO com o resto do
   painel, mas deixou de fora justamente o que o operador apontou: a
   LINHA. Ela era branca a 14%, um cinza que nao pertence a familia
   nenhuma, enquanto todo botao do sistema carrega o fio de acento com
   halo pulsante. Na pratica a barra da esquerda — a primeira coisa que se
   ve — era o unico lugar sem o padrao.
   
   Agora o fio e o de acento nos dois casos, e o halo vem das regras de
   `pulso-do-fio` la de cima. O branco translucido fica so no FUNDO do
   hover, onde ele cumpre um papel que a cor de acento nao cumpriria:
   dizer "a mao esta aqui" sem competir com o item aceso. */
.botao-lateral {
  border: 1px solid rgba(var(--brilho-acento), 0.35);
  padding: 8px 12px;
  /* Mesma folga dos itens: os tres botoes do pe faziam parte da mesma
     coluna e encostavam nas paredes do mesmo jeito. */
  width: calc(100% - 12px);
  margin: 5px 6px;
}
.botao-lateral:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(var(--brilho-acento), 0.75);
}
.item-lateral {
  border: 1px solid rgba(var(--brilho-acento), 0.22);
  /* A faixa a esquerda sai: ela empurrava o rotulo 3px so no item ativo,
     e a lista inteira dancava ao trocar de modulo. */
  border-left-width: 1px;
  padding: 8px 12px;
  /* ESPACO ENTRE OS CARTOES E ATE AS PAREDES.
     Estava `margin: 2px 0`: sem margem lateral, o fio de cada item
     encostava na borda interna da barra, e 2px entre um e outro fazia os
     fios quase se tocarem — com o halo ligado, os brilhos vizinhos se
     somavam e a coluna virava uma faixa luminosa continua, em vez de uma
     lista de itens separados. 6px de folga lateral e 5px entre eles
     devolvem cada cartao ao proprio lugar. */
  margin: 5px 6px;
}
.item-lateral:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(var(--brilho-acento), 0.75);
}
.item-lateral.ativo {
  background: var(--acento-fraco);
  /* Dourado no aceso, como todo elemento em foco do sistema. */
  border-color: rgba(var(--brilho-ouro), 0.85);
  border-left-color: rgba(var(--brilho-ouro), 0.85);
  color: #fff;
  font-weight: 600;
}

/* =====================================================================
   CONSTELACAO DOS MOTORES
   =====================================================================
   Discreta de proposito: sem rotacao automatica, sem particula flutuando,
   sem camera girando. O unico movimento e o pulso dos motores que agiram
   na ultima hora — e ele significa alguma coisa. Movimento sem
   significado num painel de numeros e ruido caro: o olho persegue, nao
   encontra informacao, e cansa. */
.constelacao-caixa {
  position: relative;
  width: 100%;
  border-radius: 12px;
  background:
    radial-gradient(120% 80% at 50% 50%, var(--acento-fraco) 0%, transparent 62%),
    var(--hg-fundo);
  border: 1px solid var(--borda);
  overflow: hidden;
}
.constelacao { display: block; width: 100%; height: auto; }
.constelacao-no { cursor: default; transition: opacity .15s; }
.constelacao-no circle { transition: r .3s, fill-opacity .3s; }
/* PULSO = AGIU NA ULTIMA HORA. Amplitude pequena e ciclo longo: com 17
   nos acesos, pulso forte vira letreiro. */
.constelacao-no.recente > circle:first-child { animation: constelacao-respira 3.4s ease-in-out infinite; }
@keyframes constelacao-respira {
  0%, 100% { opacity: .28; transform: scale(1); }
  50%      { opacity: .62; transform: scale(1.1); }
}
.constelacao-no.recente > circle:first-child { transform-box: fill-box; transform-origin: center; }
.constelacao-rotulo {
  fill: var(--hg-medio);
  font-weight: 600;
  pointer-events: none;
  paint-order: stroke;
  stroke: var(--hg-fundo);
  stroke-width: 3px;
  stroke-linejoin: round;
}
.constelacao-legenda {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 10px;
  min-height: 46px;
  font-size: 12px;
}
.constelacao-detalhe { font-size: 11.5px; color: var(--hg-fraco); line-height: 1.5; }

@media (prefers-reduced-motion: reduce) {
  .constelacao-no.recente > circle:first-child { animation: none; opacity: .5; }
}

/* =====================================================================
   FLUXO EM PROFUNDIDADE
   =====================================================================
   A perspectiva da a direcao do tempo sem seta e sem legenda: o que esta
   na frente e o comeco. Por isso a escala cai etapa a etapa e o conjunto
   le como um corredor.

   `perspective` no pai e o que torna isso profundidade de verdade em vez
   de seis caixas de tamanhos diferentes. */
.fluxo-3d {
  display: flex;
  align-items: stretch;
  gap: 8px;
  perspective: 900px;
  padding: 6px 0 10px;
  overflow-x: auto;
}
.fluxo-etapa {
  flex: 1 1 0;
  min-width: 108px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--borda);
  background: var(--superficie);
  color: var(--texto);
  cursor: pointer;
  transform-origin: center bottom;
  transition: transform .18s, border-color .12s, background .12s;
}
.fluxo-etapa:hover { border-color: var(--acento); }
.fluxo-etapa.ativa { background: var(--acento-fraco); border-color: var(--acento-fio); }
.fluxo-numero { font-size: 26px; font-weight: 700; line-height: 1; }
.fluxo-etapa.ativa .fluxo-numero { color: var(--acento-texto); }
.fluxo-rotulo { font-size: 12px; font-weight: 600; color: var(--hg-medio); }
.fluxo-barra {
  display: block;
  width: 100%;
  height: 3px;
  border-radius: 3px;
  background: var(--borda);
  margin-top: 4px;
  overflow: hidden;
}
.fluxo-barra > span { display: block; height: 100%; background: var(--acento); border-radius: 3px; }

/* Os cartoes de modulo usam a grade de quatro, mas sao mais baixos que
   os de criacao: eles tem so titulo e chamada, e nao a linha de saida. */
.hg-ladrilhos-modulo .hg-ladrilho { aspect-ratio: 16 / 9; padding: 16px; }
.hg-ladrilhos-modulo .hg-ladrilho-titulo { font-size: 19px; max-width: 100%; }

/* =====================================================================
   A REGRA DA LETRA, escrita para quem mexer depois
   =====================================================================
   TEMA CLARO: a letra e PRETA. Os tres degraus (--hg-forte, --hg-medio,
   --hg-fraco) existem para hierarquia de leitura, mas os tres vivem na
   faixa do preto — o `fraco` de hoje (#3A4049) e mais escuro que o
   `forte` de ontem (#232833). Cinza medio sobre fundo claro le como
   texto DESLIGADO; preto le como texto.

   CARTAO DE COR PROPRIA: letra BRANCA. Vale para a barra lateral navy,
   os ladrilhos com gradiente, a faixa de comando, o botao primario e os
   selos vermelho e verde. Todos ja seguiam; a regra fica escrita para
   continuarem seguindo.

   O CUIDADO QUE ESTA REGRA EXIGE: "tem gradiente" NAO quer dizer "e
   escuro". A caixa da constelacao tem um gradiente — de tinta dourada a
   14% sobre #F7F8FA, luminancia 0,938 — e a letra dela e preta, como
   deve ser. Medi isso depois de um detector meu classificar a caixa como
   cartao escuro e quase me fazer "corrigir" o que estava certo. Antes de
   pintar de branco, meca a luminancia do fundo PINTADO.

   VERIFICADO em 8 paineis no tema claro: 1896 elementos com letra preta,
   222 com cinza remanescente, 129 com letra clara — e destes, todos
   sobre fundo escuro de verdade. */

/* Titulo das secoes dentro dos ajustes de cena. Ele existe porque o
   painel passou de seis campos para catorze: sem os cortes de "Quem
   aparece / Como soa / Motor e marca", vira uma parede de seletores em
   que nada se acha. */
.cena-secao {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--hg-fraco);
  margin: 14px 0 6px;
  padding-top: 10px;
  border-top: 1px solid var(--borda);
}
.cena-secao:first-of-type { border-top: none; padding-top: 0; margin-top: 10px; }

/* O item que espera o SEGUNDO clique direito para renomear. Sem este
   retorno o gesto fica mudo: quem nao acertar os 600ms acha que a
   funcao nao existe, e nao que errou o tempo. */
.item-lateral.aguardando-renomear,
.aba-item.aguardando-renomear {
  outline: 2px dashed var(--acento);
  outline-offset: -2px;
}

/* =====================================================================
   ZONAS DO EDITOR DE CENA — recolher, ampliar, arrastar
   =====================================================================
   A barra de cada zona e discreta de proposito: dois botoes de 22px e o
   nome. Uma barra de ferramentas por coluna competiria com o conteudo da
   coluna — e o conteudo e o trabalho. */
.zona-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: -2px 0 8px;
}
.zona-nome {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--hg-fraco);
}
.zona-acoes { display: inline-flex; gap: 4px; }
.zona-botao {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--borda);
  border-radius: 6px;
  background: transparent;
  color: var(--hg-medio);
  font-size: 11px;
  cursor: pointer;
  padding: 0;
}
.zona-botao:hover { border-color: var(--acento); color: var(--acento-texto); }

/* ZONA FINA — recolhida, mas NAO sumida.
   Uma coluna que desaparece por completo tira o caminho de volta, e o
   operador fica procurando um botao que nao existe mais. Fina, ela
   continua clicavel e continua dizendo o proprio nome, de pe. */
.editor-zona.zona-fina {
  padding: 8px 2px;
  overflow: hidden;
  align-items: center;
}
.editor-zona.zona-fina > *:not(.zona-fina-puxador) { display: none; }
.zona-fina-puxador {
  flex: 1;
  width: 100%;
  border: none;
  background: transparent;
  color: var(--hg-medio);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.zona-fina-puxador:hover { color: var(--acento-texto); }

/* A DIVISA fica ENTRE as colunas, e nao dentro de uma delas: dentro, ela
   pertenceria a uma das duas e o arrasto teria dono — o operador acharia
   que esta mexendo so naquela. Ela move as duas. */
/* A DIVISA E UMA COLUNA DA GRADE, de 6px, e nao um bloco sobreposto.
   A versao anterior tinha `margin: 0 -8px` para se encaixar no vao entre
   as zonas — mas ela nunca chegou a ser renderizada (medido 11/09: a
   maquinaria de arrasto estava pronta e desligada), entao a margem
   negativa nunca foi exercida. Como trilha propria, a margem sobraria e
   faria a divisa invadir as zonas vizinhas. */
.zona-divisa {
  width: 100%;
  align-self: stretch;
  cursor: col-resize;
  border-radius: 4px;
  position: relative;
  z-index: 2;
}
/* Com uma vizinha recolhida nao ha o que arrastar: a coluna continua na
   grade para as zonas nao escorregarem, mas some da vista e do mouse. */
.zona-divisa.inerte { cursor: default; pointer-events: none; }
.zona-divisa.inerte::after { display: none; }
.zona-divisa:hover { background: var(--acento-fraco); }
.zona-divisa::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 2px; height: 46px;
  transform: translate(-50%, -50%);
  border-radius: 2px;
  background: var(--borda);
}
.zona-divisa:hover::after { background: var(--acento); }

/* FICHA DE CENA com o excluir. A caixa existe para o ✕ poder ficar
   sobre a ficha sem entrar no botao dela — botao dentro de botao nao e
   HTML valido, e o clique de um comeria o do outro. */
.hg-ficha-caixa { position: relative; display: flex; min-width: 0; }
.hg-ficha-caixa > .hg-ficha { flex: 1; min-width: 0; }
.hg-ficha-excluir {
  position: absolute;
  top: 2px; right: 2px;
  width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center;
  border: none;
  border-radius: 4px;
  background: rgba(0, 0, 0, .35);
  color: #fff;
  font-size: 9px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s;
}
/* So aparece com o cursor em cima: seis ✕ sempre visiveis numa fita de
   seis cenas viram um convite a apagar sem querer. */
.hg-ficha-caixa:hover .hg-ficha-excluir { opacity: 1; }
.hg-ficha-excluir:hover { background: var(--vermelho); }
.hg-ficha-excluir:disabled { opacity: 0 !important; cursor: not-allowed; }

/* =====================================================================
   PALCO SOBREPOSTO — o quadro ampliado por cima da tela
   ===================================================================== */
.palco-ampliar { align-self: flex-start; margin-bottom: 8px; font-size: 12px; }
.palco-sobreposto { position: fixed; inset: 0; z-index: 1200; pointer-events: none; }
.palco-fundo {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .62);
  pointer-events: auto;
}
.palco-janela {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 1180px);
  height: min(88vh, 940px);
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 16px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .45);
  pointer-events: auto;
  overflow: hidden;
}
/* MINIMIZADO encosta num canto e o editor atras volta a ser clicavel —
   e o motivo de existir este modo: conferir enquanto se mexe na fala,
   sem fechar e reabrir a cada frase. */
.palco-sobreposto.minimizado .palco-janela {
  top: auto; left: auto; bottom: 16px; right: 16px;
  transform: none;
  width: min(38vw, 420px);
  height: min(42vh, 420px);
}
.palco-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--borda);
  flex-wrap: wrap;
}
.palco-titulo { font-size: 13px; font-weight: 600; color: var(--hg-forte); min-width: 0; }
.palco-zoom { display: inline-flex; gap: 4px; }
.palco-zoom .zona-botao { width: 30px; }
.zona-botao.marcado { border-color: var(--acento-fio); background: var(--acento-fraco); color: var(--acento-texto); }
/* A area corta o que passa da borda: com zoom 4x o quadro e maior que a
   janela, e sem isto ele vazaria por cima da barra. */
.palco-area { flex: 1; min-height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--hg-fundo); }
.palco-conteudo { transform-origin: center center; transition: transform .12s; display: flex; }
.palco-rodape { padding: 7px 12px; border-top: 1px solid var(--borda); font-size: 11px; color: var(--hg-fraco); }
.palco-sobreposto.minimizado .palco-rodape { display: none; }

/* =====================================================================
   MENU DE TRES PONTOS DO CARTAO DE VIDEO
   =====================================================================
   MEDIDO no HeyGen (tela de Projetos, 10/09): dois botoes de 24x24 no
   alto do cartao de 345x259. La eles ficam a DIREITA (x=285 e x=313); o
   pedido foi a esquerda, e o pedido venceu — mas a medicao fica anotada
   para quem comparar as duas telas nao achar que foi engano.

   O gatilho so aparece com o cursor sobre o cartao. Trinta ⋯ visiveis
   numa grade de trinta videos e ruido; um ⋯ que aparece quando a mao
   chega e comando. */
.menu-video { position: absolute; top: 8px; left: 8px; z-index: 3; }
.menu-video-gatilho {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border: none;
  border-radius: 7px;
  background: rgba(0, 0, 0, .45);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s, background .12s;
}
.card:hover .menu-video-gatilho,
.hg-card:hover .menu-video-gatilho,
.menu-video-gatilho[aria-expanded='true'] { opacity: 1; }
.menu-video-gatilho:hover { background: rgba(0, 0, 0, .7); }

.menu-video-lista {
  position: absolute;
  top: 28px; left: 0;
  min-width: 208px;
  display: flex;
  flex-direction: column;
  padding: 5px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 12px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .22);
  z-index: 40;
}
.menu-video-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--texto);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}
.menu-video-item:hover { background: var(--hg-fundo); }
.menu-video-item:disabled { opacity: .45; cursor: not-allowed; }
/* O EXCLUIR SE SEPARA DOS OUTROS por um fio, e nao so pela cor: numa
   lista de nove itens iguais, a mao chega no ultimo por engano. */
.menu-video-item.perigoso { color: var(--vermelho); margin-top: 4px; border-top: 1px solid var(--borda); border-radius: 0 0 8px 8px; padding-top: 9px; }
.menu-video-item.perigoso:hover { background: rgba(179, 38, 30, .1); }
.menu-video-icone { width: 16px; text-align: center; font-size: 12px; flex-shrink: 0; }

/* A LINHA DE INFORMACAO DO CARTAO, no formato medido no HeyGen:
   "Video de Avatar · 40s" em cima, titulo, e embaixo
   "ha 1 dia • AI Studio • 11 credits". */
.video-meta { display: flex; flex-wrap: wrap; gap: 5px; align-items: baseline; font-size: 11px; color: var(--hg-fraco); margin-top: 3px; }
.video-meta .ponto { opacity: .5; }
.video-selo {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--borda);
  color: var(--hg-medio);
}

/* =====================================================================
   BANCO DE VIDEOS — a tela 1 do percurso
   =====================================================================
   Anatomia do cartao medida no HeyGen (345x259): miniatura em cima,
   depois o selo do tipo, o titulo, e a linha de informacao. A COR e a
   moldura sao do sistema — copiar o cinza deles seria jogar a marca fora
   para ganhar nada. */
.banco-barra {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.banco-busca {
  flex: 1 1 260px;
  min-width: 0;
  height: 36px;
}
.banco-dia {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  color: var(--hg-fraco);
  margin-bottom: 10px;
}
/* A CAIXA DE CADA VIDEO, ampliada.
   Quatro colunas fixas davam ~300px de cartao numa tela de 1318 — e com
   a caixa agora em 4/5 e sem corte, 300px de largura mostravam o rosto
   pequeno demais para conferir enquadramento, que e para isso que se
   olha a miniatura. Em 380px minimos cabem tres por fileira num monitor
   comum e duas num notebook, com a peca grande o bastante para julgar. */
/* SEIS POR FILEIRA, pedido do operador em 10/09.
   Com 300+ pecas no banco, tres por fileira dava dez telas de rolagem so
   para varrer um dia de producao. Seis cabem e continuam legiveis porque
   a miniatura e 4/5 com `contain`: o que encolhe e a peca inteira, nao um
   recorte dela.
   Os cortes por CONTAINER, e nao por janela — a coluna muda de largura
   sozinha quando o copiloto da AIRIA abre, e a fileira tem de acompanhar
   (ver a nota da .conteudo). */
.grade-cards.banco-grade { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
/* SEIS ATE ONDE SEIS AINDA SE LE. A coluna do painel mede 1052 px com a
   barra lateral aberta, e 1052/6 da ~167 px de cartao — miniatura de 209
   px de altura, que mostra rosto e enquadramento. Abaixo de 950 px de
   coluna a sexta peca fica pequena demais para servir de conferencia, e
   ai vale mais ver cinco de verdade do que seis por obrigacao. */
@container coluna (max-width: 950px) { .grade-cards.banco-grade { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@container coluna (max-width: 800px) { .grade-cards.banco-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container coluna (max-width: 650px) { .grade-cards.banco-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container coluna (max-width: 480px) { .grade-cards.banco-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Reserva para navegador sem @container. */
@media (max-width: 900px) { .grade-cards.banco-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Em fileira de seis o cartao fica estreito: o titulo precisa parar de
   crescer para nao empurrar a data para fora. */
.banco-grade .banco-titulo { font-size: 12.5px; line-height: 1.3; }
.banco-grade .banco-corpo { padding: 8px 9px 10px; }

/* Os comandos de marcacao ficam juntos e separados do resto da barra:
   eles sao um assunto so, e espalhados entre busca e filtro nao se
   reconheceriam como um conjunto. */
.banco-marcar { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.banco-marcar .botao { font-size: 12px; }

.trilha-do-video {
  margin-bottom: 12px; padding: 10px 12px;
  border: 1px solid var(--gold); border-radius: 10px;
  background: var(--superficie-2);
}

/* A separacao entre "enviar" e os comandos de risco na barra. */
.banco-envio-separador { width: 1px; align-self: stretch; background: var(--borda); margin: 0 2px; }
.botao.secundario.perigoso { border-color: var(--vermelho); color: var(--vermelho); }
.botao.secundario.perigoso:hover:not(:disabled) { background: color-mix(in srgb, var(--vermelho) 12%, transparent); }

/* Os links de partilha recem-criados, listados para copiar. */
.links-partilha {
  flex-basis: 100%;
  margin-top: 8px; padding: 10px 12px;
  border: 1px solid var(--borda); border-radius: 10px;
  background: var(--superficie-2);
}
.link-partilha { display: flex; gap: 8px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.link-titulo { font-size: 12px; flex: 1 1 180px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-partilha input { flex: 2 1 260px; font-size: 11.5px; }

/* =====================================================================
   LAYOUT DO SISTEMA — a tela de escolha
   ===================================================================== */
.lay-linha { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.lay-medida { display: flex; flex-direction: column; gap: 2px; font-size: 12px; min-width: 220px; }
.lay-medida input[type='range'] { width: 100%; }

/* A grade das bibliotecas. Seis por fileira: com trinta modelos, quatro
   dariam oito fileiras de rolagem e o operador perderia de vista o que ja
   tinha visto. */
.lay-grade { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
@container coluna (max-width: 900px) { .lay-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container coluna (max-width: 620px) { .lay-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.lay-amostra {
  display: flex; flex-direction: column; gap: 4px; align-items: stretch;
  padding: 8px; text-align: left; cursor: pointer;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 10px;
}
.lay-amostra.marcada { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
/* A figura e desenhada com os valores do proprio modelo (inline, no TSX):
   aqui so vao as medidas da caixa que a contem. */
.lay-figura { display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--texto-suave); }
.lay-nome { font-size: 11.5px; font-weight: 600; }
.lay-detalhe { font-size: 10px; color: var(--texto-suave); }

/* AS 100 CORES. Quadradinhos e nao lista com nome: cor se escolhe
   olhando, e cem nomes em coluna seriam trinta centimetros de leitura
   para uma decisao visual. O nome fica no `title`, para quem precisar. */
.lay-cores {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(26px, 1fr));
  gap: 5px; margin-top: 10px;
}
.lay-cor {
  aspect-ratio: 1; border-radius: 7px; cursor: pointer;
  background: var(--amostra);
  border: 1px solid rgba(0, 0, 0, .25);
  padding: 0;
}
.lay-cor.marcada {
  /* Anel branco POR FORA e nao borda: borda mudaria o tamanho do
     quadradinho e a grade inteira daria um salto ao escolher. */
  box-shadow: 0 0 0 2px var(--superficie), 0 0 0 4px var(--gold);
}
.lay-previa {
  margin-top: 10px; padding: 10px 12px;
  border: 1px dashed var(--borda); border-radius: 10px;
  background: var(--superficie-2); line-height: 1.5;
}

/* A CHAMADA DA MESA DE EDICAO, no alto de Projetos. Fica em faixa e nao
   em cartao da grade: e o unico caminho para o editor, e um cartao no meio
   dos outros se perderia entre as pastas. */
.projetos-chamada {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  margin-bottom: 18px; padding: 14px 16px;
  border: 1px solid var(--gold); border-radius: 14px;
  background: var(--superficie);
}

/* O SELO DE CREDITO, medido na tela de Projetos do HeyGen em 11/09:
   12px, peso 400, cinza azulado. Nao e destaque — e um dado a mais na
   linha de meta, e destacar faria o custo competir com o titulo. */
.video-credito { font-size: 11.5px; color: var(--texto-suave); white-space: nowrap; }

/* A FILA DE ROSTOS na fila de candidatos. Rola na horizontal em vez de
   quebrar: a escolha do avatar divide a linha com nicho, duracao e
   gravacao, e uma grade que cresce empurraria os outros campos para
   fora do campo de visao. */
.fila-avatares { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 6px; }
.fila-avatar {
  flex: 0 0 62px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 4px; cursor: pointer;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 10px;
}
.fila-avatar:disabled { opacity: .45; cursor: not-allowed; }
.fila-avatar.marcado { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.fila-avatar img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: 7px; background: var(--superficie-2); display: block;
}
.fila-avatar-sem {
  width: 100%; aspect-ratio: 3 / 4; display: flex; align-items: center; justify-content: center;
  border-radius: 7px; background: var(--superficie-2); font-size: 18px;
}
.fila-avatar-nome {
  font-size: 9.5px; line-height: 1.15; text-align: center;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* CINCO POR FILEIRA — a grade dos avatares.
   Os cortes sao por CONTAINER e nao por janela: a coluna muda de largura
   quando o copiloto abre ou a barra recolhe, e a fileira tem de
   acompanhar (ver a nota da .conteudo). */
.grade-cards.grade-cinco { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
@container coluna (max-width: 900px) { .grade-cards.grade-cinco { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container coluna (max-width: 700px) { .grade-cards.grade-cinco { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container coluna (max-width: 480px) { .grade-cards.grade-cinco { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .grade-cards.grade-cinco { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* PAINEL DE MOTORES — os achados do diagnostico. */
.mot-achado { margin-bottom: 10px; }
.mot-gravidade { font-size: 10px; font-weight: 700; letter-spacing: .06em; }
.mot-grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.45;
}
@container coluna (max-width: 720px) { .mot-grade { grid-template-columns: minmax(0, 1fr); } }
.mot-rotulo {
  display: block;
  font-size: 10px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--texto-suave);
  margin-bottom: 1px;
}
.mot-grade code { font-size: 11.5px; word-break: break-word; }

/* AS PASTAS EM GRADE DE TRÊS, quadradas e alinhadas.
   `aspect-ratio: 1` e o que as deixa QUADRADAS de verdade; sem ele, a
   altura seguia o conteudo e a pasta com um nome de duas linhas ficava
   mais alta que a vizinha — alinhadas na largura e desalinhadas na
   altura, que e o pior dos dois mundos.
   O conteudo se distribui de alto a baixo (`space-between`): o nome no
   topo, a contagem no meio, os comandos no pe. Empilhado no topo, sobrava
   um vazio grande embaixo em todo cartao. */
.grade-pastas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
@container coluna (max-width: 760px) { .grade-pastas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container coluna (max-width: 460px) { .grade-pastas { grid-template-columns: minmax(0, 1fr); } }
.grade-pastas .pasta-cartao {
  aspect-ratio: 1;
  /* TETO DE ALTURA. Medido: em tres colunas numa coluna de 1052px, o
     quadrado dava 340px de lado — uma pasta com nome, contagem e dois
     botoes ocupando a altura de uma tela de celular, quase toda vazia.
     O teto mantem o quadrado (a largura acompanha) e devolve a proporcao
     ao conteudo que existe de verdade dentro. */
  max-height: 220px;
  max-width: 220px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}
/* O nome nao pode empurrar o resto para fora do quadrado. */
.grade-pastas .pasta-cartao > div:first-child {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.3;
}

/* PASTA COMO PORTA. O cartao inteiro e clicavel, entao precisa parecer
   clicavel — sem isso o operador tenta o nome, tenta a contagem, e conclui
   que nao abre. */
.pasta-cartao { cursor: pointer; transition: border-color .12s, transform .12s, box-shadow .12s; }
.pasta-cartao:hover { border-color: var(--acento); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.14); }
.pasta-topo { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.pasta-bolinha { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; }

/* O QUE AS PASTAS ENSINAM — os quatro numeros e a tabela por pasta. */
.licao-linha { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
@container coluna (max-width: 640px) { .licao-linha { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.licao-caixa {
  display: flex; flex-direction: column; gap: 1px;
  padding: 10px 12px;
  border: 1px solid var(--borda);
  border-radius: 12px;
  background: var(--superficie-2);
}
.licao-caixa strong { font-size: 20px; line-height: 1.15; color: var(--ouro-texto, var(--texto)); }
.licao-caixa span { font-size: 12px; color: var(--hg-medio); }
.licao-caixa em { font-size: 11px; font-style: normal; opacity: .75; }
.licao-tabela { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 12.5px; }
.licao-tabela th, .licao-tabela td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--borda); }
.licao-tabela th { font-weight: 600; color: var(--hg-medio); font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; }

.banco-card { position: relative; padding: 0; overflow: hidden; }
/* A BARRA DE ENVIO PARA PASTAS. Grudada no topo enquanto se rola: numa
   grade de trinta cartoes, o operador marca no fim da lista e o botao
   estaria a tres telas de distancia. */
.banco-envio {
  position: sticky;
  top: 8px;
  z-index: 20;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 1px solid var(--gold);
  border-radius: 12px;
  background: var(--superficie);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
}
.banco-marca {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  display: flex;
  padding: 5px;
  border-radius: 8px;
  /* Fundo proprio: a caixa fica por cima do primeiro quadro do video, e
     sobre imagem clara um checkbox branco desaparece. */
  background: rgba(0, 0, 0, .55);
  cursor: pointer;
}
.banco-marca input { width: 16px; height: 16px; cursor: pointer; margin: 0; }
.banco-card.marcado { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold) inset; }
/* A miniatura e o proprio video com `preload="metadata"`: traz o primeiro
   quadro sem baixar o arquivo. Com trinta cartoes, baixar tudo seriam
   centenas de MB so para montar a tela. Ao passar o mouse ele toca. */
/* MEDIDO 10/09 com ffprobe nos 31 videos trazidos do HeyGen:
   26 sao 1080x1920 (9:16 em pe) e 5 sao 1920x1080.
   A caixa era 16/10 com `cover` — num video em pe isso mostrava uma
   faixa do meio e jogava fora cerca de 70% da altura, cortando cabeca e
   legenda. Era esse o corte.

   Agora: caixa 4/5 (acomoda os dois formatos sem ficar estreita demais
   para os deitados) e `contain`, que NAO corta — o que sobra vira tarja
   preta, do mesmo jeito que o player faz. Perder um pedaco da imagem e
   pior que ver tarja: a tarja se enxerga, o corte engana. */
.banco-miniatura {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: contain;
  display: block;
  background: #000;
  border-radius: 24px 24px 0 0;
}
.banco-corpo { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 2px; }
.banco-titulo {
  font-size: 13px;
  line-height: 1.35;
  color: var(--hg-forte);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* =====================================================================
   TELA 2 — A PAGINA DO VIDEO
   =====================================================================
   Anatomia medida no HeyGen: acoes no topo a direita, titulo e linha do
   autor, player grande, e "mais nesta pasta" embaixo. A cor e do
   sistema. */
.pagina-video { max-width: 1180px; }
.pv-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.pv-acoes { display: flex; gap: 8px; align-items: center; }
.pv-acoes a.botao { text-decoration: none; display: inline-flex; align-items: center; }
.pv-mais { position: relative; }
.pv-mais .menu-video-lista { top: 38px; left: auto; right: 0; }
.pv-titulo { font-size: 22px; font-weight: 700; color: var(--hg-forte); margin: 0 0 4px; }
.pv-linha { font-size: 12px; color: var(--hg-fraco); margin-bottom: 14px; }
/* O QUADRO GRANDE. A tela 2 existe para OLHAR a peca — se o video sair
   pequeno aqui, a tela nao cumpre a funcao dela e vira uma ficha. */
.pv-palco { background: var(--hg-fundo); border: 1px solid var(--borda); border-radius: 16px; padding: 14px; }
/* Altura fixa em vez de `max-height`: com `width:100%` um video em pe
   (26 dos 31) calculava 1,78x a largura de altura e so depois era
   aparado, o que deixava a barra de controles fora da area visivel. */
.pv-video { width: 100%; height: 68vh; object-fit: contain; border-radius: 12px; background: #000; display: block; }
.pv-velocidade { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.pv-abaixo { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; margin-top: 14px; }
@media (max-width: 860px) { .pv-abaixo { grid-template-columns: minmax(0, 1fr); } }
.pv-abaixo textarea { width: 100%; }
/* Carrossel horizontal, como o "Mais nesta pasta" deles: rola dentro de
   si, e nao empurra a pagina. */
.pv-vizinhos { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; }
.pv-vizinho {
  flex: 0 0 168px;
  display: flex; flex-direction: column; gap: 6px;
  padding: 0 0 8px;
  border: 1px solid var(--borda);
  border-radius: 12px;
  background: var(--superficie);
  cursor: pointer;
  overflow: hidden;
  text-align: left;
}
.pv-vizinho:hover { border-color: var(--acento); }
.pv-vizinho video { width: 100%; aspect-ratio: 4/5; object-fit: contain; background: #000; display: block; }
.pv-vizinho span { font-size: 11.5px; line-height: 1.35; color: var(--hg-medio); padding: 0 8px; }

/* ---------------------------------------------------------------------
   FERRAMENTAS DE IA E GRADE DO HEYGEN — acrescentado em 11/09
   ---------------------------------------------------------------------
   A porta de cada ferramenta copia a forma do HeyGen: um bloco largo com
   o nome em cima e a chamada embaixo, clicável inteiro. O fio é o do
   sistema (var(--btn-fio)) para o motor de Layout alcançar isto também —
   um bloco com cor literal seria mais um lugar onde a cor do operador
   não chega. */
.ia-porta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  width: 100%;
  text-align: left;
  background: var(--superficie);
  border: 1px solid var(--btn-fio, var(--borda));
  border-radius: 12px;
  padding: 11px 13px;
  margin-bottom: 8px;
  cursor: pointer;
  color: inherit;
  font: inherit;
  transition: border-color .12s, box-shadow .12s;
}
.ia-porta:hover { border-color: var(--acento); box-shadow: 0 2px 10px rgba(0,0,0,.07); }
.ia-porta strong { font-size: 14px; font-weight: 600; }
.ia-porta span { font-size: 12px; color: var(--texto-suave); line-height: 1.35; }

/* A marcação fica DENTRO da miniatura, como no HeyGen: o cartão inteiro
   já é clicável para abrir, e um quadradinho fora dele competiria com o
   clique principal. */
.hg-marca {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(0, 0, 0, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.hg-marca input { width: 14px; height: 14px; cursor: pointer; margin: 0; }

/* A TRILHA DAS QUATRO PÁGINAS. Medida no HeyGen em 11/09: início →
   projetos → pasta → projeto. Sem ela o editor sabe onde está mas não
   quantos passos faltam para voltar. */
.hg-migalhas {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--texto-suave);
  margin-bottom: 12px;
}
.hg-migalhas button {
  background: none;
  border: none;
  padding: 2px 4px;
  font: inherit;
  color: var(--acento-texto, var(--texto-suave));
  cursor: pointer;
  border-radius: 4px;
}
.hg-migalhas button:hover { background: var(--superficie-2); }
.hg-migalhas .atual { color: var(--hg-forte); font-weight: 600; }
.hg-migalhas .passo {
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--btn-fio, var(--borda));
  border-radius: 9999px;
  padding: 0 7px;
  line-height: 18px;
  font-size: 11px;
}

/* Sistemas de marca na cena — a linha de kit e o par de alcance. */
.marca-alcance { display: flex; gap: 4px; background: var(--hg-fundo); border-radius: 9999px; padding: 3px; }
.marca-alcance button {
  flex: 1;
  border: none;
  background: none;
  font: inherit;
  font-size: 12px;
  padding: 5px 8px;
  border-radius: 9999px;
  cursor: pointer;
  color: var(--texto-suave);
}
.marca-alcance button.ativa { background: var(--superficie); color: var(--hg-forte); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.10); }
.marca-linha {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  text-align: left;
  background: var(--superficie);
  border: 1px solid var(--btn-fio, var(--borda));
  border-radius: 10px;
  padding: 8px 10px;
  margin-bottom: 6px;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.marca-linha:hover { border-color: var(--acento); }
.marca-linha.ativa { border: 2px solid var(--gold); padding: 7px 9px; }
.marca-cores { display: flex; gap: 3px; flex: none; }
.marca-cores i { width: 12px; height: 20px; border-radius: 3px; display: block; border: 1px solid rgba(0,0,0,.15); }
.marca-nome { flex: 1; min-width: 0; font-size: 13px; display: flex; flex-direction: column; }
.marca-nome em { font-size: 11px; color: var(--texto-suave); font-style: normal; }
.marca-selo { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--ouro-texto, var(--gold)); }

/* GALERIA DE ELEMENTOS — quatro familias e a grade de presets.
   A miniatura desenha o preset no quadro em miniatura, com as MESMAS
   percentagens que a camada vai ter: assim o editor ve onde a coisa cai
   antes de clicar, em vez de descobrir no palco. */
.el-familias { display: flex; gap: 4px; background: var(--hg-fundo); border-radius: 9999px; padding: 3px; margin-bottom: 10px; }
.el-familias button {
  flex: 1; border: none; background: none; font: inherit; font-size: 12px;
  padding: 5px 6px; border-radius: 9999px; cursor: pointer; color: var(--texto-suave);
}
.el-familias button.ativa { background: var(--superficie); color: var(--hg-forte); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.10); }
.el-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.el-preset {
  display: flex; flex-direction: column; gap: 5px; align-items: stretch;
  background: var(--superficie); border: 1px solid var(--btn-fio, var(--borda));
  border-radius: 10px; padding: 6px; cursor: pointer; color: inherit; font: inherit;
}
.el-preset:hover { border-color: var(--acento); }
.el-preset:disabled { opacity: .5; cursor: progress; }
.el-forma { position: relative; display: block; aspect-ratio: 9 / 16; background: var(--hg-fundo); border-radius: 6px; overflow: hidden; }
.el-forma i { position: absolute; display: block; }
.el-rotulo { font-size: 11px; line-height: 1.25; color: var(--texto-suave); text-align: center; }

/* OS TRES PONTINHOS NO CARTAO DA GRADE.
   Canto superior esquerdo por decisao do operador — no HeyGen os botoes
   do cartao ficam a direita (medido 10/09: x=285 e x=313 num cartao de
   345). O fundo escuro existe porque a miniatura pode ser clara ou
   escura, e um botao sem fundo some na metade dos casos. */
.hg-canto {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  background: rgba(0, 0, 0, .55);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
}
.hg-canto .menu-video-botao, .hg-canto button { color: #fff; }

/* ============ BOTAO TRAVADO TEM DE PARECER TRAVADO ============

   MEDIDO NA TELA em 12/09, com o sistema aberto no navegador: o botao de
   converter estava desabilitado e mesmo assim com fundo dourado cheio
   rgb(224,175,45) a 45% de opacidade. Sobre o fundo escuro da casa isso
   continua sendo um botao dourado — o operador clicava, nada acontecia, e
   concluiu, com razao, que o sistema estava quebrado.

   Opacidade nao basta: e preciso TIRAR a cor de acao. O botao travado passa
   a ser contorno tracejado, sem fundo. A regra .botao.dourado tem
   especificidade maior que .botao:disabled, por isso os seletores completos
   abaixo — e nao um !important, que esconderia o motivo de quem ler depois. */
.botao:disabled,
.botao.dourado:disabled,
:root[data-tema='escuro'] .botao.dourado:disabled,
:root:not([data-tema='claro']) .botao.dourado:disabled,
:root[data-tema='claro'] .botao.dourado:disabled,
:root:not([data-tema='escuro']) .botao.dourado:disabled {
  background: transparent;
  color: var(--texto-suave);
  border: 1px dashed var(--borda);
  box-shadow: none;
  opacity: 1;
  cursor: not-allowed;
}

/* O MOTIVO DO TRAVAMENTO, VISIVEL.
   Ele existia — "0 de 1 selecionados" — em cinza pequeno acima do botao, e
   nao era lido. Quem esta travado precisa saber POR QUE, no mesmo lugar em
   que clicou. */
.aviso-travado {
  display: block;
  margin: 6px 0 8px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--gold);
  background: rgba(224, 175, 45, .1);
  color: var(--texto);
  font-size: 12.5px;
  line-height: 1.35;
}

/* A LINHA INTEIRA SELECIONA, e o cursor diz isso antes do clique. */
.arquivo-linha { cursor: pointer; }
.arquivo-linha.incompativel { cursor: not-allowed; }

/* O ALVO DE SELECAO. Eram 13 px — menor que a ponta do dedo e menor que o
   erro de mira de um mouse em tela grande. */
.arquivo-linha input[type='radio'],
.arquivo-linha input[type='checkbox'] {
  width: 18px;
  height: 18px;
  flex: none;
  accent-color: var(--gold);
  cursor: pointer;
}

/* =====================================================================
   A AREA MORTA — medida na tela em 12/09, janela de 1440x900

   O operador: "recolher deixa area morta, em todos os modulos... ajuste
   para que a tela se amolde naturalmente a tela completa".

   Medido na tela "Converter PDF":
     area principal ............ 1192 px de largura
     coluna de conteudo ........ 1100 px  ->  92 px mortos a direita
     grade de 14 ferramentas ... 378 px de altura  ->  446 px MORTOS abaixo
     barra lateral ............. 293 px de conteudo escondido, sem aviso

   Metade da tela vazia embaixo, e ao mesmo tempo quatro modulos fora de
   vista na barra. A largura ganha ao recolher a barra nao ia para lugar
   nenhum: o `max-width: 1100px` a engolia.
   ===================================================================== */

/* A COLUNA DE CONTEUDO ACOMPANHA A LARGURA, ate um teto de leitura.

   1100px era um teto fixo: numa tela de 1440 sobravam 92px a direita, e
   recolher a barra nao adiantava nada. 1600px continua sendo um teto (linha
   longa demais cansa de ler), mas agora recolher a barra DEVOLVE espaco. */
/* O teto novo, medido: 1600px continua sendo um teto de leitura (linha
   longa cansa), mas agora recolher a barra DEVOLVE espaco. */
.conteudo { max-width: 1600px; }

/* A COLUNA OCUPA A ALTURA DA TELA, para a grade ter o que preencher.
   Sem isto a grade nao sabe que ha espaco sobrando embaixo — ela se encolhe
   ao tamanho do conteudo e o resto fica branco. */
.conteudo {
  display: flex;
  flex-direction: column;
  /* DESCONTANDO A DOCA. Este min-height existe para a grade ter o que
     preencher (a area morta). Mas 100vh ignora a doca aberta: o conteudo
     ficava 828px de alto dentro de uma aplicacao de 520, e os cartoes
     passavam por baixo da doca. Medido na tela. */
  min-height: calc(100vh - var(--doca-altura, 0px) - 72px);
}

/* AS LINHAS DA GRADE CRESCEM ATE PREENCHER — COM TETO.

   `1fr` sozinho faria um unico cartao virar uma tela inteira, o que e
   grotesco. `minmax(auto, 132px)` deixa a linha crescer ate 132px e parar:
   as 5 linhas das 14 ferramentas passam a ocupar a folha, e uma grade de
   dois cartoes continua parecendo uma grade de dois cartoes.

   `align-content: start` continua valendo quando as linhas ja encheram — e
   o que impede a grade de espalhar os cartoes com buracos entre eles. */
.grade-cards {
  align-content: start;
  grid-auto-rows: minmax(auto, 132px);
}

/* A grade de ferramentas e a que fica na tela inteira: ela recebe a sobra. */
.conteudo > .grade-cards { flex: 1 1 auto; }

/* A BARRA LATERAL DIZ QUE TEM MAIS COISA ABAIXO.

   Medido: 293px de conteudo fora de vista, e nenhum sinal disso. Quatro
   modulos — Coletor, Central de Plugins, Conta e Configuracoes — sumiam para
   quem nao adivinhasse que aquela lista rola. A sombra no rodape e o sinal
   universal de "continua"; ela aparece sozinha e some quando chega ao fim,
   porque `background-attachment: local` prende a sombra ao CONTEUDO e nao a
   caixa. */
.lateral-rolagem {
  background:
    linear-gradient(var(--lateral-fundo) 30%, rgba(0, 0, 0, 0)) top / 100% 24px no-repeat local,
    linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .35) 70%) bottom / 100% 24px no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0)) top / 100% 10px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0)) bottom / 100% 10px no-repeat scroll;
}

/* E a barra aperta o passo quando o que ela tem nao cabe.
   Numa tela baixa, 21 modulos com o respiro de uma tela alta nao cabem de
   jeito nenhum — e o que se ganha apertando o espacamento e justamente o
   que faltava. */
@media (max-height: 940px) {
  .barra-lateral .item-lateral { padding-top: 6px; padding-bottom: 6px; }
  .barra-lateral .grupo-lateral { margin-top: 8px; }
  .marca-lateral { padding-top: 10px; padding-bottom: 8px; }
}

/* =====================================================================
   DIALOGO NAO E CARTAO DECORATIVO — medido na tela em 12/09

   O operador: "renomear modulo esta transparente, corrija". Media-se na
   tela: os cartoes de "PDF para JPG" e "Word para PDF" liam-se ATRAVES da
   janela de renomear.

   A regra que produzia isso vem do Motor de Layout:
     .cartao, .card, ... { background-color:
       color-mix(in srgb, var(--superficie) 0%, transparent) !important; }
   e o 0% vem do modelo de cartao escolhido: card-22 "Neon", fantasma.

   Cartao fantasma na tela e escolha estetica legitima. O defeito era a
   caixa de renomear ser um `.cartao`: um dialogo fica SOBRE o conteudo, e
   um dialogo sem fundo e ilegivel por definicao — em qualquer modelo.

   Por isso a regra abaixo vem com `!important` e seletor de especificidade
   alta: ela precisa vencer a do Motor de Layout, que tambem e `!important`.
   Nao e teimosia de CSS — e a diferenca entre decoracao e legibilidade.
   ===================================================================== */
.previa-fundo > .cartao,
.previa-fundo > .painel-solido,
.renomear-caixa,
.cartao.renomear-caixa {
  background-color: var(--superficie) !important;
  border: 1px solid var(--borda) !important;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .45) !important;
}

/* E o fundo atras do dialogo escurece de verdade, para o que esta embaixo
   parar de competir com o que se esta lendo. 0,55 ja era o valor; o que
   faltava era o dialogo ter fundo proprio na frente dele. */
.previa-fundo { backdrop-filter: blur(2px); }

/* =====================================================================
   A HORA E OS ALERTAS

   A hora fica a vista porque todo documento que sai daqui leva a data
   desta maquina. Os alertas ficam a vista porque o sistema ja sabia de
   trabalho rejeitado e motor essencial faltando — e nao contava a ninguem.
   ===================================================================== */
.hora-alertas { display: flex; align-items: center; gap: 10px; position: relative; }

.relogio {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.1;
  padding-right: 10px;
  border-right: 1px solid var(--borda);
}
/* Tabular: sem isso os digitos mudam de largura e o relogio "dança" a cada
   segundo, o que chama atencao para o lugar errado da tela. */
.relogio-hora {
  font-size: 15px;
  font-weight: 700;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
  letter-spacing: .5px;
}
.relogio-data { font-size: 10.5px; color: var(--texto-suave); font-variant-numeric: tabular-nums; }

.sino-alertas {
  position: relative;
  background: transparent;
  border: 1px solid var(--borda);
  border-radius: 10px;
  color: var(--texto-suave);
  cursor: pointer;
  padding: 5px 9px;
  font-size: 14px;
  line-height: 1;
}
.sino-alertas:hover { border-color: var(--acento); color: var(--texto); }
.sino-alertas.atencao { border-color: var(--gold); color: var(--gold); }
.sino-alertas.grave { border-color: var(--vermelho); color: var(--vermelho); }

/* A contagem no canto. Ela e o unico enfeite que se permite aqui: numero
   sobre o sino e a convencao que todo mundo ja le sem aprender. */
.sino-conta {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--vermelho);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sino-alertas.atencao .sino-conta { background: var(--gold); color: #1a1200; }

/* A cortina fecha a lista ao clicar em qualquer lugar. Sem ela, a lista
   fica aberta atras do proximo clique do operador. */
.sino-cortina { position: fixed; inset: 0; z-index: 40; }

.sino-lista {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 41;
  min-width: 300px;
  max-width: 400px;
  border-radius: 14px;
  padding: 12px;
  /* Opaco SEMPRE: e uma sobreposicao, e sobreposicao sem fundo e
     ilegivel — a mesma razao da caixa de renomear. */
  background: var(--superficie) !important;
  border: 1px solid var(--borda) !important;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .45) !important;
}
.sino-titulo { font-weight: 700; font-size: 13px; margin-bottom: 8px; color: var(--texto); }
.sino-vazio { font-size: 12.5px; color: var(--texto-suave); line-height: 1.4; }
.sino-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 8px;
  font-size: 12.5px;
  color: var(--texto);
  cursor: pointer;
}
.sino-item:hover { background: var(--superficie-2, rgba(127,127,127,.12)); }
.sino-ponto { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.sino-ponto.grave { background: var(--vermelho); }
.sino-ponto.atencao { background: var(--gold); }
.sino-rodape {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--borda);
  font-size: 11px;
  color: var(--texto-suave);
  line-height: 1.35;
}

/* Tela estreita: a data sai e a hora fica. Quem tem pouco espaco precisa
   da hora, nao do dia — o dia ele sabe. */
@media (max-width: 1100px) {
  .relogio-data { display: none; }
}

/* =====================================================================
   O ARRASTO DOS MODULOS

   Duas marcas, e so duas: o que esta saindo fica apagado, e o lugar onde
   ele vai cair ganha uma linha. Mais que isso vira festa e atrapalha a
   mira — quem arrasta precisa enxergar o ALVO, nao o enfeite.
   ===================================================================== */
.item-lateral[draggable="true"] { cursor: grab; }
.item-lateral.arrastando { opacity: .4; cursor: grabbing; }
.item-lateral.alvo-do-arrasto {
  box-shadow: inset 0 2px 0 0 var(--gold);
  border-radius: 8px;
}

/* O comando de voltar a ordem de fabrica so aparece quando HA ordem
   propria: um botao que nao faz nada em 99% das visitas e ruido. */
.ordem-original {
  float: right;
  background: transparent;
  border: none;
  color: var(--gold);
  font-size: 9.5px;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  opacity: .75;
}
.ordem-original:hover { opacity: 1; }
.barra-lateral.recolhida .ordem-original { display: none; }

/* O arrasto nos cartoes: as mesmas duas marcas da barra lateral. O que
   sai fica apagado, o lugar onde cai ganha um fio. */
.grade-cards .card[draggable="true"] { cursor: grab; }
.grade-cards .card.arrastando { opacity: .4; cursor: grabbing; }
.grade-cards .card.alvo-do-arrasto { outline: 2px solid var(--gold); outline-offset: 2px; }

.ordem-aviso {
  font-size: 11.5px;
  color: var(--texto-suave);
  margin-bottom: 8px;
}
.ordem-aviso .ordem-original { float: none; font-size: 11.5px; }

/* =====================================================================
   A AIRIA ENCAIXADA EMBAIXO — a tela DIVIDE, nao fica coberta

   O operador: "airia ... deve aparecer tambem como um vetor no canto
   inferior da tela, que ao clicar abre e expande, dividindo a tela, no
   mesmo padrao do sistema de criacao de videos".

   MARGEM, E NAO ENCHIMENTO, e a licao ja aprendida aqui com o copiloto
   encaixado: `padding` preso numa transicao chega zerado, e o conteudo
   some por baixo da doca. Margem faz o mesmo servico e nao trava.

   E a altura vive numa variavel porque DUAS coisas leem o mesmo numero: a
   doca e a margem. Dois valores um dia divergem — e ai sobra uma faixa
   vazia, ou o conteudo desaparece por baixo.
   ===================================================================== */
:root { --doca-altura: 0px; }

/* A ALTURA VAI NA APLICACAO INTEIRA, e nao numa margem da area principal.

   MEDIDO NA TELA em 12/09: com `margin-bottom` na area principal, abrir a
   doca de 380px encolheu a area em 12px — ela COBRIU o painel em vez de
   dividir a tela. A razao: a area principal e um item flex esticado dentro de
   uma aplicacao de altura 100vh; margem inferior nao reduz a altura de quem
   e esticado pelo pai, so empurra o que vem depois — e nao vem nada depois.

   Encolhendo a APLICACAO, a barra lateral e a area principal encolhem juntas,
   que e o certo: a doca ocupa a largura inteira, entao ela tira altura dos
   dois. E ai a tela divide de verdade, em dois andares.

   E a transicao fica de fora de proposito: e a mesma armadilha do copiloto
   encaixado, em que uma animacao rodando prendia o valor e ele chegava
   zerado. Altura sem animacao nao tem o que travar. */
.aplicacao {
  height: calc(100vh - var(--doca-altura));
  /* O `min-height: 100vh` la em cima era o que impedia o encolhimento: uma
     altura minima de tela inteira faz a aplicacao IGNORAR a altura calculada,
     e a doca volta a cobrir. Medido na tela: encolheu 0 de 380 px. */
  min-height: calc(100vh - var(--doca-altura));
}

/* A barra lateral tambem: a altura dela era `calc(100vh - 16px)`, fixa na
   tela inteira. Com a doca aberta ela passava por baixo. */
.barra-lateral { height: calc(100vh - var(--doca-altura) - 16px); }

/* O VETOR, fechado: uma aba discreta no canto, que nao disputa espaco com
   nada. Ele so existe enquanto a doca esta fechada — aberta, quem faz o
   papel dele e a barra da doca. */
.doca-vetor {
  position: fixed;
  right: 18px;
  bottom: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 1px solid var(--borda);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  background: var(--superficie);
  color: var(--texto);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 -6px 20px rgba(0, 0, 0, .18);
}
.doca-vetor:hover { border-color: var(--gold); color: var(--gold); }
.doca-vetor-icone { color: var(--gold); }
.doca-vetor-seta { color: var(--texto-suave); font-size: 10px; }

/* A DOCA, aberta. Colada embaixo, largura inteira: e uma FAIXA, nao uma
   janela — ela divide a tela em dois andares. */
.doca {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border-top: 1px solid var(--borda);
  box-shadow: 0 -10px 34px rgba(0, 0, 0, .3);
}

/* O puxador no limite entre a doca e o painel, que e onde a mao procura. */
.doca-puxador {
  position: absolute;
  top: -3px;
  left: 0;
  right: 0;
  height: 7px;
  cursor: row-resize;
  background: transparent;
  z-index: 2;
}
.doca-puxador:hover { background: var(--gold); }

.doca-barra {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--borda);
  flex: none;
}
.doca-titulo { font-weight: 700; font-size: 13.5px; color: var(--texto); }
.doca-titulo span { color: var(--gold); }
.doca-nota { color: var(--texto-suave); font-size: 11.5px; flex: 1; }
.doca-comandos { display: flex; gap: 6px; }
.doca-botao {
  background: transparent;
  border: 1px solid var(--borda);
  border-radius: 8px;
  color: var(--texto-suave);
  font-size: 11.5px;
  padding: 4px 9px;
  cursor: pointer;
}
.doca-botao:hover { border-color: var(--gold); color: var(--gold); }

/* O corpo rola sozinho: a doca tem altura fixa, e o conteudo dela nao. */
.doca-corpo { flex: 1; overflow-y: auto; padding: 14px 16px; min-height: 0; }

/* Tela baixa nao comporta divisao: sobraria uma nesga para o painel. Ai a
   doca ocupa a tela e a margem zera — melhor cobrir de proposito do que
   deixar dois andares ilegiveis. */
@media (max-height: 560px) {
  .area-principal { margin-bottom: 0; }
  .doca { top: 0; height: auto !important; }
}
/* =====================================================================
   O QUE É PRÓPRIO DO CONVERSOR
   =====================================================================
   styles.css veio inteiro do Sistema de Vídeo e manda na aparência: cores,
   temas, barra lateral, cartões, botões. Aqui entra SÓ o que este sistema
   tem e aquele não tinha — a bancada da ferramenta, a área de arquivos, a
   previsualização e os medidores.

   Nenhuma cor literal abaixo: tudo sai das variáveis do tema, senão o tema
   escuro e o Motor de Layout deixariam de alcançar estas telas. */

.conteudo {
  padding: 16px;
}

.secao-titulo {
  margin: 22px 0 10px;
  font-size: 14px;
  letter-spacing: .02em;
  color: var(--texto-suave);
  text-transform: uppercase;
}

.marca-exclusiva {
  margin-left: 8px;
  font-size: 10px;
  text-transform: none;
  letter-spacing: 0;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--acento-fraco);
  border: 1px solid var(--acento-fio);
  color: var(--acento-texto);
}

/* ---- Barra lateral: o que o conversor acrescentou ---- */
.lateral-rolagem { flex: 1; overflow-y: auto; overflow-x: hidden; }
.lateral-seta { margin-left: auto; opacity: .65; padding: 0 4px; font-size: 11px; }
.lateral-seta:hover { opacity: 1; }
.item-lateral.filho { padding-left: 30px; font-size: .92em; opacity: .92; }
.ponto-estado { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; background: var(--borda); }
.ponto-estado.pronta { background: var(--verde); }

/* ---- Cartão de ferramenta ---- */
.card-ferramenta {
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.card-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.card-desc { color: var(--texto-suave); font-size: 13px; flex: 1; }
.card-versao { font-family: monospace; font-size: 11px; opacity: .75; }
.card-rodape { font-size: 11px; color: var(--texto-suave); }
.card-rodape code { font-size: 10px; word-break: break-all; }
.card-ressalva {
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 10px;
  background: var(--acento-fraco);
  border: 1px solid var(--acento-fio);
}

.badge.pronta { background: var(--verde); color: #fff; }
.badge.pendente { background: var(--borda); color: var(--texto-suave); }
.badge.faltando { background: var(--vermelho); color: #fff; }

/* ---- Medidores do Início ---- */
.painel-medidores { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.medidor { text-align: left; cursor: pointer; font: inherit; color: inherit; padding: 16px; }
.medidor-numero { font-size: 34px; font-weight: 700; line-height: 1; }
.medidor-numero small { font-size: 16px; font-weight: 400; color: var(--texto-suave); }
.medidor-rotulo { margin-top: 6px; font-size: 13px; }
.medidor-nota { margin-top: 4px; font-size: 11px; color: var(--texto-suave); }

.atalho {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 20px; cursor: pointer; font: inherit; color: inherit; min-height: 96px;
}
.atalho-icone { font-size: 26px; color: var(--acento-texto); }

/* ---- Área de arquivos ---- */
.area-solta {
  border: 2px dashed var(--borda);
  border-radius: var(--raio-card, 16px);
  padding: 26px;
  text-align: center;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--superficie-2);
  transition: border-color .12s, background .12s;
}
.area-solta:hover, .area-solta.sobre { border-color: var(--acento); background: var(--acento-fraco); }

.lista-arquivos { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.arquivo-linha {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-card, 12px);
  background: var(--superficie);
  cursor: pointer;
}
.arquivo-linha:hover { border-color: var(--acento-fio); }
.arquivo-linha.marcado { border-color: var(--acento); background: var(--acento-fraco); }
.arquivo-linha.incompativel { opacity: .45; cursor: not-allowed; }
.arquivo-icone { font-size: 17px; opacity: .8; }
.arquivo-nome { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arquivo-meta { font-size: 11px; color: var(--texto-suave); }
.arquivo-aviso { font-size: 11px; color: var(--acento-texto); margin-top: 3px; }

.botao.perigo { border-color: var(--vermelho); color: var(--vermelho); }

/* ---- A bancada: o desenho do iLovePDF ---- */
.bancada { display: flex; gap: 16px; align-items: flex-start; }
.bancada-palco { flex: 1; min-width: 0; }
.bancada-cabecalho { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.aviso-ressalva {
  margin-bottom: 12px; padding: 10px 12px; font-size: 13px;
  border-radius: var(--raio-card, 12px);
  background: var(--acento-fraco); border: 1px solid var(--acento-fio);
}

.bancada-comandos {
  flex: 0 0 288px;
  position: sticky; top: 16px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-card, 16px);
  padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.comandos-titulo { font-size: 15px; font-weight: 700; }
.comandos-contagem { font-size: 12px; color: var(--texto-suave); border-top: 1px solid var(--borda); padding-top: 10px; }
.comandos-nota { font-size: 11px; color: var(--texto-suave); }
.botao-executar { width: 100%; padding: 12px; font-size: 15px; }
.botao-executar:disabled { opacity: .45; cursor: not-allowed; }

/* Numa janela estreita a coluna de comandos vira uma faixa embaixo, em vez
   de espremer os dois lados a ponto de nenhum ser usável. */
@media (max-width: 900px) {
  .bancada { flex-direction: column; }
  .bancada-comandos { position: static; width: 100%; flex: 1 1 auto; }
}

/* ---- Campos ---- */
.campo-bloco { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.campo-rotulo { font-size: 12px; font-weight: 600; }
.campo-ajuda { font-size: 11px; color: var(--texto-suave); }
.campo-inline { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 6px; }
.barra-filtro { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.barra-filtro .campo { flex: 1; min-width: 220px; }

/* ---- Resultado ---- */
.resultado-selo { font-size: 17px; font-weight: 700; margin-bottom: 10px; }
.resultado-selo.concluido { color: var(--verde); }
.resultado-selo.ressalva { color: var(--gold); }
.resultado-selo.rejeitado { color: var(--vermelho); }
.prova-caixa { border-left: 3px solid var(--verde); }
.prova-numeros { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; font-family: monospace; }
.prova-numeros em { color: var(--texto-suave); font-style: normal; }

/* ---- Contadores da fila ---- */
.contadores { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.contador {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 14px; min-width: 86px; cursor: pointer; font: inherit; color: inherit;
  background: var(--superficie-2); border: 1px solid var(--borda);
  border-radius: var(--raio-card, 12px);
}
.contador strong { font-size: 19px; }
.contador span { font-size: 11px; color: var(--texto-suave); }
.contador.aceso { border-color: var(--acento); background: var(--acento-fraco); }
.contador.concluido strong { color: var(--verde); }
.contador.ressalva strong { color: var(--gold); }
.contador.rejeitado strong { color: var(--vermelho); }

.selo-estado {
  font-size: 10px; padding: 3px 8px; border-radius: 999px; white-space: nowrap;
  background: var(--borda); color: var(--texto-suave);
}
.selo-estado.concluido { background: var(--verde); color: #fff; }
.selo-estado.ressalva { background: var(--gold); color: #000; }
.selo-estado.rejeitado { background: var(--vermelho); color: #fff; }

.trilha-linha { border-left: 2px solid var(--borda); padding: 0 0 12px 12px; }
.trilha-hora { font-family: monospace; font-size: 11px; color: var(--texto-suave); margin-right: 8px; }
.trilha-detalhe {
  font-size: 11px; background: var(--superficie-2); padding: 8px;
  border-radius: 8px; margin: 6px 0 0; overflow: auto; max-height: 180px;
}

/* ---- Previsualização ---- */
.previa-fundo {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .55);
  display: flex; align-items: center; justify-content: center; z-index: 90; padding: 20px;
}
.previa-janela {
  width: min(1000px, 96vw); max-height: 92vh;
  display: flex; flex-direction: column; padding: 0; overflow: hidden;
}
.previa-topo {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 14px; border-bottom: 1px solid var(--borda);
}
.previa-topo strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.previa-corpo { padding: 14px; overflow: auto; flex: 1; }
.previa-quadro { width: 100%; height: 72vh; border: 0; background: var(--superficie-2); }
.previa-texto {
  font-size: 12px; white-space: pre-wrap; word-break: break-word;
  background: var(--superficie-2); padding: 12px; border-radius: 10px; margin: 0;
}

/* ---- Centro de comando (botão direito) e renomear ----
   As classes .centro-comando e .centro-item já constam da lista de
   superfícies do Motor de Layout, portado do Sistema de Vídeo: elas
   obedecem ao modelo de card escolhido em Configurações sem nada a mais. */
.centro-comando {
  position: fixed;
  z-index: 120;
  min-width: 232px;
  padding: 6px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-card, 14px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.centro-titulo {
  padding: 6px 10px 8px;
  font-size: 11px;
  color: var(--texto-suave);
  border-bottom: 1px solid var(--borda);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.centro-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 7px 10px;
  font: inherit;
  font-size: 13px;
  color: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
.centro-item:hover { background: var(--acento-fraco); }
.centro-item.perigo { color: var(--vermelho); }
.centro-atalho { font-size: 10px; color: var(--texto-suave); }

.recado-flutuante {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 130;
  padding: 9px 16px;
  font-size: 13px;
  background: var(--navy);
  color: var(--bg);
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
}

.renomear-caixa { width: min(420px, 92vw); padding: 18px; }

/* =====================================================================
   CARTÃO LIMPO E COLORIDO
   =====================================================================
   O cartão perdeu o texto técnico e ganhou cor sólida. A cor vem do módulo
   Cores dos cartões, resolvida no servidor. Aqui só se desenha. */
.grade-cards.compacta { grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 10px; }
.grade-cards.compacta .card-ferramenta {
  min-height: 74px;
  padding: 14px 16px;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.card-nome { font-size: 14px; font-weight: 600; line-height: 1.25; }
.card-ponto {
  width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px;
  border: 1.5px solid currentColor; opacity: .55;
}
.card-ponto.pronta { background: currentColor; opacity: .9; }
/* Pintado, a borda some e a cor manda. O halo do Motor de Layout continua
   valendo: ele desenha por cima, não por baixo. */
.card-ferramenta.pintado { border-width: 0 !important; }
.card-ferramenta.pintado:hover { filter: brightness(1.12); }
.card-ferramenta.pendente:not(.pintado) { opacity: .78; }
.card-ferramenta.pintado.pendente { opacity: .62; }

/* ---- Cores dos cartões (Configurações) ---- */
.lista-cores { display: flex; flex-direction: column; gap: 8px; }
.linha-cor { display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
.amostra-cor {
  width: 44px; height: 38px; flex: 0 0 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--raio-card, 10px);
  border: 1px solid var(--borda);
  font-weight: 700;
  background: var(--superficie-2);
}
.tira-paleta { display: flex; flex-wrap: wrap; gap: 4px; max-width: 330px; }
.ponto-paleta {
  width: 17px; height: 17px; border-radius: 50%;
  border: 1px solid var(--borda); cursor: pointer; padding: 0;
  background: var(--superficie-2);
}
.ponto-paleta.aceso { outline: 2px solid var(--acento); outline-offset: 2px; }

/* ---- Central de plugins ---- */
.conector-topo { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.marca-segredo, .marca-origem {
  margin-left: 6px; font-size: 9px; text-transform: uppercase;
  padding: 1px 6px; border-radius: 999px; letter-spacing: .04em;
}
.marca-segredo { background: var(--vermelho); color: #fff; }
.marca-origem.ambiente { background: var(--acento-fraco); border: 1px solid var(--acento-fio); color: var(--acento-texto); }
.marca-origem.cofre { background: var(--verde); color: #fff; }
.marca-origem.vazio { background: var(--borda); color: var(--texto-suave); }

/* ---- AIRIA ---- */
.tira-objetivos { display: flex; gap: 8px; flex-wrap: wrap; }
.objetivo {
  padding: 8px 14px; font: inherit; font-size: 13px; color: inherit; cursor: pointer;
  background: var(--superficie-2); border: 1px solid var(--borda);
  border-radius: var(--raio-botao, 999px);
}
.objetivo.aceso { background: var(--acento-fraco); border-color: var(--acento); }

.decisao {
  border-left: 3px solid var(--verde);
  background: var(--superficie-2);
  border-radius: 0 12px 12px 0;
  padding: 10px 12px;
  margin-top: 10px;
}
.decisao.palpite { border-left-color: var(--gold); }
.decisao.observacao { border-left-color: var(--borda); }
.decisao-topo { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.decisao-oque { font-weight: 700; font-size: 14px; }
.decisao-porque { font-size: 13px; margin-top: 3px; }
.decisao-apoio { font-size: 12px; color: var(--texto-suave); margin-top: 5px; }
.decisao-apoio em { font-style: normal; font-weight: 600; }
.decisao-ressalva {
  font-size: 12px; margin-top: 7px; padding: 6px 8px; border-radius: 9px;
  background: var(--acento-fraco); border: 1px solid var(--acento-fio);
}
.selo-confianca { font-size: 10px; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.selo-confianca.firme { background: var(--verde); color: #fff; }
.selo-confianca.palpite { background: var(--gold); color: #000; }
.limites { border-left: 3px solid var(--gold); }
.limites ul { margin: 8px 0 12px; padding-left: 18px; font-size: 13px; color: var(--texto-suave); }
.limites li { margin-bottom: 5px; }

/* ---- Sinal da ligação ao vivo ---- */
.sinal-ligacao {
  font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 5px;
}
.sinal-ligacao::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sinal-ligacao.ao-vivo { background: var(--acento-fraco); color: var(--verde); border: 1px solid var(--verde); }
.sinal-ligacao.ao-vivo::before { animation: pulsa-sinal 2s ease-in-out infinite; }
.sinal-ligacao.caiu { background: var(--acento-fraco); color: var(--vermelho); border: 1px solid var(--vermelho); }
.sinal-ligacao.ligando { background: var(--superficie-2); color: var(--texto-suave); border: 1px solid var(--borda); }
@keyframes pulsa-sinal { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* ---- Identidade ---- */
.caixa-logotipo {
  width: 130px; height: 78px; flex: 0 0 130px;
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--borda); border-radius: var(--raio-card, 12px);
  background: var(--superficie-2); color: var(--texto-suave); font-size: 11px; overflow: hidden;
}
.caixa-logotipo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.previa-carimbo { border-left: 3px solid var(--gold); }
.bloco-assinatura { margin-top: 12px; max-width: 300px; }
.linha-assinatura { border-top: 1px solid var(--texto); margin-bottom: 6px; }
.assinatura-nome { font-weight: 700; font-size: 14px; }
.assinatura-cargo { font-size: 11px; }
.assinatura-data { font-size: 10px; color: var(--texto-suave); margin-top: 2px; }

/* ---- O caminho da conversão, antes de converter ---- */
.caminho-caixa {
  border-left: 3px solid var(--verde);
  background: var(--superficie-2);
  border-radius: 0 10px 10px 0;
  padding: 9px 11px;
  font-size: 12px;
}
.caminho-caixa.impossivel { border-left-color: var(--vermelho); }
.trilho { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; margin: 7px 0; }
.posto {
  font-family: monospace; font-size: 10px; font-weight: 700;
  padding: 2px 6px; border-radius: 5px;
  background: var(--acento-fraco); border: 1px solid var(--acento-fio);
}
.salto { display: inline-flex; align-items: center; gap: 3px; }
.seta { opacity: .55; }
.caminho-motores { display: flex; flex-direction: column; gap: 1px; font-size: 10px; color: var(--texto-suave); }
.caminho-motores em { font-style: normal; opacity: .75; }
.caminho-perda { margin-top: 6px; font-size: 11px; font-weight: 600; }

/* ---- Visão geral: TRÊS por fileira, como o operador pediu ----
   Coluna fixa em vez de auto-fill: auto-fill enche pelo espaço disponível e
   a contagem muda com a largura da janela. Três é três. */
.grade-cards.compacta { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.grade-cards.compacta .card-ferramenta { min-height: 66px; }
/* TRÊS SE MANTÊM ATÉ ONDE AINDA CABEM.
   MEDIDO 11/09: o limite de 1100px derrubava para duas colunas num painel de
   845px, onde três de ~270px cabem folgadas — o pedido era três e a tela
   entregava duas. O ponto de quebra tem de ser onde o NOME deixa de caber,
   e não onde a janela deixa de ser grande. */
@media (max-width: 620px) { .grade-cards.compacta { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .grade-cards.compacta { grid-template-columns: 1fr; } }

/* =====================================================================
   A FITA — arranjo do PDF-XChange, cores da casa
   =====================================================================
   Abas na linha de cima, grupos lado a lado separados por um fio, rótulo do
   grupo embaixo, ícone acima do nome em cada comando. É esse arranjo que faz
   a barra parecer familiar para quem vem do editor. */
.fita-casca {
  border: 1px solid var(--borda);
  border-radius: var(--raio-card, 12px);
  background: var(--superficie);
  overflow: hidden;
  margin-bottom: 14px;
}
.fita-abas {
  display: flex; align-items: center; gap: 2px;
  padding: 4px 6px 0;
  background: var(--superficie-2);
  border-bottom: 1px solid var(--borda);
  /* QUEBRA em vez de rolar: aba escondida atras de rolagem horizontal e aba
     que o operador nao acha. Na janela larga cabe tudo numa linha so. */
  flex-wrap: wrap;
}
.fita-aba {
  padding: 6px 13px; font: inherit; font-size: 12.5px; color: inherit;
  background: transparent; border: 1px solid transparent; border-bottom: 0;
  border-radius: 7px 7px 0 0; cursor: pointer; white-space: nowrap;
}
.fita-aba:hover { background: var(--acento-fraco); }
.fita-aba.ativa {
  background: var(--superficie);
  border-color: var(--borda);
  font-weight: 600;
  margin-bottom: -1px;
}
/* A aba que NÃO existe no PDF-XChange é marcada: é do escritório. */
.fita-aba.propria::after {
  content: '•'; margin-left: 5px; color: var(--gold); font-weight: 700;
}
.fita-resumo { margin-left: auto; padding-right: 8px; font-size: 10px; color: var(--texto-suave); white-space: nowrap; }

.fita-faixa { display: flex; align-items: stretch; gap: 0; padding: 8px 6px 0; overflow-x: auto; }
.fita-grupo {
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 0 10px; border-right: 1px solid var(--borda);
}
.fita-grupo:last-child { border-right: 0; }
.fita-grupo-nome {
  text-align: center; font-size: 9.5px; color: var(--texto-suave);
  padding: 5px 0 6px; letter-spacing: .02em;
}
.fita-botoes { display: flex; align-items: flex-start; gap: 2px; }
.fita-botao {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  width: 72px; padding: 6px 4px; font: inherit; color: inherit;
  background: transparent; border: 1px solid transparent; border-radius: 8px; cursor: pointer;
}
.fita-botao:hover { background: var(--acento-fraco); border-color: var(--acento-fio); }
.fita-icone { font-size: 19px; line-height: 1; color: var(--acento-texto); }
.fita-rotulo { font-size: 10.5px; text-align: center; line-height: 1.15; }
/* Comando sem executor: apagado, sem cursor de clique, e o motivo no title.
   Esconder faria o operador procurar o comando que existe no editor dele. */
.fita-botao.inerte { opacity: .38; cursor: not-allowed; }
.fita-botao.inerte:hover { background: transparent; border-color: transparent; }

/* ---- O palco do editor ---- */
.editor { display: flex; flex-direction: column; }
.editor-corpo { display: flex; gap: 12px; align-items: stretch; min-height: 60vh; }
.editor-documentos {
  flex: 0 0 218px; display: flex; flex-direction: column; gap: 2px;
  border: 1px solid var(--borda); border-radius: var(--raio-card, 12px);
  background: var(--superficie); padding: 6px; overflow-y: auto; max-height: 74vh;
}
.editor-documentos-titulo {
  font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--texto-suave); padding: 4px 6px 8px;
}
.editor-documento {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  padding: 7px 9px; font: inherit; color: inherit; cursor: pointer;
  background: transparent; border: 1px solid transparent; border-radius: 8px;
}
.editor-documento:hover { background: var(--superficie-2); }
.editor-documento.aberto { background: var(--acento-fraco); border-color: var(--acento); }
.editor-documento-nome { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.editor-documento-meta { font-size: 10px; color: var(--texto-suave); }

.editor-palco {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  border: 1px solid var(--borda); border-radius: var(--raio-card, 12px);
  background: var(--superficie-2); overflow: hidden;
}
.editor-barra-doc {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 7px 12px; font-size: 12px; font-weight: 600;
  background: var(--superficie); border-bottom: 1px solid var(--borda);
}
.editor-barra-meta { font-weight: 400; font-size: 11px; color: var(--texto-suave); }
.editor-quadro { flex: 1; width: 100%; min-height: 62vh; border: 0; background: var(--superficie-2); }
.editor-vazio {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; color: var(--texto-suave); font-size: 13px; text-align: center; padding: 30px;
}

/* =====================================================================
   PROTOCOLO DE AUDITORIA TECNICA-FUNCIONAL
   =====================================================================
   A tela do auditor. A unica regra visual que importa aqui: severidade
   alta nao pode parecer com observacao. Cor e peso fazem a hierarquia; o
   resto e leitura corrida, porque isto e relatorio, nao painel. */
.protocolo { display: flex; flex-direction: column; gap: 14px; }
.protocolo-capa h2 { font-size: 19px; }
.protocolo-base { color: var(--texto-suave); font-size: 12px; margin-top: 2px; }
.protocolo-regra {
  font-size: 12.5px; line-height: 1.55; color: var(--texto-suave);
  border-left: 3px solid var(--gold); padding-left: 10px; margin: 12px 0 14px;
}
.protocolo-comandos { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.protocolo-rede { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--texto-suave); cursor: pointer; }
.protocolo-aviso { margin-top: 10px; font-size: 12px; color: var(--texto-suave); }
.protocolo-erro { margin-top: 10px; font-size: 12px; color: #c62828; }

.protocolo-titulo {
  margin: 0 0 12px; font-size: 14px; display: flex; align-items: baseline; gap: 10px;
}
.protocolo-dica { font-size: 11px; font-weight: 400; color: var(--texto-suave); }

.protocolo-numeros { display: flex; flex-wrap: wrap; gap: 22px; margin-bottom: 14px; }
.protocolo-numero { display: flex; flex-direction: column; }
.protocolo-numero strong { font-size: 21px; line-height: 1.1; }
.protocolo-numero span { font-size: 10.5px; color: var(--texto-suave); }

.protocolo-severidades { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.protocolo-pilula {
  padding: 4px 11px; border: 1px solid; border-radius: 999px; background: transparent;
  font: inherit; font-size: 11px; cursor: pointer;
}
.protocolo-pilula.ativa { background: var(--acento-fraco); font-weight: 600; }

/* O veredito nao e amaciado: ou concluiu, ou diz por que nao. */
.protocolo-veredito { padding: 9px 12px; border-radius: 8px; font-size: 12.5px; line-height: 1.5; }
.protocolo-veredito.ok { background: rgba(46, 125, 50, .12); border-left: 3px solid #2e7d32; }
.protocolo-veredito.nao { background: rgba(198, 40, 40, .10); border-left: 3px solid #c62828; }
.protocolo-gravado { margin-top: 8px; font-size: 11px; color: var(--texto-suave); word-break: break-all; }

.protocolo-frentes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.protocolo-frente {
  text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: var(--superficie-2); border: 1px solid var(--borda); border-radius: 10px; padding: 9px 11px;
}
.protocolo-frente:hover { border-color: var(--acento-fio); }
.protocolo-frente.marcada { border-color: var(--gold); background: var(--acento-fraco); }
.protocolo-frente-topo { display: flex; align-items: center; gap: 7px; }
.protocolo-frente-num {
  font-size: 10px; font-weight: 700; color: var(--gold);
  border: 1px solid var(--gold); border-radius: 4px; padding: 0 4px; flex: none;
}
.protocolo-frente-titulo { font-size: 12.5px; font-weight: 600; flex: 1; }
.protocolo-marca {
  font-size: 10px; background: var(--acento-fraco); border-radius: 999px; padding: 1px 7px; flex: none;
}
.protocolo-marca.vermelho { background: rgba(198, 40, 40, .15); color: #c62828; }
.protocolo-marca.cinza { color: var(--texto-suave); }
.protocolo-frente-escopo { font-size: 11px; color: var(--texto-suave); margin-top: 4px; line-height: 1.4; }
.protocolo-frente-medido { font-size: 10px; color: var(--texto-suave); margin-top: 5px; opacity: .8; word-break: break-word; }

.protocolo-achado {
  border-left: 3px solid; padding: 9px 0 9px 12px; margin-bottom: 12px;
  border-bottom: 1px solid var(--borda);
}
.protocolo-achado-item { font-size: 13px; font-weight: 600; margin-bottom: 6px; display: flex; gap: 7px; align-items: baseline; }
.protocolo-linha { display: flex; gap: 10px; font-size: 12px; line-height: 1.5; margin-bottom: 3px; }
.protocolo-linha > span:first-child {
  flex: none; width: 72px; font-size: 10px; text-transform: uppercase;
  color: var(--texto-suave); padding-top: 2px; letter-spacing: .03em;
}
.protocolo-linha code { font-size: 11px; background: var(--acento-fraco); padding: 1px 5px; border-radius: 4px; word-break: break-all; }
.protocolo-linha em { font-size: 11px; color: var(--texto-suave); font-style: normal; }
.protocolo-linha.recomendacao { color: var(--texto-suave); }

.protocolo-naoverif { padding: 8px 0; border-bottom: 1px solid var(--borda); font-size: 12.5px; }
.protocolo-motivo { font-size: 11.5px; color: var(--texto-suave); margin-top: 3px; line-height: 1.5; }

.protocolo-prazo { margin-bottom: 12px; }
.protocolo-prazo-nome { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.protocolo-prazo ul { margin: 5px 0 0; padding-left: 18px; }
.protocolo-prazo li { font-size: 12px; line-height: 1.55; margin-bottom: 4px; }

.protocolo-etapas { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 9px; }
.protocolo-etapa { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; }
.protocolo-etapa span { color: var(--texto-suave); line-height: 1.45; }
.protocolo-rodape { margin-top: 14px; font-size: 11.5px; color: var(--texto-suave); }
.protocolo-rodape code { background: var(--acento-fraco); padding: 1px 6px; border-radius: 4px; }
.protocolo-vazio { font-size: 12px; color: var(--texto-suave); }

/* ---- Cópia de segurança ---- */
.copia { max-width: 760px; }
.copia-explicacao { font-size: 12.5px; line-height: 1.6; color: var(--texto-suave); margin: 0 0 10px; }
.copia-comandos { display: flex; align-items: center; gap: 14px; margin: 16px 0 6px; flex-wrap: wrap; }
.copia-automatica { font-size: 11.5px; color: var(--texto-suave); }
.copia-erro { font-size: 12px; color: #c62828; margin-top: 8px; }
.copia-resultado { margin-top: 12px; padding: 10px 12px; border-radius: 8px; font-size: 12.5px; line-height: 1.55; }
.copia-resultado.ok { background: rgba(46, 125, 50, .10); border-left: 3px solid #2e7d32; }
.copia-resultado.ruim { background: rgba(198, 40, 40, .10); border-left: 3px solid #c62828; }
.copia-criterio { font-size: 11px; color: var(--texto-suave); margin: 3px 0; }
.copia-motivo { font-size: 11.5px; color: #c62828; margin-top: 4px; }
.copia-onde { font-size: 11px; color: var(--texto-suave); margin: 16px 0 4px; }
.copia-onde code { background: var(--acento-fraco); padding: 1px 5px; border-radius: 4px; }
.copia-subtitulo { font-size: 13px; margin: 18px 0 8px; display: flex; align-items: baseline; gap: 9px; }
.copia-dica { font-size: 10.5px; font-weight: 400; color: var(--texto-suave); }
.copia-vazio { font-size: 12px; color: var(--texto-suave); }
.copia-linha {
  display: flex; align-items: center; gap: 12px; padding: 7px 0;
  border-bottom: 1px solid var(--borda); font-size: 12px;
}
.copia-selo { font-size: 10px; padding: 1px 8px; border-radius: 999px; flex: none; }
.copia-selo.ok { background: rgba(46, 125, 50, .16); color: #2e7d32; }
.copia-selo.ruim { background: rgba(198, 40, 40, .14); color: #c62828; }
.copia-nome { flex: 1; font-variant-numeric: tabular-nums; }
.copia-tamanho { color: var(--texto-suave); font-size: 11px; }
.copia-restaurar {
  margin-top: 18px; padding: 11px 13px; border-left: 3px solid var(--gold);
  background: var(--superficie-2); border-radius: 8px; font-size: 12px; line-height: 1.6;
}
.copia-restaurar code {
  display: block; margin: 6px 0; padding: 6px 9px; background: var(--acento-fraco);
  border-radius: 5px; font-size: 11.5px; word-break: break-all;
}

/* A execução que alterou o sistema: avisada no topo do resumo, em âmbar. */
.protocolo-alterou {
  padding: 8px 11px; margin-bottom: 10px; border-radius: 8px; font-size: 12.5px;
  background: rgba(183, 129, 3, .12); border-left: 3px solid var(--gold);
}

/* ---- Coletor de sistemas ---- */
.coletor { display: flex; flex-direction: column; gap: 14px; max-width: 820px; }
.coletor-regra { font-size: 12.5px; line-height: 1.6; color: var(--texto-suave); margin: 10px 0 0; }
.coletor-regra.forte {
  border-left: 3px solid var(--gold); padding-left: 10px; color: inherit;
}
.coletor-passo { margin: 0 0 10px; font-size: 14px; display: flex; align-items: center; gap: 9px; }
.coletor-numero {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  background: var(--gold); color: #0B1F3A; font-size: 12px; font-weight: 700;
}
.coletor-explicacao { font-size: 12.5px; line-height: 1.6; color: var(--texto-suave); margin: 0; }
.coletor-atalhos { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 11px; }
.coletor-linha-url { display: flex; gap: 9px; flex-wrap: wrap; }
.coletor-url {
  flex: 1; min-width: 260px; padding: 8px 11px; font: inherit; font-size: 12.5px;
  border: 1px solid var(--borda); border-radius: 8px; background: var(--superficie-2); color: inherit;
}
.coletor-aberta { font-size: 12.5px; line-height: 1.6; }
.coletor-aberta code { background: var(--acento-fraco); padding: 1px 6px; border-radius: 4px; word-break: break-all; }
.coletor-vigia { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 12px; font-size: 12px; }
.coletor-recusa { color: var(--texto-suave); }
/* A trava recusou alguma coisa: isso merece ser visto, não escondido. */
.coletor-recusa.ativa { color: #b78103; }
.coletor-comandos { display: flex; gap: 10px; flex-wrap: wrap; }
.coletor-resultado { margin-top: 12px; padding: 10px 12px; border-radius: 8px; font-size: 12.5px; line-height: 1.55; }
.coletor-resultado.ok { background: rgba(46, 125, 50, .10); border-left: 3px solid #2e7d32; }
.coletor-resultado.ruim { background: rgba(198, 40, 40, .10); border-left: 3px solid #c62828; }
.coletor-criterio { font-size: 11px; color: var(--texto-suave); margin: 3px 0; }
.coletor-motivo { font-size: 11.5px; margin-top: 5px; }
.coletor-pasta { font-size: 11px; color: var(--texto-suave); margin-top: 5px; word-break: break-all; }
.coletor-erro { margin-top: 10px; font-size: 12px; color: #c62828; }

/* A lista do operador: não é plano de correção, é o que espera preenchimento. */
.protocolo-operador { margin: 0; padding-left: 18px; }
.protocolo-operador li { font-size: 12.5px; line-height: 1.6; margin-bottom: 5px; }

/* O selo do resultado: distingue o que o SISTEMA produziu do que o operador
   enviou. Sem ele, PDF e DOCX de mesmo nome ficam indistinguíveis na lista. */
.arquivo-selo {
  margin-left: 8px; font-size: 10px; font-weight: 600; padding: 1px 7px;
  border-radius: 999px; background: rgba(46, 125, 50, .16); color: #2e7d32;
  vertical-align: middle;
}

/* =====================================================================
   UMA ROLAGEM SÓ — e a barra lateral nunca fica atrás do próprio rodapé

   O operador, 12/09: "a sidebar principal do sistema não pode se esconder
   atrás dos cards de recolher e layout; é uma rolagem só".

   MEDIDO ANTES (janela 823x738): havia DUAS rolagens na tela.
     · a da barra: `.lateral-rolagem` com 832 px de conteúdo numa caixa de
       552 — 280 px de módulos fora de vista, cortados rente ao rodapé de
       117 px (tema e recolher), que ficava sempre por cima da lista;
     · a da página: documento de 1250 px.
   A regra antiga ("a lista rola, e uma sombra avisa") resolvia o sintoma de
   ontem e produzia exatamente o de hoje: módulo escondido atrás de botão.

   O QUE MUDA: quem rola é UMA caixa — a aplicação —, e a barra lateral e o
   conteúdo rolam juntos dentro dela. A barra cresce do tamanho do que tem,
   o rodapé vem DEPOIS do último módulo, e nada fica por baixo de nada.

   POR QUE A APLICAÇÃO E NÃO A PÁGINA: a doca da AIRIA precisa DIVIDIR a
   tela, não cobrir. Se a página inteira rolasse, o conteúdo passaria por
   baixo da doca a cada rolagem. Rolando dentro da aplicação — que já tem a
   altura da tela menos a doca —, a doca continua sendo o andar de baixo.
   ===================================================================== */
html, body { height: 100%; overflow: hidden; }

.aplicacao {
  height: calc(100vh - var(--doca-altura));
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  /* flex-start: a barra tem a altura do que tem, e não é esticada até a
     altura da janela com o resto transbordando para fora do fundo dela. */
  align-items: flex-start;
}

.barra-lateral {
  position: relative;
  top: auto;
  height: auto;
  /* Nunca menor que a tela: numa página curta a barra continua indo até
     embaixo, como sempre foi. */
  min-height: calc(100vh - var(--doca-altura) - 16px);
  overflow: visible;
}
/* A barra totalmente oculta continua fechada: largura zero precisa cortar. */
.barra-lateral.oculta { overflow: hidden; }

.lateral-rolagem {
  flex: 1 0 auto;
  overflow: visible;
  /* A sombra de "tem mais abaixo" era o aviso de uma lista que rolava por
     dentro. Sem rolagem interna, ela passaria a mentir. */
  background: none;
}

/* O rodapé vem depois do último módulo — nunca sobre ele. */
.rodape-lateral { flex: 0 0 auto; }

/* A doca agora fica FORA da caixa que rola, então a margem que reservava o
   lugar dela embaixo do conteúdo sobraria como faixa vazia. */
.area-principal { margin-bottom: 0; }
/* ESTILOS DO SISTEMA REMOTO.
   Carrega DEPOIS de styles.css (Sistema de Vídeo) e base-da-casa.css: só
   acrescenta peças que a casa não tinha (tabela, selo de estado, progresso,
   gaveta do plano) e usa exclusivamente os tokens da casa — o Motor de
   Layout continua mandando em cor, raio e fio. Prefixo dm- em tudo, para
   nunca reescrever uma classe herdada. */

.dm-suave { color: var(--texto-suave); }
.dm-mini-texto { font-size: 11.5px; }
.dm-quebra { overflow-wrap: anywhere; word-break: break-word; }
.dm-texto-perigo { color: var(--vermelho); }
.dm-texto-alerta { color: var(--ouro-texto, var(--gold)); }
.dm-vazio { padding: 12px 0; }
.dm-link { background: none; border: 0; padding: 0; color: var(--texto); font: inherit; text-align: left; cursor: pointer; text-decoration: underline; text-decoration-color: var(--borda); }

.dm-linha-entre { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.dm-acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dm-selos { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dm-cabecalho { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 18px 0 10px; }
.dm-grade-2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; margin-bottom: 12px; }
.dm-grade-3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-bottom: 12px; }
.dm-mini { padding: 3px 9px !important; font-size: 11.5px !important; min-height: 0 !important; }
.dm-campo-curto { width: 110px !important; min-width: 0; }
.dm-filtro { max-width: 260px; margin-left: auto; }

/* Selo de estado — a mesma forma de pílula dos selos da casa. */
.dm-selo {
  display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600;
  border: 1px solid var(--borda); background: var(--superficie-2); color: var(--texto-suave); white-space: nowrap;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle;
}
.dm-selo.ok { color: var(--verde); border-color: color-mix(in srgb, var(--verde) 45%, transparent); background: color-mix(in srgb, var(--verde) 10%, var(--superficie)); }
.dm-selo.perigo { color: var(--vermelho); border-color: color-mix(in srgb, var(--vermelho) 45%, transparent); background: color-mix(in srgb, var(--vermelho) 10%, var(--superficie)); }
.dm-selo.alerta { color: var(--ouro-texto, var(--gold)); border-color: color-mix(in srgb, var(--gold) 55%, transparent); background: color-mix(in srgb, var(--gold) 14%, var(--superficie)); }
.dm-selo.info { color: var(--texto); border-color: var(--acento-fio, var(--borda)); background: var(--acento-fraco, var(--superficie-2)); }

/* Caixa com fio lateral indicando o tom. */
.dm-caixa { border-left: 3px solid var(--borda) !important; margin: 10px 0; }
.dm-caixa.ok { border-left-color: var(--verde) !important; }
.dm-caixa.perigo { border-left-color: var(--vermelho) !important; }
.dm-caixa.alerta { border-left-color: var(--gold) !important; }
.dm-caixa.info { border-left-color: var(--acento, var(--navy)) !important; }

/* Tabela: rola dentro dela, nunca a página. */
.dm-tabela-rolagem { overflow-x: auto; margin: 8px 0 14px; border: 1px solid var(--borda); border-radius: 10px; background: var(--superficie); }
.dm-tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.dm-tabela th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); padding: 8px 10px; border-bottom: 1px solid var(--borda); background: var(--superficie-2); position: sticky; top: 0; }
.dm-tabela td { padding: 7px 10px; border-bottom: 1px solid color-mix(in srgb, var(--borda) 60%, transparent); vertical-align: top; }
.dm-tabela tr:last-child td { border-bottom: 0; }
.dm-tabela tbody tr:hover td { background: color-mix(in srgb, var(--superficie-2) 60%, transparent); }

/* Progresso. */
.dm-progresso { height: 6px; border-radius: 999px; background: var(--superficie-2); overflow: hidden; margin: 8px 0 4px; border: 1px solid var(--borda); }
.dm-progresso.fino { height: 4px; margin: 6px 0; }
.dm-progresso > div { height: 100%; background: var(--gold); transition: width .3s ease; }
.dm-progresso > div.perigo { background: var(--vermelho); }
.dm-progresso > div.indeterminado { animation: dm-vaivem 1.4s ease-in-out infinite; }
@keyframes dm-vaivem { 0% { margin-left: -30%; } 100% { margin-left: 100%; } }
.dm-tarefa { margin: 10px 0; }
.dm-tarefa.perigo { border-left: 3px solid var(--vermelho) !important; }
.dm-tarefa.alerta { border-left: 3px solid var(--gold) !important; }

.dm-carregando { color: var(--texto-suave); display: flex; align-items: center; gap: 8px; padding: 16px 0; }
.dm-giro { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--borda); border-top-color: var(--gold); animation: dm-gira .8s linear infinite; display: inline-block; }
@keyframes dm-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .dm-giro, .dm-progresso > div.indeterminado { animation: none; }
}

.dm-proveniencia { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 11px; color: var(--texto-suave); margin: 16px 0 4px; padding-top: 8px; border-top: 1px dashed var(--borda); }

/* Abinhas (navegação dentro de um painel). */
.dm-abinhas { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 12px; }
.dm-abinha { border: 1px solid var(--borda); background: var(--superficie); color: var(--texto); padding: 5px 12px; border-radius: 999px; font-size: 12.5px; cursor: pointer; }
.dm-abinha.ativo { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); font-weight: 600; }

/* Opção marcável em cartão. */
.dm-opcao { cursor: pointer; display: block; text-align: left; width: 100%; font: inherit; color: inherit; }
.dm-opcao.marcada { box-shadow: inset 0 0 0 2px var(--gold); }
.dm-barra-fixa { position: sticky; bottom: 0; z-index: 5; margin-top: 14px; box-shadow: 0 -6px 18px rgba(0,0,0,.08); }

.dm-grupo { margin: 10px 0; }
.dm-ficha { margin: 0 0 10px 34px; }
.dm-detalhes { margin: 8px 0; }
.dm-detalhes summary { cursor: pointer; font-size: 12.5px; color: var(--texto-suave); }
.dm-lista { margin: 6px 0; padding-left: 18px; font-size: 12.5px; }
.dm-pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 11px; background: var(--superficie-2); padding: 8px; border-radius: 8px; max-height: 180px; overflow: auto; margin: 6px 0; }
.dm-passos { padding-left: 18px; }
.dm-passos li { margin: 6px 0; }
.dm-linha-do-tempo { padding-left: 18px; font-size: 12.5px; }
.dm-linha-do-tempo li { margin: 6px 0; }
.dm-conferi { display: flex; gap: 6px; align-items: center; font-size: 12.5px; width: 100%; }

/* Gaveta do plano: abre à direita, por cima, sem perder o painel de trás. */
.dm-gaveta-fundo { justify-content: flex-end !important; align-items: stretch !important; }
.dm-gaveta { width: min(760px, 100vw); height: 100vh; overflow-y: auto; border-radius: 0 !important; margin: 0 !important; padding: 18px 20px !important; }
.dm-gaveta-titulo { margin: 6px 0 8px; font-size: 18px; }
.dm-medidores-compactos .medidor-numero { font-size: 22px; }
.dm-barra-de-acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; }
.dm-itens { display: flex; flex-direction: column; gap: 2px; }
.dm-item { cursor: default; }

/* Até quatro painéis lado a lado. */
.dm-paineis.n2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.dm-paineis.n3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.dm-paineis.n4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.dm-paineis:not(.n1) .dm-painel { border: 1px solid var(--borda); border-radius: 12px; padding: 10px 12px; min-width: 0; background: color-mix(in srgb, var(--superficie) 50%, transparent); }
.dm-painel.em-foco { box-shadow: inset 0 0 0 1px var(--gold); }
.dm-painel-cabeca { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--borda); }
@container (max-width: 900px) { .dm-paineis.n3 { grid-template-columns: 1fr; } }
@media (max-width: 1100px) { .dm-paineis.n2, .dm-paineis.n3, .dm-paineis.n4 { grid-template-columns: 1fr; } }

/* Barra oculta: o conteúdo ocupa tudo e um botão traz a barra de volta. */
.dm-lateral-oculta { --largura-lateral: 0px; }
.dm-lateral-oculta .area-principal { margin-left: 0 !important; }
.dm-reabrir-lateral { position: fixed; left: 10px; bottom: 12px; z-index: 50; }

.dm-sino { border: 1px solid var(--borda); background: var(--superficie); color: var(--texto-suave); border-radius: 999px; padding: 3px 10px; font-size: 12px; cursor: pointer; }
.dm-sino.com-alerta { color: #fff; background: var(--vermelho); border-color: var(--vermelho); }

/* ============ GERENCIADOR DE TAREFAS (clone do Task Manager) ============ */
.ger { display: flex; flex-direction: column; height: 100%; margin: -4px 0; }
.ger-menubar { display: flex; align-items: center; gap: 2px; border-bottom: 1px solid var(--borda); padding-bottom: 4px; position: relative; z-index: 20; }
.ger-menu { position: relative; }
.ger-menu-topo { background: none; border: 0; color: var(--texto); font: inherit; font-size: 13px; padding: 4px 10px; border-radius: 6px; cursor: pointer; }
.ger-menu-topo:hover, .ger-menu-topo.aberto { background: var(--superficie-2); }
.ger-menu-lista { position: absolute; top: 100%; left: 0; min-width: 240px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: 4px; z-index: 30; }
.ger-menu-item { display: block; width: 100%; text-align: left; background: none; border: 0; color: var(--texto); font: inherit; font-size: 12.5px; padding: 6px 10px; border-radius: 6px; cursor: pointer; }
.ger-menu-item:hover:not(:disabled) { background: var(--superficie-2); }
.ger-menu-item:disabled { color: var(--texto-suave); opacity: .6; cursor: not-allowed; }
.ger-menu-item.marcado { font-weight: 600; }
.ger-menu-sep { height: 1px; background: var(--borda); margin: 4px 0; }
.ger-menu-rotulo { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); padding: 4px 10px 2px; }
.ger-velocidade-atual { margin-left: auto; font-size: 11px; color: var(--texto-suave); }

.ger-abas { display: flex; gap: 2px; border-bottom: 1px solid var(--borda); margin-top: 4px; overflow-x: auto; }
.ger-aba { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--texto-suave); font: inherit; font-size: 13px; padding: 8px 14px; cursor: pointer; white-space: nowrap; }
.ger-aba:hover { color: var(--texto); }
.ger-aba.ativo { color: var(--texto); border-bottom-color: var(--gold); font-weight: 600; }
.ger-conteudo { flex: 1; min-height: 0; padding-top: 10px; display: flex; flex-direction: column; }

.ger-barra-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.ger-totais { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; align-items: center; }
.ger-med { padding: 2px 8px; border-radius: 6px; border: 1px solid var(--borda); }

.ger-tabela-caixa { flex: 1; overflow: auto; border: 1px solid var(--borda); border-radius: 10px; background: var(--superficie); }
.ger-tabela { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ger-th { position: sticky; top: 0; background: var(--superficie-2); text-align: left; padding: 7px 10px; font-size: 11px; font-weight: 600; color: var(--texto-suave); border-bottom: 1px solid var(--borda); cursor: pointer; white-space: nowrap; z-index: 2; }
.ger-th.num { text-align: right; }
.ger-th.ord { color: var(--texto); }
.ger-th .ger-sub { font-weight: 400; font-size: 9.5px; text-transform: none; }
.ger-seta { margin-left: 3px; }
.ger-tabela td { padding: 5px 10px; border-bottom: 1px solid color-mix(in srgb, var(--borda) 55%, transparent); white-space: nowrap; }
.ger-tabela td.num { text-align: right; font-variant-numeric: tabular-nums; }
.ger-tabela tbody tr { cursor: default; }
.ger-tabela tbody tr:hover td { background: color-mix(in srgb, var(--superficie-2) 55%, transparent); }
.ger-tabela tbody tr.sel td { background: color-mix(in srgb, var(--gold) 22%, transparent) !important; }
.ger-nome { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.ger-proc-nome { }
.ger-cel-sub { font-size: 9.5px; color: var(--texto-suave); }
.ger-status.ruim { color: var(--vermelho); }
.ger-grupo { cursor: pointer; }
.ger-grupo td { background: color-mix(in srgb, var(--superficie-2) 80%, transparent); font-weight: 600; font-size: 11.5px; color: var(--texto-suave); }
.ger-caret { display: inline-block; width: 14px; }
.ger-tag { display: inline-block; margin-left: 6px; font-size: 9px; padding: 1px 5px; border-radius: 999px; border: 1px solid var(--gold); color: var(--ouro-texto, var(--gold)); vertical-align: middle; }
.ger-tag.critico { border-color: var(--vermelho); color: var(--vermelho); }
.ger-tend { display: inline-block; width: 34px; height: 8px; border-radius: 3px; background: var(--superficie-2); position: relative; overflow: hidden; }
.ger-tend::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; }
.ger-tend.n0::after { width: 8%; background: var(--texto-suave); }
.ger-tend.n1::after { width: 25%; background: var(--verde); }
.ger-tend.n2::after { width: 50%; background: var(--gold); }
.ger-tend.n3::after { width: 75%; background: #f0932b; }
.ger-tend.n4::after { width: 100%; background: var(--vermelho); }
.ger-rodape { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 8px; }

/* Desempenho */
.ger-desemp { display: grid; grid-template-columns: 220px 1fr; gap: 12px; flex: 1; min-height: 0; }
.ger-desemp-lista { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; }
.ger-desemp-item { display: flex; gap: 8px; align-items: center; text-align: left; background: var(--superficie); border: 1px solid var(--borda); border-radius: 8px; padding: 6px; cursor: pointer; color: var(--texto); }
.ger-desemp-item.ativo { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.ger-mini-grafico { width: 64px; height: 32px; flex-shrink: 0; }
.ger-desemp-titulo { font-size: 12.5px; font-weight: 600; }
.ger-desemp-detalhe { border: 1px solid var(--borda); border-radius: 10px; padding: 14px; background: var(--superficie); overflow-y: auto; }
.ger-grande { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ger-grafico-grande { height: 180px; margin: 10px 0; border: 1px solid var(--borda); border-radius: 8px; background: color-mix(in srgb, var(--superficie-2) 40%, transparent); }
.ger-grafico { width: 100%; height: 100%; display: block; }
.ger-grade { stroke: var(--borda); stroke-width: 0.5; opacity: .5; }
.ger-desemp-fatos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 16px; }
.ger-fato { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; border-bottom: 1px dashed var(--borda); padding: 4px 0; }
.ger-fato strong { font-variant-numeric: tabular-nums; text-align: right; }

@media (max-width: 900px) { .ger-desemp { grid-template-columns: 1fr; } }

/* ============ SISTEMA REMOTO — o miolo estilo AnyDesk ============
   Usa só os tokens da casa (var(--...)) para o Motor de Layout continuar
   mandando em cor, raio e brilho. Prefixo rm- para não tocar em nada herdado. */

.rm-home { max-width: 1100px; }
.rm-home-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .rm-home-colunas { grid-template-columns: 1fr; } }
.rm-cartao-forte { padding: 20px; }
.rm-titulo-secao { font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.rm-endereco {
  font-size: 30px; font-weight: 800; letter-spacing: 1px; margin: 12px 0 2px;
  cursor: pointer; display: inline-flex; align-items: center; gap: 10px;
  color: var(--gold, var(--ouro-texto, #E0AF2D));
}
.rm-copiar { font-size: 13px; opacity: .7; }
.rm-apelido { color: var(--texto-suave); margin-bottom: 8px; }
.rm-linha-senha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0; }
.rm-como-alcancar { margin-top: 14px; }
.rm-endereco-linha { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.rm-url { background: rgba(127,127,127,.12); padding: 2px 8px; border-radius: 6px; cursor: pointer; overflow-wrap: anywhere; }
.rm-botao-grande { width: 100%; padding: 14px; font-size: 15px; margin-top: 10px; }

.rm-portos-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 8px; }
.rm-portos-grade.grande { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.rm-porto {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 10px;
  border: 1px solid rgba(127,127,127,.25); border-radius: 12px; text-decoration: none;
  color: inherit; background: rgba(127,127,127,.05); transition: transform .1s, box-shadow .1s;
}
.rm-porto:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.rm-porto-off { opacity: .55; pointer-events: none; }
.rm-porto-icone { font-size: 28px; }
.rm-porto-nome { font-weight: 600; text-align: center; font-size: 13px; }
.rm-porto-estado { font-size: 11px; }
.rm-porto-estado.on { color: var(--verde, #2ecc71); }
.rm-porto-estado.off { color: var(--texto-suave); }
.rm-porto-cartao { display: flex; flex-direction: column; gap: 6px; }
.rm-porto-topo { display: flex; justify-content: space-between; align-items: center; }

.rm-permissao.rm-inerte { opacity: .6; }
.rm-interruptor {
  width: 46px; height: 26px; border-radius: 999px; border: none; cursor: pointer;
  background: rgba(127,127,127,.35); position: relative; transition: background .15s;
}
.rm-interruptor[disabled] { cursor: not-allowed; }
.rm-interruptor span { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.rm-interruptor.ligado { background: var(--gold, #E0AF2D); }
.rm-interruptor.ligado span { left: 23px; }

/* Espelho */
.rm-espelho { display: flex; flex-direction: column; gap: 8px; }
.rm-espelho-barra { display: flex; justify-content: space-between; align-items: center; }
.rm-palco {
  position: relative; background: #000; border-radius: 10px; overflow: hidden;
  outline: none; border: 2px solid transparent; min-height: 200px; display: flex; justify-content: center;
}
.rm-palco.controlando { border-color: var(--gold, #E0AF2D); cursor: crosshair; }
.rm-quadro { max-width: 100%; max-height: 76vh; display: block; user-select: none; }

/* Transferência de arquivos */
.rm-arq-barra { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.rm-arq-lista { border: 1px solid rgba(127,127,127,.2); border-radius: 10px; overflow: hidden; }
.rm-arq-item {
  display: grid; grid-template-columns: 28px 1fr 90px 160px 120px; align-items: center; gap: 8px;
  padding: 7px 10px; border-bottom: 1px solid rgba(127,127,127,.12);
}
.rm-arq-item:last-child { border-bottom: none; }
.rm-arq-item:hover { background: rgba(127,127,127,.06); }
.rm-arq-icone { font-size: 18px; text-align: center; }
.rm-arq-nome { overflow-wrap: anywhere; text-align: left; }
.rm-arq-nome.como-link { background: none; border: none; color: var(--gold, #E0AF2D); cursor: pointer; font: inherit; padding: 0; }
.rm-arq-tam { text-align: right; }
.rm-arq-acao { text-align: right; }
@media (max-width: 720px) {
  .rm-arq-item { grid-template-columns: 24px 1fr auto; }
  .rm-arq-tam, .rm-arq-data { display: none; }
}

/* Aviso de atualização — banner fixo no rodapé */
.rm-aviso-atualizacao {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 9999; display: flex; align-items: center; gap: 12px;
  background: var(--fundo-card, #12233f); color: var(--texto, #eee);
  border: 1px solid var(--gold, #E0AF2D); border-radius: 12px; padding: 10px 14px;
  box-shadow: 0 8px 30px rgba(0,0,0,.45); max-width: 92vw;
}
.rm-aviso-icone { font-size: 22px; color: var(--gold, #E0AF2D); animation: rm-girar 2s linear infinite; }
.rm-aviso-texto { display: flex; flex-direction: column; }
@keyframes rm-girar { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* ===== Espelho em 4 ===== */
.rm-quatro { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rm-quad { background: #000; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
.rm-quad-barra { display: flex; gap: 6px; align-items: center; padding: 4px 6px; background: rgba(127,127,127,.15); }
.rm-quad-img { width: 100%; max-height: 36vh; object-fit: contain; display: block; background: #000; }
@media (max-width: 700px) { .rm-quatro { grid-template-columns: 1fr; } }

/* ===== AIRIA — dock que divide a tela ===== */
.rm-airia-botao {
  position: fixed; right: 18px; bottom: 18px; z-index: 9998;
  display: flex; align-items: center; gap: 8px; padding: 10px 16px;
  background: var(--gold, #E0AF2D); color: #1a1200; font-weight: 700; border: none;
  border-radius: 999px; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.4); font-size: 14px;
}
.rm-airia-botao span { font-size: 16px; }
.rm-airia {
  position: fixed; top: 0; right: 0; height: 100vh; width: 400px; max-width: 92vw; z-index: 9998;
  background: var(--fundo-card, #0f2035); border-left: 2px solid var(--gold, #E0AF2D);
  display: flex; flex-direction: column; box-shadow: -8px 0 30px rgba(0,0,0,.4);
}
/* Ao ligar, a tela de apresentação encolhe: sidebar + área + AIRIA lado a lado */
body.airia-aberto .area-principal { margin-right: 400px; }
@media (max-width: 820px) { body.airia-aberto .area-principal { margin-right: 0; } .rm-airia { width: 100vw; } }
.rm-airia-topo { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 1px solid rgba(127,127,127,.25); }
.rm-airia-marca { font-weight: 800; color: var(--gold, #E0AF2D); font-size: 16px; }
.rm-airia-controles { display: flex; gap: 6px; align-items: center; }
.rm-airia-conversa { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.rm-airia-vazio { color: var(--texto-suave); font-size: 13px; }
.rm-airia-sugestoes { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; align-items: flex-start; }
.rm-airia-msg { display: flex; flex-direction: column; max-width: 92%; }
.rm-airia-msg.operador { align-self: flex-end; align-items: flex-end; }
.rm-airia-msg.airia { align-self: flex-start; }
.rm-airia-bolha { padding: 8px 12px; border-radius: 12px; white-space: pre-wrap; word-break: break-word; font-size: 13.5px; line-height: 1.45; }
.rm-airia-msg.operador .rm-airia-bolha { background: var(--gold, #E0AF2D); color: #1a1200; }
.rm-airia-msg.airia .rm-airia-bolha { background: rgba(127,127,127,.18); }
.rm-airia-pensando { opacity: .7; font-style: italic; }
.rm-airia-passos { font-size: 11px; color: var(--texto-suave); margin-bottom: 3px; }
.rm-airia-anexo { padding: 4px 12px; font-size: 12px; color: var(--texto-suave); }
.rm-airia-anexo button { margin-left: 8px; background: none; border: none; color: var(--gold, #E0AF2D); cursor: pointer; }
.rm-airia-entrada { display: flex; gap: 6px; align-items: flex-end; padding: 10px; border-top: 1px solid rgba(127,127,127,.25); }
.rm-airia-texto { flex: 1; resize: none; }
.rm-airia-anexar { cursor: pointer; }
.rm-airia-rodape { font-size: 10px; color: var(--texto-suave); text-align: center; padding: 0 0 6px; }

/* ===== Portão de acesso (login de fora) ===== */
.rm-portao { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; background: var(--fundo, #0B1F3A); padding: 20px; }
.rm-portao-caixa { width: 100%; max-width: 380px; padding: 24px; }
.rm-portao-marca { font-size: 20px; font-weight: 800; color: var(--gold, #E0AF2D); margin-bottom: 10px; }

/* Espelho remoto embutido */
.rm-espelho-remoto { width: min(1000px, 94vw); max-height: 92vh; overflow: auto; }
.rm-espelho-remoto .rm-quadro { max-height: 74vh; }

/* Mural de máquinas */
.rm-mural { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.rm-mural-cel { border: 1px solid rgba(127,127,127,.25); border-radius: 10px; overflow: hidden; background: rgba(127,127,127,.05); cursor: pointer; transition: transform .1s, box-shadow .1s; }
.rm-mural-cel:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.2); }
.rm-mural-cel.rm-porto-off { opacity: .6; cursor: default; }
.rm-mural-topo { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px; gap: 6px; }
.rm-mural-nome { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-mural-tela { aspect-ratio: 16 / 10; background: #000; display: flex; align-items: center; justify-content: center; }
.rm-mural-tela img { width: 100%; height: 100%; object-fit: contain; display: block; }
.rm-mural-vazio { color: var(--texto-suave); font-size: 12px; padding: 8px; text-align: center; }

/* Ponto da máquina — barras por hora */
.rm-ponto-horas { display: flex; align-items: flex-end; gap: 3px; height: 120px; padding: 6px; border: 1px solid rgba(127,127,127,.2); border-radius: 10px; }
.rm-ponto-barra { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
.rm-ponto-preenche { width: 100%; background: var(--gold, #E0AF2D); border-radius: 3px 3px 0 0; min-height: 2px; }
.rm-ponto-rot { font-size: 9px; color: var(--texto-suave); margin-top: 2px; }
/* Central de visualização: cada janela mantém sua origem e seus comandos. */
.rm-central-visores { display:flex; flex-direction:column; gap:10px; min-width:0; background:var(--fundo, #171a20); }
.rm-central-visores:fullscreen { overflow:auto; padding:14px; }
.rm-central-barra,.rm-visor-barra,.rm-janelas-barra,.rm-visores-acessos { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.rm-central-barra { position:sticky; top:0; z-index:4; padding:10px; background:var(--superficie,#222630); border:1px solid var(--borda); border-radius:8px; }
.rm-visor-barra label,.rm-central-barra label { display:flex; flex-direction:column; gap:3px; font-size:12px; min-width:100px; }
.rm-visor-barra .campo { max-width:250px; }
.rm-visores-acessos>span { display:flex;gap:3px; }
.rm-visores-grade { display:grid; gap:12px; min-width:0; align-items:start; }
.rm-visores-grade>[hidden],.dm-painel[hidden] { display:none!important; }
.rm-visor { border:1px solid var(--borda); border-radius:10px; padding:10px; min-width:0; background:var(--superficie,#222630); }
.rm-visor.controlando { border:2px solid var(--gold,#e0af2d); }
.rm-visor-barra { margin-bottom:8px; }
.rm-parar { background:#a82532!important; color:#fff!important; border:1px solid #ed6d79!important; }
.rm-visor-imagem { height:clamp(220px,36vh,680px); overflow:auto; background:#080a0d; display:flex; align-items:center; justify-content:center; border-radius:6px; outline-offset:2px; }
.rm-visor-imagem img { width:100%; height:100%; object-fit:contain; user-select:none; touch-action:pan-y; }
.rm-visor-imagem.preencher img { object-fit:cover; }
.rm-visor-imagem.original { align-items:start; justify-content:start; }
.rm-visor-imagem.original img { width:auto; height:auto; max-width:none; object-fit:initial; }
.rm-central-visores:fullscreen .rm-visor-imagem { height:50vh; }
.rm-janelas-barra { padding:8px 18px; border-bottom:1px solid var(--borda); }
.rm-area-ampliada { position:fixed; inset:0; z-index:900; overflow:auto; background:var(--fundo,#171a20); }
.dm-painel-cabeca { flex-wrap:wrap; gap:8px; }
.dm-painel-cabeca .dm-acoes { flex-wrap:wrap; }
@media(max-width:700px) { .rm-visores-grade { grid-template-columns:1fr!important; } .rm-visor-barra .campo {max-width:100%;} }

/* Apresentação de trabalho com saída sempre acessível. */
.rm-apresentacao-comandos { position:sticky; top:0; z-index:10; background:var(--fundo,#171a20); }
.rm-apresentacao-config { margin:12px 18px; padding:16px; border:1px solid var(--borda); border-radius:10px; }
.rm-apresentacao-escolhas { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:14px; }
.rm-apresentacao-escolhas label { display:flex; flex-direction:column; gap:6px; }
.rm-apresentacao-layout { align-items:start; }
@media(max-width:800px) { .rm-apresentacao-escolhas { grid-template-columns:repeat(2,minmax(0,1fr)); } .dm-paineis.rm-apresentacao-layout { grid-template-columns:minmax(0,1fr)!important; } }

.rm-consentimento { position:fixed;right:16px;bottom:16px;z-index:2000;width:min(520px,calc(100vw - 32px));max-height:65vh;overflow:auto;padding:16px;border:2px solid var(--gold,#e0af2d);border-radius:12px;background:var(--fundo,#171a20);box-shadow:0 8px 30px #0007; }
.rm-consentimento>div {padding:8px 0;border-top:1px solid var(--borda);margin-top:8px;}

/* Ambientes de máquina: herdam as cores, fontes e cards da bancada. */
.cm-destino,.cm-busca,.ce-barra { display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px; }
.cm-destino { padding:12px 0;border-bottom:1px solid var(--borda); }
.cm-destino label,.ce-barra label { display:flex;gap:6px;align-items:center;font-size:13px; }
.cm-destino select { min-width:190px;max-width:300px; }
.cm-busca .campo { flex:1;min-width:180px;max-width:540px; }
.cm-cards { display:grid;grid-template-columns:repeat(auto-fit,minmax(225px,1fr));gap:14px; }
.cm-categoria { padding:0!important;overflow:hidden; }
.cm-card-abrir { background:none;color:inherit;border:0;padding:22px;display:flex;flex-direction:column;align-items:flex-start;gap:9px;text-align:left;width:100%;height:100%;min-height:170px;cursor:pointer; }
.cm-card-abrir:hover,.cm-secao:hover { background:rgba(127,127,127,.1); }
.cm-card-abrir strong { font-size:17px; }.cm-card-abrir span:not(.cm-icone),.cm-card-abrir small { color:var(--texto-suave); }
.cm-icone { color:var(--gold,#e0af2d);font-size:30px;line-height:1; }
.cm-resultado { display:block;width:100%;background:none;border:0;border-top:1px solid var(--borda);padding:10px;text-align:left;color:inherit;cursor:pointer; }
.cm-interno { display:grid;grid-template-columns:230px minmax(0,1fr);gap:22px;align-items:start; }
.cm-sidebar { display:flex;flex-direction:column;gap:4px;border-right:1px solid var(--borda);padding-right:12px;max-height:75vh;overflow:auto;position:sticky;top:0; }
.cm-sidebar h3 { margin:8px 0 16px; }.cm-sidebar button { padding:11px 12px;border:0;border-left:3px solid transparent;border-radius:5px;text-align:left;background:transparent;color:inherit;cursor:pointer; }
.cm-sidebar button:hover { background:rgba(127,127,127,.1); }.cm-sidebar button[aria-current=page] { border-left-color:var(--gold,#e0af2d);background:rgba(224,175,45,.12);font-weight:600; }
.cm-conteudo { min-width:0; }.cm-caminho { color:var(--texto-suave);font-size:12px;margin:8px 0; }.cm-conteudo h2 { margin:8px 0 22px; }
.cm-secoes { margin-bottom:20px; }.cm-secao { color:inherit;cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:12px;min-height:105px; }.cm-secao span { color:var(--texto-suave);font-size:12px; }
.cm-medicoes { margin-top:24px; }.cm-medicoes summary { cursor:pointer;margin-bottom:14px; }
.cm-dados { display:grid;gap:8px;margin:10px 0; }.cm-dados>div { display:grid;grid-template-columns:minmax(120px,1fr) 2fr;gap:12px; }.cm-dados dt { color:var(--texto-suave); }.cm-dados dd { margin:0;overflow-wrap:anywhere; }
.cm-dados-lista { max-height:450px;overflow:auto; }.cm-dados-item { border-bottom:1px solid var(--borda); }
.cm-janela { width:min(1600px,96vw);height:94vh;max-height:94vh;overflow:auto; }.cm-janela>.dm-linha-entre { position:sticky;top:0;z-index:5;background:var(--superficie,var(--fundo-card,#1b2638));padding:8px;gap:12px; }.cm-janela h2 { font-size:18px; }
.ce-editor { display:flex;flex-direction:column;gap:10px; }.ce-barra .campo { max-width:270px; }.ce-barra { margin-bottom:6px; }.ce-barra input[type=color] { width:36px;height:32px;padding:0;border:0; }.ce-barra input[type=range] { width:90px; }
.ce-palco { min-height:330px;max-height:65vh;overflow:auto;background:repeating-conic-gradient(#202732 0% 25%,#27313e 0% 50%) 0 0/20px 20px;border:1px solid var(--borda);border-radius:10px; }.ce-palco canvas { display:block;cursor:crosshair;max-width:none; }.ce-palco canvas[hidden] { display:none; }.ce-vazio { display:flex;min-height:330px;align-items:center;justify-content:center;flex-direction:column;color:#dce4ef;text-align:center;padding:20px; }.ce-vazio>span { font-size:54px;color:var(--gold,#e0af2d); }
.mt-grade { display:grid;gap:12px;align-items:start;margin:18px 0; }.mt-maquina { min-width:0;padding:10px!important; }.mt-maquina.selecionada { outline:2px solid var(--gold,#e0af2d); }.mt-maquina header { display:flex;justify-content:space-between;gap:8px;margin-bottom:8px; }.mt-maquina header label { display:flex;gap:5px;align-items:center;min-width:0; }.mt-maquina strong { overflow-wrap:anywhere;font-size:13px; }.mt-maquina small { font-size:11px; }.mt-imagem { border:0;background:#080a0d;color:#ccd6e2;aspect-ratio:16/10;width:100%;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:6px;overflow:hidden;margin-bottom:6px; }.mt-imagem img { width:100%;height:100%;object-fit:contain; }.mt-imagem span { padding:8px;font-size:12px; }.mt-maquina .ce-barra { margin-top:8px; }.mt-maquina p { font-size:12px;overflow-wrap:anywhere; }
@media(max-width:900px) { .cm-interno { grid-template-columns:180px minmax(0,1fr);gap:12px; }.mt-grade { grid-template-columns:repeat(2,minmax(0,1fr))!important; } }
@media(max-width:600px) { .cm-interno { grid-template-columns:1fr; }.cm-sidebar { position:static;max-height:220px;border-right:0;border-bottom:1px solid var(--borda); }.cm-cards { grid-template-columns:1fr; }.cm-destino label { flex-direction:column;align-items:stretch; }.cm-dados>div { grid-template-columns:1fr;gap:3px; }.mt-grade { grid-template-columns:1fr!important; }.ce-barra .campo { max-width:100%; } }


/* Navegação persistente e visualização em aparelhos de toque. */
.rm-navegacao,.rm-espelho-retorno {display:flex;flex-wrap:wrap;gap:8px;padding:10px;background:var(--superficie,#fff);position:sticky;top:0;z-index:40;border-bottom:1px solid var(--borda);}
.rm-busca-modulos {width:calc(100% - 24px)!important;margin:12px;min-width:0;}
.rm-links {width:min(600px,94vw);max-height:92dvh;overflow:auto;overflow-wrap:anywhere;}
.rm-qr {display:block;width:260px;max-width:100%;height:auto;margin:16px auto;}
.rm-links .campo {width:100%;min-width:0;}
.rm-visor-unico .rm-visor-imagem {height:clamp(360px,65vh,1200px);}
.rm-imersivo {position:fixed!important;inset:0;z-index:1200;background:var(--superficie,#fff);overflow:auto;padding:8px;}
.rm-imersivo>.rm-central-barra,.rm-imersivo>p,.rm-imersivo>.rm-visores-acessos {display:none;}
.rm-imersivo .rm-visor>header,.rm-imersivo .rm-visor>.rm-visor-barra:not(.rm-controle-acoes) {display:none;}
.rm-imersivo .rm-visor-imagem,.rm-central-visores:fullscreen.rm-visor-unico .rm-visor-imagem {height:calc(100dvh - 190px);}
.rm-imersivo .rm-espelho-retorno,.rm-central-visores:fullscreen .rm-espelho-retorno {z-index:50;}
.rm-visor.controlando .rm-visor-imagem,.rm-visor.controlando .rm-visor-imagem img {touch-action:none;}
@media(max-width:800px){
 .aplicacao .barra-lateral {position:fixed;inset:8px auto 8px 8px;z-index:950;width:min(310px,88vw)!important;height:calc(100dvh - 16px);min-height:0;overflow:auto;margin:0;}
 .aplicacao .barra-lateral:not(.recolhida) .rotulo-item,.aplicacao .barra-lateral:not(.recolhida) .grupo-lateral {display:block;}
 .aplicacao .barra-lateral .item-lateral {justify-content:flex-start;min-height:44px;}
 .aplicacao .area-principal {margin-left:0!important;width:100%;}
 .aplicacao .topo {flex-wrap:wrap;gap:8px;}
 .rm-navegacao .botao,.rm-espelho-retorno .botao {min-height:44px;white-space:normal;}
 .rm-visor-barra {flex-wrap:wrap;}.rm-visor-barra label {min-width:0;max-width:100%;}
 .rm-visor-barra input {min-width:0;width:100%;}.rm-visor-unico .rm-visor-imagem {height:55dvh;min-height:240px;}
 .dm-grade-2 {grid-template-columns:minmax(0,1fr);}.dm-painel-cabeca {flex-wrap:wrap;}
 .conteudo {padding:10px!important;}.rm-links .dm-linha-entre {flex-wrap:wrap;}
 .rm-imersivo .rm-visor-imagem {height:calc(100dvh - 250px);}
}

.rm-fechar-menu {margin:10px 12px 0;min-height:44px;}

/* Interface discreta: hierarquia, menos movimento e controles sob demanda. */
.aplicacao .item-lateral,.aplicacao .botao,.aplicacao .cartao {animation:none!important;}
.aplicacao .item-lateral:not(.ativo) {box-shadow:none!important;background-image:none!important;}
.aplicacao .cartao {box-shadow:0 1px 3px #00000008;border:1px solid var(--borda);}
.aplicacao .item-lateral {border-radius:8px;}.aplicacao .cm-icone {font-size:25px;}
.aplicacao .botao.secundario {box-shadow:none;background-image:none;}
.rm-janelas-barra[hidden] {display:none!important;}.rm-mais-ferramentas {margin:8px 16px;}
.cm-categoria .cm-card-abrir {padding:18px;}.cm-sidebar button {line-height:1.5;}
.lx-lista {display:grid;gap:12px;margin-top:16px;}.lx-item {padding:18px;}
.lx-item .dm-acoes {margin-top:14px;}.lx-item p {margin:7px 0;}
.lx-ambiente .cm-sidebar small {display:block;color:var(--texto-suave);}
.lx-ambiente .cm-conteudo>.campo {width:100%;}.lx-ambiente .dm-linha-entre {flex-wrap:wrap;}

.lay-ambientes {display:grid;grid-template-columns:220px minmax(0,1fr);gap:20px;align-items:start;} .lay-conteudo {min-width:0;} .lay-conteudo section[hidden] {display:none!important;} @media(max-width:800px){.lay-ambientes {grid-template-columns:minmax(0,1fr);} .lay-ambientes>.cm-sidebar {position:static;max-height:none;}}

.rm-comandos-toque{margin:8px 0}.rm-comandos-toque summary{cursor:pointer;padding:10px}.rm-comandos-toque .botao{min-width:44px;min-height:44px}

/* Identidade RCSM, família Magnus. */
.marca-lateral .rcsm-logomarca{width:calc(100% - 38px);min-width:0;height:72px;object-fit:cover;border-radius:6px}.marca-lateral .marca-curta{font-size:10px;letter-spacing:-.4px}
/* AYRIA REMOT CONTROL — cópia do airya.css do Airya Defender (29/09/2026), para
   ficar igual peça por peça; o que é só deste sistema vem no fim, prefixo ar-.
   Origem: as peças novas da casca: barra superior com comandos,
   paleta (Ctrl K), diálogo de saída, apresentação sobreposta e as abas novas
   de Configurações. Carrega POR ÚLTIMO e usa só os tokens da casa (a Regra da
   Casa da 3090 continua mandando em cor). Prefixo ad- em tudo. */

/* ── BARRA SUPERIOR ── */
.topo.ad-topo { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; }
.ad-topo .ad-titulo { margin: 0 !important; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
.ad-topo span { color: inherit; }
.ad-caminho { display: inline-flex; gap: 2px; flex: none; }
.ad-seta, .ad-icone {
  width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--borda); background: var(--superficie); color: var(--texto);
  font: inherit; font-size: 17px; line-height: 1; cursor: pointer; display: inline-grid; place-items: center; flex: none;
  transition: background .15s ease, transform .15s ease, border-color .15s ease;
}
.ad-seta:hover:not(:disabled), .ad-icone:hover { background: var(--superficie-2); border-color: var(--acento, var(--borda)); transform: translateY(-1px); }
.ad-seta:disabled { opacity: .35; cursor: default; }
.ad-pilula {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px; min-width: 0; flex: 0 1 300px;
  border: 1px solid var(--borda); background: var(--superficie-2); color: var(--texto-suave); border-radius: 999px;
  padding: 6px 8px 6px 14px; font: inherit; font-size: 13px; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease;
}
.ad-pilula:hover { border-color: var(--acento, var(--gold)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento, var(--gold)) 18%, transparent); }
.ad-pilula-texto { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-topo-direita { display: flex; align-items: center; gap: 8px; flex: none; }
.ad-sair {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 9px; font: inherit; font-size: 13px; font-weight: 700;
  border: 1px solid color-mix(in srgb, var(--vermelho) 45%, var(--borda)); color: var(--vermelho); background: var(--superficie); cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.ad-sair:hover { background: var(--vermelho); color: #fff; }
kbd {
  font-family: inherit; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 5px;
  border: 1px solid var(--borda); border-bottom-width: 2px; background: var(--superficie); color: var(--texto-suave); white-space: nowrap;
}
.ad-sair-lateral:hover { color: var(--vermelho) !important; }
.ad-escudo svg { width: 26px; height: 26px; display: block; margin: 0 auto; color: var(--lateral-texto, #FFFAFA); }
.barra-lateral:not(.recolhida) .marca-lateral .ad-escudo { display: inline-block; vertical-align: middle; margin-right: 8px; }
.barra-lateral:not(.recolhida) .marca-lateral .nome { display: flex; align-items: center; }

@media (max-width: 1180px) { .ad-relogio, .ad-pilula-texto { display: none; } .ad-pilula { flex: none; padding: 6px 10px; } }
@media (max-width: 900px) { .ad-topo .sinal-ligacao, .ad-topo .ad-icone[aria-label="Tela cheia"], .ad-topo .ad-icone[aria-label="Sair da tela cheia"] { display: none; } }
@media (max-width: 760px) {
  .ad-caminho, .ad-pilula kbd { display: none; }
  .ad-topo .ad-icone[aria-label="Configurações"], .ad-topo .ad-icone[aria-label="Trocar tema"] { display: none; }
  .ad-sair { padding: 0 9px; }
}

/* A Regra da Casa põe fio e sombra em TODO botão, com !important e seletor
   de nove :not(). Nas peças que não são botão de ação (item de lista, ponto de
   progresso, campo de busca) o fio vira ruído — por isso os IDs aqui. */
#ad-paleta .ad-paleta-item { border-width: 0 !important; box-shadow: none !important; border-radius: 9px !important; }
#ad-paleta .ad-paleta-item.sel { box-shadow: inset 3px 0 0 var(--acento, var(--gold)) !important; }
#ad-paleta .ad-paleta-campo { border-width: 0 0 1px 0 !important; border-radius: 0 !important; box-shadow: none !important; }
#ap-janela .ap-ponto { border-width: 0 !important; box-shadow: none !important; border-radius: 99px !important; }
#ap-janela .ap-fechar { border-radius: 999px !important; }
#ad-saida .ad-saida-modo { border-radius: 999px !important; box-shadow: none !important; }

/* ── VÉU COMUM ── */
.ad-veu {
  position: fixed; inset: 0; z-index: 400; background: color-mix(in srgb, #0A0F0D 55%, transparent);
  backdrop-filter: blur(3px); display: flex; align-items: flex-start; justify-content: center; padding: 10vh 16px 16px;
  animation: ad-aparece .16s ease-out;
}
@keyframes ad-aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes ad-sobe { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

/* ── PALETA DE COMANDOS ── */
.ad-paleta {
  width: min(640px, 100%); max-height: 70vh; display: flex; flex-direction: column; overflow: hidden;
  background: var(--superficie); color: var(--texto); border: 1px solid var(--borda); border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0,0,0,.4); animation: ad-sobe .18s cubic-bezier(.2,.7,.3,1);
}
.ad-paleta-campo { border: 0; border-bottom: 1px solid var(--borda); padding: 16px 18px; font: inherit; font-size: 16px; background: transparent; color: var(--texto); outline: none; }
.ad-paleta-lista { overflow-y: auto; padding: 6px; }
.ad-paleta-grupo { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ouro-texto, var(--gold)); padding: 10px 10px 4px; }
.ad-paleta-item {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 0; border-radius: 9px; background: transparent;
  color: var(--texto); font: inherit; font-size: 14px; text-align: left; cursor: pointer;
}
.ad-paleta-item.sel { background: var(--acento-fraco, var(--superficie-2)); box-shadow: inset 3px 0 0 var(--acento, var(--gold)); }
.ad-paleta-item.sair .ad-paleta-icone { color: var(--vermelho); }
.ad-paleta-icone { width: 22px; text-align: center; flex: none; }
.ad-paleta-rotulo { flex: 1; }
.ad-paleta-vazio { padding: 18px; color: var(--texto-suave); }
.ad-paleta-pe { display: flex; gap: 16px; padding: 9px 14px; border-top: 1px solid var(--borda); font-size: 12px; color: var(--texto-suave); background: var(--superficie-2); }
.ad-paleta-pe span { display: inline-flex; gap: 4px; align-items: center; }

/* ── DIÁLOGO DE SAÍDA ── */
.ad-saida {
  width: min(480px, 100%); margin-top: 6vh; background: var(--superficie); color: var(--texto); border: 1px solid var(--borda); border-radius: 18px;
  padding: 26px 24px 20px; box-shadow: 0 30px 80px rgba(0,0,0,.4); animation: ad-sobe .2s cubic-bezier(.2,.7,.3,1); text-align: center;
}
.ad-saida h2 { margin: 10px 0 6px; font-size: 20px; }
.ad-saida p { margin: 0 auto; color: var(--texto-suave); max-width: 44ch; }
.ad-saida-icone {
  width: 58px; height: 58px; margin: 0 auto; border-radius: 999px; display: grid; place-items: center; font-size: 26px;
  color: var(--vermelho); background: color-mix(in srgb, var(--vermelho) 12%, var(--superficie)); border: 1px solid color-mix(in srgb, var(--vermelho) 35%, transparent);
}
.ad-saida-aviso { margin-top: 14px; text-align: left; font-size: 13px; padding: 10px 12px; border-radius: 10px; border-left: 3px solid var(--gold); background: color-mix(in srgb, var(--gold) 12%, var(--superficie)); }
.ad-saida-aviso ul { margin: 6px 0; padding-left: 18px; }
.ad-saida-modos { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.ad-saida-modo { border: 1px solid var(--borda); background: var(--superficie-2); color: var(--texto-suave); border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 12.5px; cursor: pointer; }
.ad-saida-modo.atual { border-color: var(--acento, var(--gold)); color: var(--texto); font-weight: 700; }

/* ── LOGIN: a marca e a volta à página inicial ── */
.dm-login-caixa .marca-curta { background: var(--lateral-fundo, #0B6B4F) !important; color: var(--lateral-texto, #FFFAFA) !important; }
.ad-voltar-inicio { position: fixed; top: 16px; left: 16px; z-index: 210; text-decoration: none; font-weight: 700; color: var(--texto); background: var(--superficie); border: 1px solid var(--borda); border-radius: 999px; padding: 7px 14px; }
.ad-voltar-inicio:hover { border-color: var(--acento, var(--gold)); }

/* ── APRESENTAÇÃO SOBREPOSTA ── */
.ap-fundo {
  position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: radial-gradient(1000px 640px at 50% 0%, rgba(11,107,79,.72), rgba(10,15,13,.94) 70%);
  backdrop-filter: blur(6px); animation: ad-aparece .3s ease-out;
}
.ap-fundo.saindo { animation: ap-some .32s ease-in forwards; }
@keyframes ap-some { to { opacity: 0; transform: scale(1.02); } }
.ap-ceu { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ap-janela {
  position: relative; width: min(980px, 100%); max-height: calc(100vh - 32px); overflow: auto;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; gap: 0;
  background: #0E1512; color: #FFFAFA; border: 1px solid rgba(240,190,146,.28); border-radius: 22px;
  box-shadow: 0 40px 120px rgba(0,0,0,.6); animation: ad-sobe .4s cubic-bezier(.2,.7,.3,1);
}
.ap-fechar { position: absolute; top: 12px; right: 12px; z-index: 2; width: 34px; height: 34px; border-radius: 999px; border: 1px solid rgba(255,250,250,.2); background: rgba(255,250,250,.06); color: #FFFAFA; cursor: pointer; font-size: 14px; }
.ap-fechar:hover { background: rgba(255,250,250,.16); }
.ap-cena { display: grid; place-items: center; padding: 28px; background: radial-gradient(circle at 50% 45%, rgba(52,211,153,.14), transparent 70%); border-right: 1px solid rgba(255,250,250,.08); animation: ap-cena-entra .5s cubic-bezier(.2,.7,.3,1); }
@keyframes ap-cena-entra { from { opacity: 0; transform: perspective(900px) rotateY(-14deg) translateX(-16px); } to { opacity: 1; transform: none; } }
.ap-cena .cena { width: 100%; max-width: 380px; height: auto; overflow: visible; }
.ap-texto { padding: 42px 34px 18px; animation: ap-texto-entra .5s cubic-bezier(.2,.7,.3,1); }
@keyframes ap-texto-entra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.ap-sobre { display: block; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #F0BE92; margin-bottom: 10px; }
/* !important nos tamanhos: a Regra da Casa (3090) fixa h2 e p com !important
   para as telas de trabalho; aqui é apresentação, e o título tem de ser título. */
.ap-texto h2 { margin: 0 0 12px !important; font-size: clamp(22px, 2.6vw, 30px) !important; line-height: 1.15 !important; color: #FFFAFA !important; font-weight: 700 !important; }
.ap-texto h2 span { color: #34D399 !important; }
.ap-texto p { margin: 0 0 14px; color: rgba(255,250,250,.82) !important; line-height: 1.6; font-size: 15px !important; }
.ap-texto li { font-size: 14px !important; }
.ad-saida h2 { font-size: 20px !important; }
.ad-saida p { font-size: 14px !important; }
.ap-texto ul { margin: 0 0 16px; padding: 0; list-style: none; display: grid; gap: 7px; }
.ap-texto li { position: relative; padding-left: 20px; font-size: 14px; color: rgba(255,250,250,.9); }
.ap-texto li::before { content: ''; position: absolute; left: 2px; top: .55em; width: 8px; height: 8px; border-radius: 99px; background: #34D399; box-shadow: 0 0 8px rgba(52,211,153,.7); }
.ap-ir { background: transparent !important; color: #F0BE92 !important; border-color: rgba(240,190,146,.45) !important; }
.ap-rodape { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 20px 18px; border-top: 1px solid rgba(255,250,250,.08); }
.ap-pontos { display: flex; gap: 6px; }
.ap-ponto { position: relative; width: 30px; height: 6px; border-radius: 99px; border: 0; padding: 0; background: rgba(255,250,250,.16); cursor: pointer; overflow: hidden; transition: width .25s ease; }
.ap-ponto.visto { background: rgba(52,211,153,.55); }
.ap-ponto.atual { width: 54px; background: rgba(255,250,250,.24); }
.ap-carga { position: absolute; inset: 0; background: #34D399; transform-origin: left; animation: ap-carga linear forwards; }
@keyframes ap-carga { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ap-botoes { display: flex; gap: 8px; flex-wrap: wrap; }
.ap-botoes .botao.secundario { background: rgba(255,250,250,.06) !important; color: #FFFAFA !important; border-color: rgba(255,250,250,.2) !important; }
.ap-proximo { min-width: 120px; }

/* O movimento das cenas. Cada peça tem o seu atraso em --d. */
.cena .pulsa { animation: ap-pulsa 3.2s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.cena .orbita { animation: ap-gira 14s linear infinite; transform-origin: 160px 120px; }
.cena .gira-lento { animation: ap-gira 28s linear infinite; transform-origin: center; transform-box: fill-box; }
.cena .sobe { animation: ap-sobe-peca .8s cubic-bezier(.2,.7,.3,1) both; animation-delay: var(--d, 0s); transform-box: fill-box; }
.cena .traca { stroke-dasharray: 120; stroke-dashoffset: 120; animation: ap-traca 1s ease-out .6s forwards; }
.cena .entra { animation: ap-entra .6s cubic-bezier(.2,.7,.3,1) both; animation-delay: var(--d, 0s); }
.cena .pisca { animation: ap-brilho 1.8s ease-in-out infinite; }
.cena .percorre { stroke-dasharray: 240; stroke-dashoffset: 240; animation: ap-traca 4.5s linear infinite; }
.cena .acende { opacity: .25; animation: ap-acende 4.5s ease-in-out infinite; animation-delay: var(--d, 0s); }
.cena .varre { animation: ap-gira 3.6s linear infinite; transform-origin: 160px 120px; }
.cena .bip { opacity: 0; animation: ap-bip 3.6s ease-out infinite; animation-delay: var(--d, 0s); transform-box: fill-box; transform-origin: center; }
.cena .voa { animation: ap-voa 3.3s cubic-bezier(.5,0,.3,1) infinite; animation-delay: var(--d, 0s); }
.cena .corre { animation: ap-corre 1.2s linear infinite; }
.cena .onda { animation: ap-onda 2.4s ease-out infinite; animation-delay: var(--d, 0s); transform-origin: 90px 120px; }
.cena .porta { animation: ap-porta 3s ease-in-out infinite; transform-origin: 192px 118px; }
@keyframes ap-pulsa { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes ap-gira { to { transform: rotate(360deg); } }
@keyframes ap-sobe-peca { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes ap-traca { to { stroke-dashoffset: 0; } }
@keyframes ap-entra { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@keyframes ap-brilho { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes ap-acende { 0%, 8% { opacity: .25; } 15%, 100% { opacity: 1; } }
@keyframes ap-bip { 0% { opacity: 0; transform: scale(.4); } 12% { opacity: 1; transform: scale(1.4); } 40% { opacity: .9; transform: scale(1); } 100% { opacity: 0; } }
@keyframes ap-voa { 0% { transform: translate(0, 0); opacity: 1; } 60% { transform: translate(170px, 70px) scale(.7); opacity: .9; } 70%, 100% { transform: translate(190px, 80px) scale(.5); opacity: 0; } }
@keyframes ap-corre { to { stroke-dashoffset: -24; } }
@keyframes ap-onda { from { transform: scale(.8); opacity: .8; } to { transform: scale(1.5); opacity: 0; } }
@keyframes ap-porta { 0%, 30%, 100% { transform: perspective(300px) rotateY(0); } 55%, 75% { transform: perspective(300px) rotateY(-55deg); } }
.ap-fundo.parado *, .ap-fundo.parado *::before, .ap-fundo.parado *::after { animation: none !important; }
.ap-fundo.parado .cena .traca, .ap-fundo.parado .cena .percorre { stroke-dashoffset: 0; }
.ap-fundo.parado .cena .acende, .ap-fundo.parado .cena .bip { opacity: 1; }
.ap-fundo.parado .cena .voa { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .ap-fundo, .ap-janela, .ap-cena, .ap-texto, .ad-veu, .ad-paleta, .ad-saida { animation: none !important; }
}
@media (max-width: 760px) {
  .ap-janela { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .ap-cena { border-right: 0; border-bottom: 1px solid rgba(255,250,250,.08); padding: 18px; }
  .ap-cena .cena { max-width: 240px; }
  .ap-texto { padding: 18px 20px 8px; }
  .ap-rodape { padding: 12px 16px 16px; }
  .ap-botoes { width: 100%; }
  .ap-botoes .botao { flex: 1; }
}

/* ── CONFIGURAÇÕES: APARÊNCIA ── */
.ad-temas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-bottom: 14px; }
.ad-tema-cartao {
  display: flex; flex-direction: column; gap: 8px; text-align: left; padding: 12px; border-radius: 14px; cursor: pointer; font: inherit; color: var(--texto);
  background: var(--superficie); border: 1px solid var(--borda); transition: transform .15s ease, box-shadow .15s ease;
}
.ad-tema-cartao:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.12); }
.ad-tema-cartao.marcado { box-shadow: inset 0 0 0 2px var(--acento, var(--gold)); }
.ad-tema-amostra { display: grid; grid-template-columns: 30% 1fr; grid-template-rows: repeat(3, 1fr); gap: 5px; height: 86px; padding: 6px; border-radius: 10px; }
.ad-tema-amostra i { grid-row: 1 / -1; border-radius: 6px; }
.ad-tema-amostra b { border-radius: 5px; }
.ad-tema-amostra.claro { background: #FFFAFA; border: 1px solid #EAD7C6; }
.ad-tema-amostra.claro i { background: #0B6B4F; }
.ad-tema-amostra.claro b { background: #EAD7C6; }
.ad-tema-amostra.escuro { background: #0A0F0D; border: 1px solid #30241C; }
.ad-tema-amostra.escuro i { background: #121A16; box-shadow: inset 0 0 0 1px #34D39955; }
.ad-tema-amostra.escuro b { background: #30241C; }
.ad-tema-amostra.sistema { background: linear-gradient(135deg, #FFFAFA 50%, #0A0F0D 50%); border: 1px solid var(--borda); }
.ad-tema-amostra.sistema i { background: linear-gradient(135deg, #0B6B4F 50%, #121A16 50%); }
.ad-tema-amostra.sistema b { background: linear-gradient(135deg, #EAD7C6 50%, #30241C 50%); }
.ad-atalhos { display: grid; gap: 8px; }
.ad-atalhos > div { display: grid; grid-template-columns: 170px 1fr; align-items: center; gap: 10px; font-size: 13.5px; }
.ad-atalhos > div > span { color: var(--texto-suave); }
.ad-teclas { font-weight: 400; display: inline-flex; gap: 4px; align-items: center; flex-wrap: wrap; }
@media (max-width: 560px) { .ad-atalhos > div { grid-template-columns: 1fr; gap: 2px; } }

/* ── CONFIGURAÇÕES: PÁGINAS EXTERNAS ── */
.ad-vitrine-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.ad-cores { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; margin-bottom: 12px; }
.ad-cor { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.ad-cor input[type="color"] { width: 38px; height: 32px; border: 1px solid var(--borda); border-radius: 8px; padding: 2px; background: var(--superficie); cursor: pointer; flex: none; }
.ad-cor small { display: block; color: var(--texto-suave); font-size: 11px; }
.ad-marcar { display: flex; align-items: center; gap: 8px; padding: 5px 0; cursor: pointer; }
.ad-previa-vitrine { border: 1px solid var(--borda); border-radius: 14px; overflow: hidden; height: 520px; background: var(--superficie-2); }
.ad-previa-vitrine iframe { width: 100%; height: 100%; border: 0; display: block; }
input[type="range"] { width: 100%; accent-color: var(--acento, var(--gold)); }

/* ── CONFIGURAÇÕES: PLANO E LICENÇA ── */
.ad-plano-atual { border-left: 4px solid var(--acento, var(--gold)) !important; }
.ad-plano-nome { font-size: 22px; font-weight: 700; }
.ad-limites { display: grid; gap: 6px; margin-top: 12px; font-size: 13.5px; }
.ad-planos { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin-bottom: 12px; perspective: 1200px; }
.ad-plano { position: relative; display: flex; flex-direction: column; gap: 6px; transition: transform .2s ease, box-shadow .2s ease; }
.ad-plano:hover { transform: translateY(-3px) rotateX(2deg); box-shadow: 0 16px 36px rgba(0,0,0,.14); }
.ad-plano.destaque { box-shadow: inset 0 0 0 2px var(--acento, var(--gold)); }
.ad-plano.atual { outline: 2px solid var(--verde); outline-offset: 2px; }
.ad-plano ul { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 12.8px; }
.ad-plano li.nao { opacity: .45; }
.ad-preco { font-size: 20px; font-weight: 700; }
.ad-fita { position: absolute; top: -10px; right: 12px; font-size: 10.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--ouro-texto, var(--gold)); color: #fff; }

/* ── CONFIGURAÇÕES: APARELHOS ── */
.ad-celular { display: grid; grid-template-columns: 1fr 260px; gap: 12px; margin-bottom: 12px; }
@media (max-width: 760px) { .ad-celular { grid-template-columns: 1fr; } }
.ad-passos { margin: 0; padding-left: 20px; display: grid; gap: 10px; font-size: 13.5px; }
.ad-qr-caixa { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.ad-qr { width: 200px; height: 200px; border-radius: 8px; }
.ad-comando { display: block; padding: 8px 10px; border-radius: 8px; background: var(--superficie-2); border: 1px solid var(--borda); font-size: 12.5px; overflow-wrap: anywhere; }

/* ── MARCA DA FAMÍLIA ── */
.ad-escudo img { width: 30px; height: 30px; display: block; margin: 0 auto; object-fit: contain; }

/* ── PRIMEIRO ACESSO E TERMOS ── */
.ad-primeiro { width: min(720px, 100%); max-height: calc(100vh - 32px); overflow: auto; }
.ad-primeiro h2 { margin: 6px 0 4px; }
.ad-primeiro-marca { display: flex; align-items: center; gap: 12px; }
.ad-primeiro-marca img { width: 44px; height: 44px; }
.ad-primeiro-marca b { display: block; font-size: 17px; }
.ad-primeiro-marca span { font-size: 12px; color: var(--texto-suave); }
.ad-aceite { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--borda) 60%, transparent); }
.ad-termo-caixa { flex-basis: 100%; max-height: 320px; overflow: auto; padding: 12px 14px; border: 1px solid var(--borda); border-radius: 10px; background: var(--superficie-2); margin-top: 6px; }
.ad-termo-texto h2, .ad-termo-texto h3, .ad-termo-texto h4 { margin: 12px 0 6px; }
.ad-termo-texto p, .ad-termo-texto li { font-size: 13.5px; line-height: 1.6; }

/* ── SUPORTE ── */
.ad-suporte-canal { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; align-items: center; border-left: 4px solid var(--acento, var(--gold)) !important; }
.ad-resposta { margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--acento-fraco, var(--superficie-2)); font-size: 13.5px; }

/* ── CONFIGURAÇÕES: SESSÃO E SOBRE ── */
.ad-saidas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-bottom: 12px; }
.ad-saida-cartao { display: flex; flex-direction: column; gap: 6px; text-align: left; cursor: pointer; font: inherit; color: var(--texto); transition: transform .15s ease, box-shadow .15s ease; }
.ad-saida-cartao:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.12); }
.ad-saida-simbolo { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-size: 18px; color: var(--vermelho); background: color-mix(in srgb, var(--vermelho) 10%, var(--superficie)); }
.ad-sobre-marca { display: flex; align-items: center; gap: 14px; margin: 6px 0 14px; }
.ad-sobre-marca svg { width: 52px; height: 52px; flex: none; }
.ad-sobre-linha { padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--borda) 60%, transparent); font-size: 13.5px; }
.ad-sobre-linha:last-child { border-bottom: 0; }

/* ── AYRIA REMOT CONTROL: o que é só deste sistema ── */

/* A marca: a estrela do Airya Jur, na barra e no Sobre. */
.ar-estrela { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px;
  background: radial-gradient(circle at 50% 42%, rgba(240,190,146,.28), transparent 70%); }
.ar-estrela img { width: 30px; height: 30px; object-fit: contain; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.barra-lateral:not(.recolhida) .marca-lateral .nome { display: flex; align-items: center; gap: 10px; }
.barra-lateral.recolhida .marca-lateral .ar-estrela { margin: 0 auto; }
.marca-lateral .ar-nome { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.marca-lateral .ar-nome b { font-size: 15px; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.marca-lateral .ar-nome small { font-size: 11px; opacity: .78; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-sobre-marca img { width: 64px; height: 64px; flex: none; object-fit: contain; }

/* A barra de navegação própria do remoto (voltar/avançar módulo, links e QR)
   fica compacta debaixo da barra superior, no mesmo desenho das pílulas. */
.rm-navegacao { gap: 6px !important; padding: 6px 16px !important; align-items: center; }
.rm-navegacao .botao { border-radius: 999px !important; padding: 5px 14px !important; font-size: 13px !important; }
.rm-navegacao .rm-mais-ferramentas { margin: 0 0 0 auto !important; }
.rm-janelas-barra { margin: 8px 16px 0; }
.ad-topo .sinal-ligacao { flex: none; }

/* O "vivo" em volta do nó central da cena de cowork. */
.cena .onda-centro { animation: ap-onda 2.4s ease-out infinite; transform-origin: 160px 120px; }

/* Pulsação da estrela no login (mesmo gesto da apresentação). */
.ar-login-marca { display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 8px; }
.ar-login-marca img { width: 44px; height: 44px; object-fit: contain; }
@media (prefers-reduced-motion: reduce) { .cena .onda-centro { animation: none !important; } }

/* ── COMERCIAL ── */
.ar-barra { height: 8px; border-radius: 99px; background: var(--superficie-2); overflow: hidden; border: 1px solid var(--borda); }
.ar-barra i { display: block; height: 100%; background: var(--acento, #0B6B4F); border-radius: inherit; transition: width .3s ease; }
.ar-barra i.quase { background: var(--vermelho); }
.ar-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 12px; }
.ar-kpi { display: flex; flex-direction: column; gap: 4px; border-left: 4px solid var(--acento, var(--gold)) !important; }
.ar-kpi b { font-size: 20px; }
.ar-documento { white-space: pre-wrap; max-height: 460px; overflow: auto; padding: 14px 16px; margin: 10px 0; border: 1px solid var(--borda); border-radius: 10px; background: var(--superficie-2); font-size: 13.5px; line-height: 1.6; }
.ad-plano ul li { list-style: none; }
/* PADRÃO VISUAL AIRYA (01/10/2026) — liga os tokens deste sistema aos do
   Airya Intelectual (3180), que chegam por /airya-padrao.css (--airya-*, por
   data-theme light | dark | neve). Carrega POR ÚLTIMO no pacote.

   Regras do mapeamento:
   - nenhum token local muda de nome e nenhuma tela é reescrita: cada token só
     passa a LER o do padrão, com o valor de antes como reserva;
   - mesmos seletores (e peso) dos blocos de tema de styles.css: vence por vir
     depois. O bloco do Motor de Layout (cor de linha escolhida) vem depois
     deste e continua mandando; a Regra da Casa da 3090 (@layer + !important)
     também continua mandando onde define — ela é da mesma família de cores. */

:root,
:root[data-tema='claro'] {
  --navy: var(--airya-gold, #0B1F3A);
  --gold: var(--airya-casa-cobre, #E0AF2D);
  --dourado: var(--airya-casa-cobre, #E0AF2D);
  --bg: var(--airya-bg, #F4F2ED);
  --superficie: var(--airya-panel, #FFFFFF);
  --superficie-2: var(--airya-raise, #FAF8F3);
  --texto: var(--airya-ink, #0A0A0A);
  --texto-suave: var(--airya-dim, #23262B);
  --borda: var(--airya-line, #DAD6CB);
  --verde: var(--airya-good, #2E7D32);
  --vermelho: var(--airya-crit, #B3261E);
  --lateral-fundo: var(--airya-casa-lateral, #0B1F3A);
  --lateral-texto: var(--airya-lado-ink, #E8E6E1);
  --lateral-ativo: var(--airya-lado-on, rgba(200, 162, 75, 0.16));
  --sombra: var(--airya-casa-sombra, 0 1px 2px rgba(0, 0, 0, 0.04));
  --acento: var(--airya-casa-acento, #E0AF2D);
  --acento-texto: var(--airya-gold-deep, #5E4300);
  --ouro-texto: color-mix(in srgb, var(--airya-casa-cobre, #E0AF2D) 62%, var(--airya-ink, #000000));
  --acento-fraco: color-mix(in srgb, var(--airya-casa-acento, #E0AF2D) 14%, transparent);
  --acento-fio: color-mix(in srgb, var(--airya-casa-acento, #E0AF2D) 42%, transparent);
  --btn-fundo: var(--airya-btn-bg, #0B1F3A);
  --btn-texto: var(--airya-btn-ink, #F4F2ED);
  --btn-ouro-fundo: var(--airya-btn-bg, #E0AF2D);
  --btn-ouro-texto: var(--airya-btn-ink, #0B1F3A);
  --btn-2-fundo: var(--airya-panel, #FFFFFF);
  --btn-2-fio: var(--airya-line, #DAD6CB);
  --brilho-acento: var(--airya-casa-brilho, 200, 162, 75);
  --hg-fundo: var(--airya-raise, #F7F8FA);
  --hg-linha: var(--airya-line2, rgba(0, 0, 0, 0.06));
  --hg-forte: var(--airya-ink, #0B0D11);
  --hg-medio: var(--airya-dim, #1A1E26);
  --hg-fraco: var(--airya-faint, #3A4049);
  --hg-vivo: var(--airya-online, #00BF8F);
}

:root[data-tema='escuro'] {
  --navy: var(--airya-gold, #E8BC3E);
  --gold: var(--airya-casa-cobre, #E8BC3E);
  --dourado: var(--airya-casa-cobre, #E8BC3E);
  --bg: var(--airya-bg, #101418);
  --superficie: var(--airya-panel, #171C22);
  --superficie-2: var(--airya-raise, #1D242B);
  --branco: var(--airya-panel, #171C22);
  --texto: var(--airya-ink, #ECEFF2);
  --texto-suave: var(--airya-dim, #9AA4AE);
  --borda: var(--airya-line, #2A323B);
  --verde: var(--airya-good, #5BBF6A);
  --vermelho: var(--airya-crit, #F0776C);
  --lateral-fundo: var(--airya-casa-lateral, #0B0E12);
  --lateral-texto: var(--airya-lado-ink, #D6DCE2);
  --lateral-ativo: var(--airya-lado-on, rgba(224, 184, 76, 0.14));
  --sombra: var(--airya-casa-sombra, 0 1px 2px rgba(0, 0, 0, 0.4));
  --acento: var(--airya-casa-acento, #00FFFF);
  --acento-texto: var(--airya-gold-deep, #00FFFF);
  --ouro-texto: color-mix(in srgb, var(--airya-casa-cobre, #E8BC3E) 70%, var(--airya-ink, #FFFFFF));
  --acento-fraco: color-mix(in srgb, var(--airya-casa-acento, #00FFFF) 15%, transparent);
  --acento-fio: color-mix(in srgb, var(--airya-casa-acento, #00FFFF) 38%, transparent);
  --btn-fundo: var(--airya-btn-bg, #E8BC3E);
  --btn-texto: var(--airya-btn-ink, #0A0D10);
  --btn-ouro-fundo: var(--airya-btn-bg, #E8BC3E);
  --btn-ouro-texto: var(--airya-btn-ink, #0A0D10);
  --btn-2-fundo: color-mix(in srgb, var(--airya-panel, #171C22) 70%, transparent);
  --btn-2-fio: var(--airya-line, rgba(255, 255, 255, .16));
  --brilho-acento: var(--airya-casa-brilho, 0, 255, 255);
  --hg-fundo: var(--airya-raise, #1D242B);
  --hg-linha: var(--airya-line2, rgba(255, 255, 255, 0.08));
  --hg-forte: var(--airya-ink, #ECEFF2);
  --hg-medio: var(--airya-dim, #C2CAD3);
  --hg-fraco: var(--airya-faint, #9AA4AE);
  --hg-vivo: var(--airya-online, #5BBF6A);
}

/* Fonte da família: Candara (a Regra da Casa já a impõe quando a 3090 responde). */
body { font-family: Candara, Calibri, 'Segoe UI', 'DejaVu Sans', Arial, sans-serif; }

/* =====================================================================
   O TEMA PRÓPRIO VENCE A REGRA DA CASA — só neste sistema (02/10/2026)
   =====================================================================
   MEDIDO: a Regra da Casa (3090) escreve --bg, --superficie, --texto,
   --lateral-*, --sb-* e o botão primário com `!important` DENTRO de
   `@layer temas-definitivos` / `cores-barras`. Na cascata, `!important` em
   camada vence `!important` fora de camada, seja qual for o seletor: com tema
   próprio escolhido, os nove temas apareciam com as cores do Claro/Escuro da
   casa. Saída: nos `!important`, a camada declarada PRIMEIRO vence — esta
   folha entra no <head> antes do bloco da casa (que o Motor de Layout injeta
   depois), então `airya-escolha-do-operador` é a primeira camada.
   Só vale SEM `data-tema-da-casa` no <html>: enquanto a casa manda (ninguém
   escolheu tema aqui), tudo segue como era. */
@layer airya-escolha-do-operador {
  :root:not([data-tema-da-casa])[data-theme] {
    --bg: var(--airya-bg) !important;
    --bg-2: var(--airya-raise) !important;
    --superficie: var(--airya-panel) !important;
    --superficie-2: var(--airya-raise) !important;
    --superficie-3: var(--airya-raise) !important;
    --branco: var(--airya-panel) !important;
    --texto: var(--airya-ink) !important;
    --texto-2: var(--airya-dim) !important;
    --texto-suave: var(--airya-dim) !important;
    --texto-inverso: var(--airya-btn-ink) !important;
    --ink: var(--airya-ink) !important;
    --muted: var(--airya-dim) !important;
    --faint: var(--airya-faint) !important;
    --borda: var(--airya-line) !important;
    --borda-forte: var(--airya-line) !important;
    --navy: var(--airya-gold) !important;
    --navy-2: var(--airya-gold-deep) !important;
    --acento: var(--airya-casa-acento) !important;
    --acento-texto: var(--airya-gold-deep) !important;
    --acento-fraco: color-mix(in srgb, var(--airya-casa-acento) 14%, transparent) !important;
    --ouro: var(--airya-casa-cobre) !important;
    --ouro-texto: var(--airya-gold-deep) !important;
    --ouro-fraco: color-mix(in srgb, var(--airya-casa-cobre) 18%, transparent) !important;
    --ouro-fio: color-mix(in srgb, var(--airya-casa-cobre) 55%, transparent) !important;
    --brilho-acento: var(--airya-casa-brilho) !important;
    --foco: color-mix(in srgb, var(--airya-gold) 45%, transparent) !important;
    --lateral-fundo: var(--airya-casa-lateral) !important;
    --lateral-fundo-2: var(--airya-casa-lateral-2) !important;
    --lateral-texto: var(--airya-lado-ink) !important;
    --lateral-texto-suave: var(--airya-lado-lab) !important;
    --lateral-ativo: var(--airya-lado-on) !important;
    --lateral-borda: var(--airya-lado-linha) !important;
    --sb-f: var(--airya-casa-lateral) !important;
    --sb-p: var(--airya-lado-ink) !important;
    --sb-i: var(--airya-lado-ink) !important;
    --sb-s: var(--airya-lado-on) !important;
    --sb-t: var(--airya-lado-ink) !important;
    --sucesso: var(--airya-good) !important;
    --alerta: var(--airya-warn) !important;
    --perigo: var(--airya-crit) !important;
    --info: var(--airya-info) !important;
    --neutro: var(--airya-faint) !important;
  }
  :root:not([data-tema-da-casa])[data-tema='claro'] { color-scheme: light !important; }
  :root:not([data-tema-da-casa])[data-tema='escuro'] { color-scheme: dark !important; }
  /* campos e botão principal: a casa os escreve em cor fixa (esmeralda) */
  :root:not([data-tema-da-casa])[data-theme] body :is(input:not([type='checkbox']):not([type='radio']):not([type='range']), select, textarea) { background-color: var(--airya-cromo) !important; color: var(--airya-ink) !important; }
  :root:not([data-tema-da-casa])[data-theme] body .botao.primario { background: var(--airya-btn-bg) !important; color: var(--airya-btn-ink) !important; }
}

/* ---- O MENU DE TEMA (componentes/MenuDeTema.tsx): fora da barra, no <body> ---- */
.ar-tema-menu {
  position: fixed; z-index: 10000; min-width: 270px; max-width: calc(100vw - 16px);
  display: flex; flex-direction: column; gap: 2px; padding: 6px;
  background: var(--superficie, #fff); color: var(--texto, #111);
  border: 1px solid var(--borda, rgba(0, 0, 0, .15)); border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .28);
}
.ar-tema-menu .ar-tema-item {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 8px 10px; border: 0; border-radius: 7px; cursor: pointer;
  background: transparent; color: var(--texto, #111); font: inherit; font-size: 13.5px;
}
.ar-tema-menu .ar-tema-item:hover,
.ar-tema-menu .ar-tema-item.ativo { background: var(--superficie-2, rgba(0, 0, 0, .06)); }
.ar-tema-menu .ar-tema-marca { width: 14px; flex: none; color: var(--acento, currentColor); font-weight: 700; }
.ar-tema-menu .ar-tema-dica { color: var(--texto-suave, #555); font-weight: 400; }
.ar-tema-menu .ar-tema-casa { border-top: 1px solid var(--borda, rgba(0, 0, 0, .12)); border-radius: 0 0 7px 7px; margin-top: 2px; }

/* As amostras dos seis temas de cor em Configurações → Aparência (as de
   Claro, Escuro e Sistema ficam em airya.css). */
.ad-tema-amostra.ouro { background: #0B0A08; border: 1px solid #262013; }
.ad-tema-amostra.ouro i { background: #0E0C09; box-shadow: inset 0 0 0 1px #C9A55A55; }
.ad-tema-amostra.ouro b { background: #262013; }
.ad-tema-amostra.azul { background: #070F20; border: 1px solid #132646; }
.ad-tema-amostra.azul i { background: #081226; box-shadow: inset 0 0 0 1px #62B5FF55; }
.ad-tema-amostra.azul b { background: #132646; }
.ad-tema-amostra.vermelho { background: #180A10; border: 1px solid #3A1A29; }
.ad-tema-amostra.vermelho i { background: #1B0B12; box-shadow: inset 0 0 0 1px #FF829D55; }
.ad-tema-amostra.vermelho b { background: #3A1A29; }
.ad-tema-amostra.ouro-claro { background: #FBF7EE; border: 1px solid #EADBB8; }
.ad-tema-amostra.ouro-claro i { background: #6E5320; }
.ad-tema-amostra.ouro-claro b { background: #EADBB8; }
.ad-tema-amostra.azul-claro { background: #F5F9FF; border: 1px solid #D6E6F8; }
.ad-tema-amostra.azul-claro i { background: #12376A; }
.ad-tema-amostra.azul-claro b { background: #D6E6F8; }
.ad-tema-amostra.vermelho-claro { background: #FFF7F8; border: 1px solid #F5D5DD; }
.ad-tema-amostra.vermelho-claro i { background: #6E1A30; }
.ad-tema-amostra.vermelho-claro b { background: #F5D5DD; }
/* Casca do operador: navegação sob demanda e central livre. */
html body .aplicacao.aplicacao {height:100dvh;--doca-altura:0px;padding-bottom:68px;box-sizing:border-box;align-items:stretch;overflow:hidden;}
html body .aplicacao .area-principal {margin:0!important;min-width:0;width:100%;height:100%;overflow:auto;}
html body .aplicacao .topo {position:sticky;top:0;z-index:30;min-height:60px;padding:10px 24px;border:0!important;border-bottom:1px solid var(--borda)!important;border-radius:0!important;background:var(--superficie);gap:20px;}
html body .aplicacao .ad-titulo {font-weight:500;letter-spacing:-.4px;}
html body .aplicacao .ad-pilula {box-shadow:none;background:var(--superficie-2);border:1px solid var(--borda);border-radius:9px;padding:8px 12px;min-width:0;}
html body .aplicacao .ad-pilula kbd {font-size:10px;opacity:.6;margin-left:20px;}
html body .aplicacao .ad-topo-direita {margin-left:auto;}
html body .aplicacao .conteudo {padding:16px 24px 24px;box-sizing:border-box;}
html body .aplicacao .barra-lateral {position:fixed!important;z-index:80;left:12px;bottom:76px;top:72px;width:var(--largura-lateral,260px)!important;min-height:0!important;height:auto!important;border:1px solid var(--borda)!important;border-radius:14px!important;background:var(--superficie)!important;box-shadow:0 18px 55px #0004!important;display:flex;flex-direction:column;overflow:hidden;}
html body .aplicacao .lateral-rolagem {flex:1 1 auto;min-height:0;overflow:auto!important;padding:6px 8px;}
html body .aplicacao .marca-lateral {padding:12px;}
html body .aplicacao .item-lateral {padding:10px 12px;border:0!important;border-radius:7px!important;min-height:38px;display:flex;align-items:center;gap:10px;cursor:pointer;}
html body .aplicacao .item-lateral:hover {background:var(--superficie-2);}
html body .aplicacao .item-lateral.ativo {background:var(--acento-fraco);}
html body .aplicacao .grupo-lateral {letter-spacing:.06em;padding:12px 12px 6px;opacity:.6;}
html body .aplicacao .rm-fechar-menu {margin:0 12px 8px;padding:7px;}
html body .aplicacao .rm-busca-modulos {margin:0 12px 8px;width:calc(100% - 24px);}
html body .aplicacao .rodape-lateral {padding:8px;border:0!important;}
html body .aplicacao .op-dock {position:fixed;z-index:100;bottom:0;left:0;right:0;height:64px;box-sizing:border-box;display:flex;align-items:center;gap:14px;padding:8px 14px;background:var(--superficie);border-top:1px solid var(--borda);backdrop-filter:blur(24px);}
.op-grupos,.op-utilitarios {display:flex;gap:3px;align-items:center;flex-shrink:0;}
html body .aplicacao .op-dock button {border:0!important;background:transparent!important;box-shadow:none!important;border-radius:8px!important;width:36px;height:40px;min-height:0;padding:5px;display:inline-flex;align-items:center;justify-content:center;color:var(--texto);cursor:pointer;}
html body .aplicacao .op-dock button:hover,html body .aplicacao .op-dock button[aria-expanded=true] {background:var(--acento-fraco)!important;color:var(--acento);}
.op-utilitarios {margin-left:auto;border-left:1px solid var(--borda);padding-left:10px;}
.op-fixados {display:flex;align-items:center;gap:6px;flex:1;min-width:40px;height:48px;overflow-x:auto;border-left:1px solid var(--borda);padding-left:12px;}
.op-recebe-arrasto {outline:1px dashed var(--acento);background:var(--acento-fraco);border-radius:8px;}
.op-dica-dock {opacity:.45;white-space:nowrap;}
.op-fixado {position:relative;display:inline-flex;flex-shrink:0;}
html body .aplicacao .op-dock .op-desafixar {position:absolute;right:-4px;top:-5px;width:18px;height:18px;font-size:12px!important;background:var(--superficie-2)!important;opacity:0;}
.op-fixado:hover .op-desafixar,.op-fixado:focus-within .op-desafixar {opacity:1!important;}
.op-sr {position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
html body .aplicacao .dm-painel:only-child>.dm-painel-cabeca {display:none;}
html body .aplicacao .rm-central-visores>nav {display:none;}
html body .aplicacao .rm-central-barra {border:0;background:transparent;gap:12px;}
html body .aplicacao .rm-airia-abrir {bottom:80px;}
.op-guia {position:fixed;z-index:90;top:76px;right:18px;bottom:80px;width:min(460px,calc(100vw - 36px));box-sizing:border-box;padding:24px;background:var(--superficie);border:1px solid var(--borda);border-radius:16px;box-shadow:0 24px 80px #0005;overflow:auto;outline:none;}
.op-guia header {display:flex;gap:15px;align-items:flex-start;justify-content:space-between;}
.op-guia header small {letter-spacing:.12em;opacity:.6;}
.op-guia h2 {margin:6px 0 14px!important;}
.op-guia p {line-height:1.6;opacity:.75;}
.op-guia-acoes {display:flex;gap:10px;flex-wrap:wrap;margin:18px 0;}
.op-guia ol {list-style:none;padding:0;margin:22px 0;}
.op-etapa {display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--borda);}
.op-numero {border:1px solid var(--borda);width:28px;height:28px;display:grid;place-items:center;border-radius:50%;flex-shrink:0;}
.op-etapa h3 {margin:0!important;}
.op-etapa p {margin:5px 0;}
.op-etapa small {opacity:.6;}
.op-etapa.ok .op-numero {background:var(--acento-fraco);color:var(--acento);}
.op-etapa.atencao .op-numero {border-color:#bc8b39;color:#bc8b39;}
.op-etapa.erro .op-numero {border-color:#c54c4c;}
.op-etapa pre {white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;line-height:1.5;background:var(--superficie-2);padding:10px;border-radius:8px;}
.op-link {display:block;border:0;background:none;color:var(--acento);padding:6px 0;text-align:left;cursor:pointer;text-decoration:underline;text-underline-offset:3px;}
.op-layout {max-width:1050px;}
.op-layout-grade {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:24px 0;}
.op-layout fieldset {border:1px solid var(--borda);border-radius:12px;padding:20px;min-width:0;}
.op-layout legend {padding:0 8px;}
.op-layout label {display:flex;flex-direction:column;gap:8px;margin-bottom:18px;}
.op-layout select {width:100%;padding:9px;background:var(--superficie-2);color:var(--texto);border:1px solid var(--borda);border-radius:6px;}
.op-layout input[type=range] {width:100%;}
.op-layout .op-checkbox {flex-direction:row;}
.op-previa {padding:18px;border:1px solid var(--borda);}
.op-layout details {margin:16px 0;}
html body .aplicacao [hidden] {display:none!important;}
@media(max-width:1050px){.op-dica-dock {display:none;}.op-grupos {gap:0;}html body .aplicacao .op-dock {gap:6px;padding-inline:6px;}html body .aplicacao .op-dock button {width:32px;}.op-utilitarios {padding-left:4px;}}
@media(max-width:700px){.op-layout-grade {grid-template-columns:1fr;}html body .aplicacao .topo {padding:10px 14px;gap:8px;}.ad-pilula span,.ad-pilula kbd {display:none;}.op-grupos {max-width:56vw;overflow:auto;}html body .aplicacao .op-dock button {width:34px;flex-shrink:0;}.op-utilitarios button:nth-last-child(2),.op-utilitarios button:last-child {display:none!important;}.op-guia {top:70px;right:8px;bottom:72px;width:calc(100vw - 16px);padding:18px;}html body .aplicacao .conteudo {padding:12px;}html body .aplicacao .barra-lateral {top:70px;max-width:calc(100vw - 24px);}html body .aplicacao .sinal-ligacao {display:none;}}
@media(prefers-reduced-motion:reduce){.op-guia,.op-dock {scroll-behavior:auto;}}

html body .aplicacao.aplicacao :is(button,.item-lateral,.campo,.cartao,.rm-visor) {text-shadow:none!important;box-shadow:none!important;background-image:none!important;}
html body .aplicacao.aplicacao button {border-color:var(--borda)!important;}
html body .aplicacao.aplicacao .op-dock button span {font-size:21px!important;line-height:1!important;font-family:"Segoe UI Symbol","Segoe UI",sans-serif!important;}
html body .aplicacao .rm-airia-botao {bottom:80px!important;right:18px!important;}
html body .aplicacao .rm-airia {bottom:70px!important;max-height:calc(100dvh - 145px);}
html body .aplicacao .dm-painel {border:0!important;box-shadow:none!important;}
html body .aplicacao .rm-central-visores {border:0!important;}
.op-grupos {flex:0 1 auto;max-width:55%;overflow-x:auto;} .op-grupos button {flex-shrink:0;}
/* Cinco sidebars: a lista recebe o espaço livre, sem controles duplicados. */
html body .aplicacao.aplicacao .barra-lateral {width:clamp(250px,var(--largura-lateral),360px)!important;top:76px;bottom:76px;display:flex!important;flex-direction:column!important;}
html body .aplicacao.aplicacao .barra-lateral>.marca-lateral {flex:0 0 auto!important;min-height:0!important;padding:12px!important;}
html body .aplicacao.aplicacao .barra-lateral .marca-lateral .nome {min-height:0;}
html body .aplicacao.aplicacao .barra-lateral>.rm-fechar-menu {flex:0 0 auto!important;min-height:34px!important;margin:4px 12px 8px!important;padding:6px 10px!important;}
html body .aplicacao.aplicacao .barra-lateral>.rm-busca-modulos {flex:0 0 auto!important;height:38px!important;min-height:0!important;padding:8px 10px!important;}
html body .aplicacao.aplicacao .barra-lateral>.lateral-rolagem {flex:1 1 0!important;min-height:80px!important;overflow-y:auto!important;padding:4px 8px 12px!important;}
html body .aplicacao.aplicacao .barra-lateral .item-lateral {min-height:36px!important;box-sizing:border-box;}
.op-sidebar-titulo {padding:0 14px 4px;font-weight:500;color:var(--acento);flex:0 0 auto;}
html body .aplicacao .dm-paineis:not(.n1) {display:grid;gap:14px;align-items:start;}
html body .aplicacao .rm-janelas-barra {display:flex;gap:10px;flex-wrap:wrap;padding:12px 24px;}
html body .aplicacao .rm-janelas-barra label {display:flex;gap:8px;align-items:center;}
html body .aplicacao .rm-apresentacao-escolhas {display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;}
/* Native dialog lives in the browser top layer, including over full-screen elements. */
.op-guia-dialog {padding:0;border:1px solid var(--borda,#355446);border-radius:18px;background:var(--superficie,#102019);color:var(--texto,#edf4f0);width:min(680px,calc(100vw - 32px));max-width:calc(100vw - 32px);height:min(860px,calc(100dvh - 32px));max-height:calc(100dvh - 32px);margin:auto;box-sizing:border-box;overflow:hidden;font-family:"Segoe UI Variable","Segoe UI",system-ui,sans-serif;font-size:14px;}
.op-guia-dialog::backdrop {background:rgba(0,8,5,.7);backdrop-filter:blur(4px);}
.op-guia-dialog .op-guia {position:relative;inset:auto;width:100%;height:100%;max-width:none;padding:24px;border:0;border-radius:0;box-shadow:none;box-sizing:border-box;overflow:auto;font:inherit;}
.op-guia-dialog .op-guia h2 {font-size:22px;font-weight:500;line-height:1.25;}
.op-guia-dialog .op-guia h3 {font-size:16px;font-weight:500;}
.op-guia-dialog .op-guia button,.op-guia-dialog .op-guia select {font:inherit;min-height:36px;padding:8px 12px;border-radius:8px;border:1px solid var(--borda,#355446);background:var(--superficie-2,#172f23);color:inherit;box-shadow:none;text-shadow:none;cursor:pointer;}
.op-guia-dialog .op-guia button:disabled {opacity:.5;cursor:default;}
.op-guia-dialog .op-guia .op-link {background:transparent;border:0;padding-left:0;color:var(--acento,#7bdfa8);}
.op-guia-dialog .op-guia .dourado {background:var(--acento,#a9d7b3);color:var(--fundo,#102019);}
.op-guia-dialog .op-guia header {position:sticky;top:-24px;padding:14px 0;background:var(--superficie,#102019);z-index:2;}
.op-guia-tela {display:flex;gap:10px;flex-wrap:wrap;padding:14px 0;border-block:1px solid var(--borda,#355446);}
.op-guia-tela label {display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.op-guia-dialog.op-guia-ampliado {width:calc(100vw - 16px);height:calc(100dvh - 16px);max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);}
@media(max-width:700px){html body .aplicacao .topo {flex-wrap:wrap;}.op-guia-dialog .op-guia{padding:16px;}.op-guia-dialog .op-guia header{top:-16px;}html body .aplicacao .barra-lateral{top:110px!important;}.op-guia-tela {align-items:stretch;}.op-guia-tela button {flex:1;}html body .aplicacao .dm-paineis:not(.n1) {grid-template-columns:1fr!important;}}
html body .aplicacao .rm-grade-dividida>.rm-visores-acessos,html body .aplicacao .rm-grade-dividida>p {display:none;}
html body .aplicacao .rm-visor-compacto {height:100%;min-height:0;display:flex;flex-direction:column;padding:8px;box-sizing:border-box;overflow:hidden;}
html body .aplicacao .rm-visor-compacto>header {flex:0 0 auto;gap:5px;flex-wrap:wrap;margin-bottom:5px;}
html body .aplicacao .rm-visor-compacto>.rm-visor-barra:not(header),html body .aplicacao .rm-visor-compacto>.rm-comandos-toque {display:none!important;}
html body .aplicacao .rm-visor-compacto>.rm-visor-imagem {flex:1;min-height:60px;height:auto!important;width:100%;}
html body .aplicacao .rm-visor-compacto>.dm-nota {padding:4px 8px;margin:2px 0;}
html body .aplicacao .rm-visor-compacto .rm-visor-imagem p {text-align:center;padding:8px;}
html body .aplicacao .rm-grade-dividida .rm-visores-grade>div {min-height:0;}
/* Telas fluidas: conteúdo pode crescer, controles quebram linha e tabelas rolam. */
html body .aplicacao.aplicacao {min-width:0!important;}
html body .aplicacao .area-principal,html body .aplicacao .dm-painel {min-width:0;max-width:100%;box-sizing:border-box;}
html body .aplicacao .dm-painel {container-type:inline-size;overflow-wrap:anywhere;}
html body .aplicacao .dm-painel :is(.cartao,.card,fieldset,form,.dm-grade-2,.dm-grade-3,.abas-conteudo,.cm-conteudo) {min-width:0;max-width:100%;box-sizing:border-box;}
html body .aplicacao .dm-painel :is(input,select,textarea,button) {max-width:100%;box-sizing:border-box;}
html body .aplicacao .dm-painel :is(button,label,.dm-acoes,.dm-linha-entre) {white-space:normal;overflow-wrap:anywhere;}
html body .aplicacao .dm-painel :is(img,video,canvas,iframe) {max-width:100%;}
html body .aplicacao .dm-painel :is(pre,code) {white-space:pre-wrap;overflow-wrap:anywhere;max-width:100%;}
html body .aplicacao .dm-painel table {display:block;max-width:100%;overflow-x:auto;}
html body .aplicacao .dm-painel :is(.dm-acoes,.dm-linha-entre,.rm-visor-barra,.rm-central-barra,.cm-destino,.cm-busca,.ce-barra) {flex-wrap:wrap;}
html body .aplicacao .dm-painel :is(.dm-grade-2,.dm-grade-3) {grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));}
html body .aplicacao .dm-painel .abas-casca {display:grid;grid-template-columns:minmax(155px,210px) minmax(0,1fr);min-width:0;}
html body .aplicacao .dm-painel .cm-interno {grid-template-columns:minmax(155px,210px) minmax(0,1fr);}
html body .aplicacao .dm-painel .abas-coluna {min-width:0;max-width:100%;}
html body .aplicacao .rm-central-barra strong {flex:1 1 160px;}
html body .aplicacao .rm-fontes-navegador {display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px;}
html body .aplicacao .rm-fonte-info {font-size:12px;padding:4px 8px;opacity:.7;}
html body .aplicacao .rm-visor-compacto>.dm-caixa {padding:4px 8px;margin:2px 0;max-height:64px;overflow:auto;flex:0 0 auto;}
html body .aplicacao .rm-visor-compacto .dm-caixa p {margin:4px 0;}
html body .aplicacao .barra-lateral .marca-lateral {padding-bottom:8px!important;}
html body .aplicacao .op-sidebar-titulo {padding:8px 14px 14px;}
@container (max-width:720px){
 .dm-painel .abas-casca,.dm-painel .cm-interno,.dm-painel .op-layout-grade,.dm-painel .rm-home-colunas {display:flex!important;flex-direction:column!important;}
 .dm-painel .abas-coluna,.dm-painel .cm-sidebar {position:static!important;width:100%!important;max-height:none!important;flex-direction:row!important;flex-wrap:wrap!important;overflow:visible!important;border-right:0!important;}
 .dm-painel .abas-coluna button,.dm-painel .cm-sidebar button {flex:1 1 140px;min-width:0!important;}
 .dm-painel .abas-conteudo,.dm-painel .cm-conteudo {width:100%!important;}
 .dm-painel [class*="grade"] {grid-template-columns:minmax(0,1fr)!important;}
}
@media(max-width:760px){
 html body .aplicacao .topo {display:flex;flex-wrap:wrap;height:auto;gap:8px;padding:10px;}
 html body .aplicacao .ad-topo-direita {margin-left:0;gap:6px;flex:1 1 auto;justify-content:flex-end;flex-wrap:wrap;}
 html body .aplicacao .ad-titulo {flex:1 1 auto;min-width:0;}
 html body .aplicacao .ad-pilula {width:auto;min-width:0;padding:8px;}
 html body .aplicacao .ad-pilula span,html body .aplicacao .ad-pilula kbd {display:none;}
 html body .aplicacao .conteudo {width:100%!important;padding:10px!important;}
 html body .aplicacao .rm-home-colunas {grid-template-columns:minmax(0,1fr);}
 html body .aplicacao .barra-lateral {top:112px!important;bottom:72px!important;max-width:calc(100vw - 24px)!important;}
 html body .aplicacao .op-grupos {max-width:none;flex:0 1 auto;min-width:0;}
 html body .aplicacao .op-dock button {width:30px;}
 html body .aplicacao .op-fixados {padding-left:4px;min-width:12px;}
 html body .aplicacao .op-utilitarios {gap:0;padding-left:3px;}
 html body .aplicacao .op-dock {gap:4px;}
 html body .aplicacao .rm-airia-botao {bottom:76px!important;max-width:calc(100vw - 24px);}
 html body .aplicacao .rm-airia {width:calc(100vw - 16px)!important;max-height:calc(100dvh - 150px)!important;right:8px!important;}
 html body .aplicacao .rm-visor-imagem {height:clamp(140px,40dvh,480px);}
}
@media(max-height:560px){html body .aplicacao .barra-lateral {top:68px!important;bottom:68px!important;}html body .aplicacao .marca-lateral {display:none;}html body .aplicacao .rm-airia-botao {bottom:70px!important;}}
html body .aplicacao .dm-painel .rm-visor-imagem.original :is(img,video) {max-width:none;max-height:none;}
html body .aplicacao .topo,html body .aplicacao .ad-topo-direita {flex-wrap:wrap;min-width:0;}
html body .aplicacao.aplicacao .barra-lateral {max-width:calc((100vw - 24px) / var(--op-zoom,1))!important;}
html body .aplicacao.aplicacao .barra-lateral {container-type:inline-size;max-width:calc((100vw / var(--op-zoom,1)) - 24px)!important;}
html body .aplicacao .barra-lateral :is(.ar-nome,.ar-nome b,.ar-nome small,.rotulo-item) {min-width:0;white-space:normal;overflow-wrap:anywhere;}
@container(max-width:230px){.barra-lateral .marca-lateral {display:none!important;}}
html body .aplicacao .rm-grade-dividida>.rm-compartilhar-nota {display:block;padding:0 8px;}
/* Mesmos tokens, proporções e superfícies da Central Viva do Defender. */
html body .aplicacao .rm-central-visores {--cv-line:color-mix(in srgb,var(--texto) 12%,transparent);max-width:1700px;margin-inline:auto;padding:8px 4px 24px;color:var(--texto);font-family:inherit;}
html body .aplicacao .rm-central-barra {align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap;}
.rm-defender-titulo {flex:1 1 210px;min-width:0;}
html body .aplicacao .rm-defender-titulo>span {display:block;font-size:10px!important;font-weight:500!important;letter-spacing:1.8px;color:var(--texto-suave);margin-bottom:10px;}
html body .aplicacao .rm-defender-titulo h2 {margin:0;font-size:clamp(25px,2.3vw,39px)!important;line-height:1.17;letter-spacing:-1px;font-weight:500!important;}
html body .aplicacao .rm-defender-titulo h2 span {font:inherit!important;color:var(--acento);}
html body .aplicacao .rm-visor {border:1px solid var(--cv-line)!important;border-radius:14px;background:color-mix(in srgb,var(--superficie) 85%,var(--bg));overflow:hidden;}
html body .aplicacao .rm-central-visores :is(button,select) {box-shadow:none!important;text-shadow:none!important;animation:none!important;}
html body .aplicacao .rm-central-visores .botao {border-color:var(--cv-line);border-radius:8px;min-height:36px;font-weight:400!important;}
html body .aplicacao .rm-central-visores button:focus-visible {outline:2px solid var(--acento);outline-offset:3px;}
html body .aplicacao .rm-central-visores .campo {min-width:0;max-width:100%;}
@media(max-width:600px){html body .aplicacao .rm-central-barra {align-items:stretch;gap:8px;}html body .aplicacao .rm-defender-titulo {flex-basis:100%;margin-bottom:8px;}html body .aplicacao .rm-central-barra>button {flex:1 1 145px;white-space:normal;}.rm-central-barra label{flex:1 1 120px;}}
html body .aplicacao .rm-central-ferramentas {position:relative;flex:0 0 auto;}
.rm-central-ferramentas summary {cursor:pointer;padding:9px 12px;border:1px solid var(--cv-line);border-radius:8px;list-style:none;}
.rm-central-ferramentas>div {position:absolute;right:0;top:100%;z-index:15;display:grid;gap:8px;width:260px;padding:12px;background:var(--superficie);border:1px solid var(--cv-line);border-radius:10px;}
html body .aplicacao .rm-grade-dividida {height:calc(100dvh - 164px);min-height:220px;gap:8px;padding-bottom:0;}
html body .aplicacao .rm-grade-dividida>.rm-central-barra {flex:0 0 auto;position:relative;margin:0;padding:0;gap:10px;}
html body .aplicacao .rm-grade-dividida .rm-defender-titulo {flex:1 1 165px;}
html body .aplicacao .rm-grade-dividida .rm-defender-titulo h2 {font-size:25px!important;}
html body .aplicacao .rm-grade-dividida .rm-defender-titulo>span {margin-bottom:5px;}
html body .aplicacao .rm-grade-dividida>.rm-visores-grade {flex:1;min-height:0;align-items:stretch;gap:8px;}
html body .aplicacao .rm-grade-dividida .rm-visores-grade>div:not([hidden]) {height:100%;min-height:0;overflow:hidden;}
html body .aplicacao .rm-grade-dividida .rm-visor-compacto {height:100%;min-height:0!important;padding:6px;}
html body .aplicacao .rm-visor-compacto>.rm-visor-imagem {min-height:0;overflow:hidden;}
html body .aplicacao .rm-visor-compacto>.rm-visor-imagem :is(img,video) {min-height:0;max-height:100%;object-fit:contain;}
html body .aplicacao .rm-visor-compacto>header {gap:4px;flex-wrap:nowrap;overflow:auto;min-height:28px;}
html body .aplicacao .rm-visor-compacto>header button {padding:3px 6px;min-height:26px;font-size:11px!important;white-space:nowrap;}
html body .aplicacao .rm-visor-compacto>header strong {white-space:nowrap;font-size:12px!important;}
html body .aplicacao .rm-visor-comandos-abertos {position:fixed;z-index:65;inset:80px 24px 76px;width:auto;height:auto!important;display:block;overflow:auto;padding:18px;border-color:var(--acento)!important;}
html body .aplicacao .rm-visor-comandos-abertos>.rm-visor-barra:not(header) {display:flex!important;}
html body .aplicacao .rm-visor-comandos-abertos>.rm-comandos-toque {display:block!important;}
html body .aplicacao .rm-visor-comandos-abertos>.rm-visor-imagem {height:clamp(140px,32dvh,420px)!important;min-height:140px;}
@media(max-width:600px){html body .aplicacao .rm-grade-dividida {height:calc(100dvh - 152px);}html body .aplicacao .rm-grade-dividida .rm-central-barra>button{flex:0 0 auto;}html body .aplicacao .rm-visor-comandos-abertos {inset:68px 8px 72px;}}
html body .aplicacao.aplicacao .rm-defender-titulo h2 span {font-size:inherit!important;font-weight:inherit!important;}
html body .aplicacao.aplicacao .rm-defender-titulo>span {font-size:10px!important;}
html body .aplicacao .rm-grade-dividida>.rm-central-barra {margin-bottom:8px;}
html body .aplicacao .rm-grade-dividida>.rm-visores-acessos {display:none!important;}
html body .aplicacao .rm-central-visores {background:transparent;}