html, body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Sobrescreve a cor "primary" do Bootstrap pra bater com a identidade do Portal do Aluno
   (indigo) -- sem isso, os botões/badges bg-primary/btn-primary voltam pro azul padrão do
   Bootstrap, já que o app não carrega mais o tema pesado de admin que antes customizava
   essa variável. */
:root {
    --bs-primary: #3558D4;
    --bs-primary-rgb: 79, 70, 229;
}

.btn-primary {
    --bs-btn-bg: #3558D4;
    --bs-btn-border-color: #3558D4;
    --bs-btn-hover-bg: #4338ca;
    --bs-btn-hover-border-color: #4338ca;
    --bs-btn-active-bg: #3730a3;
    --bs-btn-active-border-color: #3730a3;
}

.blazor-error-boundary {
    background: #dc3545;
    color: white;
    padding: 1rem;
    border-radius: 6px;
}

.blazor-error-boundary::after {
    content: "Ocorreu um erro.";
}

/* =====================================================================
   Chrome do layout — precisa ficar AQUI (css global) e não no
   PortalAlunoHome.razor.css, porque CSS com escopo do Blazor só alcança
   os elementos do proprio componente, e a barra do topo esta no layout.
   ===================================================================== */

.pa-body {
    min-height: 100vh;
    background: #F4F1EA;
}

.pa-topbar {
    background: #ffffff;
    border-bottom: 1px solid #E4DED2;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pa-topbar-marca {
    font-weight: 800;
    color: #3558D4;
    font-size: 15px;
}

.pa-topbar-sair {
    color: #5E6370;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.pa-body-conteudo {
    padding: 16px 12px;
}

/* No desktop quem manda e o menu lateral (MODELO 2): a barra do topo sai
   de cena pra nao duplicar marca e "Sair". O breakpoint tem que ser o
   MESMO do PortalAlunoHome.razor.css (900px) -- se um mudar e o outro
   nao, sobra uma faixa de largura sem navegacao nenhuma ou com as duas. */
@media (min-width: 900px) {
    .pa-topbar {
        display: none;
    }

    .pa-body-conteudo {
        padding: 0;
    }
}

/* ---- Apple Pay / Google Pay ----

   Nasce escondido. O Stripe.js so avisa se este aparelho tem carteira DEPOIS de
   montar o elemento; ate la, mostrar a caixa deixaria um retangulo vazio no card
   de quem abre no desktop. */
.pa-carteira {
    display: none;
    width: 100%;
    max-width: 260px;
    margin-bottom: .5rem;
}

.pa-carteira-visivel {
    display: block;
}

/* ------------------------------------------------------------------
   Pulso de satisfacao

   Fica no topo do resumo e some quando respondido. A escala de 0 a 10
   e colorida por faixa do NPS -- a cor ensina a escala antes de o aluno
   ler os rotulos das pontas, que e o que faz a pergunta ser respondida
   em dois segundos em vez de ser ignorada.
   ------------------------------------------------------------------ */

.pa-pulso {
    background: #fff;
    border: 1px solid #e3e8ef;
    border-left: 4px solid #6366f1;
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 18px;
    box-shadow: 0 2px 10px rgba(30, 41, 59, .05);
}

.pa-pulso-cab { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.pa-pulso-cab > i { color: #6366f1; font-size: 20px; margin-top: 2px; }
.pa-pulso-titulo { font-weight: 600; font-size: 15px; color: #15171C; line-height: 1.35; }
.pa-pulso-sub { font-size: 12.5px; color: #5E6370; margin-top: 2px; }

.pa-pulso-notas { display: flex; gap: 5px; flex-wrap: wrap; }

.pa-pulso-nota {
    flex: 1 1 34px;
    min-width: 34px;
    height: 38px;
    border: 1px solid #e3e8ef;
    background: #fff;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: transform .1s, border-color .1s;
}
.pa-pulso-nota:hover { transform: translateY(-2px); }
.pa-pulso-nota.baixa:hover { border-color: #D2491F; color: #D2491F; }
.pa-pulso-nota.media:hover { border-color: #d97706; color: #d97706; }
.pa-pulso-nota.alta:hover  { border-color: #16a34a; color: #16a34a; }

.pa-pulso-nota.on.baixa { background: #D2491F; border-color: #D2491F; color: #fff; }
.pa-pulso-nota.on.media { background: #d97706; border-color: #d97706; color: #fff; }
.pa-pulso-nota.on.alta  { background: #16a34a; border-color: #16a34a; color: #fff; }

.pa-pulso-escala {
    display: flex; justify-content: space-between;
    font-size: 11.5px; color: #5E6370; margin-top: 6px;
}

.pa-pulso-texto {
    width: 100%;
    margin-top: 12px;
    border: 1px solid #e3e8ef;
    border-radius: 8px;
    padding: 9px 11px;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
}

.pa-pulso-acoes {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px;
}

/* O aviso nao e detalhe juridico: e o que faz o aluno responder de verdade
   em vez de dar 10 para nao arrumar problema com o professor. */
.pa-pulso-aviso { font-size: 12px; color: #5E6370; }

@media (prefers-color-scheme: dark) {
    .pa-pulso { background: #15171C; border-color: #334155; }
    .pa-pulso-titulo { color: #E4DED2; }
    .pa-pulso-nota { background: #0f172a; border-color: #334155; color: #cbd5e1; }
    .pa-pulso-texto { background: #0f172a; border-color: #334155; color: #E4DED2; }
}

/* =====================================================================
   Fundo do portal (migration 354, 25/09/2026)
   A escola escolhe no ERP (Configuracoes > Portal do Aluno): imagem padrao,
   imagem propria ou nenhuma. O layout poe a URL em --pa-fundo e a classe
   .pa-fundo-imagem; sem a classe fica a cor lisa de .pa-body.
   A imagem padrao e em pe (celular): no desktop mostra a parte de baixo,
   onde estao as ondas, e fica presa (fixed) para os cartoes rolarem sobre ela.
   ===================================================================== */
.pa-body.pa-fundo-imagem {
    background: #FBF8F2 var(--pa-fundo) center top / cover no-repeat;
}

.pa-login-fundo {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: #FBF8F2 url('/img/fundo-padrao.jpg') center top / cover no-repeat;
}

@media (min-width: 900px) {
    .pa-body.pa-fundo-imagem {
        background-position: center bottom;
        background-attachment: fixed;
    }

    .pa-login-fundo {
        background-position: center bottom;
    }
}