:root {
    --app-primary: #002d72;
    --app-primary-light: #3386cc;
    --app-accent: #baa320;
    --app-text: #25313b;
    --app-muted: #68737d;
    --app-border: #d8dee1;
    --app-surface: #ffffff;
    --app-background: #f4f6f8;
    --app-danger: #a62f2f;
    --app-success: #2f6b3c;
    --app-radius: 10px;
    --app-shadow: 0 4px 18px rgba(0, 45, 114, 0.08);
}

html {
    color-scheme: light;
    -webkit-text-size-adjust: 100%;
}

body {
    min-width: 0;
    line-height: 1.5;
    text-rendering: optimizeLegibility;
}

.app-pular-conteudo {
    position: fixed;
    z-index: 10000;
    top: 8px;
    left: 8px;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--app-primary);
    color: #fff;
    text-decoration: none;
    transform: translateY(-160%);
}

.app-pular-conteudo:focus {
    transform: translateY(0);
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
a,
input,
select,
textarea {
    transition: border-color 160ms ease, box-shadow 160ms ease, opacity 160ms ease, transform 160ms ease;
}

:where(button, a, input, select, textarea):focus-visible {
    outline: 3px solid rgba(51, 134, 204, 0.35);
    outline-offset: 2px;
}

:where(input, select, textarea):disabled,
:where(button):disabled {
    cursor: not-allowed;
    opacity: 0.62;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select,
textarea {
    max-width: 100%;
}

textarea {
    resize: vertical;
}

:where(input, select, textarea)[aria-invalid="true"] {
    border-color: var(--app-danger) !important;
    box-shadow: 0 0 0 3px rgba(166, 47, 47, 0.12) !important;
}

.app-enviando {
    cursor: progress !important;
    opacity: 0.72;
}

.app-enviando::after {
    content: " …";
}

table {
    border-collapse: collapse;
}

.app-tabela-responsiva {
    max-width: 100%;
    overflow-x: auto;
    border-radius: 8px;
    -webkit-overflow-scrolling: touch;
}

.app-tabela-responsiva:focus-visible {
    outline: 3px solid rgba(51, 134, 204, 0.35);
    outline-offset: 2px;
}

.app-campo-senha {
    position: relative;
}

.app-alternar-senha {
    width: auto !important;
    margin: -8px 0 16px auto !important;
    padding: 4px 0 !important;
    display: block;
    border: 0 !important;
    background: transparent !important;
    color: var(--app-primary-light) !important;
    font-size: 12px !important;
    font-weight: 700;
}

img,
svg {
    max-width: 100%;
}

.cartao {
    border: 1px solid rgba(0, 45, 114, 0.06);
    box-shadow: var(--app-shadow);
}

.mensagem-erro,
.erro {
    border-left: 4px solid var(--app-danger);
}

.mensagem-sucesso,
.sucesso {
    border-left: 4px solid var(--app-success);
}

@media (max-width: 720px) {
    header {
        align-items: flex-start;
        gap: 12px;
        flex-wrap: wrap;
    }

    main {
        width: 100%;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .cartao { padding: 18px !important; }

    table {
        min-width: 620px;
    }

    .grade-acoes {
        grid-template-columns: 1fr !important;
    }
}

/* Navegação principal compartilhada */
body.app-com-sidebar {
    padding-left: 264px;
}

.app-sidebar {
    position: fixed;
    z-index: 1000;
    inset: 0 auto 0 0;
    width: 264px;
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    color: #dceafa;
    background:
        radial-gradient(circle at 0 0, rgba(51, 134, 204, .24), transparent 18rem),
        linear-gradient(180deg, #061b35 0%, #031227 100%);
    border-right: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 12px 0 42px rgba(4, 23, 46, .16);
}

.app-sidebar-topo { display:flex; flex:0 0 auto; align-items:center; min-height:82px; padding:18px 18px 15px; }
.app-sidebar-marca { display:flex; align-items:center; gap:12px; color:#fff; text-decoration:none; }
.app-sidebar-marca > span:last-child { display:flex; flex-direction:column; }
.app-sidebar-marca strong { font-size:16px; letter-spacing:-.02em; }
.app-sidebar-marca small { margin-top:3px; color:#83a8ce; font-size:10px; letter-spacing:.06em; text-transform:uppercase; }
.app-sidebar-simbolo { width:36px; height:36px; display:grid; place-items:center; border-radius:11px; color:#fff; font-size:18px; font-weight:900; background:linear-gradient(145deg,#3fa0e8,#1262a5); box-shadow:0 8px 22px rgba(29,130,205,.32); }
.app-sidebar-simbolo-imagem { display:block; object-fit:contain; background:transparent; }
.app-sidebar-fechar { display:none; margin-left:auto; padding:5px 9px; color:#fff; font-size:26px; line-height:1; background:transparent; border:0; box-shadow:none; }

.app-sidebar-nav { flex:1 1 auto; min-height:0; overflow-x:hidden; overflow-y:auto; padding:10px 12px 20px; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:rgba(105,185,239,.45) transparent; -webkit-overflow-scrolling:touch; }
.app-sidebar-nav::-webkit-scrollbar { width:5px; }
.app-sidebar-nav::-webkit-scrollbar-thumb { border-radius:8px; background:rgba(105,185,239,.42); }
.app-sidebar-secao { display:block; margin:7px 12px 10px; color:#6689af; font-size:10px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.app-sidebar-link { position:relative; display:flex; align-items:center; gap:12px; min-height:45px; margin:3px 0; padding:9px 12px; color:#adc3db; text-decoration:none; border-radius:11px; font-size:13px; font-weight:650; transition:background 160ms ease,color 160ms ease,transform 160ms ease; }
.app-sidebar-link:hover { color:#fff; background:rgba(255,255,255,.075); transform:translateX(2px); }
.app-sidebar-link.ativo { color:#fff; background:linear-gradient(100deg,rgba(40,137,207,.32),rgba(40,137,207,.12)); box-shadow:inset 3px 0 #4fb1f4; }
.app-sidebar-icone { width:24px; height:24px; display:grid; flex:0 0 24px; place-items:center; color:#69b9ef; font-size:16px; }

.app-sidebar-rodape { flex:0 0 auto; padding:15px 14px max(18px,env(safe-area-inset-bottom)); border-top:1px solid rgba(255,255,255,.08); background:rgba(3,18,39,.96); }
.app-sidebar-perfil { display:flex; align-items:center; gap:10px; padding:8px; color:#fff; text-decoration:none; border-radius:11px; }
.app-sidebar-perfil:hover { background:rgba(255,255,255,.06); }
.app-sidebar-perfil > span:last-child { min-width:0; display:flex; flex-direction:column; }
.app-sidebar-perfil strong { max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.app-sidebar-perfil small { margin-top:3px; color:#83a8ce; font-size:10px; }
.app-sidebar-avatar { width:34px; height:34px; display:grid; flex:0 0 34px; place-items:center; border-radius:50%; color:#eaf6ff; font-size:13px; font-weight:800; background:#164d7d; border:1px solid rgba(255,255,255,.14); }
.app-sidebar-avatar-foto { display:block; object-fit:cover; background:#164d7d; }
.app-sidebar-form { margin:5px 8px 0; }
.app-sidebar-form button { width:100%; padding:7px 0; color:#83a8ce; text-align:left; font-size:11px; font-weight:650; background:transparent; border:0; box-shadow:none; }
.app-sidebar-form button:hover { color:#fff; background:transparent; transform:none; }

.app-menu-mobile { display:none; }
.app-sidebar-overlay { display:none; }

/* Superfície comum das áreas operacionais */
body.app-tela-operacional {
    min-height: 100vh;
    color: #26384a;
    font-family: "Montserrat", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    background:
        radial-gradient(circle at 94% 2%, rgba(51, 134, 204, .12), transparent 25rem),
        linear-gradient(180deg, #f8fafc 0, #edf3f8 32rem) !important;
}

/* Base visual obrigatoria para telas operacionais novas e legadas. */
body.app-tela-operacional > header { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
body.app-tela-operacional > header h1 { margin:0; }
body.app-tela-operacional > header a { color:#176aa8; font-size:13px; font-weight:700; }
body.app-tela-operacional > main { width:min(100%,1120px); margin:24px auto; padding:0 18px 64px; }
body.app-tela-operacional main .cartao { padding:24px; margin-bottom:20px; border-radius:16px; background:#fff; }
body.app-tela-operacional main .cartao h2 { margin:0 0 17px; padding-bottom:10px; color:#123f64; font-size:18px; border-bottom:1px solid #e2eaf0; }
body.app-tela-operacional main label { display:block; margin:12px 0 5px; color:#244966; font-size:12px; font-weight:700; }
body.app-tela-operacional main input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),body.app-tela-operacional main select,body.app-tela-operacional main textarea { width:100%; min-width:0; padding:10px 12px; color:#26384a; font:inherit; border:1px solid #cbd9e4; border-radius:9px; background:#fbfdff; }
body.app-tela-operacional main textarea { min-height:88px; resize:vertical; }
body.app-tela-operacional main button:not(.app-sidebar-fechar) { min-height:42px; padding:10px 17px; color:#fff; font-weight:750; border:0; border-radius:9px; background:#002d72; box-shadow:0 7px 18px rgba(0,45,114,.13); cursor:pointer; }
body.app-tela-operacional main button:not(.app-sidebar-fechar):hover { background:#176aa8; }
body.app-tela-operacional main .mensagem-erro,body.app-tela-operacional main .mensagem-sucesso { margin-bottom:16px; padding:12px 14px; border-radius:9px; font-size:13px; }
body.app-tela-operacional main .mensagem-erro { color:#8a2a2a; background:#fbeaea; }
body.app-tela-operacional main .mensagem-sucesso { color:#285c3a; background:#eaf3e4; }
body.app-tela-operacional main a.botao { display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:9px 14px; color:#fff; font-size:12px; font-weight:750; text-decoration:none; border-radius:9px; background:#002d72; }

body.app-tela-operacional > header {
    min-height: 72px;
    padding: 14px clamp(18px, 4vw, 42px) !important;
    background: rgba(255, 255, 255, .92) !important;
    color: #123453 !important;
    border-bottom: 1px solid rgba(0, 45, 114, .08);
    box-shadow: 0 8px 28px rgba(21, 49, 78, .055) !important;
    backdrop-filter: blur(14px);
}

body.app-tela-operacional > header h1 {
    margin: 0;
    color: #123453 !important;
    font-size: clamp(17px, 2vw, 22px) !important;
    letter-spacing: -.025em;
}

body.app-tela-operacional > header a { color: #1768aa !important; font-weight: 700; }
body.app-tela-operacional > main { width:min(1180px,100%); padding:30px 28px 64px !important; }
body.app-tela-operacional .cartao {
    margin-bottom: 20px;
    padding: clamp(20px, 3vw, 28px) !important;
    border: 1px solid rgba(0, 45, 114, .075) !important;
    border-radius: 17px !important;
    background: rgba(255, 255, 255, .94) !important;
    box-shadow: 0 10px 34px rgba(21, 49, 78, .075) !important;
}

body.app-tela-operacional .cartao h2,
body.app-tela-operacional .cartao h3 { color:#153b5c; letter-spacing:-.02em; }
body.app-tela-operacional table { width:100%; background:#fff; }
body.app-tela-operacional th { color:#244b6d; background:#edf5fb !important; font-size:11px; letter-spacing:.035em; text-transform:uppercase; }
body.app-tela-operacional th,
body.app-tela-operacional td { padding:12px 11px; border-color:#e4ebf1 !important; }
body.app-tela-operacional tr:hover td { background:#f8fbfd; }
body.app-tela-operacional input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body.app-tela-operacional select,
body.app-tela-operacional textarea { border-color:#ccd9e4; border-radius:9px; background:#fbfdff; }
body.app-tela-operacional input:focus,
body.app-tela-operacional select:focus,
body.app-tela-operacional textarea:focus { border-color:#3386cc; box-shadow:0 0 0 3px rgba(51,134,204,.12); }
body.app-tela-operacional .mensagem-sucesso,
body.app-tela-operacional .mensagem-erro { border-radius:11px; box-shadow:0 6px 18px rgba(21,49,78,.06); }

/* Fluxo guiado de matrícula */
body.app-fluxo-matricula > main { max-width:900px !important; }
.matricula-progresso { position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin:0 0 26px; padding:18px 20px; border:1px solid rgba(0,45,114,.08); border-radius:16px; background:rgba(255,255,255,.92); box-shadow:0 8px 28px rgba(21,49,78,.06); }
.matricula-progresso::before { content:""; position:absolute; top:39px; left:16.5%; right:16.5%; height:2px; background:#dbe6ef; }
.matricula-passo { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:10px; color:#8293a2; }
.matricula-passo-numero { width:42px; height:42px; display:grid; flex:0 0 42px; place-items:center; border:5px solid #fff; border-radius:50%; color:#6e8294; font-size:12px; font-weight:900; background:#e8eef3; box-shadow:0 0 0 1px #dbe6ef; }
.matricula-passo > span:last-child { display:flex; flex-direction:column; }
.matricula-passo strong { color:#607587; font-size:12px; }
.matricula-passo small { margin-top:2px; font-size:9px; }
.matricula-passo.concluida .matricula-passo-numero { color:#fff; background:#329363; box-shadow:0 0 0 1px #329363; }
.matricula-passo.concluida strong { color:#347453; }
.matricula-passo.atual .matricula-passo-numero { color:#fff; background:#1c78ba; box-shadow:0 0 0 4px rgba(28,120,186,.13); }
.matricula-passo.atual strong { color:#123f64; }
.app-botao-destaque { display:inline-flex; align-items:center; justify-content:center; margin:2px 12px 14px 0; padding:11px 17px; color:#fff !important; font-size:12px; font-weight:800; text-decoration:none; border-radius:9px; background:linear-gradient(120deg,#002d72,#1675b6); box-shadow:0 9px 22px rgba(0,45,114,.17); }
body.app-fluxo-matricula .item-documento { border-radius:12px !important; border-color:#dce6ee !important; background:#fbfdff; }

/* Navegação contextual e superfícies pedagógicas */
body.app-tela-pedagogica { --app-pedagogico:#247c68; }
body.app-tela-pedagogica > header { border-bottom-color:rgba(36,124,104,.16); }
.turma-atalhos { display:flex; gap:6px; margin:0 0 24px; padding:7px; overflow-x:auto; border:1px solid rgba(0,45,114,.08); border-radius:13px; background:rgba(255,255,255,.92); box-shadow:0 7px 24px rgba(21,49,78,.055); scrollbar-width:thin; }
.turma-atalhos a { flex:1 0 auto; padding:9px 13px; color:#607588; font-size:11px; font-weight:750; text-align:center; text-decoration:none; border-radius:8px; white-space:nowrap; }
.turma-atalhos a:hover { color:#174d70; background:#edf6fa; }
.turma-atalhos a.ativo { color:#fff; background:linear-gradient(120deg,#176c82,var(--app-pedagogico)); box-shadow:0 6px 17px rgba(36,124,104,.2); }
body.app-tela-pedagogica .botao-grande { border:1px solid rgba(36,124,104,.12) !important; border-radius:15px !important; box-shadow:0 8px 25px rgba(21,73,67,.07); }
body.app-tela-pedagogica .botao-grande:hover { border-color:rgba(36,124,104,.35) !important; transform:translateY(-3px); box-shadow:0 14px 32px rgba(21,73,67,.12); }
body.app-tela-pedagogica .selo-enviado { background:#e4f3ee; color:#236c58; }

/* Navegação contextual e indicadores financeiros */
body.app-tela-financeira { --app-financeiro:#9a8420; }
body.app-tela-financeira > header { border-bottom-color:rgba(186,163,32,.22); }
.financeiro-atalhos { display:flex; gap:6px; margin:0 0 24px; padding:7px; overflow-x:auto; border:1px solid rgba(126,105,18,.12); border-radius:13px; background:rgba(255,255,255,.94); box-shadow:0 7px 24px rgba(77,68,23,.055); scrollbar-width:thin; }
.financeiro-atalhos a { flex:1 0 auto; padding:9px 13px; color:#746e52; font-size:11px; font-weight:750; text-align:center; text-decoration:none; border-radius:8px; white-space:nowrap; }
.financeiro-atalhos a:hover { color:#665710; background:#faf7e8; }
.financeiro-atalhos a.ativo { color:#fff; background:linear-gradient(120deg,#806c14,#ad9629); box-shadow:0 6px 17px rgba(128,108,20,.2); }
body.app-tela-financeira .cartoes-resumo,
body.app-tela-financeira .kpis { gap:14px !important; }
body.app-tela-financeira .cartao-resumo,
body.app-tela-financeira .kpi-item { border:1px solid rgba(126,105,18,.1) !important; border-radius:15px !important; background:rgba(255,255,255,.95) !important; box-shadow:0 8px 26px rgba(77,68,23,.065) !important; }
body.app-tela-financeira .valor { letter-spacing:-.025em; }
body.app-tela-financeira .botao-novo,
body.app-tela-financeira .botao-renegociar { border-radius:9px !important; box-shadow:0 8px 20px rgba(0,45,114,.14); }

/* Comunicação, recados e atendimento às famílias */
body.app-tela-comunicacao { --app-comunicacao:#5d5bb2; }
body.app-tela-comunicacao > header { border-bottom-color:rgba(93,91,178,.18); }
.comunicacao-atalhos { display:flex; gap:6px; margin:0 0 24px; padding:7px; border:1px solid rgba(93,91,178,.12); border-radius:13px; background:rgba(255,255,255,.94); box-shadow:0 7px 24px rgba(54,53,116,.055); }
.comunicacao-atalhos a { flex:1; padding:9px 13px; color:#676681; font-size:11px; font-weight:750; text-align:center; text-decoration:none; border-radius:8px; }
.comunicacao-atalhos a:hover { color:#464486; background:#f2f1fb; }
.comunicacao-atalhos a.ativo { color:#fff; background:linear-gradient(120deg,#47458f,#6967bd); box-shadow:0 6px 17px rgba(71,69,143,.2); }
body.app-tela-comunicacao .item-recado,
body.app-tela-comunicacao .item-protocolo { border:1px solid rgba(93,91,178,.11) !important; border-radius:13px !important; background:#fdfdff; }
body.app-tela-comunicacao .resposta-escola { border-radius:10px; background:#f1f4fb !important; }
body.app-tela-comunicacao .selo-status,
body.app-tela-comunicacao .selo-turma { border-radius:999px !important; font-weight:750; letter-spacing:.02em; }
body.app-tela-comunicacao .botao-nova { border-radius:9px !important; box-shadow:0 8px 20px rgba(71,69,143,.16); }

/* Captação e conversão */
body.app-tela-captacao { --app-captacao:#267b83; }
body.app-tela-captacao > header { border-bottom-color:rgba(38,123,131,.19); }
body.app-tela-captacao .funil-resumo { gap:12px !important; }
body.app-tela-captacao .funil-item { position:relative; overflow:hidden; border:1px solid rgba(38,123,131,.11) !important; border-radius:14px !important; background:rgba(255,255,255,.96) !important; box-shadow:0 8px 25px rgba(23,79,84,.065); }
body.app-tela-captacao .funil-item::after { content:""; position:absolute; inset:auto 0 0; height:3px; background:linear-gradient(90deg,#267b83,#5ab1b6); }
body.app-tela-captacao .funil-item .numero { color:#176a72 !important; letter-spacing:-.035em; }
body.app-tela-captacao .item-lead { border:1px solid rgba(38,123,131,.1) !important; border-radius:13px !important; background:#fcfefe; }
body.app-tela-captacao .selo-status { border-radius:999px !important; }
body.app-tela-captacao .link-publico { border:1px solid rgba(38,123,131,.13); border-radius:12px !important; background:#f1f9f9 !important; }
body.app-tela-captacao .link-converter { border-radius:8px !important; box-shadow:0 6px 16px rgba(38,123,131,.14); }
.form-convite-matricula { display:inline-block; margin-top:8px; }
.form-convite-matricula .link-converter { padding:9px 14px; color:#3f3500; font-size:12px; font-weight:800; border:0; background:#d7bf37; cursor:pointer; }
.convite-matricula-gerado { border-color:rgba(36,143,92,.24) !important; background:linear-gradient(135deg,#f7fffb,#eef9f5) !important; }
.botao-whatsapp { display:inline-flex; align-items:center; min-height:38px; padding:9px 14px; color:#fff !important; font-size:12px; font-weight:800; text-decoration:none; border-radius:8px; background:#208b51; box-shadow:0 7px 18px rgba(32,139,81,.18); }

/* Perfil, equipe, escolas e níveis de acesso */
body.app-tela-configuracao { --app-configuracao:#385d80; }
body.app-tela-configuracao > header { border-bottom-color:rgba(56,93,128,.18); }
.configuracao-atalhos { display:flex; gap:6px; margin:0 0 24px; padding:7px; border:1px solid rgba(56,93,128,.12); border-radius:13px; background:rgba(255,255,255,.94); box-shadow:0 7px 24px rgba(29,62,91,.055); }
.configuracao-atalhos a { flex:1; padding:9px 13px; color:#607487; font-size:11px; font-weight:750; text-align:center; text-decoration:none; border-radius:8px; }
.configuracao-atalhos a:hover { color:#294f70; background:#edf4f8; }
.configuracao-atalhos a.ativo { color:#fff; background:linear-gradient(120deg,#284c6c,#4b7192); box-shadow:0 6px 17px rgba(40,76,108,.2); }
body.app-tela-configuracao .foto-atual,
body.app-tela-configuracao .logo-atual,
body.app-tela-configuracao .sem-foto,
body.app-tela-configuracao .sem-logo { border-radius:14px !important; border-color:#cfdee9 !important; box-shadow:0 7px 22px rgba(29,62,91,.07); }
body.app-tela-configuracao .selo-papel,
body.app-tela-configuracao .selo-licenca { display:inline-flex !important; align-items:center; min-height:24px; padding:4px 9px !important; border-radius:999px !important; color:#315a77 !important; background:#e8f1f7 !important; font-size:10px !important; font-weight:800 !important; }
body.app-tela-configuracao .dica-campo { color:#718496; line-height:1.5; }

/* Catálogo, aulas, provas e acessos de capacitação */
body.app-tela-capacitacao { --app-capacitacao:#b06f2e; }
body.app-tela-capacitacao > header { border-bottom-color:rgba(176,111,46,.2); }
.capacitacao-atalhos { display:flex; gap:6px; margin:0 0 24px; padding:7px; overflow-x:auto; border:1px solid rgba(176,111,46,.13); border-radius:13px; background:rgba(255,255,255,.94); box-shadow:0 7px 24px rgba(94,56,22,.055); }
.capacitacao-atalhos a { flex:1 0 auto; padding:9px 13px; color:#7c6b5c; font-size:11px; font-weight:750; text-align:center; text-decoration:none; border-radius:8px; white-space:nowrap; }
.capacitacao-atalhos a:hover { color:#8a531f; background:#fbf3eb; }
.capacitacao-atalhos a.ativo { color:#fff; background:linear-gradient(120deg,#91551e,#c17a35); box-shadow:0 6px 17px rgba(145,85,30,.2); }
body.app-tela-capacitacao .grade-cursos { gap:17px !important; }
body.app-tela-capacitacao .cartao-curso { border:1px solid rgba(176,111,46,.12) !important; border-radius:16px !important; background:rgba(255,255,255,.96) !important; box-shadow:0 9px 29px rgba(94,56,22,.07); }
body.app-tela-capacitacao .cartao-curso:hover { transform:translateY(-4px); box-shadow:0 16px 36px rgba(94,56,22,.12); }
body.app-tela-capacitacao .linha-aula,
body.app-tela-capacitacao .bloco-pergunta,
body.app-tela-capacitacao .item-acesso { border:1px solid rgba(176,111,46,.11) !important; border-radius:12px !important; background:#fffdfb; }
body.app-tela-capacitacao .video-wrapper { overflow:hidden; border-radius:15px !important; box-shadow:0 15px 38px rgba(6,26,50,.16); }
body.app-tela-capacitacao .selo-status-acesso,
body.app-tela-capacitacao .selo-status { border-radius:999px !important; }
body.app-tela-capacitacao .botao-acessar { border-radius:9px !important; box-shadow:0 8px 20px rgba(145,85,30,.15); }

/* Visualização de documentos antes da impressão */
body.app-documento-impressao { min-height:100vh; padding:0 16px 60px; color:#283b4d; background:radial-gradient(circle at 85% 0,rgba(51,134,204,.11),transparent 24rem),#edf3f7 !important; }
body.app-documento-impressao .barra-acoes { position:sticky; z-index:20; top:12px; max-width:850px !important; min-height:58px; margin:12px auto 18px !important; padding:9px 12px !important; gap:12px; border:1px solid rgba(0,45,114,.1); border-radius:13px; background:rgba(255,255,255,.92); box-shadow:0 10px 30px rgba(21,49,78,.1); backdrop-filter:blur(14px); }
body.app-documento-impressao .barra-acoes a { padding:8px 10px; color:#1768aa !important; font-size:11px !important; font-weight:750; text-decoration:none; border-radius:8px; }
body.app-documento-impressao .barra-acoes a:hover { background:#edf5fb; }
body.app-documento-impressao .barra-acoes form { gap:8px; }
body.app-documento-impressao .barra-acoes input { border-color:#cddae5 !important; border-radius:7px !important; }
body.app-documento-impressao .barra-acoes button { min-height:36px; margin:0 !important; padding:8px 14px !important; border-radius:8px !important; }
body.app-documento-impressao .botao-imprimir { color:#fff !important; background:linear-gradient(120deg,#002d72,#176ca8) !important; box-shadow:0 7px 18px rgba(0,45,114,.18); }
body.app-documento-impressao .documento { max-width:794px !important; margin:0 auto !important; padding:clamp(30px,6vw,58px) !important; border:1px solid rgba(0,45,114,.07); border-radius:4px !important; background:#fff; box-shadow:0 20px 55px rgba(21,49,78,.12) !important; }
body.app-documento-impressao .documento h1 { color:#143f64 !important; letter-spacing:.045em; }
body.app-documento-impressao .documento img { object-fit:contain; }

@media print {
    body.app-documento-impressao { padding:0 !important; background:#fff !important; }
    body.app-documento-impressao .barra-acoes { display:none !important; }
    body.app-documento-impressao .documento { width:100% !important; max-width:none !important; margin:0 !important; padding:0 !important; border:0 !important; box-shadow:none !important; }
}

@media (max-width: 900px) {
    body.app-com-sidebar { padding-left:0; padding-top:58px; }
    body.app-menu-aberto { overflow:hidden; }
    .app-sidebar { width:min(292px,86vw); max-height:100dvh; transform:translateX(-105%); transition:transform 220ms ease; }
    .app-sidebar-nav { padding-bottom:28px; }
    body.app-menu-aberto .app-sidebar { transform:translateX(0); }
    .app-sidebar-fechar { display:block; }
    .app-menu-mobile { position:fixed; z-index:950; top:10px; left:12px; display:flex; align-items:center; gap:7px; min-height:38px; padding:8px 13px; color:#fff; font-size:12px; font-weight:750; background:#06264b; border:1px solid rgba(255,255,255,.15); border-radius:10px; box-shadow:0 7px 20px rgba(0,29,74,.22); }
    .app-menu-mobile span:first-child { font-size:17px; line-height:1; }
    .app-sidebar-overlay { position:fixed; z-index:990; inset:0; display:block; pointer-events:none; opacity:0; background:rgba(1,12,27,.58); backdrop-filter:blur(3px); transition:opacity 220ms ease; }
    body.app-menu-aberto .app-sidebar-overlay { pointer-events:auto; opacity:1; }
    body.app-com-sidebar > header { margin-top:-58px; padding-left:88px !important; }
    body.app-tela-operacional > main { padding:22px 14px 48px !important; }
    body.app-tela-operacional .cartao { padding:18px !important; border-radius:14px !important; }
    .matricula-progresso { padding:14px 8px; }
    .matricula-passo { flex-direction:column; gap:5px; text-align:center; }
    .matricula-passo-numero { width:36px; height:36px; flex-basis:36px; }
    .matricula-progresso::before { top:32px; }
    .matricula-passo small { display:none; }
    .turma-atalhos { margin-bottom:18px; justify-content:flex-start; }
    .turma-atalhos a { flex:0 0 auto; }
    .financeiro-atalhos { margin-bottom:18px; justify-content:flex-start; }
    .financeiro-atalhos a { flex:0 0 auto; }
    .comunicacao-atalhos { margin-bottom:18px; }
    .configuracao-atalhos { margin-bottom:18px; overflow-x:auto; }
    .configuracao-atalhos a { flex:0 0 auto; }
    .capacitacao-atalhos { margin-bottom:18px; }
    .capacitacao-atalhos a { flex:0 0 auto; }
    body.app-documento-impressao { padding-inline:8px; }
    body.app-documento-impressao .barra-acoes { position:static; flex-wrap:wrap; }
    body.app-documento-impressao .barra-acoes form { width:100%; flex-wrap:wrap; }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Design System v1 — painel principal */
body.painel-moderno {
    --app-background: #eef3f8;
    background:
        radial-gradient(circle at 92% 4%, rgba(51, 134, 204, 0.13), transparent 28rem),
        linear-gradient(180deg, #f8fafc 0, var(--app-background) 34rem) !important;
}

body.painel-moderno > header {
    min-height: 72px;
    padding: 14px clamp(18px, 4vw, 44px) !important;
    background: linear-gradient(118deg, #001d4a 0%, var(--app-primary) 58%, #07569a 100%) !important;
    box-shadow: 0 10px 30px rgba(0, 29, 74, 0.2);
}

body.painel-moderno > main {
    max-width: 1180px !important;
    padding: 10px 24px 64px !important;
}

.painel-hero {
    position: relative;
    min-height: 176px;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: clamp(24px, 4vw, 40px) !important;
    border: 0 !important;
    border-radius: 20px !important;
    color: #fff;
    background: linear-gradient(125deg, #002d72 0%, #075da5 64%, #3386cc 100%) !important;
    box-shadow: 0 20px 48px rgba(0, 45, 114, 0.22) !important;
}

.painel-hero h2 { margin: 6px 0; font-size: clamp(24px, 4vw, 36px); letter-spacing: -0.035em; }
.painel-hero p { margin: 0; opacity: .82; font-size: 14px; }
.painel-saudacao { font-size: 11px; font-weight: 800; letter-spacing: .18em; color: #a8dafc; }
.painel-hero-orbe { position:absolute; width:230px; height:230px; right:-44px; top:-68px; border-radius:50%; border:38px solid rgba(255,255,255,.08); box-shadow:0 0 0 28px rgba(255,255,255,.035); }

.painel-indicadores { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px; margin:20px 0 30px; }
.painel-indicador { position:relative; min-height:126px; padding:20px; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; border:1px solid rgba(0,45,114,.07); border-radius:16px; background:rgba(255,255,255,.9); box-shadow:0 10px 32px rgba(21,49,78,.08); backdrop-filter:blur(12px); }
.painel-indicador strong { color:#102a43; font-size:30px; line-height:1; letter-spacing:-.04em; }
.painel-indicador > span:last-child { margin-top:7px; color:var(--app-muted); font-size:12px; font-weight:600; }
.painel-indicador-icone { position:absolute; top:18px; right:18px; width:12px; height:12px; border-radius:50%; background:#3386cc; box-shadow:0 0 0 7px rgba(51,134,204,.12); }
.painel-indicador.tom-verde .painel-indicador-icone { background:#2f8f57; box-shadow:0 0 0 7px rgba(47,143,87,.12); }
.painel-indicador.tom-dourado .painel-indicador-icone { background:#baa320; box-shadow:0 0 0 7px rgba(186,163,32,.13); }
.painel-indicador.tom-vermelho .painel-indicador-icone { background:#b23b3b; box-shadow:0 0 0 7px rgba(178,59,59,.12); }
.painel-indicador-icone { animation:painel-pulso 4.2s ease-in-out infinite; }
.painel-indicador:nth-child(2) .painel-indicador-icone { animation-delay:.7s; }
.painel-indicador:nth-child(3) .painel-indicador-icone { animation-delay:1.4s; }
.painel-indicador:nth-child(4) .painel-indicador-icone { animation-delay:2.1s; }
@keyframes painel-pulso {
    0%,70%,100% { transform:scale(1); filter:brightness(1); opacity:.88; }
    82% { transform:scale(1.22); filter:brightness(1.2); opacity:1; }
    90% { transform:scale(1.05); filter:brightness(1.08); opacity:.95; }
}
@media (prefers-reduced-motion:reduce) {
    .painel-indicador-icone { animation:none; }
}

body.painel-moderno .titulo-secao { margin:34px 0 14px !important; color:#183b5b !important; font-size:12px !important; letter-spacing:.12em !important; }
body.painel-moderno .grade-acoes { grid-template-columns:repeat(auto-fit,minmax(245px,1fr)) !important; gap:16px !important; }
body.painel-moderno .acao { position:relative; min-height:132px; padding:22px !important; overflow:hidden; border:1px solid rgba(0,45,114,.08) !important; border-radius:16px !important; background:rgba(255,255,255,.94) !important; box-shadow:0 8px 26px rgba(21,49,78,.07); }
body.painel-moderno .acao::after { content:"→"; position:absolute; right:20px; bottom:17px; color:#3386cc; font-size:19px; font-weight:800; transition:transform 180ms ease; }
body.painel-moderno .acao strong { padding-right:28px; font-size:16px !important; }
body.painel-moderno .acao span { display:block; max-width:88%; line-height:1.55; }
body.painel-moderno .acao:hover { transform:translateY(-4px); border-color:rgba(51,134,204,.45) !important; box-shadow:0 16px 36px rgba(21,49,78,.13); }
body.painel-moderno .acao:hover::after { transform:translateX(4px); }

@media (max-width: 720px) {
    body.painel-moderno > main { padding-top:6px !important; }
    .painel-hero { min-height:158px; border-radius:16px !important; }
    .painel-hero-orbe { right:-110px; }
    .painel-indicadores { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
    .painel-indicador { min-height:112px; padding:16px; }
    .painel-indicador strong { font-size:26px; }
}