/* Dotti Studio — acabamento Linhas
 *
 * A estrutura continua sendo a do produto real. Esta camada só organiza a
 * casca em trilho global + navegação contextual e aplica o acabamento visual
 * aprovado: superfícies sólidas, divisores de 1px, vermelho reservado para
 * ação/seleção e uma luz de marca discreta na entrada das páginas.
 */

.dotti-shell {
  --void: #0f1012;
  --sup: #141619;
  --sup2: #1b1e22;
  --sup3: #24272c;
  --linha: rgba(235, 238, 243, .105);
  --linha2: rgba(235, 238, 243, .19);
  --texto: #f7f8fa;
  --texto2: #bac0c8;
  --texto3: #a8afb8;
  --marca: #ff2020;
  --marca-2: #d60000;
  --marca-txt: #ff6868;
  --sobre-marca: #fff;
  --azul: #70b7ff;
  --ok: #67d8a5;
  --amarelo: #f3bf6b;
  --erro: #ff746a;

  --linhas-canvas: #0f1012;
  --linhas-plano: #141619;
  --linhas-superficie: #1b1e22;
  --linhas-elevado: #24272c;
  --linhas-hover: #2d3137;
  --linhas-regra: rgba(235, 238, 243, .105);
  --linhas-regra-forte: rgba(235, 238, 243, .19);
  --linhas-vermelho: #ff2020;
  --linhas-vermelho-claro: #ff6868;
  --linhas-vermelho-suave: rgba(255, 32, 32, .09);
  --linhas-vermelho-sinal: rgba(255, 32, 32, .18);
  --linhas-brilho: rgba(255, 255, 255, .035);
  --linhas-foco: #ff4545;

  /* SUPERFICIES DE CONTROLE — TOKENS, PORQUE O LITERAL ESCURO QUEBRAVA O TEMA
     CLARO. Medido no app com `data-tema="claro"`: 9 de 10 campos de /videos,
     /config, /alertas e /ideacao ficavam a **1,03:1** — texto #17191d sobre
     fundo #141619 cravado, ou seja o que a pessoa digita fica INVISIVEL. O tema
     claro nao e' hipotese: sai de dois controles (o botao do topo e o menu da
     conta) e persiste em `dotti_tema` no localStorage.

     Os valores aqui sao os MESMOS literais que estavam nas regras, um a um, para
     o tema escuro aprovado nao mover um pixel. O que muda e' que agora existe o
     outro lado. */
  --linhas-campo-fundo: #141619;
  /* #838994 E NAO #737d8e: o valor herdado media 4,362:1 sobre o fundo do
     campo (#141619) e reprovava o piso de 4,5 por 0,138 — perto o bastante
     para passar despercebido no olho e reprovar em qualquer auditoria. Este
     mede 5,154:1. Calculado em WCAG 2.x, nao estimado. */
  --linhas-campo-marca: #838994;
  --linhas-botao-topo: #292c31;
  --linhas-botao-topo-hover: #30343a;
  --linhas-botao-base-hover: #24272c;
  --linhas-inerte-fundo: #1f2226;
  --linhas-inerte-borda: #30343a;
  --linhas-inerte-texto: #777e89;

  /* OS TRES RAIOS DO SIMULADOR APROVADO, e nao um so.
     A distincao entre 4 e 6 e HIERARQUIA, nao gosto: conteiner de DADO
     (faixa de resumo, painel de grafico, moldura de tabela, miniatura) usa 4;
     CONTROLE e cartao usam 6; o que de fato se SOBREPOE (popover, modal,
     drawer, dialogo) usa 8. O app real tinha um unico 7px, que e o valor de
     nenhum dos tres e apagava a distincao inteira.
     `--linhas-raio` CONTINUA sendo o raio de controle: os 17 usos que ja
     existiam passam a 6px sozinhos, sem renomear nada. */
  --linhas-raio-dado: 4px;
  --linhas-raio: 6px;
  --linhas-raio-sobreposicao: 8px;

  /* Alturas de controle do simulador. Existiam como numero solto espalhado;
     como token elas podem ser conferidas de uma vez e subir para 44px no
     toque, que e o piso de alvo declarado no PRODUCT.md. */
  --linhas-altura-controle: 40px;
  --linhas-altura-controle-compacta: 36px;
  --linhas-altura-controle-toque: 44px;

  /* O acento do botao primario. No simulador o primario NAO e vermelho
     preenchido: e grafite elevado com uma linha inferior de 2px neste tom. */
  --linhas-acento-botao: #ef3d32;
  --linhas-acento-botao-hover: #ff5147;
  --linhas-texto-tenue: #838994;

  /* UMA sombra para tudo que se sobrepoe. O simulador tem uma so
     (--lines-shadow-overlay) e a aplica a todo popover; aqui existiam tres
     valores diferentes -- 0 18px 34px no popover de produtos, 0 16px 42px na
     busca e 0 18px 44px no menu da conta -- entao tres coisas que flutuam na
     mesma altura projetavam sombras diferentes. */
  --linhas-sombra-sobreposicao: 0 24px 64px rgba(0, 0, 0, .5);

  --linhas-trilho: 68px;
  --linhas-contexto: 236px;

  min-width: 0;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: var(--linhas-trilho) var(--linhas-contexto) minmax(0, 1fr);
  align-items: start;
  color: var(--texto);
  background: var(--linhas-canvas);
  isolation: isolate;
}

:root[data-tema="claro"] .dotti-shell {
  --void: #f7f7f8;
  --sup: #fff;
  --sup2: #f2f3f4;
  --sup3: #e7e9eb;
  --linha: rgba(19, 23, 29, .11);
  --linha2: rgba(19, 23, 29, .2);
  --texto: #17191d;
  --texto2: #555c65;
  --texto3: #59616c;
  --marca: #d80000;
  --marca-2: #b40000;
  --marca-txt: #c60000;
  --azul: #065fd4;
  --ok: #167d46;
  --amarelo: #8b5b00;
  --erro: #bd241b;

  --linhas-canvas: #f7f7f8;
  --linhas-plano: #fff;
  --linhas-superficie: #f2f3f4;
  --linhas-elevado: #e7e9eb;
  --linhas-hover: #dfe2e5;
  --linhas-regra: rgba(19, 23, 29, .11);
  --linhas-regra-forte: rgba(19, 23, 29, .2);
  --linhas-vermelho: #d80000;
  --linhas-vermelho-claro: #bd241b;
  --linhas-vermelho-suave: rgba(216, 0, 0, .065);
  --linhas-vermelho-sinal: rgba(216, 0, 0, .13);
  --linhas-brilho: rgba(255, 255, 255, .68);
  --linhas-foco: #b40000;

  /* O tema claro e capacidade do app REAL — o simulador so tem o escuro.
     Os tokens novos sao DERIVADOS dos que ja existem aqui, nunca cores
     inventadas: o acento do botao segue o vermelho do tema e o texto tenue
     segue o apoio que o tema ja definiu. Os raios e alturas nao aparecem
     porque nao mudam com o tema. */
  --linhas-acento-botao: var(--linhas-vermelho);
  --linhas-acento-botao-hover: var(--linhas-vermelho-claro);
  --linhas-texto-tenue: var(--texto3);

  /* O outro lado das superficies de controle. Derivados da escala de planos que
     este bloco ja' declara — nada inventado:
       campo   = o plano (branco), como no escuro ele e' o plano (#141619)
       botao   = um degrau ACIMA do elevado, mesma relacao do escuro
       inerte  = o elevado, que aqui e' o cinza de desligado
     A marca do campo (placeholder) e' o unico valor proprio: #737d8e sobre
     branco da' 3,63:1, abaixo do piso de 4,5. #5f6875 mede 5,6:1. */
  --linhas-campo-fundo: var(--linhas-plano);
  --linhas-campo-marca: #5f6875;
  --linhas-botao-topo: #f4f5f6;
  --linhas-botao-topo-hover: #fafbfb;
  --linhas-botao-base-hover: #dfe2e5;
  --linhas-inerte-fundo: var(--linhas-elevado);
  --linhas-inerte-borda: #d3d7db;
  --linhas-inerte-texto: #6b7280;
}

.dotti-shell *,
.dotti-shell *::before,
.dotti-shell *::after { box-sizing: border-box; }

/* TODO <dialog> MODAL RECUPERA A CENTRALIZAÇÃO QUE O RESET APAGA.
   O navegador posiciona um modal com `position: fixed; inset: 0; margin: auto`:
   as quatro âncoras puxam para os quatro lados e a margem automática o deixa no
   meio. O `* { margin: 0 }` do estilo.css (linha 124) apaga essa margem, e o
   diálogo despenca para o canto superior esquerdo — foi o que aconteceu com o
   "Importar avatar da HeyGen", medido em 0,0 numa janela de 1377x996.

   A regra fica AQUI, e não só no diálogo do avatar, porque a causa é o reset:
   hoje existe um <dialog> na plataforma, e o próximo nasceria torto pelo mesmo
   motivo, sem ninguém suspeitar do `*`.

   `:modal` e não `[open]` de propósito: diálogo NÃO modal é posicionado no
   fluxo, e centralizá-lo o arrancaria do lugar onde foi escrito. */
dialog:modal { margin: auto; }

/* A CALHA DA BARRA DE ROLAGEM FICA SEMPRE RESERVADA.

   Sem isto, a largura util do app muda 15px conforme a tela rola ou nao — e a
   pessoa nota isso NAVEGANDO, nao numa tela parada: o titulo fica no lugar
   (esta' a esquerda) e o botao de acao, que e' alinhado a direita, PULA.

   Medido a 1512px: /cursos nao rola e o cabecalho mede 1128px; /videos,
   /painel-canal, /alertas, /planos, /config e /forum rolam e medem 1113px.
   Ou seja: a maioria das telas tem uma largura e uma minoria tem outra, e a
   diferenca aparece a cada troca de tela.

   `stable` reserva a calha nos dois casos. O preco e' 15px de folga a direita
   nas telas curtas — que e' exatamente o que faz as duas larguras virarem uma. */
html { scrollbar-gutter: stable; }

/* PLANO DESATIVADO — o estado tem de ser visivel na LISTA, nao so' dentro do
   cartao. `opacity` no cartao inteiro apagaria tambem o proprio selo que
   anuncia o estado, entao quem recua e' a borda e o fundo; o texto fica
   legivel porque um plano inativo continua sendo editavel (e' assim que se
   reativa). */
.dotti-shell .pl-cartao.inativo { position: relative; border-color: var(--linhas-regra); background: var(--linhas-canvas); }
.dotti-shell .pl-selo-inativo {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 3px 8px;
  border: 1px solid var(--linhas-regra-forte);
  border-radius: 999px;
  background: var(--linhas-inerte-fundo);
  color: var(--linhas-inerte-texto);
  font-family: var(--mono);
  font-size: 12px;
}

/* SELO DE BETA — discreto de proposito. Ele acompanha o titulo, entao nao pode
   competir com ele: mono, minusculo e no tom de apoio, com so' um fio de
   vermelho na borda para nao se ler como texto solto. `vertical-align` alinha
   pelo topo das minusculas do h1, e nao pela base, senao ele afunda. */
.dotti-shell h1 > .selo-beta {
  margin-inline-start: 10px;
  padding: 3px 8px;
  display: inline-block;
  vertical-align: middle;
  border: 1px solid var(--linhas-vermelho-sinal);
  border-radius: 999px;
  background: var(--linhas-vermelho-suave);
  color: var(--linhas-vermelho-claro);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1;
  cursor: help;
}

.dotti-shell ::selection {
  color: var(--texto);
  background: color-mix(in srgb, var(--marca) 34%, transparent);
}

.dotti-shell :is(button, a, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--linhas-foco);
  outline-offset: 2px;
}

/* O ANEL DE FOCO DE UM CAMPO COMPOSTO E DO INVOLUCRO, NAO DO CAMPO.
   Este era o "segundo retangulo" que o dono via na busca do log — e nao era
   borda: era o anel de foco, vermelho, desenhado em volta do INPUT, dentro de
   um involucro que ja tem borda propria. Duas molduras concentricas.

   Duas regras faziam isso, as duas mirando o campo direto:
     linhas.css              .dotti-shell :is(..., input, ...):focus-visible
     production-workspace.css .pw-page input:focus-visible
   e as duas venciam o `outline: 0` que cada involucro ja declara para o proprio
   campo (`.pw-search-field input` e (0,1,1); as de foco sao (0,3,0) e (0,2,1)).

   DEMOREI PARA ACHAR PORQUE MEDI ERRADO: eu lia `outlineWidth` com o campo SEM
   foco, e ali ele e mesmo 0. O anel so existe enquanto o campo esta focado, que
   e exatamente o instante em que a pessoa esta olhando para ele.

   A correcao devolve o foco a quem desenha o controle. Especificidade (0,3,1),
   acima das duas. */
.dotti-shell :is(.pw-search-field, .pw-select-field, .cw-search, .busca-campo)
  :is(input, textarea, select):focus-visible {
  outline: 0;
  box-shadow: none;
}

/* O `.pw-select-field` era o unico dos quatro sem tratamento de foco proprio —
   suprimir o anel dele sem dar nada em troca deixaria o filtro "Tipo" sem
   nenhum sinal de foco, que e regressao de acessibilidade. Ganha o MESMO
   tratamento do irmao `.pw-search-field` (production-workspace.css:322), nao um
   inventado: borda de foco mais um halo de 3px bem apagado. */
.dotti-shell .pw-select-field:focus-within {
  border-color: var(--accent-focus, var(--linhas-foco));
  box-shadow: 0 0 0 3px rgb(var(--red-rgb, 255 69 69) / .08);
}

.dotti-shell :is(input, textarea, select):focus-visible {
  border-color: color-mix(in srgb, var(--linhas-foco) 66%, var(--linhas-regra-forte));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--linhas-foco) 12%, transparent);
}

.pular-conteudo {
  position: fixed;
  top: 10px;
  left: 12px;
  z-index: 200;
  padding: 9px 12px;
  transform: translateY(-160%);
  border: 1px solid var(--linhas-vermelho);
  border-radius: var(--linhas-raio);
  background: var(--linhas-elevado);
  color: var(--texto);
  font-size: .76rem;
  font-weight: 680;
  text-decoration: none;
  transition: transform .16s ease-out;
}

.pular-conteudo:focus { transform: translateY(0); }
#conteudo-principal:focus { outline: none; }

/* ---------------------------------------------------------------- trilho */

.trilho-global {
  position: sticky;
  top: 0;
  z-index: 32;
  grid-column: 1;
  width: var(--linhas-trilho);
  height: 100dvh;
  min-height: 0;
  padding: 16px 8px 12px;
  display: grid;
  grid-template-rows: auto auto auto minmax(10px, 1fr) auto;
  gap: 14px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-right: 1px solid var(--linhas-regra);
  background:
    linear-gradient(180deg, rgba(255, 32, 32, .045), transparent 112px),
    var(--linhas-plano);
  box-shadow: inset -1px 0 var(--linhas-brilho);
  scrollbar-width: none;
}

.trilho-global::-webkit-scrollbar { display: none; }

.trilho-marca {
  width: 44px;
  height: 44px;
  margin-inline: auto;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: linear-gradient(145deg, #ff2929, #d30000);
  color: #fff;
  box-shadow: inset 0 1px rgba(255, 255, 255, .26), 0 8px 20px rgba(255, 32, 32, .14);
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

:root[data-tema="claro"] .trilho-marca {
  box-shadow: inset 0 1px rgba(255, 255, 255, .34), 0 7px 17px rgba(180, 0, 0, .14);
}

.trilho-produtos,
.trilho-atalhos,
.trilho-admin {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 6px;
}

.trilho-atalhos {
  padding-top: 10px;
  border-top: 1px solid var(--linhas-regra);
}

.trilho-espaco { min-height: 0; }
.trilho-admin { align-self: end; }

.trilho-botao {
  --cor-produto: var(--produto-cor, var(--linhas-vermelho-claro));
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 58px;
  padding: 5px 2px;
  display: grid;
  grid-template-rows: 29px auto;
  justify-items: center;
  align-items: center;
  gap: 4px;
  border: 0;
  border-radius: var(--linhas-raio);
  background: transparent;
  color: var(--texto3);
  cursor: pointer;
  text-align: center;
}

.trilho-botao:hover {
  background: color-mix(in srgb, var(--linhas-elevado) 78%, transparent);
  color: var(--texto);
}

.trilho-botao:is(.on, .ativo, [aria-current="page"], [aria-pressed="true"]) {
  color: var(--texto);
  background: linear-gradient(90deg, var(--linhas-vermelho-suave), transparent 88%);
  box-shadow: inset 1px 0 var(--linhas-vermelho);
}

.trilho-botao > :first-child {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--cor-produto) 45%, var(--linhas-regra-forte));
  border-radius: var(--linhas-raio);
  background: color-mix(in srgb, var(--cor-produto) 7%, var(--linhas-superficie));
  color: var(--cor-produto);
  font-size: 12px;
  font-weight: 760;
  line-height: 1;
}

.trilho-botao > :last-child:not(:first-child) {
  max-width: 52px;
  overflow: hidden;
  color: inherit;
  font-size: 12px;
  font-weight: 590;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trilho-botao:is(.on, .ativo, [aria-current="page"], [aria-pressed="true"]) > :first-child {
  background: color-mix(in srgb, var(--cor-produto) 11%, var(--linhas-elevado));
  box-shadow: inset 0 1px rgba(255, 255, 255, .07), 0 0 15px color-mix(in srgb, var(--cor-produto) 15%, transparent);
}

.trilho-botao[data-produto="canal"] { --cor-produto: #ff5147; }
.trilho-botao[data-produto="studio"] { --cor-produto: #9181ff; }
.trilho-botao[data-produto="robo"] { --cor-produto: #ff746a; }
.trilho-botao[data-produto="aprender"] { --cor-produto: #67d8a5; }
.trilho-botao[data-produto="admin"] { --cor-produto: #ff5147; }
.trilho-botao.atalho {
  --cor-produto: #9ba2ad;
  min-height: 50px;
  grid-template-rows: 29px;
  align-content: center;
}
.trilho-botao.admin { --cor-produto: #ff5147; }

.trilho-botao.admin,
.trilho-botao[data-produto="admin"] {
  min-height: 58px;
  border: 1px solid rgba(255, 81, 71, .22);
  background: rgba(255, 32, 32, .065);
}

.trilho-botao.admin:hover,
.trilho-botao[data-produto="admin"]:hover { border-color: rgba(255, 104, 94, .42); }

/* ----------------------------------------------------------- navegação */

.dotti-shell > .lateral,
.dotti-shell .lateral {
  position: sticky;
  top: 0;
  z-index: 30;
  grid-column: 2;
  width: var(--linhas-contexto);
  height: 100dvh;
  min-width: 0;
  min-height: 0;
  padding: 16px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-right: 1px solid var(--linhas-regra);
  background: var(--linhas-plano);
  box-shadow: inset -1px 0 var(--linhas-brilho), 9px 0 28px rgba(0, 0, 0, .06);
  scrollbar-color: color-mix(in srgb, var(--texto3) 48%, transparent) transparent;
  scrollbar-width: thin;
}

.dotti-shell .lateral > .marca { display: none; }

.contexto-seletor {
  position: relative;
  width: 100%;
  min-width: 0;
  margin-bottom: 8px;
  flex: 0 0 auto;
}

.contexto-identidade {
  width: 100%;
  min-width: 0;
  min-height: 58px;
  margin: 0;
  padding: 9px 10px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  border: 1px solid var(--linhas-regra-forte);
  border-radius: var(--linhas-raio);
  background: var(--linhas-superficie);
  box-shadow: inset 0 1px var(--linhas-brilho);
  color: var(--texto);
}

.contexto-identidade > :first-child {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--produto-cor, var(--linhas-vermelho-claro)) 42%, var(--linhas-regra-forte));
  border-radius: var(--linhas-raio);
  background: color-mix(in srgb, var(--produto-cor, var(--linhas-vermelho-claro)) 7%, var(--linhas-elevado));
  color: var(--produto-cor, var(--linhas-vermelho-claro));
  font-size: 12px;
  font-weight: 760;
}

.contexto-identidade > :nth-child(2) { min-width: 0; }
.contexto-identidade :is(strong, b) {
  display: block;
  overflow: hidden;
  color: var(--texto);
  font-size: .78rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.contexto-identidade > :nth-child(2) :is(small, span, p) {
  overflow: hidden;
  color: var(--texto3);
  font-size: 12px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contexto-gatilho {
  grid-template-columns: 36px minmax(0, 1fr) 18px;
  cursor: pointer;
  text-align: left;
}
.contexto-gatilho:hover,
.contexto-gatilho:focus-visible {
  border-color: color-mix(in srgb, var(--texto3) 58%, var(--linhas-regra-forte));
  background: color-mix(in srgb, var(--produto-cor, var(--linhas-vermelho-claro)) 4%, var(--linhas-superficie));
}
.contexto-gatilho:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--texto) 42%, transparent);
  outline-offset: 2px;
}
.contexto-chevron {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  color: var(--texto3);
  transition: transform 140ms ease-out, color 140ms ease-out;
}
.contexto-gatilho[aria-expanded="true"] .contexto-chevron {
  transform: rotate(180deg);
  color: var(--texto);
}
.contexto-produtos {
  position: absolute;
  z-index: 80;
  top: calc(100% + 8px);
  left: 0;
  width: 100%;
  padding: 4px 10px;
  overflow: hidden;
  border: 1px solid var(--linhas-regra-forte);
  border-radius: var(--linhas-raio);
  background: var(--linhas-plano);
  box-shadow: 0 18px 34px rgba(0, 0, 0, .32);
}
.contexto-produtos[hidden] { display: none; }
.contexto-produto-opcao {
  width: 100%;
  min-height: 54px;
  padding: 7px 4px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 10px;
  align-items: center;
  gap: 10px;
  border: 0;
  border-bottom: 1px solid var(--linhas-regra);
  border-radius: 0;
  background: transparent;
  color: var(--texto);
  cursor: pointer;
  text-align: left;
}
.contexto-produto-opcao:last-child { border-bottom: 0; }
.contexto-produto-opcao:hover,
.contexto-produto-opcao:focus-visible {
  background: color-mix(in srgb, var(--produto-cor, var(--linhas-vermelho-claro)) 6%, transparent);
}
.contexto-produto-opcao:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--produto-cor, var(--linhas-vermelho-claro)) 62%, transparent);
  outline-offset: -1px;
}
.contexto-opcao-marca {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--produto-cor) 72%, var(--linhas-regra-forte));
  border-radius: var(--linhas-raio);
  background: color-mix(in srgb, var(--produto-cor) 7%, var(--linhas-elevado));
  color: var(--produto-cor);
  font-size: 12.5px;
  font-weight: 760;
}
.contexto-produto-opcao strong {
  overflow: hidden;
  font-size: 14px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.contexto-opcao-atual {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--linhas-vermelho);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--linhas-vermelho) 12%, transparent);
}

.dotti-shell .grupo {
  padding: 13px 9px 6px;
  color: var(--texto3);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 630;
  letter-spacing: .11em;
}

.dotti-shell .item {
  min-width: 0;
  min-height: 42px;
  padding: 7px 9px;
  gap: 9px;
  border-radius: var(--linhas-raio);
  color: var(--texto2);
  font-size: .79rem;
  font-weight: 530;
}

.dotti-shell a.item { text-decoration: none; }
.dotti-shell .item:hover {
  color: var(--texto);
  background: var(--linhas-elevado);
}

.dotti-shell .item.on {
  color: var(--texto);
  background: linear-gradient(90deg, var(--linhas-vermelho-suave), rgba(255, 32, 32, .025) 72%, transparent);
  box-shadow: inset 1px 0 var(--linhas-vermelho);
  font-weight: 650;
}

.dotti-shell .item.on::before { display: none; }
.dotti-shell .item .ic { width: 25px; color: var(--texto3); text-align: center; }
.dotti-shell .item.on .ic { color: var(--linhas-vermelho-claro); }
.dotti-shell .item .tag { border-radius: 4px; background: transparent; }

.dotti-shell .lateral .rodape {
  margin-top: auto;
  padding-top: 10px;
  gap: 6px;
  border-top-color: var(--linhas-regra);
}

.dotti-shell .plano-card {
  padding: 10px;
  border-color: var(--linhas-regra);
  border-radius: var(--linhas-raio);
  background: var(--linhas-superficie);
}

/* ------------------------------------------------------------ conteúdo */

.app-miolo {
  grid-column: 3;
  min-width: 0;
  min-height: 100dvh;
  background:
    radial-gradient(ellipse 48% 230px at 78% -105px, rgba(255, 32, 32, .075), transparent 73%),
    var(--linhas-canvas);
}

/* No desktop os dois trilhos já estão expostos. O gatilho e o scrim pertencem
   somente ao drawer móvel; se aparecerem aqui, uma quarta célula é criada na
   grade e o conteúdo inteiro salta para a linha de baixo. */
.dotti-shell .menu-b,
.dotti-shell .menu-scrim { display: none; }

:root[data-tema="claro"] .app-miolo {
  background:
    radial-gradient(ellipse 48% 230px at 78% -105px, rgba(216, 0, 0, .045), transparent 73%),
    var(--linhas-canvas);
}

.dotti-shell .topo {
  z-index: 20;
  min-height: 52px;
  padding: 8px clamp(12px, 1.7vw, 24px);
  gap: 11px;
  border-bottom-color: color-mix(in srgb, var(--linhas-vermelho) 12%, var(--linhas-regra));
  background: color-mix(in srgb, var(--linhas-plano) 94%, transparent);
  box-shadow: inset 0 -1px var(--linhas-brilho);
  backdrop-filter: blur(12px);
}

.dotti-shell .busca { max-width: 34rem; }
.dotti-shell .busca input {
  min-height: 38px;
  padding-inline: 14px;
  border-color: var(--linhas-regra);
  border-radius: var(--linhas-raio);
  background: var(--linhas-superficie);
}

.dotti-shell .busca input:hover { border-color: var(--linhas-regra-forte); }

.dotti-shell .topo-b,
.dotti-shell .avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--linhas-raio);
  border-color: transparent;
  background: var(--linhas-superficie);
  color: var(--texto2);
}

.dotti-shell .topo-b:hover,
.dotti-shell .avatar:hover {
  border-color: var(--linhas-regra-forte);
  background: var(--linhas-elevado);
  color: var(--texto);
}

.dotti-shell .topo-n { border-color: var(--linhas-plano); background: var(--linhas-vermelho); }

.dotti-shell .conteudo {
  min-width: 0;
  padding: clamp(18px, 2.1vw, 34px) clamp(16px, 2.5vw, 40px) 64px;
  gap: clamp(18px, 1.55vw, 25px);
  background: transparent;
}

.dotti-shell .conteudo > * { max-width: 96rem; }

.dotti-shell .cabeca {
  position: relative;
  align-items: flex-end;
  padding-bottom: 15px;
  /* SEM REGUA DE LARGURA TOTAL. Ela nao existe no simulador: o cabecalho de
     pagina do produto Canal declara SO padding (`.rc-page .dr-page-header`,
     dotti-real-canal.css:63) e nenhuma folha lhe acrescenta borda. O que separa
     o cabecalho do conteudo la' e' o ESPACO mais a marca vermelha curta do
     `::after` logo abaixo — a "assinatura" do acabamento.

     Aqui a regua atravessava os 1113px e, somada a marca, fazia o topo parecer
     uma caixa fechada. Foi a queixa do dono, com as duas telas lado a lado.

     O `padding-bottom` FICA: sem regua, e' ele que segura o respiro, e o
     `::after` continua ancorado em `bottom: -1px` da mesma caixa. */
}

.dotti-shell .cabeca::after {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: clamp(76px, 14vw, 180px);
  height: 1px;
  background: linear-gradient(90deg, var(--linhas-vermelho), rgba(255, 32, 32, .24) 58%, transparent);
  box-shadow: 0 0 12px rgba(255, 32, 32, .2);
  content: "";
  pointer-events: none;
}

.dotti-shell .cabeca h1 {
  color: var(--texto);
  font-size: clamp(1.55rem, 2.3vw, 2.2rem);
  font-weight: 650;
  letter-spacing: -.025em;
  line-height: 1.08;
}

.dotti-shell .cabeca .sub { max-width: 72ch; color: var(--texto2); font-size: .82rem; }

/* O botão principal é escuro com uma linha vermelha. O vermelho preenchido
   fica reservado para confirmações realmente decisivas. */
.dotti-shell .btn {
  min-height: 38px;
  padding-inline: 13px;
  border-color: var(--linhas-regra-forte);
  border-radius: var(--linhas-raio);
  background: var(--linhas-elevado);
  color: var(--texto);
  box-shadow: none;
}

.dotti-shell .btn:hover:not(:disabled) {
  border-color: var(--linhas-regra-forte);
  background: var(--linhas-hover);
}

.dotti-shell .btn.pri {
  border-color: rgba(255, 104, 94, .4);
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), transparent 58%), var(--linhas-elevado);
  color: var(--texto);
  box-shadow: inset 0 -2px #ef3d32, inset 0 1px var(--linhas-brilho), 0 4px 12px rgba(0, 0, 0, .12);
}

.dotti-shell .btn.pri:hover:not(:disabled) {
  border-color: rgba(255, 104, 94, .62);
  background: linear-gradient(180deg, rgba(255, 81, 71, .09), transparent 66%), var(--linhas-hover);
  box-shadow: inset 0 -2px #ff5147, inset 0 1px var(--linhas-brilho), 0 6px 15px rgba(0, 0, 0, .16);
}

.dotti-shell .btn.sec { border-color: var(--linhas-regra-forte); background: var(--linhas-superficie); color: var(--texto2); }
.dotti-shell .btn.perigo { border-color: rgba(255, 116, 106, .34); background: rgba(180, 35, 24, .08); color: var(--erro); }
.dotti-shell .btn.perigo:hover:not(:disabled) { background: rgba(180, 35, 24, .15); color: #ff918b; }

.dotti-shell :is(.cartao, .tile, .rolagem, .plano-card) {
  border-color: var(--linhas-regra);
  border-radius: var(--linhas-raio);
  background: var(--linhas-plano);
  box-shadow: none;
}

.dotti-shell .tile {
  position: relative;
  min-width: 0;
  padding: 14px 15px;
}

.dotti-shell .tile .val { color: var(--texto); }
.dotti-shell .tile .rot { color: var(--texto2); letter-spacing: .1em; }

/* CAMPO COMPOSTO — a generica de input NAO entra aqui.
   Varios controles da plataforma sao um INVOLUCRO com borda, fundo e raio que
   abriga um icone MAIS o campo: a busca do log, o filtro "Tipo", a busca de
   Cursos e a busca global. Cada um ja neutraliza o campo interno com os
   valores certos (`.pw-search-field input { padding:0; border:0; background:
   transparent }`, e o `.pw-select-field select` com o padding assimetrico que
   abre espaco para a seta), byte a byte como a folha aprovada do simulador.

   SO QUE ESSAS NEUTRALIZACOES PERDIAM TODAS, por especificidade:
     .dotti-shell :is(input:not([type=checkbox]):not([type=radio]), ...)  (0,3,1)
     .pw-search-field input                                              (0,1,1)
   cada `:not([type=...])` conta como seletor de ATRIBUTO. Resultado na tela:
   caixa dentro de caixa, e — depois que a borda saiu — ainda 11px de vao entre
   a lupa e o texto, porque `padding-inline: 11px` continuava vencendo.

   A primeira tentativa foi empilhar uma regra mais especifica ainda. Estava
   errado: ela teria de repetir os valores de CADA involucro (o padding do
   select nao e o do input) e as duas listas envelheceriam separadas. O certo e
   a generica parar de reivindicar o que nao e dela — o `:not()` abaixo — e cada
   involucro voltar a mandar no proprio campo. */
.dotti-shell :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select):not(.pw-search-field *, .pw-select-field *, .cw-search *, .busca-campo *) {
  border-color: var(--linhas-regra-forte);
  border-radius: var(--linhas-raio);
  background-color: var(--linhas-superficie);
}

.dotti-shell :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--linhas-vermelho); }

.dotti-shell .chip { border-color: var(--linhas-regra-forte); background: var(--linhas-superficie); }
.dotti-shell .rolagem { scrollbar-color: #4a4f58 var(--linhas-canvas); }

/* --------------------------------------------------------------- fórum */

.forum-real { display: grid; gap: 14px; }
.forum-real-barra {
  min-height: 62px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: minmax(15rem, 1fr) minmax(10rem, auto) auto;
  gap: 10px;
  align-items: end;
  border: 1px solid var(--linhas-regra);
  border-radius: var(--linhas-raio);
  background: var(--linhas-plano);
}
.forum-real-barra label { display: grid; gap: 4px; color: var(--texto3); font-size: 12px; }
.forum-real-barra :is(input, select) { min-height: 38px; padding-inline: 11px; color: var(--texto); }
.forum-real-novo {
  padding: 16px;
  border: 1px solid rgba(255, 104, 94, .24);
  border-radius: var(--linhas-raio);
  background: linear-gradient(100deg, rgba(255, 32, 32, .045), transparent 32%), var(--linhas-plano);
}
.forum-real-novo[hidden] { display: none; }
.forum-real-novo label { display: grid; gap: 8px; }
.forum-real-novo textarea { width: 100%; min-height: 118px; margin-top: 5px; padding: 11px 12px; color: var(--texto); resize: vertical; }
.forum-real-novo-acoes { margin-top: 10px; display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.forum-real-novo-acoes > :first-child { flex: 1; }
.forum-real-lista {
  overflow: hidden;
  border: 1px solid var(--linhas-regra);
  border-radius: var(--linhas-raio);
  background: var(--linhas-plano);
}
.forum-real-topico {
  min-width: 0;
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) 44px;
  border-bottom: 1px solid var(--linhas-regra);
}
.forum-real-topico:last-of-type { border-bottom: 0; }
.forum-real-topico:hover { background: color-mix(in srgb, var(--linhas-superficie) 58%, transparent); }
.forum-real-votos,
.forum-real-abrir,
.forum-real-titulo,
.forum-real-meta button { border: 0; background: transparent; color: inherit; cursor: pointer; }
.forum-real-votos {
  min-height: 104px;
  padding: 16px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--linhas-regra);
  color: var(--texto2);
}
.forum-real-votos b { color: var(--texto); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.forum-real-votos span { color: var(--texto3); font-size: 12px; }
.forum-real-corpo { min-width: 0; padding: 15px 16px; }
.forum-real-fixada {
  display: inline-flex;
  margin-bottom: 5px;
  color: var(--marca-txt);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.forum-real-titulo { display: block; max-width: 100%; color: var(--texto); font-size: .88rem; font-weight: 690; text-align: left; }
.forum-real-corpo > p { margin-top: 4px; color: var(--texto2); font-size: .75rem; }
.forum-real-meta { margin-top: 9px; display: flex; gap: 9px; flex-wrap: wrap; color: var(--texto3); font-size: 12px; }
.forum-real-meta button { color: var(--texto2); font-weight: 630; }
.forum-real-abrir { color: var(--texto3); font-size: 1.05rem; }
.forum-real-abrir:hover { color: var(--marca-txt); }
.forum-real-mais { padding: 12px; display: flex; justify-content: center; border-top: 1px solid var(--linhas-regra); }

/* ---------------------------------------------------- supervisão do Robô */

.admin-real { min-width: 0; display: grid; gap: 14px; }
.admin-real-controles {
  min-width: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.admin-real-controles > label { width: min(28rem, 100%); display: grid; gap: 4px; color: var(--texto3); font-size: 12px; }
.admin-real-controles input { min-height: 40px; padding-inline: 12px; color: var(--texto); }
.admin-real-controles > div { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.admin-real-ao-vivo {
  min-height: 34px;
  padding: 6px 10px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(103, 216, 165, .3);
  border-radius: 999px;
  color: var(--ok);
  font-size: 12px;
  font-weight: 700;
}
.admin-real-ao-vivo i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.admin-real-resumo {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--linhas-regra);
  border-radius: var(--linhas-raio);
  background: var(--linhas-plano);
}
.admin-real-indicador { min-width: 0; min-height: 96px; padding: 15px 17px; display: grid; align-content: center; gap: 2px; border-right: 1px solid var(--linhas-regra); }
.admin-real-indicador:last-child { border-right: 0; }
.admin-real-indicador > span { color: var(--texto2); font-size: 12px; }
.admin-real-indicador > strong { color: var(--texto); font-size: 1.4rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.admin-real-indicador > small { color: var(--texto3); font-size: 12px; }
.admin-real-indicador.alerta { background: linear-gradient(110deg, rgba(243, 191, 107, .065), transparent); }
.admin-real-indicador.alerta strong { color: var(--amarelo); }
.admin-real-abas { display: flex; gap: 18px; border-bottom: 1px solid var(--linhas-regra); }
.admin-real-abas button { position: relative; min-height: 42px; border: 0; background: transparent; color: var(--texto3); font-size: .76rem; font-weight: 650; cursor: pointer; }
.admin-real-abas button.on { color: var(--texto); }
.admin-real-abas button.on::after { position: absolute; inset: auto 0 -1px; height: 2px; background: var(--linhas-vermelho); content: ""; }
.admin-real-corpo {
  min-width: 0;
  min-height: 610px;
  display: grid;
  grid-template-columns: minmax(230px, 290px) minmax(280px, 380px) minmax(340px, 1fr);
  overflow: hidden;
  border: 1px solid var(--linhas-regra);
  border-radius: var(--linhas-raio);
  background: var(--linhas-plano);
}
.admin-real-alunos,
.admin-real-producoes,
.admin-real-detalhe { min-width: 0; max-height: 72vh; overflow: auto; }
.admin-real-alunos,
.admin-real-producoes { border-right: 1px solid var(--linhas-regra); }
.admin-real-coluna-topo {
  position: sticky;
  top: 0;
  z-index: 2;
  min-height: 64px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid var(--linhas-regra);
  background: color-mix(in srgb, var(--linhas-plano) 94%, transparent);
  backdrop-filter: blur(12px);
}
.admin-real-coluna-topo h2 { font-size: .88rem; }
.admin-real-coluna-topo small { color: var(--texto3); font-size: 12px; }
.admin-real-aluno,
.admin-real-producao {
  position: relative;
  width: 100%;
  min-width: 0;
  border: 0;
  border-bottom: 1px solid var(--linhas-regra);
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.admin-real-aluno { min-height: 88px; padding: 12px 10px 12px 14px; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; align-items: start; }
.admin-real-aluno:hover,
.admin-real-producao:hover { background: var(--linhas-superficie); }
.admin-real-aluno.on,
.admin-real-producao.on { background: linear-gradient(90deg, rgba(255, 32, 32, .1), rgba(255, 32, 32, .025) 72%, transparent); box-shadow: inset 2px 0 var(--linhas-vermelho); }
.admin-real-avatar { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--linhas-regra-forte); border-radius: 8px; background: var(--linhas-elevado); color: var(--texto2); font-size: 12px; font-weight: 740; }
.admin-real-avatar.operacao { color: var(--marca-txt); }
.admin-real-aluno > span:nth-child(2) { min-width: 0; display: grid; gap: 1px; }
.admin-real-aluno b,
.admin-real-aluno small,
.admin-real-aluno em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-real-aluno b { font-size: .76rem; }
.admin-real-aluno small { color: var(--texto2); font-size: 12px; }
.admin-real-aluno em { color: var(--texto3); font-size: 12px; font-style: normal; }
.admin-real-presenca { grid-column: 2; justify-self: start; margin-top: 4px; color: var(--texto3); font-size: 12px; }
.admin-real-presenca.online { color: var(--ok); }
.admin-real-presenca.sem_maquina { color: var(--amarelo); }
.admin-real-producao { min-height: 150px; padding: 13px 15px; display: grid; gap: 6px; }
.admin-real-producao-topo,
.admin-real-producao-pe { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.admin-real-producao time,
.admin-real-producao small,
.admin-real-producao-pe { color: var(--texto3); font-size: 12px; }
.admin-real-producao > b,
.admin-real-producao > small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-real-producao > b { color: var(--texto); font-size: .77rem; }
.admin-real-progresso { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.admin-real-progresso::before { grid-column: 1; grid-row: 1; height: 4px; border-radius: 2px; background: var(--linhas-elevado); content: ""; }
.admin-real-progresso i { grid-column: 1; grid-row: 1; width: var(--progresso); max-width: 100%; height: 4px; border-radius: 2px; background: linear-gradient(90deg, #ef2020, #ff6868); }
.admin-real-progresso span { color: var(--texto2); font-size: 12px; font-variant-numeric: tabular-nums; }
.admin-real-mais { width: calc(100% - 24px); margin: 12px; }
.admin-real-selecione { min-height: 100%; padding: 28px; display: grid; place-content: center; gap: 5px; text-align: center; color: var(--texto2); }
.admin-real-selecione p { color: var(--texto3); font-size: 12px; }
.admin-real-detalhe-topo { min-height: 92px; padding: 15px 17px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--linhas-regra); }
.admin-real-detalhe-topo > div { min-width: 0; }
.admin-real-detalhe-topo small { color: var(--texto3); font-size: 12px; }
.admin-real-detalhe-topo h2 { margin-top: 5px; font-size: .92rem; line-height: 1.45; overflow-wrap: anywhere; }
.admin-real-detalhe-topo > .chip { flex-shrink: 0; }
.admin-real-identificacao { padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--linhas-regra); }
.admin-real-identificacao > div { min-width: 0; display: grid; gap: 4px; }
.admin-real-identificacao small { color: var(--texto3); font-size: 12px; }
.admin-real-identificacao code { color: var(--texto2); font: .73rem/1.5 var(--mono); overflow-wrap: anywhere; user-select: all; }
.admin-real-identificacao > button { flex-shrink: 0; }
.admin-real-medidas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--linhas-regra); }
.admin-real-medidas > div { min-width: 0; min-height: 78px; padding: 12px 14px; display: grid; align-content: center; gap: 2px; border-right: 1px solid var(--linhas-regra); border-bottom: 1px solid var(--linhas-regra); }
.admin-real-medidas > div:nth-child(3n) { border-right: 0; }
.admin-real-medidas small { color: var(--texto3); font-size: 12px; }
.admin-real-medidas b { font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.admin-real-medidas.admin-real-duracoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.admin-real-medidas.admin-real-duracoes > div { min-height: 112px; padding: 16px; gap: 7px; }
.admin-real-medidas.admin-real-duracoes > div:last-child { border-right: 0; }
.admin-real-duracoes b { font-size: 1.12rem; line-height: 1.25; font-weight: 650; letter-spacing: -.025em; }
.admin-real-duracoes .admin-real-medida-nota { font-size: 11px; line-height: 1.45; }
.admin-real-log-cabeca { padding: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--linhas-regra); }
.admin-real-log-cabeca > div { display: grid; gap: 3px; }
.admin-real-log-cabeca > button { flex-shrink: 0; }
.admin-real-log-cabeca h3 { font-size: .82rem; }
.admin-real-log-cabeca small { color: var(--texto3); font-size: 12px; }
.admin-real-log { padding: 0 16px 20px; }
.admin-real-log-navegacao { padding: 12px 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; border-bottom: 1px solid var(--linhas-regra); }
.admin-real-log-navegacao > div { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-real-log-faixa { color: var(--texto3); font-size: 12px; font-variant-numeric: tabular-nums; }
.admin-real-log-erro { margin: 12px 16px; color: var(--amarelo); font-size: 12px; }
.admin-real-evento { position: relative; min-height: 64px; padding: 14px 0 14px 14px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; border-bottom: 1px solid var(--linhas-regra); }
.admin-real-evento::before { position: absolute; top: 20px; left: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--texto3); content: ""; }
.admin-real-evento.warning::before { background: var(--amarelo); }
.admin-real-evento.error::before { background: var(--erro); }
.admin-real-evento.success::before { background: var(--ok); }
.admin-real-evento time { color: var(--texto3); font: .7rem/1.5 var(--mono); }
.admin-real-evento > span { color: var(--texto3); font-size: 12px; }
.admin-real-evento p { grid-column: 1 / -1; color: var(--texto); font-size: 12px; line-height: 1.65; overflow-wrap: anywhere; }
.admin-real-versoes { display: grid; }
.admin-real-versoes > div { min-height: 74px; padding: 11px 14px; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; border-bottom: 1px solid var(--linhas-regra); }
.admin-real-versoes > div > span:nth-child(2) { min-width: 0; display: grid; }
.admin-real-versoes b { font-size: 12px; }
.admin-real-versoes small { color: var(--texto3); font-size: 12px; }
.admin-real-versoes code { color: var(--texto2); font-size: 12px; }
.admin-real .chip.running,
.admin-real .chip.queued,
.admin-real .chip.pending { color: var(--marca-txt); border-color: rgba(255, 104, 94, .28); background: rgba(255, 32, 32, .06); }
.admin-real .chip.done { color: var(--ok); border-color: rgba(103, 216, 165, .28); background: rgba(103, 216, 165, .06); }
.admin-real .chip.erro { color: var(--amarelo); border-color: rgba(243, 191, 107, .3); background: rgba(243, 191, 107, .06); }

.dotti-shell ::-webkit-scrollbar { width: 10px; height: 10px; }
.dotti-shell ::-webkit-scrollbar-track { background: var(--linhas-canvas); }
.dotti-shell ::-webkit-scrollbar-thumb {
  border: 2px solid var(--linhas-canvas);
  border-radius: 6px;
  background: #4a4f58;
}

:root[data-tema="claro"] .dotti-shell ::-webkit-scrollbar-thumb { background: #b8bdc3; }

/* ------------------------------------------------------------ responsivo */

/* Com os dois trilhos laterais visiveis, o painel perde 304 px de largura
   util. As tres colunas deixam de caber antes do breakpoint de telefone; a
   leitura vira uma pilha continua enquanto a navegacao desktop permanece. */
@media (max-width: 1215px) {
  .admin-real-corpo { min-height: 0; grid-template-columns: minmax(0, 1fr); overflow: visible; }
  .admin-real-alunos,
  .admin-real-producoes,
  .admin-real-detalhe { max-height: none; border-right: 0; border-bottom: 1px solid var(--linhas-regra); }
  .admin-real-detalhe { border-bottom: 0; }
  .admin-real-alunos { max-height: 280px; }
  .admin-real-producoes { max-height: 360px; }
  .admin-real-detalhe { max-height: 78vh; }
}

@media (max-width: 900px) {
  /* A porta de entrada nasceu antes da casca em trilhos. No CSS original, a
     regra que escondia a vitrine vinha antes do `display:flex` da própria
     vitrine e perdia pela ordem da folha: em telefone, o formulário começava
     depois de uma tela inteira de apresentação. A especificidade abaixo fecha
     a regra no filho exato e mantém login/cadastro como primeira tela. */
  .porta > .vitrine { display: none; }
  .porta > .formulario {
    min-height: 100dvh;
    padding: 32px 24px max(32px, env(safe-area-inset-bottom));
  }

  .dotti-shell {
    display: block;
    min-width: 0;
  }

  /* O TRILHO DESLIZA JUNTO DA GAVETA — ele NAO some mais.
     `display: none` aqui levava junto os OITO destinos que so' existem nele:
     Forum, Feed e Chat (DOTTI_COMUNIDADE) e Auditoria, Aprovacoes, Alunos,
     Planos e Menu (DOTTI_ADMIN). A gaveta que o substitui e' a barra de
     CONTEXTO, e ela e' escopada por contexto (`itensDaLateral` filtra por
     `contexto.telas`), entao nunca poderia conter esses oito. Medido a 845px:
     o botao ADM e o Forum existiam no DOM, `display: grid`, `visible`,
     `opacity: 1` — e mediam 0x0.

     PRECISAO, porque exagerar aqui enganaria quem vier depois: Comunidade
     ainda tinha portas INDIRETAS (o dock abre /chat, notificacao leva a /post,
     a busca global devolve publicacao — e /chat e /post TROCAM o contexto,
     entao a gaveta passa a listar os tres). Quem ficava sem porta
     INCONDICIONAL era a Administracao: as cinco telas so' tinham a entrada
     condicional de `notificacoes.js:65`, que depende de existir alguem na fila
     de aprovacao. As entradas DIRETAS das duas areas, essas sim, sumiam.

     Deslizar o trilho junto e' o conserto que NAO duplica lista nenhuma: quem
     monta os oito destinos continua sendo `dottiTrilhoGlobal`, um lugar so'.
     Copia-los para dentro da gaveta criaria duas listas que divergem na
     primeira tela nova — o defeito que este repo ja' pagou em outros pontos. */
  .trilho-global {
    position: fixed;
    inset: 0 auto 0 0;
    /* 61 e nao 60: o trilho ENCOSTA na lateral, e quem fica por cima na junta
       tem de ser ele, senao a sombra da lateral cai sobre os icones. */
    z-index: 61;
    height: 100dvh;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    transform: translateX(-103%);
    visibility: hidden;
    transition: transform .2s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .2s;
  }

  /* `:has()` e nao um irmao: o trilho vem ANTES da lateral no DOM, e combinador
     de irmao nao seleciona para tras. A classe `aberta` continua sendo posta
     pelo mesmo botao de menu de sempre — nenhum JS novo. */
  .dotti-shell:has(> .lateral.aberta) > .trilho-global {
    transform: translateX(0);
    visibility: visible;
    transition: transform .2s cubic-bezier(.2, .8, .2, 1), visibility 0s;
  }

  .dotti-shell > .lateral,
  .dotti-shell .lateral {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 60;
    /* ABRE A' DIREITA DO TRILHO, e a largura desconta os 68px dele: sem o
       desconto, 68 + min(20rem, 90vw) estoura a janela num telefone de 375px
       (68 + 337 = 405). Com ele, 68 + 269 = 337 e sobra margem. */
    left: var(--linhas-trilho);
    width: min(20rem, calc(90vw - var(--linhas-trilho)));
    height: 100dvh;
    padding: 14px 11px max(12px, env(safe-area-inset-bottom));
    transform: translateX(-103%);
    visibility: hidden;
    transition: transform .2s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .2s;
    box-shadow: none;
  }

  .dotti-shell .lateral.aberta {
    transform: translateX(0);
    visibility: visible;
    transition: transform .2s cubic-bezier(.2, .8, .2, 1), visibility 0s;
    box-shadow: 16px 0 46px rgba(0, 0, 0, .42);
  }

  .dotti-shell .menu-scrim {
    display: block;
    position: fixed;
    inset: 0 0 0 calc(var(--linhas-trilho) + min(20rem, calc(90vw - var(--linhas-trilho))));
    z-index: 55;
    width: auto;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(3, 4, 6, .68);
    cursor: pointer;
  }

  .dotti-shell .menu-scrim[hidden] { display: none; }

  .dotti-shell .lateral > .marca {
    min-height: 48px;
    padding: 4px 8px 12px;
    display: flex;
  }

  .app-miolo { min-width: 0; min-height: 100dvh; }
  .dotti-shell .menu-b { display: grid; }
  .dotti-shell .topo { min-height: 56px; padding: 8px 10px; }
  .dotti-shell .topo .dir { gap: 4px; }
  .dotti-shell .topo-b,
  .dotti-shell .avatar { width: 40px; height: 40px; }
  .dotti-shell .conteudo { padding: 18px 14px calc(56px + env(safe-area-inset-bottom)); }
  .dotti-shell .conteudo .btn { min-height: 44px; }
  .dotti-shell .item { min-height: 44px; }
  .forum-real-barra { grid-template-columns: 1fr; align-items: stretch; }
  .forum-real-barra .btn { width: 100%; }
  .admin-real-controles { align-items: stretch; flex-direction: column; }
  .admin-real-controles > label { width: 100%; }
  .admin-real-controles > div { justify-content: flex-start; }
  .admin-real-resumo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-real-indicador:nth-child(2) { border-right: 0; }
  .admin-real-indicador:nth-child(-n+2) { border-bottom: 1px solid var(--linhas-regra); }
}

@media (max-width: 620px) {
  .dotti-shell .busca { min-width: 0; }
  .dotti-shell .busca input { min-width: 0; }
  .dotti-shell .cabeca { align-items: flex-start; }
  .dotti-shell .cabeca .acoes { width: 100%; margin-left: 0; }
  .dotti-shell .cabeca .acoes .btn { flex: 1 1 auto; }
  .forum-real-topico { grid-template-columns: 58px minmax(0, 1fr); }
  .forum-real-abrir { display: none; }
  .forum-real-corpo { padding-inline: 12px; }
  .admin-real-controles > div .btn { flex: 1 1 auto; }
  .admin-real-medidas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-real-medidas > div:nth-child(3n) { border-right: 1px solid var(--linhas-regra); }
  .admin-real-medidas > div:nth-child(2n) { border-right: 0; }
}

@media (pointer: coarse) {
  .trilho-botao { min-height: 60px; }
  .dotti-shell :is(.btn, .topo-b, .avatar, .item) { min-height: 44px; }
  .forum-real :is(input, select, button, [role="button"]),
  .admin-real-abas button { min-height: 44px; }
  .forum-real :is(button, [role="button"]),
  .admin-real-abas button { min-width: 44px; }
  .forum-real-meta button { padding: 8px 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .dotti-shell *,
  .dotti-shell *::before,
  .dotti-shell *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Esperas assíncronas preservam o texto da ação. O indicador só aparece nas
   esperas realmente perceptíveis; cliques rápidos continuam parecendo
   instantâneos e nunca viram uma página intermediária. */
.dotti-shell .btn.is-busy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

.dotti-shell .btn.is-busy::after {
  content: '';
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  opacity: .72;
  animation: dotti-busy-spin .72s linear infinite;
}

@keyframes dotti-busy-spin { to { transform: rotate(1turn); } }

@media (forced-colors: active) {
  .dotti-shell { background: Canvas; }
  .trilho-global,
  .dotti-shell .lateral,
  .app-miolo,
  .dotti-shell .topo { background: Canvas; box-shadow: none; }
  .trilho-botao:is(.on, .ativo, [aria-current="page"], [aria-pressed="true"]),
  .dotti-shell .item.on { outline: 2px solid Highlight; outline-offset: -2px; box-shadow: none; }
  .dotti-shell .cabeca::after { background: Highlight; box-shadow: none; }
}

/* ======================================================================
   Paridade com o simulador aprovado · casca, escala e Painel
   ====================================================================== */

.pagina-real {
  position: relative;
  isolation: isolate;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background:
    radial-gradient(ellipse 58% 300px at 76% -120px, rgba(255, 81, 71, .13), transparent 70%),
    linear-gradient(180deg, rgba(27, 28, 32, .78) 0, rgba(18, 20, 23, 0) 390px);
}

.pagina-real::before {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 40px;
  left: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 32, 32, .62), rgba(255, 255, 255, .13), transparent);
  content: '';
}

.produto-studio .pagina-real {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.produto-studio .pagina-real > .cabeca { padding: 0 0 24px; }
/* A REGRA QUE ESCONDIA O `::before` DO CABECALHO SAIU — ela nasceu como no-op.
   Quando foi escrita, `.cabeca::before` nao existia em folha nenhuma (sem
   `content`, o pseudo nem e gerado), entao ela nao desligava nada. Agora que o
   Estudio ganhou a marca VERTICAL do simulador (dotti-real-studio.css:46-54),
   esta linha passaria a apaga-la — de no-op a defeito, sem ninguem tocar nela. */

.dotti-shell .topo {
  min-height: 42px;
  padding: 8px 34px;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 32, 32, .14);
  background: var(--linhas-plano);
  box-shadow: inset 0 -1px var(--linhas-brilho);
}

.topo-contexto {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--texto2);
  font: 650 12px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.topo-contexto i {
  width: 5px;
  height: 5px;
  display: block;
  transform: rotate(45deg);
  border-radius: 1px;
  background: currentColor;
  color: var(--linhas-vermelho-claro);
  font-style: normal;
  text-shadow: 0 0 10px rgba(255, 32, 32, .55);
}

.topo-estado { color: var(--texto3); font-size: 12px; }

.utilidades-conta {
  position: relative;
  margin-top: auto;
  padding: 7px 0 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  border-top: 1px solid var(--linhas-regra);
}

.utilidades-conta > .topo-b,
.utilidades-conta > .av-caixa > .av-gatilho,
.utilidades-conta > .busca,
.utilidades-conta > .busca > .busca-gatilho {
  width: 100%;
  min-width: 0;
  height: 38px;
}

.utilidades-conta > .topo-b,
.utilidades-conta > .av-caixa > .av-gatilho,
.utilidades-conta > .busca > .busca-gatilho {
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--linhas-raio);
  background: transparent;
}

.utilidades-conta > .topo-b:hover,
.utilidades-conta > .av-caixa > .av-gatilho:hover,
.utilidades-conta > .busca > .busca-gatilho:hover,
.utilidades-conta > .busca > .busca-gatilho[aria-expanded="true"] {
  border-color: var(--linhas-regra-forte);
  background: var(--linhas-superficie);
}

.utilidades-conta .avatar { width: 30px; height: 30px; }
.utilidades-conta .av-menu { inset: auto 0 calc(100% + 8px) auto; }

/* A busca aprovada é um botão no rodapé e um painel completo acima dele. */
.utilidades-conta .busca { position: relative; max-width: none; }
.busca-gatilho { color: var(--texto3); cursor: pointer; }
.busca-gatilho svg { display: block; }
.busca-popover {
  position: absolute;
  z-index: 72;
  bottom: calc(100% + 15px);
  left: 0;
  width: min(330px, calc(100vw - 28px));
  padding: 14px;
  overflow: hidden;
  border: 1px solid var(--linhas-regra-forte);
  border-radius: 8px;
  background: var(--linhas-plano);
  color: var(--texto);
  box-shadow: 0 16px 42px rgba(0, 0, 0, .44);
}
.busca-popover[hidden] { display: none; }
.busca-popover header { display: grid; gap: 4px; margin-bottom: 12px; }
.busca-popover header strong { font-size: 14px; font-weight: 700; }
.busca-popover header small { color: var(--texto3); font-size: 12px; line-height: 1.35; }
.busca-campo {
  min-height: 42px;
  padding: 0 12px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid var(--linhas-regra-forte);
  border-radius: 6px;
  color: var(--texto3);
  background: var(--linhas-canvas);
}
.busca-campo:focus-within {
  border-color: var(--linhas-vermelho);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--linhas-vermelho) 25%, transparent);
}
.busca-campo input {
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--texto);
  caret-color: var(--linhas-vermelho);
  font: inherit;
  font-size: 14px;
}
.busca-campo input::placeholder { color: var(--texto3); opacity: 1; }
.busca-resultados { margin: 8px -14px -14px; }
.busca-resultados:empty { display: none; }
.busca-item {
  width: 100%;
  min-height: 56px;
  padding: 8px 14px;
  display: grid;
  align-content: center;
  gap: 3px;
  border: 0;
  border-top: 1px solid var(--linhas-regra);
  border-radius: 0;
  background: transparent;
  color: var(--texto);
  cursor: pointer;
  text-align: left;
}
.busca-item:hover,
.busca-item:focus-visible { background: var(--linhas-superficie); }
.busca-item strong {
  overflow: hidden;
  font-size: 13px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.busca-item small { color: var(--texto3); font-size: 12px; }
.busca-vazio { padding: 14px; border-top: 1px solid var(--linhas-regra); color: var(--texto3); font-size: 12px; }
.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.dotti-shell .conteudo {
  padding: 34px 40px 64px;
  gap: 18px;
}

.dotti-shell .conteudo > * { max-width: 1500px; margin-inline: auto; }

.dotti-shell .cabeca {
  min-width: 0;
  align-items: flex-start;
  gap: 28px;
  padding-bottom: 24px;
}

.dotti-shell .cabeca > div:first-child { min-width: 0; max-width: 76ch; }
.dotti-shell .cabeca h1 {
  font-size: clamp(28px, 2.7vw, 40px);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.dotti-shell .cabeca .sub { margin-top: 8px; color: var(--texto2); font-size: 14px; }
.dotti-shell .cabeca .acoes { align-items: center; justify-content: flex-end; gap: 9px; }

.pn2 { gap: 14px; font-size: 14px; line-height: 1.5; }
.pn2-cabeca-acoes { display: flex; align-items: center; gap: 9px; }
.pn2-periodos {
  min-height: 40px;
  padding: 0;
  display: flex;
  align-items: stretch;
  border: 1px solid var(--linhas-regra);
  border-radius: 6px;
  background: var(--linhas-plano);
}
.pn2-periodos button {
  min-width: 48px;
  min-height: 40px;
  padding: 0 11px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--texto2);
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}
.pn2-periodos button:hover { color: var(--texto); background: var(--linhas-superficie); }
.pn2-periodos button.on {
  color: var(--texto);
  background: var(--linhas-superficie);
  box-shadow: inset 0 -2px var(--linhas-vermelho);
}

.pn2-nota {
  min-height: 72px;
  padding: 13px 0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-block: 1px solid var(--linhas-regra);
  border-inline: 0;
  border-radius: 6px;
  background: var(--linhas-plano);
}
.pn2-nota > span { display: flex; margin-top: 1px; color: var(--texto2); }
.pn2-nota > span svg { width: 16px; height: 16px; }
.pn2-nota > div { min-width: 0; flex: 1 1 auto; }
.pn2-nota strong { display: block; font-size: 14px; }
.pn2-nota p { margin-top: 2px; color: var(--texto2); font-size: 13px; line-height: 1.55; }
.pn2-nota .pn2-nota-acao {
  min-height: 36px;
  padding-inline: 12px;
  align-self: flex-start;
  margin-inline-start: auto;
  font-size: 12px;
}

.pn2-resumo {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--linhas-raio-dado);
  background: var(--linhas-regra);
  box-shadow: none;
}
.pn2-kpi {
  min-width: 0;
  min-height: 142px;
  padding: 17px 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  background: #17191d;
  text-align: center;
}
.pn2-kpi.enfase { background: #17191d; }
.pn2-kpi dt {
  width: 100%;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--texto2);
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
}
.pn2-kpi dt::before {
  width: 2px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 0;
  background: #ff4d4d;
  box-shadow: none;
  content: '';
}
.pn2-kpi:nth-child(3n + 2) dt::before { background: #d9dde3; }
.pn2-kpi:nth-child(3n) dt::before { background: #7e8794; }
.pn2-kpi dd {
  width: 100%;
  min-width: 0;
  margin-top: 6px;
  color: var(--texto);
  font-family: var(--mono);
  font-size: 21px;
  font-weight: 680;
  line-height: 1.5;
  letter-spacing: -.02em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.pn2-kpi dd small {
  max-width: 17ch;
  display: block;
  margin: 2px auto 0;
  color: var(--texto2);
  font-family: var(--corpo);
  font-size: 12px;
  font-weight: 450;
  line-height: 1.35;
}

.pn2-grafico {
  padding: 16px;
  display: grid;
  gap: 14px;
  border: 1px solid var(--linhas-regra-forte);
  border-top-color: rgba(255, 32, 32, .58);
  border-radius: 6px;
  background: var(--linhas-plano);
}
.pn2-grafico > header,
.pn2-grafico > footer { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.pn2-grafico > header { padding-bottom: 12px; border-bottom: 1px solid var(--linhas-regra); }
.pn2-grafico h2,
.pn2-recentes h2 { font-size: 17px; font-weight: 650; letter-spacing: -.02em; }
.pn2-grafico header p,
.pn2-recentes header p { margin-top: 3px; color: var(--texto2); font-size: 12px; }
.pn2-barras { display: grid; }
.pn2-barra {
  min-width: 0;
  padding: 10px 0;
  display: grid;
  grid-template-columns: minmax(250px, 290px) minmax(120px, 1fr) 84px;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--linhas-regra);
}
.pn2-barra:last-child { border-bottom: 0; }
.pn2-barra-canal { min-width: 0; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: center; }
.pn2-barra-canal > :first-child { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--linhas-regra-forte); border-radius: 6px; background: var(--linhas-superficie); object-fit: cover; color: var(--texto2); font-size: 12px; font-weight: 700; }
.pn2-barra-canal > span { min-width: 0; }
.pn2-barra-canal strong,
.pn2-barra-canal small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn2-barra-canal strong { font-size: 13px; }
.pn2-barra-canal small { margin-top: 2px; color: var(--texto2); font-size: 12px; }
.pn2-trilho { height: 4px; overflow: hidden; border-radius: 1px; background: #30343a; }
.pn2-trilho i { display: block; width: var(--pn2-largura); height: 100%; background: var(--linhas-vermelho); }
.pn2-barra-valor { justify-self: end; font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; }
.pn2-grafico > footer { padding-top: 12px; border-top: 1px solid var(--linhas-regra); color: var(--texto2); font-size: 12px; }

.pn2-tabela {
  min-width: 0;
  overflow-x: auto;
  border: 1px solid var(--linhas-regra-forte);
  border-radius: 6px;
  background: var(--linhas-plano);
}
.pn2-tabela table { width: 100%; min-width: 1120px; border-collapse: collapse; }
.pn2-tabela th,
.pn2-tabela td { padding: 10px; border-bottom: 1px solid var(--linhas-regra); text-align: right; vertical-align: middle; }
.pn2-tabela thead th {
  background: var(--linhas-superficie);
  color: var(--texto2);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: none;
  white-space: nowrap;
  box-shadow: inset 0 -1px rgba(255, 32, 32, .36);
}
.pn2-tabela th:nth-child(2),
.pn2-tabela td:nth-child(2) { text-align: left; }
.pn2-tabela tbody tr:last-child :is(th, td) { border-bottom: 0; }
.pn2-tabela tbody tr:hover { background: var(--linhas-superficie); }
.pn2-tabela tbody td { color: var(--texto2); font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; }
.pn2-tabela tbody td.forte { color: var(--texto); font-weight: 680; }
.pn2-tabela .pn2-base { min-width: 160px; white-space: normal; }
.pn2-pos { width: 60px; text-align: left !important; }
.pn2-pos > span { display: block; color: var(--texto); font-family: var(--display); font-size: 19px; font-weight: 680; }
.pn2-pos .mov { display: block; margin-top: 2px; }
.pn2-canal { min-width: 190px; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: center; border: 0; background: transparent; color: var(--texto); text-align: left; cursor: pointer; }
.pn2-canal > :first-child { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--linhas-regra-forte); border-radius: 6px; background: var(--linhas-superficie); object-fit: cover; color: var(--texto2); font-size: 12px; font-weight: 700; }
.pn2-canal b,
.pn2-canal i { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn2-canal b { font-size: 13px; }
.pn2-canal i { margin-top: 2px; color: var(--texto2); font-size: 12px; font-style: normal; font-weight: 400; }
.pn2-rodape { color: var(--texto2); font-size: 12px; }

.pn2-recentes { padding-top: 12px; display: grid; gap: 12px; }
.pn2-videos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-block: 1px solid var(--linhas-regra); }
.pn2-video { min-width: 0; padding: 13px; display: grid; align-content: start; gap: 5px; border-right: 1px solid var(--linhas-regra); color: inherit; text-decoration: none; }
.pn2-video:last-child { border-right: 0; }
.pn2-video:hover { background: var(--linhas-superficie); }
.pn2-capa { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; background: var(--linhas-superficie); }
.pn2-capa img { width: 100%; height: 100%; object-fit: cover; }
.pn2-capa span { position: absolute; right: 4px; bottom: 4px; padding: 1px 4px; border-radius: 3px; background: rgba(0, 0, 0, .82); color: #fff; font: 10px/1.4 var(--mono); }
.pn2-video > strong { min-height: 2.7em; overflow: hidden; font-size: 12px; line-height: 1.35; }
.pn2-video > small,
.pn2-video > p { color: var(--texto2); font-size: 12px; line-height: 1.35; }

@media (max-width: 1320px) {
  .pn2-videos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pn2-video:nth-child(3n) { border-right: 0; }
}

@media (max-width: 900px) {
  .dotti-shell .topo { min-height: 56px; padding: 8px 14px; }
  .topo-contexto { margin-right: auto; }
  .topo-estado { display: none; }
  .utilidades-conta { margin-top: 12px; }
  .utilidades-conta .busca:focus-within input,
  .utilidades-conta .busca-painel { left: 0; width: min(330px, calc(90vw - 24px)); }
  .dotti-shell .conteudo { padding: 24px 20px calc(64px + env(safe-area-inset-bottom)); }
  .pn2-nota { display: grid; grid-template-columns: 20px minmax(0, 1fr); }
  .pn2-nota .btn {
    width: auto;
    grid-column: 1 / -1;
    justify-self: start;
    margin-inline-start: 0;
  }
  .pn2-barra { grid-template-columns: minmax(0, 1fr) 74px; }
  .pn2-trilho { grid-column: 1 / -1; grid-row: 2; }
  .pn2-grafico > footer { flex-direction: column; }
}

@media (max-width: 620px) {
  .dotti-shell .conteudo { padding-inline: 14px; }
  .dotti-shell .cabeca h1 { font-size: 28px; }
  .pn2-cabeca-acoes {
    width: 100%;
    align-items: center;
    flex-flow: row wrap;
  }
  .pn2-periodos { width: 100%; flex: 0 0 100%; }
  .pn2-periodos button { min-width: 0; min-height: 44px; flex: 1; }
  .pn2-cabeca-acoes > .btn { width: auto; }
  .pn2-videos { grid-template-columns: 1fr; }
  .pn2-video { border-right: 0; border-bottom: 1px solid var(--linhas-regra); }
  .pn2-video:last-child { border-bottom: 0; }
}

/* O resumo segue a largura que realmente recebeu, como no simulador. A casca
   pode estar com o trilho contextual aberto ou recolhido; usar a viewport aqui
   quebrava a composição nos dois casos. */
@container (max-width: 900px) {
  .pn2-resumo { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .pn2-kpi { grid-column: span 3; }
  .pn2-kpi:nth-child(n + 5) { grid-column: span 4; }
}

@container (min-width: 901px) and (max-width: 1080px) {
  .pn2-kpi dt { min-height: 54px; }
}

@container (min-width: 561px) and (max-width: 680px) {
  .pn2-resumo { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .pn2-kpi { grid-column: span 3; }
  .pn2-kpi:nth-child(n + 5) { grid-column: span 2; }
}

@container (max-width: 560px) {
  .pn2-resumo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pn2-kpi,
  .pn2-kpi:nth-child(n + 5) { grid-column: auto; }
  .pn2-kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------- Assistente */

.assistente-real { min-width: 0; display: grid; gap: 18px; font-size: 14px; line-height: 1.5; }
.assistente-workspace {
  min-width: 0;
  min-height: 620px;
  margin: 0;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--linhas-regra-forte);
  border-radius: 6px;
  background: var(--linhas-plano);
}

.assistente-workspace > .est-lateral {
  min-width: 0;
  padding: 14px 0 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0;
  border-right: 1px solid var(--linhas-regra-forte);
  background: var(--linhas-superficie);
}

.assistente-workspace > .est-lateral > .btn {
  width: calc(100% - 28px) !important;
  min-height: 40px;
  margin: 0 14px 12px;
  border-color: var(--linhas-regra-forte);
  background: var(--linhas-elevado);
  color: var(--texto);
  box-shadow: inset 0 -2px var(--linhas-vermelho);
  font-size: 13px;
  font-weight: 650;
}

.assistente-conversas {
  max-height: none !important;
  min-height: 0;
  overflow-y: auto !important;
  border-top: 1px solid var(--linhas-regra);
}

.assistente-conversa {
  position: relative;
  min-width: 0;
  min-height: 72px;
  padding: 12px 38px 12px 14px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--linhas-regra);
  background: transparent;
}
.assistente-conversa:hover { background: var(--linhas-elevado); }
.assistente-conversa.on {
  background: linear-gradient(90deg, rgba(255, 32, 32, .1), rgba(255, 32, 32, .025) 76%, transparent);
  box-shadow: inset 1px 0 var(--linhas-vermelho);
}
.assistente-conversa > .est-corpo { min-width: 0; flex: 1; }
.assistente-conversa .est-nome { font-size: 13px; font-weight: 650; }
.assistente-conversa .est-nota { margin-top: 3px; color: var(--texto2); font-size: 12px; }
.assistente-conversa > button {
  position: absolute;
  top: 50%;
  right: 8px;
  width: 30px;
  height: 30px;
  padding: 0 !important;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--texto3);
  font-size: 18px;
}
.assistente-conversa > button:hover { border-color: var(--linhas-regra-forte); background: var(--linhas-superficie); color: var(--erro); }
.assistente-contagem { padding: 12px 14px; color: var(--texto2); font-size: 12px; }

.assistente-workspace > .est-principal {
  min-width: 0;
  min-height: 620px;
  display: grid;
  grid-template-rows: auto minmax(280px, 1fr) auto auto;
  gap: 0;
  align-content: stretch;
  background: var(--linhas-plano);
}

.assistente-workspace > .est-principal > :first-child {
  min-height: 64px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--linhas-regra);
}
.assistente-topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.assistente-topo > div { min-width: 0; }
.assistente-topo strong,
.assistente-topo small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.assistente-topo strong { color: var(--texto); font-size: 13px; }
.assistente-topo small { margin-top: 4px; color: var(--texto2); font-size: 12px; }

.assistente-workspace > .est-principal > :nth-child(2) {
  min-height: 0;
  padding: 24px 18px;
  align-content: start;
  overflow-y: auto;
}

.assistente-workspace .est-nada {
  min-height: 100%;
  place-content: center;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.assistente-workspace .est-nada b { font-size: 22px; font-weight: 560; letter-spacing: -.02em; }
.assistente-workspace .est-sugestoes { max-width: 680px; grid-template-columns: 1fr; gap: 0; }
.assistente-workspace .est-sugestoes > button {
  min-height: 46px;
  padding: 0;
  justify-content: flex-start;
  border: 0;
  border-bottom: 1px solid var(--linhas-regra-forte);
  border-radius: 0;
  background: transparent;
  color: var(--texto);
  box-shadow: none;
  font-size: 14px;
}
.assistente-workspace .est-sugestoes > button::after { margin-left: auto; color: var(--texto2); content: '→'; }
.assistente-workspace .est-sugestoes > button:hover { background: transparent; color: var(--linhas-vermelho-claro); }

.assistente-turno { display: grid; gap: 8px; }
.assistente-turno-pessoa { justify-items: end; }
.assistente-turno-pessoa > .est-cartao {
  width: min(740px, 92%);
  padding: 12px 14px;
  border-color: rgba(255, 32, 32, .42);
  border-radius: 6px;
  background: var(--linhas-superficie);
}
.assistente-turno-dotti { width: min(740px, 100%); }
.assistente-turno-dotti > .est-linha { padding: 0; border: 0; }
.assistente-turno .est-rotulo { color: var(--texto2); font-family: var(--corpo); font-size: 12px; letter-spacing: 0; text-transform: none; }
.assistente-turno p { color: var(--texto); font-size: 14px; line-height: 1.55; }
.assistente-turno .est-selo { border-color: rgba(124, 108, 242, .44); color: #a99cff; background: rgba(124, 108, 242, .08); }

.assistente-workspace > .est-principal > .est-cartao {
  margin: 0 14px 14px;
  padding: 12px;
  gap: 10px;
  border-color: var(--linhas-regra-forte);
  border-radius: 6px;
  background: var(--linhas-superficie);
}
.assistente-workspace > .est-principal > .est-cartao textarea {
  min-height: 72px !important;
  color: var(--texto);
  font-size: 14px;
  line-height: 1.5;
}
.assistente-workspace > .est-principal > .est-cartao .est-acoes { align-items: center; }
.assistente-workspace > .est-principal > .est-cartao .est-nota { color: var(--texto2); font-size: 12px; }

.assistente-limites {
  min-height: 72px;
  padding: 13px 14px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: 11px;
  border: 1px solid var(--linhas-regra-forte);
  border-radius: 6px;
  background: var(--linhas-plano);
}
.assistente-limites > span { color: var(--texto2); }
.assistente-limites strong { display: block; font-size: 13px; }
.assistente-limites p { margin-top: 4px; color: var(--texto2); font-size: 12px; line-height: 1.55; }

@media (max-width: 1050px) {
  .assistente-workspace { grid-template-columns: 230px minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .assistente-workspace { min-height: 0; grid-template-columns: 1fr; overflow: visible; }
  .assistente-workspace > .est-lateral { max-height: 340px; border-right: 0; border-bottom: 1px solid var(--linhas-regra-forte); }
  .assistente-workspace > .est-principal { min-height: 560px; }
}

/* ====================================================================== */
/* Sistema compartilhado — aplicado a TODAS as telas da suíte              */
/* ====================================================================== */

.dotti-shell {
  /* O --r legado do estilo.css e 10px, um valor que nao existe no sistema do
     simulador, e ele ainda pinta 8 seletores do estudio.css e outros da casa.
     Redefinido AQUI, dentro de .dotti-shell, ele conserta todos de uma vez e
     nao toca a porta de entrada (landing e login ficam fora da casca, e nao
     tem contraparte no simulador). O robo_telas.css ja fazia exatamente isto
     localmente desde antes: --r: 6px. */
  --r: 6px;
  /* SUPERFICIE SOLIDA, nao gradiente.
     Este token pintava as abas (.vtabs/.rb-abas/[role=tablist]), os cartoes
     (.cartao/.est-cartao/.rb-cartao/.pl-cartao/.perfil-cartao), os estados
     vazios e .aviso - ou seja, as superficies mais repetidas de TODA tela -
     com um gradiente de 145 graus com tinta vermelha no topo. Era o
     acabamento metalico que o Linhas substituiu, e a regra Superficie Solida
     do DESIGN.md proibe gradiente em painel, ledger, tabela e controle
     estrutural.
     O simulador nao apagou os nomes antigos: ele os REATRIBUIU a cor chapada
     (--suite-metal-surface: var(--lines-surface)) e zerou o brilho
     (--suite-metal-glint: transparent). Aqui vale o mesmo. O tom escolhido e
     o graphite-panel, que o DESIGN.md atribui nominalmente as quatro
     categorias que usam este token: cartao, cartao de grafico, estado vazio
     honesto e bancada da administracao. */
  --painel-metal: var(--linhas-plano);
  font-size: 14px;
  line-height: 1.5;
}

.dotti-shell .lateral { padding: 16px 12px 12px; }
.dotti-shell .grupo {
  margin: 0 9px 7px;
  padding: 11px 0 0;
  font-size: 12px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.dotti-shell .item {
  width: 100%;
  min-height: 43px;
  padding: 7px 9px;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 620;
  text-align: left;
}
.dotti-shell .item .ic {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
}
.dotti-shell .item .ic svg { width: 18px; height: 18px; display: block; }
.dotti-shell .item .tag { min-height: 24px; padding: 0 6px; display: inline-flex; align-items: center; }
.trilho-botao > :first-child svg { width: 17px; height: 17px; display: block; }

.contexto-identidade {
  min-height: 60px;
  padding: 10px 12px;
  grid-template-columns: 36px minmax(0, 1fr);
  border-radius: 8px;
  background: linear-gradient(145deg, #292c31, #1b1e22);
}
.contexto-identidade :is(strong, b) { font-size: 13px; font-weight: 650; }
.contexto-identidade > :nth-child(2) :is(small, span, p) { font-size: 12px; }

/* Casca aprovada — geometria compartilhada com o simulador. As duas colunas
   continuam com 68 + 236 px; aqui acertamos a malha interna sem alterar a
   área útil das telas ou qualquer comportamento do backend. */
@media (min-width: 901px) {
  .trilho-global {
    position: fixed;
    inset: 0 auto 0 0;
    padding: 17px 8px 12px;
    grid-template-rows: auto auto auto minmax(10px, 1fr) auto;
    gap: 15px;
  }

  .trilho-marca {
    width: 34px;
    height: 34px;
    border-radius: var(--linhas-raio);
    font-size: 18px;
    box-shadow: inset 0 1px rgba(255, 255, 255, .25), 0 6px 16px rgba(255, 32, 32, .13);
  }

  .trilho-produtos { gap: 7px; }
  .trilho-produtos .trilho-botao {
    min-height: 64px;
    padding: 5px 3px;
    border-radius: 8px;
  }
  .trilho-produtos .trilho-botao > :first-child { border-radius: 8px; }
  .trilho-botao > :first-child {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }
  .trilho-botao > :last-child:not(:first-child) { font-size: 12px; }

  .trilho-atalhos {
    padding-top: 0;
    gap: 5px;
  }
  .trilho-atalhos .trilho-botao {
    min-height: 52px;
    border-radius: 8px;
  }
  .trilho-admin .trilho-botao {
    min-height: 64px;
    border-radius: 8px;
  }

  .dotti-shell > .lateral,
  .dotti-shell .lateral {
    position: fixed;
    inset: 0 auto 0 var(--linhas-trilho);
  }

  .contexto-seletor {
    width: calc(100% - 8px);
    margin: 0 4px 24px;
  }

  .contexto-identidade {
    width: 100%;
    min-height: 62px;
    height: 62px;
    padding: 10px;
    border-radius: 6px;
    grid-template-columns: 40px minmax(0, 1fr);
  }
  .contexto-identidade > :first-child { width: 40px; height: 40px; font-size: 12px; }
  .contexto-identidade :is(strong, b) { font-size: 14px; }
  .contexto-identidade > :nth-child(2) :is(small, span, p) { font-size: 12.5px; }
  .contexto-gatilho { grid-template-columns: 40px minmax(0, 1fr) 18px; }

  .dotti-shell .grupo {
    height: 12px;
    margin: 0 9px 4px;
    padding: 0;
    font-size: 12.5px;
    line-height: 12px;
  }
  .dotti-shell .item + .grupo { margin-top: 11px; }

  .dotti-shell .item {
    min-height: 45px;
    border-radius: 6px;
    font-size: 14px;
  }
  .dotti-shell .item .ic svg {
    width: 22px;
    height: 22px;
    stroke-width: 1.9;
  }

  .trilho-botao > :first-child svg {
    width: 21px;
    height: 21px;
    stroke-width: 1.9;
  }

  .utilidades-conta {
    width: calc(100% + 24px);
    height: 53px;
    margin: auto -12px -12px;
    padding: 7px 12px 8px;
  }
  .utilidades-conta > .topo-b,
  .utilidades-conta > .av-caixa > .av-gatilho,
  .utilidades-conta > .busca,
  .utilidades-conta > .busca > .busca-gatilho { height: 38px; }
  .utilidades-conta > .topo-b,
  .utilidades-conta > .av-caixa > .av-gatilho,
  .utilidades-conta > .busca > .busca-gatilho { border-radius: 6px; }
  .utilidades-conta .busca-popover {
    position: fixed;
    left: calc(var(--linhas-trilho) + 12px);
    bottom: 60px;
  }
  .utilidades-conta .av-menu {
    position: fixed;
    inset: auto auto 60px calc(var(--linhas-trilho) + 12px);
    z-index: 74;
    width: min(304px, calc(100vw - 28px));
    max-height: calc(100dvh - 80px);
  }
  .utilidades-conta :is(.topo-b, .av-gatilho) svg {
    width: 22px;
    height: 22px;
  }
  .utilidades-conta .busca-gatilho svg { width: 22px; height: 22px; }

  .utilidades-conta .av-icone-conta {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    color: var(--texto3);
  }
  .utilidades-conta .av-icone-conta svg { width: 22px; height: 22px; display: block; }
}

.dotti-shell .conteudo { container-type: inline-size; }
.pagina-real { width: 100%; max-width: 1500px; gap: 18px; font-size: 14px; line-height: 1.5; }
.pagina-real::before { right: 0; left: 0; opacity: .42; }

.dotti-shell .cabeca {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  padding-bottom: 24px;
}
.dotti-shell .cabeca h1 {
  margin: 0;
  font-size: clamp(28px, 2.7vw, 40px);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.dotti-shell .cabeca .sub { margin-top: 8px; font-size: 14px; line-height: 1.5; }
.dotti-shell .cabeca .acoes { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }

/* Controles: mesma altura, raio e ritmo em Canal, Studio, Robô, Aprendizado,
   Comunidade, Conta e Administração. */
.dotti-shell :is(.btn, .botao, .est-botao, .rb-botao) {
  min-height: var(--linhas-altura-controle);
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--linhas-regra-forte);
  border-radius: var(--linhas-raio);
  background: linear-gradient(180deg, rgba(255, 81, 71, .055), transparent 48%), linear-gradient(180deg, var(--linhas-botao-topo), var(--linhas-elevado));
  color: var(--texto);
  box-shadow: none;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
}
.dotti-shell :is(.btn, .botao, .est-botao, .rb-botao):hover:not(:disabled) {
  border-color: rgba(255, 104, 94, .22);
  background: linear-gradient(180deg, rgba(255, 81, 71, .085), transparent 48%), linear-gradient(180deg, var(--linhas-botao-topo-hover), var(--linhas-botao-base-hover));
}
.dotti-shell :is(.btn, .botao, .est-botao, .rb-botao):disabled {
  border-color: var(--linhas-inerte-borda);
  background: var(--linhas-inerte-fundo);
  color: var(--linhas-inerte-texto);
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
}
.dotti-shell :is(.btn, .botao) svg { width: 17px; height: 17px; flex: 0 0 auto; }

.dotti-shell :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select):not(.pw-search-field *, .pw-select-field *, .cw-search *, .busca-campo *) {
  min-height: var(--linhas-altura-controle);
  border: 1px solid var(--linhas-regra-forte);
  border-radius: var(--linhas-raio);
  background: var(--linhas-campo-fundo);
  color: var(--texto);
  font-size: 13px;
}
.dotti-shell :is(input:not([type="checkbox"]):not([type="radio"]), select):not(.pw-search-field *, .pw-select-field *, .cw-search *, .busca-campo *) { padding-inline: 11px; }
.dotti-shell textarea:not(.pw-search-field *, .pw-select-field *, .cw-search *, .busca-campo *) { padding: 10px 11px; line-height: 1.5; }
.dotti-shell :is(input, textarea)::placeholder { color: var(--linhas-campo-marca); opacity: 1; }
.dotti-shell :is(input, textarea, select):hover:not(:disabled) { border-color: rgba(235, 239, 247, .3); }
.dotti-shell .utilidades-conta .busca-campo input,
.dotti-shell .utilidades-conta .busca-campo input:hover,
.dotti-shell .utilidades-conta .busca-campo input:focus,
.dotti-shell .utilidades-conta .busca-campo input:focus-visible {
  min-height: 0;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  font-size: 14px;
}

/* Abas e filtros deixam de variar de uma tela para outra. */
.dotti-shell :is(.vtabs, .rb-abas, .admin-real-abas, .rp-abas, [role="tablist"]) {
  min-width: 0;
  min-height: 48px;
  padding: 0 7px;
  display: flex;
  align-items: stretch;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--linhas-regra);
  border-radius: var(--linhas-raio);
  background: var(--painel-metal);
  box-shadow: inset 0 1px var(--linhas-brilho);
}
.dotti-shell :is(.vtabs .vtab, .rb-abas button, .admin-real-abas button, .rp-tab, [role="tablist"] > [role="tab"]) {
  position: relative;
  flex: 0 0 auto;
  min-height: 46px;
  padding: 0 13px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--texto2);
  box-shadow: none;
  font-size: 13px;
  font-weight: 620;
  white-space: nowrap;
}
.dotti-shell :is(.vtabs .vtab.on, .rb-abas button.on, .admin-real-abas button.on, .rp-tab.on, [role="tab"][aria-selected="true"]) { color: #fff; }
.dotti-shell :is(.vtabs .vtab.on, .rb-abas button.on, .admin-real-abas button.on, .rp-tab.on, [role="tab"][aria-selected="true"])::after {
  position: absolute;
  right: 8px;
  bottom: -1px;
  left: 8px;
  height: 2px;
  background: var(--linhas-vermelho);
  content: '';
}

/* Superfícies, listas, tabelas e estados. Cards existem apenas quando agrupam
   um objeto de verdade; listas continuam listas e usam divisores. */
.dotti-shell :is(.cartao, .est-cartao, .rb-cartao, .pl-cartao, .perfil-cartao) {
  border: 1px solid var(--linhas-regra);
  border-radius: var(--linhas-raio);
  background: var(--painel-metal);
  box-shadow: inset 0 1px rgba(255, 255, 255, .045);
}
.dotti-shell :is(.tabela, .est-tabela, table) { font-variant-numeric: tabular-nums; }
.dotti-shell :is(.tabela, .est-rolagem) {
  min-width: 0;
  overflow-x: auto;
  border: 1px solid var(--linhas-regra);
  /* 4px: moldura de DADO, como o .rc-table-wrap do simulador. */
  border-radius: var(--linhas-raio-dado);
  background: var(--linhas-plano);
}
.dotti-shell :is(.tabela, .est-tabela) table { width: 100%; border-collapse: collapse; }
.dotti-shell :is(.tabela, .est-tabela) :is(th, td) { padding: 11px 12px; border-bottom: 1px solid var(--linhas-regra); vertical-align: middle; }
.dotti-shell :is(.tabela, .est-tabela) thead th { background: var(--linhas-elevado); color: var(--texto2); font-size: 12px; font-weight: 620; }
.dotti-shell :is(.tabela, .est-tabela) tbody tr:last-child :is(th, td) { border-bottom: 0; }
.dotti-shell :is(.tabela, .est-tabela) tbody tr:hover { background: var(--linhas-superficie); }

.dotti-shell :is(.vazio, .est-nada, .busca-vazio) {
  min-height: 144px;
  padding: 26px;
  display: grid;
  place-content: center;
  gap: 6px;
  border: 1px solid var(--linhas-regra);
  border-radius: var(--linhas-raio);
  background: var(--painel-metal);
  color: var(--texto2);
  text-align: center;
}
.dotti-shell :is(.vazio, .est-nada, .busca-vazio) :is(h2, h3, b, strong) { color: var(--texto); font-size: 14px; }
.dotti-shell :is(.vazio, .est-nada, .busca-vazio) p { max-width: 58ch; color: var(--texto2); }

/* `custos-vazio` marca um VALOR ausente dentro de células e frases. Não é um
   empty-state de página: transformá-lo em grid estica cada `—` para 144px e
   multiplica a altura das linhas da tabela. */
.dotti-shell td.custos-vazio { display: table-cell; min-height: 0; padding: 11px 12px; text-align: right; }
.dotti-shell span.custos-vazio { display: inline; min-height: 0; padding: 0; border: 0; background: none; text-align: inherit; }

.dotti-shell .aviso {
  border-width: 1px;
  border-left-width: 1px;
  border-radius: 6px;
  background: var(--painel-metal);
}

@container (max-width: 720px) {
  .dotti-shell .cabeca { display: grid; gap: 18px; }
  .dotti-shell .cabeca .acoes { width: 100%; justify-content: flex-start; }
}

@media (max-width: 720px) {
  .pagina-real { font-size: 14px; }
  .dotti-shell :is(.btn, .botao, .est-botao, .rb-botao) { min-height: 44px; }
  .dotti-shell :is(.vtabs, .rb-abas, .admin-real-abas, .rp-abas, [role="tablist"]) { width: 100%; }
}

/* Abertura pública de F5: mesma malha da casca, sem simular menus ou conta.
   A folha é inicial; essa geometria não depende do CSS tardio da rota. */
.dotti-abertura-icone {
  display: block;
  width: 34px;
  height: 34px;
  margin-inline: auto;
  border-radius: 6px;
  background: var(--linhas-superficie);
}
.dotti-abertura-contexto {
  display: block;
  min-height: 60px;
  border: 1px solid var(--linhas-regra);
  border-radius: 8px;
  background: var(--linhas-superficie);
}
.dotti-abertura-itens {
  display: grid;
  gap: 34px;
  padding: 32px 9px;
}
.dotti-abertura-itens .dotti-esqueleto-linha { width: 72%; }
.dotti-abertura .topo { justify-content: flex-start; }
.dotti-abertura-menu { display: none; }
@media (max-width: 900px) {
  .dotti-abertura-menu {
    display: block;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 6px;
    background: var(--linhas-superficie);
  }
}

/* A troca de rota apresenta a geometria certa antes da leitura real. Não há
   página intermediária, mensagem "aguarde" nem bloqueio da navegação. */
.dotti-esqueleto { min-width: 0; min-height: 420px; color: var(--texto3); }
.dotti-esqueleto :is(article, aside, section, div) { min-width: 0; }
.dotti-esqueleto-linha {
  width: 54%;
  height: 9px;
  display: block;
  border-radius: 3px;
  background: rgba(168, 175, 184, .1);
}
.dotti-esqueleto-linha.larga { width: 78%; height: 12px; }
.dotti-esqueleto-cartao { min-height: 92px; padding: 16px; display: grid; align-content: center; gap: 10px; border: 1px solid var(--linhas-regra); background: var(--linhas-plano); }
.dotti-esqueleto-painel { display: grid; gap: 14px; }
.dotti-esqueleto-painel > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dotti-esqueleto-painel > div > article + article { border-left: 0; }
.dotti-esqueleto-painel > article { min-height: 190px; }
.dotti-esqueleto-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dotti-esqueleto-grade article { min-height: 180px; border-radius: 8px; }
.dotti-esqueleto-lista { display: grid; }
.dotti-esqueleto-lista > div { min-height: 62px; padding: 14px; display: grid; align-content: center; border: 1px solid var(--linhas-regra); }
.dotti-esqueleto-lista article + article { border-top: 0; }
.dotti-esqueleto-conversa,
.dotti-esqueleto-config { min-height: 560px; display: grid; grid-template-columns: 270px minmax(0, 1fr); border: 1px solid var(--linhas-regra); }
.dotti-esqueleto-conversa > aside,
.dotti-esqueleto-config > aside { border-right: 1px solid var(--linhas-regra); }
.dotti-esqueleto-conversa article { border-width: 0 0 1px; }
.dotti-esqueleto-conversa > section { padding: 18px; display: grid; grid-template-rows: auto minmax(220px, 1fr) auto; gap: 16px; }
.dotti-esqueleto-conversa > section > div { border-block: 1px solid var(--linhas-regra); }
.dotti-esqueleto-config > aside { padding: 18px 14px; display: grid; align-content: start; gap: 20px; }
.dotti-esqueleto-config > section { padding: 14px; display: grid; align-content: start; gap: 10px; }
.dotti-esqueleto-config article { border-radius: 8px; }

@media (prefers-reduced-motion: no-preference) {
  .dotti-esqueleto-linha { animation: dotti-esqueleto-pulso 1.15s ease-in-out infinite alternate; }
}
@keyframes dotti-esqueleto-pulso { to { background-color: rgba(168, 175, 184, .18); } }

@media (max-width: 760px) {
  .dotti-esqueleto-painel > div,
  .dotti-esqueleto-grade { grid-template-columns: 1fr; }
  .dotti-esqueleto-conversa,
  .dotti-esqueleto-config { grid-template-columns: 1fr; }
  .dotti-esqueleto-conversa > aside,
  .dotti-esqueleto-config > aside { max-height: 240px; border-right: 0; border-bottom: 1px solid var(--linhas-regra); }
}


/* ====================================================================== */
/* Sobreposicoes e mini-chat — os dois ultimos pontos fora do sistema      */
/* ====================================================================== */

/* UMA sobreposicao, UM raio, UMA sombra.
   O simulador resolve popover de produto, popover de utilidade e menu num
   seletor so (dotti-lines.css :is(.suite-product-popover, .suite-utility-popover)).
   Aqui havia tres tratamentos: o popover de produtos usava o raio de CONTROLE
   (6px) e sombra 0 18px 34px, a busca usava 8px literal e 0 16px 42px, e o menu
   da conta herdava o --r legado com 0 18px 44px. Tres coisas que flutuam na
   mesma altura nao podem cair de alturas diferentes.
   POSICIONAMENTO NAO ENTRA AQUI de proposito: o menu da conta tem regra fixa
   propria (linhas.css, .utilidades-conta .av-menu) que o mantem inteiro dentro
   da viewport, e ela e' intocada. */
.dotti-shell :is(.contexto-produtos, .busca-popover, .av-menu) {
  border-radius: var(--linhas-raio-sobreposicao);
  box-shadow: var(--linhas-sombra-sobreposicao);
}

/* O MINI-CHAT FIXO.
   Ele vive FORA de .dotti-shell (e um #dock com position:fixed, irmao da
   casca), entao os tokens --linhas-* nao alcancam ele. Por isso este bloco usa
   os tokens de :root do estilo.css, que existem nos dois temas — assim o
   mini-chat continua acompanhando claro/escuro sem um segundo bloco de tema.
   No simulador o gatilho e um RETANGULO de 184x44 com a linha vermelha
   inferior acendendo no hover (app-shell.css .suite-mini-chat-trigger), nao
   uma pilula: pilula le-se como chip de status, e este e um controle. */
#dock .dk-bolha {
  min-height: 44px;
  border-radius: 8px;
  background: var(--sup2);
  font-size: 13px;
  font-weight: 680;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .32), inset 0 -2px transparent;
  transition: box-shadow .12s ease, background .12s ease, border-color .12s ease;
}

/* A linha vermelha inferior e o mesmo sinal do botao primario: ela acende no
   hover e fica acesa enquanto o painel esta aberto (.on). */
#dock .dk-bolha:hover,
#dock .dk-bolha.on {
  background: var(--sup3, var(--sup2));
  box-shadow: 0 12px 30px rgba(0, 0, 0, .32), inset 0 -2px var(--marca);
}

/* A largura minima so vale onde o rotulo existe. Abaixo de 40rem o proprio
   estilo.css esconde texto, caras e o "+" e compacta o gatilho para um botao
   quadrado — impor 184px ali devolveria a barra larga que o mobile tirou. */
@media (min-width: 40.0625rem) {
  #dock .dk-bolha { min-width: 184px; }
}

/* O painel do mini-chat e sobreposicao de verdade: raio de overlay, nao o --r
   legado de 10px. */
#dock .dk-painel {
  border-radius: 8px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .5);
}

/* A FAIXA DE RASCUNHO (Alunos, Planos e Menu do site).
   Especificacao do DESIGN.md, componente `draft-action-bar`: fundo elevado,
   texto de apoio, tipografia de corpo, raio de controle e acolchoamento
   12x14. Ela declara que existe mudanca pendente e carrega o par
   Cancelar/Salvar — a "Regra do Rascunho Explicito": nada parece persistido
   antes do comando, e Salvar fica apagado quando nada mudou. */
.dotti-shell .draft-action-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border: 1px solid var(--linhas-regra);
  border-radius: var(--linhas-raio);
  background: var(--linhas-superficie);
  color: var(--texto2);
}

/* Os botoes vao para a direita; o recado de estado fica na esquerda e cresce. */
.dotti-shell .draft-action-bar > .dica { flex: 1; min-width: 0; margin: 0; }


/* O CARTAO DO ESTUDIO GANHA CORPO — e' a diferenca que fazia a tela real ler
   como wireframe ao lado do simulador.

   Medido nos dois: o simulador desenha `.rs-section` com raio 14px, fundo
   proprio e sombra; mas o acabamento aprovado (`dotti-lines.css:741`)
   SOBRESCREVE isso e fixa o que de fato vale:

     border-radius: var(--lines-radius-control)   ->  6px
     background:    var(--lines-surface)          ->  a SUPERFICIE
     box-shadow:    inset 0 1px var(--lines-sheen)

   O real ja' acertava o raio (6px) e a borda. O que faltava era o FUNDO: todo
   `.est-bloco` estava `transparent`, entao o cartao era so' um contorno sobre
   o canvas. Com a superficie e o fio de brilho no topo ele passa a ter a mesma
   presenca do simulador, sem sair da escala de planos aprovada.

   A REGUA E OS GRAFICOS FICAM UM DEGRAU ABAIXO, como no acabamento
   (`dotti-lines.css:747`): dentro de um cartao de superficie, o trilho da
   barra precisa do plano para a barra se destacar dele. */
.dotti-shell .est-bloco {
  background: var(--linhas-superficie);
  box-shadow: inset 0 1px var(--linhas-brilho);
}
/* O DEGRAU DE BAIXO E' O TRILHO, NAO A SECAO. `.est-painel-regua` e' o CARTAO
   (`est-bloco est-painel-secao est-painel-regua`) — rebaixa-lo apagava o cartao
   inteiro para o plano. Quem precisa do plano e' o contêiner das barras, que ja'
   e' um elemento proprio (`.est-regua-videos`), pelo mesmo motivo do acabamento
   (`dotti-lines.css:747`): dentro de um cartao de superficie, a barra so' se
   destaca contra o plano.

   O CANAL ENTRA JUNTO. `pn2-*` sao os cartoes do Painel (produto Canal) e
   estavam transparentes pelo mesmo motivo que os do Estudio.

   `.robo-raiz` FICA DE FORA, por ordem do dono: o Robo ja' esta' pronto e tem a
   propria escala de planos (`robo_telas.css`), que nao segue o tema. */
.dotti-shell .pn2-resumo {
  background: var(--linhas-regra);
  box-shadow: none;
}

.dotti-shell .pn2-grafico,
.dotti-shell .pn2-tabela {
  background: var(--linhas-superficie);
  box-shadow: inset 0 1px var(--linhas-brilho);
}

.dotti-shell :is(.est-regua-videos, .est-painel-meses, .est-grafico, .est-rolagem) {
  background: var(--linhas-plano);
}


/* A TERCEIRA REGUA DO TOPO SAI — FORA DO ROBO.

   Contado no topo de /painel-canal (0 a 260px), o real empilhava TRES linhas
   de 1px mais o traco vermelho; o simulador tem UMA mais o traco. As outras
   duas ja' sairam (a fila de chips, em estudio.css, e o par de titulo
   repetido). Esta e' a que sobrou: `.pagina-real::before`, uma hairline
   esticada de ponta a ponta no topo de TODA pagina.

   No simulador ela nao existe no Estudio (`.rs-page` nao declara `::before`),
   e no Canal o acabamento a ENCOLHE para uma marca de 56px
   (`dotti-lines.css:656-662`: `right:auto; left:40px; width:56px`) — o oposto
   do que `linhas.css:2190` faz aqui, que e' estica-la para os 1500px.

   O ROBO FICA COMO ESTA', por ordem do dono — ele ja' esta' pronto e usa a
   mesma `.pagina-real`. Por isso o corte e' pelo produto (`.produto-robo` esta'
   no mesmo no que carrega `.dotti-shell`, ver shell.js), e nao no seletor da
   pagina: assim nenhuma tela do Robo muda um pixel. */
.dotti-shell:not(.produto-robo) .pagina-real::before { display: none; }


/* O CABECALHO DO ESTUDIO TEM REGUA E MARCA VERTICAL — o do Canal nao tem.

   Os dois produtos DIVERGEM no simulador, e eu tinha generalizado errado: vi o
   Canal (`.rc-page .dr-page-header`, dotti-real-canal.css:63 — so' padding) e
   tirei a regua de todas. Mas o Estudio declara as duas coisas
   (dotti-real-studio.css:41-54):

     padding: 8px 18px 26px
     border-bottom: 1px solid var(--rs-line)
     ::before  -> barra VERTICAL de 1px, vermelha, top:11px bottom:28px left:0

   O `padding-inline` de 18px existe POR CAUSA da barra: sem ele o texto
   encostaria nela. E o acabamento so' acrescenta brilho a barra
   (`dotti-lines.css:740`) e encurta o respiro de baixo para 18px (`:739`).

   O ROBO segue fora: o `.cabeca` dele tem altura zero (ele pinta
   `rl-page-header`), entao nem alcanca estas regras. */
.dotti-shell.produto-studio .cabeca {
  padding: 8px 18px 18px;
  border-bottom: 1px solid var(--linhas-regra);
}

.dotti-shell.produto-studio .cabeca::before {
  position: absolute;
  top: 11px;
  bottom: 28px;
  left: 0;
  width: 1px;
  background: var(--linhas-vermelho);
  box-shadow: 0 0 10px rgba(255, 32, 32, .18);
  content: "";
  pointer-events: none;
}


/* A SUPERFICIE E' CONTINUA EM TODA A SUITE, COMO NO SIMULADOR.

   O gradiente vivia em `.pagina-real`, que comeca DEPOIS do padding de
   `.conteudo`. Por isso apenas a area interna do topo ficava iluminada e o
   cabecalho parecia preso dentro de um retangulo em Canal, Studio, Cursos,
   Comunidade, Conta e Administracao. No simulador, o brilho pertence ao canvas
   externo e os cabecalhos ficam transparentes sobre uma superficie continua.

   O Robo fica de fora: suas telas usam um chao proprio em `.robo-raiz` e
   `robo_linhas.css`; trocar essa camada apagaria um acabamento ja aprovado. */
.dotti-shell:not(.produto-robo) .pagina-real {
  background: transparent;
}

/* Canal e Studio usam o plano solido tambem no simulador. Nos demais produtos,
   o canvas continuo ja vem de `.app-miolo` e deve continuar visivel. */
.dotti-shell:is(.produto-canal, .produto-studio) .conteudo {
  background: var(--linhas-plano);
}

/* O Canal base usa 4/28; somente o Painel compacto termina em 16px. */
.dotti-shell.produto-canal .cabeca {
  padding: 4px 0 28px;
  border: 0;
}

.dotti-shell.produto-canal .pagina-real.pagina-painel {
  gap: 14px;
}

.dotti-shell.produto-canal .pagina-real.pagina-painel > .cabeca {
  padding-bottom: 16px;
}

.dotti-shell.produto-canal .pagina-real.pagina-painel > .cabeca h1 {
  font-weight: 660;
}

.dotti-shell.produto-canal .pagina-real.pagina-painel > .cabeca .sub {
  color: #bcc1c9;
}

.dotti-shell.produto-canal .cabeca::after {
  bottom: 0;
}


/* O CALLOUT PERDE A BARRA COLORIDA GROSSA.

   `estilo.css:239` pinta a lateral esquerda de todo `.aviso` com tres pixels na
   cor de acento. O simulador nao tem nada disso: `.dr-notice` e moldura de 1px
   uniforme, e quem carrega o sentido e o ICONE mais a cor do texto.

   E' tambem uma das proibicoes do piso de qualidade da casa: barra colorida
   acima de 1px em cartao, item de lista, callout ou alerta. Ela grita mais que
   o proprio texto do aviso e desalinha o conteudo em 2px em relacao a todo
   cartao vizinho, que fecha em 1px.

   A cor NAO se perde: o `.aviso` ja' distingue estado por classe (`ok`, `erro`,
   `espera`), que pinta texto e borda inteira. */
.dotti-shell .aviso { border-left-width: 1px; }

/* Convite para o grupo: a página pertence à Conta; só o CTA sai do Dotti. */
.dotti-shell .pagina-grupo-whatsapp { max-width: 1200px; margin-inline: auto; }
.grupo-whatsapp { padding-block: clamp(24px, 4vw, 64px) 16px; }
.gw-abertura {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .85fr);
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
}
.gw-conversa h2 {
  max-width: 14ch;
  margin: 0;
  color: var(--texto);
  font-size: clamp(34px, 3.7vw, 60px);
  line-height: 1.08;
  font-weight: 650;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.gw-conversa h2 span { color: var(--marca-txt); }
.gw-introducao {
  max-width: 46ch;
  margin: 28px 0 0;
  color: var(--texto2);
  font-size: 17px;
  line-height: 1.7;
}
.gw-convite { margin: 20px 0 0; color: var(--texto); font-size: 15px; }
.gw-entrada {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(26px, 3vw, 42px);
  border-radius: 8px;
  background: var(--marca-2);
  color: var(--sobre-marca);
}
.gw-entrada > svg { margin-bottom: 32px; }
.gw-entrada h3 {
  max-width: 12ch;
  margin: 0;
  color: inherit;
  font-size: clamp(27px, 2.4vw, 34px);
  line-height: 1.15;
  font-weight: 650;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.gw-entrada p { margin: 20px 0 32px; color: inherit; font-size: 15px; line-height: 1.6; }
.gw-botao {
  display: flex;
  width: 100%;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--sobre-marca);
  color: #940000;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color 180ms, box-shadow 180ms;
}
.gw-botao svg { flex: none; transition: transform 240ms cubic-bezier(.16, 1, .3, 1); }
.gw-botao:hover { background: #fff0f0; color: #940000; box-shadow: 0 5px 16px rgba(70, 0, 0, .2); }
.gw-botao:hover svg { transform: translate(2px, -2px); }
.dotti-shell .gw-botao:focus-visible { outline: 2px solid var(--sobre-marca); outline-offset: 5px; }
.gw-destino { margin-top: 14px; color: inherit; font-size: 12px; line-height: 1.6; }
.gw-ajuda {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .85fr);
  gap: clamp(32px, 5vw, 80px);
  margin-top: clamp(48px, 6vw, 80px);
  padding-top: 32px;
  border-top: 1px solid var(--linha2);
}
.gw-ajuda h3 { margin: 0; color: var(--texto); font-size: 21px; line-height: 1.35; font-weight: 600; }
.gw-ajuda-intro p { max-width: 35ch; margin: 12px 0 0; color: var(--texto2); font-size: 14px; line-height: 1.6; }
.gw-dicas { display: grid; gap: 24px; margin: 0; }
.gw-dicas dt { margin: 0 0 6px; color: var(--texto); font-size: 14px; font-weight: 600; }
.gw-dicas dd { margin: 0; color: var(--texto2); font-size: 14px; line-height: 1.65; }
@media (max-width: 1050px) {
  .gw-abertura, .gw-ajuda { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .gw-conversa h2 { max-width: 19ch; font-size: clamp(34px, 5vw, 48px); }
  .gw-entrada { max-width: 520px; width: 100%; }
  .gw-entrada h3 { max-width: 19ch; }
  .gw-entrada > svg { margin-bottom: 24px; }
  .gw-ajuda { margin-top: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .gw-botao, .gw-botao svg { transition: none; }
  .gw-botao:hover svg { transform: none; }
}