/* ==========================================================================
   Calculadora Nucleo: casca e telas
   Mesma regra do projeto: cor, espaço, raio e tempo vêm de css/tokens.css.
   Medidas estruturais (altura da barra e das abas) ficam como variáveis aqui.
   ========================================================================== */

:root {
  --altura-barra: 56px;
  --altura-abas: 58px;
}
@media (min-width: 960px) {
  :root { --altura-barra: 64px; --altura-abas: 0px; }
}

.app { min-block-size: 100dvh; display: flex; flex-direction: column; }
.app[inert] { user-select: none; }

/* ---- Pular para o conteúdo ---- */
.saltar {
  position: absolute; z-index: var(--z-palette);
  inset-inline-start: var(--s-4); inset-block-start: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pill);
  background: var(--accent-fill); color: var(--on-accent);
  font-weight: 600; text-decoration: none;
  transform: translateY(-200%);
}
.saltar:focus-visible { transform: none; }

/* ---- Barra superior translúcida ---- */
.barra-app {
  position: sticky; inset-block-start: 0; z-index: var(--z-bar);
  padding-block-start: env(safe-area-inset-top);
  border-block-end: 1px solid transparent;
  background: var(--bg);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .barra-app {
    background: var(--glass);
    -webkit-backdrop-filter: saturate(1.6) blur(20px);
    backdrop-filter: saturate(1.6) blur(20px);
  }
}
.barra-app.is-compacta { border-block-end-color: var(--line); }
.barra-app__dentro {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  block-size: var(--altura-barra);
  inline-size: 100%; max-inline-size: 1200px; margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}
.barra-app__marca { display: flex; align-items: center; gap: var(--s-3); min-inline-size: 0; }
.barra-app__titulo {
  font-size: var(--t-callout); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transition: opacity var(--d-base) var(--ease-out);
}
.barra-app.is-compacta .barra-app__titulo { opacity: 1; }
@media (max-width: 959.98px) {
  .barra-app__titulo { display: none; }
  .barra-app.is-compacta .lockup__nome { display: none; }
  .barra-app.is-compacta .barra-app__titulo { display: block; }
}
@media (min-width: 960px) { .barra-app__titulo { display: none; } }
.barra-app__acoes { display: flex; align-items: center; gap: var(--s-1); }
.barra-app__icone {
  display: inline-grid; place-items: center;
  inline-size: 44px; block-size: 44px;
  border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--text-2);
}
@media (hover: hover) { .barra-app__icone:hover { background: var(--surface-2); color: var(--text); } }
.barra-app__icone:active { transform: scale(0.96); }

/* ---- Navegação: segmentado no topo (≥ 960px) ---- */
.nav-topo { display: none; }
@media (min-width: 960px) {
  .nav-topo {
    display: inline-flex; gap: 2px; padding: 3px;
    border: 1px solid var(--line); border-radius: var(--r-pill);
    background: var(--surface-1);
  }
}
.nav-topo__link {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-block-size: 40px; padding-inline: var(--s-4);
  border-radius: var(--r-pill);
  color: var(--text-2); text-decoration: none;
  font-size: var(--t-footnote); font-weight: 600;
}
.nav-topo__link .icono { inline-size: 18px; block-size: 18px; }
.nav-topo__link[aria-current="page"] { background: var(--surface-ativa); color: var(--text); box-shadow: var(--sombra-ativa); }
@media (hover: hover) { .nav-topo__link:hover:not([aria-current]) { color: var(--text); } }

/* ---- Navegação: abas inferiores no celular ---- */
.abas {
  position: fixed; z-index: var(--z-bar);
  inset-inline: 0; inset-block-end: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding-block-end: env(safe-area-inset-bottom);
  padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
  border-block-start: 1px solid var(--line);
  background: var(--bg);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .abas { background: var(--glass); -webkit-backdrop-filter: saturate(1.6) blur(20px); backdrop-filter: saturate(1.6) blur(20px); }
}
.abas__link {
  display: grid; justify-items: center; align-content: center; gap: 2px;
  block-size: var(--altura-abas);
  color: var(--text-2); text-decoration: none;
  font-size: var(--t-caption); font-weight: 500; letter-spacing: 0;
  -webkit-tap-highlight-color: transparent;
}
.abas__link .icono { inline-size: 24px; block-size: 24px; }
.abas__link[aria-current="page"] { color: var(--accent); }
.abas__link:active .icono { transform: scale(0.92); }
@media (min-width: 960px) { .abas { display: none; } }

/* ---- Faixa fixa do modo exemplo ---- */
.banda-ejemplo {
  position: sticky; z-index: var(--z-bar);
  inset-block-start: calc(var(--altura-barra) + env(safe-area-inset-top));
  border-block-end: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
  background: color-mix(in srgb, var(--warn) 14%, var(--bg));
  color: var(--text);
}
.banda-ejemplo__dentro {
  display: flex; align-items: center; gap: var(--s-2) var(--s-3); flex-wrap: wrap;
  max-inline-size: 1200px; margin-inline: auto;
  padding: var(--s-2) var(--gutter);
  font-size: var(--t-footnote); font-weight: 500;
}
.banda-ejemplo__dentro > .icono { color: var(--warn); }
.banda-ejemplo__dentro > span { flex: 1 1 220px; }
.banda-ejemplo__salir { min-block-size: 36px; }
.banda-ejemplo[hidden] { display: none; }

/* ---- Conteúdo e título grande ---- */
.contenido {
  flex: 1;
  inline-size: 100%; max-inline-size: 1200px; margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
  padding-block-end: var(--s-12);
  outline: none;
}
.rodape { padding-block-end: calc(var(--altura-abas) + env(safe-area-inset-bottom)); border-block-start: 1px solid var(--line); }
.rodape__dentro { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-4); max-inline-size: 1200px; margin-inline: auto; padding: var(--s-4) max(var(--gutter), env(safe-area-inset-right)) var(--s-6) max(var(--gutter), env(safe-area-inset-left)); font-size: var(--t-caption); color: var(--text-2); }
.rodape__nome { min-block-size: 44px; padding: 0; border: 0; background: none; color: var(--text); font-size: var(--t-footnote); font-weight: 600; }
.rodape__link { min-block-size: 44px; padding: 0; border: 0; background: none; color: var(--text-2); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.rodape__link:hover { color: var(--text); }
.legal__secao { display: grid; gap: var(--s-1); }
.legal__secao h3 { font-size: var(--t-subhead); font-weight: 600; color: var(--text); }
.legal__secao p { color: var(--text-2); line-height: 1.5; }
.legal__versao { font-size: var(--t-caption); color: var(--text-2); }
.tela__cabecera { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding-block: var(--s-4) var(--s-6); }
.tela__titulo { font-size: var(--t-title1); outline: none; }
@media (min-width: 960px) { .tela__cabecera { padding-block: var(--s-8) var(--s-8); } }

/* transição entre telas (View Transitions) */
/* troca de tela: fade com leve deslocamento (sem deslocamento com movimento reduzido, pois as durações zeram) */
::view-transition-old(root) { animation: tela-sai var(--d-fast) var(--ease-out) both; }
::view-transition-new(root) { animation: tela-entra var(--d-base) var(--ease-out) both; }
@keyframes tela-sai { to { opacity: 0; transform: translateY(-6px); } }
@keyframes tela-entra { from { opacity: 0; transform: translateY(8px); } }

/* ==========================================================================
   Tela Calcular
   ========================================================================== */
.calc { display: grid; gap: var(--s-8); align-items: start; }
@media (min-width: 960px) {
  .calc { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: var(--s-10); }
  .calc__resultados {
    position: sticky;
    inset-block-start: calc(var(--altura-barra) + var(--s-4));
    max-block-size: calc(100dvh - var(--altura-barra) - var(--s-8));
    overflow-y: auto; overscroll-behavior: contain;
    padding-block-end: var(--s-4);
    scrollbar-width: thin;
  }
  .is-ejemplo .calc__resultados { inset-block-start: calc(var(--altura-barra) + var(--s-16)); max-block-size: calc(100dvh - var(--altura-barra) - var(--s-20)); }
}
.calc__entradas { display: grid; gap: var(--s-6); min-inline-size: 0; }

/* moeda */
.moneda { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.moneda__rotulo { font-size: var(--t-footnote); font-weight: 600; color: var(--text-2); }
.moneda__ayuda { flex-basis: 100%; font-size: var(--t-caption); color: var(--text-2); }
.moneda__otra { flex: 0 1 160px; }
.moneda__otra .campo__rotulo { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
.moneda__otra .campo__caixa { min-block-size: 44px; }
.moneda__otra .campo__entrada { block-size: 42px; }

/* grupos com o filete do funil */
.grupos { position: relative; display: grid; gap: var(--s-2); }
.grupos::before {
  content: ""; position: absolute;
  inset-block: var(--s-6); inset-inline-start: 15px;
  inline-size: 1px; background: var(--line-strong);
}
.grupo { position: relative; }
.grupo__cabecera {
  display: flex; align-items: center; gap: var(--s-4);
  inline-size: 100%; min-block-size: 56px;
  padding: var(--s-2) 0;
  border: 0; background: transparent; color: var(--text);
  text-align: start;
}
.grupo__numero {
  position: relative; z-index: 1;
  display: inline-grid; place-items: center; flex: none;
  inline-size: 32px; block-size: 32px;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--bg); color: var(--text-2);
  font-size: var(--t-footnote); font-weight: 600;
}
.grupo__titulo { font-size: var(--t-subhead); font-weight: 600; letter-spacing: var(--tracking-titulo); }
.grupo__conteo { margin-inline-start: auto; font-size: var(--t-footnote); color: var(--text-2); }
.grupo__chevron { color: var(--text-2); transition: transform var(--d-base) var(--ease-out); }
.grupo.is-recolhido .grupo__chevron { transform: rotate(-90deg); }
.grupo__cuerpo { display: grid; gap: var(--s-5); padding: var(--s-2) 0 var(--s-6) calc(32px + var(--s-4)); }
.grupo__cuerpo[hidden] { display: none; }
.grupo__campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--s-4); }
.grupo:has(.campo__entrada:not(:placeholder-shown)) .grupo__numero {
  border-color: var(--accent); color: var(--accent);
}
.subgrupo { display: grid; gap: var(--s-3); justify-items: start; }
.subgrupo > .grupo__campos { justify-self: stretch; }
.subgrupo[hidden] { display: none; }
.subgrupo__rotulo { font-size: var(--t-callout); font-weight: 600; }
.subgrupo__ayuda { margin-block-start: calc(-1 * var(--s-2)); font-size: var(--t-footnote); color: var(--text-2); }
.perfil {
  display: inline-flex; align-items: center; gap: var(--s-2);
  justify-self: start;
  padding: var(--s-1) var(--s-1) var(--s-1) var(--s-3);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  font-size: var(--t-footnote); color: var(--text-2);
}
.perfil .icono { inline-size: 16px; block-size: 16px; }
.perfil__limpiar { min-block-size: 32px; font-size: var(--t-footnote); }
.perfil[hidden] { display: none; }

.calc__acciones {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
  padding-inline-start: calc(32px + var(--s-4));
}
.calc__atajo { font-size: var(--t-caption); color: var(--text-2); }
@media (hover: none) { .calc__atajo { display: none; } }
.calc__nota-ejemplo { display: flex; align-items: center; gap: var(--s-2); flex-basis: 100%; font-size: var(--t-footnote); color: var(--text-2); }
@media (max-width: 599.98px) {
  .calc__acciones { padding-inline-start: 0; }
  .calc__acciones .btn--primario { flex: 1 1 100%; }
}

/* resultado principal */
.calc__resultados { display: grid; gap: var(--s-4); min-inline-size: 0; scroll-margin-block-start: calc(var(--altura-barra) + var(--s-4)); }
.heroi {
  display: grid; gap: var(--s-2);
  padding: var(--s-6);
  border: 1px solid var(--line); border-radius: var(--r-2xl);
  background: var(--surface-1);
}
.heroi__rotulo { font-size: var(--t-footnote); font-weight: 500; color: var(--text-2); letter-spacing: var(--tracking-texto); }
.heroi__linha { min-block-size: 1em; }
.heroi { container-type: inline-size; }
.heroi__valor {
  display: block; white-space: nowrap;
  /* cabe na largura do cartão: cada algarismo ocupa cerca de 0,62 em */
  font-size: min(var(--t-hero-number), calc(100cqi / (var(--heroi-caracteres, 8) * 0.62)));
}
.heroi.is-vacio .heroi__valor { color: var(--text-2); font-size: var(--t-title1); }
.heroi.is-perdida .heroi__valor { color: var(--negative); }
.heroi__tipo { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--t-callout); font-weight: 600; }
.heroi__tipo .icono { inline-size: 18px; block-size: 18px; }
.heroi.is-ganancia .heroi__tipo { color: var(--positive); }
.heroi.is-perdida .heroi__tipo { color: var(--negative); }
.heroi__falta { font-size: var(--t-footnote); color: var(--text-2); }
.heroi__falta:empty { display: none; }
.heroi { position: relative; }
.heroi::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  border: 2px solid var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); opacity: 0;
}
.heroi.is-guardado::after { animation: heroi-guardado var(--d-slow) var(--ease-out) 2 alternate; }
@keyframes heroi-guardado { to { opacity: 1; } }

/* avisos e convite */
.avisos { display: grid; gap: var(--s-2); padding: 0; margin: 0; list-style: none; }
.avisos[hidden] { display: none; }
.aviso {
  display: flex; align-items: flex-start; gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border: 1px solid color-mix(in srgb, var(--warn) 36%, transparent);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--warn) 10%, transparent);
  font-size: var(--t-footnote); font-weight: 500;
}
.aviso .icono { color: var(--warn); inline-size: 18px; block-size: 18px; margin-block-start: 1px; }
.convite {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid color-mix(in srgb, var(--accent) 36%, transparent);
  border-radius: var(--r-lg);
  font-size: var(--t-footnote); font-weight: 500;
}
.convite .icono { color: var(--accent); }
.convite span { flex: 1 1 180px; }
.convite__link { font-weight: 600; }
.convite[hidden] { display: none; }

/* blocos de métricas */
.blocos { display: grid; gap: var(--s-4); }
@media (min-width: 600px) and (max-width: 959.98px) { .blocos { grid-template-columns: 1fr 1fr; align-items: start; } }
.bloco {
  padding: var(--s-4) var(--s-5) var(--s-2);
  border: 1px solid var(--line); border-radius: var(--r-xl);
  background: var(--surface-1);
}
.bloco__titulo {
  margin-block-end: var(--s-1);
  font-size: var(--t-caption); font-weight: 600; color: var(--text-2);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.metricas { display: grid; margin: 0; }
.metrica {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 var(--s-3);
  min-block-size: 48px;
  border-block-start: 1px solid var(--line);
}
.metrica:first-child { border-block-start: 0; }
.metrica__nome { font-size: var(--t-callout); color: var(--text-2); }
.metrica__dd { display: inline-flex; align-items: baseline; justify-content: flex-end; gap: var(--s-2); margin: 0; }
.metrica__valor {
  padding: 2px var(--s-1); margin-inline-end: calc(-1 * var(--s-1));
  border-radius: var(--r-sm);
  font-size: var(--t-subhead); font-weight: 600; letter-spacing: var(--tracking-titulo);
  font-variant-numeric: tabular-nums;
}
.metrica__valor { position: relative; }
.metrica__valor::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: color-mix(in srgb, var(--accent) 24%, transparent); opacity: 0;
}
.metrica__valor.is-cambio::after { animation: metrica-cambio var(--d-destaque) var(--ease-out); }
@keyframes metrica-cambio { from { opacity: 1; } to { opacity: 0; } }
.metrica__margen { font-size: var(--t-caption); color: var(--text-2); font-variant-numeric: tabular-nums; }
.metrica__margen:empty { display: none; }
.metrica__boton {
  min-block-size: 44px; min-inline-size: 44px; padding: 0 var(--s-2);
  margin-inline-end: calc(-1 * var(--s-2));
  border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--text-2);
  font-size: var(--t-subhead); font-weight: 600;
  cursor: help;
}
@media (hover: hover) { .metrica__boton:hover { background: var(--surface-2); color: var(--text); } }
.metrica__boton[hidden], .metrica__valor[hidden] { display: none; }
.metrica__falta { grid-column: 1 / -1; padding-block-end: var(--s-3); font-size: var(--t-footnote); color: var(--text-2); }
.metrica__falta[hidden] { display: none; }
.notas { display: grid; gap: var(--s-1); padding: var(--s-2) 0 var(--s-3); margin: 0; list-style: none; border-block-start: 1px solid var(--line); }
.notas:empty { display: none; }
.nota { display: flex; align-items: flex-start; gap: var(--s-2); font-size: var(--t-footnote); color: var(--text-2); }
.nota .icono { inline-size: 16px; block-size: 16px; margin-block-start: 2px; }

/* resumo fixo no celular */
.resumen {
  position: fixed; z-index: var(--z-bar);
  inset-inline: var(--gutter);
  inset-block-end: calc(var(--altura-abas) + env(safe-area-inset-bottom) + var(--s-2));
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4);
  border: 1px solid var(--line-strong); border-radius: var(--r-xl);
  background: var(--surface-2);
  transition: transform var(--d-base) var(--ease-out), opacity var(--d-base) var(--ease-out);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .resumen { background: var(--glass); -webkit-backdrop-filter: saturate(1.6) blur(20px); backdrop-filter: saturate(1.6) blur(20px); }
}
.resumen.is-oculto { transform: translateY(var(--s-4)); opacity: 0; pointer-events: none; }
.resumen__item { display: grid; flex: none; }
@media (max-width: 419.98px) {
  .resumen { gap: var(--s-3); }
  .resumen__ir-texto { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
}
.resumen__rotulo { font-size: var(--t-caption); color: var(--text-2); }
.resumen__valor { font-size: var(--t-subhead); font-weight: 700; letter-spacing: var(--tracking-titulo); white-space: nowrap; }
.resumen__valor--2 { font-weight: 600; }
.resumen__valor.is-negativo { color: var(--negative); }
.resumen__ir {
  display: inline-flex; align-items: center; gap: var(--s-1);
  margin-inline-start: auto; min-block-size: 44px; padding-inline: var(--s-3);
  border-radius: var(--r-pill);
  color: var(--accent); text-decoration: none;
  font-size: var(--t-footnote); font-weight: 600; white-space: nowrap;
}
.resumen__ir .icono { inline-size: 16px; block-size: 16px; }
.tela--calcular { padding-block-end: var(--s-16); }
@media (min-width: 960px) { .resumen { display: none; } .tela--calcular { padding-block-end: 0; } }

/* boas-vindas */
.tela--bienvenida { padding-block-start: var(--s-4); }
.tela--bienvenida .vacio { min-block-size: calc(100dvh - var(--altura-barra) - var(--altura-abas) - var(--s-12)); }
.tela--bienvenida .vacio__texto { font-size: var(--t-subhead); color: var(--text); }
@media (min-width: 960px) { .tela--bienvenida { padding-block-start: var(--s-6); } }

/* folha de guardar */
.guardar { display: grid; gap: var(--s-4); }
.guardar__fechas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.guardar__fechas .campo__caixa { padding-inline: var(--s-3); }
.guardar__fechas .campo__entrada { min-inline-size: 0; }

/* ajustes */
.ajustes { display: grid; gap: var(--s-6); }
.ajustes__item { display: grid; gap: var(--s-2); justify-items: start; }
.ajustes__rotulo { font-size: var(--t-footnote); font-weight: 600; color: var(--text-2); }
.ajustes__nota { font-size: var(--t-caption); color: var(--text-2); }
.reglas { display: grid; inline-size: 100%; margin: 0; }
.reglas__item { display: flex; justify-content: space-between; gap: var(--s-4); padding-block: var(--s-2); border-block-start: 1px solid var(--line); font-size: var(--t-footnote); }
.reglas__item dt { color: var(--text-2); }
.reglas__item dd { margin: 0; font-weight: 600; }

.sin-js { padding-block: var(--s-8); }
@media (max-width: 419.98px) { .guardar__fechas { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   Tela Historial (Prompt 11)
   ========================================================================== */
.tela--historial { display: grid; gap: var(--s-6); }
.tela--historial > .tela__cabecera { padding-block-end: 0; }
.historial__vacio-acoes { display: flex; justify-content: center; }

/* cópia de segurança */
.copia {
  display: grid; gap: var(--s-4);
  padding: var(--s-5) var(--s-6);
  border: 1px solid var(--line); border-radius: var(--r-2xl);
  background: var(--surface-1);
}
@media (min-width: 760px) { .copia { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-8); } }
.copia__texto { display: grid; gap: var(--s-1); }
.copia__titulo { font-size: var(--t-subhead); }
.copia__texto p { font-size: var(--t-footnote); color: var(--text-2); max-inline-size: 60ch; }
.copia__estado { font-weight: 500; }
.copia__acoes { display: flex; flex-wrap: wrap; gap: var(--s-3); }
@media (max-width: 759.98px) { .copia__acoes .btn { flex: 1 1 160px; } }

/* filtros */
.filtros { display: grid; gap: var(--s-3); }
.filtros__busca-caixa {
  display: flex; align-items: center; gap: var(--s-2);
  min-block-size: 48px; padding-inline: var(--s-4);
  border: 1px solid var(--line-input); border-radius: var(--r-pill);
  background: var(--surface-1); color: var(--text-2);
}
.filtros__busca-caixa:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.filtros__busca { flex: 1; min-inline-size: 0; block-size: 46px; border: 0; background: transparent; color: var(--text); font-size: var(--t-body); outline: none; }
.filtros__linha { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3); }
.filtros__item { display: grid; gap: var(--s-1); flex: 1 1 140px; min-inline-size: 0; }
.filtros__rotulo { font-size: var(--t-caption); font-weight: 600; color: var(--text-2); }
.filtros__select, .csv__select {
  min-block-size: 44px; inline-size: 100%;
  padding-inline: var(--s-3);
  border: 1px solid var(--line-input); border-radius: var(--r-md);
  background: var(--surface-1); color: var(--text);
  font-size: var(--t-callout);
}
.filtros__linha > .btn { flex: 0 0 auto; }
.historial__conteo { font-size: var(--t-footnote); color: var(--text-2); }
.historial__sin { display: grid; justify-items: start; gap: var(--s-3); padding-block: var(--s-6); color: var(--text-2); }
.historial__mais { display: flex; justify-content: center; padding-block: var(--s-4) var(--s-6); }

/* lista por mês */
.historial__lista { display: grid; gap: var(--s-8); }
.mes { display: grid; gap: var(--s-2); }
.mes__titulo {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
  font-size: var(--t-callout); font-weight: 600; letter-spacing: var(--tracking-texto);
}
.mes__conteo { font-size: var(--t-caption); font-weight: 500; color: var(--text-2); }
.mes__lista { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; background: var(--surface-1); }
.registro { position: relative; border-block-start: 1px solid var(--line); }
.registro:first-child { border-block-start: 0; }
.registro__frente {
  --deslize: 0px;
  position: relative; z-index: 1;
  background: var(--surface-1);
  transform: translateX(var(--deslize));
  transition: transform var(--d-base) var(--ease-out);
  touch-action: pan-y;
}
.registro.is-arrastando .registro__frente { transition: none; }
.registro__boton {
  display: flex; align-items: center; gap: var(--s-3);
  inline-size: 100%; min-block-size: 64px;
  padding: var(--s-3) var(--s-4);
  border: 0; background: transparent; color: var(--text); text-align: start;
}
@media (hover: hover) { .registro__boton:hover { background: var(--surface-2); } }
.registro__check {
  display: inline-grid; place-items: center; flex: none;
  inline-size: 24px; block-size: 24px;
  border: 1.5px solid var(--line-strong); border-radius: var(--r-pill);
}
.registro__check.is-marcado { border-color: var(--accent-fill); background: var(--accent-fill); color: var(--on-accent); }
.registro__check .icono { inline-size: 16px; block-size: 16px; }
.registro__principal { display: grid; gap: 2px; flex: 1; min-inline-size: 0; }
.registro__titulo { font-size: var(--t-callout); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.registro__sub { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); font-size: var(--t-footnote); color: var(--text-2); }
.registro__grupo { padding: 1px var(--s-2); border: 1px solid var(--line-strong); border-radius: var(--r-pill); font-size: var(--t-caption); }
.registro__numeros { display: grid; justify-items: end; gap: 2px; flex: none; }
.registro__lucro { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--t-callout); font-weight: 700; letter-spacing: var(--tracking-titulo); white-space: nowrap; }
.registro__lucro .icono { inline-size: 14px; block-size: 14px; }
.registro__lucro.is-positivo .icono { color: var(--positive); }
.registro__lucro.is-negativo { color: var(--negative); }
.registro__cpa { font-size: var(--t-caption); color: var(--text-2); white-space: nowrap; }
.registro__bandeja { position: absolute; inset: 0 0 0 auto; display: flex; }
.registro__accion {
  display: grid; place-items: center; align-content: center; gap: 2px;
  inline-size: 76px; border: 0;
  background: var(--surface-3); color: var(--text);
  font-size: var(--t-caption); font-weight: 600;
}
.registro__accion--eliminar { background: var(--negative); color: var(--nucleo-branco); }

/* barra de seleção */
.seleccion {
  position: sticky; z-index: var(--z-bar);
  inset-block-end: calc(var(--altura-abas) + env(safe-area-inset-bottom) + var(--s-2));
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4);
  border: 1px solid var(--line-strong); border-radius: var(--r-xl);
  background: var(--surface-2);
}
.seleccion__conteo { font-size: var(--t-callout); font-weight: 600; }

/* menu de opções */
.menu { display: grid; margin: 0; padding: 0; list-style: none; }
.menu__item {
  display: flex; align-items: center; gap: var(--s-3);
  inline-size: 100%; min-block-size: 52px; padding-inline: var(--s-2);
  border: 0; border-block-start: 1px solid var(--line); background: transparent; color: var(--text);
  font-size: var(--t-callout); font-weight: 500; text-align: start;
}
.menu li:first-child .menu__item { border-block-start: 0; }
.menu__item .icono { color: var(--text-2); }
.menu__item.is-perigo, .menu__item.is-perigo .icono { color: var(--negative); }
@media (hover: hover) { .menu__item:hover { background: var(--surface-2); } }
.btn--destrutivo-cheio { --btn-bg: var(--negative); --btn-fg: var(--nucleo-branco); --btn-borda: var(--negative); }

/* detalhe */
.detalle { display: grid; gap: var(--s-5); }
.detalle__periodo { font-size: var(--t-footnote); color: var(--text-2); }
.detalle__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin: 0; }
.detalle__stat { padding: var(--s-3) var(--s-4); border-radius: var(--r-lg); background: var(--surface-2); }
.detalle__stat dt { font-size: var(--t-caption); color: var(--text-2); }
.detalle__stat dd { margin: 0; font-size: var(--t-title3); font-weight: 700; letter-spacing: var(--tracking-titulo); }
.detalle__stat dd.is-negativo { color: var(--negative); }
.detalle__numeros summary { min-block-size: 44px; display: flex; align-items: center; font-weight: 600; cursor: pointer; }
.detalle__numeros dl { margin: 0; }
.detalle__linha { display: flex; justify-content: space-between; gap: var(--s-4); padding-block: var(--s-2); border-block-start: 1px solid var(--line); font-size: var(--t-footnote); }
.detalle__linha dt { color: var(--text-2); }
.detalle__linha dd { margin: 0; font-weight: 600; }
.detalle__notas h3 { font-size: var(--t-footnote); color: var(--text-2); margin-block-end: var(--s-1); }

/* assistente de CSV */
.csv { display: grid; gap: var(--s-4); }
.csv__paso { margin-block-end: var(--s-4); font-size: var(--t-footnote); font-weight: 600; color: var(--accent); }
.csv__elegir { justify-self: start; cursor: pointer; }
.csv__o { font-size: var(--t-footnote); color: var(--text-2); }
.csv__pegar {
  inline-size: 100%; min-block-size: 120px; padding: var(--s-3);
  border: 1px solid var(--line-input); border-radius: var(--r-md);
  background: var(--surface-1); color: var(--text);
  font-size: var(--t-footnote); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; resize: vertical;
}
.csv__nota { display: flex; align-items: flex-start; gap: var(--s-2); font-size: var(--t-footnote); color: var(--text-2); }
.csv__nota .icono { inline-size: 16px; block-size: 16px; margin-block-start: 2px; flex: none; }
.csv__item { display: grid; gap: var(--s-2); justify-items: start; min-inline-size: 0; }
.csv > *, .csv .pilha > * { min-inline-size: 0; }
.csv__rotulo { font-size: var(--t-footnote); font-weight: 600; color: var(--text-2); }
.csv__item .segmentado { flex-wrap: wrap; max-inline-size: 100%; border-radius: var(--r-lg); }
.csv__item .segmentado__opcion { white-space: normal; text-align: center; }
.csv__check { display: flex; align-items: center; gap: var(--s-2); min-block-size: 44px; font-size: var(--t-callout); }
.csv__check input { inline-size: 20px; block-size: 20px; accent-color: var(--accent-fill); }
.csv__vista { max-inline-size: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
.csv__vista table { border-collapse: collapse; font-size: var(--t-caption); }
.csv__vista td { padding: var(--s-2) var(--s-3); border-block-start: 1px solid var(--line); white-space: nowrap; max-inline-size: 160px; overflow: hidden; text-overflow: ellipsis; }
.csv__vista tr:first-child td { border-block-start: 0; }
.csv__grupo { display: grid; gap: var(--s-3); margin: 0; padding: 0; border: 0; }
.csv__grupo legend { margin-block-end: var(--s-2); }
.csv__mapa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; gap: var(--s-1) var(--s-3); }
.csv__mapa label { font-size: var(--t-callout); }
.csv__marca { grid-column: 2; display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--t-caption); color: var(--accent); }
.csv__marca:empty { display: none; }
.csv__marca .icono { inline-size: 14px; block-size: 14px; }
.csv__resumen { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.csv__resumen li { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-callout); font-weight: 500; }
.csv__resumen .is-ok .icono { color: var(--positive); }
.csv__resumen .is-erro .icono { color: var(--negative); }
.csv__resumen .is-aviso .icono { color: var(--warn); }
.csv__errores { display: grid; gap: var(--s-1); margin: 0; padding: var(--s-3) var(--s-4); list-style: none; border-radius: var(--r-md); background: color-mix(in srgb, var(--negative) 8%, transparent); font-size: var(--t-footnote); }

/* ==========================================================================
   Telas Análisis e Simular (Prompt 13)
   ========================================================================== */
.tela--analisis, .tela--simular { display: grid; gap: var(--s-6); }
.tela--analisis > .tela__cabecera, .tela--simular > .tela__cabecera { padding-block-end: 0; }
.bloco-a {
  display: grid; gap: var(--s-4); align-content: start; min-inline-size: 0;
  padding: var(--s-5) var(--s-5) var(--s-6);
  border: 1px solid var(--line); border-radius: var(--r-2xl);
  background: var(--surface-1);
}
@media (min-width: 600px) { .bloco-a { padding: var(--s-6); } }
.bloco-a > * { min-inline-size: 0; }
.bloco-a__titulo { font-size: var(--t-subhead); }
.bloco-a__ayuda { font-size: var(--t-footnote); color: var(--text-2); }
.analisis__grade { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 960px) { .analisis__grade { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.analisis__col { display: grid; gap: var(--s-6); min-inline-size: 0; }
.analisis__periodo { font-size: var(--t-footnote); color: var(--text-2); }
.analisis__nota { display: flex; align-items: flex-start; gap: var(--s-2); font-size: var(--t-footnote); color: var(--text-2); }
.analisis__nota .icono { inline-size: 16px; block-size: 16px; flex: none; margin-block-start: 2px; }
.analisis__nota--aviso { padding: var(--s-3); border-radius: var(--r-md); background: color-mix(in srgb, var(--warn) 10%, transparent); color: var(--text); }
.analisis__nota--aviso .icono { color: var(--warn); }

/* janela */
.janela { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.janela__rotulo { font-size: var(--t-footnote); font-weight: 600; color: var(--text-2); }
.janela .segmentado { flex-wrap: wrap; border-radius: var(--r-lg); }
.janela__fechas { flex-basis: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: var(--s-3); }
.janela__ayuda { flex-basis: 100%; font-size: var(--t-caption); color: var(--text-2); }
.janela--sel { padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4); border: 1px solid color-mix(in srgb, var(--accent) 36%, transparent); border-radius: var(--r-lg); font-size: var(--t-footnote); font-weight: 500; }
.janela--sel > .icono { color: var(--accent); }
.janela--sel > span { flex: 1 1 200px; }

/* nível de dados */
.nivel { display: flex; align-items: center; gap: var(--s-4); }
.nivel__texto { display: grid; gap: var(--s-1); font-size: var(--t-callout); }
.nivel__registros { font-weight: 600; }
.nivel__escada summary { min-block-size: 40px; display: flex; align-items: center; font-size: var(--t-footnote); font-weight: 600; color: var(--text-2); cursor: pointer; }
.escada { display: grid; gap: var(--s-1); margin: var(--s-2) 0; padding: 0; list-style: none; }
.escada__item { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); min-block-size: 36px; font-size: var(--t-footnote); color: var(--text-2); }
.escada__item.is-ativo { color: var(--text); }
.escada__marca { display: inline-grid; place-items: center; inline-size: 22px; block-size: 22px; border: 1.5px solid var(--line-strong); border-radius: var(--r-pill); }
.escada__item.is-ativo .escada__marca { border-color: var(--accent-fill); background: var(--accent-fill); color: var(--on-accent); }
.escada__marca .icono { inline-size: 14px; block-size: 14px; }
.escada__regra { font-size: var(--t-caption); color: var(--text-2); }
.nivel__regra { display: flex; gap: var(--s-2); align-items: center; font-size: var(--t-caption); color: var(--text-2); }
.nivel__regra .icono { inline-size: 14px; block-size: 14px; }

/* o que mover primeiro */
.mover { border-color: var(--line-strong); }
.mover__topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); }
.mover__etapa { font-size: var(--t-footnote); font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.06em; }
.mover__constatacion { font-size: var(--t-title3); font-weight: 600; letter-spacing: var(--tracking-titulo); line-height: 1.25; }
.mover__valor { display: grid; gap: var(--s-1); }
.mover__rotulo { font-size: var(--t-caption); font-weight: 600; color: var(--text-2); }
.mover__numero { font-size: var(--t-title1); font-weight: 700; letter-spacing: var(--tracking-titulo); line-height: 1.1; }
.mover__rango { font-size: var(--t-footnote); color: var(--text-2); }
.mover__sugerencia { display: grid; gap: var(--s-1); padding: var(--s-3) var(--s-4); border-radius: var(--r-lg); background: var(--surface-2); font-size: var(--t-callout); }
.mover > .btn { justify-self: start; }
.mover__fuertes { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-footnote); color: var(--text-2); }
.mover__fuertes .icono { color: var(--positive); inline-size: 16px; block-size: 16px; }
.cambios__ic { display: block; color: var(--text-2); font-size: var(--t-caption); }
.tela--analisis .tabla td, .tela--analisis .tabla th { white-space: nowrap; }

/* equilíbrio */
.eq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.eq__stat { display: grid; gap: 2px; padding: var(--s-3) var(--s-4); border-radius: var(--r-lg); background: var(--surface-2); }
.eq__stat span, .eq__stat small { font-size: var(--t-caption); color: var(--text-2); }
.eq__stat strong { font-size: var(--t-title3); letter-spacing: var(--tracking-titulo); }

/* tendências */
.tend__grade { display: grid; gap: var(--s-4); }
@media (min-width: 600px) and (max-width: 959.98px) { .tend__grade { grid-template-columns: 1fr 1fr; } }
.tend { display: grid; gap: var(--s-2); padding-block-end: var(--s-3); border-block-end: 1px solid var(--line); }
.tend__cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); }
.tend__nome { font-size: var(--t-footnote); font-weight: 600; }
.tend__veredito { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-caption); font-weight: 600; }
.grafico--compacto .grafico__cab { display: flex; justify-content: flex-end; }
.grafico--compacto .grafico__cab > div:empty { display: none; }
.grupos-res { display: grid; gap: var(--s-2); }
.glosario p { font-size: var(--t-callout); }
.porque dl { display: grid; margin: 0; }
.porque__linha { display: grid; gap: 2px; padding-block: var(--s-3); border-block-start: 1px solid var(--line); }
.porque__linha:first-child { border-block-start: 0; }
.porque__linha dt { font-size: var(--t-caption); font-weight: 600; color: var(--text-2); }
.porque__linha dd { margin: 0; font-size: var(--t-callout); }

/* simular */
.sim__periodo { max-inline-size: 420px; }
.sim { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 960px) {
  .sim { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); }
  .sim__lado { position: sticky; inset-block-start: calc(var(--altura-barra) + var(--s-4)); }
}
.sim__lado { display: grid; gap: var(--s-6); min-inline-size: 0; }
.sim__controles { display: grid; gap: var(--s-6); }
.sim__ctl { display: grid; gap: var(--s-2); }
.sim__ctl-cab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.sim__rotulo { font-size: var(--t-callout); font-weight: 600; }
.sim__valor { font-size: var(--t-subhead); font-weight: 700; letter-spacing: var(--tracking-titulo); }
.sim__trilho { position: relative; padding-block: var(--s-2) var(--s-3); }
.sim__range { inline-size: 100%; block-size: 32px; margin: 0; accent-color: var(--accent-fill); cursor: pointer; }
.sim__marcas { position: relative; block-size: 10px; margin-inline: 8px; }
.sim__marca { position: absolute; inset-block-start: 0; inset-inline-start: var(--pos); inline-size: 2px; block-size: 10px; transform: translateX(-1px); border-radius: 1px; background: var(--text-2); }
.sim__marca--base { block-size: 12px; inline-size: 3px; background: var(--text); }
.sim__marca--actual { inline-size: 8px; block-size: 8px; transform: translate(-4px, 1px); border-radius: var(--r-pill); background: var(--accent); }
.sim__actual, .sim__legenda { font-size: var(--t-caption); color: var(--text-2); }
.sim__fuera { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-footnote); font-weight: 500; color: var(--warn); }
.sim__fuera .icono { inline-size: 16px; block-size: 16px; flex: none; }
.sim__simulado { font-weight: 700; }
.sim__resultado td.is-melhor { color: var(--positive); }
.sim__resultado td.is-pior { color: var(--negative); }
.sim__resultado .tabla td, .sim__resultado .tabla th { padding-inline: var(--s-3); }
.sim__avisos { display: grid; gap: var(--s-2); }
.ranking { display: grid; gap: var(--s-3); margin: 0; padding: 0; list-style: none; counter-reset: r; }
.ranking__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-1) var(--s-3); font-size: var(--t-footnote); }
.ranking__nome { font-weight: 500; }
.ranking__valor { font-weight: 700; }
.ranking__trilho { grid-column: 1 / -1; block-size: 6px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.ranking__barra { display: block; block-size: 100%; inline-size: var(--largura); border-radius: var(--r-pill); background: var(--accent); }
.sim__pct { display: block; font-size: var(--t-caption); font-weight: 500; }
.sim-res { display: grid; margin: 0; }
.sim-res__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--s-4); padding-block: var(--s-3); border-block-start: 1px solid var(--line); }
.sim-res__item:first-child { border-block-start: 0; padding-block-start: 0; }
.sim-res__item dt { font-size: var(--t-callout); color: var(--text-2); }
.sim-res__item dd { margin: 0; text-align: end; }
.sim-res__valores { display: inline-flex; align-items: baseline; justify-content: flex-end; gap: var(--s-2); font-size: var(--t-callout); }
.sim-res__actual { color: var(--text-2); }
.sim-res__seta { color: var(--text-2); }
.sim-res__simulado { font-size: var(--t-subhead); font-weight: 700; letter-spacing: var(--tracking-titulo); }
.sim-res__dif { grid-column: 1 / -1; font-size: var(--t-footnote); font-weight: 600; color: var(--text-2); }
.sim-res__dif.is-melhor { color: var(--positive); }
.sim-res__dif.is-pior { color: var(--negative); }

/* ==========================================================================
   Paleta de comandos e atalhos (Prompt 14)
   ========================================================================== */
.paleta { position: fixed; inset: 0; z-index: var(--z-palette); display: grid; justify-items: center; align-items: start; padding: max(var(--s-12), 10vh) var(--gutter) var(--gutter); }
.paleta__fondo { position: absolute; inset: 0; background: color-mix(in srgb, var(--nucleo-preto) 56%, transparent); opacity: 0; transition: opacity var(--d-fast) var(--ease-out); }
.paleta__caixa {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; inline-size: min(560px, 100%); max-block-size: min(480px, 76dvh);
  border: 1px solid var(--line-strong); border-radius: var(--r-xl); background: var(--surface-1);
  overflow: hidden; opacity: 0; transform: translateY(-8px) scale(0.98);
  transition: transform var(--d-base) var(--ease-mola-leve), opacity var(--d-fast) var(--ease-out);
}
.paleta[data-estado="abierta"] .paleta__fondo, .paleta[data-estado="abierta"] .paleta__caixa { opacity: 1; }
.paleta[data-estado="abierta"] .paleta__caixa { transform: none; }
.paleta__campo { display: flex; align-items: center; gap: var(--s-3); padding-inline: var(--s-4); border-block-end: 1px solid var(--line); color: var(--text-2); }
.paleta__busca { flex: 1; min-inline-size: 0; block-size: 56px; border: 0; background: transparent; color: var(--text); font-size: var(--t-subhead); outline: none; }
.paleta__lista { margin: 0; padding: var(--s-2); list-style: none; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.paleta__opcao { display: flex; align-items: center; gap: var(--s-3); min-block-size: 44px; padding-inline: var(--s-3); border-radius: var(--r-md); color: var(--text); font-size: var(--t-callout); cursor: pointer; }
.paleta__opcao .icono { color: var(--text-2); inline-size: 18px; block-size: 18px; }
.paleta__opcao[aria-selected="true"] { background: var(--surface-ativa); box-shadow: var(--sombra-ativa); }
.paleta__opcao[aria-selected="true"] .icono { color: var(--accent); }
.paleta__texto { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paleta__vazio { padding: var(--s-6); font-size: var(--t-footnote); color: var(--text-2); text-align: center; }
kbd {
  display: inline-grid; place-items: center; min-inline-size: 24px; block-size: 24px; padding-inline: var(--s-2);
  border: 1px solid var(--line-strong); border-block-end-width: 2px; border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--text-2);
  font-family: var(--fonte); font-size: var(--t-caption); font-weight: 600; white-space: nowrap;
}
.atajos { display: grid; margin: 0; }
.atajos__linha { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding-block: var(--s-3); border-block-start: 1px solid var(--line); }
.atajos__linha:first-child { border-block-start: 0; }
.atajos__linha dt { display: flex; gap: var(--s-1); flex: none; }
.atajos__linha dd { margin: 0; font-size: var(--t-footnote); color: var(--text-2); text-align: end; }
/* números selecionáveis para copiar */
[data-num] { user-select: text; -webkit-user-select: text; }

/* ==========================================================================
   Introdução, glossário, métodos e limites (Prompt 15)
   ========================================================================== */
.onb { position: fixed; inset: 0; z-index: var(--z-palette); display: grid; place-items: center; padding: var(--gutter); background: color-mix(in srgb, var(--nucleo-preto) 60%, transparent); opacity: 0; transition: opacity var(--d-base) var(--ease-out); }
.onb[data-estado="abierta"] { opacity: 1; }
.onb__painel {
  position: relative; inline-size: min(520px, 100%); block-size: min(640px, calc(100dvh - 2 * var(--gutter)));
  border: 1px solid var(--line-strong); border-radius: var(--r-2xl); background: var(--bg); outline: none;
  transform: translateY(var(--s-4)) scale(0.98); transition: transform var(--d-slow) var(--ease-mola-leve);
}
.onb[data-estado="abierta"] .onb__painel { transform: none; }
.onb__conteudo { position: relative; z-index: 2; display: grid; grid-template-rows: auto 1fr auto; block-size: 100%; padding: var(--s-6); }
.onb__topo { display: flex; align-items: center; justify-content: space-between; }
.onb__paso { font-size: var(--t-footnote); font-weight: 600; color: var(--text-2); }
.onb__saltar { min-block-size: 40px; }
.onb__corpo { display: grid; align-content: center; justify-items: center; gap: var(--s-5); text-align: center; overflow-y: auto; }
.onb__titulo { font-size: var(--t-title2); }
.onb__texto { max-inline-size: 36ch; font-size: var(--t-subhead); color: var(--text-2); }
.onb__icone { display: grid; place-items: center; inline-size: 72px; block-size: 72px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--accent); }
.onb__icone .icono { inline-size: 36px; block-size: 36px; }
.onb__espuma { inline-size: 100%; max-inline-size: 360px; block-size: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-xl); }
.onb__pe { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.onb__pontos { display: flex; gap: var(--s-2); }
.onb__ponto { inline-size: 8px; block-size: 8px; border-radius: var(--r-pill); background: var(--line-strong); transition: transform var(--d-base) var(--ease-out); }
.onb__ponto.is-ativo { background: var(--accent); transform: scale(1.25); }
.onb__botoes { display: flex; gap: var(--s-2); }
.onb .lockup--vertical svg { block-size: 52px; }

.glosario { gap: var(--s-2); }
.glos { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-1); }
.glos summary { display: flex; align-items: center; justify-content: space-between; min-block-size: 52px; padding-inline: var(--s-4); font-weight: 600; cursor: pointer; list-style: none; }
.glos summary::-webkit-details-marker { display: none; }
.glos__seta { color: var(--text-2); transition: transform var(--d-base) var(--ease-out); }
.glos[open] .glos__seta { transform: rotate(180deg); }
.glos dl { display: grid; gap: var(--s-3); margin: 0; padding: 0 var(--s-4) var(--s-4); }
.glos dt { font-size: var(--t-caption); font-weight: 600; color: var(--text-2); }
.glos dd { margin: 0; font-size: var(--t-callout); }
.metodos h3 { font-size: var(--t-callout); margin-block-start: var(--s-2); }
.metodos__lista { display: grid; gap: var(--s-2); margin: 0; padding-inline-start: var(--s-5); font-size: var(--t-footnote); }
.limites { display: grid; gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
.limites li { display: flex; gap: var(--s-3); font-size: var(--t-callout); }
.limites .icono { flex: none; color: var(--text-2); inline-size: 18px; block-size: 18px; margin-block-start: 3px; }
.metrica__glos { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; text-decoration: underline dotted; text-decoration-color: var(--line-strong); text-underline-offset: 0.25em; cursor: help; min-block-size: 44px; }
.heroi__copiar { justify-self: start; margin-inline-start: calc(-1 * var(--s-3)); min-block-size: 40px; font-size: var(--t-footnote); }
.metodos .tabla th, .metodos .tabla td { white-space: normal; }

/* ==========================================================================
   PWA (Prompt 16): conexão, lembrete de cópia, Sobre
   ========================================================================== */
.conexion { display: flex; align-items: center; justify-content: center; gap: var(--s-2); margin: 0; padding: var(--s-2) var(--gutter); background: var(--surface-2); color: var(--text-2); font-size: var(--t-footnote); font-weight: 500; }
.conexion .icono { inline-size: 16px; block-size: 16px; }
.conexion[hidden] { display: none; }
.slot-aviso:empty { display: none; }
.slot-aviso { padding-block-start: var(--s-4); }
.aviso-copia { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-2) var(--s-3); align-items: start; padding: var(--s-4); border: 1px solid var(--line-strong); border-radius: var(--r-xl); background: var(--surface-1); }
.aviso-copia__icone { color: var(--accent); margin-block-start: 2px; }
.aviso-copia__titulo { font-weight: 600; }
.aviso-copia__texto p:last-child { font-size: var(--t-footnote); color: var(--text-2); }
.aviso-copia__acoes { grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--s-2); }
@media (min-width: 760px) { .aviso-copia { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; } .aviso-copia__acoes { grid-column: auto; } }
.sobre { display: grid; gap: var(--s-4); }
.sobre__capa { position: relative; overflow: hidden; border-radius: var(--r-xl); background: var(--nucleo-preto); aspect-ratio: 16 / 9; }
.sobre__espuma { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.sobre__lockup { position: absolute; inset: 0; display: grid; place-items: center; color: var(--nucleo-branco); }
.sobre__lockup .lockup { --logo: var(--nucleo-branco); color: var(--nucleo-branco); }
.sobre__lockup .lockup__eyebrow { color: var(--nucleo-branco); }
.sobre__lockup svg { color: var(--nucleo-branco); block-size: 48px; }
.sobre__versao { font-size: var(--t-footnote); color: var(--text-2); }
.sobre__nota { display: flex; gap: var(--s-2); align-items: flex-start; font-size: var(--t-footnote); color: var(--text-2); }
.sobre__nota .icono { inline-size: 16px; block-size: 16px; flex: none; margin-block-start: 2px; }
.ios-passos { display: grid; gap: var(--s-2); margin: 0; padding-inline-start: var(--s-6); font-size: var(--t-callout); }

/* ==========================================================================
   Alto contraste do sistema (Prompt 17): estados que dependiam de fundo ganham contorno
   ========================================================================== */
@media (forced-colors: active) {
  .segmentado__opcion[aria-checked="true"], .nav-topo__link[aria-current="page"], .abas__link[aria-current="page"],
  .paleta__opcao[aria-selected="true"], .chip[aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
  .selo, .aviso, .aviso-copia, .heroi, .bloco, .bloco-a, .cartao, .sheet__panel, .paleta__caixa, .toast { border: 1px solid CanvasText; }
  .registro__check.is-marcado, .escada__item.is-ativo .escada__marca { background: Highlight; color: HighlightText; border-color: Highlight; }
  .grupos::before, .sim__marca, .ranking__barra, .onb__ponto.is-ativo { background: CanvasText; }
  .resumen, .barra-app, .abas { border: 1px solid CanvasText; }
}

/* página 404 (estática, sem JavaScript) */
.pagina-404 { display: grid; gap: var(--s-4); align-content: center; justify-items: start; min-block-size: 100dvh; max-inline-size: 40rem; }
.pagina-404 h1 { font-size: var(--t-title1); font-weight: var(--peso-titulo); letter-spacing: var(--tracking-titulo); }
.pagina-404 p { color: var(--text-2); }
.pagina-404__marca { font-size: var(--t-callout); color: var(--text); font-weight: var(--peso-leve); }
.pagina-404__marca strong { font-weight: var(--peso-titulo); }
.legal { gap: var(--s-5); }