/* ============================================================
   Nav3 — Design System
   Identidade: azul-marinho profundo + latão (tema navegação).
   Tokens em escala (como referência), dois temas completos.
   Login/cadastro sempre usam os valores de :root (claro) — só a
   área interna (data-theme no <html>) alterna claro/escuro.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
    /* Superfícies */
    --nav3-fundo:      #F5F6F8;
    --nav3-papel:      #FFFFFF;
    --nav3-papel2:     #EEF0F4;
    --nav3-borda:      #E2E5EC;
    --nav3-borda2:     #CBD1DC;

    /* Marca */
    --nav3-azul:        #0B2545;
    --nav3-azul-claro:  #13355E;
    --nav3-azul-escuro: #081A33;
    --nav3-latao:       #B8863E;
    --nav3-latao-claro: #C79A46;

    /* Texto (3 níveis de hierarquia) */
    --nav3-texto:       #1A2333;
    --nav3-texto-suave: #5B6478;
    --nav3-texto-fraco: #9AA3B5;

    /* Semânticas */
    --nav3-sucesso:     #16803D;
    --nav3-sucesso-bg:  #E9F5EF;
    --nav3-sucesso-borda: #CDE9DB;
    --nav3-erro:        #C0392B;
    --nav3-erro-bg:     #FBEAE9;
    --nav3-erro-borda:  #F3CFCC;
    --nav3-aviso:       #92660B;
    --nav3-aviso-bg:    #FCF1DC;
    --nav3-aviso-borda: #F0DCAE;
    --nav3-info:        #1D4E89;
    --nav3-info-bg:     #E7F0FB;
    --nav3-info-borda:  #CBDFF5;

    /* Escala de raio e sombra */
    --raio-sm:  6px;
    --raio:     10px;
    --raio-lg:  14px;
    --raio-xl:  20px;

    --sombra-sm: 0 1px 2px rgba(10,25,50,.06);
    --sombra:    0 4px 14px rgba(10,25,50,.08);
    --sombra-lg: 0 16px 40px rgba(10,25,50,.14);

    --fonte-titulo: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    --fonte-corpo:  'Inter', system-ui, -apple-system, sans-serif;

    --sidebar-w: 244px;
    --topbar-h:  60px;
    --radius: var(--raio); /* alias retrocompatível */
}

html[data-theme="dark"] {
    --nav3-fundo:      #0A1220;
    --nav3-papel:      #121B2E;
    --nav3-papel2:     #1A2537;
    --nav3-borda:      #263149;
    --nav3-borda2:     #34405C;

    --nav3-azul:        #2A5FA0;
    --nav3-azul-claro:  #3D75BD;
    --nav3-azul-escuro: #1C4A82;
    --nav3-latao:       #D9AE5D;
    --nav3-latao-claro: #EAC989;

    --nav3-texto:       #E8ECF4;
    --nav3-texto-suave: #9BA8C2;
    --nav3-texto-fraco: #616F8C;

    --nav3-sucesso:     #34D399;
    --nav3-sucesso-bg:  rgba(52,211,153,.12);
    --nav3-sucesso-borda: rgba(52,211,153,.30);
    --nav3-erro:        #F87171;
    --nav3-erro-bg:     rgba(248,113,113,.12);
    --nav3-erro-borda:  rgba(248,113,113,.30);
    --nav3-aviso:       #E4C179;
    --nav3-aviso-bg:    rgba(217,174,93,.14);
    --nav3-aviso-borda: rgba(217,174,93,.32);
    --nav3-info:        #7CAAE8;
    --nav3-info-bg:     rgba(124,170,232,.12);
    --nav3-info-borda:  rgba(124,170,232,.30);

    --sombra-sm: 0 1px 2px rgba(0,0,0,.35);
    --sombra:    0 4px 16px rgba(0,0,0,.40);
    --sombra-lg: 0 20px 48px rgba(0,0,0,.55);
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--fonte-corpo);
    background: var(--nav3-fundo);
    color: var(--nav3-texto);
    -webkit-font-smoothing: antialiased;
    transition: background-color .15s ease, color .15s ease;
}

h1, h2, h3 {
    font-family: var(--fonte-titulo);
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--nav3-texto);
    margin: 0 0 .4rem;
}
h2 { font-size: 1.3rem; }
h3 { font-size: 1.02rem; }

a { color: var(--nav3-azul-claro); }
button { cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; }
code { font-family: 'SF Mono', Consolas, monospace; font-size: .9em; }

/* ============================================================
   SELECTS — aparência customizada (o nativo do navegador é "cru")
   Nota: o menu suspenso em si (a lista de opções ao clicar) é
   renderizado pelo sistema operacional e não é 100% estilizável
   via CSS em todos os navegadores — isso é uma limitação da web,
   não do nosso CSS. O que dá pra padronizar (a caixa fechada,
   a seta, foco, hover) está todo customizado abaixo.
   ============================================================ */
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: var(--nav3-fundo);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6478' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
    padding: 10px 34px 10px 13px;
    border: 1px solid var(--nav3-borda);
    border-radius: var(--raio-sm);
    font-size: .88rem;
    color: var(--nav3-texto);
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
select:hover { border-color: var(--nav3-borda2); }
select:focus {
    outline: none;
    border-color: var(--nav3-azul-claro);
    box-shadow: 0 0 0 3px rgba(19,53,94,.14);
}
html[data-theme="dark"] select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239BA8C2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}
.nav3-select-com-botao select { flex: 1; }

/* ============================================================
   TELA DE LOGIN / CADASTRO (sempre no tema claro)
   ============================================================ */
.nav3-auth {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(circle at 15% 20%, rgba(184,134,62,.10), transparent 40%),
        radial-gradient(circle at 85% 80%, rgba(11,37,69,.06), transparent 45%),
        var(--nav3-fundo);
}

.nav3-card {
    background: var(--nav3-papel);
    border: 1px solid var(--nav3-borda);
    border-radius: var(--raio-lg);
    padding: 40px 36px;
    width: 100%;
    max-width: 400px;
    box-shadow: var(--sombra-lg);
    position: relative;
}

.nav3-brasao {
    width: 44px; height: 44px;
    margin-bottom: 18px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--nav3-azul);
    color: var(--nav3-latao-claro);
}

.nav3-eyebrow {
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--nav3-latao);
    font-weight: 700;
    margin-bottom: 4px;
}

.nav3-card p.subtitulo {
    color: var(--nav3-texto-suave);
    font-size: .92rem;
    margin: 0 0 24px;
}

.nav3-campo { margin-bottom: 16px; }
.nav3-campo label {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--nav3-texto-suave);
}
/* Base global — qualquer input de texto/número/select do site já nasce no
   estilo escuro, esteja ele dentro de .nav3-campo ou solto num layout mais
   compacto (ex: ações do painel). .nav3-campo só adiciona o width:100%. */
input[type="text"], input[type="number"], input[type="email"], input[type="password"],
input[type="search"], input[type="date"], input[type="tel"], select {
    padding: 10px 13px;
    border: 1px solid var(--nav3-borda);
    border-radius: var(--raio-sm);
    font-size: .92rem;
    font-family: inherit;
    background-color: var(--nav3-fundo);
    color: var(--nav3-texto);
    transition: border-color .15s, box-shadow .15s;
}
select { padding-right: 36px; }
input[type="text"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="password"]:focus,
input[type="search"]:focus, input[type="date"]:focus, input[type="tel"]:focus, select:focus {
    outline: none;
    border-color: var(--nav3-azul-claro);
    background-color: var(--nav3-papel);
    box-shadow: 0 0 0 3px rgba(19,53,94,.14);
}

.nav3-campo input, .nav3-campo select { width: 100%; }

.nav3-alt { text-align: center; margin-top: 20px; font-size: .87rem; color: var(--nav3-texto-suave); }

/* ============================================================
   BOTÕES — sistema unificado
   ============================================================ */
.nav3-botao, .nav3-btn, .nav3-btn-primary, .nav3-btn-ghost, .nav3-btn-secundario, .nav3-btn-danger {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 10px 18px;
    border-radius: var(--raio-sm);
    font-size: .86rem; font-weight: 600;
    border: none;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s, transform .05s, box-shadow .15s;
    white-space: nowrap;
}
.nav3-botao:disabled, .nav3-btn:disabled { opacity: .5; cursor: not-allowed; }

/* .nav3-botao (legado) e .nav3-btn-primary têm a mesma aparência */
.nav3-botao, .nav3-btn-primary {
    background: var(--nav3-azul);
    color: #fff;
    width: auto;
}
.nav3-botao:hover:not(:disabled), .nav3-btn-primary:hover:not(:disabled) {
    background: var(--nav3-azul-claro);
    box-shadow: var(--sombra);
}
.nav3-botao:active:not(:disabled), .nav3-btn-primary:active:not(:disabled) { transform: translateY(1px); }

.nav3-btn-ghost, .nav3-btn-secundario {
    background: var(--nav3-papel);
    color: var(--nav3-texto);
    border: 1px solid var(--nav3-borda);
}
.nav3-btn-ghost:hover:not(:disabled), .nav3-btn-secundario:hover:not(:disabled) { background: var(--nav3-papel2); }

.nav3-btn-danger {
    background: var(--nav3-erro-bg);
    color: var(--nav3-erro);
    border: 1px solid var(--nav3-erro-borda);
}
.nav3-btn-danger:hover:not(:disabled) { background: var(--nav3-erro); color: #fff; }

.nav3-btn-sm { padding: 7px 13px; font-size: .8rem; }
.nav3-btn-lg { padding: 13px 28px; font-size: .95rem; }

/* Botão em largura total SÓ nas telas de login/cadastro (não em qualquer formulário do site) */
.nav3-auth .nav3-botao { width: 100%; }

/* ============================================================
   MENSAGENS / ALERTAS
   ============================================================ */
.nav3-msg, .nav3-alert {
    padding: 11px 15px;
    border-radius: var(--raio-sm);
    font-size: .87rem;
    margin-bottom: 18px;
    border-left: 3px solid transparent;
}
.nav3-msg.erro,    .nav3-alert-erro    { background: var(--nav3-erro-bg);    color: var(--nav3-erro);    border-left-color: var(--nav3-erro); }
.nav3-msg.sucesso, .nav3-alert-sucesso { background: var(--nav3-sucesso-bg); color: var(--nav3-sucesso); border-left-color: var(--nav3-sucesso); }
.nav3-msg.aviso,   .nav3-alert-aviso   { background: var(--nav3-aviso-bg);   color: var(--nav3-aviso);   border-left-color: var(--nav3-aviso); }
.nav3-msg.info,    .nav3-alert-info    { background: var(--nav3-info-bg);    color: var(--nav3-info);    border-left-color: var(--nav3-info); }

/* ============================================================
   ÁREA INTERNA — sidebar + topbar + rodapé
   ============================================================ */
.nav3-shell { display: flex; min-height: 100vh; }

.nav3-sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    background: var(--nav3-papel);
    border-right: 1px solid var(--nav3-borda);
    position: fixed;
    top: 0; left: 0; bottom: 0;
    display: flex; flex-direction: column;
    z-index: 40;
    transition: transform .2s ease, background-color .15s ease, border-color .15s ease;
}

.nav3-sidebar-topo { padding: 20px 22px; border-bottom: 1px solid var(--nav3-borda); }
.nav3-sidebar-marca {
    display: flex; align-items: center;
    text-decoration: none;
}
/* Duas versões da logo (clara pro fundo escuro, azul pro fundo claro) —
   a troca é só CSS, sem precisar de JS nem recarregar nada ao mudar de tema. */
.nav3-logo-dark, .nav3-logo-light {
    display: none;
    width: 100%;
    max-width: 172px;
    height: auto;
    object-fit: contain;
}
[data-theme="dark"] .nav3-logo-dark { display: block; }
[data-theme="light"] .nav3-logo-light { display: block; }

.nav3-sidebar-nav {
    padding: 14px 12px; overflow-y: auto; flex: 1;
    scrollbar-width: thin;
    scrollbar-color: var(--nav3-borda2) transparent;
}
.nav3-sidebar-nav::-webkit-scrollbar { width: 6px; }
.nav3-sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.nav3-sidebar-nav::-webkit-scrollbar-thumb { background-color: var(--nav3-borda2); border-radius: 999px; }
.nav3-sidebar-nav::-webkit-scrollbar-thumb:hover { background-color: var(--nav3-texto-fraco); }
.nav3-sidebar-grupo {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%;
    background: none; border: none;
    font-size: .68rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--nav3-texto-fraco);
    font-weight: 700;
    padding: 12px 10px;
    margin-top: 4px;
    cursor: pointer;
    border-radius: var(--raio-sm);
    transition: background-color .12s, color .12s;
}
.nav3-sidebar-grupo:hover { background: var(--nav3-papel2); color: var(--nav3-texto-suave); }
.nav3-sidebar-nav > .nav3-sidebar-grupo:first-of-type { margin-top: 0; }

.nav3-seta-grupo { display: flex; flex-shrink: 0; transition: transform .15s; }
.nav3-seta-grupo .nav3-icone { width: 14px; height: 14px; }
.nav3-sidebar-grupo[data-grupo-toggle].aberto .nav3-seta-grupo { transform: rotate(180deg); }

.nav3-sidebar-subgrupo { display: none; padding-top: 2px; }
.nav3-sidebar-subgrupo.aberto { display: block; }

.nav3-sidebar-link {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 12px;
    margin-bottom: 2px;
    border-radius: var(--raio-sm);
    color: var(--nav3-texto-suave);
    text-decoration: none;
    font-size: .87rem; font-weight: 500;
    border-left: 3px solid transparent;
    transition: background-color .12s, color .12s;
}
.nav3-sidebar-link:hover { background: var(--nav3-papel2); color: var(--nav3-texto); }
.nav3-sidebar-link.ativo {
    background: color-mix(in srgb, var(--nav3-azul) 12%, transparent);
    color: var(--nav3-azul-claro);
    border-left-color: var(--nav3-latao);
    font-weight: 700;
}
html[data-theme="dark"] .nav3-sidebar-link.ativo { color: var(--nav3-azul-claro); }
.nav3-sidebar-link .nav3-icone { color: inherit; flex-shrink: 0; }
.nav3-sidebar-badge {
    margin-left: auto; min-width: 19px; height: 19px; padding: 0 5px;
    display: flex; align-items: center; justify-content: center;
    background: var(--nav3-erro); color: #fff;
    font-size: .7rem; font-weight: 700; border-radius: 100px; flex-shrink: 0;
}

.nav3-sidebar-separador {
    height: 1px;
    background: var(--nav3-borda);
    margin: 6px 10px;
    opacity: .6;
}

.nav3-sidebar-link.destaque {
    background: none;
    border: none;
    color: var(--nav3-texto);
    font-weight: 700;
    margin-bottom: 8px;
}
.nav3-sidebar-link.destaque .nav3-icone { color: var(--nav3-latao); }
.nav3-sidebar-link.destaque:hover { background: var(--nav3-papel2); }

.nav3-area { flex: 1; margin-left: var(--sidebar-w); display: flex; flex-direction: column; min-height: 100vh; }

.nav3-topbar-app {
    height: var(--topbar-h);
    flex-shrink: 0;
    background: var(--nav3-papel);
    border-bottom: 1px solid var(--nav3-borda);
    display: flex; align-items: center; gap: 14px;
    padding: 0 24px;
    position: sticky; top: 0; z-index: 30;
    box-shadow: var(--sombra-sm);
    transition: background-color .15s ease, border-color .15s ease;
}

.nav3-titulo-pagina {
    font-family: var(--fonte-titulo);
    font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em;
    color: var(--nav3-texto);
    margin: 0; flex: 1;
}

.nav3-topbar-acoes { display: flex; align-items: center; gap: 10px; }

.nav3-botao-icone {
    width: 36px; height: 36px;
    border-radius: var(--raio-sm);
    border: 1px solid var(--nav3-borda);
    background: transparent;
    color: var(--nav3-texto-suave);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; text-decoration: none;
    transition: background-color .12s, color .12s;
}
.nav3-botao-icone:hover { background: var(--nav3-papel2); color: var(--nav3-texto); }

.nav3-icone { width: 19px; height: 19px; flex-shrink: 0; }
.nav3-icone-sol, .nav3-icone-lua { display: none; align-items: center; justify-content: center; }
html[data-theme="dark"] .nav3-icone-sol { display: flex; }
html:not([data-theme="dark"]) .nav3-icone-lua { display: flex; }

.nav3-usuario { display: flex; align-items: center; gap: 9px; padding-left: 10px; border-left: 1px solid var(--nav3-borda); }
.nav3-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, var(--nav3-azul), var(--nav3-azul-claro));
    color: var(--nav3-latao-claro);
    display: flex; align-items: center; justify-content: center;
    font-size: .76rem; font-weight: 700; flex-shrink: 0;
}
.nav3-usuario-nome { font-size: .85rem; font-weight: 600; color: var(--nav3-texto); white-space: nowrap; }

.nav3-conteudo-interna {
    max-width: 1120px; width: 100%; margin: 0 auto;
    padding: 30px 26px 56px;
    flex: 1;
}

.nav3-rodape-app {
    text-align: center; padding: 16px;
    color: var(--nav3-texto-fraco); font-size: .76rem;
    border-top: 1px solid var(--nav3-borda);
    background: var(--nav3-papel);
}

.nav3-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 35; }
.nav3-overlay.visivel { display: block; }

.nav3-botao-icone#nav3BtnMenu { display: none; }

@media (max-width: 900px) {
    .nav3-sidebar { transform: translateX(-100%); box-shadow: var(--sombra-lg); }
    .nav3-sidebar.aberto { transform: translateX(0); }
    .nav3-area { margin-left: 0; }
    .nav3-botao-icone#nav3BtnMenu { display: flex; }
}

/* ============================================================
   CABEÇALHO DE PÁGINA (título + descrição + ações)
   ============================================================ */
.nav3-page-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 24px;
}
.nav3-page-header p { color: var(--nav3-texto-suave); font-size: .87rem; margin-top: 4px; }
.nav3-page-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.nav3-btn-ativo { border-color: var(--nav3-azul-claro) !important; background: color-mix(in srgb, var(--nav3-azul) 10%, transparent) !important; color: var(--nav3-azul-claro) !important; }

/* ============================================================
   MODAL simples (ex: ver respostas do aluno em tempo real)
   ============================================================ */
.nav3-modal-fundo {
    display: none; position: fixed; inset: 0; z-index: 70;
    background: rgba(0,0,0,.5);
    align-items: center; justify-content: center; padding: 20px;
}
.nav3-modal-fundo.visivel { display: flex; }
.nav3-modal-caixa {
    background: var(--nav3-papel); border-radius: var(--raio-lg);
    max-width: 520px; width: 100%; max-height: 80vh; overflow-y: auto;
    padding: 22px; box-shadow: var(--sombra-lg);
}
.nav3-modal-fechar { float: right; background: none; border: none; font-size: 1.3rem; cursor: pointer; color: var(--nav3-texto-suave); line-height: 1; }

/* ============================================================
   PAINEL DA SALA — grupos de ação separados visualmente
   ============================================================ */
.nav3-acoes-unificado {
    display: flex;
    align-items: stretch;
    gap: 22px;
    flex-wrap: wrap;
    padding-top: 16px;
}
.nav3-acoes-secao { display: flex; flex-direction: column; gap: 10px; justify-content: flex-start; }
.nav3-acoes-divisor { width: 1px; background: var(--nav3-borda); align-self: stretch; }
@media (max-width: 860px) {
    .nav3-acoes-divisor { display: none; }
    .nav3-acoes-unificado { flex-direction: column; gap: 18px; }
}
.nav3-acoes-grupo-titulo {
    font-size: .78rem; font-weight: 600; color: var(--nav3-texto-suave);
    display: flex; align-items: center; gap: 4px;
}
.nav3-acoes-grupo-linha {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}

.nav3-form-colunas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
    max-width: 1040px;
}
@media (max-width: 860px) {
    .nav3-form-colunas { grid-template-columns: 1fr; }
}

/* ============================================================
   MENU DE AÇÕES EM DROPDOWN (tabelas com várias ações por linha)
   ============================================================ */
.nav3-menu-acoes { position: relative; display: inline-block; }
.nav3-menu-acoes-btn {
    width: 32px; height: 32px; border-radius: 50%;
    border: 1px solid var(--nav3-borda); background: var(--nav3-papel);
    color: var(--nav3-texto-suave); cursor: pointer; font-size: 1.15rem; line-height: 1;
    transition: background-color .12s;
}
.nav3-menu-acoes-btn:hover { background: var(--nav3-papel2); }
.nav3-menu-acoes-lista {
    display: none;
    position: absolute; right: 0; top: calc(100% + 4px);
    background: var(--nav3-papel); border: 1px solid var(--nav3-borda);
    border-radius: var(--raio-sm); box-shadow: var(--sombra-lg);
    min-width: 190px; padding: 6px; z-index: 40;
    flex-direction: column; gap: 1px;
}
.nav3-menu-acoes-lista.aberto { display: flex; }
.nav3-menu-item {
    display: block; width: 100%; text-align: left;
    padding: 9px 10px; border-radius: 6px; border: none; background: none;
    font-size: .85rem; cursor: pointer; color: var(--nav3-texto); white-space: nowrap;
}
.nav3-menu-item:hover { background: var(--nav3-papel2); }
.nav3-menu-item.aprovar { color: var(--nav3-sucesso); }
.nav3-menu-item.bloquear { color: var(--nav3-aviso); }
.nav3-menu-item.excluir { color: var(--nav3-erro); }

.nav3-acoes-linha { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.nav3-btn-acao-destaque {
    padding: 6px 12px; border-radius: var(--raio-sm);
    border: 1px solid var(--nav3-borda); background: var(--nav3-papel);
    color: var(--nav3-texto); font-size: .8rem; font-weight: 600; cursor: pointer;
    white-space: nowrap;
}
.nav3-btn-acao-destaque:hover { background: var(--nav3-papel2); }
.nav3-btn-acao-destaque.verde {
    border-color: var(--nav3-sucesso);
    color: var(--nav3-sucesso);
    background: color-mix(in srgb, var(--nav3-sucesso) 10%, transparent);
}
.nav3-th-ordenavel { cursor: pointer; user-select: none; }
.nav3-th-ordenavel:hover { color: var(--nav3-texto); }

.nav3-abas-menu { display: flex; gap: 4px; border-bottom: 1px solid var(--nav3-borda); margin-bottom: 20px; }
.nav3-aba-botao {
    padding: 10px 18px; background: none; border: none; border-bottom: 2px solid transparent;
    color: var(--nav3-texto-suave); font-weight: 600; font-size: .88rem; cursor: pointer;
    transition: color .12s, border-color .12s;
}
.nav3-aba-botao:hover { color: var(--nav3-texto); }
.nav3-aba-botao.ativa { color: var(--nav3-texto); border-bottom-color: var(--nav3-latao); }

/* ============================================================
   SANFONA DE CONTEÚDO (ex: lista de gerações em Resultados —
   diferente da sanfona do menu lateral, essa é pro conteúdo da página)
   ============================================================ */
.nav3-sanfona-item {
    background: var(--nav3-papel); border: 1px solid var(--nav3-borda);
    border-radius: var(--raio-lg); margin-bottom: 10px; overflow: hidden;
}
.nav3-sanfona-cabecalho {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    gap: 14px; padding: 14px 16px; background: none; border: none; cursor: pointer;
    text-align: left; color: var(--nav3-texto); font-size: .88rem;
}
.nav3-sanfona-cabecalho:hover { background: var(--nav3-papel2); }
.nav3-sanfona-seta { transition: transform .15s; color: var(--nav3-texto-suave); flex-shrink: 0; }
.nav3-sanfona-item.aberta .nav3-sanfona-seta { transform: rotate(180deg); }
.nav3-sanfona-corpo { display: none; padding: 0 16px 16px; border-top: 1px solid var(--nav3-borda); }
.nav3-sanfona-item.aberta .nav3-sanfona-corpo { display: block; padding-top: 14px; }

/* ============================================================
   CHIPS DE CHECKBOX (multi-seleção discreta — ex: formato/estilo de questão)
   ============================================================ */
.nav3-checkbox-grupo { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.nav3-check-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 13px;
    border: 1px solid var(--nav3-borda);
    border-radius: 999px;
    font-size: .82rem; font-weight: 500;
    color: var(--nav3-texto-suave);
    cursor: pointer;
    transition: background-color .12s, border-color .12s, color .12s;
    background: var(--nav3-papel);
}
.nav3-check-chip input { display: none; }
.nav3-check-chip:hover { background: var(--nav3-papel2); }
.nav3-check-chip:has(input:checked) {
    background: color-mix(in srgb, var(--nav3-azul) 10%, transparent);
    border-color: var(--nav3-azul-claro);
    color: var(--nav3-azul-claro);
    font-weight: 600;
}

/* ============================================================
   MONTAR PROVA
   ============================================================ */
.nav3-montar-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 900px) { .nav3-montar-grid { grid-template-columns: 1fr; } }

.nav3-resultado-busca {
    background: var(--nav3-papel);
    border: 1px solid var(--nav3-borda);
    border-radius: var(--raio-sm);
    padding: 12px 14px;
    margin-bottom: 8px;
    display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
}
.nav3-resultado-busca.ja-adicionada { opacity: .5; }
.nav3-resultado-busca-texto { font-size: .85rem; }
.nav3-resultado-busca-meta { font-size: .74rem; color: var(--nav3-texto-suave); margin-top: 3px; }

.nav3-item-prova {
    background: var(--nav3-papel);
    border: 1px solid var(--nav3-borda);
    border-radius: var(--raio-sm);
    padding: 12px 14px;
    margin-bottom: 8px;
    display: flex; gap: 10px; align-items: flex-start;
}
.nav3-item-prova-numero {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--nav3-papel2); color: var(--nav3-texto-suave);
    display: flex; align-items: center; justify-content: center;
    font-size: .78rem; font-weight: 700; flex-shrink: 0;
}
.nav3-item-prova-corpo { flex: 1; font-size: .85rem; }
.nav3-item-prova-acoes { display: flex; flex-direction: column; gap: 3px; align-items: center; }
.nav3-item-prova-peso {
    width: 56px; padding: 5px 6px; text-align: center;
    border: 1px solid var(--nav3-borda); border-radius: var(--raio-sm);
    font-size: .82rem; font-weight: 600; background: var(--nav3-fundo); color: var(--nav3-texto);
}
.nav3-item-prova-peso.manual { border-color: var(--nav3-latao); }
.nav3-botao-mover {
    width: 22px; height: 22px; border: none; background: var(--nav3-papel2);
    border-radius: 4px; cursor: pointer; color: var(--nav3-texto-suave);
    display: flex; align-items: center; justify-content: center; font-size: .7rem;
}
.nav3-botao-mover:hover { background: var(--nav3-borda); }
.nav3-botao-mover:disabled { opacity: .3; cursor: default; }

/* ============================================================
   CARDS / GRID
   ============================================================ */
.nav3-grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin-top: 18px; }

.nav3-card-modulo {
    background: var(--nav3-papel);
    border: 1px solid var(--nav3-borda);
    border-radius: var(--raio-lg);
    padding: 22px;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.nav3-card-modulo:hover { box-shadow: var(--sombra); }

/* ---------- Stat cards ---------- */
.nav3-stat-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-bottom: 8px; }
.nav3-stat-card {
    background: var(--nav3-papel);
    border: 1px solid var(--nav3-borda);
    border-radius: var(--raio-lg);
    padding: 18px 20px;
    display: flex; align-items: center; gap: 14px;
}
.nav3-stat-icone {
    width: 42px; height: 42px; border-radius: var(--raio-sm);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--nav3-azul) 10%, transparent);
    color: var(--nav3-azul-claro);
}
.nav3-stat-label { font-size: .74rem; color: var(--nav3-texto-suave); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }
.nav3-stat-valor { font-family: var(--fonte-titulo); font-size: 1.5rem; font-weight: 700; color: var(--nav3-texto); }
.nav3-stat-icone.latao { background: color-mix(in srgb, var(--nav3-latao) 14%, transparent); color: var(--nav3-latao); }
.nav3-stat-icone.verde { background: color-mix(in srgb, var(--nav3-sucesso) 12%, transparent); color: var(--nav3-sucesso); }

/* ============================================================
   TABELAS
   ============================================================ */
.nav3-tabela {
    width: 100%; border-collapse: collapse;
    background: var(--nav3-papel);
    border: 1px solid var(--nav3-borda);
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra-sm);
}
/* Arredonda só os 4 cantos físicos (célula por célula), em vez de overflow:hidden
   na tabela inteira — overflow:hidden cortava qualquer tooltip/dropdown que
   precisasse "vazar" pra fora de uma célula (ex: menu de ações, tooltip de ajuda). */
.nav3-tabela thead tr:first-child th:first-child { border-top-left-radius: var(--raio-lg); }
.nav3-tabela thead tr:first-child th:last-child { border-top-right-radius: var(--raio-lg); }
.nav3-tabela tbody tr:last-child td:first-child { border-bottom-left-radius: var(--raio-lg); }
.nav3-tabela tbody tr:last-child td:last-child { border-bottom-right-radius: var(--raio-lg); }
.nav3-tabela th, .nav3-tabela td { padding: 12px 16px; text-align: left; font-size: .87rem; border-bottom: 1px solid var(--nav3-borda); }
.nav3-tabela th {
    background: var(--nav3-papel2);
    color: var(--nav3-texto-suave);
    font-weight: 700; font-size: .72rem;
    text-transform: uppercase; letter-spacing: .05em;
}
.nav3-tabela tbody tr { transition: background-color .1s; }
.nav3-tabela tbody tr:hover { background: var(--nav3-papel2); }
.nav3-tabela tr:last-child td { border-bottom: none; }

/* ============================================================
   BADGES
   ============================================================ */
.nav3-toggle-inclusao {
    width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--nav3-borda);
    background: transparent; color: var(--nav3-texto-fraco); font-size: .72rem; line-height: 1;
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    vertical-align: middle; margin-left: 4px; opacity: .5; transition: opacity .15s, border-color .15s, background .15s, color .15s;
}
.nav3-toggle-inclusao:hover { opacity: 1; border-color: var(--nav3-azul-claro); }
.nav3-toggle-inclusao.ativo {
    opacity: 1; background: var(--nav3-azul); border-color: var(--nav3-azul); color: #fff;
}

.nav3-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: 999px;
    font-size: .72rem; font-weight: 700;
}
.nav3-badge.pendente  { background: var(--nav3-aviso-bg);   color: var(--nav3-aviso); }
.nav3-badge.aprovado  { background: var(--nav3-sucesso-bg); color: var(--nav3-sucesso); }
.nav3-badge.bloqueado { background: var(--nav3-erro-bg);    color: var(--nav3-erro); }
.nav3-badge.arquivada { background: var(--nav3-papel2);     color: var(--nav3-texto-suave); border: 1px solid var(--nav3-borda); }

/* ============================================================
   AÇÕES DE LINHA (editar/arquivar/excluir)
   ============================================================ */
.nav3-acoes form { display: inline; }
.nav3-link-acao {
    background: none; border: none; font: inherit; cursor: pointer;
    padding: 0; margin-right: 14px; font-size: .83rem; font-weight: 600;
    color: var(--nav3-azul-claro);
}
.nav3-link-acao.aprovar  { color: var(--nav3-sucesso); }
.nav3-link-acao.bloquear { color: var(--nav3-aviso); }
.nav3-link-acao.excluir  { color: var(--nav3-erro); }

/* ============================================================
   FORMULÁRIOS (seções, grids)
   ============================================================ */
.nav3-form-secao {
    background: var(--nav3-papel);
    border: 1px solid var(--nav3-borda);
    border-radius: var(--raio-lg);
    padding: 22px;
    margin-bottom: 16px;
}
.nav3-form-secao h3 { margin-bottom: 14px; }
.nav3-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }

.nav3-select-com-botao { display: flex; gap: 8px; }
.nav3-select-com-botao select, .nav3-select-com-botao input { flex: 1; }

/* ============================================================
   BANCO DE QUESTÕES — filtros, chips, cards expansíveis
   ============================================================ */
.nav3-filtros {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
    background: var(--nav3-papel);
    border: 1px solid var(--nav3-borda);
    border-radius: var(--raio-lg);
    padding: 16px;
    margin-bottom: 20px;
}
.nav3-filtros .nav3-campo { margin-bottom: 0; min-width: 150px; flex: 1; }
.nav3-filtros select, .nav3-filtros input[type="text"], .nav3-filtros input[type="search"] {
    width: 100%; padding: 9px 11px;
    border: 1px solid var(--nav3-borda); border-radius: var(--raio-sm);
    font-size: .85rem; font-family: inherit;
    background-color: var(--nav3-fundo); color: var(--nav3-texto);
}
.nav3-filtros select { padding-right: 34px; }
.nav3-filtros label { display: block; font-size: .71rem; font-weight: 700; color: var(--nav3-texto-suave); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .03em; }
.nav3-filtro-topo { display: flex; gap: 10px; align-items: flex-end; margin-bottom: 20px; flex-wrap: wrap; }

.nav3-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.nav3-toolbar-info { font-size: .85rem; color: var(--nav3-texto-suave); }

.nav3-questoes-lista { display: flex; flex-direction: column; gap: 12px; }

.nav3-questao-card {
    background: var(--nav3-papel);
    border: 1px solid var(--nav3-borda);
    border-radius: var(--raio-lg);
    padding: 16px 18px;
    transition: box-shadow .15s;
}
.nav3-questao-card:hover { box-shadow: var(--sombra-sm); }
.nav3-questao-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.nav3-questao-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.nav3-questao-resumo { font-size: .9rem; color: var(--nav3-texto); margin: 0; cursor: pointer; }
.nav3-questao-corpo { display: none; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--nav3-borda); font-size: .9rem; }
.nav3-questao-corpo.aberto { display: block; }
.nav3-questao-corpo img { max-width: 100%; border-radius: var(--raio-sm); }
.nav3-questao-alternativas { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.nav3-questao-alternativa { padding: 8px 12px; border-radius: var(--raio-sm); border: 1px solid var(--nav3-borda); font-size: .87rem; }
.nav3-questao-alternativa.correta { border-color: var(--nav3-sucesso); background: var(--nav3-sucesso-bg); font-weight: 600; }
.nav3-questao-rodape { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-size: .78rem; color: var(--nav3-texto-suave); }
.nav3-questao-acoes { display: flex; gap: 8px; align-items: center; }

.nav3-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 999px;
    font-size: .72rem; font-weight: 700; color: #fff;
}
.nav3-chip-tag {
    display: inline-flex; padding: 3px 10px; border-radius: 999px;
    font-size: .72rem;
    background: var(--nav3-papel2); color: var(--nav3-texto-suave);
    border: 1px solid var(--nav3-borda);
}
.nav3-chip-remover { cursor: pointer; font-weight: 700; margin-left: 2px; }

.nav3-btn-estrela {
    background: none; border: none; cursor: pointer;
    color: var(--nav3-texto-fraco);
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--raio-sm);
}
.nav3-btn-estrela:hover { background: var(--nav3-papel2); }
.nav3-btn-estrela.ativa { color: var(--nav3-latao); }
.nav3-btn-estrela.ativa svg { fill: currentColor; }

.nav3-vazio { text-align: center; padding: 40px 20px; color: var(--nav3-texto-suave); }

/* ---------- Passos (importação em lote) ---------- */
.nav3-passos { display: flex; gap: 8px; margin-bottom: 24px; }
.nav3-passo {
    flex: 1; text-align: center; padding: 10px; border-radius: var(--raio-sm);
    background: var(--nav3-papel); border: 1px solid var(--nav3-borda);
    font-size: .82rem; color: var(--nav3-texto-suave); font-weight: 700;
}
.nav3-passo.ativo { border-color: var(--nav3-azul-claro); color: var(--nav3-azul-claro); background: color-mix(in srgb, var(--nav3-azul) 10%, transparent); }

.nav3-alternativa-linha { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.nav3-alternativa-linha input[type="radio"] { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--nav3-azul); }
.nav3-alternativa-linha .letra { width: 26px; font-weight: 700; color: var(--nav3-azul-claro); flex-shrink: 0; }
.nav3-alternativa-linha input[type="text"] { flex: 1; padding: 9px 11px; border: 1px solid var(--nav3-borda); border-radius: var(--raio-sm); background: var(--nav3-fundo); color: var(--nav3-texto); font-family: inherit; }

.note-editor.note-frame { border-color: var(--nav3-borda) !important; border-radius: var(--raio-sm) !important; }
.note-editable { background: var(--nav3-fundo) !important; color: var(--nav3-texto) !important; }
.note-toolbar { background: var(--nav3-papel) !important; border-color: var(--nav3-borda) !important; }

/* ============================================================
   EDIÇÃO INLINE EM TABELAS (Turmas/Escolas/Alunos)
   ============================================================ */
.nav3-linha-edicao { display: none; }
.nav3-linha-edicao.aberta { display: table-row; }
.nav3-linha-edicao td { background: var(--nav3-fundo); padding: 12px 16px; }
.nav3-linha-edicao form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.nav3-linha-edicao input[type="text"], .nav3-linha-edicao input[type="number"], .nav3-linha-edicao select {
    padding: 7px 10px; border: 1px solid var(--nav3-borda); border-radius: var(--raio-sm);
    font-size: .85rem; font-family: inherit; background-color: var(--nav3-papel); color: var(--nav3-texto);
}

/* ============================================================
   TOOLTIP DE AJUDA (mini lâmpada com dica ao passar o mouse)
   ============================================================ */
.nav3-ajuda {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px;
    border-radius: 50%;
    color: var(--nav3-latao);
    background: color-mix(in srgb, var(--nav3-latao) 14%, transparent);
    cursor: help;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    margin-left: 4px;
}
.nav3-ajuda svg { width: 12px; height: 12px; }
.nav3-ajuda::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 260px;
    background: var(--nav3-texto);
    color: var(--nav3-fundo);
    font-size: .76rem;
    font-weight: 500;
    line-height: 1.4;
    padding: 8px 11px;
    border-radius: var(--raio-sm);
    box-shadow: var(--sombra);
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s, visibility .15s;
    z-index: 50;
    pointer-events: none;
}
.nav3-ajuda:hover::after, .nav3-ajuda:focus::after {
    opacity: 1;
    visibility: visible;
}

/* ============================================================
   COMPARTILHAMENTO — controle segmentado discreto (nome/anônimo/privado)
   ============================================================ */
.nav3-compartilhar-intro { font-size: .85rem; color: var(--nav3-texto-suave); margin: 0 0 10px; }
.nav3-segmentado {
    display: inline-flex; flex-wrap: wrap;
    background: var(--nav3-papel2);
    border-radius: var(--raio-sm);
    padding: 3px; gap: 2px;
}
.nav3-segmentado-opcao {
    display: flex; align-items: center; gap: 5px;
    padding: 7px 13px;
    border-radius: calc(var(--raio-sm) - 2px);
    font-size: .82rem; font-weight: 600;
    color: var(--nav3-texto-suave);
    cursor: pointer;
    transition: background-color .12s, color .12s;
}
.nav3-segmentado-opcao input { display: none; }
.nav3-segmentado-opcao:has(input:checked) {
    background: var(--nav3-papel);
    color: var(--nav3-azul-claro);
    box-shadow: var(--sombra-sm);
}

/* ============================================================
   CURTIR + VEZES USADA (nos cards da listagem)
   ============================================================ */
.nav3-btn-curtir {
    display: inline-flex; align-items: center; gap: 5px;
    background: none; border: none; cursor: pointer;
    color: var(--nav3-texto-suave);
    font-size: .78rem; font-weight: 600;
    padding: 4px 8px; border-radius: var(--raio-sm);
}
.nav3-btn-curtir:hover { background: var(--nav3-papel2); }
.nav3-btn-curtir.ativa { color: var(--nav3-azul-claro); }
.nav3-btn-curtir.ativa svg { fill: currentColor; }
.nav3-uso-badge {
    display: inline-flex; align-items: center; gap: 5px;
    color: var(--nav3-texto-fraco);
    font-size: .78rem; font-weight: 600;
    padding: 4px 8px;
    cursor: help;
}
.nav3-questao-metricas { display: flex; align-items: center; gap: 4px; }

/* ============================================================
   PAGINAÇÃO
   ============================================================ */
.nav3-paginacao { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 24px; }
.nav3-paginacao-info { font-size: .84rem; color: var(--nav3-texto-suave); }
.nav3-linha-edicao select { padding-right: 32px; }

/* ============================================================
   TEXTAREA reutilizável (enunciados, prompts, listas coladas)
   ============================================================ */
.nav3-textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--nav3-borda);
    border-radius: var(--raio-sm);
    font-family: inherit;
    background: var(--nav3-fundo);
    color: var(--nav3-texto);
    resize: vertical;
    transition: border-color .15s, box-shadow .15s;
}

/* Mini barra de formatação + campo editável — usada em edições rápidas
   de texto rico (ex: editar questão importada) sem precisar da tela
   inteira do editor completo. */
.nav3-mini-toolbar { display: flex; gap: 4px; margin-bottom: 5px; }
.nav3-mini-toolbar button {
    width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--nav3-borda);
    background: var(--nav3-papel2); color: var(--nav3-texto); cursor: pointer; font-size: .82rem;
    display: flex; align-items: center; justify-content: center;
}
.nav3-mini-toolbar button:hover { background: var(--nav3-azul); color: #fff; border-color: var(--nav3-azul); }
.nav3-editavel {
    min-height: 56px; padding: 10px 13px; border-radius: var(--raio-sm);
    border: 1px solid var(--nav3-borda); background: var(--nav3-fundo); color: var(--nav3-texto);
    font-size: .92rem; line-height: 1.5; transition: border-color .15s;
}
.nav3-editavel:focus { outline: none; border-color: var(--nav3-azul); }
.nav3-editavel ul { margin: 4px 0; padding-left: 20px; }

.nav3-textarea:focus {
    outline: none;
    border-color: var(--nav3-azul-claro);
    box-shadow: 0 0 0 3px rgba(19,53,94,.14);
}
.nav3-textarea.mono { font-family: 'SF Mono', Consolas, monospace; font-size: .82rem; }