/* ==========================================================================
   REMOVIDO em 2026-07-30: 6 @font-face de 'DM Sans' apontando para
   ../DMSans-*.eot/woff2/woff/ttf/svg — arquivos que NAO existem no child theme
   (o servidor respondia 301 e devolvia HTML). Como vinham depois das
   declaracoes do tema e eram da mesma familia, o navegador pintava o texto na
   fonte de fallback (font-display: swap), esperava o download falhar e so
   entao caia para a fonte real do tema. Era a causa do texto "cru" que se
   ajustava segundos depois de a pagina abrir.

   As variantes validas continuam no theme.9.css (arquivos fonts/dmsans-*.woff2)
   e as 4 mais usadas estao redeclaradas no fim deste arquivo com
   font-display: block, alem de pre-carregadas via header Link no .htaccess.
   ========================================================================== */

/* =========================================================================
   Membership Pro — formulário de assinatura (override register/default.php)
   Estiliza os campos do OSMembership (que saem em Bootstrap 5) com a cara
   do YOOtheme/UIkit. Escopo restrito a #osm-signup-page para não vazar.
   ========================================================================= */
#osm-signup-page { max-width: 640px; margin: 0 auto; }
#osm-signup-page .osm-page-title { margin-bottom: 24px; }
#osm-signup-page .osm-form-message,
#osm-signup-page .osm-payment-box { background: #f7fbfe; border: 1px solid #e3eef6; }
#osm-signup-page .osm-form-message h4 { margin-bottom: 0; }
/* Preço "185 00" usa o .uk-text-background nativo do tema (gradiente do YOOtheme). */

/* Espaçamento entre campos, seja qual for a classe emitida pelo componente */
#osm-signup-page .osm-signup-form .control-group,
#osm-signup-page .osm-signup-form .form-group,
#osm-signup-page .osm-signup-form [id^="field_"] { margin-bottom: 18px; }

/* Rótulos */
#osm-signup-page .osm-signup-form .control-label label,
#osm-signup-page .osm-signup-form label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    color: #333;
}

/* Inputs / selects / textarea com aparência UIkit */
#osm-signup-page .osm-signup-form input[type="text"],
#osm-signup-page .osm-signup-form input[type="email"],
#osm-signup-page .osm-signup-form input[type="password"],
#osm-signup-page .osm-signup-form input[type="tel"],
#osm-signup-page .osm-signup-form input[type="number"],
#osm-signup-page .osm-signup-form select,
#osm-signup-page .osm-signup-form textarea {
    width: 100%;
    box-sizing: border-box;
    height: 44px;
    padding: 0 12px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    background: #fff;
    font-size: 15px;
    line-height: 1.4;
    transition: border-color .15s ease-in-out;
}
#osm-signup-page .osm-signup-form textarea { height: auto; min-height: 90px; padding: 10px 12px; }
#osm-signup-page .osm-signup-form input:focus,
#osm-signup-page .osm-signup-form select:focus,
#osm-signup-page .osm-signup-form textarea:focus { border-color: #0089cf; outline: none; }

/* Campo de senha com botão "Mostrar senha" (.input-group do Bootstrap, sem CSS
   BS carregado). Coloca input + botão lado a lado dentro do box, à moda UIkit. */
#osm-signup-page .osm-signup-form .input-group {
    display: flex;
    width: 100%;
    align-items: stretch;
}
#osm-signup-page .osm-signup-form .input-group > input {
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
#osm-signup-page .osm-signup-form .input-group .input-password-toggle,
#osm-signup-page .osm-signup-form .input-group > .btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 14px;
    border: 1px solid #e5e5e5;
    border-left: none;
    border-radius: 0 4px 4px 0;
    background: #f5f5f5;
    color: #555;
    cursor: pointer;
    line-height: 1;
}
#osm-signup-page .osm-signup-form .input-group .input-password-toggle:hover,
#osm-signup-page .osm-signup-form .input-group > .btn:hover { background: #ececec; }
#osm-signup-page .osm-signup-form .input-group .visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

/* Checkboxes (consentimento) — rótulo inline, peso normal */
#osm-signup-page .osm-signup-form fieldset label,
#osm-signup-page .osm-signup-form .osm-checkboxes-contaier label {
    display: inline;
    font-weight: 400;
    color: inherit;
}
/* Checkbox/radio nativos: o tema aplica appearance:none + margin-left negativo
   em .form-check-input (esperando .uk-checkbox), deixando o checkbox invisível.
   Aqui devolvemos o controle nativo, visível, alinhado ao texto. */
#osm-signup-page .osm-signup-form input[type="checkbox"],
#osm-signup-page .osm-signup-form input[type="radio"] {
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    appearance: auto !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px;
    margin: 0 8px 0 0 !important;
    padding: 0;
    background: none !important;
    background-color: initial !important;
    box-shadow: none !important;
    border: initial;
    overflow: visible;
    vertical-align: middle;
    position: static;
    opacity: 1;
    flex: 0 0 auto;
}
#osm-signup-page .osm-signup-form fieldset label.checkbox,
#osm-signup-page .osm-signup-form .osm-checkboxes-contaier label { cursor: pointer; }

/* Bloco de pagamento */
#osm-signup-page .osm-payment-logo { max-width: 260px; height: auto; margin: 6px auto 0; display: inline-block; }

/* Botão de envio já usa .uk-button-primary do tema; garante respiro */
#osm-signup-page .osm-form-actions { margin-top: 24px; }

/* ==========================================================================
   HOME (art 37) — reduzir espaço vertical ABAIXO da barra de busca
   (#search-default: campo + botão "Arbiped IA"), aproximando-a dos
   botões logo abaixo. Ajuste o valor de margin-bottom se precisar
   de mais/menos aproximação.
   ========================================================================== */
#search-default { margin-bottom: -20px; }

/* ==========================================================================
   RSForm 8, 9, 10 e 12 — "Assine a Newsletter" (art 72), "Agende uma
   demonstração" (art 73), "Planos Extendidos" (art 74) e "Suporte" (art 58).
   Deixa com a cara do tema (radius, foco na cor da marca #4100FF), conserta o
   checkbox nativo (o tema quebra .form-check-input, igual OSM) e transforma o
   botão em CTA full-width
   (submit: .rsform-block-enviar nos forms 9/10/12, .rsform-block-increvase no 8).
   Escopo: :is(#rsform_8_page_0, #rsform_9_page_0, #rsform_10_page_0, #rsform_12_page_0).
   ========================================================================== */
:is(#rsform_8_page_0, #rsform_9_page_0, #rsform_10_page_0, #rsform_12_page_0) .rsform-block { margin-bottom: 16px; }

/* Inputs / selects / textarea */
:is(#rsform_8_page_0, #rsform_9_page_0, #rsform_10_page_0, #rsform_12_page_0) .formControls input[type="text"],
:is(#rsform_8_page_0, #rsform_9_page_0, #rsform_10_page_0, #rsform_12_page_0) .formControls input[type="email"],
:is(#rsform_8_page_0, #rsform_9_page_0, #rsform_10_page_0, #rsform_12_page_0) .formControls input[type="tel"],
:is(#rsform_8_page_0, #rsform_9_page_0, #rsform_10_page_0, #rsform_12_page_0) .formControls input[type="number"],
:is(#rsform_8_page_0, #rsform_9_page_0, #rsform_10_page_0, #rsform_12_page_0) .formControls input[type="password"],
:is(#rsform_8_page_0, #rsform_9_page_0, #rsform_10_page_0, #rsform_12_page_0) .formControls select,
:is(#rsform_8_page_0, #rsform_9_page_0, #rsform_10_page_0, #rsform_12_page_0) .formControls textarea {
    width: 100% !important;
    box-sizing: border-box;
    height: 50px !important;
    padding: 0 16px !important;
    border: 1px solid #e0e3ee !important;
    border-radius: 10px !important;
    background: #fff !important;
    font-size: 15px;
    color: #3a3f5c;
    line-height: 1.4;
    box-shadow: none !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}
:is(#rsform_8_page_0, #rsform_9_page_0, #rsform_10_page_0, #rsform_12_page_0) .formControls textarea {
    height: auto !important;
    min-height: 120px;
    padding: 14px 16px !important;
    resize: vertical;
}
:is(#rsform_8_page_0, #rsform_9_page_0, #rsform_10_page_0, #rsform_12_page_0) .formControls input::placeholder,
:is(#rsform_8_page_0, #rsform_9_page_0, #rsform_10_page_0, #rsform_12_page_0) .formControls textarea::placeholder { color: #8a93b8; opacity: 1; }
:is(#rsform_8_page_0, #rsform_9_page_0, #rsform_10_page_0, #rsform_12_page_0) .formControls input:focus,
:is(#rsform_8_page_0, #rsform_9_page_0, #rsform_10_page_0, #rsform_12_page_0) .formControls select:focus,
:is(#rsform_8_page_0, #rsform_9_page_0, #rsform_10_page_0, #rsform_12_page_0) .formControls textarea:focus {
    border-color: #4100FF !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(65, 0, 255, .12) !important;
}

/* Checkbox de consentimento — nativo, alinhado ao rótulo (linha única) */
:is(#rsform_8_page_0, #rsform_9_page_0, #rsform_10_page_0, #rsform_12_page_0) .rsform-block-aceito .form-check,
:is(#rsform_8_page_0, #rsform_9_page_0, #rsform_10_page_0, #rsform_12_page_0) .rsform-block-aceito .rsform-checkbox-item,
:is(#rsform_8_page_0, #rsform_9_page_0, #rsform_10_page_0, #rsform_12_page_0) .rsform-block-aceito .formControls label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 0;
    margin: 0;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.45;
    color: #6271A3;
    cursor: pointer;
}
/* se o rótulo NÃO envolver o input (markup .form-check), mantém-no inline */
:is(#rsform_8_page_0, #rsform_9_page_0, #rsform_10_page_0, #rsform_12_page_0) .rsform-block-aceito .form-check-label {
    display: inline;
    margin: 0;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.45;
    color: #6271A3;
    cursor: pointer;
}
:is(#rsform_8_page_0, #rsform_9_page_0, #rsform_10_page_0, #rsform_12_page_0) input[type="checkbox"],
:is(#rsform_8_page_0, #rsform_9_page_0, #rsform_10_page_0, #rsform_12_page_0) input[type="radio"] {
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    appearance: auto !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px;
    margin: 1px 0 0 0 !important;
    padding: 0;
    background: none !important;
    background-color: initial !important;
    box-shadow: none !important;
    border: initial !important;
    border-radius: 0 !important;
    accent-color: #4100FF;
    vertical-align: middle;
    position: static;
    opacity: 1;
    flex: 0 0 auto;
}

/* Botão de envio — CTA sólido, largura total (ref. jusmundi: retângulo alto,
   canto suave, texto bold centralizado) */
:is(#rsform_8_page_0, #rsform_9_page_0, #rsform_10_page_0, #rsform_12_page_0) :is(.rsform-block-enviar, .rsform-block-increvase) .formControls input[type="submit"],
:is(#rsform_8_page_0, #rsform_9_page_0, #rsform_10_page_0, #rsform_12_page_0) :is(.rsform-block-enviar, .rsform-block-increvase) .formControls button[type="submit"],
:is(#rsform_8_page_0, #rsform_9_page_0, #rsform_10_page_0, #rsform_12_page_0) :is(.rsform-block-enviar, .rsform-block-increvase) .formControls .rsform-submit-button {
    display: block;
    width: 100% !important;
    height: 58px;
    padding: 0 24px !important;
    border: none !important;
    border-radius: 8px !important;
    background: #4100FF !important;
    color: #fff !important;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .2px;
    text-align: center;
    cursor: pointer;
    transition: background .15s ease, transform .05s ease;
}
:is(#rsform_8_page_0, #rsform_9_page_0, #rsform_10_page_0, #rsform_12_page_0) :is(.rsform-block-enviar, .rsform-block-increvase) .formControls input[type="submit"]:hover,
:is(#rsform_8_page_0, #rsform_9_page_0, #rsform_10_page_0, #rsform_12_page_0) :is(.rsform-block-enviar, .rsform-block-increvase) .formControls button[type="submit"]:hover { background: #3400cc !important; }
:is(#rsform_8_page_0, #rsform_9_page_0, #rsform_10_page_0, #rsform_12_page_0) :is(.rsform-block-enviar, .rsform-block-increvase) .formControls input[type="submit"]:active,
:is(#rsform_8_page_0, #rsform_9_page_0, #rsform_10_page_0, #rsform_12_page_0) :is(.rsform-block-enviar, .rsform-block-increvase) .formControls button[type="submit"]:active { transform: translateY(1px); }

/* Nos forms 9 ("Agende uma demonstração", art 73) e 10 ("Planos Estendidos",
   art 74) o CTA vira pílula, acompanhando os blocos de canto 50px desses dois
   layouts. O form 8 (newsletter do rodapé) segue com o canto de 8px — está em
   outro contexto, não nesse par de páginas. */
:is(#rsform_9_page_0, #rsform_10_page_0) .rsform-block-enviar .formControls input[type="submit"],
:is(#rsform_9_page_0, #rsform_10_page_0) .rsform-block-enviar .formControls button[type="submit"],
:is(#rsform_9_page_0, #rsform_10_page_0) .rsform-block-enviar .formControls .rsform-submit-button {
    border-radius: 999px !important;
}

/* Rótulo dos campos. Os forms 8/9/10 não precisavam (usam placeholder), mas o
   de suporte tem rótulo em todos, e sem isto eles herdam o negrito do
   Bootstrap e brigam com o texto do campo. */
:is(#rsform_8_page_0, #rsform_9_page_0, #rsform_10_page_0, #rsform_12_page_0) .formControlLabel {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #3a3f5c;
}
:is(#rsform_8_page_0, #rsform_9_page_0, #rsform_10_page_0, #rsform_12_page_0) .formRequired {
    margin-left: 4px;
    color: #4100FF;
    font-weight: 600;
}

/* Campo de arquivo — moldura de reserva.
   Vale enquanto o JS não trocou o controle nativo pelo nosso (ver abaixo) e
   se o JS não rodar. Só moldura: altura fixa e padding lateral deformam o
   widget nativo, por isso ele não entra na regra de input acima. */
:is(#rsform_8_page_0, #rsform_9_page_0, #rsform_10_page_0, #rsform_12_page_0) .formControls input[type="file"] {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 16px;
    border: 1px dashed #c9cee0;
    border-radius: 10px;
    background: #fbfbfe;
    font-size: 14px;
    color: #6271A3;
    cursor: pointer;
}
:is(#rsform_8_page_0, #rsform_9_page_0, #rsform_10_page_0, #rsform_12_page_0) .formControls input[type="file"]:hover {
    border-color: #4100FF;
}

/* --------------------------------------------------------------------------
   Campo de arquivo com rótulo em português.
   O widget nativo escreve "Choose file / No file chosen" no idioma do
   NAVEGADOR, e isso não se traduz por CSS nem por atributo — o texto é
   desenhado pelo próprio navegador. A saída é cobrir o controle com um de
   nossa autoria: o `input` continua no lugar, invisível e por cima da caixa,
   então clique, teclado e o arquivo escolhido seguem sendo os nativos. Nada é
   simulado por JS além do nome do arquivo aparecer.
   A montagem da caixa está no custom.js (bloco "Campo de anexo").
   -------------------------------------------------------------------------- */
.arb-arquivo {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    padding: 9px 12px;
    border: 1px dashed #c9cee0;
    border-radius: 10px;
    background: #fbfbfe;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.arb-arquivo:hover { border-color: #4100FF; }
/* Foco de teclado: o anel vai na CAIXA, porque quem recebe o foco é o input
   invisível — sem isto, quem navega por Tab não vê onde está. */
.arb-arquivo:focus-within {
    border-color: #4100FF;
    box-shadow: 0 0 0 3px rgba(65, 0, 255, .12);
}

.arb-arquivo-botao {
    flex: 0 0 auto;
    padding: 8px 16px;
    border-radius: 999px;
    background: #ece6ff;
    color: #4100FF;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

/* Nome do arquivo: encurta com reticências em vez de empurrar a caixa. */
.arb-arquivo-nome {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    color: #8a93b8;
}
.arb-arquivo.tem-arquivo { border-style: solid; border-color: #4100FF; background: #fff; }
.arb-arquivo.tem-arquivo .arb-arquivo-nome { color: #3a3f5c; font-weight: 500; }

/* O nativo cobre a caixa inteira, invisível. `!important` porque a regra de
   reserva acima tem a mesma especificidade e viria depois na cascata. */
.arb-arquivo input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    opacity: 0;
    cursor: pointer;
}

@media (max-width: 479px) {
    .arb-arquivo { flex-direction: column; align-items: stretch; gap: 8px; }
    .arb-arquivo-botao { text-align: center; }
    .arb-arquivo-nome { white-space: normal; text-align: center; }
}

/* Texto de ajuda abaixo do campo (RSForm imprime a DESCRIPTION aqui). */
:is(#rsform_8_page_0, #rsform_9_page_0, #rsform_10_page_0, #rsform_12_page_0) .formDescription {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: #8a93b8;
}

/* Erro de validação: vermelho discreto, alinhado ao campo. */
:is(#rsform_8_page_0, #rsform_9_page_0, #rsform_10_page_0, #rsform_12_page_0) .formValidation,
:is(#rsform_8_page_0, #rsform_9_page_0, #rsform_10_page_0, #rsform_12_page_0) .formRed {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: #d92d5e;
}

/* ==========================================================================
   Cards de planos — página "Assinar" (art 56) e home (art 37). Os dois blocos
   são o mesmo elemento do Builder: mesmos cards, mesmo CSS, mesma classe.
   A classe .planos (CSS global no custom_less do style id 9) dá a estrutura e
   limita a grid a 1120px, largura pensada para três cards; .planos-page fecha
   em 840px, para que com apenas dois cards (Pesquisador e Especialista) cada
   um mantenha a largura que tinha em três colunas em vez de esticar até a
   metade da página — a grid já vem centrada por margin:auto do .planos.
   ========================================================================== */
.planos.planos-page {
    max-width: 840px;
}
/* Botão sempre no rodapé do card (alturas já igualadas pelo uk-grid-match):
   o card vira flex-coluna e o wrapper do botão (último filho) desce com
   margin-top:auto — os dois CTAs ficam alinhados na mesma linha de base. */
.planos.planos-page .el-item {
    display: flex;
    flex-direction: column;
}
.planos.planos-page .el-item > :last-child {
    margin-top: auto;
    padding-top: 10px;
}

/* ==========================================================================
   Página de LOGIN (mod_login — override em html/mod_login/default.php).
   Antes o formulário vinha sem tratamento estético (uk-input/uk-button crus).
   Aqui recebe o padrão do site: card branco (radius 16px, sombra suave),
   inputs com foco na cor da marca (#4100FF), CTA sólido "Entrar", botão de
   passkey em outline e lista de links discreta.
   Escopo: .arb-login-form (classe fixa adicionada no override do módulo;
   não atinge o formulário de logout, que usa outro template).
   ========================================================================== */
/* O cartão do login é o padrão de tela interna do site — o de Suporte (art 58)
   entra na MESMA regra em vez de copiar os valores: mexeu num, muda nos dois.
   Só a largura difere, porque o suporte tem textarea e sufoca em 440px. */
.arb-login-form,
.arb-suporte-card {
    max-width: 440px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 34px 32px;
    background: #fff;
    border: 1px solid #E4E7F4;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(65, 0, 255, .08);
}
.arb-suporte-card {
    max-width: 720px;
    padding: 38px 40px;
}
/* Texto de abertura do cartão. Vinha do campo `css` do elemento no Builder;
   com a tela virando view do com_projetos, passou para cá — que é onde o
   ui-componentes manda a cor morar. */
.arb-suporte-card .arb-suporte-intro {
    margin: 0 0 22px;
    font-size: 15px;
    line-height: 1.55;
    color: #6271A3;
}
@media (max-width: 639px) {
    .arb-suporte-card { padding: 26px 20px; }
}

/* Inputs (usuário / senha) */
.arb-login-form .uk-input {
    width: 100%;
    height: 50px;
    padding: 0 16px;
    border: 1px solid #e0e3ee;
    border-radius: 10px;
    background: #fff;
    font-size: 15px;
    color: #3a3f5c;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.arb-login-form .uk-input::placeholder { color: #8a93b8; opacity: 1; }
.arb-login-form .uk-input:focus {
    border-color: #4100FF;
    outline: none;
    box-shadow: 0 0 0 3px rgba(65, 0, 255, .12);
}

/* "Lembrar-se de mim" — checkbox nativo na cor da marca */
.arb-login-form label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #6271A3;
    cursor: pointer;
}
.arb-login-form input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    margin: 0;
    accent-color: #4100FF;
}

/* CTA principal "Entrar" — botão sólido, largura total */
.arb-login-form .uk-button-primary {
    display: block;
    width: 100%;
    height: 52px;
    border: none;
    border-radius: 10px;
    background: #4100FF;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .2px;
    text-transform: none;
    transition: background .15s ease, transform .05s ease;
}
.arb-login-form .uk-button-primary:hover { background: #3400cc; }
.arb-login-form .uk-button-primary:active { transform: translateY(1px); }

/* Botão de passkey (secundário) — outline da marca, largura total */
.arb-login-form .uk-button-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 48px;
    border: 1.5px solid #CCD3EA;
    border-radius: 10px;
    background: #fff;
    color: #4100FF;
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
    transition: border-color .15s ease, background .15s ease;
}
.arb-login-form .uk-button-secondary:hover {
    border-color: #4100FF;
    background: #F6F7FD;
}
.arb-login-form .uk-button-secondary svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* Links auxiliares (esqueceu senha / usuário, criar conta) */
.arb-login-form .uk-list {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #EEF0F8;
    text-align: center;
}
.arb-login-form .uk-list li { margin: 6px 0; }
.arb-login-form .uk-list a {
    color: #6271A3;
    font-size: 14px;
    text-decoration: none;
    transition: color .15s ease;
}
.arb-login-form .uk-list a:hover { color: #4100FF; }

@media (max-width: 480px) {
    .arb-login-form { padding: 26px 20px; }
}

/* Aproxima o card de login do cabeçalho "ACESSE SUA CONTA": as duas seções
   YOOtheme empilhadas somavam padding-bottom (cabeçalho) + padding-top (card),
   criando um vão grande. Zera o de baixo do cabeçalho e reduz o de cima do card.
   Seleção sem hooks extras via :has() (as duas seções são irmãs adjacentes). */
.uk-section:has(+ .uk-section .arb-login-form) { padding-bottom: 0; }
.uk-section:has(.arb-login-form) { padding-top: 24px; }

/* Título dentro do cartão de tela interna: 24px, bold, roxo (ui-componentes §4).
   Fica aqui, e não no template do Builder, para a cor não ficar chumbada na
   página — trocar a marca continua sendo uma edição só. */
.arb-suporte-card > .uk-h1,
.arb-suporte-card h1 {
    margin: 0 0 6px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
    color: #4100FF;
}

/* ==========================================================================
   PESQUISA AVANÇADA (art 53 / Itemid 311) — botão flutuante "Dicas de
   pesquisa" + modal, injetados via custom.js SÓ nessa página (não há espaço
   no layout p/ um botão fixo). O conteúdo das dicas reflete o motor NOVO:
   busca a expressão na ordem digitada, ignora acentos/maiúsculas e expande
   sinônimos — NÃO há operadores de aspas/"e"/"não".
   ========================================================================== */
.arb-tips-overlay,
.arb-aviso-overlay {
    position: fixed;
    inset: 0;
    z-index: 9990;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(20, 16, 60, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, visibility .18s ease;
}
.arb-tips-overlay.is-open,
.arb-aviso-overlay.is-open { opacity: 1; visibility: visible; }

.arb-tips-modal,
.arb-aviso-modal {
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(20, 16, 60, .28);
    transform: translateY(8px) scale(.98);
    transition: transform .18s ease;
}
.arb-tips-overlay.is-open .arb-tips-modal,
.arb-aviso-overlay.is-open .arb-aviso-modal { transform: none; }

.arb-tips-head,
.arb-aviso-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 26px;
    border-bottom: 1px solid #EEF0F8;
}
.arb-tips-head h2,
.arb-aviso-head h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #4100FF;
    line-height: 1.3;
}
.arb-tips-close,
.arb-aviso-close {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: #F6F7FD;
    color: #6271A3;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.arb-tips-close:hover,
.arb-aviso-close:hover { background: #4100FF; color: #fff; }

.arb-tips-body,
.arb-aviso-body { padding: 22px 26px 6px; }

/* O aviso "Pesquise por palavras-chave" tem parágrafo corrido no lugar da lista
   de itens das Dicas — cor e escala copiadas do .arb-tips-item para os dois
   pop-ups lerem igual. */
.arb-aviso-body p {
    margin: 0 0 12px;
    color: #4a5478;
    font-size: 14.5px;
    line-height: 1.6;
}
.arb-aviso-body p:last-child { margin-bottom: 0; }
.arb-tips-item {
    display: flex;
    gap: 12px;
    margin-bottom: 18px;
    color: #4a5478;
    font-size: 14.5px;
    line-height: 1.6;
}
.arb-tips-item .arb-tips-ic {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    margin-top: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #EEEAFF;
    color: #4100FF;
}
.arb-tips-item .arb-tips-ic svg { width: 15px; height: 15px; fill: currentColor; }
.arb-tips-chip {
    display: inline-block;
    padding: 1px 8px;
    margin: 0 1px;
    border-radius: 6px;
    background: #EEEAFF;
    color: #4100FF;
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
}

.arb-tips-foot,
.arb-aviso-foot {
    display: flex;
    justify-content: flex-end;
    padding: 14px 26px 22px;
}
.arb-tips-ok,
.arb-aviso-ok {
    padding: 11px 26px;
    border: none;
    border-radius: 10px;
    background: #4100FF;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease;
}
.arb-tips-ok:hover,
.arb-aviso-ok:hover { background: #3400cc; }

@media (max-width: 560px) {
    .arb-tips-head h2,
    .arb-aviso-head h2 { font-size: 18px; }
    .arb-tips-body,
    .arb-aviso-body { padding: 18px 20px 4px; }
    .arb-tips-head, .arb-tips-foot,
    .arb-aviso-head, .arb-aviso-foot { padding-left: 20px; padding-right: 20px; }
}

/* ==========================================================================
   PESQUISA AVANÇADA — linha de ações dos filtros (Jurisprudência, Sentenças
   Arbitrais e Doutrina, widget HTML do art 53). "Limpar" e "Pesquisar" no
   tamanho compacto padrão (largura pelo conteúdo); "Dicas de pesquisa" um
   pouco maior, ao lado do "Limpar" à esquerda; "Pesquisar" no canto direito.
   Layout: [Limpar][Dicas]  ⟶espaço⟶  [Pesquisar].
   O "Dicas" é injetado pelo custom.js e abre o modal.
   (justify-content:flex-start vence o space-between herdado do theme.9.css,
   que carrega antes deste arquivo com a mesma especificidade.)
   ========================================================================== */
.jf-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
}
/* "Limpar" e "Pesquisar": tamanho compacto padrão (largura pelo conteúdo). */
.jf-actions > .jf-btn {
    flex: 0 0 auto;
    max-width: 100%;
    height: 36px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 18px;
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
}
/* "Pesquisar" (submit) empurrado para a direita → "Limpar" e "Dicas de pesquisa"
   ficam juntos à esquerda, separados do "Pesquisar" por um espaço. */
.jf-actions > .jf-btn[type="submit"] { margin-left: auto; }
/* Botão fixo "Dicas de pesquisa" — um pouco maior que os demais e visual do FAB. */
.jf-actions > .arb-tips-inline {
    height: 38px;
    padding: 0 20px;
    font-size: 14px;
    background: #4100FF;
    color: #fff;
    border: none;
    font-weight: 600;
    box-shadow: 0 6px 18px rgba(65, 0, 255, .22);
    transition: background .15s ease, transform .08s ease, box-shadow .15s ease;
}
.jf-actions > .arb-tips-inline:hover {
    background: #3400cc;
    opacity: 1;
    box-shadow: 0 8px 22px rgba(65, 0, 255, .3);
}
.jf-actions > .arb-tips-inline:active { transform: translateY(1px); }
.jf-actions > .arb-tips-inline svg { width: 18px; height: 18px; fill: currentColor; flex: 0 0 auto; }

@media (max-width: 560px) {
    /* Em telas estreitas os três não cabem lado a lado: empilha ocupando 100%. */
    .jf-actions > .jf-btn { flex: 1 1 100%; width: auto; }
    .jf-actions > .jf-btn[type="submit"] { margin-left: 0; }
}

/* ==========================================================================
   Sentença Full — evita "grid blowout" no Índice Interativo (#scroll-indice)
   --------------------------------------------------------------------------
   #scroll-indice é um CSS grid (250px 1fr). A track de conteúdo (1fr) tem
   min-width:auto, então uma URL/palavra longa sem espaço estica a coluna
   inteira; como a largura da track vale para todas as linhas, TODO o texto
   (inclusive a EMENTA) transborda à direita da área destinada.
   Correção: permitir que a track encolha (min-width:0) e que strings longas
   quebrem (overflow-wrap). Somente CSS — NÃO altera o JS que monta o menu.
   ========================================================================== */
#scroll-indice,
#scroll-indice > * { min-width: 0; }

#scroll-indice p,
#scroll-indice li,
#scroll-indice td,
#scroll-indice a,
#scroll-indice h6 { overflow-wrap: anywhere; }

/* ==========================================================================
   MINHA CONTA (OSMembership) — 2026-07-31
   --------------------------------------------------------------------------
   A área da conta saía com identidade própria: botões retangulares azuis
   (#008bd2), caixa-alta com letter-spacing 3px, e o formulário do "Meus dados"
   em duas colunas ocupando a largura toda da página. Nada disso é a cara do
   Arbipedia.

   Aqui o bloco todo passa a usar os mesmos tokens do resto do site:
     roxo da marca #4e00ff (o mesmo dos botões Assinar/Login do topo)
     azul-acinzentado #6271A3 / borda #6b78b8 (o mesmo dos filtros de busca)
     pílulas com border-radius 24px e campos de 44px

   Esse CSS estava repetido em addStyleDeclaration() nos três overrides
   (profile, subscriptions, groupmembers). Agora vive só aqui.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Botão "Sair" do menu do topo (item de menu 356, criado em 2026-07-31)
   --------------------------------------------------------------------------
   O item usa menu-anchor_css = "btn-login btn-logout": herda a pílula de
   contorno já definida no custom_less do template (a mesma do botão Login) e
   aqui só troca para o cinza-azulado secundário — sair não é a ação principal
   do topo, não deve disputar atenção com o roxo do "Assinar".

   Os !important acompanham os do custom_less (a.btn-login já usa), e este
   arquivo carrega depois do theme.9.css, então prevalece.
   -------------------------------------------------------------------------- */
a.btn-logout {
    color: #6271A3 !important;
    background: transparent !important;
    border-color: #6b78b8;
}

a.btn-logout:hover,
a.btn-logout:focus {
    color: #fff !important;
    background: #6271A3 !important;
    border-color: #6271A3;
}

/* --------------------------------------------------------------------------
   Menu de navegação da conta (Meus Dados / Minhas Assinaturas / ...)
   Markup em templates/yootheme_estudiomx/php/arb-account-menu.php
   -------------------------------------------------------------------------- */
/* Os seis itens ficam SEMPRE numa linha só (nowrap). Padding e fonte usam
   clamp() para encolherem junto com a viewport em vez de quebrar a linha:
   ~1200px de largura -> 19px de padding e 12,6px de fonte; em telas largas
   voltam a 24px/14px. Abaixo de 768px o nowrap é desligado e viram empilhados. */
.arb-account-menu {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: clamp(6px, .8vw, 12px);

    max-width: 1200px;
    margin: 0 auto 40px;
    padding: 0 20px;

    box-sizing: border-box;
}

/* Os botões de "Meus Projetos" (com_projetos) usam este mesmo padrão de
   pílula outline. Ficam na mesma regra de propósito: mexeu aqui, muda nos dois. */
.arb-account-menu .arb-account-menu-item,
.arb-projeto .arb-btn,
.arb-projetos .arb-btn,
.arb-flut .arb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 44px;
    padding: 0 clamp(12px, 1.6vw, 24px);

    color: #4e00ff;
    font-size: clamp(12px, 1.05vw, 14px);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;

    background: transparent;
    border: 2px solid #4e00ff;
    border-radius: 24px;

    box-sizing: border-box;
    transition: color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.arb-account-menu .arb-account-menu-item:hover,
.arb-account-menu .arb-account-menu-item:focus,
.arb-projeto .arb-btn:hover,
.arb-projeto .arb-btn:focus,
.arb-projetos .arb-btn:hover,
.arb-projetos .arb-btn:focus,
.arb-flut .arb-btn:hover:not([disabled]),
.arb-flut .arb-btn:focus:not([disabled]) {
    color: #fff;
    text-decoration: none;
    background: #4e00ff;
}

/* Nas telas do com_projetos o menu fica dentro de um `uk-container-small`
   (900px) — estreito demais para as seis pílulas em telas grandes. Aqui o
   nowrap é liberado: cabendo, continua em uma linha; senão quebra
   centralizado, em vez de estourar a largura da página. O padding lateral
   sai porque o container do UIkit já tem o dele. */
.arb-projetos > .arb-account-menu,
.arb-projeto > .arb-account-menu {
    flex-wrap: wrap;
    row-gap: 8px;
    max-width: none;
    padding: 0;
}

.arb-account-menu .arb-account-menu-item.active,
.arb-projeto .uk-active > .arb-btn,
.arb-projeto .arb-btn.active,
.arb-flut .arb-btn[aria-pressed="true"] {
    color: #fff;
    background: #4e00ff;
    box-shadow: 0 2px 6px rgba(78, 0, 255, .25);
}

/* Rótulo de tipo de conteúdo (JURISPRUDÊNCIA, DOUTRINA…).
   Mesmo desenho do `.juris-label` dos resultados de busca — que vive no CSS
   inline de gestao/teste-filtro/search.php e por isso não dá para estender a
   regra aqui. Os dois andam em par: mexeu num, mexa no outro. */
.arb-projeto .arb-label {
    display: inline-block;
    padding: 2px 12px;
    border: 1px solid #4100FF;
    border-radius: 20px;
    background: none;
    color: #4100FF;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.6;
    text-transform: uppercase;
}

/* Dado anonimizado (LGPD) dentro do texto das sentenças.
   O que está embrulhado aqui é só o código de substituição — o nome real não
   existe mais no HTML, está apenas na tabela de reversão, no banco. O desfoque
   é estética: evita a poluição de ler "[[ANON-0400101]]" no meio da frase, sem
   sugerir que há algo escondido para revelar.
   `user-select: none` é coerência, não segurança: não há o que copiar. */
.anonimizado {
    display: inline-block;
    filter: blur(4px);
    color: #6271A3;
    background: rgba(98, 113, 163, .10);
    border-radius: 3px;
    padding: 0 4px;
    user-select: none;
    vertical-align: baseline;
    /* Largura previsível: o código tem sempre o mesmo tamanho, então o texto
       não "pula" de uma sentença para outra. */
    letter-spacing: .5px;
}

/* Impressão e leitores de tela: desfoque não ajuda ninguém no papel, e o
   conteúdo continua sendo só um código. */
@media print {
    .anonimizado {
        filter: none;
        background: none;
    }
}

/* Variante de alerta: o conteúdo mudou DEPOIS de entrar na pasta.
   É o aviso mais importante desta tela — quem citou aquele item precisa
   reconferir —, e em roxo ele se confundia com o rótulo de tipo (SENTENÇA,
   DOUTRINA) ao lado. Âmbar preenchido separa "o que isto é" de "olhe isto".
   Sem maiúsculas: aqui o conteúdo é uma data, e versalete atrapalha a leitura. */
.arb-projeto .arb-label--alerta {
    border-color: #E0A030;
    background: #FFF6E6;
    color: #8A5300;
    text-transform: none;
}

/* Título das páginas de "Meus Projetos".
   O `uk-heading-small` deste tema passa dos 50px e fica maior que o logotipo
   da navbar — desproporcional para o título de uma tela interna. */
.arb-projeto .arb-titulo-pagina,
.arb-projetos .arb-titulo-pagina {
    margin-top: 0;
    font-size: 24px;
    line-height: 1.25;
    font-weight: 700;
    color: #4e00ff;
}

/* O card inteiro reage ao mouse — reforça que é clicável. */
.arb-projetos .uk-card {
    transition: box-shadow .2s ease, transform .2s ease;
}

.arb-projetos .uk-card:hover {
    box-shadow: 0 10px 26px rgba(78, 0, 255, .10);
    transform: translateY(-2px);
}

/* Resumo do card de projeto: os quatro tipos em duas colunas.
   `auto-fit` + `minmax` faz virar uma coluna sozinho quando não cabe — sem
   media query e sem número de colunas chumbado. */
.arb-projetos .arb-projetos__resumo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px 20px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
    font-size: 14px;
}

.arb-projetos .arb-projetos__resumo li {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    line-height: 1.3;
}

.arb-projetos .arb-projetos__resumo li::before {
    content: '';
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #c9cee0;
}

/* Vazio fica mais claro: a hierarquia diz o que a pasta tem sem esconder o resto. */
.arb-projetos .arb-projetos__resumo li.arb-vazio {
    color: #8a93b8;
}

.arb-projetos .arb-projetos__resumo li.arb-vazio::before {
    background: #e0e3ee;
}

.arb-projetos .arb-projetos__resumo a {
    color: #3a3f5c;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.arb-projetos .arb-projetos__resumo a:hover {
    color: #4e00ff;
    text-decoration: underline;
}

/* Numeração das ações do painel flutuante: bolinha roxa com o número em branco.
   Deixa explícito que "salvar a página" e "salvar a pesquisa" são duas ações
   possíveis, e não etapas de uma sequência. */
.arb-flut .arb-flut__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    border-radius: 50%;
    background: #4e00ff;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: normal;
    vertical-align: middle;
}

/* Título do que será salvo, no topo do painel flutuante. */
.arb-flut .arb-flut__pagina {
    margin: 2px 0 0;
    color: #4e00ff;
    font-weight: 600;
    line-height: 1.35;
}

/* O toggle desabilitado (sem nenhum projeto ainda) não deve parecer clicável. */
.arb-flut .arb-btn[disabled] {
    opacity: .45;
    cursor: default;
}

/* O botão flutuante precisa de fundo OPACO.
   `.uk-button-primary` neste tema compila como `background-color: transparent`
   (theme.9.css) — num botão que flutua sobre o texto, isso deixava o parágrafo
   aparecer por dentro da pílula e o rótulo ficava ilegível. Fundo branco, borda
   e texto roxos; no hover inverte, como nas outras pílulas do site. */
/* Borda de 1px, e não os 2px das demais pílulas do site: este botão flutua
   sobre o conteúdo o tempo todo, e o traço grosso pesava demais na tela (pedido
   do cliente em 14/08). É também a espessura que o próprio tema dá aos botões
   (`.uk-button-primary{border:1px solid #4100ff}` no theme.9.css).

   A SOMBRA precisa ser declarada aqui porque o botão deixou de usar
   `uk-box-shadow-medium`: neste tema aquela classe compila como sombra
   "neumórfica" — `-2px -2px 5px rgba(255,255,255,.9)` —, e o branco a 90%
   desenhava um halo em volta da pílula sobre o azul do rodapé. Aqui é a mesma
   sombra discreta do par desta regra em media/com_projetos/css/flutuante-solo.css
   (páginas de `gestao/`, que não carregam o tema): mexeu num, mexa no outro. */
.arb-flut .arb-flut__botao {
    background-color: #fff;
    color: #4e00ff;
    border: 1px solid #4e00ff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .08);
}

.arb-flut .arb-flut__botao:hover,
.arb-flut .arb-flut__botao:focus {
    background-color: #4e00ff;
    color: #fff;
}

/* O uk-subnav só dá espaçamento horizontal; ao quebrar linha as pílulas
   encostariam sem isto. */
.arb-projeto .arb-abas {
    row-gap: 10px;
}

/* Ações de linha em ícone (editar, remover, baixar), na primária do site */
.arb-projeto .arb-acoes {
    gap: 14px;
}

.arb-projeto .arb-acao-icone {
    padding: 0;
    background: none;
    border: 0;
    color: #4e00ff;
    font: inherit;
    line-height: 1;
    cursor: pointer;
    transition: color .2s ease;
}

.arb-projeto .arb-acao-icone:hover,
.arb-projeto .arb-acao-icone:focus {
    color: #3400cc;
}

/* "Sair" é ação de saída, não navegação: fica no cinza-azulado secundário */
.arb-account-menu .arb-account-menu-sair {
    color: #6271A3;
    border-color: #6b78b8;
}

.arb-account-menu .arb-account-menu-sair:hover,
.arb-account-menu .arb-account-menu-sair:focus {
    background: #6271A3;
    border-color: #6271A3;
}

@media (max-width: 768px) {
    .arb-account-menu {
        flex-wrap: wrap;
        gap: 10px;
        padding: 0 15px;
    }

    .arb-account-menu .arb-account-menu-item {
        width: 100%;
        font-size: 14px;
    }
}

/* --------------------------------------------------------------------------
   Formulário "Meus dados" (view profile)
   --------------------------------------------------------------------------
   Segue o mesmo padrão do form "Planos Estendidos" (RSForm 10, art 74), que é
   a referência de formulário do site — mesmos tokens da seção "RSForm 8, 9 e
   10" acima:
     caixa   -> altura 50px, radius 10px, borda #e0e3ee, texto #3a3f5c
     foco    -> borda #4100FF + halo rgba(65,0,255,.12)
     CTA     -> retângulo sólido #4100FF, altura 58px, radius 8px, bold 16px
     grade   -> duas colunas
   A diferença é que aqui os rótulos existem de verdade (o form de planos usa
   só placeholder): há campos só de leitura — e-mail de login, ID de assinante,
   CPF — que sem rótulo não significam nada.

   A view só tem uma aba (o item de menu 333 tem show_my_subscriptions e
   show_subscriptions_history = 0), então os campos são filhos diretos do
   <form> e a grade pode viver nele. Se alguma dessas opções for ligada no
   admin, o componente passa a emitir <joomla-tab> e esta grade precisa mudar
   de lugar.
   -------------------------------------------------------------------------- */

/* O <h1> do componente ("User Profile") duplica o título vindo do Builder */
#osm-profile-page .osm-page-title,
#osm-subscription-history .osm-page-title { display: none; }

/* Sem max-width aqui: o menu da conta é filho deste bloco e precisa da largura
   inteira para caber numa linha só. Quem estreita é o .osm-form. */
#osm-profile-page .osm-page-intro-text {
    max-width: 860px;
    margin: 0 auto 24px;
}

/* Grade de duas colunas */
#osm-profile-page .osm-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
    align-items: start;

    max-width: 860px;
    margin: 0 auto;
}

/* O componente emite o grid do Bootstrap 5 (.row + .col-md-3/.col-md-9), que
   joga o rótulo numa coluna estreita à esquerda e estica o campo pela largura
   toda. Aqui cada campo vira uma célula da grade, com rótulo em cima. */
#osm-profile-page .osm-form .form-group,
#osm-profile-page .osm-form [id^="field_"] {
    display: block;
    margin: 0;
}

#osm-profile-page .osm-form .form-control-label,
#osm-profile-page .osm-form .eb-form-control {
    flex: none;
    width: 100%;
    max-width: none;
    padding: 0;
}

#osm-profile-page .osm-form .form-control-label {
    margin-bottom: 6px;

    color: #6271A3;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}

#osm-profile-page .osm-form .form-control-label label { font-weight: 600; }
#osm-profile-page .osm-form .required { color: #e5004c; }

/* Ocupam a linha inteira */
#osm-profile-page .osm-form #field_consentimento,
#osm-profile-page .osm-form .field-type-checkboxes,
#osm-profile-page .osm-form .field-type-radio,
#osm-profile-page .osm-form .field-type-textarea,
#osm-profile-page .osm-form .form-actions { grid-column: 1 / -1; }

/* Divs vazias que o componente emite entre os campos não podem consumir célula */
#osm-profile-page .osm-form > .clearfix { display: none; }

/* Campos */
#osm-profile-page .osm-form input[type="text"],
#osm-profile-page .osm-form input[type="email"],
#osm-profile-page .osm-form input[type="password"],
#osm-profile-page .osm-form input[type="tel"],
#osm-profile-page .osm-form input[type="number"],
#osm-profile-page .osm-form input[type="date"],
#osm-profile-page .osm-form select,
#osm-profile-page .osm-form textarea {
    width: 100%;
    height: 50px;
    padding: 0 16px;

    color: #3a3f5c;
    font-size: 15px;
    line-height: 1.4;

    background: #fff;
    border: 1px solid #e0e3ee;
    border-radius: 10px;
    outline: none;
    box-shadow: none;

    box-sizing: border-box;
    transition: border-color .15s ease, box-shadow .15s ease;
}

#osm-profile-page .osm-form textarea {
    height: auto;
    min-height: 120px;
    padding: 14px 16px;
    resize: vertical;
}

#osm-profile-page .osm-form input::placeholder,
#osm-profile-page .osm-form textarea::placeholder { color: #8a93b8; opacity: 1; }

#osm-profile-page .osm-form input:focus,
#osm-profile-page .osm-form select:focus,
#osm-profile-page .osm-form textarea:focus {
    border-color: #4100FF;
    box-shadow: 0 0 0 3px rgba(65, 0, 255, .12);
}

/* Valores só de leitura (e-mail de login, ID de assinante, CPF). Ganham a mesma
   caixa dos campos, em cinza e sem borda forte: alinham na grade e já dizem
   "isto não se edita" sem precisar de aviso. */
#osm-profile-page .osm-form .osm-field-value .eb-form-control {
    display: flex;
    align-items: center;

    min-height: 50px;
    padding: 0 16px;

    color: #6271A3;
    font-size: 15px;

    background: #f5f6f8;
    border: 1px solid #edeff5;
    border-radius: 10px;

    box-sizing: border-box;
}

/* Mesmo tratamento para os dois blocos montados à mão no override (e-mail de
   login e ID de assinante), que não recebem a classe .osm-field-value.
   Regra separada de propósito: navegador sem :has() ignora só esta. */
#osm-profile-page .osm-form [id^="field_"] .eb-form-control:not(:has(input, select, textarea, fieldset)) {
    display: flex;
    align-items: center;

    min-height: 50px;
    padding: 0 16px;

    color: #6271A3;
    font-size: 15px;

    background: #f5f6f8;
    border: 1px solid #edeff5;
    border-radius: 10px;

    box-sizing: border-box;
}

/* Senha: o componente emite .input-group do Bootstrap, mas o CSS do Bootstrap
   não é carregado. Campo e botão de olho no mesmo box. */
#osm-profile-page .osm-form .input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
}

#osm-profile-page .osm-form .input-group > input {
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

#osm-profile-page .osm-form .input-group .input-password-toggle,
#osm-profile-page .osm-form .input-group > .btn {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;

    height: 50px;
    padding: 0 16px;

    color: #8a93b8;

    background: #fff;
    border: 1px solid #e0e3ee;
    border-left: none;
    border-radius: 0 10px 10px 0;

    line-height: 1;
    cursor: pointer;
}

#osm-profile-page .osm-form .input-group .input-password-toggle:hover,
#osm-profile-page .osm-form .input-group > .btn:hover { color: #4100FF; }

#osm-profile-page .osm-form .input-group .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Consentimento — o rótulo "Consentimento" fica: é o título que o cliente deu
   ao campo no admin, não cabe ao CSS sumir com ele. */
#osm-profile-page .osm-form .osm-checkboxes-contaier { margin: 0; padding: 0; border: 0; }

#osm-profile-page .osm-form .checkbox,
#osm-profile-page .osm-form .osm-checkboxes-contaier label {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    margin: 0;

    color: #6271A3;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
    cursor: pointer;
}

/* Checkbox/radio: o tema aplica appearance:none em .form-check-input (esperando
   .uk-checkbox) e o controle some. Mesmo conserto dos RSForms. */
#osm-profile-page .osm-form input[type="checkbox"],
#osm-profile-page .osm-form input[type="radio"] {
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    appearance: auto !important;

    width: 18px !important;
    height: 18px !important;
    min-width: 18px;
    margin: 1px 0 0 0 !important;
    padding: 0;

    background: none !important;
    background-color: initial !important;
    border: initial !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    accent-color: #4100FF;

    flex: 0 0 auto;
    position: static;
    overflow: visible;
    opacity: 1;
    vertical-align: middle;
}

/* Ações: "Atualizar" é o CTA (mesmo retângulo sólido do "Enviar" do form de
   planos) e ocupa a linha; "Sair" fica ao lado, em contorno discreto. */
#osm-profile-page .form-actions {
    display: flex;
    gap: 12px;

    margin-top: 12px;
    padding: 0;

    background: none;
    border: none;
}

#osm-profile-page .form-actions .btn,
#osm-profile-page .form-actions input[type="submit"],
#osm-profile-page .form-actions input[type="button"] {
    height: 58px;
    padding: 0 24px;

    color: #fff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .2px;
    text-align: center;

    background: #4100FF;
    border: 1px solid #4100FF;
    border-radius: 8px;

    cursor: pointer;
    transition: background .15s ease, color .15s ease, transform .05s ease;
}

#osm-profile-page .form-actions #osm-btn-update-profile { flex: 1 1 auto; }

#osm-profile-page .form-actions .btn:hover,
#osm-profile-page .form-actions input[type="submit"]:hover,
#osm-profile-page .form-actions input[type="button"]:hover { background: #3400cc; }

#osm-profile-page .form-actions input[type="submit"]:active,
#osm-profile-page .form-actions input[type="button"]:active { transform: translateY(1px); }

/* "Sair" é ação secundária: contorno, não sólido */
#osm-profile-page .form-actions #osm-btn-logout {
    flex: 0 0 auto;
    min-width: 150px;

    color: #6271A3;
    font-weight: 600;

    background: transparent;
    border: 1px solid #e0e3ee;
}

#osm-profile-page .form-actions #osm-btn-logout:hover {
    color: #4100FF;
    background: #f5f6f8;
    border-color: #d5d9e8;
}

/* Blocos de renovação/upgrade, quando o plano os habilita */
#osm-profile-page .osm-form-heading {
    grid-column: 1 / -1;
    margin-top: 28px;
    color: #4100ff;
    font-size: 20px;
}

@media (max-width: 768px) {
    #osm-profile-page { padding: 0 15px; }

    #osm-profile-page .osm-form {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    #osm-profile-page .form-actions { flex-direction: column; }

    #osm-profile-page .form-actions .btn,
    #osm-profile-page .form-actions input[type="submit"],
    #osm-profile-page .form-actions input[type="button"] { width: 100%; }
}


/* --------------------------------------------------------------------------
   "Minhas Assinaturas" (view subscriptions) e "Gerenciar Usuários"
   (view groupmembers) — 2026-07-31
   --------------------------------------------------------------------------
   As duas páginas são listas em <table> com as classes do Bootstrap
   (.table.table-striped.table-bordered[.table-hover]), e o "Gerenciar
   Usuários" ainda traz uma barra de ferramentas do Joomla (Editar/Excluir/
   Exportar) e um filtro de busca — tudo desenhado para o admin, não para o
   site. Aqui vira a mesma linguagem do resto: cartão branco com radius 10px e
   borda #e0e3ee, cabeçalho em #f5f6f8, botões roxos #4100FF.

   As duas views compartilham o id #osm-subscription-history (o groupmembers é
   cópia do subscriptions no componente), então um escopo só cobre ambas.
   -------------------------------------------------------------------------- */

#osm-subscription-history {
    max-width: 1100px;
    margin: 0 auto;
}

/* O menu da conta precisa da largura cheia para caber numa linha */
#osm-subscription-history .arb-account-menu { max-width: none; }

#osm-subscription-history .osm-page-intro-text { margin-bottom: 24px; }

/* --- Tabela --------------------------------------------------------------- */

/* Rolagem horizontal no celular em vez de estourar a página.
   Wrapper adicionado nos overrides das duas views. */
.arb-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;

    background: #fff;
    border: 1px solid #e0e3ee;
    border-radius: 10px;
}

#osm-subscription-history .table {
    width: 100%;
    margin: 0;

    border: 0;
    border-collapse: collapse;

    font-size: 15px;
    color: #3a3f5c;
}

/* O .table-bordered do Bootstrap desenha borda em DOIS níveis:
     .table-bordered > :not(caption) > *      -> nos grupos <thead>/<tbody>/<tfoot>
     .table-bordered > :not(caption) > * > *  -> nas células
   e a cor vem de "border-color: inherit", que acaba herdando a cor do texto.
   Daí as duas listras escuras no topo e na base da tabela. Zerar só as células
   (regra abaixo) não bastava — os grupos precisam ser zerados também, senão a
   borda clara do .arb-table-wrap fica escondida atrás delas. */
#osm-subscription-history .table > thead,
#osm-subscription-history .table > tbody,
#osm-subscription-history .table > tfoot,
#osm-subscription-history .table tr {
    border: 0;
}

#osm-subscription-history .table th,
#osm-subscription-history .table td {
    padding: 14px 16px;
    border: 0;
    border-bottom: 1px solid #edeff5;
    vertical-align: middle;
    text-align: left;
}

#osm-subscription-history .table thead th {
    background: #f5f6f8;

    color: #6271A3;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;

    border-bottom: 1px solid #e0e3ee;
}

#osm-subscription-history .table tbody tr:last-child td { border-bottom: 0; }

/* .table-striped/.table-hover do Bootstrap pintam com --bs-* que o tema
   redefiniu (--bs-primary é #FFFFFF aqui). Zebra e hover próprios: */
#osm-subscription-history .table tbody tr { background: #fff; }
#osm-subscription-history .table tbody tr:nth-child(even) { background: #fbfbfd; }
#osm-subscription-history .table tbody tr:hover { background: #f5f3ff; }

#osm-subscription-history .table a {
    color: #4100FF;
    font-weight: 600;
    text-decoration: none;
}

#osm-subscription-history .table a:hover { text-decoration: underline; }

#osm-subscription-history .table .center { text-align: center; }
#osm-subscription-history .table [style*="text-align: right"] { text-align: right !important; }

/* O componente marca as colunas secundárias com "d-none d-sm-block
   d-md-table-cell". Entre 576px e 767px o d-sm-block transforma a célula em
   bloco e quebra a linha da tabela. Aqui ela fica escondida até 768px, onde
   volta como célula de verdade. */
#osm-subscription-history .table .d-sm-block { display: none; }

@media (min-width: 768px) {
    #osm-subscription-history .table .d-md-table-cell { display: table-cell; }
}

/* Checkbox da coluna de seleção (Gerenciar Usuários) */
#osm-subscription-history .table input[type="checkbox"] {
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    appearance: auto !important;

    width: 18px !important;
    height: 18px !important;
    min-width: 18px;
    margin: 0 !important;
    padding: 0;

    background: none !important;
    background-color: initial !important;
    border: initial !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    accent-color: #4100FF;

    position: static;
    opacity: 1;
    vertical-align: middle;
}

/* --- Barra de ferramentas (Gerenciar Usuários) ---------------------------- */

#osm-subscription-history #btn-toolbar { margin-bottom: 16px; }

#osm-subscription-history #toolbar,
#osm-subscription-history #btn-toolbar .btn-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#osm-subscription-history #btn-toolbar .btn,
#osm-subscription-history .filters .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    height: 44px;
    padding: 0 20px;

    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;

    background: #4100FF;
    border: 1px solid #4100FF;
    border-radius: 8px;

    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

#osm-subscription-history #btn-toolbar .btn:hover,
#osm-subscription-history .filters .btn:hover {
    background: #3400cc;
    border-color: #3400cc;
}

/* Excluir é destrutivo: contorno vermelho, e só enche no hover */
#osm-subscription-history #btn-toolbar .btn-danger {
    color: #e5004c;
    background: transparent;
    border-color: #f3c2d2;
}

#osm-subscription-history #btn-toolbar .btn-danger:hover {
    color: #fff;
    background: #e5004c;
    border-color: #e5004c;
}

/* "Editar" e "Excluir" são list-selection: o joomla-toolbar-button os desabilita
   enquanto nenhuma linha está marcada (setDisabled() põe o atributo `disabled`
   no <button>; a classe .disabled só é usada quando o elemento é <a>).
   Precisam PARECER desabilitados — senão viram dois botões sólidos convidando
   a um clique que não faz nada. */
#osm-subscription-history #btn-toolbar .btn:disabled,
#osm-subscription-history #btn-toolbar .btn[disabled],
#osm-subscription-history #btn-toolbar .btn.disabled {
    color: #a7aec9;
    background: #f5f6f8;
    border-color: #e9ebf2;
    cursor: not-allowed;
    opacity: 1;
}

/* O hover do .btn-danger é mais específico que a regra de desabilitado acima e
   passaria por cima dela — daí estas variantes explícitas. */
#osm-subscription-history #btn-toolbar .btn-danger:disabled:hover,
#osm-subscription-history #btn-toolbar .btn-danger[disabled]:hover,
#osm-subscription-history #btn-toolbar .btn:disabled:hover,
#osm-subscription-history #btn-toolbar .btn[disabled]:hover {
    color: #a7aec9;
    background: #f5f6f8;
    border-color: #e9ebf2;
}

/* joomla-toolbar-button é custom element sem display próprio */
#osm-subscription-history joomla-toolbar-button { display: inline-flex; }

/* --- Filtro de busca (Gerenciar Usuários) --------------------------------- */

#osm-subscription-history .filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    margin: 0 0 16px;
    padding: 0;

    background: none;
    border: 0;
}

/* o componente usa float-start (Bootstrap); dentro do flex o float atrapalha */
#osm-subscription-history .filters .float-start { float: none !important; }

/* Atenção: o campo de busca vem como "filter-search btn-group", ou seja, casa
   também com a regra de .btn-group abaixo. Por isso o seletor aqui carrega as
   duas classes — senão o flex-basis dos botões venceria e o campo não cresceria. */
#osm-subscription-history .filters .filter-search.btn-group { flex: 1 1 280px; }

#osm-subscription-history .filters #filter_search {
    width: 100%;
    height: 44px;
    padding: 0 16px;

    color: #3a3f5c;
    font-size: 14px;

    background: #fff;
    border: 1px solid #e0e3ee;
    border-radius: 8px;
    outline: none;

    box-sizing: border-box;
    transition: border-color .15s ease, box-shadow .15s ease;
}

#osm-subscription-history .filters #filter_search::placeholder { color: #8a93b8; opacity: 1; }

#osm-subscription-history .filters #filter_search:focus {
    border-color: #4100FF;
    box-shadow: 0 0 0 3px rgba(65, 0, 255, .12);
}

#osm-subscription-history .filters .btn-group:not(.filter-search) {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
}

/* botões de lupa/limpar são só ícone: quadrados, não retângulos largos */
#osm-subscription-history .filters .btn { padding: 0; width: 44px; justify-content: center; }

/* O segundo (limpar) é secundário */
#osm-subscription-history .filters .btn-group:not(.filter-search) .btn + .btn {
    color: #6271A3;
    background: transparent;
    border-color: #e0e3ee;
}

#osm-subscription-history .filters .btn-group .btn + .btn:hover {
    color: #4100FF;
    background: #f5f6f8;
    border-color: #d5d9e8;
}

/* --- Paginação ------------------------------------------------------------ */

#osm-subscription-history .pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;

    margin: 0;
    padding: 14px 0 4px;

    list-style: none;
}

#osm-subscription-history .pagination ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#osm-subscription-history .pagination a,
#osm-subscription-history .pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 36px;
    height: 36px;
    padding: 0 10px;

    color: #6271A3;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;

    border: 1px solid #e0e3ee;
    border-radius: 8px;
}

#osm-subscription-history .pagination a:hover {
    color: #4100FF;
    background: #f5f6f8;
    text-decoration: none;
}

#osm-subscription-history .pagination .active > span,
#osm-subscription-history .pagination span.active {
    color: #fff;
    background: #4100FF;
    border-color: #4100FF;
}

/* a paginação vem dentro de um <td colspan> no rodapé da tabela */
#osm-subscription-history .table tfoot td {
    background: #fff;
    border-top: 1px solid #e0e3ee;
    border-bottom: 0;
}

/* --- Estado vazio --------------------------------------------------------- */

.arb-empty-state {
    padding: 44px 24px;

    text-align: center;

    background: #fff;
    border: 1px solid #e0e3ee;
    border-radius: 10px;
}

.arb-empty-state p {
    margin: 0;
    color: #6271A3;
    font-size: 16px;
}

.arb-empty-state .arb-empty-state-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 44px;
    margin-top: 18px;
    padding: 0 28px;

    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;

    background: #4100FF;
    border-radius: 8px;
    transition: background .15s ease;
}

.arb-empty-state .arb-empty-state-cta:hover {
    color: #fff;
    background: #3400cc;
    text-decoration: none;
}

@media (max-width: 768px) {
    #osm-subscription-history { padding: 0 15px; }

    #osm-subscription-history .filters .filter-search { flex: 1 1 100%; }

    #osm-subscription-history #btn-toolbar .btn { flex: 1 1 auto; justify-content: center; }
}

/* ==========================================================================
   Modal "Solicitar acesso ao arquivo original da sentença arbitral"
   --------------------------------------------------------------------------
   O markup do modal está no elemento HTML do Builder (template "Sentença Full",
   layout SrdzFrty — extensions.custom_data do plg YOOtheme, ext 806), não em
   arquivo. Aqui fica só o acabamento: o UIkit entrega o .uk-modal-dialog com
   canto reto. Começou em 10px (o raio dos painéis brancos: .arb-table-wrap,
   .arb-empty-state, campos de busca) e subiu para 16px a pedido do cliente em
   2026-08-03 — mesma medida dos blocos maiores do site, e o modal é grande o
   bastante para pedir um canto mais solto que o de um painel.

   Só o raio: o dialog também é .uk-modal-body, então o conteúdo já entra com
   30px de padding e nunca encosta no canto — não precisa de overflow: hidden.
   ========================================================================== */
#modal-acesso-sentenca .uk-modal-dialog {
    border-radius: 16px;
}

/* ==========================================================================
   Fontes: sem troca visível depois da página aberta — 2026-07-30
   --------------------------------------------------------------------------
   O theme.9.css (compilado pelo YOOtheme, não editável à mão) declara as 18
   variantes da DM Sans sem "font-display". O padrão "auto" deixa o navegador
   pintar o texto na fonte de fallback e trocar depois — é o efeito de "fonte
   crua" que aparecia ao abrir a página.

   Aqui as 4 variantes realmente usadas no site (400/500/600/700, subset latin,
   que cobre os acentos do português) são redeclaradas com font-display: block:
   o texto espera a fonte certa em vez de aparecer errado e corrigir. Custa uns
   milissegundos a mais, mas a página abre já correta — e o .htaccess agora faz
   preload desses mesmos arquivos, então a espera é mínima.

   Mesmo arquivo e mesmo unicode-range das declarações originais: nenhum
   download novo, só a última declaração prevalece.
   ========================================================================== */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  src: url(../fonts/dmsans-f2d90b78.woff2) format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: block;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  src: url(../fonts/dmsans-d6530f6a.woff2) format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: block;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  src: url(../fonts/dmsans-64a332b0.woff2) format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: block;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  src: url(../fonts/dmsans-62de5fc5.woff2) format('woff2');
}

/* ==========================================================================
   MODO DE PESQUISA — pílula "Palavras-chave | arbiped IA"
   Home (art 37) e Pesquisa Avançada (art 53). O markup (#arb-mode) fica num
   elemento HTML do Builder logo acima da grade de ícones; o comportamento
   está em js/custom.js. Selecionado = pílula roxa preenchida.
   ========================================================================== */
.arb-mode-wrap { display: flex; justify-content: center; margin: 0 0 21px; }

.arb-mode {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px;
    border: 1px solid #e2ddf7;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .05);
    max-width: 100%;
}

.arb-mode-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 38px;
    padding: 0 27px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #4100FF;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
}
.arb-mode-btn:hover { background: rgba(65, 0, 255, .07); }
.arb-mode-btn:focus-visible { outline: 2px solid #4100FF; outline-offset: 2px; }
.arb-mode-btn.is-active { background: #4100FF; color: #fff; }
.arb-mode-btn.is-active:hover { background: #3600d6; }

/* Sparkle dentro do círculo: contorno quando inativo, círculo cheio quando ativo */
.arb-mode-ic {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
}
/* O SVG vem com 16px no markup do Builder; aqui ele acompanha a escala do botão. */
.arb-mode-ic svg { width: 13px; height: 13px; }
.arb-mode-btn.is-active .arb-mode-ic {
    border-color: #fff;
    background: #fff;
    color: #4100FF;
}

@media (max-width: 640px) {
    .arb-mode { width: 100%; }
    .arb-mode-btn { flex: 1 1 0; min-width: 0; padding: 0 12px; font-size: 12px; gap: 7px; }
}

/* ==========================================================================
   FAQ — Perguntas Frequentes (art. 76, menu 362 → /pt/faq.html) — 2026-08-13
   --------------------------------------------------------------------------
   Três níveis de accordion: seção (1, 2, 3…), pergunta (1.1, 1.2…) e, onde o
   documento desce mais um degrau, subitem (4.2.1, 4.2.2…). O nível 1 é o
   elemento "accordion" do Builder; os níveis 2 e 3 são markup UIkit dentro do
   conteúdo de cada item (o Builder não aninha accordion sozinho) — gerados por
   .claude/tools/faq-conteudo.php.

   A página segue o padrão do ÍNDICE (art. 62 + gestao/indice-categorias):
   cartão branco de 1040px com faixa roxa no topo (isso vem do layout, no
   gerador) e, aqui, a mesma tipografia de lá — título de item em 13px, 700,
   caixa alta, #4f5f9c, com o chevron "›" roxo que gira 90° ao abrir; corpo em
   14px/1.6 na mesma cor; separador #dfe3ee; nível seguinte recuado por um
   filete à esquerda. Os valores são cópia do CSS de indice-categorias.php: se
   um dia aquele mudar, este acompanha na mão (não há arquivo comum — o índice
   é standalone, fora do Joomla).

   Sem este bloco o accordion do tema fica ilegível em fundo claro: o
   theme.9.css traz `.uk-accordion-title:hover { color:#fff }` e o ícone +/−
   com `fill="#FFFFFF"` (a armadilha do §2 de ui-componentes.md).

   Escopo em #arb-faq (ID da seção no Builder) para não vazar para os outros
   accordions do site.
   ========================================================================== */

/* --------------------------------------------------------------------------
   PÁGINAS EM CARTÃO — estrutura comum (FAQ, Publicações Autorais)
   --------------------------------------------------------------------------
   No Índice a faixa roxa vai de borda a borda do cartão e o conteúdo é que
   recua. Lá isso é feito com `width: 1040px!important` na faixa, contando que
   ela transborde o recuo do container — o que só acerta na largura exata e
   estoura a tela em viewport menor.

   Aqui o caminho é o inverso e não depende de largura: o container do cartão
   perde o recuo, a faixa perde a margem negativa do gutter e ocupa 100%, e
   quem recua é o conteúdo — cada página aplica seus 40px no próprio bloco
   (`#arb-faq .uk-accordion`, `#lista-autorais .results-box`).

   Dois IDs no seletor porque o campo `css` do elemento vira um <style> no
   corpo da página, depois deste arquivo, já com especificidade de ID.
   -------------------------------------------------------------------------- */
#arb-faq > .uk-container,
#pub-autorais > .uk-container {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

/* A faixa perde a margem negativa do gutter e ocupa o cartão inteiro. O grid
   do conteúdo mantém a margem do UIkit (-30px, devolvidos pelo padding da
   coluna): assim o conteúdo alinha na borda do cartão e o recuo de verdade
   vem do bloco de cada página, igual dos dois lados. */
#arb-faq #arb-faq-faixa,
#pub-autorais #pub-autorais-faixa {
    width: 100% !important;
    max-width: none;
    margin: 0 !important;
}

/* A lista/accordion começa logo abaixo da faixa, como no Índice. */
#arb-faq > .uk-container > .uk-grid + .uk-grid,
#pub-autorais > .uk-container > .uk-grid + .uk-grid { margin-top: 0; }

/* Recuo do conteúdo — o mesmo do Índice (40px), 20px em tela estreita. */
#arb-faq .uk-accordion { padding: 24px 40px 30px; }

@media (max-width: 640px) {
    #arb-faq .uk-accordion { padding: 18px 20px 22px; }
}

/* --- Títulos: chevron no lugar do +/− branco do tema ---------------------- */
#arb-faq .uk-accordion-title::before { display: none; }

#arb-faq .uk-accordion-title::after {
    content: "›";
    display: inline-block;
    margin-left: 10px;
    color: #4100ff;
    font-size: 18px;
    line-height: 1;
    transition: transform .25s ease;
}
#arb-faq .uk-open > .uk-accordion-title::after { transform: rotate(90deg); }

/* --- Nível 1: seções ------------------------------------------------------ */
/* O "artigo-title" do Índice é 13px em caixa alta com letter-spacing; aqui o
   cliente pediu caixa normal (2026-08-13), então o tamanho sobe para 16px —
   13px sem caixa alta ficaria menor que as perguntas que ele abre. */
#arb-faq .el-item > .uk-accordion-title {
    padding: 14px 0;
    color: #4f5f9c;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
}
#arb-faq .el-item > .uk-accordion-title:hover { color: #4100ff; }

/* No índice todo item tem filete em cima, inclusive o primeiro — é o que
   separa a lista da faixa roxa. */
#arb-faq .el-item { border-top: 1px solid #dfe3ee; }
#arb-faq .uk-accordion > :nth-child(n+2) {
    margin-top: 0;
    padding-top: 0;
    box-shadow: none;
}
#arb-faq .el-item > .uk-accordion-content { margin-top: 0; padding-bottom: 18px; }

/* O número da seção/pergunta: um passo mais leve que o título, com largura
   própria para os títulos alinharem entre si. */
#arb-faq .arb-faq-n {
    display: inline-block;
    min-width: 2.4em;
    font-weight: 500;
    opacity: .7;
}
#arb-faq .arb-faq-sub-3 .arb-faq-n { min-width: 3.4em; }

/* --- Nível 2: perguntas — a escala do "categoria-level-0" ----------------- */
#arb-faq .arb-faq-sub {
    margin: 0;
    padding: 0;
    list-style: none;
}
#arb-faq .arb-faq-sub > li + li { border-top: 1px solid #eef0f6; }

#arb-faq .arb-faq-sub > li > .uk-accordion-title {
    padding: 11px 0;
    color: rgba(65, 0, 255, .85);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.45;
}
#arb-faq .arb-faq-sub > li > .uk-accordion-title:hover { color: #4100ff; }

#arb-faq .arb-faq-sub .uk-accordion-content {
    margin-top: 0;
    padding: 0 0 18px;
    color: #4f5f9c;
    font-size: 14px;
    line-height: 1.6;
}
#arb-faq .arb-faq-sub .uk-accordion-content > :last-child { margin-bottom: 0; }

/* --- Nível 3: subitens — o recuo dos níveis do índice --------------------- */
#arb-faq .arb-faq-sub-3 {
    margin: 4px 0 4px 22px;
    padding-left: 18px;
    border-left: 1px solid #dfe3ee;
}
#arb-faq .arb-faq-sub-3 > li > .uk-accordion-title {
    color: rgba(76, 88, 130, .95);
    font-size: 14px;
    font-weight: 500;
}
#arb-faq .arb-faq-sub-3 > li > .uk-accordion-title::after { font-size: 16px; }

/* --- Conteúdo das respostas ---------------------------------------------- */
#arb-faq .arb-faq-lista {
    margin: 0 0 14px;
    padding-left: 16px;
    list-style: none;
}
#arb-faq .arb-faq-lista > li {
    position: relative;
    margin-bottom: 7px;
}
/* Mesma bolinha dos itens do índice (.categoria-dot): 4px, cor do texto. */
#arb-faq .arb-faq-lista > li::before {
    content: "";
    position: absolute;
    left: -16px;
    top: .65em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(65, 0, 255, .85);
}

#arb-faq .arb-faq-citacao {
    padding: 12px 16px;
    border-left: 3px solid rgba(65, 0, 255, .85);
    background: #f7f8fb;
    border-radius: 0 8px 8px 0;
}

/* Tabela do item 3.4 — rola sozinha em tela estreita, nunca empurra a página. */
#arb-faq .arb-faq-tabela-wrap {
    overflow-x: auto;
    margin-bottom: 14px;
}
#arb-faq .arb-faq-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    line-height: 1.5;
}
#arb-faq .arb-faq-tabela th,
#arb-faq .arb-faq-tabela td {
    padding: 9px 12px;
    border-bottom: 1px solid #dfe3ee;
    text-align: left;
    vertical-align: top;
}
#arb-faq .arb-faq-tabela thead th {
    color: rgba(65, 0, 255, .85);
    font-size: 13px;
    font-weight: 600;
    border-bottom-width: 2px;
}
#arb-faq .arb-faq-tabela tbody th { font-weight: 600; }

@media (max-width: 640px) {
    #arb-faq .el-item > .uk-accordion-title { font-size: 15px; }
    #arb-faq .arb-faq-sub > li > .uk-accordion-title { font-size: 14px; }
    #arb-faq .arb-faq-sub .uk-accordion-content { font-size: 13px; }
    #arb-faq .arb-faq-sub-3 { margin-left: 10px; padding-left: 12px; }
}

/* ==========================================================================
   Sobras de quem está logado: faixa em branco + lápis de edição
   ========================================================================== */

/* A FAIXA EM BRANCO acima do rodapé.
   O módulo "My Projects (floating menu)" (id 137) mora na posição `bottom` do
   tema, e o YOOtheme sempre embrulha essa posição numa `uk-section` com o
   padding padrão (~70px). Só que o markup do módulo é `.arb-flut`, que é
   `position: fixed` — não ocupa lugar no fluxo. Resultado: uma seção de altura
   cheia e conteúdo nenhum, visível para qualquer usuário autenticado (o módulo
   tem access 8, por isso o visitante não via nada).
   Zerar o padding colapsa a faixa sem esconder a seção — `display:none` levaria
   junto o botão flutuante, que é filho dela.
   Se um dia entrar um módulo de verdade na posição `bottom`, remova esta regra
   e devolva o padding pelo Customizer (Bottom > Padding). */
.tm-bottom.uk-section {
    padding-top: 0;
    padding-bottom: 0;
}

/* O LÁPIS DE EDIÇÃO no canto direito.
   É o "Frontend Editing" do Joomla: quando ligado, o core prepende um link com
   ícone de lápis (+ um balão de dica) ao HTML de todo módulo, para quem tem
   permissão de editar módulos — ou seja, só a equipe vê. A edição é sempre
   feita pelo admin do Joomla/YOOtheme, então este atalho não serve para nada
   aqui e ainda quebra o layout.
   Desligar de vez é em Sistema > Configuração Global > Site > "Frontend
   Editing" = Nenhum; enquanto isso, esconder no CSS resolve em todas as
   páginas. O balão vem logo depois do link, por isso o seletor irmão. */
.jmodedit,
.jmodedit + [role="tooltip"],
.jmenuedit {
    display: none !important;
}

/* O BOTÃO "EDITAR" FLUTUANTE, no canto inferior direito.
   Este é outro: vem do YOOtheme, não do Joomla. O Builder anexa o link ao
   conteúdo de toda página que ele monta, para quem tem permissão de editar o
   artigo — Super User inclusive. São dois pontos no tema pai, com markup
   idêntico (`packages/builder-joomla/src/Listener/RenderBuilderButton.php` e
   `packages/builder-joomla-source/src/Listener/LoadTemplate.php`), e nenhum
   deles tem chave de configuração para desligar.

   O seletor é a assinatura desse link: âncora que é botão primário, ancorada
   embaixo à direita, com z-index e `position: fixed` no atributo style. Conferi
   que nada mais no site usa essa combinação — `uk-position-bottom-right` e
   `uk-position-z-index` não aparecem em nenhum artigo nem em nenhum layout do
   Builder. O botão flutuante "Meus Projetos" não é atingido: ele não tem essas
   classes e o `fixed` dele vem do `.arb-flut`, não de style inline.

   No Customizer o botão nem chega a ser gerado (`!app.isCustomizer`), então
   editar pelo YOOtheme continua igual. */
a.uk-button-primary.uk-position-bottom-right.uk-position-z-index[style*="fixed"] {
    display: none !important;
}

/* ==========================================================================
   ESTADO DE CARREGAMENTO — 2026-08-16
   ==========================================================================
   As telas de categoria, índice e resultados não vêm prontas do servidor: a
   página chega com um <div> VAZIO e um script inline que busca o conteúdo em
   `gestao/` por fetch. Medido nesta data, numa categoria de jurisprudência:

       shell da página ....... ~0,9 s
       fetch do conteúdo ..... ~2,2 s

   Ou seja, ~3 segundos de área em branco antes de qualquer coisa aparecer. Sem
   sinal nenhum na tela, isso se lê como página quebrada — e o usuário recarrega
   ou sai, justamente quando o conteúdo já estava a caminho.

   Este é o primeiro spinner de verdade do site. As buscas usam `.jf-loading`,
   que é só TEXTO — a classe não tem nenhuma regra de CSS em lugar nenhum
   (conferido: zero ocorrências no custom.css e nos arquivos de gestao/). Não há,
   portanto, regra existente para estender, como manda o §1 do ui-componentes.md;
   quando alguém quiser unificar, é só acrescentar `.jf-loading` ao seletor
   abaixo — mas repare que ela também aparece dentro das caixinhas de filtro da
   Pesquisa avançada (18 ocorrências), onde um spinner centralizado e grande
   ficaria deslocado. Por isso ficou de fora agora.

   Cor: `#4e00ff` (primária oficial, §3 do ui-componentes.md — é componente novo)
   sobre `#e0e3ee` (borda/divisor). Texto em `#8a93b8` (texto apagado): o aviso
   informa, não disputa atenção com o conteúdo que está chegando. */
.arb-carregando {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px 0;
    color: #8a93b8;
    font-size: 14px;
}

.arb-carregando::before {
    content: "";
    width: 22px;
    height: 22px;
    flex: none;
    border: 2px solid #e0e3ee;
    border-top-color: #4e00ff;
    border-radius: 50%;
    animation: arb-girar 0.7s linear infinite;
}

/* Quando o conteúdo não chega, o anel vira promessa vazia: gira para sempre e
   o usuário fica esperando algo que não vem. Aqui ele some e sobra o texto. */
.arb-carregando-parado::before {
    display: none;
}

@keyframes arb-girar {
    to { transform: rotate(360deg); }
}

/* Movimento contínuo incomoda (e pode passar mal) quem pediu menos animação no
   sistema. O anel continua, bem mais devagar — sinal de atividade sem pulso. */
@media (prefers-reduced-motion: reduce) {
    .arb-carregando::before {
        animation-duration: 2.4s;
    }
}