/* Graph A - casca nova do portal (Início, 09/10/2026).

   Fiel ao protótipo do handoff "Editar Início" (Claude Design), que o Alex
   aprovou: gradiente vivo por ferramenta, hero com a arte do foguete, coluna
   da direita com relógio, Treinamentos e Comunicados. Plano:
   docs/PLANO_INICIO_V4.md.

   COMO A COR FUNCIONA. O protótipo monta toda cor de ferramenta, site e tipo
   a partir de um matiz (oklch com o matiz variando). Aqui o JS só marca
   data-hue (nome), data-tipo e data-i, e este CSS define o matiz em --h e
   desenha os gradientes com oklch(... var(--h)). Nenhum estilo inline.
   Cada gradiente é escrito UMA vez, na regra que o usa.

   O QUE FICA FORA DO SISTEMA DE TOKENS (e a catraca registra com --aceita):
   o protótipo usa cor, gradiente e tamanho de letra fora do tokens.css. Eles
   moram só aqui, concentrados, para a tokenização futura ser mover o bloco
   "--portal-*" abaixo para o tokens.css/escuro.css com light-dark(). Hoje:
   - fundo, lateral e cartões, no escuro do protótipo, e um par claro simples;
   - as famílias e os pesos do Archivo (300 e 800 do protótipo) numa família
     própria "Archivo Portal", sobre o MESMO arquivo variável: o fontes.css segura
     o Archivo em 700 de propósito e mexer lá mudaria o PCP;
   - a escala de letra do protótipo (8 a 30), em --portal-t*.

   Tudo na camada "legado" (a página usa componentes g-*; a catraca cobra).
   Sem !important. O g-btn tem display próprio na camada comum, que fica ACIMA
   do legado: o que precisa sumir de um g-btn fica dentro de um span meu. */
@layer legado {
  @font-face { font-family: "Archivo Portal"; font-style: normal; font-weight: 300 800; font-stretch: 100%; font-display: swap;
    src: url("/comum/fontes/archivo-v25-latin-ext-ff4f17d2.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
  @font-face { font-family: "Archivo Portal"; font-style: normal; font-weight: 300 800; font-stretch: 100%; font-display: swap;
    src: url("/comum/fontes/archivo-v25-latin-8f704806.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

  * { box-sizing: border-box; }
  html, body { min-height: 100%; }

  /* hidden sem !important (a catraca barra): o seletor repete o atributo e
     sobe de especificidade para ganhar de qualquer regra de classe. */
  html body [hidden][hidden][hidden] { display: none; }

  .app {
    /* superfícies: (claro, escuro do protótipo) */
    --portal-fundo: light-dark(#f2f4f6, #0b0a14);
    --portal-halo: light-dark(#e6e0f5, #22103d);
    --portal-lateral: light-dark(#ffffff, #0e0c18);
    --portal-flutuante: light-dark(#ffffff, #1a1628);
    --portal-dica: light-dark(#ffffff, #120f1f);
    --portal-anel: light-dark(#ffffff, #15121f);
    /* véus e linhas: branco no escuro, tinta no claro */
    --portal-a02: light-dark(rgba(22, 33, 43, .02), rgba(255, 255, 255, .02));
    --portal-a04: light-dark(rgba(22, 33, 43, .04), rgba(255, 255, 255, .04));
    --portal-a05: light-dark(rgba(22, 33, 43, .05), rgba(255, 255, 255, .05));
    --portal-a07: light-dark(rgba(22, 33, 43, .07), rgba(255, 255, 255, .07));
    --portal-l06: light-dark(rgba(22, 33, 43, .08), rgba(255, 255, 255, .06));
    --portal-l08: light-dark(rgba(22, 33, 43, .1), rgba(255, 255, 255, .08));
    --portal-l14: light-dark(rgba(22, 33, 43, .16), rgba(255, 255, 255, .14));
    --portal-sombra: light-dark(rgba(22, 33, 43, .22), rgba(0, 0, 0, .7));
    --portal-cartao: light-dark(#ffffff, rgba(12, 10, 20, .6));   /* cartão de conteúdo do Treinamento */
    --portal-campo: light-dark(#ffffff, rgba(0, 0, 0, .25));   /* fundo de campo de texto */
    --portal-tinta-ok: #0f2a17;   /* o visto sobre o verde da matriz */
    --portal-t10: 10px; --portal-t145: 14.5px; --portal-t20: 20px; --portal-t23: 23px; --portal-t95: 9.5px; --portal-t155: 15.5px; --portal-t18: 18px; --portal-t26: 26px;
    --portal-fundo-hero: #0b0a14;   /* o hero é uma vitrine escura nos dois temas: a arte pede */
    --portal-sobre-vitrine: #ffffff;
    --portal-sobre-vitrine-2: rgba(230, 222, 245, .6);
    --portal-lilas: var(--gx-lilas);
    --portal-tinta-botao: #1a1130;
    /* famílias */
    --portal-ff-titulo: "Archivo Portal", var(--ff-titulo);
    --portal-ff-texto: var(--ff-texto);
    --portal-ff-dado: var(--ff-dado);
    /* escala de letra do protótipo */
    --portal-t8: 8px; --portal-t85: 8.5px; --portal-t9: 9px; --portal-t105: 10.5px; --portal-t11: 11px; --portal-t115: 11.5px;
    --portal-t12: 12px; --portal-t125: 12.5px; --portal-t13: 13px; --portal-t135: 13.5px; --portal-t14: 14px; --portal-t15: 15px;
    --portal-t16: 16px; --portal-t17: 17px; --portal-t22: 22px; --portal-t24: 24px; --portal-t30: 30px;
    --larg-lateral: 236px;
    --ha: 300;   /* matiz da área e da trilha: o JS troca por elemento; este é o padrão */

    display: flex;
    min-height: 100dvh;
    background: radial-gradient(1100px 620px at 62% -8%, var(--portal-halo) 0%, transparent 62%), var(--portal-fundo);
    color: var(--ink);
    font-family: var(--portal-ff-texto);
    font-size: var(--fs-corpo);
    line-height: var(--lh-texto);
  }
  body { margin: 0; }
  button { font: inherit; color: inherit; }
  a { color: inherit; text-decoration: none; }
  h1, h2, h3, p { margin: 0; }
  :focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: var(--raio-p); }
  html { scrollbar-color: var(--line-controle) var(--paper); }

  svg.ic { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

  /* matiz por nome (a regra do protótipo: roxo 295, azul 258, laranja 48...) */
  [data-hue="roxo"] { --h: 295; }
  [data-hue="azul"] { --h: 258; }
  [data-hue="laranja"] { --h: 48; }
  [data-hue="rosa"] { --h: 12; }
  [data-hue="verde"] { --h: 150; }
  [data-hue="ciano"] { --h: 215; }
  [data-hue="ambar"] { --h: 75; }
  [data-hue="lilas"] { --h: 315; }
  [data-hue="teal"] { --h: 185; }
  /* tipo de comunicado e de conteúdo: matiz do protótipo */
  [data-tipo="atualizacao"] { --h: 300; }
  [data-tipo="treinamento"] { --h: 150; }
  [data-tipo="manutencao"] { --h: 60; }
  [data-tipo="aviso"] { --h: 255; }
  [data-tipo="video"] { --h: 48; }
  [data-tipo="pdf"] { --h: 15; }
  [data-tipo="pagina"] { --h: 150; }
  /* deslocamento do matiz entre os sites de um grupo: (posição - 1) x 9 */
  [data-i="0"] { --dh: -9; }
  [data-i="1"] { --dh: 0; }
  [data-i="2"] { --dh: 9; }
  [data-i="3"] { --dh: 18; }
  [data-i="4"] { --dh: 27; }
  [data-i="5"] { --dh: 36; }
  [data-i="6"] { --dh: 45; }
  [data-i="7"] { --dh: 54; }

  /* avatar do protótipo: gradiente roxo */
  .avatar {
    flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; overflow: hidden;
    background: linear-gradient(145deg, oklch(0.6 0.25 300), oklch(0.45 0.24 295));
    color: var(--portal-sobre-vitrine); font: 600 var(--portal-t12)/1 var(--portal-ff-titulo);
  }
  .avatar-g { width: 34px; height: 34px; }

  /* ------------------------------------------------------------- lateral */
  .veu { display: none; }
  .lateral {
    flex: 0 0 var(--larg-lateral); width: var(--larg-lateral);
    position: sticky; top: 0; z-index: 50; height: 100dvh;
    overflow-y: auto; overflow-x: hidden;
    display: flex; flex-direction: column; gap: 2px;
    padding: 14px 12px 10px;
    background: var(--portal-lateral); border-right: 1px solid var(--portal-l06);
    transition: width var(--dur-2), flex-basis var(--dur-2);
    scrollbar-width: thin;
  }
  body[data-mini] .lateral { --larg-lateral: 68px; }
  .lateral-topo {
    position: relative; display: flex; align-items: center; gap: 11px;
    padding: 4px 4px 14px 10px; margin-bottom: 6px; min-width: 0;
    border-bottom: 1px solid var(--portal-l06);
  }
  .marca { display: flex; align-items: center; gap: 10px; min-width: 0; overflow: hidden; line-height: 0; }
  .marca img { flex: none; display: block; width: 100px; height: auto; }
  .marca-sep { flex: none; width: 1px; height: 18px; background: var(--portal-lilas); opacity: .35; }
  .marca-portal { font: 500 var(--portal-t105)/1 var(--portal-ff-titulo); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
  .recolhe {
    position: absolute; top: 0; right: -6px; z-index: 2; width: 24px; height: 24px;
    display: grid; place-items: center; padding: 0; border-radius: 50%;
    border: 1px solid var(--portal-l14); background: var(--portal-flutuante); color: var(--ink-2); cursor: pointer;
  }
  .recolhe svg { width: 13px; height: 13px; stroke-width: 2.4; }
  .mini-a {
    display: none; width: 40px; height: 40px; margin: 4px auto 12px; padding: 0; place-items: center; border: 0; border-radius: 11px; cursor: pointer;
    background: linear-gradient(145deg, oklch(0.6 0.25 300), oklch(0.45 0.24 295));
    box-shadow: 0 8px 18px -8px oklch(0.5 0.25 300 / .8), inset 0 1px 0 rgba(255, 255, 255, .25);
  }
  .mini-a img { display: block; width: 22px; height: auto; }
  .so-celular { display: none; }

  .nav { display: flex; flex-direction: column; gap: 1px; }
  .nav-item {
    display: flex; align-items: center; gap: 11px; padding: 7px 10px; border-radius: 9px;
    font-size: var(--portal-t13); color: var(--ink-2); font-weight: 400;
  }
  .nav-item svg { width: 17px; height: 17px; stroke-width: 1.7; }
  .nav-item:hover, .t-item:hover, .conta-botao:hover, .conta-linha:hover { background: var(--marca-suave); color: var(--ink); }
  .nav-item[aria-current="page"] {
    color: var(--portal-sobre-vitrine); font-weight: 600;
    background: linear-gradient(90deg, oklch(0.5 0.23 295 / .75), oklch(0.5 0.23 295 / .35));
  }

  .grupo-nav { display: flex; flex-direction: column; margin-top: 6px; }
  .nav-grupo-nome { font: 600 var(--portal-t8)/1 var(--portal-ff-titulo); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); padding: 6px 10px 3px; }
  .grupo-fio { display: none; height: 1px; margin: 4px 12px; background: var(--portal-a07); }
  .t-item { display: flex; align-items: center; gap: 10px; padding: 4px 8px; border-radius: 9px; font-size: var(--portal-t135); color: var(--ink); }
  .t-item[data-breve="1"] { opacity: .6; }
  .t-item[aria-current="page"] { background: var(--marca-suave); }
  .t-nome { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tile {
    flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; color: var(--portal-sobre-vitrine);
    background: linear-gradient(145deg, oklch(0.68 0.2 var(--h)), oklch(0.5 0.22 var(--h)));
  }
  .tile svg { width: 13px; height: 13px; stroke-width: 2; }

  .empurra { margin-top: auto; }
  #link-config { gap: 10px; padding: 7px 10px; margin-bottom: 4px; font-size: var(--portal-t135); }
  .conta-caixa { position: relative; padding-top: 8px; border-top: 1px solid var(--portal-l06); }
  .conta-botao {
    width: 100%; display: flex; align-items: center; gap: 9px; padding: 6px; border: 0; background: none;
    text-align: left; border-radius: 10px; cursor: pointer;
  }
  .conta-botao[aria-expanded="true"] { background: var(--marca-suave); }
  .conta-nome { flex: 1; min-width: 0; font: 600 var(--portal-t135)/1.25 var(--portal-ff-texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .conta-menu {
    position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 5; width: 236px;
    display: flex; flex-direction: column; gap: 1px; padding: 6px; border-radius: 14px;
    background: var(--portal-flutuante); border: 1px solid var(--portal-l08); box-shadow: 0 18px 40px -12px var(--portal-sombra);
  }
  .conta-ident { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 10px; }
  .conta-ident-nome { font: 600 var(--portal-t135)/1.2 var(--portal-ff-texto); }
  .conta-ident-mail { font: 400 var(--portal-t115)/1.2 var(--portal-ff-texto); color: var(--ink-3); }
  .conta-div { height: 1px; margin: 4px 6px; background: var(--portal-a07); }
  .conta-linha {
    display: flex; align-items: center; gap: 11px; padding: 8px 10px; border: 0; border-radius: 8px; background: none;
    color: var(--ink); font: 400 var(--portal-t135)/1.2 var(--portal-ff-texto); text-align: left; cursor: pointer; width: 100%;
  }
  .conta-linha svg { width: 16px; height: 16px; color: var(--ink-2); }

  /* lateral recolhida: só os ícones */
  body[data-mini] .lateral-topo { flex-direction: column; align-items: center; padding: 4px 0 12px; border-bottom: 1px solid var(--portal-l06); }
  body[data-mini] .marca { display: none; }
  body[data-mini] .mini-a { display: grid; }
  body[data-mini] .recolhe { position: static; order: 2; width: 28px; }
  body[data-mini] .rot, body[data-mini] .conta-nome { display: none; }
  body[data-mini] .grupo-fio { display: block; }
  body[data-mini] .nav-item, body[data-mini] .t-item, body[data-mini] .conta-botao { justify-content: center; }

  /* ----------------------------------------------------------- conteúdo */
  .miolo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .barra-topo { display: none; }
  .carregando { padding: 22px 26px; color: var(--ink-3); }
  .sem-nucleo { margin: 0; padding: var(--esp-3) var(--esp-4); background: var(--late-soft); color: var(--late); }

  .inicio {
    flex: 1; width: 100%; max-width: 1640px; margin: 0 auto;
    padding: 22px clamp(14px, 2vw, 26px) 30px;
    display: flex; flex-wrap: wrap; align-items: flex-start; gap: 22px;
  }
  .inicio-main { flex: 999 1 640px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
  .inicio-lado { flex: 1 1 320px; max-width: 100%; min-width: 0; display: flex; flex-direction: column; gap: 18px; }

  /* hero: a arte do foguete e a busca */
  .hero {
    position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 16px;
    padding: 18px 26px 22px 14px; border-radius: 20px; color: var(--portal-sobre-vitrine);
    background:
      linear-gradient(90deg, rgba(11, 10, 20, .95) 0%, rgba(11, 10, 20, .7) 35%, rgba(11, 10, 20, .1) 62%, rgba(11, 10, 20, 0) 100%),
      linear-gradient(0deg, rgba(11, 10, 20, .85) 0%, rgba(11, 10, 20, 0) 30%),
      url("/portal/img/rocket-fundo-portal.webp") right 31% / auto 135% no-repeat,
      var(--portal-fundo-hero);
  }
  .hero-texto { position: relative; display: flex; flex-direction: column; gap: 4px; max-width: 64%; pointer-events: none; }
  .hero-titulo { font-family: var(--portal-ff-titulo); font-size: var(--portal-t24); line-height: 1.1; letter-spacing: -.015em; }
  .hero-titulo .leve { font-weight: 300; }
  .hero-titulo .forte { font-weight: 700; }
  .hero-sub { color: var(--portal-sobre-vitrine-2); font: 400 var(--portal-t13)/1.4 var(--portal-ff-texto); }
  .busca {
    position: relative; display: flex; align-items: center; gap: 12px; width: 64%; max-width: 700px; min-width: min(100%, 320px);
    height: 56px; padding: 0 8px 0 18px; border-radius: 14px;
    /* Branca, com o "G" do Google: quem olha sabe que a busca vai para o Google (Alex, 14/10). */
    background: var(--portal-sobre-vitrine); border: 1px solid transparent;
    box-shadow: 0 12px 30px -14px rgba(0, 0, 0, .7);
    transition: border-color 140ms, box-shadow 140ms;
  }
  .busca:focus-within { border-color: rgba(192, 139, 255, .7); box-shadow: 0 0 0 4px rgba(192, 139, 255, .16), 0 12px 30px -14px rgba(0, 0, 0, .7); }
  .busca-g { flex: none; width: 22px; height: 22px; }
  .busca input {
    flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--portal-tinta-botao);
    font: 400 var(--portal-t16)/1.2 var(--portal-ff-texto);
  }
  .busca input::placeholder { color: color-mix(in oklab, var(--portal-tinta-botao) 55%, transparent); }
  .busca-ir {
    flex: none; height: 40px; padding: 0 16px; display: flex; align-items: center; gap: 8px; border: 0; border-radius: 10px;
    background: var(--portal-tinta-botao); color: var(--portal-sobre-vitrine); font: 600 var(--portal-t14)/1 var(--portal-ff-titulo); cursor: pointer;
    transition: transform 120ms;
  }
  .busca-ir:hover { transform: translateX(2px); }
  .busca-ir svg { width: 15px; height: 15px; stroke-width: 2.4; }

  /* as cinco ferramentas em destaque */
  .destaques { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; width: 64%; max-width: 700px; min-width: min(100%, 320px); }
  .destaque {
    position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 104px; padding: 12px 12px 13px;
    border-radius: 14px; color: var(--portal-sobre-vitrine);
    background: linear-gradient(140deg, oklch(0.66 0.22 var(--h)) 0%, oklch(0.52 0.24 calc(var(--h) + 10)) 100%);
    box-shadow: 0 16px 30px -14px oklch(0.5 0.24 var(--h) / .7), inset 0 1px 0 rgba(255, 255, 255, .22);
    transition: transform 160ms;
  }
  .destaque:hover { transform: translateY(-3px); }
  .destaque > svg { position: absolute; top: -22px; left: -18px; width: 92px; height: 92px; stroke-width: 1.5; opacity: .26; transform: rotate(-12deg); pointer-events: none; }
  .destaque-seta { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .22); }
  .destaque-seta svg { width: 12px; height: 12px; stroke-width: 2.4; }
  .destaque-breve {
    position: absolute; top: 8px; right: 8px; white-space: nowrap; font: 700 var(--portal-t9)/1 var(--portal-ff-titulo); text-transform: uppercase;
    background: rgba(0, 0, 0, .4); border: 1px solid rgba(255, 255, 255, .3); padding: 3px 5px; border-radius: 999px;
  }
  .destaque-nome { position: relative; font: 700 var(--portal-t135)/1.2 var(--portal-ff-titulo); letter-spacing: -.01em; text-wrap: balance; text-shadow: 0 1px 8px rgba(0, 0, 0, .25); }
  .destaque-texto { position: relative; display: flex; flex-direction: column; gap: 1px; text-shadow: 0 1px 10px rgba(0, 0, 0, .3); }
  .destaque-topo { font: 500 var(--portal-t12)/1.1 var(--portal-ff-titulo); opacity: .9; }
  .destaque-grande { font: 800 var(--portal-t30)/.95 var(--portal-ff-titulo); letter-spacing: -.02em; }

  .aviso { padding: var(--esp-2) var(--esp-3); border-left: 3px solid var(--today); background: var(--today-soft); font-size: var(--portal-t13); }

  /* sites úteis: uma coluna por grupo */
  .bloco-sites { padding: 4px 0 0; }
  /* quebra pela largura do bloco, e nao da janela: a 1366 a coluna da direita come o espaco */
  .grade-sites { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 12px; align-items: stretch; }
  .grupo {
    position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 2px; padding: 14px 8px 10px; border-radius: 18px;
    background: radial-gradient(120% 70% at 0% 0%, oklch(0.55 0.2 var(--h) / .22) 0%, transparent 60%), linear-gradient(180deg, var(--portal-a04), var(--portal-a02));
    border: 1px solid oklch(0.7 0.15 var(--h) / .18);
    box-shadow: inset 0 1px 0 var(--portal-a05);
  }
  .grupo-fundo { position: absolute; top: -26px; right: -24px; color: oklch(0.78 0.15 var(--h)); opacity: .1; transform: rotate(12deg); pointer-events: none; }
  .grupo-fundo svg { width: 120px; height: 120px; stroke-width: 1.3; }
  .grupo-cab { position: relative; display: flex; align-items: center; gap: 9px; padding: 0 6px 10px; }
  .grupo-ico { flex: none; display: grid; place-items: center; color: oklch(0.78 0.15 var(--h)); }
  .grupo-ico svg { width: 18px; height: 18px; stroke-width: 2; }
  .grupo-nome { flex: 1; min-width: 0; font: 300 var(--portal-t15)/1.2 var(--portal-ff-titulo); letter-spacing: .01em; text-wrap: balance; }
  .site { position: relative; display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 11px; transition: background 140ms, transform 140ms; }
  .site:hover { background: oklch(0.7 0.15 calc(var(--h) + var(--dh, 0)) / .12); transform: translateX(3px); }
  .site-tile {
    flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: var(--portal-sobre-vitrine);
    background: linear-gradient(145deg, oklch(0.72 0.17 calc(var(--h) + var(--dh, 0))), oklch(0.5 0.2 calc(var(--h) + var(--dh, 0) + 10)));
    box-shadow: 0 6px 14px -7px oklch(0.55 0.2 calc(var(--h) + var(--dh, 0)) / .8), inset 0 1px 0 rgba(255, 255, 255, .28);
  }
  .site-tile svg { width: 19px; height: 19px; stroke-width: 1.9; }
  /* Cor da marca (core 105): o JS põe --cor-site (#RRGGBB do banco) e data-marca.
     Vale para o quadrado dos Sites úteis, dos Sites da Graph A e do botão de
     treino de fora; sem cor, segue o gradiente do matiz acima. O pé escurece
     com a tinta fixa do botão, não com o --portal-fundo, que é light-dark e
     clarearia o quadrado no tema claro. */
  .site-tile, .graph-tile, .treino-ext-link { --cor-site: var(--portal-sobre-vitrine); --cor-site-fim: var(--cor-site); --cor-traco: var(--portal-sobre-vitrine); }
  .site-tile[data-marca], .graph-tile[data-marca], .cartao-pastas .graph-tile[data-marca] {
    background: linear-gradient(145deg, var(--cor-site), color-mix(in oklab, var(--cor-site) 78%, var(--portal-tinta-botao)));
    box-shadow: 0 6px 14px -7px color-mix(in oklab, var(--cor-site) 80%, transparent), inset 0 1px 0 color-mix(in oklab, var(--portal-sobre-vitrine) 28%, transparent);
  }
  .site-tile[data-marca="escura"], .graph-tile[data-marca="escura"] { color: var(--portal-sobre-vitrine); }
  .site-tile[data-marca="clara"], .graph-tile[data-marca="clara"] { color: var(--portal-tinta-botao); }
  /* core 106: degradê da esquerda para a direita, como no logo (SPOT), e traço
     na cor da marca sobre o fundo (o "A" amarelo do AFA sobre o marinho). */
  .site-tile[data-degrade], .graph-tile[data-degrade], .cartao-pastas .graph-tile[data-degrade] {
    background: linear-gradient(90deg, var(--cor-site), var(--cor-site-fim));
  }
  .site-tile[data-marca="propria"], .graph-tile[data-marca="propria"] { color: var(--cor-traco); }
  /* Desenho cheio da marca (o favicon do site): preenchido e grande, quase a
     borda do quadrado (pedido do Alex, 14/10; traço engrossado não ficou bom). */
  svg.ic-cheio { fill: currentColor; fill-rule: evenodd; stroke: none; }
  svg.ic-cheio path { --cor-tras: currentColor; }
  svg.ic-cheio .ic-tras { fill: var(--cor-tras); }
  .site-tile[data-marca], .graph-tile[data-marca] { overflow: hidden; }
  .site-tile svg.ic-cheio { width: 30px; height: 30px; }
  .graph-tile svg.ic-cheio { width: 34px; height: 34px; }
  .site-nome { flex: 1; min-width: 0; font: 500 var(--portal-t14)/1.2 var(--portal-ff-texto); text-wrap: balance; }

  /* Sites da Graph A e Pastas de rede */
  .cartao-graph {
    position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 6px; padding: 16px 8px 10px; border-radius: 18px;
    background: radial-gradient(90% 90% at 0% 0%, oklch(0.55 0.2 300 / .2) 0%, transparent 60%), linear-gradient(180deg, var(--portal-a04), var(--portal-a02));
    border: 1px solid oklch(0.7 0.15 300 / .2); box-shadow: inset 0 1px 0 var(--portal-a05);
  }
  .marca-d { position: absolute; top: -34px; right: -20px; width: 130px; height: 130px; color: oklch(0.78 0.15 300); stroke-width: 1.2; opacity: .1; transform: rotate(10deg); pointer-events: none; }
  .cartao-cab { position: relative; display: flex; align-items: center; gap: 9px; padding: 0 6px 6px; }
  .cab-ico { width: 18px; height: 18px; stroke-width: 2; color: oklch(0.78 0.15 300); }
  .cartao-titulo { flex: 1; font: 300 var(--portal-t15)/1.2 var(--portal-ff-titulo); letter-spacing: .01em; }
  .cartao-titulo.grande { font-size: var(--portal-t17); }
  .grade-graph { position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 2px 10px; }
  .graph-item {
    display: flex; align-items: center; gap: 12px; padding: 7px 6px; border: 0; border-radius: 12px; background: none; min-width: 0;
    text-align: left; color: var(--ink); transition: background 140ms, transform 140ms;
  }
  .graph-item:hover { background: var(--portal-a05); transform: translateX(3px); }
  button.graph-item { cursor: pointer; }
  .graph-tile {
    flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: var(--portal-sobre-vitrine);
    background: linear-gradient(145deg, oklch(0.7 0.18 var(--h)), oklch(0.5 0.2 calc(var(--h) + 10)));
    box-shadow: 0 6px 14px -7px oklch(0.55 0.2 var(--h) / .8), inset 0 1px 0 rgba(255, 255, 255, .28);
  }
  .graph-tile svg { width: 19px; height: 19px; stroke-width: 1.9; }
  .graph-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .graph-nome { font: 500 var(--portal-t14)/1.2 var(--portal-ff-texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .graph-dom { font: 400 var(--portal-t11)/1.2 var(--portal-ff-dado); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pasta[data-copiado="1"] { background: oklch(0.7 0.15 150 / .1); }
  .pasta[data-copiado="1"] .pasta-sub { color: var(--ok); }
  .cartao-pastas .graph-tile { background: linear-gradient(145deg, oklch(0.68 0.2 var(--h)), oklch(0.5 0.22 var(--h))); }

  /* Faixa final do Início (protótipo de 21/10): Atalhos à esquerda e Sites da Graph A à direita,
     metade da largura cada, o que equivale a três das seis colunas dos Sites úteis. Em tela
     estreita os dois cartões empilham. */
  .faixa-final { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 12px; align-items: start; }
  .faixa-final > .cartao-graph { min-width: 0; }
  .cartao-sem-titulo { padding-top: 10px; }
  .faixa-final .grade-graph { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
  /* Atalhos do PC: o botão do Painel do PCP e do InstalaCV (.destaque) com metade da altura, mesmo
     gradiente, fonte e ícone estourado no canto. As vagas vazias reservam o lugar dos próximos botões. */
  .grade-atalhos { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  @media (max-width: 560px) { .grade-atalhos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .destaque-baixo { min-height: 52px; flex-direction: row; align-items: center; justify-content: flex-start; padding: 0 46px 0 14px; }
  .destaque-baixo .destaque-seta, .destaque-baixo .destaque-breve { top: 50%; transform: translateY(-50%); }
  .destaque-baixo .destaque-texto { gap: 2px; min-width: 0; }
  .destaque-baixo .destaque-topo { font-size: var(--portal-t11); }
  .destaque-baixo .destaque-grande { font-size: var(--portal-t17); line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .destaque-baixo .destaque-nome { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .atalho-off { cursor: default; filter: saturate(.6); }
  .atalho-off:hover, .atalho-vaga:hover { transform: none; }
  .atalho-vaga { background: none; box-shadow: none; border: 1px dashed var(--portal-l14); }

  .dica {
    display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 16px;
    background: var(--portal-dica); border: 1px solid var(--portal-l06);
  }
  .dica-ico { flex: none; width: 26px; height: 26px; }
  .dica-bulbo { fill: oklch(0.82 0.16 85); }
  .dica-base { fill: none; stroke: oklch(0.82 0.16 85); stroke-width: 1.8; stroke-linecap: round; }
  .dica-texto { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 1px; font-size: var(--portal-t13); }
  .dica-titulo { font-weight: 600; }
  .dica-corpo { color: var(--ink-2); }

  /* ------------------------------------------------------ coluna da direita */
  .relogio {
    display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 16px;
    background: linear-gradient(180deg, var(--portal-a05), var(--portal-a02)); border: 1px solid var(--portal-l08); box-shadow: inset 0 1px 0 var(--portal-a05);
  }
  .relogio-data { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 0 6px 0 0; }
  .data-tile {
    flex: none; width: 40px; height: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border-radius: 10px;
    background: linear-gradient(145deg, oklch(0.6 0.25 300), oklch(0.45 0.24 295)); color: var(--portal-sobre-vitrine); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
  }
  .data-mes { font: 600 var(--portal-t85)/1 var(--portal-ff-dado); letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
  .data-dia { font: 700 var(--portal-t17)/1 var(--portal-ff-titulo); font-variant-numeric: tabular-nums; }
  .data-texto { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .data-hora { font: 500 var(--portal-t16)/1 var(--portal-ff-titulo); font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; }
  .data-semana { font: 500 var(--portal-t105)/1 var(--portal-ff-dado); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
  .ponto {
    flex: none; height: 40px; display: flex; align-items: center; gap: 7px; padding: 0 12px 0 10px; border-radius: 11px; color: var(--portal-sobre-vitrine);
    background: linear-gradient(140deg, oklch(0.72 0.17 158), oklch(0.54 0.15 168)); font: 600 var(--portal-t13)/1 var(--portal-ff-titulo);
    box-shadow: 0 10px 20px -12px oklch(0.55 0.16 160 / .9), inset 0 1px 0 rgba(255, 255, 255, .28); transition: transform 140ms;
  }
  .ponto:hover { transform: translateY(-1px); }
  .ponto svg { width: 17px; height: 17px; stroke-width: 2; }
  .relogio-sep { flex: none; width: 1px; height: 24px; margin: 0 4px; background: var(--portal-l08); }
  .sino { position: relative; flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: var(--ink-2); }
  .sino:hover { background: var(--portal-a07); color: var(--ink); }
  .sino svg { width: 18px; height: 18px; }
  .sino-n {
    position: absolute; top: 5px; right: 5px; min-width: 15px; height: 15px; padding: 0 3px; display: grid; place-items: center; border-radius: 999px;
    background: oklch(0.65 0.22 15); color: var(--portal-sobre-vitrine); font: 700 var(--portal-t9)/1 var(--portal-ff-titulo); box-shadow: 0 0 0 2px var(--portal-anel);
  }

  .cartao-lado {
    position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 4px; border-radius: 18px;
    background: linear-gradient(180deg, var(--portal-a04), var(--portal-a02)); box-shadow: inset 0 1px 0 var(--portal-a05);
  }
  .cartao-treino {
    padding: 16px 10px 12px;
    background: radial-gradient(120% 60% at 0% 0%, oklch(0.55 0.2 300 / .24) 0%, transparent 60%), linear-gradient(180deg, var(--portal-a04), var(--portal-a02));
    border: 1px solid oklch(0.7 0.15 300 / .2);
  }
  .cartao-treino .cartao-cab { padding: 0 8px 12px; }
  .cartao-treino .cab-ico { width: 19px; height: 19px; }
  .treino-novos { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 0 2px 10px; }
  .treino-rotulo { padding: 0 6px 2px; font: 600 var(--portal-t105)/1 var(--portal-ff-titulo); letter-spacing: .14em; text-transform: uppercase; color: oklch(0.85 0.17 135); }
  .treino-lista { display: flex; flex-direction: column; gap: 6px; }
  .treino-vistos { position: relative; display: flex; flex-direction: column; gap: 2px; }
  .treino-item { position: relative; display: flex; align-items: center; gap: 12px; padding: 7px 8px; border-radius: 11px; transition: background 140ms, transform 140ms; }
  a.treino-item:hover { background: oklch(0.7 0.15 300 / .1); transform: translateX(3px); }
  .treino-item[data-semlink="1"] { cursor: default; }
  .treino-item[data-novo="1"] {
    overflow: hidden; padding: 11px 12px; border-radius: 13px; color: var(--portal-sobre-vitrine);
    background: linear-gradient(120deg, oklch(0.45 0.14 135 / .32), oklch(0.35 0.1 160 / .14)); border: 1px solid oklch(0.85 0.17 135 / .28);
    transition: transform 140ms, border-color 140ms;
  }
  a.treino-item[data-novo="1"]:hover { background: linear-gradient(120deg, oklch(0.45 0.14 135 / .32), oklch(0.35 0.1 160 / .14)); border-color: oklch(0.85 0.17 135 / .6); }
  .treino-ico { flex: none; width: 26px; display: grid; place-items: center; color: oklch(0.8 0.14 var(--h)); }
  .treino-ico svg { width: 19px; height: 19px; stroke-width: 1.6; }
  .treino-item[data-novo="1"] .treino-ico svg { width: 21px; height: 21px; }
  .treino-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .treino-titulo { font: 500 var(--portal-t125)/1.25 var(--portal-ff-texto); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .treino-item[data-novo="1"] .treino-titulo { font-weight: 600; font-size: var(--portal-t125); }
  .treino-tipo { font-size: var(--portal-t11); color: var(--ink-3); }
  .treino-item[data-novo="1"] .treino-tipo { font-size: var(--portal-t115); color: rgba(255, 255, 255, .6); }
  .treino-ponto { flex: none; width: 8px; height: 8px; border-radius: 50%; background: oklch(0.85 0.17 135); box-shadow: 0 0 0 4px oklch(0.85 0.17 135 / .18); }
  .treino-ext { position: relative; display: flex; flex-direction: column; gap: 6px; margin: 8px 2px 0; }
  .treino-ext-link {
    display: flex; align-items: center; gap: 12px; padding: 9px 12px 9px 9px; border-radius: 13px;
    background: var(--portal-a04); border: 1px solid var(--portal-a07); transition: transform 140ms, border-color 140ms;
  }
  .treino-ext-link:hover { transform: translateY(-2px); border-color: color-mix(in oklab, var(--cor-site) 55%, transparent); }
  .treino-ext-link[data-botao] { background: var(--cor-site); border-color: transparent; }
  .treino-ext-link[data-botao] .treino-tipo { color: inherit; opacity: .72; }
  .treino-ext-link[data-botao="clara"] { color: var(--portal-tinta-botao); }
  .treino-ext-link[data-botao="escura"] { color: var(--portal-sobre-vitrine); }
  .treino-ext-link[data-botao]:hover { border-color: var(--portal-sobre-vitrine); }
  .treino-ext-seta { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--portal-a05); }
  .treino-ext-seta svg { width: 14px; height: 14px; stroke-width: 2.2; transform: rotate(-45deg); }
  .treino-cta {
    position: relative; overflow: hidden; margin: 10px 2px 0; display: flex; align-items: stretch; padding: 16px 16px 14px; border-radius: 14px;
    color: var(--portal-sobre-vitrine);
    background: linear-gradient(110deg, oklch(0.5 0.27 292), oklch(0.32 0.18 292));
    box-shadow: 0 14px 28px -14px oklch(0.45 0.25 300 / .9), inset 0 1px 0 rgba(255, 255, 255, .18); transition: transform 140ms;
  }
  .treino-cta:hover { transform: translateY(-2px); }
  /* Título em cima, "Acessar área" e a seta embaixo (Alex, 20/10): a coruja sobra pela direita e por baixo. */
  .treino-cta > span:first-child { flex: 1; min-width: 0; padding-right: 84px; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; }
  .treino-cta strong { font: 800 var(--portal-t17)/1.08 var(--portal-ff-titulo); letter-spacing: -.015em; }
  .treino-cta .cta-linha1 { display: inline-flex; align-items: center; gap: 8px; font: 500 var(--portal-t125)/1 var(--portal-ff-texto); color: var(--portal-lilas); }
  .treino-cta .cta-seta { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  /* A coruja ocupa a altura do botão (pedido do Alex, 21/10): o quadro dela se ajusta pela altura. */
  .cta-coruja { position: absolute; right: 8px; top: 8px; bottom: 0; width: 82px; color: var(--portal-sobre-vitrine); pointer-events: none; transition: transform 160ms; }
  .cta-coruja .ic-coruja { display: block; width: 100%; height: 100%; fill: currentColor; stroke: none; }
  .treino-cta:hover .cta-coruja { transform: translateY(-3px); }

  .cartao-com {
    padding: 16px 10px 10px;
    background: radial-gradient(110% 60% at 0% 0%, oklch(0.6 0.18 25 / .18) 0%, transparent 60%), linear-gradient(180deg, var(--portal-a04), var(--portal-a02));
    border: 1px solid oklch(0.72 0.15 25 / .18);
  }
  .cartao-com .marca-d { top: -28px; right: -22px; width: 120px; height: 120px; color: oklch(0.8 0.14 25); transform: rotate(-10deg); stroke-width: 1.3; }
  .cartao-com .cartao-cab { padding: 0 8px 10px; }
  .cartao-com .cab-ico { color: oklch(0.8 0.14 25); }
  .ver-todos { display: inline-flex; align-items: center; gap: 4px; padding: 4px 0; color: oklch(0.8 0.14 25); font: 500 var(--portal-t12)/1 var(--portal-ff-texto); }
  .ver-todos svg { width: 13px; height: 13px; stroke-width: 2.4; }
  .com-lista { position: relative; display: flex; flex-direction: column; gap: 4px; }
  .com-item { display: flex; gap: 12px; padding: 9px 8px; border-radius: 12px; }
  .com-item[data-primeiro="1"] { background: var(--portal-a04); }
  .com-item:hover { background: var(--portal-a04); }
  .com-ico { flex: none; width: 24px; padding-top: 1px; display: flex; justify-content: center; color: oklch(0.82 0.13 var(--h)); }
  .com-ico svg { width: 19px; height: 19px; stroke-width: 1.6; }
  .com-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .com-linha { display: flex; align-items: center; gap: 8px; }
  .com-tipo { font: 600 var(--portal-t85)/1 var(--portal-ff-titulo); letter-spacing: .12em; text-transform: uppercase; color: oklch(0.82 0.13 var(--h)); }
  .com-data { margin-left: auto; font: 400 var(--portal-t11)/1 var(--portal-ff-dado); color: var(--ink-3); white-space: nowrap; }
  .com-titulo { font: 500 var(--portal-t135)/1.3 var(--portal-ff-texto); text-wrap: balance; }
  .com-texto { font: 400 var(--portal-t12)/1.4 var(--portal-ff-texto); color: var(--ink-3); text-wrap: pretty; }
  .com-vazio { padding: 8px; color: var(--ink-3); font-size: var(--portal-t13); }

  /* --------------------------------------------------- tela de ferramenta */
  .ferr-tela {
    flex: 1; width: 100%; max-width: 1640px; margin: 0 auto; padding: 18px clamp(14px, 2vw, 26px) 24px;
    display: flex; flex-direction: column; gap: 14px; min-height: 100dvh;
  }
  .ferr-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
  .ferr-icone {
    flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; color: var(--portal-sobre-vitrine);
    background: linear-gradient(145deg, oklch(0.68 0.2 var(--h)), oklch(0.5 0.22 var(--h))); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
  }
  .ferr-icone svg { width: 22px; height: 22px; }
  .ferr-cab-texto { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
  .ferr-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
  .ferr-titulo { font: 700 var(--portal-t22)/1.1 var(--portal-ff-titulo); letter-spacing: -.02em; }
  .ferr-selo { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 999px; font: 600 var(--portal-t11)/1.2 var(--portal-ff-texto); white-space: nowrap; }
  .ferr-selo[data-tom="no-ar"] { color: var(--ok); background: var(--ok-soft); }
  .ferr-selo[data-tom="breve"] { color: var(--today); background: var(--today-soft); }
  .ferr-desc { font: 400 var(--portal-t125)/1.35 var(--portal-ff-texto); color: var(--ink-3); }
  .ferr-abrir {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 9px;
    border: 1px solid var(--portal-l14); color: var(--ink-2); font: 500 var(--portal-t125)/1 var(--portal-ff-texto); white-space: nowrap;
  }
  .ferr-abrir:hover { color: var(--ink); border-color: var(--line-controle); }
  .ferr-abrir svg { width: 14px; height: 14px; }
  .ferr-corpo {
    flex: 1; min-height: 520px; border-radius: 16px; border: 1px solid var(--portal-l08); background: var(--portal-lateral); overflow: hidden;
  }
  /* O iframe volta ao esquema "normal" (tokens.css explica; o teste
     comum_esquema_cor.js trava na casca de hoje). */
  .ferr-corpo iframe { display: block; width: 100%; height: 100%; min-height: 520px; border: 0; color-scheme: normal; }
  .ferr-breve {
    display: flex; flex-direction: column; gap: 14px; max-width: 620px; padding: 18px; border-radius: 18px;
    background: linear-gradient(180deg, var(--portal-a04), var(--portal-a02)); border: 1px solid var(--portal-l08);
  }
  .ferr-breve p { font: 400 var(--portal-t14)/1.5 var(--portal-ff-texto); color: var(--ink-2); text-wrap: pretty; }
  .ferr-breve .ferr-abrir { align-self: flex-start; }

  /* ------------------------------------------------- Configuração do Portal */
  .cfg-tela { flex: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: 18px clamp(14px, 2vw, 26px) 40px; display: flex; flex-direction: column; gap: 14px; }
  .cfg-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
  .cfg-icone {
    flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; color: var(--portal-sobre-vitrine);
    background: linear-gradient(145deg, oklch(0.66 0.12 260), oklch(0.45 0.12 270)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
  }
  .cfg-icone svg { width: 22px; height: 22px; }
  .cfg-cab-texto { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .cfg-titulo { font: 700 var(--portal-t22)/1.1 var(--portal-ff-titulo); letter-spacing: -.02em; }
  .cfg-sub { font: 400 var(--portal-t125)/1.2 var(--portal-ff-texto); color: var(--ink-3); }
  .cfg-abas { display: flex; flex-wrap: wrap; gap: 0 18px; border-bottom: 1px solid var(--portal-l08); }
  .cfg-aba { padding: 10px 2px 12px; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--ink-2); font: 500 var(--portal-t135)/1 var(--portal-ff-texto); }
  .cfg-aba:hover { color: var(--ink); }
  .cfg-aba[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--portal-lilas); }
  .cfg-painel { display: flex; flex-direction: column; gap: 14px; }
  .cfg-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
  .cfg-topo-texto { flex: 1 1 300px; font: 400 var(--portal-t13)/1.45 var(--portal-ff-texto); color: var(--ink-2); }
  .cfg-contorno {
    display: inline-flex; align-items: center; justify-content: center; height: 34px; padding: 0 12px; border-radius: 9px;
    border: 1px solid var(--portal-l14); background: none; color: var(--ink-2); font: 500 var(--portal-t125)/1 var(--portal-ff-texto); cursor: pointer; white-space: nowrap;
  }
  .cfg-contorno:hover { color: var(--ink); }

  /* Ferramentas e grupos lado a lado: as 23 linhas numa coluna só passavam
     da altura de 1366x768. Abaixo de ~900px de conteúdo elas empilham. */
  .cfg-tela:has(.cfg-matrizes) { padding-bottom: 20px; }
  .cfg-matrizes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 430px), 1fr)); gap: 14px; align-items: start; }
  .cfg-matriz-cartao { min-width: 0; border-radius: 16px; border: 1px solid var(--portal-l08); background: var(--portal-a02); overflow: hidden; }
  /* No celular as colunas de perfil ficavam com 40px e o nome com zero: o nome
     tem piso de 120px e a coluna de perfil cede até 26px (a caixinha tem 24). */
  .cfg-matriz { display: grid; grid-template-columns: minmax(120px, 1fr) repeat(var(--n, 8), minmax(26px, 40px)); }
  .cfg-cab-item {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 8px; padding: 0 12px 10px; border-bottom: 1px solid var(--portal-l08);
    font: 600 var(--portal-t10)/1 var(--portal-ff-titulo); letter-spacing: .12em; text-transform: uppercase; color: oklch(0.8 0.13 300);
  }
  .cfg-cab-conta { letter-spacing: 0; color: var(--ink-3); font-weight: 500; }
  .cfg-cab-perfil {
    display: flex; justify-content: center; align-items: flex-end; height: 88px; padding: 6px 0; border-bottom: 1px solid var(--portal-l08);
    color: var(--ink-3); transition: color .12s, background-color .12s;
  }
  .cfg-cab-perfil > span {
    writing-mode: vertical-rl; transform: rotate(180deg); max-height: 100%; overflow: hidden;
    font: 500 var(--portal-t11)/1.15 var(--portal-ff-texto); text-align: left; text-wrap: balance;
  }
  .cfg-item {
    min-width: 0; display: flex; align-items: center; gap: 9px; padding: 0 10px 0 12px; height: 30px; border-top: 1px solid var(--portal-a05);
    font: 500 var(--portal-t13)/1.2 var(--portal-ff-texto); transition: background-color .12s;
  }
  .cfg-item-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cfg-acesa { background: var(--portal-l08); }
  .cfg-cab-perfil.cfg-acesa { color: var(--ink); }
  .cfg-tile {
    flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; color: var(--portal-sobre-vitrine);
    background: linear-gradient(145deg, oklch(0.68 0.2 var(--h, 295)), oklch(0.5 0.22 var(--h, 295)));
  }
  .cfg-tile svg { width: 13px; height: 13px; stroke-width: 2; }
  .cfg-cel-caixa { display: grid; place-items: center; height: 30px; border-top: 1px solid var(--portal-a05); transition: background-color .12s; }
  .cfg-cel {
    width: 24px; height: 24px; display: grid; place-items: center; padding: 0; border-radius: 8px; cursor: pointer;
    border: 1.5px solid var(--portal-l14); background: transparent; color: var(--portal-tinta-ok);
  }
  .cfg-cel[data-difere] { position: relative; }
  .cfg-cel[data-difere]::after {
    content: ""; position: absolute; top: -4px; right: -4px; width: 7px; height: 7px; border-radius: 50%;
    background: var(--today); box-shadow: 0 0 0 2px var(--portal-lateral);
  }
  .cfg-difs { font: 500 var(--portal-t12)/1.3 var(--portal-ff-texto); color: var(--today); white-space: nowrap; }
  .cfg-difs:empty { display: none; }
  .cfg-cel[aria-pressed="true"] { border-color: oklch(0.8 0.15 150); background: oklch(0.8 0.15 150); }
  .cfg-cel svg { width: 14px; height: 14px; stroke-width: 3; }

  .cfg-duas { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
  .cfg-secao {
    flex: 999 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 18px;
    background: linear-gradient(180deg, var(--portal-a04), var(--portal-a02)); border: 1px solid var(--portal-l08);
  }
  .cfg-secao.cfg-lado { flex: 1 1 320px; gap: 6px; padding: 18px 12px 12px; }
  .cfg-secao-titulo { font: 300 var(--portal-t16)/1.2 var(--portal-ff-titulo); }
  .cfg-secao-titulo.lado { margin: 0 0 6px 6px; }
  .cfg-campo { display: flex; flex-direction: column; gap: 6px; font: 500 var(--portal-t12)/1 var(--portal-ff-texto); color: var(--ink-2); }
  /* Anexo no modal de leitura (fatia 5, 11/11/2026) */
  .lt-anexo { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }
  .lt-anexo[hidden] { display: none; }
  .lt-anexo-rot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; font: 500 var(--portal-t13)/1.3 var(--portal-ff-texto); color: var(--ink-2); }
  .lt-anexo-rot a { color: var(--ink-2); }
  .lt-img { display: block; max-width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--portal-l14); }
  .lt-pdf { display: block; width: 100%; height: min(70vh, 760px); border: 1px solid var(--portal-l14); border-radius: 10px; background: var(--surface); }
  /* Acompanhar comunicados (fatia 3, 11/11/2026) */
  .cfg-acomp-linha { color: inherit; text-decoration: none; border-radius: 8px; }
  .cfg-acomp-linha:hover, .cfg-acomp-linha:focus-visible { background: var(--portal-a05); }
  .cfg-nums { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; }
  .cfg-num { display: inline-flex; align-items: baseline; gap: 5px; font: 400 var(--portal-t12)/1.2 var(--portal-ff-texto); color: var(--ink-3); white-space: nowrap; }
  .cfg-num b { font: 600 var(--portal-t15)/1 var(--portal-ff-texto); color: var(--ink); }
  .cfg-num[data-tom="ok"] b { color: var(--ok); }
  .cfg-num[data-tom="duvida"] b, .cfg-num[data-tom="curta"] b { color: var(--atencao); }
  .cfg-num[data-tom="vencido"] b { color: var(--perigo); }
  .cfg-voltar { align-self: flex-start; font: 500 var(--portal-t12)/1 var(--portal-ff-texto); color: var(--ink-2); text-decoration: none; }
  .cfg-voltar:hover { color: var(--ink); text-decoration: underline; }
  .cfg-acomp-cab { display: flex; flex-direction: column; gap: 8px; }
  .cfg-acomp-pessoa { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 6px; border-top: 1px solid var(--portal-a05); }
  .cfg-acomp-pessoa .cfg-linha-texto { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .cfg-acomp-pessoa[data-estado="falta"] .cfg-linha-titulo { color: var(--ink-2); }
  .cfg-tag { font: 600 var(--portal-t115)/1 var(--portal-ff-texto); padding: 5px 8px; border-radius: 999px; color: var(--atencao-ink); background: var(--atencao-soft); }
  .cfg-duvida { flex: 1 1 100%; display: flex; flex-direction: column; gap: 8px; margin-left: 14px; padding-left: 14px; border-left: 2px solid var(--atencao); }
  .cfg-duvida-rot { font: 600 var(--portal-t115)/1 var(--portal-ff-texto); color: var(--atencao); text-transform: uppercase; letter-spacing: .04em; }
  .cfg-duvida-texto, .cfg-duvida-resp { margin: 0; font: 400 var(--portal-t13)/1.5 var(--portal-ff-texto); color: var(--ink); white-space: pre-wrap; }
  .cfg-duvida-resp { color: var(--ink-2); }
  /* Publicar comunicado: setores e pessoas, abaixo do "Para quem" (fatia 2, 11/11/2026) */
  .cfg-destino { display: flex; flex-direction: column; gap: 14px; padding-left: 14px; border-left: 2px solid var(--portal-l14); }
  .cfg-destino[hidden] { display: none; }
  .cfg-input {
    height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--portal-l14); background: var(--portal-campo); color: var(--ink);
    font: 400 var(--portal-t14)/1.2 var(--portal-ff-texto); outline: 0;
  }
  .cfg-input:focus { border-color: var(--portal-lilas); }
  .cfg-select { cursor: pointer; }
  .cfg-area { height: auto; padding: 10px 12px; line-height: 1.45; resize: vertical; }
  .cfg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .cfg-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--portal-l14); background: transparent;
    color: var(--ink); font: 500 var(--portal-t125)/1 var(--portal-ff-texto); cursor: pointer;
  }
  .cfg-chip[aria-pressed="true"] { border-color: rgba(192, 139, 255, .7); background: oklch(0.55 0.2 300 / .25); }
  .cfg-chip-marca { font-size: var(--portal-t11); color: var(--ink-3); }
  .cfg-grade2, .cfg-grade3 { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
  .cfg-grade3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
  .cfg-dica { font: 400 var(--portal-t12)/1.4 var(--portal-ff-texto); color: var(--ink-3); }
  /* linha da lista de treino com o seletor de pasta ao lado do titulo (core 129): o seletor desce para a segunda linha */
  .cfg-linha-lista:has(.cfg-select) { flex-wrap: wrap; }
  .cfg-linha-lista .cfg-linha-texto { flex: 1 1 0; min-width: 0; }
  .cfg-linha-lista .cfg-select { order: 3; flex: 1 1 100%; min-width: 0; }
  .cfg-rodape { display: flex; align-items: center; gap: 12px; }
  .cfg-msg { flex: 1; font: 400 var(--portal-t12)/1.3 var(--portal-ff-texto); }
  .cfg-topo > .cfg-msg { flex: 0 1 auto; }
  .cfg-msg[data-tom="ok"] { color: var(--ok); }
  .cfg-msg[data-tom="aviso"] { color: var(--today); }
  .portal-primario {
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 0; border-radius: 10px; color: var(--portal-sobre-vitrine);
    background: linear-gradient(135deg, oklch(0.62 0.24 305), oklch(0.48 0.25 285)); font: 600 var(--portal-t135)/1 var(--portal-ff-titulo); cursor: pointer;
  }
  .portal-primario svg { width: 14px; height: 14px; stroke-width: 2.4; }
  .cfg-lixo { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 8px; background: var(--portal-a05); color: var(--ink-2); cursor: pointer; }
  .cfg-lixo:hover { color: var(--ink); }
  .cfg-lixo svg { width: 15px; height: 15px; }
  .cfg-linha-lista { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-top: 1px solid var(--portal-a05); }
  .cfg-linha-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .cfg-linha-titulo { font: 500 var(--portal-t13)/1.3 var(--portal-ff-texto); overflow-wrap: anywhere; }
  .cfg-linha-info { font: 400 var(--portal-t11)/1.3 var(--portal-ff-texto); color: var(--ink-3); }
  .cfg-vazio { padding: 6px; font: 400 var(--portal-t125)/1.4 var(--portal-ff-texto); color: var(--ink-3); }
  .cfg-obrig { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; color: var(--ink); font: 500 var(--portal-t13)/1.2 var(--portal-ff-texto); cursor: pointer; }
  .cfg-obrig-caixa { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; border: 1.5px solid var(--portal-l14); color: var(--portal-tinta-ok); }
  .cfg-obrig[aria-pressed="true"] .cfg-obrig-caixa { border-color: oklch(0.8 0.15 150); background: oklch(0.8 0.15 150); }
  .cfg-obrig-caixa svg { width: 13px; height: 13px; stroke-width: 3; }

  /* ------------------------------------------------------------ Minha conta */
  .conta-tela { flex: 1; width: 100%; max-width: 880px; margin: 0 auto; padding: 18px clamp(14px, 2vw, 26px) 40px; display: flex; flex-direction: column; gap: 14px; }
  .conta-painel { display: flex; flex-direction: column; gap: 14px; }
  .conta-cartao {
    min-width: 0; display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 18px;
    background: linear-gradient(180deg, var(--portal-a04), var(--portal-a02)); border: 1px solid var(--portal-l08);
  }
  .conta-cartao.linha { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 18px; }
  .conta-cartao.lista { gap: 0; padding: 4px 18px; }
  .conta-foto-caixa { display: flex; flex-direction: column; align-items: center; gap: 6px; }
  .conta-foto {
    width: 76px; height: 76px; padding: 0; border: 0; border-radius: 50%; overflow: hidden; display: grid; place-items: center; cursor: pointer;
    background: linear-gradient(145deg, oklch(0.6 0.25 300), oklch(0.45 0.24 295)); color: var(--portal-sobre-vitrine); font: 600 var(--portal-t26)/1 var(--portal-ff-titulo);
  }
  .conta-foto:hover { filter: brightness(.9); }
  .conta-foto[aria-busy="true"] { cursor: progress; filter: saturate(.5); }
  .conta-foto img, .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
  .conta-trocar { padding: 0; border: 0; background: none; color: var(--portal-lilas); font: 500 var(--portal-t12)/1.2 var(--portal-ff-texto); cursor: pointer; }
  .conta-id { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
  .conta-id-nome { font: 600 var(--portal-t18)/1.2 var(--portal-ff-titulo); }
  .conta-id-sub { font: 400 var(--portal-t13)/1.3 var(--portal-ff-texto); color: var(--ink-2); }
  .conta-id-mono { font: 400 var(--portal-t12)/1.3 var(--portal-ff-dado); color: var(--ink-3); overflow-wrap: anywhere; }
  .conta-erro { flex: none; }
  .conta-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px 0; }
  .conta-linha-texto { flex: 1 1 260px; display: flex; flex-direction: column; gap: 3px; }
  .conta-linha-titulo { font: 600 var(--portal-t14)/1.3 var(--portal-ff-titulo); }
  .conta-linha-desc { font: 400 var(--portal-t12)/1.4 var(--portal-ff-texto); color: var(--ink-3); }
  .conta-aviso-win { font: 500 var(--portal-t12)/1.3 var(--portal-ff-texto); color: var(--today); }
  .conta-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; padding: 0 0 16px; }
  .conta-form-rodape { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
  .conta-dica { flex: 1 1 260px; }
  .conta-pin { text-align: center; letter-spacing: 8px; font: 600 var(--portal-t18)/1 var(--portal-ff-dado); }
  .conta-div { height: 1px; background: var(--portal-a07); }
  .conta-sair { align-self: flex-start; color: var(--late); border-color: var(--late); }
  .conta-sair:hover { background: var(--late-soft); color: var(--late); }

  /* ------------------------------------------------------------ Comunicados */
  .cm-tela { flex: 1; width: 100%; max-width: 1100px; margin: 0 auto; padding: 18px clamp(14px, 2vw, 26px) 40px; display: flex; flex-direction: column; gap: 14px; }
  .cm-icone {
    flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; color: var(--portal-sobre-vitrine);
    background: linear-gradient(145deg, oklch(0.72 0.18 30), oklch(0.52 0.2 15));
    box-shadow: 0 12px 26px -12px oklch(0.55 0.2 20 / .9), inset 0 1px 0 rgba(255, 255, 255, .28);
  }
  .cm-icone svg { width: 22px; height: 22px; }
  .cm-n { font: 600 var(--portal-t105)/1 var(--portal-ff-dado); color: var(--ink-3); }
  .cm-lista { display: flex; flex-direction: column; gap: 10px; }
  .cm-card {
    position: relative; display: flex; gap: 14px; padding: 16px; border-radius: 16px;
    background: var(--portal-a02); border: 1px solid var(--portal-l06);
  }
  .cm-card[data-lido="0"] {
    background: linear-gradient(180deg, var(--portal-a07), var(--portal-a04));
    border-color: oklch(0.75 0.15 var(--h) / .3);
  }
  .cm-ponto { position: absolute; top: 18px; left: -4px; width: 8px; height: 8px; border-radius: 50%; background: oklch(0.7 0.2 25); box-shadow: 0 0 0 3px oklch(0.7 0.2 25 / .25); }
  .cm-ico { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: oklch(0.55 0.15 var(--h) / .18); color: oklch(0.82 0.13 var(--h)); }
  .cm-ico svg { width: 19px; height: 19px; stroke-width: 1.7; }
  .cm-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
  .cm-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
  .cm-tipo { font: 600 var(--portal-t95)/1 var(--portal-ff-titulo); letter-spacing: .12em; text-transform: uppercase; color: oklch(0.82 0.13 var(--h)); }
  .cm-meta { font: 400 var(--portal-t115)/1 var(--portal-ff-texto); color: var(--ink-3); }
  .cm-titulo { font: 500 var(--portal-t155)/1.3 var(--portal-ff-titulo); }
  .cm-card[data-lido="0"] .cm-titulo { font-weight: 700; }
  .cm-texto { max-width: 72ch; font: 400 var(--portal-t135)/1.55 var(--portal-ff-texto); color: var(--ink-2); text-wrap: pretty; overflow-wrap: anywhere; }
  .cm-acao {
    flex: none; align-self: flex-start; padding: 7px 11px; border-radius: 9px; border: 1px solid var(--portal-l14); background: none;
    color: var(--ink-2); font: 500 var(--portal-t12)/1 var(--portal-ff-texto); white-space: nowrap; cursor: pointer;
  }
  .cm-acao:hover:not(:disabled) { color: var(--ink); background: var(--portal-a07); }
  /* o card inteiro abre a leitura (11/11/2026): um botao por cima do card */
  .cm-card { cursor: pointer; }
  .cm-card:hover { border-color: var(--portal-l14); }
  .cm-abre { position: absolute; inset: 0; border: 0; border-radius: inherit; background: none; cursor: pointer; }
  .cm-abre:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
  .cm-situacao { font: 600 var(--portal-t115)/1 var(--portal-ff-texto); color: var(--ink-3); }
  .cm-situacao[data-tom="ok"] { color: var(--ok); }
  .cm-situacao[data-tom="duvida"] { color: var(--atencao); }
  .cm-situacao[data-tom="prazo"] { color: var(--ink-2); }
  .cm-situacao[data-tom="vencido"] { color: var(--perigo); }

  /* ---------------------------------------- modal de leitura (11/11/2026)
     Claro em qualquer tema (color-scheme: light faz os tokens light-dark()
     darem o claro), texto em 16, margens largas e nada mais na tela: o veu
     forte cobre o portal inteiro (Alex, 11/11/2026). */
  .cm-leitura {
    color-scheme: light;
    background: var(--surface); color: var(--ink); border-color: var(--line);
  }
  /* largura, veu e altura dos botoes vencem o g-dialogo e o g-btn: na camada tela, no fim do arquivo */
  .lt-cab { display: flex; gap: 16px; align-items: flex-start; padding: 32px 40px 20px; }
  .lt-cab-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
  .lt-tipo { font: 600 var(--portal-t105)/1 var(--portal-ff-titulo); letter-spacing: .14em; text-transform: uppercase; color: var(--roxo); }
  .lt-titulo { margin: 0; font: 700 var(--portal-t24)/1.2 var(--portal-ff-titulo); color: var(--ink); outline: none; text-wrap: balance; }
  .lt-meta { font: 400 var(--portal-t13)/1.3 var(--portal-ff-texto); color: var(--ink-3); }
  .lt-fecha { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; border: 0; background: none; color: var(--ink-3); cursor: pointer; }
  .lt-fecha:hover { background: var(--surface-2); color: var(--ink); }
  .lt-fecha:focus-visible { outline: 2px solid var(--foco); }
  .lt-fecha svg { width: 20px; height: 20px; }
  .lt-corpo { flex: 1; min-height: 0; overflow: auto; padding: 8px 40px 32px; border-top: 1px solid var(--line-soft); }
  .lt-saudacao { margin: 24px 0 0; font: 600 var(--portal-t17)/1.5 var(--portal-ff-texto); color: var(--ink); }
  .lt-texto { margin: 20px 0 0; max-width: 66ch; font: 400 var(--portal-t17)/1.7 var(--portal-ff-texto); color: var(--ink); white-space: pre-line; text-wrap: pretty; overflow-wrap: anywhere; }
  .lt-saudacao + .lt-texto { margin-top: 12px; }
  .lt-medido { margin: 28px 0 0; font: 400 var(--portal-t12)/1.4 var(--portal-ff-texto); color: var(--ink-3); }
  .lt-rodape { display: flex; flex-direction: column; gap: 14px; padding: 24px 40px 32px; border-top: 1px solid var(--line-soft); }
  .lt-acoes { display: flex; gap: 12px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
  .lt-feito { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 18px; border-radius: 10px; background: var(--ok-soft); color: var(--ok); font: 600 var(--portal-t14)/1 var(--portal-ff-texto); }
  .lt-feito svg { width: 18px; height: 18px; stroke-width: 2.4; }
  .lt-alerta { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; background: var(--atencao-soft); border-left: 3px solid var(--atencao); }
  .lt-alerta svg { flex: none; width: 20px; height: 20px; color: var(--atencao); margin-top: 1px; }
  .lt-alerta p { flex: 1; margin: 0; font: 500 var(--portal-t15)/1.45 var(--portal-ff-texto); color: var(--ink); }
  .lt-duvida { display: flex; flex-direction: column; gap: 8px; }
  .lt-duvida label { font: 600 var(--portal-t14)/1.2 var(--portal-ff-texto); }
  .lt-duvida textarea { box-sizing: border-box; width: 100%; min-height: 96px; resize: vertical; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-controle); background: var(--surface); color: var(--ink); font: 400 var(--fs-campo)/1.5 var(--portal-ff-texto); }
  .lt-duvida textarea:focus-visible { outline: 2px solid var(--foco); outline-offset: 1px; }
  .lt-dica { font: 400 var(--portal-t12)/1.3 var(--portal-ff-texto); color: var(--ink-3); }
  .lt-enviada { margin: 0; padding: 12px 16px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line-soft); font: 400 var(--portal-t135)/1.45 var(--portal-ff-texto); color: var(--ink-2); }
  .lt-enviada b { color: var(--ink); }
  .lt-erro { margin: 0; font: 500 var(--portal-t13)/1.4 var(--portal-ff-texto); color: var(--late); }
  @media (max-width: 600px) {
    .lt-cab { padding: 20px 20px 14px; }
    .lt-corpo { padding: 4px 20px 24px; }
    .lt-rodape { padding: 16px 20px 20px; }
    .lt-acoes { flex-direction: column-reverse; align-items: stretch; }
  }
  .cm-vazio { padding: 28px; border-radius: 16px; border: 1px dashed var(--portal-l14); text-align: center; color: var(--ink-3); font: 400 var(--portal-t135)/1.4 var(--portal-ff-texto); }

  /* --------------------------------------------- Treinamento & Conhecimento
     Desenho de 24/10/2026 (designer-ux-ui, aceito pelo Alex): topo de uma
     linha, prateleiras, pastas por área, pasta em lista e leitor em página.
     A página não rola: rola só a área de baixo do topo (.tr-corpo), e o
     leitor cabe na altura (o player encolhe, a página não rola). */
  .tr-tela { flex: 1; width: 100%; margin: 0; padding: 0; display: flex; flex-direction: column; height: 100dvh; max-height: 100dvh; min-height: 0; }
  .tr-raiz { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
  .tr-raiz[data-modo="leitor"] { padding: 12px clamp(14px, 2vw, 26px); }
  /* Superfície clara própria (04/11/2026, pedido do Alex: "mais leve, branco e cinzas"):
     enquanto o Treinamento está aberto, a área ao lado do menu do portal lê os tokens
     no claro, qualquer que seja o tema; o light-dark() decide onde é usado. */
  .miolo:has(> .tr-tela:not([hidden])) {
    color-scheme: light; color: var(--ink);
    background: radial-gradient(70% 40% at 80% 0%, oklch(0.96 0.03 295 / .8), transparent 70%), linear-gradient(180deg, oklch(0.985 0.008 290), oklch(0.965 0.016 285));
  }
  /* a barra do celular e o menu do portal seguem o tema do portal (o logo é de fundo escuro) */
  .miolo:has(> .tr-tela:not([hidden])) > .barra-topo { color-scheme: dark; color: var(--ink); }
  .tr-quadro { flex: 1; min-height: 0; display: grid; grid-template-columns: 296px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 0; }
  .tr-direita { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 14px; padding: 14px clamp(14px, 2vw, 28px) 0; }
  .tr-principal { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
  /* página inicial do Treinamento: vagas (colunas) e blocos; sem as pastas, que moram no menu */
  /* A Início não rola (Alex, 04/11/2026): o conteúdo se ajusta à altura. As alturas do banner e das capas
     seguem a janela (dvh) e as linhas que não cabem saem (o JS esconde, nunca corta no meio). */
  .tr-corpo:has(> .tr-inicio) { overflow: hidden; padding-bottom: 12px; }
  .tr-inicio { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) clamp(250px, 21%, 310px); grid-template-rows: minmax(0, 1fr); gap: clamp(20px, 2.4vw, 36px); }
  .tr-inicio-esq { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: clamp(14px, 2.4dvh, 28px); }
  .tr-inicio-miolo { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: clamp(16px, 3dvh, 36px); }
  .tr-inicio-miolo[data-busca="1"] { display: block; overflow-y: auto; }
  .tr-inicio-dir { min-width: 0; min-height: 0; display: flex; }
  .tr-inicio-miolo > .tr-vagas-b { min-height: 0; grid-template-rows: minmax(0, 1fr); overflow: hidden; }
  .tr-vagas-b > .tr-bloco { min-height: 0; overflow: hidden; }
  .tr-vagas-b .tr-novs, .tr-vagas-b .tr-saber-cards { flex: 0 1 auto; min-height: 0; overflow: hidden; }
  /* banner motivacional: o espaço, com o astronauta estudando. A parte escura do layout, feita só de gradiente e SVG (sem imagem) */
  .tr-banner {
    color-scheme: dark; color: oklch(0.97 0.005 270); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: flex-start;
    height: clamp(120px, 21dvh, 196px); min-height: 0; padding: 14px 40px; border-radius: 24px; box-shadow: 0 16px 40px -18px oklch(0.4 0.2 290 / .7);
    /* a arte do Alex (1500x172, astronauta lendo na lua): preenche o banner inteiro e vem ampliada, ancorada a direita, para o astronauta ficar grande */
    background: url("/portal/img/banner-treino.webp") right 40% / auto 185% no-repeat, linear-gradient(100deg, oklch(0.19 0.1 285), oklch(0.26 0.13 287));
  }
  .tr-banner-textos { position: relative; z-index: 1; max-width: min(46ch, 58%); display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
  .tr-banner-rotulo { font: 600 var(--portal-t11)/1 var(--portal-ff-texto); letter-spacing: .14em; text-transform: uppercase; color: oklch(0.82 0.1 290); }
  .tr-banner-titulo em { font-style: normal; color: oklch(0.82 0.14 305); }
  .tr-banner-texto { max-width: 44ch; font: 400 var(--portal-t14)/1.45 var(--portal-ff-texto); color: oklch(0.88 0.02 280); text-wrap: pretty; }
  .tr-banner-titulo { font: 700 var(--portal-t30)/1.1 var(--portal-ff-titulo); letter-spacing: -.01em; color: oklch(0.99 0 0); text-wrap: balance; }
  .tr-vagas { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: clamp(18px, 3dvh, 32px) clamp(24px, 2.6vw, 44px); align-items: start; }
  .tr-vagas-b { align-items: stretch; }
  .tr-vagas[data-n="1"] > :first-child { grid-column: 1 / -1; }
  .tr-vagas[data-n="2"] > :first-child { grid-column: span 2; }
  .tr-bloco { min-width: 0; display: flex; flex-direction: column; gap: clamp(10px, 1.8dvh, 18px); }
  .tr-bloco-titulo { display: flex; align-items: center; gap: 10px; font: 800 var(--portal-t20)/1.2 var(--portal-ff-titulo); letter-spacing: -.01em; }
  .tr-bloco-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .tr-bloco-link { display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; border: 0; background: none; color: oklch(0.46 0.19 262); font: 600 var(--portal-t13)/1 var(--portal-ff-texto); cursor: pointer; }
  .tr-bloco-link:hover { text-decoration: underline; text-underline-offset: 3px; }
  .tr-bloco-link:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: 6px; }
  .tr-bloco-link svg { width: 16px; height: 16px; stroke-width: 2.2; }
  .tr-bloco-ico { display: grid; place-items: center; color: oklch(0.5 0.2 295); }
  .tr-bloco-ico svg { width: 22px; height: 22px; stroke-width: 2; }
  .tr-bloco-rotulo { font: 600 var(--portal-t11)/1 var(--portal-ff-texto); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
  .tr-destaque { display: flex; align-items: center; gap: 22px; min-width: 0; padding: 16px; border-radius: 20px; border: 1px solid oklch(0.92 0.015 290); background: oklch(1 0 0); box-shadow: 0 10px 28px -16px oklch(0.4 0.12 290 / .4); }
  /* destaque (mockup do Alex): cartão horizontal, a capa à esquerda e o texto à direita; em coluna estreita volta a vertical */
  .tr-dest-cards { display: flex; align-items: stretch; gap: clamp(14px, 1.6vw, 26px); }
  .tr-dest {
    flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 22px; color: var(--ink); text-decoration: none;
    background: oklch(1 0 0); border: 1px solid oklch(0.92 0.015 290); box-shadow: 0 10px 28px -16px oklch(0.4 0.12 290 / .4); transition: box-shadow var(--dur-1);
  }
  .tr-dest:hover { box-shadow: 0 16px 34px -16px oklch(0.4 0.14 290 / .55); }
  .tr-dest:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; }
  .tr-dest .tr-capa { flex: 0 0 clamp(96px, 44%, 168px); aspect-ratio: 6 / 5; height: auto; border-radius: 16px; border-color: transparent; }
  .tr-dest .tr-capa-tipo:not([data-forma="pdf"]) .tr-capa-texto { display: none; }
  .tr-dest-textos { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
  .tr-dest-titulo { font: 700 var(--portal-t14)/1.25 var(--portal-ff-titulo); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; overflow-wrap: anywhere; }
  .tr-dest-meta { font: 400 var(--portal-t12)/1.3 var(--portal-ff-texto); color: var(--ink-3); }
  .tr-dest-cards[data-compacto="1"] .tr-dest { flex-direction: column; align-items: stretch; gap: 10px; padding: 10px 10px 12px; }
  .tr-dest-cards[data-compacto="1"] .tr-dest .tr-capa { flex: none; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; }
  .tr-dest-cards[data-compacto="1"] .tr-dest-textos { padding: 0 4px; }
  .tr-dest-selo > * { border-color: oklch(0.6 0.18 295); background: oklch(0.98 0.02 295); color: oklch(0.45 0.2 295); font-weight: 600; }
  .tr-dest-cards .tr-capa { aspect-ratio: 16 / 9; height: auto; }
  .tr-dest-cards .tr-capa-folha { font-size: var(--portal-t105); }
  .tr-destaque-capa { flex: 0 0 min(300px, 44%); display: block; color: inherit; text-decoration: none; }
  .tr-destaque-capa:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; border-radius: 8px; }
  .tr-destaque-textos { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
  .tr-destaque-titulo { font: 700 var(--portal-t22)/1.2 var(--portal-ff-titulo); letter-spacing: -.01em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; overflow-wrap: anywhere; }
  .tr-destaque-meta { font: 400 var(--portal-t13)/1.3 var(--portal-ff-texto); color: var(--ink-3); }
  .tr-destaque-textos > a { margin-top: 6px; }
  .tr-cont { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 6px; border-radius: 12px; color: var(--ink); text-decoration: none; }
  .tr-cont:hover { background: var(--portal-a05); }
  .tr-cont:focus-visible { outline: 2px solid var(--foco); outline-offset: 1px; }
  .tr-cont .tr-capa.mini { width: 96px; }
  .tr-cont-textos { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .tr-cont-titulo { font: 600 var(--portal-t13)/1.3 var(--portal-ff-titulo); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
  .tr-cont-meta { font: 400 var(--portal-t12)/1.2 var(--portal-ff-texto); color: var(--ink-3); }
  .tr-novs { display: flex; flex-direction: column; padding: 4px 8px; border-radius: 18px; border: 1px solid oklch(0.92 0.015 290); background: oklch(1 0 0); box-shadow: 0 10px 28px -16px oklch(0.4 0.12 290 / .4); }
  .tr-nov {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 6px; border: 0; border-bottom: 1px solid var(--portal-l06); background: none;
    color: var(--ink); font: 500 var(--portal-t14)/1.2 var(--portal-ff-texto); text-align: left; text-decoration: none; cursor: pointer;
  }
  .tr-nov:hover { background: var(--portal-a05); }
  .tr-nov:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; }
  .tr-nov-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
  .tr-nov-area { flex: none; font: 400 var(--portal-t12)/1 var(--portal-ff-texto); color: var(--ink-3); }
  .tr-nov-n { flex: none; padding: 5px 10px; border-radius: var(--raio-pilula); background: oklch(0.95 0.035 258); text-align: center; font: 600 var(--portal-t12)/1 var(--portal-ff-texto); color: oklch(0.44 0.17 258); }
  .tr-saber-cards { display: flex; flex-direction: column; gap: clamp(12px, 2dvh, 18px); }
  .tr-saber[data-so="1"] .tr-saber-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  /* Meu plano: o próximo passo e as tarefas; o check nunca é clicável (vídeo marca sozinho, o resto marca no leitor) */
  .tr-plano {
    flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: clamp(10px, 1.8dvh, 16px); padding: 18px; overflow: hidden;
    border-radius: 22px; border: 1px solid oklch(0.92 0.015 290); background: oklch(1 0 0); box-shadow: 0 10px 28px -16px oklch(0.4 0.12 290 / .4);
  }
  .tr-plano-aviso { display: flex; flex-direction: column; gap: 4px; font: 400 var(--portal-t12)/1.45 var(--portal-ff-texto); color: var(--ink-3); }
  .tr-plano-aviso strong { font: 700 var(--portal-t13)/1.3 var(--portal-ff-titulo); color: var(--ink); }
  .tr-plano-vazio { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; font: 500 var(--portal-t13)/1.4 var(--portal-ff-texto); color: var(--ink-2); }
  .tr-proximo { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 12px; border-radius: 16px; background: oklch(0.975 0.018 295); }
  .tr-btn-violeta {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 12px; cursor: pointer;
    background: linear-gradient(135deg, oklch(0.56 0.23 295), oklch(0.48 0.24 288)); color: oklch(1 0 0); font: 700 var(--portal-t14)/1 var(--portal-ff-texto);
    text-decoration: none; box-shadow: 0 10px 22px -10px oklch(0.5 0.24 292 / .8);
  }
  .tr-btn-violeta:hover { filter: brightness(1.08); }
  .tr-btn-violeta:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
  .tr-btn-violeta svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
  .tr-proximo .tr-btn-violeta { align-self: stretch; }
  .tr-plano-arte { flex: 1 1 0; min-height: 0; display: grid; place-items: center; overflow: hidden; }
  .tr-pr { width: 100%; height: 100%; max-height: 210px; }
  .tr-pr-nuvem { fill: oklch(0.95 0.035 295); }
  .tr-pr-base { fill: oklch(0.6 0.19 295); }
  .tr-pr-folha { fill: oklch(0.99 0.004 290); }
  .tr-pr-clipe { fill: oklch(0.5 0.2 292); }
  .tr-pr-furo { fill: oklch(0.88 0.06 295); }
  .tr-pr-caixa { fill: oklch(0.72 0.17 155); }
  .tr-pr-visto { fill: none; stroke: oklch(1 0 0); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
  .tr-pr-linha { fill: oklch(0.88 0.03 290); }
  .tr-pr-brilho { fill: none; stroke: oklch(0.82 0.15 85); stroke-width: 3.5; stroke-linecap: round; }
  .tr-proximo-alvo { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--ink); text-decoration: none; }
  .tr-proximo-alvo .tr-capa.mini { width: 92px; }
  .tr-proximo-alvo:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: 8px; }
  .tr-todos { flex: 0 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
  .tr-plano-mais { flex: none; display: flex; flex-direction: column; }
  .tr-plano-mais .tr-bloco-rotulo { padding: 6px 4px 2px; }
  .tr-plano-pe { margin-top: auto; padding-top: 4px; }
  .tr-todo {
    position: relative; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 6px; border-bottom: 1px solid oklch(0.94 0.012 290);
    color: var(--ink); text-decoration: none; min-width: 0;
  }
  a.tr-todo:hover { background: oklch(0.98 0.012 295); }
  .tr-todo:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; }
  .tr-todo-check { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 2px solid oklch(0.78 0.06 295); color: oklch(1 0 0); }
  .tr-todo-check[data-ok="1"] { background: var(--ok); border-color: var(--ok); }
  .tr-todo-check svg { width: 12px; height: 12px; stroke-width: 3.4; }
  .tr-todo-ico { flex: none; display: grid; place-items: center; color: oklch(0.5 0.17 295); }
  .tr-todo-ico svg { width: 16px; height: 16px; stroke-width: 1.9; }
  .tr-todo-textos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .tr-todo-titulo { font: 600 var(--portal-t13)/1.25 var(--portal-ff-titulo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tr-todo-meta { font: 400 var(--portal-t12)/1.2 var(--portal-ff-texto); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tr-todo-prog { position: absolute; left: 36px; right: 6px; bottom: 0; height: 3px; border-radius: 2px; background: oklch(0.94 0.02 295); overflow: hidden; }
  .tr-todo-prog-cheia { display: block; width: calc(var(--p, 0) * 1%); height: 100%; background: var(--passo); }
  .tr-todo-estado { flex: none; width: 150px; font: 600 var(--portal-t12)/1 var(--portal-ff-texto); color: var(--ink-2); }
  .tr-todo-estado[data-estado="ok"] { color: var(--ok); }
  .tr-todo-estado[data-estado="obrig"] { color: var(--today); }
  .tr-todo-acao { flex: none; width: 90px; text-align: right; font: 600 var(--portal-t12)/1 var(--portal-ff-texto); color: var(--passo); }
  /* a página do plano */
  .tr-plano-pagina { display: flex; flex-direction: column; gap: 14px; max-width: 980px; }
  .tr-plano-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
  .tr-plano-cab-textos { display: flex; flex-direction: column; gap: 6px; }
  .tr-plano-titulo { font: 700 var(--portal-t26)/1.1 var(--portal-ff-titulo); letter-spacing: -.01em; }
  .tr-plano-sub { max-width: 64ch; font: 400 var(--portal-t13)/1.5 var(--portal-ff-texto); color: var(--ink-2); }
  .tr-plano-ajuda { font: 400 var(--portal-t12)/1.4 var(--portal-ff-texto); color: var(--ink-3); }
  .tr-todos-pagina { border-radius: 18px; border: 1px solid oklch(0.92 0.015 290); background: oklch(1 0 0); box-shadow: 0 10px 28px -16px oklch(0.4 0.12 290 / .4); padding: 4px 12px; overflow: visible; }
  .tr-todo-larga { min-height: 56px; }
  /* quiz do dia: a pergunta e três nomes; o certo ganha verde e o errado vermelho, sempre com ícone ou texto */
  .tr-quiz-card { gap: 8px; padding: 14px 16px; }
  .tr-quiz-pergunta { font: 600 var(--portal-t14)/1.35 var(--portal-ff-titulo); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-wrap: pretty; }
  .tr-quiz-ops { width: 100%; display: flex; flex-direction: column; gap: 6px; }
  .tr-quiz-op {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 0 12px 0 6px; border-radius: var(--raio-pilula); border: 1px solid oklch(0.9 0.02 290); background: oklch(0.99 0.004 290);
    color: var(--ink); font: 500 var(--portal-t13)/1.2 var(--portal-ff-texto); text-align: left; cursor: pointer;
  }
  .tr-quiz-op:hover:not(:disabled) { background: oklch(0.96 0.03 295); border-color: oklch(0.8 0.08 295); }
  .tr-quiz-op:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
  .tr-quiz-op:disabled { cursor: default; }
  .tr-quiz-letra { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: oklch(0.94 0.03 295); color: oklch(0.45 0.18 295); font: 700 var(--portal-t12)/1 var(--portal-ff-dado); }
  .tr-quiz-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tr-quiz-sinal svg { width: 16px; height: 16px; stroke-width: 3; }
  .tr-quiz-op[data-estado="certa"] { background: oklch(0.95 0.06 155); border-color: oklch(0.7 0.14 155); color: oklch(0.32 0.1 155); }
  .tr-quiz-op[data-estado="certa"] .tr-quiz-letra { background: oklch(0.7 0.14 155); color: oklch(1 0 0); }
  .tr-quiz-op[data-estado="errada"] { background: oklch(0.95 0.04 25); border-color: oklch(0.72 0.14 25); color: oklch(0.38 0.12 25); }
  .tr-quiz-op[data-estado="errada"] .tr-quiz-letra { background: oklch(0.7 0.16 25); color: oklch(1 0 0); }
  .tr-quiz-op[data-estado="fora"] { opacity: .55; }
  .tr-quiz-retorno { min-height: 2.4em; font: 600 var(--portal-t13)/1.3 var(--portal-ff-texto); color: var(--ink-2); }
  .tr-saber-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px 18px; border-radius: 18px; border: 1px solid oklch(0.92 0.015 290); background: oklch(1 0 0); box-shadow: 0 10px 28px -16px oklch(0.4 0.12 290 / .4); }
  .tr-tag { display: inline-block; padding: 5px 10px; border-radius: 8px; background: oklch(0.94 0.04 295); color: oklch(0.45 0.18 295); letter-spacing: .06em; }
  .tr-saber-titulo { font: 800 var(--portal-t20)/1.15 var(--portal-ff-titulo); letter-spacing: -.01em; }
  .tr-saber-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; padding: 9px 16px; border-radius: 12px; border: 1px solid oklch(0.76 0.1 295); background: oklch(1 0 0); color: oklch(0.42 0.2 295); font: 600 var(--portal-t13)/1 var(--portal-ff-texto); cursor: pointer; }
  .tr-saber-btn:hover { background: oklch(0.97 0.025 295); }
  .tr-saber-btn:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
  .tr-saber-btn svg { width: 17px; height: 17px; stroke-width: 1.9; }
  .tr-saber-texto { max-width: 62ch; font: 400 var(--portal-t13)/1.5 var(--portal-ff-texto); color: var(--ink-2); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-wrap: pretty; }
  /* menu lateral do Treinamento: a parte escura do layout, em roxo. Coluna inteira, com a marca no alto,
     ícone de cada área em quadradinho colorido e o item atual preenchido. */
  .tr-menu {
    color-scheme: dark; --mn-branco: oklch(0.99 0 0); --mn-cinza: oklch(0.86 0.02 295); --mn-cinza-2: oklch(0.7 0.05 295);
    color: var(--mn-branco); min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 20px; padding: 22px 16px 18px;
    border-radius: 0 28px 28px 0;
    background: radial-gradient(120% 30% at 0% 0%, oklch(0.42 0.18 295 / .5), transparent 70%), linear-gradient(180deg, oklch(0.26 0.13 289), oklch(0.23 0.12 287));
    box-shadow: 0 10px 40px -12px oklch(0.3 0.15 290 / .55);
  }
  .tr-menu-marca { display: flex; align-items: center; gap: 12px; padding: 0 6px 4px; }
  .tr-menu-marca-ico { flex: none; width: 44px; height: 44px; display: grid; place-items: center; color: oklch(0.88 0.1 300); }
  .tr-menu-marca-ico svg { width: 40px; height: 40px; stroke-width: 1.5; }
  .tr-menu-marca-nome { font: 500 var(--portal-t18)/1.05 var(--portal-ff-titulo); letter-spacing: -.01em; color: var(--mn-branco); }
  .tr-menu-marca-nome strong { display: block; font-size: var(--portal-t26); font-weight: 700; letter-spacing: -.02em; }
  .tr-menu-grupo { display: flex; flex-direction: column; gap: 4px; }
  .tr-menu-fim { margin-top: auto; padding-top: 14px; }
  .tr-menu-rotulo { display: flex; align-items: center; gap: 12px; padding: 0 8px 6px; font: 700 var(--portal-t11)/1 var(--portal-ff-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--mn-cinza-2); }
  .tr-menu-rotulo::after { content: ""; flex: 1; height: 1px; background: oklch(1 0 0 / .18); }
  .tr-menu-item, .tr-menu-sub {
    --acento: oklch(0.82 0.12 var(--ha, 300));
    position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 0 12px 0 8px; border: 0; border-radius: 14px; background: none;
    color: var(--mn-cinza); font: 500 var(--portal-t14)/1.2 var(--portal-ff-texto); text-align: left; text-decoration: none; cursor: pointer;
  }
  .tr-menu-item:hover, .tr-menu-sub:hover { background: oklch(1 0 0 / .08); color: var(--mn-branco); }
  .tr-menu-item:focus-visible, .tr-menu-sub:focus-visible { outline: 2px solid oklch(0.9 0.1 300); outline-offset: -2px; }
  .tr-menu-item[aria-current="page"], .tr-menu-sub[aria-current="page"] { color: var(--mn-branco); font-weight: 600; background: oklch(1 0 0 / .1); }
  /* o item atual do topo (Início, Todos...) vai cheio, em degradê */
  .tr-menu-item[aria-current="page"]:not([style*="--ha"]) { background: linear-gradient(135deg, oklch(0.62 0.22 298), oklch(0.5 0.22 290)); box-shadow: 0 6px 18px -6px oklch(0.6 0.24 295 / .7), inset 0 1px 0 oklch(1 0 0 / .18); }
  .tr-menu-ico { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: oklch(1 0 0 / .08); color: var(--mn-branco); }
  /* a área ganha o quadradinho na cor dela, com o ícone branco */
  .tr-menu-item[style*="--ha"] .tr-menu-ico { background: linear-gradient(145deg, oklch(0.7 0.19 var(--ha)), oklch(0.5 0.2 var(--ha))); box-shadow: 0 4px 10px -4px oklch(0.5 0.2 var(--ha) / .8), inset 0 1px 0 oklch(1 0 0 / .25); }
  .tr-menu-ico svg { width: 18px; height: 18px; stroke-width: 1.9; }
  /* as pastas da área em foco: um degrau à direita */
  .tr-menu-sub { min-height: 36px; margin-left: 28px; width: calc(100% - 28px); padding-left: 6px; border-radius: 10px; font-size: var(--portal-t13); font-weight: 400; }
  .tr-menu-sub .tr-menu-ico { width: 24px; height: 24px; background: none; color: var(--acento); }
  .tr-menu-sub .tr-menu-ico svg { width: 15px; height: 15px; }
  .tr-menu-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tr-menu-conta { flex: none; min-width: 28px; padding: 4px 8px; border-radius: var(--raio-pilula); background: oklch(1 0 0 / .12); text-align: center; font: 600 var(--portal-t12)/1 var(--portal-ff-dado); color: var(--mn-branco); }
  .tr-menu-fim .tr-menu-item { justify-content: flex-start; min-height: 48px; border: 1px solid oklch(1 0 0 / .22); background: oklch(1 0 0 / .08); color: var(--mn-branco); font-weight: 600; }
  .tr-menu-fim .tr-menu-item:hover { background: oklch(1 0 0 / .16); }
  .tr-menu-fim .tr-menu-ico { background: none; }
  .tr-topo { flex: none; display: flex; align-items: center; gap: 10px 18px; min-height: 48px; flex-wrap: wrap; }
  .tr-titulo { flex: none; font: 700 var(--portal-t20)/1.1 var(--portal-ff-titulo); letter-spacing: -.01em; }
  .tr-abas { flex: none; display: flex; gap: 0 14px; }
  .tr-aba {
    display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 2px; border: 0; border-bottom: 2px solid transparent; background: none;
    color: var(--ink-2); font: 500 var(--portal-t13)/1 var(--portal-ff-texto); white-space: nowrap; cursor: pointer;
  }
  .tr-aba:hover { color: var(--ink); }
  .tr-aba[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--passo); }
  .tr-aba svg { width: 15px; height: 15px; stroke-width: 1.8; }
  .tr-busca {
    flex: 1 1 240px; max-width: 760px; min-width: 200px; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px; border-radius: var(--raio-pilula);
    background: oklch(1 0 0); border: 1px solid oklch(0.9 0.02 290); box-shadow: 0 6px 20px -10px oklch(0.4 0.14 290 / .35);
  }
  .tr-busca:focus-within { border-color: var(--foco); box-shadow: 0 0 0 3px var(--passo-soft); }
  .tr-busca-ico { flex: none; display: grid; place-items: center; color: oklch(0.5 0.2 295); }
  .tr-busca-ico svg { width: 20px; height: 20px; stroke-width: 2.2; }
  .tr-inicio-esq .tr-busca { max-width: none; }
  .tr-busca-tecla { flex: none; padding: 5px 10px; border-radius: 10px; border: 1px solid oklch(0.9 0.02 290); background: oklch(0.96 0.012 290); color: var(--ink-3); font: 500 var(--portal-t12)/1 var(--portal-ff-dado); }
  .tr-busca-campo { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font: 400 var(--portal-t14)/1.2 var(--portal-ff-texto); }
  .tr-sugerir { flex: none; margin-left: auto; }
  .tr-sugerir svg { width: 15px; height: 15px; }
  .tr-chip-prog {
    margin-left: auto;
    flex: none; display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 20px 0 14px; border-radius: var(--raio-pilula);
    border: 1px solid oklch(0.9 0.02 290); background: oklch(1 0 0); box-shadow: 0 6px 20px -10px oklch(0.4 0.14 290 / .35); color: var(--ink); font: 600 var(--portal-t13)/1 var(--portal-ff-texto); cursor: pointer; white-space: nowrap;
  }
  .tr-chip-prog:hover { background: oklch(0.97 0.02 295); }
  .tr-anel {
    width: 22px; height: 22px; border-radius: 50%;
    background: conic-gradient(var(--ok) calc(var(--p, 0) * 1%), var(--portal-a07) 0);
    -webkit-mask: radial-gradient(circle, transparent 6px, var(--ink) 7px); mask: radial-gradient(circle, transparent 6px, var(--ink) 7px);
  }

  .tr-filtros { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
  .tr-filtro-grupo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .tr-filtro-rotulo { font: 500 var(--portal-t12)/1 var(--portal-ff-texto); color: var(--ink-3); margin-right: 2px; }
  /* O acento da área (visual leve, 04/11/2026): cor só em ponto, ícone e tinta de capa.
     Os dois tokens são locais da tela e leem o --ha de quem os usa. */
  .tr-capa, .tr-ponto, .tr-pasta-folhas, .tr-erro {
    --acento: light-dark(oklch(0.52 0.14 var(--ha, 300)), oklch(0.78 0.12 var(--ha, 300)));
    --acento-fundo: light-dark(oklch(0.965 0.016 var(--ha, 300)), oklch(0.27 0.04 var(--ha, 300)));
  }
  .tr-ponto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--acento); }
  /* filtros: área em texto com ponto, sem borda; "só o que falta" é um interruptor */
  .tr-filtro-grupo .cfg-chip { border-color: transparent; background: none; color: var(--ink-2); }
  .tr-filtro-grupo .cfg-chip:hover { background: var(--portal-a05); color: var(--ink); }
  .tr-filtro-grupo .cfg-chip[aria-pressed="true"] { background: var(--portal-a07); color: var(--ink); }
  .tr-so-falta { position: relative; margin-left: auto; padding-left: 40px; border-color: transparent; background: none; color: var(--ink-2); }
  .tr-so-falta svg { display: none; }
  .tr-so-falta::before { content: ""; position: absolute; left: 6px; top: 50%; width: 26px; height: 16px; margin-top: -8px; border-radius: var(--raio-pilula); background: var(--portal-l14); transition: background var(--dur-1); }
  .tr-so-falta::after { content: ""; position: absolute; left: 9px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--ink); transition: transform var(--dur-1); }
  .tr-so-falta[aria-checked="true"] { color: var(--ink); }
  .tr-so-falta[aria-checked="true"]::before { background: var(--ok); }
  .tr-so-falta[aria-checked="true"]::after { transform: translateX(10px); background: var(--ok-ink); }

  .tr-corpo { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 22px; padding: 4px 0 28px; }
  .tr-sec-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
  .tr-sec-titulo { font: 600 var(--portal-t16)/1.2 var(--portal-ff-titulo); }
  .tr-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 30px 26px; }
  .tr-pastas { display: flex; flex-direction: column; gap: 18px; }
  .tr-area { display: flex; flex-direction: column; gap: 10px; }
  .tr-area-nome { display: flex; align-items: center; gap: 8px; font: 500 var(--portal-t13)/1.2 var(--portal-ff-texto); color: var(--ink-2); }
  .tr-area-nota { font: 400 var(--portal-t125)/1.4 var(--portal-ff-texto); color: var(--ink-3); }

  /* cartão de conteúdo e de pasta: capa 16:9, título em até duas linhas e uma linha de meta */
  .tr-midia { min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 0; border-radius: 10px; color: var(--ink); text-decoration: none; }
  a.tr-midia:hover .tr-capa { border-color: var(--portal-l14); }
  a.tr-midia:hover .tr-midia-titulo { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--portal-l14); }
  a.tr-midia:focus-visible, .tr-linha-abre:focus-visible, .tr-nesta-item:focus-visible, .tr-prog-item:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; }
  .tr-midia[data-semlink="1"] { opacity: .45; cursor: default; }
  .tr-midia-titulo { font: 600 var(--portal-t14)/1.3 var(--portal-ff-titulo); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
  .tr-midia-meta { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .tr-midia-meta-txt { min-width: 0; font: 400 var(--portal-t12)/1.2 var(--portal-ff-texto); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .tr-capa {
    position: relative; display: block; aspect-ratio: 16 / 9; width: 100%; overflow: hidden; border-radius: 8px; border: 1px solid var(--portal-l08);
    background: var(--acento-fundo); transition: border-color var(--dur-1), box-shadow var(--dur-1);
  }
  a.tr-midia:hover .tr-capa { box-shadow: 0 14px 28px -14px oklch(0.4 0.14 290 / .55); }
  .tr-capa img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .tr-capa[data-visto="1"] img, .tr-capa[data-visto="1"] .tr-capa-tipo { opacity: .6; }
  .tr-capa-tipo { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 12px 14px; color: var(--ink-2); }
  .tr-capa-tipo svg { width: 26px; height: 26px; stroke-width: 1.6; color: var(--acento); }
  .tr-capa-tipo.centro { align-items: center; }
  .tr-capa-tipo.centro svg { width: 34px; height: 34px; stroke-width: 1.4; }
  /* capa por tipo: o desenho diz o que é, a cor não */
  .tr-capa-tipo[data-forma="video"] { align-items: center; justify-content: center; text-align: center; }
  .tr-capa-play { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(145deg, oklch(0.62 0.22 298), oklch(0.5 0.22 290)); color: oklch(1 0 0); box-shadow: 0 8px 20px -6px oklch(0.5 0.22 292 / .8), 0 0 0 5px oklch(1 0 0 / .55); }
  .tr-capa-play svg { width: 20px; height: 20px; margin-left: 2px; fill: currentColor; stroke: none; color: inherit; }
  .tr-capa-tipo[data-forma="video"] .tr-capa-texto { -webkit-line-clamp: 1; max-width: 100%; }
  .tr-capa-tipo[data-forma="pdf"] { align-items: center; padding: 8px 0; }
  .tr-capa-pilha { position: relative; display: block; height: 100%; aspect-ratio: 210 / 297; }
  .tr-capa-pilha i { position: absolute; inset: 0; border-radius: 3px 10px 3px 3px; box-shadow: 0 6px 14px -8px oklch(0.4 0.14 290 / .5); }
  .tr-capa-pilha-a { background: oklch(0.88 0.1 340); transform: translateX(-26px) rotate(-9deg); }
  .tr-capa-pilha-b { background: oklch(0.88 0.09 230); transform: translateX(26px) rotate(8deg); }
  .tr-capa-pilha .tr-capa-folha { position: absolute; inset: 0; height: 100%; }
  .tr-capa-folha {
    position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 4px; height: 100%; aspect-ratio: 210 / 297; padding: 8px 8px 6px;
    background: var(--portal-cartao); border: 1px solid var(--portal-l14); border-radius: 3px 10px 3px 3px;
  }
  .tr-capa-folha::before { content: ""; position: absolute; right: -1px; top: -1px; width: 10px; height: 10px; border-radius: 0 0 0 4px; background: var(--acento-fundo); border-left: 1px solid var(--portal-l14); border-bottom: 1px solid var(--portal-l14); }
  .tr-capa-folha .tr-capa-texto { font-size: var(--portal-t105); line-height: 1.2; -webkit-line-clamp: 3; }
  .tr-capa-folha-sel { align-self: flex-start; padding: 3px 7px; border-radius: 6px; background: oklch(0.62 0.21 25); color: oklch(1 0 0); font: 700 var(--portal-t9)/1 var(--portal-ff-dado); letter-spacing: .08em; }
  .tr-capa-tipo[data-forma="pagina"] { align-items: stretch; gap: 6px; padding: 14px 16px; }
  .tr-capa-barras { display: flex; flex-direction: column; gap: 4px; }
  .tr-capa-barras i { display: block; height: 4px; border-radius: 2px; background: var(--portal-l14); }
  .tr-capa-barras i:nth-child(2) { width: 82%; }
  .tr-capa-barras i:nth-child(3) { width: 56%; }
  .tr-capa-tipo[data-forma="pagina"] svg { display: none; }
  .tr-capa-texto { font: 600 var(--portal-t13)/1.25 var(--portal-ff-titulo); color: var(--ink); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .tr-capa-dur {
    position: absolute; right: 6px; bottom: 7px; padding: 3px 6px; border-radius: 5px; background: var(--veu-forte); color: var(--portal-sobre-vitrine);
    font: 500 var(--portal-t11)/1 var(--portal-ff-dado); white-space: nowrap;
  }
  .tr-capa-ok { position: absolute; left: 8px; top: 7px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--ok); color: var(--ok-ink); }
  .tr-capa-ok svg { width: 12px; height: 12px; stroke-width: 3.2; }
  .tr-capa-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--veu); }
  .tr-capa-prog-cheia { display: block; width: calc(var(--p, 0) * 1%); height: 100%; background: var(--passo); }
  .tr-capa-prog-cheia[data-visto="1"] { background: var(--ok); }
  .tr-linha { min-height: 64px; }
  .tr-capa.mini { flex: none; width: 88px; border-radius: 6px; }
  .tr-capa.mini .tr-capa-tipo { align-items: center; padding: 0; }
  .tr-capa.mini .tr-capa-tipo svg { width: 20px; height: 20px; }
  .tr-capa.mini .tr-capa-ok { left: 5px; top: 5px; width: 16px; height: 16px; }
  .tr-capa.mini .tr-capa-dur { display: none; }
  /* a pasta: uma ilustração, não uma pasta */
  .tr-pasta-folhas { position: relative; display: block; }
  /* a capa da pasta: degradê na cor da área, dois círculos de luz e o ícone do assunto em vidro */
  .tr-capa-pasta {
    border-color: transparent;
    background:
      radial-gradient(60% 90% at 88% 0%, oklch(1 0 0 / .28), transparent 62%),
      radial-gradient(50% 70% at 6% 110%, oklch(0.25 0.12 var(--ha, 300) / .35), transparent 65%),
      linear-gradient(135deg, oklch(0.76 0.14 var(--ha, 300)), oklch(0.54 0.2 calc(var(--ha, 300) + 24)));
  }
  .tr-capa-pasta::before { content: ""; position: absolute; right: -9%; top: -34%; width: 58%; aspect-ratio: 1; border-radius: 50%; background: oklch(1 0 0 / .13); }
  .tr-capa-pasta::after { content: ""; position: absolute; left: -7%; bottom: -46%; width: 46%; aspect-ratio: 1; border-radius: 50%; background: oklch(1 0 0 / .1); }
  .tr-capa-arte { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; }
  .tr-capa-arte-ico {
    display: grid; place-items: center; width: clamp(44px, 28%, 72px); aspect-ratio: 1; border-radius: 24%; color: oklch(1 0 0);
    background: oklch(1 0 0 / .2); border: 1px solid oklch(1 0 0 / .38); box-shadow: 0 10px 24px -10px oklch(0.2 0.12 var(--ha, 300) / .6), inset 0 1px 0 oklch(1 0 0 / .4);
    backdrop-filter: blur(6px);
  }
  .tr-capa-arte-ico svg { width: 52%; height: 52%; stroke-width: 1.7; }
  .tr-capa.mini.tr-capa-pasta .tr-capa-arte-ico { width: 56%; border-radius: 30%; }
  a.tr-midia:hover .tr-capa-pasta .tr-capa-arte-ico { transform: translateY(-2px) scale(1.04); transition: transform var(--dur-1); }
  /* o play que aparece ao passar o mouse sobre o quadro de um vídeo */
  a.tr-midia[data-tipo="video"] .tr-capa:has(img)::after {
    content: "\25B6"; position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; opacity: 0; transition: opacity var(--dur-1);
    background: var(--veu-forte); color: var(--portal-sobre-vitrine); font: 400 var(--portal-t14)/1 var(--portal-ff-texto); display: grid; place-items: center; padding-left: 2px;
  }
  a.tr-midia[data-tipo="video"]:hover .tr-capa:has(img)::after { opacity: 1; }
  @media (hover: none) { a.tr-midia[data-tipo="video"] .tr-capa:has(img)::after { display: none; } }
  @media (prefers-reduced-motion: reduce) { .tr-tela * { transition-duration: 0s; } }

  /* pasta aberta: cabeçalho em cima, lista que rola */
  .tr-pasta-cab { display: flex; flex-direction: column; gap: 10px; }
  .tr-migalhas { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; font: 500 var(--portal-t125)/1.3 var(--portal-ff-texto); color: var(--ink-3); }
  .tr-migalhas li { display: flex; align-items: center; gap: 4px; }
  .tr-migalhas li + li::before { content: "›"; }
  .tr-migalha { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--portal-l14); padding: 4px 0; }
  .tr-migalha:hover { color: var(--ink); }
  .tr-migalhas [aria-current="page"] { color: var(--ink); font-weight: 600; }
  .tr-pasta-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
  .tr-pasta-textos { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
  .tr-pasta-nome { font: 700 var(--portal-t22)/1.15 var(--portal-ff-titulo); letter-spacing: -.01em; }
  .tr-pasta-nome:focus { outline: none; }
  .tr-pasta-meta { font: 400 var(--portal-t13)/1.3 var(--portal-ff-texto); color: var(--ink-3); }
  .tr-pasta-linha > a svg { width: 14px; height: 14px; fill: currentColor; stroke: none; }
  .tr-barra { display: block; height: 6px; border-radius: var(--raio-pilula); background: var(--portal-a07); overflow: hidden; }
  .tr-barra-cheia { display: block; width: calc(var(--p, 0) * 1%); height: 100%; border-radius: inherit; background: var(--ok); }

  .tr-lista { display: flex; flex-direction: column; border-top: 1px solid var(--portal-l06); }
  .tr-linha { display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--portal-l06); }
  .tr-linha:hover { background: var(--portal-a02); }
  .tr-linha-visto {
    flex: none; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer; color: var(--ok-ink);
  }
  .tr-linha-visto::before { content: ""; grid-area: 1 / 1; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line-controle); }
  .tr-linha-visto[aria-pressed="true"]::before { border-color: var(--ok); background: var(--ok); }
  .tr-linha-visto svg { grid-area: 1 / 1; z-index: 1; width: 12px; height: 12px; stroke-width: 3.2; }
  .tr-linha-visto:disabled { cursor: default; opacity: .4; }
  span.tr-linha-visto::before { border-color: transparent; }
  .tr-linha-abre { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 8px 10px 8px 0; color: var(--ink); text-decoration: none; }
  .tr-linha-abre[data-semlink="1"] { opacity: .5; }
  .tr-linha-num { flex: none; width: 20px; text-align: right; font: 500 var(--portal-t12)/1 var(--portal-ff-dado); color: var(--ink-3); }
  .tr-linha-textos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .tr-linha-titulo { font: 600 var(--portal-t14)/1.3 var(--portal-ff-titulo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  a.tr-linha-abre:hover .tr-linha-titulo { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--portal-l14); }
  .tr-linha[data-visto="1"] .tr-linha-titulo { color: var(--ink-2); font-weight: 500; }
  .tr-linha-sub { font: 400 var(--portal-t12)/1.2 var(--portal-ff-texto); color: var(--ink-3); }
  .tr-linha-tipo { flex: none; width: 76px; display: inline-flex; align-items: center; gap: 6px; font: 400 var(--portal-t12)/1 var(--portal-ff-texto); color: var(--ink-3); }
  .tr-linha-tipo svg { width: 14px; height: 14px; stroke-width: 1.8; }
  .tr-linha-dur { flex: none; width: 84px; text-align: right; font: 400 var(--portal-t12)/1.2 var(--portal-ff-dado); color: var(--ink-3); }
  .tr-linha-estado { flex: none; width: 92px; text-align: right; font: 600 var(--portal-t12)/1 var(--portal-ff-texto); color: var(--ink-2); }
  .tr-linha-estado[data-estado="ok"] { color: var(--ok); }
  .tr-linha-estado[data-estado="obrig"] { color: var(--today); }
  .tr-linha-estado[data-estado="breve"] { color: var(--ink-3); font-weight: 400; }

  /* leitor: cabeçalho de uma linha, o player na maior largura que cabe na altura e a lista da pasta ao lado */
  .tr-leitor { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
  .tr-leitor-cab { flex: none; display: flex; align-items: center; gap: 10px; min-height: 40px; min-width: 0; }
  .tr-leitor-cab > a svg { width: 18px; height: 18px; }
  .tr-leitor-onde { flex: none; font: 400 var(--portal-t13)/1.2 var(--portal-ff-texto); color: var(--ink-3); }
  .tr-leitor-sep { color: var(--ink-3); }
  .tr-leitor-titulo { min-width: 0; font: 600 var(--portal-t16)/1.2 var(--portal-ff-titulo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tr-leitor-titulo:focus { outline: none; }
  .tr-leitor-miolo { flex: 1; min-height: 0; display: flex; gap: 16px; }
  .tr-palco { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
  .tr-palco-caixa {
    width: min(100%, calc((100dvh - 150px) * 16 / 9)); aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--portal-campo); border: 1px solid var(--portal-l08);
    display: grid; place-items: center;
  }
  .tr-palco[data-tipo="pdf"] .tr-palco-caixa { width: 100%; aspect-ratio: auto; flex: 1; min-height: 0; }
  .tr-palco[data-tipo="fora"] .tr-palco-caixa { aspect-ratio: auto; min-height: 220px; }
  .tr-palco-caixa iframe { display: block; width: 100%; height: 100%; border: 0; color-scheme: normal; }
  .tr-leitor-acoes { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
  .tr-leitor-acoes a svg { width: 14px; height: 14px; }
  .tr-prox-nome { display: inline-block; max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
  .tr-nesta { flex: 0 0 320px; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 0 0 0 14px; border-left: 1px solid var(--portal-l06); }
  .tr-retomar { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--portal-l06); }
  .tr-nesta-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
  .tr-nesta-titulo { font: 600 var(--portal-t13)/1.2 var(--portal-ff-titulo); }
  .tr-nesta-conta { font: 400 var(--portal-t12)/1 var(--portal-ff-dado); color: var(--ink-3); }
  .tr-nesta-lista { flex: 1; min-height: 0; overflow-y: auto; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
  .tr-nesta-item { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 8px; border-radius: 8px; color: var(--ink); text-decoration: none; }
  a.tr-nesta-item:hover { background: var(--portal-a05); }
  .tr-nesta-item[aria-current="true"] { background: var(--passo-soft); }
  .tr-nesta-item[data-semlink="1"] { opacity: .45; }
  .tr-nesta-marca { flex: none; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--line-controle); color: var(--ok-ink); }
  .tr-nesta-marca[data-estado="ok"] { border-color: var(--ok); background: var(--ok); }
  .tr-nesta-marca[data-estado="atual"] { border-color: var(--passo); background: var(--passo); color: var(--passo-ink); }
  .tr-nesta-marca svg { width: 10px; height: 10px; stroke-width: 3.2; }
  .tr-nesta-marca[data-estado="atual"] svg { fill: currentColor; stroke: none; }
  .tr-nesta-nome { flex: 1; min-width: 0; font: 500 var(--portal-t13)/1.3 var(--portal-ff-texto); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .tr-nesta-dur { flex: none; font: 400 var(--portal-t11)/1 var(--portal-ff-dado); color: var(--ink-3); }

  /* Meu progresso: painel lateral (dialog), à direita, na altura da tela */
  .tr-dialogo.tr-painel { width: min(380px, 100vw); max-width: none; height: 100dvh; max-height: none; margin: 0 0 0 auto; border-radius: 0; border-width: 0 0 0 1px; }
  .tr-painel .tr-dialogo-corpo { overflow-y: auto; max-height: calc(100dvh - 64px); gap: 22px; }
  .tr-prog-bloco { display: flex; flex-direction: column; gap: 8px; }
  .tr-prog-titulo { font: 600 var(--portal-t13)/1.2 var(--portal-ff-titulo); color: var(--ink-2); }
  .tr-prog-numero { font: 400 var(--portal-t13)/1.3 var(--portal-ff-texto); color: var(--ink-3); }
  .tr-prog-numero strong { font: 700 var(--portal-t18)/1 var(--portal-ff-titulo); color: var(--ink); }
  .tr-prog-item { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 8px; border-radius: 8px; color: var(--ink); text-decoration: none; }
  a.tr-prog-item:hover { background: var(--portal-a05); }
  .tr-prog-ico { flex: none; display: grid; place-items: center; color: var(--ink-3); }
  .tr-prog-ico svg { width: 16px; height: 16px; stroke-width: 1.8; }
  .tr-prog-textos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .tr-prog-nome { font: 500 var(--portal-t13)/1.3 var(--portal-ff-texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tr-prog-meta { font: 400 var(--portal-t11)/1.2 var(--portal-ff-texto); color: var(--ink-3); }

  /* 1366: o rótulo do Sugerir vira só o ícone; a linha do topo continua uma só */
  @media (max-width: 1440px) {
    .tr-sugerir-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .tr-busca { flex-basis: 200px; }
    .tr-linha-tipo { display: none; }
    .tr-capa.mini { width: 96px; }
  }
  @media (max-width: 1100px) {
    .tr-nesta { display: none; }
  }
  @media (max-width: 1100px) { .tr-vagas { grid-template-columns: minmax(0, 1fr); } .tr-vagas[data-n] > :first-child { grid-column: auto; } }
  @media (max-height: 780px) {
      .tr-dest-meta { display: none; }
    .tr-banner-texto { display: none; }
    .tr-banner-titulo { font-size: var(--portal-t23); }
    .tr-saber-texto { -webkit-line-clamp: 2; }
    .tr-cont .tr-capa.mini { width: 80px; }
  }
  @media (max-width: 1100px), (max-height: 600px) {
    .tr-corpo:has(> .tr-inicio) { overflow-y: auto; }
    .tr-inicio { flex: none; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
    .tr-inicio-esq { grid-template-rows: auto; }
    .tr-inicio-miolo { display: flex; flex-direction: column; overflow: visible; }
    .tr-dest-cards { flex-wrap: wrap; }
    .tr-dest { flex: 1 1 260px; }
    .tr-inicio { flex: none; display: flex; flex-direction: column; }
    .tr-vagas-b .tr-novs, .tr-vagas-b .tr-saber-cards { overflow: visible; }
  }
  @media (max-width: 1280px) { .tr-quadro { grid-template-columns: 244px minmax(0, 1fr); } .tr-menu-marca-nome strong { font-size: var(--portal-t23); } }
  /* celular: o menu vira uma fileira que rola de lado, acima do conteúdo */
  @media (max-width: 821px) {
    .tr-quadro { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .tr-inicio { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
    .tr-inicio-dir { order: -1; }
    .tr-direita { padding: 12px 14px 0; }
    .tr-destaque { flex-direction: column; align-items: stretch; }
    .tr-banner { flex-direction: column; align-items: flex-start; padding: 18px 18px 140px; height: auto; }
    .tr-banner { background-size: auto 150px, auto; background-position: right bottom, 0 0; }
    .tr-banner-textos { max-width: none; }
    .tr-banner-texto { display: block; }
        .tr-destaque-capa { flex: none; }
    .tr-nov-area { display: none; }
    .tr-menu { flex-direction: row; align-items: center; gap: 6px; overflow-x: auto; overflow-y: hidden; padding: 8px; align-self: stretch; margin: 12px 14px 0; border-radius: 20px; }
    .tr-menu-marca { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .tr-menu-item { min-height: 42px; }
    .tr-menu-fim { margin-top: 0; padding-top: 0; }
    .tr-menu-grupo { flex-direction: row; gap: 4px; padding: 0; border: 0; }
    .tr-menu-rotulo { display: none; }
    .tr-menu-item { width: auto; flex: none; white-space: nowrap; }
    .tr-menu-conta { display: none; }
    .tr-menu-sub { display: none; }
    .tr-menu-item[aria-current="page"]::before, .tr-menu-sub[aria-current="page"]::before { display: none; }
  }
  /* celular e tablet: a página volta a rolar inteira */
  @media (max-width: 821px) {
    .tr-tela { height: auto; max-height: none; padding-bottom: 28px; }
    .tr-corpo { overflow: visible; }
    .tr-abas { overflow-x: auto; max-width: 100%; }
    .tr-linha-dur, .tr-linha-estado { display: none; }
    .tr-palco-caixa { width: 100%; }
  }

  /* Início: conteúdo de treino sem link ainda, bem apagado até ter o que abrir (Alex, 16/10/2026). */
  .treino-item[data-semlink="1"] { opacity: .32; filter: grayscale(1); cursor: default; }

  .tr-erros { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 16px; }
  .tr-erro { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 12px; background: var(--portal-cartao); border: 1px solid var(--portal-l08); }
  .tr-erro-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .tr-erro-img {
    position: relative; aspect-ratio: 4 / 3; border-radius: 10px; display: grid; place-items: center; border: 1px solid oklch(0.65 0.2 25 / .5);
    background: repeating-linear-gradient(135deg, var(--portal-a04) 0 10px, var(--portal-a02) 10px 20px), var(--portal-campo);
  }
  .tr-erro-img.certo { border-color: oklch(0.7 0.15 150 / .5); }
  .tr-erro-selo { position: absolute; top: 6px; left: 6px; font: 700 var(--portal-t9)/1 var(--portal-ff-titulo); letter-spacing: .08em; text-transform: uppercase; color: var(--portal-sobre-vitrine); background: oklch(0.6 0.2 25); padding: 3px 6px; border-radius: 999px; }
  .tr-erro-img.certo .tr-erro-selo { color: var(--portal-tinta-ok); background: oklch(0.8 0.15 150); }
  .tr-erro-leg { font: 400 var(--portal-t105)/1.3 var(--portal-ff-dado); color: var(--ink-3); text-align: center; padding: 0 8px; }
  .tr-erro-textos { display: flex; flex-direction: column; gap: 6px; padding: 0 2px; }
  .tr-erro-etapa { font: 600 var(--portal-t11)/1 var(--portal-ff-titulo); letter-spacing: .08em; text-transform: uppercase; color: var(--acento); }
  .tr-erro-titulo { font: 600 var(--portal-t15)/1.25 var(--portal-ff-titulo); }
  .tr-erro-linha { font: 400 var(--portal-t125)/1.5 var(--portal-ff-texto); color: var(--ink-2); }
  .tr-erro-linha strong { color: var(--ink); font-weight: 600; }
  .tr-erro-linha strong.verde { color: var(--ok); }

  .tr-faq { display: flex; flex-direction: column; max-width: 860px; border-top: 1px solid var(--portal-l06); }
  .tr-faq-item { border-bottom: 1px solid var(--portal-l06); }
  .tr-faq-p { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 10px; border: 0; background: none; color: var(--ink); text-align: left; font: 500 var(--portal-t145)/1.3 var(--portal-ff-texto); cursor: pointer; }
  .tr-faq-pergunta { flex: 1; min-width: 0; }
  .tr-faq-sinal { flex: none; color: var(--ink-3); font: 400 var(--portal-t20)/1 var(--portal-ff-titulo); }
  .tr-faq-r { padding: 0 10px 16px; max-width: 72ch; font: 400 var(--portal-t135)/1.55 var(--portal-ff-texto); color: var(--ink-2); }

  .tr-glos-cats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 14px; }
  .tr-glos-total { margin-left: auto; font: 400 var(--portal-t12)/1 var(--portal-ff-texto); color: var(--ink-3); }
  .tr-glos-letras { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 10px; }
  .tr-glos-letras button { min-width: 28px; height: 28px; padding: 0 6px; border: 0; border-radius: 6px; background: none; color: var(--ink-2); font: 600 var(--portal-t12)/1 var(--portal-ff-dado); cursor: pointer; }
  .tr-glos-letras button:hover { background: var(--portal-a07); color: var(--ink); }
  .tr-glos-letras button:focus-visible { outline: 2px solid var(--foco); outline-offset: 1px; }
  .tr-glos { width: 100%; border-collapse: collapse; text-align: left; }
  .tr-glos th { position: sticky; top: 0; z-index: 1; padding: 8px 12px; background: var(--portal-fundo); border-bottom: 1px solid var(--portal-l14); font: 600 var(--portal-t12)/1 var(--portal-ff-texto); color: var(--ink-3); }
  .tr-glos td { padding: 12px; vertical-align: top; border-bottom: 1px solid var(--portal-l06); }
  .tr-glos-termo { width: 24%; font: 600 var(--portal-t14)/1.3 var(--portal-ff-titulo); }
  .tr-glos-cat { width: 16%; font: 400 var(--portal-t12)/1.4 var(--portal-ff-texto); color: var(--ink-3); }
  .tr-glos-def { font: 400 var(--portal-t13)/1.5 var(--portal-ff-texto); color: var(--ink-2); text-wrap: pretty; }
  @media (max-width: 821px) { .tr-glos-cat { display: none; } .tr-glos-termo { width: 36%; } }

  /* vídeo e dica: janelas nativas (dialog), com o véu do portal */
  .tr-dialogo {
    width: min(92vw, 880px); padding: 0; border: 1px solid var(--portal-l14); border-radius: 18px; background: var(--portal-flutuante); color: var(--ink);
    box-shadow: 0 18px 40px -12px var(--portal-sombra);
  }
  .tr-dialogo.estreito { width: min(92vw, 560px); }
  .tr-dialogo::backdrop { background: var(--veu); }
  .tr-dialogo-cab { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--portal-l08); }
  .tr-dialogo-cab h2 { flex: 1; font: 600 var(--portal-t15)/1.3 var(--portal-ff-titulo); }
  .tr-dialogo-corpo { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
  .tr-dica-form { display: flex; flex-direction: column; gap: 14px; }

  /* Usuários e Notificações (config-telas.css traz o resto): o contêiner das duas
     telas movidas e os títulos que na tela de hoje vinham da casca antiga. */
  .cfg-legado-raiz { min-width: 0; }
  .cfg-legado-view { display: flex; flex-direction: column; gap: 14px; }
  .cfg-legado-view > h1 { font: 300 var(--portal-t16)/1.2 var(--portal-ff-titulo); }
  .cfg-legado-view .sub { color: var(--ink-2); font: 400 var(--portal-t13)/1.45 var(--portal-ff-texto); text-wrap: pretty; }
  .cfg-legado-view [hidden] { display: none; }
  .cfg-agenda { display: block; width: 100%; height: calc(100dvh - 220px); min-height: 320px; border: 0; color-scheme: normal; }

  /* ---------------------------------------------------------- estreito */
  @media (max-width: 960px) {
    .destaques { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  @media (max-width: 821px) {
    .app { display: block; }
    .barra-topo {
      position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px; padding: 10px 16px;
      background: var(--portal-lateral); border-bottom: 1px solid var(--portal-l06);
    }
    .barra-topo img { display: block; width: 84px; height: auto; }
    .miolo { min-height: 100dvh; }
    .lateral {
      position: fixed; inset: 0 auto 0 0; --larg-lateral: min(86vw, 300px); z-index: 50;
      transform: translateX(-100%); visibility: hidden;
      /* some DEPOIS de recolher (visibility com atraso) e aparece NA HORA ao
         abrir, senão o foco que vai para o primeiro item não pega: elemento
         invisível não recebe foco. */
      transition: transform var(--dur-2), visibility 0s var(--dur-2);
    }
    body[data-menu="aberto"] .lateral { transform: none; visibility: visible; transition: transform var(--dur-2), visibility 0s; }
    body[data-menu="aberto"] .veu { display: block; position: fixed; inset: 0; z-index: 40; background: var(--veu); }
    .so-celular { display: inline-flex; margin-left: auto; }
    .recolhe { display: none; }
    .hero-texto, .busca, .destaques { width: 100%; max-width: none; }
    .hero { padding: 16px; }
    .inicio { padding-top: 14px; }
  }
}

/* Leitura de comunicado (11/11/2026): o que precisa vencer o g-dialogo e o
   g-btn da camada comum. A tela limpa pedida pelo Alex: veu forte com
   desfoque, modal largo, botoes altos. */
@layer tela {
  .cm-leitura { width: min(760px, 100vw - 48px); max-height: calc(100dvh - 64px); }
  .cm-leitura::backdrop { background: var(--veu-forte); backdrop-filter: blur(6px); }
  .lt-acoes > button { min-height: 46px; padding-inline: 22px; }
  @media (max-width: 600px) {
    .cm-leitura { width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; }
  }
}