/* Delfos — componentes compartilhados. Tokens em tokens.css; ver DESIGN.md. */
:root {
  /* Ícones em máscara (Phosphor): a cor vem de background. */
  --ic-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='black'%3E%3Cpath d='M142,176a6,6,0,0,1-6,6,14,14,0,0,1-14-14V128a2,2,0,0,0-2-2,6,6,0,0,1,0-12,14,14,0,0,1,14,14v40a2,2,0,0,0,2,2A6,6,0,0,1,142,176ZM124,94a10,10,0,1,0-10-10A10,10,0,0,0,124,94Zm106,34A102,102,0,1,1,128,26,102.12,102.12,0,0,1,230,128Zm-12,0a90,90,0,1,0-90,90A90.1,90.1,0,0,0,218,128Z'/%3E%3C/svg%3E");
  --ic-alerta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='black'%3E%3Cpath d='M235.07,189.09,147.61,37.22h0a22.75,22.75,0,0,0-39.22,0L20.93,189.09a21.53,21.53,0,0,0,0,21.72A22.35,22.35,0,0,0,40.55,222h174.9a22.35,22.35,0,0,0,19.6-11.19A21.53,21.53,0,0,0,235.07,189.09ZM224.66,204.8a10.46,10.46,0,0,1-9.21,5.2H40.55a10.46,10.46,0,0,1-9.21-5.2,9.51,9.51,0,0,1,0-9.72L118.79,43.21a10.75,10.75,0,0,1,18.42,0l87.46,151.87A9.51,9.51,0,0,1,224.66,204.8ZM122,144V104a6,6,0,0,1,12,0v40a6,6,0,0,1-12,0Zm16,36a10,10,0,1,1-10-10A10,10,0,0,1,138,180Z'/%3E%3C/svg%3E");
  --ic-critico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='black'%3E%3Cpath d='M128,26A102,102,0,1,0,230,128,102.12,102.12,0,0,0,128,26Zm0,192a90,90,0,1,1,90-90A90.1,90.1,0,0,1,128,218Zm-6-82V80a6,6,0,0,1,12,0v56a6,6,0,0,1-12,0Zm16,36a10,10,0,1,1-10-10A10,10,0,0,1,138,172Z'/%3E%3C/svg%3E");
  --seta-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%238e897f'%3E%3Cpath d='M212.24,100.24l-80,80a6,6,0,0,1-8.48,0l-80-80a6,6,0,0,1,8.48-8.48L128,167.51l75.76-75.75a6,6,0,0,1,8.48,8.48Z'/%3E%3C/svg%3E");
  --ic-pessoal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='square'%3E%3Cpath d='M12 4.5a3.25 3.25 0 1 0 0 6.5 3.25 3.25 0 1 0 0-6.5Z M6 18C6 15.1 8.7 13.25 12 13.25S18 15.1 18 18 M4.5 20H19.5'/%3E%3C/svg%3E");
  --ic-financeiro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='square'%3E%3Cpath d='M4.5 14.5H10.5V17.25H4.5Z M4.5 17.25H10.5V20H4.5Z M13.5 6.25H19.5V9H13.5Z M13.5 9H19.5V11.75H13.5Z M13.5 11.75H19.5V14.5H13.5Z M13.5 14.5H19.5V17.25H13.5Z M13.5 17.25H19.5V20H13.5Z'/%3E%3C/svg%3E");
  --ic-faculdade: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='square'%3E%3Cpath d='M12 7V19.5 M12 7C10.25 5.6 7.6 5 4 5.25V17.75C7.6 17.5 10.25 18.1 12 19.5 M12 7C13.75 5.6 16.4 5 20 5.25V17.75C16.4 17.5 13.75 18.1 12 19.5'/%3E%3C/svg%3E");
  --ic-projetos: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='square'%3E%3Cpath d='M6.5 20V14 M5 14H8 M12 20V10 M10.5 10H13.5 M17.5 20V6 M16 6H19 M3.5 20H20.5'/%3E%3C/svg%3E");
  --ic-cartao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='black'%3E%3Cpath d='M224,50H32A14,14,0,0,0,18,64V192a14,14,0,0,0,14,14H224a14,14,0,0,0,14-14V64A14,14,0,0,0,224,50ZM32,62H224a2,2,0,0,1,2,2V90H30V64A2,2,0,0,1,32,62ZM224,194H32a2,2,0,0,1-2-2V102H226v90A2,2,0,0,1,224,194Zm-18-26a6,6,0,0,1-6,6H168a6,6,0,0,1,0-12h32A6,6,0,0,1,206,168Zm-64,0a6,6,0,0,1-6,6H120a6,6,0,0,1,0-12h16A6,6,0,0,1,142,168Z'/%3E%3C/svg%3E");
}


/* Pular para o conteúdo: só aparece com o teclado (UI.montarLayout cria o link). */
.pular {
  position: fixed;
  left: 12px;
  top: -60px;
  z-index: 400;
  padding: 10px 16px;
  border-radius: var(--r-md);
  background: var(--texto);
  color: var(--sobre-claro);
  font-weight: 600;
  text-decoration: none;
  transition: top 160ms ease;
}
.pular:focus { top: 12px; }

.app { display: flex; min-height: 100dvh; background: linear-gradient(90deg, var(--lateral) var(--sidebar-w), transparent var(--sidebar-w)); }

/* Ícone (UI.icone): herda a cor do texto em volta. */
.ico { width: 18px; height: 18px; flex-shrink: 0; display: block; }

/* Ícone do pilar em máscara: selos, notas e etiquetas usam o ícone da área
   no lugar de um pontinho colorido — a cor diz a área, o desenho também. */
.marca-area {
  display: inline-block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background: var(--marca, var(--texto-3));
  -webkit-mask: var(--ic-marca, var(--ic-info)) center / contain no-repeat;
  mask: var(--ic-marca, var(--ic-info)) center / contain no-repeat;
}

/* ------------------------------- Sidebar -------------------------------- */

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--lateral);
  color: var(--texto);
  padding: 22px 12px 14px;
  position: sticky;
  top: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  z-index: 20;
  overflow: hidden;
}

/* A marca e o perfil ficam visíveis. Só as abas e suas ações rolam. */
.sidebar > .marca-topo { flex-shrink: 0; }
.sidebar-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding: 4px 4px 8px;
  margin: 0 -4px;
  scrollbar-color: var(--texto-3) var(--lateral);
}
.sidebar-scroll::-webkit-scrollbar-track { background: var(--lateral); }

/* O D com a coluna já é a inicial do logotipo. A versão fica no conteúdo. */
.marca-topo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 26px;
  text-decoration: none;
  color: var(--texto);
}
/* Símbolo isolado e palavra completa são vetores de proporções fixas. */
.simbolo { display: block; height: 30px; width: auto; flex-shrink: 0; }
.logotipo { display: block; height: 22px; width: auto; flex-shrink: 0; }
.marca-versao { margin-left: auto; align-self: flex-end; margin-bottom: 2px; font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); color: var(--texto-3); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.main > .versao-painel {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 16px;
  color: var(--texto-3);
  font: calc(var(--font-xs) * var(--escala-fonte, 1))/1.4 var(--font);
  letter-spacing: .04em;
  white-space: nowrap;
}

/* Um único indicador também atende à navegação das páginas organizadas. */
.pagina-secoes.com-indicador { position: relative; }
.pagina-secoes.com-indicador button[aria-selected="true"]::after { display: none; }
.pagina-secoes.com-indicador .pagina-indicador {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 2px;
  background: var(--texto);
  transform-origin: left center;
  pointer-events: none;
}

/* Logotipo e assinatura da entrada e das boas-vindas. A assinatura é a
   única caixa alta espaçada do painel, não um rótulo de conteúdo. */
.marca-bloco { display: flex; align-items: center; gap: 16px; color: var(--texto); }
.marca-bloco .simbolo { height: 64px; }
.marca-texto { display: flex; flex-direction: column; gap: 9px; }
.marca-bloco .marca-topo { margin: 0; padding: 0; font-size: inherit; }
.marca-bloco .logotipo { height: 40px; }
.assinatura {
  margin: 0;
  font-size: calc(var(--font-xs) * var(--escala-fonte, 1));
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  color: var(--texto-3);
}

.nav { display: flex; flex-direction: column; gap: 1px; }

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: var(--control-size);
  padding: 6px 10px;
  border-radius: var(--r-md);
  color: var(--texto-2);
  text-decoration: none;
  font-size: calc(var(--font-sm) * var(--escala-fonte, 1));
  font-weight: 500;
  transition: background 0.14s, color 0.14s;
}

.nav-item:hover { background: var(--superficie); color: var(--texto); }
.nav-item.active { background: var(--superficie-2); color: var(--texto); font-weight: 600; }

/* Ícone em duas camadas (UI.iconeDuo): o corpo fica por trás do contorno. */
.ico .corpo { opacity: 0.2; transition: opacity 0.14s; }

/* A cor de cada aba, para o selo da barra, da folha "Mais" e da barra do
   celular. As criadas trazem --cor-aba inline (hex que o usuário escolheu). */
:is(.nav-icon, .tab-ic).pessoal { --cor-aba: var(--s-pessoal); }
:is(.nav-icon, .tab-ic).financeiro { --cor-aba: var(--s-financeiro); }
:is(.nav-icon, .tab-ic).faculdade { --cor-aba: var(--s-faculdade); }
:is(.nav-icon, .tab-ic).projetos { --cor-aba: var(--s-projetos); }

/* Selo da aba (UI.seloAba): um quadrado no tom da aba, com fio do mesmo tom,
   e o ícone na cor dela. A aba aberta fica com o selo cheio. Fixas e
   criadas usam o mesmo desenho; a Visão geral, sem pilar, fica em grafite. */
.nav-icon {
  --cor-aba: var(--texto-2);
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  font-size: calc(var(--font-xs) * var(--escala-fonte, 1));
  line-height: 1;
  color: var(--cor-aba);
  background: color-mix(in oklab, var(--cor-aba) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--cor-aba) 12%, transparent);
  transition: background-color 0.14s, color 0.14s, box-shadow 0.14s;
}
.nav-icon .ico { width: 16px; height: 16px; }
.nav-item:hover .nav-icon { background: color-mix(in oklab, var(--cor-aba) 22%, transparent); }
.nav-item.active .nav-icon.geral { --cor-aba: var(--texto); }
.nav-item.active .nav-icon {
  background: var(--cor-aba);
  color: var(--sobre-claro);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16);
}
.nav-item.active .nav-icon .corpo { opacity: 0.3; }
/* O hex de uma aba criada é de tom médio (lê nos dois temas): branco por cima. */
.nav-item.active .nav-icon.propria { color: #fff; }

.nav-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }

/* Contagem em algarismo simples, sem pílula: é dado, não selo. */
.nav-count {
  font-size: calc(var(--font-xs) * var(--escala-fonte, 1));
  font-weight: 500;
  min-width: 18px;
  text-align: right;
  color: var(--texto-3);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.nav-count.alert { color: var(--critical-text); font-weight: 650; }

.nav-sub {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 2px 0 8px 22px; /* o fio desce do meio do selo da aba */
  padding-left: 11px;
  border-left: 1px solid var(--linha);
}

.nav-subitem {
  display: flex; align-items: center; min-height: var(--control-size);
  padding: 6px 9px;
  border-radius: var(--r-xs);
  color: var(--texto-3);
  text-decoration: none;
  font-size: calc(var(--font-xs) * var(--escala-fonte, 1));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.12s, color 0.12s;
}
.nav-subitem:hover { background: var(--superficie); color: var(--texto); }
.nav-subitem.active { color: var(--texto); font-weight: 600; }

.nav-nova {
  margin-top: 10px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  border: none;
  background: none;
  min-height: var(--control-size);
  padding: 8px 10px;
  border-radius: var(--r-md);
  text-align: left;
  font: inherit;
  font-size: calc(var(--font-sm) * var(--escala-fonte, 1));
  color: var(--texto-3);
  cursor: pointer;
  transition: background 0.14s, color 0.14s;
}
.nav-nova .ico { width: 18px; height: 18px; margin: 0 1px; }
.nav-nova:hover { background: var(--superficie); color: var(--texto); }

.sidebar-foot { flex-shrink: 0; margin-top: auto; padding-top: 14px; }

/* Quem está usando: fica no pé da barra e abre o perfil. */
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--texto);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.14s;
}
.brand:hover { background: var(--superficie); }

/* Retrato em quadrado de cantos suaves, não em círculo. */
.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: var(--superficie-3);
  color: var(--texto);
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: calc(var(--font-xs) * var(--escala-fonte, 1));
  letter-spacing: 0.02em;
  flex-shrink: 0;
  overflow: hidden;
}
.brand-mark img { width: 100%; height: 100%; object-fit: cover; display: block; }

.brand-text { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.brand-name { font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-sub { font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); color: var(--texto-3); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-caret { color: var(--texto-3); flex-shrink: 0; }
.brand-caret .ico { width: 16px; height: 16px; }

/* No computador, as partes do celular ficam guardadas. */
.topo-celular, .tabbar { display: none; }

/* Rodapé do editor de resumo: o logotipo pequeno (resumo.js o põe). */
.marca { font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); font-weight: 600; color: var(--texto-2); }
.marca .logotipo { height: 14px; }
.marca span { font-weight: 400; color: var(--texto-3); margin-left: 6px; }

/* -------------------------------- Main ---------------------------------- */

.main { flex: 1; min-width: 0; padding: 40px 56px 120px; position: relative; }
.wrap { max-width: 1160px; margin: 0 auto; }

/* Luz que entra pelo alto, como na nave de um templo: um único gradiente
   do próprio osso do texto, fixo e sem cor, atrás de tudo. */
.main::before {
  content: "";
  position: fixed;
  left: var(--sidebar-w);
  right: 0;
  top: 0;
  height: 520px;
  pointer-events: none;
  z-index: 0;
  background: none;
}
:root[data-theme="light"] .main::before {
  background: none;
}
.main > .wrap { position: relative; z-index: 1; }

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px 28px;
  flex-wrap: wrap;
  margin-bottom: 34px;
}

/* Página sem leitura (Contas, Investimentos, uma disciplina, um projeto):
   o título é o momento grande, em Funnel Display leve. */
.topbar h1 {
  margin: 0;
  font-family: var(--font-voz);
  font-size: calc(var(--font-2xl) * var(--escala-fonte, 1));
  font-weight: 300;
  letter-spacing: -0.014em;
  line-height: 1.05;
  text-wrap: balance;
}

.topbar .sub { margin: 10px 0 0; color: var(--texto-2); font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); max-width: 64ch; text-wrap: pretty; }
.topbar-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Página com leitura: quem fala é a leitura, e o título vira cabeça corrida
   — o ícone da aba na cor dela, o nome e a linha de apoio na mesma altura. */
.wrap:has(> .leitura:not([hidden]):not(.hidden)) > .topbar { align-items: center; margin-bottom: 26px; }
.wrap:has(> .leitura:not([hidden]):not(.hidden)) > .topbar h1 {
  font-family: var(--font);
  font-size: calc(var(--font-sm) * var(--escala-fonte, 1));
  font-weight: 650;
  letter-spacing: -0.005em;
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 9px;
}
.wrap:has(> .leitura:not([hidden]):not(.hidden)) > .topbar .sub { margin-top: 4px; font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); color: var(--texto-3); }
.wrap:has(> .leitura:not([hidden]):not(.hidden)) > .topbar .eyebrow { display: none; }
.h1-ic { width: 18px; height: 18px; color: var(--h1-cor, var(--texto-2)); display: grid; place-items: center; font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); flex-shrink: 0; }
.h1-ic .ico { width: 18px; height: 18px; }
.wrap:not(:has(> .leitura:not([hidden]):not(.hidden))) .h1-ic { display: none; }

/* Etiqueta acima do título: só onde carrega informação (a data, o pilar de
   um registro). Caixa normal, sem tracking. */
.eyebrow {
  font-size: calc(var(--font-xs) * var(--escala-fonte, 1));
  font-weight: 500;
  color: var(--texto-3);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.eyebrow::before {
  content: "";
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background: var(--marca, var(--texto-3));
  -webkit-mask: var(--ic-marca, var(--ic-info)) center / contain no-repeat;
  mask: var(--ic-marca, var(--ic-info)) center / contain no-repeat;
}
.eyebrow.data::before, .eyebrow:not(.financeiro):not(.faculdade):not(.projetos):not(.pessoal)::before { display: none; }
.eyebrow.financeiro { --marca: var(--s-financeiro); --ic-marca: var(--ic-financeiro); }
.eyebrow.faculdade { --marca: var(--s-faculdade); --ic-marca: var(--ic-faculdade); }
.eyebrow.projetos { --marca: var(--s-projetos); --ic-marca: var(--ic-projetos); }
.eyebrow.pessoal { --marca: var(--s-pessoal); --ic-marca: var(--ic-pessoal); }

.selos { display: flex; gap: 6px 14px; flex-wrap: wrap; margin-top: 12px; }

/* A leitura: o painel dizendo, em frase, o que os números querem dizer.
   É o título de verdade da página. O tamanho segue o comprimento da frase
   (UI.ajustarLeitura põe data-tam), para nunca virar parede de 6 linhas. */
.leitura {
  font-family: var(--font-voz);
  font-size: calc(var(--font-2xl) * var(--escala-fonte, 1));
  font-weight: 300;
  line-height: 1.14;
  letter-spacing: -0.005em;
  color: var(--texto);
  max-width: 25em;
  margin: 0 0 36px;
  text-wrap: pretty;
}
.leitura[data-tam="g"] { font-size: calc(var(--font-3xl) * var(--escala-fonte, 1)); letter-spacing: -0.008em; }
.leitura[data-tam="m"] { font-size: calc(var(--font-2xl) * var(--escala-fonte, 1)); }
.leitura[data-tam="p"] { font-size: calc(var(--font-xl) * var(--escala-fonte, 1)); line-height: 1.2; letter-spacing: -0.003em; max-width: 30em; }
.leitura[data-tam="pp"] { font-size: calc(var(--font-lg) * var(--escala-fonte, 1)); line-height: 1.24; letter-spacing: 0; max-width: 34em; }
/* 2.2: a voz tem um peso só, então o destaque é pela cor: a frase vem um tom
   abaixo e o que importa (o <b>) sobe para o marfim inteiro. */
.leitura { color: var(--texto-2); }
.leitura b { font-weight: inherit; color: var(--texto); }
.leitura .destaque { color: var(--critical-text); font-weight: inherit; }
.leitura .bem { color: var(--success-text); font-weight: inherit; }
.leitura .saudacao { color: var(--texto-3); }
:root[data-voz="sans"] .leitura b { font-weight: 600; }

/* ------------------------------- Cartões -------------------------------- */

.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-auto { grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }

/* Superfície: só o tom e um fio translúcido — sem sombra cinza genérica. */
.card {
  position: relative;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  box-shadow: var(--brilho);
  padding: 22px;
  min-width: 0;
}

/* Peças afins se encostam, separadas por 1px (campos do perfil). */
.campo {
  gap: 1px;
  background: var(--linha);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.campo > * { border-radius: 0 !important; border: none !important; }

/* Razão de números: toda faixa .g3/.g4 de .stat-value deixa de ser uma
   fileira de cartões iguais e vira colunas abertas, entre dois fios, com
   o valor em Funnel Display leve. Nenhuma página precisa mudar o HTML. */
.grid.g3:has(> .card > .stat-value),
.grid.g4:has(> .card > .stat-value) {
  gap: 0;
  border-top: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
}
.grid.g3:has(> .card > .stat-value) > .card,
.grid.g4:has(> .card > .stat-value) > .card {
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 20px 24px 22px;
}
.grid.g3:has(> .card > .stat-value) > .card:first-child,
.grid.g4:has(> .card > .stat-value) > .card:first-child { padding-left: 0; }
.grid.g3:has(> .card > .stat-value) > .card + .card,
.grid.g4:has(> .card > .stat-value) > .card + .card { border-left: 1px solid var(--linha); }

/* Flex em vez de grade: os cartões da última linha crescem para ocupar a
   largura toda, então 5 ou 7 pilares nunca deixam um buraco no fim. */
.pilares { display: flex; flex-wrap: wrap; }
.pilares > * { flex: 1 1 196px; min-width: 0; }

/* .tinted só define a cor do pilar (--marca); quem identifica é o ícone. */
.card.tinted { --marca: var(--texto-3); }
.card.tinted.financeiro, .pillar.financeiro { --marca: var(--s-financeiro); --ic-marca: var(--ic-financeiro); }
.card.tinted.faculdade, .pillar.faculdade { --marca: var(--s-faculdade); --ic-marca: var(--ic-faculdade); }
.card.tinted.projetos, .pillar.projetos { --marca: var(--s-projetos); --ic-marca: var(--ic-projetos); }
.card.tinted.pessoal, .pillar.pessoal { --marca: var(--s-pessoal); --ic-marca: var(--ic-pessoal); }

.card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 18px;
}

.card-title { font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); font-weight: 650; display: flex; align-items: center; gap: 9px; margin: 0; letter-spacing: -0.008em; }
.card-note { font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); color: var(--texto-3); }

/* O antigo pontinho de cor ao lado do título vira o ícone da área. */
.swatch {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  background: var(--texto-3);
  -webkit-mask: var(--ic-marca, var(--ic-info)) center / contain no-repeat;
  mask: var(--ic-marca, var(--ic-info)) center / contain no-repeat;
}
.swatch.faculdade { background: var(--s-faculdade); --ic-marca: var(--ic-faculdade); }
.swatch.projetos { background: var(--s-projetos); --ic-marca: var(--ic-projetos); }
.swatch.financeiro { background: var(--s-financeiro); --ic-marca: var(--ic-financeiro); }
.swatch.pessoal { background: var(--s-pessoal); --ic-marca: var(--ic-pessoal); }
/* Cartão de crédito: o bronze dos gastos com o desenho de cartão. */
.swatch.cartao { background: var(--s-projetos); --ic-marca: var(--ic-cartao); }
/* Pontinho de cor dado inline (abas próprias, itens da agenda): continua
   ponto, porque ali a cor é o único dado e não há ícone a desenhar. */
.swatch[style] { width: 8px; height: 8px; border-radius: 50%; -webkit-mask: none; mask: none; }

.pillar {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: background 0.14s;
}
.pillar-ic { width: 20px; height: 20px; color: var(--marca, var(--tint, var(--texto-3))); margin-bottom: 14px; display: grid; place-items: center; font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); }
.pillar-ic .ico { width: 20px; height: 20px; }
.pillar:hover { background: var(--superficie-2); }
.pillar .arrow { color: var(--texto-3); font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); margin-top: auto; padding-top: 14px; font-weight: 500; }
.pillar:hover .arrow { color: var(--texto); }

/* ------------------------- Números / faixas ------------------------------ */

.stat-label { font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); font-weight: 500; color: var(--texto-3); margin-bottom: 8px; }
.stat-value {
  font-family: var(--font-voz);
  font-size: calc(var(--font-xl) * var(--escala-fonte, 1));
  font-weight: 350;
  letter-spacing: -0.004em;
  line-height: 1.05;
}
.stat-sub { font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); color: var(--texto-3); margin-top: 8px; line-height: 1.45; }
.stat-sub.up { color: var(--success-text); }
.stat-sub.down { color: var(--critical-text); }
.stat-sub b { color: var(--texto); font-weight: 600; }

/* Dinheiro grande: R$ e centavos menores (UI.dinheiroGrande), o inteiro lê primeiro. */
.rs { font-size: 0.5em; font-weight: 400; color: var(--texto-3); letter-spacing: 0; margin-right: 0.18em; vertical-align: 0.42em; }
.cent { font-size: 0.6em; letter-spacing: -0.01em; }
/* O sinal (UI.dinheiroGrande): cola no número, com o mesmo peso dos algarismos. */
.sinal { margin-right: -0.03em; }
.sinal.menos { color: var(--critical-text); }

.hero { padding: 24px; }
.hero-value { font-family: var(--font-voz); font-size: calc(var(--font-3xl) * var(--escala-fonte, 1)); font-weight: 300; letter-spacing: -0.016em; line-height: 1; margin-top: 6px; }

.delta { font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); font-weight: 550; display: inline-flex; align-items: center; gap: 3px; }
.delta-ic { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; }
.stat-value.delta { font-size: calc(var(--font-xl) * var(--escala-fonte, 1)); }
.hero-value.delta { font-size: calc(var(--font-3xl) * var(--escala-fonte, 1)); }
.delta.up { color: var(--success-text); }
.delta.down { color: var(--critical-text); }
.delta.flat { color: var(--texto-2); }

.num { font-variant-numeric: tabular-nums; }
/* Número grande sozinho usa algarismos proporcionais: tabular deixa "121" frouxo. */
.stat-value.num, .hero-value.num, .stat-value, .hero-value { font-variant-numeric: proportional-nums; }

/* -------------------------------- Listas -------------------------------- */

.list { list-style: none; margin: 0; padding: 0; }

.list li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--linha);
  font-size: calc(var(--font-sm) * var(--escala-fonte, 1));
}
.list li:first-child { padding-top: 4px; }
.list li:last-child { border-bottom: none; padding-bottom: 4px; }
.list .grow { flex: 1; min-width: 0; }

.linha-link { text-decoration: none; color: inherit; display: block; border-radius: var(--r-xs); }
.linha-link:hover .title { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.list .title { font-weight: 550; display: block; }
.list .meta { font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); color: var(--texto-3); margin-top: 2px; display: block; }

.titulo-link { text-decoration: none; color: inherit; }
.titulo-link:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

.row-actions { display: flex; gap: 2px; flex-shrink: 0; }

.list .row-actions {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
  padding-left: 28px;
  background: linear-gradient(90deg, transparent, var(--superficie) 26px);
  transition: opacity 0.12s;
}
.list li:hover .row-actions,
.list li:focus-within .row-actions { opacity: 1; pointer-events: auto; }
/* Onde a linha já tem um botão à direita (marcar hoje), as ações ficam sempre à vista, sem cobri-lo. */
.list .row-actions.fixas { position: static; transform: none; opacity: 1; pointer-events: auto; padding-left: 0; background: none; }

@media (hover: none) {
  .list .row-actions { position: static; transform: none; opacity: 1; pointer-events: auto; padding-left: 0; background: none; }
}

/* ------------------------------- Selos ---------------------------------- */

/* Selo é texto, não pílula: a palavra e a cor dela bastam ("em 2 dias" em
   âmbar, "atrasado" em vermelho). Pílula em toda linha era ruído. */
.badge {
  font-size: calc(var(--font-xs) * var(--escala-fonte, 1));
  font-weight: 550;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--texto-2);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  line-height: 18px;
  font-variant-numeric: tabular-nums;
}

/* Selo "fixo: Aluguel" na revisão da importação: é botão (alterna para
   "lançar como novo"), então precisa parecer tocável sem virar cor de status. */
button.badge.fixo { border: 1px solid var(--linha-forte); border-radius: 999px; padding: 2px 10px; background: var(--superficie-2); cursor: pointer; font: inherit; font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); font-weight: 500; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
button.badge.fixo:hover { border-color: var(--texto-3); }
button.badge.fixo.desligado { background: transparent; color: var(--texto-3); }
table.tabela-importar [data-escolher-fixo] { width: 100%; }

/* Selo de pilar: o ícone da área na cor dela e o nome em tinta normal —
   texto pintado na cor da série fica ilegível no fundo. */
.badge.faculdade, .badge.projetos, .badge.financeiro, .badge.pessoal { color: var(--texto-2); font-weight: 500; }
.badge.faculdade::before, .badge.projetos::before, .badge.financeiro::before, .badge.pessoal::before {
  content: ""; width: 13px; height: 13px; background: var(--marca);
  -webkit-mask: var(--ic-marca) center / contain no-repeat; mask: var(--ic-marca) center / contain no-repeat;
}
.badge.faculdade { --marca: var(--s-faculdade); --ic-marca: var(--ic-faculdade); }
.badge.projetos { --marca: var(--s-projetos); --ic-marca: var(--ic-projetos); }
.badge.financeiro { --marca: var(--s-financeiro); --ic-marca: var(--ic-financeiro); }
.badge.pessoal { --marca: var(--s-pessoal); --ic-marca: var(--ic-pessoal); }

.badge.atrasado, .badge.hoje { color: var(--critical-text); }
.badge.urgente { color: var(--warning-text); }
.badge.proximo { color: var(--texto-2); }
.badge.futuro { color: var(--texto-3); font-weight: 500; }
.badge.feito { color: var(--success-text); }

/* ------------------------------- Avisos --------------------------------- */

.notice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 13px 16px;
  border-radius: var(--r-md);
  font-size: calc(var(--font-sm) * var(--escala-fonte, 1));
  line-height: 1.5;
  border: none;
  background: color-mix(in srgb, var(--texto) 4.5%, transparent);
  margin-bottom: 10px;
}

/* O glifo que as páginas escrevem (▲, !, i) vira um ícone desenhado. */
.notice .ic {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  font-size: 0;
  color: transparent;
  background: var(--texto-3);
  -webkit-mask: var(--ic-info) center / contain no-repeat;
  mask: var(--ic-info) center / contain no-repeat;
}
.notice.critical { background: color-mix(in srgb, var(--st-critical) 11%, transparent); }
.notice.critical .ic { background: var(--st-critical); -webkit-mask-image: var(--ic-critico); mask-image: var(--ic-critico); }
.notice.warning { background: color-mix(in srgb, var(--st-warning) 10%, transparent); }
.notice.warning .ic { background: var(--st-warning); -webkit-mask-image: var(--ic-alerta); mask-image: var(--ic-alerta); }
.notice.info .ic { background: var(--texto-2); }

/* ------------------------------ Gráficos -------------------------------- */

.chart-row { display: flex; align-items: center; gap: 14px; margin-bottom: 11px; }
.chart-row:last-child { margin-bottom: 0; }
.chart-name { width: 128px; flex-shrink: 0; font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Barra de comparação sem trilho: o valor escrito ao lado já dá a escala. */
.chart-track { flex: 1; background: none; border-radius: 4px; height: 10px; overflow: hidden; }
.chart-bar {
  height: 100%;
  border-radius: 0 4px 4px 0;
  transition: opacity 0.3s ease;
  min-width: 2px;
}
.chart-value {
  width: 104px;
  flex-shrink: 0;
  text-align: right;
  font-size: calc(var(--font-sm) * var(--escala-fonte, 1));
  font-weight: 550;
  font-variant-numeric: tabular-nums;
}

.cols { display: flex; align-items: flex-end; gap: 14px; padding-top: 8px; }
.col-group { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.col-bars { display: flex; align-items: flex-end; gap: 2px; width: 100%; justify-content: center; }
.col-bar {
  flex: 1 1 0;
  min-width: 0;
  max-width: 20px;
  border-radius: 4px 4px 0 0;
  transition: opacity 0.3s ease;
}
.col-label { font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); color: var(--texto-3); white-space: nowrap; }

.legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 16px; }
.legend-item { display: flex; align-items: center; gap: 7px; font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); color: var(--texto-2); }
.legend-key { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.legend-key.linha { height: 2px; width: 14px; border-radius: 2px; }

.mini-stats {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  padding: 2px 0 14px;
  border-bottom: 1px solid var(--linha);
  margin-bottom: 16px;
}
.mini-valor { font-family: var(--font-voz); font-size: calc(var(--font-md) * var(--escala-fonte, 1)); font-weight: 450; letter-spacing: 0; }

.meter { margin-bottom: 18px; min-width: 220px; }
.meter:last-child { margin-bottom: 0; }
.meter-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; margin-bottom: 8px; }
.meter-track { background: var(--track); border-radius: 999px; height: 8px; overflow: hidden; }
.meter-fill { height: 100%; border-radius: 999px; }

/* Dica flutuante dos gráficos: o valor na frente, o nome atrás. */
.dica-grafico {
  position: fixed;
  z-index: 300;
  pointer-events: none;
  background: var(--superficie-3);
  border: 1px solid var(--linha-forte);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-lift);
  padding: 8px 11px;
  font-size: calc(var(--font-xs) * var(--escala-fonte, 1));
  line-height: 1.45;
  min-width: 140px;
}
.dica-grafico .t { color: var(--texto-3); margin-bottom: 3px; }
.dica-grafico .l { display: flex; align-items: center; gap: 8px; }
.dica-grafico .l i { width: 12px; height: 2px; border-radius: 2px; flex-shrink: 0; }
.dica-grafico .l b { font-weight: 600; font-variant-numeric: tabular-nums; }
.dica-grafico .l span { color: var(--texto-2); }

/* ------------------------------- Tabela --------------------------------- */

.table-wrap { overflow-x: auto; border: 0; border-top: 1px solid var(--linha-forte); border-radius: 0; background: none; }

table.sheet { width: 100%; border-collapse: collapse; font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); }

table.sheet th {
  text-align: left;
  background: var(--superficie);
  color: var(--texto-3);
  font-size: calc(var(--font-xs) * var(--escala-fonte, 1));
  font-weight: 500;
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--linha);
  white-space: nowrap;
  position: sticky;
  top: 0;
}

table.sheet td { padding: 12px 16px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
table.sheet tbody tr:last-child td { border-bottom: none; }
table.sheet tbody tr:hover { background: color-mix(in srgb, var(--superficie-2) 70%, transparent); }
table.sheet td.right { text-align: right; font-variant-numeric: tabular-nums; font-weight: 550; }
table.sheet .row-actions { justify-content: flex-end; opacity: 0; transition: opacity 0.12s; }
table.sheet tbody tr:hover .row-actions,
table.sheet tbody tr:focus-within .row-actions { opacity: 1; }
@media (hover: none) { table.sheet .row-actions { opacity: 1; } }

.tfoot-row { background: var(--superficie-2); font-weight: 550; }
.tfoot-row td { border-top: 1px solid var(--linha); font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); }

/* ----------------------------- Estado vazio ------------------------------ */

.empty { text-align: center; padding: 36px 16px; }
/* Cartão que só tem o estado vazio: some a superfície, fica um contorno
   tracejado — é um espaço a preencher, não um objeto. */
.card:has(> .empty:only-child), .card:has(> :only-child > .empty:only-child) {
  background: none;
  box-shadow: none;
  border: 1px dashed var(--linha-forte);
}
.card > .empty:only-child { padding: 28px 16px; }
.empty-icon {
  margin: 0 auto 14px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--r-lg);
  background: var(--superficie-2);
  color: var(--texto-2);
}
.empty-icon .ico { width: 22px; height: 22px; }
.empty-title { font-family: var(--font-voz); font-weight: 500; font-size: calc(var(--font-md) * var(--escala-fonte, 1)); letter-spacing: 0; margin-bottom: 6px; }
.empty-text { font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); color: var(--texto-3); margin-bottom: 18px; max-width: 380px; margin-inline: auto; line-height: 1.6; }

/* -------------------------------- Modal --------------------------------- */

.backdrop {
  position: fixed;
  inset: 0;
  background: rgba(6, 6, 5, 0.6);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  display: grid;
  place-items: center;
  padding: 20px;
  z-index: 100;
  animation: fade 0.14s ease;
}
:root[data-theme="light"] .backdrop { background: rgba(17, 17, 16, 0.28); }

@keyframes fade { from { opacity: 0; } }

/* ------------------------------ Modo leve ---------------------------------
   Para computador mais simples (UI.aparelhoFraco, ou escolhido no perfil em
   Aparência → Desempenho). Tira o que custa à placa de vídeo e ao processador
   sem mudar o que a página mostra: o desfoque atrás das janelas (refeito a
   cada quadro), as sombras grandes, as animações e transições. Durações vão
   a quase zero, e não a zero, para os eventos de fim de animação seguirem
   chegando. */
:root[data-leve="sim"] {
  --shadow-pop: 0 0 0 1px var(--linha-forte);
  --shadow-lift: 0 0 0 1px var(--linha);
}
:root[data-leve="sim"] .main::before { display: none; }
:root[data-leve="sim"] .backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(6, 6, 5, 0.78); }
:root[data-leve="sim"][data-theme="light"] .backdrop { background: rgba(17, 17, 16, 0.45); }
:root[data-leve="sim"] *, :root[data-leve="sim"] *::before, :root[data-leve="sim"] *::after {
  animation-duration: 0.01ms !important;
  animation-delay: 0s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(0.99); } }

.modal {
  background: var(--superficie);
  border: 1px solid var(--linha-forte);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-pop), var(--brilho);
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  animation: pop 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
  overscroll-behavior: contain;
}

.modal.wide { max-width: 620px; }
.modal.xwide { max-width: 880px; }

.modal-head { padding: 26px 28px 0; }
.modal-title {
  font-family: var(--font-voz);
  font-size: calc(var(--font-lg) * var(--escala-fonte, 1));
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.15;
  text-wrap: balance;
}
.modal-desc { font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); color: var(--texto-2); margin: 9px 0 0; line-height: 1.55; }
.modal-body { padding: 22px 28px; display: flex; flex-direction: column; gap: 16px; }
.modal-foot { padding: 4px 28px 24px; display: flex; gap: 8px; justify-content: flex-end; }

.form-secao {
  font-size: calc(var(--font-xs) * var(--escala-fonte, 1));
  font-weight: 600;
  color: var(--texto);
  padding-top: 14px;
  border-top: 1px solid var(--linha);
  margin-top: 4px;
}
.modal-body > .form-secao:first-child { margin-top: 0; padding-top: 0; border-top: none; }

.field { display: flex; flex-direction: column; gap: 7px; }
.field label, .field > .label { font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); font-weight: 500; color: var(--texto-2); }
.field label .muted { font-weight: 400; }
.field .hint { font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); color: var(--texto-3); line-height: 1.5; }

/* Formulário (UI.formulario): cabeçalho com o ícone da aba, campos curtos
   lado a lado, datas com atalhos, dinheiro com R$ fixo e conta rápida. */
.modal.formulario { max-width: 540px; }
.modal.formulario.wide { max-width: 640px; }
.modal-head.com-marca { display: flex; gap: 15px; align-items: flex-start; }
.modal-head-texto { min-width: 0; flex: 1; }
.modal-ic {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: var(--r-lg);
  display: grid;
  place-items: center;
  color: var(--ic-cor);
  background: color-mix(in srgb, var(--ic-cor) 13%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ic-cor) 24%, transparent);
  font-size: calc(var(--font-sm) * var(--escala-fonte, 1));
  margin-top: 1px;
}
.modal-ic .ico { width: 21px; height: 21px; }
.modal-body.form-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
.form-grade > .inteira, .form-grade > .form-secao { grid-column: 1 / -1; }
.form-grade > .form-secao { margin-top: 2px; }

.field label { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.data-extenso { font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); font-weight: 400; color: var(--texto-3); text-align: right; }
.data-extenso::first-letter { text-transform: uppercase; }
.data-linha { display: flex; flex-direction: column; gap: 8px; }
.datas-rapidas { display: flex; gap: 5px; flex-wrap: wrap; }
.chip.mini { padding: 3px 10px; font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); line-height: 17px; }

.campo-dinheiro { position: relative; }
.campo-dinheiro .prefixo {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--texto-3); font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); font-weight: 500; pointer-events: none;
}
.field .campo-dinheiro input[data-dinheiro] { padding-left: 36px !important; font-variant-numeric: tabular-nums; }
.conta-resultado {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  color: var(--texto-3); font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); pointer-events: none; font-variant-numeric: tabular-nums;
}
.field .campo-dinheiro.destaque input[data-dinheiro] {
  font-family: var(--font-voz); font-size: calc(var(--font-xl) * var(--escala-fonte, 1)) !important; font-weight: 350; letter-spacing: -0.012em; line-height: 1.2 !important;
  padding: 12px 14px 12px 52px !important; border-radius: var(--r-md) !important;
}
.campo-dinheiro.destaque .prefixo { font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); left: 17px; }

.opcoes-chips { gap: 6px; }

@keyframes tremor { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
.field.tem-erro input, .field.tem-erro select, .field.tem-erro textarea, .field.tem-erro .seg { border-color: var(--st-critical) !important; }
.field.tem-erro { animation: tremor 0.32s var(--ease-troca, ease) 1; }

.modal-foot { align-items: center; }
/* Formulários longos rolam por dentro; o rodapé com Salvar fica sempre à vista. */
.modal.formulario .modal-foot {
  position: sticky; bottom: 0; z-index: 3;
  background: var(--superficie);
  border-top: 1px solid var(--linha);
  padding-top: 14px; padding-bottom: 18px;
  border-radius: 0 0 var(--r-xl) var(--r-xl);
}

/* Janela de lançamento (lancamento.js) */
.modal.lancamento { max-width: 600px; }
.modal-body.lanc { gap: 18px; }
.lanc-tipo { padding: 4px; }
.lanc-tipo button { padding: 10px 12px; font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.lanc-tipo button .ico { width: 17px; height: 17px; }
.modal.lancamento[data-tipo="despesa"] .lanc-tipo button[aria-pressed="true"] .ico { color: var(--serie-saida); }
.modal.lancamento[data-tipo="receita"] .lanc-tipo button[aria-pressed="true"] .ico { color: var(--serie-entrada); }
.modal.lancamento[data-tipo="despesa"] .campo-dinheiro.destaque .prefixo { color: var(--serie-saida); }
.modal.lancamento[data-tipo="receita"] .campo-dinheiro.destaque .prefixo { color: var(--serie-entrada); }
.modal.lancamento[data-tipo="despesa"] .campo-dinheiro.destaque input:focus { border-color: var(--serie-saida); box-shadow: 0 0 0 3px color-mix(in srgb, var(--serie-saida) 18%, transparent); }
.modal.lancamento[data-tipo="receita"] .campo-dinheiro.destaque input:focus { border-color: var(--serie-entrada); box-shadow: 0 0 0 3px color-mix(in srgb, var(--serie-entrada) 18%, transparent); }
.modal.lancamento .modal-desc { font-family: var(--font-voz); font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); font-weight: 450; letter-spacing: 0; color: var(--texto); line-height: 1.4; min-height: 1.4em; }
.lanc-duas { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.lanc-cats, [data-origens] { gap: 6px; }
[data-origens] .chip { display: inline-flex; align-items: center; gap: 6px; }
[data-origens] .chip .ico { width: 15px; height: 15px; }
.chip.fantasma { border-style: dashed; color: var(--texto-3); }
.cat-nova { width: 160px; border-radius: 999px !important; }
.link-mini {
  border: none; background: none; padding: 0; font: inherit; font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); font-weight: 500;
  color: var(--texto-3); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--linha-forte);
}
.link-mini:hover { color: var(--texto); }
.lanc-mais { border-top: 1px solid var(--linha); padding-top: 4px; }
.lanc-mais summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); font-weight: 500; color: var(--texto-2); padding: 8px 0;
}
.lanc-mais summary::-webkit-details-marker { display: none; }
.lanc-mais summary .ico { width: 16px; height: 16px; transition: transform var(--t-medio, 0.28s) var(--ease-saida, ease); }
.lanc-mais[open] summary .ico { transform: rotate(90deg); }
.lanc-mais summary:hover { color: var(--texto); }
.lanc-mais-corpo { display: flex; flex-direction: column; gap: 14px; padding: 6px 0 2px; }
.lanc-opcao {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 14px; border: 1px solid var(--linha); border-radius: var(--r-md); background: var(--fundo); cursor: pointer;
}
.lanc-opcao b { display: block; font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); font-weight: 550; }
.lanc-opcao span { display: block; font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); color: var(--texto-3); margin-top: 2px; line-height: 1.45; }
.lanc-parcelas { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.lanc-parcelas input { width: 70px; text-align: center; }
.lanc-parcelas span { margin: 0; font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); color: var(--texto-2); }

.modal-foot-espaco { flex: 1; }
.modal-atalho { font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); color: var(--texto-3); }

/* Só caixa de texto vira caixa de texto: sem o :not, a regra pegava também
   o checkbox (100% de largura) e empurrava o campo ao lado para fora. */
.input,
.field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
.field select,
.field textarea {
  width: 100%;
  background: var(--fundo);
  border: 1px solid var(--linha-forte);
  color: var(--texto);
  padding: 9px 12px;
  border-radius: var(--r-sm);
  font-size: calc(var(--font-sm) * var(--escala-fonte, 1));
  font-family: var(--font);
  line-height: 20px;
  transition: border-color 0.12s, box-shadow 0.12s;
}

select.input,
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  background-image: var(--seta-select);
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 17px;
  cursor: pointer;
}

.input::placeholder, .field input::placeholder, .field textarea::placeholder { color: var(--texto-3); }

.field textarea { resize: vertical; min-height: 96px; line-height: 1.6; }

.input.sm { padding: 6px 9px; font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); }
select.input.sm { padding-right: 28px; background-position: right 6px center; background-size: 15px; }

.input:focus,
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--texto-2);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--texto) 12%, transparent);
}

.field .err { font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); color: var(--critical-text); font-weight: 500; }

/* Escolha única em linha */
.seg { display: flex; gap: 2px; border: 1px solid var(--linha-forte); border-radius: var(--r-md); padding: 3px; background: var(--fundo); }
.seg button {
  flex: 1;
  padding: 8px 11px;
  border: none;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--texto-2);
  font-size: calc(var(--font-sm) * var(--escala-fonte, 1));
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  transition: background 0.14s, color 0.14s;
}
.seg button:hover { color: var(--texto); }
.seg button[aria-pressed="true"] { background: var(--superficie-3); color: var(--texto); box-shadow: inset 0 0 0 1px var(--linha-forte); }
.seg.sm { padding: 2px; }
.seg.sm button { padding: 5px 10px; font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); }

/* Interruptor (liga/desliga) — para o que é de fato ligar e desligar. */
.switch {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 38px;
  height: 22px;
  margin: 0;
  border-radius: 999px;
  background: var(--superficie-3);
  border: 1px solid var(--linha-forte);
  position: relative;
  cursor: pointer;
  transition: background 0.16s, border-color 0.16s;
}
.switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--texto-2);
  transition: transform 0.16s cubic-bezier(0.3, 0.7, 0.3, 1), background 0.16s;
}
.switch:checked { background: var(--destaque); border-color: var(--destaque); }
.switch:checked::after { transform: translateX(16px); background: var(--sobre-claro); }

/* Abas de uma página (sublinhado): Financeiro, perfil. */
.abas {
  display: flex;
  gap: 24px;
  border-bottom: 1px solid var(--linha);
  margin: 0 0 28px;
  overflow-x: auto;
  scrollbar-width: none;
}
.abas::-webkit-scrollbar { display: none; }
.abas > a, .abas > button {
  flex-shrink: 0;
  padding: 10px 0 11px;
  margin-bottom: -1px;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--texto-3);
  font: inherit;
  font-size: calc(var(--font-sm) * var(--escala-fonte, 1));
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.12s, border-color 0.12s;
}
.abas > a:hover, .abas > button:hover { color: var(--texto); }
.abas > [aria-current="page"], .abas > [aria-selected="true"] { color: var(--texto); border-bottom-color: var(--texto); }

/* Filtros em pílula */
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  border: 1px solid var(--linha-forte);
  background: transparent;
  color: var(--texto-2);
  padding: 6px 13px;
  border-radius: var(--r-sm);
  font: inherit;
  font-size: calc(var(--font-sm) * var(--escala-fonte, 1));
  font-weight: 500;
  line-height: 18px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.chip:hover { color: var(--texto); border-color: var(--texto-3); }
.chip[aria-pressed="true"] { background: var(--destaque); border-color: var(--destaque); color: var(--sobre-destaque); }

/* ---------------------------- Perfil (pop-up) ---------------------------- */

.modal.perfil { max-width: 640px; }

.perfil-topo {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 28px 28px 22px;
}

.avatar {
  width: 76px;
  height: 76px;
  border-radius: 24px;
  background: var(--superficie-3);
  color: var(--texto);
  display: grid;
  place-items: center;
  font-size: calc(var(--font-lg) * var(--escala-fonte, 1));
  font-weight: 550;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* A foto é o próprio botão de trocar a foto. */
.avatar-botao {
  position: relative;
  padding: 0;
  border: none;
  background: none;
  border-radius: 24px;
  cursor: pointer;
  flex-shrink: 0;
  color: inherit;
}
.avatar-botao .avatar-cam {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--texto);
  color: var(--sobre-claro);
  border: 3px solid var(--superficie);
}
.avatar-botao .avatar-cam .ico { width: 14px; height: 14px; }
.avatar-botao:hover .avatar { filter: brightness(1.08); }

.perfil-nome { font-family: var(--font-voz); font-size: calc(var(--font-xl) * var(--escala-fonte, 1)); font-weight: 500; letter-spacing: -0.012em; line-height: 1.1; }
.perfil-linha { font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); color: var(--texto-2); margin-top: 6px; }
.perfil-linha.muted { color: var(--texto-3); margin-top: 2px; }
.perfil-foto-acoes { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }

.perfil-abas { padding: 0 28px; margin: 0; }
.perfil-painel { padding: 24px 28px 8px; display: flex; flex-direction: column; gap: 22px; min-height: 280px; }

.perfil-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--linha);
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
  overflow: hidden;
}
.perfil-stat { background: var(--superficie); padding: 14px 16px; }
.perfil-stat b { display: block; font-family: var(--font-voz); font-size: calc(var(--font-lg) * var(--escala-fonte, 1)); font-weight: 400; letter-spacing: -0.01em; }
.perfil-stat span { font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); color: var(--texto-3); }

.ficha { margin: 0; display: flex; flex-direction: column; }
.ficha > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  padding: 11px 0;
  border-bottom: 1px solid var(--linha);
}
.ficha > div:first-child { padding-top: 0; }
.ficha > div:last-child { border-bottom: none; padding-bottom: 0; }
.ficha dt { font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); color: var(--texto-3); flex-shrink: 0; }
.ficha dd { margin: 0; font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); font-weight: 500; text-align: right; min-width: 0; overflow-wrap: anywhere; }

.perfil-texto .rotulo { font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); color: var(--texto-3); margin-bottom: 4px; }
.perfil-texto p { margin: 0; font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); color: var(--texto); line-height: 1.6; white-space: pre-wrap; }

/* Bloco de ajuste: título, explicação curta e o controle. */
.ajuste { display: flex; flex-direction: column; gap: 10px; }
.ajuste-titulo { font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); font-weight: 600; }
.ajuste-texto { font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); color: var(--texto-3); margin-top: -6px; line-height: 1.5; }

/* Escolha de tema por amostra, não por palavra. */
.temas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.temas.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tema-amostra.auto { background: var(--superficie-2); box-shadow: inset 0 0 0 1px var(--linha-forte); }
.tema-amostra.auto i { background: linear-gradient(135deg, #0b0b0b 50%, #e5e0d6 50%); }
.tema-amostra.auto i:last-child { background: linear-gradient(135deg, #181817 50%, #f6f3ed 50%); }
.tema-opcao {
  border: 1px solid var(--linha-forte);
  border-radius: var(--r-md);
  background: var(--fundo);
  padding: 10px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--texto);
  display: flex;
  flex-direction: column;
  gap: 9px;
  transition: border-color 0.12s;
}
.tema-opcao:hover { border-color: var(--texto-3); }
.tema-opcao[aria-pressed="true"] { border-color: var(--destaque); box-shadow: 0 0 0 1px var(--destaque); }
.tema-amostra { height: 58px; border-radius: var(--r-md); display: flex; gap: 5px; padding: 8px; }
.tema-amostra i { display: block; border-radius: 4px; }
.tema-amostra i:first-child { width: 26%; }
.tema-amostra i:last-child { flex: 1; }
.tema-amostra.escuro { background: #111110; }
.tema-amostra.escuro i { background: #0b0b0b; }
.tema-amostra.escuro i:last-child { background: #181817; box-shadow: inset 0 0 0 1px rgba(237, 233, 225, 0.08); }
.tema-amostra.claro { background: #ede9e1; box-shadow: inset 0 0 0 1px rgba(17, 17, 16, 0.09); }
.tema-amostra.claro i { background: #e5e0d6; }
.tema-amostra.claro i:last-child { background: #f6f3ed; box-shadow: inset 0 0 0 1px rgba(17, 17, 16, 0.09); }
.tema-nome { font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); font-weight: 500; display: flex; align-items: center; justify-content: space-between; }
.tema-nome .ico { width: 16px; height: 16px; opacity: 0; }
.tema-opcao[aria-pressed="true"] .tema-nome .ico { opacity: 1; }

/* Abas do painel: ícone, nome editável e interruptor. */
.abas-lista { list-style: none; margin: 0; padding: 0; border: 1px solid var(--linha); border-radius: var(--r-md); overflow: hidden; }
.abas-lista li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--linha); background: var(--superficie); }
.abas-lista li:last-child { border-bottom: none; }
.abas-lista li.desligada .nav-icon { --cor-aba: var(--texto-3); }
.abas-lista .aba-nome {
  flex: 1;
  min-width: 0;
  border: 1px solid transparent;
  background: transparent;
  color: var(--texto);
  font: inherit;
  font-size: calc(var(--font-sm) * var(--escala-fonte, 1));
  font-weight: 500;
  padding: 5px 8px;
  margin-left: -8px;
  border-radius: var(--r-md);
}
.abas-lista .aba-nome:hover { border-color: var(--linha); }
.abas-lista .aba-nome:focus { outline: none; border-color: var(--linha-forte); background: var(--fundo); }
.abas-lista .aba-nome:disabled { color: var(--texto-3); }
.abas-lista .aba-nome.fixo { padding: 5px 0; margin-left: 0; border: none; }
.abas-lista li { gap: 10px; padding: 8px 12px 8px 6px; }
.ordem-setas { display: flex; flex-direction: column; gap: 0; flex-shrink: 0; }
.ordem-setas .btn.sm.icon { padding: 1px 4px; }
.ordem-setas .btn .ico { width: 14px; height: 14px; }
.ordem-setas .btn:disabled { opacity: 0.25; }

/* Linhas de ajuste do perfil: título e explicação à esquerda, controle à direita. */
.ajuste-linha { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--linha); }
.ajuste-linha:last-child { border-bottom: none; padding-bottom: 0; }
.ajuste-linha:first-child { padding-top: 0; }
.ajuste-linha.compacta { padding: 9px 0; }
.ajuste-linha.embaixo { flex-direction: column; align-items: flex-start; gap: 10px; }
.ajuste-rotulo { min-width: 0; }
.ajuste-rotulo .t { display: block; font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); font-weight: 550; }
.ajuste-rotulo .d { display: block; font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); color: var(--texto-3); margin-top: 2px; line-height: 1.45; }
.ajuste-controle { flex-shrink: 0; }
.ajuste-controle select.input { width: auto; min-width: 170px; }
.ajuste-controle .seg { min-width: 220px; }

.destaques { display: flex; gap: 8px; flex-wrap: wrap; }
.destaque-opcao {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--linha-forte); background: var(--fundo); color: var(--texto);
  border-radius: 999px; padding: 6px 13px 6px 7px; font: inherit; font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); font-weight: 500; cursor: pointer;
}
.destaque-opcao i { width: 20px; height: 20px; border-radius: 50%; background: var(--amostra); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.destaque-opcao[aria-pressed="true"] { border-color: var(--amostra); box-shadow: 0 0 0 1px var(--amostra); }

.perfil-stats.seis { grid-template-columns: repeat(3, minmax(0, 1fr)); }

dl.atalhos { margin: 0; display: flex; flex-direction: column; }
dl.atalhos > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--linha); align-items: center; }
dl.atalhos > div:last-child { border-bottom: none; }
dl.atalhos dt { flex-shrink: 0; }
dl.atalhos dd { margin: 0; font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); color: var(--texto-2); text-align: right; }
kbd {
  display: inline-block; min-width: 24px; padding: 2px 7px; border-radius: var(--r-xs); text-align: center;
  font:500 calc(var(--font-xs) * var(--escala-fonte, 1))/calc(var(--font-sm) * var(--escala-fonte, 1)) var(--font); color: var(--texto);
  background: var(--superficie-2); box-shadow: inset 0 -1px 0 var(--linha-forte), inset 0 0 0 1px var(--linha);
}

/* Menu de ações do perfil: linhas clicáveis com ícone e explicação. */
.menu-acoes { display: flex; flex-direction: column; border: 1px solid var(--linha); border-radius: var(--r-md); overflow: hidden; }
.menu-acao {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border: none;
  border-bottom: 1px solid var(--linha);
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s;
}
.menu-acao:last-child { border-bottom: none; }
.menu-acao:hover { background: var(--superficie-2); }
.menu-acao > .ico { width: 20px; height: 20px; color: var(--texto-2); }
.menu-acao .t { display: block; font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); font-weight: 550; }
.menu-acao .d { display: block; font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); color: var(--texto-3); margin-top: 1px; line-height: 1.45; }
.menu-acao .grow { flex: 1; min-width: 0; }
.menu-acao .seta { width: 16px; height: 16px; color: var(--texto-3); }
.menu-acao.perigo .t, .menu-acao.perigo > .ico { color: var(--critical-text); }

.perfil-ajustes { display: flex; flex-direction: column; gap: 12px; }

/* ------------------------------- Anexos ---------------------------------- */

.dropzone {
  border: 1.5px dashed var(--linha-forte);
  border-radius: var(--r-md);
  padding: 24px 16px 22px;
  text-align: center;
  cursor: pointer;
  background: var(--fundo);
  transition: border-color 0.14s, background 0.14s;
  font-size: calc(var(--font-xs) * var(--escala-fonte, 1));
  color: var(--texto-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.dz-icone {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--superficie-2);
  color: var(--texto-2);
  margin-bottom: 10px;
  transition: background 0.14s, color 0.14s, transform 0.18s;
}
.dz-icone .ico { width: 22px; height: 22px; }
.dropzone:hover, .dropzone.dragover { border-color: var(--texto-3); background: var(--superficie-2); color: var(--texto-2); }
.dropzone:hover .dz-icone { background: var(--superficie-3); color: var(--texto); }
.dropzone.dragover .dz-icone { background: var(--texto); color: var(--sobre-claro); transform: translateY(-2px); }
.dropzone strong { display: block; font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); font-weight: 550; margin-bottom: 2px; color: var(--texto); }

/* Linha que o Delfos suspeita já ter sido lançada à mão — destacada, mas sem
   tirar o fio de leitura das outras. */
table.sheet tr.linha-duvidosa { background: var(--st-warning-wash); }
table.sheet tr.linha-duvidosa:hover { background: var(--st-warning-wash); }

/* Colunas fixas pela revisão de importação: a descrição (o que a pessoa
   confere e às vezes reescreve) recebe o espaço que sobra. */
table.tabela-importar { table-layout: fixed; }
table.tabela-importar td, table.tabela-importar th { overflow: hidden; padding: 8px 6px; }
table.tabela-importar th:first-child, table.tabela-importar td:first-child { padding-left: 10px; }
table.tabela-importar [data-descricao] { width: 100%; }
table.tabela-importar [data-data], table.tabela-importar [data-quantia] { width: 100%; }
table.tabela-importar [data-quantia] { text-align: right; }
table.tabela-importar .seg.sm button { padding: 5px 7px; }

.anexos { display: flex; flex-direction: column; gap: 6px; }

.anexo {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--linha);
  border-radius: var(--r-sm);
  background: var(--fundo);
  font-size: calc(var(--font-sm) * var(--escala-fonte, 1));
  font-family: var(--font);
  text-align: left;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.12s, background 0.12s;
}
a.anexo:hover, button.anexo:hover { border-color: var(--linha-forte); background: var(--superficie-2); cursor: pointer; }

.anexo-ic {
  width: 30px;
  height: 34px;
  border-radius: var(--r-xs) 9px 5px 5px;
  display: grid;
  place-items: end center;
  padding-bottom: 5px;
  flex-shrink: 0;
  font-size: calc(var(--font-xs) * var(--escala-fonte, 1));
  font-weight: 650;
  letter-spacing: 0.03em;
  background: var(--superficie-2);
  color: var(--texto-2);
  text-transform: uppercase;
}
.anexo-ic.pdf { background: var(--s-projetos-wash); color: var(--texto); }
.anexo-ic.img { background: var(--s-pessoal-wash); color: var(--texto); }
.anexo-ic.doc { background: var(--s-faculdade-wash); color: var(--texto); }
.anexo-ic.xls { background: var(--s-financeiro-wash); color: var(--texto); }

.anexo-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.anexo-meta { display: block; font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); font-weight: 400; color: var(--texto-3); margin-top: 1px; }

/* -------------------------------- Toast --------------------------------- */

.toasts { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; width: max-content; max-width: calc(100vw - 32px); }

.toast {
  background: var(--texto);
  color: var(--sobre-claro);
  padding: 11px 18px;
  border-radius: var(--r-md);
  font-size: calc(var(--font-sm) * var(--escala-fonte, 1));
  font-weight: 500;
  box-shadow: var(--shadow-pop);
  animation: pop 0.18s ease;
  display: flex;
  align-items: center;
  gap: 14px;
}
.toast button { background: none; border: none; color: inherit; font-weight: 650; cursor: pointer; font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); text-decoration: underline; text-underline-offset: 3px; font-family: var(--font); padding: 0; }

/* ------------------------------ Utilitários ------------------------------ */

.voltar {
  min-height: var(--control-size);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: calc(var(--font-sm) * var(--escala-fonte, 1));
  font-weight: 500;
  color: var(--texto-3);
  text-decoration: none;
  margin-bottom: 20px;
  transition: color 0.12s;
}
.voltar:hover { color: var(--texto); }
.voltar .ico, .editor-voltar .ico { width: 15px; height: 15px; }
.editor-voltar { display: inline-flex; align-items: center; gap: 5px; }

.nota-chip {
  font-size: calc(var(--font-sm) * var(--escala-fonte, 1));
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: var(--s-faculdade-wash);
  color: var(--texto);
  border-radius: var(--r-md);
  padding: 3px 10px;
  white-space: nowrap;
  flex-shrink: 0;
}

.resumo-texto {
  font-size: calc(var(--font-sm) * var(--escala-fonte, 1));
  color: var(--texto-2);
  white-space: pre-wrap;
  line-height: 1.7;
  max-height: 260px;
  overflow-y: auto;
}
.resumo-texto.rico { white-space: normal; }
.resumo-texto.rico p { margin: 0 0 0.7em; }
.resumo-texto.rico p:last-child { margin-bottom: 0; }
.resumo-texto.rico h1, .resumo-texto.rico h2, .resumo-texto.rico h3 { font-size: 1.15em; margin: 0.8em 0 0.4em; color: var(--texto); }
.resumo-texto.rico ul, .resumo-texto.rico ol { margin: 0 0 0.7em; padding-left: 1.4em; }
.resumo-texto.rico blockquote { margin: 0 0 0.7em; padding-left: 13px; border-left: 2px solid var(--linha-forte); }

.section { margin-top: 64px; }
.grid + .section-head { margin-top: 44px; }

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.section-title {
  text-wrap: balance;
  font-family: var(--font-voz);
  font-size: calc(var(--font-lg) * var(--escala-fonte, 1));
  font-weight: 500;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.muted { color: var(--texto-3); }
.so-celular { display: none; }
table.sheet .meta { font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); color: var(--texto-3); margin-top: 3px; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); color: var(--texto-2); }
.filters .input { width: auto; min-width: 160px; }
.check { width: 17px; height: 17px; accent-color: var(--texto); cursor: pointer; flex-shrink: 0; margin: 0; }
.campo-simnao { display: flex; align-items: center; gap: 9px; font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); color: var(--texto); cursor: pointer; }
.strike { text-decoration: line-through; color: var(--texto-3); }

.google-state { display: flex; align-items: center; gap: 8px; font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); color: var(--texto-3); }
.google-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--texto-3); }
.google-state.on { color: var(--success-text); }
.google-state.on .google-dot { background: var(--st-good); }

/* ============================ Editor de resumo ===========================
   Página inteira, sem barra lateral: o texto é a única coisa em cena. */

.editor-body { background: var(--superficie); }
.editor { min-height: 100vh; display: flex; flex-direction: column; }

.editor-topo {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 22px;
  background: var(--superficie);
  border-bottom: 1px solid var(--linha);
}

.editor-voltar {
  font-size: calc(var(--font-sm) * var(--escala-fonte, 1));
  font-weight: 500;
  color: var(--texto-3);
  text-decoration: none;
  max-width: 40vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.12s;
}
.editor-voltar:hover { color: var(--texto); }

.editor-estado { flex: 1; text-align: center; font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); color: var(--texto-3); }
.editor-estado.sujo { color: var(--warning-text); }

.editor-acoes { display: flex; gap: 6px; align-items: center; }

.editor-barra {
  position: sticky;
  top: 51px;
  z-index: 9;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  padding: 8px 22px;
  background: var(--fundo);
  border-bottom: 1px solid var(--linha);
}

.editor-select {
  background: var(--superficie);
  border: 1px solid var(--linha-forte);
  color: var(--texto);
  padding: 5px 8px;
  border-radius: var(--r-md);
  font-size: calc(var(--font-xs) * var(--escala-fonte, 1));
  font-family: var(--font);
  cursor: pointer;
}
.editor-select.estreito { width: 68px; }
#fonte.editor-select { max-width: 150px; }
#bloco.editor-select { max-width: 110px; }
.editor-select:focus { outline: none; border-color: var(--texto-2); }

.editor-btn {
  min-width: 31px;
  height: 30px;
  padding: 0 9px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--texto-2);
  border-radius: var(--r-md);
  font-size: calc(var(--font-sm) * var(--escala-fonte, 1));
  font-family: var(--font);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.editor-btn.largo { font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); font-weight: 550; }
.editor-btn:hover { background: var(--superficie-2); color: var(--texto); }
.editor-btn[aria-pressed="true"] { background: var(--superficie-3); color: var(--texto); box-shadow: inset 0 0 0 1px var(--linha-forte); }

.editor-sep { width: 1px; height: 19px; background: var(--linha-forte); margin: 0 5px; }

.editor-folha { flex: 1; width: 100%; max-width: 720px; margin: 0 auto; padding: 48px 28px 80px; }

.editor-titulo {
  width: 100%;
  border: none;
  background: none;
  color: var(--texto);
  font-family: var(--font-voz);
  font-size: calc(var(--font-2xl) * var(--escala-fonte, 1));
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1.15;
  padding: 0 0 16px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--linha);
}
.editor-titulo:focus { outline: none; border-bottom-color: var(--texto-3); }
.editor-titulo::placeholder { color: var(--texto-3); }

.editor-area {
  min-height: 58vh;
  font-size: calc(var(--font-sm) * var(--escala-fonte, 1));
  line-height: 1.72;
  color: var(--texto);
  padding: 20px 0;
}
.editor-area:focus { outline: none; }
.editor-area:empty::before { content: "Comece a escrever…"; color: var(--texto-3); }
.editor-area p { margin: 0 0 0.9em; }
.editor-area ul, .editor-area ol { padding-left: 1.5em; }
.editor-area img,
.resumo-texto.rico img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 12px 0;
  border-radius: var(--r-sm);
}
.editor-area.dragover { outline: 2px dashed var(--linha-forte); outline-offset: -8px; }

.editor-rodape {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 9px 22px;
  background: var(--superficie);
  border-top: 1px solid var(--linha);
  font-size: calc(var(--font-xs) * var(--escala-fonte, 1));
  color: var(--texto-3);
}
.editor-rodape .marca { color: var(--texto-3); padding: 0; font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); }

/* ---- Editor 1.6: barra agrupada, menus, blocos, folha, foco ---- */
.editor-ferramentas { display: flex; gap: 2px; align-items: center; }
.editor-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.editor-btn .ico { width: 18px; height: 18px; }
.editor-grupo { display: flex; align-items: center; gap: 2px; padding-right: 6px; margin-right: 4px; border-right: 1px solid var(--linha); }
.editor-grupo:last-child { border-right: none; }
.editor-btn.cor { position: relative; flex-direction: column; gap: 0; padding-top: 2px; }
.letra-cor { font-weight: 650; font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); line-height: 16px; }
.faixa-cor { display: block; width: 16px; height: 3px; border-radius: 2px; background: var(--texto-3); margin-top: 1px; }
.editor-btn.cor .ico { width: 16px; height: 16px; }

.editor-menu {
  position: absolute; z-index: 60; min-width: 190px; max-width: 320px;
  background: var(--superficie); border: 1px solid var(--linha-forte); border-radius: var(--r-md);
  box-shadow: var(--shadow-pop); padding: 8px; display: flex; flex-direction: column; gap: 2px;
  animation: pop 0.16s var(--ease-saida, ease);
}
.menu-titulo { font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); font-weight: 550; color: var(--texto-3); padding: 4px 6px 6px; display: flex; justify-content: space-between; gap: 10px; }
.menu-sep { height: 1px; background: var(--linha); margin: 6px 0; }
.editor-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  border: none; background: none; color: var(--texto); font: inherit; font-size: calc(var(--font-sm) * var(--escala-fonte, 1));
  padding: 7px 8px; border-radius: var(--r-md); cursor: pointer;
}
.editor-menu-item:hover { background: var(--superficie-2); }
.editor-menu-item .ico { width: 17px; height: 17px; color: var(--texto-2); }
.paleta { display: grid; grid-template-columns: repeat(5, 30px); gap: 7px; padding: 2px 4px 4px; }
.amostra {
  width: 30px; height: 30px; border-radius: var(--r-md); cursor: pointer;
  border: 1px solid var(--linha-forte); background: var(--c);
}
.amostra.realce { background: linear-gradient(var(--c), var(--c)), var(--superficie); }
.amostra.vazia { background: linear-gradient(135deg, transparent 45%, var(--st-critical) 45% 55%, transparent 55%), var(--superficie); }
.amostra:hover { transform: scale(1.08); }
.bolinha-caixa { width: 12px; height: 12px; border-radius: 4px; background: var(--caixa, var(--texto-3)); flex-shrink: 0; }
.grade-tabela { display: grid; grid-template-columns: repeat(6, 20px); gap: 4px; padding: 2px 6px 6px; }
.celula-grade { width: 20px; height: 20px; border-radius: 4px; border: 1px solid var(--linha-forte); background: var(--fundo); cursor: pointer; padding: 0; }
.celula-grade.ativa { background: color-mix(in srgb, var(--destaque) 35%, transparent); border-color: var(--destaque); }
.menu-seg { display: flex; gap: 4px; padding: 0 4px 8px; }
.menu-seg button {
  flex: 1; border: 1px solid var(--linha-forte); background: var(--fundo); color: var(--texto-2);
  font: inherit; font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); padding: 6px 8px; border-radius: var(--r-md); cursor: pointer;
}
.menu-seg button[aria-pressed="true"] { background: var(--destaque); border-color: var(--destaque); color: var(--sobre-destaque); }
.menu-link { min-width: 280px; }
.menu-link input { margin: 0 4px 8px; width: calc(100% - 8px); }
.menu-acoes-linha { display: flex; gap: 6px; justify-content: flex-end; padding: 0 4px 2px; }
.menu-acoes-linha .editor-menu-item { width: auto; }

.editor-busca {
  flex-basis: 100%;
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  padding: 8px 0 2px; margin-top: 4px; border-top: 1px solid var(--linha);
}
.editor-busca .input { width: 200px; }
.editor-busca-n { font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); color: var(--texto-3); min-width: 90px; }
::highlight(busca-resumo) { background-color: rgba(250, 204, 21, 0.3); }
::highlight(busca-atual) { background-color: rgba(250, 204, 21, 0.75); color: #111110; }

.editor-meio { flex: 1; display: flex; justify-content: center; gap: 28px; width: 100%; }
.editor-sumario {
  position: sticky; top: 120px; align-self: flex-start; width: 220px; flex-shrink: 0; padding-left: 18px;
  margin-top: 56px; max-height: calc(100vh - 180px); overflow-y: auto;
}
.editor-sumario-titulo { font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); font-weight: 600; color: var(--texto-3); margin-bottom: 8px; }
.editor-sumario ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.editor-sumario li.vazio { font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); color: var(--texto-3); line-height: 1.5; }
.editor-sumario button {
  border: none; background: none; font: inherit; font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); color: var(--texto-2); text-align: left;
  padding: 5px 8px; border-radius: var(--r-xs); cursor: pointer; width: 100%; line-height: 1.35;
}
.editor-sumario button:hover { background: var(--superficie-2); color: var(--texto); }
.editor-sumario .nivel-1 button { font-weight: 600; color: var(--texto); }
.editor-sumario .nivel-2 button { padding-left: 18px; }
.editor-sumario .nivel-3 button { padding-left: 30px; font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); }

/* Folha: largura, papel e entrelinhas escolhidos no próprio resumo. */
.editor-folha[data-largura="estreita"] { max-width: 600px; }
.editor-folha[data-largura="larga"] { max-width: 960px; }
.editor-folha[data-papel="sepia"], .editor-folha[data-papel="claro"] {
  border-radius: 4px; margin-top: 24px; margin-bottom: 24px; box-shadow: 0 1px 3px rgba(0,0,0,.15);
  /* O papel tem as próprias cores: tabela, caixa e código seguem ele, não o tema. */
  --linha: rgba(0, 0, 0, 0.1); --linha-forte: rgba(0, 0, 0, 0.2);
  --texto-2: #4f4a3f; --texto-3: #7a7466; --st-good: #477b3b; --st-warning: #9a7018; --serie-entrada: #32669d;
}
.editor-folha[data-papel="sepia"] { background: #f4ecd8; color: #3b3021; --texto: #3b3021; --fundo: #efe4c8; --superficie: #f4ecd8; --superficie-2: #e9ddbf; }
.editor-folha[data-papel="claro"] { background: #fdfdfb; color: #1b1f1b; --texto: #1b1f1b; --fundo: #f2f3ef; --superficie: #fdfdfb; --superficie-2: #eceee8; }
.editor-folha[data-papel="sepia"] .editor-area, .editor-folha[data-papel="sepia"] .editor-titulo { color: #3b3021; }
.editor-folha[data-papel="claro"] .editor-area, .editor-folha[data-papel="claro"] .editor-titulo { color: #1b1f1b; }
.editor-folha[data-papel="sepia"] .editor-titulo, .editor-folha[data-papel="claro"] .editor-titulo { border-bottom-color: rgba(0,0,0,.12); }
.editor-folha[data-linhas="compacta"] .editor-area { line-height: 1.5; }
.editor-folha[data-linhas="arejada"] .editor-area { line-height: 2; }

/* Blocos dentro do texto (editor e pré-visualização na disciplina) */
.editor-area h1, .resumo-texto.rico h1 { font-family: var(--font-voz); font-size: 1.75em; font-weight: 500; line-height: 1.2; margin: 1.1em 0 0.45em; letter-spacing: -0.01em; }
.editor-area h2, .resumo-texto.rico h2 { font-size: 1.3em; font-weight: 650; line-height: 1.3; margin: 1.1em 0 0.4em; }
.editor-area h3, .resumo-texto.rico h3 { font-size: 1.08em; font-weight: 650; margin: 1em 0 0.35em; }
.editor-area blockquote, .resumo-texto.rico blockquote { margin: 0.9em 0; padding: 2px 0 2px 16px; border-left: 3px solid var(--linha-forte); color: var(--texto-2); font-style: italic; }
.editor-area blockquote[style*="margin"], .resumo-texto.rico blockquote[style*="margin"] { border-left: none; font-style: normal; color: inherit; }
.editor-area pre, .resumo-texto.rico pre {
  font-family: "Space Mono", ui-monospace, "Courier New", monospace; font-size: 0.86em; line-height: 1.55;
  background: var(--fundo); border: 1px solid var(--linha); border-radius: var(--r-sm); padding: 12px 14px; white-space: pre-wrap; margin: 0.9em 0;
}
.editor-area hr, .resumo-texto.rico hr { border: none; border-top: 1px solid var(--linha-forte); margin: 1.6em 0; }
.editor-area a, .resumo-texto.rico a { color: var(--serie-entrada); text-decoration: underline; text-underline-offset: 3px; }
.editor-area .callout, .resumo-texto.rico .callout {
  --caixa: var(--texto-3);
  margin: 1em 0; padding: 10px 14px; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--caixa) 11%, transparent);
  box-shadow: inset 3px 0 0 var(--caixa);
}
.callout p:last-child { margin-bottom: 0; }
.callout::before { display: block; font-size: 0.78em; font-weight: 650; letter-spacing: 0.01em; color: var(--caixa); margin-bottom: 2px; content: "Nota"; }
.callout[data-tipo="dica"]::before { content: "Dica"; }
.callout[data-tipo="importante"]::before { content: "Importante"; }
.callout[data-tipo="atencao"]::before { content: "Atenção"; }
[data-tipo="dica"], .editor-area .callout[data-tipo="dica"], .resumo-texto.rico .callout[data-tipo="dica"] { --caixa: var(--st-good); }
[data-tipo="importante"], .editor-area .callout[data-tipo="importante"], .resumo-texto.rico .callout[data-tipo="importante"] { --caixa: var(--serie-entrada); }
[data-tipo="atencao"], .editor-area .callout[data-tipo="atencao"], .resumo-texto.rico .callout[data-tipo="atencao"] { --caixa: var(--st-warning); }
.editor-area ul.checklist, .resumo-texto.rico ul.checklist { list-style: none; padding-left: 0; }
ul.checklist > li { position: relative; padding-left: 28px; }
ul.checklist > li::before {
  content: ""; position: absolute; left: 2px; top: 0.36em; width: 15px; height: 15px; border-radius: 4px;
  border: 1.5px solid var(--texto-3); background: transparent; cursor: pointer;
}
ul.checklist > li[data-feito]::before {
  background: var(--destaque) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23141714'%3E%3Cpath d='M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E") center / 11px no-repeat;
  border-color: var(--destaque);
}
ul.checklist > li[data-feito] { color: var(--texto-3); text-decoration: line-through; }
.editor-area table, .resumo-texto.rico table { border-collapse: collapse; width: 100%; margin: 1em 0; font-size: 0.94em; }
.editor-area td, .editor-area th, .resumo-texto.rico td, .resumo-texto.rico th { border: 1px solid var(--linha-forte); padding: 7px 10px; vertical-align: top; min-width: 40px; }
.editor-area th, .resumo-texto.rico th { background: var(--superficie-2); font-weight: 600; text-align: left; }
.editor-area img.img-p, .resumo-texto.rico img.img-p { width: 33%; }
.editor-area img.img-m, .resumo-texto.rico img.img-m { width: 60%; }
.editor-area img.img-g, .resumo-texto.rico img.img-g { width: 100%; }
.editor-area img.img-c, .resumo-texto.rico img.img-c { margin-left: auto; margin-right: auto; }
.editor-area img { cursor: pointer; }
.editor-area img.selecionada { outline: 2px solid var(--destaque); outline-offset: 3px; }
.editor-img-barra {
  position: absolute; z-index: 40; display: flex; gap: 2px; align-items: center; padding: 4px;
  background: var(--superficie); border: 1px solid var(--linha-forte); border-radius: var(--r-md); box-shadow: var(--shadow-pop);
}
.editor-dica { font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); color: var(--texto-3); }

/* O modo foco pertence a editor.css. */

@media print {
  .editor-topo, .editor-barra, .editor-rodape, .editor-busca, .editor-sumario, .editor-img-barra, .toasts { display: none !important; }
  .editor-body, .editor-folha { background: #fff !important; color: #000 !important; box-shadow: none !important; }
  .editor-folha { max-width: none; padding: 0; margin: 0; }
  .editor-area, .editor-titulo { color: #000 !important; }
  .editor-titulo { border: none; }
  .editor-area .callout { box-shadow: inset 3px 0 0 #888; background: #f2f2f2; }
}

/* ====================== Assistente de boas-vindas =========================
   Página inteira, sem barra lateral — aqui é o painel que pergunta. */

.assistente-body { background: var(--fundo); }

.assistente {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 44px 20px 60px;
}

.assistente-topo {
  width: 100%;
  max-width: 580px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 26px;
}

.assistente-progresso {
  width: 100%;
  max-width: 580px;
  display: flex;
  gap: 6px;
  margin-bottom: 26px;
}
.assistente-progresso span { flex: 1; height: 3px; border-radius: 2px; background: var(--linha-forte); }
.assistente-progresso span.ativo { background: var(--texto); }
.assistente-progresso span.feito { background: var(--texto-2); }

.assistente-card { width: 100%; max-width: 580px; padding: 40px; border-radius: var(--r-xl); }

.assistente .leitura, .assistente .leitura[data-tam] { font-size: calc(var(--font-lg) * var(--escala-fonte, 1)); line-height: 1.25; letter-spacing: -0.008em; max-width: none; }
.assistente-passo h2 { margin: 0 0 10px; font-family: var(--font-voz); font-size: calc(var(--font-xl) * var(--escala-fonte, 1)); font-weight: 400; letter-spacing: -0.014em; line-height: 1.1; }
.assistente-passo > .sub { margin: 0 0 28px; color: var(--texto-2); font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); line-height: 1.55; }
.assistente-passo .field + .field,
.assistente-passo .field + .assistente-linha,
.assistente-passo .assistente-linha + .field,
.assistente-passo .assistente-linha + .assistente-linha { margin-top: 20px; }
.assistente-passo > #bloco-academico { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--linha); }
.assistente-sugestoes { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--linha); }
.assistente-sugestoes > label { font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); font-weight: 500; color: var(--texto-2); }

.assistente-linha { display: flex; gap: 16px; align-items: stretch; }
.assistente-linha .field { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; }

.assistente-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--linha);
}

.assistente-aba-nome {
  border: none;
  background: transparent;
  color: var(--texto);
  font-size: calc(var(--font-sm) * var(--escala-fonte, 1));
  font-weight: 550;
  font-family: var(--font);
  padding: 4px 0;
  width: 100%;
}
.assistente-aba-nome:focus { outline: none; border-bottom: 1px solid var(--linha-forte); }
.assistente-aba-nome:disabled { color: var(--texto-3); }

.assistente-foto { display: flex; align-items: center; gap: 14px; }

.assistente-resumo dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 0; font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); }
.assistente-resumo dt { color: var(--texto-3); }
.assistente-resumo dd { margin: 0; color: var(--texto); }

/* --------------------------- Entrada (entrar.html) --------------------------- */

.entrada { max-width: 440px; }
.entrada .leitura, .entrada .leitura[data-tam] { margin: 0 0 22px; font-size: calc(var(--font-lg) * var(--escala-fonte, 1)); line-height: 1.2; max-width: none; }
.entrada .notice { margin-bottom: 18px; }
.entrada-form { display: flex; flex-direction: column; gap: 16px; margin-top: 22px; }
.entrada-form .err:empty { display: none; }
.entrada-form .err { font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); color: var(--critical-text); font-weight: 500; line-height: 1.5; }
.entrada-nota { margin: 22px 0 0; line-height: 1.6; }
.entrada-titulo { margin: 0; font-family: var(--font-voz); font-size: calc(var(--font-lg) * var(--escala-fonte, 1)); font-weight: 500; letter-spacing: -0.01em; }
.senha-campo { position: relative; display: flex; }
.senha-campo input { padding-right: 84px !important; }
.senha-campo .btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }
.field .hint.caps { color: var(--warning-text); }
.entrada-manter { display: flex; gap: 10px; align-items: flex-start; font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); color: var(--texto); cursor: pointer; }
.entrada-manter .check { margin-top: 2px; flex-shrink: 0; }
.entrada-manter .hint { display: block; margin-top: 3px; font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); color: var(--texto-3); line-height: 1.5; }

/* Código de recuperação: mostrado uma vez, para copiar ou baixar. */
.codigo-recuperacao {
  font-size: calc(clamp(15px, 4.4vw, 19px) * var(--escala-fonte, 1));
  font-weight: 600;
  letter-spacing: 0.05em;
  text-align: center;
  padding: 16px 12px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--r-sm);
  background: var(--fundo);
  font-variant-numeric: tabular-nums;
  user-select: all;
  overflow-wrap: normal; /* quebra só nos hífens, nunca no meio de um grupo */
}

/* ============================== Financeiro ================================
   A aba que mais conversa: lê o mês, pergunta o que falta saber e só então
   mostra planilha. */

.mes-nav { display: flex; align-items: center; gap: 4px; margin: -8px 0 22px; }
.mes-nav .mes-rotulo { font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); font-weight: 550; min-width: 150px; text-align: center; }
.mes-nav .btn.icon { border-radius: 50%; }
.mes-nav .voltar-hoje { margin-left: 8px; }

.fin-cabeca { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 32px; align-items: end; margin-bottom: 26px; }
.fin-cabeca .leitura { margin: 0; }

.fin-faixa > .card { padding: 18px 20px; }
.fin-faixa .stat-sub .ico { display: inline-block; vertical-align: -3px; width: 14px; height: 14px; }

.fin-duas { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 14px; margin-top: 14px; }
.fin-duas.iguais { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fin-coluna { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.fin-coluna > .card:last-child { flex: 1; }

/* Categoria: nome, barra, valor e, embaixo, a parte do total e a variação. */
.cat-lista { display: flex; flex-direction: column; gap: 14px; }
.cat-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; align-items: baseline; }
.cat-nome { font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); font-weight: 500; display: flex; align-items: center; gap: 8px; min-width: 0; }
.cat-nome span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-valor { font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.cat-barra { grid-column: 1 / -1; height: 8px; border-radius: 999px; background: none; position: relative; overflow: visible; }
.cat-barra > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--serie-saida); min-width: 3px; }
.cat-barra > i.acima { background: var(--st-critical); }
.cat-barra > b { position: absolute; top: -3px; bottom: -3px; width: 2px; border-radius: 1px; background: var(--texto); }
.cat-meta { grid-column: 1 / -1; font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); color: var(--texto-3); display: flex; gap: 14px; flex-wrap: wrap; }
.cat-meta .up { color: var(--success-text); }
.cat-meta .down { color: var(--critical-text); }
.cat-linha[data-cat] { cursor: pointer; border-radius: var(--r-xs); }
.cat-linha[data-cat]:hover .cat-nome span { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* Ritmo do mês: gasto acumulado dia a dia, este mês contra o anterior. */
.ritmo svg { display: block; width: 100%; height: auto; overflow: visible; }
.ritmo .eixo { stroke: var(--axis); stroke-width: 1; }
.ritmo .grade { stroke: var(--grid); stroke-width: 1; }
.ritmo .rot { fill: var(--texto-3); font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); font-family: var(--font); font-variant-numeric: tabular-nums; }
.ritmo .serie-atual { stroke: var(--serie-saida); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ritmo .serie-anterior { stroke: var(--serie-contexto); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ritmo .area-atual { fill: var(--serie-saida); opacity: 0.1; }
.ritmo .limite { stroke: var(--texto-3); stroke-width: 1; }
.ritmo .ponto { fill: var(--serie-saida); stroke: var(--superficie); stroke-width: 2; }
.ritmo .mira { stroke: var(--texto-3); stroke-width: 1; }
.ritmo-nota { font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); color: var(--texto-2); margin-top: 12px; line-height: 1.55; }
.ritmo-nota b { color: var(--texto); font-weight: 600; }

/* Perguntas do Delfos: o painel pedindo o que falta para ler melhor. */
.perguntas { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.pergunta {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pergunta-texto { font-family: var(--font-voz); font-size: calc(var(--font-md) * var(--escala-fonte, 1)); font-weight: 450; line-height: 1.3; letter-spacing: 0; text-wrap: pretty; }
.pergunta-apoio { font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); color: var(--texto-3); line-height: 1.5; margin-top: -4px; }
.pergunta-resposta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pergunta-resposta .input { width: 150px; }
.pergunta-rodape { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 2px; }
.pergunta-rodape .contador { font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); color: var(--texto-3); font-variant-numeric: tabular-nums; }

/* O que o Delfos notou: frases curtas, cada uma com o seu sinal. */
.notas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.notas li { display: flex; gap: 13px; padding: 13px 0; border-bottom: 1px solid var(--linha); font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); line-height: 1.55; }
.notas li:first-child { padding-top: 2px; }
.notas li:last-child { border-bottom: none; padding-bottom: 2px; }
.notas .sinal { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; background: var(--superficie-2); color: var(--texto-2); margin-top: -2px; }
.notas .sinal .ico { width: 15px; height: 15px; }
.notas .sinal.bom { background: var(--st-good-wash); color: var(--success-text); }
.notas .sinal.atencao { background: var(--st-warning-wash); color: var(--warning-text); }
.notas .sinal.alerta { background: var(--st-critical-wash); color: var(--critical-text); }
.notas b { font-weight: 600; }
.notas .acao { margin-top: 6px; }
.nota-area { display: inline-flex; align-items: center; gap: 6px; font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); font-weight: 500; color: var(--texto-3); margin-right: 8px; }
.nota-area::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--marca); }
.nota-area[style*="--ic-marca"]::before {
  width: 13px; height: 13px; border-radius: 0;
  -webkit-mask: var(--ic-marca) center / contain no-repeat; mask: var(--ic-marca) center / contain no-repeat;
}
.notas .acao { display: inline-flex; }

/* Lista curta com valor à direita (a pagar, fixos, maiores gastos). */
.linhas-valor { list-style: none; margin: 0; padding: 0; }
.linhas-valor li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--linha); font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); }
.linhas-valor li:first-child { padding-top: 2px; }
.linhas-valor li:last-child { border-bottom: none; padding-bottom: 2px; }
.linhas-valor .grow { flex: 1; min-width: 0; }
.linhas-valor .t { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linhas-valor .m { display: block; font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); color: var(--texto-3); margin-top: 1px; }
.linhas-valor .v { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.linhas-valor .total { font-weight: 600; }

/* Metas: nome, quanto falta, projeção e o botão de guardar. */
.metas-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.meta-card { display: flex; flex-direction: column; gap: 12px; }
.meta-topo { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.meta-nome { font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); font-weight: 650; letter-spacing: -0.01em; }
.meta-prazo { font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); color: var(--texto-3); margin-top: 2px; }
.meta-valores { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.meta-valores .atual { font-family: var(--font-voz); font-size: calc(var(--font-xl) * var(--escala-fonte, 1)); font-weight: 400; letter-spacing: -0.012em; }
.meta-valores .alvo { font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); color: var(--texto-3); }
.meta-projecao { font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); color: var(--texto-2); line-height: 1.5; }
.meta-acoes { display: flex; gap: 6px; margin-top: 2px; }

/* Barra de filtros da planilha: pílulas + busca + categoria numa linha. */
.fin-filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.fin-filtros .busca { position: relative; flex: 1 1 200px; max-width: 280px; }
.fin-filtros .busca .ico { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--texto-3); pointer-events: none; }
.fin-filtros .busca .input { padding-left: 34px; width: 100%; }
.fin-filtros select.input { width: auto; min-width: 170px; }

/* =================== Semanas, linha do tempo, check-in ===================== */

.semanas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--linha); border: 1px solid var(--linha); border-radius: var(--r-lg); overflow: hidden; }
.semana { background: var(--superficie); padding: 16px; min-height: 150px; display: flex; flex-direction: column; gap: 10px; }
.semana.agora { background: color-mix(in srgb, var(--superficie-2) 60%, var(--superficie)); }
.semana-titulo { font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); font-weight: 600; display: flex; justify-content: space-between; gap: 8px; }
.semana-titulo span { font-weight: 450; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.semana-item { display: block; text-decoration: none; color: inherit; padding-left: 10px; border-left: 2px solid var(--marca, var(--linha-forte)); }
.semana-item.prova { --marca: var(--s-faculdade); }
.semana-item .t { display: block; font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); font-weight: 550; line-height: 1.35; }
.semana-item .m { display: block; font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); color: var(--texto-3); margin-top: 2px; }
a.semana-item:hover .t { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.semana-vazia { font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); color: var(--texto-3); }

/* Linha do tempo agrupada (Pessoal, abas próprias com agenda) */
.grupo-tempo + .grupo-tempo { margin-top: 22px; }
.grupo-tempo-titulo { font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); font-weight: 600; color: var(--texto-2); margin: 0 0 4px; display: flex; gap: 8px; align-items: baseline; }
.grupo-tempo-titulo span { font-weight: 450; color: var(--texto-3); }
.grupo-tempo-titulo.alerta { color: var(--critical-text); }

/* Check-in: os últimos sete dias de um hábito */
.dias7 { display: flex; gap: 4px; }
.dias7 i { width: 20px; height: 20px; border-radius: var(--r-xs); background: var(--track); display: grid; place-items: center; font-style: normal; font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); font-weight: 600; color: var(--texto-3); }
.dias7 i.feito { background: var(--tint, var(--s-financeiro)); color: #fff; }
.dias7 i.hoje { box-shadow: inset 0 0 0 1.5px var(--texto-3); }
.seq { font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); color: var(--texto-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.btn.marcado { background: color-mix(in srgb, var(--tint, var(--st-good)) 22%, transparent); color: var(--texto); }

/* ============================ Criador de aba ============================= */

.modal-body.criador { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; align-items: start; }
.criador-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.field input#cr-nome.criador-nome {
  font-family: var(--font-voz);
  font-size: calc(var(--font-lg) * var(--escala-fonte, 1));
  font-weight: 400;
  letter-spacing: -0.01em;
  padding: 10px 14px;
  line-height: 1.2;
}
.field .label { font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); font-weight: 500; color: var(--texto-2); }
.field .label .muted { font-weight: 400; }

/* Propósito: a caixa que o Delfos lê. Cresce com o texto onde o navegador sabe. */
.field textarea.criador-proposito { min-height: 6.5em; max-height: 14em; resize: vertical; field-sizing: content; line-height: 1.5; }

/* O que o Delfos entendeu: frases curtas, cada uma com o ícone do que decide.
   Sem caixa: um fio no alto separa a leitura do que a pessoa escreveu. */
.delfos-leu { border-top: 1px solid var(--linha); padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.delfos-titulo { display: flex; align-items: center; gap: 8px; margin: 0; font-family: var(--font-voz); font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); font-weight: 550; letter-spacing: 0; color: var(--texto); }
.delfos-titulo .ico { width: 18px; height: 18px; color: var(--texto-2); }
.delfos-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.delfos-item { display: flex; gap: 9px; align-items: flex-start; font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); line-height: 1.45; color: var(--texto-2); }
.delfos-item .ico { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--texto-3); }
.delfos-item.assunto, .delfos-item.campos { color: var(--texto); }
.delfos-item.fora .ico { color: var(--critical-text); }
.delfos-item.dica { color: var(--texto-3); }
.delfos-de { color: var(--texto-3); font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); }
.badge.sugestao { color: var(--texto-3); font-weight: 500; }
.delfos-aplicar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); color: var(--texto-3); }

.criador-ajustes { border-top: 1px solid var(--linha); padding-top: 4px; }
.criador-ajustes summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); font-weight: 500; color: var(--texto-2); padding: 8px 0;
}
.criador-ajustes summary::-webkit-details-marker { display: none; }
.criador-ajustes summary .ico { width: 16px; height: 16px; transition: transform var(--t-medio, 0.28s) var(--ease-saida, ease); }
.criador-ajustes[open] summary .ico { transform: rotate(90deg); }
.criador-ajustes summary:hover { color: var(--texto); }
.criador-ajustes-corpo { display: flex; flex-direction: column; gap: 16px; padding: 6px 0 2px; }
.campo-linha { flex: 1; min-width: 0; }
.campo-nome { display: block; font-weight: 550; }
.campo-nome .badge { margin-left: 6px; }
.campo-tipo { display: block; font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); color: var(--texto-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.previa [data-vistas] .chip { display: inline-flex; align-items: center; gap: 6px; }
.previa [data-vistas] .chip .ico { width: 15px; height: 15px; }

/* Propósito guardado, na página da aba (Ajustes da aba). */
.proposito-aba { margin: 0 0 12px; font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); line-height: 1.55; color: var(--texto-2); max-width: 70ch; }
.proposito-aba b { display: block; font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); font-weight: 600; color: var(--texto-3); margin-bottom: 2px; }

.icones-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); gap: 4px; max-height: 128px; overflow-y: auto; padding: 2px; }
.icone-opcao { width: 36px; height: 36px; border-radius: var(--r-md); border: 1px solid transparent; background: var(--fundo); color: var(--texto-2); display: grid; place-items: center; cursor: pointer; font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); }
.icone-opcao .ico { width: 18px; height: 18px; }
.icone-opcao:hover { border-color: var(--linha-forte); color: var(--texto); }
.icone-opcao[aria-pressed="true"] { background: var(--texto); color: var(--sobre-claro); }
.cores { display: flex; gap: 8px; flex-wrap: wrap; }
.cor-opcao { width: 28px; height: 28px; border-radius: 50%; border: none; background: var(--c); cursor: pointer; box-shadow: 0 0 0 2px var(--superficie); }
.cor-opcao[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--superficie), 0 0 0 4px var(--texto); }
.linha-switch { display: flex; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; }
.linha-switch b { display: block; font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); font-weight: 550; }
.linha-switch .muted { display: block; font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); margin-top: 1px; }

.previa { background: var(--fundo); border: 1px solid var(--linha); border-radius: var(--r-lg); padding: 18px; }
.previa-topo { display: flex; gap: 14px; align-items: center; }
.previa-icone { width: 44px; height: 44px; border-radius: var(--r-lg); display: grid; place-items: center; background: var(--c); color: #fff; font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); flex-shrink: 0; }
.previa-icone .ico { width: 22px; height: 22px; }
.previa-nome { display: block; font-family: var(--font-voz); font-size: calc(var(--font-lg) * var(--escala-fonte, 1)); font-weight: 500; letter-spacing: -0.01em; line-height: 1.15; }
.previa-desc { display: block; font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); color: var(--texto-3); margin-top: 2px; }
.campos-sugeridos li { padding: 9px 12px; }
.meta-linha { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.meta-linha select.input { width: auto; }

/* ------------------------------- Movimento --------------------------------
   Hover que responde ao gesto, não um estado que "liga": curvas que
   desaceleram como algo físico (nada de ease linear), a luz que acompanha o
   ponteiro dentro das caixas, um destaque que desliza entre os itens do
   menu e das abas em vez de piscar em cada um, e mola curta nos controles.
   Continua sóbrio: nenhuma cor nova, nenhum brilho colorido — a luz é o
   próprio osso do texto a poucos por cento. Tudo que é de ponteiro fica
   em (hover: hover); quem pede menos movimento no sistema não vê nada disso.
   A parte que precisa de JS (luz, destaque deslizante) mora em ui.js
   (UI.movimento), ligada por iniciarPagina. */


/* Todas as trocas de cor passam a usar as mesmas curvas. */
.chip, .seg button, .nav-item, .nav-subitem, .nav-nova, .brand, .pillar, .abas > a, .abas > button,
.menu-acao, .editor-btn, .tema-opcao, .icone-opcao, a.anexo, button.anexo, .dropzone, .badge,
.input, .field input, .field select, .field textarea {
  transition-property: background-color, border-color, color, box-shadow, transform, opacity;
  transition-duration: var(--t-medio);
  transition-timing-function: var(--ease-saida);
}

/* Aperto: todo botão cede um pouco ao clique e volta com mola. */
.chip, .seg button, .nav-nova, .brand, .editor-btn, .icone-opcao, .tema-opcao {
  transition-property: background-color, border-color, color, box-shadow, transform;
}
.chip:active, .seg button:active, .nav-nova:active, .editor-btn:active, .icone-opcao:active, .tema-opcao:active {
  transform: scale(0.97);
  transition-duration: 90ms;
  transition-timing-function: var(--ease-troca);
}
.brand:active { transform: scale(0.985); transition-duration: 90ms; }

/* Ícones dentro de botões respondem ao hover do botão. */
.nav-nova .ico, .pillar-ic, .nav-icon, .nav-icon .ico, .dz-icone, .brand-caret .ico, .empty-icon {
  transition: transform var(--t-medio) var(--ease-mola), color var(--t-medio) var(--ease-saida), background-color var(--t-medio) var(--ease-saida);
}

/* Campos: a borda acende ao passar, e o anel de foco se abre em vez de aparecer. */
.input, .field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]), .field select, .field textarea {
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--texto) 0%, transparent);
}

/* Interruptor com mola: a bolinha passa um fio do lugar e assenta. */
.switch { transition: background-color var(--t-medio) var(--ease-saida), border-color var(--t-medio) var(--ease-saida); }
.switch::after { transition: transform var(--t-lento) var(--ease-mola), background-color var(--t-medio) var(--ease-saida), width var(--t-rapido) var(--ease-saida); }
.switch:active::after { width: 19px; }
.switch:checked:active::after { transform: translateX(13px); }

/* Caixa de marcar: o visto nasce com um pulinho. */
input[type="checkbox"].check { transition: transform var(--t-medio) var(--ease-mola); }
input[type="checkbox"].check:active { transform: scale(0.86); }

/* Sublinhado que se desenha da esquerda para a direita, em vez de piscar. */
.titulo-link, .linha-link .title, a.semana-item .t, .cat-linha[data-cat] .cat-nome span {
  text-decoration: none !important;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size var(--t-lento) var(--ease-saida), color var(--t-medio) var(--ease-saida);
  padding-bottom: 1px;
}

/* Destaque que desliza (menu lateral e abas sublinhadas) — elementos criados por UI.movimento. */
.realce-nav {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border-radius: var(--r-sm);
  background: var(--superficie);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--linha-forte) 55%, transparent);
  pointer-events: none;
  opacity: 0;
  z-index: 0;
  transition:
    transform var(--t-medio) var(--ease-saida),
    width var(--t-medio) var(--ease-saida),
    height var(--t-medio) var(--ease-saida),
    opacity var(--t-medio) var(--ease-saida);
}
.com-realce { position: relative; }
.com-realce > .nav-item, .com-realce > .nav-sub, .com-realce > .nav-nova { position: relative; z-index: 1; }
.com-realce .nav-subitem { position: relative; z-index: 1; }

.indicador-abas {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  border-radius: 2px;
  background: var(--destaque);
  pointer-events: none;
  transition: transform var(--t-lento) var(--ease-saida), width var(--t-lento) var(--ease-saida), opacity var(--t-medio) var(--ease-saida), background-color var(--t-medio);
}
.abas.com-indicador { position: relative; }
.abas.com-indicador > a, .abas.com-indicador > button { border-bottom-color: transparent !important; }
.abas.com-indicador.provando .indicador-abas { background: var(--texto-3); }

/* Escolha única (Despesa/Receita, Pago/A pagar): o fundo escolhido desliza até a opção. */
.seg.com-trilho { position: relative; isolation: isolate; }
.seg.com-trilho > button { position: relative; z-index: 1; }
.seg.com-trilho > button[aria-pressed="true"] { background: transparent; box-shadow: none; }
.trilho-seg {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: var(--r-md);
  background: var(--superficie-3);
  box-shadow: inset 0 0 0 1px var(--linha-forte);
  pointer-events: none;
  z-index: 0;
  transition: transform var(--t-medio) var(--ease-mola), width var(--t-medio) var(--ease-saida), height var(--t-medio) var(--ease-saida);
}

/* Linhas de lista: um véu que acende por baixo e as ações que chegam deslizando. */
.list li::before {
  content: "";
  position: absolute;
  inset: 1px -10px;
  border-radius: var(--r-sm);
  background: var(--lavado);
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  transition: opacity var(--t-medio) var(--ease-saida);
}
.list li > * { position: relative; z-index: 1; }
.list li > .row-actions { z-index: 2; }
table.sheet tbody tr { transition: background-color var(--t-medio) var(--ease-saida); }
.linhas-valor li { position: relative; }
.linhas-valor li::before {
  content: "";
  position: absolute;
  inset: 1px -10px;
  border-radius: var(--r-sm);
  background: var(--lavado);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-medio) var(--ease-saida);
}
.linhas-valor li > * { position: relative; }

/* Luz nas caixas: um halo que acompanha o ponteiro (posição em --mx/--my,
   escrita por UI.movimento) e um fio de luz na borda perto dele. */
.card, .pillar, .notice, a.anexo, button.anexo, .semana, .meta-cartao, .pergunta, .tema-opcao, .perfil-stat {
  --mx: 50%;
  --my: 50%;
}
/* A luz que segue o ponteiro fica só no que leva a algum lugar (a.card,
   ladrilho de "Suas abas"); cartão parado não acende. */
a.card::after, .pillar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: none;
  transition: opacity var(--t-lento) var(--ease-saida);
}
a.card::before, .pillar::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  opacity: 0;
  background: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  transition: opacity var(--t-lento) var(--ease-saida);
}
.pillar { position: relative; }

/* Entrada da página: as seções chegam em cascata curta, só na primeira pintura. */
/* Entrada: um momento só. A leitura chega devagar (é a voz da página); o
   resto já está no lugar — cascata em toda seção é tique de tela gerada. */
@keyframes chegar { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } }
/* A leitura aparece estável; movimento responde às ações da pessoa. */

/* Janelas: sobem com a mesma curva do resto. */
.modal { animation-timing-function: var(--ease-saida) !important; animation-duration: var(--t-medio) !important; }

@media (hover: hover) and (pointer: fine) {
  /* As ações da linha chegam deslizando (só com mouse: no toque elas ficam sempre à vista, paradas). */
  .list .row-actions:not(.fixas) {
    background: linear-gradient(90deg, transparent, var(--lavado) 26px);
    transform: translate(8px, -50%);
    transition: opacity var(--t-medio) var(--ease-saida), transform var(--t-medio) var(--ease-saida);
  }
  table.sheet .row-actions { transform: translateX(6px); transition: opacity var(--t-medio) var(--ease-saida), transform var(--t-medio) var(--ease-saida); }

  a.card:hover::after, .pillar:hover::after { opacity: 1; }
  a.card:hover::before, .pillar:hover::before { opacity: 1; }

  /* O que leva a algum lugar sobe um fio e ganha sombra; o resto só acende. */
  .pillar:hover, a.anexo:hover, button.anexo:hover, a.card:hover, .tema-opcao:hover { border-color: var(--linha-forte); }
  .pillar:hover { background: var(--superficie); }
  .pillar:hover .pillar-ic { transform: translateY(-2px) scale(1.08); }
  .pillar .arrow { transition: color var(--t-medio) var(--ease-saida), transform var(--t-medio) var(--ease-mola); display: inline-block; }
  .pillar:hover .arrow { transform: translateX(4px); }

  .nav-nova:hover .ico { transform: rotate(90deg) scale(1.06); }
  .chip:hover:not([aria-pressed="true"]) { background: var(--superficie-2); }
  .brand:hover .brand-caret .ico { transform: translateY(-2px); }
  .brand:hover .brand-mark { transform: scale(1.04); }
  .brand-mark { transition: transform var(--t-medio) var(--ease-mola); }

  .input:hover:not(:focus), .field input:hover:not(:focus):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  .field select:hover:not(:focus), .field textarea:hover:not(:focus) { border-color: var(--texto-3); }

  .titulo-link:hover, .linha-link:hover .title, a.semana-item:hover .t, .cat-linha[data-cat]:hover .cat-nome span { background-size: 100% 1px; }

  .list li:hover::before { opacity: 1; }
  .list li:hover .row-actions:not(.fixas), .list li:focus-within .row-actions:not(.fixas) { transform: translate(0, -50%); }
  table.sheet tbody tr:hover .row-actions, table.sheet tbody tr:focus-within .row-actions { transform: none; }
  .linhas-valor li:hover::before { opacity: 1; }

  .dropzone:hover .dz-icone { transform: translateY(-3px); }
  .empty:hover .empty-icon { transform: translateY(-2px) rotate(-4deg); }
  .icone-opcao:hover { transform: translateY(-1px); }

  /* Com o destaque deslizante ligado, o item em si não acende mais — quem acende é ele. */
  .com-realce .nav-item:hover, .com-realce .nav-subitem:hover, .com-realce ~ .nav-nova:hover { background: transparent; }
  .nav-item:hover .nav-icon .ico { transform: scale(1.1) rotate(-4deg); }
}


/* ------------------------ Preferências de aparência ------------------------
   Perfil → Aparência grava em preferencias.experiencia; UI.aplicarAparencia
   põe tudo como atributo no <html>. */

/* Cor de destaque: faixa de luminosidade média, com texto escuro no tema
   escuro e claro no tema claro. Nenhuma é vermelha (urgência). */
[data-destaque-amostra="osso"] { --amostra: var(--texto); }
[data-destaque-amostra="louro"] { --amostra: #93b97a; }
[data-destaque-amostra="anil"] { --amostra: #7aa6db; }
[data-destaque-amostra="cobre"] { --amostra: #d49c62; }
[data-destaque-amostra="ameixa"] { --amostra: #c893b6; }
:root[data-theme="light"] [data-destaque-amostra="louro"] { --amostra: #3f6f33; }
:root[data-theme="light"] [data-destaque-amostra="anil"] { --amostra: #2c5e97; }
:root[data-theme="light"] [data-destaque-amostra="cobre"] { --amostra: #94561a; }
:root[data-theme="light"] [data-destaque-amostra="ameixa"] { --amostra: #83436a; }
:root[data-destaque="louro"] { --destaque: #93b97a; --sobre-destaque: #111110; }
:root[data-destaque="anil"] { --destaque: #7aa6db; --sobre-destaque: #111110; }
:root[data-destaque="cobre"] { --destaque: #d49c62; --sobre-destaque: #111110; }
:root[data-destaque="ameixa"] { --destaque: #c893b6; --sobre-destaque: #111110; }
:root[data-theme="light"][data-destaque="louro"] { --destaque: #3f6f33; --sobre-destaque: #f6f3ed; }
:root[data-theme="light"][data-destaque="anil"] { --destaque: #2c5e97; --sobre-destaque: #f6f3ed; }
:root[data-theme="light"][data-destaque="cobre"] { --destaque: #94561a; --sobre-destaque: #f6f3ed; }
:root[data-theme="light"][data-destaque="ameixa"] { --destaque: #83436a; --sobre-destaque: #f6f3ed; }

/* Só a tipografia muda. Larguras, ícones, padding e gaps mantêm suas medidas. */
:root { --escala-fonte: 1; }
:root[data-tamanho="compacto"] { --escala-fonte: 0.92; }
:root[data-tamanho="grande"] { --escala-fonte: 1.15; }

/* Voz "Texto": títulos e leitura na mesma letra da interface (Funnel Sans). */
:root[data-voz="sans"] { --font-voz: var(--font); --heading-weight: 400; }
:root[data-voz="sans"] .leitura { letter-spacing: -0.02em; font-weight: 400; }

/* Sem números ao lado das abas. */
:root[data-contadores="nao"] .nav-count { display: none; }

/* Movimento reduzido pedido no perfil (o mesmo que o sistema pedir). */
:root[data-movimento="reduzido"] *, :root[data-movimento="reduzido"] *::before, :root[data-movimento="reduzido"] *::after {
  animation-duration: 0.01ms !important; transition-duration: 0.01ms !important;
}
:root[data-movimento="reduzido"] a.card::before, :root[data-movimento="reduzido"] a.card::after,
:root[data-movimento="reduzido"] .pillar::before, :root[data-movimento="reduzido"] .pillar::after { display: none; }

/* ============================== Visão geral ===============================
   A leitura no alto e, embaixo, o gaveteiro (ver "Gavetas (2.0)"): agenda,
   dinheiro, o que o Delfos notou e suas abas. Aqui ficam as peças de
   dentro: a agenda semana a semana e as linhas de "Em números". */

.valor-ruim { color: var(--critical-text); }
.valor-bom { color: var(--texto); } /* número grande não fica verde: entrar dinheiro é o normal */


/* Agenda: semana a semana, o dia do mês grande à esquerda — o numeral é o
   único momento de "segunda leitura" da página e organiza a coluna. */
.agenda-grupo + .agenda-grupo { margin-top: 30px; }
.agenda-cab {
  margin: 0 0 6px;
  display: flex;
  gap: 12px;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  font-size: calc(var(--font-xs) * var(--escala-fonte, 1));
  font-weight: 650;
  color: var(--texto-2);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--linha);
}
.agenda-grupo.atrasado .agenda-cab { color: var(--critical-text); }
.agenda-nota { font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); font-weight: 550; color: var(--warning-text); }
.agenda-lista { list-style: none; margin: 0; padding: 0; }
.agenda-linha {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 11px 10px 11px 0;
  margin: 0 -10px 0 0;
  text-decoration: none;
  color: inherit;
  border-radius: var(--r-md);
  transition: background-color var(--t-medio, 0.28s) var(--ease-saida, ease);
}
.agenda-lista:not(.costura) li + li .agenda-linha { border-top: 1px solid color-mix(in srgb, var(--linha) 70%, transparent); border-radius: 0; }
.agenda-dia { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.agenda-dia b {
  font-family: var(--font-voz);
  font-size: calc(var(--font-xl) * var(--escala-fonte, 1));
  font-weight: 300;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.agenda-dia small { font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); color: var(--texto-3); margin-top: 4px; font-weight: 550; }
.agenda-dia.hoje b, .agenda-dia.hoje small { color: var(--texto); }
.agenda-dia.hoje small { font-weight: 700; }
.agenda-grupo.atrasado .agenda-dia b { color: var(--critical-text); }
.agenda-texto { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.agenda-texto .t { font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.agenda-texto .m { font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); color: var(--texto-3); display: flex; align-items: center; gap: 7px; }
.ponto-area { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; }

/* Em números: rótulo e valor em linhas (na gaveta do dinheiro). */
.figuras { margin: 0; display: flex; flex-direction: column; }
.figuras > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 13px 0;
  border-top: 1px solid var(--linha);
}
.figuras > div:first-child { border-top: none; padding-top: 0; }
/* Sem números ainda, o estado vazio é um bloco (não uma linha dt/dd): em linha, o botão estourava a largura do celular. */
.figuras > .empty { display: block; padding: 0; border-top: none; }
.figuras dt { font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); font-weight: 550; min-width: 0; }
.figuras dt small { display: block; font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); font-weight: 400; color: var(--texto-3); margin-top: 2px; line-height: 1.4; }
.figuras dd { margin: 0; font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); font-weight: 600; white-space: nowrap; }

@media (hover: hover) and (pointer: fine) {
  .agenda-linha:hover { background: var(--lavado); }
  .agenda-linha:hover .t { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
}

/* "Mais" (celular): todas as abas numa folha. */
@keyframes subir { from { transform: translateY(40px); opacity: 0; } }
.modal.folha-abas { max-width: 420px; }
.modal.folha-abas .modal-body { gap: 18px; }
.modal.folha-abas .nav-item { min-height: 46px; font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); }
.folha-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.folha-acoes .btn { justify-content: center; min-height: 44px; }
.brand-mark.mini { width: 22px; height: 22px; border-radius: var(--r-md); font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); }

/* ------------------------------ Responsivo ------------------------------- */

@media (max-width: 1100px) {
  .main { padding: 36px 32px 80px; }
  .fin-duas { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .app { flex-direction: column; background: none; }

  /* No celular a barra lateral vira só o topo da página: a marca à
     esquerda, o retrato (perfil) à direita. A navegação desce para a
     barra de abas, ao alcance do polegar. */
  .sidebar {
    width: 100%;
    height: auto;
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: calc(14px + env(safe-area-inset-top)) 16px 4px;
    background: transparent;
    overflow: visible;
  }
  .marca-topo { padding: 4px 0; }
  .marca-versao, .sidebar-scroll, .sidebar .nav, .sidebar .nav-nova, .sidebar .nav-organizar { display: none; }
  .sidebar-foot { margin: 0 0 0 auto; padding: 0; flex-shrink: 0; }
  .brand { padding: 4px; width: auto; border-radius: var(--r-lg); }
  .brand-text, .brand-caret { display: none; }
  .brand-mark { width: 36px; height: 36px; font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); border-radius: var(--r-lg); }

  .tabbar {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: var(--lateral);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-top: 1px solid var(--linha);
  }
  .tab {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 52px;
    padding: 6px 2px;
    border: none;
    border-radius: var(--r-lg);
    background: none;
    color: var(--texto-3);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  /* Na barra de baixo, o ícone vai solto (como nos apps do celular): cinza
     em repouso, na cor da aba quando ela está aberta, com o corpo mais cheio. */
  .tab-ic { --cor-aba: var(--texto); width: 24px; height: 24px; display: grid; place-items: center; font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); line-height: 1; }
  .tab-ic .ico { width: 23px; height: 23px; }
  .tab-rotulo { font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); font-weight: 550; line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tab.ativa { color: var(--texto); }
  .tab.ativa .tab-ic { color: var(--cor-aba); }
  .tab.ativa .tab-ic .corpo { opacity: 0.35; }
  .tab.ativa::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 30%;
    right: 30%;
    height: 2px;
    border-radius: 2px;
    background: var(--texto);
  }
  .tab:active .tab-ic { transform: scale(0.9); }
  .tab-conta {
    position: absolute;
    top: 4px;
    left: calc(50% + 8px);
    min-width: 17px;
    height: 17px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--superficie-3);
    color: var(--texto);
    font-size: calc(var(--font-xs) * var(--escala-fonte, 1));
    font-weight: 650;
    line-height: 17px;
    text-align: center;
    font-variant-numeric: tabular-nums;
  }
  .tab-conta.alert { background: var(--st-critical); color: #fff; }
  /* `data-barra` vem de UI.montarLayout: um :has() no html/body seria
     reavaliado a cada mudança em qualquer ponto da página. */
  :root[data-barra="sim"] body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  :root[data-barra="sim"] { scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .toasts { bottom: calc(84px + env(safe-area-inset-bottom)); }

  .main { padding: 18px 16px 48px; }
  .main::before { left: 0; }
  .g2, .g-auto { grid-template-columns: minmax(0, 1fr); }
  /* Faixas de números ficam 2 por linha: um número por tela inteira obrigava
     a rolar quatro telas para ver o resumo de uma página. */
  .g3, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .stat-value, .stat-value.delta { font-size: calc(var(--font-xl) * var(--escala-fonte, 1)); }
  /* A razão de números em duas colunas: fio à esquerda só na coluna da
     direita, fio em cima a partir da segunda linha. */
  .grid.g3:has(> .card > .stat-value) > .card,
  .grid.g4:has(> .card > .stat-value) > .card { padding: 16px 0 18px 16px; }
  .grid.g3:has(> .card > .stat-value) > .card:nth-child(odd),
  .grid.g4:has(> .card > .stat-value) > .card:nth-child(odd) { padding-left: 0; border-left: none; }
  .grid.g3:has(> .card > .stat-value) > .card:nth-child(n+3),
  .grid.g4:has(> .card > .stat-value) > .card:nth-child(n+3) { border-top: 1px solid var(--linha); }
  .grid.g3:has(> .card > .stat-value) > .card:last-child:nth-child(odd) { border-left: none; }
  .stat-sub { font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); }
  .card { padding: 17px; }
  .card-head { flex-wrap: wrap; row-gap: 6px; }
  .card-head > :first-child { flex: 1 1 150px; }

  /* Planilha de lançamentos vira lista de cartões: numa tela de 390px, sete
     colunas cortavam o valor — justamente o que mais importa. */
  table.sheet thead { display: none; }
  table.sheet, table.sheet tbody, table.sheet tfoot { display: block; }
  table.sheet tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
    row-gap: 3px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--linha);
  }
  table.sheet tbody tr:last-child { border-bottom: none; }
  table.sheet td { display: block; padding: 0; border: none; }
  table.sheet td:empty { display: none; }
  /* Data, categoria e "pago com" viram uma linha só, embaixo da descrição
     (.so-celular em financeiro.js); as colunas deles somem. */
  table.sheet tbody td:nth-child(1):not([colspan]),
  table.sheet tbody td:nth-child(3):not([colspan]),
  table.sheet tbody td:nth-child(4):not([colspan]) { display: none; }
  table.sheet td[colspan] { display: block; grid-column: 1 / -1; }
  table.sheet tbody td:nth-child(2) { grid-row: 1; grid-column: 1; }
  table.sheet tbody td:nth-child(5) { grid-row: 2; grid-column: 2; justify-self: end; }
  table.sheet tbody td:nth-child(6) { grid-row: 1; grid-column: 2; }
  table.sheet tbody td:nth-child(7) { grid-row: 3; grid-column: 1 / -1; }
  table.sheet .so-celular { display: block; }
  table.sheet .row-actions { justify-content: flex-start; margin-left: -8px; opacity: 1; }
  table.sheet tfoot td { font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); }

  /* Tabela de revisão da importação (importar.js): campos de verdade
     (checkbox, texto, seletor, select), não só texto — a versão em cartões
     de table.sheet acima esconderia metade dos controles. Cada lançamento
     vira um bloco empilhado, um campo por linha. */
  table.tabela-importar,
  table.tabela-importar thead,
  table.tabela-importar tbody,
  table.tabela-importar tr,
  table.tabela-importar td { display: block; width: auto !important; }
  table.tabela-importar thead { display: none; }
  table.tabela-importar td { padding: 0; border: none; overflow: visible; }
  table.tabela-importar tr {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "check data valor" "desc desc desc" "tipo tipo tipo" "cat cat cat" "badge badge badge";
    column-gap: 10px;
    row-gap: 8px;
    padding: 14px 4px;
    border-bottom: 1px solid var(--linha);
  }
  table.tabela-importar tbody tr:last-child { border-bottom: none; }
  /* Com "tbody" no seletor para empatar em especificidade com as regras de
     table.sheet tbody td:nth-child(…) acima (mesma tabela, duas classes). */
  table.tabela-importar tbody td:nth-child(1) { display: block; grid-area: check; align-self: center; }
  table.tabela-importar tbody td:nth-child(2) { display: block; grid-area: data; align-self: center; font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); color: var(--texto-3); }
  table.tabela-importar tbody td:nth-child(3) { display: block; grid-area: desc; }
  table.tabela-importar tbody td:nth-child(4) { display: block; grid-area: tipo; }
  table.tabela-importar tbody td:nth-child(5) { display: block; grid-area: cat; }
  table.tabela-importar tbody td:nth-child(6) { display: block; grid-area: valor; text-align: right; align-self: center; }
  table.tabela-importar tbody td:nth-child(7):empty { display: none; }
  table.tabela-importar tbody td:nth-child(7) { display: block; grid-area: badge; }
  table.tabela-importar.editavel tr { grid-template-columns: auto minmax(0, 1fr) 104px; }
  table.tabela-importar [data-data], table.tabela-importar [data-quantia] { width: 100%; min-width: 0; }
  table.tabela-importar .seg.sm { display: flex; }
  table.tabela-importar .seg.sm button { flex: 1; }

  .cols { gap: 8px; }
  .topbar { align-items: flex-start; margin-bottom: 24px; }
  .topbar h1 { font-size: calc(var(--font-xl) * var(--escala-fonte, 1)); }
  .topbar-actions { width: 100%; }
  .leitura, .leitura[data-tam="g"] { font-size: calc(var(--font-xl) * var(--escala-fonte, 1)); line-height: 1.16; letter-spacing: -0.012em; margin-bottom: 26px; }
  .leitura[data-tam="m"] { font-size: calc(var(--font-lg) * var(--escala-fonte, 1)); line-height: 1.18; }
  .leitura[data-tam="p"] { font-size: calc(var(--font-lg) * var(--escala-fonte, 1)); line-height: 1.22; }
  .leitura[data-tam="pp"] { font-size: calc(var(--font-md) * var(--escala-fonte, 1)); line-height: 1.28; letter-spacing: -0.004em; }
  .hero { padding: 18px; }
  .hero-value, .hero-value.delta { font-size: calc(var(--font-2xl) * var(--escala-fonte, 1)); }
  .section-title { font-size: calc(var(--font-md) * var(--escala-fonte, 1)); }
  .chart-name { width: 96px; }
  .chart-value { width: 88px; }
  .section { margin-top: 36px; }

  .modal { border-radius: var(--r-lg); max-height: 92vh; }
  .agenda-linha { grid-template-columns: 40px minmax(0, 1fr); row-gap: 2px; }
  .agenda-linha .badge { grid-column: 2; }
  .agenda-dia b { font-size: calc(var(--font-lg) * var(--escala-fonte, 1)); }
  /* A folha de abas sobe de baixo, como uma folha nativa. */
  .backdrop:has(> .modal.folha-abas) { align-items: end; padding: 0; }
  .modal.folha-abas {
    max-width: none;
    border-radius: var(--r-xl) 22px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
    animation: subir var(--t-medio, 280ms) var(--ease-saida, ease) !important;
  }
  .modal-head { padding: 22px 20px 0; }
  .modal-body { padding: 18px 20px; }
  .modal-foot { padding: 4px 20px 20px; }
  .modal-title { font-size: calc(var(--font-lg) * var(--escala-fonte, 1)); }
  .perfil-topo { padding: 22px 20px 18px; gap: 16px; }
  .perfil-abas { padding: 0 20px; }
  .perfil-painel { padding: 20px 20px 6px; }
  .avatar { width: 64px; height: 64px; font-size: calc(var(--font-md) * var(--escala-fonte, 1)); }
  .perfil-nome { font-size: calc(var(--font-lg) * var(--escala-fonte, 1)); }
  .perfil-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .perfil-stats.seis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .temas.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .ajuste-linha { flex-direction: column; align-items: stretch; gap: 10px; }
  .ajuste-controle .seg { min-width: 0; }
  .ajuste-controle .switch { align-self: flex-start; }
  .perfil-stat { padding: 12px; }
  .perfil-stat b { font-size: calc(var(--font-md) * var(--escala-fonte, 1)); }
  .ficha > div { flex-direction: column; gap: 2px; align-items: flex-start; }
  .ficha dd { text-align: left; }

  .fin-cabeca { grid-template-columns: minmax(0, 1fr); }
  .mes-nav { margin-top: -4px; }
  .mes-nav .mes-rotulo { min-width: 0; flex: 1; text-align: left; padding-left: 6px; }
  .fin-duas.iguais { grid-template-columns: minmax(0, 1fr); }
  .semanas { grid-template-columns: minmax(0, 1fr); }
  .modal-body.criador { grid-template-columns: minmax(0, 1fr); }
  .modal-body.form-grade { grid-template-columns: minmax(0, 1fr); }
  .lanc-duas { grid-template-columns: minmax(0, 1fr); }
  .modal-foot { flex-wrap: wrap; }
  .modal.lancamento [data-acao="outro"] { order: 5; flex-basis: 100%; justify-content: center; }
  .modal-atalho { display: none; }
  .modal-head.com-marca { gap: 12px; }
  .modal-ic { width: 36px; height: 36px; border-radius: var(--r-md); }
  .semana { min-height: 0; }
  .perguntas { grid-template-columns: minmax(0, 1fr); }
  .fin-filtros .busca { max-width: none; flex-basis: 100%; }
  .fin-filtros select.input { flex: 1; }

  .editor-topo { padding: 11px 15px; gap: 10px; }
  .editor-estado { display: none; }
  .editor-voltar { max-width: 45vw; }
  .editor-barra { top: 49px; padding: 7px 15px; }
  .editor-folha { padding: 28px 17px 60px; }
  .editor-titulo { font-size: calc(var(--font-xl) * var(--escala-fonte, 1)); }
  .editor-rodape { padding: 8px 15px; }
  .editor-dica { display: none; }
  .editor-ferramentas .editor-btn[data-menu="folha"], .editor-ferramentas #btn-sumario { display: none; }
  .editor-barra { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .editor-barra::-webkit-scrollbar { display: none; }
  .editor-grupo { flex-shrink: 0; }
  .editor-sumario { display: none; }
  .editor-barra:has(.editor-busca:not([hidden])) { flex-wrap: wrap; }
  .editor-busca .input { width: calc(50% - 4px); }

  .assistente { padding: 24px 14px 40px; }
  .assistente-card { padding: 28px 20px; }
  .assistente-passo h2 { font-size: calc(var(--font-lg) * var(--escala-fonte, 1)); }
  .assistente-linha { flex-direction: column; gap: 20px; align-items: stretch; }
}

@media (max-width: 420px) {
  .nav-item .nav-label { font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); }
  .perfil-stat span { font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); }
}


/* ===========================================================================
   Calendário da aba Pessoal e lembretes (v1.6)
   =========================================================================== */

/* O calendário não precisa de caixa em volta: a própria grade é a moldura. */
.card.calendario { padding: 0; margin-bottom: 40px; background: none; border: none; box-shadow: none; }
.cal-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.cal-nav { margin: 0; }
.cal-mes { font-family: var(--font-voz); font-size: calc(var(--font-md) * var(--escala-fonte, 1)); font-weight: 500; min-width: 190px; text-align: center; letter-spacing: -0.01em; }
.cal-grade {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px;
  background: var(--linha); border: 1px solid var(--linha); border-radius: var(--r-lg); overflow: hidden;
}
.cal-semana { background: var(--superficie); color: var(--texto-3); font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); font-weight: 550; text-align: left; padding: 8px 10px 6px; text-transform: capitalize; }
.cal-dia {
  all: unset; box-sizing: border-box; position: relative; min-height: 104px; padding: 7px 8px 8px;
  background: var(--superficie); display: flex; flex-direction: column; gap: 4px; cursor: pointer; min-width: 0;
  transition: background-color .18s var(--ease-saida, ease);
}
.cal-dia:hover { background: var(--superficie-2); }
.cal-dia:focus-visible { outline: 2px solid var(--texto); outline-offset: -2px; }
.cal-dia.fds { background: color-mix(in srgb, var(--superficie) 70%, var(--fundo)); }
.cal-dia.fds:hover { background: var(--superficie-2); }
.cal-dia.fora { background: var(--fundo); }
.cal-dia.fora .cal-num, .cal-dia.fora .cal-item { opacity: .45; }
.cal-num { font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); font-weight: 550; color: var(--texto-2); font-variant-numeric: tabular-nums; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; margin: -3px 0 0 -4px; }
.cal-dia.passado:not(.hoje) .cal-num { color: var(--texto-3); }
.cal-dia.hoje .cal-num { background: var(--texto); color: var(--sobre-claro); }
.cal-itens { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal-item {
  display: block; font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); line-height: 1.3; padding: 2px 6px 2px 8px; border-radius: var(--r-xs);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--texto);
  background: color-mix(in srgb, var(--c) 17%, transparent); box-shadow: inset 2px 0 0 var(--c);
}
.cal-item b { font-weight: 600; color: var(--texto-2); }
.cal-item.feito { text-decoration: line-through; color: var(--texto-3); background: transparent; }
.cal-item.importante { box-shadow: inset 2px 0 0 var(--c), inset 0 0 0 1px color-mix(in srgb, var(--st-warning) 55%, transparent); }
.cal-mais { font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); color: var(--texto-3); padding-left: 6px; }
.cal-pontos { display: none; gap: 3px; margin-top: auto; }
.cal-pontos i { width: 6px; height: 6px; border-radius: 50%; background: var(--c); }

/* Listas de lembretes (resumo do dia, o que se aproxima, dia do calendário, revisão) */
.lembretes { list-style: none; margin: 0; padding: 0; }
.lembretes li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linha); }
.lembretes li:last-child { border-bottom: none; }
.lembretes .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lembretes .t { font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); font-weight: 500; color: var(--texto); overflow-wrap: anywhere; }
.lembretes .m { font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); color: var(--texto-3); }
.lembretes .check { margin-top: 2px; }
.lembretes .badge svg { width: 12px; height: 12px; vertical-align: -2px; }
.lembrete-selo { flex: none; width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: var(--c); }
.lembrete-grupo { font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); font-weight: 600; color: var(--texto-2); margin: 4px 0 2px; }
.lembrete-grupo + .lembretes { margin-bottom: 14px; }
.lembrete-rodape {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linha);
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); color: var(--texto-2);
}
.lembrete-rodape > span:first-child { flex: 1 1 260px; }
.lembrete-acoes { display: flex; flex-wrap: wrap; gap: 6px; }
.modal.resumo-dia .modal-body { max-height: min(60vh, 520px); overflow: auto; }

/* Importar calendário */
.fonte-lista { display: flex; flex-direction: column; gap: 8px; }
.fonte-opcao {
  all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 14px; padding: 14px 16px; cursor: pointer;
  border: 1px solid var(--linha); border-radius: var(--r-lg); background: var(--superficie);
  transition: border-color .18s ease, background-color .18s ease, transform .18s var(--ease-saida, ease);
}
.fonte-opcao:hover:not([disabled]) { border-color: var(--linha-forte); background: var(--superficie-2); transform: translateY(-1px); }
.fonte-opcao:focus-visible { outline: 2px solid var(--texto); outline-offset: 2px; }
.fonte-opcao[disabled] { opacity: .5; cursor: not-allowed; }
.fonte-opcao .grow { display: flex; flex-direction: column; gap: 3px; }
.fonte-opcao strong { font-weight: 600; font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); }
.fonte-opcao .grow span { font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); color: var(--texto-3); }
.fonte-ic { flex: none; width: 38px; height: 38px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--s-pessoal-wash); color: var(--s-pessoal); }
.fonte-ic svg { width: 20px; height: 20px; }
.fonte-ajuda { margin-top: 14px; font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); color: var(--texto-2); }
.fonte-ajuda summary { cursor: pointer; color: var(--texto); font-weight: 500; }
.fonte-ajuda ul { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.importar-cal-barra { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 6px; }
.importar-cal-barra label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.importar-cal { max-height: min(52vh, 480px); overflow: auto; }

@media (max-width: 700px) {
  .card.calendario { padding: 12px 10px 10px; }
  .cal-mes { font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); min-width: 0; }
  .cal-semana { padding: 6px 0 4px; text-align: center; font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); }
  .cal-dia { min-height: 58px; padding: 5px 4px 6px; align-items: center; }
  .cal-num { margin: 0; width: 24px; height: 24px; font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); }
  .cal-itens { display: none; }
  .cal-pontos { display: flex; justify-content: center; }
}

/* ===========================================================================
   Abas próprias: vistas (lista, cartões, quadro, tabela, calendário) — v1.6
   =========================================================================== */

.seg.vistas { flex: none; }
.seg.vistas button { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.seg.vistas svg { width: 15px; height: 15px; }
#secao-itens .card-head { flex-wrap: wrap; gap: 10px; }
#secao-itens .fin-filtros > label.card-note { margin-left: auto; }
.fin-duas.so-lista { grid-template-columns: minmax(0, 1fr); }
.fin-duas.so-lista > .fin-coluna { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
.fin-duas.so-lista > .fin-coluna > #resumos-campos { display: contents; }

/* Cartões */
.pilar-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.pilar-cartao {
  display: flex; flex-direction: column; gap: 10px; padding: 14px; min-width: 0;
  border: 1px solid var(--linha); border-radius: var(--r-lg); background: var(--superficie-2);
  transition: border-color .18s ease, transform .22s var(--ease-saida);
}
.pilar-cartao:hover { border-color: var(--linha-forte); }
.pilar-cartao.feito { opacity: .7; }
.pilar-cartao header { display: flex; align-items: flex-start; gap: 10px; }
.pilar-cartao h4 { flex: 1; margin: 0; font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.pilar-cartao .row-actions { margin: -4px -6px 0 0; }
.pilar-cartao dl { margin: 0; display: flex; flex-direction: column; gap: 5px; }
.pilar-cartao dl > div { display: flex; justify-content: space-between; gap: 10px; font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); }
.pilar-cartao dt { color: var(--texto-3); }
.pilar-cartao dd { margin: 0; color: var(--texto); text-align: right; overflow-wrap: anywhere; }
.pilar-cartao dd a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.pilar-cartao-nota { margin: 0; font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); color: var(--texto-2); line-height: 1.5; }
.pilar-cartao footer { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.pilar-cartao footer:empty { display: none; }
.pilar-cartao footer .btn { margin-left: auto; }
.estrelas-txt { color: var(--st-warning) !important; letter-spacing: 1px; }

/* Quadro */
.quadro { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.quadro-coluna {
  display: flex; flex-direction: column; gap: 8px; padding: 10px; min-height: 140px;
  border-radius: var(--r-lg); background: var(--fundo); border: 1px dashed transparent;
  transition: border-color .15s ease, background-color .15s ease;
}
.quadro-coluna.alvo { border-color: var(--tint, var(--linha-forte)); background: color-mix(in srgb, var(--tint, var(--texto)) 7%, var(--fundo)); }
.quadro-coluna h3 { margin: 2px 4px 2px; font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); font-weight: 600; color: var(--texto-2); display: flex; gap: 8px; }
.quadro-coluna h3 span { color: var(--texto-3); font-weight: 450; }
.quadro-cartoes { display: flex; flex-direction: column; gap: 8px; }
.quadro-cartao {
  display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; cursor: grab;
  background: var(--superficie-2); border: 1px solid var(--linha); border-radius: var(--r-md);
  box-shadow: inset 2px 0 0 var(--tint, var(--linha-forte));
  transition: transform .2s var(--ease-saida), border-color .15s ease, opacity .15s ease;
}
.quadro-cartao:hover { border-color: var(--linha-forte); }
.quadro-cartao.arrastando { opacity: .45; user-select: none; -webkit-user-select: none; }
.quadro-cartao.feito .quadro-titulo { text-decoration: line-through; color: var(--texto-3); }
.quadro-titulo { all: unset; font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); font-weight: 550; cursor: pointer; overflow-wrap: anywhere; }
.quadro-titulo:focus-visible { outline: 2px solid var(--texto); outline-offset: 2px; border-radius: 4px; }
.quadro-cartao .meta { font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); color: var(--texto-3); }
.quadro-mover select { width: 100%; font: inherit; font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); color: var(--texto-2); background: var(--superficie-2); border: 1px solid var(--linha); border-radius: var(--r-xs); padding: 3px 6px; }

/* Tabela */
.tabela-rolagem { overflow-x: auto; margin: 0 -4px; }
.tabela-pilar { width: 100%; border-collapse: collapse; font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); }
.tabela-pilar th, .tabela-pilar td { padding: 9px 10px; border-bottom: 1px solid var(--linha); text-align: left; white-space: nowrap; }
.tabela-pilar td:nth-child(2) { white-space: normal; min-width: 180px; }
.tabela-pilar th { font-weight: 550; color: var(--texto-3); font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); }
.tabela-pilar th button { all: unset; cursor: pointer; }
.tabela-pilar th button:focus-visible { outline: 2px solid var(--texto); outline-offset: 2px; border-radius: 4px; }
.tabela-pilar th button:hover, .tabela-pilar th button[aria-sort="ascending"], .tabela-pilar th button[aria-sort="descending"] { color: var(--texto); }
.tabela-pilar .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela-pilar .col-check { width: 28px; }
.tabela-pilar tbody tr { transition: background-color .15s ease; }
.tabela-pilar tbody tr:hover { background: var(--superficie-2); }
.tabela-pilar tr.feito .tabela-nome { text-decoration: line-through; color: var(--texto-3); }
.tabela-nome { all: unset; cursor: pointer; font-weight: 550; }
.tabela-nome:focus-visible { outline: 2px solid var(--texto); outline-offset: 2px; border-radius: 4px; }
.tabela-nome:hover { text-decoration: underline; text-underline-offset: 2px; }
.tabela-pilar a { color: inherit; }

/* Calendário da aba: células mais baixas */
.cal-grade.compacta .cal-dia { min-height: 84px; }

/* Campo de nota (estrelas) */
.estrelas { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.estrela { all: unset; cursor: pointer; padding: 3px; border-radius: var(--r-xs); color: var(--texto-3); line-height: 0; transition: color .12s ease, transform .18s var(--ease-mola); }
.estrela svg { width: 24px; height: 24px; }
.estrela .ico.cheia { display: none; }
.estrela:focus-visible { outline: 2px solid var(--texto); }
.estrela[aria-pressed="true"], .estrela[aria-pressed="true"] ~ .estrela { color: var(--st-warning); }
.estrela[aria-pressed="true"] .ico:not(.cheia), .estrela[aria-pressed="true"] ~ .estrela .ico:not(.cheia) { display: none; }
.estrela[aria-pressed="true"] .ico.cheia, .estrela[aria-pressed="true"] ~ .estrela .ico.cheia { display: block; }
@media (hover: hover) {
  .estrelas:hover .estrela { color: var(--texto-3); }
  .estrelas:hover .estrela .ico:not(.cheia) { display: block; }
  .estrelas:hover .estrela .ico.cheia { display: none; }
  .estrelas .estrela:hover, .estrelas .estrela:hover ~ .estrela { color: var(--st-warning); transform: scale(1.08); }
  .estrelas .estrela:hover .ico:not(.cheia), .estrelas .estrela:hover ~ .estrela .ico:not(.cheia) { display: none; }
  .estrelas .estrela:hover .ico.cheia, .estrelas .estrela:hover ~ .estrela .ico.cheia { display: block; }
}

@media (max-width: 700px) {
  .seg.vistas button span { display: none; }
  .seg.vistas button { padding: 6px 9px; }
  .quadro { grid-auto-columns: minmax(78%, 1fr); scroll-snap-type: x mandatory; }
  .quadro-coluna { scroll-snap-align: start; }
}

/* ============================== Gavetas (2.0) ===============================
   Pedido do Luiz: tudo organizado e delimitado, como gavetas com informação
   fácil, simples e objetiva. Cada página vira um gaveteiro: a leitura no
   alto, os números da aba num painel só e, embaixo, uma coluna de gavetas.
   Cada gaveta é uma superfície delimitada com o seu puxador: o ícone da
   aba, o nome, o essencial numa linha (o que se lê com ela fechada) e o
   botão de registrar o que mora nela. Aberta, mostra o conteúdo; fechada,
   continua dizendo o principal. Dentro dela nada vira caixa de novo: listas
   e fios; quando há peças que se tocam (perguntas, metas), elas são
   compartimentos de tom mais escuro, sem borda. A lógica de abrir e
   fechar mora em ui.js (UI.gavetas). */

.gaveteiro { display: flex; flex-direction: column; gap: 12px; }
.gaveta + .gaveta, .gaveteiro + .gaveta, .gaveta + .gaveteiro, .gaveteiro + .gaveteiro { margin-top: 12px; }
/* Numa grade de duas colunas (a lista e o lado de uma aba), as gavetas já se separam pelo vão. */
.fin-duas > .gaveta, .fin-coluna > .gaveta { margin-top: 0; }

.gaveta {
  position: relative;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  box-shadow: var(--brilho);
  min-width: 0;
  scroll-margin-top: 16px;
}

/* O puxador: a cabeça inteira abre e fecha (o ::after do botão cobre a
   faixa; ações e links ficam por cima dele). */
.gaveta-cab {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "titulo resumo acoes seta";
  align-items: center;
  gap: 4px 16px;
  min-height: 66px;
  padding: 12px 14px 12px 16px;
}
.gaveta-titulo { grid-area: titulo; margin: 0; font: inherit; min-width: 0; }
.gaveta-puxador {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  color: var(--texto);
  font-family: var(--font-voz);
  font-size: calc(var(--font-md) * var(--escala-fonte, 1));
  font-weight: 450;
  letter-spacing: 0;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  min-width: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.gaveta-puxador::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: calc(var(--r-lg) - 1px);
  transition: background-color var(--t-medio) var(--ease-saida);
}
.gaveta[data-aberta="sim"] .gaveta-puxador::after { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.gaveta-puxador:focus-visible { outline: none; }
.gaveta-puxador:focus-visible::after { box-shadow: inset 0 0 0 2px var(--destaque); }
.gaveta-nome { min-width: 0; overflow-wrap: anywhere; }
.gaveta-nome .swatch { display: none; }


.gaveta-resumo {
  grid-area: resumo;
  min-width: 0;
  font-size: calc(var(--font-sm) * var(--escala-fonte, 1));
  color: var(--texto-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.gaveta-resumo b { color: var(--texto-2); font-weight: 600; }
.gaveta-resumo .alerta { color: var(--critical-text); font-weight: 600; }
.gaveta-resumo .atencao { color: var(--warning-text); font-weight: 600; }
.gaveta-resumo .bem { color: var(--success-text); font-weight: 600; }
.gaveta-resumo a, .gaveta-resumo button { pointer-events: auto; position: relative; }
/* 2.2: o resumo é o que se lê com a gaveta fechada. Aberta, o conteúdo já
   diz tudo, e repetir em cima seria ruído; data-sempre mantém um total que
   não aparece lá dentro (quanto falta pagar). */
.gaveta-resumo { transition: opacity var(--t-medio) var(--ease-saida), visibility var(--t-medio); }
.gaveta[data-aberta="sim"] > .gaveta-cab .gaveta-resumo:not([data-sempre]) { opacity: 0; visibility: hidden; }
.gaveta-acoes { grid-area: acoes; display: flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; min-width: 0; }
.gaveta-acoes .google-state { margin-right: 6px; }
.gaveta-seta {
  grid-area: seta;
  width: 30px;
  height: 30px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  color: var(--texto-3);
  pointer-events: none;
  transition: transform var(--t-medio) var(--ease-saida), color var(--t-medio) var(--ease-saida), background-color var(--t-medio) var(--ease-saida);
}
.gaveta-seta .ico { width: 16px; height: 16px; }
.gaveta[data-aberta="sim"] > .gaveta-cab .gaveta-seta { transform: rotate(180deg); }

@media (hover: hover) and (pointer: fine) {
  .gaveta-puxador:hover::after { background: color-mix(in srgb, var(--texto) 3%, transparent); }
  .gaveta-cab:has(.gaveta-puxador:hover) .gaveta-seta { color: var(--texto); background: var(--superficie-2); }
}

/* O conteúdo: a linha do grid vai de 1fr a 0fr, então a gaveta desliza
   sem medir altura em JS. Fechada, fica invisível para o leitor de tela e
   fora do Tab (visibility). */
.gaveta-corpo {
  display: grid;
  /* minmax(0, 1fr): conteúdo largo (tabela, gráfico) rola dentro da gaveta, nunca estica a página. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--t-lento) var(--ease-saida);
}
.gaveta[data-aberta="nao"] > .gaveta-corpo {
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows var(--t-medio) var(--ease-saida), visibility 0s linear var(--t-medio);
}
.gaveta-dentro { min-height: 0; min-width: 0; padding: 0 22px; }
.gaveta-dentro::before { content: ""; display: block; height: 1px; background: var(--linha); margin: 0 -22px 20px; }
.gaveta-dentro::after { content: ""; display: block; height: 22px; }
.gaveta[data-aberta="nao"] > .gaveta-corpo > .gaveta-dentro,
.gaveta.movendo > .gaveta-corpo > .gaveta-dentro { overflow: hidden; }
/* Antes do script ligar a gaveta, o conteúdo já sai com o respiro certo. */
.gaveta-corpo:not(:has(> .gaveta-dentro)) { padding: 0 22px 22px; }

/* Dentro da gaveta, o que era título de cartão some (a gaveta já tem nome)
   e as peças viram compartimentos: tom mais escuro, sem borda. */
.gaveta .card, .gaveta .pergunta, .gaveta .meta-cartao {
  background: color-mix(in srgb, var(--superficie-2) 62%, var(--superficie));
  border: none;
  box-shadow: none;
}
.gaveta .card-head:empty { display: none; }
.gaveta .perguntas { gap: 10px; }

/* Estado vazio dentro da gaveta: uma linha, não um cartaz no meio dela. */
.gaveta .empty {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "ic titulo acao" "ic texto acao";
  align-items: center;
  column-gap: 14px;
  text-align: left;
  padding: 2px 0;
}
.gaveta .empty-icon { grid-area: ic; margin: 0; width: 40px; height: 40px; }
.gaveta .empty-title { grid-area: titulo; font-family: var(--font); font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); font-weight: 600; margin: 0; letter-spacing: 0; }
.gaveta .empty-text { grid-area: texto; margin: 2px 0 0; max-width: 60ch; font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); line-height: 1.5; }
.gaveta .empty .btn { grid-area: acao; }
.gaveta .empty:not(:has(.empty-text)) .empty-title { grid-row: 1 / 3; }

/* Números da aba: razão aberta, entre um fio forte em cima e um fio embaixo;
   sem fundo, sem moldura. O número fala na voz. */
.grid.g3:has(> .card > .stat-value),
.grid.g4:has(> .card > .stat-value) {
  background: none;
  border: 0;
  border-top: 1px solid var(--linha-forte);
  border-bottom: 1px solid var(--linha);
  border-radius: 0;
  box-shadow: none;
  margin-bottom: 12px !important;
}
.grid.g3:has(> .card > .stat-value) > .card,
.grid.g4:has(> .card > .stat-value) > .card { padding: 20px 24px 20px; }
.grid.g3:has(> .card > .stat-value) > .card:first-child,
.grid.g4:has(> .card > .stat-value) > .card:first-child { padding-left: 0; }
.grid.g3:has(> .card > .stat-value) .stat-value,
.grid.g4:has(> .card > .stat-value) .stat-value { font-family: var(--font-voz); font-weight: 300; font-size: calc(var(--font-2xl) * var(--escala-fonte, 1)); letter-spacing: -.02em; }
@media (max-width: 680px) {
  .grid.g3:has(> .card > .stat-value) .stat-value,
  .grid.g4:has(> .card > .stat-value) .stat-value { font-size: calc(var(--font-xl) * var(--escala-fonte, 1)); white-space: nowrap; }
}

/* Com gavetas, a leitura fala um tom abaixo: é a frase do dia, não um cartaz. */
.wrap:has(.gaveta) > .leitura { margin-bottom: 26px; }
.wrap:has(.gaveta) > .leitura[data-tam="g"] { font-size: calc(var(--font-2xl) * var(--escala-fonte, 1)); }
.wrap:has(.gaveta) > .leitura[data-tam="m"] { font-size: calc(var(--font-xl) * var(--escala-fonte, 1)); }
.wrap:has(.gaveta) > .leitura[data-tam="p"] { font-size: calc(var(--font-xl) * var(--escala-fonte, 1)); }
.wrap:has(.gaveta) > .leitura[data-tam="pp"] { font-size: calc(var(--font-lg) * var(--escala-fonte, 1)); }

@media (max-width: 900px) {
  .grid.g3:has(> .card > .stat-value) > .card,
  .grid.g4:has(> .card > .stat-value) > .card { padding: 14px 16px 16px; }
  .grid.g3:has(> .card > .stat-value) > .card:first-child,
  .grid.g4:has(> .card > .stat-value) > .card:first-child,
  .grid.g3:has(> .card > .stat-value) > .card:nth-child(odd),
  .grid.g4:has(> .card > .stat-value) > .card:nth-child(odd) { padding-left: 16px; }
  .wrap:has(.gaveta) > .leitura[data-tam] { font-size: calc(var(--font-lg) * var(--escala-fonte, 1)); }
  .wrap:has(.gaveta) > .leitura[data-tam="pp"] { font-size: calc(var(--font-lg) * var(--escala-fonte, 1)); }
}

@media (max-width: 640px) {
  .gaveta-cab {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "titulo acoes seta" "resumo resumo resumo";
    gap: 2px 8px;
    min-height: 58px;
    padding: 11px 8px 11px 12px;
  }
  .gaveta-puxador { font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); gap: 11px; }
  .gaveta-resumo { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); }
  .gaveta-resumo:empty, .gaveta[data-aberta="sim"] > .gaveta-cab .gaveta-resumo:not([data-sempre]) { display: none; }
  .gaveta-dentro { padding: 0 14px; }
  .gaveta-dentro::before { margin: 0 -14px 16px; }
  .gaveta-dentro::after { height: 16px; }
  .gaveta .empty { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ic titulo" "ic texto" ". acao"; row-gap: 2px; }
  .gaveta .empty .btn { justify-self: start; margin-top: 10px; }
}

/* ---- Análises e ajustes (2.2): as gavetas finas ----
   O que pede ação fica nas gavetas de cima, com superfície. O que se
   consulta de vez em quando (ritmo, maiores gastos, perguntas, ajustes)
   desce para um grupo de gavetas finas: sem superfície, separadas por fio,
   como as gavetas rasas de um arquivo. Mesmo puxador, mesma memória. */
.gaveteiro.consulta { gap: 0; border-bottom: 1px solid var(--linha); }
.gaveteiro + .gaveteiro.consulta, .gaveta + .gaveteiro.consulta { margin-top: 48px; }
.consulta-rotulo { margin: 0 0 10px 4px; font-family: var(--font); font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); font-weight: 600; line-height: 1.3; color: var(--texto-3); }
.consulta > .gaveta { background: transparent; border: 0; border-top: 1px solid var(--linha); border-radius: 0; box-shadow: none; margin-top: 0; }
.consulta .gaveta-cab { min-height: 56px; padding: 8px 6px 8px 4px; }
.consulta .gaveta-puxador { font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); }
.consulta .gaveta-puxador::after { border-radius: var(--r-md); inset: 4px -8px; }
.consulta .gaveta-dentro { padding: 0 4px; }
.consulta .gaveta-dentro::before { display: none; }
.consulta .gaveta-dentro::after { height: 26px; }
.consulta .gaveta-corpo:not(:has(> .gaveta-dentro)) { padding: 0 4px 26px; }
@media (max-width: 640px) {
  .gaveteiro + .gaveteiro.consulta, .gaveta + .gaveteiro.consulta { margin-top: 36px; }
  .consulta .gaveta-cab { min-height: 52px; padding: 8px 2px; }
  .consulta .gaveta-puxador { font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); }
  .consulta .gaveta-dentro { padding: 0 2px; }
}

/* ---- Visão geral em gavetas ---- */

/* Três números lado a lado dentro da gaveta do dinheiro. */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.trio-item { min-width: 0; padding: 0 22px; display: flex; flex-direction: column; align-items: flex-start; }
.trio-item:first-child { padding-left: 0; }
.trio-item + .trio-item { border-left: 1px solid var(--linha); }
.trio-item .btn { margin-top: 12px; }
.trio .stat-value { font-size: calc(var(--font-xl) * var(--escala-fonte, 1)); }
.trio + .figuras { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--linha); }
.figuras > div:first-child { padding-top: 0; }

/* "Ver mais", "Abrir o Financeiro": a saída de dentro da gaveta, em texto. */
.link-gaveta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  padding: 6px 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: calc(var(--font-sm) * var(--escala-fonte, 1));
  font-weight: 600;
  color: var(--texto-2);
  cursor: pointer;
  text-decoration: none;
}
.link-gaveta::after {
  content: "";
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--t-medio) var(--ease-mola);
}
button.link-gaveta::after { transform: rotate(90deg); }
.link-gaveta:focus-visible { outline: 2px solid var(--destaque); outline-offset: 2px; border-radius: var(--r-xs); }
@media (hover: hover) and (pointer: fine) {
  .link-gaveta:hover { color: var(--texto); }
  a.link-gaveta:hover::after { transform: translateX(3px); }
}
.gaveta .agenda-grupo:first-child .agenda-cab { padding-top: 0; }

/* Suas abas: um ladrilho por aba, como compartimentos da gaveta. */
.estante { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.ladrilho {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "selo nome" "valor valor" "sub sub";
  align-items: center;
  gap: 12px 12px;
  padding: 16px;
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--superficie-2) 62%, var(--superficie));
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.ladrilho-selo {
  grid-area: selo;
  --cor-aba: var(--texto-2);
  width: 34px;
  height: 34px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  font-size: calc(var(--font-sm) * var(--escala-fonte, 1));
  color: var(--cor-aba);
  background: color-mix(in oklab, var(--cor-aba) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--cor-aba) 12%, transparent);
}
.ladrilho-selo.pessoal { --cor-aba: var(--s-pessoal); }
.ladrilho-selo.financeiro { --cor-aba: var(--s-financeiro); }
.ladrilho-selo.faculdade { --cor-aba: var(--s-faculdade); }
.ladrilho-selo.projetos { --cor-aba: var(--s-projetos); }
.ladrilho-selo .ico { width: 18px; height: 18px; }
.ladrilho-selo .ico.duo .corpo { opacity: 0.2; }
.ladrilho-nome { grid-area: nome; font-family: var(--font-voz); font-size: calc(var(--font-md) * var(--escala-fonte, 1)); font-weight: 450; letter-spacing: 0; line-height: 1.2; min-width: 0; overflow-wrap: anywhere; }
.ladrilho-valor { grid-area: valor; font-size: calc(var(--font-md) * var(--escala-fonte, 1)); font-weight: 600; letter-spacing: -0.01em; line-height: 1.1; }
.ladrilho-valor small { font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); font-weight: 500; color: var(--texto-3); letter-spacing: 0; }
.ladrilho-sub { grid-area: sub; margin-top: -6px; font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ladrilho.pillar:hover { background: color-mix(in srgb, var(--superficie-2) 90%, var(--superficie)); }
.ladrilho:focus-visible { outline: 2px solid var(--destaque); outline-offset: 2px; }

/* A janela "O que você quer registrar?". */
.modal.registrar { max-width: 520px; }
.registrar-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.registrar-opcao {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--superficie-2) 55%, transparent);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--t-medio) var(--ease-saida);
}
.registrar-opcao:focus-visible { outline: 2px solid var(--destaque); outline-offset: 1px; }
.registrar-selo {
  --cor-aba: var(--texto-2);
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  font-size: calc(var(--font-sm) * var(--escala-fonte, 1));
  color: var(--cor-aba);
  background: color-mix(in oklab, var(--cor-aba) 14%, transparent);
}
.registrar-selo.pessoal { --cor-aba: var(--s-pessoal); }
.registrar-selo.financeiro { --cor-aba: var(--s-financeiro); }
.registrar-selo.faculdade { --cor-aba: var(--s-faculdade); }
.registrar-selo.projetos { --cor-aba: var(--s-projetos); }
.registrar-selo .ico { width: 19px; height: 19px; }
.registrar-selo .ico.duo .corpo { opacity: 0.2; }
.registrar-texto { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.registrar-texto b { font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); font-weight: 600; }
.registrar-texto small { font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); color: var(--texto-3); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.registrar-aba { font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); color: var(--texto-3); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
  .registrar-opcao:hover { background: var(--superficie-2); }
}

@media (max-width: 900px) {
  .trio { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
  .trio-item:first-child { grid-column: 1 / -1; padding: 0 0 16px; border-bottom: 1px solid var(--linha); }
  .trio-item:nth-child(2) { padding-left: 0; border-left: none; }
  .trio-item { padding: 0 0 0 16px; }
}
@media (max-width: 640px) {
  .estante { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ladrilho { padding: 14px 12px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "selo" "nome" "valor" "sub"; gap: 8px; }
  .ladrilho-nome { font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); }
  .ladrilho-valor { font-size: calc(var(--font-md) * var(--escala-fonte, 1)); }
  .ladrilho-valor small { display: block; margin-top: 2px; }
  .ladrilho-sub { margin-top: -2px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .registrar-aba { display: none; }
  .registrar-texto small { white-space: normal; }
}
.link-gaveta { text-align: left; }
@media (max-width: 640px) {
  .figuras > div { flex-direction: column; gap: 4px; }
  .figuras dd { white-space: normal; }
}
/* Uma linha de apoio dentro da gaveta (o que fazer com o que está nela). */
.dica-gaveta { margin: 0 0 16px; font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); color: var(--texto-3); line-height: 1.5; max-width: 72ch; }
.dica-gaveta.depois { margin: 16px 0 0; }
/* A planilha dentro da gaveta: sem a moldura própria (a gaveta já é a moldura). */
.gaveta .table-wrap { border: none; border-radius: 0; background: none; margin: 0 -22px; }
.gaveta .table-wrap table.sheet th { background: var(--superficie); }
.gaveta .table-wrap table.sheet th:first-child, .gaveta .table-wrap table.sheet td:first-child { padding-left: 22px; }
.gaveta .table-wrap table.sheet th:last-child, .gaveta .table-wrap table.sheet td:last-child { padding-right: 22px; }
.gaveta .table-wrap .tfoot-row { background: color-mix(in srgb, var(--superficie-2) 62%, var(--superficie)); }
@media (max-width: 900px) {
  .gaveta .table-wrap { margin: 0; }
  .gaveta .table-wrap table.sheet th:first-child, .gaveta .table-wrap table.sheet td:first-child { padding-left: 0; }
  .gaveta .table-wrap table.sheet th:last-child, .gaveta .table-wrap table.sheet td:last-child { padding-right: 0; }
}
/* Um cartão que só embrulhava o estado vazio some dentro da gaveta. */
.gaveta .card:has(> .empty:only-child) { background: none; padding: 0; border: none; }
/* Gaveteiro dentro de gaveteiro (a lista e o lado de uma aba): o vão do flex já separa. */
.gaveteiro > .gaveta, .gaveteiro > .gaveteiro { margin-top: 0; }
/* Compartimentos: os resumos de campo de uma aba, lado a lado dentro da gaveta. */
.compartimentos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; align-items: start; }
.gaveta .compartimentos > .card { padding: 16px 18px; }
.gaveta .compartimentos .card-head { margin-bottom: 12px; }
/* As vistas da lista (Lista, Cartões, Quadro...) moram no puxador. */
.gaveta-acoes .seg.vistas { position: relative; }
/* As quatro semanas da Faculdade dentro da gaveta: colunas separadas por fio, sem a moldura própria. */
.gaveta .semanas { border: none; border-radius: 0; background: none; gap: 0; overflow: visible; }
.gaveta .semana { background: none; padding: 2px 16px 4px; min-height: 120px; }
.gaveta .semana:first-child { padding-left: 0; }
.gaveta .semana + .semana { border-left: 1px solid var(--linha); }
.gaveta .semana.agora .semana-titulo { color: var(--texto); }
@media (max-width: 900px) {
  .gaveta .semana { padding: 12px 0; min-height: 0; }
  .gaveta .semana + .semana { border-left: none; border-top: 1px solid var(--linha); }
  .gaveta .semana:first-child { padding-top: 0; }
}
/* Vazio numa gaveta que já tem o botão de registrar no puxador: o botão não se repete. */
.gaveta:has(> .gaveta-cab .gaveta-acoes .btn) .gaveta-corpo .empty .btn { display: none; }
#progresso + #etapas { margin-top: 14px; }

/* ========================= Itens das gavetas (2.1) =========================
   Pedido do Luiz: organização interna agradável. Dentro de uma gaveta, cada
   registro é um compartimento (tom um pouco acima da gaveta, raio 12, sem
   borda), separado do vizinho por 6px: à esquerda a marca (UI.marcaItem: a
   data, um ícone ou as iniciais, na cor da aba ou da urgência), no meio o
   nome e uma linha de informações com ícone (UI.info), à direita o número
   que importa. Vale para toda lista de gaveta (.list, .linhas-valor,
   .lembretes, .notas, a agenda); fora de gaveta (janelas) nada muda. */

.gaveta { --fundo-item: color-mix(in srgb, var(--superficie-2) 52%, var(--superficie)); --fundo-item-luz: color-mix(in srgb, var(--superficie-2) 88%, var(--superficie)); }

.gaveta .list, .gaveta .linhas-valor, .gaveta .lembretes, .gaveta .notas { display: flex; flex-direction: column; gap: 6px; }
.gaveta .list > li, .gaveta .linhas-valor > li, .gaveta .lembretes > li, .gaveta .notas > li {
  background: var(--fundo-item);
  border: none;
  border-radius: var(--r-lg);
  padding: 11px 14px;
  gap: 14px;
  transition: background-color var(--t-medio) var(--ease-saida);
}
.gaveta .list > li, .gaveta .linhas-valor > li, .gaveta .lembretes > li { align-items: center; }
.gaveta .list > li:first-child, .gaveta .list > li:last-child,
.gaveta .linhas-valor > li:first-child, .gaveta .linhas-valor > li:last-child,
.gaveta .notas > li:first-child, .gaveta .notas > li:last-child { padding: 11px 14px; }
.gaveta .list > li::before, .gaveta .linhas-valor > li::before { display: none; }
@media (hover: hover) and (pointer: fine) {
  .gaveta .list > li:hover, .gaveta .linhas-valor > li:hover, .gaveta .lembretes > li:hover { background: var(--fundo-item-luz); }
  .gaveta .list > li:hover .row-actions { background: linear-gradient(90deg, transparent, var(--fundo-item-luz) 26px); }
}
.gaveta .list .row-actions { right: 10px; background: linear-gradient(90deg, transparent, var(--fundo-item) 26px); }
.gaveta .list .row-actions.fixas { background: none; }
.gaveta .list .title { font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); font-weight: 600; line-height: 1.35; }
.gaveta .list .meta { font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); margin-top: 3px; line-height: 1.45; }
.gaveta .linhas-valor .t { font-weight: 600; }
.gaveta .list li.concluido, .gaveta .list li:has(> .check:checked) { background: transparent; box-shadow: inset 0 0 0 1px var(--linha); }

/* A marca do item. */
.item-marca {
  --cor-item: var(--cor-pagina, var(--texto-2));
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: var(--cor-item);
  background: color-mix(in srgb, var(--cor-item) 15%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cor-item) 14%, transparent);
  font-size: calc(var(--font-sm) * var(--escala-fonte, 1));
  line-height: 1;
}
.item-marca .ico { width: 19px; height: 19px; }
.item-marca .ico.duo .corpo { opacity: 0.22; }
.item-marca.texto { font-family: var(--font-voz); font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); font-weight: 500; letter-spacing: 0.01em; }
.item-marca.data { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.item-marca.data b { font-family: var(--font-voz); font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); font-weight: 500; color: var(--texto); font-variant-numeric: lining-nums; }
.item-marca.data small { font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); font-weight: 650; color: var(--cor-item); }
.item-marca.atrasado, .item-marca.hoje, .item-marca.alerta { --cor-item: var(--st-critical); }
.item-marca.urgente, .item-marca.atencao { --cor-item: var(--st-warning); }
.item-marca.feito, .item-marca.bem { --cor-item: var(--st-good); }
.item-marca.futuro, .item-marca.apagada { --cor-item: var(--texto-3); }
.item-marca.grande { width: 46px; height: 46px; border-radius: 13px; }
.item-marca.grande.texto { font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); }
.item-marca.pequena { width: 32px; height: 32px; border-radius: var(--r-md); }
.item-marca.pequena .ico { width: 16px; height: 16px; }

/* As informações do item, na linha de baixo: uma frase só, separada por
   vírgula (2.2; na 2.1 cada uma tinha ícone). Flex para o espaço entre os
   <span> do HTML não virar espaço antes da vírgula; a vírgula fica no fim de
   cada pedaço (quebra de linha depois dela, nunca antes) e no tom do texto
   mesmo quando a informação é vermelha ou âmbar. */
.item-info { display: flex; flex-wrap: wrap; row-gap: 1px; margin-top: 4px; font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); color: var(--texto-3); line-height: 1.45; }
span.info { min-width: 0; }
span.info:not(:last-child)::after { content: ","; margin-right: 0.32em; color: var(--texto-3); font-weight: 400; }
span.info b { color: var(--texto-2); font-weight: 600; }
span.info.alerta { color: var(--critical-text); }
span.info.atencao { color: var(--warning-text); }
span.info.bem { color: var(--success-text); }

/* O número à direita (média, valor, quantia). */
.item-valor { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.15; }
.item-valor small { font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); font-weight: 500; color: var(--texto-3); margin-top: 3px; }
.item-valor.voz { font-family: var(--font-voz); font-size: calc(var(--font-lg) * var(--escala-fonte, 1)); font-weight: 450; font-variant-numeric: lining-nums proportional-nums; }
.item-valor.voz small { font-family: var(--font); }

/* Cartões em grade (disciplinas, projetos...): o compartimento destacado. */
.gaveta .list.cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 10px; }
.gaveta .list.cartoes > li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "marca nome valor" "info info info" "barra barra barra";
  align-items: center;
  gap: 12px 14px;
  padding: 16px;
  border-radius: var(--r-lg);
}
.cartoes .item-marca { grid-area: marca; }
.cartoes .cartao-nome { grid-area: nome; min-width: 0; }
.cartoes .item-valor { grid-area: valor; }
.cartoes .item-info { grid-area: info; margin-top: 0; padding-top: 12px; border-top: 1px solid var(--linha); }
.cartoes .cartao-barra { grid-area: barra; }
.cartoes .cartao-nome .title { font-family: var(--font-voz); font-size: calc(var(--font-md) * var(--escala-fonte, 1)); font-weight: 450; letter-spacing: -0.004em; }
/* O cartão inteiro leva à página (o link do nome cobre o cartão; ações por cima). */
.cartoes .linha-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.cartoes .linha-link:focus-visible { outline: none; }
.cartoes .linha-link:focus-visible::after { box-shadow: inset 0 0 0 2px var(--destaque); }
.cartoes li > .row-actions { top: 12px; transform: none; z-index: 3; }
.gaveta .list.cartoes li > * { z-index: auto; }

/* Barra fina dentro do cartão (a média contra a mínima, o progresso). */
.cartao-barra { position: relative; height: 6px; border-radius: 999px; background: var(--track); }
.cartao-barra > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: var(--cor-barra, var(--cor-pagina, var(--texto-2))); }
.cartao-barra > b { position: absolute; top: -3px; bottom: -3px; width: 2px; border-radius: 1px; background: var(--texto); opacity: 0.7; }
.cartao-barra.bem { --cor-barra: var(--st-good); }
.cartao-barra.atencao { --cor-barra: var(--st-warning); }
.cartao-barra.alerta { --cor-barra: var(--st-critical); }

/* Notas do Delfos: cada aviso no seu compartimento, a cor do sinal no fundo. */
.gaveta .notas > li { line-height: 1.5; }
.gaveta .notas .sinal { width: 34px; height: 34px; border-radius: var(--r-md); margin-top: 0; }
.gaveta .notas > li:has(> .sinal.alerta) { background: color-mix(in srgb, var(--st-critical) 7%, var(--fundo-item)); }
.gaveta .notas > li:has(> .sinal.atencao) { background: color-mix(in srgb, var(--st-warning) 6%, var(--fundo-item)); }
.gaveta .notas > li:has(> .sinal.bom) { background: color-mix(in srgb, var(--st-good) 6%, var(--fundo-item)); }

/* Grupos dentro da gaveta (Atrasado, Esta semana, Hoje...): rótulo leve, sem fio. */
.gaveta .agenda-cab, .gaveta .grupo-tempo-titulo { border-bottom: none; padding-bottom: 0; margin: 0 0 8px; font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); color: var(--texto-3); font-weight: 650; }
.gaveta .agenda-grupo + .agenda-grupo, .gaveta .grupo-tempo + .grupo-tempo { margin-top: 18px; }
.gaveta .agenda-grupo.atrasado .agenda-cab, .gaveta .grupo-tempo-titulo.alerta { color: var(--critical-text); }

/* A agenda da visão geral no mesmo molde: o dia vira a marca. */
.gaveta .agenda-lista { display: flex; flex-direction: column; gap: 6px; }
.gaveta .agenda-lista li + li .agenda-linha { border-top: none; border-radius: var(--r-lg); }
.gaveta .agenda-linha { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; margin: 0; padding: 10px 14px; border-radius: var(--r-lg); background: var(--fundo-item); }
.gaveta .agenda-dia { width: 44px; height: 44px; border-radius: 11px; align-items: center; justify-content: center; gap: 2px; background: color-mix(in srgb, var(--texto) 6%, transparent); }
.gaveta .agenda-dia b { font-size: calc(var(--font-md) * var(--escala-fonte, 1)); font-weight: 450; }
.gaveta .agenda-dia small { font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); margin-top: 0; }
.gaveta .agenda-dia.hoje { background: var(--texto); }
.gaveta .agenda-dia.hoje b, .gaveta .agenda-dia.hoje small { color: var(--fundo); }
.gaveta .agenda-grupo.atrasado .agenda-dia { background: color-mix(in srgb, var(--st-critical) 15%, transparent); }
@media (hover: hover) and (pointer: fine) {
  .gaveta .agenda-linha:hover { background: var(--fundo-item-luz); }
}

/* Lembretes (o que se aproxima, no Pessoal): a marca no lugar do pontinho. */
.gaveta .lembretes > li { align-items: center; }
.gaveta .lembretes .t { font-weight: 600; }

@media (max-width: 640px) {
  .gaveta .list > li, .gaveta .linhas-valor > li, .gaveta .lembretes > li, .gaveta .notas > li { padding: 10px 12px; gap: 12px; }
  .item-marca { width: 36px; height: 36px; border-radius: var(--r-md); }
  .item-marca.grande { width: 42px; height: 42px; }
  .gaveta .list.cartoes > li { padding: 14px; }
  .item-valor.voz { font-size: calc(var(--font-md) * var(--escala-fonte, 1)); }
  .gaveta .agenda-linha { grid-template-columns: 40px minmax(0, 1fr); padding: 10px 12px; }
  .gaveta .agenda-dia { width: 40px; height: 40px; }
}
.cartoes .linha-link { position: static; }

/* Barras dentro da gaveta: cada linha no seu compartimento, com o trilho
   à vista (no compartimento, o trilho é o que dá a medida da barra). */
.gaveta .cat-lista { gap: 6px; }
.gaveta .cat-linha { padding: 11px 14px 12px; border-radius: var(--r-lg); background: var(--fundo-item); gap: 7px 14px; }
.gaveta .cat-barra { background: var(--track); height: 7px; }
.gaveta .cat-linha[data-cat]:hover { background: var(--fundo-item-luz); }
.gaveta .chart-row { margin-bottom: 6px; padding: 11px 14px; border-radius: var(--r-lg); background: var(--fundo-item); }
.gaveta .chart-row:last-child { margin-bottom: 0; }
.gaveta .chart-track { background: var(--track); height: 7px; }

/* Resumo da disciplina: marca, título na voz, a prévia do texto (cortada
   com esmaecimento, o texto inteiro é no editor) e as ações embaixo. */
.resumo-cartao { display: flex; flex-direction: column; gap: 14px; }
.resumo-cab { display: flex; gap: 14px; align-items: center; min-width: 0; }
.resumo-cab-texto { min-width: 0; }
.resumo-titulo { margin: 0; font-family: var(--font-voz); font-size: calc(var(--font-md) * var(--escala-fonte, 1)); font-weight: 450; letter-spacing: -0.004em; line-height: 1.2; overflow-wrap: anywhere; }
.resumo-cab .item-info { margin-top: 4px; }
.resumo-previa { max-height: 220px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent); }
.resumo-acoes { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--linha); margin-top: auto; }
.gaveta .resumo-cartao { padding: 18px; border-radius: var(--r-lg); }
/* Cartões de uma aba própria dentro da gaveta: compartimentos, como os outros. */
.gaveta .pilar-cartao { background: var(--fundo-item); border-color: transparent; border-radius: var(--r-lg); }
.gaveta .pilar-cartao header { align-items: center; }
@media (hover: hover) and (pointer: fine) {
  .gaveta .pilar-cartao:hover { background: var(--fundo-item-luz); border-color: transparent; }
}
/* Lista dentro de um compartimento (os exercícios de um dia de treino):
   um tom abaixo do compartimento, para os dois níveis se lerem. */
.gaveta .card .list > li { background: var(--superficie); }
@media (hover: hover) and (pointer: fine) {
  .gaveta .card .list > li:hover { background: color-mix(in srgb, var(--superficie) 70%, var(--superficie-2)); }
}
.gaveta .card .list .row-actions { background: linear-gradient(90deg, transparent, var(--superficie) 26px); }
.dia-cab { align-items: center; justify-content: flex-start; gap: 12px; }
.dia-cab .card-title { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; font-family: var(--font-voz); font-size: calc(var(--font-md) * var(--escala-fonte, 1)); font-weight: 450; }
.dia-cab .card-title small { font-family: var(--font); font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); font-weight: 400; color: var(--texto-3); }

/* Fichas e números soltos dentro da gaveta viram ladrilhos de rótulo e valor. */
.gaveta .ficha { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.gaveta .ficha > div,
.gaveta .ficha > div:first-child,
.gaveta .ficha > div:last-child { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 4px; padding: 11px 14px; border: none; border-radius: var(--r-lg); background: var(--fundo-item); }
.gaveta .ficha dt { font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); }
.gaveta .ficha dd { text-align: left; font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); font-weight: 600; }
.gaveta .trio { gap: 6px; }
.gaveta .trio-item, .gaveta .trio-item:first-child { padding: 14px 16px 16px; border: none; border-radius: var(--r-lg); background: var(--fundo-item); }
.gaveta .trio + .figuras { border-top: none; padding-top: 0; margin-top: 6px; }
.gaveta .figuras { gap: 6px; }
.gaveta .figuras > div, .gaveta .figuras > div:first-child { padding: 11px 14px; border: none; border-radius: var(--r-lg); background: var(--fundo-item); }
@media (max-width: 900px) {
  .gaveta .trio-item:first-child { padding: 14px 16px 16px; border-bottom: none; }
  .gaveta .trio-item:nth-child(2) { padding-left: 16px; }
  .gaveta .trio-item { padding-left: 16px; }
}
/* Celular: no cartão, o valor desce para debaixo do nome (lado a lado, um empurrava o outro). */
@media (max-width: 640px) {
  .gaveta .list.cartoes > li {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "marca nome" "valor valor" "info info" "barra barra";
    gap: 10px 12px;
  }
  .cartoes .item-valor { flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 8px; text-align: left; }
  .cartoes .item-valor small { margin-top: 0; }
  .cartoes .cartao-nome .title { font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); }
}
/* No toque, as ações do cartão ficam à vista numa linha própria, embaixo
   (soltas na grade, alargavam a coluna da marca e empurravam o nome). */
.cartoes > li > .row-actions { grid-column: 1 / -1; }
@media (hover: none) {
  .gaveta .list.cartoes > li > .row-actions { justify-self: start; margin: -4px 0 -6px -8px; }
}
/* Celular: o item quebra em duas linhas. Em cima, a caixa de marcar, a marca
   e o nome com as informações (que ocupam a largura que sobra); embaixo, o
   prazo ou o valor e, à direita, as ações. */
@media (max-width: 640px) {
  .gaveta .list:not(.cartoes) > li, .gaveta .linhas-valor > li { flex-wrap: wrap; row-gap: 8px; }
  .gaveta .list:not(.cartoes) > li > .grow, .gaveta .linhas-valor > li > .grow { flex: 1 1 calc(100% - 110px); min-width: 0; }
  .gaveta .list:not(.cartoes) > li > .row-actions, .gaveta .linhas-valor > li > .btn:last-child { margin-left: auto; }
  .gaveta .list:not(.cartoes) > li > .row-actions { position: static; transform: none; opacity: 1; pointer-events: auto; padding-left: 0; background: none; }
}
/* Barras dentro de um compartimento (os resumos de campo de uma aba): soltas, sem outro compartimento em volta. */
.gaveta .card .cat-linha, .gaveta .card .chart-row { background: none; padding: 6px 0; border-radius: 0; }

/* ---- Integração das áreas e do editor (2.3) ----
   Peças que vieram do trabalho paralelo do Codex (PRs 19 e 20), desenhadas
   no idioma das gavetas: filtros da agenda, aviso de falha ao salvar,
   modelos do criador de abas e o botão de organizar. A camada geral de
   aparência dele (interface.css) só vale na página do editor. */

/* Agenda: período, semana exibida e o dia, dentro da gaveta. */
.agenda-filtros { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 12px; }
.agenda-semana { display: flex; align-items: center; gap: 4px; min-width: 0; }
.agenda-semana .btn.icon { width: 32px; padding: 0; }
.agenda-semana-rotulo { min-width: 120px; text-align: center; font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); color: var(--texto-2); font-variant-numeric: tabular-nums; }
.agenda-filtros select.input { width: auto; max-width: 100%; font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); }
.semana-dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-bottom: 20px; }
.semana-dia {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-height: 70px; padding: 10px 2px 8px; margin: 0;
  font: inherit; color: var(--texto-2);
  background: var(--fundo-item); border: 0; border-radius: var(--r-lg); cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--t-rapido) var(--ease-saida), color var(--t-rapido) var(--ease-saida);
}
.semana-dia span { font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); font-weight: 550; }
.semana-dia b { font-family: var(--font-voz); font-size: calc(var(--font-md) * var(--escala-fonte, 1)); font-weight: 400; line-height: 1; font-variant-numeric: tabular-nums; color: var(--texto); }
.semana-dia small { font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); line-height: 1; min-height: 11px; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.semana-dia.hoje { box-shadow: inset 0 0 0 1px var(--linha-forte); }
.semana-dia[aria-pressed="true"] { background: var(--texto); color: var(--sobre-claro); }
.semana-dia[aria-pressed="true"] b, .semana-dia[aria-pressed="true"] small { color: inherit; }
.semana-dia:focus-visible { outline: 2px solid var(--destaque); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .semana-dia:hover:not([aria-pressed="true"]) { background: var(--fundo-item-luz); }
}
@media (max-width: 640px) {
  .agenda-filtros { gap: 8px; }
  .agenda-filtros select.input { flex: 1 1 100%; }
  .semana-dias { gap: 3px; }
  .semana-dia { min-height: 64px; padding-top: 8px; border-radius: var(--r-md); }
  .semana-dia b { font-size: calc(var(--font-md) * var(--escala-fonte, 1)); }
}

/* Falha ao gravar no navegador: o aviso fica até dar certo. */
.storage-aviso {
  position: fixed; z-index: 300;
  left: calc(var(--sidebar-w) + 20px); right: 20px; bottom: 20px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 14px;
  padding: 14px 18px;
  background: var(--superficie); color: var(--texto);
  border: 1px solid var(--st-critical); border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
  font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); line-height: 1.5;
}
.storage-aviso > span { flex: 1 1 280px; min-width: 0; }
.storage-aviso .btn { flex-shrink: 0; }
@media (max-width: 900px) {
  .storage-aviso { left: 16px; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom)); }
}

/* Criador de abas: pontos de partida. */
.area-modelos { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 20px; }
.area-modelos .chip { min-height: var(--control-size); }

/* Organizar as abas: o botão discreto logo abaixo de "Nova aba". */
.nav-organizar { width: 100%; justify-content: flex-start; margin-top: 4px; color: var(--texto-3); }

/* Formas de ver uma aba (2.7): desenho, nome e para que serve. O mesmo
   seletor no criador, em "Layout e exibição" e no começo de uma aba vazia;
   a versão compacta é a barra de ferramentas da lista. */
.seletor-vistas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr)); gap: 10px; }
.vista-opcao {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 14px 14px 15px; min-width: 0;
  background: transparent; color: var(--texto-2);
  border: 1px solid var(--linha-forte); border-radius: var(--r-md);
  font: inherit; text-align: left; cursor: pointer;
  transition: border-color var(--t-rapido) var(--ease-saida), background-color var(--t-rapido) var(--ease-saida);
}
.vista-desenho { width: 64px; height: 40px; flex-shrink: 0; color: var(--texto-3); }
.vista-desenho rect { opacity: .32; }
.vista-desenho rect.f { opacity: .13; }
.vista-desenho rect.d { opacity: .62; }
.vista-texto { display: grid; gap: 4px; min-width: 0; }
.vista-nome { color: var(--texto); font-weight: 550; font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); line-height: 1.3; }
.vista-frase { font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); line-height: 1.5; }
.vista-bom { font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); line-height: 1.45; color: var(--texto-3); }
.vista-opcao[aria-checked="true"] { border-color: var(--texto); background: var(--superficie-2); box-shadow: inset 0 0 0 1px var(--texto); }
.vista-opcao[aria-checked="true"] .vista-desenho { color: var(--texto); }
.vista-opcao[aria-checked="true"] .vista-desenho rect.d { opacity: 1; }
.vista-opcao:focus-visible { outline: 2px solid var(--texto); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .vista-opcao:hover { border-color: var(--texto-3); background: var(--superficie-2); }
}

.seletor-vistas.compacto {
  display: inline-flex; gap: 2px; padding: 3px;
  border: 1px solid var(--linha-forte); border-radius: var(--r-md);
}
.seletor-vistas.compacto .vista-opcao {
  flex-direction: row; align-items: center; gap: 6px;
  min-height: var(--control-size); padding: 6px 11px; border: 0; border-radius: var(--r-md); white-space: nowrap;
}
.seletor-vistas.compacto .vista-opcao .ico { width: 16px; height: 16px; }
.seletor-vistas.compacto .vista-nome { color: inherit; font-weight: 500; font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); }
.seletor-vistas.compacto .vista-opcao[aria-checked="true"] { background: var(--superficie-3); color: var(--texto); box-shadow: none; }
@media (max-width: 680px) {
  .seletor-vistas.compacto { display: flex; width: 100%; }
  .seletor-vistas.compacto .vista-opcao { flex: 1 1 0; flex-direction: column; gap: 3px; padding: 7px 2px; min-height: 48px; }
  .seletor-vistas.compacto .vista-nome { font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); }
  .seletor-vistas:not(.compacto) { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .seletor-vistas:not(.compacto) .vista-opcao { flex-direction: row; align-items: center; gap: 14px; padding: 12px 14px; }
}

/* Importar de um arquivo (2.7): andamento e revisão em dois eixos. */
.leitura-arquivo-status { margin: 0 0 12px; color: var(--texto-2); font-size: calc(var(--font-sm) * var(--escala-fonte, 1)); line-height: 1.5; }
.leitura-arquivo-barra { width: 100%; height: 6px; accent-color: var(--texto); }
.revisar-arquivo { display: grid; gap: 22px; }
.revisar-grupo { display: grid; gap: 10px; min-width: 0; }
.revisar-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px 18px; flex-wrap: wrap; }
.revisar-cab h3 { display: flex; align-items: center; gap: 8px; margin: 0; font: 400 calc(var(--font-md) * var(--escala-fonte, 1))/1.3 var(--font-voz); }
.revisar-cab h3 .ico { width: 18px; height: 18px; color: var(--s-pessoal); }
.revisar-cab p { margin: 4px 0 0; color: var(--texto-3); font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); line-height: 1.5; }
.revisar-mes { display: grid; gap: 4px; color: var(--texto-2); font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); }
.revisar-mes .input { min-height: var(--control-size); }
.revisar-linhas { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.revisar-linhas > li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 12px; border-radius: var(--r-md); background: var(--superficie-2); }
.revisar-linhas > li.desmarcada { opacity: .55; }
.revisar-linhas > li > .check { margin-top: 11px; }
.revisar-linhas .revisar-vazio { display: block; background: none; color: var(--texto-3); font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); }
.revisar-campos { display: grid; gap: 8px; min-width: 0; }
.revisar-campos .input { min-height: var(--control-size); padding-top: 6px; padding-bottom: 6px; }
.revisar-titulo { font-weight: 550; }
.revisar-quando { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.revisar-quando input[type="date"] { width: 160px; }
.revisar-quando input[type="time"] { width: 132px; }
.revisar-quando select { width: auto; min-width: 120px; }
.revisar-nota { color: var(--texto-3); font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); }
.revisar-texto summary { cursor: pointer; color: var(--texto-2); font-size: calc(var(--font-xs) * var(--escala-fonte, 1)); }
.revisar-texto pre { margin: 10px 0 0; max-height: 240px; overflow: auto; padding: 12px; border-radius: var(--r-md); background: var(--superficie-2); color: var(--texto-2); font: calc(var(--font-xs) * var(--escala-fonte, 1))/1.55 var(--font); white-space: pre-wrap; overflow-wrap: anywhere; }
.dias-semana { gap: 4px; }
.dias-semana .chip { min-width: 44px; justify-content: center; }
.dias-semana.mini .chip { min-width: 0; padding: 3px 8px; }
@media (max-width: 680px) {
  .revisar-linhas > li { padding: 10px; gap: 10px; }
  .revisar-quando input[type="date"] { width: 100%; }
  .revisar-quando > input[type="time"] { flex: 1 1 0; width: 0; min-width: 0; }
  .revisar-quando > select { flex: 1 1 100%; width: 100%; }
  .dias-semana .chip { min-width: 0; flex: 1 1 0; padding-left: 4px; padding-right: 4px; }
}

/* Reordenar arrastando (2.8): a linha que se move sobe, ganha sombra e segue o
   ponteiro; as vizinhas abrem espaço deslizando. Com "reduzir movimento",
   tudo troca de lugar sem animação. */
.ordem-alca { display: grid; place-items: center; flex-shrink: 0; width: 18px; align-self: stretch; color: var(--texto-3); cursor: grab; opacity: .7; touch-action: none; }
@media (pointer: coarse) { .ordem-alca { width: 36px; margin: -8px 0 -8px -6px; opacity: 1; } }
.ordem-alca .ico { width: 16px; height: 16px; }
[data-arrastavel] > li { cursor: grab; touch-action: pan-y; }
[data-arrastavel] > li :is(input, button, a, select) { cursor: auto; }
[data-arrastavel] > li :is(button, a) { cursor: pointer; }
[data-arrastavel].ordenando > li { will-change: transform; }
[data-arrastavel] > li.arrastando {
  position: relative; z-index: 3; cursor: grabbing;
  background: var(--superficie-2); border-radius: var(--r-md);
  box-shadow: var(--shadow-lift), 0 0 0 1px var(--linha-forte);
  transition: box-shadow 160ms var(--ease-saida);
}
[data-arrastavel] > li.arrastando .ordem-alca { color: var(--texto); opacity: 1; }
:root.arrastando-algo, :root.arrastando-algo * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }
@media (hover: hover) and (pointer: fine) {
  [data-arrastavel] > li:hover .ordem-alca { opacity: 1; color: var(--texto-2); }
}
.revisar-arquivo > .notice { margin: 0; }