/* ============================================================
   app.css — folha única da aplicação AppMundo
   ------------------------------------------------------------
   Convenção: MOBILE-FIRST. O CSS base é o do celular; cada
   faixa superior entra por media query `min-width`.

   Faixas de breakpoint (quatro, e só estas):
     base            até 480px   — celular
     >= 481px        481–768px   — celular grande / tablet retrato
     >= 769px        769–1024px  — tablet paisagem
     >= 1025px       1025px+     — desktop

   `@media` não aceita `var()`, então os valores aparecem
   literalmente nas media queries. Esta lista é a referência.
   ============================================================ */

:root {
    /* Paleta — valores idênticos aos que estavam inline */
    --c-azul: #3399ff;
    --c-azul-esc: #267acc;
    --c-azul-fundo: #cce7ff;
    --c-amarelo: #ffcc00;
    --c-amarelo-esc: #e6b800;

    /* Métricas da casca — valores BASE, do celular.
       As faixas superiores redefinem os tokens em vez de repetir cada regra;
       ver as media queries no fim do arquivo. */
    --sp-conteudo: 1rem;
    --sp-conteudo-v: 1.25rem;
    --nav-h: 56px;
    --r-card: 16px;
    --toque-min: 44px;
}

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

/* Nada pode estourar a largura da tela. */
img, svg, video { max-width: 100%; height: auto; }

/* O atributo `hidden` precisa vencer qualquer `display` declarado aqui. A regra
   do navegador (`[hidden] { display: none }`) perde de uma regra de classe, e
   `.form-actions { display: flex }` é exatamente esse caso: sem o `!important`,
   marcar o elemento como `hidden` no JavaScript não o esconderia. */
[hidden] { display: none !important; }

body {
    font-family: 'Lato', sans-serif;
    background: var(--c-azul-fundo);
    color: #000;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* NAVBAR */
.navbar {
    background: rgba(51,153,255,0.95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--c-amarelo);
    padding: 0 var(--sp-conteudo);
    display: flex; align-items: center; justify-content: space-between;
    height: var(--nav-h);
    position: sticky; top: 0; z-index: 100;
    box-shadow: 0 4px 30px rgba(0,0,0,0.2);
}
.navbar-brand {
    font-family: 'Cinzel Decorative', cursive;
    font-size: 1rem; font-weight: 700;
    color: #fff;
    text-decoration: none;
    display: flex; align-items: center; gap: 0.6rem;
}
.navbar-brand img {
    width: 44px; height: 44px;
    border-radius: 50%; object-fit: cover;
    border: 2px solid var(--c-amarelo);
    box-shadow: 0 0 10px rgba(255,204,0,0.5);
}
.navbar-brand span { text-shadow: 0 0 20px rgba(255,204,0,0.6); }

/* Botão hamburguer — só existe abaixo de 769px (escondido na faixa de tablet
   paisagem e no desktop, onde o menu cabe em linha). */
.nav-toggle {
    display: flex; align-items: center; justify-content: center;
    min-width: var(--toque-min); min-height: var(--toque-min);
    background: rgba(255,204,0,0.3);
    border: 1px solid var(--c-amarelo-esc); border-radius: 8px;
    color: #fff; font-size: 1.25rem; line-height: 1;
    cursor: pointer; transition: all 0.2s;
    font-family: 'Lato', sans-serif;
}
.nav-toggle:hover { background: var(--c-amarelo); color: #000; }

/* MENU — base é o celular: recolhido, e aberto como painel sob a barra.
   `display: none` (e não visibility/opacity) tira os itens da ordem de
   tabulação de graça: o foco por teclado não entra em item invisível. */
.navbar-menu { display: none; }
.navbar-menu.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    position: absolute;
    top: var(--nav-h); left: 0; right: 0;
    background: rgba(51,153,255,0.98);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--c-amarelo);
    box-shadow: 0 8px 30px rgba(0,0,0,0.25);
    padding: 0.5rem var(--sp-conteudo) 0.75rem;
    /* Se a lista passar da altura da tela, ela rola dentro do painel. */
    max-height: calc(100dvh - var(--nav-h));
    overflow-y: auto;
}
.navbar-menu a {
    padding: 0.5rem 1rem; border-radius: 8px;
    color: #fff; text-decoration: none;
    font-size: 0.875rem; font-weight: 600;
    letter-spacing: 0.03em; transition: all 0.2s; white-space: nowrap;
    display: flex; align-items: center;
    min-height: var(--toque-min);
}
.navbar-menu a:hover { background: var(--c-amarelo); color: #000; }
.navbar-menu a.active { background: var(--c-amarelo); color: #000; }
/* SUBMENUS
   Nenhuma regra `:hover` abre ou fecha submenu em nenhuma largura — a abertura
   é sempre por clique/toque, tratada em site.js. `:hover` aqui só pinta. */
.nav-parent-wrap { position: relative; display: flex; align-items: center; gap: 0.25rem; }

.nav-parent {
    display: flex; align-items: center; gap: 0.35rem;
    min-height: var(--toque-min);
    padding: 0.5rem 1rem; border-radius: 8px;
    background: none; border: none;
    color: #fff; font-size: 0.875rem; font-weight: 600;
    letter-spacing: 0.03em; white-space: nowrap;
    font-family: 'Lato', sans-serif;
    cursor: pointer; transition: all 0.2s;
}
.nav-parent:hover { background: var(--c-amarelo); color: #000; }
.nav-parent-toggle { min-width: var(--toque-min); justify-content: center; padding: 0.5rem; }
.nav-chevron { font-size: 0.7em; }
.nav-parent[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }

/* Recolhido por `display: none`: os filhos saem da ordem de tabulação, então o
   foco por teclado não entra em item invisível sem nenhum código extra. */
.nav-sub { display: none; list-style: none; }
.nav-sub.is-open { display: flex; flex-direction: column; gap: 0.25rem; }

/* Base (celular): acordeão dentro do próprio painel. */
.nav-parent-wrap { flex-wrap: wrap; }
.nav-sub.is-open {
    flex-basis: 100%;
    padding-left: 1rem;
}

.btn-logout {
    padding: 0.45rem 1rem;
    background: rgba(255,204,0,0.3);
    border: 1px solid var(--c-amarelo-esc); border-radius: 8px;
    color: #000; font-size: 0.8rem; font-weight: 600;
    transition: all 0.2s; cursor: pointer;
    font-family: 'Lato', sans-serif; white-space: nowrap;
}
.btn-logout:hover { background: var(--c-amarelo); color: #000; }

/* CONTEÚDO — cresce para empurrar o footer */
.main-content {
    flex: 1;
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    padding: var(--sp-conteudo-v) var(--sp-conteudo);
    min-width: 0; /* impede que um filho largo estique o shell flex */
}

/* FOOTER — no fluxo, empurrado para o fim pelo shell flex do body.
   Não é `position: fixed`: a altura do rodapé depende da largura (ele quebra
   em várias linhas no celular), e nenhum `padding-bottom` fixo no body
   funcionaria em todas as telas. `margin-top: auto` resolve sem compensação. */
.footer {
    background: #1a7fe8;
    border-top: 2px solid var(--c-amarelo);
    color: #fff;
    text-align: center;
    padding: 0.9rem var(--sp-conteudo);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    margin-top: auto;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.4rem 1.5rem;
}
.footer span { opacity: 0.85; }
.footer strong { color: var(--c-amarelo); }

/* CARDS */
.card {
    background: rgba(255,255,255,0.8);
    border: 1px solid var(--c-azul);
    border-radius: var(--r-card);
    padding: 1.5rem;
    margin-bottom: 1rem;
}
.page-title {
    font-family: 'Cinzel Decorative', cursive;
    font-size: 1.4rem; color: #000;
    margin-bottom: 1.5rem;
    text-shadow: 0 0 20px rgba(255,204,0,0.6);
}

/* TABELA */

/* Contêiner de rolagem: garante que uma tabela mais larga que a tela role
   dentro dela mesma, e nunca provoque rolagem horizontal do documento.
   Mantido em todas as faixas — é o que cobre o tablet paisagem (769–1024px),
   onde a tabela continua tabular. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table { width: 100%; border-collapse: collapse; }

/* Editar e Excluir moraram em dois `<td>` separados, contra um único
   `<th>Ações</th>`. Agora dividem uma célula; o espaçamento que antes vinha
   do padding da célula extra vem daqui. `display` da célula não é alterado,
   para não tirá-la do layout de tabela no desktop. */
.td-acoes a + a { margin-left: 0.5rem; }
th {
    text-align: left; padding: 0.75rem 1rem;
    font-size: 0.75rem; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: #000; border-bottom: 1px solid var(--c-amarelo);
}
td {
    padding: 0.9rem 1rem;
    font-size: 0.9rem; color: #000;
    border-bottom: 1px solid var(--c-azul);
    /* Um email ou endereço longo sem espaços quebra dentro da célula
       em vez de esticar a tabela. */
    overflow-wrap: anywhere;
}
tr:hover td { background: #fff9d6; }

/* CARTÕES — base, isto é, abaixo de 769px.
   Com 6 colunas, rolar de lado seria o único jeito de ler a linha inteira num
   celular. Cada registro passa a ser um bloco vertical, e o rótulo da coluna
   vem do `data-label` de cada célula.

   Contrapartida aceita: `display: block` remove a semântica de tabela para
   leitor de tela. O `data-label` preserva a associação rótulo–valor, que é a
   informação que importa; de 769px para cima a semântica tabular fica intacta. */
table, tbody, tr, td { display: block; }
thead { display: none; }

tr {
    border: 1px solid var(--c-azul);
    border-radius: var(--r-card);
    background: rgba(255,255,255,0.6);
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
}
tr:hover td { background: none; }

td {
    border-bottom: none;
    padding: 0.35rem 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
}
td::before {
    content: attr(data-label);
    flex: 0 0 6.5rem;
    font-size: 0.75rem; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--c-azul-esc);
}
/* A célula de ações não recebe rótulo: os próprios botões já se explicam. */
.td-acoes::before { content: none; }
.td-acoes { padding-top: 0.6rem; }
.btn-edit {
    padding: 0.3rem 0.8rem;
    background: var(--c-azul); border: 1px solid var(--c-azul-esc);
    border-radius: 6px; color: #fff;
    font-size: 0.8rem; font-weight: 600;
    text-decoration: none; transition: all 0.2s;
}
.btn-edit:hover { background: var(--c-azul-esc); }

/* ALVOS DE TOQUE — base, isto é, abaixo de 769px.
   Todo controle interativo tem no mínimo 44x44px CSS. As faixas de tablet
   paisagem e desktop desfazem o mínimo (ver a media query de 769px), para que
   a aparência no desktop siga a de antes desta mudança. */
.btn-edit,
.btn-save,
.btn-cancel,
.btn-primary,
.btn-logout {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: var(--toque-min); min-width: var(--toque-min);
}
/* Separação entre Editar e Excluir, para não haver acionamento acidental. */
.td-acoes { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.td-acoes a + a { margin-left: 0; }
.btn-primary {
    display: inline-block; padding: 0.6rem 1.2rem;
    background: linear-gradient(135deg, var(--c-azul), var(--c-amarelo));
    border-radius: 10px; color: #000;
    font-size: 0.875rem; font-weight: 600;
    text-decoration: none; transition: all 0.2s;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    margin-bottom: 1rem;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.3); }

/* FORMULÁRIOS */
.form-group { margin-bottom: 1.2rem; }
.form-group label {
    display: block; font-size: 0.75rem; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: #000; margin-bottom: 0.5rem;
}
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%; padding: 0.75rem 1rem;
    background: #fff; border: 1px solid var(--c-azul);
    border-radius: 10px; color: #000;
    /* 16px é o mínimo: abaixo disso o Safari no iOS aplica zoom automático ao
       focar o campo, e a página fica deslocada. Não é preferência estética. */
    font-size: 16px; font-family: 'Lato', sans-serif;
    outline: none; transition: all 0.2s;
    min-height: var(--toque-min);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--c-amarelo);
    box-shadow: 0 0 0 3px rgba(255,204,0,0.3);
}
.btn-save {
    padding: 0.75rem 2rem;
    background: linear-gradient(135deg, var(--c-azul), var(--c-amarelo));
    border: none; border-radius: 10px; color: #000;
    font-size: 0.9rem; font-weight: 600;
    font-family: 'Lato', sans-serif;
    cursor: pointer; transition: all 0.2s;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.btn-save:hover { transform: translateY(-2px); }
.btn-cancel {
    padding: 0.75rem 1.5rem; margin-left: 0.75rem;
    background: var(--c-amarelo); border: 1px solid var(--c-amarelo-esc);
    border-radius: 10px; color: #000;
    font-size: 0.9rem; font-weight: 600;
    font-family: 'Lato', sans-serif;
    cursor: pointer; text-decoration: none; transition: all 0.2s;
}
.btn-cancel:hover { background: var(--c-amarelo-esc); }

/* Ações do formulário: no celular empilham em coluna cheia, e nunca se
   sobrepõem nem exigem rolagem horizontal. */
.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}
.form-actions .btn-save,
.form-actions .btn-cancel { flex: 1 1 100%; margin-left: 0; }

/* Mensagem de validação, junto do campo a que pertence. */
.field-error {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.8rem;
    color: #a33;
}
.field-error:empty { display: none; }

/* AVISOS — mensagem de resultado ou de impedimento, no topo do conteúdo.
   Duas variantes e nada mais: `.alert` informa, `.alert-erro` impede. A cor
   não é o único sinal (o texto diz o que houve), porque cor sozinha não chega
   a quem não a distingue. */
.alert {
    background: rgba(255,255,255,0.85);
    border: 1px solid var(--c-azul);
    border-left: 5px solid var(--c-azul);
    border-radius: var(--r-card);
    padding: 0.9rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #000;
}
.alert p { margin: 0; }
.alert p + p { margin-top: 0.4rem; }
.alert-erro {
    border-color: #a33;
    border-left-color: #a33;
    background: #fdeaea;
}

/* LANÇAMENTO DE NOTAS
   Grade, e não tabela: uma tabela de formulário com um campo por linha só
   caberia no celular com rolagem horizontal. Aqui rótulo e campo empilham na
   tela pequena e vão para a mesma linha a partir de 481px. */

/* Ano / Bimestre / Tipo — o contexto que o servidor determinou e a tela não
   permite alterar. */
.contexto {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.5rem;
    margin-bottom: 1.25rem;
}
.contexto dt {
    font-size: 0.75rem; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--c-azul-esc);
    flex: 0 0 auto;
}
.contexto dd {
    font-size: 0.95rem; font-weight: 600;
    color: #000;
    margin-right: 0.5rem;
    flex: 0 0 auto;
}

/* Tipo / Turma / Aluno. Uma coluna no celular; três a partir do tablet
   paisagem, onde há largura para os três rótulos. */
.filtros {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 1.5rem;
}

.secao-titulo {
    font-size: 1rem; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--c-azul-esc);
    margin-bottom: 1rem;
}

.nota-linha {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.35rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--c-azul);
}
.nota-linha:last-of-type { border-bottom: none; }

.nota-disciplina {
    display: block;
    font-size: 0.8rem; font-weight: 600;
    letter-spacing: 0.04em;
    color: #000;
    align-self: center;
}

/* `width: 100%` no celular e largura fixa a partir de 481px. Os 16px de fonte
   e os 44px de altura mínima são os mesmos de `.form-group input` — abaixo de
   16px o Safari no iOS aplica zoom ao focar o campo. */
.nota-input {
    width: 100%;
    padding: 0.6rem 0.75rem;
    background: #fff; border: 1px solid var(--c-azul);
    border-radius: 10px; color: #000;
    font-size: 16px; font-family: 'Lato', sans-serif;
    outline: none; transition: all 0.2s;
    min-height: var(--toque-min);
}
.nota-input:focus {
    border-color: var(--c-amarelo);
    box-shadow: 0 0 0 3px rgba(255,204,0,0.3);
}
.nota-input:invalid { border-color: #a33; }

.nota-ajuda {
    margin-top: 0.75rem;
    font-size: 0.8rem;
    color: var(--c-azul-esc);
}

/* A mensagem de validação ocupa a linha inteira da grade, para não disputar
   espaço com o campo quando rótulo e campo estão lado a lado. */
.nota-linha .field-error { grid-column: 1 / -1; }

.user-badge {
    font-size: 0.8rem; color: #000;
    padding: 0.3rem 0.8rem;
    background: var(--c-amarelo);
    border-radius: 20px; border: 1px solid var(--c-amarelo-esc);
    white-space: nowrap;
}

/* ============================================================
   FAIXAS SUPERIORES — mobile-first, sempre `min-width`.
   Os valores literais repetem os do comentário do topo porque
   `@media` não aceita `var()`.
   ============================================================ */

/* >= 481px — celular grande / tablet retrato */
@media (min-width: 481px) {
    :root {
        --sp-conteudo: 1.25rem;
        --sp-conteudo-v: 1.5rem;
    }

    /* Já cabem lado a lado sem se apertarem. */
    .form-actions .btn-save,
    .form-actions .btn-cancel { flex: 0 0 auto; }

    /* Disciplina e nota na mesma linha. A coluna do campo é fixa em 9rem: o
       nome da disciplina fica com o resto, e um nome longo quebra em duas
       linhas em vez de empurrar o campo para fora da tela. */
    .nota-linha {
        grid-template-columns: minmax(0, 1fr) 9rem;
        gap: 0.5rem 1rem;
        align-items: center;
    }
}

/* >= 769px — tablet paisagem: a navbar volta a caber em linha */
@media (min-width: 769px) {
    :root {
        --sp-conteudo: 2rem;
        --sp-conteudo-v: 2rem;
        --nav-h: 68px;
    }

    /* Sem hamburguer: o menu é a barra. */
    .nav-toggle { display: none; }

    /* Restaura o menu em linha. `.is-open` não tem efeito aqui — o JS ainda
       limpa a classe ao cruzar o breakpoint, para não deixar estado inválido. */
    .navbar-menu,
    .navbar-menu.is-open {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
        position: static;
        background: none;
        backdrop-filter: none;
        border-bottom: none;
        box-shadow: none;
        padding: 0;
        max-height: none;
        overflow: visible;
    }

    /* O mínimo de 44px vale abaixo de 769px. Aqui o item volta à altura
       original, definida por conteúdo + padding. */
    .navbar-menu a { min-height: 0; }
    .nav-parent { min-height: 0; }

    /* O mínimo de 44px é regra de toque; da faixa de tablet paisagem para cima
       os controles voltam ao tamanho original. */
    .btn-edit,
    .btn-save,
    .btn-cancel,
    .btn-primary,
    .btn-logout {
        min-height: 0; min-width: 0;
    }
    .btn-edit { display: inline; }
    .btn-primary { display: inline-block; }

    /* TABELA volta a ser tabular: cabeçalho visível, células em linha.
       A rolagem, se necessária, fica contida em `.table-wrap`. */
    table, thead, tbody, tr, th, td { display: revert; }
    tr { border: none; margin: 0; border-radius: 0; background: none; padding: 0; }
    td { padding: 0.9rem 1rem; }
    td::before { content: none; }
    .td-acoes { display: table-cell; }
    .td-acoes a + a { margin-left: 0.5rem; }

    /* Tipo, turma e aluno lado a lado: a partir daqui há largura para os três. */
    .filtros { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    /* O botão "Carregar" (visível só sem JavaScript) ocupa a linha inteira
       abaixo dos três campos. */
    .filtros .form-actions { grid-column: 1 / -1; margin-top: 0; }

    /* Submenu vira painel suspenso ancorado ao item pai — ainda aberto por
       clique/toque, não por hover. */
    .nav-parent-wrap { flex-wrap: nowrap; }
    .nav-sub.is-open {
        flex-basis: auto;
        position: absolute;
        top: calc(100% + 0.35rem);
        left: 0;
        min-width: 100%;
        z-index: 200;
        padding: 0.4rem;
        background: rgba(51,153,255,0.98);
        backdrop-filter: blur(12px);
        border: 1px solid var(--c-amarelo);
        border-radius: 10px;
        box-shadow: 0 8px 30px rgba(0,0,0,0.25);
    }
}

/* >= 1025px — desktop: espaçamento vertical original do topo */
@media (min-width: 1025px) {
    .main-content { padding-top: 2.5rem; }
}