/* Mapa das Milhas, Área do aluno. Identidade do site do Bruno: dossiê, calmo, muito espaço.
   Dourado uma vez por tela, no que precisa ser lido primeiro. Celular primeiro (390 px). */

@font-face { font-family: "Archivo"; src: url("fontes/Archivo-wdth.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Archivo"; src: url("fontes/Archivo-wdth-ext.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Playfair Display"; src: url("fontes/PlayfairDisplay-wght.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Playfair Display"; src: url("fontes/PlayfairDisplay-wght-ext.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Playfair Display"; src: url("fontes/PlayfairDisplay-wght-italic.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Playfair Display"; src: url("fontes/PlayfairDisplay-wght-italic-ext.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root, :root[data-tema="escuro"] {
  color-scheme: dark;
  --fundo: #14100C; --fundo-2: #1A1510; --fundo-3: #211A14; --fundo-abas: rgba(20, 16, 12, 0.97);
  --texto: #F3EDE1; --texto-2: #D9D0BF; --sec: #9C9184; --apagado: #6B6155;
  --linha: #4A4136; --linha-fraca: #2C251E; --linha-campo: #4A4136;
  --ouro: #C8A15A;            /* itálico do título */
  --ouro-texto: #C8A15A;      /* número de destaque e texto dourado pequeno */
  --btn-ouro: #C8A15A; --btn-ouro-texto: #14100C; --btn-ouro-hover: #D6B06A;
  --carmim: #9E3B2E; --erro-texto: #E9B9AE;
  --faixa-7: #2A1511; --faixa-30: #241B10; --ambar: #8A6E3C;
  --g-ref: #8A7F70; --g-ano: #6B6155;
  --aviso-fundo: #F3EDE1; --aviso-texto: #14100C; --aviso-erro: #E9B9AE;
  --sombra: rgba(0, 0, 0, 0.4);
  --display: "Playfair Display", Georgia, "Times New Roman", serif;
  --corpo: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --abas: 62px;
}
/* Tema claro: a mesma identidade sobre o creme. Contrastes medidos sobre #F3EDE1:
   texto 16,24; texto-2 10,80; secundário 5,20; dourado de destaque #7D5C25 5,25;
   botão #7D5C25 com texto creme 5,25; erro #8C2F23 7,07; borda de campo #877C6E 3,51.
   #A67C3E (3,23) só no itálico do título, que tem 30 px ou mais. */
:root[data-tema="claro"] {
  color-scheme: light;
  --fundo: #F3EDE1; --fundo-2: #EAE2D3; --fundo-3: #E2D8C6; --fundo-abas: rgba(243, 237, 225, 0.97);
  --texto: #14100C; --texto-2: #3A3229; --sec: #6B6155; --apagado: #8A7F70;
  --linha: #BFB19A; --linha-fraca: #DDD3C2; --linha-campo: #877C6E;
  --ouro: #A67C3E;
  --ouro-texto: #7D5C25;
  --btn-ouro: #7D5C25; --btn-ouro-texto: #F3EDE1; --btn-ouro-hover: #6B4E1F;
  --carmim: #9E3B2E; --erro-texto: #8C2F23;
  --faixa-7: #F3DDD6; --faixa-30: #EFE0C3; --ambar: #A67C3E;
  --g-ref: #8A7F70; --g-ano: #8A7F70;
  --aviso-fundo: #14100C; --aviso-texto: #F3EDE1; --aviso-erro: #8C2F23;
  --sombra: rgba(20, 16, 12, 0.18);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--fundo); color: var(--texto); font-family: var(--corpo); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; min-height: 100vh; overflow-x: hidden; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ouro); outline-offset: 2px; }
[hidden] { display: none !important; }
small { display: block; font-size: 13px; color: var(--sec); margin-top: 4px; line-height: 1.45; }
.carregando { padding: 40px 20px; color: var(--sec); }

/* ---------- tipografia ---------- */
h1, h2 { font-family: var(--display); font-weight: 470; letter-spacing: -0.005em; line-height: 1.12; }
h1 { font-size: clamp(30px, 8vw, 44px); margin-bottom: 14px; }
h1 em { font-style: italic; color: var(--ouro); }
h2 { font-size: 22px; margin-bottom: 10px; }
.titulo-entrada { font-size: clamp(42px, 12vw, 68px); }
.lead { color: var(--texto-2); font-size: 17px; max-width: 34em; margin-bottom: 28px; }
.rotulo { display: block; font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sec); margin-bottom: 8px; }
.sub { color: var(--sec); font-size: 14px; font-weight: 400; }
.nota { color: var(--sec); font-size: 14px; margin: 20px 0; max-width: 40em; }
.ouro { color: var(--ouro-texto); }
.num, .lotes td, .tabela-turma td { font-variant-numeric: tabular-nums lining-nums; }
.h-grupo { font-family: var(--corpo); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sec); margin: 36px 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--linha); }

/* ---------- moldura ---------- */
.casca { min-height: 100vh; padding-bottom: calc(var(--abas) + env(safe-area-inset-bottom)); }
.casca.sem-abas { padding-bottom: 0; }
.lateral { display: none; }
.topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--linha-fraca); min-height: 64px; }
.topo-dir { display: flex; align-items: center; gap: 12px; }
.topo .selo-demo { display: none; }
.selo-demo-celular { font-size: 12px; letter-spacing: 0.06em; color: var(--sec); padding: 8px 20px; border-bottom: 1px solid var(--linha-fraca); background: var(--fundo-2); }
.topo-simples { justify-content: space-between; }
.marca { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; min-height: 44px; }
.marca-sinal { font-family: var(--display); font-size: 22px; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--linha); position: relative; }
.marca-sinal::after { content: ""; position: absolute; left: 5px; right: 5px; top: 52%; height: 1px; background: var(--linha); }
.marca-nome { font-family: var(--display); font-size: 17px; line-height: 1.1; white-space: nowrap; }
.marca-nome small { font-family: var(--corpo); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; margin-top: 3px; }
.selo-demo { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sec); border: 1px solid var(--linha); padding: 6px 10px; white-space: nowrap; }
.tela { padding: 28px 20px 8px; max-width: 760px; margin: 0 auto; }
.tela.estreita { max-width: 620px; }
.tela-cheia { min-height: 100vh; display: flex; flex-direction: column; }
.tela-cheia > main { flex: 1; width: 100%; }

.abas { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); background: var(--fundo-abas); border-top: 1px solid var(--linha); padding-bottom: env(safe-area-inset-bottom); }
.abas a { display: flex; align-items: center; justify-content: center; min-height: var(--abas); font-size: 12.5px; font-stretch: 90%; letter-spacing: 0.02em; color: var(--sec); text-decoration: none; border-top: 2px solid transparent; margin-top: -1px; text-align: center; padding: 0 2px; }
.abas a.ativo { color: var(--texto); border-top-color: var(--texto); font-weight: 600; }

.rodape { text-align: center; padding: 36px 20px 28px; border-top: 1px solid var(--linha-fraca); margin-top: 48px; }
.rodape a { display: inline-flex; align-items: center; min-height: 44px; color: var(--sec); font-size: 14px; text-underline-offset: 4px; }
.rodape a:hover { color: var(--texto); }

.btn-tema { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 0 10px; background: transparent; border: 1px solid var(--linha); color: var(--texto-2); cursor: pointer; font-size: 13px; border-radius: 2px; }
.btn-tema:hover { border-color: var(--sec); color: var(--texto); }
.btn-tema svg { width: 18px; height: 18px; flex: none; }
.btn-tema .tema-rotulo { display: none; }
.lateral-topo { display: grid; justify-items: start; gap: 14px; }
.lateral .btn-tema { padding: 0 12px; }
.lateral .btn-tema .tema-rotulo { display: inline; }

/* ---------- faixas ---------- */
.faixa { display: block; padding: 14px 20px; font-size: 15px; text-decoration: none; border-bottom: 1px solid var(--linha); line-height: 1.45; }
.faixa-7 { background: var(--faixa-7); border-left: 3px solid var(--carmim); }
.faixa-30 { background: var(--faixa-30); border-left: 3px solid var(--ambar); }
.faixa-90 { background: var(--fundo-2); border-left: 3px solid var(--linha); }
.faixa-vencido { background: var(--faixa-7); border-left: 3px solid var(--carmim); }
.faixa-ver { white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; color: var(--texto-2); }
.faixa-leitura { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; justify-content: space-between; background: var(--fundo-3); color: var(--texto-2); padding: 6px 20px; }
.faixa-leitura a { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 3px; }

/* ---------- botões ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 12px 22px; border: 1px solid var(--linha-campo); background: transparent; color: var(--texto); text-decoration: none; cursor: pointer; font-size: 15px; font-weight: 500; letter-spacing: 0.02em; border-radius: 2px; text-align: center; }
.btn-ouro { background: var(--btn-ouro); border-color: var(--btn-ouro); color: var(--btn-ouro-texto); font-weight: 600; }
.btn-ouro:hover { background: var(--btn-ouro-hover); border-color: var(--btn-ouro-hover); }
.btn-linha:hover { border-color: var(--sec); }
.btn-perigo { border-color: var(--carmim); color: var(--erro-texto); }
.btn-pequeno { min-height: 44px; padding: 8px 16px; font-size: 14px; }
.btn-texto { background: none; border: 0; min-height: 44px; padding: 8px 0; color: var(--texto-2); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; font-size: 15px; text-align: left; }
.btn-tirar { background: none; border: 1px solid var(--linha-campo); min-height: 44px; min-width: 64px; padding: 0 12px; color: var(--sec); cursor: pointer; font-size: 14px; }
.link-discreto { display: inline-flex; align-items: center; min-height: 44px; color: var(--sec); font-size: 14px; text-underline-offset: 4px; }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 24px; }
.voltar { margin-bottom: 4px; }

/* ---------- entrada ---------- */
.entrada { padding-top: 32px; }
.botoes-entrada { display: grid; gap: 12px; max-width: 420px; margin: 8px 0 28px; }
.nota-caixa { border: 1px solid var(--linha); padding: 18px 20px; max-width: 520px; color: var(--texto-2); font-size: 15px; display: grid; gap: 10px; }
.links-entrada { display: grid; justify-items: start; margin-top: 20px; }
.primeiro-acesso { margin-top: 28px; max-width: 460px; }
.primeiro-acesso summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--texto-2); text-decoration: underline; text-underline-offset: 4px; }
.h-form { font-size: 22px; }
.codigo { text-transform: uppercase; letter-spacing: 0.2em; }

/* ---------- formulários ---------- */
.form { display: grid; gap: 18px; max-width: 520px; }
.campo { display: grid; gap: 6px; border: 0; }
.campo > span, .campo > legend { font-size: 14px; color: var(--texto-2); }
.campo legend { margin-bottom: 8px; }
input:not([type=checkbox]), select { width: 100%; min-height: 50px; padding: 10px 14px; background: var(--fundo-2); border: 1px solid var(--linha-campo); border-radius: 2px; font-size: 16px; }
input[type=date] { color-scheme: inherit; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--sec) 50%), linear-gradient(135deg, var(--sec) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
input::placeholder { color: var(--apagado); }
.check { display: flex; gap: 12px; align-items: center; min-height: 48px; cursor: pointer; font-size: 15px; }
.check input { width: 22px; height: 22px; flex: none; accent-color: var(--texto); }
.check-caixa { border: 1px solid var(--linha); padding: 8px 14px; }
.check-caixa small { display: inline; margin: 0 0 0 6px; }
.grade-check { display: grid; grid-template-columns: 1fr; gap: 8px; }
.lado-a-lado { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; }
.linha-add { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; margin: 8px 0 14px; }
.previa { border-left: 2px solid var(--linha); padding: 4px 0 4px 16px; display: grid; gap: 6px; font-size: 15px; }
.previa:empty { display: none; }
.previa-erro { color: var(--erro-texto); font-size: 15px; }
.conta { color: var(--texto-2); }
.consumo { list-style: none; display: grid; gap: 2px; font-size: 14px; color: var(--sec); }

/* ---------- assistente ---------- */
.assistente { padding-top: 12px; }
.assistente h1 { margin-top: 18px; }
.acoes-assistente { display: grid; gap: 4px; justify-items: start; margin-top: 28px; max-width: 420px; }
.acoes-assistente .btn { width: 100%; }
.fichas { list-style: none; display: grid; gap: 8px; margin-bottom: 8px; }
.fichas li { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-bottom: 1px solid var(--linha-fraca); padding: 4px 0; }
.lotes-form { display: grid; gap: 14px; margin-bottom: 6px; }
.linha-lote { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; padding-bottom: 14px; border-bottom: 1px solid var(--linha-fraca); }
.linha-lote .btn-tirar { grid-column: 1 / -1; justify-self: start; }
.notas { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; max-width: 460px; }
.nota-btn { min-height: 52px; border: 1px solid var(--linha); background: transparent; cursor: pointer; font-size: 18px; font-variant-numeric: tabular-nums; }
.nota-btn.escolhida { background: var(--texto); color: var(--fundo); border-color: var(--texto); font-weight: 600; }
.notas-legenda { display: flex; justify-content: space-between; max-width: 460px; color: var(--sec); font-size: 13px; margin-top: 8px; }
.resumo { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--linha); border: 1px solid var(--linha); max-width: 480px; }
.resumo div { background: var(--fundo); padding: 16px; }
.resumo dt { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sec); }
.resumo dd { font-family: var(--display); font-size: 28px; font-variant-numeric: lining-nums; }
.barra { display: block; height: 6px; background: var(--fundo-3); border: 1px solid var(--linha-fraca); overflow: hidden; }
.barra > span { display: block; height: 100%; background: var(--texto-2); }
.barra-fina { height: 4px; margin: 6px 0 0; max-width: 460px; }

/* ---------- números ---------- */
.numero-principal, .numero-secundario { display: grid; gap: 2px; margin: 8px 0 28px; }
.numero-principal strong { font-family: var(--display); font-weight: 470; font-size: clamp(40px, 11vw, 60px); line-height: 1.05; font-variant-numeric: lining-nums tabular-nums; }
.numero-secundario strong { font-family: var(--display); font-weight: 470; font-size: clamp(30px, 8vw, 40px); line-height: 1.1; font-variant-numeric: lining-nums tabular-nums; }

/* ---------- carteira ---------- */
.grade-programas { display: grid; gap: 16px; }
.programa { border: 1px solid var(--linha); padding: 20px; display: grid; gap: 12px; align-content: start; }
.programa-topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 12px; }
.programa-topo h2 { margin: 0; font-size: 22px; }
.programa-saldo { font-family: var(--display); font-size: 32px; line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.programa-saldo .sub { font-family: var(--corpo); }
.selo { font-size: 12px; letter-spacing: 0.04em; padding: 4px 10px; border: 1px solid var(--linha); white-space: nowrap; }
.selo-7 { border-color: var(--carmim); color: var(--erro-texto); background: var(--faixa-7); }
.selo-30 { border-color: var(--ambar); color: var(--texto-2); background: var(--faixa-30); }
.selo-90 { color: var(--texto-2); }
.lotes, .tabela-simples { width: 100%; border-collapse: collapse; font-size: 14px; }
.lotes th, .tabela-simples th { text-align: left; font-weight: 500; color: var(--sec); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 0; border-bottom: 1px solid var(--linha); }
.lotes td, .tabela-simples td { padding: 8px 0; border-bottom: 1px solid var(--linha-fraca); }
.lotes .num, .tabela-simples .num { text-align: right; }
.linha-link { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 48px; text-decoration: none; border-top: 1px solid var(--linha); padding-top: 10px; font-size: 14px; }
.linha-link > span:first-child { color: var(--sec); }
.linha-link > span:last-child { text-align: right; }
.linha-link .sub { display: block; font-size: 12px; }
.atalhos { display: grid; gap: 12px; margin-top: 28px; }
.atalho, .escolha { display: grid; gap: 2px; padding: 16px 18px; border: 1px solid var(--linha); text-decoration: none; min-height: 64px; }
.atalho span, .escolha span { color: var(--sec); font-size: 14px; }
.atalho:hover, .escolha:hover { border-color: var(--sec); }
.escolhas { display: grid; gap: 10px; }
.vazio { color: var(--sec); padding: 24px 0; display: grid; gap: 16px; justify-items: start; }

/* ---------- validades ---------- */
.linha-tempo { list-style: none; position: relative; padding-left: 22px; display: grid; gap: 4px; }
.linha-tempo::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px; background: var(--linha); }
.marco { position: relative; display: grid; grid-template-columns: 100px 1fr; gap: 4px 14px; padding: 12px 0; border-bottom: 1px solid var(--linha-fraca); align-items: baseline; }
.marco::before { content: ""; position: absolute; left: -21px; top: 19px; width: 9px; height: 9px; border-radius: 50%; background: var(--fundo); border: 1px solid var(--sec); }
.marco-7::before, .marco-vencido::before { background: var(--carmim); border-color: var(--carmim); }
.marco-30::before { background: var(--ambar); border-color: var(--ambar); }
.marco-90::before { border-color: var(--texto-2); }
.marco-data { font-variant-numeric: tabular-nums; color: var(--texto-2); font-size: 15px; }
.marco-corpo { display: grid; }
.marco .btn { grid-column: 1 / -1; justify-self: start; margin-top: 6px; }

/* ---------- lançamentos ---------- */
.lancs { list-style: none; display: grid; }
.lanc { padding: 16px 0; border-bottom: 1px solid var(--linha-fraca); display: grid; gap: 4px; }
.lanc-topo { display: flex; gap: 12px; font-size: 13px; color: var(--sec); }
.lanc-data { font-variant-numeric: tabular-nums; }
.lanc-meio { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.lanc-pontos { font-variant-numeric: tabular-nums; white-space: nowrap; }
.lanc-menos { color: var(--sec); }
.btn-apagar { justify-self: start; font-size: 14px; color: var(--sec); }

/* ---------- valor de cada mil ---------- */
.fichas-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.ficha { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 14px; border: 1px solid var(--linha); text-decoration: none; font-size: 14px; color: var(--texto-2); }
.ficha.ativa { background: var(--texto); color: var(--fundo); border-color: var(--texto); font-weight: 600; }
.duas-medias { display: grid; gap: 0; }
.duas-medias .numero-principal { margin-bottom: 20px; }
.duas-medias .sub { font-size: 13px; }
.referencia { border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); padding: 16px 0; margin-bottom: 8px; color: var(--texto-2); }
.bloco { margin-top: 40px; }
.bloco h2 { font-size: 22px; }
.legenda { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--sec); margin: 4px 0 12px; }
.legenda li { display: inline-flex; align-items: center; gap: 8px; }
.leg { display: inline-block; width: 22px; height: 0; border-top: 2px solid var(--texto); }
.leg-tudo { border-top: 2px dashed var(--sec); }
.leg-ref { border-top: 2px dotted var(--g-ref); }
.caixa-grafico { width: 100%; overflow: hidden; }
.grafico { display: block; max-width: 100%; height: auto; }
.g-grade { stroke: var(--linha-fraca); stroke-width: 1; }
.g-eixo { fill: var(--sec); font-family: var(--corpo); font-size: 12px; font-variant-numeric: tabular-nums; }
.g-ano { font-size: 11px; fill: var(--g-ano); }
.g-pagando { fill: none; stroke: var(--texto); stroke-width: 2; stroke-linejoin: round; }
.g-tudo { fill: none; stroke: var(--sec); stroke-width: 1.5; stroke-dasharray: 5 4; }
.g-ref { stroke: var(--g-ref); stroke-width: 1.5; stroke-dasharray: 2 4; }
.g-ref-txt { fill: var(--texto-2); }
.g-ponto { fill: var(--texto); }
.g-ponto-tudo { fill: var(--fundo); stroke: var(--sec); stroke-width: 1.2; }

/* ---------- viagem ---------- */
.viagem { border: 1px solid var(--linha); padding: 20px; margin-bottom: 16px; }
.viagem-topo h2 { margin-bottom: 2px; }
.viagem-topo { margin-bottom: 18px; }
.progresso { margin-bottom: 18px; }
.progresso-txt { display: flex; justify-content: space-between; font-size: 14px; color: var(--texto-2); margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.progresso .barra { height: 10px; }
.viagem .numero-principal { margin-bottom: 16px; }
.viagem:not(.viagem-principal) .numero-principal strong { font-size: 32px; }
.contas, .dossie { display: grid; }
.contas div, .dossie div { display: grid; gap: 2px; padding: 12px 0; border-top: 1px solid var(--linha-fraca); }
.contas dt, .dossie dt { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sec); }
.contas dd { font-variant-numeric: tabular-nums; }
.dossie { margin-bottom: 20px; }
.dossie dd { color: var(--texto-2); }

/* ---------- pontos ou dinheiro ---------- */
.resultado { margin-top: 28px; }
.veredito { display: grid; gap: 4px; padding: 20px 0; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); margin-bottom: 20px; }
.veredito strong { font-family: var(--display); font-weight: 470; font-size: clamp(26px, 7vw, 36px); line-height: 1.15; }
.passos { list-style: none; counter-reset: p; display: grid; }
.passos li { counter-increment: p; display: grid; gap: 2px; padding: 12px 0 12px 40px; border-bottom: 1px solid var(--linha-fraca); position: relative; }
.passos li::before { content: counter(p); position: absolute; left: 0; top: 12px; width: 26px; height: 26px; border: 1px solid var(--linha); display: grid; place-items: center; font-size: 13px; color: var(--sec); }
.passos span { color: var(--sec); font-size: 14px; }
.passos strong { font-weight: 500; font-variant-numeric: tabular-nums; }

/* ---------- privacidade ---------- */
.bloco-perigo { border: 1px solid var(--linha); padding: 20px; }
.bloco-perigo p { color: var(--texto-2); margin-bottom: 8px; }

/* ---------- mentor ---------- */
.filtro { display: inline-flex; border: 1px solid var(--linha); margin-bottom: 20px; }
.filtro-op { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; text-decoration: none; font-size: 14px; color: var(--sec); }
.filtro-op.ativo { background: var(--texto); color: var(--fundo); font-weight: 600; }
.tabela-turma { width: 100%; border-collapse: collapse; }
.tabela-turma thead { display: none; }
.tabela-turma tr { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; padding: 16px 0; border-bottom: 1px solid var(--linha); }
.tabela-turma th[scope=row] { grid-column: 1 / -1; text-align: left; font-weight: 400; }
.tabela-turma td { display: grid; align-content: start; font-size: 15px; }
.tabela-turma td::before { content: attr(data-rotulo); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sec); margin-bottom: 2px; }
.tabela-turma small { margin-top: 0; }
.link-aluno { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--display); font-size: 21px; text-underline-offset: 4px; }
.codigo-gerado { font-size: 28px; letter-spacing: 0.24em; font-variant-numeric: tabular-nums; }
.form-linha { max-width: none; }

/* ---------- aviso ---------- */
.aviso { position: fixed; color: var(--aviso-texto); left: 16px; right: 16px; bottom: calc(var(--abas) + 16px + env(safe-area-inset-bottom)); z-index: 40; background: var(--aviso-fundo); padding: 14px 18px; font-size: 15px; max-width: 520px; margin: 0 auto; box-shadow: 0 12px 30px var(--sombra); }
.aviso.erro { background: var(--aviso-erro); }

/* ---------- telas maiores ---------- */
@media (min-width: 600px) {
  .grade-check { grid-template-columns: 1fr 1fr; }
  .notas { grid-template-columns: repeat(11, 1fr); max-width: 620px; }
  .notas-legenda { max-width: 620px; }
  .linha-lote { grid-template-columns: 1fr 1fr auto; }
  .linha-lote .btn-tirar { grid-column: auto; }
  .atalhos { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 720px) {
  .grade-programas { grid-template-columns: 1fr 1fr; }
  .duas-medias { grid-template-columns: 1fr 1fr; gap: 32px; }
  .contas div, .dossie div { grid-template-columns: 220px 1fr; gap: 16px; align-items: baseline; }
  .marco { grid-template-columns: 120px 1fr auto; }
  .marco .btn { grid-column: auto; margin-top: 0; }
  .form-linha { grid-template-columns: 1fr 1.4fr auto; align-items: end; }
}
@media (min-width: 960px) {
  .casca { display: grid; grid-template-columns: 264px 1fr; padding-bottom: 0; }
  .casca.sem-abas { grid-template-columns: 264px 1fr; }
  .abas { display: none; }
  .lateral { display: flex; flex-direction: column; gap: 28px; position: sticky; top: 0; height: 100vh; padding: 26px 22px; border-right: 1px solid var(--linha-fraca); overflow-y: auto; }
  .nav-lateral { display: grid; gap: 2px; }
  .nav-lateral a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; text-decoration: none; color: var(--sec); border-left: 2px solid transparent; font-size: 15px; }
  .nav-lateral a:hover { color: var(--texto); }
  .nav-lateral a.ativo { color: var(--texto); border-left-color: var(--texto); background: var(--fundo-2); }
  .lateral-pe { margin-top: auto; display: grid; gap: 2px; font-size: 14px; color: var(--sec); }
  .topo { justify-content: flex-end; border-bottom: 0; padding: 18px 56px 0; }
  .topo .marca { display: none; }
  .topo .selo-demo { display: inline-block; }
  .so-celular { display: none !important; }
  .selo-demo-celular { display: none; }
  .tela { padding: 24px 56px 8px; max-width: 980px; margin: 0; }
  .tela.estreita { margin: 0 auto; }
  .faixa { padding-left: 56px; padding-right: 56px; }
  .faixa-leitura { padding-left: 56px; padding-right: 56px; }
  .rodape { text-align: left; padding-left: 56px; }
  .tela-cheia .rodape { text-align: center; padding-left: 20px; }
  .tela-cheia .selo-demo-celular { display: block; text-align: center; }
  .topo-simples { justify-content: space-between; padding: 18px 56px; border-bottom: 1px solid var(--linha-fraca); }
  .topo:not(.topo-simples) .btn-tema { display: none; }
  .topo-simples .marca { display: inline-flex; }
  .aviso { bottom: 24px; }
  .entrada { padding-top: 64px; }
  .tabela-turma thead { display: table-header-group; }
  .tabela-turma tr { display: table-row; padding: 0; }
  .tabela-turma th, .tabela-turma td { display: table-cell; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--linha); vertical-align: top; text-align: left; }
  .tabela-turma thead th { font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sec); }
  .tabela-turma td::before { content: none; }
  .tabela-turma .num { text-align: right; }
  .link-aluno { font-size: 19px; }
}