/* =====================================================================
   Estudos Contábeis — folha de estilos principal
   Tokens de cor em :root, tema escuro automático ou forçado (data-tema)
   ===================================================================== */
:root {
  --fundo: #f4f6f9;
  --superficie: #ffffff;
  --superficie-2: #f8fafc;
  --borda: #e3e8ef;
  --borda-forte: #cbd3df;
  --texto: #1b2333;
  --texto-2: #4a5568;
  --texto-3: #718096;
  --primaria: #1f5fd6;
  --primaria-hover: #174bb0;
  --primaria-suave: #e8f0fe;
  --sucesso: #15803d;
  --sucesso-suave: #e6f6ec;
  --aviso: #b45309;
  --aviso-suave: #fdf3e2;
  --perigo: #c2332b;
  --perigo-suave: #fdeceb;
  --cinza-suave: #eef1f5;
  --nivel-verde: #1f9d55;
  --nivel-amarelo: #d69e2e;
  --nivel-vermelho: #d64545;
  --nivel-cinza: #a0aec0;
  --sombra: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --sombra-alta: 0 12px 32px rgba(16, 24, 40, .14);
  --raio: 10px;
  --raio-p: 6px;
  --fonte: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fonte-leitura: "Georgia", "Iowan Old Style", "Times New Roman", serif;
  --largura-menu: 248px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fundo: #0f141c; --superficie: #171e29; --superficie-2: #1c2431; --borda: #273142; --borda-forte: #34405a;
    --texto: #e6ebf2; --texto-2: #b3bdcc; --texto-3: #8a96a8;
    --primaria: #5b8ff9; --primaria-hover: #79a3fb; --primaria-suave: #1b2b4a;
    --sucesso: #4ade80; --sucesso-suave: #14301f; --aviso: #f6ad55; --aviso-suave: #3a2a12;
    --perigo: #f87171; --perigo-suave: #3b1a1a; --cinza-suave: #222b38;
    --sombra: 0 1px 2px rgba(0,0,0,.4); --sombra-alta: 0 12px 32px rgba(0,0,0,.5);
    color-scheme: dark;
  }
}
:root[data-tema="escuro"] {
  --fundo: #0f141c; --superficie: #171e29; --superficie-2: #1c2431; --borda: #273142; --borda-forte: #34405a;
  --texto: #e6ebf2; --texto-2: #b3bdcc; --texto-3: #8a96a8;
  --primaria: #5b8ff9; --primaria-hover: #79a3fb; --primaria-suave: #1b2b4a;
  --sucesso: #4ade80; --sucesso-suave: #14301f; --aviso: #f6ad55; --aviso-suave: #3a2a12;
  --perigo: #f87171; --perigo-suave: #3b1a1a; --cinza-suave: #222b38;
  --sombra: 0 1px 2px rgba(0,0,0,.4); --sombra-alta: 0 12px 32px rgba(0,0,0,.5);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--fonte); font-size: 15px; line-height: 1.55; color: var(--texto); background: var(--fundo); }
a { color: var(--primaria); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5em; font-weight: 650; }
h1 { font-size: 1.55rem; } h2 { font-size: 1.2rem; } h3 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
small, .pequeno { font-size: .85rem; }
.muted { color: var(--texto-3); }
.texto-2 { color: var(--texto-2); }
hr { border: 0; border-top: 1px solid var(--borda); margin: 20px 0; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--primaria) 55%, transparent); outline-offset: 2px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------ Layout */
.app { display: flex; min-height: 100vh; }
.menu-lateral { width: var(--largura-menu); background: var(--superficie); border-right: 1px solid var(--borda);
  position: fixed; inset: 0 auto 0 0; display: flex; flex-direction: column; z-index: 40; transition: transform .2s ease; }
.menu-lateral .marca { padding: 18px 20px; font-weight: 700; font-size: 1.05rem; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--borda); }
.marca-icone { width: 30px; height: 30px; border-radius: 8px; background: var(--primaria); color: #fff; display: grid; place-items: center; font-size: .85rem; font-weight: 800; flex-shrink: 0; }
.menu-lateral nav { padding: 10px; overflow-y: auto; flex: 1; }
.menu-grupo { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3); padding: 14px 12px 6px; }
.menu-lateral nav a { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--raio-p); color: var(--texto-2); font-weight: 500; }
.menu-lateral nav a:hover { background: var(--cinza-suave); color: var(--texto); text-decoration: none; }
.menu-lateral nav a.ativo { background: var(--primaria-suave); color: var(--primaria); }
.menu-lateral nav a .contador { margin-left: auto; background: var(--perigo); color: #fff; font-size: .72rem; border-radius: 99px; padding: 0 7px; }
.menu-lateral .rodape-menu { padding: 12px; border-top: 1px solid var(--borda); font-size: .88rem; }
.icone { width: 18px; height: 18px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.conteudo { flex: 1; margin-left: var(--largura-menu); min-width: 0; }
.topo { display: flex; align-items: center; gap: 12px; padding: 12px 28px; background: var(--superficie); border-bottom: 1px solid var(--borda); position: sticky; top: 0; z-index: 30; }
.topo .titulo-pagina { font-weight: 600; font-size: 1rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.botao-menu { display: none; background: none; border: 0; color: var(--texto); padding: 6px; cursor: pointer; }
.pagina { padding: 24px 28px 60px; max-width: 1280px; }
.pagina-estreita { max-width: 860px; }
.cabecalho-pagina { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.cabecalho-pagina p { margin: 4px 0 0; color: var(--texto-2); }
.fundo-menu { display: none; }

@media (max-width: 900px) {
  .menu-lateral { transform: translateX(-100%); box-shadow: var(--sombra-alta); }
  body.menu-aberto .menu-lateral { transform: none; }
  body.menu-aberto .fundo-menu { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 35; }
  .conteudo { margin-left: 0; }
  .botao-menu { display: inline-flex; }
  .topo { padding: 10px 16px; }
  .pagina { padding: 18px 16px 60px; }
}

/* ------------------------------------------------------------ Componentes */
.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 20px; box-shadow: var(--sombra); }
.cartao + .cartao { margin-top: 16px; }
.cartao-titulo { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.cartao-titulo h2, .cartao-titulo h3 { margin: 0; }
.grade { display: grid; gap: 16px; }
.grade-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grade-auto { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
@media (max-width: 1100px) { .grade-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grade-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grade-2, .grade-3, .grade-4 { grid-template-columns: 1fr; } }
.espaco { height: 16px; }
.linha-flex { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.entre { justify-content: space-between; }
.ml-auto { margin-left: auto; }

.indicador { padding: 16px 18px; }
.indicador .rotulo { font-size: .8rem; color: var(--texto-3); text-transform: uppercase; letter-spacing: .04em; }
.indicador .valor { font-size: 1.7rem; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }
.indicador .detalhe { font-size: .85rem; color: var(--texto-2); }

.botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border-radius: var(--raio-p);
  border: 1px solid var(--borda-forte); background: var(--superficie); color: var(--texto); font: inherit; font-weight: 550; cursor: pointer;
  transition: background .15s, border-color .15s, transform .05s; line-height: 1.2; text-decoration: none !important; white-space: nowrap; }
.botao:hover { background: var(--cinza-suave); }
.botao:active { transform: translateY(1px); }
.botao.primario { background: var(--primaria); border-color: var(--primaria); color: #fff; }
.botao.primario:hover { background: var(--primaria-hover); }
.botao.perigo { color: var(--perigo); border-color: color-mix(in srgb, var(--perigo) 40%, var(--borda)); }
.botao.perigo:hover { background: var(--perigo-suave); }
.botao.sucesso { background: var(--sucesso); border-color: var(--sucesso); color: #fff; }
.botao.fantasma { border-color: transparent; background: transparent; }
.botao.pequeno { padding: 5px 10px; font-size: .85rem; }
.botao.grande { padding: 12px 22px; font-size: 1rem; }
.botao.bloco { width: 100%; }
.botao[disabled], .botao.desativado { opacity: .55; pointer-events: none; }

.etiqueta { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 99px; font-size: .76rem; font-weight: 600;
  background: var(--cinza-suave); color: var(--texto-2); white-space: nowrap; }
.etiqueta.azul { background: var(--primaria-suave); color: var(--primaria); }
.etiqueta.verde { background: var(--sucesso-suave); color: var(--sucesso); }
.etiqueta.amarelo { background: var(--aviso-suave); color: var(--aviso); }
.etiqueta.vermelho { background: var(--perigo-suave); color: var(--perigo); }

.alerta { padding: 12px 16px; border-radius: var(--raio-p); margin-bottom: 14px; border: 1px solid; font-size: .93rem; }
.alerta.sucesso { background: var(--sucesso-suave); border-color: color-mix(in srgb, var(--sucesso) 30%, transparent); color: var(--sucesso); }
.alerta.erro { background: var(--perigo-suave); border-color: color-mix(in srgb, var(--perigo) 30%, transparent); color: var(--perigo); }
.alerta.aviso { background: var(--aviso-suave); border-color: color-mix(in srgb, var(--aviso) 30%, transparent); color: var(--aviso); }
.alerta.info { background: var(--primaria-suave); border-color: color-mix(in srgb, var(--primaria) 25%, transparent); color: var(--primaria); }
.alerta strong { display: block; margin-bottom: 2px; }

/* Formulários */
.campo { margin-bottom: 16px; }
.campo label, .rotulo-campo { display: block; font-weight: 550; margin-bottom: 6px; font-size: .92rem; }
.campo .ajuda { font-size: .82rem; color: var(--texto-3); margin-top: 4px; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=search], input[type=url], select, textarea {
  width: 100%; padding: 9px 12px; border: 1px solid var(--borda-forte); border-radius: var(--raio-p); background: var(--superficie);
  color: var(--texto); font: inherit; transition: border-color .15s, box-shadow .15s; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primaria); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primaria) 20%, transparent); }
textarea { min-height: 110px; resize: vertical; }
select[multiple] { min-height: 130px; }
.checkbox { display: flex; align-items: flex-start; gap: 8px; font-weight: 400 !important; cursor: pointer; }
.checkbox input { margin-top: 4px; }
.campos-linha { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 14px; }
.input-codigo { font-size: 1.8rem !important; letter-spacing: .5em; text-align: center; font-variant-numeric: tabular-nums; }

/* Tabelas */
.tabela-wrap { overflow-x: auto; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); }
table.tabela { width: 100%; border-collapse: collapse; font-size: .91rem; }
.tabela th, .tabela td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--borda); vertical-align: top; }
.tabela th { font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-3); background: var(--superficie-2); font-weight: 600; white-space: nowrap; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tr:hover td { background: var(--superficie-2); }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; }

.paginacao { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 16px; align-items: center; }
.paginacao a, .paginacao span { padding: 5px 11px; border: 1px solid var(--borda); border-radius: var(--raio-p); background: var(--superficie); font-size: .88rem; }
.paginacao .atual { background: var(--primaria); color: #fff; border-color: var(--primaria); }

.barra { height: 8px; background: var(--cinza-suave); border-radius: 99px; overflow: hidden; }
.barra > span { display: block; height: 100%; background: var(--primaria); border-radius: 99px; transition: width .4s ease; }
.barra.verde > span { background: var(--nivel-verde); } .barra.amarelo > span { background: var(--nivel-amarelo); }
.barra.vermelho > span { background: var(--nivel-vermelho); } .barra.cinza > span { background: var(--nivel-cinza); }

.lista-simples { list-style: none; margin: 0; padding: 0; }
.lista-simples li { padding: 10px 0; border-bottom: 1px solid var(--borda); }
.lista-simples li:last-child { border-bottom: 0; }
.vazio { text-align: center; padding: 36px 16px; color: var(--texto-3); }
.vazio .icone { width: 36px; height: 36px; margin-bottom: 8px; }

.filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 16px; }
.filtros .campo { margin: 0; min-width: 150px; flex: 1; }
.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--borda); margin-bottom: 18px; overflow-x: auto; }
.abas a { padding: 9px 14px; color: var(--texto-2); border-bottom: 2px solid transparent; font-weight: 550; white-space: nowrap; }
.abas a.ativo { color: var(--primaria); border-color: var(--primaria); }
.abas a:hover { text-decoration: none; color: var(--texto); }

/* Mapa de conhecimento */
.mapa-disciplina { margin-bottom: 18px; }
.mapa-celulas { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.celula { border-radius: var(--raio-p); padding: 10px 12px; border: 1px solid var(--borda); background: var(--superficie); border-left: 5px solid var(--nivel-cinza); font-size: .87rem; }
.celula.verde { border-left-color: var(--nivel-verde); } .celula.amarelo { border-left-color: var(--nivel-amarelo); }
.celula.vermelho { border-left-color: var(--nivel-vermelho); }
.celula strong { display: block; font-weight: 600; margin-bottom: 2px; }
.legenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: .84rem; color: var(--texto-2); }
.legenda i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }

/* Gráficos SVG */
.grafico { width: 100%; height: auto; display: block; }
.grafico .eixo { stroke: var(--borda); stroke-width: 1; }
.grafico .linha { fill: none; stroke: var(--primaria); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.grafico .area { fill: color-mix(in srgb, var(--primaria) 14%, transparent); }
.grafico .ponto { fill: var(--superficie); stroke: var(--primaria); stroke-width: 2; }
.grafico text { fill: var(--texto-3); font-size: 11px; font-family: var(--fonte); }
.barras-h .item { display: grid; grid-template-columns: minmax(110px, 38%) 1fr 54px; gap: 10px; align-items: center; padding: 6px 0; font-size: .9rem; }
.barras-h .item .nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barras-h .item .v { text-align: right; font-variant-numeric: tabular-nums; color: var(--texto-2); }

/* ------------------------------------------------------------ Questões */
.questao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 24px; }
.questao-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; align-items: center; }
.questao-texto-apoio { background: var(--superficie-2); border: 1px solid var(--borda); border-radius: var(--raio-p); padding: 14px 16px; margin-bottom: 16px; max-height: 420px; overflow: auto; font-size: .95rem; }
.questao-enunciado { font-family: var(--fonte-leitura); font-size: 1.08rem; line-height: 1.7; margin-bottom: 18px; white-space: normal; overflow-wrap: anywhere; }
.questao-enunciado pre, .tabela-questao { font-family: ui-monospace, Consolas, monospace; font-size: .86rem; background: var(--superficie-2); padding: 10px; border-radius: 6px; overflow-x: auto; white-space: pre; line-height: 1.4; }
.questao-midia img { max-width: 100%; border: 1px solid var(--borda); border-radius: var(--raio-p); margin: 6px 0 14px; background: #fff; }
.alternativas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.alternativa { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--borda); border-radius: var(--raio-p);
  cursor: pointer; transition: border-color .12s, background .12s; background: var(--superficie); width: 100%; text-align: left; font: inherit; color: inherit; }
.alternativa:hover { border-color: var(--borda-forte); background: var(--superficie-2); }
.alternativa .letra { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--borda-forte); display: grid; place-items: center; font-weight: 700; flex-shrink: 0; font-size: .9rem; }
.alternativa .txt { padding-top: 4px; font-family: var(--fonte-leitura); font-size: 1.02rem; line-height: 1.6; overflow-wrap: anywhere; }
.alternativa.selecionada { border-color: var(--primaria); background: var(--primaria-suave); }
.alternativa.selecionada .letra { background: var(--primaria); border-color: var(--primaria); color: #fff; }
.alternativa.correta { border-color: var(--sucesso); background: var(--sucesso-suave); }
.alternativa.correta .letra { background: var(--sucesso); border-color: var(--sucesso); color: #fff; }
.alternativa.errada { border-color: var(--perigo); background: var(--perigo-suave); }
.alternativa.errada .letra { background: var(--perigo); border-color: var(--perigo); color: #fff; }
.alternativa.riscada .txt { text-decoration: line-through; opacity: .5; }
.alternativa[disabled] { cursor: default; }
.ce-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ce-botoes .alternativa { justify-content: center; font-weight: 650; }
.feedback { margin-top: 16px; padding: 14px 16px; border-radius: var(--raio-p); }
.feedback.ok { background: var(--sucesso-suave); color: var(--sucesso); }
.feedback.nok { background: var(--perigo-suave); color: var(--perigo); }
.aviso-desatualizada { border-left: 4px solid var(--aviso); background: var(--aviso-suave); padding: 12px 14px; border-radius: 6px; margin-bottom: 14px; font-size: .92rem; }
.comentario { border: 1px solid var(--borda); border-radius: var(--raio-p); padding: 14px; margin-top: 12px; background: var(--superficie-2); }
.comentario .tipo { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.comentario.ia .tipo { color: var(--aviso); }

/* Modo resolução (foco na leitura) */
.resolucao { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; align-items: start; }
.painel-navegacao { position: sticky; top: 76px; }
.mapa-questoes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.mapa-questoes button { aspect-ratio: 1; border: 1px solid var(--borda-forte); background: var(--superficie); border-radius: 6px; font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; color: var(--texto-2); position: relative; padding: 0; }
.mapa-questoes button.respondida { background: var(--primaria-suave); border-color: var(--primaria); color: var(--primaria); }
.mapa-questoes button.atual { outline: 2px solid var(--primaria); outline-offset: 1px; }
.mapa-questoes button.marcada::after { content: ""; position: absolute; top: 2px; right: 2px; width: 7px; height: 7px; border-radius: 50%; background: var(--aviso); }
.cronometro { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.cronometro.alerta-tempo { color: var(--perigo); }
.status-salvamento { font-size: .8rem; color: var(--texto-3); min-height: 1.2em; }
.navegacao-questao { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
@media (max-width: 1000px) {
  .resolucao { grid-template-columns: 1fr; }
  .painel-navegacao { position: static; }
  .mapa-questoes { grid-template-columns: repeat(10, 1fr); }
}
@media (max-width: 520px) { .mapa-questoes { grid-template-columns: repeat(7, 1fr); } .questao { padding: 16px; } }

/* Trilhas */
.etapas { list-style: none; margin: 0; padding: 0; counter-reset: etapa; }
.etapa { position: relative; padding: 14px 16px 14px 56px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); margin-bottom: 10px; }
.etapa::before { counter-increment: etapa; content: counter(etapa); position: absolute; left: 16px; top: 14px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--cinza-suave); display: grid; place-items: center; font-weight: 700; font-size: .85rem; color: var(--texto-2); }
.etapa.concluida::before { background: var(--sucesso); color: #fff; content: "✓"; }
.etapa.em_andamento::before { background: var(--primaria); color: #fff; }
.etapa.pulada { opacity: .6; }

/* Público (login) */
.publico { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px;
  background: radial-gradient(1200px 500px at 10% -10%, color-mix(in srgb, var(--primaria) 14%, transparent), transparent), var(--fundo); }
.caixa-auth { width: 100%; max-width: 420px; }
.caixa-auth .cartao { padding: 30px; }
.caixa-auth .marca { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.1rem; justify-content: center; margin-bottom: 22px; }
.caixa-auth h1 { font-size: 1.3rem; text-align: center; }
.caixa-auth .sub { text-align: center; color: var(--texto-2); margin-bottom: 22px; font-size: .93rem; }
.links-auth { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 16px; font-size: .9rem; }

/* Diversos */
.lado-a-lado { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.lado-a-lado iframe { width: 100%; height: 78vh; border: 1px solid var(--borda); border-radius: var(--raio); background: #fff; }
@media (max-width: 1100px) { .lado-a-lado { grid-template-columns: 1fr; } .lado-a-lado iframe { height: 60vh; } }
.codigo-bloco { font-family: ui-monospace, Consolas, monospace; font-size: .82rem; background: var(--superficie-2); border: 1px solid var(--borda); border-radius: 6px; padding: 10px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 360px; overflow: auto; }
.carregando { opacity: .6; pointer-events: none; }
.fade-in { animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
details > summary { cursor: pointer; font-weight: 550; }
.tema-alternar { background: none; border: 1px solid var(--borda); border-radius: var(--raio-p); color: var(--texto-2); padding: 6px 8px; cursor: pointer; display: inline-flex; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media print { .menu-lateral, .topo, .botao { display: none !important; } .conteudo { margin: 0; } }
.grade > .cartao + .cartao, .grade > * + .cartao { margin-top: 0; }