/* ==========================================================================
   REBRANDING DO PAINEL — /my/  (body#page-my-index)
   SÓ O BLOCO "RESUMO DOS CURSOS" (block_myoverview).

   ESCOPO DECIDIDO PELO MARCELO em 18/09/2026: a parte de cima do painel — a
   saudação, os dois cartões grandes e os atalhos (.don-dash) — JÁ É o
   rebranding da casa e está no ar. Não se mexe nela. O que ainda sai em Boost
   cru é o bloco de cursos logo abaixo: cartão com borda cinza em volta de
   cartões com borda cinza, nome do curso em azul de link, peso 400.

   (A primeira versão deste arquivo também reordenava a tela, trocava o
   gradiente da saudação e refazia a grade dos atalhos. Saiu tudo: era
   redesenhar o que já estava aprovado e publicado.)

   O QUE É DE QUEM:
   [SCSS]      tudo neste arquivo. Destino: o parcial do painel, ao lado de
               onde vive .don-dash.
   [TEMPLATE]  só a barra de progresso — ver rebranding-painel.js. Degrau 5,
               OPCIONAL: sem ela o cartão continua dizendo "50% completo".

   ESCOPO: tudo preso a #page-my-index. /message/ também é
   pagelayout-mydashboard e NÃO pode herdar nada daqui.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. O BLOCO DE CURSOS — sai a caixa, fica o conteúdo                  [SCSS]
   Hoje é o Boost cru: cartão com borda cinza em volta de cartões com borda
   cinza. A caixa de fora sai; o título vira cabeçalho de seção da página.
   -------------------------------------------------------------------------- */
/* UMA BORDA ESQUERDA, não três. Medido em 18/09 antes deste bloco:
       saudação e atalhos   56 → 1384
       título do bloco      71
       cartões de curso     75
   Os 15px são padding do [role=main]; os 4px, o `.mx-1` de cada cartão. A
   margem negativa na grade devolve os 4px sem tirar o vão ENTRE os cartões.
   `.mx-0` na grade é utilitário: só cede a peso igual. */
#page-my-index #region-main > [role="main"] {
    padding-left: 0;
    padding-right: 0;
}
#page-my-index .block_myoverview [data-region="card-deck"] {
    margin-left: -.25rem !important;
    margin-right: -.25rem !important;
}

#page-my-index .block_myoverview.card {
    border: 0;
    background: transparent;
    box-shadow: none;
    margin-bottom: 0 !important;          /* .mb-3 é utilitário: só cede a peso igual */
}
#page-my-index .block_myoverview > .card-body {
    padding: 0 !important;                /* .p-3, idem */
}
#page-my-index .block_myoverview .card-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #102770;                       /* --tinta, 13,58:1 */
    margin: 0;
}

/* Os filtros ficam — e NÃO se escondem por contagem.
   A tentação era sumir com a fileira quando há só 2 cursos. Não dá: o CSS só
   enxerga os cartões EXIBIDOS, não o total. O aluno filtra por "Em andamento",
   sobram 2, a fileira some — e ele fica preso no filtro sem ter como voltar.
   Eles só perdem peso: borda de 1px na cor de linha, raio da casa. */
#page-my-index .block_myoverview [data-region="filter"] .btn-outline-secondary,
#page-my-index .block_myoverview [data-region="filter"] .form-control {
    border: 1px solid #D5D8E2;            /* --linha */
    border-radius: 10px;                  /* --r-md */
    background-color: #FFFFFF;
    color: #5A668C;                       /* --tinta-suave, 5,65:1 */
    box-shadow: none;
}
#page-my-index .block_myoverview [data-region="filter"] .btn-outline-secondary:hover,
#page-my-index .block_myoverview [data-region="filter"] .form-control:focus {
    border-color: #0059FB;
    color: #102770;
}


/* --------------------------------------------------------------------------
   2. O CARTÃO DE CURSO                                                 [SCSS]
   -------------------------------------------------------------------------- */
#page-my-index .block_myoverview .course-card {
    border: 1px solid #D5D8E2;
    border-radius: 16px;                  /* --r-lg, o raio dos cartões do curso */
    /* SEM `overflow: hidden`. O menu ⋮ do cartão (.coursemenubtn) abre PARA
       FORA da caixa; com o corte ele aparecia como uma tira de 15px no rodapé
       (visto pelo Marcelo em 18/09). Quem arredonda é a capa, logo abaixo. */
    background: #FFFFFF;
    transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s cubic-bezier(.2,.7,.2,1), border-color .3s;
}
#page-my-index .block_myoverview .course-card .card-img-top {
    border-radius: 15px 15px 0 0;         /* 16 menos a borda de 1px */
}
/* Cartão com `transform` cria contexto de empilhamento: o menu aberto ficava
   ATRÁS do cartão vizinho. Com menu aberto o cartão sobe na pilha. */
#page-my-index .block_myoverview .course-card:has(.dropdown-menu.show) {
    z-index: 5;
}
#page-my-index .block_myoverview .course-card:hover,
#page-my-index .block_myoverview .course-card:focus-within {
    transform: translateY(-2px);
    border-color: #0059FB;
    box-shadow: 0 10px 28px rgba(16, 39, 112, .12);
}
@media (prefers-reduced-motion: reduce) {
    #page-my-index .block_myoverview .course-card { transition: none; }
    #page-my-index .block_myoverview .course-card:hover,
    #page-my-index .block_myoverview .course-card:focus-within { transform: none; }
}

/* O nome do curso é o TÍTULO do cartão, não um link de texto corrido.
   Hoje sai em azul de link, peso 400. */
#page-my-index .block_myoverview .coursename {
    color: #102770;
    font-weight: 700;                     /* o peso do título dos atalhos logo abaixo */
    font-size: 1.0625rem;
    line-height: 1.3;
    text-decoration: none;
}
#page-my-index .block_myoverview .course-card:hover .coursename {
    color: #0059FB;
}
/* O core trunca o nome em UMA linha (.text-truncate no pai). "Saúde,
   Segurança & Qualidade de Vida no Trabalho" tem 46 caracteres e cabe por
   pouco a 1440; a 375 some metade. Duas linhas, depois reticências. */
#page-my-index .block_myoverview .course-info-container .text-truncate {
    white-space: normal;
}
#page-my-index .block_myoverview .coursename .multiline {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
#page-my-index .block_myoverview .categoryname {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #5A668C;
}
#page-my-index .block_myoverview .card-footer {
    background-color: transparent !important;   /* .bg-white, utilitário */
}
#page-my-index .block_myoverview .progress-text {
    font-size: .8125rem;
    color: #5A668C;
}

/* A BARRA — só aparece quando o template (ou, no preview, o js) entrega o
   valor em --don-prog. Sem a variável o ::before não existe e o cartão fica
   como o core o emite: texto puro, nada quebrado.
   Trilho #E9EBF1 contra o branco dá 1,19:1 — é decorativo de propósito. Quem
   carrega a informação é o preenchimento (#0059FB, 4,61:1 contra o trilho) e
   o texto "50% completo" logo abaixo, que continua lá. */
#page-my-index .block_myoverview .progress-text[style*="--don-prog"]::before {
    content: "";
    display: block;
    height: 6px;
    margin-bottom: .5rem;
    border-radius: 999px;
    background:
        linear-gradient(#0059FB, #0059FB) left / var(--don-prog) 100% no-repeat,
        #E9EBF1;
}


/* --------------------------------------------------------------------------
   3. FOCO DE TECLADO
   -------------------------------------------------------------------------- */
#page-my-index .block_myoverview a:focus-visible,
#page-my-index .block_myoverview button:focus-visible {
    outline: 2px solid #0059FB;
    outline-offset: 2px;
    border-radius: 6px;
}