/* ===== Base ===== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Tokens de cor (tema claro/escuro): extraídos pra css/tema.css em
   2026-08-18 — carregado antes deste arquivo em agenda.html. Existe
   separado pra login.html poder usar as mesmas cores sem herdar as
   regras de layout/telas do app inteiro (SRP). */

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  line-height: 1.4;
}

/* ===== Layout ===== */
/* As laterais acompanham a janela: encolhem em tela pequena, crescem um
   pouco em tela grande — sempre dentro de um piso e um teto legíveis. */
:root {
  --lateral-esq: clamp(186px, 15vw, 264px);
  --lateral-dir: clamp(212px, 17vw, 300px);
  --lateral-trilho: 46px; /* largura do painel encolhido (só ícones) */
}

.app {
  display: grid;
  grid-template-columns: var(--lateral-esq) 1fr;
  min-height: 100vh;
}

/* Painel lateral encolhido: vira uma faixa fininha só com o botão de expandir */
.app.lateral-fechada {
  grid-template-columns: var(--lateral-trilho) 1fr;
}

/* Com a barra direita de fixados visível: ganha a 3ª coluna */
.app.tem-fixados {
  grid-template-columns: var(--lateral-esq) 1fr var(--lateral-dir);
}

.app.lateral-fechada.tem-fixados {
  grid-template-columns: var(--lateral-trilho) 1fr var(--lateral-dir);
}

/* Coluna de grid tem min-width:auto por padrão e estoura a tela quando o
   conteúdo é largo (título comprido, link sem espaço). Isso solta o freio. */
.app > * {
  min-width: 0;
}

.app.lateral-fechada .historico {
  padding: 16px 6px;
}

/* Colapsado, a faixa (--lateral-trilho: 46px) só tem ~34px úteis de largura
   (descontado o padding) — «+🚪 lado a lado (34px cada + 8px de gap = 76px)
   não cabem e o 🚪 vazava pra fora da faixa. Empilhado, os dois cabem. */
.app.lateral-fechada .historico-topo {
  flex-direction: column;
  justify-content: center;
}

.app.lateral-fechada .btn-config,
.app.lateral-fechada .historico-secao,
.app.lateral-fechada .projetos-secao,
.app.lateral-fechada .aba-rotulo {
  display: none;
}

/* Nav vira trilho de ícones quando encolhido */
.app.lateral-fechada .aba {
  justify-content: center;
  padding: 10px 0;
  gap: 0;
}

/* ===== Histórico (lateral) ===== */
.historico {
  background: var(--cor-painel);
  border-right: 1px solid var(--cor-borda);
  padding: clamp(16px, 1.8vw, 26px) clamp(10px, 1.1vw, 18px);
  /* Acompanha a rolagem: fica fixo no topo da janela */
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow-y: auto;
}

.historico-topo {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 16px;
}

/* Título de seção da lateral. Em cinza-suave ele sumia contra o painel e a
   coluna virava uma lista sem cabeça. */
.historico-titulo {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cor-texto);
}

.btn-tema {
  border: 1px solid var(--cor-borda);
  background: var(--cor-fundo);
  border-radius: 8px;
  width: 34px;
  height: 34px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-tema:hover {
  border-color: var(--cor-acao);
}

.btn-config {
  border: 1px solid var(--cor-borda);
  background: var(--cor-fundo);
  border-radius: 8px;
  width: 34px;
  height: 34px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}

.btn-config:hover {
  border-color: var(--cor-acao);
}

.btn-lateral {
  border: 1px solid var(--cor-borda);
  background: var(--cor-fundo);
  border-radius: 8px;
  width: 34px;
  height: 34px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  color: var(--cor-texto);
  flex-shrink: 0;
}

.btn-lateral:hover {
  border-color: var(--cor-acao);
}

.btn-sair {
  border: 1px solid var(--cor-borda);
  background: var(--cor-fundo);
  border-radius: 8px;
  width: 34px;
  height: 34px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}

.btn-sair:hover {
  border-color: var(--cor-acao);
}

.historico-lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.historico-item {
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.15s;
  border-left: 3px solid transparent;
}

.historico-item:hover {
  background: var(--cor-fundo);
}

.historico-item.ativo {
  background: var(--cor-acao);
  color: #fff;
}

/* Dia passado com tarefas não concluídas */
.historico-item.pendente {
  border-left-color: var(--cor-pendente);
}

.historico-item-contagem {
  float: right;
  font-size: 12px;
  color: var(--cor-texto-suave);
}

.historico-item.ativo .historico-item-contagem {
  color: rgba(255, 255, 255, 0.8);
}

/* "N faltou" em destaque */
.historico-faltou {
  color: var(--cor-pendente);
  font-weight: 600;
}

.historico-item.ativo .historico-faltou {
  color: #fff;
}

.historico-vazio {
  font-size: 13px;
  color: var(--cor-texto-suave);
  padding: 8px 12px;
}

/* ===== Principal ===== */
/* Cresce junto com a janela até um teto de leitura confortável e se
   centraliza na coluna — em monitor grande não fica espremida à esquerda. */
.principal {
  padding: clamp(20px, 2.4vw, 40px) clamp(16px, 2.6vw, 48px);
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
}

/* ===== Painel direito (fixados) ===== */
.fixados {
  display: none; /* aparece só quando há algo fixado (.app.tem-fixados) */
  background: var(--cor-painel);
  border-left: 1px solid var(--cor-borda);
  padding: clamp(16px, 1.8vw, 26px) clamp(10px, 1.1vw, 18px);
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow-y: auto;
}

.app.tem-fixados .fixados {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Na barra direita as seções não precisam do respiro/borda do topo */
.fixados .notas-fixadas,
.fixados .links-fixados {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* ===== Abas ===== */
/* Navegação vertical (na lateral esquerda) */
.abas {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 20px;
}

.aba {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: none;
  background: transparent;
  color: var(--cor-texto);
  padding: 10px 12px;
  font-size: 14px;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
}

.aba:hover {
  background: var(--cor-fundo);
}

.aba.ativa {
  background: var(--cor-acao);
  color: #fff;
  font-weight: 600;
}

.aba-icone {
  flex-shrink: 0;
  width: 20px;
  text-align: center;
  font-size: 15px;
}

/* ===== Projetos ===== */
.projeto-cor-input {
  width: 44px;
  height: 44px;
  padding: 2px;
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  background: var(--cor-painel);
  cursor: pointer;
}

.projeto-vazio {
  color: var(--cor-texto-suave);
  font-size: 15px;
  padding: 8px 2px;
}

.projeto-ponto {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  flex-shrink: 0;
}

/* Cabeçalho da seção Projetos (lateral): título + "+ Novo" */
.projetos-secao-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.projetos-secao-topo .historico-titulo {
  margin-bottom: 0;
}

/* Lista de projetos (navegador na lateral esquerda) */
.projeto-lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.projeto-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
}

.projeto-item:hover {
  background: var(--cor-fundo);
}

.projeto-item.ativo {
  background: var(--cor-acao);
  color: #fff;
}

.projeto-item-nome {
  flex: 1;
  font-weight: 600;
  word-break: break-word;
}

.projeto-item-contagem {
  font-size: 12px;
  color: var(--cor-texto-suave);
  flex-shrink: 0;
}

.projeto-item.ativo .projeto-item-contagem {
  color: rgba(255, 255, 255, 0.8);
}

.projeto-item.arrastando {
  opacity: 0.4;
}

.projeto-item.arrasta-alvo {
  border-top: 2px solid var(--cor-acao);
}

/* Card de projeto na lista central (reusa .fin-card): o ponto de cor + nome */
.projeto-card .projeto-ponto { width: 14px; height: 14px; }
.projeto-card.arrastando { opacity: 0.4; }
.projeto-card.arrasta-alvo { border-color: var(--cor-acao); }

/* Bucket "Sem projeto": card e cabeçalho de detalhe não são um projeto de
   verdade (não dá pra renomear/recolorir/excluir) — borda tracejada + nome
   sem o hover de "editável" sinalizam a diferença. Aditivo, não altera as
   regras normais de .projeto-card/.projeto-nome-input. */
/* .fin-card (mesma especificidade, mas vem depois no arquivo) fixa
   border-style: solid — sem o .fin-card no seletor aqui, esta regra perdia
   o empate e a borda tracejada nunca aparecia. Achado do Rafael Revisor. */
.fin-card.projeto-card--sem-projeto { border-style: dashed; }
.projeto-detalhe-titulo--sem-projeto .projeto-nome-input:hover { border-color: transparent; }

/* Voltar da lista → detalhe */
.projeto-voltar { margin-bottom: 14px; }

/* Detalhe do projeto */
.projeto-detalhe-topo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.projeto-detalhe-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 22px;
  font-weight: 700;
}

/* Nome do projeto editável (borderless até focar) */
.projeto-nome-input {
  flex: 1;
  border: 1px solid transparent;
  background: transparent;
  color: var(--cor-texto);
  font-size: 22px;
  font-weight: 700;
  font-family: inherit;
  padding: 2px 6px;
  border-radius: 6px;
}

.projeto-nome-input:hover {
  border-color: var(--cor-borda);
}

.projeto-nome-input:focus {
  outline: none;
  border-color: var(--cor-acao);
}

.projeto-acoes {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.btn-excluir-projeto {
  border: 1px solid var(--cor-borda);
  background: var(--cor-painel);
  color: var(--cor-alta);
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
}

.btn-excluir-projeto:hover {
  border-color: var(--cor-alta);
}

.projeto-progresso {
  height: 8px;
  background: var(--cor-borda);
  border-radius: 999px;
  overflow: hidden;
}

.projeto-progresso-preenchido {
  height: 100%;
  border-radius: 999px;
  transition: width 0.2s;
}

.projeto-resumo {
  font-size: 13px;
  color: var(--cor-texto-suave);
  margin: 8px 0 20px;
}

/* Grupos do histórico */
.hist-grupo {
  margin-bottom: 20px;
}

.hist-grupo-titulo {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cor-texto-suave);
  margin-bottom: 8px;
}

.hist-lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hist-item {
  padding: 8px 12px;
  background: var(--cor-painel);
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  font-size: 14px;
}

.hist-linha {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hist-linha.tem-detalhe {
  cursor: pointer;
}

.hist-texto {
  flex: 1;
}

.hist-seta {
  flex-shrink: 0;
  color: var(--cor-texto-suave);
  transition: transform 0.15s;
}

.hist-item.aberto .hist-seta {
  transform: rotate(180deg);
}

.hist-detalhes {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--cor-borda);
  font-size: 13px;
  line-height: 1.5;
  color: var(--cor-texto);
  word-break: break-word;
}

.hist-marca {
  flex-shrink: 0;
  color: var(--cor-texto-suave);
}

.hist-item.feita .hist-marca {
  color: var(--cor-baixa);
}

.hist-item.feita .hist-texto {
  text-decoration: line-through;
  color: var(--cor-texto-suave);
}

/* Card de tarefa EDITÁVEL na tela do projeto (reusa .hist-item) */
.proj-item { position: relative; }
.proj-item[data-prioridade="alta"] { border-left: 3px solid var(--cor-alta); }
.proj-item[data-prioridade="media"] { border-left: 3px solid var(--cor-media); }
.proj-item[data-prioridade="baixa"] { border-left: 3px solid var(--cor-baixa); }
.proj-linha { cursor: default; }
/* Excluir só aparece com o mouse na linha (não compete com o dado) */
.proj-item .btn-excluir { opacity: 0; }
.proj-item:hover .btn-excluir { opacity: 0.55; }
.proj-item .btn-excluir:hover { opacity: 1; color: var(--cor-alta); background: var(--cor-fundo); }
.proj-item.aberto .btn-detalhes { transform: rotate(180deg); }

/* Campo de data (nova tarefa / edição do projeto) — mesma pauta dos controles */
.tarefa-data-input {
  height: var(--alt-controle);
  padding: 0 10px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-controle);
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: inherit;
  font-size: 14px;
}
.tarefa-data-input:focus { outline: none; border-color: var(--cor-acao); }

/* Form "nova tarefa" do projeto: um respiro do grupo de tarefas abaixo */
.projeto-nova { margin-bottom: 18px; }

.cabecalho {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 22px;
}

/* Mesmo padrão de 3 colunas de .fin-topo (Viagem/Mercado/Treinos/Estudos):
   coluna vazia à esquerda + título centralizado + ações à direita, as duas
   laterais dividindo o espaço igualmente. Passo 15 (decisão Q3): a Agenda
   era a única com o título alinhado à esquerda, foge do padrão que já é
   maioria — reaproveita a técnica em vez de inventar uma terceira. Isso
   também resolve o Passo 3 (o grupo de ações não tem mais espaço pra
   espremer o botão "Voltar para hoje" até ele quebrar o próprio texto). */
.cabecalho-topo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.cabecalho-data {
  grid-column: 2;
  justify-self: center;
  text-align: center;
  font-size: 26px;
  font-weight: 700;
}

/* ===== Tira de dias (navegação dia a dia) ===== */
.dia-nav {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.dia-nav-seta {
  flex-shrink: 0;
  width: 34px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-controle);
  background: var(--cor-painel);
  color: var(--cor-texto-suave);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}
.dia-nav-seta:hover { border-color: var(--cor-acao); color: var(--cor-acao); }

.dia-nav-trilho {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.dia-nav-dia {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 7px 0 6px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-controle);
  background: var(--cor-painel);
  color: var(--cor-texto);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.dia-nav-dia:hover { border-color: var(--cor-acao); }

.dia-nav-sem {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cor-texto-suave);
}
.dia-nav-num { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Dia selecionado: preenchido na cor de ação */
.dia-nav-dia.ativo {
  background: var(--cor-acao);
  border-color: var(--cor-acao);
  color: #fff;
}
.dia-nav-dia.ativo .dia-nav-sem { color: rgba(255, 255, 255, 0.85); }

/* Hoje (quando não é o selecionado): um anel discreto pra achar o presente */
.dia-nav-dia.hoje:not(.ativo) { border-color: var(--cor-acao); }

/* Ponto de status do dia */
.dia-nav-ponto { width: 6px; height: 6px; border-radius: 50%; margin-top: 1px; }
.dia-nav-ponto.vazio { background: var(--cor-borda); }
.dia-nav-ponto.feito { background: var(--cor-baixa); }
.dia-nav-ponto.pendente { background: var(--cor-media, #f59e0b); }
.dia-nav-ponto.atrasado { background: var(--cor-alta); }
.dia-nav-dia.ativo .dia-nav-ponto.vazio { background: rgba(255, 255, 255, 0.4); }

/* ===== Atrasadas (o que ficou pra trás, no topo de Hoje) ===== */
.atrasadas {
  margin-bottom: 18px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--cor-alta) 35%, var(--cor-borda));
  border-radius: 10px;
  background: color-mix(in srgb, var(--cor-alta) 6%, transparent);
}

.atrasadas-cab {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.atrasadas-titulo {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cor-alta);
}
.atrasadas-conta {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--cor-alta);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.atrasadas-puxar {
  margin-left: auto;
  height: var(--alt-controle-sm);
  padding: 0 12px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-controle);
  background: var(--cor-painel);
  color: var(--cor-texto-suave);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}
.atrasadas-puxar:hover { border-color: var(--cor-acao); color: var(--cor-acao); }

.atrasadas-lista { list-style: none; display: flex; flex-direction: column; gap: 4px; }

.atrasadas-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  border-left: 3px solid var(--cor-borda);
  background: var(--cor-painel);
}
.atrasadas-item[data-prioridade="alta"] { border-left-color: var(--cor-alta); }
.atrasadas-item[data-prioridade="media"] { border-left-color: var(--cor-media, #f59e0b); }
.atrasadas-item[data-prioridade="baixa"] { border-left-color: var(--cor-baixa); }

.atrasadas-meio { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.atrasadas-texto { font-size: 13.5px; color: var(--cor-texto); }
.atrasadas-origem { font-size: 11px; color: var(--cor-texto-suave); font-variant-numeric: tabular-nums; }
.atrasadas-chip {
  font-size: 11px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--cor-fundo);
  color: var(--cor-texto-suave);
  border: 1px solid var(--cor-borda);
}

.atrasadas-mover {
  flex-shrink: 0;
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--cor-borda);
  border-radius: 7px;
  background: transparent;
  color: var(--cor-texto-suave);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}
.atrasadas-mover:hover { border-color: var(--cor-acao); color: var(--cor-acao); }

.cabecalho-acoes {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.cabecalho-data-input {
  border: 1px solid var(--cor-borda);
  background: var(--cor-painel);
  color: var(--cor-texto);
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
}

.cabecalho-data-input:focus {
  outline: none;
  border-color: var(--cor-acao);
}

.btn-voltar-hoje {
  border: 1px solid var(--cor-borda);
  background: var(--cor-painel);
  color: var(--cor-texto);
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  white-space: nowrap;
}

.btn-voltar-hoje:hover {
  background: var(--cor-fundo);
}

/* ===== Seções recolhíveis (Recursos, Notas, Diárias) ===== */
.secao-topo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.secao-cabecalho {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  color: var(--cor-texto-suave);
  text-align: left;
}

.secao-titulo {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Subtítulo curto ao lado do título: diz o que a seção é sem abrir. Diárias
   'repetem todo dia' vs Tarefas 'só deste dia' — pra não confundir as duas. */
.secao-hint {
  font-size: 12px;
  color: var(--cor-texto-suave);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.secao-hint::before { content: "· "; }

.secao-seta {
  font-size: 13px;
  transition: transform 0.15s;
}

/* Recolhido: some o corpo e vira a seta */
.secao.fechado .secao-corpo {
  display: none;
}

.secao.fechado .secao-seta {
  transform: rotate(-90deg);
}

/* ===== Recursos (links e arquivos) ===== */
.recursos {
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px dashed var(--cor-borda);
}

.recursos-vazio {
  color: var(--cor-texto-suave);
  font-size: 14px;
  padding: 4px 2px;
}

.recurso-lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.recurso-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 16px;
  background: var(--cor-painel);
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
}

.recurso-linha {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Descrição editável do link (legenda pequena abaixo) */
.recurso-descricao-input {
  border: none;
  background: transparent;
  color: var(--cor-texto-suave);
  font-size: 13px;
  padding: 2px 0;
  width: 100%;
  outline: none;
}

.recurso-descricao-input:focus {
  color: var(--cor-texto);
}

.recurso-link {
  flex: 1;
  color: var(--cor-acao);
  text-decoration: none;
  word-break: break-all;
  font-size: 15px;
}

.recurso-link:hover {
  text-decoration: underline;
}

/* Quando não é link válido (ex.: bloqueado), vira texto simples */
.recurso-texto {
  flex: 1;
  color: var(--cor-texto);
  word-break: break-all;
  font-size: 15px;
}

/* ===== Categorias (Notas e Links) ===== */
/* Form de criar categoria */
.categoria-form {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.categoria-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-size: 14px;
}

.categoria-input:focus {
  outline: none;
  border-color: var(--cor-acao);
}

.btn-categoria {
  border: 1px solid var(--cor-borda);
  background: var(--cor-painel);
  color: var(--cor-texto-suave);
  border-radius: 8px;
  padding: 0 12px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

.btn-categoria:hover {
  border-color: var(--cor-acao);
  color: var(--cor-texto);
}

/* Bloco de uma categoria (cabeçalho + lista) */
.categoria-bloco {
  margin-bottom: 20px;
}

.categoria-cabecalho {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 10px;
}

/* Área clicável (seta + nome) que recolhe/expande a categoria */
.categoria-alternador {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  text-align: left;
}

.categoria-alternador:hover {
  background: var(--cor-fundo);
}

.categoria-seta {
  font-size: 12px;
  color: var(--cor-texto-suave);
  transition: transform 0.15s;
}

.categoria-nome {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--cor-texto);
}

/* Categoria recolhida: some a lista e gira a seta */
.categoria-bloco.fechado .nota-lista,
.categoria-bloco.fechado .recurso-lista {
  display: none;
}

.categoria-bloco.fechado .categoria-seta {
  transform: rotate(-90deg);
}

/* Campo de edição do nome (aparece ao clicar no lápis) */
.categoria-nome-input {
  flex: 1;
  border: 1px solid var(--cor-acao);
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-size: 14px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  outline: none;
}

/* Lápis de renomear */
.btn-editar-categoria {
  border: none;
  background: transparent;
  color: var(--cor-texto-suave);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  flex-shrink: 0;
}

.btn-editar-categoria:hover {
  color: var(--cor-acao);
  background: var(--cor-fundo);
}

/* Rótulo "Sem categoria" (avulsos) — não editável */
.categoria-avulsos {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--cor-texto-suave);
  padding: 4px 8px;
}

.btn-excluir-categoria {
  border: none;
  background: transparent;
  color: var(--cor-texto-suave);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 6px;
  flex-shrink: 0;
}

.btn-excluir-categoria:hover {
  color: var(--cor-alta);
  background: var(--cor-fundo);
}

/* Seletor de categoria dentro de um item */
.categoria-select {
  border: 1px solid var(--cor-borda);
  background: var(--cor-fundo);
  color: var(--cor-texto-suave);
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 12px;
  max-width: 130px;
  flex-shrink: 0;
}

/* Linha de ações da seção (ex.: + Novo link + criar categoria) */
.secao-acoes {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.secao-acoes .categoria-form {
  margin-bottom: 0;
  flex: 1;
  min-width: 180px;
}

/* ===== Pop-up (modal) ===== */
.modal {
  /* O reset global (* { margin: 0 }) zera o `margin: auto` que o <dialog>
     usa pra se centralizar, e o pop-up cola no canto superior esquerdo.
     Este `auto` devolve a centralização. */
  margin: auto;
  border: 1px solid var(--cor-borda);
  border-radius: 12px;
  background: var(--cor-painel);
  color: var(--cor-texto);
  padding: 0;
  max-width: 440px;
  width: calc(100% - 32px);
  /* Formulário alto (lançamento tem 8 campos) não pode estourar a janela:
     rola por dentro em vez de cortar os botões. */
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.modal::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

.modal-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
}

.modal-titulo {
  font-size: 17px;
  font-weight: 600;
  color: var(--cor-texto);
}

.modal-campo {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  color: var(--cor-texto-suave);
}

.modal-campo input,
.modal-campo select {
  height: var(--alt-controle);
  padding: 0 12px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-controle);
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: inherit;
  font-size: 14px;
}

/* O range de volume não tem altura fixa nem borda */
.modal-campo input[type="range"] { height: auto; }

.modal-campo input:focus,
.modal-campo select:focus {
  outline: none;
  border-color: var(--cor-acao);
}

/* Linha do modal com rótulo à esquerda e controle à direita (tema, on/off) */
.config-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  color: var(--cor-texto);
}

.config-linha input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--cor-acao);
}

.modal-campo input[type="range"] {
  padding: 0;
  border: none;
  background: transparent;
  accent-color: var(--cor-acao);
  cursor: pointer;
}

.modal-acoes {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
  /* Rodapé fixo na base durante o scroll do modal (quem rola é .modal, não
     .modal-form) — em formulários longos (ex.: "Nova estadia") o rodapé de
     ações não sai mais da área visível junto com o resto do conteúdo.
     Fundo sólido pra cobrir o conteúdo que passa por baixo ao rolar; sem
     borda/sombra própria pra não criar um traço visual em modais curtos,
     onde nunca chega a rolar. */
  position: sticky;
  bottom: 0;
  background: var(--cor-painel);
  padding-top: 10px;
  padding-bottom: 4px;
}

.btn-modal-cancelar {
  height: var(--alt-controle);
  padding: 0 16px;
  border: 1px solid var(--cor-borda);
  background: transparent;
  color: var(--cor-texto-suave);
  font-size: 13.5px;
}

.btn-modal-cancelar:hover {
  color: var(--cor-texto);
  border-color: var(--cor-texto-suave);
}

/* Botão "+ Criar" no topo de cada seção (Diárias / Tarefas do dia): abre o
   pop-up de nova atividade. Fica à direita do cabeçalho (secao-cabecalho flex:1). */
.btn-criar {
  height: var(--alt-controle-sm);
  padding: 0 14px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-controle);
  background: transparent;
  color: var(--cor-texto);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.btn-criar:hover {
  border-color: var(--cor-acao);
  color: var(--cor-acao);
  background: color-mix(in srgb, var(--cor-acao) 10%, transparent);
}

/* Botão "Unificar" (Diárias + Tarefas do dia numa lista só, modo Lista):
   mesma família visual do .btn-criar; .ativa (ligado) segue o mesmo
   preenchido sólido de .filtro-chip.ativo. */
.btn-unificar {
  height: var(--alt-controle-sm);
  padding: 0 14px;
  margin-bottom: 16px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-controle);
  background: transparent;
  color: var(--cor-texto);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.btn-unificar:hover {
  border-color: var(--cor-acao);
  color: var(--cor-acao);
}

.btn-unificar.ativa {
  background: var(--cor-acao);
  border-color: var(--cor-acao);
  color: #fff;
}

/* Toggle Diária × Tarefa do dia no pop-up de criar (mesma família do .fin-subaba,
   mas ocupando a largura toda: cada botão flex:1). */
.tarefa-tipo-troca {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: calc(var(--raio-controle) + 3px);
  line-height: 1;
}

.tarefa-tipo-btn {
  flex: 1;
  height: var(--alt-controle-sm);
  border: none;
  border-radius: var(--raio-controle);
  background: transparent;
  color: var(--cor-texto-suave);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.tarefa-tipo-btn:hover {
  color: var(--cor-texto);
  background: color-mix(in srgb, var(--cor-texto) 7%, transparent);
}

.tarefa-tipo-btn.ativa {
  background: var(--cor-painel);
  color: var(--cor-texto);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

/* flex (.modal-campo) vence o atributo [hidden]: o campo Projeto precisa disto
   pra sumir de verdade quando o tipo é Diária. */
.modal-campo[hidden] { display: none; }

/* Texto explicativo dentro de um modal (ex.: pergunta de excluir diária) */
.modal-texto {
  font-size: 14px;
  color: var(--cor-texto-suave);
  line-height: 1.45;
}

/* Botão destrutivo (ex.: "Excluir de todos os dias"): contorno vermelho que
   preenche no hover. Herda raio/altura do sistema de botões. */
.btn-perigo {
  height: var(--alt-controle);
  padding: 0 16px;
  border: 1px solid var(--cor-alta);
  background: transparent;
  color: var(--cor-alta);
  font-size: 13.5px;
}

.btn-perigo:hover {
  background: var(--cor-alta);
  color: #fff;
}

/* ===== Links fixados (painel lateral) ===== */
.links-fixados {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--cor-borda);
}

.link-fixado-lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.link-fixado-card {
  background: var(--cor-painel);
  border: 1px solid var(--cor-borda);
  border-left: 4px solid var(--cor-acao);
  border-radius: 8px;
  padding: 10px 12px;
}

.link-fixado-linha {
  display: flex;
  align-items: center;
  gap: 8px;
}

.link-fixado-alvo {
  font-size: 14px;
}

.link-fixado-descricao {
  font-size: 12px;
  color: var(--cor-texto-suave);
  margin-top: 4px;
  word-break: break-word;
}

/* ===== Notas ===== */
.notas {
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px dashed var(--cor-borda);
}

/* Botão de fixar (📌) numa nota */
.btn-fixar {
  border: none;
  background: transparent;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  flex-shrink: 0;
  opacity: 0.5;
}

.btn-fixar:hover {
  background: var(--cor-fundo);
  opacity: 1;
}

.btn-fixar.ativo {
  opacity: 1;
}

/* ===== Notas fixadas (painel lateral) ===== */
.notas-fixadas {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--cor-borda);
}

.notas-fixadas-titulo {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cor-texto-suave);
  margin-bottom: 12px;
}

.nota-fixada-lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nota-fixada-card {
  background: var(--cor-painel);
  border: 1px solid var(--cor-borda);
  border-left: 4px solid var(--cor-media);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
}

.nota-fixada-card:hover {
  border-color: var(--cor-acao);
}

.nota-fixada-cabecalho {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nota-fixada-titulo-texto {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--cor-texto);
  word-break: break-word;
}

.nota-fixada-corpo {
  font-size: 13px;
  color: var(--cor-texto-suave);
  margin-top: 4px;
  white-space: pre-wrap;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.btn-nova-nota {
  border: 1px solid var(--cor-borda);
  background: var(--cor-painel);
  color: var(--cor-texto);
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
}

.btn-nova-nota:hover {
  border-color: var(--cor-acao);
  color: var(--cor-acao);
}

.notas-vazio {
  color: var(--cor-texto-suave);
  font-size: 14px;
  padding: 4px 2px;
}

.nota-lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.nota-card {
  background: var(--cor-painel);
  border: 1px solid var(--cor-borda);
  border-left: 4px solid var(--cor-media);
  border-radius: 8px;
  padding: 12px 14px;
}

.nota-cabecalho {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Inputs "sem moldura" pra dar sensação de bloco de notas */
.nota-titulo-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 15px;
  font-weight: 600;
  color: var(--cor-texto);
  padding: 0;
}

.nota-titulo-input:focus {
  outline: none;
}

.nota-corpo-input {
  width: 100%;
  border: none;
  background: transparent;
  resize: vertical;
  min-height: 60px;
  margin-top: 6px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: var(--cor-texto);
  padding: 0;
}

.nota-corpo-input:focus {
  outline: none;
}

/* ===== Diárias e Tarefas do dia lado a lado ===== */
.agenda-colunas {
  display: grid;
  /* minmax(0, …) impede que o form largo de uma coluna estufe e esmague a outra */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 2.4vw, 40px);
  align-items: start;
}

/* display:grid acima vence o atributo [hidden] (regra do navegador perde
   pra qualquer CSS do autor) — mesmo caso de .modal-campo[hidden] e
   .fin-opcao[hidden] já existentes neste arquivo. Sem isso, o toggle
   Unificar (js/tarefas.js, aplicarModoUnificado) marca `hidden = true`
   mas as colunas continuam visíveis, duplicando tudo na tela junto com
   a lista unificada. Achado ao vivo, 2026-09-02. */
.agenda-colunas[hidden] { display: none; }

/* Aplicada por recalcularGradeAgenda() (js/tarefas.js) quando exatamente
   uma das seções (Diárias/Tarefas do dia) está fechada: a outra ocupa
   a largura inteira do grid. */
.agenda-colunas.uma-fechada {
  grid-template-columns: 1fr;
  gap: 0;
}

/* uma-fechada empilha as duas seções na mesma largura (>960px) que o
   breakpoint abaixo já trata pra tela estreita — precisa da MESMA
   restauração de traço entre elas, senão ficam coladas sem separação.
   Achado do Rafael antes do commit. */
.agenda-colunas.uma-fechada .diarias {
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px dashed var(--cor-borda);
}

/* Item do grid acima tem min-width:auto por padrão (mesmo caso de .app > *,
   linha ~77): sem isso, o .filtro-bar em grid de 2 linhas fixas rolando pro
   lado (Leva 4 — mais colunas implícitas que a rolagem de 1 linha da Leva 3)
   estufa esta seção e vaza a PÁGINA INTEIRA pra fora da viewport em telas
   estreitas, em vez de só rolar a barra. */
.tarefas-secao {
  min-width: 0;
}

/* ===== Diárias ===== */
.diarias {
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px dashed var(--cor-borda);
}

/* Lado a lado, o traço que separava Diárias das Tarefas embaixo não faz
   sentido — o gap do grid já separa. Volta só quando empilham (abaixo). */
.agenda-colunas .diarias {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.diarias-vazio {
  color: var(--cor-texto-suave);
  font-size: 14px;
  padding: 4px 2px;
}

/* Cronômetro */
.diaria-tempo {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--cor-texto-suave);
  min-width: 46px;
  text-align: right;
  flex-shrink: 0;
}

.diaria-tempo.rodando {
  color: var(--cor-acao);
  font-weight: 600;
}

/* Contagem no zero (antes de marcar feita): pisca em vermelho */
.diaria-tempo.esgotado {
  color: var(--cor-alta);
  font-weight: 700;
}

.btn-timer {
  border: none;
  background: transparent;
  color: var(--cor-acao);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  flex-shrink: 0;
}

.btn-timer:hover {
  background: var(--cor-fundo);
}

/* Horário do alarme */
.tarefa-horario-input {
  width: 120px;
  flex-shrink: 0;
  height: var(--alt-controle);
  padding: 0 10px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-controle);
  font-size: 14px;
  font-family: inherit;
  background: var(--cor-painel);
  color: var(--cor-texto);
  cursor: pointer;
}

.tarefa-horario-input:focus {
  outline: none;
  border-color: var(--cor-acao);
}

/* Campo de duração (minutos) da contagem regressiva, ao lado do horário */
.tarefa-duracao-input {
  width: 72px;
  height: var(--alt-controle);
  padding: 0 10px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-controle);
  font-size: 14px;
  font-family: inherit;
  background: var(--cor-painel);
  color: var(--cor-texto);
}
.tarefa-duracao-input:focus { outline: none; border-color: var(--cor-acao); }

/* Chip do horário dentro do card da diária */
.diaria-horario {
  font-size: 12px;
  color: var(--cor-texto-suave);
  flex-shrink: 0;
  white-space: nowrap;
}

/* ===== Banner de alarme ===== */
.alarme-banner {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(420px, calc(100% - 32px));
}

.alarme-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--cor-acao);
  color: #fff;
  padding: 12px 16px;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  font-size: 15px;
}

.alarme-texto {
  flex: 1;
  min-width: 0;
}

/* "Desligar": para o alarme insistente. Pílula clara sobre o banner colorido. */
.alarme-desligar {
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}

.alarme-desligar:hover {
  background: #fff;
  color: var(--cor-acao);
}

/* ===== Formulário ===== */
.tarefa-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.tarefa-input {
  /* Base menor (150px): o texto cede espaço e cresce pra ocupar a sobra, pra a
     fileira caber numa linha só; ainda quebra com elegância no muito estreito. */
  flex: 1 1 150px;
  min-width: 0;
  /* Mesma altura dos botões: em linha, 3px de diferença já lê como desleixo */
  height: var(--alt-controle);
  padding: 0 14px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-controle);
  font-size: 14px;
  font-family: inherit;
  background: var(--cor-painel);
  color: var(--cor-texto);
}

.tarefa-input:focus {
  outline: none;
  border-color: var(--cor-acao);
}

.tarefa-prioridade {
  height: var(--alt-controle);
  padding: 0 10px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-controle);
  font-size: 14px;
  font-family: inherit;
  background: var(--cor-painel);
  color: var(--cor-texto);
  cursor: pointer;
}

/* Botão primário: o único preenchido da tela, pra não competir com nada */
.btn-adicionar {
  height: var(--alt-controle);
  padding: 0 20px;
  border: none;
  background: var(--cor-acao);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
}

.btn-adicionar:hover {
  background: var(--cor-acao-hover);
}

/* ===== Lista de tarefas ===== */
.tarefa-lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* display:flex acima vence o atributo [hidden] (mesmo caso de
   .agenda-colunas[hidden]) — #unificadaLista é a única .tarefa-lista que
   o toggle Unificar liga/desliga direto via hidden (diariaLista/tarefaLista
   nunca recebem hidden, só o container .agenda-colunas ao redor delas).
   Achado ao vivo, 2026-09-02. */
#unificadaLista[hidden] { display: none; }

.tarefa-card {
  background: var(--cor-painel);
  border: 1px solid var(--cor-borda);
  border-left: 4px solid var(--cor-borda);
  border-radius: 8px;
  overflow: hidden;
}

/* Cor da borda por prioridade */
.tarefa-card[data-prioridade="alta"]  { border-left-color: var(--cor-alta); }
.tarefa-card[data-prioridade="media"] { border-left-color: var(--cor-media); }
.tarefa-card[data-prioridade="baixa"] { border-left-color: var(--cor-baixa); }

/* Estados de arraste */
.tarefa-card.arrastando {
  opacity: 0.4;
}

.tarefa-card.arrasta-alvo {
  border-top: 2px solid var(--cor-acao);
}

/* Linha principal da tarefa (resumo) */
/* Card em 2 linhas fixas: .tarefa-linha-topo (linha 1) e .tarefa-controles
   (linha 2), empilhados. */
.tarefa-linha {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
}

/* Linha 1: alça · check · título · chip · ▾, tudo numa linha só (nowrap).
   Título e chip dividem o espaço e cortam com "…"; o ▾ fica na ponta direita. */
.tarefa-linha-topo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  /* Diárias não tem chip de projeto nem botão de detalhes (▾) — sem essa
     altura mínima, a linha 1 dela fica mais baixa que a de Tarefas do Dia
     (que tem esse botão) e as duas colunas desalinham card a card. */
  min-height: 25px;
}

/* Bloco de controles com colunas FIXAS — mesma grade em Diárias e Tarefas do
   Dia, então prioridade, timer, horário, ✎ e × batem linha a linha e entre as
   duas seções. Divisórias invisíveis (é só alinhamento). Célula vazia mantém a
   coluna, pra item sem timer/horário não deslocar os vizinhos. */
.tarefa-controles {
  display: grid;
  grid-template-columns: 60px 78px 62px 28px 26px;
  align-items: center;
  justify-content: end;
  gap: 6px;
  flex-shrink: 0;
}
.tarefa-controles .tarefa-etiqueta,
.tarefa-controles .btn-editar,
.tarefa-controles .btn-excluir {
  justify-self: center;
}
.tarefa-cel-timer,
.tarefa-cel-horario {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  width: 100%;
  min-width: 0;
}

/* Alça de arraste. Largura fixa reservada também na versão vazia
   (.tarefa-arrasta-espaco, usada quando o item não é arrastável no momento —
   editando ou com detalhes abertos) pra check/título não deslizarem em
   relação às linhas vizinhas que ainda têm a alça. */
.tarefa-arrasta,
.tarefa-arrasta-espaco {
  width: 15px;
  flex-shrink: 0;
}
.tarefa-arrasta {
  cursor: grab;
  color: var(--cor-texto-suave);
  font-size: 15px;
  line-height: 1;
  user-select: none;
}

.tarefa-arrasta:active {
  cursor: grabbing;
}

.tarefa-check {
  width: 20px;
  height: 20px;
  cursor: pointer;
  flex-shrink: 0;
}

.tarefa-texto {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  cursor: pointer;
}

.tarefa-card.concluida .tarefa-texto {
  text-decoration: line-through;
  color: var(--cor-texto-suave);
}

/* Ícone discreto no card de item-diária (🔁): diferencia diária de tarefa do
   dia — sobretudo na lista unificada, onde os dois tipos se misturam. */
.tarefa-diaria-icone {
  font-size: 12px;
  opacity: 0.55;
  flex-shrink: 0;
  line-height: 1;
}

.tarefa-etiqueta {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 3px 8px;
  border-radius: 999px;
  color: #fff;
  flex-shrink: 0;
}

.tarefa-etiqueta[data-prioridade="alta"]  { background: var(--cor-alta); }
.tarefa-etiqueta[data-prioridade="media"] { background: var(--cor-media); }
.tarefa-etiqueta[data-prioridade="baixa"] { background: var(--cor-baixa); }

/* Botão que abre/fecha os detalhes — encostado na direita da linha 1 */
.btn-detalhes {
  border: none;
  background: transparent;
  color: var(--cor-texto-suave);
  font-size: 14px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  flex-shrink: 0;
  margin-left: auto;
  transition: transform 0.15s;
}

.btn-detalhes:hover {
  background: var(--cor-fundo);
  color: var(--cor-acao);
}

/* Girar a seta quando aberto */
.tarefa-card.expandida .btn-detalhes {
  transform: rotate(180deg);
}

/* Cor indicando que a tarefa tem nota escrita */
.btn-detalhes.tem-nota {
  color: var(--cor-acao);
}

.btn-editar {
  border: none;
  background: transparent;
  color: var(--cor-texto-suave);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  flex-shrink: 0;
}

.btn-editar:hover {
  background: var(--cor-fundo);
  color: var(--cor-acao);
}

/* Alvo de clique quadrado e centrado, em vez de um "×" solto no meio do texto */
.btn-excluir {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--cor-texto-suave);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0.55;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}

/* Some quase por completo até o mouse chegar na linha: excluir não é a ação
   principal e não deve competir com o dado. */
.fin-item .btn-excluir,
.fin-cat .btn-excluir { opacity: 0; }

.fin-item:hover .btn-excluir,
.fin-cat:hover .btn-excluir,
.btn-excluir:focus-visible { opacity: 0.75; }

.btn-excluir:hover {
  background: var(--cor-fundo);
  color: var(--cor-alta);
}

/* Formulário de edição inline dentro do card */
.tarefa-edicao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
}

.tarefa-edicao .tarefa-input {
  flex: 1 1 180px;
}

.btn-cancelar {
  height: var(--alt-controle);
  padding: 0 16px;
  border: 1px solid var(--cor-borda);
  background: var(--cor-painel);
  color: var(--cor-texto);
  font-size: 13.5px;
}

.btn-cancelar:hover {
  background: var(--cor-fundo);
}

/* Área de detalhes (expansível) */
.tarefa-detalhes {
  padding: 0 16px 14px 16px;
}

.tarefa-detalhes-input {
  width: 100%;
  min-height: 44px;
  resize: none;
  overflow: hidden;
  padding: 10px 12px;
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  background: var(--cor-fundo);
  color: var(--cor-texto);
}

.tarefa-detalhes-input:focus {
  outline: none;
  border-color: var(--cor-acao);
}

.tarefa-detalhes-input:disabled {
  opacity: 0.7;
  cursor: default;
}

/* ===== Mini-editor (negrito + marca-texto) ===== */
.editor-rico {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.editor-barra {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.editor-btn {
  width: 28px;
  height: 28px;
  border: 1px solid var(--cor-borda);
  background: var(--cor-painel);
  color: var(--cor-texto);
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.editor-btn:hover {
  border-color: var(--cor-acao);
}

.editor-marcador {
  width: 22px;
  height: 22px;
  border: 1px solid var(--cor-borda);
  border-radius: 6px;
  cursor: pointer;
}

.editor-marcador:hover {
  transform: scale(1.12);
}

.editor-area {
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-size: 14px;
  line-height: 1.5;
  outline: none;
  word-break: break-word;
}

.editor-area:focus {
  border-color: var(--cor-acao);
}

/* Placeholder quando vazio */
.editor-area:empty::before {
  content: attr(data-placeholder);
  color: var(--cor-texto-suave);
}

/* Marca-texto: o trecho destacado ganha texto escuro para ler sobre a cor,
   independente do tema (claro ou escuro). Vale onde o conteúdo é renderizado. */
.editor-area [style*="background"],
.nota-fixada-corpo [style*="background"],
.hist-detalhes [style*="background"] {
  color: #1f2937;
  border-radius: 3px;
  padding: 0 1px;
}

.tarefa-vazio {
  color: var(--cor-texto-suave);
  font-size: 15px;
  padding: 8px 2px;
}

/* ===== Etiquetas ===== */
.tarefa-etiqueta-input {
  /* Compacto (do tamanho do seletor de prioridade) — assim cabe texto +
     prioridade + projeto + duração + horário + botão numa linha só.
     Select travado (não input digitável) desde a Leva 3. */
  flex: 0 1 116px;
  height: var(--alt-controle);
  padding: 0 12px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-controle);
  font-size: 14px;
  font-family: inherit;
  background: var(--cor-painel);
  color: var(--cor-texto);
}

.tarefa-etiqueta-input:focus {
  outline: none;
  border-color: var(--cor-acao);
}

/* Chip da etiqueta dentro do card */
.tarefa-tag {
  font-size: 12px;
  color: var(--cor-texto-suave);
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  padding: 2px 8px;
  border-radius: 999px;
  cursor: pointer;
  /* Divide a linha 1 com o título: encolhe e corta com "…" quando aperta,
     mas nunca passa da metade da linha (o título tem prioridade). */
  flex: 0 1 auto;
  min-width: 0;
  max-width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tarefa-tag:hover {
  border-color: var(--cor-acao);
  color: var(--cor-acao);
}

/* ===== Barra de filtro =====
   Rolagem horizontal numa linha só (em vez de quebrar em várias), com sombra
   nas pontas avisando que dá pra rolar mais — mesma técnica de
   .fin-tabela-rolagem (linha ~3910): os gradientes sólidos
   (attachment:local) cobrem a sombra quando o scroll já chegou na ponta,
   então ela some sozinha, sem precisar de JS. Cor de base é --cor-fundo (não
   --cor-painel, como na tabela financeira) porque a barra fica direto sobre
   o fundo da página, sem painel próprio por baixo. */
.filtro-bar {
  display: grid;
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  overflow-x: auto;
  gap: 6px;
  margin-bottom: 29px;
  padding: 2px 4px;
  background:
    linear-gradient(to right, var(--cor-fundo) 50%, transparent) 0 0,
    linear-gradient(to left, var(--cor-fundo) 50%, transparent) 100% 0,
    linear-gradient(to right, rgba(0, 0, 0, 0.18), transparent 70%) 0 0,
    linear-gradient(to left, rgba(0, 0, 0, 0.18), transparent 70%) 100% 0;
  background-repeat: no-repeat;
  background-color: var(--cor-fundo);
  background-size: 24px 100%, 24px 100%, 12px 100%, 12px 100%;
  background-attachment: local, local, scroll, scroll;
  /* Rolagem continua funcionando (overflow-x:auto acima) — só a barrinha
     nativa some, porque o arraste manual (js/tarefas.js, iniciarArrasteFiltro)
     substitui a necessidade de acertar a barra visualmente. */
  scrollbar-width: none; /* Firefox */
  cursor: grab; /* vira "grabbing" (classe .arrastando) enquanto arrasta */
}

.filtro-bar::-webkit-scrollbar {
  display: none; /* Chrome, Edge, Safari */
}

.filtro-bar.arrastando {
  cursor: grabbing;
}

.filtro-bar:empty {
  display: none;
}

.filtro-chip {
  border: 1px solid var(--cor-borda);
  background: var(--cor-painel);
  color: var(--cor-texto-suave);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
  /* Sem isso, rótulo com espaço (ex. "#Curso Online") quebra em 2 linhas
     dentro do próprio chip: track de coluna auto do grid encolhe pro
     min-content (ponto de quebra da palavra) em vez do max-content (Leva 4,
     achado ao medir o Passo 3 no navegador — flex+flex-shrink:0, da Leva 3,
     não tinha esse problema). */
  white-space: nowrap;
}

.filtro-chip:hover {
  border-color: var(--cor-acao);
}

.filtro-chip.ativo {
  background: var(--cor-acao);
  border-color: var(--cor-acao);
  color: #fff;
}

/* ===== Financeiro ===== */
/* Tom dos valores: verde entra, vermelho sai. Reaproveita as cores de
   prioridade pra não inventar paleta nova. */
[data-tom="positivo"] { color: var(--cor-baixa); }
[data-tom="negativo"] { color: var(--cor-alta); }

/* Três colunas: vazio · período · ações. A coluna vazia da esquerda é o que
   deixa o período no eixo central da tela sem tirar as ações da direita —
   com `space-between` ele ficava colado no canto. */
.fin-topo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.fin-topo-vazio { min-width: 0; }

/* Abaixo disso as três colunas espremem as ações e elas quebram em duas
   linhas ao lado do mês. Empilhar é mais limpo que espremer. */
@media (max-width: 1180px) {
  .fin-topo {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 14px;
  }
  .fin-topo-vazio { display: none; }
  /* Exceção pro roteiro de Viagem (js/viagem.js): essa coluna carrega o
     botão "‹ Viagens", não é vazia — não pode sumir junto com os outros
     usos genuinamente vazios de .fin-topo-vazio. */
  .fin-topo-vazio.fin-topo-voltar { display: revert; }
  .fin-topo-acoes { justify-content: center; }

  /* .cabecalho-topo segue o mesmo padrão de empilhar em vez de espremer
     (Passo 3 + Passo 15): abaixo de 1180px vira 1 coluna centralizada, e o
     grupo de ações (campo de data + "Voltar para hoje") não corre risco de
     ficar sem espaço e quebrar o próprio texto. */
  .cabecalho-topo {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 10px;
  }
  .cabecalho-acoes { justify-self: center; }
}

/* "Mês atual" em cima, o ‹ mês › embaixo */
.fin-mes-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.fin-mes-linha {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Menor que os controles: é atalho, não ação principal da tela */
.fin-mes-nav .btn-voltar-hoje {
  height: 26px;
  padding: 0 11px;
  margin-left: 2px;
  font-size: 12px;
  color: var(--cor-texto-suave);
}

.fin-mes-nav .btn-voltar-hoje:hover {
  color: var(--cor-acao);
  border-color: var(--cor-acao);
}

/* O rótulo é botão (abre o seletor de período) mas tem cara de título.
   Centralizado dentro da largura fixa: à esquerda, a seta › pulava de lugar
   entre "maio de 2026" e "setembro de 2026". */
.fin-mes-rotulo {
  min-width: 230px;
  padding: 2px 10px;
  border: 1px solid transparent;
  border-radius: var(--raio-controle);
  background: transparent;
  color: var(--cor-texto);
  font-family: inherit;
  font-size: 22px;
  font-weight: 600;
  text-transform: capitalize;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.fin-mes-rotulo:hover {
  border-color: var(--cor-borda);
  background: var(--cor-painel);
}

.fin-mes-rotulo:focus-visible {
  outline: 2px solid var(--cor-acao);
  outline-offset: 2px;
}

.fin-mes-btn {
  width: var(--alt-controle-sm);
  height: var(--alt-controle-sm);
  padding: 0;
  border: 1px solid var(--cor-borda);
  background: var(--cor-painel);
  color: var(--cor-texto-suave);
  font-size: 16px;
  line-height: 1;
}

.fin-mes-btn:hover {
  border-color: var(--cor-acao);
  color: var(--cor-acao);
  background: color-mix(in srgb, var(--cor-acao) 10%, var(--cor-painel));
}

.fin-topo-acoes {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

/* Pagar fatura direto da lateral */
.fin-lat-pagar {
  width: 100%;
  height: 26px;
  margin-top: 6px;
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, var(--cor-item, var(--cor-acao)) 45%, var(--cor-borda));
  border-radius: 7px;
  background: color-mix(in srgb, var(--cor-item, var(--cor-acao)) 12%, transparent);
  color: var(--cor-item, var(--cor-acao));
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.fin-lat-pagar:hover {
  background: var(--cor-item, var(--cor-acao));
  color: #fff;
}

.fin-btn-secundario {
  height: var(--alt-controle-sm);
  padding: 0 13px;
  border: 1px solid var(--cor-borda);
  background: var(--cor-painel);
  color: var(--cor-texto-suave);
  font-size: 13px;
}

.fin-btn-secundario:hover {
  border-color: var(--cor-acao);
  color: var(--cor-acao);
  background: color-mix(in srgb, var(--cor-acao) 8%, var(--cor-painel));
}

/* Os três números do mês */
.fin-resumo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.fin-numero {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--cor-painel);
  border: 1px solid var(--cor-borda);
  border-radius: 10px;
  padding: 14px 16px;
}

.fin-numero-rotulo {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cor-texto-suave);
}

.fin-numero-valor {
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

/* O que ainda falta receber/pagar: cada valor é um botão que filtra a lista
   pra ele. Era uma frase solta; virou atalho. */
.fin-previsto {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  padding: 0 2px;
}

.fin-previsto-rotulo {
  font-size: 12px;
  color: var(--cor-texto-suave);
}

.fin-previsto-chip {
  height: 26px;
  padding: 0 11px;
  border: 1px dashed var(--cor-borda);
  border-radius: 999px;
  background: transparent;
  color: var(--cor-texto-suave);
  font-family: inherit;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

/* A cor vem de saída: em cinza os dois chips ficavam iguais e o olho tinha
   que ler o texto pra saber qual era o que entra e qual é o que sai. */
.fin-previsto-chip[data-tom="positivo"] { color: var(--cor-baixa); }
.fin-previsto-chip[data-tom="negativo"] { color: var(--cor-alta); }

.fin-previsto-chip:hover,
.fin-previsto-chip.ativo { border-color: currentColor; }

.fin-previsto-chip.ativo {
  border-style: solid;
  font-weight: 600;
  background: color-mix(in srgb, currentColor 12%, transparent);
}

/* ----- Barra de filtros da lista ----- */
.fin-filtros {
  margin-bottom: 16px;
}

.fin-filtros .fin-busca { margin-bottom: 8px; }

.fin-filtros-linha {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.fin-filtro-select {
  height: var(--alt-controle-sm);
  max-width: 200px;
  padding: 0 10px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-controle);
  background: var(--cor-painel);
  color: var(--cor-texto-suave);
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

.fin-filtro-select:hover { border-color: var(--cor-texto-suave); }

.fin-filtro-select:focus {
  outline: none;
  border-color: var(--cor-acao);
}

/* Filtro ligado se destaca: senão dá pra esquecer que a lista está cortada */
.fin-filtro-select.ativo {
  color: var(--cor-acao);
  border-color: var(--cor-acao);
  background: color-mix(in srgb, var(--cor-acao) 10%, var(--cor-painel));
}

/* Sub-abas: MESMO controle segmentado do .fin-visual-troca, só que na altura
   cheia — é a navegação da tela, não um filtro. Trilho e pílula seguem a
   mesma conta (raio do trilho = raio do botão + padding), pra os dois
   controles serem visivelmente da mesma família. */
.fin-subabas {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  margin-bottom: 22px;
  padding: 3px;
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: calc(var(--raio-controle) + 3px);
  line-height: 1;
}

.fin-subaba {
  height: var(--alt-controle-sm);
  padding: 0 15px;
  border: none;
  border-radius: var(--raio-controle);
  background: transparent;
  color: var(--cor-texto-suave);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.fin-subaba:hover {
  color: var(--cor-texto);
  background: color-mix(in srgb, var(--cor-texto) 7%, transparent);
}

.fin-subaba.ativa {
  background: var(--cor-painel);
  color: var(--cor-texto);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

/* ===== Sistema de botões =====
   Todos os controles compartilham altura, raio e transição. Antes cada botão
   tinha uma altura própria (33 / 36 / 41 / 45px) e lado a lado desalinhavam,
   que era a maior fonte de "cara de amador" na tela. */
:root {
  --alt-controle: 42px;    /* mesma altura dos inputs, pra alinhar em linha */
  --alt-controle-sm: 34px;
  --raio-controle: 9px;
}

.btn-adicionar,
.btn-cancelar,
.btn-modal-cancelar,
.btn-perigo,
.fin-acao,
.fin-btn-secundario,
.fin-btn-pagar,
.fin-ano,
.fin-mes-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: inherit;
  border-radius: var(--raio-controle);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.06s;
}

/* Afunda 1px ao clicar: dá a sensação física de que o clique pegou */
.btn-adicionar:active,
.btn-cancelar:active,
.btn-modal-cancelar:active,
.btn-perigo:active,
.fin-acao:active,
.fin-btn-secundario:active,
.fin-btn-pagar:active,
.fin-ano:active,
.fin-mes-btn:active {
  transform: translateY(1px);
}

/* Foco visível só pra quem navega por teclado */
.btn-adicionar:focus-visible,
.btn-cancelar:focus-visible,
.btn-modal-cancelar:focus-visible,
.fin-acao:focus-visible,
.fin-btn-secundario:focus-visible,
.fin-btn-pagar:focus-visible,
.fin-ano:focus-visible,
.fin-subaba:focus-visible,
.fin-mes-btn:focus-visible,
.btn-excluir:focus-visible {
  outline: 2px solid var(--cor-acao);
  outline-offset: 2px;
}

/* Ações rápidas: compactas e tingidas na cor da operação. Antes esticavam
   pra largura inteira (flex: 1 1 150px) e viravam três blocos enormes. */
/* Ações rápidas moram no topo, junto do controle de mês: valem pra tela
   inteira. Compactas porque dividem a linha com a navegação de período. */
.fin-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}

.fin-acao {
  flex: 0 0 auto;
  height: var(--alt-controle-sm);
  padding: 0 11px;
  border: 1px solid var(--cor-borda);
  background: var(--cor-painel);
  color: var(--cor-texto);
  font-size: 12.5px;
  font-weight: 600;
}

.fin-acao-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.fin-acao-entrada { color: var(--cor-baixa); border-color: color-mix(in srgb, var(--cor-baixa) 40%, var(--cor-borda)); }
.fin-acao-saida   { color: var(--cor-alta);  border-color: color-mix(in srgb, var(--cor-alta) 40%, var(--cor-borda)); }
.fin-acao-transf  { color: var(--cor-acao);  border-color: color-mix(in srgb, var(--cor-acao) 40%, var(--cor-borda)); }

.fin-acao-entrada .fin-acao-icone { background: color-mix(in srgb, var(--cor-baixa) 18%, transparent); }
.fin-acao-saida .fin-acao-icone   { background: color-mix(in srgb, var(--cor-alta) 18%, transparent); }
.fin-acao-transf .fin-acao-icone  { background: color-mix(in srgb, var(--cor-acao) 18%, transparent); }

.fin-acao-entrada:hover { background: color-mix(in srgb, var(--cor-baixa) 12%, var(--cor-painel)); border-color: var(--cor-baixa); }
.fin-acao-saida:hover   { background: color-mix(in srgb, var(--cor-alta) 12%, var(--cor-painel));  border-color: var(--cor-alta); }
.fin-acao-transf:hover  { background: color-mix(in srgb, var(--cor-acao) 12%, var(--cor-painel));  border-color: var(--cor-acao); }

/* Título de grupo dentro de uma sub-aba (Entradas, Saídas, Contas, Cartões...) */
.fin-grupo-titulo {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cor-texto-suave);
  margin: 26px 0 10px 2px;
}

/* Grade de cards: quantos couberem */
.fin-grade {
  display: grid;
  /* 188px: cabe "Operacional (Reembolsável)" em duas linhas sem espremer */
  grid-template-columns: repeat(auto-fill, minmax(188px, 1fr));
  gap: 8px;
  align-items: start;
}

/* Pastilha de ícone: quadradinho com a cor do item. É o que substitui o logo
   do banco sem precisar hospedar imagem nenhuma. */
.fin-pastilha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 15px;
  line-height: 1;
  flex-shrink: 0;
}

.fin-pastilha.mini {
  width: 18px;
  height: 18px;
  font-size: 10px;
  border-radius: 5px;
}

/* Badge: rótulo pequeno contornado (tipo do lançamento, plano, mês...) */
.fin-badge {
  display: inline-block;
  font-size: 11px;
  padding: 2px 7px;
  border: 1px solid var(--cor-borda);
  border-radius: 999px;
  color: var(--cor-texto-suave);
  white-space: nowrap;
}

.fin-badge-entrada {
  color: var(--cor-baixa);
  border-color: var(--cor-baixa);
  background: color-mix(in srgb, var(--cor-baixa) 12%, transparent);
}

.fin-badge-saida {
  color: var(--cor-alta);
  border-color: var(--cor-alta);
  background: color-mix(in srgb, var(--cor-alta) 12%, transparent);
}

/* Cabeçalho de mês na lista, com a soma do mês à direita */
.fin-mes-grupo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 2px 8px 2px;
  cursor: pointer;
  border-bottom: 1px solid var(--cor-borda);
  margin-bottom: 8px;
}

.fin-mes-grupo-nome {
  font-weight: 600;
  text-transform: capitalize;
  flex: 1;
}

.fin-mes-grupo-soma {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* Filtro de ano */
.fin-anos {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.fin-ano {
  height: 28px;
  padding: 0 12px;
  border: 1px solid var(--cor-borda);
  border-radius: 999px;
  background: var(--cor-painel);
  color: var(--cor-texto-suave);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.fin-ano:hover { border-color: var(--cor-texto-suave); color: var(--cor-texto); }

.fin-ano.ativo {
  border-color: transparent;
  background: var(--cor-acao);
  color: #fff;
  font-weight: 600;
}

.fin-ano-resumo {
  margin-left: auto;
  font-size: 13px;
  color: var(--cor-texto-suave);
  font-variant-numeric: tabular-nums;
}

.fin-anos-rotulo {
  font-size: 12px;
  color: var(--cor-texto-suave);
}

/* Linha de lançamento clicável (abre a edição) */
.fin-item.clicavel { cursor: pointer; }
.fin-item.clicavel:hover { border-color: var(--cor-acao); }

/* Select que vira campo de texto pra criar item novo sem sair do pop-up */
.fin-select-criar {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fin-select-criar select,
.fin-select-criar input {
  width: 100%;
}

.fin-aviso-suave {
  font-size: 12px;
  color: var(--cor-texto-suave);
  background: var(--cor-fundo);
  border-radius: 8px;
  padding: 8px 10px;
}

/* Botão de pagar a fatura inteira, dentro do card do cartão */
.fin-btn-pagar {
  width: 100%;
  height: var(--alt-controle-sm);
  margin-top: 12px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--cor-acao) 45%, var(--cor-borda));
  background: color-mix(in srgb, var(--cor-acao) 10%, transparent);
  color: var(--cor-acao);
  font-size: 12.5px;
  font-weight: 600;
}

.fin-btn-pagar:hover {
  background: var(--cor-acao);
  border-color: var(--cor-acao);
  color: #fff;
}

/* Campos editáveis inline na tela de configuração */
.fin-edit-nome {
  flex: 1 1 120px;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--cor-texto);
  font-family: inherit;
  font-size: 14px;
}

.fin-edit-nome:hover { border-color: var(--cor-borda); }

.fin-edit-nome:focus {
  outline: none;
  border-color: var(--cor-acao);
  background: var(--cor-fundo);
}

.fin-cat .fin-valor-input {
  flex: 0 1 110px;
  padding: 7px 9px;
  font-size: 13px;
}

/* Tags coloridas dentro da linha de lançamento */
.fin-item-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.fin-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  white-space: nowrap;
}

.fin-item-data {
  font-size: 12px;
  color: var(--cor-texto-suave);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Compacto de propósito: são ~38 cards no Planejamento. Cada respiro a mais
   vira uma tela inteira de rolagem. */
.fin-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--cor-painel);
  border: 1px solid var(--cor-borda);
  border-top: 3px solid var(--cor-card, var(--cor-borda));
  border-radius: 9px;
  padding: 9px 12px 10px 12px;
}

/* Capa do card: o degradê faz o papel do logo do banco que o Notion carrega
   como imagem. Sem arquivo externo, funciona offline e herda a cor da conta. */
.fin-card.tem-capa {
  padding: 0 0 10px 0;
  overflow: hidden;
}

.fin-card-capa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 32px;
  padding: 0 12px;
  margin-bottom: 8px;
}

.fin-card-capa-icone {
  font-size: 17px;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

.fin-card-capa-texto {
  font-size: 11.5px;
  font-weight: 600;
  color: #fff;
  opacity: 0.9;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  font-variant-numeric: tabular-nums;
}

.fin-card.tem-capa > *:not(.fin-card-capa) {
  margin-left: 12px;
  margin-right: 12px;
}

.fin-card.tem-capa .fin-barra { width: calc(100% - 24px); }

.fin-card-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}

.fin-card-ident {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* Linhas de detalhe do card (limite disponível / utilizado / total) */
.fin-card-linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 11.5px;
  color: var(--cor-texto-suave);
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}

.fin-card-pct {
  font-size: 10.5px;
  color: var(--cor-texto-suave);
  padding-top: 2px;
}

.fin-icone-input {
  width: 42px;
  text-align: center;
  padding: 8px 4px;
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  background: var(--cor-painel);
  color: var(--cor-texto);
  font-size: 15px;
}

/* Nome SEMPRE inteiro: quebra em quantas linhas precisar. Cortar em "Ope…"
   não identifica nada. O min-height de 2 linhas mantém os cards alinhados
   na grade mesmo quando o nome ocupa só uma. */
/* `min-height` de duas linhas mantém os cards do mesmo tamanho mesmo quando um
   nome cabe em uma linha e o vizinho precisa de duas. Sem isso a grade fica
   serrilhada — o preço é a altura fixa, então ela é a menor que serve. */
.fin-card-titulo {
  font-size: 12.5px;
  color: var(--cor-texto-suave);
  line-height: 1.25;
  min-height: 2.5em;
  display: flex;
  align-items: center;
  overflow-wrap: anywhere;
}

/* Cabeçalho de grupo com o total à direita */
.fin-grupo-cab {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 28px 0 12px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--cor-borda);
}

.fin-grupo-cab .fin-grupo-titulo { margin: 0 0 3px 2px; }

/* Modificador pro cabeçalho de categoria em Estudos (js/estudos.js): pastilha
   de cor + título formam uma legenda só e devem ficar grudados, não nos
   extremos opostos do space-between padrão de .fin-grupo-cab. */
.est-grupo-cab { justify-content: flex-start; gap: 6px; }

.fin-grupo-nota {
  font-size: 12px;
  color: var(--cor-texto-suave);
  margin-left: 2px;
}

.fin-grupo-total {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  font-variant-numeric: tabular-nums;
}

.fin-grupo-total strong { font-size: 17px; }

.fin-grupo-total span {
  font-size: 11.5px;
  color: var(--cor-texto-suave);
}

.fin-card-valor {
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

/* Card com capa é mais compacto: o título vira uma linha só, sem a altura
   mínima de duas que os cards de categoria precisam. */
.fin-card.tem-capa .fin-card-titulo { min-height: 0; }
.fin-card.tem-capa .fin-card-topo { margin-bottom: 2px; }
.fin-card.tem-capa .fin-card-linha { padding-top: 2px; }

.fin-card-detalhe {
  font-size: 11.5px;
  color: var(--cor-texto-suave);
}

.fin-card .fin-barra { margin-top: 5px; }

/* Entrada e saída marcadas na borda: o olho separa sem ler o valor */
.fin-item.fin-entrada { border-left: 3px solid var(--cor-baixa); }
.fin-item.fin-saida   { border-left: 3px solid var(--cor-alta); }

.fin-transferencia { border-left: 3px solid var(--cor-acao); }

.fin-btn-link {
  border: none;
  background: transparent;
  color: var(--cor-texto-suave);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  padding: 0 2px 10px 2px;
  text-align: left;
}

.fin-btn-link:hover { color: var(--cor-acao); }

.fin-form-extras {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.fin-aviso {
  color: var(--cor-alta);
  font-size: 13px;
  margin: -8px 0 14px 2px;
}

/* Formulários */
.fin-form,
.fin-form-mini {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.fin-form .tarefa-input,
.fin-form-mini .tarefa-input {
  flex: 1 1 200px;
  min-width: 0;
}

.fin-valor-input,
.fin-data-input,
.fin-select,
.fin-parcelas-input {
  height: var(--alt-controle);
  padding: 0 12px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-controle);
  font-size: 14px;
  font-family: inherit;
  background: var(--cor-painel);
  color: var(--cor-texto);
}

.fin-valor-input { flex: 0 1 120px; text-align: right; font-variant-numeric: tabular-nums; }
.fin-parcelas-input { flex: 0 1 74px; }
.fin-select { flex: 0 1 150px; cursor: pointer; }

.fin-valor-input:focus,
.fin-data-input:focus,
.fin-select:focus,
.fin-parcelas-input:focus {
  outline: none;
  border-color: var(--cor-acao);
}

/* Lista de lançamentos */
.fin-lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Linha de lançamento em COLUNAS fixas: com flex, cada linha acomodava os
   elementos de um jeito e nada alinhava verticalmente entre linhas. */
/* A grade vem do JS (`--fin-cols` em #viewFinanceiro), porque a ORDEM das
   colunas é do Igor — dá pra arrastar o cabeçalho. O valor abaixo é só o
   fallback: checkbox · tipo · descrição · categoria · conta · data · valor ·
   excluir. */
.fin-item {
  display: grid;
  grid-template-columns: var(--fin-cols,
    18px 68px minmax(0, 1fr) minmax(0, 168px) minmax(0, 148px) 46px 112px 26px);
  align-items: center;
  gap: 12px;
  background: var(--cor-painel);
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  padding: 11px 14px;
}

/* Cabeçalho: mesma grade, sem caixa, só os rótulos */
.fin-item-cabecalho {
  background: transparent;
  /* Borda transparente com a MESMA espessura da linha de lançamento (3px na
     esquerda por causa da faixa de entrada/saída, 1px nos outros lados).
     Sem isso o cabeçalho nasce 3px à esquerda e nenhuma coluna bate com a
     célula de baixo. */
  border: 1px solid transparent;
  border-left-width: 3px;
  border-bottom-color: var(--cor-borda);
  border-radius: 0;
  padding-top: 0;
  padding-bottom: 6px;
  margin-bottom: 2px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--cor-texto-suave);
  cursor: default;
}


/* Título de coluna é botão: clica e ordena por ela. A seta só existe na
   coluna ativa — marcar todas viraria ruído numa linha de 10px. */
.fin-cab-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s;
}

.fin-cab-btn:hover { color: var(--cor-texto); }
.fin-cab-btn.ativo { color: var(--cor-acao); font-weight: 700; }

.fin-cab-rotulo {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Alça do arrastar: só aparece no hover, senão seriam 6 pontinhos permanentes
   competindo com os títulos numa linha de 10px. */
.fin-cab-alca {
  width: 0;
  overflow: hidden;
  opacity: 0;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0;
  transition: opacity 0.15s, width 0.15s;
}

.fin-cab-btn:hover .fin-cab-alca,
.fin-cab-btn:focus-visible .fin-cab-alca {
  width: 11px;
  opacity: 0.55;
}

.fin-cab-btn:hover { cursor: grab; }
.fin-cab-btn:active { cursor: grabbing; }

.fin-cab-btn.arrastando { opacity: 0.35; }

/* Onde a coluna vai cair. Barra vertical na borda, não realce no botão
   inteiro: com o realce não dava pra saber se caía antes ou depois. */
.fin-cab-btn.alvo-antes { box-shadow: inset 2px 0 0 0 var(--cor-acao); }
.fin-cab-btn.alvo-depois { box-shadow: inset -2px 0 0 0 var(--cor-acao); }

.fin-cab-btn:focus-visible {
  outline: 2px solid var(--cor-acao);
  outline-offset: 3px;
  border-radius: 4px;
}

.fin-cab-seta {
  font-size: 9px;
  line-height: 1;
}

.fin-item-cabecalho .fin-cab-valor {
  justify-content: flex-end;
  text-align: right;
}

.fin-item-col {
  min-width: 0;
  overflow: hidden;
}

/* A célula corta com reticências em vez de empurrar as outras colunas */
.fin-tag-nome {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fin-tag-vazia { color: var(--cor-borda); }

/* Previsto (ainda não realizado) fica esmaecido e tracejado — o olho separa
   na hora o que já é fato do que é só plano. */
.fin-item.previsto {
  border-style: dashed;
  opacity: 0.7;
}

.fin-item-nome {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.fin-item-nome-texto {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fin-item-meta {
  font-size: 12px;
  color: var(--cor-texto-suave);
  white-space: nowrap;
}

/* Valor à direita e tabular: as casas decimais alinham entre linhas */
.fin-item-valor {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
  text-align: right;
}

.fin-badge-transf {
  color: var(--cor-acao);
  border-color: var(--cor-acao);
  background: color-mix(in srgb, var(--cor-acao) 12%, transparent);
}

/* Telas estreitas: a grade de 8 colunas não cabe, volta a empilhar */
@media (max-width: 860px) {
  .fin-item {
    grid-template-columns: 18px 1fr auto 26px;
    gap: 8px 10px;
  }
  .fin-item-cabecalho { display: none; }
  .fin-item-nome { grid-column: 2 / 4; }
  .fin-item-col { grid-column: 2 / 3; }
  .fin-col-conta { grid-column: 3 / 4; }
  .fin-item-data { grid-column: 2 / 3; }
  .fin-item-valor { grid-column: 3 / 4; }
  /* Badge de tipo (Entrada/Saída) não tem wrapper com classe própria — sem
     posição explícita ela cai no grid como item comum e herda
     justify-self:stretch, esticando pra largura toda da coluna 1fr. Dando
     posição fixa (mesma célula que já ocupava) + justify-self:start ela
     volta a ficar do tamanho do próprio texto. */
  .fin-item .fin-badge-entrada,
  .fin-item .fin-badge-saida {
    grid-column: 2 / 3;
    grid-row: 1;
    justify-self: start;
  }
}

.fin-vazio {
  color: var(--cor-texto-suave);
  font-size: 14px;
  padding: 8px 2px;
}

/* Empty state "rico": ícone + título + descrição + ação — só onde há atalho
   que faz sentido oferecer (ex.: lista de lançamentos vazia). */
.fin-vazio-rico {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 32px 16px;
  border: 1px dashed var(--cor-borda);
  border-radius: 12px;
  color: var(--cor-texto-suave);
}
.fin-vazio-icone { font-size: 28px; }
.fin-vazio-titulo { font-size: 15px; color: var(--cor-texto); }
.fin-vazio-desc { font-size: 13px; margin: 0; }
.fin-vazio-acoes { display: flex; gap: 8px; margin-top: 6px; }

/* Seções recolhíveis do Financeiro */
.fin-secao {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px dashed var(--cor-borda);
}

.fin-secao-cabecalho {
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: transparent;
  color: var(--cor-texto-suave);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  padding: 0 0 12px 0;
}

.fin-secao.fechado .secao-seta { transform: rotate(-90deg); }
.fin-secao.fechado .fin-secao-corpo { display: none; }

/* Contas, cartões e categorias */
.fin-conta-lista,
.fin-cat-lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.fin-conta,
.fin-cat {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  background: var(--cor-painel);
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  padding: 11px 14px;
}

.fin-conta-nome,
.fin-cat-nome {
  flex: 1 1 130px;
  min-width: 0;
}

.fin-conta-detalhe,
.fin-cat-valores {
  font-size: 13px;
  color: var(--cor-texto-suave);
  font-variant-numeric: tabular-nums;
}

.fin-conta-saldo {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* Barra de uso (limite do cartão / meta da categoria) */
.fin-barra {
  flex: 1 1 100%;
  height: 5px;
  background: var(--cor-fundo);
  border-radius: 999px;
  overflow: hidden;
}

.fin-barra-cheio {
  height: 100%;
  background: var(--cor-acao);
  border-radius: 999px;
}

.fin-barra-cheio.alerta { background: var(--cor-alta); }

/* Busca da Visão */
.fin-busca {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.fin-busca-input {
  flex: 1 1 260px;
  min-width: 0;
  height: var(--alt-controle-sm);
  padding: 0 13px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-controle);
  background: var(--cor-painel);
  color: var(--cor-texto);
  font-family: inherit;
  font-size: 13.5px;
}

.fin-busca-input:focus {
  outline: none;
  border-color: var(--cor-acao);
}

.fin-busca-info {
  font-size: 12.5px;
  color: var(--cor-acao);
}

/* ===== Lateral do Financeiro (coluna da direita) ===== */
.oculto-por-aba { display: none !important; }

/* CONTAS / CARTÕES fazem o mesmo papel que o HISTÓRICO da coluna da esquerda:
   se um vira legível e o outro não, as duas laterais deixam de combinar. */
.fin-lat-titulo {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--cor-texto);
  margin: 0 0 7px 2px;
}

.fin-lat-titulo:not(:first-child) { margin-top: 16px; }

.fin-lat-lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Faixa colorida à esquerda = mesma identidade da capa dos cards, sem gastar
   altura. O valor vira a informação principal, em linha própria. */
.fin-lat-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 7px 10px 8px 10px;
  border: 1px solid var(--cor-borda);
  border-left: 3px solid var(--cor-item, var(--cor-borda));
  border-radius: 8px;
  background: var(--cor-painel);
  transition: border-color 0.15s, background 0.15s, transform 0.06s;
}

.fin-lat-item.clicavel { cursor: pointer; }

.fin-lat-item.clicavel:hover {
  background: color-mix(in srgb, var(--cor-item, var(--cor-acao)) 8%, var(--cor-painel));
  border-color: color-mix(in srgb, var(--cor-item, var(--cor-acao)) 45%, var(--cor-borda));
  border-left-color: var(--cor-item, var(--cor-acao));
}

.fin-lat-item.clicavel:active { transform: translateY(1px); }

/* Alça de arrastar: pista visual, só no hover. Quem arrasta é a linha
   inteira — mesma mecânica das tarefas da Agenda. */
.fin-lat-arrasta {
  width: 0;
  overflow: hidden;
  opacity: 0;
  color: var(--cor-texto-suave);
  font-size: 12px;
  line-height: 1;
  flex-shrink: 0;
  user-select: none;
  transition: opacity 0.15s, width 0.15s;
}

.fin-lat-item:hover .fin-lat-arrasta {
  width: 12px;
  opacity: 0.6;
}

.fin-lat-item.arrastando { opacity: 0.35; }

/* Onde vai cair */
.fin-lat-item.arrasta-alvo {
  border-color: var(--cor-acao);
  background: color-mix(in srgb, var(--cor-acao) 12%, var(--cor-painel));
}

/* Conta escolhida: a lista ao lado está mostrando só ela */
.fin-lat-item.selecionada {
  background: color-mix(in srgb, var(--cor-item, var(--cor-acao)) 14%, var(--cor-painel));
  border-color: var(--cor-item, var(--cor-acao));
  opacity: 1;
}

/* Editar continua a um clique — mas discreto, porque o clique principal da
   lateral agora é VER os lançamentos da conta, não editar o cadastro. */
.fin-lat-editar {
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: var(--cor-texto-suave);
  font-family: inherit;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}

.fin-lat-item:hover .fin-lat-editar,
.fin-lat-editar:focus-visible { opacity: 1; }

.fin-lat-editar:hover {
  background: var(--cor-fundo);
  color: var(--cor-acao);
}

/* Conta sem movimento: vira uma linha só (nome e valor lado a lado) e some
   pro fundo. Continua clicável. */
.fin-lat-zerada {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 10px;
  opacity: 0.45;
}

.fin-lat-zerada .fin-lat-topo { flex: 1; min-width: 0; }
.fin-lat-zerada .fin-lat-valor { font-size: 12px; font-weight: 500; }
.fin-lat-zerada:hover { opacity: 1; }

.fin-lat-topo {
  display: flex;
  align-items: center;
  gap: 7px;
}

.fin-lat-nome {
  flex: 1;
  min-width: 0;
  font-size: 11.5px;
  color: var(--cor-texto-suave);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Valor é o que se lê de relance: linha própria e maior */
.fin-lat-valor {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.fin-lat-detalhe {
  font-size: 10.5px;
  line-height: 1.3;
  color: var(--cor-texto-suave);
}

.fin-lat-rodape {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 10px;
  color: var(--cor-texto-suave);
  font-variant-numeric: tabular-nums;
  padding-top: 3px;
}

.fin-lat-item .fin-barra { margin-top: 4px; height: 3px; }

/* Total: bloco fechado, não uma linha solta */
/* O total é o número que se procura na coluna. Com a mesma borda e o mesmo
   cinza das contas ele virava só mais uma linha da lista — agora tem borda
   mais firme e o valor maior que qualquer conta individual. */
.fin-lat-soma {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2px 8px;
  margin-top: 9px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--cor-texto-suave) 45%, var(--cor-borda));
  border-radius: 8px;
  background: var(--cor-fundo);
}

.fin-lat-soma-rotulo {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cor-texto);
  white-space: nowrap;
}

/* `nowrap` nos dois porque sem ele o sinal de menos ficava numa linha e o
   valor na outra. Quando a coluna aperta de vez, o `flex-wrap` da caixa
   empurra o valor pra linha de baixo INTEIRO, em vez de partir no meio. */
.fin-lat-soma-valor {
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* ===== Blocos do ⚙️ Configurar ===== */
.fin-bloco-cad {
  margin-top: 8px;
  padding-top: 0;
  border-top: none;
  border: 1px solid var(--cor-borda);
  border-radius: 10px;
  overflow: hidden;
}

.fin-bloco-cad .fin-secao-cabecalho {
  width: 100%;
  padding: 11px 14px;
  color: var(--cor-texto);
  font-size: 13.5px;
}

.fin-bloco-cad .fin-secao-cabecalho:hover { background: var(--cor-fundo); }
.fin-bloco-cad .fin-secao-corpo { padding: 0 14px 14px 14px; }

.fin-bloco-conta {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--cor-fundo);
  color: var(--cor-texto-suave);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

/* "+" no cabeçalho: cria sem precisar abrir o bloco */
.fin-bloco-mais {
  margin-left: auto;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--cor-borda);
  border-radius: 7px;
  background: var(--cor-painel);
  color: var(--cor-texto-suave);
  font-family: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}

.fin-bloco-mais:hover {
  border-color: var(--cor-acao);
  color: var(--cor-acao);
}

.fin-config-rodape {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--cor-borda);
}

.fin-config-rodape-nota {
  flex: 1 1 220px;
  font-size: 12px;
  color: var(--cor-texto-suave);
}

.fin-config-rodape .fin-form-mini { margin: 0; }

/* Setas de reordenar no cadastro */
.fin-ordem {
  display: inline-flex;
  gap: 2px;
  flex-shrink: 0;
}

.fin-ordem-btn {
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--cor-texto-suave);
  font-family: inherit;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}

.fin-cat:hover .fin-ordem-btn { opacity: 0.7; }

.fin-ordem-btn:hover {
  opacity: 1;
  background: var(--cor-fundo);
  color: var(--cor-acao);
}

/* Alternador cards ↔ tabela */
/* Controle segmentado (trilho + pílula ativa). Dois usos: o Tudo/Em aberto/
   Realizados da lista e o Tabela/Cards do Planejamento.
   A conta da altura é FECHADA: botão + 2×padding + 2×borda = a altura do
   sistema. Sem isso o trilho dava 36px ao lado de selects de 34 e a linha
   inteira ficava torta. */
.fin-visual-troca {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  /* Zerada de propósito: quem dá respiro é o layout (.fin-visual-linha).
     Com margem própria, o trilho subia 7px em relação aos selects da linha
     de filtros — era o que deixava a fileira torta. */
  margin: 0;
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-controle);
  line-height: 1;
}

.fin-visual-btn {
  height: 28px;
  padding: 0 12px;
  border: none;
  /* raio do trilho − padding: o canto da pílula acompanha o canto da caixa */
  border-radius: calc(var(--raio-controle) - 2px);
  background: transparent;
  color: var(--cor-texto-suave);
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.fin-visual-btn:hover { color: var(--cor-texto); }

.fin-visual-btn.ativo {
  background: var(--cor-painel);
  color: var(--cor-texto);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

/* Linha de tabela clicável (abre a edição) */
.fin-tabela tbody tr.clicavel { cursor: pointer; }

/* Percentual com barra dentro da célula */
.fin-tab-pct {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.fin-tab-pct .fin-barra {
  width: 54px;
  flex-shrink: 0;
}

.fin-tabela + .fin-grupo-cab,
.fin-tabela-rolagem + .fin-grupo-cab { margin-top: 30px; }

/* Painel do plano: receita esperada − tetos = sobra */
.fin-plano {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  background: var(--cor-borda);
  border: 1px solid var(--cor-borda);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 8px;
}

.fin-plano-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--cor-painel);
  padding: 12px 15px;
}

.fin-plano-rotulo {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cor-texto-suave);
}

.fin-plano-valor {
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

.fin-plano-nota {
  font-size: 12.5px;
  color: var(--cor-texto-suave);
  margin: 0 0 4px 2px;
}

.fin-plano-nota[data-tom="negativo"] { color: var(--cor-alta); }

/* Card e linha de cadastro que abrem edição ao clique */
.fin-card.clicavel { cursor: pointer; }
.fin-card.clicavel:hover { border-color: var(--cor-acao); }
.fin-cat.clicavel { cursor: pointer; }
.fin-cat.clicavel:hover { border-color: var(--cor-acao); }

.fin-campo-dica {
  font-size: 11.5px;
  color: var(--cor-texto-suave);
  margin-top: -2px;
}

/* Linha de filtro (ex.: mostrar/ocultar encerrados) */
.fin-filtro-linha {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.fin-filtro-info {
  font-size: 12.5px;
  color: var(--cor-texto-suave);
}

/* Dia de fechamento do cartão, no cadastro */
.fin-fechamento-input {
  width: 76px;
  height: var(--alt-controle);
  padding: 0 8px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-controle);
  background: var(--cor-painel);
  color: var(--cor-texto);
  font-family: inherit;
  font-size: 13px;
  text-align: center;
}

/* ===== Tabelas do Resumo ===== */
.fin-resumo-titulo { margin: 30px 0 10px 0; }
.fin-resumo-titulo:first-child { margin-top: 4px; }
.fin-resumo-titulo .fin-grupo-titulo { margin: 0 0 4px 2px; }

.fin-resumo-sub {
  font-size: 12.5px;
  color: var(--cor-texto-suave);
  margin-left: 2px;
  max-width: 70ch;
}

/* A tabela larga rola sozinha em vez de estourar a página. As duas sombras
   nas bordas (background-attachment:scroll) só aparecem enquanto houver mais
   conteúdo pra rolar naquela direção — técnica de "scroll shadow": os
   gradientes sólidos (attachment:local) cobrem a sombra quando o scroll já
   chegou na ponta, então ela some sozinha sem precisar de JS. */
.fin-tabela-rolagem {
  overflow-x: auto;
  border: 1px solid var(--cor-borda);
  border-radius: 10px;
  background:
    linear-gradient(to right, var(--cor-painel) 50%, transparent) 0 0,
    linear-gradient(to left, var(--cor-painel) 50%, transparent) 100% 0,
    linear-gradient(to right, rgba(0, 0, 0, 0.18), transparent 70%) 0 0,
    linear-gradient(to left, rgba(0, 0, 0, 0.18), transparent 70%) 100% 0;
  background-repeat: no-repeat;
  background-color: var(--cor-painel);
  background-size: 24px 100%, 24px 100%, 12px 100%, 12px 100%;
  background-attachment: local, local, scroll, scroll;
}

.fin-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.fin-tabela-larga { min-width: 900px; }

.fin-tabela th,
.fin-tabela td {
  padding: 9px 12px;
  text-align: right;
  white-space: nowrap;
  border-bottom: 1px solid var(--cor-borda);
  vertical-align: middle; /* todas as células centradas: o número casa com a pastilha */
}

.fin-tabela thead th {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cor-texto-suave);
  background: var(--cor-fundo);
  position: sticky;
  top: 0;
}

.fin-tabela thead th:first-child,
.fin-tabela tbody th,
.fin-tabela tfoot th {
  text-align: left;
  font-weight: 500;
}

/* Primeira coluna congelada: rolando os 12 meses, a categoria continua à vista */
.fin-tab-fixa {
  position: sticky;
  left: 0;
  background: var(--cor-painel);
  z-index: 1;
}

.fin-tabela thead .fin-tab-fixa { background: var(--cor-fundo); z-index: 2; }

/* A primeira coluna NÃO é flex: um `display: flex` num <th> tira a célula do
   fluxo da tabela e ela deixa de compartilhar a linha-base com os <td> de
   número — foi o que desalinhava todas as linhas. Fica como célula normal e a
   pastilha (inline-flex) alinha pelo `vertical-align: middle`. */
.fin-tabela tbody th {
  min-width: 170px;
}

.fin-tabela tbody th .fin-pastilha {
  margin-right: 8px;
  vertical-align: middle;
}

.fin-tabela tbody th > span:not(.fin-pastilha) { vertical-align: middle; }

.fin-tab-mes { text-transform: capitalize; color: var(--cor-texto-suave); }
.fin-tab-num { font-variant-numeric: tabular-nums; }
.fin-tab-num.forte { font-weight: 600; }
.fin-tab-zero { color: var(--cor-borda); text-align: right; }

/* Célula que passou da meta mensal daquela categoria */
.fin-tab-num.estourou {
  color: var(--cor-alta);
  background: color-mix(in srgb, var(--cor-alta) 10%, transparent);
}

.fin-tabela tbody tr:hover td,
.fin-tabela tbody tr:hover th { background: color-mix(in srgb, var(--cor-texto) 4%, transparent); }

.fin-tabela .fin-tab-vazia { opacity: 0.4; }

/* Mês corrente destacado por uma faixa na borda esquerda */
.fin-tabela .fin-tab-hoje th:first-child { box-shadow: inset 3px 0 0 var(--cor-acao); }

.fin-tabela tfoot td,
.fin-tabela tfoot th {
  border-bottom: none;
  border-top: 1px solid var(--cor-texto-suave);
  font-weight: 600;
  background: var(--cor-fundo);
}

/* ===== Responsivo ===== */
/* As larguras das laterais e os respiros já acompanham a janela por clamp()
   (ver --lateral-esq / --lateral-dir no topo). Os breakpoints abaixo cuidam
   só do que precisa MUDAR DE ARRANJO, não de tamanho. */

/* Janelas médias: a 3ª coluna não cabe mais junto com o conteúdo */
@media (max-width: 960px) {
  /* A barra de fixados desce pra baixo, em linha cheia (não espreme o conteúdo) */
  .app.tem-fixados {
    grid-template-columns: var(--lateral-esq) 1fr;
  }
  .app.lateral-fechada.tem-fixados {
    grid-template-columns: var(--lateral-trilho) 1fr;
  }
  .app.tem-fixados .fixados {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    position: static;
    height: auto;
    border-left: none;
    border-top: 1px solid var(--cor-borda);
  }
  .app.tem-fixados .fixados .notas-fixadas,
  .app.tem-fixados .fixados .links-fixados {
    flex: 1;
    min-width: 240px;
  }
  /* Central apertada: Diárias e Tarefas voltam a empilhar, com o traço de volta */
  .agenda-colunas {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .agenda-colunas .diarias {
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px dashed var(--cor-borda);
  }
}

/* Janelas estreitas / celular: empilha em coluna única */
@media (max-width: 640px) {
  .app,
  .app.lateral-fechada,
  .app.tem-fixados,
  .app.lateral-fechada.tem-fixados {
    grid-template-columns: 1fr;
  }
  /* Fixados empilha em coluna (uma seção embaixo da outra) */
  .app.tem-fixados .fixados {
    flex-direction: column;
  }
  .historico,
  .app.lateral-fechada .historico {
    border-right: none;
    border-bottom: 1px solid var(--cor-borda);
    padding: 20px 16px;
    /* Volta ao fluxo normal: não gruda nem ocupa a tela toda */
    position: static;
    height: auto;
    overflow: visible;
  }
  /* Em coluna única, o painel aparece inteiro (ignora o "encolher") */
  .app.lateral-fechada .btn-config,
  .app.lateral-fechada .historico-secao,
  .app.lateral-fechada .projetos-secao,
  .app.lateral-fechada .aba-rotulo {
    display: revert;
  }
  .app.lateral-fechada .aba {
    justify-content: flex-start;
    padding: 10px 12px;
    gap: 10px;
  }
  .btn-lateral {
    display: none;
  }
}

/* Celular: cada campo de formulário ocupa a linha inteira, em vez de
   sobrar um botão solto quebrado no fim da linha. */
@media (max-width: 440px) {
  /* .categoria-form é o único desses que não tem wrap por padrão */
  .categoria-form {
    flex-wrap: wrap;
  }
  .tarefa-form > *,
  .tarefa-edicao > *,
  .secao-acoes > *,
  .categoria-form > * {
    flex: 1 1 100%;
  }
  .tarefa-input,
  .tarefa-edicao .tarefa-input,
  .tarefa-etiqueta-input {
    flex: 1 1 100%;
  }
  /* Cabeçalho do dia empilha em vez de espremer o seletor de data */
  .cabecalho {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  /* O cartão já é 2 linhas por padrão (.tarefa-linha-topo + controles), então
     não precisa de ajuste de quebra aqui. */
}

/* ===== Seletor de período (grade de 12 meses) ===== */
.fin-periodo .modal-form { gap: 12px; min-width: min(330px, 82vw); }

.fin-periodo-ano {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.fin-periodo-ano-rotulo {
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  min-width: 62px;
  text-align: center;
}

.fin-periodo-grade {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.fin-periodo-mes {
  height: var(--alt-controle-sm);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-controle);
  background: var(--cor-painel);
  color: var(--cor-texto-suave);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  text-transform: capitalize;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.fin-periodo-mes:hover {
  border-color: var(--cor-acao);
  color: var(--cor-acao);
}

/* Meses cobertos pelo período de agora; as PONTAS ganham a cor cheia, pra
   ler "de março a agosto" sem contar os quadradinhos. */
.fin-periodo-mes.dentro {
  background: color-mix(in srgb, var(--cor-acao) 14%, var(--cor-painel));
  color: var(--cor-texto);
}

.fin-periodo-mes.ponta {
  background: var(--cor-acao);
  border-color: var(--cor-acao);
  color: #fff;
  font-weight: 600;
}

/* O mês de hoje é referência fixa: marcado mesmo fora do período escolhido */
.fin-periodo-mes.hoje { box-shadow: inset 0 -2px 0 0 var(--cor-texto-suave); }
.fin-periodo-mes.ponta.hoje { box-shadow: inset 0 -2px 0 0 rgba(255, 255, 255, 0.65); }

.fin-periodo-situacao {
  font-size: 12.5px;
  color: var(--cor-texto-suave);
  text-align: center;
  min-height: 1.2em;
}

.fin-periodo-situacao.escolhendo { color: var(--cor-acao); }

.fin-periodo-acoes { justify-content: space-between; gap: 8px; }

/* ===== Gráficos do Resumo ===== */
.fin-gr-caixa {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px;
  margin-bottom: 6px;
}

.fin-gr {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px 12px 16px;
  border: 1px solid var(--cor-borda);
  border-radius: 10px;
  background: var(--cor-painel);
}

.fin-gr-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.fin-gr-titulo {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cor-texto);
}

.fin-gr-legenda {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: var(--cor-texto-suave);
}

.fin-gr-leg-item { display: inline-flex; align-items: center; gap: 5px; }

.fin-gr-ponto {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}

.fin-gr-ponto.entrou { background: var(--cor-baixa); }
.fin-gr-ponto.saiu { background: var(--cor-alta); }

/* As 12 colunas dividem a largura por igual; a altura da barra é % do teto do
   ano, calculado no JS. */
.fin-gr-plot {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 132px;
}

.fin-gr-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  gap: 4px;
}

.fin-gr-barras {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  flex: 1;
  min-height: 0;
}

.fin-gr-barra {
  width: 7px;
  border-radius: 2px 2px 0 0;
  transition: opacity 0.15s;
}

.fin-gr-barra:hover { opacity: 0.72; }
.fin-gr-barra.entrou { background: var(--cor-baixa); }
.fin-gr-barra.saiu { background: var(--cor-alta); }

/* Saldo: metade de cima cresce pra cima, a de baixo desce da linha do zero */
.fin-gr-zero .fin-gr-col { justify-content: center; }

.fin-gr-metade {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  justify-content: center;
}

.fin-gr-metade.acima { align-items: flex-end; }

.fin-gr-metade.abaixo {
  align-items: flex-start;
  border-top: 1px solid var(--cor-borda);
}

.fin-gr-metade.abaixo .fin-gr-barra { border-radius: 0 0 2px 2px; }

.fin-gr-rot {
  font-size: 9.5px;
  color: var(--cor-texto-suave);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.fin-gr-col.hoje .fin-gr-rot { color: var(--cor-acao); font-weight: 700; }

/* Maiores despesas: nome | barra | valor */
.fin-gr-lista {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fin-gr-linha {
  display: grid;
  grid-template-columns: minmax(0, 108px) 1fr auto;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
}

.fin-gr-nome {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: var(--cor-texto-suave);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fin-gr-nome > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

.fin-gr-icone { flex-shrink: 0; font-size: 11px; }

.fin-gr-trilho {
  height: 9px;
  border-radius: 5px;
  background: var(--cor-fundo);
  overflow: hidden;
}

.fin-gr-preenche {
  height: 100%;
  border-radius: 5px;
  min-width: 3px;
}

.fin-gr-valor {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Tela estreita: um gráfico por vez e barras mais finas */
@media (max-width: 640px) {
  .fin-gr-caixa { grid-template-columns: 1fr; }
  .fin-gr-barra { width: 5px; }
  .fin-gr-linha { grid-template-columns: minmax(0, 84px) 1fr auto; }
}

/* Bloco que só abriga outros blocos (Categorias → Despesas → Fixas) */
.fin-bloco-pai > .fin-secao-filhos {
  padding: 0 10px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fin-bloco-pai .fin-bloco-cad {
  margin-top: 0;
  background: var(--cor-fundo);
}

.fin-bloco-pai .fin-secao-cabecalho { font-size: 12.5px; }

/* Campo de meta editável na própria linha (só no bloco Metas) */
.fin-meta-input {
  width: 96px;
  height: 26px;
  padding: 0 8px;
  border: 1px solid var(--cor-borda);
  border-radius: 7px;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: inherit;
  font-size: 12.5px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.fin-meta-input:focus {
  outline: none;
  border-color: var(--cor-acao);
  background: var(--cor-painel);
}

.fin-meta-input::placeholder { font-size: 11px; }

/* Respiro do trilho quando ele é a linha inteira (Planejamento) */
.fin-visual-linha { margin-bottom: 14px; }

/* Uma família só de raio nos blocos: número, card, gráfico e painel usavam
   9, 10 e 11px, e lado a lado a diferença aparece. */
.fin-numero,
.fin-gr,
.fin-plano,
.fin-tabela-rolagem,
.fin-bloco-cad {
  border-radius: calc(var(--raio-controle) + 1px);
}

/* ===== Ficha de lançamento ===== */
/* Três blocos separados por uma linha, em vez de oito campos empilhados sem
   hierarquia: o que é · onde entra · como se repete. */
.fin-ficha .modal-form { gap: 0; min-width: min(400px, 88vw); padding: 18px 22px; }

.fin-ficha-bloco {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 12px 0;
  border-top: 1px solid var(--cor-borda);
}

.fin-ficha-bloco:first-of-type {
  padding-top: 8px;
  border-top: none;
}

.fin-ficha-bloco-nome {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--cor-texto-suave);
}

/* O valor é o campo que se lê primeiro numa ficha de dinheiro, então é o único
   que não parece com os outros: cifrão fixo dentro do campo e número maior.
   O "R$" é do CSS e não do input — se fosse texto digitado, entraria no
   `lerValor()` junto com o número. */
.modal-campo .fin-campo-moeda {
  position: relative;
  display: flex;
  align-items: center;
}

.modal-campo .fin-campo-moeda::before {
  content: "R$";
  position: absolute;
  left: 12px;
  font-size: 12.5px;
  color: var(--cor-texto-suave);
  pointer-events: none;
}

.modal-campo .fin-campo-moeda input {
  width: 100%;
  padding-left: 36px;
  font-size: 15.5px;
  font-variant-numeric: tabular-nums;
}

/* Faixa colorida no título, na cor da operação: dá pra ver que ficha é sem
   ler o texto. */
.fin-ficha .modal-titulo {
  padding-left: 11px;
  border-left: 3px solid var(--cor-borda);
}

.fin-ficha .modal-titulo[data-modo="entrada"] { border-left-color: var(--cor-baixa); }
.fin-ficha .modal-titulo[data-modo="saida"] { border-left-color: var(--cor-alta); }
.fin-ficha .modal-titulo[data-modo="transferencia"] { border-left-color: var(--cor-acao); }

/* Parcelar / repetir: interruptor, não campo obrigatório. O número só existe
   depois de marcar. */
.fin-opcao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 30px;
}

.fin-opcao[hidden] { display: none; }

.fin-opcao-rotulo {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  color: var(--cor-texto);
  cursor: pointer;
  user-select: none;
}

.fin-opcao-check {
  width: 16px;
  height: 16px;
  accent-color: var(--cor-acao);
  cursor: pointer;
  flex-shrink: 0;
}

.fin-opcao-valor {
  display: flex;
  align-items: center;
  gap: 7px;
}

/* `display: flex` vence o atributo `hidden`, então sem esta linha o campo de
   número aparecia com o interruptor desligado — que é exatamente o "parece
   obrigatório" que o interruptor existe pra resolver. Mesma armadilha do
   `.fin-ficha-bloco[hidden]`. */
.fin-opcao-valor[hidden] { display: none; }

.fin-opcao-numero {
  width: 68px;
  height: var(--alt-controle-sm);
  padding: 0 10px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-controle);
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: inherit;
  font-size: 13.5px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.fin-opcao-numero:focus {
  outline: none;
  border-color: var(--cor-acao);
}

.fin-opcao-sufixo {
  font-size: 12.5px;
  color: var(--cor-texto-suave);
}

/* O que a escolha vai fazer, com os números já calculados. É dado derivado
   do que foi digitado, não explicação do sistema. */
.fin-ficha-resumo {
  font-size: 12.5px;
  color: var(--cor-acao);
  font-variant-numeric: tabular-nums;
  padding: 2px 0 0 25px;
}

.fin-ficha-resumo[hidden] { display: none; }

/* ===== Campo de valor do Planejamento ===== */
/* Toda edição de dinheiro acontece aqui (07/08/26): o número mora onde é
   comparado com o real. O ⚙️ Configurar não tem mais cifrão nenhum. */
.fin-valor-input {
  width: 100%;
  max-width: 120px;
  height: 26px;
  padding: 0 8px;
  border: 1px solid var(--cor-borda);
  border-radius: 7px;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: inherit;
  font-size: 12.5px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.fin-valor-input:hover { border-color: var(--cor-texto-suave); }

.fin-valor-input:focus {
  outline: none;
  border-color: var(--cor-acao);
  background: var(--cor-painel);
}

.fin-valor-input::placeholder { font-size: 10.5px; }

/* Na tabela a célula é só o campo, alinhado com os números das outras colunas */
.fin-tabela .fin-valor-input {
  max-width: 108px;
  margin-left: auto;
  display: block;
}

/* No card o campo ganha rótulo, porque não existe cabeçalho de coluna */
.fin-card-campo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 4px;
  font-size: 11px;
  color: var(--cor-texto-suave);
}

.fin-card-campo .fin-valor-input { max-width: 96px; }

/* ===== Lateral compacta (07/08/26) ===== */
/* Nome e valor na MESMA linha. Em linhas separadas cada conta custava 57px e
   as seis comiam a coluna — não sobrava espaço pra dívidas e investimentos. */
.fin-lat-item {
  padding: 6px 10px 7px 10px;
  gap: 3px;
}

.fin-lat-topo {
  gap: 6px;
  min-width: 0;
}

.fin-lat-topo .fin-lat-valor {
  margin-left: auto;
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Conta zerada some mais ainda: já era uma linha, agora fica só menor */
.fin-lat-zerada { flex-direction: column; padding: 4px 10px 5px 10px; }
.fin-lat-zerada .fin-lat-valor { font-size: 11.5px; font-weight: 500; }

/* O ✎ não empurra o valor: ele entra no lugar do respiro */
.fin-lat-editar { margin-left: 2px; }

.fin-lat-rodape { margin-top: 3px; }

/* Dívida e investimento: alvo + quanto falta + barra */
.fin-lat-objetivo { cursor: default; }

/* ===== Modo privacidade ===== */
/* Borra todo valor de uma vez. É CSS, não troca de texto: pega lista, totais,
   lateral, gráficos e os campos do Planejamento sem cada tela precisar saber
   que o modo existe. */
.fin-privado .fin-numero-valor,
.fin-privado .fin-item-valor,
.fin-privado .fin-mes-grupo-soma,
.fin-privado .fin-previsto-chip,
.fin-privado .fin-lat-valor,
.fin-privado .fin-lat-soma-valor,
.fin-privado .fin-lat-rodape,
.fin-privado .fin-lat-pagar,
.fin-privado .fin-lat-detalhe,
.fin-privado .fin-card-valor,
.fin-privado .fin-card-linha,
.fin-privado .fin-card-detalhe,
.fin-privado .fin-plano-valor,
.fin-privado .fin-grupo-total,
.fin-privado .fin-tab-num,
.fin-privado .fin-tab-zero,
.fin-privado .fin-valor-input,
.fin-privado .fin-gr-valor,
.fin-privado .fin-gr-plot,
.fin-privado .fin-gr-trilho {
  filter: blur(6px);
  user-select: none;
  transition: filter 0.15s;
}

/* Passar o mouse revela só aquele valor — pra conferir um número sem desligar
   o modo inteiro. */
.fin-privado .fin-lat-item:hover .fin-lat-valor,
.fin-privado .fin-lat-item:hover .fin-lat-rodape,
.fin-privado .fin-item:hover .fin-item-valor,
.fin-privado .fin-numero:hover .fin-numero-valor,
.fin-privado .fin-card:hover .fin-card-valor,
.fin-privado .fin-valor-input:focus {
  filter: none;
}

.fin-btn-privado {
  width: var(--alt-controle-sm);
  height: var(--alt-controle-sm);
  padding: 0;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-controle);
  background: var(--cor-painel);
  font-family: inherit;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}

.fin-btn-privado:hover { border-color: var(--cor-acao); }

.fin-btn-privado.ativo {
  border-color: var(--cor-acao);
  background: color-mix(in srgb, var(--cor-acao) 14%, var(--cor-painel));
}

/* Aperto fino: com 4 blocos na coluna, cada px conta */
.fin-lat-lista { gap: 3px; }
.fin-lat-titulo:not(:first-child) { margin-top: 13px; }

.fin-lat-soma {
  margin-top: 7px;
  padding: 7px 10px;
}

.fin-lat-soma-valor { font-size: 15px; }

/* ===== Escolher ícone e cor no pop-up de cadastro (07/08/26) ===== */
/* Grade clicável no lugar de digitar emoji e do seletor de cor do sistema. */
.fin-escolha {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.fin-escolha-grade {
  display: grid;
  gap: 4px;
  flex: 1;
  min-width: 0;
  max-height: 132px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-controle);
  background: var(--cor-fundo);
}

/* Ícone é uma coluna de BLOCOS por assunto; cor continua uma grade só */
.fin-emoji-grade {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 190px;
}

.fin-emoji-grupo {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.fin-emoji-grupo-nome {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cor-texto-suave);
  padding-left: 2px;
}

.fin-emoji-linha {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 3px;
}

.fin-cor-grade { grid-template-columns: repeat(auto-fill, minmax(26px, 1fr)); }

.fin-escolha-btn {
  height: 28px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.06s;
}

.fin-escolha-btn:hover {
  background: var(--cor-painel);
  border-color: var(--cor-borda);
}

.fin-escolha-btn:active { transform: scale(0.92); }

.fin-escolha-btn.ativo {
  border-color: var(--cor-acao);
  background: color-mix(in srgb, var(--cor-acao) 18%, transparent);
}

/* Na cor o botão É a cor, então o "escolhido" vira anel em volta */
.fin-cor-btn {
  height: 24px;
  border-radius: 6px;
  border: 2px solid transparent;
}

.fin-cor-btn:hover { border-color: var(--cor-texto-suave); }

.fin-cor-btn.ativo {
  border-color: var(--cor-texto);
  box-shadow: 0 0 0 2px var(--cor-fundo) inset;
  background-clip: padding-box;
}

/* Campo livre ao lado: emoji que não está na grade, ou cor exata */
.fin-escolha-livre {
  width: 54px;
  height: var(--alt-controle-sm);
  padding: 0 6px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-controle);
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: inherit;
  font-size: 15px;
  text-align: center;
  flex-shrink: 0;
}

.fin-escolha-livre::placeholder { font-size: 10.5px; }

.fin-escolha-livre:focus,
.fin-cor-livre:focus {
  outline: none;
  border-color: var(--cor-acao);
}

.fin-cor-livre {
  width: 40px;
  height: var(--alt-controle-sm);
  padding: 2px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-controle);
  background: var(--cor-fundo);
  cursor: pointer;
  flex-shrink: 0;
}

/* ===== Viagem ===== */
.via-nome { min-width: 0; text-transform: none; }

.via-sub {
  font-size: 12.5px;
  color: var(--cor-texto-suave);
}

.via-card .fin-card-titulo { min-height: 0; font-size: 14px; color: var(--cor-texto); }

.via-badge-em-curso { color: var(--cor-baixa); border-color: var(--cor-baixa); }
.via-badge-planejada { color: var(--cor-acao); border-color: var(--cor-acao); }

/* A linha do tempo: um risco vertical liga os passos, que é o que faz duas
   listas (trecho e estadia) lerem como um roteiro só. */
.via-linha {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  padding-left: 4px;
}

.via-passo {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto 26px;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--cor-painel);
  border: 1px solid var(--cor-borda);
  border-left: 3px solid var(--cor-borda);
  border-radius: calc(var(--raio-controle) + 1px);
  position: relative;
}

/* Trecho é movimento, estadia é parada — a cor da borda separa os dois sem
   precisar ler. */
.via-trecho { border-left-color: var(--cor-acao); }
.via-estadia { border-left-color: var(--cor-baixa); }

.via-passo.clicavel { cursor: pointer; }
.via-passo.clicavel:hover { border-color: var(--cor-acao); }

.via-passo-icone {
  font-size: 19px;
  line-height: 1;
  text-align: center;
}

.via-passo-centro {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.via-passo-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 14px;
}

.via-passo-meta,
.via-passo-nota {
  font-size: 11.5px;
  color: var(--cor-texto-suave);
}

.via-passo-nota { font-style: italic; }

.via-passo-dir {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}

.via-passo-data {
  font-size: 12px;
  color: var(--cor-texto-suave);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.via-passo-gratis {
  font-size: 11px;
  color: var(--cor-texto-suave);
}

/* O valor é botão: clicar marca como pago. Mexe no `realizado` do lançamento,
   então o Financeiro sabe na mesma hora. */
.via-valor {
  height: 24px;
  padding: 0 9px;
  border: 1px dashed var(--cor-alta);
  border-radius: 999px;
  background: transparent;
  color: var(--cor-alta);
  font-family: inherit;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.via-valor.pago {
  border-style: solid;
  border-color: var(--cor-baixa);
  color: var(--cor-baixa);
  background: color-mix(in srgb, var(--cor-baixa) 12%, transparent);
}

.via-valor:hover { background: color-mix(in srgb, currentColor 14%, transparent); }

/* Situação da candidatura: voluntariado se candidata e espera */
.via-sit-confirmado { color: var(--cor-baixa); border-color: var(--cor-baixa); }
.via-sit-recusado { color: var(--cor-alta); border-color: var(--cor-alta); }
.via-sit-enviei,
.via-sit-respondeu { color: var(--cor-media, #f59e0b); border-color: var(--cor-media, #f59e0b); }
.via-sit-reservado,
.via-sit-feito { color: var(--cor-baixa); border-color: var(--cor-baixa); }

.via-incluso {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.via-incluso-escolha {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px 10px;
}

.via-incluso-op {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--cor-texto-suave);
  cursor: pointer;
}

.via-incluso-op input { width: 15px; height: 15px; accent-color: var(--cor-acao); cursor: pointer; }

.via-excluir { margin-right: auto; }
.via-excluir:hover { color: var(--cor-alta); border-color: var(--cor-alta); }

/* ===== Painel da viagem na coluna da direita (08/08/26) ===== */
/* Aparece só com uma viagem aberta. Rota em cima (bater o olho na sequência),
   o que falta embaixo (o que exige decisão). Escolha do Igor: os dois juntos. */
.via-lat-secao { margin-bottom: 16px; }
.via-lat-secao:last-child { margin-bottom: 0; }

.via-lat-sub {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cor-texto-suave);
  margin-bottom: 8px;
}

.via-lat-rota {
  list-style: none;
  display: flex;
  flex-direction: column;
}

/* Trilho contínuo com ponto — a mesma leitura de sequência da linha do tempo
   do Mercado, mas aqui é a ordem dos destinos. */
.via-lat-rota li {
  position: relative;
  padding: 0 0 12px 16px;
  border-left: 1px solid var(--cor-borda);
}

.via-lat-rota li:last-child { border-left-color: transparent; padding-bottom: 2px; }

.via-lat-rota li::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cor-acao);
}

.via-lat-rota-nome { display: block; font-size: 13px; color: var(--cor-texto); }
.via-lat-rota-meta { display: block; font-size: 11px; color: var(--cor-texto-suave); font-variant-numeric: tabular-nums; }

.via-lat-falta {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Cada pendência é clicável: leva direto pra edição do item que falta. */
.via-lat-pend {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s;
}

.via-lat-pend:hover { background: var(--cor-fundo); }

.via-lat-marca { color: var(--cor-texto-suave); font-size: 12px; flex-shrink: 0; }
.via-lat-pend.alerta .via-lat-marca { color: var(--cor-alta); }

.via-lat-pend-txt { display: flex; flex-direction: column; min-width: 0; }
.via-lat-pend-onde { font-size: 12.5px; color: var(--cor-texto); }
.via-lat-pend-nota { font-size: 11px; color: var(--cor-texto-suave); }

.via-lat-ok { font-size: 12.5px; color: var(--cor-baixa); }
.via-lat-vazio { font-size: 12px; color: var(--cor-texto-suave); }
.via-lat-mais { font-size: 11px; color: var(--cor-texto-suave); margin: 6px 0 0 8px; }

/* Apanhado da LISTA de viagens: cada viagem + quantas pendências, clicável */
.via-lat-resumo { list-style: none; display: flex; flex-direction: column; gap: 5px; }

.via-lat-vg {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border: 1px solid var(--cor-borda);
  border-radius: 9px;
  background: var(--cor-fundo);
  cursor: pointer;
  transition: border-color 0.12s;
}
.via-lat-vg:hover { border-color: var(--cor-acao); }

.via-lat-vg-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.via-lat-vg-nome {
  font-size: 12.5px;
  color: var(--cor-texto);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.via-lat-vg-sub { font-size: 11px; color: var(--cor-texto-suave); }
.via-lat-vg.ok .via-lat-vg-sub { color: var(--cor-baixa); }

/* O contador de pendências: bolinha na cor de alerta */
.via-lat-vg-num {
  flex-shrink: 0;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--cor-alta) 20%, transparent);
  color: var(--cor-alta);
  font-size: 11.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}

/* ===== Notas & Links na lateral (08/08/26) ===== */
/* Painel da coluna direita da Agenda (dia + gerais) e dos Projetos. */
.notas-lateral { display: block; }

.nl-topo {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--cor-texto);
  margin: 0 0 10px 2px;
}

.nl-bloco { margin-bottom: 16px; }
.nl-bloco:last-child { margin-bottom: 0; }

.nl-bloco-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
}

.nl-bloco-titulo {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cor-texto-suave);
}

.nl-bloco-add { display: flex; gap: 4px; }

.nl-add {
  height: 22px;
  padding: 0 7px;
  border: 1px solid var(--cor-borda);
  border-radius: 6px;
  background: var(--cor-painel);
  color: var(--cor-texto-suave);
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}
.nl-add:hover { border-color: var(--cor-acao); color: var(--cor-acao); }

.nl-lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Cartão de nota: clicável, abre o editor */
.nl-item {
  padding: 8px 10px;
  border: 1px solid var(--cor-borda);
  border-left: 3px solid var(--cor-acao);
  border-radius: 8px;
  background: var(--cor-fundo);
  cursor: pointer;
  transition: border-color 0.12s;
}
.nl-item:hover { border-color: var(--cor-acao); }

.nl-item-titulo { display: block; font-size: 12.5px; font-weight: 600; color: var(--cor-texto); }
.nl-item-corpo {
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--cor-texto-suave);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Cartão de link */
.nl-link {
  padding: 8px 10px;
  border: 1px solid var(--cor-borda);
  border-left: 3px solid var(--cor-acao-2, #8b5cf6);
  border-radius: 8px;
  background: var(--cor-fundo);
  cursor: pointer;
}
.nl-link:hover { border-color: var(--cor-acao); }

.nl-link-linha { display: flex; align-items: center; gap: 6px; }
.nl-link-alvo {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  color: var(--cor-acao);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nl-link-alvo:hover { text-decoration: underline; }
.nl-link-desc { margin-top: 2px; font-size: 11px; color: var(--cor-texto-suave); }

.nl-editar {
  opacity: 0;
  border: none;
  background: none;
  color: var(--cor-texto-suave);
  font-size: 12px;
  cursor: pointer;
  flex-shrink: 0;
}
.nl-link:hover .nl-editar { opacity: 1; }
.nl-editar:hover { color: var(--cor-acao); }

/* Cabeçalho do cartão de nota: título ocupa a linha, 📌 na ponta */
.nl-item-linha { display: flex; align-items: center; gap: 6px; }
.nl-item-linha .nl-item-titulo {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Etiqueta do projeto como 1ª linha do cartão (nota/link de projeto fixado) */
.nl-item > .nl-etiqueta,
.nl-link > .nl-etiqueta {
  display: inline-block;
  margin-bottom: 4px;
}

/* 📌 Fixar: escondido (cinza) e só surge no hover; fixado fica sempre visível */
.nl-fixar {
  opacity: 0;
  border: none;
  background: none;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  filter: grayscale(1);
  transition: opacity 0.12s;
}
.nl-item:hover .nl-fixar,
.nl-link:hover .nl-fixar { opacity: 0.55; }
.nl-fixar.ativo { opacity: 1; filter: none; }

.nl-vazio { font-size: 11.5px; color: var(--cor-texto-suave); margin: 2px 0 0 2px; }

/* Cabeçalho do painel: adicionar (esq) + ver todas (dir) + busca embaixo */
.nl-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.nl-add-grupo { display: flex; gap: 4px; }

.nl-vertodas {
  border: none;
  background: none;
  color: var(--cor-acao);
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
  padding: 2px 2px;
  white-space: nowrap;
}
.nl-vertodas:hover { text-decoration: underline; }

.nl-busca {
  width: 100%;
  height: 30px;
  padding: 0 10px;
  margin-bottom: 12px;
  border: 1px solid var(--cor-borda);
  border-radius: 7px;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: inherit;
  font-size: 12.5px;
}
.nl-busca:focus { outline: none; border-color: var(--cor-acao); }

.nl-lista-box { display: block; }

/* Etiqueta de "onde este item vive" (só na tela Ver todas) */
.nl-etiqueta {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cor-texto-suave);
  border: 1px solid var(--cor-borda);
  border-radius: 999px;
  padding: 1px 8px;
  white-space: nowrap;
}

/* Ver todas (modal): lista rolável, cada linha com título + etiqueta */
.nl-todas { max-width: min(520px, 94vw); }
.nl-todas .modal-form { gap: 10px; min-width: 0; }
.nl-todas-box { max-height: 60vh; overflow-y: auto; }
.nl-todas-box .nl-lista { gap: 6px; }
/* No "ver todas" o 📌 fica sempre visível (cinza = solto, colorido = fixado) */
.nl-todas-box .nl-fixar { opacity: 1; }
.nl-todas-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.nl-todas-titulo {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: var(--cor-texto);
}
.nl-todas .nl-busca { margin-bottom: 4px; }

/* Editor (modal) de nota/link. Passo 18: agora combina com .fin-ficha, que
   tem sua própria max-width (640px, pra fichas largas de 2-3 colunas) —
   ".nota-editor.fin-ficha" (2 classes) tem mais especificidade que
   ".fin-ficha" sozinha, então o formulário mais simples de Notas continua
   compacto. O gap entre blocos também saiu daqui: quem dá o respiro agora é
   o padding+borda de cada .fin-ficha-bloco, igual nos outros 5 módulos. */
.nota-editor.fin-ficha { max-width: 460px; }
.nl-vinculo-sel {
  height: var(--alt-controle);
  padding: 0 12px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-controle);
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: inherit;
  font-size: 14px;
  width: 100%;
}
.nota-editor .editor-rico { margin: 0; }

/* Excluir dentro do editor: discreto, à esquerda */
.btn-excluir-texto {
  margin-right: auto;
  height: var(--alt-controle);
  padding: 0 14px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-controle);
  background: transparent;
  color: var(--cor-texto-suave);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}
.btn-excluir-texto:hover { border-color: var(--cor-alta); color: var(--cor-alta); }

/* Tela estreita: o passo empilha em vez de espremer */
@media (max-width: 640px) {
  .via-passo {
    grid-template-columns: 28px minmax(0, 1fr) 26px;
    gap: 8px;
  }
  .via-passo-dir {
    grid-column: 2 / 4;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* ===== Fichas em DUAS COLUNAS (07/08/26) ===== */
/* Empilhado, o trecho da Viagem passava de 880px e exigia rolar pra achar o
   botão de salvar. Campo que precisa da linha inteira leva `.largo`. */
/* Quem manda na largura é o <dialog>, NÃO o form. A primeira versão pôs
   `min-width: 620px` no form e deixou o `max-width: 440px` do `.modal` de pé:
   o formulário ficava 180px mais largo que a caixa, e a ficha abria com barra
   de rolagem horizontal, coluna da direita cortada e o botão de cancelar pela
   metade. Largura de caixa é da caixa. */
/* 640px com COLUNAS AUTOMÁTICAS (08/08/26): a ficha de estadia tem 15 campos e
   a 520px/2-colunas passava de 1100px de altura — rolar até o botão de salvar.
   `auto-fit minmax(185px)` deixa a MESMA classe embalar 3 colunas quando a
   ficha é larga (estadia, trecho) e cair pra 2 quando é curta (saída, mercado):
   a de estadia perde ~3 linhas de altura sem espremer campo, e a de saída não
   fica esticada porque cada campo ainda tem ~190px. Foi por isso que 520 existiu
   antes — agora quem limita a largura do campo é a coluna, não a caixa. */
.fin-ficha { max-width: min(640px, 94vw); }
.fin-ficha .modal-form { min-width: 0; }

.fin-ficha-bloco {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: 9px 12px;
  align-items: start;
}

/* Rótulo do bloco, campo largo, opções e resumo atravessam as duas colunas */
.fin-ficha-bloco-nome,
.fin-ficha-bloco > .modal-campo.largo,
.fin-ficha-bloco > .fin-ficha-resumo,
.fin-ficha-bloco > .fin-opcao,
.fin-ficha-bloco > .editor-rico {
  grid-column: 1 / -1;
}

/* Campo escondido pela condição não pode deixar buraco na grade */
.fin-ficha-bloco > [hidden] { display: none; }

/* `display: grid` vence o `hidden` do atributo — sem esta linha o bloco de
   Voluntariado continuava ocupando altura numa estadia paga. */
.fin-ficha-bloco[hidden] { display: none; }

/* Estreito: uma coluna só, senão os campos ficam ilegíveis. O auto-fit já
   tende a isso sozinho; o breakpoint é a garantia embaixo de 420px. */
@media (max-width: 420px) {
  .fin-ficha-bloco { grid-template-columns: 1fr; }
}

/* ===== Mercado ===== */
.mer-lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 10px;
}

.mer-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  background: var(--cor-painel);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-controle);
  transition: opacity 0.15s, border-color 0.15s;
}

/* Já está no carrinho: recua sem sumir, pra dar pra desmarcar se errou */
.mer-item.comprado { opacity: 0.45; }
.mer-item.comprado .mer-item-nome { text-decoration: line-through; }

.mer-item-centro {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.mer-item-nome {
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mer-item-meta {
  font-size: 11px;
  color: var(--cor-texto-suave);
  white-space: nowrap;
}

.mer-qtd {
  width: 62px;
  height: 26px;
  padding: 0 8px;
  border: 1px solid var(--cor-borda);
  border-radius: 7px;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: inherit;
  font-size: 12px;
  text-align: center;
  flex-shrink: 0;
}

.mer-qtd:focus { outline: none; border-color: var(--cor-acao); }
.mer-qtd::placeholder { font-size: 10.5px; }

.mer-badge-lista { color: var(--cor-acao); border-color: var(--cor-acao); }

/* ===== Treinos ===== */
.tre-lista,
.tre-diario {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

.tre-ex {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  background: var(--cor-painel);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-controle);
}

.tre-ex.clicavel { cursor: pointer; }
.tre-ex.clicavel:hover { border-color: var(--cor-acao); }

.tre-ex-nome { font-size: 13.5px; }

.tre-ex-serie {
  font-size: 12.5px;
  color: var(--cor-texto-suave);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* A carga é o número que se procura antes de começar a série */
.tre-ex-carga {
  min-width: 62px;
  text-align: right;
  font-size: 14px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--cor-baixa);
  white-space: nowrap;
}

.tre-ex-carga.vazia { color: var(--cor-borda); font-weight: 400; }

.tre-sessao {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--cor-painel);
  border: 1px solid var(--cor-borda);
  border-left: 3px solid var(--cor-item, var(--cor-borda));
  border-radius: var(--raio-controle);
}

/* Registrar treino: uma linha por exercício, com a carga já preenchida */
.tre-reg {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 3px 0;
}

.tre-reg-nome {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  cursor: pointer;
  min-width: 0;
}

.tre-reg-nome span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tre-reg-peso {
  width: 76px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--cor-borda);
  border-radius: 7px;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: inherit;
  font-size: 13px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.tre-reg-peso:focus { outline: none; border-color: var(--cor-acao); }

/* ===== Leitura ===== */
.lei-card .fin-card-titulo { min-height: 2.4em; color: var(--cor-texto); }

.lei-avanco {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 6px;
  font-size: 11px;
  color: var(--cor-texto-suave);
}

.lei-pagina {
  width: 74px;
  height: 26px;
  padding: 0 8px;
  border: 1px solid var(--cor-borda);
  border-radius: 7px;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: inherit;
  font-size: 12.5px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.lei-pagina:focus { outline: none; border-color: var(--cor-acao); }

/* Cor da categoria: quadradinho no cabeçalho e faixa na linha do item.
   É o que faz achar a seção sem ler o nome. */
.mer-cor {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}

.mer-item {
  border-left: 3px solid var(--cor-item, var(--cor-borda));
}

.mer-item:hover {
  border-color: color-mix(in srgb, var(--cor-item, var(--cor-acao)) 45%, var(--cor-borda));
  border-left-color: var(--cor-item, var(--cor-acao));
}

/* ===== Catálogo em grade de pílulas (07/08/26) ===== */
/* A lista vertical gastava 1084px de largura por item e dava 14 telas de
   rolagem. Catálogo se varre, não se lê linha a linha. */
.mer-secao { margin-bottom: 18px; }

.mer-secao-cab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 2px 8px 2px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--cor-borda);
}

.mer-secao-nome {
  flex: 1;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cor-texto);
}

.mer-secao-conta {
  font-size: 11.5px;
  color: var(--cor-texto-suave);
  font-variant-numeric: tabular-nums;
}

/* Quantos já estão na lista: só ganha cor quando há algo marcado */
.mer-secao-conta.tem {
  color: var(--cor-item, var(--cor-acao));
  font-weight: 700;
}

.mer-grade {
  display: grid;
  /* 148px cortava nomes de categoria mais longos (ex.: "Pipoca de Micro-
     ondas") sem nenhuma pista de que havia mais texto. Mínimo maior reduz
     os casos de corte; a pílula continua com overflow:ellipsis como reserva
     pros nomes realmente longos. */
  grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
  gap: 6px;
}

/* O alvo de clique é a pílula inteira (~148×34), não um checkbox de 20px */
.mer-pilula-caixa { position: relative; }

.mer-pilula {
  width: 100%;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-controle);
  background: var(--cor-painel);
  color: var(--cor-texto-suave);
  font-family: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.06s;
}

.mer-pilula:hover {
  border-color: var(--cor-item, var(--cor-acao));
  color: var(--cor-texto);
}

.mer-pilula:active { transform: scale(0.97); }

/* Na lista de compras: preenchida na cor da categoria */
.mer-pilula.ativa {
  background: var(--cor-item, var(--cor-acao));
  border-color: var(--cor-item, var(--cor-acao));
  color: #fff;
  font-weight: 600;
}

.mer-pilula:focus-visible {
  outline: 2px solid var(--cor-acao);
  outline-offset: 2px;
}

.mer-resumo {
  font-size: 12.5px;
  color: var(--cor-texto-suave);
  margin-bottom: 14px;
  padding: 0 2px;
}

.mer-resumo.tem { color: var(--cor-acao); font-weight: 600; }

/* Nome da seção do catálogo é renomeável no clique */
.mer-secao-nome.clicavel {
  cursor: text;
  border-radius: 5px;
  padding: 2px 5px;
  margin-left: -5px;
  transition: background 0.12s;
}

.mer-secao-nome.clicavel:hover { background: var(--cor-painel); }

.mer-secao-input {
  flex: 1;
  height: 28px;
  padding: 0 6px;
  border: 1px solid var(--cor-acao);
  border-radius: 5px;
  background: var(--cor-painel);
  color: var(--cor-texto);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.mer-secao-input:focus { outline: none; }

/* Editar item: o ✎ só aparece no hover, senão a grade de 279 vira uma parede
   de controles. Mesmo padrão da lateral do Financeiro. */
.mer-lapis {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 5px;
  background: var(--cor-fundo);
  color: var(--cor-texto-suave);
  font-family: inherit;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s, background 0.12s, color 0.12s;
}

.mer-pilula-caixa:hover .mer-lapis,
.mer-lapis:focus-visible { opacity: 1; }

.mer-lapis:hover { color: var(--cor-acao); }

/* Na pílula marcada o fundo é a cor cheia, então o lápis inverte */
.mer-pilula.ativa + .mer-lapis {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

/* Abre espaço pro lápis não cobrir o fim do nome */
.mer-pilula-caixa:hover .mer-pilula { padding-right: 30px; }

/* ===== Histórico de compras (lateral do Mercado) ===== */
/* ===== Histórico de compras: LINHA DO TEMPO (07/08/26) ===== */
/* A versão anterior era um card por compra com data + contagem + uma tira
   colorida por categoria + três botões sempre visíveis. Quatro blocos de
   informação numa coluna estreita pra dizer "fui ao mercado". Compra passada
   se consulta de vez em quando: de relance só interessa QUANDO e QUANTO. */
.mer-tl {
  display: flex;
  flex-direction: column;
}

.mer-tl-mes {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cor-texto-suave);
  margin: 12px 0 6px;
}

.mer-tl-mes:first-child { margin-top: 2px; }

/* O trilho é a borda esquerda do item, e o ponto é o ::before do cabeçalho —
   assim a linha é contínua entre compras sem precisar de elemento nenhum. */
.mer-tl-item {
  position: relative;
  padding-left: 16px;
  border-left: 1px solid var(--cor-borda);
}

.mer-tl-item:last-child { border-left-color: transparent; }

.mer-tl-cab {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 0 8px;
  width: 100%;
  padding: 6px 0;
  border: none;
  background: none;
  color: inherit;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.mer-tl-cab::before {
  content: "";
  position: absolute;
  left: -21px;
  top: 12px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cor-painel);
  border: 1.5px solid var(--cor-borda);
  transition: border-color 0.12s, background 0.12s;
}

.mer-tl-cab:hover::before,
.mer-tl-item.aberta .mer-tl-cab::before {
  border-color: var(--cor-acao);
  background: var(--cor-acao);
}

.mer-tl-data {
  font-size: 12px;
  color: var(--cor-texto-suave);
  font-variant-numeric: tabular-nums;
}

.mer-tl-valor {
  font-size: 13.5px;
  color: var(--cor-texto);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Some pra segunda linha, abaixo da data: é o detalhe, não a manchete */
.mer-tl-qtd {
  grid-column: 1 / -1;
  font-size: 11px;
  color: var(--cor-texto-suave);
}

.mer-tl-corpo { display: none; padding-bottom: 8px; }
.mer-tl-item.aberta .mer-tl-corpo { display: block; }

.mer-compra-acoes {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 7px;
}

.mer-compra-btn {
  height: 24px;
  padding: 0 9px;
  border: 1px solid var(--cor-borda);
  border-radius: 6px;
  background: var(--cor-painel);
  color: var(--cor-texto-suave);
  font-family: inherit;
  font-size: 11.5px;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}

.mer-compra-btn:hover { border-color: var(--cor-acao); color: var(--cor-acao); }
.mer-compra-acoes .btn-excluir { margin-left: auto; }

/* O que tinha na compra: só existe com o item aberto (o pai já esconde) */
.mer-compra-itens {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 2px;
  padding-top: 7px;
  border-top: 1px dashed var(--cor-borda);
  font-size: 11.5px;
  color: var(--cor-texto-suave);
}

/* A cor da categoria vive AQUI, dentro do aberto: fechada, a compra não
   precisa dela — quem abre é que quer saber o que tinha. */
.mer-compra-itens li {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ==========================================================================
   Agenda: alternador de modo · rascunho do dia · linha do tempo 24h · mês
   ========================================================================== */

/* Alternador Lista · Dia · Mês (controle segmentado no topo da Agenda) */
.agenda-modos {
  display: inline-flex;
  gap: 2px;
  margin-top: 12px;
  padding: 3px;
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: 10px;
}
.agenda-modo-btn {
  border: none;
  background: none;
  color: var(--cor-texto-suave);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.agenda-modo-btn:hover { color: var(--cor-texto); }
.agenda-modo-btn.ativa {
  background: var(--cor-painel);
  color: var(--cor-acao);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* Rascunho livre do dia (textarea que salva sozinho) */
.rascunho-secao { margin-bottom: 24px; }
.rascunho-campo {
  width: 100%;
  min-height: 68px;
  resize: vertical;
  padding: 10px 12px;
  border: 1px solid var(--cor-borda);
  border-radius: 9px;
  background: var(--cor-painel);
  color: var(--cor-texto);
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.5;
}
.rascunho-campo:focus { outline: none; border-color: var(--cor-acao); }
.rascunho-campo::placeholder { color: var(--cor-texto-suave); }

.agenda-vazio-modo {
  color: var(--cor-texto-suave);
  font-size: 14px;
  padding: 18px 4px;
}

/* ----- Visão Dia: linha do tempo de 24h ----- */
.tl-trilho {
  position: relative;
  margin: 4px 0 20px;
  border: 1px solid var(--cor-borda);
  border-radius: 10px;
  background: var(--cor-painel);
  overflow: hidden;
}
/* Linha de cada hora (régua) + rótulo no gutter esquerdo */
.tl-hora {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 1px solid var(--cor-borda);
}
.tl-hora:first-child { border-top: none; }
.tl-hora-rot {
  position: absolute;
  left: 0;
  top: -7px;
  width: 46px;
  text-align: right;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: var(--cor-texto-suave);
}
/* Bloco de uma atividade posicionada nas 24h */
.tl-bloco {
  position: absolute;
  box-sizing: border-box;
  padding: 3px 6px;
  border: 1px solid var(--cor-borda);
  border-left: 3px solid var(--cor-acao);
  border-radius: 6px;
  background: var(--cor-fundo);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.12s;
}
.tl-bloco:hover { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14); z-index: 2; }
.tl-bloco.concluida { opacity: 0.55; }
.tl-bloco.concluida .tl-bloco-txt { text-decoration: line-through; }
.tl-bloco-hora {
  display: block;
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--cor-texto-suave);
}
.tl-bloco-txt {
  display: block;
  font-size: 12px;
  color: var(--cor-texto);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Linha do "agora" (só em Hoje) */
.tl-agora {
  position: absolute;
  left: 52px;
  right: 0;
  height: 0;
  border-top: 2px solid var(--cor-alta);
  z-index: 3;
}
.tl-agora::before {
  content: "";
  position: absolute;
  left: -4px;
  top: -4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cor-alta);
}
/* Faixa "sem horário" abaixo do trilho */
.tl-sem-horario {
  border: 1px dashed var(--cor-borda);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 16px;
}
.tl-sem-titulo {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cor-texto-suave);
  margin-bottom: 8px;
}
.tl-sem-itens { display: flex; flex-wrap: wrap; gap: 6px; }
.tl-chip {
  padding: 4px 9px;
  border: 1px solid var(--cor-borda);
  border-left: 3px solid var(--cor-acao);
  border-radius: 7px;
  background: var(--cor-fundo);
  font-size: 12px;
  color: var(--cor-texto);
}
.tl-chip.concluida { opacity: 0.55; text-decoration: line-through; }

/* ----- Visão Mês: grade do mês ----- */
.mes-topo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 8px 0 14px;
}
.mes-seta {
  width: 30px;
  height: 30px;
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  background: var(--cor-painel);
  color: var(--cor-texto-suave);
  font-size: 16px;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}
.mes-seta:hover { border-color: var(--cor-acao); color: var(--cor-acao); }
.mes-titulo {
  font-size: 15px;
  font-weight: 700;
  color: var(--cor-texto);
  min-width: 172px;
  text-align: center;
  text-transform: capitalize;
}
.mes-grade {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.mes-cab {
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cor-texto-suave);
  padding-bottom: 2px;
}
.mes-cel {
  position: relative;
  min-height: 74px;
  padding: 6px;
  border: 1px solid var(--cor-borda);
  border-radius: 9px;
  background: var(--cor-painel);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.mes-cel:hover { border-color: var(--cor-acao); }
.mes-cel.vazia {
  background: transparent;
  border-color: transparent;
  cursor: default;
}
.mes-cel.hoje { border-color: var(--cor-acao); }
.mes-cel.selecionado {
  border-color: var(--cor-acao);
  box-shadow: 0 0 0 2px var(--cor-acao) inset;
}
.mes-num {
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--cor-texto);
}
.mes-cel.hoje .mes-num { color: var(--cor-acao); }
.mes-pontos { display: flex; flex-wrap: wrap; gap: 3px; }
.mes-ponto { width: 7px; height: 7px; border-radius: 50%; }
.mes-ponto.feito { background: var(--cor-baixa); }
.mes-ponto.pendente { background: var(--cor-media, #f59e0b); }
.mes-ponto.atrasado { background: var(--cor-alta); }
.mes-mais { font-size: 10px; color: var(--cor-texto-suave); }
.mes-rascunho {
  position: absolute;
  top: 5px;
  right: 6px;
  font-size: 10px;
  color: var(--cor-texto-suave);
}

/* Empilhar as células num mês em telas estreitas mantém 7 colunas, mas menores */
@media (max-width: 640px) {
  .mes-cel { min-height: 56px; padding: 4px; }
  .mes-num { font-size: 12px; }
}

/* ----- Notas: cor (avulsa escolhe) + arrastar pra reordenar ----- */
.nl-cor-linha .nl-cor-input {
  width: 46px;
  height: 30px;
  padding: 2px;
  border: 1px solid var(--cor-borda);
  border-radius: 7px;
  background: var(--cor-fundo);
  cursor: pointer;
}
.nl-cor-hint {
  font-size: 11.5px;
  color: var(--cor-texto-suave);
  margin: 2px 0 0 2px;
}
/* ----- Pop-up de confirmação: opções como cartões (seguro em destaque) -----
   Generalizado do pop-up de excluir diária pra qualquer confirmação do app
   (1 ou 2 opções + Cancelar) — mesma estrutura visual, nome sem "diaria". */
.confirmar-opcoes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 4px 0 8px;
}
.confirmar-op {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  padding: 12px 14px;
  border: 1px solid var(--cor-borda);
  border-radius: 10px;
  background: var(--cor-fundo);
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.12s, box-shadow 0.12s, background 0.12s;
}
.confirmar-op:hover { border-color: var(--cor-acao); }
.confirmar-op.destaque {
  border-color: var(--cor-acao);
  box-shadow: 0 0 0 1px var(--cor-acao) inset;
}
.confirmar-op.destaque:hover { background: color-mix(in srgb, var(--cor-acao) 8%, var(--cor-fundo)); }
.confirmar-op.perigo:hover {
  border-color: var(--cor-alta);
  box-shadow: 0 0 0 1px var(--cor-alta) inset;
}
.confirmar-op-titulo { font-size: 14px; font-weight: 600; color: var(--cor-texto); }
.confirmar-op.perigo .confirmar-op-titulo { color: var(--cor-alta); }
.confirmar-op-sub { font-size: 12px; color: var(--cor-texto-suave); }

/* Feedback de arraste dos cartões de nota/link */
.nl-item.arrastando,
.nl-link.arrastando { opacity: 0.45; }
.nl-item.alvo-arraste,
.nl-link.alvo-arraste { border-color: var(--cor-acao); box-shadow: 0 0 0 2px var(--cor-acao) inset; }
.nl-item[draggable="true"],
.nl-link[draggable="true"] { cursor: grab; }

/* ==========================================================================
   Treinos: avaliação corporal · Estudos: cursos + tarefas
   ========================================================================== */

/* ----- Avaliação corporal (Treinos) ----- */
.tre-aval { margin: 20px 0 8px; }
.tre-aval-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin: 10px 0 14px;
}
.tre-aval-cel {
  position: relative;
  padding: 12px 14px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-controle);
  background: var(--cor-painel);
}
.tre-aval-rot {
  display: block;
  font-size: 11px;
  color: var(--cor-texto-suave);
  margin-bottom: 4px;
}
.tre-aval-num {
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--cor-texto);
}
.tre-aval-delta {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  font-weight: 600;
  vertical-align: middle;
}
.tre-aval-delta.sobe { color: var(--cor-alta); }
.tre-aval-delta.desce { color: var(--cor-baixa); }
.tre-aval-lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tre-aval-lista .tre-sessao.clicavel { cursor: pointer; }
.tre-aval-lista .tre-sessao.clicavel:hover { border-color: var(--cor-acao); }
.tre-lat-aval {
  font-size: 13px;
  font-weight: 600;
  color: var(--cor-texto);
  font-variant-numeric: tabular-nums;
  margin: 2px 0 0;
}

/* ----- Sessão ao vivo (Iniciar/Finalizar) ----- */
.tre-live {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
  border: 1px solid var(--cor-item, var(--cor-acao));
  border-left: 4px solid var(--cor-item, var(--cor-acao));
  border-radius: var(--raio-controle);
  background: color-mix(in srgb, var(--cor-item, var(--cor-acao)) 10%, var(--cor-painel));
}
.tre-live-centro { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tre-live-nome { font-size: 14px; font-weight: 700; color: var(--cor-texto); }
.tre-live-meta { font-size: 11.5px; color: var(--cor-texto-suave); }
.tre-live-tempo {
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--cor-item, var(--cor-acao));
  min-width: 62px;
  text-align: right;
}
.tre-live-fim { flex-shrink: 0; }
/* No painel lateral o banner encolhe (o tempo vai pra baixo) */
.fin-lateral .tre-live { flex-wrap: wrap; margin-bottom: 12px; }
.fin-lateral .tre-live-tempo { min-width: 0; }

/* ----- Seletor de ícone/cor da modalidade ----- */
.tre-icone-grade {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}
.tre-icone-op {
  height: 38px;
  font-size: 18px;
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  background: var(--cor-fundo);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.tre-icone-op:hover { border-color: var(--cor-acao); }
.tre-icone-op.ativo {
  border-color: var(--cor-acao);
  background: color-mix(in srgb, var(--cor-acao) 12%, var(--cor-fundo));
  box-shadow: 0 0 0 1px var(--cor-acao) inset;
}
.tre-cor-input {
  width: 46px;
  height: 34px;
  padding: 2px;
  border: 1px solid var(--cor-borda);
  border-radius: 7px;
  background: var(--cor-fundo);
  cursor: pointer;
}

/* Linha de exercício: o nome ocupa, o resto (badge de treino, séries, carga, ×)
   fica à direita. Vale no treino e no catálogo. */
.tre-ex .via-passo-centro { flex: 1; }
.tre-ex .fin-badge { flex-shrink: 0; }

/* ----- Estudos ----- */
.est-cabecalho {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0 16px;
}
.est-cabecalho .fin-barra { flex: 1; min-width: 120px; }
.est-prog-txt {
  font-size: 12.5px;
  color: var(--cor-texto-suave);
  font-variant-numeric: tabular-nums;
}
/* Passo 11 (decisão Q2): removido o nowrap+ellipsis que cortava nomes de
   curso em telas largas (mais colunas estreitas em 1440px que em 768px).
   Sem essa regra, .est-card volta a usar o padrão de .fin-card-titulo
   (quebra em até 2 linhas), igual Financeiro/Treinos já fazem. */
.est-tarefas {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.est-tarefa {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: var(--cor-painel);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-controle);
}
.est-tarefa .via-passo-centro { flex: 1; min-width: 0; }
.est-tarefa-nome { font-size: 13.5px; }
.est-tarefa.feita .est-tarefa-nome {
  text-decoration: line-through;
  color: var(--cor-texto-suave);
}
.est-check { width: 17px; height: 17px; flex-shrink: 0; cursor: pointer; accent-color: var(--cor-acao); }
.est-tarefa .btn-excluir,
.est-tarefa .nl-editar { flex-shrink: 0; opacity: 0.5; }
.est-tarefa:hover .btn-excluir,
.est-tarefa:hover .nl-editar { opacity: 1; }
.est-lat-lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Sub-abas do curso: Tarefas | Caderno */
.est-subabas {
  display: flex;
  gap: 4px;
  margin: 0 0 14px;
  border-bottom: 1px solid var(--cor-borda);
}
.est-subaba {
  border: none;
  background: none;
  color: var(--cor-texto-suave);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  padding: 8px 14px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.12s, border-color 0.12s;
}
.est-subaba:hover { color: var(--cor-texto); }
.est-subaba.ativa { color: var(--cor-acao); border-bottom-color: var(--cor-acao); }

/* Caderno: páginas de anotação, como uma lista limpa (título · data + prévia) */
.est-caderno {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 760px;
}
.est-nota {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 14px 16px;
  border: 1px solid var(--cor-borda);
  border-radius: 10px;
  background: var(--cor-painel);
  cursor: pointer;
  transition: border-color 0.12s, box-shadow 0.12s, transform 0.06s;
}
.est-nota:hover { border-color: var(--cor-acao); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07); }
.est-nota:active { transform: translateY(1px); }
.est-nota-linha1 { display: flex; align-items: baseline; gap: 12px; }
.est-nota-titulo {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--cor-texto);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.est-nota-data {
  flex-shrink: 0;
  font-size: 11.5px;
  color: var(--cor-texto-suave);
  font-variant-numeric: tabular-nums;
}
.est-nota-corpo {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--cor-texto-suave);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Página do caderno em TELA CHEIA: título grande + escrita ampla, sem caixinha
   (abre no lugar da lista, estilo documento — anotação de estudo é longa). */
.est-pagina {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 820px;
}
.est-pagina-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.est-pagina-titulo {
  width: 100%;
  border: none;
  background: none;
  color: var(--cor-texto);
  font-family: inherit;
  font-size: 26px;
  font-weight: 700;
  padding: 4px 2px;
  outline: none;
}
.est-pagina-titulo::placeholder { color: var(--cor-texto-suave); opacity: 0.55; }
.est-pagina-editor { flex: 1; }
.est-pagina-editor .editor-area {
  min-height: 62vh;
  border: none;
  background: none;
  padding: 4px 2px;
  font-size: 15.5px;
  line-height: 1.75;
}
.est-pagina-editor .editor-area:focus { border: none; }

/* ===== Rotina (hábitos) — js/rotina.js =====
   Reaproveita fin-card/fin-topo/fin-mes-nav/fin-mes-btn/est-subabas/via-passo-*
   do resto do app; só o que é genuinamente novo (cartão semana/mês, matriz
   compacta, bolinhas de dia) ganha classe própria com o prefixo hab-. */
.hab-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px;
  align-items: start;
}

.hab-card { --cor-card: var(--cor-baixa); }
.hab-card.hab-ruim { --cor-card: var(--cor-alta); }

.hab-acoes { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }

/* Reordenar virou arrastar o cartão/linha inteiro (configurarArrasteHabito
   em js/rotina.js), mesmo mecanismo de .tarefa-card em tarefas.js. */
.hab-card { cursor: grab; }
.hab-card.arrastando,
.hab-matriz-linha.arrastando { opacity: 0.4; }
.hab-card.arrasta-alvo,
.hab-matriz-linha.arrasta-alvo { border-color: var(--cor-acao); }
.hab-matriz-linha[draggable="true"] { cursor: grab; }

.hab-card .nl-fixar:not(.ativo),
.hab-card .nl-editar,
.hab-card .btn-excluir,
.hab-matriz-linha .nl-fixar:not(.ativo),
.hab-matriz-linha .nl-editar,
.hab-matriz-linha .btn-excluir { opacity: 0.5; }
.hab-card:hover .nl-fixar,
.hab-card:hover .nl-editar,
.hab-card:hover .btn-excluir,
.hab-matriz-linha:hover .nl-fixar,
.hab-matriz-linha:hover .nl-editar,
.hab-matriz-linha:hover .btn-excluir { opacity: 1; }

.hab-progresso { margin: 6px 0 8px; }
.hab-progresso-txt {
  display: block;
  font-size: 12px;
  color: var(--cor-texto-suave);
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}
.hab-progresso-txt.hab-meta-batida { color: var(--cor-media); font-weight: 600; }

.hab-streak {
  font-size: 11.5px;
  color: var(--cor-texto-suave);
  margin: 0 0 8px;
  font-variant-numeric: tabular-nums;
}
.hab-streak b { color: var(--cor-texto); }

/* Toggle Semana/Mês/Compacta + navegação de período, lado a lado */
.hab-controles {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}
.hab-subabas { border-bottom: none; margin-bottom: 0; }
.hab-periodo { flex-direction: row; }
.hab-periodo-rotulo {
  min-width: 170px;
  font-size: 13.5px;
  font-weight: 650;
  text-align: center;
  text-transform: capitalize;
  color: var(--cor-texto);
}

/* Semana: 7 bolinhas clicáveis, uma por dia */
.hab-semana {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.hab-dia { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.hab-dia-rot {
  font-size: 9.5px;
  color: var(--cor-texto-suave);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.hab-dia-num { font-size: 9.5px; color: var(--cor-texto-suave); font-variant-numeric: tabular-nums; }

.hab-bolha {
  width: 100%;
  aspect-ratio: 1;
  max-width: 32px;
  border-radius: 50%;
  border: 2px solid var(--cor-borda);
  background: var(--cor-fundo);
  color: transparent;
  font-family: inherit;
  padding: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.hab-bolha:hover { border-color: var(--cor-acao); }
.hab-bolha.on { background: var(--cor-baixa); border-color: var(--cor-baixa); color: #fff; }
.hab-bolha.on.hab-ruim { background: var(--cor-alta); border-color: var(--cor-alta); }
.hab-bolha.hoje { box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor-acao) 30%, transparent); }
.hab-bolha.futuro { opacity: 0.45; pointer-events: none; }
.hab-bolha.pre { opacity: 0.2; cursor: default; pointer-events: none; }

/* Mês: grade de células por dia (repete o cabeçalho da semana por cartão,
   igual ao protótipo — cada cartão é autossuficiente). */
.hab-mes-grade {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  margin-top: 4px;
}
.hab-mes-dow {
  font-size: 10px;
  color: var(--cor-texto-suave);
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding-bottom: 2px;
}
.hab-mes-cel {
  aspect-ratio: 1;
  border-radius: 8px;
  border: 1.5px solid var(--cor-borda);
  background: var(--cor-fundo);
  color: var(--cor-texto-suave);
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.hab-mes-cel.vazia { background: transparent; border: 0; cursor: default; }
.hab-mes-cel:hover:not(.vazia):not(.pre) { border-color: var(--cor-acao); }
.hab-mes-cel.on { background: var(--cor-baixa); border-color: var(--cor-baixa); color: #fff; }
.hab-mes-cel.on.hab-ruim { background: var(--cor-alta); border-color: var(--cor-alta); }
.hab-mes-cel.hoje { box-shadow: 0 0 0 2px color-mix(in srgb, var(--cor-acao) 30%, transparent); }
.hab-mes-cel.futuro { opacity: 0.4; pointer-events: none; }
.hab-mes-cel.pre { opacity: 0.2; cursor: default; pointer-events: none; }

/* Compacta: matriz hábito × últimos 21 dias */
.hab-matriz {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-x: auto;
}
.hab-matriz-cabecalho,
.hab-matriz-linha {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
}
.hab-matriz-linha { border-top: 1px solid var(--cor-borda); }
.hab-matriz-nome {
  width: 140px;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 650;
  color: var(--cor-texto);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 5px;
}
.hab-matriz-cabecalho .hab-matriz-nome {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--cor-texto-suave);
  font-weight: 700;
}
.hab-matriz-pontos { display: flex; gap: 4px; flex: 1; }
.hab-matriz-col { display: flex; flex-direction: column; align-items: center; gap: 3px; flex-shrink: 0; width: 16px; }
.hab-matriz-dia-lbl { font-size: 8.5px; color: var(--cor-texto-suave); font-variant-numeric: tabular-nums; }
.hab-ponto {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1.5px solid var(--cor-borda);
  background: var(--cor-fundo);
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}
.hab-ponto:hover { border-color: var(--cor-acao); }
.hab-ponto.on { background: var(--cor-baixa); border-color: var(--cor-baixa); }
.hab-ponto.on.hab-ruim { background: var(--cor-alta); border-color: var(--cor-alta); }
.hab-ponto.hoje { box-shadow: 0 0 0 2px color-mix(in srgb, var(--cor-acao) 30%, transparent); }
.hab-ponto.pre { opacity: 0.2; cursor: default; pointer-events: none; }
.hab-matriz-streak { width: 60px; flex-shrink: 0; text-align: right; font-size: 11px; color: var(--cor-texto-suave); font-variant-numeric: tabular-nums; }

/* Widget lateral (Agenda + Rotina): a mesma matriz da visão Compacta, só
   que com os últimos 7 dias (JANELA_LATERAL) e em miniatura, sem cabeçalho
   nem ações — só ver e marcar, pra caber na coluna direita. */
.hab-matriz-mini .hab-matriz-linha { gap: 6px; padding: 4px 0; cursor: default; }
/* .hab-matriz-ident-mini é quem cresce/encolhe (flex:1); dentro dela só o
   NOME trunca com ellipsis — o resto (bolinha "ruim" e streak) fica de fora
   do corte, com flex-shrink:0, pra nunca sumir sem aviso quando o nome é
   grande. */
.hab-matriz-ident-mini { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; }
.hab-matriz-mini .hab-matriz-nome {
  width: auto;
  flex: 1;
  min-width: 0;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Bolinha do hábito ruim no mini: o texto "RUIM" do badge normal não cabe
   sem espremer o nome quase a nada nessa largura. */
.hab-ruim-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cor-alta);
  flex-shrink: 0;
}
.hab-matriz-mini .hab-matriz-streak-inline {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  color: var(--cor-texto-suave);
}
/* padding-right reserva espaço pro anel do "hoje" (box-shadow, 2px pra fora
   da bolinha) — sem isso, a última coluna encosta exatamente na borda do
   container com overflow-x:auto, e o anel fica cortado (invisível, não é
   layout, então overflow corta sem avisar). */
.hab-matriz-mini .hab-matriz-pontos { flex: none; gap: 2px; padding-right: 3px; }
.hab-matriz-mini .hab-matriz-col { width: 12px; }
.hab-matriz-mini .hab-ponto { width: 11px; height: 11px; border-width: 1px; }

@media (max-width: 480px) {
  .hab-matriz-nome { width: 100px; }
}