/* ==========================================================================
   CWLESSON — INSTITUTIONAL DESIGN SYSTEM
   ========================================================================== */

/* ── 1. VARIÁVEIS ─────────────────────────────────────────────────────── */
:root {
    /* Fundos — Navy Institucional */
    --bg-main:      #0b1120;
    --bg-surface:   #131d32;
    --bg-surface-2: #1a2640;
    --bg-hover:     #1e2f4d;

    /* Acentos */
    --accent-primary:   #2563eb;
    --accent-secondary: #0ea5e9;
    --accent-hover:     #3b82f6;
    --accent-purple:    #8b5cf6;

    /* Texto */
    --text-bright: #f1f5f9;
    --text-muted:  #94a3b8;
    --text-subtle: #64748b;

    /* Bordas */
    --border-color:  rgba(148, 163, 184, 0.12);
    --border-subtle: rgba(148, 163, 184, 0.08);
    --border-hover:  rgba(148, 163, 184, 0.25);

    /* Sombras */
    --shadow-soft:     0 1px 2px rgba(0,0,0,0.4);
    --shadow-hover:    0 4px 12px rgba(0,0,0,0.5);
    --shadow-card:     0 1px 2px rgba(0,0,0,0.3), 0 4px 12px rgba(0,0,0,0.2);
    --shadow-elevated: 0 8px 24px rgba(0,0,0,0.4);

    /* Bordas arredondadas — mais formais */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 10px;

    --sidebar-width:  280px;
    --topbar-height:  60px;

    --bg-surface-hover: rgba(148, 163, 184, 0.06);
    --transition-default: all 0.15s ease;

    /* ── Cores de estado (theming via white-label) ── */
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-error:   #ef4444;
}

/* ── 1b. MODO CLARO — Institucional off-white ─────────────────────────── */
[data-theme="light"] {
    --bg-main:      #f8fafc;
    --bg-surface:   #ffffff;
    --bg-surface-2: #f1f5f9;
    --bg-hover:     #e2e8f0;

    --accent-primary:   #1d4ed8;
    --accent-secondary: #0284c7;
    --accent-hover:     #2563eb;

    --text-bright: #0f172a;
    --text-muted:  #475569;
    --text-subtle: #94a3b8;

    --border-color:  rgba(15, 23, 42, 0.10);
    --border-subtle: rgba(15, 23, 42, 0.07);
    --border-hover:  rgba(15, 23, 42, 0.18);

    --shadow-soft:     0 1px 2px rgba(0,0,0,0.06);
    --shadow-hover:    0 4px 12px rgba(0,0,0,0.10);
    --shadow-card:     0 1px 2px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.08);
    --shadow-elevated: 0 8px 24px rgba(0,0,0,0.12);

    --bg-surface-hover: rgba(15, 23, 42, 0.04);
}

[data-theme="light"] body {
    background-color: var(--bg-main) !important;
    color: var(--text-bright) !important;
}

[data-theme="light"] .sidebar {
    background-color: var(--bg-surface);
    border-right-color: var(--border-color);
}

[data-theme="light"] .topbar-mobile {
    background-color: var(--bg-surface);
    border-bottom-color: var(--border-color);
}

[data-theme="light"] .card,
[data-theme="light"] .dropdown-menu {
    background-color: var(--bg-surface) !important;
    border-color: var(--border-color) !important;
    color: var(--text-bright) !important;
}

[data-theme="light"] .dropdown-item {
    color: var(--text-bright) !important;
}
[data-theme="light"] .dropdown-item:hover {
    background-color: var(--bg-hover) !important;
}

[data-theme="light"] .text-white {
    color: var(--text-bright) !important;
}
[data-theme="light"] .text-muted,
[data-theme="light"] .text-secondary {
    color: var(--text-muted) !important;
}

[data-theme="light"] .nav-link {
    color: var(--text-muted) !important;
}
[data-theme="light"] .nav-link:hover {
    background-color: var(--bg-hover) !important;
    color: var(--text-bright) !important;
}
[data-theme="light"] .nav-link.active {
    color: var(--accent-primary) !important;
    background: rgba(29, 78, 216, 0.08) !important;
}

[data-theme="light"] .form-control,
[data-theme="light"] .form-select {
    background-color: var(--bg-surface-2) !important;
    border-color: var(--border-color) !important;
    color: var(--text-bright) !important;
}

[data-theme="light"] .table {
    color: var(--text-bright) !important;
}
[data-theme="light"] .table > :not(caption) > * > * {
    background-color: transparent !important;
    color: var(--text-bright) !important;
    border-color: var(--border-color) !important;
}

[data-theme="light"] .kpi-card {
    background: var(--bg-surface);
    border-color: var(--border-color);
}
[data-theme="light"] .kpi-card:hover {
    border-color: rgba(29, 78, 216, 0.2);
}
[data-theme="light"] .card-glass {
    background: var(--bg-surface) !important;
}
[data-theme="light"] .page-badge {
    background: rgba(29, 78, 216, 0.08);
}
[data-theme="light"] .sb-card {
    background: var(--bg-surface);
    border-color: var(--border-color);
}
[data-theme="light"] .nav-section-label {
    color: var(--text-subtle) !important;
}

/* ── 2. RESET & BASE ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
    background-color: var(--bg-main) !important;
    color: var(--text-bright) !important;
    font-family: 'Inter', sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
    letter-spacing: -0.01em;
}

/* ── 3. INTERCEPTADORES BOOTSTRAP ────────────────────────────────────── */
.bg-dark       { background-color: var(--bg-surface) !important; }
.text-white    { color: var(--text-bright) !important; }
.text-secondary,
.text-muted    { color: var(--text-muted) !important; opacity: 1 !important; }
.text-info     { color: var(--accent-primary) !important; text-shadow: none !important; }
.border-info,
.border-secondary { border-color: var(--border-color) !important; }
.shadow-sm     { box-shadow: var(--shadow-soft) !important; }

/* ── 4. SIDEBAR — DESKTOP ─────────────────────────────────────────────── */
.sidebar {
    width: var(--sidebar-width);
    background-color: var(--bg-surface);
    border-right: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    height: 100dvh;   /* iPhone: a barra do Safari não esconde o fim do menu (Sair) */
    z-index: 1050;
    overflow-y: auto;
    overflow-x: hidden;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Collapsed state — desktop only */
@media (min-width: 992px) {
    body.sidebar-collapsed .sidebar {
        transform: translateX(calc(-1 * var(--sidebar-width)));
    }
    body.sidebar-collapsed .topbar-desktop {
        left: 0;
    }
    body.sidebar-collapsed .main-content {
        margin-left: 0;
    }
}

/* ── 5. TOPBAR MOBILE ─────────────────────────────────────────────────── */
.topbar-mobile {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--topbar-height);
    background: var(--bg-main);
    border-bottom: 1px solid var(--border-color);
    z-index: 1040;
    padding: 0 1rem;
    align-items: center;
    justify-content: space-between;
}

/* Tabela com rolagem: position relative para que elementos absolutos dentro dela (ex.: .visually-hidden
   do Bootstrap num <th>) fiquem presos na rolagem; sem isso eles escapavam e alargavam a página inteira */
.table-responsive { position: relative; }

/* Nome da escola no topo do celular: encolhe com "…" para o sino e o avatar nunca saírem da tela
   (nome longo + fonte grande do Android empurrava os dois para fora) */
.topbar-brand { flex: 1 1 auto; min-width: 0; margin-right: 8px; }
.topbar-brand__name { min-width: 0; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── 6. OVERLAY (mobile) ──────────────────────────────────────────────── */
.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: 1045;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.sidebar-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* ── 7. TOPBAR DESKTOP ────────────────────────────────────────────────── */
.topbar-desktop {
    display: none;
    position: fixed;
    top: 0;
    left: var(--sidebar-width);
    right: 0;
    height: 52px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-subtle);
    z-index: 900;
    padding: 0 1.5rem 0 1rem;
    align-items: center;
    gap: 0.75rem;
    transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Nome da escola na topbar — link para home */
.topbar-school-name {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-bright);
    white-space: nowrap;
    overflow: hidden;
    max-width: 220px;
    text-overflow: ellipsis;
    opacity: 1;
    transition: opacity 0.2s ease, max-width 0.25s ease;
    flex-shrink: 0;
}
.topbar-school-name:hover {
    color: var(--accent-secondary);
}

/* Botão toggle sidebar desktop */
.sidebar-toggle-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-md);
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.15s, background 0.15s;
}
.sidebar-toggle-btn:hover {
    color: var(--text-bright);
    background: var(--bg-surface-hover);
}

.topbar-search {
    flex: 1;
    max-width: 400px;
}

.topbar-search .input-group {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.topbar-search .input-group:focus-within {
    border-color: rgba(37, 99, 235, 0.5);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10);
}

.topbar-search .input-group-text {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 0 0.6rem 0 0.85rem;
    font-size: 0.82rem;
}

.topbar-search input.form-control {
    background: transparent;
    border: none;
    color: var(--text-bright);
    font-size: 0.85rem;
    padding: 0 0.85rem 0 0.25rem;
    height: 34px;
    box-shadow: none !important;
}

.topbar-search input.form-control::placeholder {
    color: rgba(148, 163, 184, 0.45);
}

@media (min-width: 992px) {
    .topbar-desktop { display: flex; }
}

/* ── 7b. MAIN CONTENT ─────────────────────────────────────────────────── */
@keyframes fadeInPage {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.main-content {
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 2.5rem;
    transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    animation: fadeInPage 0.22s ease backwards;
}

/* Collapse dos dropdowns da sidebar um pouco mais rápido que o padrão Bootstrap */
.sidebar .collapse,
.sidebar .collapsing {
    transition-duration: 0.2s !important;
}

@media (min-width: 992px) {
    .main-content { padding-top: calc(52px + 2rem); }
}

/* ── 8. NAV LINKS ─────────────────────────────────────────────────────── */
.nav-link {
    color: var(--text-muted) !important;
    font-weight: 500;
    font-size: 0.875rem;
    padding: 0.55rem 1rem;
    border-radius: var(--radius-md);
    margin: 1px 0.75rem;
    transition: var(--transition-default);
    display: flex;
    align-items: center;
    gap: 0.65rem;
    border-left: 3px solid transparent;
}
.nav-link:hover {
    color: var(--text-bright) !important;
    background: rgba(14, 165, 233, 0.06);
    border-left-color: var(--accent-secondary);
}
.nav-link.active {
    color: var(--accent-primary) !important;
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.12) 0%, rgba(37, 99, 235, 0.03) 100%);
    border-left-color: var(--accent-primary);
    font-weight: 600;
}
.nav-link i {
    font-size: 0.9rem;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

/* Rótulos de seção */
.nav-section-label {
    color: var(--text-subtle) !important;
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    padding: 0 1.75rem;
    margin: 1.1rem 0 0.3rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.nav-section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-subtle);
}

/* Sidebar dropdown groups */
.nav-dropdown-toggle {
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    border-left: 3px solid transparent;
}
.nav-dropdown-toggle.has-active {
    color: var(--accent-primary) !important;
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.08) 0%, transparent 100%);
    border-left-color: var(--accent-primary);
}
.nav-chevron {
    font-size: 0.7rem !important;
    width: auto !important;
    margin-left: auto;
    margin-right: 0.25rem;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.nav-dropdown-toggle[aria-expanded="true"] .nav-chevron {
    transform: rotate(180deg);
}
/* Menu da equipe: o número no grupo fechado soma as pendências de dentro; aberto, cada item mostra o seu */
.nav-dropdown-toggle .nav-grupo__conta { margin-left: 0.5rem; margin-right: 0.25rem; }
.nav-dropdown-toggle[aria-expanded="true"] .nav-grupo__conta { display: none; }
.nav-dropdown-toggle .nav-grupo__conta + .nav-chevron { margin-left: 0; }
.nav-dropdown-menu .nav-link {
    padding-left: 2.25rem;
    font-size: 0.84rem;
}
[data-theme="light"] .nav-dropdown-toggle {
    color: var(--text-muted) !important;
}
[data-theme="light"] .nav-dropdown-toggle.has-active {
    color: var(--accent-primary) !important;
}

/* Garantir flex nos links de menu para badge não quebrar layout */
.nav-dropdown-menu .nav-link {
    display: flex !important;
    align-items: center;
}

/* Badge de contagem nos itens do menu lateral */
.nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 5px;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    border-radius: 10px;
    background: var(--accent-primary);
    color: #fff;
    margin-left: auto;
    flex-shrink: 0;
}
.nav-badge--master {
    background: rgba(139, 92, 246, 0.85);
}
.nav-badge--danger {
    background: #ef4444;
}

/* Seção ÁREA MASTER */
.nav-section-label--master {
    color: #a78bfa !important;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(139, 92, 246, 0.22);
}
.nav-section-label--master::after {
    background: rgba(139, 92, 246, 0.25);
}
.nav-section-sublabel {
    font-size: 0.6rem;
    font-weight: 400;
    color: var(--text-muted);
    margin-left: 0.3rem;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
}

/* Toggles e menus da seção master (tom roxo) */
.nav-dropdown-toggle--master {
    color: #a78bfa !important;
}
.nav-dropdown-toggle--master .bi {
    color: #a78bfa !important;
}
.nav-dropdown-toggle--master.has-active {
    background: rgba(139, 92, 246, 0.12) !important;
    border-left-color: #a78bfa !important;
}
.nav-dropdown-menu--master .nav-link {
    color: #c4b5fd !important;
}
.nav-dropdown-menu--master .nav-link:hover,
.nav-dropdown-menu--master .nav-link.active {
    color: #a78bfa !important;
    background: rgba(139, 92, 246, 0.10) !important;
}
.nav-dropdown-menu--master .nav-link.active {
    border-left-color: #a78bfa !important;
}

/* ── 9. CARDS ─────────────────────────────────────────────────────────── */
.card {
    background-color: var(--bg-surface) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card) !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.card:hover,
.hover-scale:hover {
    border-color: var(--border-hover) !important;
    box-shadow: var(--shadow-elevated) !important;
}
.card-header {
    border-bottom: 1px solid var(--border-subtle) !important;
    background-color: var(--bg-surface-2) !important;
    color: var(--text-bright) !important;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.75rem 1.25rem !important;
    display: flex !important;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.card-body { padding: 1.25rem; }

/* Cabecalho de questao do construtor de atividades: precisa quebrar linha
   em vez de truncar, para nao esconder badges/botoes com enunciados longos */
.question-card-header {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    flex-wrap: wrap;
}
.question-card-header h6 {
    min-width: 0;
}
.choice-row {
    flex-wrap: wrap;
}
.choice-row > span.d-flex {
    min-width: 0;
}

/* Card com destaque lateral — marcação institucional */
.card-accent {
    border-left: 3px solid var(--accent-primary) !important;
}
.card-accent-secondary {
    border-left: 3px solid var(--accent-secondary) !important;
}

/* ── 10. BOTÕES ───────────────────────────────────────────────────────── */
/* Padrão único (relatório de usabilidade, 09/10). Cinco tipos:
     Principal  .btn-primary            — a ação principal da tela ou da janela (uma por área)
     Secundário .btn-outline-secondary  — todo o resto (voltar, filtrar, exportar, editar, cancelar)
     Perigo     .btn-danger             — preenchido só no botão final da confirmação de exclusão
                .btn-outline-danger     — excluir, remover, revogar
     Atenção    .btn-warning            — muda a situação: concluir, arquivar, reativar
                .btn-outline-warning
     Link       .btn-link               — ação discreta no meio do texto
   Formas: .btn-icon (só ícone, sem borda), .btn-square (ícone com o fundo de um tipo),
           .btn-state (situação clicável: --on liberada, --off bloqueada, --wait agendada),
           .btn-plain (linha inteira clicável, sem aparência de botão).
   Tamanhos: normal 44 px; .btn-sm 36 px no computador e 44 px no celular; .btn-lg 50 px.
   Cor, borda, fonte e altura não vão no style="" do botão: core/tests/test_buttons.py confere. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 6px 16px;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.2;
    transition: background-color 0.15s ease, border-color 0.15s ease,
                box-shadow 0.15s ease, color 0.15s ease;
}
.btn-sm { min-height: 36px; padding: 4px 12px; font-size: 0.82rem; border-radius: var(--radius-md); }
.btn-lg { min-height: 50px; padding: 8px 22px; font-size: 0.95rem; border-radius: var(--radius-md); }
@media (max-width: 767.98px) { .btn-sm { min-height: 44px; } }
.btn > .bi { line-height: 1; }
.btn > .bi[class*="me-"] { margin-right: 0 !important; }   /* o gap já separa ícone e texto */
.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.28) !important;
}

/* Principal */
.btn-primary {
    background-color: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
    color: #fff !important;
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
}
.btn-primary:hover, .btn-primary:focus-visible {
    background-color: var(--accent-hover) !important;
    border-color: var(--accent-hover) !important;
}
.btn-primary:focus-visible { box-shadow: 0 1px 2px rgba(0,0,0,0.2), 0 0 0 3px rgba(37,99,235,0.28) !important; }
.btn-primary:active { background-color: var(--accent-primary) !important; }

/* Secundário (também o botão de alternar: .active ou aria-pressed="true" marcam o escolhido) */
.btn-outline-secondary {
    border-color: var(--border-hover) !important;
    color: var(--text-bright) !important;
    background: transparent !important;
}
.btn-outline-secondary:hover {
    background: color-mix(in srgb, var(--accent-primary) 8%, transparent) !important;
    border-color: var(--accent-primary) !important;
    color: var(--text-bright) !important;
}
.btn-outline-secondary.active,
.btn-outline-secondary[aria-pressed="true"],
.btn-check:checked + .btn-outline-secondary {
    background: color-mix(in srgb, var(--accent-primary) 16%, transparent) !important;
    border-color: var(--accent-primary) !important;
    color: var(--text-bright) !important;
}
.btn-outline-secondary[aria-pressed="true"]:disabled { opacity: 1; }

/* Atenção */
.btn-warning {
    background-color: var(--color-warning) !important;
    border-color: var(--color-warning) !important;
    color: #1c1204 !important;
    font-weight: 700;
}
.btn-warning:hover { filter: brightness(1.08); }
.btn-outline-warning {
    color: var(--color-warning) !important;
    border-color: color-mix(in srgb, var(--color-warning) 45%, transparent) !important;
    background: transparent !important;
}
.btn-outline-warning:hover {
    border-color: var(--color-warning) !important;
    background: color-mix(in srgb, var(--color-warning) 8%, transparent) !important;
}

/* Link */
.btn-link {
    color: var(--accent-secondary) !important;
    text-decoration: none;
    border-color: transparent !important;
    background: transparent !important;
    padding-left: 4px;
    padding-right: 4px;
}
.btn-link:hover { color: var(--accent-hover) !important; text-decoration: underline; }

/* Só ícone */
.btn-icon {
    min-width: 44px;
    padding: 0;
    color: var(--text-muted) !important;
    background: transparent !important;
    border-color: transparent !important;
}
.btn-icon.btn-sm { min-width: 36px; }
.btn-icon:hover { color: var(--text-bright) !important; background: var(--bg-hover) !important; }
.btn-icon.text-danger { color: var(--color-error) !important; }
.btn-icon.is-pending { color: var(--color-warning) !important; }
.btn-square { min-width: 44px; padding: 0; }
.btn-square.btn-sm { min-width: 36px; }
@media (max-width: 767.98px) { .btn-icon.btn-sm, .btn-square.btn-sm { min-width: 44px; } }

/* Situação clicável: a cor diz a situação e o texto sempre vai junto */
.btn-state { font-weight: 700; border-width: 1px; border-style: solid; min-width: 36px; }
.btn-state--on {
    color: var(--color-success) !important;
    background: color-mix(in srgb, var(--color-success) 12%, transparent) !important;
    border-color: color-mix(in srgb, var(--color-success) 55%, transparent) !important;
}
.btn-state--off {
    color: var(--text-muted) !important;
    background: color-mix(in srgb, var(--text-subtle) 12%, transparent) !important;
    border-color: color-mix(in srgb, var(--text-subtle) 45%, transparent) !important;
}
.btn-state--wait {
    color: var(--color-warning) !important;
    background: color-mix(in srgb, var(--color-warning) 10%, transparent) !important;
    border-color: color-mix(in srgb, var(--color-warning) 50%, transparent) !important;
}
.btn-state--inherited { border-style: dashed; }
.btn-state:hover { filter: brightness(1.15); }
@media (max-width: 767.98px) { .btn-state { min-width: 44px; } }

/* Linha inteira clicável (abrir e fechar um módulo, por exemplo) */
.btn-plain {
    min-width: 0;          /* título comprido trunca em vez de empurrar a linha para fora */
    min-height: 0;
    padding: 0;
    justify-content: flex-start;
    text-align: left;
    color: inherit;
    background: transparent !important;
    border: 0 !important;
}

/* Copiado/feito: confirmação rápida de um botão (o JS põe e tira a classe) */
.btn.is-done {
    color: var(--color-success) !important;
    border-color: color-mix(in srgb, var(--color-success) 55%, transparent) !important;
    background: color-mix(in srgb, var(--color-success) 12%, transparent) !important;
}

/* ── 11. FORMULÁRIOS ──────────────────────────────────────────────────── */
.form-control,
.form-select {
    background-color: var(--bg-surface-2) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-bright) !important;
    border-radius: var(--radius-sm);
    padding: 0.55rem 0.875rem;
    font-size: max(16px, 0.875rem);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.form-control::placeholder { color: var(--text-subtle) !important; }
.form-control:focus,
.form-select:focus {
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18) !important;
    background-color: var(--bg-surface-2) !important;
    color: var(--text-bright) !important;
    outline: none;
}
.form-select option {
    background-color: var(--bg-surface);
    color: var(--text-bright);
}
.input-group-text {
    background-color: var(--bg-surface-2) !important;
    border-color: var(--border-color) !important;
    color: var(--text-muted) !important;
    border-radius: var(--radius-sm) !important;
}
.form-check-input {
    background-color: var(--bg-surface-2);
    border-color: var(--border-color);
    border-radius: var(--radius-sm);
}
.form-check-input:checked {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
}
.form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18) !important;
}
/* Rótulos de campo: só a primeira letra maiúscula (glossário; test_glossary_terms vigia
   o texto) — sem text-transform, que voltaria a mostrar tudo em caixa alta */
.form-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
}
/* Dica abaixo do campo: o cinza do Bootstrap some no tema escuro */
.form-text { color: var(--text-subtle); }

/* ── 12. TABELAS ──────────────────────────────────────────────────────── */
.table,
.table th,
.table td,
.table tr {
    background-color: transparent !important;
    color: var(--text-bright) !important;
    border-color: var(--border-subtle) !important;
}
.table thead th {
    background-color: var(--bg-surface-2) !important;
    color: var(--text-muted) !important;
    text-transform: uppercase;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    border-bottom: 2px solid var(--accent-primary) !important;
    padding: 0.7rem 0.875rem;
    white-space: nowrap;
}
.table tbody tr:nth-child(even) td {
    background-color: rgba(148, 163, 184, 0.02) !important;
}
.table-hover tbody tr {
    transition: background 0.1s ease;
}
.table-hover tbody tr:hover td,
.table-hover tbody tr:hover th {
    background-color: rgba(37, 99, 235, 0.05) !important;
}

/* ── 13. MODAIS ───────────────────────────────────────────────────────── */
.modal-content {
    background-color: var(--bg-surface) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-elevated) !important;
}
.modal-header {
    border-bottom: 1px solid var(--border-subtle);
    background-color: var(--bg-surface-2);
    padding: 1rem 1.25rem;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.modal-header .modal-title {
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: -0.01em;
}
.modal-body  { padding: 1.25rem; }
.modal-footer {
    border-top: 1px solid var(--border-subtle);
    padding: 0.875rem 1.25rem;
    background-color: var(--bg-surface-2);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}
.modal-backdrop { z-index: 1044 !important; }

/* ── 14. BADGES & TAGS ────────────────────────────────────────────────── */
.badge { font-weight: 600; letter-spacing: 0.03em; }
.list-group-item {
    background-color: transparent !important;
    border-color: var(--border-subtle) !important;
    color: var(--text-bright) !important;
}
.list-group-item-action:hover {
    background-color: var(--bg-surface-hover) !important;
    color: var(--text-bright) !important;
}

/* Sistema de tags pill — semântico e consistente */
.tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.4;
}
.tag-success  { background: rgba(16,185,129,0.12); color: #34d399; }
.tag-warning  { background: rgba(245,158,11,0.12); color: #fbbf24; }
.tag-error,
.tag-danger   { background: rgba(239,68,68,0.12);  color: #f87171; }
.tag-info,
.tag-primary  { background: rgba(37,99,235,0.12);  color: #60a5fa; }
.tag-secondary{ background: rgba(14,165,233,0.12); color: #38bdf8; }
.tag-neutral  { background: rgba(100,116,139,0.12);color: #94a3b8; }
.tag-purple   { background: rgba(139,92,246,0.12); color: #a78bfa; }

/* Troca de turma — comparação do aluno com cada turma do curso */
.tr-fit { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; margin-bottom: 4px; border-radius: 999px;
          font-size: 0.78rem; font-weight: 600; border: 1px solid; }
.tr-fit--warning { color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 12%, transparent); border-color: color-mix(in srgb, var(--color-warning) 30%, transparent); }
.tr-fit--success { color: var(--color-success); background: color-mix(in srgb, var(--color-success) 12%, transparent); border-color: color-mix(in srgb, var(--color-success) 30%, transparent); }
.tr-fit--info { color: var(--accent-primary); background: color-mix(in srgb, var(--accent-primary) 12%, transparent); border-color: color-mix(in srgb, var(--accent-primary) 30%, transparent); }
.tr-guess { font-size: 0.78rem; color: var(--text-subtle); margin: 0 0 0.25rem; }

/* ── 15. ACCORDION ────────────────────────────────────────────────────── */
.accordion-button {
    background-color: transparent !important;
    color: var(--text-bright) !important;
    box-shadow: none !important;
    font-weight: 500;
    font-size: 0.875rem;
}
.accordion-button:not(.collapsed) { color: var(--accent-primary) !important; }
.accordion-button::after { filter: invert(1) brightness(0.6); }
.accordion-item {
    background-color: transparent !important;
    border-color: var(--border-color) !important;
}

/* ── 16. PROGRESS ─────────────────────────────────────────────────────── */
.progress {
    background-color: rgba(255, 255, 255, 0.06);
    border-radius: 100px;
    overflow: hidden;
    height: 4px;
}
.progress-bar {
    border-radius: 100px;
    background-color: var(--accent-primary);
}

/* ── 17. ALERTS ───────────────────────────────────────────────────────── */
.alert {
    border-radius: var(--radius-md);
    border-left-width: 3px;
    font-size: 0.875rem;
}
.alert-info,
.alert-primary {
    background-color: rgba(37, 99, 235, 0.08) !important;
    border-color: rgba(37, 99, 235, 0.35) !important;
    color: var(--text-bright) !important;
}
.alert-danger {
    background-color: rgba(239, 68, 68, 0.08) !important;
    border-color: rgba(239, 68, 68, 0.35) !important;
    color: var(--text-bright) !important;
}
.alert-success {
    background-color: rgba(16, 185, 129, 0.08) !important;
    border-color: rgba(16, 185, 129, 0.35) !important;
    color: var(--text-bright) !important;
}
.alert-warning {
    background-color: rgba(245, 158, 11, 0.08) !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
    color: var(--text-bright) !important;
}

/* ── 18. DROPDOWN ─────────────────────────────────────────────────────── */
.dropdown-menu {
    background-color: var(--bg-surface) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-elevated) !important;
    padding: 0.35rem;
}
.dropdown-divider {
    border-color: var(--border-subtle) !important;
    margin: 0.3rem 0;
}
.dropdown-item {
    color: var(--text-muted) !important;
    font-size: 0.875rem;
    padding: 0.45rem 0.875rem;
    border-radius: var(--radius-sm);
    transition: background 0.12s, color 0.12s;
}
.dropdown-item:hover {
    background-color: rgba(37, 99, 235, 0.07) !important;
    color: var(--text-bright) !important;
}

/* ── 19. SCROLLBAR ────────────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg-main); }
::-webkit-scrollbar-thumb { background: var(--bg-hover); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-subtle); }

/* ── 20. UTILITIES ────────────────────────────────────────────────────── */
.tracking-tight  { letter-spacing: -0.03em !important; }
.tracking-widest { letter-spacing: 0.08em !important; }
.overflow-y-auto { overflow-y: auto !important; }

/* ── Tipografia Institucional ────────────────────────────────────────── */
.page-eyebrow {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-secondary);
    margin-bottom: 0.25rem;
    display: block;
}
.display-heading {
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--text-bright);
}
.data-number {
    font-size: 2.25rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--text-bright);
}

/* Danger */
.text-danger,
[class*="text-danger"] { color: #f87171 !important; }
.btn-danger { background-color: var(--color-error) !important; border-color: var(--color-error) !important; color: #fff !important; }
.btn-danger:hover { background-color: #dc2626 !important; border-color: #dc2626 !important; }
.btn-outline-danger { color: #f87171 !important; border-color: rgba(239,68,68,0.4) !important; background: transparent !important; }
.btn-outline-danger:hover { background-color: rgba(239,68,68,0.1) !important; }

/* Success */
.text-success { color: #34d399 !important; }

/* Warning */
.text-warning { color: var(--color-warning) !important; }

/* ── Avatar de inicial (funciona em qualquer tema claro/escuro) ─────── */
.avatar-letter {
    background: var(--accent-primary);
    color: #ffffff;
    font-size: 0.85rem;
}

/* ── 21. CARD VARIANTS ───────────────────────────────────────────────── */
.card-stat {
    border-left: 3px solid var(--accent-primary) !important;
}
.card-stripe {
    position: relative;
    overflow: hidden;
}
.card-stripe::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.card-glass {
    background: var(--bg-surface-2) !important;
}

/* Flat card refinado */
.sb-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.sb-card:hover {
    border-color: var(--border-hover);
    box-shadow: var(--shadow-elevated);
}

/* Destaque para cards que viram o conteúdo principal quando a aula não tem vídeo */
.sb-card-highlight {
    border-color: var(--accent-primary) !important;
    background: rgba(59, 130, 246, 0.03);
    box-shadow: 0 4px 24px -10px rgba(59, 130, 246, 0.35);
}

/* ── 22. KPI CARD UTILITIES ──────────────────────────────────────────── */
.kpi-card {
    background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-surface-2) 100%);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-card);
    padding: 1.25rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.kpi-card:hover {
    border-color: var(--border-hover);
    box-shadow: var(--shadow-elevated);
}
.kpi-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}
.kpi-value {
    font-size: 2.1rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.1;
    color: var(--text-bright);
}
.kpi-icon {
    width: 40px; height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.1rem;
}

/* ── 23. PAGE HEADER UTILITIES ───────────────────────────────────────── */

/* Container do header de página — linha separadora abaixo */
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 2rem;
    flex-wrap: wrap;
}
.page-header__left  { flex: 1; min-width: 0; }
.page-header__right { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; flex-wrap: wrap; }

.page-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    background: rgba(37, 99, 235, 0.12);
    color: var(--accent-secondary);
    text-transform: uppercase;
    border: 1px solid rgba(37, 99, 235, 0.2);
    margin-bottom: 0.5rem;
}
.page-title {
    font-size: clamp(1.3rem, 3vw, 1.75rem);
    letter-spacing: -0.03em;
    font-weight: 800;
    color: var(--text-bright);
    margin-bottom: 0.25rem;
}

/* KPI clicável — hover institucional */
.kpi-clickable {
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.kpi-clickable:hover {
    border-color: rgba(37, 99, 235, 0.4) !important;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15), var(--shadow-elevated) !important;
    transform: translateY(-2px);
}

/* ── 24. RESPONSIVE — MOBILE SIDEBAR ─────────────────────────────────── */
@media (max-width: 991.98px) {
    .topbar-mobile { display: flex !important; }

    .sidebar {
        transform: translateX(-100%);
    }
    .sidebar.open {
        transform: translateX(0);
        box-shadow: 8px 0 32px rgba(0, 0, 0, 0.5);
    }

    .main-content {
        margin-left: 0 !important;
        padding: 1rem;
        padding-top: calc(var(--topbar-height) + 1rem);
    }
}

@media (max-width: 575.98px) {
    .main-content { padding: 0.75rem; padding-top: calc(var(--topbar-height) + 0.75rem); }
    .page-header { flex-direction: column; gap: 0.75rem; }
    .page-header__right { width: 100%; }
    .d-flex.justify-content-between { flex-wrap: wrap; }
    .table-responsive { -webkit-overflow-scrolling: touch; }
    .modal-dialog { margin: 0.5rem; }
    .modal-content { border-radius: var(--radius-lg); }
    .stat-card-col { flex: 0 0 50%; max-width: 50%; }
    /* Tags não quebram em telas muito pequenas */
    .tag { font-size: 0.65rem; padding: 0.12rem 0.5rem; }
}

/* ── Título de aula (ficha da turma) ──────────────────────────────────────── */
.lesson-title {
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    font-weight: 700;
    color: var(--text-bright);
    letter-spacing: -0.4px;
    line-height: 1.25;
    margin: 0;
}

/* ============================================================
   COURSE DETAIL — Rail de módulos + painel + busca
   ============================================================ */
.cd-page { padding: 0; }

/* Cabeçalho */
.cd-head { display: flex; align-items: flex-end; justify-content: space-between;
           gap: 20px; flex-wrap: wrap; margin-bottom: 1.5rem; }
.cd-head__main { min-width: 0; }
.cd-back { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem;
           color: var(--text-muted); text-decoration: none; margin-bottom: 0.6rem; }
.cd-back:hover { color: var(--text-bright); }
.cd-course-title { font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 800;
                    letter-spacing: -0.035em; color: var(--text-bright); margin: 0 0 0.5rem; }
.cd-head__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cd-head__note { font-size: 0.78rem; color: var(--text-muted); }
.cd-avg { display: flex; align-items: center; gap: 10px; background: var(--bg-surface);
          border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
          padding: 0.6rem 0.9rem; }
.cd-avg > i { color: #eab308; font-size: 1rem; }
.cd-avg__label { display: block; font-size: 0.63rem; font-weight: 700; letter-spacing: 0.09em;
                  text-transform: uppercase; color: var(--text-subtle); }
.cd-avg__value { display: block; font-size: 1.05rem; font-weight: 800;
                  letter-spacing: -0.03em; color: var(--text-bright); }
.cd-avg__value small { font-size: 0.72rem; font-weight: 600; color: var(--text-muted); }

/* Continue de onde parou — mesmo tratamento visual de .next-lesson-btn */
.cd-resume { display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
             background: var(--accent-primary); border-radius: var(--radius-lg);
             padding: 1.1rem 1.4rem; margin-bottom: 1.5rem; text-decoration: none !important;
             transition: filter var(--transition-default), transform var(--transition-default); }
.cd-resume:hover { filter: brightness(1.1); transform: translateY(-1px); }
.cd-resume__icon { width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
                    display: flex; align-items: center; justify-content: center;
                    background: rgba(255,255,255,0.16); color: #fff; font-size: 1.5rem; }
.cd-resume__body { flex: 1; min-width: 220px; display: flex; flex-direction: column; }
.cd-resume__eyebrow { font-size: 0.63rem; font-weight: 700; letter-spacing: 0.1em;
                       text-transform: uppercase; color: rgba(255,255,255,0.75); margin-bottom: 0.3rem; }
.cd-resume__title { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.025em; color: #fff; }
.cd-resume__meta { font-size: 0.8rem; color: rgba(255,255,255,0.75); margin-top: 0.35rem; }
.cd-resume__actions .btn-primary { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.3); }
.cd-resume__actions .btn-primary:hover { background: rgba(255,255,255,0.28); }

/* Busca + chips */
.cd-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 1.1rem; }
.cd-search { flex: 1; min-width: 240px; display: flex; align-items: center; gap: 9px;
             background: var(--bg-surface); border: 1px solid var(--border-color);
             border-radius: var(--radius-lg); padding: 0.55rem 0.85rem; }
.cd-search:focus-within { border-color: var(--accent-primary); }
.cd-search > i { color: var(--text-subtle); font-size: 0.85rem; }
.cd-search input { flex: 1; background: none; border: none; outline: none;
                    color: var(--text-bright); font-size: 0.85rem; font-family: inherit; }
.cd-search input::-webkit-search-cancel-button { display: none; }
.cd-search__clear { background: none; border: none; color: var(--text-muted); cursor: pointer;
                     display: flex; padding: 0; }
.cd-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cd-chip { display: inline-flex; align-items: center; gap: 6px; padding: 0.42rem 0.7rem;
           border-radius: 999px; border: 1px solid var(--border-color);
           background: var(--bg-surface); color: var(--text-muted); font-family: inherit;
           font-size: 0.75rem; font-weight: 600; cursor: pointer;
           transition: border-color var(--transition-default), color var(--transition-default); }
.cd-chip:hover { border-color: var(--border-hover); }
.cd-chip.is-active { background: rgba(37,99,235,0.14); border-color: var(--accent-primary);
                      color: var(--text-bright); }

/* Grid: trilha + painel */
.cd-grid { display: grid; grid-template-columns: 280px minmax(0,1fr); gap: 16px; align-items: start; }

/* Trilha de módulos */
.cd-rail { background: var(--bg-surface); border: 1px solid var(--border-subtle);
           border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; }
.cd-rail__head { display: flex; align-items: center; justify-content: space-between; gap: 8px;
                  padding: 0.8rem 1rem; border-bottom: 1px solid var(--border-subtle);
                  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em;
                  text-transform: uppercase; color: var(--text-subtle); }
.cd-rail__list { display: flex; flex-direction: column; gap: 4px; padding: 0.5rem; }
.cd-mod { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; text-align: left;
          padding: 0.7rem 0.8rem; border-radius: var(--radius-md); border: 1px solid transparent;
          background: none; cursor: pointer; font-family: inherit;
          transition: border-color var(--transition-default), background var(--transition-default); }
.cd-mod:hover { border-color: var(--border-hover); }
.cd-mod[aria-selected="true"] { background: rgba(37,99,235,0.14); border-color: var(--accent-primary); }
.cd-mod__top { display: flex; align-items: center; gap: 8px; }
.cd-mod__top > i { color: var(--text-muted); font-size: 0.95rem; }
.cd-mod__title { flex: 1; font-size: 0.88rem; font-weight: 700; letter-spacing: -0.015em;
                  color: var(--text-muted); }
.cd-mod[aria-selected="true"] .cd-mod__title,
.cd-mod[aria-selected="true"] .cd-mod__top > i { color: var(--text-bright); }
.cd-mod__check { color: var(--color-success); font-size: 0.85rem; }
.cd-mod__count { font-size: 0.7rem; color: var(--text-muted); }
.cd-mod__tag { align-self: flex-start; }
.cd-bar { display: block; height: 4px; background: var(--bg-surface-2);
          border-radius: 99px; overflow: hidden; }
.cd-bar__fill { display: block; height: 100%; background: var(--accent-primary);
                border-radius: 99px; transition: width 0.4s ease; }
.cd-bar__fill.is-complete { background: var(--color-success); }

/* Módulos ainda não liberados — accordion nativo do Bootstrap */
.cd-soon { border-top: 1px solid var(--border-subtle); }
.cd-soon__toggle { font-size: 0.76rem !important; padding: 0.75rem 1rem !important; }
.cd-soon__list { display: flex; flex-direction: column; gap: 0.45rem; padding: 0 1rem 1rem !important; }
.cd-soon__label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cd-soon__when { font-weight: 400; color: var(--text-muted); }
.cd-soon__item { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; font-size: 0.8rem; color: var(--text-subtle); }
.cd-soon__name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cd-soon__date { font-size: 0.74rem; color: var(--text-muted); white-space: nowrap; }
.cd-soon__note { font-size: 0.72rem; color: var(--text-subtle); line-height: 1.5; }

/* Painel do módulo */
.cd-pane { background: var(--bg-surface); border: 1px solid var(--border-subtle);
           border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
           overflow: hidden; min-width: 0; }
.cd-panel__head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
                   padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--border-subtle); }
.cd-panel__head > i { color: var(--accent-secondary); font-size: 1.1rem; }
.cd-panel__titles { flex: 1; min-width: 160px; }
.cd-panel__title { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.025em;
                    color: var(--text-bright); margin: 0; }
.cd-panel__sub { font-size: 0.78rem; color: var(--text-muted); }
.cd-pill { padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.68rem; font-weight: 700;
           background: rgba(37,99,235,0.14); color: var(--accent-secondary);
           border: 1px solid rgba(37,99,235,0.22); white-space: nowrap; }
.cd-pill--success { background: rgba(16,185,129,0.12); color: #34d399; border-color: rgba(16,185,129,0.3); }

/* Item (aula / atividade / avaliação / material) */
.cd-item { display: flex; align-items: center; gap: 14px; padding: 0.9rem 1.25rem;
           border-bottom: 1px solid var(--border-subtle); color: var(--text-bright);
           text-decoration: none !important; transition: background var(--transition-default); }
.cd-item:hover { background: var(--bg-surface-hover); color: var(--text-bright); }
.cd-item:last-child { border-bottom: none; }
.cd-item__icon { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
                  display: flex; align-items: center; justify-content: center; font-size: 1rem; }
.cd-item__icon--muted { background: rgba(255,255,255,0.04); color: var(--text-subtle); }
.cd-item__body { flex: 1; min-width: 0; }
.cd-item__row { display: flex; align-items: center; gap: 8px; }
.cd-item__title { font-size: 0.9rem; font-weight: 600; letter-spacing: -0.01em;
                   white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-item__kind { flex-shrink: 0; }
.cd-item__crumb { display: none; font-size: 0.7rem; color: var(--text-subtle); }
.cd-item__meta { display: flex; align-items: center; gap: 6px; font-size: 0.74rem;
                  color: var(--text-muted); margin-top: 3px; flex-wrap: wrap; }
.cd-item__meta.is-done { color: var(--color-success); }
.cd-item__staff-note { color: var(--text-subtle); }
.cd-item__chev { color: var(--text-subtle); font-size: 0.75rem; flex-shrink: 0; }
.cd-locked-note { display: flex; align-items: center; gap: 12px; padding: 1rem 1.25rem;
                   color: var(--text-subtle); font-size: 0.8rem; line-height: 1.5; }

/* Estados vazios */
.cd-empty { padding: 2.5rem 1.25rem; text-align: center; color: var(--text-muted); }
.cd-empty > i { display: block; font-size: 1.6rem; margin-bottom: 0.6rem; color: var(--text-subtle); }
.cd-empty span { font-size: 0.85rem; }
.cd-empty--course h2 { font-size: 1.05rem; font-weight: 700; color: var(--text-bright); margin: 0 0 0.4rem; }
.cd-empty--course p { font-size: 0.85rem; margin: 0; }

/* Modo busca — mostra a migalha do módulo em cada linha, esconde cabeçalho do painel */
.cd-page.is-searching .cd-item__crumb { display: inline; }
.cd-page.is-searching .cd-panel__head,
.cd-page.is-searching .cd-locked-note { display: none; }

/* ── Responsivo ── */
@media (max-width: 1040px) {
    .cd-grid { grid-template-columns: 1fr; }
    .cd-rail__list { flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory;
                      -webkit-overflow-scrolling: touch; }
    .cd-mod { flex: 0 0 210px; scroll-snap-align: start; }
}
@media (max-width: 575.98px) {
    .cd-resume { padding: 1rem; gap: 12px; }
    .cd-resume__icon { width: 44px; height: 44px; font-size: 1.25rem; }
    .cd-resume__actions { width: 100%; }
    .cd-resume__actions .btn { width: 100%; justify-content: center; }
    .cd-item { padding: 0.85rem 1rem; }
    .cd-item__row { flex-wrap: wrap; }
    .cd-item__title { white-space: normal; }
    .cd-chips { overflow-x: auto; flex-wrap: nowrap; width: 100%; padding-bottom: 2px; }
    .cd-item, .cd-mod, .cd-chip, .cd-soon__toggle { min-height: 44px; }
}

/* ══════════════════════════════════════════════════════════════════════
   ÁREA DO ALUNO — Início, Atividades (Para fazer + Boletim), Minha conta
   Modelo aprovado no relatório de usabilidade: uma ação principal por tela,
   identidade do sistema (etiqueta, cartões KPI, borda azul, etiquetas).
   Só tokens do tema: as cores seguem o white-label de cada unidade.
   ══════════════════════════════════════════════════════════════════════ */
.al-page { width: 100%; max-width: 1040px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
.al-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; }
.al-header .page-badge { margin-bottom: 0.5rem; }
.al-header .page-title { margin-bottom: 0.15rem; }
.al-subtitle { color: var(--text-muted); margin: 0; font-size: 0.95rem; }
.al-eyebrow {
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-muted);
}
.al-section-label {
    display: flex; align-items: center; gap: 8px; margin: 0;
    font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--text-muted);
}
.al-surface {
    background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-surface-2) 100%);
    border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
}
.al-icon {
    width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--radius-md);
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem;
    background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-primary) 25%, transparent);
    color: var(--accent-primary);
}
.al-icon--warning { background: color-mix(in srgb, var(--color-warning) 12%, transparent);
                    border-color: color-mix(in srgb, var(--color-warning) 25%, transparent); color: var(--color-warning); }
.al-icon--success { background: color-mix(in srgb, var(--color-success) 12%, transparent);
                    border-color: color-mix(in srgb, var(--color-success) 25%, transparent); color: var(--color-success); }
.al-icon--lg { width: 52px; height: 52px; font-size: 1.4rem; }

/* Botões grandes (alvo de toque confortável) */
.al-btn {
    min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 0 20px; border-radius: var(--radius-md); font-size: 0.92rem; font-weight: 600;
    text-decoration: none; border: 1px solid var(--border-hover); color: var(--text-bright);
    background: transparent; transition: border-color .15s ease, background .15s ease, filter .15s ease;
}
.al-btn:hover { border-color: var(--accent-primary); color: var(--text-bright);
                background: color-mix(in srgb, var(--accent-primary) 8%, transparent); }
.al-btn--primary { min-height: 50px; padding: 0 26px; font-size: 0.95rem; font-weight: 700; color: #fff;
                   background: var(--accent-primary); border-color: var(--accent-primary);
                   box-shadow: 0 4px 14px color-mix(in srgb, var(--accent-primary) 35%, transparent); }
.al-btn--primary:hover { color: #fff; background: var(--accent-primary); filter: brightness(1.1); }
.al-btn--soft { background: color-mix(in srgb, var(--accent-primary) 8%, transparent); border-color: var(--accent-primary); }

/* Nível e pontos (discreto, ao lado do título) */
.al-level { display: flex; align-items: center; gap: 12px; padding: 10px 14px; flex: 0 1 340px;
            text-decoration: none; color: inherit; }
.al-level:hover { color: inherit; border-color: var(--border-hover); }
.al-level__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.al-level__line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.85rem; }
.al-level__line strong { letter-spacing: -0.01em; }

/* Continue de onde parou */
.al-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; padding: 22px 24px;
           border-color: color-mix(in srgb, var(--accent-primary) 30%, transparent);
           border-left: 3px solid var(--accent-primary); }
.al-hero__body { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.al-hero__title { margin: 0; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.2; color: var(--text-bright); }
.al-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 0.82rem; color: var(--text-muted); }
.al-meta i { margin-right: 4px; }

/* Cartões de ação no estilo KPI */
.al-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.al-kpi { display: flex; flex-direction: column; gap: 12px; padding: 20px; }
.al-kpi__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.al-kpi__value { display: flex; align-items: baseline; gap: 8px; }
.al-kpi__value strong { font-size: 2.1rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; color: var(--text-bright); }
.al-kpi__value span { color: var(--text-muted); font-size: 0.9rem; }
.al-kpi .al-btn { margin-top: auto; }

/* Meu curso */
.al-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
           box-shadow: var(--shadow-card); overflow: hidden; }
.al-card__body { padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.al-card__foot { padding: 14px 20px 18px; border-top: 1px solid var(--border-subtle);
                 display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.al-course-title { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text-bright); }
.al-progress { display: flex; align-items: center; gap: 10px; }
.al-progress .progress { flex: 1; height: 6px; }
.al-progress .progress-bar.is-done { background-color: var(--color-success); }
.al-progress span { font-size: 0.8rem; color: var(--text-muted); min-width: 38px; text-align: right; }
.al-trail { list-style: none; margin: 0; padding: 0; }
.al-trail li { display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 8px 20px;
               border-top: 1px solid var(--border-subtle); }
.al-trail li.is-current { background: color-mix(in srgb, var(--accent-primary) 6%, transparent); }
.al-trail a { color: inherit; text-decoration: none; }
.al-trail a:hover .al-trail__title { color: var(--accent-secondary); }
.al-trail__mark { width: 34px; height: 34px; flex-shrink: 0; border-radius: var(--radius-md);
                  display: inline-flex; align-items: center; justify-content: center;
                  background: color-mix(in srgb, var(--text-muted) 12%, transparent); color: var(--text-muted); }
.al-trail li.is-done .al-trail__mark { background: color-mix(in srgb, var(--color-success) 12%, transparent); color: var(--color-success); }
.al-trail li.is-current .al-trail__mark { background: var(--accent-primary); color: #fff; }
.al-trail__title { display: block; font-weight: 600; letter-spacing: -0.01em; color: var(--text-bright); }
.al-trail__sub { display: block; font-size: 0.78rem; color: var(--text-subtle); }
.al-others { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; color: var(--text-muted); }
.al-others a { color: var(--accent-secondary); }

.al-help { display: flex; align-items: center; gap: 12px; padding: 14px 16px; font-size: 0.88rem; color: var(--text-muted);
           background: color-mix(in srgb, var(--accent-secondary) 8%, transparent);
           border: 1px solid color-mix(in srgb, var(--accent-secondary) 25%, transparent); border-radius: var(--radius-lg); }
.al-help > i { color: var(--accent-secondary); font-size: 1.15rem; }
.al-help a { color: var(--accent-secondary); font-weight: 600; }
.al-help > span { min-width: 0; overflow-wrap: anywhere; }   /* e-mail longo da secretaria no celular */

/* Atividades: abas, filtro e cartões */
.al-filter { display: flex; flex-direction: column; gap: 6px; flex: 0 1 280px; }
.al-filter select { min-height: 44px; }
.al-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 460px; border-bottom: 1px solid var(--border-color); }
.al-tab { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: -1px;
          border-bottom: 2px solid transparent; color: var(--text-muted); font-size: 0.92rem; font-weight: 700; text-decoration: none; }
.al-tab:hover { color: var(--text-bright); }
.al-tab.is-active { color: var(--text-bright); border-bottom-color: var(--accent-primary);
                    background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--accent-primary) 10%, transparent) 100%); }
.al-count { font-size: 0.7rem; font-weight: 700; padding: 1px 8px; border-radius: 999px;
            background: color-mix(in srgb, var(--text-muted) 14%, transparent); color: var(--text-muted); }
.al-count--alert { background: color-mix(in srgb, var(--color-warning) 15%, transparent); color: var(--color-warning); }
.al-group { display: flex; flex-direction: column; gap: 10px; }
.al-group__title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 0.75rem; font-weight: 700;
                   letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.al-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-primary); }
.al-dot--warning { background: var(--color-warning); }
.al-task { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; padding: 18px 20px; }
.al-task--returned { border-left: 3px solid var(--color-warning); }
.al-task--overdue { border-left: 3px solid var(--color-error); }
.al-task__body { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.al-task__title { font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text-bright); }
.al-task__action { flex: 0 0 200px; display: flex; flex-direction: column; gap: 6px; }
.al-task__hint { font-size: 0.75rem; color: var(--text-subtle); text-align: center; }
.al-overdue-text { color: var(--color-error); font-weight: 700; }
.al-comment { margin-top: 4px; padding: 10px 12px; font-size: 0.85rem; color: var(--text-muted); border-radius: var(--radius-md);
              background: color-mix(in srgb, var(--color-warning) 8%, transparent);
              border: 1px solid color-mix(in srgb, var(--color-warning) 22%, transparent); }
.al-comment strong { color: var(--text-bright); font-weight: 600; }
.al-empty { padding: 44px 20px; text-align: center; }
.al-empty > i { display: block; font-size: 1.8rem; color: var(--color-success); margin-bottom: 6px; }
.al-link-review { align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center; gap: 10px; padding: 0 14px;
                  border-radius: var(--radius-md); font-size: 0.85rem; color: var(--text-muted); text-decoration: none;
                  background: color-mix(in srgb, var(--accent-primary) 8%, transparent);
                  border: 1px solid color-mix(in srgb, var(--accent-primary) 25%, transparent); }
.al-link-review strong { color: var(--accent-secondary); }

/* Boletim */
.al-kpis-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.al-mini { display: flex; flex-direction: column; gap: 8px; padding: 18px; }
.al-mini__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.al-mini__value strong { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; color: var(--text-bright); }
.al-mini__value strong.is-good { color: var(--color-success); }
.al-mini__value span { font-size: 0.8rem; color: var(--text-muted); margin-left: 4px; }
.al-course > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
                       padding: 18px 20px; border-bottom: 1px solid var(--border-subtle);
                       background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-surface-2) 100%); }
.al-course > summary::-webkit-details-marker { display: none; }
.al-course:not([open]) > summary { border-bottom: 0; }
.al-course__info { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.al-course__info .progress { max-width: 360px; height: 6px; }
.al-course__avg { text-align: right; }
.al-course__avg strong { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.04em; color: var(--text-bright); }
.al-course__avg small { color: var(--text-muted); }
.al-course__chevron { color: var(--text-muted); transition: transform .2s ease; }
.al-course[open] .al-course__chevron { transform: rotate(180deg); }
.al-grades-head, .al-grade { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 14px 20px;
                              border-bottom: 1px solid var(--border-subtle); }
.al-grades-head { padding-top: 10px; padding-bottom: 10px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em;
                  text-transform: uppercase; color: var(--text-subtle); }
.al-grade:last-child { border-bottom: 0; }
.al-grade__main { flex: 1 1 260px; min-width: 0; }
.al-grade__title { font-weight: 600; letter-spacing: -0.01em; color: var(--text-bright); }
.al-grade__sub { font-size: 0.78rem; color: var(--text-subtle); }
.al-grade__note { margin-top: 6px; font-size: 0.82rem; color: var(--text-muted); }
.al-grade__note strong { color: var(--accent-secondary); font-weight: 600; }
.al-col-nota { flex: 0 0 110px; font-variant-numeric: tabular-nums; }
.al-col-nota strong { font-size: 1.2rem; font-weight: 800; letter-spacing: -0.03em; color: var(--text-bright); }
.al-col-nota strong.is-waiting { color: var(--text-subtle); }
.al-col-nota small { color: var(--text-subtle); }
.al-col-situacao { flex: 0 0 190px; }
.al-col-acao { flex: 0 0 120px; text-align: right; }
.al-col-acao a { min-height: 40px; display: inline-flex; align-items: center; gap: 4px; font-size: 0.85rem; font-weight: 600;
                 color: var(--accent-secondary); text-decoration: none; }

/* Atividades por módulo: faixas dentro do cartão do curso (Para fazer e Boletim) */
.al-course__avg { display: flex; flex-direction: column; align-items: flex-end; }
.al-course__alerts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-top: 6px; }
.al-mod > summary { list-style: none; }
.al-mod > summary::-webkit-details-marker { display: none; }
.al-band { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-height: 52px; padding: 10px 20px;
           background: var(--bg-surface); border-bottom: 1px solid var(--border-subtle); cursor: pointer; }
.al-band:hover { background: var(--bg-hover); }
.al-mod[open] > .al-band { background: var(--bg-surface-2); }
.al-mod.is-nested > .al-band, .al-band.is-nested { padding-left: 40px; }
.al-mod--warning > .al-band { box-shadow: inset 3px 0 0 var(--color-warning); }
.al-mod--error > .al-band { box-shadow: inset 3px 0 0 var(--color-error); }
.al-mod--primary > .al-band { box-shadow: inset 3px 0 0 var(--accent-primary); }
.al-band__text { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.al-band__label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.al-band__name { font-size: 0.85rem; color: var(--text-muted); }
.al-band__sub { font-size: 0.78rem; color: var(--text-subtle); }
.al-band__text .al-band__sub { font-size: 0.75rem; }
.al-band__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.al-band__icon { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
                 font-size: 0.8rem; background: var(--bg-surface-2); color: var(--text-subtle); }
.al-band__icon.is-done { background: color-mix(in srgb, var(--color-success) 12%, transparent); color: var(--color-success); }
.al-band__chevron { color: var(--text-muted); font-size: 0.85rem; transition: transform .2s ease; }
.al-mod[open] > .al-band .al-band__chevron { transform: rotate(180deg); }
.al-band--row { cursor: default; min-height: 44px; color: var(--text-subtle); }
.al-band--row:hover { background: var(--bg-surface); }
.al-mod--locked .al-band__label { color: var(--text-subtle); }
.al-band__body { display: flex; flex-direction: column; gap: 18px; padding: 18px 20px 20px; border-bottom: 1px solid var(--border-subtle); }
.al-mod.is-nested .al-band__body { padding-left: 40px; }
.al-course > .al-mod:last-child > .al-band, .al-course > .al-mod:last-child > .al-band__body,
.al-course > .al-mod:last-child[open] > .al-band:only-child { border-bottom: 0; }

/* Uma aula e as atividades dela, presas por uma linha */
.al-lesson { display: flex; flex-direction: column; gap: 10px; }
.al-lesson__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.al-lesson__icon { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
                   background: var(--bg-surface-2); border: 1px solid var(--border-color); color: var(--text-muted); font-size: 0.85rem; }
.al-lesson__title { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; font-size: 0.92rem; font-weight: 700;
                    letter-spacing: -0.01em; color: var(--text-bright); }
.al-lesson__title small { font-size: 0.75rem; font-weight: 400; color: var(--text-subtle); letter-spacing: 0; }
.al-lesson__link { min-height: 36px; display: inline-flex; align-items: center; gap: 4px; font-size: 0.82rem; font-weight: 600;
                   color: var(--accent-secondary); text-decoration: none; }
.al-lesson__items { display: flex; flex-direction: column; gap: 8px; margin-left: 14px; padding-left: 22px; border-left: 2px solid var(--border-color); }
.al-lesson__items .al-task { padding: 14px 16px; background: var(--bg-surface-2); border-radius: var(--radius-md); }
.al-lesson__items .al-task__action { flex-basis: 180px; }
.al-done { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 10px 14px;
           border: 1px dashed var(--border-color); border-radius: var(--radius-md); }
.al-done__icon { width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
                 font-size: 0.8rem; color: var(--accent-secondary); background: color-mix(in srgb, var(--accent-primary) 12%, transparent); }
.al-done.is-graded .al-done__icon { color: var(--color-success); background: color-mix(in srgb, var(--color-success) 12%, transparent); }
.al-done__text { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; }
.al-done__title { font-size: 0.88rem; font-weight: 600; color: var(--text-muted); }
.al-done__sub { font-size: 0.75rem; color: var(--text-subtle); }
.al-done__grade { min-width: 58px; text-align: right; font-variant-numeric: tabular-nums; }
.al-done__grade strong { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.03em; color: var(--text-bright); }
.al-done__grade strong.is-waiting { color: var(--text-subtle); }
.al-done__grade small { color: var(--text-subtle); }
/* Por padrão, dentro de um módulo com pendência, só o que falta fazer */
.al-fazer:not(.show-delivered) .al-mod--pending .al-done,
.al-fazer:not(.show-delivered) .al-mod--pending .al-lesson.is-delivered { display: none; }

/* Barra do topo: o que precisa de atenção + mostrar entregues */
.al-fazer__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.al-attention { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.al-chip { min-height: 36px; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 999px;
           font-size: 0.82rem; font-weight: 700; text-decoration: none; }
.al-chip span { font-weight: 500; color: var(--text-muted); }
.al-chip--warning { color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 10%, transparent);
                    border: 1px solid color-mix(in srgb, var(--color-warning) 30%, transparent); }
.al-chip--danger { color: var(--color-error); background: color-mix(in srgb, var(--color-error) 10%, transparent);
                   border: 1px solid color-mix(in srgb, var(--color-error) 30%, transparent); }
.al-chip:hover { filter: brightness(1.15); }
.al-switch { position: relative; min-height: 40px; display: inline-flex; align-items: center; gap: 10px; margin: 0;
             font-size: 0.85rem; color: var(--text-muted); cursor: pointer; }
.al-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.al-switch__track { position: relative; width: 36px; height: 20px; flex-shrink: 0; border-radius: 999px;
                    background: var(--bg-surface-2); border: 1px solid var(--border-hover); transition: background .15s ease; }
.al-switch__track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
                           background: #fff; transition: left .15s ease; }
.al-switch input:checked + .al-switch__track { background: var(--accent-primary); border-color: var(--accent-primary); }
.al-switch input:checked + .al-switch__track::after { left: 18px; }
.al-switch input:focus-visible + .al-switch__track { outline: 2px solid var(--accent-secondary); outline-offset: 2px; }
.al-concluded { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 14px 18px; border-radius: var(--radius-lg);
                background: color-mix(in srgb, var(--color-success) 6%, transparent);
                border: 1px solid color-mix(in srgb, var(--color-success) 20%, transparent); }
.al-concluded strong { color: var(--text-bright); }
.al-concluded span { flex: 1 1 200px; font-size: 0.85rem; color: var(--text-muted); }
.al-concluded a { color: var(--accent-secondary); font-size: 0.85rem; font-weight: 600; }

/* Aula: próximo passo depois de concluir (atividade da aula ou próxima aula) */

/* ══════════════════════════════════════════════════════════════════════════
   KIT DE COMPONENTES (cw-*) — a mesma linguagem visual da área do aluno, para
   as telas da equipe (começa pela correção). Cabeçalho, botões, filtros com
   contagem, barra de filtros, cartões, avisos com "Desfazer", estado vazio.
   ══════════════════════════════════════════════════════════════════════════ */
/* width: 100% — com margin auto a página tomava a largura do conteúdo, e um nome longo sem quebra
   (ex.: "Pedro André de Oliveira Pereira" no Mais) deixava a tela inteira mais larga que o celular */
.cw-page { width: 100%; min-width: 0; max-width: 1120px; margin: 0 auto; padding: 1.75rem clamp(1rem, 3vw, 2.5rem) 3rem; display: flex; flex-direction: column; gap: 18px; }
.cw-page--wide { max-width: 1240px; }
.cw-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; }
.cw-header .page-title { margin: 0; font-weight: 800; letter-spacing: -0.03em; }
.cw-subtitle { margin: 6px 0 0; color: var(--text-muted); }
.cw-subtitle strong { color: var(--text-bright); }
.cw-header__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cw-stack { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cw-stack--sm { gap: 8px; }
.cw-muted { color: var(--text-muted); }
.cw-eyebrow { display: block; margin: 0; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.cw-optional { text-transform: none; letter-spacing: 0; font-weight: 500; }
.cw-footnote { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--text-subtle); }
.cw-divider { height: 1px; background: var(--border-subtle); }

/* Botões (alvo de toque de 44 px) */
.cw-btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px;
          border-radius: var(--radius-md); border: 1px solid var(--border-hover); background: transparent;
          color: var(--text-bright); font-size: 0.88rem; font-weight: 600; text-decoration: none; cursor: pointer;
          transition: border-color .15s ease, background .15s ease, filter .15s ease; }
.cw-btn:hover { color: var(--text-bright); border-color: var(--accent-primary); background: color-mix(in srgb, var(--accent-primary) 8%, transparent); }
.cw-btn--primary { color: #fff; background: var(--accent-primary); border-color: var(--accent-primary); font-weight: 700;
                   box-shadow: 0 4px 14px color-mix(in srgb, var(--accent-primary) 35%, transparent); }
.cw-btn--primary:hover { color: #fff; background: var(--accent-primary); filter: brightness(1.1); }
.cw-btn--lg { min-height: 50px; padding: 0 22px; font-size: 0.95rem; }
.cw-btn--warning { color: #1c1204; background: var(--color-warning); border-color: var(--color-warning); font-weight: 700; }
.cw-btn--warning:hover { color: #1c1204; background: var(--color-warning); filter: brightness(1.08); }
.cw-btn--warning-outline { color: var(--color-warning); border-color: color-mix(in srgb, var(--color-warning) 45%, transparent); font-weight: 700; }
.cw-btn--warning-outline:hover { color: var(--color-warning); border-color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 8%, transparent); }
.cw-btn.is-disabled { opacity: .4; pointer-events: none; }
.cw-btn--danger { color: #fff; background: var(--color-error); border-color: var(--color-error); font-weight: 700; }
.cw-btn--danger:hover { color: #fff; background: var(--color-error); filter: brightness(1.1); }
.cw-btn:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.cw-link, .cw-link-btn { color: var(--accent-secondary); font-size: 0.86rem; font-weight: 600; text-decoration: none; background: none; border: 0; padding: 0; min-height: 36px; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.cw-link:hover, .cw-link-btn:hover { color: var(--accent-hover); text-decoration: underline; }

/* Seletor de dois valores (ex.: Minhas turmas / Todas as turmas) */
.cw-segmented { display: inline-flex; align-self: flex-start; gap: 4px; padding: 4px; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 999px; }
.cw-segmented__item { min-height: 38px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: 999px; color: var(--text-muted); font-size: 0.85rem; font-weight: 700; text-decoration: none; }
.cw-segmented__item:hover { color: var(--text-bright); }
.cw-segmented__item.is-active { background: var(--accent-primary); color: #fff; }
.cw-segmented__item { gap: 8px; }
.cw-segmented__count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
                       font-size: 0.72rem; font-weight: 800; background: color-mix(in srgb, var(--color-warning) 18%, transparent); color: var(--color-warning); }
.cw-segmented__item.is-active .cw-segmented__count { background: rgba(255,255,255,0.22); color: #fff; }

/* Filtros com contagem (também são o resumo da tela) */
.cw-pills { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cw-pill { min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 14px;
           background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
           color: var(--text-muted); font-size: 0.85rem; font-weight: 600; text-decoration: none; }
.cw-pill:hover { color: var(--text-bright); border-color: var(--border-hover); }
.cw-pill.is-active { color: var(--text-bright); border-color: var(--accent-primary); background: color-mix(in srgb, var(--accent-primary) 14%, transparent); }
.cw-pill__count { font-size: 0.75rem; font-weight: 800; padding: 1px 9px; border-radius: 999px; background: color-mix(in srgb, var(--text-muted) 14%, transparent); color: var(--text-muted); }
.cw-pill__count.is-alert { background: color-mix(in srgb, var(--color-warning) 15%, transparent); color: var(--color-warning); }

/* Barra de filtros */
.cw-bar { display: flex; flex-wrap: wrap; gap: 10px; }
.cw-bar .form-select, .cw-bar .form-control { min-height: 44px; }
.cw-bar .form-select { flex: 0 1 210px; }
.cw-bar__search { position: relative; flex: 1 1 260px; margin: 0; }
.cw-bar__search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-subtle); }
.cw-bar__search .form-control { padding-left: 38px; }

/* Cartões */
.cw-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; }
.cw-surface { background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-surface-2) 100%); }
.cw-card__body { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.cw-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding: 14px 18px; border-bottom: 1px solid var(--border-subtle); font-size: 0.88rem; color: var(--text-muted); }
.cw-card__head strong { color: var(--text-bright); }
.cw-card__foot { padding: 10px 18px; font-size: 0.78rem; border-top: 1px solid var(--border-subtle); }
.cw-icon { width: 38px; height: 38px; flex-shrink: 0; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center;
           background: color-mix(in srgb, var(--accent-primary) 12%, transparent); color: var(--accent-secondary); }
.cw-icon--sm { width: 30px; height: 30px; font-size: 0.85rem; background: var(--bg-surface-2); color: var(--text-muted); }
.cw-avatar { width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
             font-size: 0.8rem; font-weight: 700; background: color-mix(in srgb, var(--accent-primary) 15%, transparent); color: var(--accent-secondary); }
.cw-avatar.is-alert { background: color-mix(in srgb, var(--color-warning) 15%, transparent); color: var(--color-warning); }
.cw-avatar--lg { width: 46px; height: 46px; font-size: 0.95rem; font-weight: 800; }
.cw-person { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cw-person__text { min-width: 0; display: flex; flex-direction: column; }
.cw-person__text strong { font-weight: 600; color: var(--text-bright); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-person--lg .cw-person__text strong { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.02em;
                                          white-space: normal; overflow-wrap: anywhere; }   /* nome inteiro, em duas linhas se precisar */
.cw-person__text small { font-size: 0.78rem; color: var(--text-subtle); }
.cw-quote { padding: 12px 14px; background: var(--bg-surface-2); border-left: 3px solid var(--accent-secondary); border-radius: var(--radius-md); font-size: 0.88rem; color: var(--text-muted); }
.cw-quote .cw-eyebrow { color: var(--text-subtle); margin-bottom: 2px; }

/* Avisos (com "Desfazer") */
.cw-notice { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 16px; border-radius: var(--radius-md); font-size: 0.88rem; font-weight: 600; }
.cw-notice form { margin: 0; }
.cw-notice--success { color: var(--color-success); background: color-mix(in srgb, var(--color-success) 8%, transparent); border: 1px solid color-mix(in srgb, var(--color-success) 25%, transparent); }
.cw-notice--warning { color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 8%, transparent); border: 1px solid color-mix(in srgb, var(--color-warning) 30%, transparent); }
.cw-notice--info { color: var(--text-bright); font-weight: 400; background: color-mix(in srgb, var(--accent-primary) 8%, transparent);
                   border: 1px solid color-mix(in srgb, var(--accent-primary) 25%, transparent); border-left: 3px solid var(--accent-primary); border-radius: var(--radius-lg); padding: 14px 18px; }
.cw-notice__text { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; }
.cw-notice__text small { color: var(--text-muted); font-size: 0.82rem; }
.cw-notice__actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Estado vazio / concluído */
.cw-empty, .cw-done { padding: 48px 20px; text-align: center; color: var(--text-muted); }
.cw-empty > span, .cw-done > span { font-size: 1.8rem; }
.cw-done h2 { margin: 10px 0 4px; font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text-bright); }
.cw-done p { margin: 0 0 18px; }

.cw-pagination { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 0.85rem; color: var(--text-muted); }

/* Fila de correção */
.cw-queue__head, .cw-queue__row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.5fr) 130px 210px 130px; gap: 16px; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--border-subtle); }
.cw-queue__head { padding-top: 10px; padding-bottom: 10px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-subtle); }
.cw-queue__row:last-child { border-bottom: 0; }
.cw-queue__row:hover { background: color-mix(in srgb, var(--bg-hover) 50%, transparent); }
.cw-queue__wait { font-size: 0.85rem; color: var(--text-muted); }
.cw-queue__wait.is-alert { color: var(--color-warning); font-weight: 700; }
.cw-queue__status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cw-queue__status small { font-size: 0.75rem; color: var(--text-muted); }
.cw-queue__action { text-align: right; }

/* Modo correção */
.cw-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 10px 16px; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); }
.cw-toolbar__back { min-height: 40px; display: inline-flex; align-items: center; gap: 6px; font-size: 0.88rem; font-weight: 600; color: var(--accent-secondary); text-decoration: none; }
.cw-toolbar__pos { flex: 1 1 200px; font-size: 0.85rem; color: var(--text-muted); }
.cw-toolbar__pos strong { color: var(--text-bright); }
.cw-toolbar__nav { display: flex; gap: 8px; }
.cw-toolbar__nav .cw-btn { min-height: 40px; min-width: 44px; padding: 0 12px; }
.cw-toolbar__hint { flex-basis: 100%; font-size: 0.75rem; color: var(--text-subtle); }
.cw-grade-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr); gap: 16px; align-items: start; }
.cw-grade-panel { position: sticky; top: 16px; padding: 18px; border-top: 3px solid var(--accent-primary); }
.cw-grade-panel.is-warning { border-color: color-mix(in srgb, var(--color-warning) 45%, transparent); border-top-color: var(--color-warning); }
.cw-grade-panel__title { margin: 0 0 4px; font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em; color: var(--text-bright); }
.cw-grade-panel__title.is-warning { color: var(--color-warning); }
.cw-grade-input { display: flex; align-items: center; gap: 10px; color: var(--text-muted); }
.cw-grade-input .form-control { width: 110px; min-height: 52px; font-size: 1.5rem; font-weight: 800; text-align: center; }
.cw-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cw-chip { min-width: 44px; min-height: 40px; padding: 0 10px; border-radius: var(--radius-md); border: 1px solid var(--border-hover); background: transparent; color: var(--text-bright); font-weight: 700; cursor: pointer; }
.cw-chip:hover { border-color: var(--accent-primary); background: color-mix(in srgb, var(--accent-primary) 10%, transparent); }
.cw-chip--dashed { min-height: 34px; border-style: dashed; border-radius: 999px; color: var(--text-muted); font-size: 0.8rem; font-weight: 500; }
.cw-file { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border-subtle); }
.cw-file__ext { width: 38px; height: 38px; flex-shrink: 0; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center;
                font-size: 0.68rem; font-weight: 800; background: color-mix(in srgb, var(--color-success) 12%, transparent); color: var(--color-success); }
.cw-preview { padding: 14px; background: var(--bg-main); border-bottom: 1px solid var(--border-subtle); }
.cw-preview img { display: block; max-width: 100%; max-height: 640px; margin: 0 auto; border-radius: var(--radius-md); }
.cw-preview iframe { display: block; width: 100%; height: 640px; border: 0; border-radius: var(--radius-md); background: #fff; }
.cw-answer { display: flex; align-items: flex-start; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--border-subtle); font-size: 0.88rem; }
.cw-answer:last-child { border-bottom: 0; }
.cw-answer__mark { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; }
.cw-answer.is-correct .cw-answer__mark { background: color-mix(in srgb, var(--color-success) 12%, transparent); color: var(--color-success); }
.cw-answer.is-incorrect .cw-answer__mark { background: color-mix(in srgb, var(--color-error) 12%, transparent); color: var(--color-error); }
.cw-answer.is-partial .cw-answer__mark { background: color-mix(in srgb, var(--color-warning) 12%, transparent); color: var(--color-warning); }
.cw-answer__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; color: var(--text-muted); }
.cw-answer__text strong { color: var(--text-bright); font-weight: 600; }
.cw-answer.is-correct b { color: var(--color-success); }
.cw-answer.is-incorrect b, .cw-answer.is-partial b { color: var(--color-error); }

.cw-revision { display: flex; flex-direction: column; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border-subtle); }
.cw-revision:last-child { border-bottom: 0; }
.cw-revision__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 0.8rem; }
.cw-quote--warning { border-left-color: var(--color-warning); }
.cw-file--compact { padding: 8px 0; border-bottom: 0; color: var(--text-muted); }
.cw-queue__again { color: var(--color-warning) !important; font-weight: 700; }

@media (max-width: 991.98px) {
    .cw-grade-layout { grid-template-columns: minmax(0, 1fr); }
    .cw-grade-panel { position: static; }
}
@media (max-width: 767.98px) {
    .cw-page { padding: 1.25rem 1rem 2rem; }
    .cw-hide-mobile { display: none !important; }
    .cw-header__actions, .cw-header__actions .cw-btn { flex: 1 1 100%; }
    .cw-pills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cw-bar .form-select { flex: 1 1 calc(50% - 5px); }
    .cw-queue__head { display: none; }
    .cw-queue__row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .cw-queue__action, .cw-queue__action .cw-btn { text-align: left; width: 100%; }
    .cw-notice__actions, .cw-notice__actions form, .cw-notice__actions .cw-btn { flex: 1 1 100%; width: 100%; }
    .cw-preview iframe { height: 420px; }
}

/* Minha conta */
.al-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.al-badge { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.al-badge__icon { font-size: 1.5rem; }

/* Barra de navegação do aluno no celular (rodapé, na zona do polegar) */
.al-bottom-nav { display: none; }
@media (max-width: 991.98px) {
    .al-bottom-nav {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
        display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
        background: var(--bg-surface); border-top: 1px solid var(--border-color);
        box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.25);
        padding-bottom: env(safe-area-inset-bottom);
    }
    .al-bottom-nav a {
        position: relative; min-height: 62px; display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 3px; border-top: 3px solid transparent; color: var(--text-muted); font-size: 0.72rem; font-weight: 600; text-decoration: none;
    }
    .al-bottom-nav a i { font-size: 1.25rem; }
    .al-bottom-nav a.is-active {
        color: var(--accent-primary); font-weight: 700; border-top-color: var(--accent-primary);
        background: linear-gradient(180deg, color-mix(in srgb, var(--accent-primary) 12%, transparent) 0%, transparent 100%);
    }
    .al-bottom-nav__count {
        position: absolute; top: 7px; left: calc(50% + 6px); font-size: 0.62rem; font-weight: 700; padding: 0 6px;
        border-radius: 999px; background: var(--color-warning); color: #1c1204;
    }
    body.has-student-nav .main-content { padding-bottom: calc(62px + 2rem + env(safe-area-inset-bottom)); }
    body.has-student-nav .toast-container { bottom: 70px !important; }

    /* Rodapé da equipe: o mesmo desenho do aluno, com 4 destinos por perfil */
    .cw-bottom-nav {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
        display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
        background: var(--bg-surface); border-top: 1px solid var(--border-color);
        box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.25);
        padding-bottom: env(safe-area-inset-bottom);
    }
    .cw-bottom-nav a {
        position: relative; min-height: 62px; display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 3px; border-top: 3px solid transparent; color: var(--text-muted); font-size: 0.72rem; font-weight: 600; text-decoration: none;
    }
    .cw-bottom-nav a i { font-size: 1.25rem; }
    .cw-bottom-nav a.is-active {
        color: var(--accent-primary); font-weight: 700; border-top-color: var(--accent-primary);
        background: linear-gradient(180deg, color-mix(in srgb, var(--accent-primary) 12%, transparent) 0%, transparent 100%);
    }
    .cw-bottom-nav__count {
        position: absolute; top: 7px; left: calc(50% + 6px); min-width: 18px; text-align: center; font-size: 0.62rem; font-weight: 800;
        padding: 0 5px; border-radius: 999px; background: var(--color-warning); color: #1c1204;
    }
    body.has-staff-nav .main-content { padding-bottom: calc(62px + 2rem + env(safe-area-inset-bottom)); }
    body.has-staff-nav .toast-container { bottom: 70px !important; }
    body.has-staff-nav .cw-install, body.has-student-nav .cw-install { bottom: calc(62px + env(safe-area-inset-bottom)); }
}
.cw-bottom-nav { display: none; }
@media (max-width: 991.98px) { .cw-bottom-nav { display: grid; } }
/* Teclado aberto (campo em foco): a barra do rodapé some para não cobrir o campo que a pessoa preenche */
@media (max-width: 991.98px) {
    body:has(input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]):focus, textarea:focus, select:focus) .cw-bottom-nav,
    body:has(input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]):focus, textarea:focus, select:focus) .al-bottom-nav { display: none; }
}

/* Convite para instalar o app (PWA) */
.cw-install { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1050; max-width: 520px; margin: 0 auto;
              display: flex; flex-direction: column; gap: 10px; padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
              background: var(--bg-surface); border: 1px solid var(--border-color); border-bottom: 0;
              border-radius: 18px 18px 0 0; box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.4); }
.cw-install[hidden] { display: none; }
.cw-install__head { display: flex; align-items: center; gap: 12px; }
.cw-install__icon img { display: block; width: 48px; height: 48px; border-radius: 12px; }
.cw-install__text { display: flex; flex-direction: column; }
.cw-install__text strong { font-size: 1rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text-bright); }
.cw-install__text small { font-size: 0.82rem; color: var(--text-muted); }
.cw-install__steps { margin: 0; padding: 12px 14px; border-radius: var(--radius-md); background: var(--bg-surface-2); font-size: 0.85rem; color: var(--text-muted); }
.cw-install__steps strong { color: var(--text-bright); }
.cw-install [hidden] { display: none !important; }

/* Lista com itens grandes (tela "Mais") */
.cw-menu { display: flex; flex-direction: column; }
.cw-menu form { margin: 0; }
.cw-menu__row { width: 100%; min-height: 54px; display: flex; align-items: center; gap: 12px; padding: 0 16px;
                border: 0; border-bottom: 1px solid var(--border-subtle); background: transparent; color: var(--text-bright);
                font-size: 0.95rem; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; }
.cw-menu > :last-child, .cw-menu > form:last-child .cw-menu__row { border-bottom: 0; }
.cw-menu__row:hover { background: var(--bg-hover); color: var(--text-bright); }
.cw-menu__row > i:first-child { width: 22px; font-size: 1.05rem; color: var(--text-muted); text-align: center; }
.cw-menu__row > span:not(.cw-pill__count) { flex: 1; }
.cw-menu__chevron { color: var(--text-subtle); font-size: 0.85rem; }
.cw-menu__row.is-danger, .cw-menu__row.is-danger > i:first-child { color: var(--color-error); }

/* Turmas no celular: lista por dia da semana (no lugar da grade) */
.cw-day-list { display: none; }
@media (max-width: 767.98px) {
    .cw-day-list { display: flex; flex-direction: column; gap: 16px; }
    #view-weekly { display: none; }
}
.cw-day { display: flex; flex-direction: column; gap: 8px; }
.cw-day__title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em;
                 text-transform: uppercase; color: var(--text-muted); }
.cw-day__title.is-today { color: var(--accent-secondary); }
.cw-day__today { font-size: 0.62rem; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--accent-primary) 15%, transparent); color: var(--accent-secondary); }
.cw-cohort { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--bg-surface); border: 1px solid var(--border-subtle);
             border-radius: var(--radius-lg); color: inherit; text-decoration: none; }
.cw-cohort:hover { color: inherit; border-color: var(--border-hover); }
.cw-cohort__time { width: 54px; flex-shrink: 0; text-align: center; }
.cw-cohort__time strong { display: block; font-size: 1rem; font-weight: 800; color: var(--text-bright); }
.cw-cohort__time small { font-size: 0.7rem; color: var(--text-subtle); }
.cw-cohort__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cw-cohort__text strong { font-size: 0.92rem; font-weight: 700; color: var(--text-bright); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-cohort__text small { font-size: 0.78rem; color: var(--text-subtle); }
.cw-cohort__stat { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; text-align: right; max-width: 40%; }
.cw-cohort__stat strong { font-size: 1.05rem; font-weight: 800; color: var(--text-bright); line-height: 1.2; }
.cw-cohort__stat small { font-size: 0.68rem; color: var(--text-subtle); }
button.cw-cohort { font: inherit; min-height: 44px; }

@media (max-width: 767.98px) {
    /* Atividades e Boletim lado a lado, compactos */
    .al-grid-2 { gap: 10px; }
    .al-kpi { padding: 14px 12px; gap: 10px; }
    .al-kpi .al-icon { display: none; }
    .al-kpi .al-eyebrow { font-size: 0.62rem; letter-spacing: 0.05em; }
    .al-kpi__value { flex-direction: column; align-items: flex-start; gap: 2px; }
    .al-kpi__value strong { font-size: 1.7rem; }
    .al-kpi__value span { font-size: 0.78rem; }
    .al-kpi .tag { white-space: normal; text-align: left; letter-spacing: 0.03em; font-size: 0.62rem; border-radius: 8px; }
    .al-kpi .al-btn { min-height: 44px; padding: 0 8px; gap: 4px; font-size: 0.82rem; width: 100%; }
    .al-kpi .al-btn i { display: none; }
    .al-hero { padding: 18px; }
    .al-hero__title { font-size: 1.2rem; }
    .al-hero .al-btn--primary, .al-task__action, .al-card__foot .al-btn, .al-level, .al-filter { flex: 1 1 100%; }
    .al-card__foot form { flex: 1 1 100%; }
    .al-card__foot form .al-btn { width: 100%; }
    .al-tabs { max-width: none; }
    .al-kpis-3 { gap: 8px; }
    .al-mini { padding: 12px 10px; gap: 4px; }
    .al-mini .al-icon { display: none; }
    .al-mini .al-eyebrow { font-size: 0.6rem; letter-spacing: 0.05em; }
    .al-mini__value strong { font-size: 1.45rem; }
    .al-mini__value span { display: block; margin-left: 0; font-size: 0.7rem; }
    .al-grades-head { display: none; }
    .al-band { padding: 10px 14px; }
    .al-mod.is-nested > .al-band, .al-band.is-nested { padding-left: 26px; }
    .al-band__body { padding: 14px 14px 16px; }
    .al-mod.is-nested .al-band__body { padding-left: 26px; }
    .al-lesson__items { margin-left: 14px; padding-left: 10px; }
    .al-lesson__items .al-task__action { flex-basis: 100%; }
    .al-lesson__items .al-task > .al-icon { display: none; }
    .al-course__avg { flex: 1 1 auto; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; text-align: left; }
    .al-course__avg .al-eyebrow { flex-basis: 100%; }
    .al-course__alerts { flex-basis: 100%; justify-content: flex-start; margin-top: 4px; }
    .al-course > summary { position: relative; padding-right: 44px; }
    .al-course__chevron { position: absolute; top: 20px; right: 16px; }
    .al-band { position: relative; padding-right: 40px; }
    .al-band__chevron { position: absolute; top: 18px; right: 14px; }    .al-col-nota, .al-col-situacao { flex: 0 0 auto; }
    .al-col-acao { flex: 1 1 auto; }
}

/* ── Construtor de atividade: três passos (Tipo, Conteúdo, Regras) ─────────── */
.ab-title { width: 100%; min-height: 48px; padding: 0 12px; background: transparent; border: 1px solid var(--border-color); border-radius: var(--radius-md);
            color: var(--text-bright); font-size: clamp(1.15rem, 2.4vw, 1.5rem); font-weight: 800; letter-spacing: -0.02em; }
.ab-title:focus { outline: none; border-color: var(--accent-primary); background: var(--bg-surface); }
.ab-status { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--text-muted); }
.ab-status.is-error { color: var(--color-error); }
.ab-crumb { font-size: 0.8rem; color: var(--text-subtle); }
.ab-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ab-step { min-height: 64px; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--border-subtle); border-bottom: 3px solid transparent;
           border-radius: var(--radius-lg); color: var(--text-bright); text-decoration: none; min-width: 0; }
.ab-step:hover { color: var(--text-bright); border-color: var(--border-hover); }
.ab-step.is-current { background: var(--bg-surface); border-color: var(--border-hover); border-bottom-color: var(--accent-primary); }
.ab-step__n { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.82rem; font-weight: 800;
              background: var(--bg-surface-2); color: var(--text-muted); }
.ab-step.is-done .ab-step__n { background: color-mix(in srgb, var(--color-success) 15%, transparent); color: var(--color-success); }
.ab-step.is-warn .ab-step__n { background: color-mix(in srgb, var(--color-warning) 18%, transparent); color: var(--color-warning); }
.ab-step.is-current .ab-step__n { background: var(--accent-primary); color: #fff; }
.ab-step__text { min-width: 0; display: flex; flex-direction: column; }
.ab-step__text strong { font-size: 0.92rem; }
.ab-step__text small { font-size: 0.78rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-h2 { margin: 0; font-size: 1.1rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text-bright); }
.ab-label { display: block; margin: 0 0 6px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.ab-label .cw-optional { text-transform: none; letter-spacing: 0; }
.ab-help { font-size: 0.8rem; color: var(--text-subtle); margin: 6px 0 0; }
.ab-field { width: 100%; padding: 10px 12px; background: var(--bg-surface-2); border: 1px solid var(--border-color); border-radius: var(--radius-md); color: var(--text-bright); font-size: 0.92rem; }
.ab-field:focus { outline: none; border-color: var(--accent-primary); }
.ab-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
/* Passo 1 */
.ab-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ab-types form { margin: 0; display: flex; }
.ab-type { width: 100%; display: flex; flex-direction: column; gap: 10px; padding: 18px; background: transparent; border: 1px solid var(--border-color); border-radius: var(--radius-lg);
           color: var(--text-bright); text-align: left; cursor: pointer; }
.ab-type:hover { border-color: var(--accent-primary); }
.ab-type.is-current { background: var(--bg-surface-2); border: 2px solid var(--accent-primary); }
.ab-type__icon { width: 42px; height: 42px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.ab-type--blue .ab-type__icon { background: color-mix(in srgb, var(--accent-primary) 15%, transparent); color: var(--accent-secondary); }
.ab-type--green .ab-type__icon { background: color-mix(in srgb, var(--color-success) 13%, transparent); color: var(--color-success); }
.ab-type--amber .ab-type__icon { background: color-mix(in srgb, var(--color-warning) 13%, transparent); color: var(--color-warning); }
.ab-type__name { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 1rem; font-weight: 800; }
.ab-type__tag { font-size: 0.68rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--accent-primary); color: #fff; }
.ab-type__how { font-size: 0.85rem; color: var(--text-muted); }
.ab-type__grade { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border-subtle); font-size: 0.8rem; color: var(--text-subtle); }
/* Passo 2: questionário */
.ab-quiz { display: grid; grid-template-columns: minmax(200px, 250px) minmax(0, 1fr) minmax(250px, 310px); gap: 16px; align-items: start; }
.ab-qlist { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ab-qlist__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0 2px; font-size: 0.85rem; }
.ab-qlist__head span { color: var(--text-subtle); font-size: 0.8rem; }
.ab-qlist__items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ab-qitem { min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--bg-surface); border: 1px solid var(--border-subtle);
            border-radius: var(--radius-md); color: var(--text-bright); text-decoration: none; }
.ab-qitem:hover { color: var(--text-bright); border-color: var(--border-hover); }
.ab-qitem.has-problem { border-color: color-mix(in srgb, var(--color-warning) 45%, transparent); }
.ab-qitem.is-current { background: var(--bg-surface-2); border-color: var(--accent-primary); }
.ab-qitem__n { width: 22px; flex-shrink: 0; font-size: 0.8rem; font-weight: 800; color: var(--text-subtle); }
.ab-qitem.is-current .ab-qitem__n { color: var(--accent-secondary); }
.ab-qitem__text { flex: 1; min-width: 0; font-size: 0.82rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-qitem__state { width: 18px; height: 18px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.7rem;
                   background: color-mix(in srgb, var(--color-success) 15%, transparent); color: var(--color-success); }
.ab-qitem.has-problem .ab-qitem__state { background: color-mix(in srgb, var(--color-warning) 18%, transparent); color: var(--color-warning); }
.ab-dashed { border-style: dashed; width: 100%; }
.ab-import { display: flex; flex-direction: column; gap: 6px; padding: 12px; background: color-mix(in srgb, var(--color-warning) 6%, transparent);
             border: 1px solid color-mix(in srgb, var(--color-warning) 30%, transparent); border-radius: var(--radius-md); text-align: center; }
.ab-import__btn { min-height: 44px; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 12px; cursor: pointer;
                  background: color-mix(in srgb, var(--color-warning) 14%, transparent); border: 1px solid color-mix(in srgb, var(--color-warning) 55%, transparent);
                  border-radius: var(--radius-md); color: var(--color-warning); font-size: 0.88rem; font-weight: 700; }
.ab-import__btn:hover { background: color-mix(in srgb, var(--color-warning) 22%, transparent); }
.ab-import small { font-size: 0.78rem; color: var(--text-muted); }
.ab-editor { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 22px 24px; scroll-margin-top: 80px; }
.ab-editor__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ab-editor__actions { display: flex; align-items: center; gap: 6px; }
.ab-editor__actions .cw-btn { min-height: 40px; padding: 0 12px; font-size: 0.82rem; }
.ab-icon-btn { width: 44px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0; background: transparent;
               border: 1px solid var(--border-color); border-radius: var(--radius-md); color: var(--text-muted); }
.ab-icon-btn:hover, .ab-icon-btn[aria-expanded="true"] { color: var(--text-bright); background: var(--bg-hover); }
.ab-editor .dropdown-item { min-height: 44px; display: flex; align-items: center; gap: 8px; }
.ab-image { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ab-image img { max-height: 110px; max-width: 100%; border-radius: var(--radius-md); border: 1px solid var(--border-color); }
.ab-linkbtn { min-height: 36px; display: inline-flex; align-items: center; gap: 6px; padding: 0 2px; background: none; border: none; color: var(--accent-secondary);
              font-size: 0.82rem; font-weight: 600; cursor: pointer; }
.ab-linkbtn:hover { color: var(--accent-hover); }
.ab-linkbtn.is-danger { color: var(--color-error); }
.ab-seg { display: inline-flex; align-self: flex-start; padding: 3px; background: var(--bg-surface-2); border: 1px solid var(--border-color); border-radius: var(--radius-md); }
.ab-seg label { position: relative; min-height: 38px; display: inline-flex; align-items: center; padding: 0 14px; margin: 0; border-radius: 5px; font-size: 0.85rem; font-weight: 600; cursor: pointer; color: var(--text-muted); }
.ab-seg input { position: absolute; opacity: 0; pointer-events: none; }
.ab-seg label:has(input:checked) { background: var(--bg-hover); color: var(--text-bright); }
.ab-seg label:has(input:focus-visible) { outline: 2px solid var(--accent-primary); }
.ab-alts { display: flex; flex-direction: column; gap: 8px; }
.ab-alt { display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 6px; background: var(--bg-surface-2); border: 1px solid var(--border-color); border-radius: var(--radius-md); }
.ab-alt.is-correct { background: color-mix(in srgb, var(--color-success) 6%, transparent); border-color: color-mix(in srgb, var(--color-success) 45%, transparent); }
.ab-alt__mark { position: relative; width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin: 0; cursor: pointer; }
.ab-alt__mark input { position: absolute; opacity: 0; pointer-events: none; }
.ab-alt__dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border-hover); display: flex; align-items: center; justify-content: center; color: #0b1120; font-size: 0.8rem; }
.ab-alts.is-multiple .ab-alt__dot { border-radius: 5px; }
.ab-alt__dot i { opacity: 0; }
.ab-alt.is-correct .ab-alt__dot { background: var(--color-success); border-color: var(--color-success); }
.ab-alt.is-correct .ab-alt__dot i { opacity: 1; }
.ab-alt__mark input:focus-visible + .ab-alt__dot { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
.ab-alt__letter { width: 18px; flex-shrink: 0; font-size: 0.82rem; font-weight: 700; color: var(--text-subtle); }
.ab-alt__text { flex: 1; min-width: 0; min-height: 40px; padding: 0 10px; background: transparent; border: none; color: var(--text-bright); font-size: 0.92rem; }
.ab-alt__text:focus { outline: none; }
.ab-alt__tag { display: none; flex-shrink: 0; font-size: 0.75rem; font-weight: 700; color: var(--color-success); }
.ab-alt.is-correct .ab-alt__tag { display: inline; }
.ab-alt__remove { width: 44px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: none; border: none; color: var(--text-subtle); }
.ab-alt__remove:hover { color: var(--color-error); }
.ab-alt__drag { cursor: grab; color: var(--text-subtle); opacity: .5; padding: 0 2px; }
.ab-points { width: 90px; min-height: 44px; text-align: center; font-weight: 700; }
.ab-expl summary { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; color: var(--accent-secondary); font-size: 0.85rem; font-weight: 600; cursor: pointer; list-style: none; }
.ab-expl summary::-webkit-details-marker { display: none; }
.ab-expl summary small { color: var(--text-subtle); font-weight: 500; }
.ab-editor__nav { display: flex; justify-content: space-between; gap: 8px; padding-top: 14px; border-top: 1px solid var(--border-subtle); }
.ab-preview { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ab-preview__card { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); }
.ab-preview__card strong { font-size: 0.95rem; line-height: 1.4; white-space: pre-line; }
.ab-preview__opt { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; background: var(--bg-surface-2); border: 1px solid var(--border-color);
                   border-radius: var(--radius-md); font-size: 0.88rem; }
.ab-preview__opt::before { content: ""; width: 18px; height: 18px; flex-shrink: 0; border: 2px solid var(--border-hover); border-radius: 50%; }
.ab-preview.is-multiple .ab-preview__opt::before { border-radius: 4px; }
.ab-preview img { max-width: 100%; border-radius: var(--radius-md); }
/* Passo 2: arquivo e link */
.ab-two { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); gap: 16px; align-items: start; }
.ab-drop { position: relative; min-height: 96px; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; margin: 0; padding: 12px;
           border: 2px dashed var(--border-hover); border-radius: var(--radius-lg); color: var(--text-muted); text-align: center; cursor: pointer; }
.ab-drop:hover, .ab-drop.is-over { border-color: var(--accent-primary); background: color-mix(in srgb, var(--accent-primary) 6%, transparent); }
.ab-drop strong { color: var(--text-bright); font-size: 0.9rem; }
.ab-drop small { font-size: 0.78rem; }
.ab-drop input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
/* Passo 3 */
.ab-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.ab-choice { position: relative; margin: 0; cursor: pointer; }
.ab-choice input { position: absolute; opacity: 0; pointer-events: none; }
.ab-choice span { min-height: 44px; min-width: 64px; display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; border: 1px solid var(--border-hover);
                  border-radius: var(--radius-md); color: var(--text-bright); font-size: 0.88rem; font-weight: 700; }
.ab-choice input:checked + span { background: color-mix(in srgb, var(--accent-primary) 18%, transparent); border-color: var(--accent-primary); }
.ab-choice input:focus-visible + span { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
.ab-check { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; margin: 0; padding: 6px 0; cursor: pointer; }
.ab-check input { width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; accent-color: var(--accent-primary); }
.ab-check span { display: flex; flex-direction: column; font-size: 0.88rem; font-weight: 600; color: var(--text-bright); }
.ab-check small { font-size: 0.8rem; font-weight: 400; color: var(--text-subtle); }
.ab-deadline { display: flex; flex-wrap: wrap; gap: 8px; }
.ab-deadline input { width: auto; min-height: 46px; color-scheme: dark; }
[data-theme="light"] .ab-deadline input { color-scheme: light; }
.ab-advanced { border-top: 1px solid var(--border-subtle); padding-top: 6px; }
.ab-advanced > summary { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 0.95rem; font-weight: 700;
                         color: var(--text-bright); cursor: pointer; list-style: none; }
.ab-advanced > summary::-webkit-details-marker { display: none; }
.ab-advanced > summary small { font-size: 0.82rem; font-weight: 500; color: var(--text-subtle); }
.ab-advanced[open] > summary .bi-chevron-down { transform: rotate(180deg); }
@media (max-width: 1199.98px) {
    .ab-quiz { grid-template-columns: minmax(190px, 230px) minmax(0, 1fr); }
    .ab-quiz .ab-preview { display: none; }
}
@media (max-width: 767.98px) {
    .ab-steps { gap: 6px; }
    .ab-step { min-height: 52px; padding: 8px; gap: 8px; }
    .ab-step { justify-content: center; }
    .ab-step__text small { display: none; }
    .ab-types, .ab-quiz, .ab-two { grid-template-columns: minmax(0, 1fr); }
    .ab-qlist__items { flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
    .ab-qitem { flex-shrink: 0; min-width: 56px; }
    .ab-qitem__text { display: none; }
    .ab-editor { padding: 16px; }
    .ab-two .ab-preview { display: none; }
    .ab-foot .cw-btn { flex: 1 1 100%; }
}

/* ── Gestão do curso: árvore à esquerda, painel à direita ───────────────────── */
.ct-header { display: flex; flex-direction: column; gap: 6px; }
.ct-crumb { font-size: 0.8rem; color: var(--text-subtle); }
.ct-header__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.ct-title { margin: 0; font-weight: 800; letter-spacing: -0.03em; }
.ct-header__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ct-header__actions .cw-btn.is-active { background: color-mix(in srgb, var(--accent-primary) 14%, transparent); border-color: var(--accent-primary); color: var(--text-bright); }
.ct-icon-only { width: 44px; padding: 0; }
.ct-status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 700;
             background: color-mix(in srgb, var(--text-muted) 14%, transparent); color: var(--text-muted); }
.ct-status > span:first-child { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ct-status.is-published { background: color-mix(in srgb, var(--color-success) 14%, transparent); color: var(--color-success); }
.ct-status.is-archived { background: color-mix(in srgb, var(--color-warning) 14%, transparent); color: var(--color-warning); }
.ct-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(340px, 1fr); gap: 16px; align-items: start; }
.ct-tree { min-width: 0; overflow: hidden; }
.ct-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border-subtle); }
.ct-toolbar__title { display: flex; flex-direction: column; margin-right: auto; }
.ct-toolbar__title strong { font-size: 0.95rem; }
.ct-toolbar__title small { font-size: 0.78rem; color: var(--text-subtle); }
.ct-search { width: 180px; min-height: 40px; padding: 0 12px; }
.ct-chip { min-height: 40px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; background: transparent; border: 1px solid var(--border-color);
           border-radius: 999px; color: var(--text-muted); font-size: 0.82rem; font-weight: 700; }
.ct-chip[aria-pressed="true"] { background: color-mix(in srgb, var(--color-warning) 14%, transparent); border-color: color-mix(in srgb, var(--color-warning) 55%, transparent); color: var(--color-warning); }
.ct-chip__n { padding: 0 7px; border-radius: 999px; background: color-mix(in srgb, var(--color-warning) 18%, transparent); color: var(--color-warning); }
.cw-btn.ct-small { min-height: 40px; padding: 0 12px; font-size: 0.82rem; }
.ct-danger { color: var(--color-error); border-color: color-mix(in srgb, var(--color-error) 45%, transparent); }
.ct-danger:hover { color: var(--color-error); border-color: var(--color-error); background: color-mix(in srgb, var(--color-error) 8%, transparent); }
.ct-danger-solid { color: #fff; background: #dc2626; border-color: #dc2626; font-weight: 700; }
.ct-danger-solid:hover { color: #fff; background: #dc2626; filter: brightness(1.1); }
.ct-modules { display: flex; flex-direction: column; gap: 8px; padding: 8px; }
.ct-mrow { display: flex; align-items: center; gap: 2px; padding: 2px 4px; background: var(--bg-surface-2); border: 1px solid transparent; border-radius: var(--radius-md); }
.ct-mrow.is-selected, .ct-lrow.is-selected { background: color-mix(in srgb, var(--accent-primary) 12%, transparent); border-color: var(--accent-primary); }
.ct-handle { width: 22px; flex-shrink: 0; text-align: center; color: var(--text-subtle); cursor: grab; opacity: .6; }
.ct-check { display: none; margin: 0 6px 0 2px; width: 18px; height: 18px; flex-shrink: 0; }
.ct-modules.is-selecting .ct-check { display: inline-block; }
.ct-toggle { width: 36px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: none; border: none; color: var(--text-muted); }
.ct-toggle i { transition: transform .15s; }
.ct-module.is-closed .ct-toggle i { transform: rotate(-90deg); }
.ct-module.is-closed .ct-lessons, .ct-module.is-closed .ct-add { display: none; }
.ct-modules.is-filtering .ct-module .ct-lessons { display: flex; }
.ct-modules.is-filtering .ct-add, .ct-modules.is-filtering .ct-empty-row { display: none; }
.ct-mlink, .ct-llink { flex: 1; min-width: 0; min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 6px; color: var(--text-bright); text-decoration: none; }
.ct-mlink:hover, .ct-llink:hover { color: var(--text-bright); }
.ct-num { flex-shrink: 0; font-size: 0.75rem; font-weight: 800; color: var(--text-subtle); }
.ct-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-mlink .ct-name { font-size: 0.92rem; font-weight: 700; }
.ct-llink .ct-name { font-size: 0.88rem; }
.ct-msum { flex-shrink: 0; font-size: 0.75rem; color: var(--text-subtle); }
.ct-pending { flex-shrink: 0; min-width: 20px; padding: 0 6px; border-radius: 999px; text-align: center; font-size: 0.7rem; font-weight: 800;
              background: color-mix(in srgb, var(--color-warning) 18%, transparent); color: var(--color-warning); }
.ct-lessons { list-style: none; margin: 2px 0 0; padding: 0 0 0 26px; display: flex; flex-direction: column; gap: 2px; }
.ct-lrow { display: flex; align-items: center; gap: 2px; padding: 0 4px; border: 1px solid transparent; border-radius: var(--radius-md); }
.ct-lrow:hover { background: var(--bg-hover); }
.ct-kind { width: 26px; height: 26px; flex-shrink: 0; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; }
.ct-kind--video { background: color-mix(in srgb, var(--accent-secondary) 14%, transparent); color: var(--accent-secondary); }
.ct-kind--leitura { background: color-mix(in srgb, var(--text-muted) 12%, transparent); color: var(--text-muted); }
.ct-tag { flex-shrink: 0; display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 0.7rem; font-weight: 700; border: 1px solid transparent; }
.ct-tag--quiz { background: color-mix(in srgb, var(--accent-primary) 14%, transparent); color: var(--accent-secondary); }
.ct-tag--file { background: color-mix(in srgb, var(--color-success) 13%, transparent); color: var(--color-success); }
.ct-tag--link { background: color-mix(in srgb, var(--accent-purple, #8b5cf6) 14%, transparent); color: #a78bfa; }
.ct-tag--none { color: var(--color-warning); border-color: color-mix(in srgb, var(--color-warning) 45%, transparent); }
.ct-empty-row { padding: 8px 12px; font-size: 0.82rem; color: var(--text-subtle); list-style: none; }
.ct-add { padding: 2px 0 2px 26px; }
.ct-add__btn { min-height: 40px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; background: none; border: none; color: var(--accent-secondary); font-size: 0.85rem; font-weight: 600; }
.ct-add__btn:hover { color: var(--accent-hover); }
.ct-add__form { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; background: var(--bg-surface-2); border: 1px solid var(--accent-primary); border-radius: var(--radius-md); }
.ct-add__form[hidden] { display: none; }
.ct-add__input { flex: 1 1 180px; min-width: 0; min-height: 40px; padding: 0 10px; background: transparent; border: none; color: var(--text-bright); font-size: 0.9rem; }
.ct-add__input:focus { outline: none; }
.ct-addmodule { padding: 4px 8px 10px; }
.ct-bulkbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px; background: var(--bg-surface-2); border-top: 1px solid var(--border-hover); }
.ct-bulkbar[hidden] { display: none; }
.ct-bulkbar strong { margin-right: auto; font-size: 0.9rem; }
.ct-steps { display: flex; flex-direction: column; gap: 14px; padding: 22px; }
.ct-steps__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ct-steps__list li { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.ct-steps__list li > span:last-child { display: flex; flex-direction: column; }
.ct-steps__list strong { font-size: 0.92rem; }
.ct-steps__list small { font-size: 0.82rem; color: var(--text-muted); }
.ct-steps__list li.is-current { background: var(--bg-surface-2); border-color: var(--accent-primary); }
.ct-steps__n { width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 800;
               background: var(--bg-surface-2); color: var(--text-muted); }
.ct-steps__list li.is-done .ct-steps__n { background: color-mix(in srgb, var(--color-success) 15%, transparent); color: var(--color-success); }
.ct-steps__list li.is-current .ct-steps__n { background: var(--accent-primary); color: #fff; }
.ct-panel { position: sticky; top: 16px; min-width: 0; display: flex; flex-direction: column; gap: 16px; padding: 20px; border-top: 3px solid var(--accent-primary); scroll-margin-top: 80px; }
.ct-back { display: none; align-items: center; gap: 4px; min-height: 40px; font-weight: 600; }
.ct-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ct-panel__title { display: flex; flex-direction: column; min-width: 0; }
.ct-panel__title strong { font-size: 1.1rem; font-weight: 800; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.ct-panel__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 14px; border-top: 1px solid var(--border-subtle); }
.ct-select { width: auto; min-height: 40px; max-width: 220px; }
.ct-video { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 10px; background: var(--bg-surface-2); border: 1px solid var(--border-color); border-radius: var(--radius-md); }
.ct-video__thumb { width: 72px; height: 44px; flex-shrink: 0; border-radius: 6px; display: flex; align-items: center; justify-content: center;
                   background: linear-gradient(135deg, color-mix(in srgb, var(--accent-primary) 45%, #0f172a), #0f172a); color: #93c5fd; font-size: 1.2rem; }
.ct-video__text { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 0.85rem; }
.ct-video__text small { font-size: 0.78rem; }
.ct-progress { height: 6px; border-radius: 999px; background: var(--bg-hover); overflow: hidden; }
.ct-progress > span { display: block; height: 100%; width: 0; background: var(--accent-primary); transition: width .3s; }
.ct-progress[hidden] { display: none; }
.ct-file-label { position: relative; cursor: pointer; }
.ct-file-label input[type="file"] { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ct-activity { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; background: var(--bg-surface-2); border: 1px solid var(--border-color); border-radius: var(--radius-md); }
.ct-activity strong { font-size: 0.92rem; }
.ct-activity--none { flex-direction: row; flex-wrap: wrap; align-items: center; background: transparent; border: 1px dashed color-mix(in srgb, var(--color-warning) 50%, transparent); }
.ct-cohorts { display: flex; flex-direction: column; background: var(--bg-surface-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; }
.ct-cohort { min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border-bottom: 1px solid var(--border-subtle); color: var(--text-bright); text-decoration: none; font-size: 0.88rem; }
.ct-cohort:last-child { border-bottom: none; }
.ct-cohort:hover { color: var(--text-bright); background: var(--bg-hover); }
.ct-cohort i { color: var(--text-subtle); font-size: 0.8rem; }
.ct-cohort__dot { width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: var(--text-subtle); }
.ct-cohort__state { font-size: 0.8rem; font-weight: 600; color: var(--text-subtle); white-space: nowrap; }
.ct-cohort--liberada .ct-cohort__dot { background: var(--color-success); }
.ct-cohort--liberada .ct-cohort__state { color: var(--color-success); }
.ct-cohort--agendada .ct-cohort__dot { background: var(--color-warning); }
.ct-cohort--agendada .ct-cohort__state { color: var(--color-warning); }
.ct-numbers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ct-numbers > span { display: flex; flex-direction: column; padding: 10px 12px; background: var(--bg-surface-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.ct-numbers strong { font-size: 1.2rem; font-weight: 800; }
.ct-numbers small { font-size: 0.75rem; color: var(--text-subtle); }
.ct-cover { position: relative; height: 140px; margin: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: var(--radius-md);
            background: linear-gradient(135deg, color-mix(in srgb, var(--cover) 80%, transparent), color-mix(in srgb, var(--cover) 25%, #0f172a)); color: rgba(255,255,255,.55); font-size: 2.2rem; }
.ct-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ct-cover.is-editable { cursor: pointer; }
.ct-cover__cta { position: absolute; right: 10px; bottom: 10px; padding: 6px 10px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font-size: 0.78rem; font-weight: 700; }
.ct-cover input[type="file"] { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ct-cover:focus-within { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
.ct-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ct-confirm { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; background: color-mix(in srgb, var(--color-error) 7%, transparent);
              border: 1px solid color-mix(in srgb, var(--color-error) 40%, transparent); border-radius: var(--radius-md); }
.ct-confirm > strong { color: #f87171; font-size: 0.95rem; }
.ct-confirm ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 0.88rem; }
@media (max-width: 991.98px) {
    .ct-layout { grid-template-columns: minmax(0, 1fr); }
    .ct-panel { position: static; }
    .ct-layout.is-focused .ct-tree { display: none; }
    .ct-layout.is-focused .ct-back { display: inline-flex; }
}
@media (max-width: 767.98px) {
    .ct-search { width: 100%; order: 3; }
    .ct-lessons, .ct-add { padding-left: 10px; }
    .ct-msum { display: none; }
    .ct-two { grid-template-columns: minmax(0, 1fr); }
    .ct-header__actions { width: 100%; }
}

/* ── Lista "Cursos e aulas": filtros de situação e alertas do cartão ─────────── */
.cat-chip--alert .cat-chip__n { margin-left: 4px; padding: 0 7px; border-radius: 999px; background: color-mix(in srgb, var(--color-warning) 18%, transparent); color: var(--color-warning); }
.cat-chip--alert.active .cat-chip__n { background: rgba(255,255,255,.2); color: #fff; }
.cat-chips__sep { width: 1px; align-self: stretch; margin: 6px 4px; background: var(--border-hover); flex-shrink: 0; }
.course-card__draft { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
                      background: #e2e8f0; color: #0f172a; font-size: 0.72rem; font-weight: 800; }
.course-card__draft > span { width: 7px; height: 7px; border-radius: 50%; background: #64748b; }
.course-card__meta { font-size: 0.8rem; color: var(--text-muted); }
.course-card__alert { margin-top: 4px; display: flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 700; color: var(--color-warning); }
.course-card__empty { margin-top: 4px; font-size: 0.78rem; font-weight: 600; color: var(--accent-secondary); }

/* ── Painéis só com ações: Hoje (instrutor) e Painel (diretor) ──────────────── */
.pa-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; }
.pa-header__text { display: flex; flex-direction: column; gap: 2px; }
.pa-today { color: var(--accent-secondary); }
.pa-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.pa-block { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 18px 20px; background: var(--bg-surface); border: 1px solid var(--border-subtle);
            border-top: 3px solid var(--pa-color, var(--accent-primary)); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.pa-block--wide { grid-column: 1 / -1; }
.pa-block--amber { --pa-color: var(--color-warning); }
.pa-block--blue { --pa-color: var(--accent-primary); }
.pa-block--red { --pa-color: var(--color-error); }
.pa-block--purple { --pa-color: #8b5cf6; }
.pa-block--green { --pa-color: var(--color-success); }
.pa-block--gray { --pa-color: var(--text-muted); }
.pa-block.is-done { --pa-color: var(--color-success); }
.pa-block__head { display: flex; align-items: flex-start; gap: 12px; }
.pa-block__icon { width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
                  background: color-mix(in srgb, var(--pa-color) 14%, transparent); color: var(--pa-color); }
.pa-block__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pa-block__title { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-subtle); }
.pa-block__headline { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text-bright); }
.pa-block__detail { font-size: 0.85rem; color: var(--text-muted); }
.pa-block__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.pa-list { display: flex; flex-direction: column; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; }
.pa-list:empty { display: none; }
.pa-row { min-height: 52px; display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--border-subtle); color: var(--text-bright); text-decoration: none; }
.pa-row:last-child { border-bottom: none; }
a.pa-row:hover { color: var(--text-bright); background: var(--bg-hover); }
.pa-person { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pa-person__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pa-person__text strong { font-size: 0.9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-sub { font-size: 0.8rem; color: var(--text-subtle); }
.pa-person__text .pa-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-side { flex-shrink: 0; font-size: 0.8rem; font-weight: 700; color: var(--text-muted); }
.pa-side.is-alert { color: #f87171; }
.pa-warn { color: var(--color-warning); font-weight: 700; }
/* Turma para liberar e aluno sem turma: uma linha (botões à direita); no celular os botões descem */
.pa-release { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; padding: 10px 12px;
              border-bottom: 1px solid var(--border-subtle); }
.pa-enroll { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); align-items: center; gap: 8px 12px; padding: 8px 12px;
             border-bottom: 1px solid var(--border-subtle); }
.pa-release[hidden], .pa-enroll[hidden] { display: none; }
.pa-release:last-child, .pa-enroll:last-child { border-bottom: none; }
.pa-release .pa-actions { padding-left: 0; justify-content: flex-end; }
.pa-release .pa-result { grid-column: 2 / -1; margin-left: 0; }
.pa-enroll .pa-actions { flex-wrap: nowrap; }
.pa-enroll .pa-result { grid-column: 2; margin-left: 0; }
.pa-release__line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.pa-release .pa-chip { display: inline-block; margin: 0 0 0 4px; }
.pa-tag { padding: 1px 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 700;
          background: color-mix(in srgb, var(--accent-secondary) 14%, transparent); color: var(--accent-secondary); }
.pa-release__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pa-release__text .pa-sub { font-size: 0.82rem; color: var(--text-muted); }
.pa-release__name { font-size: 0.92rem; font-weight: 700; color: var(--text-bright); text-decoration: none; }
.pa-release__name:hover { color: var(--accent-secondary); }
.pa-day { width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--radius-md); display: flex; flex-direction: column; align-items: center; justify-content: center;
          background: var(--bg-surface-2); color: var(--accent-secondary); font-size: 0.72rem; font-weight: 800; line-height: 1.15; text-transform: capitalize; }
.pa-day small { font-size: 0.65rem; font-weight: 700; color: var(--text-subtle); }
.pa-chip { align-self: flex-start; margin-top: 2px; padding: 2px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 700;
           background: color-mix(in srgb, var(--color-warning) 12%, transparent); color: var(--color-warning); }
.pa-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 56px; }
.pa-actions[hidden], .pa-result[hidden] { display: none; }
.pa-enroll .pa-actions { padding-left: 50px; }
.pa-select { flex: 1 1 200px; width: auto; min-width: 0; max-width: 100%; min-height: 44px; }   /* min-width: 0 — nome de turma comprido não empurra o botão para fora */
.pa-avatar--purple { background: color-mix(in srgb, #8b5cf6 14%, transparent); color: #a78bfa; }
.pa-result { margin-left: 56px; }
.pa-done { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 48px 24px; text-align: center; background: var(--bg-surface);
           border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); }
.pa-done h2, .pa-done h3 { margin: 6px 0 0; font-size: 1.2rem; font-weight: 800; }
.pa-done__icon { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.6rem;
                 background: color-mix(in srgb, var(--color-success) 14%, transparent); color: var(--color-success); }
.pa-week { display: flex; flex-direction: column; gap: 10px; }
.pa-week__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pa-week__item { min-height: 56px; display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--bg-surface-2); border: 1px solid var(--border-subtle);
                 border-radius: var(--radius-md); color: var(--text-bright); text-decoration: none; }
.pa-week__item:hover { color: var(--text-bright); border-color: var(--border-hover); }
@media (max-width: 991.98px) {
    .pa-grid, .pa-week__grid { grid-template-columns: minmax(0, 1fr); }
    .pa-release { grid-template-columns: 44px minmax(0, 1fr); }
    .pa-release .pa-actions, .pa-release .pa-result { grid-column: 1 / -1; justify-content: flex-start; }
    .pa-enroll { grid-template-columns: minmax(0, 1fr); }
    .pa-enroll .pa-actions, .pa-enroll .pa-result { grid-column: 1; }
}
@media (max-width: 575.98px) {
    .pa-actions, .pa-enroll .pa-actions { padding-left: 0; }
    /* aluno sem turma: a turma ocupa a linha e "Colocar na turma" desce (antes ficava cortado à direita) */
    .pa-enroll .pa-actions { flex-wrap: wrap; }
    .pa-enroll .pa-select { flex: 1 1 100%; }
    .pa-actions .cw-btn { flex: 1 1 100%; }
    .pa-result { margin-left: 0; }
    .pa-header .cw-btn { width: 100%; }
}

/* ── Turmas concluídas: uma linha por turma, separadas por ano (concluded_cohorts.html) ── */
.list-filter-label { font-size: 0.68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-subtle); margin-bottom: 6px; }
.tc-list { display: flex; flex-direction: column; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; }
.tc-head, .tc-row { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.4fr) 72px 112px auto; align-items: center; gap: 12px; padding: 8px 16px; }
.tc-head { padding-top: 10px; padding-bottom: 10px; font-size: 0.7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-subtle); border-bottom: 1px solid var(--border-color); }
.tc-year { display: flex; align-items: baseline; gap: 8px; padding: 8px 16px; background: var(--bg-surface-2); border-bottom: 1px solid var(--border-color); font-size: 0.82rem; }
.tc-year strong { color: var(--text-bright); }
.tc-year span { color: var(--text-subtle); }
.tc-row { min-height: 56px; border-bottom: 1px solid var(--border-color); font-size: 0.86rem; color: var(--text-muted); }
.tc-row:last-child { border-bottom: none; }
.tc-row:hover { background: var(--bg-hover); }
.tc-name { min-width: 0; display: flex; flex-direction: column; }
.tc-name__link { color: var(--text-bright); font-weight: 600; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-name__link:hover { color: var(--accent-secondary); }
.tc-sub { font-size: 0.78rem; color: var(--text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-cell { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-label { display: none; }
.tc-actions { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.tc-btn { min-height: 36px; padding: 0 10px; font-size: 0.8rem; }
.tc-more { width: 36px; padding: 0; justify-content: center; }
.tc-break { display: none; }
@media (max-width: 767.98px) {
    .tc-head { display: none; }
    .tc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; padding: 10px 12px; }
    .tc-name { flex: 1 1 0; order: 1; }
    .tc-actions { order: 2; }
    .tc-break { display: block; order: 3; flex-basis: 100%; height: 0; }
    .tc-cell { order: 4; font-size: 0.78rem; color: var(--text-subtle); }
    .tc-label { display: inline; margin-right: 4px; }
    .tc-label::after { content: ":"; }
    .tc-btn { min-height: 44px; }
    .tc-more { width: 44px; }
}

/* ── Confirmação única (core/_confirm_dialog.html) ── */
.cw-confirm { background: var(--bg-surface); color: var(--text-bright); border: 1px solid var(--border-color); border-radius: var(--radius-lg); }
.cw-confirm .modal-header, .cw-confirm .modal-footer { border-color: var(--border-color); }
.cw-confirm .modal-footer { gap: 8px; }
.cw-confirm__title { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em; margin: 0; }
.cw-confirm__text { margin: 0 0 8px; color: var(--text-bright); }
.cw-confirm__items { margin: 0 0 8px; padding-left: 1.2rem; color: var(--text-muted); font-size: 0.9rem; }
.cw-confirm__undo { margin: 0; color: var(--text-subtle); font-size: 0.85rem; }
.cw-confirm__undo:empty { display: none; }
.cw-confirm__type { margin-top: 12px; }
.cw-confirm__type label { display: block; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 6px; }

/* ── Telas do admin no celular: alvos de toque de 44 px (manage_franchises, auditoria) ── */
.fr-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; }
.fr-btn { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0;
          background: none; border: 1px solid var(--border-color); border-radius: var(--radius-md); color: var(--text-muted); }
.fr-btn:hover { color: var(--text-bright); border-color: var(--border-hover); }
.sub-card { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--border-color); }
.sub-card:last-child { border-bottom: none; }
.sub-card__btn { min-height: 44px; }
@media (min-width: 768px) {
    .fr-btn { min-width: 36px; min-height: 36px; }
}
@media (max-width: 767.98px) {
    body .audit-period-pill { min-height: 44px; display: inline-flex; align-items: center; }
    body .audit-section-link { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ── Faixa da nota ao lado da cor (core/services/grade_bands.py) ── */
.grade-band { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
              font-size: 0.72rem; font-weight: 700; white-space: nowrap; vertical-align: middle; }
.grade-band--boa { color: #34d399; background: color-mix(in srgb, #34d399 14%, transparent); }
.grade-band--regular { color: #eab308; background: color-mix(in srgb, #eab308 14%, transparent); }
.grade-band--baixa { color: #f87171; background: color-mix(in srgb, #f87171 14%, transparent); }
.grade-legend { font-size: 0.78rem; color: var(--text-subtle); margin: 8px 0 0; }

/* ── Cabeçalho padrão ({% cabecalho %} → core/_page_header.html) ── */
.page-header__back { display: flex; width: fit-content; align-items: center; gap: 6px; min-height: 36px; margin-bottom: 4px;
                     font-size: 0.85rem; font-weight: 600; color: var(--accent-secondary); text-decoration: none; }
.page-header__back:hover { color: var(--accent-hover); }
.page-header__sub { margin: 4px 0 0; font-size: 0.88rem; color: var(--text-muted); max-width: 70ch; }
.page-header__right .btn, .page-header__right .cw-btn { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; }
h1.page-title { margin-bottom: 0; }
.page-header__left .page-badge { margin-bottom: 8px; }
.page-header__right form { margin: 0; }
@media (max-width: 767.98px) {
    .page-header__back { min-height: 44px; }
    /* No celular as ações ocupam a linha toda, divididas por igual */
    .page-header__right > .btn, .page-header__right > .cw-btn, .page-header__right > form { flex: 1 1 auto; justify-content: center; }
    .page-header__right > form .btn { width: 100%; justify-content: center; }
}


/* ── Aviso de tela (core/_aviso_tela.html e audit/screen_reports.html) ── */
.aviso-tela { display: flex; justify-content: center; margin-top: 2rem; padding-top: 0.75rem; border-top: 1px solid var(--border-subtle); }
.aviso-tela__link.btn-link { color: var(--text-muted) !important; font-weight: 500; text-align: center; }
.aviso-tela__link.btn-link:hover { color: var(--text-bright) !important; text-decoration: none; }
.aviso-tela__acao { color: var(--accent-secondary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.aviso-tela__janela { padding: 18px 18px 20px; background: var(--bg-surface); border: 1px solid var(--border-hover); border-radius: var(--radius-lg); color: var(--text-bright); }
.aviso-tela__titulo { margin: 0; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; }
.aviso-tela__sub { margin: 4px 0 0; color: var(--text-muted); font-size: 0.9rem; }
.aviso-tela__label { display: block; margin-bottom: 6px; font-size: 0.9rem; font-weight: 600; }
.aviso-tela__opcional { font-weight: 400; color: var(--text-subtle); }
.aviso-tela__campo { font-size: 16px; background: var(--bg-surface-2); color: var(--text-bright); border-color: var(--border-hover); resize: vertical; }
.aviso-tela__conta { display: block; text-align: right; margin-top: 4px; font-size: 0.75rem; color: var(--text-subtle); }
.aviso-tela__print { min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px dashed var(--border-hover); border-radius: var(--radius-md); color: var(--text-muted); font-size: 0.9rem; font-weight: 600; cursor: pointer; }
.aviso-tela__print:hover { border-color: var(--accent-primary); color: var(--text-bright); }
.aviso-tela__anexo { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; background: var(--bg-surface-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.aviso-tela__anexo[hidden], .aviso-tela__print[hidden] { display: none; }
.aviso-tela__anexo strong { display: block; font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aviso-tela__anexo small { color: var(--text-subtle); }
.aviso-tela__dica { display: block; margin-top: 4px; color: var(--text-subtle); font-size: 0.78rem; }
.aviso-tela__junto { margin-top: 14px; padding: 10px 12px; background: var(--bg-main); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); font-size: 0.8rem; color: var(--text-muted); }
.aviso-tela__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.aviso-tela__chip { padding: 2px 10px; border-radius: 999px; background: var(--bg-surface-2); border: 1px solid var(--border-subtle); color: var(--text-bright); font-size: 0.78rem; overflow-wrap: anywhere; }
.aviso-tela__erro { margin: 12px 0 0; padding: 8px 12px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-error) 12%, transparent); color: #fca5a5; font-size: 0.88rem; }
.aviso-tela__erro[hidden], .aviso-tela__ok[hidden] { display: none; }
.aviso-tela__ok { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 4px 4px; text-align: center; }
.aviso-tela__ok-icone { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.6rem;
                        background: color-mix(in srgb, var(--color-success) 14%, transparent); color: var(--color-success); }
.min-w-0 { min-width: 0; }
/* Janela que sobe do rodapé no celular (bottom sheet) */
@media (max-width: 575.98px) {
    .cw-sheet .modal-dialog { margin: 0; max-width: none; min-height: 100%; display: flex; align-items: flex-end; }
    .cw-sheet.fade .modal-dialog { transform: translateY(40px); }
    .cw-sheet.show .modal-dialog { transform: none; }
    .cw-sheet .modal-content { width: 100%; border-radius: 18px 18px 0 0; border-bottom: 0; padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
}

/* Lista de avisos (Auditoria) */
.rep-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 18px; }
.rep-filtros > div { min-width: 0; max-width: 100%; }
.rep-select { flex: 1 1 120px; width: auto; min-width: 0; max-width: 100%; min-height: 36px; }
.rep-card { display: flex; flex-wrap: wrap; gap: 18px; padding: 18px; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); }
.rep-card__main { flex: 999 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.rep-card__nome { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rep-card__msg { margin: 0; padding: 12px 14px; border-radius: var(--radius-md); background: var(--bg-surface-2); font-size: 0.95rem; white-space: pre-line; overflow-wrap: anywhere; }
.rep-card__dados { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 18px; }
.rep-card__dados dt, .rep-card__rotulo { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-subtle); }
.rep-card__dados dd { margin: 0; overflow-wrap: anywhere; }
.rep-card__diag { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius-md); font-size: 0.88rem; overflow-wrap: anywhere; }
.rep-card__diag.is-alert { background: color-mix(in srgb, var(--color-warning) 9%, transparent); border: 1px solid color-mix(in srgb, var(--color-warning) 40%, transparent); }
.rep-card__diag.is-alert .bi { color: var(--color-warning); }
.rep-card__diag.is-ok { background: color-mix(in srgb, var(--color-success) 8%, transparent); border: 1px solid color-mix(in srgb, var(--color-success) 35%, transparent); }
.rep-card__diag.is-ok .bi { color: var(--color-success); }
.rep-card__print { flex: 1 1 160px; max-width: 220px; display: flex; flex-direction: column; gap: 6px; }
.rep-card__thumb { min-height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-radius: var(--radius-md); background: var(--bg-surface-2); border: 1px solid var(--border-hover); color: var(--text-muted); text-decoration: none; font-size: 0.85rem; }
.rep-card__thumb:hover { border-color: var(--accent-primary); color: var(--text-bright); }
.rep-card__thumb .bi { font-size: 1.4rem; }
.rep-card__sem { padding: 14px; border-radius: var(--radius-md); border: 1px dashed var(--border-hover); color: var(--text-subtle); font-size: 0.85rem; text-align: center; }
.aviso-tela__miniatura { width: 44px; height: 64px; flex-shrink: 0; object-fit: cover; object-position: top; border-radius: 6px; border: 1px solid var(--border-hover); background: var(--bg-main); }
.aviso-tela__miniatura[hidden] { display: none; }
.aviso-tela__trocar { display: inline-flex; align-items: center; min-height: 32px; font-size: 0.82rem; font-weight: 600; color: var(--accent-secondary); cursor: pointer; }
.aviso-tela__trocar:hover { text-decoration: underline; }
.aviso-tela__link[aria-busy="true"] { pointer-events: none; opacity: 0.75; }
.rep-card__thumb img { display: block; width: 100%; max-height: 260px; object-fit: cover; object-position: top; border-radius: var(--radius-md); }
.rep-card__tipo { font-size: 0.75rem; color: var(--text-subtle); }

/* ══════════════════════════════════════════════════════════════════════════
   Arquivos para o aluno (core/_arquivo_item.html): materiais da aula e enunciados.
   A linha de apoio diz o que o clique faz (abre em outra aba / baixa para o aparelho).
   ══════════════════════════════════════════════════════════════════════════ */
.arq-item { display: flex; align-items: stretch; gap: 8px; min-width: 0; }
.arq-item__main { flex: 1; min-width: 0; min-height: 52px; display: flex; align-items: center; gap: 12px; padding: 8px 12px;
                  border-radius: var(--radius-md); text-decoration: none; color: var(--text-bright);
                  background: color-mix(in srgb, var(--accent-primary) 7%, transparent);
                  border: 1px solid color-mix(in srgb, var(--accent-primary) 22%, transparent); transition: background .15s, border-color .15s; }
.arq-item__main:hover { color: var(--text-bright); background: color-mix(in srgb, var(--accent-primary) 14%, transparent); border-color: var(--accent-primary); }
.arq-item__icon { width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
                  border-radius: var(--radius-md); font-size: 1.1rem; background: var(--bg-surface-2); color: var(--text-subtle); }
.arq-item__icon--pdf, .arq-item__icon--video { color: var(--color-error); }
.arq-item__icon--word { color: var(--accent-secondary); }
.arq-item__icon--excel { color: var(--color-success); }
.arq-item__icon--ppt, .arq-item__icon--html, .arq-item__icon--zip { color: var(--color-warning); }
.arq-item__icon--img { color: var(--accent-purple, #8b5cf6); }
.arq-item__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.arq-item__name { font-size: 0.88rem; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.arq-item__hint { font-size: 0.74rem; color: var(--text-muted); }
.arq-item__go { flex-shrink: 0; color: var(--accent-secondary); }
.arq-item > .btn-icon { align-self: center; flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   Central de ajuda (help_center): início, tema, artigo e o link de ajuda
   que as telas do aluno usam (tag ajuda_link).
   ══════════════════════════════════════════════════════════════════════════ */
.aj-link { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; margin-top: 6px; font-size: 0.84rem; font-weight: 600;
           color: var(--accent-secondary); text-decoration: none; }
.aj-link:hover { color: var(--accent-hover); text-decoration: underline; }
.aj-page { max-width: 820px; }
.aj-voltar { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; align-self: flex-start;
             font-size: 0.88rem; font-weight: 600; color: var(--accent-secondary); text-decoration: none; }
.aj-voltar:hover { text-decoration: underline; }
.aj-aviso-equipe { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; border-radius: var(--radius-md);
                   font-size: 0.85rem; color: var(--text-muted); background: var(--bg-surface-2); border: 1px dashed var(--border-hover); }
.aj-aviso-equipe .bi { color: var(--accent-secondary); margin-top: 2px; }

.aj-busca { display: flex; gap: 10px; flex-wrap: wrap; }
.aj-busca__campo { position: relative; flex: 1 1 240px; min-width: 0; }
.aj-busca__campo .bi { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-subtle); pointer-events: none; }
.aj-busca__campo .form-control { min-height: 50px; padding-left: 42px; font-size: 1rem; }
.aj-busca .btn { min-height: 50px; padding-inline: 24px; }

.aj-lista { display: flex; flex-direction: column; background: var(--bg-surface); border: 1px solid var(--border-subtle);
            border-radius: var(--radius-lg); overflow: hidden; }
.aj-item { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 18px; text-decoration: none; color: inherit;
           border-top: 1px solid var(--border-subtle); }
.aj-item:first-child { border-top: 0; }
.aj-item:hover { background: var(--bg-hover); color: inherit; }
.aj-item__texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.aj-item__titulo { font-weight: 600; color: var(--text-bright); overflow-wrap: anywhere; }
.aj-item__resumo { font-size: 0.84rem; color: var(--text-muted); }
.aj-item__seta { flex-shrink: 0; color: var(--text-subtle); }

.aj-temas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.aj-tema { display: flex; align-items: flex-start; gap: 12px; padding: 16px; text-decoration: none; color: inherit; min-width: 0; }
.aj-tema:hover { color: inherit; border-color: var(--accent-primary); }
.aj-tema__texto { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.aj-tema__titulo { font-weight: 700; color: var(--text-bright); }
.aj-tema__desc { font-size: 0.84rem; color: var(--text-muted); }
.aj-tema__conta { font-size: 0.75rem; color: var(--text-subtle); }

.aj-contato { display: flex; align-items: center; gap: 14px; padding: 16px 18px; flex-wrap: wrap; }
.aj-contato__texto { flex: 1 1 220px; min-width: 0; color: var(--text-muted); font-size: 0.9rem; }
.aj-contato__titulo { margin: 0 0 2px; font-size: 1rem; font-weight: 700; color: var(--text-bright); }
.aj-contato__tel { font-weight: 700; color: var(--accent-secondary); white-space: nowrap; }
.aj-contato__canais { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 4px !important; }
.aj-contato__canais .aj-contato__tel { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; white-space: normal; overflow-wrap: anywhere; min-width: 0; }

/* Artigo */
.aj-trilha { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 0.85rem; }
.aj-trilha a { display: inline-flex; align-items: center; min-height: 32px; color: var(--accent-secondary); text-decoration: none; font-weight: 600; }
.aj-trilha a:hover { text-decoration: underline; }
.aj-trilha .bi { font-size: 0.7rem; color: var(--text-subtle); }
.aj-artigo { display: flex; flex-direction: column; gap: 14px; }
.aj-artigo__titulo { margin: 0; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); font-weight: 800; letter-spacing: -0.03em;
                     line-height: 1.2; color: var(--text-bright); overflow-wrap: anywhere; }
.aj-artigo__resumo { margin: 0; padding: 14px 16px; border-radius: var(--radius-md); font-size: 1rem; line-height: 1.55; color: var(--text-bright);
                     background: color-mix(in srgb, var(--accent-primary) 8%, transparent); border-left: 3px solid var(--accent-primary); }
.aj-artigo__corpo { max-width: 68ch; color: var(--text-muted); font-size: 0.97rem; line-height: 1.7; }
.aj-artigo__corpo p, .aj-artigo__corpo ul, .aj-artigo__corpo ol, .aj-artigo__corpo dl { margin: 0 0 1rem; }
.aj-artigo__corpo strong { color: var(--text-bright); }
.aj-artigo__corpo a { color: var(--accent-secondary); font-weight: 600; }
.aj-artigo__corpo kbd { font-size: 0.8em; padding: 1px 6px; border-radius: 4px; background: var(--bg-surface-2); color: var(--text-bright); border: 1px solid var(--border-hover); }
.aj-h2 { margin: 1.6rem 0 0.6rem; font-size: 1.08rem; font-weight: 700; letter-spacing: -0.01em; color: var(--text-bright); }
.aj-artigo__corpo > .aj-h2:first-child { margin-top: 0; }
.aj-artigo__corpo h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 0.5rem; font-size: 0.95rem; font-weight: 700; color: var(--text-bright); }

.aj-passos { list-style: none; counter-reset: passo; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.aj-passos > li { counter-increment: passo; position: relative; padding-left: 40px; min-height: 28px; }
.aj-passos > li::before { content: counter(passo); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%;
                          display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700;
                          color: #fff; background: var(--accent-primary); }
.aj-ui { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 6px; font-size: 0.88em; font-weight: 600;
         color: var(--text-bright); background: var(--bg-surface-2); border: 1px solid var(--border-hover); line-height: 1.6; }
.aj-dica { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-md);
           background: color-mix(in srgb, var(--color-warning) 8%, transparent); border: 1px solid color-mix(in srgb, var(--color-warning) 30%, transparent); }
.aj-dica > .bi { color: var(--color-warning); margin-top: 3px; }
/* Print da tela no passo do artigo ({% print_tela %}): celular estreito, computador mais largo */
.aj-print { display: flex; flex-direction: column; gap: 8px; max-width: 280px; margin: 12px 0 6px; }
.aj-print--computador { max-width: min(100%, 640px); }
/* No celular, a print que só repete no computador o passo (arrastar o arquivo) some: fica a do celular */
@media (max-width: 575.98px) { .aj-print--so-computador { display: none; } }
.aj-artigo__corpo .aj-print__abrir { display: block; border-radius: 14px; overflow: hidden; border: 1px solid var(--border-hover);
                                     background: #0b1120; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); }
.aj-print__abrir:focus-visible { outline: 3px solid var(--accent-primary); outline-offset: 3px; }
.aj-print img { display: block; width: 100%; height: auto; }
.aj-print__legenda { font-size: 0.86rem; line-height: 1.45; color: var(--text-muted); }
.aj-print__nota { display: block; margin-top: 2px; font-size: 0.78rem; color: var(--text-subtle); }
.aj-termos dt, .aj-situacoes dt { color: var(--text-bright); font-weight: 700; margin-top: 12px; }
.aj-termos dt:first-child, .aj-situacoes dt:first-child { margin-top: 0; }
.aj-termos dd, .aj-situacoes dd { margin: 2px 0 0; }
.aj-situacoes dt { font-weight: 400; }
.aj-aparelhos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; margin-bottom: 1rem; }
.aj-aparelho { padding: 14px 16px; border-radius: var(--radius-md); background: var(--bg-surface); border: 1px solid var(--border-subtle); min-width: 0; }
.aj-aparelho p, .aj-aparelho ol { margin: 0; }

.aj-avaliar { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; }
.aj-avaliar__linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0; }
.aj-avaliar__titulo { margin: 0; font-size: 1rem; font-weight: 700; color: var(--text-bright); }
.aj-avaliar__obrigado { margin: 0; color: var(--color-success); font-size: 0.9rem; font-weight: 600; }
.aj-avaliar__falta { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; margin: 0; }
.aj-avaliar__falta .form-control { font-size: 1rem; }
.aj-avaliar__falta .form-label { margin: 0; font-size: 0.9rem; color: var(--text-bright); }

/* Mensagens flutuantes (toasts): o Bootstrap fixa 350 px e o base.html pedia 300 px no mínimo,
   mais largo que o celular de 280 px. O aluno vê uma depois de enviar um trabalho. */
.toast-container .toast { width: auto; }

/* Relatório do admin (help_center.views.relatorio) */
.aj-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 12px; }
.aj-numero { padding: 14px 16px; }
.aj-numero strong { display: block; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.03em; color: var(--text-bright); }
.aj-numero span { font-size: 0.82rem; color: var(--text-muted); }

/* Central da equipe: aviso na ajuda do aluno com "Copiar link", guia "Primeiros passos"
   (help_center/primeiros_passos.html) e o cartão do guia no Painel / Hoje. */
.aj-aviso-equipe { flex-wrap: wrap; align-items: center; }
.aj-aviso-equipe > span { min-width: 0; }

.aj-guia { display: flex; align-items: center; gap: 14px; padding: 14px 18px; text-decoration: none; color: inherit; min-width: 0; }
.aj-guia:hover { color: inherit; border-color: var(--accent-primary); }
.aj-guia__texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.aj-guia__titulo { font-weight: 700; color: var(--text-bright); }
.aj-guia__sub { font-size: 0.84rem; color: var(--text-muted); overflow-wrap: anywhere; }

.aj-guia-passos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.aj-guia-passo { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; min-width: 0; }
.aj-guia-passo.is-next { border-color: var(--accent-primary); }
.aj-guia-passo.is-done { opacity: 0.8; }
.aj-guia-passo__marca { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center;
                        justify-content: center; font-weight: 700; font-size: 0.85rem; color: var(--text-bright);
                        background: var(--bg-surface-2); border: 1px solid var(--border-hover); }
.aj-guia-passo.is-next .aj-guia-passo__marca { background: var(--accent-primary); border-color: var(--accent-primary); color: #fff; }
.aj-guia-passo.is-done .aj-guia-passo__marca { background: color-mix(in srgb, var(--color-success) 15%, transparent);
                                               border-color: transparent; color: var(--color-success); }
.aj-guia-passo__texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; color: var(--text-muted); font-size: 0.9rem; }
.aj-guia-passo__titulo { margin: 0; font-size: 1rem; font-weight: 700; color: var(--text-bright); }
.aj-guia-passo__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 6px; }
.aj-guia-passo__acoes .aj-link { margin-top: 0; }

.aj-cartao { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; min-width: 0; }
.aj-cartao__topo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.aj-cartao__texto { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.aj-cartao__titulo { margin: 0; font-size: 1rem; font-weight: 700; color: var(--text-bright); }
.aj-cartao__sub { font-size: 0.82rem; color: var(--text-muted); }
.aj-cartao__topo .aj-link { margin-top: 0; }
.aj-cartao .progress { height: 6px; }
.aj-cartao__proximo { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px;
                      font-size: 0.9rem; color: var(--text-muted); }
.aj-cartao__proximo > span { min-width: 0; overflow-wrap: anywhere; }

/* ══════════════════════════════════════════════════════════════════════════
   AULA — conteúdo primeiro (lesson_detail.html, _aula_modulo_lista.html)
   Vídeo e materiais no topo, a atividade como cartão no fim e concluir e seguir
   num lugar só. Aulas do módulo: coluna ao lado no computador, recolhidas no
   celular e no tablet. Desenho: canvas, página "Aula".
   ══════════════════════════════════════════════════════════════════════════ */
.au-page { width: 100%; }
.au-grid { width: 100%; max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr);
           gap: 28px; align-items: start; }
.au-main { min-width: 0; display: flex; flex-direction: column; gap: 24px; }

.au-head { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.au-back { align-self: flex-start; max-width: 100%; min-height: 40px; display: inline-flex; align-items: center; gap: 8px;
           color: var(--text-muted); font-size: 0.85rem; font-weight: 500; text-decoration: none; overflow-wrap: anywhere; }
.au-back:hover { color: var(--text-bright); }
.au-staff { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; max-width: 100%; padding: 4px 0 8px; }
.au-staff__label { font-size: 0.8rem; color: var(--text-subtle); }
.au-staff__count { font-size: 0.7rem; font-weight: 700; padding: 0 7px; border-radius: 999px;
                   background: var(--bg-surface-2); color: var(--text-muted); }
.au-where { font-size: 0.85rem; color: var(--text-subtle); overflow-wrap: anywhere; }
.au-title { margin: 0; font-size: clamp(1.45rem, 3vw, 1.9rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.2;
            color: var(--text-bright); overflow-wrap: anywhere; }
.au-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.au-chip { min-height: 36px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border-radius: 999px;
           background: var(--bg-surface); border: 1px solid var(--border-color); color: var(--text-muted);
           font-size: 0.8rem; font-weight: 600; text-decoration: none; }
.au-chip:hover { color: var(--text-bright); border-color: var(--border-hover); }

.au-video { border-radius: var(--radius-lg); overflow: hidden; background: #000; scroll-margin-top: calc(var(--topbar-height) + 16px); }
.au-video--aviso { background: var(--bg-surface); border: 1px solid var(--border-subtle); padding: 32px 20px; text-align: center; }
.au-video__titulo { font-size: 1rem; font-weight: 700; margin: 0 0 4px; color: var(--text-bright); }
.au-video__texto { font-size: 0.85rem; color: var(--text-muted); margin: 0 0 12px; }

.au-section { display: flex; flex-direction: column; gap: 10px; scroll-margin-top: calc(var(--topbar-height) + 16px); }
.au-section__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; }
.au-h2 { margin: 0; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; color: var(--text-bright); }
.au-h2__conta { font-size: 0.9rem; font-weight: 500; color: var(--text-subtle); }
.au-arquivos { display: flex; flex-direction: column; gap: 8px; }
.au-texto { max-width: 68ch; font-size: 1rem; line-height: 1.7; color: var(--text-muted); overflow-wrap: anywhere; }
.au-texto p { margin: 0 0 14px; }
.au-texto p:last-child { margin-bottom: 0; }

.au-ativ { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; padding: 18px 20px; background: var(--bg-surface);
           border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.au-ativ--alerta { border-color: color-mix(in srgb, var(--color-warning) 45%, transparent); }
.au-ativ__info { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.au-ativ__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.au-ativ__tipo { font-size: 0.8rem; color: var(--text-subtle); }
.au-ativ__titulo { font-size: 1rem; font-weight: 600; color: var(--text-bright); overflow-wrap: anywhere; }
.au-ativ__detalhe { font-size: 0.85rem; color: var(--text-subtle); }
.au-ativ__comentario { margin: 4px 0 0; padding: 8px 10px; font-size: 0.85rem; color: var(--text-muted);
                       background: var(--bg-surface-2); border-radius: var(--radius-md); overflow-wrap: anywhere; }
.au-ativ__comentario strong { color: var(--text-bright); font-weight: 600; }
.au-ativ__enunciado { margin-top: 6px; display: flex; flex-direction: column; gap: 8px; }
.au-ativ__enunciado-titulo { font-size: 0.85rem; font-weight: 700; color: var(--accent-secondary); }
.au-ativ__nota { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text-bright); font-variant-numeric: tabular-nums; }
.au-ativ__nota small { font-size: 0.85rem; font-weight: 500; color: var(--text-subtle); }
.au-ativ__acao { display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 0; }
.au-ativ__esgotada { display: flex; flex-direction: column; font-size: 0.85rem; color: var(--text-muted); }
.au-ativ__esgotada-titulo { font-weight: 700; color: var(--color-warning); }

.au-fim { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; padding: 20px; border-radius: var(--radius-lg);
          background: var(--bg-surface); border: 1px solid var(--border-subtle); }
.au-fim[hidden] { display: none; }
.au-fim--feita { background: color-mix(in srgb, var(--color-success) 6%, transparent);
                 border-color: color-mix(in srgb, var(--color-success) 28%, transparent); }
.au-fim__texto { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 4px; font-size: 0.875rem; color: var(--text-muted); }
.au-fim__titulo { font-size: 0.95rem; font-weight: 700; color: var(--text-bright); }
.au-fim__titulo--feita { display: inline-flex; align-items: center; gap: 8px; color: var(--color-success); }
.au-fim__acoes { display: flex; flex-wrap: wrap; gap: 10px; min-width: 0; }

/* Aulas do módulo */
.au-mod { min-width: 0; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; }
.au-mod--lado { display: none; }
.au-mod__topo { display: flex; flex-direction: column; gap: 8px; padding: 16px 16px 12px; border-bottom: 1px solid var(--border-subtle); }
.au-mod__titulo { font-size: 0.9rem; font-weight: 700; color: var(--text-bright); overflow-wrap: anywhere; }
.au-mod__conta { font-size: 0.8rem; font-weight: 500; color: var(--text-subtle); }
.au-mod__barra { display: block; height: 4px; border-radius: 999px; background: var(--bg-surface-2); overflow: hidden; }
.au-mod__barra > span { display: block; height: 100%; background: var(--accent-primary); border-radius: 999px; }
.au-mod__resumo { list-style: none; min-height: 56px; display: flex; align-items: center; gap: 12px; padding: 10px 16px; cursor: pointer; }
.au-mod__resumo::-webkit-details-marker { display: none; }
.au-mod__resumo-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.au-mod__abrir { font-size: 0.85rem; font-weight: 600; color: var(--accent-secondary); white-space: nowrap; }
.au-mod__fechar, .au-mod[open] .au-mod__ver { display: none; }
.au-mod[open] .au-mod__fechar { display: inline; }
.au-mod[open] .au-mod__resumo { border-bottom: 1px solid var(--border-subtle); }
.au-mod__curso { min-height: 44px; display: flex; align-items: center; justify-content: center; border-top: 1px solid var(--border-subtle);
                 color: var(--text-muted); font-size: 0.85rem; font-weight: 600; text-decoration: none; }
.au-mod__curso:hover { color: var(--text-bright); }
.au-aulas { list-style: none; margin: 0; padding: 6px 0; }
.au-aula { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 16px; border-left: 3px solid transparent;
           color: var(--text-bright); text-decoration: none; }
a.au-aula:hover { background: var(--bg-hover); color: var(--text-bright); }
.au-aula--atual { background: color-mix(in srgb, var(--accent-primary) 10%, transparent); border-left-color: var(--accent-primary); }
.au-aula__icone { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center;
                  font-size: 0.7rem; font-weight: 700; background: var(--bg-surface-2); color: var(--text-subtle); }
.au-aula--atual .au-aula__icone { background: var(--accent-primary); color: #fff; }
.au-aula--feita .au-aula__icone { background: color-mix(in srgb, var(--color-success) 14%, transparent); color: var(--color-success); }
.au-aula__texto { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.au-aula__nome { font-size: 0.85rem; font-weight: 500; overflow-wrap: anywhere; }
.au-aula--atual .au-aula__nome { font-weight: 700; }
.au-aula--fechada .au-aula__nome { color: var(--text-subtle); }
.au-aula__nota { font-size: 0.75rem; color: var(--text-subtle); }

/* "+10 pontos" ao concluir */
.au-pontos { position: fixed; bottom: 88px; right: 24px; z-index: 1080; padding: 8px 18px; border-radius: 999px; background: var(--bg-surface);
             border: 1px solid var(--border-hover); color: var(--accent-secondary); font-weight: 700; pointer-events: none;
             animation: au-pontos 2s ease forwards; }
@keyframes au-pontos { 0% { opacity: 0; transform: translateY(16px); } 15%, 75% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .au-pontos { animation: none; } }

@media (min-width: 992px) {
    .au-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; }
    .au-mod--lado { display: block; position: sticky; top: calc(var(--topbar-height) + 1.25rem);
                    max-height: calc(100vh - var(--topbar-height) - 2.5rem); overflow-y: auto; }
    .au-mod--recolhida { display: none; }
}
@media (max-width: 575.98px) {
    .au-video:not(.au-video--aviso) { margin: 0 -16px; border-radius: 0; }
    .au-fim__acoes, .au-ativ__acao { width: 100%; }
    .au-fim__acoes .btn, .au-ativ__acao .btn { width: 100%; justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════════════════
   TURMAS — lista por dia (manage_cohorts.html)
   Hoje primeiro; dia cheio ganha Manhã · Tarde · Noite; lista longa recolhe os
   dias que não são hoje nem o próximo, com animação suave (sem ela para quem
   pede menos movimento). Desenho: canvas, página "Turmas".
   ══════════════════════════════════════════════════════════════════════════ */
.tu-pills { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tu-dias { display: flex; flex-direction: column; gap: 14px; }
.tu-dia { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
          box-shadow: var(--shadow-card); overflow: hidden; }
.tu-dia__titulo { margin: 0; font-size: inherit; font-weight: inherit; }
.tu-dia__botao { width: 100%; min-height: 56px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
                 padding: 10px 14px 10px 16px; background: transparent; border: 0; color: inherit; text-align: left; cursor: pointer; }
.tu-dia__botao:hover { background: color-mix(in srgb, var(--text-muted) 6%, transparent); }
.tu-dia__nome { font-size: 0.95rem; font-weight: 700; color: var(--text-bright); }
.tu-dia__nome.is-hoje { color: var(--accent-secondary); }
.tu-dia__nome.is-sem-dia { color: var(--color-warning); }
.tu-dia__hoje { font-size: 0.7rem; font-weight: 700; padding: 1px 8px; border-radius: 999px;
                background: color-mix(in srgb, var(--accent-primary) 16%, transparent); color: var(--accent-secondary); }
.tu-dia__resumo { font-size: 0.85rem; color: var(--text-subtle); }
.tu-aviso { font-size: 0.7rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap;
            background: color-mix(in srgb, var(--color-warning) 14%, transparent); color: var(--color-warning); }
.tu-dia__acao { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 600; color: var(--accent-secondary); }
.tu-dia__acao i { transition: transform 0.28s ease; }
.tu-dia.is-open .tu-dia__acao i { transform: rotate(180deg); }
.tu-dia__recolher, .tu-dia.is-open .tu-dia__ver { display: none; }
.tu-dia.is-open .tu-dia__recolher { display: inline; }
/* Abre e fecha animando a altura: a linha da grade vai de 0fr a 1fr */
.tu-dia__corpo { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.28s ease; }
.tu-dia.is-open .tu-dia__corpo { grid-template-rows: 1fr; }
.tu-dia__lista { min-height: 0; overflow: hidden; box-shadow: inset 0 1px 0 var(--border-subtle); }
.tu-periodo { padding: 8px 16px 6px; font-size: 0.75rem; font-weight: 700; color: var(--text-subtle);
              background: color-mix(in srgb, var(--text-muted) 5%, transparent); border-bottom: 1px solid var(--border-subtle); }
.tu-periodo span { font-weight: 500; }
.tu-turma { display: flex; align-items: center; gap: 16px; padding: 10px 8px 10px 16px; border-bottom: 1px solid var(--border-subtle);
            scroll-margin-top: calc(var(--topbar-height) + 16px); }
.tu-turma:last-child { border-bottom: 0; }
.tu-turma__hora { flex: 0 0 64px; display: flex; flex-direction: column; line-height: 1.25; }
.tu-turma__hora strong { font-size: 0.95rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-bright); }
.tu-turma__hora strong.is-vazio { color: var(--text-subtle); }
.tu-turma__hora small { font-size: 0.75rem; color: var(--text-subtle); }
.tu-turma__info { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tu-turma__nome { font-size: 0.95rem; font-weight: 600; color: var(--text-bright); text-decoration: none; overflow-wrap: anywhere; }
.tu-turma__nome:hover { color: var(--accent-secondary); }
.tu-turma__curso { font-size: 0.8rem; color: var(--text-subtle); overflow-wrap: anywhere; }
.tu-turma__instrutor { font-size: 0.8rem; color: var(--text-muted); overflow-wrap: anywhere; }
.tu-turma__avisos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.tu-turma__col { flex: 0 1 200px; min-width: 0; font-size: 0.85rem; color: var(--text-muted); overflow-wrap: anywhere; }
.tu-turma__col.is-alerta { color: var(--color-warning); }
.tu-turma__alunos { flex: 0 0 96px; font-variant-numeric: tabular-nums; }
.tu-turma .btn-icon { flex-shrink: 0; color: var(--text-muted); }
.tu-so-celular { display: none; }
.tu-dias-semana { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.tu-dias-semana .btn { padding-left: 0; padding-right: 0; }
.tu-dias-semana .btn-check:focus-visible + .btn { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
.tu-janela__sub { font-size: 0.85rem; color: var(--text-muted); }
@media (max-width: 767.98px) {
    .tu-so-computador { display: none; }
    .tu-so-celular { display: inline; }
    .tu-turma { gap: 10px; }
    .tu-turma__hora { flex-basis: 48px; }
}
@media (max-width: 575.98px) {
    .tu-pills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
    .tu-dias-semana { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
    .tu-dia__corpo, .tu-dia__acao i { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   UNIDADE — abas Dados · Aparência (core/unit_data.html, core/_unidade_abas.html).
   Desenho no canvas "Unidade: dados e aparência", 14/10/2026.
   ══════════════════════════════════════════════════════════════════════════ */
.ud-topo { display: flex; flex-direction: column; gap: 14px; }
.ud-topo .page-header { margin-bottom: 0; }
.ud-abas .cw-segmented__item { gap: 8px; }
.ud-abas__falta { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
                  font-size: 0.72rem; font-weight: 800; background: color-mix(in srgb, var(--color-warning) 18%, transparent); color: var(--color-warning); }
.ud-abas .is-active .ud-abas__falta { background: rgba(255,255,255,0.22); color: #fff; }
.ud-aviso { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--radius-md);
            background: color-mix(in srgb, var(--color-warning) 8%, transparent); border: 1px solid color-mix(in srgb, var(--color-warning) 30%, transparent); }
.ud-aviso > i { color: var(--color-warning); font-size: 1.15rem; line-height: 1.3; }
.ud-aviso > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ud-aviso strong { color: var(--text-bright); font-size: 0.92rem; }
.ud-aviso span { color: var(--text-muted); font-size: 0.85rem; }
.ud-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.ud-form { display: flex; flex-direction: column; gap: 16px; min-width: 0; container-type: inline-size; container-name: ud-form; }
.ud-titulo { margin: 0; font-size: 1rem; font-weight: 700; color: var(--text-bright); display: flex; align-items: center; gap: 8px; }
.ud-campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ud-campo .form-label { margin: 0; display: flex; align-items: center; gap: 8px; }
.ud-campo .form-control, .ud-campo .form-select { min-height: 44px; }
.ud-campo .form-text { margin: 0; }
.ud-campo--largo { max-width: 560px; }
.ud-campo--meio { max-width: 360px; }
.ud-falta { font-size: 0.68rem; font-weight: 700; padding: 1px 8px; border-radius: 999px;
            background: color-mix(in srgb, var(--color-warning) 15%, transparent); color: var(--color-warning); }
.ud-erro { font-size: 0.8rem; font-weight: 600; color: var(--color-error); }
.ud-travado { color: var(--text-subtle) !important; }
.ud-check { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: -4px 0 0; padding-left: 0; }
.ud-check .form-check-input { margin: 0; width: 1.2em; height: 1.2em; flex-shrink: 0; }
.ud-check .form-check-label { color: var(--text-muted); font-size: 0.88rem; }
.ud-grade { display: grid; gap: 14px 16px; }
.ud-grade--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ud-grade--endereco { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ud-campo--rua, .ud-campo--complemento, .ud-campo--cidade { grid-column: span 2; }
.ud-salvar { position: sticky; bottom: 16px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 16px;
             padding: 12px 16px; background: var(--bg-surface); border: 1px solid var(--border-hover); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
html:has(.ud-salvar) { scroll-padding-bottom: 96px; }   /* campo focado não some atrás da barra de salvar */
.ud-salvar__texto { font-size: 0.85rem; color: var(--text-muted); }
.ud-lado { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ud-previa__titulo { color: var(--text-bright); }
.ud-previa__botoes { display: flex; flex-direction: column; gap: 8px; }
.ud-previa__botao { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: var(--radius-md);
                    background: var(--bg-surface-2); color: var(--accent-secondary); font-size: 0.85rem; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.ud-previa__botao[hidden], .ud-previa__vazio[hidden] { display: none; }
.ud-previa__vazio { font-size: 0.82rem; color: var(--color-warning); }
@media (max-width: 991.98px) {
    .ud-layout { grid-template-columns: minmax(0, 1fr); }
    .ud-lado { position: static; }
    body.has-staff-nav .ud-salvar { bottom: calc(62px + 12px + env(safe-area-inset-bottom, 0px)); }   /* acima do rodapé da equipe */
    html:has(.ud-salvar) { scroll-padding-bottom: 170px; }
}
@media (max-width: 359.98px) {
    .ud-salvar__texto:not(.is-mudou) { display: none; }
}
/* A coluna do formulário fica estreita ao lado da prévia (tablet deitado, notebook pequeno):
   os campos se arrumam pela largura dela, não da tela */
@container ud-form (max-width: 600px) {
    .ud-grade--2 { grid-template-columns: minmax(0, 1fr); }
    .ud-grade--endereco { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ud-campo--rua, .ud-campo--cidade, .ud-campo--bairro { grid-column: span 2; }
    .ud-campo--complemento { grid-column: span 1; }
}
@media (max-width: 575.98px) {
    .ud-grade--2 { grid-template-columns: minmax(0, 1fr); }
    .ud-grade--endereco { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ud-campo--rua, .ud-campo--cidade { grid-column: span 2; }
    .ud-campo--complemento { grid-column: span 1; }
    .ud-campo--bairro { grid-column: span 2; }
    .ud-salvar { flex-wrap: nowrap; padding: 8px 8px 8px 14px; }
    .ud-salvar__texto { flex: 1 1 auto; min-width: 0; font-size: 0.78rem; line-height: 1.3; }
    .ud-salvar .btn { flex: 0 0 auto; }
}

/* ══════════════════════════════════════════════════════════════════════════
   UNIDADE — aba Aparência em modo simples (core/unit_settings.html,
   _aparencia_previa.html, _aparencia_arquivo.html). Canvas "Unidade: dados e aparência".
   ══════════════════════════════════════════════════════════════════════════ */
.ap-arquivo { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; min-width: 0; }
.ap-arquivo.is-tirado .ap-arquivo__miniatura, .ap-arquivo.is-tirado .ap-arquivo__texto { opacity: .45; }
.ap-arquivo__miniatura { width: 56px; height: 56px; flex-shrink: 0; border-radius: 12px; overflow: hidden; display: inline-flex; align-items: center; justify-content: center;
                         background: var(--accent-primary); color: #fff; font-weight: 800; font-size: 1rem; border: 1px solid var(--border-color); }
.ap-arquivo__miniatura img { width: 100%; height: 100%; object-fit: contain; background: var(--bg-surface-2); }
.ap-arquivo__miniatura--claro { background: #f8fafc; color: #64748b; }
.ap-arquivo__miniatura--claro img { background: #f8fafc; }
.ap-arquivo--pequeno .ap-arquivo__miniatura { width: 44px; height: 44px; border-radius: 10px; }
.ap-arquivo__texto { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ap-arquivo__texto strong { color: var(--text-bright); font-size: 0.92rem; overflow-wrap: anywhere; }
.ap-arquivo__texto span { color: var(--text-muted); font-size: 0.82rem; }
.ap-arquivo__acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.ap-arquivo__acoes .btn { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
.ap-arquivo__acoes:focus-within label { outline: 2px solid var(--accent-primary); outline-offset: 2px; }

.ap-cores { display: flex; flex-wrap: wrap; gap: 10px; }
.ap-cor { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; border: 0; padding: 0; cursor: pointer; background: var(--swatch);
          color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; transition: transform .12s ease; }
.ap-cor i { visibility: hidden; }
.ap-cor:hover { transform: scale(1.06); }
.ap-cor[aria-checked="true"] { box-shadow: 0 0 0 3px var(--bg-surface), 0 0 0 5px var(--swatch, var(--accent-primary)); }
.ap-cor[aria-checked="true"] i { visibility: visible; }
.ap-cor:focus-visible { outline: 3px solid var(--text-bright); outline-offset: 4px; }
.ap-cor--outra { width: auto; padding: 0 14px 0 10px; gap: 8px; background: var(--bg-surface-2); color: var(--text-bright); font-size: 0.85rem; font-weight: 600;
                 border: 1px solid var(--border-hover); }
.ap-cor--outra[aria-checked="true"] { border-color: var(--accent-primary); box-shadow: 0 0 0 1px var(--accent-primary); }
.ap-cor__arco { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
                background: conic-gradient(#ef4444, #f59e0b, #10b981, #0ea5e9, #8b5cf6, #ec4899, #ef4444); }
.ap-escolhida { font-size: 0.85rem; color: var(--text-muted); }
.ap-escolhida strong { color: var(--text-bright); }
.ap-escolhida code { color: var(--text-subtle); font-size: 0.8rem; }
.ap-outra { display: flex; flex-direction: column; gap: 6px; max-width: 360px; }
.ap-outra[hidden] { display: none; }
.ap-outra .form-label { margin: 0; }
.ap-outra__campos, .ap-campo-cor__entrada { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ap-outra__campos input[type=color], .ap-campo-cor__entrada input[type=color] { width: 44px; height: 44px; flex-shrink: 0; padding: 2px; border-radius: var(--radius-sm);
                                                                              border: 1px solid var(--border-hover); background: transparent; cursor: pointer; }
.ap-outra__campos .form-control, .ap-campo-cor__entrada .form-control { flex: 1 1 0; width: auto; min-height: 44px; min-width: 0; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.85rem; }
.ap-contraste { flex-wrap: wrap; }
.ap-contraste > div { flex: 1 1 220px; }
.ap-contraste[hidden] { display: none; }
.ap-contraste .btn { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; }
.ap-tom { width: 18px; height: 18px; border-radius: 5px; flex-shrink: 0; border: 1px solid rgba(255,255,255,0.3); }

.ap-temas { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: 12px; }
.ap-tema { display: flex; flex-direction: column; gap: 10px; padding: 10px; margin: 0; cursor: pointer; border-radius: var(--radius-md);
           border: 1px solid var(--border-hover); background: var(--bg-surface-2); min-width: 0; }
.ap-tema:has(input:checked) { border-color: var(--accent-primary); box-shadow: 0 0 0 1px var(--accent-primary); }
.ap-tema:has(input:focus-visible) { outline: 3px solid var(--text-bright); outline-offset: 2px; }
.ap-tema__amostra { height: 64px; border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.ap-tema__amostra span { display: block; height: 10px; border-radius: 4px; }
.ap-tema__amostra span:last-child { width: 60%; }
.ap-tema__amostra--escuro { background: #0b1120; border: 1px solid rgba(148,163,184,0.25); }
.ap-tema__amostra--escuro span { background: #1a2640; }
.ap-tema__amostra--claro { background: #f8fafc; border: 1px solid rgba(15,23,42,0.15); }
.ap-tema__amostra--claro span { background: #e2e8f0; }
.ap-tema__nome { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.9rem; color: var(--text-bright); }
.ap-tema__marca { width: 18px; height: 18px; flex-shrink: 0; border-radius: 50%; border: 2px solid var(--border-hover); }
.ap-tema:has(input:checked) .ap-tema__marca { border: 5px solid var(--accent-primary); }

.ap-avancado { padding: 0; }
.ap-avancado__resumo { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; min-height: 56px; cursor: pointer; }
.ap-avancado__resumo::-webkit-details-marker { display: none; }
.ap-avancado__resumo > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ap-avancado__resumo strong { color: var(--text-bright); font-size: 1rem; }
.ap-avancado__resumo > span > span { color: var(--text-muted); font-size: 0.82rem; }
.ap-avancado__resumo i { color: var(--text-muted); transition: transform .2s ease; }
.ap-avancado[open] .ap-avancado__resumo i { transform: rotate(180deg); }
.ap-avancado[open] .ap-avancado__resumo { border-bottom: 1px solid var(--border-subtle); }
.ap-avancado__resumo:focus-visible { outline: 3px solid var(--accent-primary); outline-offset: -3px; border-radius: var(--radius-lg); }
.ap-cores-avancadas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); gap: 14px 16px; }
.ap-campo-cor { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ap-campo-cor .form-label { margin: 0; }
.ap-arquivos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

.ap-ao-vivo { margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 0.62rem; letter-spacing: 0.06em;
              background: color-mix(in srgb, var(--color-success) 15%, transparent); color: var(--color-success); }
.ap-previa-celular { display: none; flex-direction: column; align-items: center; gap: 10px; }
.ap-previa-celular .cw-eyebrow { align-self: flex-start; }

/* A prévia: o Início do aluno num celular, com as cores escolhidas (variáveis --pv-*) */
.ap-previa { width: min(300px, 100%); aspect-ratio: 300 / 560; box-sizing: border-box; border-radius: 32px; border: 8px solid #020617; overflow: hidden;
             background: var(--pv-fundo); color: var(--pv-texto); display: flex; flex-direction: column; box-shadow: 0 24px 48px rgba(0,0,0,0.35);
             --pv-linha: color-mix(in srgb, var(--pv-texto) 14%, transparent); font-size: 12px; }
.ap-previa__topo { display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: var(--pv-cartao); border-bottom: 1px solid var(--pv-linha); }
.ap-previa__topo i { color: var(--pv-suave); }
.ap-previa__logo { width: 26px; height: 26px; flex-shrink: 0; border-radius: 7px; overflow: hidden; background: var(--pv-cor); color: #fff;
                   display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; }
.ap-previa__logo img { width: 100%; height: 100%; object-fit: contain; background: var(--pv-cartao); }
.ap-previa__escola { flex: 1; min-width: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-previa__corpo { flex: 1; min-height: 0; padding: 14px; display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.ap-previa__ola { font-size: 15px; font-weight: 700; }
.ap-previa__destaque { border-radius: 14px; background: var(--pv-cor); color: #fff; padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.ap-previa__destaque strong { font-size: 14px; line-height: 1.3; }
.ap-previa__etiqueta { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; opacity: .85; }
.ap-previa__sub { font-size: 11px; opacity: .9; }
.ap-previa__continuar { margin-top: 6px; align-self: flex-start; padding: 7px 14px; border-radius: 8px; background: rgba(255,255,255,0.18);
                        border: 1px solid rgba(255,255,255,0.35); font-weight: 700; }
.ap-previa__grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ap-previa__cartao { border-radius: 12px; background: var(--pv-cartao); border: 1px solid var(--pv-linha); padding: 10px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ap-previa__cartao > span:first-child { font-size: 11px; color: var(--pv-suave); }
.ap-previa__cartao strong { font-size: 13px; }
.ap-previa__trilho { height: 6px; border-radius: 999px; background: var(--pv-cartao2); overflow: hidden; }
.ap-previa__trilho span { display: block; width: 45%; height: 100%; background: var(--pv-cor); }
.ap-previa__botao { align-self: flex-start; padding: 7px 12px; border-radius: 8px; background: var(--pv-cor); color: #fff; font-weight: 700; }
.ap-previa__menu { display: flex; background: var(--pv-cartao); border-top: 1px solid var(--pv-linha); }
.ap-previa__menu span { flex: 1; padding: 8px 0 10px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10px; font-weight: 600; color: var(--pv-suave); }
.ap-previa__menu i { font-size: 15px; }
.ap-previa__menu .is-ativo { color: var(--pv-cor); font-weight: 700; }
.ap-previa [hidden] { display: none !important; }

@media (max-width: 991.98px) {
    .ap-previa-lado { display: none; }
    .ap-previa-celular { display: flex; }
}
@media (max-width: 575.98px) {
    .ap-arquivos { grid-template-columns: minmax(0, 1fr); }
    .ap-temas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ap-arquivo__acoes { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .ap-cor, .ap-avancado__resumo i { transition: none; }
}

/* Modo espelho ("Ver como"): faixa fixa no topo do conteúdo com o caminho de volta (core/_faixa_espelho.html) */
.espelho-faixa { position: sticky; top: 0; z-index: 1030; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
                 padding: 10px clamp(1rem, 3vw, 2.5rem); background: var(--color-warning); color: #1c1204; font-size: 0.9rem; }
.espelho-faixa > i { font-size: 1.1rem; }
.espelho-faixa__texto { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.espelho-faixa__tempo { opacity: .8; }
.espelho-faixa__voltar { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: var(--radius-md);
                         background: #1c1204; color: #fff; font-weight: 700; text-decoration: none; white-space: nowrap; }
.espelho-faixa__voltar:hover { color: #fff; filter: brightness(1.3); }
.espelho-faixa__voltar:focus-visible { outline: 3px solid #1c1204; outline-offset: 2px; }
@media (max-width: 991.98px) { .espelho-faixa { top: 0; } }

/* Área do admin (core/rede_*.html, reformulação de 15/10/2026) */
.ra-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 18px; border-top: 1px solid var(--border-subtle); min-width: 0; }
.ra-linha:first-child { border-top: 0; }
.ra-linha__texto { flex: 1 1 220px; }
.ra-linha__texto small { overflow-wrap: anywhere; }
.ra-voce { font-size: 0.8rem; color: var(--text-subtle); }


/* Escolas, ficha da escola e Nova escola (core/rede_escola*.html, área do admin, entrega 2) */
.rs-pills { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.rs-escola { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 14px 18px; border-top: 1px solid var(--border-subtle);
             color: var(--text-bright); text-decoration: none; min-width: 0; }
.rs-escola:first-child { border-top: 0; }
.rs-escola:hover { background: var(--bg-surface-2); color: var(--text-bright); }
.rs-escola__nome { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rs-escola__nome strong { font-size: 1rem; overflow-wrap: anywhere; }
.rs-escola__nome small { font-size: 0.8rem; color: var(--text-subtle); overflow-wrap: anywhere; }
.rs-escola__numeros { display: flex; gap: 16px; font-size: 0.85rem; color: var(--text-muted); }
.rs-escola__numeros strong { color: var(--text-bright); }
.rs-escola__alerta { flex: 1 1 100%; font-size: 0.8rem; color: var(--color-warning); }
.rs-chip { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; vertical-align: middle; }
.rs-chip--ativa { color: var(--color-success); background: color-mix(in srgb, var(--color-success) 14%, transparent); }
.rs-chip--teste { color: var(--accent-secondary); background: color-mix(in srgb, var(--accent-secondary) 14%, transparent); }
.rs-chip--vencido { color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 14%, transparent); }
.rs-chip--desativada { color: var(--text-muted); background: color-mix(in srgb, var(--text-muted) 14%, transparent); }
.rs-resumo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--text-muted); }
.rs-abas { display: flex; gap: 4px; border-bottom: 1px solid var(--border-subtle); overflow-x: auto; }
.rs-abas__item { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; font-size: 0.9rem; font-weight: 600; white-space: nowrap;
                 color: var(--text-muted); text-decoration: none; border-bottom: 2px solid transparent; }
.rs-abas__item:hover { color: var(--text-bright); }
.rs-abas__item.is-active { color: var(--text-bright); border-bottom-color: var(--accent-primary); }
.rs-abas__conta { font-size: 0.72rem; font-weight: 800; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--text-muted) 14%, transparent); }
.rs-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.rs-plano { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); gap: 12px 16px; margin: 0; }
.rs-plano dt { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); }
.rs-plano dd { margin: 2px 0 0; font-weight: 700; }
.rs-plano dd.is-alerta { color: var(--color-warning); }
.rs-info { color: var(--text-muted); background: color-mix(in srgb, var(--accent-secondary) 8%, transparent); border: 1px solid color-mix(in srgb, var(--accent-secondary) 25%, transparent); font-weight: 500; }
.rs-linha-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; }
.rs-linha-form .form-select { width: auto; min-height: 44px; }
.rs-chave { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rs-chave code { min-height: 42px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: var(--radius-md); background: var(--bg-surface-2);
                 border: 1px solid var(--border-subtle); color: var(--text-bright); font-size: 0.85rem; overflow-wrap: anywhere; word-break: break-all; max-width: 100%; }
.rs-modos { display: flex; flex-wrap: wrap; gap: 8px; }
.rs-modo { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border-hover);
           font-size: 0.9rem; font-weight: 600; cursor: pointer; margin: 0; }
.rs-modo:has(input:checked) { border-color: var(--accent-primary); background: color-mix(in srgb, var(--accent-primary) 14%, transparent); }
.rs-modo.is-disabled { opacity: .5; cursor: not-allowed; }
.rs-opcoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 10px; }
.rs-opcao { display: flex; gap: 10px; padding: 14px; margin: 0; border-radius: var(--radius-md); background: var(--bg-surface-2); border: 1px solid var(--border-subtle); cursor: pointer; }
.rs-opcao:has(input:checked) { border-color: var(--accent-primary); box-shadow: 0 0 0 1px var(--accent-primary); }
.rs-opcao input { margin-top: 3px; }
.rs-opcao span { display: flex; flex-direction: column; gap: 2px; }
.rs-opcao small { color: var(--text-muted); font-size: 0.82rem; }
.rs-nova { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; max-width: 1040px; }
.rs-nova__campos { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.rs-nova__lado { position: sticky; top: 24px; }
.rs-nova__lado .cw-card__body { gap: 10px; }
.rs-ao-criar { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; color: var(--text-muted); }
.rs-ao-criar [hidden], .rs-nova [hidden] { display: none !important; }
.rs-abas__conta--alerta { color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 16%, transparent); }
/* Ficha da escola › Acessos e Suporte › Erros (área do admin, entrega 3) */
.rs-acessos__topo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding: 16px 18px; }
.rs-acesso, .su-vez { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 12px 18px; border-top: 1px solid var(--border-subtle); }
.rs-acesso__ponto { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--text-subtle); }
.rs-acesso__ponto.is-agora { background: var(--color-success); }
.rs-acesso__quem, .su-vez__quem { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; }
.rs-acesso__quem strong, .su-vez__quem strong { font-size: 0.9rem; overflow-wrap: anywhere; }
.rs-acesso__quem small, .su-vez__quem small { font-size: 0.78rem; color: var(--text-subtle); overflow-wrap: anywhere; }
.rs-acesso__quando, .su-vez__quando { font-size: 0.82rem; color: var(--text-muted); }
.cw-page > .rep-filtros { margin-bottom: 0; }
.su-busca { display: flex; gap: 8px; flex: 1 1 260px; min-width: 0; max-width: 420px; }
.su-busca .form-control { min-width: 0; }
.su-erro { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 14px 18px; border-top: 1px solid var(--border-subtle); }
.su-erro:first-child { border-top: 0; }
.su-erro__nome { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 2px; color: var(--text-bright); text-decoration: none; }
.su-erro__nome:hover strong { text-decoration: underline; }
.su-erro__nome strong { font-size: 0.92rem; overflow-wrap: anywhere; }
.su-erro__nome small { font-size: 0.78rem; color: var(--text-subtle); overflow-wrap: anywhere; }
.su-erro__voltou { font-size: 0.78rem; font-weight: 600; color: var(--color-warning); }
.su-erro__vezes { font-size: 0.85rem; font-weight: 800; color: var(--color-warning); white-space: nowrap; }
.su-erro__acoes { display: flex; flex-wrap: wrap; gap: 8px; }
/* Rede: a tela inicial do admin (área do admin, entrega 4) */
.rd-totais { align-self: flex-start; margin-top: 4px; font-size: 0.85rem; color: var(--text-subtle); text-decoration: none; overflow-wrap: anywhere; }
.rd-totais span { color: var(--accent-secondary); font-weight: 600; }
.rd-totais:hover span { text-decoration: underline; }
/* Blocos da mesma linha com a mesma altura e o botão no pé: nada fica solto lá embaixo */
.rd-grid { align-items: stretch; }
.rd-grid .pa-block__foot { margin-top: auto; }
.su-trace summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.su-trace pre { margin: 0; padding: 12px 14px; max-height: 420px; overflow: auto; border-radius: var(--radius-md); background: var(--bg-surface-2);
                font-size: 0.75rem; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 1199.98px) {
    .rs-nova { grid-template-columns: minmax(0, 1fr); }
    .rs-nova__lado { position: static; }
}
@media (max-width: 991.98px) {
    .rs-pills { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .rs-pills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}