/*
 * estilo.css — profegabi.com
 * Conceito: Imersão total. A foto preenche a tela, o conteúdo flutua sobre ela.
 */

/* @import DEVE ser a primeira regra (após comentários) — senão o browser ignora */
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;500;600;700&family=Nunito:wght@400;600;700;800&family=Dancing+Script:wght@400;500;600;700&display=swap');

/* === CURSOR GIZ ============================================================ */

:root {
    --cursor-giz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpolygon points='6,26 10,30 28,6 24,2' fill='%23f5f0e8' stroke='%23d8d4c0' stroke-width='0.5'/%3E%3Cpolygon points='6,26 10,30 7.5,32' fill='%23e8e0c8'/%3E%3Cline x1='25' y1='4' x2='9' y2='27' stroke='rgba(255,255,255,0.5)' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='4' cy='30' r='0.8' fill='rgba(245,240,232,0.7)'/%3E%3Ccircle cx='3' cy='32' r='0.5' fill='rgba(245,240,232,0.5)'/%3E%3C/svg%3E") 8 30, auto;
}

.sala, .sala * { cursor: var(--cursor-giz); }

/* === ANIMAÇÃO DE ABERTURA ================================================= */

@keyframes descobrir-sala {
    0%   { transform: translateX(0) scale(1.06); filter: brightness(0); }
    25%  { filter: brightness(0.15); }
    60%  { filter: brightness(0.7); transform: translateX(0) scale(1.02); }
    100% { transform: translateX(0) scale(1); filter: brightness(1); }
}

.vista.intro {
    animation: descobrir-sala 2s cubic-bezier(0.33, 0, 0.4, 1) forwards;
}

@media (prefers-reduced-motion: reduce) {
    .vista.intro { animation: none; }
}

/* === RESET ================================================================ */

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: 'Nunito', sans-serif;
    background: #000000;
}

/* === SALA ================================================================= */

.sala {
    position: relative;
    width: 100vw;
    height: 100vh;
    height: 100dvh;   /* celular: a altura "de verdade", sem a barra de endereço cortar a tela */
    overflow: hidden;
    perspective: 1100px;
    perspective-origin: 50% 45%;
    /* O navegador cuida só da rolagem vertical; o arrasto na horizontal é do navegacao.js. */
    touch-action: pan-y;
}

/* Enquanto o aluno arrasta a sala, não deixa selecionar texto sem querer. */
.sala.arrastando, .sala.arrastando * {
    user-select: none;
    -webkit-user-select: none;
}

/* === VISTAS =============================================================== */

/* As fotos dos ambientes ficam em assets/fotos em formato WebP (mesma qualidade visível,
 * ~20x menores que o PNG original). Para trocar uma foto, converta para WebP
 * com largura de até 2560 px e qualidade ~82 e substitua o arquivo. */

.vista {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Vista "fora de cena": invisível, sem clique, sem foco de Tab e fora do
     * leitor de tela. (Continua ocupando o espaço, então o tamanho do mural
     * ainda pode ser medido.) */
    visibility: hidden;
    pointer-events: none;
    /* A rolagem vertical (café, mural) é do navegador; o arrasto horizontal é da sala. */
    touch-action: pan-y;
}

/* Vista da vez. O movimento da troca é feito pelo navegacao.js, que escreve o
 * transform e a transition direto no elemento enquanto anima — depois limpa e
 * volta a valer só este estado de repouso. */
.vista.ativa {
    visibility: visible;
    pointer-events: all;
    transform: translateX(0) rotateY(0deg);
}

/* Durante a troca (ou o arrasto) as duas vistas envolvidas ficam visíveis.
 * O will-change só existe agora, para o navegador preparar as camadas
 * apenas quando precisa (antes as 6 ficavam preparadas o tempo todo). */
.vista.em-transicao {
    visibility: visible;
    will-change: transform;
}

.vista-quadro  { background-color: #1a3a1a; background-image: url('../fotos/quadro.webp'); }
.vista-janela  { background-color: #87CEEB; /* sem foto por enquanto. Quando houver, salve em assets/fotos/janela.webp e acrescente: background-image: url('../fotos/janela.webp'); */ }
.vista-mesinha { background-color: #6b3a2a; background-image: url('../fotos/mesinha.webp'); }
.vista-estante { background-color: #8b5e3c; }

/* .vista-cafe fica com scroll vertical pra caber as 3 seções de vídeo
 * (uma embaixo da outra) — veja o comentário grande em "VÍDEOS DO CAFÉ"
 * mais abaixo. A foto de fundo (background-image) não rola com o
 * conteúdo: ela pertence ao próprio .vista-cafe, então fica fixa atrás
 * enquanto só o conteúdo (que é filho dele) rola por cima — mesma lógica
 * já usada em .vista-mural. */
.vista-cafe {
    background-color: #d4a96a;
    background-image: url('../fotos/cafe.webp');
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255,0.15) transparent;
}

/* === MURAL ================================================================ */

.vista-mural {
    background-color: #1a1008;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255,0.15) transparent;
}

.mural-parede {
    width: 100%;
    height: 177vw; /* proporção 16:9 invertida para portrait */
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

/* Foto landscape rotacionada -90° via pseudo-elemento */
.mural-parede::before {
    content: '';
    position: absolute;
    width: 177vw;
    height: 100vw;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
    background-image: url('../fotos/mural.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* === NUVENS DE DEPOIMENTO (só no mural do index.php, visitante) ===========
 *
 * Nuvens translúcidas flutuando bem devagar sobre a foto do mural,
 * cada uma com um depoimento real de aluno. Fundo do mural é escuro,
 * então a nuvem é CLARA/branca — funciona como se fosse mesmo uma
 * nuvem contra um céu escuro, com tinta escura em vez de texto claro.
 *
 * A forma de nuvem é 100% CSS: o corpo principal tem cantos bem
 * arredondados e desiguais (border-radius com 8 valores), e duas
 * "bolhas" (::before/::after, atrás do texto) completam o contorno
 * fofo, sem cortar nem desalinhar o conteúdo.
 *
 * IMPORTANTE: a foto do mural (.mural-parede) rola normalmente dentro
 * de .vista-mural (que tem overflow-y:auto). As núvens NÃO devem rolar
 * junto — por isso elas moram numa camada separada, .mural-nuvens-fixas,
 * que é "sticky" no topo de .vista-mural. Como essa camada tem
 * height:0 (não ocupa espaço no fluxo do scroll) mas fica sempre presa
 * no topo da área visível, as núvens (posicionadas dentro dela) ficam
 * no lugar por cima da foto, que passa por baixo quando o aluno rola.
 * Por isso o "top" de cada núvem agora é em vh (altura da TELA), não
 * mais em % da altura do mural inteiro.
 *
 * O movimento (@keyframes flutuar-nuvem) é bem sutil — sobe/desce e
 * desliza uns poucos pixels, nunca sai do lugar. Cada nuvem com uma
 * duração e atraso diferentes (ver .nuvem-1 a .nuvem-5) pra não
 * flutuarem todas em sincronia, o que pareceria mecânico.
 *
 * O tamanho (max-width) e o formato (border-radius) também são
 * sobrescritos por nuvem (.nuvem-1 a .nuvem-5), pra nenhuma ficar
 * igual à outra — todas grandes, mas cada uma com um contorno de
 * nuvem levemente diferente.
 */

/* Camada fixa por cima da parede — sticky no topo do scroll-container
 * (.vista-mural). Não recebe clique nem bloqueia o gesto de arrastar
 * pra rolar a foto (pointer-events: none), já que é só decorativa.
 *
 * order:-1 força esse elemento a ser o PRIMEIRO item do flex de
 * .vista-mural, mesmo vindo depois de .mural-parede no HTML. Isso é
 * essencial pro sticky funcionar: sem isso, a posição "natural" dessa
 * camada ficava 177vw abaixo (depois da parede inteira), e o sticky
 * nunca tinha efeito visível — foi por isso que as núvens
 * desapareceram. Com order:-1 a posição natural já é o topo (0), e o
 * sticky consegue mesmo "colar" ali durante todo o scroll da parede. */
.mural-nuvens-fixas {
    order: -1;
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    z-index: 5;
    pointer-events: none;
}

.nuvem-depoimento {
    position: absolute;
    max-width: 320px;
    padding: 30px 34px;
    text-align: center;
    font-family: 'Dancing Script', cursive;
    font-size: 1.3rem;
    line-height: 1.35;
    color: rgba(54, 40, 22, 0.9);

    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.55) 0%,
        rgba(255, 255, 255, 0.32) 100%
    );
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.6);

    /* Contorno "fofo" só com border-radius desigual — sem precisar de
     * clip-path, então o texto nunca fica cortado. */
    border-radius: 45% 55% 60% 40% / 60% 50% 55% 45%;

    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);

    animation: flutuar-nuvem 9s ease-in-out infinite;
}

/* Duas bolhas atrás do corpo principal (z-index -1), mesmo vidro —
 * dão o contorno de nuvem sem interferir no texto. */
.nuvem-depoimento::before,
.nuvem-depoimento::after {
    content: '';
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    background: inherit;
    backdrop-filter: inherit;
    -webkit-backdrop-filter: inherit;
    border: inherit;
}

.nuvem-depoimento::before {
    width: 55%;
    height: 55%;
    top: -22%;
    left: 8%;
}

.nuvem-depoimento::after {
    width: 42%;
    height: 42%;
    top: -16%;
    right: 10%;
}

.nuvem-depoimento-autor {
    display: block;
    margin-top: 8px;
    font-size: 0.95rem;
    letter-spacing: 1px;
    color: rgba(90, 68, 40, 0.8);
}

@keyframes flutuar-nuvem {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(8px, -14px); }
}

/* Posição, tamanho e formato de cada nuvem — ajuste aqui se alguma
 * ficar em cima de um desenho importante da foto. "top" é em vh (%
 * da altura da TELA, não da foto) porque agora a camada é fixa — veja
 * o comentário grande acima. Duração/atraso diferentes = flutuação
 * dessincronizada; max-width e border-radius diferentes = nenhuma
 * nuvem igual à outra. */
.nuvem-1 {
    top: 12vh; left: 2%;
    max-width: 400px;
    border-radius: 42% 58% 62% 38% / 58% 45% 60% 42%;
    animation-duration: 8s; animation-delay: 0s;
}
.nuvem-2 {
    top: 10vh; left: 37%;
    max-width: 330px;
    border-radius: 55% 45% 40% 60% / 45% 60% 42% 58%;
    animation-duration: 10s; animation-delay: 1.2s;
}
.nuvem-3 {
    top: 14vh; left: 70%;
    max-width: 380px;
    border-radius: 38% 62% 55% 45% / 50% 40% 65% 35%;
    animation-duration: 9s; animation-delay: 2.4s;
}
.nuvem-4 {
    top: 44vh; left: 12%;
    max-width: 350px;
    border-radius: 60% 40% 45% 55% / 42% 58% 48% 52%;
    animation-duration: 11s; animation-delay: 0.8s;
}
.nuvem-5 {
    top: 47vh; left: 48%;
    max-width: 420px;
    border-radius: 48% 52% 58% 42% / 55% 42% 50% 60%;
    animation-duration: 8.5s; animation-delay: 3.2s;
}

/* Respeita quem prefere menos animação na tela. */
@media (prefers-reduced-motion: reduce) {
    .nuvem-depoimento { animation: none; }
}

@media (max-width: 600px) {
    /* Na tela pequena reduz um pouco todas, mas mantém a diferença de
     * tamanho entre elas (cada uma um pouco menor que no desktop) e
     * reposiciona pra não empilhar fora da área visível. */
    .nuvem-depoimento { padding: 18px 18px; font-size: 1.1rem; }
    .nuvem-1 { max-width: 235px; left: 2%;  top: 8vh; }
    .nuvem-2 { max-width: 205px; left: 52%; top: 9vh; }
    .nuvem-3 { max-width: 220px; left: 22%; top: 26vh; }
    .nuvem-4 { max-width: 210px; left: 58%; top: 28vh; }
    .nuvem-5 { max-width: 240px; left: 8%;  top: 46vh; }
}

/* === ESTANTE ============================================================== */

.estante-container {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.estante-trilho {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 300%; /* 3 andares empilhados */
    transition: transform 0.7s ease;
}

.estante-trilho[data-andar="1"] { transform: translateY(0); }
.estante-trilho[data-andar="2"] { transform: translateY(-33.333%); }
.estante-trilho[data-andar="3"] { transform: translateY(-66.666%); }

.estante-andar {
    width: 100%;
    flex: 0 0 33.333%;
    /* position:relative fica aqui de propósito: se um dia colocar algum
     * conteúdo com position:absolute dentro de um andar específico, ele
     * fica presa DENTRO desse andar (e não espalhada pelos 3 andares
     * empilhados de uma vez, que é o que aconteceria sem isso, porque
     * .estante-trilho tem "transform" e vira a referência). Hoje os
     * andares são só decorativos — os vídeos moraram pra vista do Café. */
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.estante-andar-1 { background-color: #8b5e3c; background-image: url('../fotos/estante1.webp'); }
.estante-andar-2 { background-color: #7a5230; background-image: url('../fotos/estante2.webp'); }
.estante-andar-3 { background-color: #6b4527; background-image: url('../fotos/estante3.webp'); }

/* === FOLHA-MENU ===========================================================
 *
 * Fica dentro de .vista-estante como irmão de .estante-container.
 * Visibilidade controlada 100% por CSS:
 *   — Oculto por padrão.
 *   — Visível quando .vista-estante tem a classe .ativa (andar 1).
 *   — Oculto nos andares 2 e 3 via atributo data-andar posto pelo JS.
 *
 * Para calibrar a posição sobre a folha de papel da foto:
 *   Ajuste left / top / width / height.
 * ⚠️ TEMPORÁRIO: outline vermelho e fundo amarelo para calibrar posição.
 */

.folha-menu {
    display: none; /* oculto por padrão */
    position: absolute;
    left: 33%;
    top: 10%;
    width: 27%;
    height: 75%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    z-index: 20;
    pointer-events: all;
    /* ⚠️ DEBUG — remover após calibrar */
    outline: 2px dashed red;
    background: rgba(255, 255, 200, 0.4);
}

/* Mostra quando estante está ativa (andar 1 — sem data-andar ou data-andar=1) */
.vista-estante.ativa .folha-menu                    { display: flex; }
/* Esconde nos andares 2 e 3 */
.vista-estante.ativa[data-andar="2"] .folha-menu,
.vista-estante.ativa[data-andar="3"] .folha-menu    { display: none; }

.folha-titulo {
    font-family: 'Dancing Script', cursive;
    font-size: 1rem;
    font-weight: 600;
    color: rgba(45, 25, 8, 0.99);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.folha-item {
    font-family: 'Dancing Script', cursive;
    font-size: 1.35rem;
    font-weight: 400;
    color: rgba(40, 20, 5, 0.99);
    background: none;
    border: none;
    padding: 7px 0;
    width: 90%;
    text-align: center;
    cursor: pointer;
    letter-spacing: 0.5px;
    position: relative;
    transition: color 0.25s ease;
    text-decoration: none;
    display: block;
}

.folha-item::after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 15%;
    width: 0%;
    height: 1px;
    background: rgba(40, 20, 5, 0.45);
    transition: width 0.3s ease;
}

.folha-item:hover { color: rgba(15, 7, 0, 0.95); }
.folha-item:hover::after { width: 70%; }

/* === VÍDEOS DO CAFÉ ========================================================
 *
 * A vista do Café tem 3 seções de vídeos do YouTube, uma embaixo da
 * outra (rola na vertical pra ver todas — veja .vista-cafe mais acima),
 * cada uma dentro de uma caixa translúcida (estilo Frutiger Aero, mas com
 * blur BEM baixo — foi pedido assim, diferente das outras caixas do site
 * que usam blur mais forte; por isso o fundo tem mais opacidade, pra
 * continuar legível mesmo com menos blur).
 *
 * O carrossel de cada categoria (.video-trilho) rola na horizontal — no
 * celular arrasta com o dedo (scroll nativo), no computador usa as
 * setinhas (.video-seta). Cada vídeo é um botão (.video-card) com a thumb
 * e o título embaixo, do jeito que aparece no YouTube. Ao clicar, abre o
 * pop-up (.modal-video, mais abaixo) tocando o vídeo embutido no site.
 *
 * PRA TROCAR OS VÍDEOS: cada .video-card tem um atributo
 * data-video-id="XXXXXXXXXXX" — é o código do vídeo, a parte depois de
 * "v=" no link do YouTube (ex: em youtube.com/watch?v=ABC123, o código é
 * "ABC123"). Troque esse código e o texto dentro de .video-titulo — a
 * thumb (imagem) é gerada automaticamente a partir do mesmo código, não
 * precisa trocar imagem nenhuma.
 */

.cafe-secao {
    width: 100%;
    /* flex:1 (em vez de min-height:100vh) faz as 3 seções se dividirem
     * pra caber juntas numa tela só, sem precisar rolar — é o que foi
     * pedido. min-height:0 é necessário pro flex realmente conseguir
     * encolher a seção (senão o conteúdo dentro força a altura mínima).
     *
     * TAMANHOS AUMENTADOS (pedido de aumentar tudo em 1.5x, depois +10%):
     * testei em várias larguras de tela reais (notebook pequeno até
     * monitor grande) e em notebooks comuns (ex: 1366x768) não há espaço
     * de sobra pra um 1.5x completo sem cortar o conteúdo — por isso aqui
     * no computador o aumento total é de 1.32x (1.2x + 10% depois), que é
     * o limite seguro nas telas mais comuns; em monitores grandes ainda
     * sobra espaço à vontade. No celular (@media mais abaixo) sobra bem
     * mais altura de tela, então lá já está no 1.5x completo. */
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* gap e padding verticais reduzidos um pouco (eram 8px e 11px) pra
     * abrir espaço pro "selo" atrás do título (comentário em
     * .cafe-secao-titulo) sem aumentar a altura total da seção — em telas
     * de notebook menores (ex: 1280x720) já não tinha mais folga nenhuma
     * sobrando, então essa troca precisou ser feita "no zero a zero". */
    gap: 0px;
    padding: 7px 21px;
    overflow: hidden;
}

/* Linha sutil separando uma seção da outra ao rolar (não aparece na
 * primeira, só entre elas). */
.cafe-secao + .cafe-secao {
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

/* O nome de cada categoria estava sumindo um pouco contra fotos mais
 * "cheias" (o mapa, a madeira, os potes) — pouco contraste, não só
 * tamanho. Por isso, além da sombra mais forte, agora tem um "selo"
 * (fundo escurecido + contorno) atrás do texto, como uma etiqueta,
 * pra destacar em qualquer parte da foto que fique atrás. */
.cafe-secao-titulo {
    font-family: 'Comfortaa', sans-serif;
    font-size: 1.85rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: #fffaf0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
    text-align: center;
    display: inline-block;
    padding: 2px 20px;
    background: linear-gradient(
        to bottom,
        rgba(50, 30, 15, 0.6) 0%,
        rgba(50, 30, 15, 0.4) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.video-caixa {
    width: fit-content;
    /* Alargada a pedido — antes ficava em 920px no máximo, cortando o
     * quinto vídeo da fileira em telas comuns. Agora cabe a fileira de 5
     * vídeos inteira sem cortar, em telas de notebook/monitor. */
    max-width: min(1150px, 95vw);
    padding: 13px 21px;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.62) 0%,
        rgba(255, 255, 255, 0.42) 100%
    );
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 20px;
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.video-carrossel {
    display: flex;
    align-items: center;
    gap: 8px;
}

.video-trilho {
    display: flex;
    gap: 21px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    padding: 6px;
    scrollbar-width: none; /* esconde a barra, mas o arrastar continua funcionando */
}
.video-trilho::-webkit-scrollbar { display: none; }

.video-card {
    flex: 0 0 auto;
    width: 198px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}

.video-thumb-wrap {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 13px;
    overflow: hidden;
    background: #000000;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.video-thumb-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Ícone de "play" que aparece por cima da thumb, como no YouTube */
.video-thumb-wrap::after {
    content: '▶';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.11rem;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(0, 0, 0, 0.28);
    opacity: 0;
    transition: opacity 0.2s ease;
}
.video-card:hover .video-thumb-wrap::after,
.video-card:focus-visible .video-thumb-wrap::after { opacity: 1; }

.video-titulo {
    margin-top: 7px;
    font-family: 'Nunito', sans-serif;
    font-size: 0.95rem;
    line-height: 1.2;
    color: rgba(35, 22, 10, 0.92);
    /* Trava em 2 linhas (com "..." se for maior) — assim todo card fica
     * com a mesma altura, o que ajuda a caber as 3 seções sem rolar. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.video-seta {
    flex: 0 0 auto;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.6);
    color: rgba(35, 22, 10, 0.85);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-size: 1.32rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.video-seta:hover { background: rgba(255, 255, 255, 0.75); }

@media (max-width: 700px) {
    /* No celular sobra mais espaço vertical que no computador, então aqui
     * dá pra aplicar o aumento de 1.5x completo sem risco de cortar. */
    .cafe-secao   { gap: 6px; padding: 9px 15px; }
    .cafe-secao-titulo { font-size: 1.58rem; }
    .video-caixa  { padding: 12px 15px; }
    .video-card   { width: 158px; }
    .video-titulo { font-size: 0.93rem; margin-top: 4.5px; }
    .video-seta   { width: 33px; height: 33px; font-size: 1.28rem; }
}

/* === MODAL DE VÍDEO (pop-up de reprodução) =================================
 *
 * Um único pop-up reaproveitado pra qualquer vídeo clicado, em qualquer
 * andar. O JS (videos.js) troca o "src" do iframe pro vídeo certo na hora
 * de abrir, e limpa esse "src" ao fechar — é isso que para o som/vídeo.
 * Fica fora de .sala, fixo na tela por cima de tudo.
 */

.modal-video {
    display: none; /* o JS troca pra "flex" ao abrir (classe .aberto) */
    position: fixed;
    inset: 0;
    z-index: 10000;
    align-items: center;
    justify-content: center;
    background: rgba(10, 8, 5, 0.85);
    padding: 24px;
}

.modal-video.aberto { display: flex; }

.modal-video-conteudo {
    position: relative;
    width: 100%;
    max-width: 900px;
}

.modal-video-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    background: #000000;
}

.modal-video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.modal-video-fechar {
    position: absolute;
    top: -42px;
    right: 0;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #ffffff;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}
.modal-video-fechar:hover { background: rgba(255, 255, 255, 0.3); }

/* === SETAS VERTICAIS (estante) ============================================ */

.btn-vertical {
    position: fixed;
    left: 50%;
    z-index: 100;
    background: transparent;
    border: none;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.5);
    font-size: 2.8rem;
    font-family: 'Nunito', sans-serif;
    -webkit-text-stroke: 0.5px rgba(255, 255, 255, 0.3);
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
    padding: 8px 20px;
    display: none;
    transition: color 0.3s, text-shadow 0.3s, transform 0.3s;
}

.btn-subir  { top: 12px;    transform: translateX(-50%) scaleX(2.4) rotate(90deg); }
.btn-descer { bottom: 20px; transform: translateX(-50%) scaleX(2.4) rotate(90deg); }
.btn-subir:hover  { transform: translateX(-50%) scaleX(2.6) rotate(90deg); }
.btn-descer:hover { transform: translateX(-50%) scaleX(2.6) rotate(90deg); }

.btn-vertical:hover {
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 0 15px rgba(255, 255, 255,0.35), 0 0 30px rgba(255, 255, 255,0.15);
}

/* === SETAS LATERAIS ======================================================= */

.btn-navegar {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 100;
    width: 100px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 4rem;
    font-family: 'Nunito', sans-serif;
    -webkit-text-stroke: 0.5px rgba(255, 255, 255, 0.3);
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
    transform: scaleY(2.2);
    transition: color 0.3s, text-shadow 0.3s, transform 0.3s;
}

.btn-navegar:hover {
    color: rgba(255, 255, 255, 0.92);
    transform: scaleY(2.4);
    text-shadow: 0 0 15px rgba(255, 255, 255,0.35), 0 0 30px rgba(255, 255, 255,0.15);
}

.btn-esquerda { left: 0; }
.btn-direita  { right: 0; }

/* Sem o contorno de foco padrão do navegador nas setas da sala. Elas são
 * botões de altura da tela inteira (e esticados na vertical pelo
 * transform), então o contorno padrão aparecia como uma linha vertical
 * escura na borda da faixa, depois de um clique ou de usar o teclado.
 * Pra quem navega com Tab, o foco continua visível: a seta fica mais
 * brilhante, igual ao efeito de passar o mouse. */
.btn-navegar,
.btn-vertical {
    outline: none;
    -webkit-tap-highlight-color: transparent;
}
.btn-navegar:focus-visible,
.btn-vertical:focus-visible {
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 0 15px rgba(255, 255, 255,0.35), 0 0 30px rgba(255, 255, 255,0.15);
}

/* === LOGIN ================================================================ */

.login-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
}

/* Contraste do texto sobre o quadro-negro SEM caixa/painel por trás —
 * de propósito: aqui o texto precisa parecer giz escrito direto no
 * quadro-verde, não um card flutuando por cima. Em vez de contorno
 * duro, é uma sombra escura BEM desfocada — um "borrão" de carvão
 * atrás da letra, sem cantos retos — que lembra giz riscado, mas ainda
 * garante leitura sobre a parte clara do quadro. As caixas de vidro
 * (ver "CAIXA DE VIDRO" mais abaixo) só existem nas páginas que usam
 * o fundo da mesinha (body.pagina-conteudo) — aqui no quadro, nunca. */
.login-titulo {
    color: rgba(242, 238, 218, 0.94);
    font-size: 4.2rem;
    font-family: 'Comfortaa', sans-serif;
    font-weight: 400;
    letter-spacing: 4px;
    margin-bottom: 2px;
    line-height: 1.2;
    text-shadow:
        0 0 6px rgba(0, 0, 0,0.55),
        0 0 16px rgba(0, 0, 0,0.35),
        0 3px 8px rgba(0, 0, 0,0.4),
        0 0 14px rgba(255, 255, 240,0.22);
}

.login-subtitulo {
    color: rgba(230, 226, 198, 0.9);
    font-size: 1.35rem;
    font-family: 'Comfortaa', sans-serif;
    letter-spacing: 2px;
    margin-bottom: 10px;
    text-shadow:
        0 0 4px rgba(0, 0, 0,0.5),
        0 0 10px rgba(0, 0, 0,0.32),
        0 2px 5px rgba(0, 0, 0,0.35);
}

.login-input {
    width: 280px;
    padding: 6px 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255,0.2);
    color: rgba(245, 242, 218, 0.96);
    font-size: 1.65rem;
    font-family: 'Nunito', sans-serif;
    outline: none;
    text-align: center;
    letter-spacing: 2px;
    transition: border-color 0.3s;
    caret-color: rgba(255, 255, 220,0.8);
    text-shadow:
        0 0 4px rgba(0, 0, 0,0.5),
        0 0 9px rgba(0, 0, 0,0.3),
        0 2px 5px rgba(0, 0, 0,0.3);
}

.login-input::placeholder {
    color: rgba(225, 220, 188, 0.72);
    font-family: 'Nunito', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 2px;
}

.login-input:focus { border-bottom-color: rgba(255, 255, 200,0.5); }

/* Preenchimento automático do navegador (e-mail/senha salvos). Quando o
 * aluno clica numa sugestão salva, o Chrome/Edge pinta o campo com um
 * retângulo claro e troca a cor do texto — o que quebrava o visual do
 * quadro-negro. O navegador não deixa trocar esse fundo direto, então o
 * truque é adiar a mudança de cor por um tempo praticamente infinito
 * (transition) e forçar a cor do texto igual à dos campos normais. */
.login-input:-webkit-autofill,
.login-input:-webkit-autofill:hover,
.login-input:-webkit-autofill:focus,
.login-input:-webkit-autofill:active {
    -webkit-text-fill-color: rgba(245, 242, 218, 0.96);
    caret-color: rgba(255, 255, 220, 0.8);
    transition: background-color 600000s 0s, color 600000s 0s;
}
/* Firefox usa outro nome para a mesma coisa. Fica em regra separada:
 * se o navegador não conhece um dos seletores, ignora a regra inteira. */
.login-input:autofill {
    background: transparent;
    color: rgba(245, 242, 218, 0.96);
}

.login-btn {
    margin-top: 6px;
    background: transparent;
    border: none;
    color: rgba(232, 226, 190, 0.88);
    font-size: 1.25rem;
    font-family: 'Nunito', sans-serif;
    letter-spacing: 4px;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.3s, text-shadow 0.3s;
    padding: 6px 0;
    text-shadow:
        0 0 4px rgba(0, 0, 0,0.5),
        0 0 9px rgba(0, 0, 0,0.3);
}

.login-btn:hover {
    color: rgba(242, 236, 200, 0.92);
    text-shadow:
        0 0 4px rgba(0, 0, 0,0.45),
        0 0 10px rgba(255, 255, 220,0.25);
}

.login-erro {
    color: rgba(255, 170, 170, 0.92);
    font-size: 1.05rem;
    font-family: 'Nunito', sans-serif;
    text-align: center;
    margin-top: 2px;
    text-shadow:
        0 0 4px rgba(0, 0, 0,0.55),
        0 0 9px rgba(0, 0, 0,0.35);
}

/* Mensagem de sucesso no quadro (ex.: "senha nova salva") — irmã verde do .login-erro */
.login-ok {
    color: rgba(190, 240, 200, 0.95);
    font-size: 1.05rem;
    font-family: 'Nunito', sans-serif;
    text-align: center;
    margin-top: 2px;
    text-shadow:
        0 0 4px rgba(0, 0, 0,0.55),
        0 0 9px rgba(0, 0, 0,0.35);
}

/* Rótulo visível acima do campo (login, cadastro, login do professor,
 * "esqueci minha senha" e "senha nova") */
.login-label {
    color: rgba(235, 230, 200, 0.85);
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    letter-spacing: 1px;
    /* Nos formulários com vários campos (login, cadastro), o rótulo fica
     * colado no campo dele e longe do campo de cima: o espaço entre os
     * campos é do "gap" do formulário, então puxamos o rótulo pra baixo. */
    margin-bottom: -6px;
    text-shadow:
        0 0 4px rgba(0, 0, 0,0.55),
        0 0 9px rgba(0, 0, 0,0.35);
}

/* Cadastro tem 4 campos + rótulos: sem compactar, o formulário passa da
 * parte verde do quadro (o título sobe pro preto, o link cai no giz).
 * O "!important" é só porque o espaçamento do formulário é escrito direto
 * no HTML (style=""), e isso ganha de qualquer regra do CSS. */
.login-form-compacto { gap: 2px !important; }
.login-form-compacto .login-label { margin-top: 6px; margin-bottom: 0; }
.login-form-compacto .login-btn { margin-top: 4px; }
.vista-quadro-cadastro .login-titulo { font-size: 2.6rem; }

/* Foco visível para quem navega pelo teclado */
.login-input:focus-visible,
.login-btn:focus-visible,
.login-link:focus-visible {
    outline: 2px solid rgba(255, 245, 190, 0.9);
    outline-offset: 3px;
}

/* Sobe o bloco inteiro (título + subtítulo + formulário) um pouco em
 * relação ao centro da tela, pra caber tudo dentro do retângulo claro
 * do quadro — sem isso, o botão/link de baixo passava da área clara
 * e caía em cima dos rabiscos de giz na borda da foto. O "+0.8cm" foi
 * pedido depois, pra descer um pouco e ficar mais centralizado dentro
 * do quadro (estava subido demais). */
.vista-quadro .login-container {
    transform: translateY(calc(-9vh + 0.8cm));
}

/* Página de cadastro tem 2 campos a mais que o login, então o meio-termo
 * entre "centralizado" e "subido 9vh" ficou melhor pra ela sozinha. */
.vista-quadro-cadastro .login-container {
    transform: translateY(-3vh);
}

/* Rodapé do formulário — link "criar conta" / "já tenho conta" */
.login-rodape {
    margin-top: 8px;
}

.login-link {
    color: rgba(235, 230, 200, 0.85);
    font-family: 'Nunito', sans-serif;
    font-size: 1.05rem;
    letter-spacing: 1px;
    text-decoration: underline;
    text-shadow:
        0 0 4px rgba(0, 0, 0,0.55),
        0 0 9px rgba(0, 0, 0,0.35);
    transition: color 0.3s;
}

.login-link:hover {
    color: rgba(250, 245, 220, 0.97);
}

/* === BOTÃO SAIR ============================================================
 * Fica no canto do quadro. Posição em cm porque foi assim que foi pedido —
 * pra mexer, é só mudar os valores de "top" e "right" abaixo.
 */

.btn-sair {
    position: fixed;
    top: 3.4cm;
    right: 1.5cm;
    z-index: 200;

    /* Visual: botão de vidro "glossy" (brilho na metade de cima, cor mais
     * funda embaixo), mesma família dos botões de atalho e de salvar do
     * site. É o mesmo em todas as páginas — sala, painel do aluno e
     * central do professor. Só a POSIÇÃO muda de página pra página. */
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 22px 9px 16px;
    font-family: 'Nunito', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-decoration: none;
    color: #093f2b;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
    background: linear-gradient(
        to bottom,
        #f7fffb 0%,
        #a0f7d2 46%,
        #21dc8f 54%,
        #6df1b9 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 999px;
    box-shadow:
        0 4px 12px rgba(0, 65, 42, 0.35),
        inset 0 1px 1px rgba(255, 255, 255, 0.95),
        inset 0 -2px 4px rgba(0, 118, 72, 0.25);
    transition: transform 0.15s, box-shadow 0.15s, color 0.2s;
}

/* Ícone de "desligar" (círculo aberto + traço). Desenhado como máscara
 * pra herdar a cor do texto — assim muda junto no hover. */
.btn-sair::before {
    content: "";
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 3v8'/%3E%3Cpath d='M6.4 6.6a8 8 0 1 0 11.2 0'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 3v8'/%3E%3Cpath d='M6.4 6.6a8 8 0 1 0 11.2 0'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Ao passar o mouse, ganha um tom coral — cor de "sair". */
.btn-sair:hover {
    color: #6b1d10;
    background: linear-gradient(
        to bottom,
        #fff7f3 0%,
        #ffd2c4 46%,
        #ff9078 54%,
        #ffb5a0 100%
    );
    transform: translateY(-1px);
    box-shadow:
        0 6px 14px rgba(140, 40, 20, 0.35),
        inset 0 1px 1px rgba(255, 255, 255, 0.95),
        inset 0 -2px 4px rgba(190, 70, 40, 0.25);
}

/* Navegação por teclado: contorno bem visível ao focar com Tab. */
.btn-sair:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
}

/* No dashboard (.pagina-conteudo), a caixa de vidro agora é bem maior
 * (só 2 a 3cm de margem da tela) — o "top:3.4cm" original do botão Sair
 * era pra clarear os elementos da sala, e aqui caía DENTRO da caixa,
 * em cima do primeiro cartão. Aqui ele fica coladinho no canto, antes
 * da caixa começar. */
body.pagina-conteudo .btn-sair {
    top: 0.8cm;
    right: 1cm;
}

/* No celular o botão fica um pouco menor em todas as páginas; nas de
 * conteúdo, a caixa de vidro começa a ~12px da borda, então ele encosta
 * no cantinho pra não cobrir o título. */
@media (max-width: 600px) {
    .btn-sair {
        padding: 6px 14px 6px 11px;
        font-size: 0.95rem;
    }
    body.pagina-conteudo .btn-sair {
        top: 8px;
        right: 8px;
    }
}

/* === INDICADOR DE POSIÇÃO =================================================
 * Seis botões (um por ambiente). O pontinho visível é pequeno, mas a área de
 * toque de cada botão é de 28 px, para dar para acertar com o dedo. Ficam
 * sempre visíveis (discretos) — no celular não existe "passar o mouse". */

.indicador {
    position: fixed;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0;
    z-index: 100;
    opacity: 0.6;
    transition: opacity 0.3s;
}

.sala:hover .indicador,
.indicador:focus-within { opacity: 1; }

.indicador-ponto {
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    display: grid;
    place-items: center;
    -webkit-tap-highlight-color: transparent;
}

.indicador-ponto::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25); /* contorno fino: aparece também sobre fundo claro */
    transition: background 0.3s, transform 0.3s;
}

.indicador-ponto.ativo::before {
    background: rgba(255, 255, 255, 0.95);
    transform: scale(1.5);
}

/* Foco de teclado visível. */
.indicador-ponto:focus-visible {
    outline: 2px solid rgba(255, 245, 190, 0.9);
    outline-offset: -4px;
    border-radius: 50%;
}

/* Texto só para leitor de tela (não aparece na tela). */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* === PÁGINAS DE CONTEÚDO (listas.php, simulados.php, etc.) ================
 *
 * Páginas PHP separadas acessadas pelos links do folha-menu.
 * Compartilham este CSS via body.pagina-conteudo.
 */

body.pagina-conteudo {
    margin: 0;
    min-height: 100vh;
    background-image: url('../fotos/fundobase.webp');
    background-size: cover;
    background-position: center;
    background-color: #2c2c2c;
    font-family: 'Nunito', sans-serif;
    color: #f0ece0;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* "safe center": centraliza verticalmente quando cabe na tela (a
     * maioria das páginas) — mas quando o conteúdo é mais alto que a
     * tela (como o formulário grande de professor/aluno.php), evita
     * que a margem de cima fique "escondida" (era possível rolar só
     * pra baixo, nunca pra cima, e a caixa parecia colada no topo).
     * Sem "safe", centralizar conteúdo que não cabe faz o navegador
     * cortar igualmente a margem de cima e a de baixo, mas só deixa
     * rolar até a de baixo. */
    justify-content: safe center;
    overflow: auto;
}

.pagina-conteudo-wrapper {
    /* Antes tinha um teto de 820px — agora quem manda no tamanho é a
     * .caixa-conteudo (ver mais abaixo, ela que ficou bem maior, com
     * margem de 2 a 3cm da borda da tela), então aqui é só o "encaixe"
     * que centraliza tudo. */
    max-width: none;
    width: 100%;
    padding: 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    box-sizing: border-box;
}

.btn-voltar-sala {
    position: fixed;
    top: 20px;
    left: 24px;
    background: none;
    border: none;
    color: rgba(230, 225, 195, 0.65);
    font-family: 'Nunito', sans-serif;
    font-size: 1.05rem;
    letter-spacing: 2px;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.3s, text-shadow 0.3s;
    text-shadow: 0 1px 4px rgba(0, 0, 0,0.4);
}

.btn-voltar-sala:hover {
    color: rgba(245, 240, 210, 0.95);
    text-shadow: 0 0 12px rgba(255, 255, 220,0.2), 0 1px 4px rgba(0, 0, 0,0.4);
}

.pagina-titulo {
    font-family: 'Comfortaa', sans-serif;
    font-size: 2.8rem;
    font-weight: 400;
    color: rgba(232, 228, 198, 0.92);
    letter-spacing: 4px;
    text-align: center;
    text-shadow: 0 0 10px rgba(255, 255, 220,0.12), 0 2px 3px rgba(0, 0, 0,0.4);
    margin-bottom: 16px;
}

.pagina-subtitulo {
    font-family: 'Comfortaa', sans-serif;
    font-size: 1.1rem;
    color: rgba(220, 216, 190, 0.75);
    letter-spacing: 2px;
}

/* === PAINÉIS DO DASHBOARD (aluno/dashboard.php) ============================
 * Pedido do professor: estilo "Frutiger Aero" (referência: hub/GitHub em
 * tons de azul-esverdeado, vidro brilhante, cartões arredondados). Por
 * isso aqui virou um GRID de cartões de vidro claro (antes era uma lista
 * empilhada com linha divisória, só texto sem fundo próprio).
 *
 * Fica dentro da .caixa-conteudo (ver "CAIXA DE VIDRO" mais abaixo), que
 * agora é bem clara — por isso as cores de texto aqui são escuras
 * (azul petróleo), não mais creme claro como no resto do site (lá o
 * fundo é escuro, aqui é claro).
 */

/* Duas colunas: a esquerda (lista da semana + calendário) fica mais
 * estreita; a direita (informações do dia escolhido) fica mais larga,
 * porque é onde mora o conteúdo que muda mais (recado, notas, etc). */
.dashboard-colunas {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(300px, 1.3fr);
    gap: 28px;
    width: 100%;
    margin-top: 28px;
    align-items: start;
}

.dashboard-coluna-esquerda,
.dashboard-coluna-direita {
    display: flex;
    flex-direction: column;
    gap: 26px;
    min-width: 0; /* evita que o calendário estoure a coluna */
}

.dashboard-painel {
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    padding: 20px 22px;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.6) 0%,
        rgba(180, 246, 220, 0.4) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 18px;
    box-shadow:
        0 8px 22px rgba(10, 86, 58, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.dashboard-painel-titulo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Comfortaa', sans-serif;
    font-size: 1.3rem;
    letter-spacing: 1px;
    color: #093f2b;
    margin: 0 0 10px;
}

/* "Selo" redondo e brilhante atrás do emoji de cada painel — o toque
 * clássico de ícone-bolha do Frutiger Aero. */
.dashboard-painel-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-size: 1.05rem;
    background: linear-gradient(to bottom, #edfff6 0%, #3fe19e 100%);
    box-shadow:
        0 2px 6px rgba(0, 65, 42, 0.3),
        inset 0 1px 1px rgba(255, 255, 255, 0.9);
}

.dashboard-painel-corpo {
    font-family: 'Nunito', sans-serif;
    font-size: 1.3rem;
    line-height: 1.5;
    color: rgba(11, 48, 35, 0.92);
    margin: 0 0 6px;
}

.dashboard-painel-detalhe {
    font-size: 1.15rem;
    color: rgba(20, 58, 44, 0.8);
}

.dashboard-vazio {
    color: rgba(20, 58, 44, 0.65);
}

/* "Recado do professor" — compromissos + próximo passo juntos, com
 * destaque (fundo amarelo-creme, como um post-it), porque é a
 * informação que o aluno mais precisa ver de cara. */
.dashboard-recado {
    margin: 10px 0;
    padding: 10px 14px;
    background: linear-gradient(to bottom, rgba(255, 248, 220, 0.85), rgba(255, 240, 190, 0.7));
    border: 1px solid rgba(200, 160, 60, 0.35);
    border-left: 4px solid rgba(200, 150, 40, 0.6);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(120, 90, 20, 0.12);
}

.dashboard-recado-rotulo {
    display: block;
    font-family: 'Nunito', sans-serif;
    font-size: 1.05rem;
    letter-spacing: 0.5px;
    color: #6b4a12;
    margin-bottom: 4px;
}

.dashboard-recado-texto {
    font-family: 'Dancing Script', cursive;
    font-size: 1.25rem;
    line-height: 1.4;
    color: #4a3410;
    margin: 0 0 4px;
}
.dashboard-recado-texto:last-child {
    margin-bottom: 0;
}

.dashboard-painel-link {
    display: inline-block;
    margin: 6px 12px 0 0;
    color: #0a744a;
    font-family: 'Nunito', sans-serif;
    font-size: 1.1rem;
    letter-spacing: 1px;
    text-decoration: underline;
    transition: color 0.3s;
}

.dashboard-painel-link:hover {
    color: #065435;
}

/* Mesmo estilo do .dashboard-painel-link, mas pra usar NO MEIO de uma
 * frase (ex: "Lista desta semana: Funções — baixar · gabarito"), por
 * isso é inline e sem margem extra. */
.dashboard-painel-link-inline {
    color: #0a744a;
    text-decoration: underline;
    transition: color 0.3s;
}
.dashboard-painel-link-inline:hover {
    color: #065435;
}

/* Quando é o link "‹ Voltar..." no topo da caixa (alunos.php, aluno.php,
 * listas.php), ele vinha colado no título embaixo — "inline-block" faz o
 * margin-bottom valer de verdade (num link "inline" puro, margem vertical
 * não abre espaço nenhum). */
.caixa-conteudo > a.dashboard-painel-link-inline:first-child {
    display: inline-block;
    margin-bottom: 18px;
}

/* === LISTA DE ALUNOS (central do professor) ===============================
 * Os botões de filtro (Todos / Regulares / Comuns) e a lista de alunos
 * abaixo deles, na tela professor/painel.php. */

/* Abas de filtro (Todos/Regulares/Comuns, Hoje/Semana/Atrasadas/Todas):
 * eram texto sublinhado simples — ficava parecendo link de navegador
 * antigo. Agora são "pílulas" clicáveis, com a ativa destacada. */
.filtro-alunos {
    margin: 0 0 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.filtro-alunos a,
.filtro-alunos-ativo {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 999px;
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    letter-spacing: 0.5px;
    text-decoration: none;
}

.filtro-alunos a {
    color: #0a744a;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.7);
    transition: background 0.2s, transform 0.15s;
}
.filtro-alunos a:hover {
    background: rgba(255, 255, 255, 0.7);
    transform: translateY(-1px);
}

/* O filtro selecionado no momento não é um link — é uma pílula sólida,
 * pra dar a entender que "já está aqui". */
.filtro-alunos-ativo {
    color: #ffffff;
    font-weight: 700;
    background: linear-gradient(to bottom, #3fe19e 0%, #28c284 100%);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 2px 6px rgba(0, 65, 42, 0.25);
}

.lista-alunos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lista-alunos-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 12px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.35);
    border-radius: 8px;
}

/* Grupo da direita: status + botão de ação, um ao lado do outro. */
.lista-alunos-direita {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* O <form> do botão não deve empurrar o layout — fica em linha, sem
 * margem própria (o gap do .lista-alunos-direita já cuida do espaço
 * ENTRE formulários). O "gap" aqui dentro é pro caso de um formulário
 * ter mais de um botão (ex: pagamento) — sem isso, os botões ficavam
 * colados um no outro, difícil de acertar o clique certo. */
.lista-alunos-form {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

/* Botão de ação (Promover/Rebaixar/pagamento) — antes era só texto
 * sublinhado (parecia link de navegador antigo). Agora é uma pílula
 * de vidro, com sombra leve e "levanta" no hover — mais fofo e mais
 * fácil de acertar o clique. */
.lista-alunos-acao {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 0%, rgba(183, 249, 223, 0.55) 100%);
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 999px;
    padding: 4px 14px;
    font-family: 'Nunito', sans-serif;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    text-decoration: none;
    cursor: pointer;
    color: #0a744a;
    box-shadow: 0 2px 6px rgba(0, 65, 42, 0.12);
    transition: transform 0.15s, box-shadow 0.15s, color 0.15s;
}
.lista-alunos-acao:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 65, 42, 0.2);
    color: #065435;
}

/* Rebaixar tem cor de alerta — é a ação que tira o acesso do aluno. */
.lista-alunos-acao.rebaixar {
    color: #a04a4a;
    background: linear-gradient(to bottom, rgba(255, 235, 235, 0.85) 0%, rgba(255, 210, 210, 0.6) 100%);
}
.lista-alunos-acao.rebaixar:hover { color: #7a3535; }

/* Agora é um link (abre professor/aluno.php) — texto sem sublinhado
 * por padrão, mas ganha sublinhado + cor mais escura no hover, pra dar
 * a entender que é clicável sem parecer um botão. */
.lista-alunos-nome {
    font-family: 'Nunito', sans-serif;
    font-size: 1.25rem;
    color: rgba(11, 48, 35, 0.92);
    text-decoration: none;
    transition: color 0.2s;
}
.lista-alunos-nome:hover {
    color: #065435;
    text-decoration: underline;
}

.lista-alunos-email {
    font-size: 0.85rem;
    color: rgba(20, 58, 44, 0.65);
    margin-left: 8px;
}

/* Badge de status — antes era texto solto, sem fundo, meio "perdido"
 * na tela. Agora é uma pílula colorida, igual ao badge de pagamento. */
.lista-alunos-status {
    display: inline-block;
    padding: 2px 12px;
    border-radius: 999px;
    font-family: 'Nunito', sans-serif;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* Regular este ano letivo — destaque em azul. Comum (ou regular
 * vencido) — cinza mais discreto. */
.lista-alunos-status.regular {
    color: #08603e;
    background: rgba(136, 242, 200, 0.55);
}
.lista-alunos-status.comum {
    color: rgba(20, 58, 44, 0.6);
    background: rgba(210, 210, 210, 0.4);
}

/* Seta ‹ › usada no cabeçalho do calendário, pra trocar de mês (troca a
 * página recarregando com ?mes=AAAA-MM, sem precisar de JavaScript —
 * funciona igual no celular). */
.dashboard-seta-semana {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    font-size: 1.2rem;
    line-height: 1;
    color: #093f2b;
    background: linear-gradient(to bottom, #edfff6 0%, #a1f3d1 100%);
    box-shadow:
        0 2px 5px rgba(0, 65, 42, 0.25),
        inset 0 1px 1px rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s;
}
.dashboard-seta-semana:hover {
    transform: translateY(-1px);
    box-shadow:
        0 3px 8px rgba(0, 65, 42, 0.3),
        inset 0 1px 1px rgba(255, 255, 255, 0.9);
}

/* === CALENDÁRIO DO ALUNO ===================================================
 * Grade com todos os dias do mês. O aluno clica em qualquer dia — os que
 * já têm aula registrada ficam marcados com uma cor diferente (.tem-aula),
 * o dia de hoje ganha um contorno (.hoje), e o dia aberto no momento fica
 * destacado (.selecionado). */

.dashboard-calendario {
    margin-bottom: 10px;
}

.dashboard-calendario-cabecalho {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 8px;
}

.dashboard-calendario-titulo {
    font-family: 'Nunito', sans-serif;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
    color: #093f2b;
    text-align: center;
    min-width: 130px;
}

/* max-width pra não deixar o calendário esticar demais em colunas
 * largas — ele é só um seletor de dia, não precisa dominar a coluna. */
.dashboard-calendario-grade {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    max-width: 260px;
    margin: 0 auto;
}

.dashboard-calendario-diasemana {
    text-align: center;
    font-family: 'Nunito', sans-serif;
    font-size: 0.7rem;
    color: rgba(9, 63, 43, 0.6);
    padding-bottom: 2px;
}

.dashboard-calendario-vazio {
    /* espaço em branco antes do dia 1, só pra alinhar a grade */
}

.dashboard-calendario-dia {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    font-family: 'Nunito', sans-serif;
    font-size: 0.8rem;
    color: rgba(11, 48, 35, 0.85);
    background: rgba(255, 255, 255, 0.35);
    text-decoration: none;
    transition: background 0.15s, transform 0.15s;
}
.dashboard-calendario-dia:hover {
    background: rgba(255, 255, 255, 0.65);
    transform: scale(1.06);
}

/* Dia com aula registrada — recebe uma cor pra chamar atenção mesmo sem
 * estar selecionado. */
.dashboard-calendario-dia.tem-aula {
    background: linear-gradient(to bottom, #befbe2 0%, #7eefc1 100%);
    color: #093f2b;
    font-weight: 600;
}

/* Calendário da CENTRAL DO PROFESSOR (painel.php) tem um segundo tipo
 * de marcação: dias com prazo de lista vencendo (âmbar), separado dos
 * dias com aula registrada (azul, .tem-aula acima). Um dia pode ter
 * as duas coisas — nesse caso o gradiente mistura as duas cores. */
.dashboard-calendario-dia.tem-prazo {
    background: linear-gradient(to bottom, #ffe9b8 0%, #ffd685 100%);
    color: #6b4a12;
    font-weight: 600;
}
.dashboard-calendario-dia.tem-aula.tem-prazo {
    background: linear-gradient(135deg, #7eefc1 0%, #ffd685 100%);
    color: #4a3410;
}

/* Dia de hoje — contorno, mesmo que não tenha aula. */
.dashboard-calendario-dia.hoje {
    box-shadow: inset 0 0 0 2px rgba(10, 116, 74, 0.55);
}

/* Dia selecionado no momento (o que está sendo mostrado embaixo). */
.dashboard-calendario-dia.selecionado {
    background: linear-gradient(to bottom, #3fe19e 0%, #28c284 100%);
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(0, 65, 42, 0.35);
}

/* Legenda pequena embaixo do calendário da central do professor,
 * explicando as duas cores (aula / prazo de lista). */
.dashboard-calendario-legenda {
    margin: 8px 0 0;
    font-size: 0.8rem;
    color: rgba(20, 58, 44, 0.7);
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.legenda-ponto {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-left: 10px;
}
.legenda-ponto:first-child { margin-left: 0; }
.legenda-ponto.tem-aula  { background: linear-gradient(to bottom, #befbe2 0%, #7eefc1 100%); }
.legenda-ponto.tem-prazo { background: linear-gradient(to bottom, #ffe9b8 0%, #ffd685 100%); }

/* Aula online marcada (tela do aluno na central do professor): bolinha
 * verde no canto do dia, por cima da cor de "tem registro". */
.dashboard-calendario-dia { position: relative; }
.dashboard-calendario-dia.aula-online::after {
    content: '';
    position: absolute;
    top: 3px;
    right: 3px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2fbf8f;
    box-shadow: 0 0 0 1.5px #ffffff;
}
.legenda-ponto.aula-online { background: #2fbf8f; }


/* Bloco de notas do aluno — o próprio aluno escreve aqui, o professor só
 * lê (não existe tela de edição pra ele nesse campo). */
.dashboard-notas-form {
    display: flex;
    flex-direction: column;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed rgba(10, 64, 44, 0.25);
}

.dashboard-notas-rotulo {
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    letter-spacing: 0.5px;
    color: #093f2b;
    margin-bottom: 6px;
}

.dashboard-notas-campo {
    resize: vertical;
    min-height: 60px;
    /* Fonte neutra e suave (a mesma do resto do painel); a cursiva
     * 'Dancing Script' cansava a leitura em campos de digitação. */
    font-family: 'Nunito', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.45;
    color: rgba(11, 48, 35, 0.92);
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    box-shadow: inset 0 1px 4px rgba(10, 64, 44, 0.12);
}
.dashboard-notas-campo::placeholder {
    font-family: 'Nunito', sans-serif;
    color: rgba(11, 48, 35, 0.45);
}
.dashboard-notas-campo:focus {
    outline: none;
    border-color: rgba(10, 116, 74, 0.6);
}

.dashboard-notas-botao {
    align-self: flex-start;
    margin-top: 8px;
    padding: 6px 18px;
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    letter-spacing: 0.5px;
    color: #093f2b;
    background: linear-gradient(to bottom, #edfff6 0%, #3fe19e 100%);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 999px;
    box-shadow:
        0 2px 6px rgba(0, 65, 42, 0.25),
        inset 0 1px 1px rgba(255, 255, 255, 0.9);
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}
.dashboard-notas-botao:hover {
    transform: translateY(-1px);
    box-shadow:
        0 4px 10px rgba(0, 65, 42, 0.3),
        inset 0 1px 1px rgba(255, 255, 255, 0.9);
}

/* Banner "Hoje tem aula online" no topo do painel do aluno — só existe
 * nos dias marcados pelo professor. Mesma linguagem de vidro dos painéis,
 * com um toque verde-água pra se destacar sem gritar. */
.dashboard-aula-online {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px 18px;
    margin: 18px auto 0;
    padding: 12px 22px;
    max-width: 560px;
    box-sizing: border-box;
    background: linear-gradient(to bottom, rgba(225, 252, 240, 0.85), rgba(170, 236, 214, 0.55));
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 999px;
    box-shadow:
        0 6px 18px rgba(13, 102, 52, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.dashboard-aula-online-texto {
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: #0b4a3a;
}
.dashboard-aula-online-botao {
    padding: 7px 22px;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.5px;
    text-decoration: none;
    color: #06382b;
    background: linear-gradient(to bottom, #f3fff9 0%, #5fd8ac 100%);
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 999px;
    box-shadow:
        0 2px 6px rgba(0, 81, 35, 0.28),
        inset 0 1px 1px rgba(255, 255, 255, 0.9);
    transition: transform 0.15s, box-shadow 0.15s;
}
.dashboard-aula-online-botao:hover {
    transform: translateY(-1px);
    box-shadow:
        0 4px 10px rgba(0, 81, 35, 0.32),
        inset 0 1px 1px rgba(255, 255, 255, 0.9);
}
/* Texto + horário empilhados, à esquerda do botão "Entrar na aula". */
.dashboard-aula-online-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.dashboard-aula-online-horario {
    font-family: 'Nunito', sans-serif;
    font-weight: 600;
    font-size: 0.98rem;
    color: #0b4a3a;
}

/* Tela do professor: linha "Das [__] às [__]" e botões lado a lado. */
.dashboard-horario {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-family: 'Nunito', sans-serif;
    color: #093f2b;
}
.dashboard-horario-campo {
    min-height: 0;
    resize: none;
    width: auto;
    padding: 4px 8px;
    font-size: 1rem;
}
.dashboard-horario-dica {
    font-size: 0.82rem;
    color: rgba(20, 58, 44, 0.6);
}
.dashboard-horario-situacao {
    display: block;
    margin-top: 8px;
}
.dashboard-botoes-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}
.dashboard-notas-botao-secundario {
    background: linear-gradient(to bottom, #ffffff 0%, #dff0ea 100%);
}

/* Banner com situação de alerta (faltou, remarcada, sem aula): tom âmbar
 * suave em vez do verde de "aula online", sem virar vermelho de erro. */
.dashboard-aula-online-alerta {
    background: linear-gradient(to bottom, rgba(255, 246, 222, 0.88), rgba(255, 224, 160, 0.55));
    box-shadow:
        0 6px 18px rgba(140, 90, 10, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.dashboard-aula-online-alerta .dashboard-aula-online-texto,
.dashboard-aula-online-alerta .dashboard-aula-online-horario {
    color: #5c3d06;
}

.dashboard-aula-online-aviso {
    font-family: 'Nunito', sans-serif;
    font-size: 0.95rem;
    color: #0b4a3a;
}

/* Tela do professor (professor/aluno.php): campo do link do Meet, aviso
 * de salvo/erro e a caixinha "Aula online neste dia". */
.dashboard-notas-campo-link {
    /* Link é texto técnico — fica na fonte de interface (Nunito), que é
     * bem mais legível que a cursiva usada nos campos de anotação. */
    font-family: 'Nunito', sans-serif;
    font-size: 0.95rem;
    min-height: 0;
}
.dashboard-aviso {
    margin: 8px 0 0;
    font-family: 'Nunito', sans-serif;
    font-size: 0.95rem;
}
.dashboard-aviso-ok   { color: #0b5a3c; }
.dashboard-aviso-erro { color: #9a2a1a; }

.dashboard-notas-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    color: #093f2b;
    cursor: pointer;
}
.dashboard-notas-checkbox input {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* .login-link é reaproveitado aqui (ver comentário na definição original,
 * lá em cima) — mas lá o fundo é escuro (quadro-negro) e aqui é claro
 * (vidro), por isso a cor precisa ser sobrescrita. */
.dashboard-link-sala {
    margin-top: 10px;
    color: #0a744a;
}
.dashboard-link-sala:hover {
    color: #065435;
}

/* === CAIXA DE VIDRO (.caixa-conteudo) =======================================
 *
 * Redesenhada a pedido do professor pra ficar bem "Frutiger Aero"
 * (referência: fotos de um "hub" e de um painel estilo GitHub, ambos em
 * vidro claro azul-esverdeado, com brilho no topo). Antes essa caixa era
 * pequena e escura (fundo escuro translúcido, texto claro) — agora ela é
 * GRANDE (deixa só uns 2 a 3cm de margem da borda da tela) e CLARA
 * (vidro branco-azulado, texto escuro). Por isso os textos que moram
 * dentro dela (.pagina-titulo, .dashboard-*, o link "Visitar a sala") têm
 * cor escura sobrescrita mais abaixo — nas outras páginas do site, que
 * usam essas mesmas classes só que fora da caixa e sobre foto escura, a
 * cor clara original continua valendo.
 *
 * NUNCA usar nas telas do quadro (login, cadastro, boas-vindas da sala)
 * — lá o texto continua escrito "direto no quadro-verde", sem caixa (ver
 * comentário acima de .login-titulo).
 *
 * "width: calc(100vw - 5cm)" = ~2.5cm de margem de cada lado, do jeito
 * que foi pedido. Tem um max-width pra não ficar um vidro absurdamente
 * largo em monitores muito grandes. overflow:hidden é só pra conter os
 * dois efeitos decorativos (::before = brilho no topo, ::after = bolha
 * no canto) dentro dos cantos arredondados.
 */
.caixa-conteudo {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: calc(100vw - 5cm);
    max-width: 1300px;
    min-height: calc(100vh - 11cm);
    box-sizing: border-box;
    padding: 48px 56px;
    overflow: hidden;
    text-align: center;

    /* Mais translúcido que antes, pra deixar a foto da salinha aparecer
     * mais por trás do vidro (pedido do professor, 2ª rodada de ajuste). */
    background: linear-gradient(
        160deg,
        rgba(255, 255, 255, 0.28) 0%,
        rgba(183, 249, 223, 0.16) 45%,
        rgba(102, 222, 175, 0.10) 100%
    );
    backdrop-filter: blur(11px);
    -webkit-backdrop-filter: blur(11px);
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 32px;
    box-shadow:
        0 24px 70px rgba(6, 65, 45, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

/* Brilho de vidro no topo — o "sheen" clássico do Frutiger Aero. */
.caixa-conteudo::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 42%);
    z-index: 0;
    pointer-events: none;
}

/* Bolha decorativa no canto inferior direito — bem discreta. */
.caixa-conteudo::after {
    content: '';
    position: absolute;
    width: 260px;
    height: 260px;
    right: -70px;
    bottom: -90px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 70%);
    z-index: 0;
    pointer-events: none;
}

/* Garante que título/painéis/link fiquem por CIMA do brilho e da bolha
 * decorativos acima (que são camadas absolutas dentro da mesma caixa). */
.caixa-conteudo > * {
    position: relative;
    z-index: 1;
}

/* Textos que moram dentro da caixa de vidro clara — cor escura (nas
 * outras páginas, fora da caixa, essas mesmas classes continuam claras,
 * porque lá o fundo é a foto escura direto). */
.caixa-conteudo .pagina-titulo {
    color: #083e2b;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
}
.caixa-conteudo .pagina-subtitulo {
    color: rgba(10, 64, 44, 0.75);
    /* Sobe o subtítulo, deixando ele mais coladinho no título. */
    margin-top: -20px;
}

/* === DASHBOARD DO PROFESSOR (painel.php) =================================
 * Data de hoje, cards de resumo, botão de atalho, caderno de tarefas e
 * resumo de pagamentos. */

.dashboard-data-hoje {
    margin: -6px 0 16px;
    color: rgba(10, 64, 44, 0.7);
    font-family: 'Nunito', sans-serif;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
}

.resumo-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.resumo-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 14px 10px;
    text-align: center;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.55) 0%, rgba(180, 246, 220, 0.35) 100%);
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 16px;
    box-shadow: 0 4px 14px rgba(6, 65, 45, 0.1);
}

.resumo-card-numero {
    font-family: 'Comfortaa', sans-serif;
    font-size: 2rem;
    line-height: 1;
    color: #093f2b;
}

.resumo-card-rotulo {
    font-size: 0.85rem;
    color: rgba(20, 58, 44, 0.75);
}

/* Card de alerta (ex: pagamentos atrasados > 0) — tom âmbar/vermelho
 * suave, só pra chamar mais atenção sem ficar agressivo. */
.resumo-card-alerta {
    background: linear-gradient(to bottom, rgba(255, 240, 220, 0.7) 0%, rgba(255, 210, 190, 0.45) 100%);
}
.resumo-card-alerta .resumo-card-numero { color: #a04a4a; }

/* Botão grande de atalho — "reduzir cliques" é a ideia. */
.botao-atalho {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    font-family: 'Nunito', sans-serif;
    font-size: 1.15rem;
    letter-spacing: 0.5px;
    color: #093f2b;
    background: linear-gradient(to bottom, #edfff6 0%, #3fe19e 100%);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 999px;
    box-shadow: 0 3px 8px rgba(0, 65, 42, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
}
.botao-atalho:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 12px rgba(0, 65, 42, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.9);
}

/* Caderno de tarefas do professor — checklist simples. */
.lista-tarefas {
    list-style: none;
    margin: 0 0 4px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lista-tarefas-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: 8px;
    transition: background 0.2s;
}
.lista-tarefas-item:hover {
    background: rgba(255, 255, 255, 0.35);
}
/* O botão de excluir só aparece quando o mouse passa por perto — no
 * celular (sem hover) ele fica sempre visível, senão não tem como
 * clicar nele. */
.lista-tarefas-item .lista-tarefas-form-excluir {
    margin-left: auto;
    opacity: 0;
    transition: opacity 0.2s;
}
.lista-tarefas-item:hover .lista-tarefas-form-excluir,
.lista-tarefas-item:focus-within .lista-tarefas-form-excluir {
    opacity: 1;
}
@media (max-width: 600px) {
    .lista-tarefas-item .lista-tarefas-form-excluir { opacity: 1; }
}

.lista-tarefas-form-check {
    margin: 0;
    line-height: 1;
}

.lista-tarefas-checkbox {
    background: none;
    border: none;
    padding: 0;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    color: #0a744a;
}

.lista-tarefas-form-excluir {
    margin: 0;
    line-height: 1;
}

.lista-tarefas-excluir {
    background: none;
    border: none;
    padding: 2px 4px;
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    color: rgba(160, 74, 74, 0.7);
    border-radius: 6px;
}
.lista-tarefas-excluir:hover {
    color: #a04a4a;
    background: rgba(255, 210, 210, 0.4);
}

.lista-tarefas-texto {
    font-family: 'Nunito', sans-serif;
    font-size: 1.2rem;
    color: rgba(11, 48, 35, 0.92);
}

.lista-tarefas-texto em {
    font-style: normal;
    color: rgba(20, 58, 44, 0.65);
}

.lista-tarefas-prazo {
    font-size: 0.85rem;
    color: rgba(20, 58, 44, 0.6);
}

/* Tarefa já feita — texto riscado e meio apagado, mas continua legível. */
.lista-tarefas-item.feita .lista-tarefas-texto {
    text-decoration: line-through;
    color: rgba(20, 58, 44, 0.45);
}

/* Status de pagamento — badge coloridinho por status, tanto na lista
 * de alunos (professor/alunos.php) quanto no resumo do dashboard. */
.lista-alunos-pagamento,
.status-pagamento-resumo {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-family: 'Nunito', sans-serif;
    letter-spacing: 0.5px;
}
.lista-alunos-pagamento.pago,      .status-pagamento-resumo.pago      { background: rgba(180, 230, 190, 0.6); color: #2e6b3e; }
.lista-alunos-pagamento.pendente,  .status-pagamento-resumo.pendente  { background: rgba(230, 225, 190, 0.6); color: #7a6a2e; }
.lista-alunos-pagamento.atrasado,  .status-pagamento-resumo.atrasado  { background: rgba(240, 190, 190, 0.6); color: #a04a4a; }

.status-pagamento-resumo {
    margin-right: 10px;
}

/* Botão de trocar o status de pagamento — mesmo pílula dos botões de
 * promover/rebaixar, só que neutra (não é uma ação de risco) e um
 * pouco mais compacta, porque podem aparecer 2 juntos na mesma linha. */
.lista-alunos-acao.pagamento {
    padding: 3px 12px;
    font-size: 0.85rem;
    color: rgba(20, 58, 44, 0.7);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.75) 0%, rgba(235, 235, 235, 0.5) 100%);
}
.lista-alunos-acao.pagamento:hover {
    color: #0a744a;
}

/* === RESPONSIVIDADE ======================================================= */

@media (max-width: 600px) {
    .login-titulo  { font-size: 3.1rem; letter-spacing: 2px; }
    /* Campos um pouco menores no celular: com os rótulos visíveis, o
     * formulário de cadastro (4 campos) ficava mais alto que a parte
     * verde do quadro e o botão/link caíam em cima dos desenhos de giz. */
    .login-input   { width: 220px; font-size: 1.35rem; letter-spacing: 1px; }
    .login-input::placeholder { font-size: 1.2rem; letter-spacing: 1px; }
    .login-label   { font-size: 0.9rem; margin-bottom: -8px; }
    .login-form-compacto .login-label { margin-bottom: 0; }
    .vista-quadro-cadastro .login-titulo { font-size: 2.3rem; }
    .btn-navegar   { opacity: 0.3; width: 50px; }

    /* No celular, 2-3cm de margem de cada lado seria mais da metade da
     * tela — por isso aqui a margem vira bem menor (12px), só padding e
     * borda menores, e os cartões do dashboard empilham em 1 coluna. */
    .caixa-conteudo {
        width: calc(100% - 24px);
        max-width: none;
        min-height: calc(100vh - 24px);
        padding: 26px 20px;
        border-radius: 22px;
    }
    .dashboard-colunas { grid-template-columns: 1fr; }
}

/* === BLOCO DE NOTAS DO PROFESSOR (popup em professor/aluno.php) ===========
 * Botão flutuante "Notas" + janela que sobe por cima da tela (<dialog>).
 * Comportamento em assets/js/notas_aluno.js. Visual: vidro claro, mesma
 * família dos outros botões glossy do site. */

.btn-notas {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 150;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 22px 11px 16px;
    font-family: 'Nunito', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: #093f2b;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
    background: linear-gradient(to bottom, #f7fffb 0%, #a0f7d2 46%, #21dc8f 54%, #6df1b9 100%);
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 999px;
    box-shadow:
        0 4px 12px rgba(0, 65, 42, 0.35),
        inset 0 1px 1px rgba(255, 255, 255, 0.95),
        inset 0 -2px 4px rgba(0, 118, 72, 0.25);
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}
/* Ícone de bloquinho com lápis, desenhado como máscara (herda a cor do texto). */
.btn-notas::before {
    content: "";
    width: 17px;
    height: 17px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16z'/%3E%3Cpath d='M13.5 6.5l4 4'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16z'/%3E%3Cpath d='M13.5 6.5l4 4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.btn-notas:hover {
    transform: translateY(-2px);
    box-shadow:
        0 7px 16px rgba(0, 65, 42, 0.38),
        inset 0 1px 1px rgba(255, 255, 255, 0.95),
        inset 0 -2px 4px rgba(0, 118, 72, 0.25);
}
.btn-notas:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; }

/* A janela. O <dialog> em si só dá o tamanho e a sombra; o conteúdo mora
 * dentro de .notas-janela (assim clicar no fundo escurecido é fácil de
 * distinguir de clicar na janela). */
.notas-dialog {
    /* O reset global do site zera as margens; sem "margin: auto" o popup
     * ficaria colado no canto superior esquerdo em vez de centralizado. */
    inset: 0;
    margin: auto;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    width: min(780px, 94vw);
    height: min(82vh, 760px);
    max-width: none;
    max-height: none;
    background: linear-gradient(to bottom, rgba(248, 255, 252, 0.98) 0%, rgba(216, 247, 236, 0.98) 100%);
    box-shadow: 0 18px 50px rgba(0, 43, 28, 0.45), inset 0 1px 1px rgba(255, 255, 255, 1);
    color: #0c3325;
    overflow: hidden;
}
.notas-dialog[open] {
    display: flex;
    animation: notas-sobe 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.notas-dialog::backdrop {
    background: rgba(7, 43, 30, 0.5);
    backdrop-filter: blur(3px);
}
.notas-dialog[open]::backdrop { animation: notas-fundo 0.3s ease-out; }

@keyframes notas-sobe {
    from { opacity: 0; transform: translateY(48px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes notas-fundo {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .notas-dialog[open], .notas-dialog[open]::backdrop { animation: none; }
}

.notas-janela {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 0;
    font-family: 'Nunito', sans-serif;
}

.notas-cabecalho {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px 6px;
}
.notas-titulo {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-family: 'Comfortaa', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: #093f2b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.notas-status {
    flex: 0 0 auto;
    font-size: 0.82rem;
    color: rgba(20, 58, 44, 0.65);
    text-align: right;
}
.notas-status.ok       { color: #1f7a5a; }
.notas-status.pendente { color: #8a6a10; }
.notas-status.erro     { color: #b23a2a; font-weight: 700; }

.notas-fechar {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    font-size: 1rem;
    line-height: 1;
    color: #093f2b;
    background: linear-gradient(to bottom, #ffffff 0%, #c5f4e1 100%);
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 65, 42, 0.25), inset 0 1px 1px #ffffff;
    cursor: pointer;
}
.notas-fechar:hover { color: #6b1d10; background: linear-gradient(to bottom, #fff7f3 0%, #ffb5a0 100%); }
.notas-fechar:focus-visible { outline: 3px solid #28c284; outline-offset: 2px; }

.notas-privado {
    margin: 0;
    padding: 0 16px 8px;
    font-size: 0.82rem;
    color: rgba(20, 58, 44, 0.7);
}

/* Barra de ferramentas: os grupos quebram de linha quando falta espaço. */
.notas-barra {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.65);
    border-top: 1px solid rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid rgba(10, 96, 63, 0.12);
}
.notas-grupo {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}
.notas-barra button,
.notas-barra select {
    font-family: 'Nunito', sans-serif;
    font-size: 0.9rem;
    color: #093f2b;
    min-height: 32px;
    padding: 3px 10px;
    background: linear-gradient(to bottom, #ffffff 0%, #cff5e6 100%);
    border: 1px solid rgba(10, 116, 74, 0.25);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 65, 42, 0.15), inset 0 1px 1px #ffffff;
    cursor: pointer;
}
.notas-barra button:hover,
.notas-barra select:hover { background: linear-gradient(to bottom, #ffffff 0%, #abf1d5 100%); }
.notas-barra button:focus-visible,
.notas-barra select:focus-visible { outline: 2px solid #28c284; outline-offset: 1px; }
.notas-barra button.ativo {
    background: linear-gradient(to bottom, #6df1b9 0%, #25cf8a 100%);
    border-color: rgba(10, 116, 74, 0.6);
    box-shadow: inset 0 1px 3px rgba(0, 65, 42, 0.35);
}
.notas-b { font-weight: 800; }
.notas-i { font-style: italic; }
.notas-u { text-decoration: underline; }
.notas-barra .notas-cor {
    width: 26px;
    min-width: 26px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(10, 64, 44, 0.3);
}
.notas-barra .notas-cor-nenhuma {
    background: #ffffff;
    font-size: 0.8rem;
    line-height: 1;
    color: rgba(11, 48, 35, 0.7);
}

/* O papel onde se escreve. */
.notas-editor {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    margin: 0;
    padding: 16px 20px 24px;
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    line-height: 1.55;
    color: #0c3325;
    background: rgba(255, 255, 255, 0.85);
    outline: none;
    word-wrap: break-word;
}
.notas-editor:empty::before {
    content: attr(data-placeholder);
    color: rgba(11, 48, 35, 0.45);
    pointer-events: none;
}
.notas-editor[contenteditable="false"] { background: rgba(240, 240, 240, 0.85); }
.notas-editor h3 {
    margin: 0.9em 0 0.25em;
    font-family: 'Comfortaa', sans-serif;
    font-size: 1.12rem;
    color: #08613f;
    border-bottom: 1px solid rgba(10, 116, 74, 0.25);
    padding-bottom: 2px;
}
.notas-editor h3:first-child { margin-top: 0; }
.notas-editor ul,
.notas-editor ol { margin: 0.3em 0; padding-left: 1.6em; }
.notas-editor li { margin: 0.12em 0; }

/* Tamanhos da letra (o navegador grava <font size="N">; o PHP mantém). */
.notas-editor font[size="1"] { font-size: 0.7em; }
.notas-editor font[size="2"] { font-size: 0.85em; }
.notas-editor font[size="3"] { font-size: 1em; }
.notas-editor font[size="4"] { font-size: 1.15em; }
.notas-editor font[size="5"] { font-size: 1.4em; }
.notas-editor font[size="6"] { font-size: 1.8em; }
.notas-editor font[size="7"] { font-size: 2.3em; }

/* Checklist: quadradinho desenhado à esquerda de cada item; clicar nele
 * marca/desmarca (data-feito="1" = feito). */
.notas-editor ul.checklist {
    list-style: none;
    padding-left: 0;
}
.notas-editor ul.checklist li {
    position: relative;
    padding-left: 1.9em;
}
.notas-editor ul.checklist li::before {
    content: "";
    position: absolute;
    left: 0.25em;
    top: 0.3em;
    width: 1.05em;
    height: 1.05em;
    box-sizing: border-box;
    border: 2px solid #28c284;
    border-radius: 4px;
    background: #ffffff;
    cursor: pointer;
}
.notas-editor ul.checklist li[data-feito="1"]::before {
    background: #28c284 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 80% no-repeat;
}
.notas-editor ul.checklist li[data-feito="1"] {
    color: rgba(11, 48, 35, 0.5);
    text-decoration: line-through;
}

/* Cópia escondida usada só para "Copiar texto" (fora da tela). */
.notas-copia {
    position: absolute;
    left: -9999px;
    top: 0;
    width: 600px;
    white-space: pre-wrap;
}
.notas-copia ul,
.notas-copia ol { list-style: none; padding: 0; }

/* Celular: a janela vira uma "folha" que sobe da base da tela. */
@media (max-width: 600px) {
    .btn-notas { right: 12px; bottom: 12px; padding: 10px 18px 10px 14px; }
    .notas-dialog {
        width: 100vw;
        height: 92vh;
        margin: auto 0 0;
        border-radius: 20px 20px 0 0;
    }
    .notas-titulo { font-size: 1.05rem; }
    .notas-status { order: 3; flex: 1 0 100%; text-align: left; }
    .notas-cabecalho { flex-wrap: wrap; }
    .notas-cabecalho { padding: 12px 12px 4px; }
    .notas-privado { padding: 0 12px 6px; }
    .notas-barra { padding: 6px 10px; }
    .notas-editor { padding: 14px 14px 22px; }
}

/* ---------- Popup do DIÁRIO do dia (professor/aluno.php) ----------
 * Reaproveita a janela do bloco de notas (.notas-*). Aqui só muda o miolo:
 * o corpo rola, o rodapé com Cancelar/Salvar fica sempre visível. */
.diario-dialog {
    /* altura conforme o conteúdo, até 90% da tela */
    height: auto;
    max-height: 90vh;
}
.diario-dialog .notas-janela { max-height: 90vh; }

.diario-form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
.diario-corpo {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 4px 18px 16px;
    display: flex;
    flex-direction: column;
}
.diario-rodape {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-top: 1px solid rgba(66, 147, 118, 0.28);
    background: rgba(216, 247, 236, 0.98);
}
.diario-rodape .notas-status { flex: 1 1 auto; text-align: left; }
.diario-rodape .dashboard-notas-botao { margin-top: 0; width: auto; }

@media (max-width: 600px) {
    .diario-dialog { height: auto; max-height: 94vh; }
    .diario-dialog .notas-janela { max-height: 94vh; }
    .diario-corpo { padding: 4px 14px 14px; }
    .diario-rodape { flex-wrap: wrap; padding: 10px 12px; }
    .diario-rodape .notas-status { flex: 1 0 100%; order: -1; }
    .diario-rodape .dashboard-notas-botao { flex: 1 1 0; }
}

/* ---------- "Seus números" (indicadores no painel do aluno) ----------
 * Duas fileiras de cartõezinhos: ano letivo e mês aberto no calendário.
 * Fica abaixo das colunas, para a lista da semana continuar visível sem
 * rolar a página. Cada número vem com nome escrito (não depende de cor). */
.dashboard-painel-numeros { margin-top: 26px; }
.numeros-grupos {
    display: grid;
    gap: 16px;
}
.numeros-grupo-titulo {
    margin: 0 0 8px;
    font-family: 'Nunito', sans-serif;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: rgba(9, 63, 43, 0.75);
}
.numeros-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}
.numeros-tile {
    display: flex;
    flex-direction: column-reverse; /* número em cima, nome embaixo */
    justify-content: flex-end;
    gap: 2px;
    padding: 10px 12px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.75) 0%, rgba(195, 248, 227, 0.55) 100%);
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 14px;
    box-shadow: 0 3px 10px rgba(10, 86, 58, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.numeros-tile dt {
    font-family: 'Nunito', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: rgba(20, 58, 44, 0.85);
}
.numeros-tile dd {
    margin: 0;
    font-family: 'Comfortaa', sans-serif;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.1;
    color: #093f2b;
}
@media (max-width: 600px) {
    .numeros-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Questões da lista (professor/questoes.php) ---------- */
.tabela-questoes-rolagem { overflow-x: auto; }
.tabela-questoes {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Nunito', sans-serif;
    font-size: 0.95rem;
    color: rgba(11, 48, 35, 0.92);
}
.tabela-questoes th,
.tabela-questoes td {
    padding: 6px 10px;
    text-align: left;
    border-bottom: 1px solid rgba(66, 147, 118, 0.25);
}
.tabela-questoes td:first-child,
.tabela-questoes td:nth-child(2),
.tabela-questoes td:last-child { white-space: nowrap; }
/* Nesta tela a tabela é a estrela: coluna da esquerda mais larga. */
.dashboard-colunas-questoes { grid-template-columns: minmax(300px, 1.7fr) minmax(280px, 1fr); }
@media (max-width: 800px) {
    .dashboard-colunas-questoes { grid-template-columns: 1fr; }
}
.tabela-questoes th {
    font-weight: 800;
    color: #093f2b;
    border-bottom: 2px solid rgba(66, 147, 118, 0.4);
}
.tabela-questoes code {
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 0.9em;
    background: rgba(255, 255, 255, 0.6);
    padding: 1px 6px;
    border-radius: 6px;
}
.importacao-aviso {
    margin: 0 0 12px;
    padding: 10px 14px;
    border-radius: 12px;
    font-family: 'Nunito', sans-serif;
    font-size: 0.95rem;
    border: 1px solid transparent;
}
.importacao-aviso p { margin: 0; }
.importacao-aviso ul { margin: 6px 0 0; padding-left: 20px; }
.importacao-aviso-ok   { background: rgba(214, 245, 228, 0.75); border-color: rgba(11, 90, 60, 0.35); color: #0b5a3c; }
.importacao-aviso-erro { background: rgba(255, 228, 220, 0.8);  border-color: rgba(154, 42, 26, 0.35); color: #9a2a1a; }

/* ---------- Registro de resultado por questão (aluno/lista_resultado.php) ---------- */
.somente-leitor {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.resultado-listas {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin: 10px 0 4px;
}
.resultado-lista-pilula {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    font-family: 'Nunito', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: #093f2b;
    text-decoration: none;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 0%, rgba(176, 244, 217, 0.6) 100%);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 6px rgba(10, 86, 58, 0.15);
}
.resultado-lista-pilula.ativa {
    background: linear-gradient(to bottom, #edfff6 0%, #3fe19e 100%);
    box-shadow: 0 3px 8px rgba(0, 65, 42, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.9);
}
.resultado-lista-pilula:focus-visible { outline: 3px solid #0a744a; outline-offset: 2px; }
.resultado-lista-contagem {
    font-size: 0.8rem;
    font-weight: 800;
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(9, 63, 43, 0.12);
}
.resultado-painel { margin-top: 18px; }

.questoes-lista {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    margin-top: 18px;
    text-align: left;
}
.questao-card {
    padding: 14px 16px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.72) 0%, rgba(195, 248, 227, 0.5) 100%);
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-left: 6px solid rgba(66, 147, 118, 0.35);
    border-radius: 16px;
    box-shadow: 0 4px 14px rgba(10, 86, 58, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.questao-card--acertou  { border-left-color: #2a78d6; }
.questao-card--errou    { border-left-color: #eb6834; }
.questao-card--em_branco { border-left-color: #4a3aa7; }

.questao-cabecalho {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.questao-numero {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 6px;
    box-sizing: border-box;
    border-radius: 50%;
    font-family: 'Comfortaa', sans-serif;
    font-weight: 700;
    color: #093f2b;
    background: linear-gradient(to bottom, #edfff6 0%, #3fe19e 100%);
    box-shadow: 0 2px 6px rgba(0, 65, 42, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.9);
}
.questao-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    font-family: 'Nunito', sans-serif;
    color: #093f2b;
}
.questao-topico { font-size: 0.9rem; color: rgba(20, 58, 44, 0.8); }
.questao-dificuldade {
    flex: 0 0 auto;
    font-family: 'Nunito', sans-serif;
    font-size: 0.8rem;
    font-weight: 800;
    padding: 2px 10px;
    border-radius: 999px;
    color: #093f2b;
    background: rgba(9, 63, 43, 0.1);
}

.questao-opcoes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}
.questao-opcao { position: relative; display: block; cursor: pointer; }
.questao-opcao input {
    position: absolute;
    opacity: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}
.questao-opcao > span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px; /* alvo de toque confortável no celular */
    padding: 6px 10px;
    box-sizing: border-box;
    text-align: center;
    font-family: 'Nunito', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: #093f2b;
    background: rgba(255, 255, 255, 0.65);
    border: 2px solid rgba(66, 147, 118, 0.35);
    border-radius: 12px;
    transition: background 0.15s, border-color 0.15s;
}
.questao-opcao:hover > span { background: rgba(255, 255, 255, 0.95); }
.questao-opcao input:focus-visible + span { outline: 3px solid #0a744a; outline-offset: 2px; }
.questao-opcao input:checked + span { border-width: 3px; font-weight: 800; }
.questao-opcao-acertou   input:checked + span { background: #d9e8fb; border-color: #2a78d6; }
.questao-opcao-errou     input:checked + span { background: #fde4d9; border-color: #eb6834; }
.questao-opcao-em_branco input:checked + span { background: #e6e2f7; border-color: #4a3aa7; }

.questao-motivo { margin-top: 12px; }
.questao-motivo select { width: 100%; max-width: 420px; box-sizing: border-box; }
.questao-motivo[hidden] { display: none; }
.questao-dica {
    margin: 6px 0 0;
    min-height: 1.2em;
    font-family: 'Nunito', sans-serif;
    font-size: 0.9rem;
    font-style: italic;
    color: rgba(20, 58, 44, 0.85);
}
.questao-rodape {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 24px;
    margin-top: 8px;
}
.questao-limpar {
    padding: 0;
    border: 0;
    background: none;
    font-family: 'Nunito', sans-serif;
    font-size: 0.85rem;
    color: #0a744a;
    text-decoration: underline;
    cursor: pointer;
}
.questao-limpar[hidden] { display: none; }
.questao-status {
    margin-left: auto;
    font-family: 'Nunito', sans-serif;
    font-size: 0.85rem;
    color: #0b5a3c;
}
.questao-status-erro { color: #9a2a1a; font-weight: 800; }

@media (max-width: 600px) {
    .questao-opcoes { grid-template-columns: 1fr; }
    .questao-opcao > span { justify-content: flex-start; padding-left: 14px; }
}

/* ---------- Painel de desempenho (includes/desempenho_view.php) ----------
 * Cores dos resultados: azul = acertei, laranja = errei, violeta = não fiz.
 * Foram escolhidas para continuarem distintas para quem tem daltonismo
 * (verde x vermelho se confundem) e, de qualquer forma, cada resultado
 * aparece SEMPRE com ícone e nome escritos — a cor nunca é a única pista. */
.dv {
    --dv-acerto: #2a78d6;
    --dv-erro: #eb6834;
    --dv-branco: #4a3aa7;
    --dv-pendente: rgba(9, 63, 43, 0.14);
    --dv-serie: #2a78d6;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    margin-top: 18px;
    text-align: left;
}
.dv-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    margin-bottom: 14px;
}
.dv-hero-bloco { display: flex; flex-direction: column; }
.dv-hero-numero {
    font-family: 'Comfortaa', sans-serif;
    font-size: 3.6rem; /* número de destaque: bem maior que o resto */
    font-weight: 700;
    line-height: 1;
    color: #093f2b;
}
.dv-hero-legenda { font-family: 'Nunito', sans-serif; font-size: 1rem; font-weight: 700; color: rgba(20, 58, 44, 0.85); }
.dv-hero-texto {
    flex: 1 1 240px;
    margin: 0;
    font-family: 'Nunito', sans-serif;
    font-size: 1.1rem;
    line-height: 1.45;
    color: rgba(11, 48, 35, 0.92);
}
.dv-subtitulo {
    margin: 0 0 12px;
    font-family: 'Nunito', sans-serif;
    font-size: 0.9rem;
    color: rgba(20, 58, 44, 0.8);
}
.dv-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
    font-family: 'Nunito', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: rgba(11, 48, 35, 0.92);
}
.dv-legenda li { display: inline-flex; align-items: center; gap: 6px; }
.dv-chave { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }

.dv-acerto   { background: var(--dv-acerto); }
.dv-erro     { background: var(--dv-erro); }
.dv-branco   { background: var(--dv-branco); }
.dv-pendente { background: var(--dv-pendente); }

.dv-barras { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.dv-linha {
    display: grid;
    grid-template-columns: minmax(120px, 32%) minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 7px 8px;
    border-radius: 10px;
    cursor: default;
}
.dv-linha:hover { background: rgba(255, 255, 255, 0.5); }
.dv-linha:focus-visible { outline: 3px solid #0a744a; outline-offset: 1px; }
.dv-rotulo {
    font-family: 'Nunito', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.25;
    color: #093f2b;
    overflow-wrap: anywhere;
}
.dv-valor {
    font-family: 'Nunito', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    white-space: nowrap;
    color: rgba(11, 48, 35, 0.92);
}
.dv-poucas { font-weight: 400; color: rgba(20, 58, 44, 0.75); }

/* Barra empilhada: segmentos separados por 2px de "ar", ponta direita arredondada. */
.dv-trilha {
    display: flex;
    gap: 2px;
    height: 16px;
    min-width: 0;
    overflow: hidden;
    border-radius: 0 4px 4px 0;
}
.dv-seg { display: block; height: 100%; min-width: 2px; }
/* Barra simples: preenchimento sobre uma trilha bem clara. */
.dv-trilha-fina { display: block; height: 12px; background: rgba(9, 63, 43, 0.08); }
.dv-preenche { display: block; height: 100%; min-width: 2px; background: var(--dv-serie); border-radius: 0 4px 4px 0; }
.dv-preenche-neutro { background: #898781; }
/* Barras de motivo de erro usam a cor do "errei". */
.dv-motivos .dv-preenche { background: var(--dv-erro); }
.dv-motivos .dv-preenche-neutro { background: #898781; }

.dv-tabela { margin-top: 12px; }
.dv-tabela summary {
    cursor: pointer;
    font-family: 'Nunito', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: #0a744a;
}
.dv-tabela summary:focus-visible { outline: 3px solid #0a744a; outline-offset: 2px; }
.dv-tabela .tabela-questoes-rolagem { margin-top: 8px; }
.tabela-questoes td.dv-quebra { white-space: normal; min-width: 120px; }

/* Caixinha que aparece ao passar o mouse (assets/js/desempenho.js). */
.dv-dica {
    position: fixed;
    z-index: 10000;
    padding: 8px 12px;
    border-radius: 10px;
    font-family: 'Nunito', sans-serif;
    font-size: 0.85rem;
    line-height: 1.35;
    color: #ffffff;
    background: rgba(9, 43, 31, 0.96);
    box-shadow: 0 6px 18px rgba(0, 33, 21, 0.35);
    pointer-events: none;
}
.dv-dica[hidden] { display: none; }

@media (max-width: 600px) {
    /* No celular cada linha vira uma pilha: nome, barra (largura toda), valor. */
    .dv-linha { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
    .dv-hero-numero { font-size: 3.2rem; }
}

/* === BOTÕES "VOLTAR" E RESPIRO DAS PÁGINAS DE DESEMPENHO (2026-09-20) ======
 * Pedido do professor: (1) os botões "voltar" estavam pequenos demais —
 * agora têm um destaque sutil de "pílula de vidro" e área de toque de
 * pelo menos 44px; (2) as páginas de registro/desempenho estavam com
 * textos e elementos muito juntos — a classe .pagina-respiro (posta na
 * .caixa-conteudo dessas páginas) abre espaço sem mexer no resto do site. */

/* -- Voltar dentro da caixa de vidro clara (todas as páginas que têm o
 *    link "‹ Voltar ..." como primeiro item da caixa). -- */
.caixa-conteudo > a.dashboard-painel-link-inline:first-child {
    display: inline-flex;
    align-self: flex-start;   /* a .caixa-conteudo estica os filhos; assim o botão fica do tamanho do texto */
    width: fit-content;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    box-sizing: border-box;
    padding: 8px 20px;
    margin-bottom: 26px;
    font-family: 'Nunito', sans-serif;
    font-size: 1.1rem;
    font-weight: 800;
    color: #093f2b;
    text-decoration: none;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.85) 0%, rgba(176, 244, 217, 0.6) 100%);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 999px;
    box-shadow: 0 3px 10px rgba(10, 86, 58, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}
.caixa-conteudo > a.dashboard-painel-link-inline:first-child:hover {
    color: #065435;
    background: linear-gradient(to bottom, #ffffff 0%, #96efcb 100%);
    box-shadow: 0 5px 14px rgba(10, 86, 58, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transform: translateY(-1px);
}
.caixa-conteudo > a.dashboard-painel-link-inline:first-child:focus-visible {
    outline: 3px solid #0a744a;
    outline-offset: 3px;
}

/* -- Voltar nas páginas escuras (quadro-negro): "← Voltar para a sala" e
 *    "← Voltar para o dashboard". Mesma ideia, em vidro claro sobre o escuro. -- */
.btn-voltar-sala,
.login-link.login-link-voltar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    box-sizing: border-box;
    padding: 8px 20px;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-decoration: none;
    color: #fbf8e6;
    background: rgba(9, 45, 31, 0.62);   /* escuro translúcido: lê bem tanto sobre foto clara quanto sobre o quadro */
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 999px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.btn-voltar-sala:hover,
.login-link.login-link-voltar:hover {
    color: #ffffff;
    background: rgba(9, 45, 31, 0.8);
    border-color: rgba(255, 255, 255, 0.65);
}
.btn-voltar-sala:focus-visible,
.login-link.login-link-voltar:focus-visible {
    outline: 3px solid rgba(255, 255, 220, 0.9);
    outline-offset: 3px;
}

/* -- Respiro: título e subtítulo -- */
.caixa-conteudo.pagina-respiro .pagina-titulo {
    line-height: 1.2;
    margin-bottom: 10px;
}
.caixa-conteudo.pagina-respiro .pagina-subtitulo {
    margin-top: 0;
    margin-bottom: 28px;
    line-height: 1.5;
    text-align: center;
}

/* -- Respiro: painéis de vidro -- */
.pagina-respiro .dashboard-painel {
    padding: 28px 30px;
}
.pagina-respiro .dashboard-painel-titulo {
    margin-bottom: 18px;
}
.pagina-respiro .dashboard-painel-corpo {
    line-height: 1.65;
    margin-bottom: 14px;
}
.pagina-respiro .dashboard-painel-detalhe {
    font-size: 1.05rem;
}
.pagina-respiro .dashboard-calendario-legenda {
    line-height: 1.6;
    margin-top: 18px;
}
.pagina-respiro .dashboard-colunas {
    gap: 28px;
}

/* -- Respiro: números (cartõezinhos) -- */
.pagina-respiro .numeros-tiles,
.dashboard-painel-numeros .numeros-tiles {
    gap: 16px;
}
.pagina-respiro .numeros-tile,
.dashboard-painel-numeros .numeros-tile {
    gap: 6px;
    padding: 16px 18px;
}
.dashboard-painel-numeros .numeros-grupos { gap: 26px; }
.dashboard-painel-numeros .numeros-grupo-titulo { margin-bottom: 12px; }

/* -- Respiro: escolha da lista e cartões de questão -- */
.pagina-respiro .resultado-listas {
    gap: 12px;
    margin: 4px 0 26px;
}
.pagina-respiro .resultado-lista-pilula {
    padding: 10px 18px;
}
.pagina-respiro .resultado-painel {
    margin-top: 0;
}
.pagina-respiro .questoes-lista {
    gap: 22px;
    margin-top: 28px;
}
.pagina-respiro .questao-card {
    padding: 22px 24px;
}
.pagina-respiro .questao-cabecalho {
    gap: 14px;
    margin-bottom: 18px;
}
.pagina-respiro .questao-info { gap: 3px; }
.pagina-respiro .questao-opcoes { gap: 14px; }
.pagina-respiro .questao-motivo { margin-top: 20px; }
.pagina-respiro .questao-motivo .dashboard-notas-rotulo {
    display: block;
    margin-bottom: 8px;
}
.pagina-respiro .questao-dica {
    margin-top: 10px;
    line-height: 1.5;
}
.pagina-respiro .questao-rodape {
    margin-top: 16px;
}

/* -- Respiro: desempenho (gráficos) -- */
.pagina-respiro .dv {
    gap: 32px;
}
.pagina-respiro .dv-hero {
    gap: 12px 26px;
    margin-bottom: 26px;
}
.pagina-respiro .dv-hero-texto { line-height: 1.6; }
.pagina-respiro .dv-subtitulo {
    margin-bottom: 18px;
    line-height: 1.5;
}
.pagina-respiro .dv-legenda {
    gap: 8px 20px;
    margin-bottom: 20px;
}
.pagina-respiro .dv-barras { gap: 12px; }
.pagina-respiro .dv-linha {
    padding: 10px 14px;
    gap: 16px;
}
.pagina-respiro .dv-tabela { margin-top: 22px; }
.pagina-respiro .dv-tabela summary {
    padding: 10px 0;
}

/* -- Respiro: tabela e formulário de importação do professor -- */
.pagina-respiro .tabela-questoes th,
.pagina-respiro .tabela-questoes td {
    padding: 11px 14px;
}
.pagina-respiro .importacao-aviso {
    margin-bottom: 18px;
    padding: 14px 16px;
}
.pagina-respiro .dashboard-notas-rotulo {
    display: block;
    margin: 18px 0 8px;
}

@media (max-width: 600px) {
    .pagina-respiro .dashboard-painel { padding: 20px 18px; }
    .pagina-respiro .questao-card { padding: 18px 16px; }
    .pagina-respiro .questao-opcoes { gap: 10px; }
    .pagina-respiro .questoes-lista { gap: 18px; }
    .pagina-respiro .numeros-tiles,
    .dashboard-painel-numeros .numeros-tiles { gap: 12px; }
    .pagina-respiro .numeros-tile,
    .dashboard-painel-numeros .numeros-tile { padding: 14px 14px; }
    .pagina-respiro .dv-linha { padding: 10px 8px; }
    .btn-voltar-sala { top: 14px; left: 14px; }
}

/* Links empilhados no painel (ex.: "Baixar lista" / "Registrar como foi"):
 * um respiro entre eles, para não parecerem uma linha só quebrada. */
.dashboard-painel .dashboard-painel-link + .dashboard-painel-link {
    margin-top: 14px;
}

/* === MINHAS LISTAS, REGISTRO SIMPLES E RECADO (2026-09-20) =================
 * Central "Minhas listas" do aluno (aluno/minhas_listas.php) e a caixa de
 * recado para o professor (aluno/dashboard.php). Mesma linguagem de vidro
 * das outras telas; estados sempre com ícone + texto (nunca só cor). */

/* Atalhos dentro do painel "Lista da semana" (ficam visíveis sem rolar). */
.dashboard-acoes-semana {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}
.dashboard-acoes-semana .botao-atalho {
    padding: 8px 14px;
    font-size: 0.95rem;
    letter-spacing: 0;
    min-height: 44px;
    box-sizing: border-box;
}
.botao-atalho-suave {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.85) 0%, rgba(176, 244, 217, 0.6) 100%);
    box-shadow: 0 2px 6px rgba(10, 86, 58, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.botao-atalho:focus-visible { outline: 3px solid #0a744a; outline-offset: 3px; }

/* Números do topo com 3 cartões. */
.numeros-tiles.numeros-tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 600px) {
    .numeros-tiles.numeros-tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .numeros-tiles.numeros-tiles-3 .numeros-tile { padding: 12px 10px; }
    .numeros-tiles.numeros-tiles-3 dd { font-size: 1.5rem; }
}

/* --- Cartões das listas --- */
.lista-cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    margin-top: 28px;
    text-align: left;
}
.lista-card {
    padding: 22px 24px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.72) 0%, rgba(195, 248, 227, 0.5) 100%);
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 16px;
    box-shadow: 0 6px 16px rgba(10, 86, 58, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    scroll-margin-top: 20px;
}
.lista-card:target { outline: 3px solid rgba(10, 116, 74, 0.55); outline-offset: 3px; }
.lista-card-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin-bottom: 10px;
}
.lista-card-nome {
    margin: 0;
    font-family: 'Comfortaa', sans-serif;
    font-size: 1.25rem;
    letter-spacing: 0.5px;
    color: #093f2b;
    overflow-wrap: anywhere;
}
.lista-selo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    border: 2px solid transparent;
    font-family: 'Nunito', sans-serif;
    font-size: 0.9rem;
    font-weight: 800;
    color: #093f2b;
    white-space: nowrap;
}
.lista-selo-completo     { background: #d9e8fb; border-color: #2a78d6; }
.lista-selo-em_andamento { background: #e6e2f7; border-color: #4a3aa7; }
.lista-selo-sem_registro { background: rgba(9, 63, 43, 0.08); border-color: rgba(9, 63, 43, 0.35); }
.lista-selo-nao_fez      { background: #fde4d9; border-color: #eb6834; }
.lista-card-meta {
    margin: 0 0 12px;
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(11, 48, 35, 0.92);
}
.lista-etiqueta {
    display: inline-block;
    margin-right: 6px;
    padding: 1px 10px;
    border-radius: 999px;
    font-size: 0.85rem;
    background: linear-gradient(to bottom, #edfff6 0%, #3fe19e 100%);
    color: #093f2b;
}
.lista-card-resumo {
    margin: 0 0 14px;
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: rgba(20, 58, 44, 0.9);
}
.lista-progresso {
    height: 12px;
    margin: 0 0 16px;
    border-radius: 0 6px 6px 0;
    background: rgba(9, 63, 43, 0.1);
    overflow: hidden;
}
.lista-progresso > span {
    display: block;
    height: 100%;
    min-width: 2px;
    background: #2a78d6;
    border-radius: 0 4px 4px 0;
}
.lista-card-botao { min-height: 44px; box-sizing: border-box; }

/* --- Registro simples (formulário dentro do cartão) --- */
.registro-form { margin: 0; }
.registro-situacao {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    margin: 0 0 4px;
    padding: 0;
    border: 0;
    min-width: 0;
}
.registro-situacao legend {
    width: 100%;
    padding: 0;
    margin-bottom: 8px;
}
.registro-opcao { position: relative; cursor: pointer; }
.registro-opcao input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}
.registro-opcao > span {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    box-sizing: border-box;
    padding: 8px 18px;
    border-radius: 999px;
    border: 2px solid rgba(9, 63, 43, 0.28);
    background: rgba(255, 255, 255, 0.8);
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #093f2b;
    transition: background 0.2s, border-color 0.2s;
}
.registro-opcao:hover > span { background: #ffffff; }
.registro-opcao input:focus-visible + span { outline: 3px solid #0a744a; outline-offset: 2px; }
.registro-opcao input:checked + span {
    border-color: #2a78d6;
    background: #d9e8fb;
    font-weight: 800;
}
.registro-opcao input:checked + span::before { content: "\2713\00a0"; }
.registro-detalhes { margin-top: 16px; }
.registro-detalhes[hidden] { display: none; }
.registro-numeros {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 4px;
}
.registro-campo { min-width: 0; }
.registro-campo .dashboard-notas-rotulo { display: block; margin: 0 0 8px; }
.registro-campo .dashboard-notas-campo { width: 100%; box-sizing: border-box; min-height: 44px; }
.registro-campo + .registro-campo { margin-top: 0; }
.registro-detalhes > .registro-campo { margin-top: 14px; }
.registro-dica { font-weight: 400; font-size: 0.85rem; color: rgba(20, 58, 44, 0.8); }
.registro-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    margin-top: 18px;
}
.registro-acoes .questao-status { margin-left: 0; }
@media (max-width: 600px) {
    .lista-card { padding: 18px 16px; }
    .registro-numeros { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .registro-opcao > span { padding: 8px 14px; }
}

/* --- Recado para o professor (dashboard) --- */
.dashboard-painel-recado { margin-top: 26px; }
.dashboard-painel-recado .dashboard-notas-campo { width: 100%; box-sizing: border-box; margin-top: 8px; }
.recado-rodape {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin-top: 12px;
}
.recado-contador { font-family: 'Nunito', sans-serif; font-size: 0.85rem; color: rgba(20, 58, 44, 0.75); }
.recado-rodape .questao-status { margin-left: 0; }
.recado-titulo-lista { margin: 24px 0 10px; }
.recado-lista {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.recado-lista[hidden] { display: none; }
.recado-item {
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-left: 5px solid rgba(66, 147, 118, 0.5);
    border-radius: 12px;
}
.recado-item-texto {
    margin: 0 0 6px;
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    line-height: 1.55;
    color: rgba(11, 48, 35, 0.95);
    overflow-wrap: anywhere;
}
.recado-item-meta { font-family: 'Nunito', sans-serif; font-size: 0.85rem; color: rgba(20, 58, 44, 0.8); }
.dashboard-vazio[hidden] { display: none; }

/* --- Visão do professor: novidades na Mesa e quadros na ficha do aluno --- */
.painel-novidades { margin-bottom: 26px; scroll-margin-top: 20px; }
.novidades-colunas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}
.novidades-colunas .numeros-grupo-titulo { margin-bottom: 12px; }
@media (max-width: 800px) {
    .novidades-colunas { grid-template-columns: minmax(0, 1fr); }
}
.recado-form-lido { margin: 12px 0 0; }
.dashboard-colunas-ficha { margin-top: 26px; }
.dashboard-colunas-ficha .dashboard-coluna-esquerda,
.dashboard-colunas-ficha .dashboard-coluna-direita { scroll-margin-top: 20px; }
.ficha-listas {
    display: grid;
    gap: 14px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}
.ficha-lista-item {
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 12px;
}
.ficha-lista-item .lista-card-topo { margin-bottom: 6px; }
.ficha-lista-item .lista-card-resumo { margin: 0; }
.ficha-lista-nome {
    font-family: 'Nunito', sans-serif;
    font-size: 1.05rem;
    color: #093f2b;
    overflow-wrap: anywhere;
}

/* === DESEMPENHO 2.0: FILTRO, EVOLUÇÃO, PONTOS FRACOS, MAPA, FICHA, TURMA, IMPRESSÃO (2026-09-20) ===
 * Usado por includes/desempenho_view.php (aluno, ficha 360°, turma, Mesa).
 * Regras de leitura: número sempre escrito; ícone + texto além da cor. */

.dv-so-impressao { display: none; }

/* --- filtro de período e botão de imprimir --- */
.dv-filtro {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 18px;
}
.dv-filtro-periodo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dv-filtro-rotulo { font-family: 'Nunito', sans-serif; font-size: 0.9rem; font-weight: 800; color: #093f2b; }
.dv-filtro-botao,
.dv-imprimir {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 999px;
    font-family: 'Nunito', sans-serif;
    font-size: 0.92rem;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
}
.dv-filtro-botao {
    color: #093f2b;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.85);
}
.dv-filtro-botao:hover { background: rgba(255, 255, 255, 0.85); }
.dv-filtro-atual,
.dv-filtro-atual:hover { color: #ffffff; background: #0a744a; border-color: #0a744a; }
.dv-imprimir {
    color: #0a744a;
    background: transparent;
    border: 1px solid rgba(10, 116, 74, 0.65);
}
.dv-imprimir:hover { background: rgba(255, 255, 255, 0.6); }
.dv-filtro-botao:focus-visible,
.dv-imprimir:focus-visible { outline: 3px solid #0a744a; outline-offset: 2px; }

/* --- número de destaque: diferença dos últimos 30 dias --- */
.dv-delta {
    margin: 16px 0 0;
    font-family: 'Nunito', sans-serif;
    font-size: 0.95rem;
    line-height: 1.5;
    color: rgba(11, 48, 35, 0.92);
}
.dv-delta-valor { font-weight: 800; color: #093f2b; }
.dv-hero-nota { display: block; margin-top: 4px; font-size: 0.9rem; color: rgba(20, 58, 44, 0.8); }
.numeros-tile dd.dv-tile-texto { font-size: 1.15rem; line-height: 1.25; }

/* --- evolução semana a semana (gráfico de linha em HTML/CSS) --- */
.dv-evo {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-rows: 190px auto;
    column-gap: 6px;
    margin: 6px 0 10px;
}
.dv-evo-eixo {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 6px 0;
    box-sizing: border-box;
    font-family: 'Nunito', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    text-align: right;
    color: rgba(20, 58, 44, 0.85);
}
.dv-evo-plot { position: relative; }
.dv-evo-area { position: absolute; left: 20px; right: 20px; top: 12px; bottom: 12px; }
.dv-evo-grade {
    position: absolute;
    left: -20px;
    right: -20px;
    height: 0;
    border-top: 1px solid rgba(9, 63, 43, 0.16);
}
.dv-evo-linha { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.dv-evo-linha polyline {
    stroke: var(--dv-serie);
    stroke-width: 2px;
    stroke-linejoin: round;
    stroke-linecap: round;
}
.dv-ponto {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--dv-serie);
    box-shadow: 0 0 0 2px #ffffff;
    transform: translate(-50%, 50%);
    cursor: default;
}
/* Área de toque maior que a bolinha (celular). */
.dv-ponto::after { content: ''; position: absolute; left: -14px; top: -14px; right: -14px; bottom: -14px; border-radius: 50%; }
.dv-ponto:hover { box-shadow: 0 0 0 2px #ffffff, 0 0 0 5px rgba(42, 120, 214, 0.35); }
.dv-evo-x { grid-column: 2; position: relative; height: 24px; }
.dv-evo-x .dv-evo-area { top: 4px; bottom: 0; }
.dv-evo-x-rotulo {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    font-family: 'Nunito', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(20, 58, 44, 0.9);
    white-space: nowrap;
}
.dv-evo-resumo { margin: 6px 0 0; font-family: 'Nunito', sans-serif; font-size: 0.95rem; line-height: 1.5; color: rgba(11, 48, 35, 0.92); }

/* --- onde focar primeiro (cartões de pontos fracos) --- */
.dv-fracos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}
.dv-fraco {
    padding: 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.85);
}
.dv-fraco-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.dv-fraco-nome { margin: 0; font-family: 'Nunito', sans-serif; font-size: 1.05rem; font-weight: 800; color: #093f2b; overflow-wrap: anywhere; }
.dv-fraco-selo { padding: 4px 10px; border-radius: 999px; font-family: 'Nunito', sans-serif; font-size: 0.82rem; font-weight: 800; white-space: nowrap; }
.dv-fraco-selo-prioridade { color: #7a2a0a; background: #fde3d6; border: 1px solid #eb6834; }
.dv-fraco-selo-construcao { color: #123a6e; background: #e6eefb; border: 1px solid #2a78d6; }
.dv-fraco-linha { margin: 4px 0; font-family: 'Nunito', sans-serif; font-size: 0.92rem; line-height: 1.4; color: rgba(11, 48, 35, 0.95); }
.dv-fraco-estudo {
    margin: 10px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(10, 116, 74, 0.09);
    font-family: 'Nunito', sans-serif;
    font-size: 0.92rem;
    line-height: 1.45;
    color: #093f2b;
}

/* --- mapa de calor tópico × motivo --- */
.dv-mapa { width: 100%; border-collapse: separate; border-spacing: 2px; font-family: 'Nunito', sans-serif; font-size: 0.9rem; }
.dv-mapa th, .dv-mapa td { padding: 8px 10px; text-align: center; }
.dv-mapa thead th { min-width: 72px; font-size: 0.8rem; font-weight: 800; color: #093f2b; vertical-align: bottom; }
.dv-mapa tbody th {
    min-width: 130px;
    text-align: left;
    font-weight: 700;
    color: #093f2b;
    position: sticky;
    left: 0;
    z-index: 1;
    background: rgba(222, 249, 239, 0.97);
}
.dv-mapa td.dv-mapa-acerto { text-align: left; white-space: nowrap; font-weight: 700; color: #093f2b; }
.dv-mapa-celula { min-width: 44px; height: 44px; border-radius: 6px; color: rgba(20, 58, 44, 0.6); }
.dv-mapa-cheia { color: #093f2b; font-weight: 800; }

/* --- motivo de erro com dica de estudo --- */
.dv-motivo-estudo {
    grid-column: 1 / -1;
    font-family: 'Nunito', sans-serif;
    font-size: 0.88rem;
    line-height: 1.45;
    color: rgba(11, 48, 35, 0.92);
}

/* --- ficha 360°: alertas, cabeçalho, presenças --- */
.dv-alertas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dv-alerta {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    border-left: 5px solid transparent;
    font-family: 'Nunito', sans-serif;
    font-size: 0.95rem;
    line-height: 1.4;
    color: #093f2b;
}
.dv-alerta-atencao { background: #fdeadf; border-left-color: #eb6834; }
.dv-alerta-info    { background: #eaf1fb; border-left-color: #2a78d6; }
.dv-alerta-bom     { background: #e6f3ea; border-left-color: #2e8b57; }
.dv-alerta-icone { flex: 0 0 auto; }
.dv-links-ficha { margin: 12px 0 0; }
.dv-pres-dada      { background: #2a78d6; }
.dv-pres-remarcada { background: #898781; }
.dv-pres-falta     { background: #eb6834; }

/* --- painel da turma e cartões da Mesa --- */
.dv-turma {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}
.dv-turma-item { border-radius: 14px; background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(255, 255, 255, 0.85); overflow: hidden; }
.dv-turma-item-atencao { border-left: 5px solid #eb6834; }
.dv-turma-link {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
    padding: 14px 16px;
    min-height: 44px;
    text-decoration: none;
    color: #093f2b;
    font-family: 'Nunito', sans-serif;
}
.dv-turma-link:hover { background: rgba(255, 255, 255, 0.5); }
.dv-turma-link:focus-visible { outline: 3px solid #0a744a; outline-offset: -3px; }
.dv-turma-nome { grid-column: 1 / -1; font-size: 1.05rem; font-weight: 800; overflow-wrap: anywhere; }
.dv-turma-taxa { font-family: 'Comfortaa', sans-serif; font-size: 1.8rem; font-weight: 700; line-height: 1; }
.dv-turma-taxa small { display: block; margin-top: 4px; font-family: 'Nunito', sans-serif; font-size: 0.75rem; font-weight: 700; color: rgba(20, 58, 44, 0.85); }
.dv-turma-mini { justify-self: end; align-self: center; }
.dv-turma-delta { font-size: 0.88rem; font-weight: 800; }
.dv-turma-info { grid-column: 1 / -1; font-size: 0.85rem; color: rgba(20, 58, 44, 0.85); }
.dv-turma-alerta { grid-column: 1 / -1; padding: 6px 10px; border-radius: 8px; background: #fdeadf; font-size: 0.88rem; font-weight: 700; line-height: 1.35; }
.dv-mini polyline { stroke: var(--dv-serie); }
.dv-mini circle { fill: var(--dv-serie); }
.dv-mini-vazio { font-size: 0.8rem; color: rgba(20, 58, 44, 0.75); }
.painel-turma .dv { margin-top: 10px; }

@media (max-width: 600px) {
    .dv-evo { grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: 170px auto; }
    .dv-filtro-botao, .dv-imprimir { padding: 0 14px; }
    .dv-fracos { grid-template-columns: minmax(0, 1fr); }
}

.dv-rolagem-dica { display: none; margin: 0 0 8px; font-family: 'Nunito', sans-serif; font-size: 0.85rem; font-weight: 700; color: #0a744a; }
@media (max-width: 700px) { .dv-rolagem-dica { display: block; } }
.painel-turma .dashboard-painel-link { display: inline-block; margin-top: 14px; }

/* --- impressão / salvar em PDF: folha branca, sem botões e sem fundo de foto --- */
@media print {
    @page { margin: 14mm; }
    html { background: #ffffff !important; }
    body.pagina-conteudo {
        display: block;
        min-height: 0;
        overflow: visible;
        background: #ffffff !important;
        color: #111111;
    }
    .nao-imprimir, .btn-sair, .dv-dica, .dv-tabela summary { display: none !important; }
    .pagina-conteudo-wrapper { display: block; padding: 0; }
    .caixa-conteudo {
        width: auto;
        max-width: none;
        min-height: 0;
        padding: 0;
        overflow: visible;
        background: none !important;
        border: 0;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    .pagina-respiro .pagina-titulo, .pagina-respiro .pagina-subtitulo { display: none; }
    .dv, .dv * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .dv { margin-top: 0; gap: 12px; }
    .dv-so-impressao { display: block; }
    .dv-so-impressao h1 { margin: 0; font-size: 18pt; color: #000000; }
    .dv-so-impressao p { margin: 4px 0 0; font-size: 10pt; color: #333333; }
    .dashboard-painel {
        background: #ffffff !important;
        box-shadow: none !important;
        border: 1px solid #bbbbbb;
        color: #111111;
        break-inside: avoid;
    }
    .dv-mapa tbody th { position: static; background: #ffffff; }
    .tabela-questoes-rolagem { overflow: visible; }
    .dv-turma-item { break-inside: avoid; background: #ffffff; }
}

/* === CHAT PROFESSOR ↔ ALUNO (popup) =======================================
 * Botão flutuante "Conversar" + janela no canto da tela (no celular ocupa a
 * tela toda). HTML em includes/chat_widget.php, comportamento em
 * assets/js/chat.js. Mesma família visual do bloco de notas (.btn-notas).
 * Quem escreveu cada mensagem NÃO depende de cor: a mensagem da própria
 * pessoa fica à direita e todas têm o nome do autor escrito. */

.chat [hidden] { display: none !important; }

.chat-fab,
.fab-atalho {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 160;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 9px 20px 9px 15px;
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #093f2b;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
    background: linear-gradient(to bottom, #f7fffb 0%, #a0f7d2 46%, #21dc8f 54%, #6df1b9 100%);
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 999px;
    box-shadow:
        0 4px 12px rgba(0, 65, 42, 0.35),
        inset 0 1px 1px rgba(255, 255, 255, 0.95),
        inset 0 -2px 4px rgba(0, 118, 72, 0.25);
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}
.chat-fab-acima,
.fab-nivel-1 { bottom: 78px; }
.fab-nivel-2 { bottom: 136px; }
.fab-atalho { text-decoration: none; }
.fab-atalho:hover { transform: translateY(-2px); }
.fab-atalho:focus-visible { outline: 3px solid #0a744a; outline-offset: 3px; }
.chat-fab:hover { transform: translateY(-2px); }
.chat-fab:focus-visible { outline: 3px solid #0a744a; outline-offset: 3px; }
.chat-fab[aria-expanded="true"] { visibility: hidden; }
.chat-fab-icone { font-size: 1.2rem; line-height: 1; }

/* Selo com o número de mensagens novas (o número está escrito: não depende só de cor). */
.chat-selo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    font-size: 0.85rem;
    font-weight: 800;
    color: #ffffff;
    text-shadow: none;
    background: #b23a2a;
    border: 2px solid #ffffff;
    border-radius: 999px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.chat-painel {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 500; /* acima do botão Sair e dos outros botões da página */
    display: flex;
    flex-direction: column;
    width: min(390px, calc(100vw - 24px));
    height: min(580px, calc(100vh - 40px));
    height: min(580px, calc(100dvh - 40px));
    font-family: 'Nunito', sans-serif;
    color: #0c3325;
    /* Fundo 100% opaco: o conteúdo da página por trás não pode aparecer através do chat. */
    background: linear-gradient(to bottom, #f8fffc 0%, #d8f7ec 100%);
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 18px;
    box-shadow: 0 16px 44px rgba(0, 43, 28, 0.45), inset 0 1px 1px #ffffff;
    overflow: hidden;
    animation: chat-sobe 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes chat-sobe {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .chat-painel { animation: none; }
    .chat-fab { transition: none; }
}

.chat-cabecalho {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px 8px;
}
.chat-titulo {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-family: 'Comfortaa', sans-serif;
    font-size: 1.08rem;
    font-weight: 700;
    color: #093f2b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-fechar {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    margin: -6px -6px -6px 0;
    font-size: 1rem;
    line-height: 1;
    color: #093f2b;
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}
.chat-fechar:hover { color: #6b1d10; background: rgba(178, 58, 42, 0.12); }
.chat-fechar:focus-visible { outline: 3px solid #0a744a; outline-offset: -3px; }

.chat-linha-select {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 14px;
}
.chat-linha-select label { flex: 0 0 auto; font-size: 0.85rem; font-weight: 700; color: #093f2b; }
.chat-linha-select select {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 40px;
    padding: 4px 8px;
    font-family: 'Nunito', sans-serif;
    font-size: 0.92rem;
    color: #093f2b;
    background: #ffffff;
    border: 1px solid rgba(10, 116, 74, 0.35);
    border-radius: 8px;
}
.chat-linha-select select:focus-visible { outline: 3px solid #0a744a; outline-offset: 1px; }

.chat-mensagens {
    flex: 1 1 auto;
    min-height: 0;
    margin: 6px 0 0;
    padding: 10px 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: rgba(255, 255, 255, 0.55);
    border-top: 1px solid rgba(10, 96, 63, 0.12);
    border-bottom: 1px solid rgba(10, 96, 63, 0.12);
}
.chat-mensagens:focus-visible { outline: 3px solid #0a744a; outline-offset: -3px; }

.chat-dia {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 8px;
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(20, 58, 44, 0.75);
}
.chat-dia::before, .chat-dia::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: rgba(10, 96, 63, 0.2);
}
.chat-dia:first-child { margin-top: 0; }

.chat-msg {
    display: flex;
    flex-direction: column;
    max-width: 86%;
    margin: 0 0 8px;
    padding: 8px 12px 6px;
    border-radius: 14px;
    border: 1px solid rgba(10, 116, 74, 0.22);
    color: #0c3325;
    overflow-wrap: anywhere;
}
.chat-msg-outra {
    align-self: flex-start;
    margin-right: auto;
    background: #ffffff;
    border-bottom-left-radius: 4px;
}
.chat-msg-minha {
    align-self: flex-end;
    margin-left: auto;
    background: linear-gradient(to bottom, #d3fbea 0%, #a5f2d2 100%);
    border-color: rgba(10, 116, 74, 0.4);
    border-bottom-right-radius: 4px;
}
.chat-msg-tag {
    align-self: flex-start;
    margin: 0 0 4px;
    padding: 1px 8px;
    font-size: 0.76rem;
    font-weight: 700;
    color: #093f2b;
    background: rgba(10, 116, 74, 0.1);
    border: 1px solid rgba(10, 116, 74, 0.3);
    border-radius: 999px;
}
.chat-msg-texto {
    margin: 0;
    font-size: 0.97rem;
    line-height: 1.45;
    white-space: pre-wrap;
}
.chat-msg-meta {
    margin-top: 3px;
    font-size: 0.75rem;
    color: rgba(20, 58, 44, 0.8);
}
.chat-msg-minha .chat-msg-meta { text-align: right; }

.chat-vazio {
    margin: 0;
    padding: 12px 18px;
    font-size: 0.92rem;
    line-height: 1.45;
    color: rgba(20, 58, 44, 0.85);
    text-align: center;
}
.chat-aviso {
    margin: 0;
    padding: 0 14px;
    min-height: 1.3em;
    font-size: 0.82rem;
    color: rgba(20, 58, 44, 0.8);
}
.chat-aviso.erro { color: #b23a2a; font-weight: 700; }

.chat-form { padding: 6px 12px 12px; }
.chat-form .chat-linha-select { padding: 0 0 6px; }
.chat-texto {
    display: block;
    width: 100%;
    min-height: 62px;
    max-height: 140px;
    padding: 8px 10px;
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    line-height: 1.4;
    color: #0c3325;
    background: #ffffff;
    border: 1px solid rgba(10, 116, 74, 0.4);
    border-radius: 10px;
    resize: vertical;
}
.chat-texto:focus-visible { outline: 3px solid #0a744a; outline-offset: 1px; }
.chat-rodape {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}
.chat-contador { font-size: 0.78rem; color: rgba(20, 58, 44, 0.8); }
.chat-dica { flex: 1 1 auto; font-size: 0.78rem; color: rgba(20, 58, 44, 0.7); }
.chat-enviar {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 8px 22px;
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    font-weight: 800;
    color: #ffffff;
    text-shadow: 0 1px 1px rgba(0, 54, 33, 0.5);
    background: linear-gradient(to bottom, #259b6c 0%, #0a744a 100%);
    border: 1px solid #075b3a;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 65, 42, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.35);
    cursor: pointer;
}
.chat-enviar:hover:not(:disabled) { background: linear-gradient(to bottom, #2ea979 0%, #0c8756 100%); }
.chat-enviar:focus-visible { outline: 3px solid #093f2b; outline-offset: 2px; }
.chat-enviar:disabled { opacity: 0.55; cursor: not-allowed; }

/* Celular: a janela ocupa a tela toda. Letra 16px no campo para o iPhone não dar zoom. */
@media (max-width: 600px) {
    .chat-painel {
        inset: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        border-radius: 0;
        border: 0;
    }
    .chat-texto, .chat-linha-select select { font-size: 16px; }
    .chat-dica { display: none; }
    .chat-rodape { justify-content: space-between; }
    .chat-fab, .fab-atalho { right: 14px; bottom: 14px; padding: 9px 16px 9px 13px; }
    .chat-fab-acima, .fab-nivel-1 { bottom: 70px; }
    .fab-nivel-2 { bottom: 126px; }
}

/* Tablet na vertical (em pé): a regra acima só olha a LARGURA da tela, e um
 * tablet em pé tem mais largura que um celular (uns 800-900px, contra os
 * 600px do celular) — só que continua sendo uma tela "de mão", não de
 * computador. Sem esta regra, a central de conversa aparecia pequena,
 * grudada no canto, sobrando tela vazia dos dois lados (foi o que a Profa.
 * Gabi viu nos prints do tablet em pé). "orientation: portrait" (em pé) faz
 * esta regra pegar só o tablet girado para cima/baixo, sem mudar nada no
 * computador nem no tablet deitado, onde já ficava bonito. */
@media (max-width: 900px) and (orientation: portrait) {
    .chat-painel {
        inset: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        border-radius: 0;
        border: 0;
    }
}

/* Marca de "mensagens novas" na lista de conversas da Mesa: ponto + número + palavra. */
.chat-conversa-nova { font-weight: 800; color: #b23a2a; }


/* ==========================================================================
 * Minhas listas (aluno): lista de linhas com abas + página de registro completo
 * ========================================================================== */

/* Cada lista é uma linha, como a lista de alunos do professor. */
.lista-linhas {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
}
.lista-linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    padding: 16px 18px;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(10, 86, 58, 0.12);
    scroll-margin-top: 20px;
}
/* Listas ainda não concluídas ganham uma faixa lateral: o "para fazer" salta aos olhos. */
.lista-linha-pendente {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.78) 0%, rgba(195, 248, 227, 0.6) 100%);
    border-left: 6px solid #2a78d6;
}
.lista-linha-atrasada { border-left-color: #eb6834; }
.lista-linha:target { outline: 3px solid rgba(10, 116, 74, 0.55); outline-offset: 3px; }
.lista-linha-corpo { flex: 1 1 260px; min-width: 0; }
.lista-linha-nome {
    margin: 0 0 6px;
    font-family: 'Comfortaa', sans-serif;
    font-size: 1.15rem;
    letter-spacing: 0.5px;
    color: #093f2b;
    overflow-wrap: anywhere;
}
.lista-linha-datas {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 18px;
    margin: 0 0 6px;
    font-family: 'Nunito', sans-serif;
    font-size: 0.98rem;
    line-height: 1.5;
    color: rgba(11, 48, 35, 0.92);
}
/* Prazo vencido: ícone ⚠ + a palavra "passou" já dizem tudo, a cor só reforça. */
.lista-prazo-atrasado { font-weight: 800; color: #a3401c; }
.lista-linha-resumo {
    margin: 0 0 6px;
    font-family: 'Nunito', sans-serif;
    font-size: 0.98rem;
    line-height: 1.6;
    color: rgba(20, 58, 44, 0.92);
}
.lista-linha-links {
    margin: 0;
    font-family: 'Nunito', sans-serif;
    font-size: 0.95rem;
    line-height: 1.7;
}
/* Botão grande de registrar: é a ação principal de cada linha. */
.lista-linha-botao {
    flex: 0 0 auto;
    min-height: 48px;
    padding-left: 22px;
    padding-right: 22px;
    text-align: center;
    justify-content: center;
}
@media (max-width: 600px) {
    .lista-linha { flex-direction: column; align-items: stretch; padding: 14px; }
    .lista-linha-botao { width: 100%; box-sizing: border-box; }
}

/* --- Página de registro completo de uma lista --- */
.registro-completo { text-align: left; }
.registro-completo .registro-numeros { margin-top: 14px; }
.registro-detalhes-lista { margin-top: 18px; padding-top: 16px; border-top: 1px dashed rgba(9, 63, 43, 0.25); }
.registro-detalhes-lista > .registro-campo { margin-top: 14px; }
.registro-tempo { display: flex; gap: 12px; align-items: center; }
.registro-tempo-item { display: inline-flex; align-items: center; gap: 6px; font-family: 'Nunito', sans-serif; color: #093f2b; }
.registro-tempo-item .dashboard-notas-campo { width: 84px; }
.registro-duvidas { resize: vertical; min-height: 96px; font-family: 'Nunito', sans-serif; line-height: 1.5; }
.registro-completo .registro-acoes { margin-top: 18px; }
.registro-salvar { min-height: 48px; padding-left: 26px; padding-right: 26px; }
.registro-rodape-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
    margin: 22px 0 0;
    font-family: 'Nunito', sans-serif;
}
@media (max-width: 600px) {
    .registro-completo .registro-numeros { grid-template-columns: minmax(0, 1fr); }
    .registro-tempo-item .dashboard-notas-campo { width: 76px; }
}


/* --- Ritmo de estudo e dúvidas nas listas (desempenho) --- */
.dv-subtitulo-bloco {
    margin: 16px 0 4px;
    font-family: 'Comfortaa', sans-serif;
    font-size: 1rem;
    color: #093f2b;
}
.dv-duvidas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.dv-duvida {
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.45);
    border-radius: 10px;
    border-left: 5px solid #4a3aa7;
    font-family: 'Nunito', sans-serif;
    color: #093f2b;
}
.dv-duvida strong { color: #093f2b; }
.dv-duvida-quando { margin-left: 8px; font-size: 0.9rem; color: rgba(20, 58, 44, 0.8); }
.dv-duvida-texto { color: rgba(11, 48, 35, 0.95); margin: 6px 0 8px; line-height: 1.5; overflow-wrap: anywhere; }

.dashboard-painel + .filtro-alunos { margin-top: 18px; }


/* ==========================================================================
 * Menu do aluno (topo de todas as páginas do aluno) e painel enxuto
 * ========================================================================== */

.chat-selo[hidden] { display: none; }

/* Barra de 4 botões grandes: Meu painel, Minhas listas, Estatísticas, Conversar. */
.menu-aluno {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 22px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 16px;
}
.menu-aluno-botao {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 52px;
    box-sizing: border-box;
    padding: 8px 10px;
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    text-decoration: none;
    color: #093f2b;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 0%, rgba(176, 244, 217, 0.65) 100%);
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(10, 86, 58, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}
.menu-aluno-botao:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(10, 86, 58, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.8); }
.menu-aluno-botao:focus-visible { outline: 3px solid #0a744a; outline-offset: 2px; }
/* A página onde a pessoa está: botão cheio e com um traço embaixo (não depende só de cor). */
.menu-aluno-ativo {
    background: linear-gradient(to bottom, #f7fffb 0%, #a0f7d2 46%, #21dc8f 54%, #6df1b9 100%);
    border-color: #ffffff;
    box-shadow: 0 3px 8px rgba(0, 65, 42, 0.3), inset 0 -4px 0 #0a744a, inset 0 1px 1px rgba(255, 255, 255, 0.95);
}
.menu-aluno-icone { font-size: 1.25rem; line-height: 1; }
.menu-aluno-texto { white-space: nowrap; }
.menu-aluno-selo {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    box-sizing: border-box;
    font-size: 0.85rem;
    font-weight: 800;
    color: #093f2b;
    text-shadow: none;
    background: #ffffff;
    border: 2px solid #2a78d6;
    border-radius: 999px;
    justify-content: center;
}
@media (max-width: 700px) {
    .menu-aluno { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    /* No celular: ícone em cima, nome embaixo, e o número no cantinho do botão. */
    .menu-aluno-botao { flex-direction: column; gap: 2px; min-height: 66px; padding: 8px 6px; font-size: 0.95rem; }
    .menu-aluno-texto { white-space: normal; text-align: center; line-height: 1.2; }
    .menu-aluno-botao > .menu-aluno-selo, .menu-aluno-botao > .chat-selo { position: absolute; top: -8px; right: -4px; }
}
/* Tablet na vertical: mesmo motivo do chat mais acima — a regra de cima só
 * olha a largura (até 700px), e um tablet em pé tem mais largura que isso
 * (uns 800-900px), mas continua sendo tela de mão. Sem isto, os 4 botões
 * "Meu painel / Minhas listas / Estatísticas / Conversar" ficavam espremidos
 * numa linha só, com o texto colado e o numerinho da bolinha em cima do
 * botão vizinho — foi o "aglomerado e sobreposto" que a Profa. Gabi viu.
 * Repete o mesmo layout de celular (2 colunas, ícone em cima do nome). */
@media (max-width: 900px) and (orientation: portrait) {
    .menu-aluno { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .menu-aluno-botao { flex-direction: column; gap: 2px; min-height: 66px; padding: 8px 6px; font-size: 0.95rem; }
    .menu-aluno-texto { white-space: normal; text-align: center; line-height: 1.2; }
    .menu-aluno-botao > .menu-aluno-selo, .menu-aluno-botao > .chat-selo { position: absolute; top: -8px; right: -4px; }
}

/* --- Sua semana: lista da semana + próxima aula, no alto do painel --- */
.sua-semana {
    margin: 0 0 22px;
    padding: 18px 20px 20px;
    text-align: left;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.78) 0%, rgba(195, 248, 227, 0.6) 100%);
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 16px;
    box-shadow: 0 6px 16px rgba(10, 86, 58, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.sua-semana-titulo {
    margin: 0 0 12px;
    font-family: 'Comfortaa', sans-serif;
    font-size: 1.3rem;
    letter-spacing: 0.5px;
    color: #093f2b;
}
.sua-semana-grade {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 16px;
}
.sua-semana-bloco {
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.55);
    border-radius: 12px;
    min-width: 0;
}
.sua-semana-subtitulo {
    margin: 0 0 6px;
    font-family: 'Nunito', sans-serif;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(9, 63, 43, 0.8);
}
.sua-semana-nome {
    margin: 0 0 6px;
    font-family: 'Comfortaa', sans-serif;
    font-size: 1.2rem;
    line-height: 1.3;
    color: #093f2b;
    overflow-wrap: anywhere;
}
.sua-semana-detalhe, .sua-semana-vazio {
    margin: 0 0 6px;
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: rgba(11, 48, 35, 0.92);
}
.sua-semana-vazio { color: rgba(20, 58, 44, 0.85); }
.sua-semana-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 10px; }
.sua-semana-link { font-family: 'Nunito', sans-serif; font-size: 1rem; color: #0a744a; }
@media (max-width: 700px) {
    .sua-semana { padding: 14px; }
    .sua-semana-grade { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .sua-semana-acoes .botao-atalho { flex: 1 1 100%; justify-content: center; box-sizing: border-box; text-align: center; }
}

/* --- Números do ano letivo em uma faixa compacta --- */
.numeros-faixa { margin-top: 20px; padding: 14px 18px; }
.numeros-faixa-titulo {
    margin: 0 0 10px;
    font-family: 'Comfortaa', sans-serif;
    font-size: 1.05rem;
    letter-spacing: 0.5px;
    color: #093f2b;
}
.numeros-faixa-titulo small { font-family: 'Nunito', sans-serif; font-weight: 600; font-size: 0.9rem; color: rgba(9, 63, 43, 0.75); }
.numeros-faixa-lista {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 10px;
}
.numeros-faixa-item {
    display: flex;
    flex-direction: column-reverse;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.55);
    border-radius: 10px;
}
.numeros-faixa-item dd { margin: 0; font-family: 'Comfortaa', sans-serif; font-size: 1.5rem; color: #093f2b; }
.numeros-faixa-item dt { font-family: 'Nunito', sans-serif; font-size: 0.9rem; font-weight: 700; color: rgba(20, 58, 44, 0.9); }
.numeros-faixa-link { font-family: 'Nunito', sans-serif; font-size: 1rem; color: #0a744a; }
@media (max-width: 700px) {
    .numeros-faixa-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* O menu do aluno fica sempre logo abaixo do título (e do subtítulo) da página. */
.pagina-titulo + .menu-aluno,
.pagina-subtitulo + .menu-aluno { margin-top: 18px; }

/* ==========================================================================
 * Menu do professor (abaixo do título de todas as páginas da central)
 * Reaproveita os botões do menu do aluno (.menu-aluno-*), com 7 botões:
 * ícone em cima e nome embaixo, em qualquer tamanho de tela.
 * ========================================================================== */
.menu-aluno.menu-professor {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    margin: 18px 0 22px;
}
.menu-professor .menu-aluno-botao { flex-direction: column; gap: 2px; min-height: 66px; padding: 8px 6px; font-size: 0.95rem; }
.menu-professor .menu-aluno-texto { white-space: normal; text-align: center; line-height: 1.2; }
.menu-professor .menu-aluno-botao > .chat-selo { position: absolute; top: -8px; right: -4px; }
@media (max-width: 900px) {
    /* Celular e tablet: 4 botões por linha; o último, sozinho, ocupa a linha toda. */
    .menu-aluno.menu-professor { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
}
@media (max-width: 520px) {
    .menu-aluno.menu-professor { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .menu-professor .menu-aluno-botao:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
}

/* Botão escondido do chat: continua na página (o chat.js usa para atualizar o selo)
 * mas quem abre a conversa é o botão "Conversas" do menu. */
.chat-fab-escondido { display: none !important; }

/* Faixa "Deste aluno:" logo abaixo do menu, na página de um aluno (Notas e Estatísticas). */
.menu-contexto {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: -8px 0 20px;
}
.menu-contexto-rotulo {
    font-family: 'Nunito', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: rgba(20, 58, 44, 0.9);
}
.menu-contexto-botao {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    box-sizing: border-box;
    padding: 8px 16px;
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    color: #093f2b;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 0%, rgba(176, 244, 217, 0.65) 100%);
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(10, 86, 58, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    cursor: pointer;
}
.menu-contexto-botao:hover { box-shadow: 0 4px 10px rgba(10, 86, 58, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.8); }
.menu-contexto-botao:focus-visible { outline: 3px solid #0a744a; outline-offset: 2px; }

/* Card do resumo que é um link (ex.: "Alunos com atenção" leva ao painel da turma). */
.resumo-card-link { text-decoration: none; color: inherit; transition: transform 0.15s; }
.resumo-card-link:hover { transform: translateY(-2px); }
.resumo-card-link:focus-visible { outline: 3px solid #0a744a; outline-offset: 2px; }

@media (max-width: 520px) {
    /* Celular: o rótulo ocupa uma linha e os dois botões ficam lado a lado. */
    .menu-contexto-rotulo { flex-basis: 100%; }
    .menu-contexto-botao { flex: 1 1 0; justify-content: center; padding: 8px 10px; }
}

/* ---------- Banco de questões (professor/banco_questoes.php) ----------
 * Importação do CSV do Notion (prévia + confirmar) e a tabela do banco.
 * Todo estado tem ÍCONE + TEXTO; a cor só reforça. */
.banco-tiles { margin: 0 0 12px; }
.banco-nota {
    margin: 6px 0;
    font-family: 'Nunito', sans-serif;
    font-size: 0.95rem;
    color: rgba(11, 48, 35, 0.85);
}
.banco-subtitulo {
    margin: 16px 0 6px;
    font-family: 'Nunito', sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
    color: #093f2b;
}
.banco-linha {
    display: block;
    font-family: 'Nunito', sans-serif;
    font-size: 0.82rem;
    color: rgba(11, 48, 35, 0.7);
}
.banco-atencao { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.banco-atencao > li {
    padding: 8px 12px;
    font-family: 'Nunito', sans-serif;
    font-size: 0.95rem;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 12px;
}
.banco-atencao > li ul { margin: 4px 0 0; padding-left: 20px; }
.banco-atencao .banco-linha { display: inline; }

.banco-selo {
    display: inline-block;
    padding: 1px 10px;
    border-radius: 999px;
    font-family: 'Nunito', sans-serif;
    font-size: 0.82rem;
    font-weight: 800;
    white-space: nowrap;
    color: #093f2b;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(9, 63, 43, 0.35);
}
.banco-selo--nova, .banco-selo--completa { color: #0b5a3c; border-color: rgba(11, 90, 60, 0.55); background: rgba(214, 245, 228, 0.8); }
.banco-selo--atualizada, .banco-selo--sem_erros { color: #6b4a00; border-color: rgba(140, 90, 10, 0.55); background: rgba(255, 240, 200, 0.85); }
.banco-selo--bloqueada, .banco-selo--incompleta { color: #9a2a1a; border-color: rgba(154, 42, 26, 0.55); background: rgba(255, 228, 220, 0.85); }

.banco-detalhes { margin: 12px 0; font-family: 'Nunito', sans-serif; }
.banco-detalhes > summary { cursor: pointer; font-weight: 700; color: #0a744a; padding: 4px 0; }
.banco-detalhes > summary:focus-visible { outline: 3px solid #0a744a; outline-offset: 2px; border-radius: 6px; }
.banco-detalhes .dashboard-notas-campo { width: 100%; box-sizing: border-box; margin-top: 4px; }
.banco-titulo-celula { min-width: 170px; max-width: 260px; }

.banco-acoes { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 14px; }
.banco-acoes form { margin: 0; }
.banco-acoes .dashboard-notas-botao { margin-top: 0; }
.dashboard-notas-botao[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }
.dashboard-notas-botao:focus-visible,
.banco-filtro select:focus-visible,
.banco-filtro input:focus-visible,
.banco-detalhes .dashboard-notas-campo:focus-visible,
#arquivo:focus-visible { outline: 3px solid #0a744a; outline-offset: 2px; }

/* Filtros: rótulo visível em cima de cada campo. */
.banco-filtros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px 12px;
    align-items: end;
    margin: 6px 0 10px;
}
.banco-filtro { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.banco-filtro label {
    font-family: 'Nunito', sans-serif;
    font-size: 0.85rem;
    font-weight: 800;
    color: #093f2b;
}
.banco-filtro select,
.banco-filtro input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 10px;
    font-family: 'Nunito', sans-serif;
    font-size: 0.95rem;
    color: rgba(11, 48, 35, 0.95);
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(66, 147, 118, 0.55);
    border-radius: 10px;
}
.banco-filtro-botoes { flex-direction: row; align-items: center; gap: 12px; }
.banco-filtro-botoes .dashboard-notas-botao { margin-top: 0; }

/* Mapa de erros: uma etiqueta por alternativa (letra + tipo), sem depender de cor. */
.tabela-banco td { vertical-align: top; }
.tabela-banco td:first-child { white-space: nowrap; }
.tabela-banco td:nth-child(2) { white-space: normal; }
.tabela-banco td:last-child { white-space: normal; min-width: 120px; max-width: 170px; }
.tabela-banco th, .tabela-banco td { padding: 6px 8px; }
.banco-erros { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; min-width: 190px; }
.banco-erro {
    padding: 1px 8px;
    border-radius: 8px;
    font-size: 0.82rem;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(66, 147, 118, 0.45);
}
.banco-erro--correta { color: #0b5a3c; border-color: rgba(11, 90, 60, 0.6); background: rgba(214, 245, 228, 0.8); }
.banco-erro--vazio { color: rgba(11, 48, 35, 0.6); border-style: dashed; }

.banco-paginas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 18px;
    margin-top: 12px;
    font-family: 'Nunito', sans-serif;
}
.banco-paginas a {
    padding: 4px 14px;
    border-radius: 999px;
    color: #0a744a;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.85);
}
.banco-paginas a:hover { background: rgba(255, 255, 255, 0.85); }
.banco-paginas a:focus-visible { outline: 3px solid #0a744a; outline-offset: 2px; }

/* Celular: cada questão vira um cartão (a tabela larga obrigava a rolar de lado). */
@media (max-width: 760px) {
    .tabela-banco thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
    .tabela-banco, .tabela-banco tbody, .tabela-banco tr, .tabela-banco td { display: block; width: 100%; box-sizing: border-box; }
    .tabela-banco tr {
        margin: 0 0 12px;
        padding: 8px 10px;
        background: rgba(255, 255, 255, 0.55);
        border: 1px solid rgba(255, 255, 255, 0.85);
        border-radius: 14px;
    }
    .tabela-banco td, .tabela-banco td:last-child, .tabela-banco td:first-child {
        min-width: 0; max-width: none; white-space: normal;
        padding: 4px 0; border-bottom: 0;
    }
    .tabela-banco td::before {
        content: attr(data-rotulo);
        display: block;
        font-size: 0.75rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        color: rgba(9, 63, 43, 0.7);
    }
    .banco-titulo-celula { min-width: 0; max-width: none; }
    .banco-erros { min-width: 0; }
}
.banco-nota, .dashboard-painel-corpo { overflow-wrap: anywhere; }
.banco-atencao li, .banco-atencao strong, .banco-atencao .banco-linha { color: rgba(11, 48, 35, 0.92); text-shadow: none; }
.banco-atencao > li ul li { font-size: 0.92rem; }

/* ---------- Biblioteca: tela de listas (professor/listas.php) ---------- */
.biblioteca-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin-bottom: 10px;
}
.biblioteca-topo .dashboard-painel-titulo { margin: 0; }
.biblioteca-topo .dashboard-notas-botao { margin-top: 0; }
.tabela-listas td:first-child { white-space: normal; }
.tabela-listas td:last-child { white-space: nowrap; max-width: none; min-width: 0; }
.tabela-listas .banco-selo { margin: 4px 4px 0 0; }
.biblioteca-botao-linha { margin-top: 0 !important; padding: 3px 14px; font-size: 0.92rem; }
@media (max-width: 760px) {
    .tabela-listas td:last-child { white-space: normal; }
}

/* ---------- Popup da questão (professor/banco_questoes.php) ---------- */
.banco-abrir {
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    color: #0a744a;
    text-decoration: underline;
}
.banco-abrir code { cursor: pointer; }
.banco-abrir:hover code { background: rgba(255, 255, 255, 0.95); }
.banco-abrir:focus-visible { outline: 3px solid #0a744a; outline-offset: 2px; border-radius: 6px; }
.banco-alerta {
    margin: 4px 0 10px;
    padding: 8px 12px;
    font-family: 'Nunito', sans-serif;
    font-size: 0.9rem;
    line-height: 1.4;
    color: #6b4a00;
    background: rgba(255, 240, 200, 0.85);
    border: 1px solid rgba(140, 90, 10, 0.5);
    border-radius: 10px;
}
.banco-resumo-popup { display: flex; flex-direction: column; gap: 3px; margin: 0 0 10px; align-items: flex-start; }
.banco-resumo-popup .banco-linha { font-size: 0.9rem; }
.form-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; margin-top: 8px; }
.form-grade label { margin-top: 8px; }
.form-grade select, .form-grade input { width: 100%; box-sizing: border-box; }
.banco-erros-form { margin: 14px 0 0; padding: 0; border: 0; min-width: 0; }
.banco-erros-form legend { margin-bottom: 4px; }
.banco-erro-linha { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(0, 1.6fr); gap: 6px 12px; align-items: center; margin-top: 6px; }
.banco-erro-linha label { font-family: 'Nunito', sans-serif; font-size: 0.95rem; color: #093f2b; }
.banco-erro-linha select:disabled { opacity: 0.6; }
@media (max-width: 600px) {
    .form-grade { grid-template-columns: 1fr; }
    .form-grade-vazio { display: none; }
    .banco-erro-linha { grid-template-columns: 1fr; gap: 2px; }
}

/* ==========================================================================
   Popup de lista: escolher as questões do banco (professor/listas.php)
   ========================================================================== */
.picker {
    margin: 16px 0 0;
    padding: 12px 12px 14px;
    border: 2px solid rgba(9, 63, 43, 0.25);
    border-radius: 12px;
    min-width: 0;
}
.picker:disabled { opacity: 0.6; }
.picker-legenda {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 1rem;
    color: #093f2b;
    padding: 0 6px;
}
.picker-subtitulo {
    font-family: 'Nunito', sans-serif;
    font-size: 0.95rem;
    color: #093f2b;
    margin: 16px 0 6px;
}
.picker-ajuda { font-size: 0.85rem; margin: 0 0 6px; color: #2a5d4a; }
.picker-resumo { font-weight: 800; margin: 4px 0 6px; color: #093f2b; }
.picker-alerta { margin: 6px 0 8px; }
.picker-selecionadas, .picker-resultados {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 260px;
    overflow-y: auto;
    border-radius: 8px;
}
.picker-selecionadas:empty, .picker-resultados:empty { display: none; }
.picker-selecionadas li {
    display: grid;
    grid-template-columns: 2.4em minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-bottom: 1px solid rgba(9, 63, 43, 0.15);
    background: rgba(255, 255, 255, 0.55);
}
.picker-num { font-weight: 800; color: #093f2b; text-align: right; }
.picker-item-texto { min-width: 0; overflow-wrap: anywhere; }
.picker-item-texto small { display: block; color: #2a5d4a; }
.picker-acoes { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.picker-btn {
    font: inherit;
    font-size: 0.85rem;
    font-weight: 800;
    min-width: 40px;
    min-height: 40px;
    padding: 2px 8px;
    border: 2px solid #093f2b;
    border-radius: 8px;
    background: #ffffff;
    color: #093f2b;
    cursor: pointer;
}
.picker-btn:hover:not(:disabled) { background: #e0f6ee; }
.picker-btn:disabled { opacity: 0.35; cursor: default; }
.picker-btn:focus-visible { outline: 3px solid #f0a000; outline-offset: 2px; }
.picker-filtros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px 10px;
    align-items: end;
}
.picker-filtros .dashboard-notas-botao { margin-top: 0; }
.picker-status { margin: 8px 0 4px; font-size: 0.9rem; color: #2a5d4a; min-height: 1.2em; }
.picker-resultados li { border-bottom: 1px solid rgba(9, 63, 43, 0.15); background: rgba(255, 255, 255, 0.55); }
.picker-resultados label {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    padding: 8px;
    cursor: pointer;
}
.picker-resultados input[type="checkbox"] { width: 22px; height: 22px; margin: 2px 0 0; }
.picker-resultados input[type="checkbox"]:focus-visible { outline: 3px solid #f0a000; outline-offset: 2px; }
.picker-resultados small { display: block; color: #2a5d4a; }
.picker-na-lista { font-weight: 800; color: #093f2b; }
.picker-paginas { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.picker-paginas .dashboard-notas-botao { margin-top: 0; }
@media (max-width: 600px) {
    .picker-selecionadas li { grid-template-columns: 2em minmax(0, 1fr); }
    .picker-selecionadas .picker-acoes { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ==========================================================================
   Pagamentos mês a mês (professor/pagamentos.php)
   ========================================================================== */
.pg-legenda-cartoes { margin: 6px 0 6px; font-family: 'Nunito', sans-serif; font-weight: 800; color: #093f2b; }
.pg-anos { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.pg-totais {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 6px 0 12px;
}
.pg-totais > div {
    padding: 8px 12px;
    border-radius: 12px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.75) 0%, rgba(195, 248, 227, 0.55) 100%);
    border: 1px solid rgba(255, 255, 255, 0.9);
}
.pg-totais dt { font-size: 0.85rem; font-weight: 700; color: rgba(20, 58, 44, 0.85); }
.pg-totais dd { margin: 0; font-family: 'Comfortaa', sans-serif; font-weight: 700; font-size: 1.2rem; color: #093f2b; }
.pg-ajuda { font-size: 0.85rem; color: #2a5d4a; margin: 6px 0; }
.pg-chave { display: inline-block; margin-right: 10px; white-space: nowrap; }

.pg-preparar { margin: 0 0 10px; border: 1px solid rgba(9, 63, 43, 0.2); border-radius: 12px; padding: 8px 12px; background: rgba(255, 255, 255, 0.4); }
.pg-preparar summary { cursor: pointer; font-weight: 800; color: #093f2b; min-height: 32px; display: flex; align-items: center; }
.pg-preparar summary:focus-visible { outline: 3px solid #f0a000; outline-offset: 2px; border-radius: 6px; }
.pg-preparar-campos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px 12px;
    align-items: end;
}
.pg-preparar-campos .banco-filtro input[type="number"] {
    font: inherit; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(66, 147, 118, 0.5); background: #ffffff; width: 100%; box-sizing: border-box;
}
.pg-preparar-campos .dashboard-notas-botao { margin-top: 0; }

/* A grade: aluno nas linhas, jan a dez nas colunas. */
.pg-rolagem { overflow-x: auto; border-radius: 10px; }
.tabela-pagamentos { width: 100%; border-collapse: separate; border-spacing: 0; font-family: 'Nunito', sans-serif; }
.tabela-pagamentos th, .tabela-pagamentos td { padding: 4px 3px; text-align: center; border-bottom: 1px solid rgba(9, 63, 43, 0.12); }
.tabela-pagamentos thead th { font-size: 0.8rem; font-weight: 800; color: #093f2b; background: rgba(195, 248, 227, 0.6); position: sticky; top: 0; }
.tabela-pagamentos abbr { text-decoration: none; cursor: help; }
.tabela-pagamentos .pg-col-nome { text-align: left; min-width: 150px; padding-left: 8px; background: rgba(255, 255, 255, 0.5); }
.tabela-pagamentos .pg-col-atraso { min-width: 110px; font-size: 0.85rem; white-space: nowrap; }
.tabela-pagamentos .pg-mes-atual { background: rgba(255, 240, 190, 0.55); }
.tabela-pagamentos thead .pg-mes-atual { box-shadow: inset 0 -3px 0 #f0a000; }
.pg-atraso-texto { color: #8a2a2a; font-weight: 800; }

.pg-celula {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 100%; min-width: 46px; min-height: 48px; padding: 2px 2px;
    font: inherit; font-size: 0.75rem; font-weight: 800; line-height: 1.15;
    border-radius: 10px; border: 2px solid transparent; cursor: pointer;
    background: rgba(255, 255, 255, 0.5); color: #093f2b;
}
.pg-celula:hover { background: #ffffff; border-color: #093f2b; }
.pg-celula:focus-visible { outline: 3px solid #f0a000; outline-offset: 1px; }
.pg-icone { font-size: 1.05rem; }
.pg-valor { font-size: 0.72rem; }
.pg-pago     { background: rgba(180, 230, 190, 0.75); color: #1f5a30; }
.pg-pendente { background: rgba(245, 235, 180, 0.8);  color: #6a5a10; }
.pg-atrasado { background: rgba(245, 190, 190, 0.85); color: #8a2a2a; }
.pg-vazio    { background: transparent; color: #517f6e; border: 2px dashed rgba(9, 63, 43, 0.25); font-weight: 600; }
.pg-vencido  { border-color: #b06a00; }
.pg-vencido-selo { font-size: 0.62rem; color: #7a4a00; }

/* Popup do mês */
.pg-popup-quem { margin: 0 0 8px; font-weight: 800; color: #093f2b; font-size: 1.05rem; }
.pg-situacao { border: 0; padding: 0; margin: 0 0 6px; display: flex; gap: 8px; flex-wrap: wrap; }
.pg-situacao legend { padding: 0; margin-bottom: 4px; }
.pg-radio {
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 12px;
    border: 2px solid rgba(9, 63, 43, 0.35); border-radius: 12px; background: #ffffff; cursor: pointer; font-weight: 800; color: #093f2b;
}
.pg-radio:has(input:checked) { border-color: #093f2b; background: #d8f6eb; }
.pg-radio:has(input:focus-visible) { outline: 3px solid #f0a000; outline-offset: 2px; }
.pg-radio input { width: 20px; height: 20px; margin: 0; }
.pg-dialog { height: fit-content; }
.pg-dialog button[hidden] { display: none; }
.pg-dialog .form-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pg-dialog .form-grade input:disabled { opacity: 0.55; }

@media (max-width: 900px) {
    /* Celular/tablet: cada aluno vira um cartão com os 12 meses em 4 colunas. */
    .pg-rolagem { overflow-x: visible; }
    .tabela-pagamentos thead { position: absolute; left: -9999px; }
    .tabela-pagamentos, .tabela-pagamentos tbody { display: block; }
    .tabela-pagamentos tr {
        display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 4px;
        margin: 0 0 12px; padding: 8px; border-radius: 14px; background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(9, 63, 43, 0.15);
    }
    .tabela-pagamentos th.pg-col-nome, .tabela-pagamentos td.pg-col-atraso { grid-column: 1 / -1; text-align: left; border: 0; background: transparent; padding: 2px 4px; }
    .tabela-pagamentos td.pg-td { border: 0; padding: 0; }
    .tabela-pagamentos td.pg-td::before { content: attr(data-rotulo); display: block; font-size: 0.72rem; font-weight: 800; color: #2a5d4a; text-align: center; }
    .tabela-pagamentos td.pg-col-atraso::before { content: 'Atrasado: '; font-weight: 800; color: #2a5d4a; }
    .tabela-pagamentos .pg-mes-atual { background: rgba(255, 240, 190, 0.7); border-radius: 10px; }
    .pg-celula { min-height: 52px; }
    .pg-totais { grid-template-columns: 1fr; }
    .pg-dialog .form-grade { grid-template-columns: 1fr; }
}

.banco-editar { display: block; margin-top: 8px !important; }

/* --- Pagamentos: combinado de cada aluno, forma de pagamento e conta por aula (migração 015) --- */
.pg-combinado-resumo { display: block; font-size: 0.78rem; font-weight: 700; color: #2a5d4a; margin-top: 2px; line-height: 1.3; }
.pg-combinado-vazio { font-weight: 600; font-style: italic; }
.pg-combinado-botao {
    display: inline-flex; align-items: center; gap: 4px; min-height: 32px; margin-top: 2px; padding: 2px 8px;
    font: inherit; font-size: 0.78rem; font-weight: 800; color: #093f2b; cursor: pointer;
    background: rgba(255, 255, 255, 0.65); border: 1px solid rgba(9, 63, 43, 0.3); border-radius: 999px;
}
.pg-combinado-botao:hover { background: #ffffff; border-color: #093f2b; }
.pg-combinado-botao:focus-visible { outline: 3px solid #f0a000; outline-offset: 2px; }
.pg-forma { font-size: 0.6rem; font-weight: 800; line-height: 1; color: inherit; }
.pg-forma-campo { margin-top: 10px; }
.pg-forma-campo select, .pg-combinado-grade select { width: 100%; }
.pg-aulas { margin: 0 0 10px; padding: 8px 10px; border: 1px dashed rgba(9, 63, 43, 0.35); border-radius: 12px; background: rgba(255, 255, 255, 0.45); }
.pg-aulas-diario { margin: 0 0 6px; font-weight: 800; color: #093f2b; font-size: 0.9rem; }
.pg-aulas-linha { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.pg-aulas-linha input { max-width: 110px; }
.pg-aulas-linha .dashboard-notas-botao { margin-top: 0; }

/* --- Lista de Alunos: bolinha com iniciais e botão "Abrir painel/conta" --- */
.lista-alunos-item { align-items: center; padding: 10px 12px; }
.lista-alunos-info { display: flex; align-items: center; gap: 12px; min-width: 0; }
.lista-alunos-textos { display: flex; flex-direction: column; min-width: 0; }
.lista-alunos-textos .lista-alunos-email { margin-left: 0; overflow-wrap: anywhere; }
.avatar-aluno {
    position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%;
    font-family: 'Comfortaa', 'Nunito', sans-serif; font-weight: 700; font-size: 1rem; letter-spacing: 0.5px;
    border: 2px solid rgba(255, 255, 255, 0.9); box-shadow: 0 2px 6px rgba(0, 65, 42, 0.2);
}
.avatar-aluno--regular { color: #063d29; background: linear-gradient(to bottom, #b7f9df 0%, #3fe19e 100%); }
.avatar-aluno--comum { color: #3c4a44; background: linear-gradient(to bottom, #f1f1f1 0%, #cfd6d2 100%); }
.avatar-aluno--grande { width: 64px; height: 64px; font-size: 1.4rem; }
.avatar-aluno-selo {
    position: absolute; right: -4px; bottom: -4px; width: 20px; height: 20px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.7rem; font-weight: 800; color: #ffffff; background: #0a744a; border: 2px solid #ffffff;
}
.aluno-abrir {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    min-height: 44px; min-width: 128px; padding: 4px 16px; border-radius: 16px; text-decoration: none;
    font-family: 'Nunito', sans-serif; text-align: center; cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}
.aluno-abrir:hover { transform: translateY(-1px); }
.aluno-abrir:focus-visible { outline: 3px solid #f0a000; outline-offset: 2px; }
.aluno-abrir-acao { font-size: 0.98rem; font-weight: 800; }
.aluno-abrir-tipo { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.3px; }
.aluno-abrir--regular {
    color: #063d29; background: linear-gradient(to bottom, #b7f9df 0%, #3fe19e 100%);
    border: 1px solid rgba(255, 255, 255, 0.85); box-shadow: 0 3px 8px rgba(0, 65, 42, 0.25);
}
.aluno-abrir--comum {
    color: #34443d; background: rgba(255, 255, 255, 0.6);
    border: 2px solid rgba(60, 74, 68, 0.35); box-shadow: 0 2px 6px rgba(0, 65, 42, 0.1);
}
.aluno-abrir--regular:hover { box-shadow: 0 5px 12px rgba(0, 65, 42, 0.32); }
.aluno-abrir--comum:hover { background: #ffffff; border-color: rgba(60, 74, 68, 0.6); }
@media (max-width: 640px) {
    .lista-alunos-item { flex-direction: column; align-items: stretch; }
    .lista-alunos-direita { justify-content: flex-start; }
    .aluno-abrir { width: 100%; }
}

/* "Voltar" / "Mesa" no topo da página como botão (pill), não como link de texto solto —
 * link de texto sozinho passava despercebido; o botão fica visível e fácil de tocar no
 * celular, igual aos outros botões de ação da página. Reaproveita o .botao-atalho que já
 * existe, só menor (senão ficava grande demais para um link de "voltar"). */
.pagina-voltar,
.aluno-voltar { justify-content: flex-start; text-align: left; display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 0 0 10px; }
.pagina-voltar .botao-atalho,
.aluno-voltar .botao-atalho { padding: 8px 16px; font-size: 0.95rem; min-height: 40px; box-sizing: border-box; }

/* --- Painel do aluno (professor/aluno.php): cabeçalho, resumo e menu "Deste aluno" --- */
.aluno-cabecalho { text-align: left; display: flex; align-items: center; gap: 16px; margin: 6px 0 16px; }
.aluno-cabecalho-textos { min-width: 0; }
.aluno-cabecalho-nome { margin: 0; font-family: 'Comfortaa', 'Nunito', sans-serif; font-weight: 700; font-size: 1.9rem; line-height: 1.15; color: #093f2b; overflow-wrap: anywhere; }
.aluno-cabecalho-email { margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 0.95rem; color: rgba(20, 58, 44, 0.8); overflow-wrap: anywhere; }

.aluno-resumo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 18px; }
.aluno-resumo-card {
    text-align: left; display: flex; flex-direction: column; gap: 5px; padding: 12px 14px; border-radius: 16px;
    background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 2px 8px rgba(0, 65, 42, 0.1);
}
.aluno-resumo-titulo { margin: 0 0 2px; font-family: 'Comfortaa', 'Nunito', sans-serif; font-size: 1.05rem; color: #093f2b; }
.aluno-resumo-linha { margin: 0; font-size: 0.95rem; line-height: 1.4; color: #143a2c; }
.aluno-resumo-nota { font-size: 0.82rem; color: #2a5d4a; }
.aluno-resumo-alerta { margin: 0; font-size: 0.9rem; font-weight: 800; color: #8a2a2a; }
.aluno-resumo-destaque { font-size: 1.05rem; }
.aluno-pag--pago { color: #1f5a30; }
.aluno-pag--pendente { color: #6a5a10; }
.aluno-pag--atrasado { color: #8a2a2a; }
.aluno-resumo-botao {
    margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; min-height: 36px; padding: 4px 14px;
    font: inherit; font-size: 0.9rem; font-weight: 800; color: #093f2b; text-decoration: none; cursor: pointer;
    background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(9, 63, 43, 0.3); border-radius: 999px;
}
.aluno-resumo-botao:hover { background: #ffffff; border-color: #093f2b; }
.aluno-resumo-botao:focus-visible { outline: 3px solid #f0a000; outline-offset: 2px; }

.aluno-menu { margin: 0 0 12px; }
.aluno-menu-titulo { margin: 0 0 8px; font-family: 'Comfortaa', 'Nunito', sans-serif; font-size: 1.05rem; color: #093f2b; }
.aluno-menu-grade { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.aluno-menu-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 92px; padding: 8px 6px;
    font-family: 'Nunito', sans-serif; text-align: center; text-decoration: none; cursor: pointer; color: #093f2b;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.85) 0%, rgba(183, 249, 223, 0.55) 100%);
    border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 16px; box-shadow: 0 2px 8px rgba(0, 65, 42, 0.14);
    transition: transform 0.15s, box-shadow 0.15s;
}
.aluno-menu-item:hover { transform: translateY(-2px); box-shadow: 0 5px 12px rgba(0, 65, 42, 0.22); }
.aluno-menu-item:focus-visible { outline: 3px solid #f0a000; outline-offset: 2px; }
.aluno-menu-icone { font-size: 1.6rem; line-height: 1; }
.aluno-menu-rotulo { display: flex; flex-direction: column; gap: 1px; font-weight: 800; font-size: 0.98rem; }
.aluno-menu-rotulo small { font-weight: 700; font-size: 0.74rem; color: #2a5d4a; }
.aluno-dialog { width: min(680px, 94vw); height: fit-content; }
.aluno-dialog .dashboard-notas-form:first-child { margin-top: 0; }

@media (max-width: 900px) {
    .aluno-resumo { grid-template-columns: 1fr; }
    .aluno-menu-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .aluno-menu-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .aluno-cabecalho-nome { font-size: 1.5rem; }
}
#importar-dialog { height: fit-content; }

/* --- Painel do aluno na visão do professor: conta COMUM (enxuto) --- */
.aluno-resumo--enxuto { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.liberacao-grupo { border: 0; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.liberacao-grupo legend { padding: 0; margin-bottom: 4px; }
.liberacao-item {
    display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px; cursor: pointer;
    background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(9, 63, 43, 0.18); text-align: left;
}
.liberacao-item input[type="checkbox"] { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: #0b5a3c; }
.liberacao-item:focus-within { outline: 3px solid #0b5a3c; outline-offset: 2px; }
.liberacao-texto { display: flex; flex-direction: column; gap: 2px; color: #143a2c; }
.liberacao-texto small { font-size: 0.85rem; color: #2a5d4a; }
@media (max-width: 860px) {
    .aluno-resumo--enxuto { grid-template-columns: 1fr; }
}

/* --- Sua biblioteca (conta comum) --- */
.biblioteca-atalhos { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; }
@media (max-width: 600px) {
    /* Em coluna, o "260px" do corpo virava ALTURA e deixava um vazio no cartão. */
    .lista-linha-corpo { flex: 0 0 auto; }
}

/* --- Interessados (pedidos "Quero ser aluno") --- */
.pedido-lista { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; text-align: left; }
.pedido-item {
    padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.85); border-left: 6px solid #9aa9a2; box-shadow: 0 2px 8px rgba(0, 65, 42, 0.1);
    scroll-margin-top: 20px;
}
.pedido-item--novo { border-left-color: #0a744a; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(195, 248, 227, 0.6)); }
.pedido-item--em_contato { border-left-color: #2a78d6; }
.pedido-item--virou_aluno { border-left-color: #0b5a3c; }
.pedido-item:target { outline: 3px solid rgba(10, 116, 74, 0.55); outline-offset: 3px; }
.pedido-topo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pedido-quem { display: flex; flex-direction: column; gap: 2px; flex: 1 1 220px; min-width: 0; }
.pedido-nome { font-family: 'Comfortaa', 'Nunito', sans-serif; font-size: 1.1rem; color: #093f2b; overflow-wrap: anywhere; }
.pedido-meta { font-size: 0.88rem; color: #2a5d4a; overflow-wrap: anywhere; }
.pedido-selo {
    padding: 4px 12px; border-radius: 999px; font-size: 0.88rem; font-weight: 800; white-space: nowrap;
    background: rgba(255, 255, 255, 0.8); border: 1px solid rgba(9, 63, 43, 0.25); color: #143a2c;
}
.pedido-selo--novo { background: #0b5a3c; color: #fff; border-color: #0b5a3c; }
.pedido-dados { margin: 10px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; }
.pedido-dados dt { font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; color: #2a5d4a; }
.pedido-dados dd { margin: 0; font-size: 0.98rem; color: #143a2c; overflow-wrap: anywhere; }
.pedido-form { margin-top: 12px; display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: 10px 14px; align-items: start; }
.pedido-campo-nota textarea { width: 100%; box-sizing: border-box; }
.pedido-acoes { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 700px) {
    .pedido-dados { grid-template-columns: 1fr; }
    .pedido-form { grid-template-columns: 1fr; }
}
.pedido-campo .dashboard-notas-rotulo { display: block; margin-bottom: 4px; }

/* Menu do professor com 7 OU 8 botões (Interessados aparece depois da migração 017): sempre numa linha no computador. */
@media (min-width: 901px) {
    .menu-aluno.menu-professor { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
}
/* Títulos longos (ex.: "Interessados") não estouram a largura do celular. */
@media (max-width: 480px) {
    .pagina-titulo { font-size: 2.2rem; letter-spacing: 2px; }
}

/* ===== Vídeos do Café (professor/videos.php) ===== */
.video-adm-lista { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; text-align: left; }
.video-adm-item {
    display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 8px 14px; align-items: center;
    padding: 10px 12px; border: 2px solid rgba(9, 63, 43, 0.18); border-left: 6px solid #0a744a; border-radius: 14px;
    background: rgba(255, 255, 255, 0.78);
}
.video-adm-item:target { outline: 3px solid rgba(10, 116, 74, 0.55); outline-offset: 3px; }
/* Escondido: borda tracejada + miniatura apagada + selo "Escondido do site" (nunca só a cor). */
.video-adm-item--escondido { border-style: dashed; border-left-style: solid; border-left-color: #8a6a1a; background: rgba(255, 255, 255, 0.5); }
.video-adm-item--escondido .video-adm-thumb { opacity: 0.5; filter: grayscale(0.6); }
.video-adm-thumb { width: 128px; height: 72px; object-fit: cover; border-radius: 8px; background: #cfe6dc; display: block; }
.video-adm-corpo { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.video-adm-titulo { font-family: 'Comfortaa', 'Nunito', sans-serif; font-size: 1.02rem; color: #093f2b; overflow-wrap: anywhere; }
.video-adm-selos { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 0.9rem; }
.video-adm-acoes { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.video-adm-acoes .biblioteca-botao-linha { margin-top: 0; }
.video-adm-mini {
    min-width: 44px; min-height: 44px; padding: 0 10px; font-size: 1.2rem; font-weight: 800; line-height: 1; cursor: pointer;
    border: 2px solid rgba(9, 63, 43, 0.4); border-radius: 12px; background: #ffffff; color: #093f2b;
}
.video-adm-mini:hover:not(:disabled) { background: #d8f6eb; }
.video-adm-mini:disabled { opacity: 0.35; cursor: not-allowed; }
.video-adm-mini:focus-visible { outline: 3px solid #f0a000; outline-offset: 2px; }
.video-adm-excluir { color: #8a2a2a; border-color: rgba(154, 42, 26, 0.5); }
/* Popup: miniatura de conferência e opções de "quem pode ver". */
.video-adm-previa { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 0.9rem; color: #2a5d4a; }
.video-adm-previa img { width: 160px; height: 90px; object-fit: cover; border-radius: 8px; background: #cfe6dc; flex: none; }
.video-adm-previa[hidden], #video-erro[hidden] { display: none; }
#video-erro { margin: 0 0 12px; }
.video-adm-niveis { border: 0; padding: 0; margin: 10px 0 6px; display: flex; flex-direction: column; gap: 8px; }
.video-adm-niveis legend { padding: 0; margin-bottom: 4px; }
.video-adm-nivel { align-items: flex-start; width: 100%; box-sizing: border-box; padding-top: 8px; padding-bottom: 8px; }
.video-adm-nivel input { margin-top: 2px; flex: none; }
.video-adm-nivel-texto { display: block; font-weight: 600; font-size: 0.85rem; color: #2a5d4a; }
@media (max-width: 480px) {
    .video-adm-item { grid-template-columns: 96px minmax(0, 1fr); gap: 8px 10px; }
    .video-adm-thumb { width: 96px; height: 54px; }
    .video-adm-previa { flex-direction: column; align-items: flex-start; }
}

/* ===== Arquivar / restaurar contas (professor/alunos.php e professor/aluno.php) ===== */
/* Arquivar é neutro (cinza-azulado): guarda a conta sem apagar nada. */
.lista-alunos-acao.arquivar {
    color: #47617a;
    background: linear-gradient(to bottom, rgba(240, 246, 250, 0.9) 0%, rgba(214, 226, 236, 0.65) 100%);
}
.lista-alunos-acao.arquivar:hover { color: #2c4157; }
/* Linha de conta arquivada: mais apagada, com selo "Arquivada" (nunca só a cor). */
.lista-alunos-item--arquivado { border-left: 6px dashed #8a9aa8; background: rgba(255, 255, 255, 0.55); }
.lista-alunos-item--arquivado .lista-alunos-nome { color: #47617a; }
/* Faixa no alto da página de uma conta arquivada. */
.aluno-arquivado-faixa {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
    margin: 0 0 14px; padding: 12px 16px; border: 2px dashed #8a9aa8; border-radius: 14px;
    background: rgba(233, 240, 246, 0.85); color: #2c4157; text-align: left;
}
.aluno-arquivado-faixa p { margin: 0; flex: 1 1 260px; }
.aluno-arquivar-form { margin-top: 14px; }

/* ===== Arquivar / restaurar / excluir listas (professor/listas.php) — 2026-09-27 ===== */
/* Abas "Em uso" / "Arquivadas": ficam logo abaixo das abas Listas/Banco/Vídeos, um pouco menores. */
.filtro-listas { margin-top: -4px; font-size: 0.95em; }
/* Botões de cada linha lado a lado; no celular quebram de linha sem sair da tela. */
.lista-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.lista-acao-form { margin: 0; display: inline; }
/* Arquivar é neutro (cinza-azulado), igual ao das contas: guarda sem apagar. */
.lista-botao-arquivar { color: #47617a; }
/* Excluir tem cor de alerta e ícone de lixeira (nunca só a cor). */
.lista-botao-excluir { color: #8a2a2a; border-color: rgba(154, 42, 26, 0.5); }
.lista-botao-excluir:hover, .lista-botao-excluir:focus-visible { color: #6b1d1d; }
.lista-exclusao-bloqueada { font-size: 0.85rem; color: #5a4a3a; max-width: 22ch; }