/* ============================================================================
   Camada da Hemobras sobre o tema Assan.

   Carregada DEPOIS de style.min.css (ver _Layout.cshtml), entao regras de mesma
   especificidade daqui vencem as do tema pela ordem. Onde o tema usa seletor mais
   especifico, a lista de seletores e repetida igual, de proposito.

   No Viapol o equivalente disto esta espalhado por seis blocos <style> inline
   dentro dos layouts. Aqui fica em um arquivo so.
   ============================================================================ */

/* ===== Tokens da marca (Projeto Buriti / Hemobras) =====
   Conferidos contra Images/logo.png e Images/logo1.png, e ja em uso em
   Views/Home/Dashboard.cshtml. O --bs-primary do template era o azul #474DFF;
   passa a apontar para o vermelho da marca no fim deste arquivo. */
:root {
    --marca-vermelho: #E41E26; /* tom exato do logo.png: e o pixel dominante dele */
    --marca-vinho: #680A0D; /* o vinho do logo1.png, so usado no degrade do dropdown */
    --marca-vermelho-escuro: #B3141B;
    --marca-vermelho-claro: #F2565C; /* usado so nos degrades, para nao puxarem para o vinho */
    --marca-verde: #41C294; /* mesmo valor do --bs-success do tema */
    --marca-ambar: #DA9623;

    /* Geometria do painel lateral flutuante */
    --sidebar-gap: 0.75rem; /* respiro entre o painel e as bordas da tela */
    --sidebar-raio: 1.25rem;
    --sidebar-largura: 260px; /* largura que o tema fixa em .page-sidebar */
    --sidebar-largura-mini: 84px; /* largura do modo mini do tema */
}


/* ============================================================================
   1. Sidebar flutuante e arredondada
   Vale para as duas areas: ambas usam <aside class="page-sidebar">.
   O tema ja deixa o painel em position:fixed, left:0, top:0, height:100% — aqui
   so afastamos das bordas e arredondamos.
   ============================================================================ */

.page-sidebar {
    top: var(--sidebar-gap);
    left: var(--sidebar-gap);
    height: calc(100% - (var(--sidebar-gap) * 2));
    border-radius: var(--sidebar-raio);
    border-right: 0; /* a borda do tema nao faz sentido no modo flutuante */
    box-shadow: 0 0.5rem 1.5rem rgba(228, 30, 38, 0.28);
}

/* Desktop: o conteudo precisa da largura do painel mais o respiro dos dois lados. */
@media (min-width: 992px) {
    .page-content {
        margin-left: calc(var(--sidebar-largura) + var(--sidebar-gap) * 2);
    }

    body.page-sidebar-mini .page-content {
        margin-left: calc(var(--sidebar-largura-mini) + var(--sidebar-gap) * 2);
    }
}

/* Mobile: o tema esconde o painel com translateX(-100%). Como agora ha left:gap,
   restaria uma faixa visivel na borda; o gap entra no deslocamento.
   O estado aberto continua com o tema — .page-sidebar-in .page-sidebar (0-2-0)
   tem especificidade maior que a regra abaixo e devolve o translateX(0). */
@media (max-width: 991.98px) {
    .page-sidebar {
        transform: translateX(calc(-100% - var(--sidebar-gap)));
    }
}


/* ============================================================================
   2. Pele colorida do painel
   O tema pinta a sidebar de branco (#ffffff) com texto escuro. As listas de
   seletores abaixo espelham as do tema para vencer sem !important.
   ============================================================================ */

.page-sidebar {
    background-color: var(--marca-vermelho);
}

.page-sidebar .aside-logo a,
.page-sidebar .sidebar-title {
    color: #ffffff;
}

.page-sidebar .nav-link,
.page-sidebar .nav-link[data-bs-toggle=collapse],
.page-sidebar .sidebar-item .sidebar-link {
    /* Branco puro, nao 85%: sobre o vermelho da marca (rel. lum. 0.176) o branco
       a 85% cai para 4,01:1, abaixo do minimo de 4,5:1. O estado de hover se
       distingue pelo fundo, que ja existe logo abaixo. */
    color: #ffffff;
}

.page-sidebar .nav-link:hover,
.page-sidebar .nav-link[aria-expanded=true],
.page-sidebar .nav-link[data-bs-toggle=collapse]:hover,
.page-sidebar .nav-link[data-bs-toggle=collapse][aria-expanded=true],
.page-sidebar .sidebar-item .sidebar-link:hover,
.page-sidebar .sidebar-item .sidebar-link[aria-expanded=true] {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.12);
}

.page-sidebar .nav-link.active,
.page-sidebar .nav-link[data-bs-toggle=collapse].active,
.page-sidebar .sidebar-item .sidebar-link.active {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.18);
    font-weight: 600;
}

/* Itens com respiro e cantos proprios, para o realce de hover/ativo nao encostar
   nas bordas do painel. */
.page-sidebar .nav-link {
    border-radius: 0.5rem;
    margin: 0.1rem 0.35rem;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

.page-sidebar .sidebar-item .sidebar-link {
    border-radius: 0.5rem;
    margin-right: 0.35rem;
}

.page-sidebar .sidebar-icon i {
    color: #ffffff;
}

/* O rotulo de secao vem com .opacity-50 do Bootstrap (!important) somado ao
   opacity .6 do tema. Sobre o vermelho, qualquer transparencia derruba o texto
   abaixo de 4,5:1 — o seletor mais especifico devolve o contraste cheio. */
.page-sidebar .nav-item.sidebar-title {
    opacity: 1 !important;
}

/* A seta do menu sanfonado herda currentColor, mas o tema a deixa em 50% de
   opacidade — no fundo escuro isso some. */
.page-sidebar .nav-link[data-bs-toggle=collapse]::after,
.page-sidebar .sidebar-link[data-bs-toggle=collapse]::after {
    opacity: 0.75;
}

/* A barra de rolagem do simplebar e escura por padrao e desaparece no vermelho. */
.page-sidebar .simplebar-scrollbar::before {
    background-color: #ffffff;
}


/* ============================================================================
   3. Placa da logo
   logo.png e logo1.png tem texto escuro e nao existe versao negativa, entao a
   marca vai sobre uma placa branca arredondada — mesma solucao da referencia
   (viapol/Tela_Home_Aluno.png, onde a logo CTA fica num badge branco).
   ============================================================================ */

.page-sidebar .aside-logo {
    height: auto; /* o tema fixa 70px, apertado demais para a placa */
    padding: 1.25rem 1rem 0.5rem;
}

.aside-logo-placa {
    background-color: #ffffff;
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aside-logo-placa img {
    max-width: 100%;
    height: auto;
}

/* No modo mini a placa acompanha o painel de 84px, senao estoura a largura. */
body.page-sidebar-mini .page-sidebar:not(:hover) .aside-logo-placa {
    padding: 0.4rem;
}


/* ============================================================================
   4. Cards
   O tema entrega raio 0.4rem, borda de 1px e sombra quase invisivel. A
   referencia do Viapol usa canto mais redondo, sem borda e com sombra que
   separa o card do fundo. Vale para as duas areas — o pedido foi "tudo no
   mesmo layout".
   ============================================================================ */

.card {
    border: 0;
    border-radius: 0.9rem;
    box-shadow: 0 2px 10px rgba(16, 38, 95, 0.06), 0 1px 2px rgba(16, 38, 95, 0.04);
}

/* Cabecalho e rodape precisam acompanhar o raio, senao vazam o canto quadrado
   por cima do card. */
.card > .card-header:first-child {
    border-top-left-radius: 0.9rem;
    border-top-right-radius: 0.9rem;
}

.card > .card-footer:last-child {
    border-bottom-left-radius: 0.9rem;
    border-bottom-right-radius: 0.9rem;
}


/* ===== Cards de listagem (grades de curso, trilha e evento) =====
   Aplicado por classe, e nao a todo .card, porque so os itens de grade sao
   clicaveis — levantar no hover uma tela inteira que e um card so seria
   estranho.

   No Viapol este bloco esta repetido dentro de cada view de lista, com ~250
   linhas cada. Aqui e um lugar so. */

.card-lista {
    height: 100%;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-lista:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(16, 38, 95, 0.14), 0 2px 6px rgba(16, 38, 95, 0.06);
}

/* A midia fica recuada dentro do card, com raio proprio e proporcao 16:9 —
   e o que da o ar da referencia. Serve para as duas formas que as views usam:
   <img class="card-img-top"> e um <a> com background-image. */
.card-lista .card-img-top,
.card-lista .card-lista-midia {
    display: block;
    width: calc(100% - 1.5rem);
    margin: 0.75rem 0.75rem 0;
    aspect-ratio: 16 / 9;
    height: auto;
    border-radius: 0.625rem;
    background-color: #f5f5f5;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* O <a> que embrulha a imagem nao pode reintroduzir espaco entre a midia e o
   corpo do card. */
.card-lista > a { display: block; }


/* ============================================================================
   5. Botoes primarios na cor da marca
   O tema cravou #474dff direto nas regras de .btn-primary, entao nao adianta
   trocar --bs-primary: as listas de seletores abaixo espelham as do tema para
   vencer pela ordem, sem !important.
   ============================================================================ */

.btn-primary {
    color: #fff;
    background-color: var(--marca-vermelho);
    border-color: var(--marca-vermelho);
}

.btn-primary:hover,
.btn-check:focus + .btn-primary,
.btn-primary:focus,
.btn-check:active + .btn-primary,
.btn-check:checked + .btn-primary,
.btn-primary.active,
.btn-primary:active,
.show > .btn-primary.dropdown-toggle {
    color: #fff;
    background-color: var(--marca-vermelho-escuro);
    border-color: var(--marca-vermelho-escuro);
}

/* O anel de foco do tema tambem e azul e so aparece na navegacao por teclado. */
.btn-check:focus + .btn-primary,
.btn-primary:focus,
.btn-check:active + .btn-primary:focus,
.btn-check:checked + .btn-primary:focus,
.btn-primary.active:focus,
.btn-primary:active:focus,
.show > .btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.25rem rgba(228, 30, 38, 0.4);
}

.btn-primary.disabled,
.btn-primary:disabled {
    color: #fff;
    background-color: var(--marca-vermelho);
    border-color: var(--marca-vermelho);
}

/* Bootstrap 5.3 deriva .bg-primary, .text-primary e .hover-bg-primary destas
   duas variaveis. Cobre os respingos de azul que sobram fora dos botoes: o
   selo "Inscricoes abertas", o circulo do avatar e o hover do header. */
:root {
    --bs-primary: #E41E26;
    --bs-primary-rgb: 228, 30, 38;
}


/* ============================================================================
   6. Raio dos botoes
   O tema da 0.4rem ao .btn e apenas 0.2rem ao .btn-sm — que e justamente o das
   grades de card, onde o botao fica encostado numa midia de raio 0.625rem
   dentro de um card de 0.9rem, e destoa. Aqui os tres tamanhos sobem para a
   mesma familia de curvas do resto do layout.

   .btn-group .btn (0-2-0) continua vencendo, entao os botoes agrupados seguem
   com os cantos internos retos, como devem.
   ============================================================================ */

.btn {
    border-radius: 0.6rem;
}

.btn-group-sm > .btn,
.btn-sm {
    border-radius: 0.5rem;
}

.btn-group-lg > .btn,
.btn-lg {
    border-radius: 0.75rem;
}


/* ============================================================================
   7. Degrade do cabecalho do dropdown do usuario
   O tema pinta esse painel com .bg-gradient-primary, que era o azul do
   template indo para roxo e coral. A onda em SVG por cima e branca
   (.dropdown-wave), entao quem da a cor e o fundo, nao o SVG.

   Aqui o degrade varia entre as duas cores da marca, e ambas saem do arquivo:
   o vinho #680A0D e o tom dominante do logo1.png, o vermelho #E41E26 e o do
   logo.png. Usado so nos tres dropdowns de usuario (admin, aluno e Identity).

   O vermelho fecha em 35%, nao no fim: dali para a direita a faixa e vermelho
   puro, entao ele ocupa cerca de dois tercos da area e o vinho fica so como
   entrada na borda esquerda.
   ============================================================================ */

.bg-gradient-primary {
    background: linear-gradient(84.06deg, var(--marca-vinho) -20%, var(--marca-vermelho) 35%);
}


/* ============================================================================
   8. Paginacao
   Usada pelas tabelas do DataTables, que renderiza a paginacao com as classes
   de paginacao do Bootstrap. Sobrava o azul do template: #474dff no item ativo
   e #4045e6 no hover e no foco.

   Os seletores levam .pagination na frente de proposito. O CSS do DataTables
   entra pelo @section Stylesheet, que o layout renderiza DEPOIS do site.css —
   empatando a especificidade com o tema, quem decide e a ordem, e a ordem nao
   esta a nosso favor. Com .pagination na frente sobe um nivel e vence de
   qualquer jeito.
   ============================================================================ */

.pagination .page-item.active .page-link {
    background-color: var(--marca-vermelho);
    border-color: var(--marca-vermelho);
    color: #fff;
}

.pagination .page-link:hover {
    color: var(--marca-vermelho-escuro);
    border-color: var(--marca-vermelho);
}

.pagination .page-link:focus {
    color: var(--marca-vermelho-escuro);
    box-shadow: 0 0 0.25rem 0.125rem rgba(228, 30, 38, 0.2);
}


/* ===== Bloco de texto dos cards de listagem =====
   As views travavam isto em style inline: o titulo em height 25px e o corpo em
   100px. Vinte e cinco pixels cabem UMA linha — titulo de curso que quebra em
   duas jogava a segunda por cima da linha do instrutor, e como so alguns
   titulos sao longos, o texto de cada card parava numa altura diferente. Era
   dai que vinha a sensacao de desalinhamento; a altura dos cards em si sempre
   bateu, porque o .card e flex-column com .card-body em flex:1.

   Aqui o titulo passa a ter espaco reservado para duas linhas e corta na
   terceira. Como regra de classe nao vence style inline, os inline sairam das
   quatro views — e de quebra a ListaCursosPorTrilha, que nao tinha o do corpo,
   deixou de ser a unica diferente. */

.card-lista .card-body h5,
.card-lista .card-body h6 {
    min-height: 2.6em; /* duas linhas na escala do h6 */
    margin-bottom: 0.35rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-lista .card-body {
    min-height: 100px;
    /* Coluna para o botao poder ser empurrado para a base. Nos cards de trilha e
       de evento o botao e filho direto do corpo, sem card-footer, entao ele
       subia e descia junto com o texto acima: card com uma linha a mais de
       titulo ou com dois selos deixava o botao mais baixo que o do vizinho. */
    display: flex;
    flex-direction: column;
}

/* Ancora o bloco de texto na base do corpo. Em todos esses cards o h5 e filho
   direto e e seguido so por linhas de altura fixa (data, botao), entao ancorar
   o titulo alinha tambem o que vem depois dele. A folga sobra em cima, entre os
   selos e o titulo, que e justamente onde a variacao nasce.

   O auto vai no h5 e nao no botao de proposito: se os dois tivessem, o
   navegador dividiria a folga entre eles e o botao voltaria a desalinhar. */
.card-lista .card-body > h5 {
    margin-top: auto;
}


/* A faixa de selos do card de evento tem de um a tres selos, e o da trilha pode
   ser um nome comprido. Sem tratamento a faixa quebra em duas ou tres linhas em
   alguns cards e nao em outros, e o titulo de cada card comeca numa altura
   diferente — o botao ja fica na base pela regra acima, mas o texto no meio
   nao acompanha.

   Cada selo passa a truncar em 60% da largura do corpo, o que mantem a faixa em
   uma linha nos casos normais, e a altura de uma linha fica reservada para os
   cards que tem menos selos que os vizinhos. */

.card-lista-selos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    min-height: 1.55rem;
}

.card-lista-selos .badge {
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ===== Coluna das telas de entrada (login, registro, recuperar senha) =====
   O cartao vinha em col-md-8 col-lg-5 col-xl-4, o que dava 460px no tablet e
   360 no desktop — largo demais para um formulario de dois campos. Trocar so os
   degraus do grid nao resolve bem, porque a largura passa a depender do
   container de cada breakpoint e o cartao acaba mais estreito no monitor grande
   do que no tablet.

   Com o teto em rem a largura fica a mesma de 768px para cima, e abaixo disso a
   coluna volta a ser fluida e o cartao acompanha a tela. */

.coluna-identity {
    /* 21rem deixa o cartao em 316px. O piso e a linha "Mostrar Senha" +
       "Esqueceu a senha?" do login, que somada da 245px e precisa caber lado a
       lado dentro do padding do cartao. */
    max-width: 21rem;
}

/* ===== Rodape das tres areas (admin, aluno e perfil) =====

   Um partial so, _PageFooter, serve os tres layouts.

   O texto e aviso legal e credito: nao deve competir com o conteudo da tela.

   O valor foi medido, nao escolhido: o tema poe o corpo em 14px, entao o .small
   do Bootstrap (0.875em) ja resolvia para 12.25px, e um 0.75rem daria 12px -- 0.25px
   de diferenca, invisivel. Passou por 0.6875rem (11px) e desceu a pedido para
   0.625rem, que da 10px: 18% abaixo do original.

   10px e piso pratico para o paragrafo do aviso legal, que e longo. Abaixo disso
   vira texto que ninguem le.

   O seletor tem a classe do rodape na frente para vencer o .small das spans,
   que sozinho tem a mesma especificidade. */

.rodape-pagina span {
    font-size: 0.625rem;
}