/* ==========================================================================
   HubAcademia — sistema visual
   --------------------------------------------------------------------------
   Carregado por último, depois de style.css, framework.css e bootstrap.css.
   Todas as classes usam o prefixo hub- para não colidir com o template.

   Regra de uso: nenhuma cor nova entra direto no Blade. Se precisar de uma,
   ela vira token aqui. É o que evita voltar às 103 cores soltas nas views.
   ========================================================================== */

:root {
    /* Marca — #261050 é a cor da HubSoft, tudo é derivado dela */
    --hub-marca:        #261050;
    --hub-marca-media:  #4A2A87;
    --hub-marca-chip:   #EEE9F7;

    /* Estado */
    --hub-ok:           #1B6B45;
    --hub-ok-chip:      #E4F1EA;
    --hub-atencao:      #8A5200;
    --hub-atencao-chip: #FDF3E3;
    --hub-atencao-borda:#E8C98F;
    --hub-info:         #1F5FA8;
    --hub-info-chip:    #E4EDF8;
    --hub-erro:         #A33418;
    --hub-erro-chip:    #F8E7E2;

    /* Neutros com viés de roxo, para conversarem com a marca */
    --hub-tinta:        #17141F;
    --hub-secundario:   #4A4458;
    --hub-suave:        #6F6980;
    --hub-linha:        #D3CEDD;
    --hub-fundo:        #F8F7FB;
    --hub-papel:        #FFFFFF;

    /* Forma e profundidade */
    --hub-raio:         10px;
    --hub-raio-p:       6px;
    --hub-sombra:       0 1px 2px rgba(23, 20, 31, .06);
    --hub-sombra-alta:  0 6px 18px rgba(23, 20, 31, .10);

    /* Espaçamento */
    --hub-e1: .25rem;
    --hub-e2: .5rem;
    --hub-e3: .75rem;
    --hub-e4: 1rem;
    --hub-e5: 1.5rem;
    --hub-e6: 2rem;
}

/* --------------------------------------------------------------------------
   Foco visível — o template não define, então teclado fica sem pista nenhuma
   -------------------------------------------------------------------------- */

.hub-cartao a:focus-visible,
.hub-botao:focus-visible,
.hub-video-item a:focus-visible {
    outline: 3px solid var(--hub-marca-media);
    outline-offset: 2px;
    border-radius: var(--hub-raio-p);
}

/* --------------------------------------------------------------------------
   Botões
   -------------------------------------------------------------------------- */

.hub-botao {
    font-size: .87rem;
    font-weight: 600;
    line-height: 1.2;
    padding: .62rem 1.15rem;
    border-radius: 7px;
    border: 1px solid transparent;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease;
}

.hub-botao-primario { background: var(--hub-marca); color: #fff; }
.hub-botao-primario:hover,
.hub-botao-primario:focus { background: var(--hub-marca-media); color: #fff; }

.hub-botao-contorno {
    background: transparent;
    color: var(--hub-marca);
    border-color: var(--hub-linha);
}
.hub-botao-contorno:hover,
.hub-botao-contorno:focus { border-color: var(--hub-marca); color: var(--hub-marca); }

.hub-botao-ok { background: var(--hub-ok); color: #fff; }
.hub-botao-ok:hover, .hub-botao-ok:focus { background: #155638; color: #fff; }

.hub-botao-atencao { background: var(--hub-atencao); color: #fff; }
.hub-botao-atencao:hover, .hub-botao-atencao:focus { background: #6B4400; color: #fff; }

.hub-botao-p { font-size: .79rem; padding: .5rem .85rem; }

/* --------------------------------------------------------------------------
   Faixa "continue de onde parou"
   Antes usava margin-left negativo e margin-left: 100px !important para
   posicionar. Agora é flex, e o alinhamento é consequência do layout.
   -------------------------------------------------------------------------- */

.hub-retomar {
    background: var(--hub-papel);
    border: 1px solid var(--hub-linha);
    border-radius: var(--hub-raio);
    box-shadow: var(--hub-sombra);
    padding: var(--hub-e4);
    display: flex;
    align-items: center;
    gap: var(--hub-e4);
    flex-wrap: wrap;
    margin-bottom: var(--hub-e5);
}

.hub-retomar-capa {
    width: 132px;
    height: 82px;
    border-radius: var(--hub-raio-p);
    flex: none;
    overflow: hidden;
    background: linear-gradient(135deg, var(--hub-marca) 0%, var(--hub-marca-media) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.hub-retomar-capa img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hub-retomar-txt {
    flex: 1 1 16rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.hub-rotulo {
    font-size: .67rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--hub-marca-media);
}

.hub-retomar-video {
    font-size: 1.12rem;
    font-weight: 600;
    line-height: 1.28;
    color: var(--hub-tinta);
    margin: 0;
    text-transform: none;
}

.hub-retomar-curso {
    font-size: .88rem;
    color: var(--hub-suave);
    text-transform: none;
}

/* --------------------------------------------------------------------------
   Cabeçalho da página
   -------------------------------------------------------------------------- */

/* A navbar é .header.header-transparent.uk-light: fundo transparente e texto
   branco, desenhada para flutuar SOBRE um hero escuro no topo da página. Sem
   esse fundo escuro, o nome do usuário fica ilegível sobre o cinza claro.

   Por isso o hero é full-bleed (fora do .container) e tem padding-top folgado:
   os 60px da navbar (.header { height: 45pt }) passam por cima dele. O template
   fazia o mesmo com .home-hero { padding-top: 105px }. */
.hub-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--hub-marca) 0%, var(--hub-marca-media) 100%);
    padding: 84px var(--hub-e5) var(--hub-e5);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: .2rem;
}

.hub-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .18;
}

/* Véu escuro sobre a imagem, para garantir contraste do texto da navbar
   e do título independentemente da foto que estiver ali */
.hub-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(23,20,31,.55) 0%, rgba(23,20,31,.15) 100%);
}

.hub-hero-txt { position: relative; z-index: 1; }

.hub-hero h1 {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    background: none;
    max-width: none;
    text-transform: none;
}

.hub-hero p {
    color: rgba(255, 255, 255, .85);
    font-size: .92rem;
    margin: .25rem 0 0;
    text-transform: none;
}

/* --------------------------------------------------------------------------
   Aviso de teste disponível
   -------------------------------------------------------------------------- */

.hub-aviso {
    background: var(--hub-atencao-chip);
    border: 1px solid var(--hub-atencao-borda);
    border-left: 4px solid var(--hub-atencao);
    border-radius: var(--hub-raio);
    padding: var(--hub-e4);
    display: flex;
    align-items: center;
    gap: var(--hub-e4);
    flex-wrap: wrap;
    margin-bottom: var(--hub-e3);
}

.hub-aviso-txt { flex: 1 1 18rem; display: flex; flex-direction: column; gap: .15rem; }

.hub-aviso-titulo {
    font-size: .98rem;
    font-weight: 600;
    color: var(--hub-atencao);
    margin: 0;
    text-transform: none;
}

.hub-aviso-detalhe { font-size: .86rem; color: #6B4400; text-transform: none; }

.hub-aviso-ok {
    background: var(--hub-ok-chip);
    border-color: #A9D2BC;
    border-left-color: var(--hub-ok);
}
.hub-aviso-ok .hub-aviso-titulo { color: var(--hub-ok); }
.hub-aviso-ok .hub-aviso-detalhe { color: #16543A; }

/* --------------------------------------------------------------------------
   Grade e cartão de curso
   -------------------------------------------------------------------------- */

.hub-secao-titulo {
    font-size: 1.08rem;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--hub-tinta);
    margin: 0 0 var(--hub-e3);
    display: flex;
    align-items: baseline;
    gap: .6rem;
    text-transform: none;
}

.hub-secao-titulo span {
    font-size: .83rem;
    font-weight: 400;
    color: var(--hub-suave);
}

.hub-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
    gap: var(--hub-e4);
}

.hub-cartao {
    position: relative;
    background: var(--hub-papel);
    border: 1px solid var(--hub-linha);
    border-radius: var(--hub-raio);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.hub-cartao:hover {
    border-color: var(--hub-marca-media);
    transform: translateY(-2px);
    box-shadow: var(--hub-sombra-alta);
}

/* O card inteiro continua clicável, mas por um único link esticado.
   Antes o card era um <a> com outro <a> dentro (o de certificado), o que é
   HTML inválido e tornava o destino do clique imprevisível. */
.hub-cartao-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Ações reais ficam acima do link esticado */
.hub-cartao-acao { position: relative; z-index: 2; display: flex; gap: var(--hub-e2); }

.hub-cartao-capa {
    height: 132px;
    background: linear-gradient(135deg, var(--hub-marca) 0%, var(--hub-marca-media) 100%);
    position: relative;
    display: flex;
    align-items: flex-end;
    padding: .7rem;
    flex: none;
}

.hub-cartao-capa img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hub-nivel {
    position: relative;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, .93);
    color: var(--hub-marca);
    padding: .2rem .5rem;
    border-radius: 4px;
}

.hub-cartao-corpo {
    padding: .95rem 1rem 1.05rem;
    display: flex;
    flex-direction: column;
    gap: .65rem;
    flex: 1;
}

.hub-cartao-nome {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
    color: var(--hub-tinta);
    text-transform: none;
}

.hub-cartao-nome a { color: inherit; text-decoration: none; }

.hub-cartao-resumo {
    font-size: .84rem;
    line-height: 1.45;
    color: var(--hub-suave);
    margin: 0;
    text-transform: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hub-cartao-meta {
    display: flex;
    gap: .9rem;
    font-size: .79rem;
    color: var(--hub-suave);
    font-variant-numeric: tabular-nums;
}

.hub-cartao-ultimo {
    font-size: .79rem;
    color: var(--hub-secundario);
    background: var(--hub-fundo);
    border-radius: var(--hub-raio-p);
    padding: .42rem .6rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-transform: none;
}

.hub-cartao-ultimo strong { color: var(--hub-marca-media); font-weight: 600; }

/* --------------------------------------------------------------------------
   Progresso
   A cor indica estado (não iniciado / em andamento / concluído), não nota.
   O percentual fica fora da barra, em texto sobre fundo claro — é o que
   garante contraste independente da cor de preenchimento.
   -------------------------------------------------------------------------- */

.hub-prog { display: flex; flex-direction: column; gap: .32rem; margin-top: auto; }

.hub-prog-topo {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: .76rem;
}

.hub-prog-rotulo { color: var(--hub-suave); text-transform: none; }

.hub-prog-valor {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--hub-secundario);
}

.hub-prog-valor.hub-completo { color: var(--hub-ok); }

.hub-trilho {
    height: 7px;
    background: var(--hub-linha);
    border-radius: 99px;
    overflow: hidden;
}

.hub-barra {
    height: 100%;
    background: var(--hub-marca-media);
    border-radius: 99px;
    transition: width .3s ease;
}

.hub-barra.hub-completo { background: var(--hub-ok); }

/* Variante alta, usada na barra do topo da tela de curso */
.hub-prog-alto .hub-trilho { height: 10px; }

.hub-selo-ok {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: var(--hub-ok-chip);
    color: var(--hub-ok);
    font-size: .72rem;
    font-weight: 600;
    padding: .28rem .55rem;
    border-radius: 5px;
    text-transform: none;
}

.hub-ico { width: 1em; height: 1em; flex: none; }

/* --------------------------------------------------------------------------
   Tela de curso — barra de progresso

   .course-progress-container e .progress-bar-externa são mantidos porque o JS
   da tela lê e reescreve esses seletores.

   A LISTA DE VÍDEOS NÃO É ESTILIZADA AQUI, de propósito. O template desenha
   a linha do tempo com .course-video-list li>a:before (a bolinha) e :after (a
   linha vertical), e posiciona a duração com li>a>span { position:absolute;
   right:12px }. Qualquer span extra dentro do <a> herda esse absolute e vai
   parar em cima da duração; e trocar o <a> para flex desmonta o padding-left
   de 60px que abre espaço para a bolinha. O desenho do template funciona —
   aqui só se ajusta cor, nunca layout.
   -------------------------------------------------------------------------- */

.course-progress-container {
    padding: 15px;
    border-bottom: 1px solid var(--hub-linha);
}

/* Título longo: o template usa white-space:nowrap com text-overflow:ellipsis,
   mas sem overflow:hidden no <a> — então o texto não era cortado nem quebrado,
   apenas passava por baixo do <span> da duração, que é absoluto em right:12px.
   Deixando quebrar, o texto passa a respeitar o padding-right de 55px do
   template e desce para a linha seguinte.

   Os dois `top: 14px` abaixo prendem a bolinha e a duração à PRIMEIRA linha do
   título; sem isso a bolinha (top: 31%) escorrega para o meio quando o item
   passa a ter duas linhas.

   O 14px vem das medidas do próprio template:
     centro da 1a linha = padding-top 14px + line-height 26px / 2 = 27px
     bolinha  (altura 25px)      -> 27 - 12,5 = 14,5px  ~ 14px
     duração  (line-height 26px) -> 27 - 13   = 14px */
.course-video-list li > a {
    white-space: normal;
    text-overflow: clip;
}

.course-video-list li > a > span {
    top: 14px;
    line-height: 26px;
}

.course-video-list li > a:before {
    top: 14px;
}

/* Vídeo em reprodução — antes era <b style="color:blue">, um azul que não
   existe em nenhum outro lugar do sistema. Só cor e peso, sem tocar no layout. */
.course-video-list li.hub-atual > a {
    color: var(--hub-marca) !important;
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Vídeos em destaque (tela de curso)
   -------------------------------------------------------------------------- */

.hub-destaque {
    background: linear-gradient(135deg, var(--hub-marca) 0%, var(--hub-marca-media) 100%);
    border-radius: var(--hub-raio);
    padding: var(--hub-e4);
    margin-bottom: var(--hub-e4);
}

.hub-destaque-titulo {
    color: #fff;
    font-size: .95rem;
    font-weight: 600;
    margin: 0 0 var(--hub-e3);
    display: flex;
    align-items: center;
    gap: .45rem;
    text-transform: none;
}

.hub-destaque-item {
    background: rgba(255, 255, 255, .12);
    border-radius: var(--hub-raio-p);
    padding: .7rem .85rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hub-e3);
    flex-wrap: wrap;
}

.hub-destaque-item + .hub-destaque-item { margin-top: var(--hub-e2); }

.hub-destaque-nome {
    color: #fff;
    font-size: .87rem;
    font-weight: 600;
    margin: 0;
    text-transform: none;
}

.hub-destaque-dur { color: rgba(255, 255, 255, .85); font-size: .8rem; }

.hub-destaque-item .hub-botao {
    background: #fff;
    color: var(--hub-marca);
}
.hub-destaque-item .hub-botao:hover { background: var(--hub-marca-chip); color: var(--hub-marca); }

/* --------------------------------------------------------------------------
   Vazio
   -------------------------------------------------------------------------- */

.hub-vazio {
    background: var(--hub-papel);
    border: 1px dashed var(--hub-linha);
    border-radius: var(--hub-raio);
    padding: var(--hub-e6) var(--hub-e4);
    text-align: center;
    color: var(--hub-suave);
    text-transform: none;
}

/* --------------------------------------------------------------------------
   Responsivo
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
    .hub-retomar { flex-direction: column; align-items: flex-start; }
    .hub-retomar-capa { width: 100%; height: 140px; }
    .hub-retomar .hub-botao { width: 100%; }
    .hub-aviso .hub-botao { width: 100%; }
    .hub-grade { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .hub-cartao, .hub-barra, .hub-botao { transition: none; }
    .hub-cartao:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   Painel — bloco centrado com ícone, título, texto e ação.
   Substitui os vários blocos de "Curso concluído", "Você foi aprovado" e
   afins, que repetiam o mesmo gradiente verde em style= inline.
   -------------------------------------------------------------------------- */

.hub-painel {
    background: var(--hub-papel);
    border: 1px solid var(--hub-linha);
    border-radius: var(--hub-raio);
    padding: var(--hub-e5) var(--hub-e4);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--hub-e3);
}

.hub-painel-ok {
    background: var(--hub-ok-chip);
    border-color: #A9D2BC;
}

.hub-painel-ico {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    background: var(--hub-marca-chip);
    color: var(--hub-marca);
    flex: none;
}

.hub-painel-ok .hub-painel-ico { background: #CDE7DA; color: var(--hub-ok); }

.hub-painel-titulo {
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--hub-tinta);
    margin: 0;
    text-transform: none;
}

.hub-painel-ok .hub-painel-titulo { color: var(--hub-ok); }

.hub-painel-txt {
    font-size: .88rem;
    line-height: 1.5;
    color: var(--hub-suave);
    margin: 0;
    max-width: 34rem;
    text-transform: none;
}

.hub-painel-ok .hub-painel-txt { color: #16543A; }

.hub-painel-acoes {
    display: flex;
    gap: var(--hub-e2);
    flex-wrap: wrap;
    justify-content: center;
}

/* Variante compacta, para a barra lateral da tela de curso */
.hub-painel-compacto {
    padding: var(--hub-e3);
    gap: var(--hub-e2);
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
}

.hub-painel-compacto .hub-painel-ico { width: 34px; height: 34px; font-size: 1.05rem; }

/* Variante pequena, para o painel de teste dentro do acordeão de tópicos:
   mantém borda e cantos arredondados, ao contrário da compacta que é
   full-bleed na barra lateral. */
.hub-painel-mini {
    padding: var(--hub-e3);
    gap: var(--hub-e2);
    margin-top: var(--hub-e3);
}
.hub-painel-mini .hub-painel-ico { width: 32px; height: 32px; font-size: 1rem; }
.hub-painel-mini .hub-painel-titulo { font-size: .88rem; }
.hub-painel-mini .hub-painel-txt { font-size: .8rem; }
.hub-painel-compacto .hub-painel-titulo { font-size: .92rem; }
.hub-painel-compacto .hub-painel-txt { font-size: .82rem; }

/* --------------------------------------------------------------------------
   Formulário
   -------------------------------------------------------------------------- */

.hub-form { width: 100%; display: flex; flex-direction: column; gap: var(--hub-e3); align-items: center; }

.hub-campo {
    width: 100%;
    padding: .8rem .9rem;
    border: 1px solid var(--hub-linha);
    border-radius: var(--hub-raio-p);
    font-size: .93rem;
    font-family: inherit;
    line-height: 1.5;
    color: var(--hub-tinta);
    background: var(--hub-papel);
    resize: vertical;
    min-height: 90px;
    max-height: 300px;
}

.hub-campo::placeholder { color: var(--hub-suave); }

.hub-campo:focus {
    outline: none;
    border-color: var(--hub-marca-media);
    box-shadow: 0 0 0 3px rgba(74, 42, 135, .14);
}

.hub-msg { font-size: .87rem; margin: 0; text-transform: none; }
.hub-msg-ok { color: var(--hub-ok); }
.hub-msg-erro { color: #A33418; }

/* --------------------------------------------------------------------------
   Utilitários mínimos — para não voltar a escrever style= por causa de
   uma margem ou de um alinhamento
   -------------------------------------------------------------------------- */

.hub-centro { text-align: center; }
.hub-limite { max-width: 800px; margin-left: auto; margin-right: auto; }
.hub-mt4 { margin-top: var(--hub-e4); }
.hub-mt6 { margin-top: var(--hub-e6); }
.hub-mb4 { margin-bottom: var(--hub-e4); }
.hub-full { width: 100%; }

/* --------------------------------------------------------------------------
   Painel com lista/tabela — usado nas telas de testes pendentes e certificados
   -------------------------------------------------------------------------- */

.hub-bloco {
    background: var(--hub-papel);
    border: 1px solid var(--hub-linha);
    border-radius: var(--hub-raio);
    overflow: hidden;
    margin-bottom: var(--hub-e5);
}

.hub-bloco-cabeca {
    padding: var(--hub-e4);
    border-bottom: 1px solid var(--hub-linha);
    background: var(--hub-fundo);
}

.hub-bloco-titulo {
    font-size: 1.08rem;
    font-weight: 600;
    color: var(--hub-marca);
    margin: 0;
    display: flex;
    align-items: center;
    gap: .45rem;
    text-transform: none;
}

.hub-bloco-desc {
    font-size: .86rem;
    color: var(--hub-suave);
    margin: .3rem 0 0;
    text-transform: none;
}

.hub-bloco-corpo { padding: 0; }

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

.hub-tabela-rolagem { overflow-x: auto; max-height: 500px; overflow-y: auto; }

.hub-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
    margin: 0;
}

.hub-tabela th {
    text-align: left;
    padding: .7rem .9rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--hub-suave);
    background: var(--hub-fundo);
    border-bottom: 1px solid var(--hub-linha);
    position: sticky;
    top: 0;
    z-index: 1;
    white-space: nowrap;
}

.hub-tabela td {
    padding: .7rem .9rem;
    border-bottom: 1px solid var(--hub-linha);
    color: var(--hub-secundario);
    vertical-align: top;
    text-transform: none;
}

.hub-tabela tbody tr:last-child td { border-bottom: none; }

.hub-tabela tbody tr.hub-clicavel { cursor: pointer; }
.hub-tabela tbody tr.hub-clicavel:hover { background: var(--hub-marca-chip); }

.hub-tabela .hub-num { text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hub-tabela .hub-destaque-celula { color: var(--hub-tinta); font-weight: 600; }
.hub-tabela .hub-sub { display: block; font-size: .78rem; color: var(--hub-suave); margin-top: .12rem; }

/* --------------------------------------------------------------------------
   Etiqueta de tipo — a cor identifica a categoria do teste
   -------------------------------------------------------------------------- */

.hub-tag {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    padding: .22rem .5rem;
    border-radius: 4px;
    white-space: nowrap;
    text-transform: none;
}

.hub-tag-marca   { background: var(--hub-marca-chip);   color: var(--hub-marca); }
.hub-tag-ok      { background: var(--hub-ok-chip);      color: var(--hub-ok); }
.hub-tag-info    { background: var(--hub-info-chip);    color: var(--hub-info); }
.hub-tag-atencao { background: var(--hub-atencao-chip); color: var(--hub-atencao); }

/* --------------------------------------------------------------------------
   Cabeçalho de página simples
   -------------------------------------------------------------------------- */

.hub-pagina-cabeca { margin-bottom: var(--hub-e5); }

.hub-pagina-cabeca h1 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--hub-marca);
    margin: 0 0 .35rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    text-transform: none;
    background: none;
    max-width: none;
}

.hub-pagina-cabeca p {
    font-size: .95rem;
    color: var(--hub-suave);
    margin: 0;
    max-width: 46rem;
    text-transform: none;
}

.hub-vazio-ico { font-size: 2.4rem; opacity: .4; display: block; margin-bottom: .6rem; }
.hub-vazio ul { text-align: left; display: inline-block; margin: var(--hub-e3) 0 0; padding-left: 1.15rem; }
.hub-vazio li { margin-bottom: .3rem; }

/* --------------------------------------------------------------------------
   Cartão de certificado
   -------------------------------------------------------------------------- */

.hub-cert {
    background: var(--hub-papel);
    border: 1px solid var(--hub-linha);
    border-radius: var(--hub-raio);
    padding: var(--hub-e4);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--hub-e2);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.hub-cert:hover { border-color: var(--hub-ok); box-shadow: var(--hub-sombra-alta); }

.hub-cert-ico {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--hub-ok-chip);
    color: var(--hub-ok);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    flex: none;
}

.hub-cert-nome {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--hub-tinta);
    margin: 0;
    text-transform: none;
}

.hub-cert-cursos {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: .8rem;
    color: var(--hub-suave);
    text-align: left;
    align-self: stretch;
    text-transform: none;
}

.hub-cert-cursos li { margin-bottom: .25rem; display: flex; gap: .35rem; }
.hub-cert-cursos i { color: var(--hub-ok); font-size: .7rem; margin-top: .3rem; }

.hub-cert-nota {
    display: inline-block;
    background: var(--hub-ok-chip);
    color: var(--hub-ok);
    font-weight: 700;
    font-size: .87rem;
    padding: .3rem .7rem;
    border-radius: 6px;
    font-variant-numeric: tabular-nums;
}

.hub-cert-data {
    font-size: .82rem;
    color: var(--hub-suave);
    text-transform: none;
}

.hub-cert .hub-botao { width: 100%; margin-top: auto; }

/* Destaque do certificado final geral */
.hub-cert-total {
    border-color: var(--hub-atencao-borda);
    background: var(--hub-atencao-chip);
    padding: var(--hub-e6) var(--hub-e4);
}
.hub-cert-total:hover { border-color: var(--hub-atencao); }
.hub-cert-total .hub-cert-ico {
    width: 68px; height: 68px; font-size: 2.1rem;
    background: #F7E3BF; color: var(--hub-atencao);
}
.hub-cert-total .hub-cert-nome { font-size: 1.2rem; }
.hub-cert-total .hub-cert-nota { background: #F7E3BF; color: var(--hub-atencao); font-size: 1rem; }
.hub-cert-total .hub-botao { max-width: 20rem; }

/* --------------------------------------------------------------------------
   Variantes de aviso
   -------------------------------------------------------------------------- */

.hub-aviso-info {
    background: var(--hub-info-chip);
    border-color: #B9CFE8;
    border-left-color: var(--hub-info);
}
.hub-aviso-info .hub-aviso-titulo { color: var(--hub-info); }
.hub-aviso-info .hub-aviso-detalhe { color: #17456F; }

.hub-aviso-erro {
    background: var(--hub-erro-chip);
    border-color: #E3B6A8;
    border-left-color: var(--hub-erro);
}
.hub-aviso-erro .hub-aviso-titulo { color: var(--hub-erro); }
.hub-aviso-erro .hub-aviso-detalhe { color: #7C270F; }

/* Aviso em bloco, quando o conteúdo é mais longo que uma linha */
.hub-aviso-bloco { display: block; }
.hub-aviso-bloco .hub-aviso-txt { display: block; }
.hub-aviso-bloco ul { margin: var(--hub-e2) 0 0; padding-left: 1.2rem; }
.hub-aviso-bloco li { margin-bottom: .3rem; }

/* --------------------------------------------------------------------------
   Resultado do teste
   -------------------------------------------------------------------------- */

.hub-resultado-cabeca {
    padding: var(--hub-e6) var(--hub-e4);
    text-align: center;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--hub-e2);
    background: var(--hub-ok);
}

.hub-resultado-cabeca.hub-reprovado { background: var(--hub-erro); }

.hub-resultado-cabeca .hub-resultado-ico {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.9rem;
}

.hub-resultado-cabeca h2 {
    margin: 0;
    font-size: 1.7rem;
    font-weight: 700;
    color: #fff;
    text-transform: none;
}

.hub-resultado-cabeca p { margin: 0; color: rgba(255, 255, 255, .9); text-transform: none; }

.hub-resumo {
    background: var(--hub-fundo);
    border: 1px solid var(--hub-linha);
    border-radius: var(--hub-raio);
    padding: var(--hub-e4);
    margin-bottom: var(--hub-e5);
}

/* Resposta em revisão */
.hub-resposta {
    background: var(--hub-papel);
    border: 1px solid var(--hub-linha);
    border-left: 4px solid var(--hub-ok);
    border-radius: var(--hub-raio);
    padding: var(--hub-e4);
    margin-bottom: var(--hub-e3);
    overflow: hidden;
}

.hub-resposta-errada { border-left-color: var(--hub-erro); }

.hub-resposta-status {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .75rem;
    font-weight: 700;
    padding: .2rem .5rem;
    border-radius: 4px;
    background: var(--hub-ok-chip);
    color: var(--hub-ok);
    text-transform: none;
}

.hub-resposta-errada .hub-resposta-status { background: var(--hub-erro-chip); color: var(--hub-erro); }

/* --------------------------------------------------------------------------
   Números em destaque (resumo do resultado do teste)
   -------------------------------------------------------------------------- */

.hub-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--hub-e4);
    text-align: center;
}

.hub-stat-valor {
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--hub-marca);
    font-variant-numeric: tabular-nums;
}

.hub-stat-valor.hub-stat-menor { font-size: 1.6rem; color: var(--hub-suave); }

.hub-stat-rotulo {
    font-size: .84rem;
    color: var(--hub-suave);
    margin-top: .25rem;
    text-transform: none;
}

.hub-stat-nota { font-size: .74rem; color: var(--hub-suave); }

/* --------------------------------------------------------------------------
   Pesquisa de avaliação — escala de 1 a 4 (Likert)
   -------------------------------------------------------------------------- */

.hub-pesquisa {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--hub-e4);
    text-align: left;
}

.hub-questao {
    border: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--hub-e2);
}

.hub-questao legend {
    font-size: .92rem;
    font-weight: 600;
    color: var(--hub-tinta);
    padding: 0;
    margin: 0 0 .1rem;
    line-height: 1.4;
    text-transform: none;
    display: flex;
    gap: .45rem;
}

.hub-questao legend span { color: var(--hub-marca-media); flex: none; }

.hub-escala {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .4rem;
    /* position: relative prende os inputs absolutos abaixo a ESTA caixa.
       Sem isso eles sobem até o primeiro ancestral posicionado (na tela de
       curso, .course-content-inner) e, ao receberem foco pelo clique no
       label, o navegador rola para uma posição inesperada. */
    position: relative;
}

/* O input fica acessível ao teclado e a leitores de tela, mas invisível:
   quem aparece é o label. Sem pointer-events:none — assim o próprio input
   também aceita clique, e não depende só da associação com o label. */
.hub-escala input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    border: 0;
    clip-path: inset(50%);
}

.hub-escala label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: .2rem;
    padding: .55rem .35rem;
    border: 1px solid var(--hub-linha);
    border-radius: var(--hub-raio-p);
    background: var(--hub-papel);
    cursor: pointer;
    text-align: center;
    transition: border-color .12s ease, background-color .12s ease;
    height: 100%;
}

.hub-escala label:hover { border-color: var(--hub-marca-media); background: var(--hub-marca-chip); }

.hub-escala-num {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--hub-marca);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.hub-escala-txt {
    font-size: .68rem;
    line-height: 1.25;
    color: var(--hub-suave);
    text-transform: none;
}

.hub-escala input:checked + label {
    border-color: var(--hub-marca);
    background: var(--hub-marca-chip);
    box-shadow: inset 0 0 0 1px var(--hub-marca);
}

.hub-escala input:checked + label .hub-escala-txt { color: var(--hub-marca); font-weight: 600; }

.hub-escala input:focus-visible + label {
    outline: 3px solid var(--hub-marca-media);
    outline-offset: 2px;
}

.hub-grupo-titulo {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--hub-marca-media);
    margin: var(--hub-e2) 0 0;
    padding-bottom: .3rem;
    border-bottom: 1px solid var(--hub-linha);
}

.hub-grupo-titulo span {
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--hub-suave);
}

.hub-pesquisa:first-child > .hub-grupo-titulo:first-child { margin-top: 0; }

.hub-pesquisa-comentario { display: flex; flex-direction: column; gap: .35rem; }

.hub-pesquisa-comentario label {
    font-size: .88rem;
    font-weight: 600;
    color: var(--hub-tinta);
    text-transform: none;
}

.hub-pesquisa-comentario .hub-opcional {
    font-weight: 400;
    color: var(--hub-suave);
}

@media (max-width: 560px) {
    .hub-escala { grid-template-columns: 1fr 1fr; }
}

/* --------------------------------------------------------------------------
   Avaliação do curso no cartão
   -------------------------------------------------------------------------- */

.hub-avaliacao {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .79rem;
    color: var(--hub-secundario);
    text-transform: none;
}

.hub-avaliacao i { color: var(--hub-atencao); }

.hub-avaliacao-nota {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--hub-tinta);
}

.hub-avaliacao-total { color: var(--hub-suave); }

/* Curso sem nenhuma avaliação: convida em vez de mostrar vazio */
.hub-avaliacao-vazia {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .78rem;
    color: var(--hub-suave);
    text-transform: none;
}

.hub-convite {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--hub-atencao);
    background: var(--hub-atencao-chip);
    border: 1px solid var(--hub-atencao-borda);
    border-radius: var(--hub-raio-p);
    padding: .4rem .6rem;
    text-transform: none;
}

/* --------------------------------------------------------------------------
   Avaliações do curso na barra lateral
   -------------------------------------------------------------------------- */

.hub-side-avaliacao {
    padding: var(--hub-e3) 15px;
    border-bottom: 1px solid var(--hub-linha);
    display: flex;
    flex-direction: column;
    gap: var(--hub-e2);
}

.hub-side-titulo {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--hub-suave);
    margin: 0;
}

.hub-side-nota {
    display: flex;
    align-items: baseline;
    gap: .4rem;
}

.hub-side-nota-valor {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--hub-marca);
    font-variant-numeric: tabular-nums;
}

.hub-side-nota-de { font-size: .8rem; color: var(--hub-suave); }
.hub-side-nota-total { font-size: .78rem; color: var(--hub-suave); }

.hub-side-avaliacao .hub-botao { width: 100%; }

.hub-side-vazio {
    font-size: .8rem;
    color: var(--hub-suave);
    line-height: 1.4;
    text-transform: none;
}

/* --------------------------------------------------------------------------
   Lista pública de avaliações
   -------------------------------------------------------------------------- */

.hub-avaliacoes {
    display: flex;
    flex-direction: column;
    gap: var(--hub-e3);
}

.hub-avaliacao-item {
    background: var(--hub-papel);
    border: 1px solid var(--hub-linha);
    border-radius: var(--hub-raio);
    padding: var(--hub-e3) var(--hub-e4);
    display: flex;
    gap: var(--hub-e3);
    align-items: flex-start;
    text-align: left;
}

.hub-avaliacao-inicial {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex: none;
    background: var(--hub-marca-chip);
    color: var(--hub-marca);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .9rem;
}

.hub-avaliacao-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }

.hub-avaliacao-cabeca {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    flex-wrap: wrap;
}

.hub-avaliacao-nome {
    font-size: .9rem;
    font-weight: 600;
    color: var(--hub-tinta);
    text-transform: none;
}

.hub-avaliacao-quando { font-size: .75rem; color: var(--hub-suave); }

.hub-avaliacao-comentario {
    font-size: .87rem;
    line-height: 1.5;
    color: var(--hub-secundario);
    margin: .15rem 0 0;
    white-space: pre-wrap;
    word-wrap: break-word;
    text-transform: none;
}

.hub-avaliacao-sem-comentario {
    font-size: .82rem;
    color: var(--hub-suave);
    font-style: italic;
    text-transform: none;
}

.hub-aviso-publico {
    font-size: .8rem;
    color: var(--hub-suave);
    text-transform: none;
    display: flex;
    align-items: flex-start;
    gap: .35rem;
    text-align: left;
}

/* Destaque de ação necessária na barra lateral — o teste final está travado
   até a pessoa avaliar. Usa a cor de atenção, e não a da marca, para não
   competir com o botão primário que fica logo abaixo. */
.hub-side-trava {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    background: var(--hub-atencao-chip);
    border: 1px solid var(--hub-atencao-borda);
    border-left: 3px solid var(--hub-atencao);
    border-radius: var(--hub-raio-p);
    padding: .55rem .65rem;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--hub-atencao);
    text-transform: none;
}

.hub-side-trava i {
    font-size: .95rem;
    line-height: 1.2;
    flex: none;
}

/* --------------------------------------------------------------------------
   Breadcrumb do navbar
   --------------------------------------------------------------------------
   navbar.blade.php:22 renderiza @yield('title') num #breadcrumbs. Como a
   navbar é transparente e flutua sobre o hero, o texto ("Início") aparecia
   solto no meio da imagem, sem contexto e sem ligação visual com nada.

   O título da página já está no <title> da aba e no próprio hero, então o
   breadcrumb não carregava informação nova — só ruído.
   -------------------------------------------------------------------------- */

#breadcrumbs {
    display: none;
}

/* --------------------------------------------------------------------------
   Modais de avaliação e comentários
   --------------------------------------------------------------------------
   Usam uk-modal (mecanismo do template). Aqui só se ajusta o tamanho e se
   achata o painel interno: os partials são desenhados como cartão para o corpo
   da página, e dentro do modal a borda ficaria duplicada com a do diálogo.
   -------------------------------------------------------------------------- */

/* O diálogo limita a altura e NÃO rola; quem rola é .hub-modal-corpo.
   Assim o botão de fechar (absoluto em relação ao diálogo) fica sempre
   visível, em vez de sair da tela ao descer a lista. */
.hub-modal .uk-modal-dialog,
.hub-modal .hub-modal-dialogo {
    width: min(760px, 94vw);
    border-radius: var(--hub-raio);
    background: var(--hub-papel);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

/* Sem padding-top: quem dá o espaçamento do topo é o próprio cabeçalho fixo.
   Assim ele encosta na borda do diálogo e o sticky pode ser top:0 — com
   padding aqui, o cabeçalho rolava para fora antes de grudar. */
.hub-modal-corpo {
    padding: 0 var(--hub-e5) var(--hub-e5);
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

/* Cabeçalho preso no topo enquanto o conteúdo rola por baixo.
   O padding negativo compensa o do corpo, para a faixa branca ir de
   ponta a ponta e o conteúdo não aparecer nas laterais ao rolar. */
.hub-modal-corpo .hub-painel-cabeca {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--hub-papel);
    /* Margem negativa nas laterais para a faixa branca ir de ponta a ponta:
       sem isso o conteúdo aparece pelos lados ao rolar por baixo. */
    margin: 0 calc(var(--hub-e5) * -1);
    padding: var(--hub-e5) var(--hub-e5) var(--hub-e3);
    border-bottom: 1px solid var(--hub-linha);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--hub-e2);
}

/* .hub-painel é flex com align-items:center, o que encolhe os filhos à
   largura do conteúdo. Dentro do modal isso deixava o cabeçalho fixo mais
   estreito que o diálogo, e os comentários apareciam pelas laterais ao rolar
   por baixo dele. Aqui os filhos passam a esticar, e o que precisa ficar
   centralizado se centraliza sozinho. */
.hub-modal-corpo .hub-painel {
    gap: var(--hub-e4);
    align-items: stretch;
}

/* Botões soltos no painel voltam a ficar centrados, já que não esticam mais
   por conta do align-items do pai */
.hub-modal-corpo .hub-painel > .hub-botao,
.hub-modal-corpo .hub-painel > .hub-selo-ok,
.hub-modal-corpo .hub-painel > .hub-msg {
    align-self: center;
}

/* O painel interno perde borda, sombra e margem: o diálogo já é o cartão */
.hub-modal-corpo .hub-painel {
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
    max-width: none;
    background: transparent;
}

.hub-modal-corpo .hub-avaliacao-item {
    background: var(--hub-fundo);
}

/* O botão de fechar do UIkit precisa ficar acima do conteúdo que rola */
.hub-modal .uk-modal-close-default {
    z-index: 2;
    color: var(--hub-suave);
}

.hub-modal .uk-modal-close-default:hover { color: var(--hub-tinta); }

@media (max-width: 640px) {
    .hub-modal-corpo { padding: 0 var(--hub-e4) var(--hub-e4); }
    .hub-modal .uk-modal-dialog,
    .hub-modal .hub-modal-dialogo { width: 96vw; }

    .hub-modal-corpo .hub-painel-cabeca {
        margin: 0 calc(var(--hub-e4) * -1);
        padding: var(--hub-e4) var(--hub-e4) var(--hub-e2);
    }
}

/* --------------------------------------------------------------------------
   Pergunta obrigatória e estado do botão de envio
   -------------------------------------------------------------------------- */

.hub-obrigatorio {
    color: var(--hub-erro);
    font-weight: 700;
    margin-left: .1rem;
}

.hub-falta {
    display: none;
    font-size: .82rem;
    color: var(--hub-suave);
    margin: 0;
    text-transform: none;
}

/* Botão desabilitado: precisa parecer inerte, senão a pessoa clica e acha
   que o sistema travou */
.hub-botao:disabled,
.hub-botao[disabled] {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   Deslocamento do conteúdo pela barra lateral
   --------------------------------------------------------------------------
   O style.css do template define:

       [class~=page-content] { margin-left: 0px !important }

   e o sidebar-dynamic tenta deslocar com `margin-left: 4rem` SEM !important —
   então o template sempre venceu e o conteúdo ficava por baixo da barra.

   Passava despercebido porque tudo vivia dentro do .container centralizado,
   que em telas largas nunca encostava na borda esquerda. Com o hero full-bleed
   e em telas estreitas, o corte fica visível.

   As regras abaixo repetem a intenção do sidebar-dynamic com a mesma força do
   template. O breakpoint (768px) é o mesmo que ele usa para virar barra móvel.
   -------------------------------------------------------------------------- */

@media (min-width: 769px) {
    body:has(.sidebar-dynamic) .page-content,
    .page-content.has-dynamic-sidebar {
        margin-left: 4rem !important;
    }

    body:has(.sidebar-dynamic.expanded) .page-content,
    .page-content.has-dynamic-sidebar.expanded {
        margin-left: 16rem !important;
    }
}

/* Navegadores sem :has() caem no par com a classe, aplicada via JS */
@supports not selector(:has(*)) {
    @media (min-width: 769px) {
        .page-content.has-dynamic-sidebar { margin-left: 4rem !important; }
        .page-content.has-dynamic-sidebar.expanded { margin-left: 16rem !important; }
    }
}

/* Nenhum bloco deve gerar rolagem horizontal: foi o que expôs o problema */
#wrapper { overflow-x: hidden; }