/* assets/css/global.css
 * ----------------------------------------------------------------------------
 * O tema do Vernákula: uma academia de idiomas medieval, pintada ao fundo, com
 * o conteúdo em folhas de papel antigo. Reformulado em 30/09/2026 a partir dos
 * prints que o Alcy desenhou (pasta "identidade visual").
 *
 * Como está organizado:
 *   1. Variáveis (cores, fontes) — e as antigas apontando para as novas
 *   2. Base
 *   3. A moldura: fundo pintado, menu lateral, caixa do usuário, barra do celular
 *   4. A folha de papel (main.container) e o que mora dentro dela
 *   5. Peças: botões, campos, abas, tabelas, janelas, gavetas
 *   6. Peças novas das páginas redesenhadas (cartões, linhas, emblemas…)
 *   7. Leitor de lição, utilitários, impressão
 *
 * As páginas antigas foram escritas para fundo escuro, com as cores coladas no
 * HTML. As variáveis antigas (--fundo, --card, --dourado, --texto, --borda)
 * continuam existindo e agora valem as cores do papel — é isso que faz uma
 * página não convertida ainda ficar legível.
 * ------------------------------------------------------------------------- */

[hidden] { display: none !important; }

/* ================= 1. VARIÁVEIS ================= */
:root {
    --vk-noite: #071A1E;
    --vk-verde-900: #0A2227;
    --vk-verde-800: #0D2C32;
    --vk-verde-700: #113A42;
    --vk-verde-600: #17505A;
    --vk-verde-borda: #2A5259;
    --vk-ouro: #C9A24A;
    --vk-ouro-claro: #E6CB8B;
    --vk-ouro-escuro: #8A6424;
    --vk-creme: #F3E7CE;
    --vk-creme-2: #CDBF9F;

    --vk-papel: #EAD9B6;
    --vk-papel-claro: #F6EEDB;
    --vk-papel-escuro: #DCC59B;
    --vk-papel-solido: #E4D0A8;
    --vk-papel-linha: rgba(98, 66, 28, 0.26);
    --vk-papel-linha-forte: rgba(98, 66, 28, 0.5);
    --vk-papel-tom: rgba(98, 66, 28, 0.07);
    --vk-papel-tom-2: rgba(98, 66, 28, 0.12);

    /* O "vidro" é o branco-creme translúcido dos cartões, abas e botões sobre o
       papel; o "véu" é uma camada marrom por cima da textura do papel. No padrão o
       véu não existe e o vidro é creme; nas páginas de trabalho (veja "O papel de
       trabalho", mais abaixo) o véu escurece o papel e o vidro vira bege — são só
       estes dois números que mudam, e todas as peças acompanham. */
    --vk-vidro: 255, 249, 234;
    --vk-vidro-2: 255, 246, 225;
    --vk-veu: transparent;
    --vk-cartao-1: #F1E3C4;   /* cartões e fichas em relevo: de cima para baixo */
    --vk-cartao-2: #E4CFA4;

    --vk-tinta: #2B1E13;
    --vk-tinta-2: #5A4531;
    --vk-tinta-3: #6A563D;
    --vk-destaque: #7A4A12;
    --vk-link: #174E57;

    --vk-sucesso: #225428;  --vk-sucesso-fundo: rgba(34, 84, 40, 0.12);
    --vk-erro: #992B2B;     --vk-erro-fundo: rgba(153, 43, 43, 0.10);
    --vk-aviso: #86570A;    --vk-aviso-fundo: rgba(176, 122, 20, 0.15);
    --vk-info: #1F4E79;     --vk-info-fundo: rgba(31, 78, 121, 0.10);
    --vk-roxo: #4E2D6B;
    --vk-vinho: #6E1F2B;

    --vk-titulo: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
    --vk-serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
    --vk-caps: 'Cinzel', 'Cormorant Garamond', Georgia, serif;
    --vk-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --vk-leitura: 'Merriweather', Georgia, serif;

    --vk-lateral: 252px;
    --vk-topo-cel: 58px;
    --vk-barra-cel: 64px;
    --vk-raio: 8px;

    /* As variáveis do tema antigo. Páginas antigas usam estas; elas agora
       valem as cores do papel. */
    --fundo: var(--vk-papel);
    --card: var(--vk-papel-solido);
    --dourado: var(--vk-destaque);
    --texto: var(--vk-tinta);
    --borda: var(--vk-papel-linha);
}

/* ================= 2. BASE ================= */
html { font-size: 17px; -webkit-text-size-adjust: 100%; }
body {
    background-color: var(--vk-noite); color: var(--vk-creme);
    font-family: var(--vk-serif); font-size: 1rem; line-height: 1.5;
    margin: 0; padding-bottom: 0;
    /* As Garamond desenham os números "à moda antiga" (o 1 vira um i
       pequeno). Em "Inglês 1" e "21/08/2026" isso confunde. */
    font-variant-numeric: lining-nums;
}
a { color: var(--vk-link); }
img { max-width: 100%; }
::selection { background: rgba(201, 162, 74, 0.45); color: #1B130B; }
:focus-visible { outline: 2px solid var(--vk-ouro); outline-offset: 2px; }
.fonte-magica { font-family: var(--vk-titulo); font-weight: 700; color: inherit; letter-spacing: 0.2px; }

/* ================= 3. A MOLDURA ================= */

/* O fundo pintado. Fica parado atrás de tudo e escurece para baixo, onde o
   papel encosta — sem isso a pintura briga com o texto. */
.vk-fundo {
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background-color: var(--vk-noite);
    background-image:
        linear-gradient(180deg, rgba(3, 13, 15, 0.10) 0%, rgba(3, 13, 15, 0.35) 38%, rgba(3, 13, 15, 0.78) 100%),
        var(--vk-fundo-pc, none);
    background-size: cover; background-position: center top; background-repeat: no-repeat;
}

/* Quem tem moldura dá lugar ao menu lateral. :has() é o que deixa a página
   continuar sem saber que o menu existe. */
body:has(.vk-lateral) { padding-left: var(--vk-lateral); padding-top: 70px; }

.vk-lateral {
    position: fixed; top: 0; bottom: 0; left: 0; width: var(--vk-lateral); z-index: 1600;
    display: flex; flex-direction: column; box-sizing: border-box;
    background: linear-gradient(180deg, #0C282E 0%, #0A2227 45%, #071B1F 100%);
    border-right: 1px solid rgba(201, 162, 74, 0.35);
    box-shadow: 6px 0 24px rgba(0, 0, 0, 0.45);
    overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(201,162,74,.35) transparent;
}
.vk-lateral::before, .vk-lateral::after { /* os cantinhos dourados do print */
    content: ''; position: absolute; width: 26px; height: 26px; pointer-events: none;
    border: 1px solid rgba(201, 162, 74, 0.55);
}
.vk-lateral::before { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.vk-lateral::after { bottom: 8px; left: 8px; border-right: 0; border-top: 0; position: fixed; }
.vk-lateral-logo { display: block; padding: 20px 26px 12px; text-align: center; }
.vk-lateral-logo img { width: 178px; height: auto; display: inline-block; filter: drop-shadow(0 4px 10px rgba(0,0,0,.5)); }
.vk-lateral-fechar { display: none; }

.vk-menu { flex: 1; padding: 6px 0 12px; }
.vk-menu-rotulo {
    display: block; padding: 16px 26px 6px; font-family: var(--vk-caps); font-size: 0.66rem; font-weight: 600;
    letter-spacing: 0.2em; text-transform: uppercase; color: rgba(201, 162, 74, 0.8);
}
.vk-menu-grupo.especial .vk-menu-rotulo { color: var(--vk-ouro-claro); }
.vk-menu a {
    position: relative; display: flex; align-items: center; gap: 14px;
    margin: 1px 12px 1px 0; padding: 10px 18px 10px 26px; min-height: 26px;
    color: var(--vk-creme); text-decoration: none; font-family: var(--vk-serif); font-size: 1.06rem; line-height: 1.2;
    transition: background 0.15s, color 0.15s;
}
.vk-menu a .material-symbols-outlined { font-size: 22px; color: #D9C597; flex-shrink: 0; width: 24px; text-align: center; }
.vk-menu a:hover { background: rgba(201, 162, 74, 0.10); }
.vk-menu a.ativo {
    color: #FFF8E6;
    background: linear-gradient(90deg, rgba(201, 162, 74, 0.34), rgba(201, 162, 74, 0.14));
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%);
    box-shadow: inset 3px 0 0 var(--vk-ouro);
}
.vk-menu a.ativo .material-symbols-outlined { color: var(--vk-ouro-claro); }
.vk-menu-ponto { width: 24px; display: flex; justify-content: center; flex-shrink: 0; }
.vk-menu-ponto i { width: 11px; height: 11px; border-radius: 3px; transform: rotate(45deg); background: var(--cor, var(--vk-ouro)); box-shadow: 0 0 0 2px rgba(0,0,0,.35), 0 0 0 3px rgba(201,162,74,.45); }
.vk-menu-texto { display: flex; flex-direction: column; min-width: 0; }
.vk-menu-texto small { font-size: 0.78rem; color: var(--vk-creme-2); margin-top: 1px; }
.vk-menu-botao { /* "Ajuda" e "Informar erro" são botões, não links */
    /* O <a> é content-box: sem border-box, a largura de 100% mais os 44px de recuo
       passava 31px da borda do menu e criava uma barra de rolagem horizontal. */
    box-sizing: border-box; width: calc(100% - 12px); background: none; border: 0; cursor: pointer; text-align: left;
}

.vk-lateral-pe { padding: 10px 18px 26px; text-align: center; }
.vk-lema { margin-top: 10px; }
.vk-lema img { width: 170px; opacity: 0.85; display: block; margin: 0 auto 8px; filter: sepia(1) saturate(2.4) brightness(1.25); }
.vk-lema span {
    display: block; font-family: var(--vk-caps); font-size: 0.64rem; letter-spacing: 0.2em; line-height: 1.7;
    text-transform: uppercase; color: rgba(201, 162, 74, 0.85);
}

/* Tela de notebook (768 px de altura): o menu do aluno, com todos os grupos,
   não cabia e o lema do pé ficava escondido. Em tela baixa tudo encolhe um
   pouco; em tela mais baixa ainda, o menu rola sozinho. */
@media (min-width: 901px) and (max-height: 880px) {
    .vk-lateral-logo { padding: 14px 26px 6px; }
    .vk-lateral-logo img { width: 142px; }
    .vk-menu-rotulo { padding: 11px 26px 4px; }
    .vk-menu a { padding-top: 7px; padding-bottom: 7px; font-size: 1rem; }
    .vk-lateral-pe { padding: 4px 18px 18px; }
    .vk-lema img { width: 140px; margin-bottom: 4px; }
}

/* A caixa do usuário, no alto à direita. */
.vk-topo {
    position: fixed; top: 10px; right: 14px; z-index: 1500;
    display: flex; align-items: center; gap: 4px; padding: 5px 6px 5px 8px;
    background: linear-gradient(180deg, rgba(12, 40, 46, 0.94), rgba(7, 27, 31, 0.94));
    border: 1px solid rgba(201, 162, 74, 0.5); border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); backdrop-filter: blur(6px);
}
.vk-topo-logo { display: none; }
.vk-topo-btn {
    width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; cursor: pointer;
    color: var(--vk-ouro-claro); display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none; transition: background .15s;
}
.vk-topo-btn:hover { background: rgba(201, 162, 74, 0.14); }
.vk-topo-btn .material-symbols-outlined { font-size: 23px; }
.vk-usuario { position: relative; }
.vk-usuario-botao {
    display: flex; align-items: center; gap: 10px; padding: 3px 6px 3px 4px; margin-left: 4px;
    background: transparent; border: 0; border-left: 1px solid rgba(201, 162, 74, 0.28); cursor: pointer; color: var(--vk-creme);
    font-family: var(--vk-serif); text-align: left;
}
.vk-avatar {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 35% 30%, #235F69, #0D2F35);
    border: 2px solid var(--vk-ouro); color: var(--vk-creme);
    font-family: var(--vk-caps); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.05em;
    margin-left: 8px;
}
.vk-usuario-nome { display: flex; flex-direction: column; line-height: 1.1; }
.vk-usuario-nome strong { font-family: var(--vk-titulo); font-size: 1.12rem; font-weight: 700; }
.vk-usuario-nome small { font-size: 0.8rem; color: var(--vk-creme-2); }
.vk-usuario-botao .material-symbols-outlined { color: var(--vk-ouro-claro); font-size: 22px; transition: transform .2s; }
.vk-usuario.aberto .vk-usuario-botao .material-symbols-outlined { transform: rotate(180deg); }
.vk-usuario-menu {
    position: absolute; right: 0; top: calc(100% + 10px); min-width: 250px; z-index: 1700;
    background: #0B272C; border: 1px solid rgba(201, 162, 74, 0.5); border-radius: 10px; padding: 8px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55);
}
.vk-usuario-menu .vk-usuario-completo { padding: 8px 10px 10px; border-bottom: 1px solid rgba(201,162,74,.22); margin-bottom: 6px; }
.vk-usuario-menu .vk-usuario-completo strong { display: block; color: var(--vk-creme); font-family: var(--vk-titulo); font-size: 1.1rem; }
.vk-usuario-menu .vk-usuario-completo span { color: var(--vk-creme-2); font-size: 0.85rem; }
.vk-usuario-menu a, .vk-usuario-menu button {
    display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box;
    padding: 10px 10px; border: 0; background: none; border-radius: 6px; cursor: pointer;
    color: var(--vk-creme); text-decoration: none; font-family: var(--vk-serif); font-size: 1rem; text-align: left;
}
.vk-usuario-menu a:hover, .vk-usuario-menu button:hover { background: rgba(201, 162, 74, 0.12); }
.vk-usuario-menu .material-symbols-outlined { color: var(--vk-ouro-claro); font-size: 21px; }
.vk-usuario-menu .vk-sair { color: #F1B3A8; }
.vk-usuario-menu .vk-sair .material-symbols-outlined { color: #F1B3A8; }

/* A barra de baixo, só no celular. */
.vk-barra-cel { display: none; }

.overlay-menu { position: fixed; inset: 0; background: rgba(2, 10, 12, 0.66); z-index: 1999; display: none; backdrop-filter: blur(3px); }
.overlay-menu.ativo { display: block; }
body.travar-rolagem { overflow: hidden; }

/* ================= 4. A FOLHA DE PAPEL ================= */

/* main.container é a folha em que cada página escreve. Ela é MONTADA, e não
   uma imagem esticada: a textura do papel se repete sem emenda, os quatro
   cantos de metal são imagens pequenas presas nos cantos, e a borda queimada
   é sombra. Assim a folha cresce com o conteúdo — uma página de 4000 px ou um
   recado de duas linhas — sem nada deformar. (Esticar a imagem inteira, o
   primeiro jeito tentado, riscava o papel de listras verticais.) */
.container, .vk-folha {
    position: relative; box-sizing: border-box;
    width: calc(100% - 44px); max-width: 1140px; margin: 8px auto 30px;
    padding: 42px 48px 46px;
    color: var(--vk-tinta); border-radius: 3px;
    background:
        url('/assets/img/tema/canto-se.webp') left top / 88px no-repeat,
        url('/assets/img/tema/canto-sd.webp') right top / 88px no-repeat,
        url('/assets/img/tema/canto-ie.webp') left bottom / 88px no-repeat,
        url('/assets/img/tema/canto-id.webp') right bottom / 88px no-repeat,
        linear-gradient(var(--vk-veu), var(--vk-veu)),
        url('/assets/img/tema/papel-textura.webp') center top / 560px repeat,
        #E8D4AE;
    box-shadow: inset 0 0 0 1px rgba(92, 60, 22, 0.45), inset 0 0 46px rgba(128, 84, 32, 0.42),
                inset 0 0 130px rgba(150, 105, 45, 0.16), 0 18px 34px rgba(0, 0, 0, 0.6);
}
.vk-folha-estreita { max-width: 860px; }
.container h1, .container h2, .container h3, .container h4,
.vk-folha h1, .vk-folha h2, .vk-folha h3, .vk-folha h4 { color: #251910; }
.container h1.fonte-magica, .vk-folha h1.fonte-magica, .vk-titulo-pagina {
    color: #251910 !important; /* páginas antigas pintavam o título de dourado no HTML */
    font-family: var(--vk-titulo); font-weight: 700; font-size: 2.35rem; line-height: 1.12; margin: 0 0 4px;
    display: block; /* em bloco, e não flex: com flex, um título longo descia
                       inteiro para a linha de baixo e o ícone ficava sozinho */
}
.container h1.fonte-magica > .material-symbols-outlined, .vk-titulo-pagina > .material-symbols-outlined { font-size: 0.9em !important; color: #3A2716; vertical-align: -0.13em !important; margin-right: 4px; }
/* O filete com a estrela embaixo do título, igual aos prints. */
.container h1.fonte-magica::after, .vk-folha h1.fonte-magica::after, .vk-titulo-pagina::after {
    content: ''; display: block; width: 100%; height: 22px; margin-top: 8px;
    background: url('/assets/img/tema/papel-6.webp') no-repeat left center / auto 22px;
    opacity: 0.9;
}
.container h2.fonte-magica, .vk-folha h2.fonte-magica { font-size: 1.55rem; line-height: 1.15; }
.container h3.fonte-magica, .vk-folha h3.fonte-magica { font-size: 1.25rem; }
.container p, .vk-folha p { line-height: 1.55; }
.container a:not([class]), .vk-folha a:not([class]) { color: var(--vk-link); }
.container hr, .vk-folha hr { border: 0; border-top: 1px solid var(--vk-papel-linha); }
.container code { background: var(--vk-papel-tom-2); padding: 1px 5px; border-radius: 3px; font-size: 0.9em; }

.box {
    background: linear-gradient(180deg, rgba(var(--vk-vidro), 0.45), rgba(var(--vk-vidro-2), 0.25));
    border: 1px solid var(--vk-papel-linha); border-radius: var(--vk-raio);
    box-shadow: inset 0 0 0 3px rgba(var(--vk-vidro), 0.35), 0 1px 0 rgba(255,255,255,.35);
    padding: 22px; margin-bottom: 22px; color: var(--vk-tinta);
}

/* ---- O papel de trabalho ----------------------------------------------------
   O papel claro é bonito para chegar (Início, sala da turma) e cansa para ficar:
   quem passa a tarde no diário, no plano de aula ou numa correção olha para uma
   folha enorme e para campos quase brancos. Nessas páginas o papel fica mais
   escuro e os campos deixam de ser a coisa mais clara da tela.

   Quem decide é `vk_pagina_de_trabalho()` (includes/tema.php): o cabeçalho põe a
   classe `vk-trabalho` no fundo, e o `:has()` abaixo troca as variáveis. Só
   variáveis — nenhuma peça é redesenhada, e a página não sabe que isso existe.

   Ao escurecer o papel, o texto de apoio e as cores de estado precisam escurecer
   junto, senão perdem o contraste mínimo (4,5:1). Os valores abaixo foram
   medidos com `_dev/ferramentas/contraste.py`, e não escolhidos a olho. */
body:has(.vk-fundo.vk-trabalho) {
    --vk-veu: rgba(48, 32, 12, 0.21);
    --vk-vidro: 214, 198, 160;
    --vk-vidro-2: 208, 192, 154;
    --vk-papel: #CDB992;
    --vk-papel-claro: #CFBF99;
    --vk-cartao-1: #D0BF98;
    --vk-cartao-2: #C0AB80;
    --vk-papel-escuro: #BFA97D;
    --vk-papel-solido: #C8B48B;
    --vk-papel-linha: rgba(70, 46, 18, 0.34);
    --vk-papel-linha-forte: rgba(70, 46, 18, 0.55);
    --vk-papel-tom: rgba(70, 46, 18, 0.09);
    --vk-papel-tom-2: rgba(70, 46, 18, 0.15);

    --vk-tinta: #1F150C;
    --vk-tinta-2: #3A2B1C;
    --vk-tinta-3: #3F2E1B;
    --vk-destaque: #4A2B06;
    --vk-link: #0C3840;

    --vk-sucesso: #14361B;  --vk-sucesso-fundo: rgba(20, 54, 27, 0.14);
    --vk-erro: #651616;     --vk-erro-fundo: rgba(101, 22, 22, 0.12);
    --vk-aviso: #4F3304;    --vk-aviso-fundo: rgba(79, 51, 4, 0.16);
    --vk-info: #12304F;     --vk-info-fundo: rgba(18, 48, 79, 0.12);

    --fundo: var(--vk-papel);
    --card: var(--vk-papel-solido);
    --dourado: var(--vk-destaque);
    --texto: var(--vk-tinta);
    --borda: var(--vk-papel-linha);
}
body:has(.vk-fundo.vk-trabalho) .input-base::placeholder { color: #6B5A42; }

/* ================= 5. PEÇAS ================= */

/* ---- campos ---- */
.input-base {
    width: 100%; padding: 11px 13px; box-sizing: border-box; margin-bottom: 15px;
    background: var(--vk-papel-claro); color: var(--vk-tinta);
    border: 1px solid var(--vk-papel-linha-forte); border-radius: 6px;
    font-family: var(--vk-sans); font-size: 0.94rem; line-height: 1.45; min-height: 46px;
    box-shadow: inset 0 1px 2px rgba(60, 40, 15, 0.12);
    transition: border-color .15s, box-shadow .15s;
}
.input-base::placeholder { color: #9A8872; }
.input-base:focus { outline: none; border-color: var(--vk-verde-600); box-shadow: 0 0 0 3px rgba(23, 80, 90, 0.18); }
textarea.input-base { height: auto; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--vk-verde-600); }
select.input-base, #dropdown_turma_toggle {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24' fill='%235A4531'%3E%3Cpath d='M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important; background-position: right 10px center !important; background-size: 22px !important;
    padding-right: 38px !important; color: var(--vk-tinta) !important; background-color: var(--vk-papel-claro) !important;
}
select option { background-color: var(--vk-papel-claro) !important; color: var(--vk-tinta) !important; }
#dropdown_turma_toggle .material-symbols-outlined { display: none !important; }
#filtro_turma_label { font-size: 1rem; color: var(--vk-tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
label { color: inherit; }

/* ---- botões ---- */
.btn-salvar, .vk-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box;
    height: 46px; padding: 0 20px; border-radius: 7px; cursor: pointer; text-align: center; text-decoration: none !important;
    background: linear-gradient(180deg, #1A5A64 0%, #113C44 100%); color: #F7EDD6 !important;
    border: 1px solid rgba(201, 162, 74, 0.55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 2px 5px rgba(20, 12, 4, 0.25);
    font-family: var(--vk-serif); font-weight: 600; font-size: 1.04rem; letter-spacing: 0.2px;
    transition: filter .15s, transform .05s;
}
.btn-salvar:hover, .vk-btn:hover { filter: brightness(1.12); }
.btn-salvar:active, .vk-btn:active { transform: translateY(1px); }
.btn-salvar .material-symbols-outlined { font-size: 1.2rem; }
.btn-secundario {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box;
    height: 46px; padding: 0 16px; border-radius: 7px; cursor: pointer; text-decoration: none !important;
    background: rgba(var(--vk-vidro), 0.35); color: var(--vk-tinta);
    border: 1px solid var(--vk-papel-linha-forte);
    font-family: var(--vk-serif); font-weight: 600; font-size: 0.98rem;
    transition: background .15s, border-color .15s;
}
.btn-secundario:hover { background: rgba(var(--vk-vidro), 0.7); border-color: rgba(98, 66, 28, 0.7); }
/* Botão com contador ("Unidades (<span>2</span>)"): o espaçamento do flex
   separava os pedaços e aparecia "( 2 )". Sem espaçamento, só o ícone afastado. */
.btn-secundario:has(> span[id^="count_"]) { gap: 0; }
.btn-secundario:has(> span[id^="count_"]) > .material-symbols-outlined { margin-right: 6px; }
.btn-perigo {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box;
    height: 46px; padding: 0 16px; border-radius: 7px; cursor: pointer; text-decoration: none !important;
    background: transparent; color: var(--vk-erro); border: 1px solid rgba(153, 43, 43, 0.55);
    font-family: var(--vk-serif); font-weight: 600; font-size: 0.98rem;
    transition: background .15s;
}
.btn-perigo:hover { background: var(--vk-erro-fundo); }
.btn-icone { width: 38px; height: 38px; padding: 0; border-radius: 7px; }
.btn-icone .material-symbols-outlined { font-size: 1.25rem; margin: 0; line-height: 1; display: flex; align-items: center; justify-content: center; }
button:disabled, .btn-salvar:disabled, .btn-secundario:disabled { opacity: 0.5; cursor: not-allowed; filter: none; }

.txt-wrap { word-break: break-word; overflow-wrap: anywhere; line-height: 1.4; display: block; }
.txt-email { word-break: break-all; }
.form-inline { display: flex; gap: 10px; align-items: center; width: 100%; box-sizing: border-box; }
.form-inline .input-base { margin-bottom: 0; }
.barra-filtros {
    display: flex; gap: 10px; flex-wrap: wrap; align-items: center; box-sizing: border-box;
    background: var(--vk-papel-tom); padding: 14px; border-radius: var(--vk-raio); border: 1px solid var(--vk-papel-linha); margin-bottom: 20px;
}

/* ---- tabelas em sanfona ---- */
.table-wrapper { width: 100%; box-sizing: border-box; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* tabela larga rola dentro da caixa, não a página */
.table-accordion { width: 100%; display: flex; flex-direction: column; margin-top: 5px; }
.table-accordion thead { display: none; }
.table-accordion tbody { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.table-accordion tr {
    display: flex; flex-direction: column; box-sizing: border-box; width: 100%; overflow: hidden;
    background: rgba(var(--vk-vidro), 0.4); border: 1px solid var(--vk-papel-linha); border-radius: var(--vk-raio); transition: background 0.2s;
}
.table-accordion td { display: none; padding: 13px 15px; border: none; text-align: left; width: 100%; box-sizing: border-box; }
.table-accordion td.td-header { display: flex; align-items: center; justify-content: space-between; cursor: pointer; gap: 10px; }
.table-accordion td.td-header .col-esq { display: flex; align-items: center; gap: 12px; flex-grow: 1; overflow: hidden; }
.table-accordion td.td-header .col-esq strong { white-space: normal; word-break: break-word; font-size: 1.08rem; }
.table-accordion td.td-header .col-dir { display: flex; align-items: center; flex-shrink: 0; }
.table-accordion tr.expandido { background: rgba(var(--vk-vidro), 0.7); border-color: var(--vk-papel-linha-forte); }
.table-accordion tr.expandido td.td-detalhe { display: flex; flex-direction: column; align-items: flex-start; border-top: 1px dashed var(--vk-papel-linha); }
.table-accordion td.td-detalhe::before { content: attr(data-label); font-family: var(--vk-caps); font-size: 0.68rem; color: var(--vk-tinta-2); margin-bottom: 4px; text-transform: uppercase; font-weight: 600; letter-spacing: 0.12em; }
.btn-expandir { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; color: var(--vk-tinta-2); transition: transform 0.3s ease, background 0.3s; background: var(--vk-papel-tom); margin: 0; }
.btn-expandir .material-symbols-outlined { margin: 0; padding: 0; line-height: 1; }
.table-accordion tr.expandido .btn-expandir { transform: rotate(180deg); background: var(--vk-papel-tom-2); }
.acoes-botoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 5px; }

/* ---- tabela comum dentro do papel ---- */
.container table:not(.table-accordion), .vk-folha table:not(.table-accordion) { border-collapse: collapse; }
.container th, .vk-folha th { font-family: var(--vk-caps); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vk-tinta-2); }

/* ---- abas ---- */
.abas { display: flex; gap: 8px; margin-bottom: 26px; padding-bottom: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; border-bottom: 0; }
.abas::-webkit-scrollbar { display: none; }
.aba {
    display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; white-space: nowrap;
    padding: 10px 18px; border-radius: 7px; text-decoration: none;
    color: var(--vk-tinta); background: rgba(var(--vk-vidro), 0.4); border: 1px solid var(--vk-papel-linha-forte);
    font-family: var(--vk-serif); font-weight: 600; font-size: 1rem; transition: background .15s;
}
.aba:hover { background: rgba(var(--vk-vidro), 0.75); }
.aba.ativa { background: linear-gradient(180deg, #17505A, #0F3A42); color: #F7EDD6; border-color: #0B2A30; box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.aba .material-symbols-outlined { font-size: 1.15rem; }

/* ---- campo de arquivo: o botão nativo vinha cinza, de sistema ---- */
input[type="file"] { max-width: 100%; font-family: var(--vk-serif); font-size: 0.92rem; color: var(--vk-tinta-2); }
input[type="file"]::file-selector-button {
    margin-right: 10px; padding: 7px 14px; border-radius: 6px; cursor: pointer;
    border: 1px solid var(--vk-papel-linha-forte); background: rgba(var(--vk-vidro), 0.65); color: var(--vk-tinta);
    font-family: var(--vk-serif); font-weight: 600; font-size: 0.92rem;
}
input[type="file"]::file-selector-button:hover { background: rgba(var(--vk-vidro), 0.95); }

/* ---- paginação ---- */
.paginacao { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 20px 0; flex-wrap: wrap; }
.btn-pag { background: rgba(var(--vk-vidro), 0.4); border: 1px solid var(--vk-papel-linha-forte); color: var(--vk-tinta); padding: 7px 12px; border-radius: 6px; cursor: pointer; font-family: var(--vk-serif); font-weight: 600; min-width: 38px; }
.btn-pag:hover { background: rgba(var(--vk-vidro), 0.8); }
.btn-pag.ativo { background: #113C44; color: #F7EDD6; border-color: #0B2A30; }
.btn-pag:disabled { opacity: 0.35; cursor: not-allowed; }

/* ---- janelas ---- */
.modal { display: none; position: fixed; inset: 0; background: rgba(2, 10, 12, 0.72); z-index: 3000; justify-content: center; align-items: center; backdrop-filter: blur(4px); }
.modal-conteudo, .modal-box {
    box-sizing: border-box; width: 92%; max-width: 520px; max-height: 86vh; overflow-y: auto;
    color: var(--vk-tinta); padding: 32px 34px 32px; border-radius: 3px;
    background:
        url('/assets/img/tema/orna-se.webp') left top / 60px no-repeat,
        url('/assets/img/tema/orna-sd.webp') right top / 60px no-repeat,
        url('/assets/img/tema/orna-ie.webp') left bottom / 60px no-repeat,
        url('/assets/img/tema/orna-id.webp') right bottom / 60px no-repeat,
        linear-gradient(var(--vk-veu), var(--vk-veu)),
        url('/assets/img/tema/papel-textura.webp') center / 520px repeat, #E9D6B1;
    box-shadow: inset 0 0 0 1px rgba(92, 60, 22, 0.5), inset 0 0 34px rgba(128, 84, 32, 0.4), 0 24px 48px rgba(0, 0, 0, 0.6);
}
.modal-conteudo h2, .modal-conteudo h3, .modal-box h2, .modal-box h3 { color: #251910; }
.modal-feedback { display: none; position: fixed; inset: 0; background: rgba(2, 10, 12, 0.72); z-index: 3000; justify-content: center; align-items: center; backdrop-filter: blur(4px); }
.modal-feedback.aberto { display: flex; }

/* ---- gavetas: Meus Atalhos e Ajuda da Página ---- */
.menu-favoritos, .menu-ajuda {
    position: fixed; top: 0; height: 100%; height: 100dvh; width: 330px; max-width: 88vw; z-index: 2601;
    box-sizing: border-box; padding: 62px 20px 100px; overflow-y: auto;
    background: linear-gradient(180deg, #0C282E, #081D21); color: var(--vk-creme);
    box-shadow: 0 0 34px rgba(0, 0, 0, 0.7); transition: transform 0.28s ease;
}
.menu-favoritos { left: 0; transform: translateX(-105%); border-right: 1px solid rgba(201, 162, 74, 0.5); }
.menu-ajuda { right: 0; transform: translateX(105%); border-left: 1px solid rgba(201, 162, 74, 0.5); }
.menu-favoritos.aberto, .menu-ajuda.aberto { transform: translateX(0); }
.menu-favoritos h3, .menu-ajuda h3 {
    font-family: var(--vk-titulo); font-size: 1.5rem; color: var(--vk-creme); text-align: center;
    margin: 0 0 18px; padding-bottom: 12px; border-bottom: 1px solid rgba(201, 162, 74, 0.3);
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.menu-favoritos h3 .material-symbols-outlined, .menu-ajuda h3 .material-symbols-outlined { color: var(--vk-ouro-claro); }
.fechar-menu { position: absolute; top: 14px; border: none; background: none; color: var(--vk-ouro-claro); cursor: pointer; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.fechar-menu:hover { background: rgba(201,162,74,.14); }
.fechar-direita { left: 14px; } .fechar-esquerda { right: 14px; }
.vk-gaveta-texto { color: var(--vk-creme-2); font-size: 0.95rem; }
.vk-gaveta-form { background: rgba(201, 162, 74, 0.08); border: 1px solid rgba(201, 162, 74, 0.22); padding: 14px; border-radius: 8px; margin-bottom: 18px; }
.vk-gaveta-form .input-base { margin-bottom: 10px; }
.vk-gaveta-form .btn-salvar { width: 100%; }
.fav-item { display: flex; align-items: center; gap: 8px; border-bottom: 1px dashed rgba(201, 162, 74, 0.2); padding: 2px 0; }
.fav-item .drag-handle-fav { color: var(--vk-creme-2); cursor: grab; font-size: 1.2rem; }
.fav-item a.link-fav { flex: 1; color: var(--vk-creme); text-decoration: none; padding: 9px 4px; font-size: 1.02rem; border-radius: 5px; }
.fav-item a.link-fav:hover { color: var(--vk-ouro-claro); }
.fav-item a.fav-apagar { color: #E4A596; text-decoration: none; display: inline-flex; padding: 6px; border-radius: 50%; }
.fav-item a.fav-apagar:hover { background: rgba(228, 165, 150, 0.12); }
.card-manual {
    display: block; margin-bottom: 10px; padding: 14px 16px; text-decoration: none; color: var(--vk-tinta);
    background: linear-gradient(180deg, #EFE2C4, #E3CFA6); border: 1px solid rgba(201, 162, 74, 0.7); border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0,0,0,.3); transition: transform .15s;
}
.card-manual:hover { transform: translateX(-3px); }
.card-manual .material-symbols-outlined { color: #6B4A1C; font-size: 1.5rem; display: block; margin-bottom: 4px; }
.card-manual strong { display: block; font-family: var(--vk-titulo); font-size: 1.2rem; color: #251910; }
.card-manual span.descricao { color: var(--vk-tinta-2); font-size: 0.9rem; }

/* ---- extras antigos que continuam em uso ---- */
.whatsapp-box { background: var(--vk-sucesso-fundo); border-left: 4px solid var(--vk-sucesso); padding: 15px; margin-bottom: 15px; border-radius: 6px; box-sizing: border-box; }
.email-box { background: var(--vk-info-fundo); border-left: 4px solid var(--vk-info); padding: 15px; margin-bottom: 15px; border-radius: 6px; box-sizing: border-box; }
textarea.copy-area { width: 100%; height: 100px; background: var(--vk-papel-claro); color: var(--vk-tinta); border: 1px solid var(--vk-papel-linha-forte); padding: 10px; border-radius: 6px; resize: none; font-family: monospace; margin-bottom: 10px; box-sizing: border-box; }
.custom-multiselect .turma-option { padding: 8px; border-radius: 4px; transition: background 0.2s; }
.custom-multiselect .turma-option:hover { background: var(--vk-papel-tom-2); }

.builder-block { background: rgba(var(--vk-vidro), 0.45); border: 1px solid var(--vk-papel-linha); border-radius: var(--vk-raio); margin-bottom: 18px; box-shadow: 0 2px 6px rgba(60, 40, 15, 0.1); }
.builder-block-header { padding: 10px 14px; background: var(--vk-papel-tom-2); border-bottom: 1px solid var(--vk-papel-linha); display: flex; justify-content: space-between; align-items: center; border-radius: var(--vk-raio) var(--vk-raio) 0 0; }
.builder-block-body { padding: 14px; }
.builder-children { padding-left: 28px; border-left: 2px dashed var(--vk-papel-linha-forte); margin-top: 14px; margin-bottom: 14px; }
.drag-handle-block { cursor: grab; color: var(--vk-tinta-3); margin-right: 10px; }
.drag-handle-block:hover { color: var(--vk-destaque); }

.pasta-container { background: rgba(var(--vk-vidro), 0.4); border: 1px solid var(--vk-papel-linha); border-radius: var(--vk-raio); margin-bottom: 14px; overflow: hidden; }
.pasta-header { padding: 14px; background: var(--vk-papel-tom); display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: 0.2s; }
.pasta-header:hover { background: var(--vk-papel-tom-2); }
.pasta-body { padding: 14px; border-top: 1px dashed var(--vk-papel-linha); display: none; }
.pasta-container.aberta .pasta-body { display: block; }
.pasta-container.aberta .icone-pasta { transform: rotate(90deg); }
.icone-pasta { transition: 0.3s; color: var(--vk-destaque); }

/* ---- rodapé ---- */
.rodape-beta-static {
    color: var(--vk-creme-2); text-align: center; padding: 18px 20px 26px; font-size: 0.85rem; line-height: 1.6;
    font-family: var(--vk-serif); width: 100%; box-sizing: border-box; text-shadow: 0 1px 3px rgba(0,0,0,.8);
}
.rodape-beta-static a { color: var(--vk-ouro-claro); text-decoration: none; font-weight: 600; }
.rodape-beta-static .vk-rodape-inst { display: block; font-family: var(--vk-caps); letter-spacing: 0.16em; font-size: 0.7rem; text-transform: uppercase; color: rgba(230, 203, 139, 0.85); margin-bottom: 4px; }

/* ================= 6. PEÇAS DAS PÁGINAS REDESENHADAS ================= */

/* Página que não usa a folha inteira: o título fica sobre a pintura e o
   conteúdo em cartões soltos (Início, sala da turma). */
.container.vk-painel {
    border: 0; border-image: none; filter: none; padding: 0; background: none; box-shadow: none; border-radius: 0;
    max-width: 1280px; color: var(--vk-creme); margin-top: 0;
}
.vk-heroi { padding: 26px 8px 22px; max-width: 760px; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85), 0 1px 2px rgba(0,0,0,.9); }
.vk-heroi h1 { font-family: var(--vk-titulo); font-weight: 700; font-size: 3.4rem; line-height: 1; margin: 0; color: #FBF3E1; }
.vk-heroi .vk-heroi-sub { font-family: var(--vk-titulo); font-weight: 600; font-size: 2.1rem; line-height: 1.1; margin: 6px 0 12px; color: #FBF3E1; }
.vk-heroi p { font-size: 1.12rem; line-height: 1.5; margin: 0; color: #F1E6CF; max-width: 560px; }
.vk-heroi .vk-divisor { margin-top: 16px; width: 330px; max-width: 80%; }
.vk-divisor { display: block; height: 22px; background: url('/assets/img/tema/papel-6.webp') no-repeat center / contain; }
.vk-heroi .vk-divisor { filter: sepia(1) saturate(2.5) brightness(1.5); background-position: left center; }

.vk-grade-inicio { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.1fr) minmax(270px, 1fr); gap: 20px; align-items: start; }
.vk-grade-turma { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.vk-coluna { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

/* O título do cartão encolhe quando o cartão é estreito (coluna do Início,
   celular) — pela largura do cartão, e não da tela. */
.vk-papel { container-type: inline-size; }
@container (max-width: 330px) {
    .vk-papel-cab h2 { font-size: 1.3rem; }
    .vk-atalho { font-size: 1rem; min-height: 92px; }
}

/* Cartão de papel solto sobre a pintura: a mesma textura da folha, com os
   cantos desenhados e um filete por dentro, como nos prints. */
.vk-papel {
    position: relative; box-sizing: border-box; color: var(--vk-tinta);
    padding: 30px 32px 28px; border-radius: 3px;
    background:
        url('/assets/img/tema/orna-se.webp') left top / 66px no-repeat,
        url('/assets/img/tema/orna-sd.webp') right top / 66px no-repeat,
        url('/assets/img/tema/orna-ie.webp') left bottom / 66px no-repeat,
        url('/assets/img/tema/orna-id.webp') right bottom / 66px no-repeat,
        url('/assets/img/tema/papel-textura.webp') center / 520px repeat, #E9D6B1;
    box-shadow: inset 0 0 0 1px rgba(92, 60, 22, 0.5), inset 0 0 34px rgba(128, 84, 32, 0.4), 0 14px 26px rgba(0, 0, 0, 0.5);
}
.vk-papel::before { content: ''; position: absolute; inset: 14px; border: 1px solid rgba(92, 60, 22, 0.42); border-radius: 2px; pointer-events: none; }
.vk-papel-nobre {
    padding: 40px 42px 38px;
    background:
        url('/assets/img/tema/flor-se.webp') left top / 120px no-repeat,
        url('/assets/img/tema/flor-sd.webp') right top / 120px no-repeat,
        url('/assets/img/tema/flor-ie.webp') left bottom / 120px no-repeat,
        url('/assets/img/tema/flor-id.webp') right bottom / 120px no-repeat,
        url('/assets/img/tema/papel-textura.webp') center / 520px repeat, #E9D6B1;
}
.vk-papel-nobre::before { inset: 25px; border-color: rgba(92, 60, 22, 0.5); }
.vk-papel-nobre::after { content: ''; position: absolute; inset: 29px; border: 1px solid rgba(92, 60, 22, 0.35); pointer-events: none; }
.vk-papel-cab { display: flex; align-items: center; gap: 12px; margin: -4px 14px 10px; padding-bottom: 10px; border-bottom: 1px solid var(--vk-papel-linha); }
.vk-papel-cab .material-symbols-outlined { font-size: 1.9rem; color: #2E2014; }
.vk-papel-cab h2 { flex: 1; margin: 0; font-family: var(--vk-titulo); font-weight: 700; font-size: clamp(1.4rem, 1.9vw, 1.7rem); line-height: 1.1; color: #251910; min-width: 0; }
.vk-ver-todos { font-size: 0.98rem; color: var(--vk-tinta) !important; text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.vk-ver-todos .material-symbols-outlined { font-size: 1.2rem; color: inherit; }

/* Linha de lista dentro de um cartão (turma, aviso, aula, baralho). */
.vk-item {
    display: flex; align-items: center; gap: 14px; padding: 12px 10px; color: var(--vk-tinta); text-decoration: none;
    border-bottom: 1px solid var(--vk-papel-linha); transition: background .15s;
}
.vk-item:last-child { border-bottom: 0; }
a.vk-item:hover { background: rgba(var(--vk-vidro), 0.55); }
.vk-item-corpo { flex: 1; min-width: 0; }
.vk-item-titulo { display: block; font-family: var(--vk-titulo); font-weight: 700; font-size: 1.22rem; line-height: 1.15; color: #251910; }
.vk-item-meta { display: block; font-size: 0.93rem; color: var(--vk-tinta-2); margin-top: 2px; }
.vk-item-texto { display: block; font-size: 0.95rem; color: var(--vk-tinta); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.vk-item-seta { color: var(--vk-tinta); font-size: 1.5rem !important; flex-shrink: 0; }
.vk-item-lado { font-size: 0.85rem; color: var(--vk-tinta-2); white-space: nowrap; text-align: right; }
.vk-item-caixa { border: 1px solid var(--vk-papel-linha); border-radius: 6px; background: rgba(var(--vk-vidro), 0.35); margin-bottom: 8px; }
.vk-item-caixa.vk-item { border-bottom: 1px solid var(--vk-papel-linha); }

/* Círculo colorido com ícone (avisos, baralhos). */
.vk-circulo {
    width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c, #6E1F2B) 70%, white), var(--c, #6E1F2B) 70%);
    box-shadow: 0 0 0 2px #E8D5AE, 0 0 0 3px rgba(98, 66, 28, 0.55), 0 3px 6px rgba(0,0,0,.25);
    color: #F7EDD6;
}
.vk-circulo .material-symbols-outlined { font-size: 1.45rem; }
.vk-c-vinho { --c: #6E1F2B; } .vk-c-verde { --c: #1F5A4A; } .vk-c-azul { --c: #174E68; } .vk-c-marrom { --c: #6B4217; }
.vk-c-roxo { --c: #4E2D6B; } .vk-c-teal { --c: #135059; } .vk-c-musgo { --c: #3D5A2A; }

/* O escudo do curso. */
.vk-emblema { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 60px; flex-shrink: 0; }
.vk-emblema svg { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 3px 4px rgba(0,0,0,.35)); }
.vk-emblema .vk-emblema-borda { fill: #C9A24A; }
.vk-emblema .vk-emblema-miolo { fill: var(--cor-curso, #6E1F2B); }
.vk-emblema b { position: relative; font-family: var(--vk-caps); font-size: 1.35rem; color: #F7EDD6; margin-top: -6px; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.vk-emblema img { width: 100%; height: 100%; object-fit: contain; }
.vk-emblema-grande { width: 92px; height: 110px; }
.vk-emblema-grande b { font-size: 2.5rem; }

/* Barra de progresso. */
.vk-progresso { height: 7px; border-radius: 4px; background: rgba(98, 66, 28, 0.18); overflow: hidden; margin-top: 7px; box-shadow: inset 0 1px 2px rgba(0,0,0,.15); }
.vk-progresso span { display: block; height: 100%; border-radius: 4px; background: var(--cor, #1D5E68); }

/* Etiqueta de situação. */
.vk-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 0.82rem; color: var(--vk-tinta-2); white-space: nowrap; }
.vk-chip .material-symbols-outlined { font-size: 1rem; }
.vk-chip.ok { color: var(--vk-sucesso); } .vk-chip.andamento { color: #1D5E68; } .vk-chip.erro { color: var(--vk-erro); } .vk-chip.aviso { color: var(--vk-aviso); }
.vk-selo { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 99px; font-size: 0.78rem; font-weight: 600; font-family: var(--vk-serif); border: 1px solid currentColor; }
.vk-selo.ok { color: var(--vk-sucesso); background: var(--vk-sucesso-fundo); }
.vk-selo.erro { color: var(--vk-erro); background: var(--vk-erro-fundo); }
.vk-selo.aviso { color: var(--vk-aviso); background: var(--vk-aviso-fundo); }
.vk-selo.info { color: var(--vk-info); background: var(--vk-info-fundo); }

/* Acesso rápido: ladrilhos de papel. */
.vk-atalhos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vk-atalho {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center;
    min-height: 104px; padding: 12px 8px; border-radius: 8px; text-decoration: none; color: var(--vk-tinta);
    background: linear-gradient(180deg, #EBD7AE, #DCC28F); border: 1px solid rgba(98, 66, 28, 0.55);
    box-shadow: inset 0 0 0 3px rgba(255, 246, 222, 0.45), 0 3px 7px rgba(40, 25, 8, 0.25);
    font-family: var(--vk-titulo); font-weight: 700; font-size: 1.18rem; transition: transform .12s, filter .12s;
}
.vk-atalho:hover { transform: translateY(-2px); filter: brightness(1.04); }
.vk-atalho .material-symbols-outlined { font-size: 2.3rem; color: #22313A; }
.vk-frase-pe { text-align: center; margin-top: 16px; padding: 0 24px; } /* longe dos cantos desenhados */
.vk-frase-pe .vk-divisor { width: 210px; margin: 0 auto 8px; }
.vk-frase-pe em { font-family: var(--vk-titulo); font-size: 1.1rem; color: var(--vk-tinta-2); line-height: 1.35; display: block; }

/* Faixa escura "continue de onde parou". */
.vk-continuar {
    display: flex; align-items: center; gap: 16px; padding: 14px 22px 14px 30px; text-decoration: none; color: var(--vk-creme);
    background: linear-gradient(90deg, #0A2429, #0F3239); border: 1px solid rgba(201, 162, 74, 0.6);
    clip-path: polygon(18px 0, 100% 0, 100% 100%, 18px 100%, 0 50%);
    box-shadow: 0 10px 22px rgba(0,0,0,.45);
}
.vk-continuar:hover { filter: brightness(1.12); }
.vk-continuar .material-symbols-outlined { font-size: 2.2rem; color: var(--vk-ouro-claro); }
.vk-continuar strong { display: block; font-family: var(--vk-titulo); font-size: 1.25rem; color: var(--vk-creme); }
.vk-continuar span.vk-continuar-sub { display: block; font-size: 0.9rem; color: var(--vk-creme-2); }
.vk-continuar .vk-continuar-seta { margin-left: auto; font-size: 1.6rem; }

/* Estado vazio. */
.vk-vazio { text-align: center; padding: 34px 16px; color: var(--vk-tinta-2); }
.vk-vazio > .material-symbols-outlined { font-size: 3rem; color: var(--vk-tinta-3); display: block; margin: 0 auto 10px; }
.vk-vazio strong { display: block; font-family: var(--vk-titulo); font-size: 1.35rem; color: #251910; margin-bottom: 4px; }
.vk-vazio p { margin: 0 auto 14px; max-width: 420px; }

/* Faixa de recado dentro do papel. */
.vk-recado { display: flex; gap: 12px; align-items: flex-start; padding: 13px 16px; border-radius: 7px; margin-bottom: 16px; border: 1px solid; }
.vk-recado .material-symbols-outlined { font-size: 1.4rem; flex-shrink: 0; }
.vk-recado.info { color: var(--vk-info); background: var(--vk-info-fundo); border-color: rgba(31, 78, 121, 0.35); }
.vk-recado.ok { color: var(--vk-sucesso); background: var(--vk-sucesso-fundo); border-color: rgba(47, 107, 58, 0.35); }
.vk-recado.erro { color: var(--vk-erro); background: var(--vk-erro-fundo); border-color: rgba(153, 43, 43, 0.35); }
.vk-recado.aviso { color: var(--vk-aviso); background: var(--vk-aviso-fundo); border-color: rgba(176, 122, 20, 0.4); }
.vk-recado p { margin: 0; color: var(--vk-tinta); }

/* Tela de recado (acesso negado, recurso desligado). */
body.vk-pagina-aviso { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; }
.vk-aviso-cartao { width: 100%; max-width: 460px; text-align: center; }
.vk-aviso-logo { width: 150px; height: auto; margin: 0 auto 10px; display: block; }
.vk-aviso-icone { font-size: 2.4rem; color: var(--vk-destaque); }
.vk-aviso-cartao h1 { font-family: var(--vk-titulo); font-size: 1.9rem; margin: 6px 0 8px; color: #251910; }
.vk-aviso-cartao p { margin: 0 0 18px; color: var(--vk-tinta-2); }

/* ================= 7. LEITOR DE LIÇÃO ================= */
.lesson-reader { font-family: var(--vk-leitura); line-height: 1.8; border-radius: 12px; padding: 30px; transition: background 0.3s, color 0.3s; box-shadow: inset 0 0 20px rgba(0,0,0,0.05); }
.lesson-reader.tema-claro {
    background-color: #FBF3DF; color: #3E2723;
    --lr-h1-color: #4A331F; --lr-h1-border: #D2B48C;
    --lr-h2-color: #7A3F12;
    --lr-box-bg: #FFF9E9; --lr-box-border: #E3D1B5; --lr-box-shadow: 0 4px 15px rgba(139,69,19,0.08);
    --lr-dica-bg: #E9F1F8; --lr-dica-border: #3D7AB8;
    --lr-ouro-bg: #FFF6DA; --lr-ouro-border: #C8962A;
    --lr-idioma-bg: #F4EEDA; --lr-idioma-border: #8B4513; --lr-idioma-text: #3E2723;
    --lr-sanfona-bg: #FFF9E9; --lr-sanfona-border: #D2B48C; --lr-sanfona-title: #5C4033;
    --lr-flash-bg: #FFF9E9; --lr-flash-border: #D2B48C; --lr-flash-title: #8B4513;
}
.lesson-reader.tema-escuro {
    background-color: #102A2F; color: #EDE3CD;
    --lr-h1-color: #E6CB8B; --lr-h1-border: #2F5A61;
    --lr-h2-color: #E7B38A;
    --lr-box-bg: #16373D; --lr-box-border: #2F5A61; --lr-box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    --lr-dica-bg: #173A52; --lr-dica-border: #6FA7D6;
    --lr-ouro-bg: #4A3814; --lr-ouro-border: #D9B45A;
    --lr-idioma-bg: #16373D; --lr-idioma-border: #9FB8B8; --lr-idioma-text: #EDE3CD;
    --lr-sanfona-bg: #16373D; --lr-sanfona-border: #2F5A61; --lr-sanfona-title: #EDE3CD;
    --lr-flash-bg: #16373D; --lr-flash-border: #2F5A61; --lr-flash-title: #E7B38A;
}
.lesson-reader img { max-width: 100%; border-radius: 12px; margin: 15px 0; }
.lesson-reader iframe { width: 100% !important; height: auto !important; aspect-ratio: 16/9; border-radius: 12px; margin: 15px 0; border: none; max-width: 100%; display: block; }
.lesson-reader a { color: #2F6FAE; font-weight: bold; }
.lesson-reader.tema-escuro a { color: #8EC3F0; }
.lr-h1 { text-align: center; color: var(--lr-h1-color); font-size: 2.1rem; font-family: var(--vk-titulo); font-weight: 700; margin-bottom: 20px; padding-bottom: 18px; border-bottom: 2px solid var(--lr-h1-border); }
.lr-h2 { color: var(--lr-h2-color); font-family: var(--vk-titulo); font-weight: 700; font-size: 1.65rem; margin-top: 30px; margin-bottom: 14px; }
/* A folha de papel pinta todo título de tinta escura (.vk-folha h1, .container h2...),
   e essa regra tem mais peso que as duas de cima. No modo claro ninguém via, porque as
   duas cores eram escuras; no noturno o título ficava marrom em cima do cartão azul-escuro
   (contraste 1,14). Dentro do leitor, quem manda é o tema do leitor. */
.lesson-reader .lr-h1 { color: var(--lr-h1-color); }
.lesson-reader .lr-h2 { color: var(--lr-h2-color); }
.lesson-reader h3, .lesson-reader h4 { color: var(--lr-h2-color); font-family: var(--vk-titulo); }
.lesson-reader th { color: var(--lr-h2-color); }
.lesson-reader.tema-escuro hr { border-top-color: var(--lr-box-border); }
.lesson-reader.tema-escuro td, .lesson-reader.tema-escuro th { border-color: var(--lr-box-border); }
.lr-dica { background: var(--lr-dica-bg); border-left: 5px solid var(--lr-dica-border); padding: 18px; border-radius: 12px; margin: 20px 0; }
.lr-ouro { background: var(--lr-ouro-bg); border: 2px dashed var(--lr-ouro-border); border-radius: 12px; padding: 18px; margin: 20px 0; }
.lr-idioma { background: var(--lr-idioma-bg); border-left: 5px solid var(--lr-idioma-border); padding: 18px; border-radius: 12px; margin: 20px 0; font-family: Georgia, serif; font-size: 1.1rem; color: var(--lr-idioma-text); }
.lr-sanfona { background: var(--lr-sanfona-bg); border: 1px solid var(--lr-sanfona-border); border-radius: 12px; padding: 16px; margin: 20px 0; }
.lr-sanfona summary { cursor: pointer; font-weight: bold; color: var(--lr-sanfona-title); font-size: 1.1rem; outline: none; }
.lr-sanfona-content { margin-top: 15px; padding-top: 15px; border-top: 1px dashed var(--lr-sanfona-border); }
.lr-flashcard { background: var(--lr-flash-bg); border: 2px solid var(--lr-flash-border); border-radius: 14px; padding: 16px; margin: 20px 0; text-align: center; box-shadow: var(--lr-box-shadow); }
.lr-flashcard summary { cursor: pointer; font-weight: bold; color: var(--lr-flash-title); font-size: 1.3rem; outline: none; }
.lr-flashcard-content { margin-top: 15px; padding-top: 15px; border-top: 1px dashed var(--lr-flash-border); font-size: 1.1rem; }
.lr-texto { margin: 15px 0; }
.lr-secao-extra { margin-top: 50px; padding-top: 30px; border-top: 2px dashed var(--lr-h1-border); }
.lr-secao-extra h2 { color: var(--lr-h1-color); font-family: var(--vk-titulo); margin-bottom: 20px; }
.lr-referencias li { margin-bottom: 12px; padding-left: 30px; text-indent: -30px; line-height: 1.5; }
.lr-links li { margin-bottom: 10px; list-style-type: square; }

/* ================= 8. UTILITÁRIOS ================= */
.apenas-mobile { display: none !important; }

/* ================= 9. CELULAR E TABLET ================= */
@media (max-width: 1100px) {
    .vk-grade-inicio { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .vk-grade-inicio > .vk-coluna:last-child { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
    body:has(.vk-lateral) {
        padding-left: 0;
        padding-top: calc(var(--vk-topo-cel) + 8px);
        padding-bottom: calc(var(--vk-barra-cel) + env(safe-area-inset-bottom, 0px) + 6px);
    }
    .vk-fundo { background-image: linear-gradient(180deg, rgba(3,13,15,.15) 0%, rgba(3,13,15,.45) 40%, rgba(3,13,15,.85) 100%), var(--vk-fundo-cel, var(--vk-fundo-pc, none)); }

    /* O menu lateral vira gaveta, aberta pelo "Mais" da barra de baixo. */
    .vk-lateral { width: min(86vw, 320px); transform: translateX(-102%); transition: transform .28s ease; z-index: 2601; }
    .vk-lateral.aberto { transform: translateX(0); }
    .vk-lateral::after { display: none; }
    .vk-lateral-fechar { display: flex; position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border: 0; background: none; color: var(--vk-ouro-claro); border-radius: 50%; align-items: center; justify-content: center; cursor: pointer; }

    .vk-topo {
        top: 0; left: 0; right: 0; height: var(--vk-topo-cel); border-radius: 0; border-width: 0 0 1px; padding: 0 6px 0 4px; gap: 0;
        background: linear-gradient(180deg, #0C2A30, #0A2227);
    }
    .vk-topo-logo { display: flex; align-items: center; margin-right: auto; padding: 4px 6px; }
    .vk-topo-logo img { height: 38px; width: auto; }
    .vk-usuario-botao { border-left: 0; padding-right: 2px; margin-left: 0; }
    .vk-usuario-nome { display: none; }
    .vk-avatar { width: 36px; height: 36px; margin-left: 2px; }
    .vk-usuario-menu { position: fixed; right: 8px; left: 8px; top: calc(var(--vk-topo-cel) + 6px); min-width: 0; }

    .vk-barra-cel {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1500;
        height: calc(var(--vk-barra-cel) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px);
        background: linear-gradient(180deg, #0C2A30, #081C20); border-top: 1px solid rgba(201, 162, 74, 0.55);
        box-shadow: 0 -6px 18px rgba(0,0,0,.45);
    }
    .vk-barra-cel a, .vk-barra-cel button {
        flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
        color: var(--vk-creme-2); text-decoration: none; background: none; border: 0; cursor: pointer;
        font-family: var(--vk-serif); font-size: 0.74rem; min-width: 0; position: relative;
    }
    .vk-barra-cel .material-symbols-outlined { font-size: 25px; color: #D9C597; }
    .vk-barra-cel .ativo { color: var(--vk-creme); }
    .vk-barra-cel .ativo .material-symbols-outlined { color: var(--vk-ouro-claro); }
    .vk-barra-cel .ativo::after { content: ''; position: absolute; bottom: 6px; width: 26px; height: 2px; background: var(--vk-ouro); border-radius: 2px; }

    .container, .vk-folha {
        width: calc(100% - 12px); margin: 4px auto 18px; padding: 30px 18px 30px;
        background-size: 60px, 60px, 60px, 60px, 480px, auto;
    }
    .container h1.fonte-magica, .vk-folha h1.fonte-magica, .vk-titulo-pagina { font-size: 1.85rem; }
    .container.vk-painel { margin: 0 8px 16px; }
    .vk-heroi { padding: 14px 6px 16px; }
    .vk-heroi h1 { font-size: 2.5rem; }
    .vk-heroi .vk-heroi-sub { font-size: 1.6rem; }
    .vk-heroi p { font-size: 1rem; }
    .vk-grade-inicio, .vk-grade-turma { grid-template-columns: minmax(0, 1fr); }
    .vk-papel { padding: 24px 18px 20px; background-size: 54px, 54px, 54px, 54px, 480px, auto; }
    .vk-papel::before { inset: 11px; }
    .vk-papel-cab { margin-left: 6px; margin-right: 6px; }
    .vk-papel-cab h2 { font-size: 1.45rem; }
    .vk-atalhos { grid-template-columns: repeat(4, 1fr); gap: 8px; }
    .vk-atalho { min-height: 78px; font-size: 0.95rem; background: linear-gradient(180deg, #123E46, #0C2C32); color: var(--vk-creme); border-color: rgba(201,162,74,.6); box-shadow: none; }
    .vk-atalho .material-symbols-outlined { font-size: 1.7rem; color: var(--vk-ouro-claro); }
    /* cantos menores e mais respiro embaixo: o botão Fechar, à direita, ficava em cima do ornamento */
    .modal-conteudo, .modal-box { padding: 28px 22px 30px; background-size: 46px, 46px, 46px, 46px, 520px; }

    .apenas-mobile { display: flex !important; }
    .apenas-desktop { display: none !important; }
    .barra-filtros .input-base, .form-inline .input-base { width: 100% !important; margin-bottom: 0; }
    .barra-filtros button, .barra-filtros a, .form-inline button { width: 100%; justify-content: center; }
    .form-inline { flex-direction: column; align-items: stretch; gap: 10px; }
    /* em coluna, o "flex: 1" dos campos virava altura zero e o botão encolhia até o texto */
    .form-inline > * { flex: 0 0 auto !important; }

    /* Abas: no celular, quebram em duas linhas em vez de rolar de lado — a aba
       cortada na borda da tela não parecia clicável, parecia defeito. */
    .abas { flex-wrap: wrap; overflow-x: visible; gap: 6px; margin-bottom: 20px; }
    .aba { padding: 8px 12px; font-size: 0.92rem; gap: 6px; }
}

@media (max-width: 420px) {
    .vk-topo-btn { width: 36px; height: 36px; }
    .vk-topo-logo img { height: 32px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ================= 10. IMPRESSÃO ================= */
@media print {
    .no-print, .vk-lateral, .vk-topo, .vk-barra-cel, .vk-fundo, .rodape-beta-static { display: none !important; }
    body, body:has(.vk-lateral) { padding: 0 !important; background: #FFF; color: #000; }
    .container, .vk-folha { border: 0 !important; border-image: none !important; filter: none !important; padding: 0 !important; margin: 0 !important; max-width: none !important; color: #000; }
}

/* ---- tabelas no celular ----
   A tabela marcada .vk-tabela-cartoes vira uma pilha de cartões, com o nome
   da coluna (data-label) em cima de cada dado. Tabela larga que não pode virar
   cartão fica dentro de um .table-wrapper, que rola para o lado. */
@media (max-width: 700px) {
    .vk-tabela-cartoes, .vk-tabela-cartoes tbody, .vk-tabela-cartoes tr, .vk-tabela-cartoes td { display: block; width: 100%; box-sizing: border-box; }
    .vk-tabela-cartoes thead, .vk-tabela-cartoes tr:has(> th) { display: none; }
    .vk-tabela-cartoes td:has(> .drag-handle) { display: none !important; } /* arrastar é coisa de computador */
    .vk-tabela-cartoes td .input-base { width: 100%; }
    /* cronograma: "Aula 3 · 28/08/2026" numa linha só, no alto do cartão */
    .vk-cron td.vk-cron-num, .vk-cron td.vk-cron-data { display: inline-block; width: auto; font-family: var(--vk-titulo); font-weight: 700; font-size: 1.1rem; color: #251910; text-align: left !important; }
    .vk-cron td.vk-cron-num::before { content: 'Aula '; }
    .vk-cron td.vk-cron-data::before { content: '· '; }
    .vk-cron tr.row-feriado td.vk-cron-num { display: none !important; }
    .vk-cron tr.row-feriado td.vk-cron-data::before { content: ''; }
    .vk-cron td[data-label="Unidades"], .vk-cron td[data-label="Exame"] { display: inline-block; width: auto; margin-right: 14px; vertical-align: top; }
    .vk-tabela-cartoes tr { margin-bottom: 10px; padding: 10px 12px; border: 1px solid var(--vk-papel-linha); border-radius: 6px; background: rgba(var(--vk-vidro), 0.45); }
    .vk-tabela-cartoes td { padding: 4px 0 !important; border: 0 !important; text-align: left !important; overflow-wrap: anywhere; }
    .vk-tabela-cartoes td[data-label]::before { content: attr(data-label); display: block; font-family: var(--vk-caps); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vk-tinta-2); }
    /* .vk-cartao-compacto: o campo de texto ocupa a linha de cima; o resto
       (selos, Salvar, X) divide a de baixo, com os botões encostados à direita */
    .vk-cartao-compacto tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
    .vk-cartao-compacto td { width: auto; }
    .vk-cartao-compacto td:has(> input.input-base[type="text"]) { flex: 1 1 100%; }
    .vk-cartao-compacto td:last-child { margin-left: auto; white-space: nowrap; }
    /* chamada do diário: nome e faltas em cima; Presente/Falta embaixo, na largura toda */
    .vk-chamada tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; }
    .vk-chamada td:nth-child(3) { grid-column: 1 / -1; }
    .vk-chamada td select, select[name="dia_selecionado"] { width: 100% !important; }
    /* baralhos do professor: nome e botões em cima; vínculo e quantidade embaixo */
    .vk-baralhos tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; }
    .vk-baralhos td:nth-child(1) { grid-column: 1; grid-row: 1; }
    .vk-baralhos td:nth-child(4) { grid-column: 2; grid-row: 1; }
    .vk-baralhos td:nth-child(2) { grid-column: 1; grid-row: 2; }
    .vk-baralhos td:nth-child(3) { grid-column: 2; grid-row: 2; text-align: right !important; }
    .vk-baralho-qtd span::after { content: ' cartas'; }
}

/* A lista que se filtra pelo nome e se reordena (assets/js/vk-lista-filtravel.js):
   as atividades na Escrivaninha e na janela do plano de aula. */
.vk-lista-barra { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.vk-lista-barra .vk-lista-busca { flex: 1 1 220px; min-width: 0; margin: 0; }
.vk-lista-barra .vk-lista-ordem { flex: 0 1 270px; width: auto; max-width: 100%; margin: 0; }
.vk-lista-contagem { font-size: 0.88rem; color: var(--vk-tinta-2); white-space: nowrap; }
.vk-lista-itens { display: flex; flex-direction: column; }
.vk-lista-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 6px; border-bottom: 1px solid var(--vk-papel-linha); }
.vk-lista-item:last-child { border-bottom: none; }
.vk-lista-item-texto { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vk-lista-item-titulo { color: var(--vk-tinta); font-weight: 600; overflow-wrap: anywhere; }
.vk-lista-item-meta { font-size: 0.82rem; color: var(--vk-tinta-3); }
.vk-lista-vazio { color: var(--vk-tinta-3); font-style: italic; margin: 10px 0 0; text-align: center; }
label.vk-lista-item { cursor: pointer; justify-content: flex-start; align-items: flex-start; }
label.vk-lista-item input[type="checkbox"] { margin-top: 4px; flex: 0 0 auto; }
@media (max-width: 560px) { .vk-lista-item { flex-wrap: wrap; } }