/* ==========================================================================
   SUPORTE · ESCOLA TÉCNICA FAT — o visual das telas do aluno do
   suporte-ava.com (HESK 3.4.3), com a cara da Central do Aluno.
   22/10/2026. Decidido com o Marcelo (spec 2026-10-22-suporte-ava-rebranding).

   No servidor mora em theme/hesk3/customer/css/estudar.css e entra pelo
   gancho do <head> do HESK (suporte/ganchos/head.txt, uma linha). O ?v= da
   linha troca a cada versão, para furar o cache. Nenhum PHP nem JS do HESK
   é tocado: o que não se resolve aqui fica dito em suporte/RELATO-css.md.

   ESCOPO: toda regra começa em body.cust-help. Só as telas do aluno têm essa
   classe, e assim nada vaza para o painel da equipe. O teste
   tools/suporte/tests/escopo-css.test.mjs cobra isso a cada rodada.

   COMO VENCE A app.min.css: pelo escopo (body.cust-help soma um elemento e
   uma classe a cada seletor), nunca por !important. As exceções são três, e
   cada uma está anotada onde aparece: a app.min.css usa !important na mesma
   propriedade; o HESK escreve estilo em linha no HTML (style="..."), que só
   cede a !important; e o "sem movimento" do fim, que precisa calar todas as
   transições do HESK de uma vez.

   TOKENS (copiados de central/central.css):
       navy #102770   azul #0059FB (hover #0047C9)   tinta #3A4468 / #5A668C
       meta #6B7594   linha #D5D8E2   linha de campo #B5BBCF
       linha de cartão #E3E7F0   linha fraca #EEF1F7   superfície #F5F7FB
       tint #EAF1FF   fundo #F4F8FB   barra #0A2445   erro #B42318
       r-sm 8 / r-md 10 / r-lg 16, fonte do sistema.
   A mesa usa os padrões do body da Central, sem cor de curso:
       --cur-a #0D2C55   --cur-b #071F3A

   GRID DE 8: toda altura de linha e espaço é múltiplo de 8 (4 só em vão
   apertado). Linhas de texto: 16 (12px), 24 (14–18px), 32 (22–24px),
   40 (32–36px). A barra fica em 60, como no Moodle e na Central.
   ALVO: 24 no mínimo no desktop, 40 no celular; o que parece clicável
   responde na área inteira.
   MIOLO: 1200, laterais de 32 (16 no celular); texto corrido até 720.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. A BASE — fonte, cores, foco e o esqueleto da página
   -------------------------------------------------------------------------- */
body.cust-help {
    background: #F4F8FB;
}
body.cust-help .wrapper {
    background: #F4F8FB;                  /* a app.min.css pinta de branco */
    color: #3A4468;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5rem;
    letter-spacing: normal;
    -webkit-font-smoothing: antialiased;
}
/* A Lato e o .1px de espaçamento estão escritos em dezenas de regras do HESK
   (descrição do artigo, campos, avisos). Em vez de caçar uma a uma, tudo
   herda da .wrapper; o que precisa de outro valor diz o seu adiante. */
body.cust-help .wrapper * {
    font-family: inherit;
    letter-spacing: inherit;
}
body.cust-help :focus-visible {
    outline: 2px solid #0059FB;
    outline-offset: 2px;
}

/* O ESQUELETO. O HESK empilha barra, migalhas e conteúdo em caixas
   separadas, e a busca (ou o título) mora dentro do conteúdo: não existe
   uma caixa que abrace "migalhas + busca" para pintar a mesa de uma vez.
   Então a .main vira uma grade e o miolo do conteúdo some como caixa
   (display: contents): migalhas, busca, título e listas viram linhas da
   mesma grade. A mesa é um ::before posicionado sobre as linhas dela: uma
   pintura só, sem emenda no degradê nem na grade de 32.
   Nenhum JS do HESK procura .main__content ou .contr (conferido no
   app.min.js e no hesk_functions.js em 22/10). */
body.cust-help .main {
    --lado: 32px;
    position: relative;
    isolation: isolate;                   /* a mesa (z-index -1) fica atrás das linhas, não atrás da página */
    display: grid;
    grid-template-columns:
        [tela-start] minmax(var(--lado), 1fr)
        [miolo-start] minmax(0, 1200px)
        [miolo-end] minmax(var(--lado), 1fr)
        [tela-end];
    align-content: start;
    min-width: 0;
}
body.cust-help .main__content,
body.cust-help .main__content > .contr {
    display: contents;
}
body.cust-help .main > *,
body.cust-help .main__content > .contr > * {
    grid-column: miolo;
    min-width: 0;
    margin: 40px 0 0;                     /* o conteúdo claro: 40 entre um bloco e outro */
}
/* A ordem das linhas. A grade segue o HTML, com três ajustes: o título que
   vai para a mesa sobe para logo depois das migalhas (na Categoria ele vem
   antes da busca, como no herói da Central); o aviso de erro do topo do
   formulário desce para o conteúdo claro; e o rodapé fica por último. */
body.cust-help .header {
    order: -3;
}
body.cust-help .breadcrumbs {
    order: -2;
}
body.cust-help .content:has(.kb--folder),
body.cust-help .main__content .article__heading--form,
body.cust-help .main__content .article-heading-tip,
body.cust-help .main__content .select__title {
    order: -1;
}
body.cust-help .footer {
    order: 1;
}
/* O <div style="margin-bottom: 20px"> antes do título, onde o HESK escreve
   os avisos. Vazio, não ocupa nada; com aviso, abre o conteúdo claro.
   O margin-bottom vem em linha no HTML: só cede a !important. */
body.cust-help .main__content > .contr > div[style]:first-child {
    margin-top: 0;
    margin-bottom: 0 !important;
}
body.cust-help .main__content > .contr > div[style]:first-child:has(> *) {
    margin-top: 40px;
}
body.cust-help .main__content > .contr:has(> div[style]:first-child > *) > form {
    margin-top: 24px;
}
/* O traço vazio do fim do artigo não tem função na tela nova. */
body.cust-help .main__content > .contr > .divider {
    display: none;
}
/* A lista da Categoria vem com margin-top: -20px em linha. */
body.cust-help .main__content > .contr > article[style] {
    margin-top: 40px !important;
}


/* --------------------------------------------------------------------------
   2. A BARRA — a do AVA e da Central: #0A2445, 60 de altura
   -------------------------------------------------------------------------- */
body.cust-help .header {
    grid-column: tela;
    margin: 0;
    border: 0;
    background: #0A2445;
}
body.cust-help .header .contr {
    max-width: none;
    padding: 0 12px;                      /* o mesmo canto da marca na Central */
}
body.cust-help .header__inner {
    height: 60px;
    padding: 0;
}
/* A marca da FAT no lugar do título (pedido do Marcelo, 23/10), com
   "Suporte" ao lado depois de um fio. O título do help desk continua no
   link, fora da vista, e é ele que o leitor de tela lê; o "Suporte" do CSS
   não é lido (o "/ ''" do content), para não repetir. */
body.cust-help .header__logo {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    min-height: 40px;
    color: transparent;
    font-size: 0;
    line-height: 0;
}
body.cust-help .header__logo::before {
    content: "";
    flex: none;
    width: 92px;                          /* 447 × 156 do arquivo, em 32 de altura */
    height: 32px;
    background: url("../img/fat-branco.png") left center / contain no-repeat;
}
body.cust-help .header__logo::after {
    content: "Suporte";
    content: "Suporte" / "";
    padding-left: 16px;
    border-left: 1px solid rgba(255, 255, 255, .32);
    color: #F4F8FB;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
    letter-spacing: .02em;
}
body.cust-help .header__logo:hover::after {
    color: #FFFFFF;
}
/* "Voltar ao AVA" na ponta direita da barra (Marcelo, 23/10): o mesmo
   botão da barra da Central (.barra-ava). O link vem do gancho header.txt,
   que o HESK põe logo depois do <body>, fora da .header: por isso ele é
   posto na barra por posição (10 + 40 + 10 = os 60 da barra). */
body.cust-help .estudar-ava {
    position: absolute;
    z-index: 2;
    top: 10px;
    right: 12px;                          /* o mesmo canto do logo, do outro lado */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 15px;
    border: 1px solid rgba(244, 248, 251, .32);
    border-radius: 999px;
    color: #F4F8FB;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 150ms ease, background-color 150ms ease, transform 120ms ease-out;
}
body.cust-help .estudar-ava::before {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13 8H3M7 4L3 8l4 4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13 8H3M7 4L3 8l4 4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}
body.cust-help .estudar-ava:focus-visible {
    outline-color: #FFFFFF;
}
body.cust-help .estudar-ava:active {
    transform: scale(.97);
}
/* No celular "Voltar ao AVA" encostava no "Suporte": fica "AVA" com a
   seta. O texto do link continua lá, e é ele que o leitor de tela lê. */
@media (max-width: 768px) {
    body.cust-help .estudar-ava {
        gap: 4px;                         /* o texto escondido é um item de 0: 4 + 4 = 8 entre seta e "AVA" */
        padding: 0 15px 0 11px;
        font-size: 0;
    }
    body.cust-help .estudar-ava::after {
        content: "AVA";
        content: "AVA" / "";
        font-size: .875rem;
        line-height: 1.5rem;
    }
}
@media (hover: hover) {
    body.cust-help .estudar-ava:hover {
        border-color: rgba(244, 248, 251, .56);
        background-color: rgba(255, 255, 255, .08);
        color: #FFFFFF;
    }
}
body.cust-help .header :focus-visible {
    outline-color: #FFFFFF;
}


/* --------------------------------------------------------------------------
   3. A MESA — a faixa escura do herói da Central (central.css, .heroi),
   de ponta a ponta, embaixo da barra. Recebe as migalhas e, conforme a
   tela, a busca ou o título da página.
   -------------------------------------------------------------------------- */
body.cust-help .main::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    grid-column: tela;
    grid-row: 2 / 4;                      /* migalhas e busca (ou título) */
    background-color: #04152A;            /* para navegador sem color-mix */
    background-color: color-mix(in oklab, #071F3A, #000 40%);
    background-image:                     /* a mesma mesa em hex, para navegador sem color-mix */
        linear-gradient(to right, rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .035) 1px, transparent 1px),
        radial-gradient(40% 160% at 92% 0%, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 70%),
        linear-gradient(160deg, #0A2547 0%, #04152A 100%);
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .035) 1px, transparent 1px),
        radial-gradient(40% 160% at 92% 0%, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 70%),
        linear-gradient(160deg, color-mix(in oklab, #0D2C55, #000 15%) 0%, color-mix(in oklab, #071F3A, #000 40%) 100%);
    background-size: 32px 32px, 32px 32px, 100% 100%, 100% 100%;
    background-position: -1px -1px, -1px -1px, 0 0, 0 0;
    background-repeat: repeat, repeat, no-repeat, no-repeat;
}
/* Categoria (título e busca) e formulário (título e aviso dos campos
   obrigatórios): a mesa cobre uma linha a mais. */
body.cust-help .main:has(.kb--folder)::before,
body.cust-help .main:has(.article-heading-tip)::before {
    grid-row: 2 / 5;
}
/* O que fica sobre a mesa não tem o respiro do conteúdo claro. */
body.cust-help .main > .breadcrumbs,
body.cust-help .main__content > .contr > .help-search,
body.cust-help .main__content > .contr > .content:has(.kb--folder),
body.cust-help .main__content > .contr > .article__heading--form,
body.cust-help .main__content > .contr > .article-heading-tip,
body.cust-help .main__content > .contr > .select__title {
    margin: 0;
}
/* Sobre a barra e a mesa o anel é branco; no claro vale o azul da base. */
body.cust-help .breadcrumbs :focus-visible,
body.cust-help .help-search #search-button:focus-visible,
body.cust-help .help-search .search__submit:focus-visible {
    outline-color: #FFFFFF;               /* azul sobre o navy some; a Central usa branco no escuro */
}

/* As migalhas: a trilha do herói (.heroi-trilha). 48 de mesa em cima e 24
   até o título: com 40 e 8 a hierarquia ficava colada (Marcelo, 23/10). */
body.cust-help .breadcrumbs {
    padding: 48px 0 0;
    background: none;
}
body.cust-help .breadcrumbs .contr {
    max-width: none;
    padding: 0;
}
body.cust-help .breadcrumbs__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-height: 24px;
    margin: 0 0 24px;
    padding: 0;
    color: rgba(255, 255, 255, .88);
    font-size: .875rem;
    line-height: 1.5rem;
}
body.cust-help .breadcrumbs__inner a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    color: #FFFFFF;
    font-size: inherit;
    line-height: inherit;
    font-weight: 400;
}
body.cust-help .breadcrumbs__inner a:hover {
    color: #FFFFFF;
    text-decoration: underline;
}
body.cust-help .breadcrumbs__inner .icon {
    flex: none;
    width: 10px;
    height: 10px;
    margin: 0 8px;
    fill: currentColor;
    opacity: .72;
}
body.cust-help .breadcrumbs__inner .last {
    min-width: 0;
}
/* Na Categoria e no Artigo o último item repete o título que vem logo
   abaixo: fica numa linha só, com reticências, em vez de dobrar a trilha. */
body.cust-help .main:has(.kb--folder, .ticket--article) .breadcrumbs__inner .last {
    flex: 1 1 0;
    min-width: 96px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* O título da página sobre a mesa: o h1 do herói (36/40, 800). Vale para o
   "Olá" do Início, a Categoria, o Enviar um Chamado, o Ver chamado e a
   escolha de assunto. */
body.cust-help .search__title,
body.cust-help .select__title,
body.cust-help .article__heading--form,
body.cust-help .kb--folder {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 48px;
    margin: 0;
    color: #FFFFFF;
    font-size: 2.25rem;
    line-height: 2.5rem;
    font-weight: 800;
    letter-spacing: -.02em;
    text-align: left;
    text-wrap: balance;
}
/* A .kb--folder tem tamanho e peso com !important na app.min.css. */
body.cust-help .content .block__head .kb--folder {
    font-size: 2.25rem !important;
    font-weight: 800 !important;
}
/* O título é o último da mesa no Ver chamado e na escolha de assunto: os 48
   de baixo da mesa vão nele. No formulário, vão no aviso que vem embaixo. */
body.cust-help .select__title,
body.cust-help .article__heading--form {
    padding-bottom: 48px;
}
body.cust-help .article__heading--form:has(+ .article-heading-tip) {
    padding-bottom: 0;
}
/* O ícone ao lado do título: o quadro da cabeça das seções da Central
   (.ctl-secao-cabeca h2 .icon), no azul da marca. */
body.cust-help .article__heading--form .icon-in-circle,
body.cust-help .kb--folder > .icon-folder {
    flex: none;
    box-sizing: border-box;
    width: 48px;
    height: 48px;
    margin: 0;
    border-radius: 8px;
    background-color: #0047C9;
    background-image:
        radial-gradient(90% 60% at 50% 0%, rgba(255, 255, 255, .24), rgba(255, 255, 255, 0) 70%),
        linear-gradient(160deg, #1B6BFF 0%, #0047C9 55%, #102770 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .32),
        inset 0 0 0 1px rgba(255, 255, 255, .12),
        0 12px 24px -12px rgba(7, 31, 58, .48);
}
body.cust-help .article__heading--form .icon-in-circle .icon {
    width: 20px;
    height: 20px;
    fill: #FFFFFF;
}
body.cust-help .kb--folder > .icon-folder {
    padding: 14px;                        /* o desenho de 20 no quadro de 48 */
    fill: #FFFFFF;
    vertical-align: middle;
}
body.cust-help .article__heading--form .ml-1 {
    margin: 0;
}
/* Na Categoria, o "Manual do aluno >" da frente do título repete as
   migalhas: some, e fica só o nome da categoria. */
body.cust-help .kb--folder > .icon-knowledge,
body.cust-help .kb--folder > a,
body.cust-help .kb--folder > .icon-chevron-right {
    display: none;
}
/* A caixa do título da Categoria vem com padding e alinhamento em linha. */
body.cust-help .content:has(.kb--folder) .block__head {
    display: block;
    padding: 0 !important;
    text-align: left;
}
body.cust-help .content .kb--folder {
    margin: 0 0 24px;                     /* a busca vem 24 abaixo do título */
}

/* O aviso dos campos obrigatórios, embaixo do título do formulário: 16 do
   título (é o apoio dele) e 48 de mesa embaixo. O seletor tem o peso do
   "margin: 0" da mesa, que vem antes, para a margem valer. */
body.cust-help .main__content > .contr > .article-heading-tip {
    justify-content: flex-start;
    gap: 4px;
    margin: 16px 0 0;
    padding-bottom: 48px;
    color: rgba(255, 255, 255, .88);
    font-size: .875rem;
    line-height: 1.5rem;
    text-align: left;
}
body.cust-help .article-heading-tip .label.required::after {
    margin-left: 0;                       /* o gap de 4 do aviso já separa */
    color: #FDA29B;                       /* o vermelho do HESK não lê no navy */
}

/* A busca: campo branco de 48 e o botão no azul da marca, na largura de
   uma linha de texto (720). 24 do título e 48 de mesa embaixo. */
body.cust-help .help-search {
    padding-bottom: 48px;
}
body.cust-help .search__title {
    margin: 0 0 24px;
}
body.cust-help .help-search form {
    display: block !important;            /* o form vem com display: inline em linha */
}
body.cust-help .search__form {
    padding: 0;
    background: none;
}
body.cust-help .search__form .form-group {
    display: flex;
    gap: 8px;
    max-width: 720px;
    margin: 0;
}
/* A app.min.css e o <style> da própria página (que nos artigos vem depois
   deste arquivo) dão largura e margem em % pelo id: vence-se pelo id. */
body.cust-help .help-search #kb_search {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 48px;
    margin: 0;
    padding: 0 16px 0 48px;
    border: 1px solid #FFFFFF;
    border-radius: 6px;
    background: #FFFFFF;
    color: #102770;
    font-size: 1rem;
    line-height: 1.5rem;
}
body.cust-help .help-search #kb_search::placeholder {
    color: #6B7594;
}
body.cust-help .help-search #kb_search:focus {
    border-color: #0059FB;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .40);
    outline: 0;
}
/* A lupa é um botão dentro do campo: o alvo é o quadrado de 48 inteiro. */
body.cust-help .search__form .search__submit {
    top: 0;
    bottom: auto;
    left: 0;
    z-index: 1;
    width: 48px;
    height: 48px;
    margin: 0;
    padding: 0;
    border-radius: 6px 0 0 6px;
}
body.cust-help .search__form .search__submit .icon-search {
    width: 20px;
    height: 20px;
    fill: #5A668C;
}
/* A app.min.css força 32 de altura nos .btn-full até 900px com !important:
   o botão da busca precisa de 48 em qualquer largura. */
body.cust-help .help-search #search-button {
    flex: none;
    width: auto;
    min-width: 0;
    height: 48px !important;
    margin: 0;
    padding: 0 24px;
    border: 1px solid #0059FB;
    border-radius: 6px;
    background: #0059FB;
    color: #FFFFFF;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 600;
}
/* As sugestões que o HESK abre enquanto se digita: um painel branco
   embaixo do campo, ainda dentro da mesa. */
body.cust-help .kb-suggestions.boxed {
    max-width: 720px;
    margin: 8px 0 0;
    padding: 8px;
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0 12px 24px -12px rgba(7, 31, 58, .48);
}
body.cust-help .kb-suggestions h6 {
    padding: 0 8px 8px;
    color: #5A668C;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 600;
}
body.cust-help .suggest-preview {
    padding: 8px;
    border-radius: 6px;
    border-bottom: 0;
    color: #3A4468;
    font-size: .875rem;
    line-height: 1.5rem;
}
body.cust-help .suggest-preview .icon-in-circle {
    display: none;
}
body.cust-help .suggest-preview .suggest-preview__title {
    margin: 0;
    color: #102770;
    font-weight: 700;
    line-height: 1.5rem;
}
body.cust-help .suggest-preview__text p {
    margin: 0;
}
body.cust-help a.suggest-preview:hover {
    background: #F5F7FB;
}


/* --------------------------------------------------------------------------
   4. AS LISTAS DE ARTIGOS — Categoria, Início, Pesquisa e Raiz. Cada artigo
   é o cartão claro dos "Mais lidos" da Central (.ctl-lido), sem o número:
   título navy, o que o artigo ensina em tinta suave, a seta no canto, e o
   cartão inteiro é o alvo. Estrelas e visualizações saem da lista.
   -------------------------------------------------------------------------- */
body.cust-help .article:has(> .block__head),
body.cust-help .tabbed__tabs .tabbed__tabs_tab.is-visible {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin-bottom: 0;
    background: none;
    box-shadow: none;
}
/* "Artigos nesta categoria:" e "Resultados da pesquisa": rótulo discreto.
   A app.min.css pinta o bloco de azul e põe color: #fff !important tanto no
   .article .block__head quanto no .h-3 dele: os dois !important abaixo são
   a resposta a esses. */
body.cust-help .article > .block__head {
    grid-column: 1 / -1;
    justify-content: flex-start;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    color: #5A668C !important;
}
body.cust-help .article > .block__head .h-3 {
    margin: 0;
    color: #5A668C !important;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 600;
    text-align: left;
}
body.cust-help .article > .block__head .icon-in-circle {
    display: none;
}
body.cust-help .preview {
    position: relative;
    display: block;
    width: auto;
    padding: 23px 55px 23px 23px;         /* 24 com o fio; à direita, a seta (16) e 16 de folga */
    border: 1px solid #E3E7F0;
    border-radius: 10px;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(16, 39, 112, .04), 0 12px 24px -16px rgba(16, 39, 112, .16);
    color: #102770;
}
body.cust-help .preview::after {
    content: "";
    position: absolute;
    top: 28px;                            /* centro da 1ª linha do título (24 + 12) menos meia seta */
    right: 24px;
    width: 16px;
    height: 16px;
    background-color: #8E97B3;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3l5 5-5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3l5 5-5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}
body.cust-help .preview .icon-in-circle,
body.cust-help .preview .rate {
    display: none;
}
body.cust-help .preview .preview__text {
    display: flex;
    flex-direction: column;
    max-width: none;
}
/* Todos os cartões do mesmo tamanho (Marcelo, 23/10): título em até 2
   linhas e resumo em até 2, e a altura de 2 + 2 vale para todos. Título
   curto ou resumo curto deixam folga embaixo, não um cartão menor.
   24 + 48 + 8 + 48 + 24 = 152; com o rótulo de categoria do Início, 176. */
body.cust-help .preview {
    min-height: 152px;
}
body.cust-help .preview:has(.preview__text > p:not(.navlink__descr)) {
    min-height: 176px;
}
body.cust-help .preview .preview__title {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: #102770;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 700;
    text-wrap: balance;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}
body.cust-help .preview .navlink__descr {
    display: -webkit-box;
    margin: 8px 0 0;
    overflow: hidden;
    color: #5A668C;
    font-size: .875rem;
    line-height: 1.5rem;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    text-wrap: pretty;
}
/* No Início cada artigo diz a categoria: sobe para cima do título, no
   rótulo de categoria da Central (.ctl-lido-cat); o "Categoria:" sai. */
body.cust-help .preview .preview__text > p:not(.navlink__descr) {
    order: -1;
    margin: 0 0 8px;
    color: #0047C9;
    font-size: .75rem;
    line-height: 1rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
body.cust-help .preview .preview__text > p:not(.navlink__descr) .lightgrey {
    display: none;
}
body.cust-help .preview .preview__text > p:not(.navlink__descr) .ml-1 {
    margin: 0;
}
body.cust-help .preview:focus-visible {
    outline: 2px solid #0059FB;
    outline-offset: 2px;
}
@media (hover: hover) {
    body.cust-help .preview:hover {
        border-color: #C9D0E0;
        background: #FFFFFF;
        box-shadow: 0 2px 4px rgba(16, 39, 112, .06), 0 24px 40px -20px rgba(16, 39, 112, .28);
        color: #102770;
    }
    body.cust-help .preview:hover::after {
        background-color: #0059FB;
    }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    body.cust-help .preview {
        transition: transform 200ms cubic-bezier(.2, .8, .2, 1), box-shadow 200ms ease, border-color 150ms ease;
    }
    body.cust-help .preview:hover {
        transform: translateY(-2px);
    }
}
/* Categoria sem artigos: o aviso numa caixa tracejada, no lugar da lista. */
body.cust-help .article > p {
    grid-column: 1 / -1;
    margin: 0;
    padding: 23px;
    border: 1px dashed #D5D8E2;
    border-radius: 10px;
    background: #FFFFFF;
    color: #5A668C;
    font-size: 1rem;
    line-height: 1.5rem;
    text-align: center;
}
/* Duas colunas a partir de 1024, como as listas da Central. */
@media (min-width: 1024px) {
    body.cust-help .article:has(> .block__head),
    body.cust-help .tabbed__tabs .tabbed__tabs_tab.is-visible {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* A raiz do manual (knowledgebase.php) só herda: o título como subtítulo
   da Central e as pastas num cartão branco. */
body.cust-help .content:not(:has(.kb--folder)) > .block__head {
    justify-content: flex-start;
    gap: 16px;
}
body.cust-help .content > .block__head .icon-in-circle {
    display: none;
}
body.cust-help .content:not(:has(.kb--folder)) > .block__head .h-3 {
    margin: 0;
    color: #102770;
    font-size: 1.25rem;
    line-height: 2rem;
    font-weight: 800;
    letter-spacing: -.01em;
}
body.cust-help .topics {
    margin-top: 16px;
    padding: 23px 23px 7px;
    border: 1px solid #E3E7F0;
    border-radius: 10px;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(16, 39, 112, .04), 0 12px 24px -16px rgba(16, 39, 112, .16);
    column-gap: 32px;
}
body.cust-help .topics__block {
    width: calc(50% - 16px);
    margin: 0 0 16px;
}
body.cust-help .topics__title {
    min-height: 24px;
    color: #102770;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 700;
}
body.cust-help .topics__title .icon {
    width: 20px;
    height: 16px;
    fill: #8E97B3;
}
body.cust-help .topics__title .title-link {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    color: #102770;
}
body.cust-help .topics__list {
    padding: 0 0 0 28px;
    color: #102770;
}
body.cust-help .topics__list li::before {
    display: none;
}
body.cust-help .topics__list a {
    display: flex;
    align-items: center;
    min-height: 32px;
    padding: 4px 0;                       /* respiro em padding, não só em altura: o título que quebra em duas linhas guarda o mesmo vão do vizinho */
    margin: 0;
    color: #102770;
    font-size: .875rem;
    line-height: 1.5rem;
}
body.cust-help .topics__list a:hover,
body.cust-help .topics__title .title-link:hover {
    color: #0059FB;
    text-decoration: underline;
}


/* --------------------------------------------------------------------------
   5. O ARTIGO — um cartão branco com a linha de leitura de 720; os
   relacionados numa coluna de 320 ao lado (embaixo no celular).
   -------------------------------------------------------------------------- */
body.cust-help .ticket--article {
    gap: 32px;
    align-items: flex-start;
}
body.cust-help .ticket--article .ticket__body {
    min-width: 0;
    margin: 0;
}
body.cust-help .ticket--article .ticket__body_block {
    margin: 0;
    padding: 39px;
    border: 1px solid #E3E7F0;
    border-radius: 10px;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(16, 39, 112, .04), 0 12px 24px -16px rgba(16, 39, 112, .16);
    text-align: left;                     /* o HESK justifica: fura buracos no texto */
}
body.cust-help .ticket--article .ticket__body_block > * {
    max-width: 720px;
}
body.cust-help .ticket--article .ticket__body_block h1 {
    margin: 0 0 24px;
    padding: 0;
    color: #102770;
    font-size: 2rem;
    line-height: 2.5rem;
    font-weight: 800;
    letter-spacing: -.02em;
    text-wrap: balance;
}
/* O corpo, como veio do editor do HESK (muitas vezes colado do Word). */
body.cust-help .ticket__body_block .block--description {
    margin: 0;
    color: #3A4468;
    font-size: 1rem;
    line-height: 1.5rem;
}
/* A app.min.css (.browser-default) põe margem e recuo em !important. */
body.cust-help .block--description p {
    margin: 0 0 16px !important;
}
body.cust-help .block--description p:last-child {
    margin-bottom: 0 !important;
}
body.cust-help .block--description h2 {
    margin: 32px 0 8px;
    color: #102770;
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
    letter-spacing: -.01em;
}
body.cust-help .block--description h3 {
    margin: 24px 0 8px;
    color: #102770;
    font-size: 1.125rem;
    line-height: 1.5rem;
    font-weight: 700;
}
body.cust-help .block--description h2:first-child,
body.cust-help .block--description h3:first-child {
    margin-top: 0;
}
body.cust-help .block--description ul,
body.cust-help .block--description ol {
    margin: 0 0 16px;
    padding-left: 24px !important;
}
body.cust-help .block--description li {
    margin: 0 0 8px;
}
body.cust-help .block--description li:last-child {
    margin-bottom: 0;
}
body.cust-help .block--description a {
    color: #0059FB;
    text-decoration: underline;
}
body.cust-help .block--description hr {
    height: 0;
    margin: 24px 0;
    border: 0;
    border-top: 1px solid #EEF1F7;
}
body.cust-help .block--description img {
    max-width: 100%;
    height: auto !important;              /* a altura em linha do Word distorce a imagem encolhida */
    border-radius: 8px;
}
body.cust-help .block--description iframe {
    display: block;
    width: 100%;
    max-width: 100%;
    border: 0;
    border-radius: 10px;
}
/* Tabela larga rola dentro dela, não a página. */
body.cust-help .block--description table {
    display: block;
    max-width: 100%;
    margin: 0 0 16px;
    overflow-x: auto;
    border: 0;
    font-size: .875rem;
    line-height: 1.5rem;
}
body.cust-help .block--description td,
body.cust-help .block--description th {
    padding: 7px 8px;
    border: 1px solid #D5D8E2;
    vertical-align: top;
}
body.cust-help .block--description code,
body.cust-help .block--description pre,
body.cust-help .block--description kbd {
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
}
/* Texto colado do Word: tamanho, fonte e cor vêm em style="" e em <font>.
   Estilo em linha só cede a !important; os títulos voltam à escala. */
body.cust-help .block--description span[style],
body.cust-help .block--description p[style],
body.cust-help .block--description li[style],
body.cust-help .block--description div[style],
body.cust-help .block--description strong[style],
body.cust-help .block--description b[style],
body.cust-help .block--description em[style],
body.cust-help .block--description font {
    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
}
body.cust-help .block--description h2[style] {
    color: #102770 !important;
    font-size: 1.5rem !important;
    line-height: 2rem !important;
}
body.cust-help .block--description h3[style] {
    color: #102770 !important;
    font-size: 1.125rem !important;
    line-height: 1.5rem !important;
}

/* "Este artigo foi útil? Sim Não": uma linha discreta embaixo do texto,
   com Sim e Não como botões secundários pequenos (.ctl-botao-sec). */
body.cust-help .ticket__block-footer {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px 8px;
    margin: 32px 0 0;
    padding: 23px 0 0;
    border-top: 1px solid #EEF1F7;
    color: #5A668C;
    font-size: .875rem;
    line-height: 1.5rem;
}
body.cust-help .ticket__block-footer > * {
    margin: 0;
}
body.cust-help .ticket__block-footer > span:first-child {
    margin-right: 8px;
}
body.cust-help .ticket__block-footer > span:not(:first-child) {
    display: none;                        /* o "|" entre Sim e Não */
}
/* A .link sublinha com !important na app.min.css. */
body.cust-help .ticket__block-footer .link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    height: 32px;
    padding: 0 15px;
    border: 1px solid #D5D8E2;
    border-radius: 6px;
    background: #FFFFFF;
    color: #102770;
    font-weight: 600;
    text-decoration: none !important;
}
@media (hover: hover) {
    body.cust-help .ticket__block-footer .link:hover {
        border-color: #0059FB;
        color: #0059FB;
    }
}

/* A coluna do lado: "Detalhes do artigo" sai (identificação, categoria,
   visualizações e estrelas); fica o Voltar. "Artigos relacionados" vira
   uma lista simples, em cima. */
body.cust-help .ticket--article .ticket__params {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 320px;
}
body.cust-help .ticket--article .ticket__params .params--block {
    margin: 0;
    border-radius: 10px;
    background: none;
    box-shadow: none;
}
body.cust-help .ticket--article .ticket__params .details {
    order: 2;
}
body.cust-help .ticket--article .ticket__params .details .accordion-title,
body.cust-help .ticket--article .ticket__params .details .row {
    display: none;
}
body.cust-help .ticket--article .ticket__params .details .accordion-body {
    padding: 0;
}
body.cust-help .ticket--article .ticket__params .details .accordion-body > div {
    text-align: left !important;          /* vem text-align: right em linha */
}
/* O Voltar: link com alvo cheio de 40. */
body.cust-help .ticket--article .ticket__params .details .link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    color: #102770;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 600;
    text-decoration: none !important;
}
body.cust-help .ticket--article .ticket__params .details .link:hover {
    color: #0059FB;
}
body.cust-help .ticket--article .ticket__params .details .icon-back {
    width: 20px;
    height: 12px;
    fill: currentColor;
}
body.cust-help .ticket--article .ticket__params .params--block:not(.details) {
    order: 1;
    padding: 23px;
    border: 1px solid #E3E7F0;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(16, 39, 112, .04), 0 12px 24px -16px rgba(16, 39, 112, .16);
}
body.cust-help .ticket--article .ticket__params .params--block h4 {
    height: auto;
    margin: 0 0 8px;
    padding: 0;
    color: #102770;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 700;
}
body.cust-help .ticket--article .ticket__params .params--block .accordion-body {
    padding: 0;
}
body.cust-help .ticket--article .ticket__params .params--block .list {
    padding: 0;
    color: #102770;
}
/* O fio entre os itens é sombra de 1px por dentro, não borda: borda somaria
   1px e o item mediria 41 em vez de 40. */
body.cust-help .ticket--article .ticket__params .params--block .list li {
    margin: 0;
    box-shadow: inset 0 1px 0 #EEF1F7;
}
body.cust-help .ticket--article .ticket__params .params--block .list li:first-child {
    box-shadow: none;
}
body.cust-help .ticket--article .ticket__params .params--block .list li::before {
    display: none;
}
body.cust-help .ticket--article .ticket__params .params--block .list a {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 8px 0;
    color: #102770;
    font-size: .875rem;
    line-height: 1.5rem;
}
body.cust-help .ticket--article .ticket__params .params--block .list a:hover {
    color: #0059FB;
    text-decoration: underline;
}


/* --------------------------------------------------------------------------
   6. O FORMULÁRIO — um cartão branco, campos em coluna de até 720, os
   campos e o erro da Central (.ctl-form), Curso e Turma como as escolhas
   da Central (.ctl-escolha), anexos na área tracejada e o botão azul.
   -------------------------------------------------------------------------- */
body.cust-help .form-submit-ticket {
    max-width: 800px;                     /* 720 de campo e 40 de cada lado */
    padding: 39px;
    border: 1px solid #E3E7F0;
    border-radius: 10px;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(16, 39, 112, .04), 0 12px 24px -16px rgba(16, 39, 112, .16);
    color: #3A4468;
    font-size: 1rem;
    line-height: 1.5rem;
}
body.cust-help .form-submit-ticket .form-groups {
    max-width: none;
}
body.cust-help .form-submit-ticket .form-group,
body.cust-help .form-submit-ticket .param {
    max-width: 720px;
    margin: 0 0 24px;
}
/* O rótulo: navy 600 14/24, 8 acima do campo. */
body.cust-help .form-submit-ticket .form-group > label,
body.cust-help .form-submit-ticket .param > .label {
    display: flex;
    margin: 0 0 8px;
    color: #102770;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 600;
}
/* O asterisco do obrigatório: ao lado do texto, no vermelho de erro da
   Central (o do HESK flutua meio em cima da palavra). */
body.cust-help .label.required::after,
body.cust-help .form-group.required .label::after {
    content: "*";
    position: static;
    margin-left: 4px;
    color: #B42318;
    font-size: inherit;
    line-height: inherit;
    font-weight: 700;
}
body.cust-help .form-submit-ticket .param .label.required {
    margin-right: 0;
}
/* Os campos: 48, raio 6, fio #B5BBCF, foco com borda e anel azuis. */
body.cust-help .form input.form-control,
body.cust-help .form textarea.form-control {
    height: 48px;
    padding: 0 15px;
    border: 1px solid #B5BBCF;
    border-radius: 6px;
    background: #FFFFFF;
    color: #102770;
    font-size: 1rem;                      /* 16: menos que isso, o iPhone dá zoom no campo */
    line-height: 1.5rem;
}
body.cust-help .form textarea.form-control {
    height: 192px;
    padding: 11px 15px;
    resize: vertical;
}
body.cust-help .form input.form-control:hover,
body.cust-help .form textarea.form-control:hover {
    border-color: #8E97B3;
}
body.cust-help .form input.form-control:focus,
body.cust-help .form textarea.form-control:focus {
    border-color: #0059FB;
    box-shadow: 0 0 0 3px rgba(0, 89, 251, .20);
    outline: 0;
}
/* O traço entre os blocos do formulário: um fio fraco. */
body.cust-help .form-submit-ticket .divider {
    height: 0;
    margin: 8px 0 32px;
    border-top: 1px solid #EEF1F7;
    background: none;
}

/* ERRO. O HESK escreve class="form-group error" no Nome mesmo sem erro (vem
   assim no HTML real, conferido em 22/10): por isso o vermelho NÃO sai de
   .form-group.error. Sai do que só existe com erro de verdade:
   - no formulário, o retorno do servidor marca o campo com .isError e o
     formulário com .invalid (form.invalid .form-control.isError);
   - no Ver chamado, o app.min.js marca o grupo com .error e o formulário com
     .invalid ao enviar vazio (#formNeedValidation.invalid .form-group.error).
   O campo fica com a borda #B42318; o rótulo, também. */
body.cust-help .form.invalid .form-control.isError,
body.cust-help #formNeedValidation.invalid .form-group.error .form-control {
    border-color: #B42318;
}
body.cust-help .form.invalid .form-control.isError:focus,
body.cust-help #formNeedValidation.invalid .form-group.error .form-control:focus {
    box-shadow: 0 0 0 3px rgba(180, 35, 24, .20);
}
body.cust-help .form.invalid .isError > label,
body.cust-help #formNeedValidation.invalid .form-group.error > label {
    color: #B42318;
}
/* A mensagem do campo (só no Ver chamado): a .ctl-form-erro da Central. */
body.cust-help .form-group .form-control__error {
    margin: 8px 0 0;
    padding: 0 0 0 24px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='%23B42318'/%3E%3Cpath d='M8 4.5v4.5' stroke='%23FFF' stroke-width='1.75' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.5' r='1' fill='%23FFF'/%3E%3C/svg%3E") 0 4px / 16px 16px no-repeat;
    color: #B42318;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 600;
    text-align: left;
}
/* O aviso do topo (o HESK o põe acima do título; a grade o traz para o
   começo do conteúdo claro): caixa de erro clara. */
body.cust-help .notification {
    margin: 0;
    padding: 15px 23px;
    border: 1px solid #D5D8E2;
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: none;
    color: #3A4468;
    font-size: .875rem;
    line-height: 1.5rem;
}
body.cust-help .notification::before {
    display: none;
}
body.cust-help .notification.red {
    max-width: 800px;
    border-color: #FDA29B;
    background: #FEF3F2;
    color: #B42318;
}
body.cust-help .notification.green {
    border-color: #A6E3C4;
    background: #ECFDF3;
    color: #067647;
}
body.cust-help .notification.orange {
    border-color: #FEDF89;
    background: #FFFAEB;
    color: #93370D;
}
body.cust-help .notification.blue {
    border-color: #C7D9FF;
    background: #EAF1FF;
    color: #102770;
}
body.cust-help .notification.browser-default p {
    margin: 0 0 8px !important;           /* .browser-default p tem margem em !important */
}
body.cust-help .notification.browser-default p:last-child {
    margin-bottom: 0 !important;
}
body.cust-help .notification.browser-default ul {
    margin: 0;
    padding-left: 24px !important;
}

/* CURSO E TURMA: os rádios viram botões de escolha (.ctl-escolha
   compacta). O rádio continua lá, fora da vista (a app.min.css já o tira
   para a esquerda) e focável; o rótulo é o botão. Curso em duas colunas. */
body.cust-help .form-submit-ticket .form-group:has(> .radio-custom) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
body.cust-help .form-submit-ticket .form-group:has(> .radio-custom) > label {
    grid-column: 1 / -1;
    margin: 0;
}
body.cust-help .form-submit-ticket .radio-custom {
    display: block;
    min-height: 0;
}
body.cust-help .form-submit-ticket .radio-custom [type=radio] + label {
    display: flex;
    align-items: center;
    min-height: 48px;
    height: 100%;
    margin: 0;
    padding: 11px 15px;
    border: 1px solid #D5D8E2;
    border-radius: 8px;
    background: #FFFFFF;
    color: #102770;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 500;
    cursor: pointer;
}
body.cust-help .form-submit-ticket .radio-custom [type=radio] + label::before,
body.cust-help .form-submit-ticket .radio-custom [type=radio] + label::after {
    content: none;
}
body.cust-help .form-submit-ticket .radio-custom [type=radio]:checked + label {
    border-color: #0059FB;
    background: #EAF1FF;
    color: #102770;
    font-weight: 700;
}
body.cust-help .form-submit-ticket .radio-custom [type=radio]:focus-visible + label {
    outline: 2px solid #0059FB;
    outline-offset: 2px;
}
@media (hover: hover) {
    body.cust-help .form-submit-ticket .radio-custom [type=radio]:not(:checked) + label:hover {
        border-color: #0059FB;
    }
}
body.cust-help .form.invalid .radio-custom [type=radio]:not(:checked):required + label {
    border-color: #B42318;
}
/* Cada curso com a sua cor (Marcelo, 23/10): as mesmas da Central
   (central.css, data-cor-curso), escolhidas pelo value do rádio, que é o
   nome do curso. Um quadrinho da cor antes do nome; marcado, o botão vira
   o cartão do curso da Central (degradê e nome em branco). A Turma marcada
   herda a cor do curso escolhido. Curso novo, sem regra aqui, fica com o
   comportamento azul de antes. */
body.cust-help .form-submit-ticket [type=radio][value="Administração de Empresas"] + label   { --curso-a: #0D2C55; --curso-b: #071F3A; }
body.cust-help .form-submit-ticket [type=radio][value="Desenvolvimento de Sistemas"] + label { --curso-a: #6D28D9; --curso-b: #3B1A8C; }
body.cust-help .form-submit-ticket [type=radio][value="Informática para Internet"] + label   { --curso-a: #0369A1; --curso-b: #0C3B66; }
body.cust-help .form-submit-ticket [type=radio][value="Marketing"] + label                   { --curso-a: #C2410C; --curso-b: #7C2D12; }
body.cust-help .form-submit-ticket [type=radio][value="Recursos Humanos"] + label            { --curso-a: #0F766E; --curso-b: #134E4A; }
body.cust-help .form-submit-ticket [type=radio][value="Serviços Jurídicos"] + label          { --curso-a: #8C2346; --curso-b: #4A0F24; }
/* Os ícones dos cursos, os mesmos da Central (Font Awesome Free 6.7.2,
   solid, CC BY 4.0, tirados da fonte que o Moodle usa): o HESK não carrega
   o Font Awesome, então cada desenho vem embutido, como máscara. */
body.cust-help .form-submit-ticket [type=radio][value="Administração de Empresas"] + label { --curso-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M64 64Q64 50 55 41Q46 32 32 32Q18 32 9 41Q0 50 0 64V400Q1 434 23 457Q46 479 80 480H480Q494 480 503 471Q512 462 512 448Q512 434 503 425Q494 416 480 416H80Q65 415 64 400V64ZM471 151Q480 141 480 128Q480 115 471 105Q461 96 448 96Q435 96 425 105L320 211L263 153Q253 144 240 144Q227 144 217 153L105 265Q96 275 96 288Q96 301 105 311Q115 320 128 320Q141 320 151 311L240 221L297 279Q307 288 320 288Q333 288 343 279L471 151Z'/%3E%3C/svg%3E"); } /* fa-chart-line */
body.cust-help .form-submit-ticket [type=radio][value="Desenvolvimento de Sistemas"] + label { --curso-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M393 1Q380 -2 368 4Q357 10 353 23L225 471Q222 484 228 496Q234 507 247 511Q260 514 272 508Q283 502 287 489L415 41Q418 28 412 16Q406 5 393 1ZM473 121Q464 131 464 144Q464 157 473 167L563 256L473 345Q464 355 464 368Q464 381 473 391Q483 400 496 400Q509 400 519 391L631 279Q640 269 640 256Q640 243 631 233L519 121Q509 112 496 112Q483 112 473 121ZM167 121Q157 112 144 112Q131 112 121 121L9 233Q0 243 0 256Q0 269 9 279L121 391Q131 400 144 400Q157 400 167 391Q176 381 176 368Q176 355 167 345L77 256L167 167Q176 157 176 144Q176 131 167 121Z'/%3E%3C/svg%3E"); } /* fa-code */
body.cust-help .form-submit-ticket [type=radio][value="Informática para Internet"] + label { --curso-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M352 256Q352 289 349 320H163Q160 289 160 256Q160 223 163 192H349Q352 223 352 256ZM381 192H504H381H504Q512 223 512 256Q512 289 504 320H381Q384 289 384 256Q384 223 381 192ZM493 160H377H493H377Q361 62 321 8Q381 25 426 64Q470 104 493 160ZM344 160H168H344H168Q177 105 195 65Q211 30 228 14Q245 -1 256 0Q267 -1 284 14Q301 30 317 65Q335 105 344 160ZM135 160H19H135H19Q42 104 86 64Q131 25 191 8Q151 62 135 160ZM8 192H131H8H131Q128 223 128 256Q128 289 131 320H8Q0 289 0 256Q0 223 8 192ZM195 447Q177 407 168 352H344Q335 407 317 447Q301 482 284 498Q267 513 256 512Q245 513 228 498Q211 482 195 447ZM135 352Q151 450 191 504Q131 487 86 448Q42 408 19 352H135ZM493 352Q470 408 426 448Q381 487 322 504Q361 450 377 352H494Z'/%3E%3C/svg%3E"); } /* fa-globe */
body.cust-help .form-submit-ticket [type=radio][value="Marketing"] + label { --curso-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M480 32Q479 11 460 2Q441 -5 425 9L382 53Q345 89 299 109Q252 128 201 128H192H64Q37 129 19 147Q1 165 0 192V288Q1 315 19 333Q37 351 64 352V480Q64 494 73 503Q82 512 96 512H160Q174 512 183 503Q192 494 192 480V352H201Q252 352 299 372Q345 391 382 427L425 471Q441 485 460 478Q479 469 480 448V300Q494 293 503 277Q512 261 512 240Q512 219 503 203Q494 186 480 180V32ZM416 109V240V109V240V371Q371 331 316 310Q261 288 201 288H192V192H201Q261 192 316 170Q371 149 416 109Z'/%3E%3C/svg%3E"); } /* fa-bullhorn */
body.cust-help .form-submit-ticket [type=radio][value="Recursos Humanos"] + label { --curso-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M208 80Q209 60 222 46Q236 33 256 32H320Q340 33 354 46Q367 60 368 80V144Q367 164 354 178Q340 191 320 192H312V232H464Q488 233 504 248Q519 264 520 288V320H528Q548 321 562 334Q575 348 576 368V432Q575 452 562 466Q548 479 528 480H464Q444 479 430 466Q417 452 416 432V368Q417 348 430 334Q444 321 464 320H472V288Q471 281 464 280H312V320H320Q340 321 354 334Q367 348 368 368V432Q367 452 354 466Q340 479 320 480H256Q236 479 222 466Q209 452 208 432V368Q209 348 222 334Q236 321 256 320H264V280H112Q105 281 104 288V320H112Q132 321 146 334Q159 348 160 368V432Q159 452 146 466Q132 479 112 480H48Q28 479 14 466Q1 452 0 432V368Q1 348 14 334Q28 321 48 320H56V288Q57 264 72 248Q88 233 112 232H264V192H256Q236 191 222 178Q209 164 208 144V80Z'/%3E%3C/svg%3E"); } /* fa-sitemap */
body.cust-help .form-submit-ticket [type=radio][value="Serviços Jurídicos"] + label { --curso-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M384 32H512H384H512Q526 32 535 41Q544 50 544 64Q544 78 535 87Q526 96 512 96H398Q389 136 352 153V448H512Q526 448 535 457Q544 466 544 480Q544 494 535 503Q526 512 512 512H320H128Q114 512 105 503Q96 494 96 480Q96 466 105 457Q114 448 128 448H288V153Q251 136 242 96H128Q114 96 105 87Q96 78 96 64Q96 50 105 41Q114 32 128 32H256Q279 1 320 0Q361 1 384 32ZM440 320H585H440H585L512 196L440 320ZM512 416Q464 415 429 393Q395 371 386 337Q383 320 393 305L488 142Q496 128 512 128Q528 129 536 142L631 305Q641 320 638 337Q629 371 595 393Q560 415 512 416ZM127 196 54 320 127 196 54 320H199L127 196ZM1 337Q-2 320 8 305L103 142Q111 128 127 128Q143 129 151 142L246 305Q256 320 253 337Q244 371 209 393Q175 415 127 416Q79 415 44 393Q10 371 1 337Z'/%3E%3C/svg%3E"); } /* fa-scale-balanced */

body.cust-help .form-submit-ticket:has([value="Administração de Empresas"]:checked)   { --turma-a: #0D2C55; --turma-b: #071F3A; }
body.cust-help .form-submit-ticket:has([value="Desenvolvimento de Sistemas"]:checked) { --turma-a: #6D28D9; --turma-b: #3B1A8C; }
body.cust-help .form-submit-ticket:has([value="Informática para Internet"]:checked)   { --turma-a: #0369A1; --turma-b: #0C3B66; }
body.cust-help .form-submit-ticket:has([value="Marketing"]:checked)                   { --turma-a: #C2410C; --turma-b: #7C2D12; }
body.cust-help .form-submit-ticket:has([value="Recursos Humanos"]:checked)            { --turma-a: #0F766E; --turma-b: #134E4A; }
body.cust-help .form-submit-ticket:has([value="Serviços Jurídicos"]:checked)          { --turma-a: #8C2346; --turma-b: #4A0F24; }

/* O botão do curso: o quadro do ícone (32, raio 6) no degradê do curso, à
   esquerda, e o nome. 7 de padding em volta do quadro: 7 + 32 + 7 + os
   fios = 48. */
body.cust-help .form-submit-ticket .radio-custom [type=radio]:is([value="Administração de Empresas"], [value="Desenvolvimento de Sistemas"], [value="Informática para Internet"], [value="Marketing"], [value="Recursos Humanos"], [value="Serviços Jurídicos"]) + label {
    gap: 12px;
    padding: 7px 15px 7px 7px;
}
body.cust-help .form-submit-ticket .radio-custom [type=radio]:is([value="Administração de Empresas"], [value="Desenvolvimento de Sistemas"], [value="Informática para Internet"], [value="Marketing"], [value="Recursos Humanos"], [value="Serviços Jurídicos"]) + label::before {
    content: "";
    position: static;
    flex: none;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 6px;
    background:
        radial-gradient(90% 60% at 50% 0%, rgba(255, 255, 255, .20), rgba(255, 255, 255, 0) 70%),
        linear-gradient(160deg, var(--curso-a) 0%, var(--curso-b) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24);
}
/* O desenho, branco, por cima do quadro: 16 no centro dos 32. */
body.cust-help .form-submit-ticket .radio-custom [type=radio]:is([value="Administração de Empresas"], [value="Desenvolvimento de Sistemas"], [value="Informática para Internet"], [value="Marketing"], [value="Recursos Humanos"], [value="Serviços Jurídicos"]) + label::after {
    content: "";
    position: absolute;
    top: calc(50% - 8px);
    left: 15px;                           /* 7 de padding + 8 até o centro do quadro */
    width: 16px;
    height: 16px;
    opacity: 1;
    transform: none;
    border-radius: 0;
    background-color: #FFFFFF;
    -webkit-mask: var(--curso-icone) center / contain no-repeat;
    mask: var(--curso-icone) center / contain no-repeat;
}
@media (hover: hover) {
    body.cust-help .form-submit-ticket .radio-custom [type=radio]:not(:checked) + label:hover {
        border-color: var(--curso-a, #0059FB);
    }
}
/* Marcado: o cartão do curso. Branco no ponto mais claro de cada degradê
   passa de 4,5 (contas da Central: SJ 8,6 · ADM 13,9 · MKT 5,2 · RH 5,5 ·
   DS 7,1 · II 5,9). */
body.cust-help .form-submit-ticket .radio-custom [type=radio]:is([value="Administração de Empresas"], [value="Desenvolvimento de Sistemas"], [value="Informática para Internet"], [value="Marketing"], [value="Recursos Humanos"], [value="Serviços Jurídicos"]):checked + label,
body.cust-help .form-submit-ticket:has([value="Administração de Empresas"]:checked, [value="Desenvolvimento de Sistemas"]:checked, [value="Informática para Internet"]:checked, [value="Marketing"]:checked, [value="Recursos Humanos"]:checked, [value="Serviços Jurídicos"]:checked) .radio-custom [name="custom1"]:checked + label {
    border-color: transparent;
    background:
        radial-gradient(90% 60% at 50% 0%, rgba(255, 255, 255, .20), rgba(255, 255, 255, 0) 70%),
        linear-gradient(160deg, var(--curso-a, var(--turma-a)) 0%, var(--curso-b, var(--turma-b)) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 8px 16px -8px rgba(7, 31, 58, .40);
    color: #FFFFFF;
}
/* Marcado, o quadro vira o vidro dos ícones da Central sobre o degradê. */
body.cust-help .form-submit-ticket .radio-custom [type=radio]:is([value="Administração de Empresas"], [value="Desenvolvimento de Sistemas"], [value="Informática para Internet"], [value="Marketing"], [value="Recursos Humanos"], [value="Serviços Jurídicos"]):checked + label::before {
    background: linear-gradient(145deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .08) 100%), rgba(255, 255, 255, .10);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .45),
        inset 0 0 0 1px rgba(255, 255, 255, .24);
}
/* Turma: quadrados de 48 numa fileira. O campo é o custom1 desta
   instalação; se o HESK renumerar os campos, a Turma cai nas duas colunas
   do Curso e continua funcionando. */
body.cust-help .form-submit-ticket .form-group:has(> .radio-custom [name="custom1"]) {
    grid-template-columns: repeat(auto-fill, 48px);
}
body.cust-help .form-submit-ticket .radio-custom [name="custom1"] + label {
    justify-content: center;
    width: 48px;
    padding: 11px 0;
    font-variant-numeric: tabular-nums;
}

/* A mensagem e as sugestões do manual que o HESK abre ao digitar. */
body.cust-help .form-submit-ticket .kb-suggestions {
    margin: 8px 0 0;
    padding: 15px;
    border: 1px solid #C7D9FF;
    border-radius: 8px;
    background: #EAF1FF;
}

/* ANEXOS: a área tracejada da Central, o "Adicionar arquivo" como botão
   secundário e o "Limites de envio" ao lado dele. */
body.cust-help .param--attach .attach {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}
/* O div sem classe que embrulha área e botão (no formulário) some; no Ver
   chamado o HESK não põe esse div, e a área e o botão já são da fileira. */
body.cust-help .param--attach .attach > div:not([class]) {
    display: contents;
}
/* O #attachment-holder-* só guarda os input hidden dos anexos enviados. Vem
   com class="hide", que a app.min.css não define: ficava na fileira como item
   de largura zero, e o vão de 16 dele empurrava o botão. Input hidden segue
   no envio do formulário mesmo dentro de display: none. */
body.cust-help .param--attach .attach .hide {
    display: none;
}
body.cust-help .param--attach .dropzone {
    flex: 1 0 100%;
    min-height: 96px;
    margin: 0;
    padding: 23px;
    border: 1px dashed #B5BBCF;
    border-radius: 10px;
    background: #F5F7FB;
}
body.cust-help .param--attach .dropzone .dz-message {
    margin: 0;
}
body.cust-help .param--attach .dropzone .dz-button {
    display: block;
    width: 100%;
    min-height: 48px;
    color: #5A668C;
    font-size: .875rem;
    line-height: 1.5rem;
    text-align: center;
}
/* A dropzone.min.css dá outline: inherit ao .dz-button, e ele herda o "sem
   contorno" do pai. É o único jeito de anexar pelo teclado (o "Adicionar
   arquivo" é um div sem tabindex): o foco precisa aparecer. */
body.cust-help .param--attach .dropzone .dz-button:focus-visible {
    outline: 2px solid #0059FB;
    outline-offset: 2px;
}
body.cust-help .param--attach .dropzone.dz-drag-hover {
    border-color: #0059FB;
    background: #EAF1FF;
}
body.cust-help .param--attach .file-row {
    margin: 0 0 8px;
    border: 1px solid #E3E7F0;
    border-radius: 8px;
    background: #FFFFFF;
    font-size: .875rem;
    line-height: 1.5rem;
}
/* A app.min.css força 32 nos .btn-full até 900px com !important. */
body.cust-help .param--attach .fileinput-button {
    min-width: 0;
    height: 40px !important;
    margin: 0;
    padding: 0 19px;
    border: 1px solid #D5D8E2;
    border-radius: 6px;
    background: #FFFFFF;
    color: #102770;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 600;
}
@media (hover: hover) {
    body.cust-help .param--attach .fileinput-button:hover {
        border-color: #0059FB;
        background: #FFFFFF;
        color: #0059FB;
    }
}
body.cust-help .param--attach .attach-tooltype {
    margin: 0;
}
body.cust-help .param--attach .attach-tooltype .link {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    color: #5A668C;
    font-size: .875rem;
    line-height: 1.5rem;
}

/* LIMITES DE ENVIO: o link abria a janela de 250×500 do HESK. O estudar.js
   (gancho do fim do <body>, suporte/ganchos/footer.txt) troca por este
   balão, que ele põe no fim da fileira dos anexos: com flex-basis de 100%,
   cai na linha de baixo do link, a 16 dele (o vão da fileira). O cartão
   pequeno da Central: fio claro, raio 8, sombra curta. 16 em cima e 24 nos
   lados e embaixo, contando o fio. Escondido ([hidden]) não ocupa a fileira. */
body.cust-help .estudar-limites {
    flex: 1 0 100%;
    max-width: 480px;
    position: relative;
    padding: 15px 23px 23px;
    border: 1px solid #E3E7F0;
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(16, 39, 112, .06), 0 12px 24px -8px rgba(16, 39, 112, .20);
    color: #3A4468;
    transition: opacity 150ms ease-out, transform 150ms ease-out;
}
body.cust-help .estudar-limites[hidden] {
    display: none;
}
/* Ao aparecer, sobe 4 e acende em 150ms (sem movimento na seção 12). */
@starting-style {
    body.cust-help .estudar-limites {
        opacity: 0;
        transform: translateY(-4px);
    }
}
/* A seta: um quadrado de 12 girado, com o fio só nos dois lados de cima. O
   estudar.js grava em --estudar-seta o meio do link, contado da borda
   esquerda do balão, ao abrir e quando a janela muda de largura. */
body.cust-help .estudar-limites::before {
    content: "";
    position: absolute;
    top: -7px;
    left: calc(var(--estudar-seta, 24px) - 6px);
    width: 12px;
    height: 12px;
    border-top: 1px solid #E3E7F0;
    border-left: 1px solid #E3E7F0;
    background: #FFFFFF;
    transform: rotate(45deg);
}
/* O topo: o título e o Fechar, numa linha de 24. */
body.cust-help .estudar-limites__topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 8px;
}
body.cust-help .estudar-limites__titulo {
    color: #102770;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 800;
}
/* O Fechar: alvo de 32 (40 no celular), com margem negativa para não somar
   altura ao topo; o × fica alinhado à borda do texto. O foco é o anel azul
   da base. */
body.cust-help .estudar-limites__fechar {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: -4px -8px -4px 0;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #5A668C;
    cursor: pointer;
}
body.cust-help .estudar-limites__fechar svg {
    display: block;
}
@media (hover: hover) {
    body.cust-help .estudar-limites__fechar:hover {
        background: #F4F8FB;
        color: #102770;
    }
}
/* Os itens: rótulo 12/16 em tinta suave, valor 14/24 em navy; 8 entre um
   item e outro. */
body.cust-help .estudar-limites__itens {
    margin: 0;
}
body.cust-help .estudar-limites__itens dt {
    margin: 8px 0 0;
    color: #5A668C;
    font-size: .75rem;
    line-height: 1rem;
    font-weight: 600;
}
body.cust-help .estudar-limites__itens dt:first-child {
    margin-top: 0;
}
body.cust-help .estudar-limites__itens dd {
    margin: 0;
    color: #102770;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 600;
}
/* As extensões aceitas: etiquetas de 24 no tint, 4 entre elas na linha
   (vão apertado) e 8 entre as linhas e acima: 32 por linha de etiquetas,
   o balão fica na grade com qualquer quebra. */
body.cust-help .estudar-limites__tipos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 4px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}
body.cust-help .estudar-limites__tipos li {
    margin: 0;
    padding: 0 8px;
    border-radius: 4px;
    background: #EAF1FF;
    color: #102770;
    font-size: .75rem;
    line-height: 1.5rem;
    font-weight: 700;
}
/* "Carregando…", enquanto o file_limits.php não chega. */
body.cust-help .estudar-limites__estado {
    margin: 0;
    color: #5A668C;
    font-size: .875rem;
    line-height: 1.5rem;
}
/* Com o balão aberto, o link fica em navy. */
body.cust-help .param--attach .attach-tooltype .link[aria-expanded="true"] {
    color: #102770;
}

/* "Antes de enviar, confira se": caixa tint discreta. O aviso do IP e da
   hora fica, em tinta suave (não se esconde). */
body.cust-help .form-submit-ticket .alert {
    max-width: 720px;
    margin: 0 0 32px;
    border: 0;
    border-radius: 8px;
    background: #EAF1FF;
    color: #3A4468;
    font-size: .875rem;
    line-height: 1.5rem;
}
body.cust-help .form-submit-ticket .alert__inner {
    padding: 16px 24px;
}
body.cust-help .form-submit-ticket .alert__inner > b {
    display: block;
    color: #102770;
    font-weight: 700;
}
body.cust-help .form-submit-ticket .alert__inner > br {
    display: none;
}
body.cust-help .form-submit-ticket .alert__inner > ul {
    margin: 0;
    padding-left: 24px;
    list-style: disc;
}
body.cust-help .form-submit-ticket .alert__inner > ul + br + b {
    margin-top: 16px;
}
body.cust-help .form-submit-ticket .alert__inner > ul:last-child {
    color: #5A668C;
}

/* O botão de enviar e os botões principais dos formulários: a .ctl-botao,
   com 48. A app.min.css força 32 até 900px com !important. */
body.cust-help .form-footer {
    align-items: flex-start;
    gap: 16px;
}
body.cust-help .form-footer .btn,
body.cust-help .form-footer .btn-full {
    min-width: 240px;
    height: 48px !important;
    margin: 0;
    padding: 0 24px;
    border: 1px solid #0059FB;
    border-radius: 6px;
    background: #0059FB;
    color: #FFFFFF;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 600;
}
@media (hover: hover) {
    body.cust-help .form-footer .btn-full:hover,
    body.cust-help .help-search #search-button:hover {
        border-color: #0047C9;
        background: #0047C9;
        color: #FFFFFF;
    }
}
body.cust-help .form-footer .btn-full:focus-visible {
    border-color: #0047C9;
    background: #0047C9;
}


/* --------------------------------------------------------------------------
   7. ESCOLHA DE ASSUNTO E VER CHAMADO (entrada) — um cartão branco menor,
   com os campos e o botão iguais aos do formulário.
   -------------------------------------------------------------------------- */
body.cust-help .main__content > .contr > form:not(.form) {
    max-width: 480px;
    padding: 39px;
    border: 1px solid #E3E7F0;
    border-radius: 10px;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(16, 39, 112, .04), 0 12px 24px -16px rgba(16, 39, 112, .16);
}
/* O seletor de assunto vem numa caixa "display: table" centrada, em linha. */
body.cust-help .main__content > .contr > form:not(.form) > div[style] {
    display: block !important;
    margin: 0 0 24px !important;
}
/* O seletor (selectize): 48, raio 6, fio de campo. A app.min.css pinta o
   seletor de azul ao passar o mouse e no foco, com !important, e a partir de
   900px força 56 de altura e 18px de letra, também com !important. */
body.cust-help .selectize-control.cat-select {
    display: flex;
    width: 100%;
}
body.cust-help .selectize-control .selectize-input {
    width: 100% !important;               /* a app.min.css põe width: auto com !important */
    height: 48px !important;              /* a app.min.css põe 56 a partir de 900px */
    padding: 0 40px 0 15px;
    border: 1px solid #B5BBCF;            /* sem !important: o .isError do app (vermelho) tem que vencer */
    border-radius: 6px;
    background: #FFFFFF;
    color: #102770;
    font-size: 1rem !important;           /* idem: 18px a partir de 900px */
    line-height: 1.5rem;
}
body.cust-help .selectize-control .selectize-input:hover,
body.cust-help .selectize-control .selectize-input.dropdown-active:hover {
    border-color: #8E97B3 !important;
    background: #FFFFFF !important;
    color: #102770;
}
body.cust-help .selectize-control .selectize-input.input-active,
body.cust-help .selectize-control .selectize-input.focus {
    border-color: #0059FB !important;
    box-shadow: 0 0 0 3px rgba(0, 89, 251, .20);
}
/* Com erro, o vermelho fica também no hover (a regra de hover acima é
   !important e venceria o .isError da app.min.css). */
body.cust-help .selectize-control.isError .selectize-input,
body.cust-help .selectize-control.isError .selectize-input:hover {
    border-color: #B42318 !important;
}
body.cust-help .selectize-control .selectize-input .item {
    color: #102770;
}
/* O campo interno do seletor é readonly (não se digita nele) e o JS o deixa
   com 4px de largura em linha. Esticado no resto da caixa, ele não aparece e
   o alvo passa a ser a caixa inteira, que é o que o aluno vê como campo.
   Altura de 40 (e não 46, o vão entre as bordas) para ficar na grade. */
body.cust-help .selectize-control.cat-select .selectize-input > input[readonly] {
    flex: 1 1 auto;
    width: auto !important;               /* a largura de 4px vem em linha */
    min-width: 4px;
    height: 40px;
    cursor: pointer;
}
body.cust-help .selectize-control .selectize-input::after {
    right: 16px;
    opacity: .6 !important;               /* a seta vem a 25% em !important: some no branco */
}
body.cust-help .selectize-dropdown {
    width: 100% !important;               /* idem: largura em linha, medida pelo JS ao abrir */
    margin-top: 4px;
    font-size: 1rem !important;           /* a app.min.css põe 17px a partir de 900px */
    border-radius: 8px;
    box-shadow: 0 12px 24px -12px rgba(7, 31, 58, .32), 0 0 0 1px #E3E7F0;
}
body.cust-help .selectize-dropdown .option {
    min-height: 40px;
    height: auto;
    padding: 8px 16px;
    white-space: normal;                  /* assunto longo quebra em vez de cortar no celular */
    color: #102770;
    font-size: 1rem;
    line-height: 1.5rem;
}
body.cust-help .selectize-dropdown .option.active {
    background: #EAF1FF;
    color: #102770;
}
body.cust-help .main__content > .contr > form:not(.form) .form-footer .btn-full {
    min-width: 0;
    width: 100%;
}

/* Ver chamado: o mesmo cartão de 480, com os dois campos, o "Lembrar"
   (o texto inteiro é o alvo) e o "Esqueceu o código?". */
body.cust-help #formNeedValidation {
    max-width: 480px;
}
body.cust-help #formNeedValidation .form-groups {
    margin: 0;
}
body.cust-help .checkbox-custom [type=checkbox] + label {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding-left: 32px;
    color: #102770;
    font-size: .875rem;
    line-height: 1.5rem;
}
body.cust-help .checkbox-custom [type=checkbox] + label::before {
    top: 50%;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    border: 1px solid #B5BBCF;
    border-radius: 4px;
    background: #FFFFFF;
}
body.cust-help .checkbox-custom [type=checkbox] + label::after {
    top: 50%;
    left: 4px;
    margin-top: -6px;
}
body.cust-help .checkbox-custom [type=checkbox]:checked + label::before {
    border-color: #0059FB;
    background: #EAF1FF;
}
body.cust-help .checkbox-custom [type=checkbox]:focus-visible + label::before {
    outline: 2px solid #0059FB;
    outline-offset: 2px;
}
body.cust-help #formNeedValidation .form-footer {
    align-items: stretch;
    gap: 8px;
}
body.cust-help #formNeedValidation .form-footer .btn-full {
    width: 100%;
    min-width: 0;
}
body.cust-help .form-footer .link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    margin: 0;
    color: #0059FB;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 600;
}

/* CHAMADO ENVIADO — a confirmação vem num .notification.green dentro de um
   segundo .main__content.notice-flash (que o esqueleto também desfaz). Sem
   título fora do aviso, a mesa leva só as migalhas, com os 48 de baixo, e
   o aviso vira o cartão de confirmação: selo de feito, título, código do
   chamado num chip e o botão principal. O "Nenhum e-mail de confirmação?"
   é dica, não erro: o vermelho vem em linha no HTML e só cede a
   !important. Os <br><br> do HESK saem; quem espaça é a margem. */
body.cust-help .main:has(.notice-flash)::before {
    grid-row: 2 / 3;
}
body.cust-help .main:has(.notice-flash) .breadcrumbs {
    padding-bottom: 24px;                 /* + os 24 das migalhas = 48 de mesa */
}
body.cust-help .notice-flash > .notification.green {
    grid-column: miolo;
    justify-self: center;
    width: 100%;
    max-width: 640px;
    margin: 40px 0 0;
    padding: 39px;
    border: 1px solid #E3E7F0;
    border-radius: 10px;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(16, 39, 112, .04), 0 12px 24px -16px rgba(16, 39, 112, .16);
    color: #3A4468;
    font-size: 1rem;
    line-height: 1.5rem;
}
body.cust-help .notice-flash > .notification.green::before {
    content: "";
    display: block;
    position: static;
    width: 48px;
    height: 48px;
    margin: 0 0 24px;
    border-radius: 50%;
    background: #ECFDF3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23067647' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 24px 24px no-repeat;
    box-shadow: inset 0 0 0 1px #A6E3C4;
}
body.cust-help .notice-flash > .notification.green > p {
    margin: 0;
}
body.cust-help .notice-flash > .notification.green > p:first-child {
    margin-bottom: 8px;
    color: #0A2445;
    font-size: 1.375rem;
    line-height: 2rem;
    font-weight: 800;
}
body.cust-help .notice-flash > .notification.green > p > br {
    display: none;
}
body.cust-help .notice-flash > .notification.green .font-weight-bold {
    display: inline-block;
    padding: 0 8px;
    border-radius: 4px;
    background: #EAF1FF;
    color: #102770;
    font-weight: 700;
    letter-spacing: .04em;
    white-space: nowrap;
}
body.cust-help .notice-flash > .notification.green span[style] {
    display: block;
    margin: 24px 0 0;
    padding: 15px 15px 15px 47px;
    border: 1px solid #D5D8E2;
    border-radius: 8px;
    background: #F4F8FB url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='%235A668C'/%3E%3Cpath d='M8 7.5v4' stroke='%23FFF' stroke-width='1.75' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='4.75' r='1' fill='%23FFF'/%3E%3C/svg%3E") 16px 19px / 16px 16px no-repeat;
    color: #3A4468 !important;            /* style="color:red" em linha */
    font-size: .875rem;
    line-height: 1.5rem;
}
body.cust-help .notice-flash > .notification.green span[style] > b:first-child {
    color: #0A2445;
}
body.cust-help .notice-flash > .notification.green .btn-full {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 240px;
    height: 48px !important;              /* a app.min.css força 32 até 900px */
    margin: 32px 0 0;
    padding: 0 24px;
    border: 1px solid #0059FB;
    border-radius: 6px;
    background: #0059FB;
    color: #FFFFFF;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 600;
}
@media (hover: hover) {
    body.cust-help .notice-flash > .notification.green .btn-full:hover {
        border-color: #0047C9;
        background: #0047C9;
        color: #FFFFFF;
    }
}
body.cust-help .notice-flash > .notification.green .btn-full:focus-visible {
    border-color: #0047C9;
    background: #0047C9;
}

/* VER CHAMADO (a conversa) — a .ticket sem --article: à esquerda o chamado
   e a resposta, cada um num cartão branco; à direita os detalhes, numa
   coluna de 320. A mesa leva só as migalhas, como no Chamado enviado. */
body.cust-help .main:has(.ticket__params) .breadcrumbs {
    padding-bottom: 24px;                 /* + os 24 das migalhas = 48 de mesa */
}
body.cust-help .ticket:not(.ticket--article) {
    gap: 32px;
    align-items: flex-start;
}
body.cust-help .ticket:not(.ticket--article) .ticket__body {
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}
body.cust-help .ticket:not(.ticket--article) .ticket__body_block {
    margin: 0;
    padding: 39px;
    border: 1px solid #E3E7F0;
    border-radius: 10px;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(16, 39, 112, .04), 0 12px 24px -16px rgba(16, 39, 112, .16);
    color: #3A4468;
    text-align: left;
}
/* O assunto do chamado: o título da página. */
body.cust-help .ticket:not(.ticket--article) .ticket__body_block > h3 {
    margin: 0 0 8px;
    color: #102770;
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 800;
    letter-spacing: -.01em;
    text-wrap: balance;
}
/* Contato, hora e imprimir: a linha de apoio do título. */
body.cust-help .ticket:not(.ticket--article) .ticket__body_block > .block--head {
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 24px;
    color: #5A668C;
    font-size: .875rem;
    line-height: 1.5rem;
}
body.cust-help .ticket:not(.ticket--article) .ticket__body_block > .block--head > .d-flex {
    flex-wrap: wrap;
    align-items: center;
    gap: 0 16px;
}
body.cust-help .ticket:not(.ticket--article) .block--head .contact {
    display: flex;
    align-items: center;
    gap: 4px;
}
body.cust-help .ticket:not(.ticket--article) .block--head .contact .dropdown label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 24px;
    margin: 0;
    color: #0059FB;
    font-weight: 600;
    cursor: pointer;
}
/* O balão do "Contato": o cartão pequeno da Central (fio claro, raio 8,
   sombra), a 8 do nome, com o rótulo pequeno sobre o e-mail. O HESK pinta
   a linha de azul no hover e o link de branco: sai. */
body.cust-help .ticket:not(.ticket--article) .block--head .contact .dropdown .dropdown-list {
    top: calc(100% + 8px);
    left: 0;
    min-width: 240px;
    padding: 12px 16px;
    border: 1px solid #E3E7F0;
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(16, 39, 112, .06), 0 12px 24px -8px rgba(16, 39, 112, .20);
}
body.cust-help .ticket:not(.ticket--article) .block--head .contact .dropdown .dropdown-list li {
    display: block;
    height: auto;
    padding: 0;
    background: none !important;
    white-space: normal;
}
body.cust-help .ticket:not(.ticket--article) .block--head .contact .dropdown .dropdown-list li .title {
    display: block;
    min-width: 0;
    margin: 0;
    color: #5A668C;
    font-size: .75rem;
    line-height: 1rem;
    font-weight: 600;
}
body.cust-help .ticket:not(.ticket--article) .block--head .contact .dropdown .dropdown-list li .value {
    display: block;
    color: #102770;
}
body.cust-help .ticket:not(.ticket--article) .block--head .contact .dropdown .dropdown-list li a,
body.cust-help .ticket:not(.ticket--article) .block--head .contact .dropdown .dropdown-list li:hover a {
    display: inline-flex;
    width: auto;
    height: auto;
    min-height: 24px;
    padding: 0 !important;                /* a app.min.css põe 0 16px com !important */
    color: #0059FB;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}
body.cust-help .ticket:not(.ticket--article) .block--head time {
    margin: 0;
    color: #5A668C;
}
body.cust-help .ticket:not(.ticket--article) .block--head .btn-action {
    flex: none;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid #D5D8E2;
    border-radius: 6px;
    background: #FFFFFF;
    color: #102770;
}
@media (hover: hover) {
    body.cust-help .ticket:not(.ticket--article) .block--head .btn-action:hover {
        border-color: #8E97B3;
        background: #F4F8FB;
    }
}
/* RA, curso e turma: três linhas de rótulo e valor, 14/24. */
body.cust-help .ticket:not(.ticket--article) .ticket__body_block > div:not([class]) {
    color: #102770;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 600;
}
body.cust-help .ticket:not(.ticket--article) .ticket__body_block .custom-field-title {
    margin-right: 4px;
    color: #5A668C;
    font-weight: 400;
}
/* A mensagem, separada dos dados por um fio. */
body.cust-help .ticket:not(.ticket--article) .ticket__body_block > .block--description {
    margin-top: 24px;
    padding-top: 23px;
    border-top: 1px solid #E3E7F0;
}
/* "Adicionar resposta": o título do cartão de resposta, 20/32. */
body.cust-help .ticket:not(.ticket--article) .ticket__body_block > .text-bold {
    margin: 0 0 24px;
    color: #102770;
    font-size: 1.25rem;
    line-height: 2rem;
    font-weight: 800;
}
body.cust-help .form--reply .form-group {
    max-width: 720px;
    margin: 0 0 24px;
}
body.cust-help .form--reply .form-group > .label,
body.cust-help .form--reply .param > .label {
    display: flex;
    margin: 0 0 8px;
    color: #102770;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 600;
}
body.cust-help .form--reply .param {
    max-width: 720px;
    margin: 0;
}
body.cust-help .form--reply .form__submit {
    align-items: flex-start;
    margin: 32px 0 0;
}
body.cust-help .form--reply .form__submit .btn-full {
    min-width: 240px;
    height: 48px !important;              /* a app.min.css força 32 até 900px */
    margin: 0;
    padding: 0 24px;
    border: 1px solid #0059FB;
    border-radius: 6px;
    background: #0059FB;
    color: #FFFFFF;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 600;
}
@media (hover: hover) {
    body.cust-help .form--reply .form__submit .btn-full:hover {
        border-color: #0047C9;
        background: #0047C9;
        color: #FFFFFF;
    }
}
body.cust-help .form--reply .form__submit .btn-full:focus-visible {
    border-color: #0047C9;
    background: #0047C9;
}

/* Os detalhes: um cartão de 320 que acompanha a rolagem. No topo, o título
   e o Recarregar como botão de ícone (o texto fica para o leitor de tela).
   Depois o estado do chamado numa caixa clara, com o "Marcar como
   resolvido" embaixo dele; o resto em pares de rótulo pequeno sobre o
   valor, para nada quebrar em duas linhas na coluna estreita. */
body.cust-help .ticket:not(.ticket--article) .ticket__params {
    position: sticky;
    top: 24px;
    flex: 0 0 320px;
    width: 320px;
    margin: 0;
}
body.cust-help .ticket:not(.ticket--article) .ticket__params .params--block {
    margin: 0;
    padding: 23px;                        /* o botão do topo alinha com a caixa do estado */
    border: 1px solid #E3E7F0;
    border-radius: 10px;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(16, 39, 112, .04), 0 12px 24px -16px rgba(16, 39, 112, .16);
}
body.cust-help .ticket:not(.ticket--article) .params--block .accordion-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    color: #102770;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 800;
}
body.cust-help .ticket:not(.ticket--article) .params--block .accordion-title > span {
    display: block;                       /* o HESK o esconde no celular */
    flex: 1 1 auto;
    min-width: 0;
}
body.cust-help .ticket:not(.ticket--article) .params--block .accordion-title > .btn.link,
body.cust-help .ticket:not(.ticket--article) .params--block .btn-toggler {
    flex: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 1px solid #D5D8E2;
    border-radius: 6px;
    background: #FFFFFF;
    color: #102770;
    text-decoration: none !important;     /* a .link sublinha com !important */
}
body.cust-help .ticket:not(.ticket--article) .params--block .accordion-title > .btn.link {
    display: inline-flex;
}
body.cust-help .ticket:not(.ticket--article) .params--block .accordion-title .icon {
    width: 16px;
    height: 16px;
    fill: currentColor;
}
body.cust-help .ticket:not(.ticket--article) .params--block .accordion-title > .btn.link .ml-1 {
    position: absolute;                   /* fora da vista, não do leitor de tela */
    width: 1px;
    height: 1px;
    margin: 0 !important;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
@media (hover: hover) {
    body.cust-help .ticket:not(.ticket--article) .params--block .accordion-title > .btn.link:hover,
    body.cust-help .ticket:not(.ticket--article) .params--block .btn-toggler:hover {
        border-color: #0059FB;
        background: #FFFFFF;
        color: #0059FB;
    }
}
body.cust-help .ticket:not(.ticket--article) .params--block .accordion-body {
    display: flex;
    flex-direction: column;
    padding: 8px 0 0;
}
body.cust-help .ticket:not(.ticket--article) .params--block .accordion-body .row {
    display: block;
    margin: 0 !important;                 /* um deles vem com margin-bottom em linha */
    padding: 8px 0 7px;
    border-bottom: 1px solid #EEF1F7;
}
body.cust-help .ticket:not(.ticket--article) .params--block .accordion-body .row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}
body.cust-help .ticket:not(.ticket--article) .params--block .row .title {
    width: auto;                          /* o HESK fixa uma coluna estreita */
    max-width: none;
    margin: 0;
    color: #5A668C;
    font-size: .75rem;
    line-height: 1rem;
    font-weight: 600;
}
body.cust-help .ticket:not(.ticket--article) .params--block .row .value {
    display: block;
    margin: 0;
    color: #102770;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 600;
    text-align: left;
    overflow-wrap: anywhere;
}
/* O estado (a única linha com um span de classe no valor) e o "Marcar
   como resolvido" logo depois dele sobem para o topo e viram uma caixa só. */
/* Rótulo e chip numa linha só (Marcelo, 23/10). */
body.cust-help .ticket:not(.ticket--article) .params--block .row:has(> .value:not(.priority) > span[class]) {
    order: -2;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px !important;
    padding: 12px 16px;
    border: 0;
    border-radius: 8px;
    background: #F4F8FB;
}
body.cust-help .ticket:not(.ticket--article) .params--block .row:has(> .value:not(.priority) > span[class]):has(+ .row > .value.center) {
    margin-bottom: 0 !important;
    border-radius: 8px 8px 0 0;
}
body.cust-help .ticket:not(.ticket--article) .params--block .row:has(> .value:not(.priority) > span[class]) > .title {
    font-size: .875rem;
    line-height: 1.5rem;
}
body.cust-help .ticket:not(.ticket--article) .params--block .row:has(> .value:not(.priority) > span[class]) > .value {
    flex: none;
}
body.cust-help .ticket:not(.ticket--article) .params--block .row .value > span[class] {
    display: inline-block;
    margin: 0;
    padding: 0 12px;
    border-radius: 999px;
    background: #EAF1FF;
    color: #102770;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 700;
}
/* Cor do chip por estado do HESK (a classe do span). open e inprogress
   ficam no azul acima; só fundo e letra mudam, o formato é o mesmo. */
body.cust-help .ticket:not(.ticket--article) .params--block .row .value > span[class].resolved {
    background: #E3F5EA;
    color: #0B6B35;
}
body.cust-help .ticket:not(.ticket--article) .params--block .row .value > span[class].waitingreply,
body.cust-help .ticket:not(.ticket--article) .params--block .row .value > span[class].replied {
    background: #FFF3D6;
    color: #7A4B00;
}
body.cust-help .ticket:not(.ticket--article) .params--block .row .value > span[class].onhold {
    background: #EEF1F7;
    color: #3A4468;
}
/* "[Marcar como resolvido]": os colchetes são texto solto e somem com o
   font-size 0; o link vira o botão secundário da caixa do estado. */
body.cust-help .ticket:not(.ticket--article) .params--block .row:has(> .value.center) {
    order: -1;
    margin: 0 0 8px !important;
    padding: 0 16px 16px;
    border: 0;
    border-radius: 0 0 8px 8px;
    background: #F4F8FB;
}
body.cust-help .ticket:not(.ticket--article) .params--block .row:has(> .value.center) > .title {
    display: none;
}
body.cust-help .ticket:not(.ticket--article) .params--block .row > .value.center {
    font-size: 0;
    line-height: 0;                       /* a linha dos colchetes ocupava 24 mesmo com letra 0 */
}
body.cust-help .ticket:not(.ticket--article) .params--block .row > .value.center > a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid #B5BBCF;
    border-radius: 6px;
    background: #FFFFFF;
    color: #102770;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 600;
    text-decoration: none !important;
}
@media (hover: hover) {
    body.cust-help .ticket:not(.ticket--article) .params--block .row > .value.center > a:hover {
        border-color: #0059FB;
        color: #0059FB;
    }
}


/* --------------------------------------------------------------------------
   8. O INÍCIO — os dois atalhos são os cartões escuros do painel da
   Central (.ctl-cartao, estética aprovada em 20/10): degradê do azul da
   marca, grade de 24 apagada, luz difusa no alto, ícone branco no quadro
   de vidro, raio 10. Embaixo, o manual com as abas e a mesma lista.
   -------------------------------------------------------------------------- */
body.cust-help .nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
body.cust-help .navlink {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: auto;
    max-width: none;
    min-height: 192px;                    /* 24 + ícone 48 + 24 + nome 24 + frase 48 + 24 */
    margin: 0;
    padding: 24px;
    border-radius: 10px;
    background-color: #0047C9;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .04) 1px, transparent 1px),
        radial-gradient(90% 55% at 50% 0%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 70%),
        linear-gradient(160deg, #1B6BFF 0%, #0047C9 55%, #102770 100%);
    background-size: 24px 24px, 24px 24px, 100% 100%, 100% 100%;
    background-position: -1px -1px, -1px -1px, 0 0, 0 0;
    background-repeat: repeat, repeat, no-repeat, no-repeat;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .16),
        0 2px 4px rgba(7, 31, 58, .12),
        0 12px 24px -8px rgba(7, 31, 58, .32);
    color: #FFFFFF;
}
body.cust-help .navlink:hover {
    background-color: #0047C9;
    color: #FFFFFF;
}
/* "Visualizar chamados existentes" num azul-oceano, para os dois atalhos
   não parecerem um só (Marcelo, 23/10). Branco no ponto mais claro: 5,9:1. */
body.cust-help .navlink[href*="ticket.php"],
body.cust-help .navlink[href*="ticket.php"]:hover {
    background-color: #075985;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .04) 1px, transparent 1px),
        radial-gradient(90% 55% at 50% 0%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 70%),
        linear-gradient(160deg, #0369A1 0%, #075985 55%, #0C3B66 100%);
}
body.cust-help .navlink .icon-in-circle {
    width: 48px;
    height: 48px;
    margin: 0;
    border-radius: 8px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .08) 100%), rgba(255, 255, 255, .10);
    -webkit-backdrop-filter: blur(14px) saturate(1.6);
    backdrop-filter: blur(14px) saturate(1.6);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .45),
        inset 0 0 0 1px rgba(255, 255, 255, .24),
        inset 0 -1px 0 rgba(0, 0, 0, .12),
        0 12px 24px -10px rgba(0, 0, 0, .45);
}
body.cust-help .navlink:hover > .icon-in-circle {
    background: linear-gradient(145deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .08) 100%), rgba(255, 255, 255, .10);
}
body.cust-help .navlink .icon-in-circle .icon {
    width: 20px;
    height: 20px;
    fill: #FFFFFF;
}
body.cust-help .navlink .navlink__title {
    margin: 24px 0 0;
    color: #FFFFFF;
    font-size: 1.125rem;
    line-height: 1.5rem;
    font-weight: 700;
}
body.cust-help .navlink .navlink__descr {
    color: rgba(255, 255, 255, .88);
    font-size: .875rem;
    line-height: 1.5rem;
}
/* A seta diz que o cartão inteiro é o alvo, na altura do ícone. */
body.cust-help .navlink::after {
    content: "";
    position: absolute;
    top: 40px;                            /* centro do quadro do ícone (24 + 24) menos meia seta */
    right: 24px;
    width: 16px;
    height: 16px;
    background-color: rgba(255, 255, 255, .72);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3l5 5-5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3l5 5-5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}
body.cust-help .navlink:focus-visible {
    outline: 2px solid #0059FB;
    outline-offset: 2px;
}
@media (hover: hover) {
    body.cust-help .navlink:hover {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .16),
            0 2px 4px rgba(7, 31, 58, .12),
            0 24px 48px -12px rgba(7, 31, 58, .40);
    }
    body.cust-help .navlink:hover::after {
        background-color: #FFFFFF;
    }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    body.cust-help .navlink {
        transition: transform 200ms cubic-bezier(.2, .8, .2, 1), box-shadow 200ms ease;
    }
    body.cust-help .navlink:hover {
        transform: translateY(-4px);
    }
}

/* O manual no Início: o título vira subtítulo da Central e as duas abas
   viram abas de texto, com o traço azul embaixo da que está aberta. */
body.cust-help .article__heading:not(.article__heading--form) {
    margin: 0 0 16px;
    color: #102770;
    font-size: 1.25rem;
    line-height: 2rem;
    font-weight: 800;
    letter-spacing: -.01em;
    text-align: left;
}
body.cust-help .article__heading:not(.article__heading--form) a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    color: #102770;
}
body.cust-help .article__heading:not(.article__heading--form) a:hover {
    color: #0059FB;
    text-decoration: underline;
}
body.cust-help .article__heading:not(.article__heading--form) .icon-in-circle {
    display: none;
}
body.cust-help .article__heading a .icon-in-circle + span {
    margin: 0;
}
body.cust-help .tabbed__head {
    justify-content: flex-start;
    margin: 0 0 24px;
    border-bottom: 1px solid #D5D8E2;
}
body.cust-help .tabbed__head .tabbed__head_tabs {
    align-items: stretch;
    gap: 24px;
}
/* As abas são <li> com clique do app.min.js: não recebem foco pelo
   teclado (é do HTML do HESK; fica dito no relato). */
body.cust-help .tabbed__head .tabbed__head_tabs li {
    min-width: 0;
    min-height: 40px;
    margin: 0 0 -1px;
    padding: 8px 0 6px;
    border-bottom: 2px solid transparent;
    background: none;
    color: #5A668C;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 600;
    text-align: left;
    box-shadow: none;
}
body.cust-help .tabbed__head .tabbed__head_tabs li:not(.current):hover {
    border-bottom-color: #B5BBCF;
    background: none;
    color: #102770;
}
body.cust-help .tabbed__head .tabbed__head_tabs li.current {
    border-bottom-color: #0059FB;
    background: none;
    color: #102770;
    box-shadow: none;
}
body.cust-help .article__footer {
    align-items: flex-start;
    margin: 24px 0 0;
}
/* "Ver todo o manual do aluno": botão secundário (.ctl-botao-sec), 40.
   A app.min.css força 32 até 900px com !important. */
body.cust-help .article__footer .btn--blue-border {
    height: 40px !important;
    padding: 0 19px;
    border: 1px solid #D5D8E2;
    border-radius: 6px;
    background: #FFFFFF;
    color: #102770;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 600;
}
@media (hover: hover) {
    body.cust-help .article__footer .btn--blue-border:hover {
        border-color: #0059FB;
        color: #0059FB;
    }
}


/* --------------------------------------------------------------------------
   9. O RODAPÉ — "Powered by HESK" discreto, centrado, sem sumir: a licença
   gratuita exige. A app.min.css desta instalação esconde o rodapé
   (display: none); aqui ele volta.
   -------------------------------------------------------------------------- */
body.cust-help .footer {
    display: block;
    margin: 0;
    padding: 48px 16px 32px;
    color: #5A668C;                       /* o meta #6B7594 dava 4,3:1 no fundo #F4F8FB, abaixo dos 4,5 do AA em 12px (checkup de 23/10) */
    font-size: .75rem;
    line-height: 1rem;
    text-align: center;
}
/* A .footer a sublinha com !important na app.min.css: fica o sublinhado
   (é link); a cor muda pelo escopo. O alvo cresce para 24. */
body.cust-help .footer a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    color: #5A668C;
}
body.cust-help .footer a:hover {
    color: #102770;
}


/* --------------------------------------------------------------------------
   10. O CELULAR (até 768) — laterais de 16, mesa de 24, alvos de 40, nada
   mais largo que a tela.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {          /* o mesmo corte da app.min.css, para o artigo não sair diferente em 768 */
    body.cust-help .main {
        --lado: 16px;
    }
    body.cust-help .main__content > .contr > * {
        margin-top: 32px;
    }
    body.cust-help .main__content > .contr > article[style] {
        margin-top: 32px !important;
    }
    body.cust-help .main::before {
        background-size: 24px 24px, 24px 24px, 100% 100%, 100% 100%;
    }

    /* A mesa: 32 em cima e embaixo; título 22/32. */
    body.cust-help .breadcrumbs {
        padding-top: 32px;
    }
    body.cust-help .help-search,
    body.cust-help .select__title,
    body.cust-help .article__heading--form,
    body.cust-help .main__content > .contr > .article-heading-tip {
        padding-bottom: 32px;
    }
    body.cust-help .search__title,
    body.cust-help .content .kb--folder {
        margin-bottom: 16px;
    }
    body.cust-help .main__content > .contr > .article-heading-tip {
        margin-top: 8px;
    }
    body.cust-help .article__heading--form:has(+ .article-heading-tip) {
        padding-bottom: 0;
    }
    body.cust-help .search__title,
    body.cust-help .select__title,
    body.cust-help .article__heading--form,
    body.cust-help .kb--folder {
        min-height: 40px;
        font-size: 1.375rem;
        line-height: 2rem;
        letter-spacing: -.01em;
    }
    body.cust-help .content .block__head .kb--folder {
        font-size: 1.375rem !important;
    }
    body.cust-help .article__heading--form .icon-in-circle,
    body.cust-help .kb--folder > .icon-folder {
        width: 40px;
        height: 40px;
    }
    body.cust-help .kb--folder > .icon-folder {
        padding: 10px;
    }
    /* Migalhas: cada link com 40 de alvo; as linhas da trilha ficam a 40
       uma da outra, sem sobrepor os alvos. Os 8 de baixo somam com os 8
       de folga do alvo: 16 de vista até o título. */
    body.cust-help .breadcrumbs__inner {
        margin-bottom: 8px;
    }
    body.cust-help .breadcrumbs__inner a,
    body.cust-help .breadcrumbs__inner .last {
        min-height: 40px;
    }
    body.cust-help .breadcrumbs__inner .last {
        display: flex;
        align-items: center;
    }
    /* Na Categoria, no Artigo e nas duas telas do chamado o último item
       repete o título do que vem logo embaixo: no celular sai da trilha
       (com a seta dele), que cabe numa linha só (Marcelo, 23/10). */
    body.cust-help .main:has(.kb--folder, .ticket--article, .ticket__params, .notice-flash) .breadcrumbs__inner .last,
    body.cust-help .main:has(.kb--folder, .ticket--article, .ticket__params, .notice-flash) .breadcrumbs__inner .icon:has(+ .last) {
        display: none;
    }

    /* Busca: o botão continua ao lado do campo. */
    body.cust-help .help-search #search-button {
        padding: 0 16px;
    }

    /* Listas: uma coluna, cartão com 16 de folga. No celular o título vai
       a 3 linhas: os seis "Organização Acadêmica e Estrutura do Curso
       Técnico em …" só se distinguem pelo nome do curso, que é o fim.
       16 + 48 + 8 + 48 + 16 = 136; com o rótulo de categoria, 160. */
    body.cust-help .preview {
        min-height: 136px;
        padding: 15px 47px 15px 15px;
    }
    body.cust-help .preview:has(.preview__text > p:not(.navlink__descr)) {
        min-height: 160px;
    }
    body.cust-help .preview .preview__title {
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }
    body.cust-help .preview::after {
        top: 20px;
        right: 16px;
    }
    body.cust-help .topics {
        padding: 15px 15px 0;
    }
    body.cust-help .topics__block {
        width: 100%;
    }
    body.cust-help .topics__list a,
    body.cust-help .topics__title .title-link {
        min-height: 40px;
        padding: 8px 0;                   /* 40 numa linha, 64 em duas: o vão entre textos fica 16 mesmo quando o título quebra */
    }

    /* Artigo: cartão de 16, h1 24/32, relacionados embaixo. */
    body.cust-help .ticket--article {
        flex-direction: column;
        align-items: stretch;
        gap: 32px;
    }
    body.cust-help .ticket--article .ticket__body_block {
        padding: 23px 15px;
    }
    body.cust-help .ticket--article .ticket__body_block h1 {
        margin-bottom: 16px;
        font-size: 1.5rem;
        line-height: 2rem;
        letter-spacing: -.01em;
    }
    body.cust-help .block--description h2 {
        font-size: 1.25rem;
        line-height: 2rem;
    }
    body.cust-help .ticket--article .ticket__params {
        width: 100%;
        margin: 0;
    }
    body.cust-help .ticket--article .ticket__params .params--block {
        margin: 0;
    }
    body.cust-help .ticket__block-footer .link {
        height: 40px;
    }
    body.cust-help .ticket__block-footer > span:first-child {
        flex: 1 0 100%;
    }

    /* Formulário: cartão de 16, Curso em uma coluna, Turma cinco por linha,
       botão de enviar na largura toda. */
    body.cust-help .form-submit-ticket,
    body.cust-help .main__content > .contr > form:not(.form) {
        padding: 23px 15px;
    }
    body.cust-help .form-submit-ticket .form-group:has(> .radio-custom) {
        grid-template-columns: minmax(0, 1fr);
    }
    body.cust-help .form-submit-ticket .form-group:has(> .radio-custom [name="custom1"]) {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    body.cust-help .form-submit-ticket .radio-custom [name="custom1"] + label {
        width: auto;
    }
    body.cust-help .form-submit-ticket .alert__inner {
        padding: 16px;
    }
    body.cust-help .form-footer .btn,
    body.cust-help .form-footer .btn-full {
        width: 100%;
        min-width: 0;
    }
    body.cust-help .form-footer {
        align-items: stretch;
    }
    body.cust-help .param--attach .fileinput-button {
        flex: 1 0 100%;                   /* largura cheia, na borda dos campos */
    }
    /* O Fechar do balão dos limites: alvo de 40, o topo segue em 24. */
    body.cust-help .estudar-limites__fechar {
        width: 40px;
        height: 40px;
        margin: -8px -12px -8px 0;
    }
    body.cust-help .notification {
        padding: 15px;
    }
    /* Chamado enviado: mesa de 32 (8 + 24), cartão a 24, botão cheio. */
    body.cust-help .notice-flash > .notification.green {
        margin-top: 24px;
        padding: 23px;
    }
    body.cust-help .notice-flash > .notification.green > p:first-child {
        font-size: 1.25rem;
    }
    body.cust-help .notice-flash > .notification.green .btn-full {
        width: 100%;
        min-width: 0;
        margin-top: 24px;
    }
    /* Ver chamado: uma coluna. Os detalhes ficam em cima e fechados, como o
       HESK quer, com o título à mostra e os dois botões de 40 (recarregar e
       abrir). Aberto pelo botão, o jQuery põe display: block em linha: a
       caixa do estado fica na ordem do HTML, logo depois do número. */
    body.cust-help .ticket:not(.ticket--article) {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
    }
    body.cust-help .ticket:not(.ticket--article) .ticket__params {
        position: static;
        flex: none;
        width: 100%;
    }
    body.cust-help .ticket:not(.ticket--article) .ticket__body_block {
        padding: 23px;
    }
    body.cust-help .ticket:not(.ticket--article) .ticket__params .params--block {
        padding: 23px;
    }
    body.cust-help .ticket:not(.ticket--article) .params--block.collapsed-on-xs .accordion-body {
        display: none;
    }
    /* Aberto pelo botão, o slideToggle do jQuery grava display: block em
       linha e a ordem (estado e ação no topo) se perde; peso igual devolve
       a coluna flex. Fechado, ele grava display: none e isto não vale. */
    body.cust-help .ticket:not(.ticket--article) .params--block.collapsed-on-xs .accordion-body[style*="display: block"] {
        display: flex !important;
    }
    body.cust-help .ticket:not(.ticket--article) .ticket__body_block > .block--head .contact {
        flex: none;
        white-space: nowrap;
    }
    body.cust-help .form--reply .form__submit {
        align-items: stretch;
    }
    body.cust-help .form--reply .form__submit .btn-full {
        width: 100%;
        min-width: 0;
    }

    /* Início: os atalhos empilhados e em linha, para não tomarem a primeira
       tela. Ícone num quadro de 40 à esquerda, nome e frase à direita, seta
       no meio da altura. 96 de altura: o texto (24 + duas linhas de 24) fica
       centrado; se quebrar mais, o cartão cresce, e os dois crescem juntos.
       O vão do ícone ao texto é 12 (vão apertado, como no cartão compacto da
       Central), para "Visualizar chamados existentes" caber numa linha em 375. */
    body.cust-help .nav {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: 1fr;
    }
    body.cust-help .navlink {
        flex-direction: row;
        align-items: center;
        gap: 12px;
        min-height: 96px;
        padding: 8px 40px 8px 16px;       /* 40 à direita: seta de 16 a 16 da borda, mais 8 */
    }
    body.cust-help .navlink .icon-in-circle {
        flex: none;
        width: 40px;
        height: 40px;
    }
    body.cust-help .navlink > div:not(.icon-in-circle) {
        flex: 1 1 auto;
        min-width: 0;
    }
    body.cust-help .navlink .navlink__title {
        margin: 0;
        font-size: 1rem;
    }
    body.cust-help .navlink::after {
        top: calc(50% - 8px);
        right: 16px;
    }
    body.cust-help .tabbed__head .tabbed__head_tabs {
        gap: 16px;
    }

    /* Rodapé: cada link com 40. */
    body.cust-help .footer {
        padding: 40px 16px 24px;
    }
    body.cust-help .footer a {
        justify-content: center;
        min-width: 40px;
        min-height: 40px;
    }
    body.cust-help .article__heading:not(.article__heading--form) a {
        min-height: 40px;
    }
}


/* --------------------------------------------------------------------------
   11. O MOVIMENTO — o da Central (central.css, "o movimento"): cor, borda e
   sombra trocam em 150ms; o que se aperta cede 3%, o que é cartão ou opção
   cede 1% (checkup de 23/10, revisão emil). A app.min.css anima "all" em
   250ms no .btn, no seletor e na área de texto: até o anel de foco entrava
   devagar. Aqui fica só o que muda.
   -------------------------------------------------------------------------- */
body.cust-help .btn,
body.cust-help .param--attach .dropzone .dz-button,
body.cust-help .form-submit-ticket .radio-custom [type=radio] + label {
    transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease, color 150ms ease, transform 120ms ease-out;
}
body.cust-help .selectize-control .selectize-input,
body.cust-help .form textarea.form-control {
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
body.cust-help .btn:active:not(:disabled),
body.cust-help .param--attach .dropzone .dz-button:active {
    transform: scale(.97);
}
body.cust-help .form-submit-ticket .radio-custom [type=radio] + label:active,
body.cust-help .preview:active {
    transform: scale(.99);
}


/* --------------------------------------------------------------------------
   12. SEM MOVIMENTO — quem pediu ao sistema menos movimento não vê
   transição nem a "onda" do clique do HESK. As transições do HESK estão em
   dezenas de seletores mais específicos que qualquer escopo daqui: o
   !important é a única forma de calar todas de uma vez.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body.cust-help *,
    body.cust-help *::before,
    body.cust-help *::after {
        transition: none !important;
        animation: none !important;
    }
    body.cust-help :active {
        transform: none !important;
    }
    /* O balão dos limites (seção 6) aparece parado, sem subir nem acender. */
    body.cust-help .estudar-limites {
        transition: none;
    }
}