/* Finanças · ToLive — mobile-first (375 px e um polegar), desktop ganha colunas.
   Identidade da tolive.app: verde-salvia nos preenchimentos (botoes, destaque), o
   verde petroleo do logo, Inter, cartoes com raio de 12 px e sombra suave. O
   escuro e escolhido para a superficie escura, nao invertido. As series dos
   graficos (receita/despesa) foram validadas para daltonismo em cada tema. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fontes/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light dark;
  --pagina: #f9f9f9;
  --superficie: #ffffff;
  --superficie-2: #f2f4f3;
  --tinta: #222222;
  --tinta-2: #4a4f4d;
  --suave: #6b716e;
  --grade: #e4e8e6;
  --eixo: #c5ccc9;
  --borda: rgba(34, 34, 34, 0.12);
  --acento: #a8c3b6;
  --acento-forte: #4e7565;
  --acento-texto: #3f6255;
  --acento-fraco: #e4eee9;
  --sobre-acento: #17231f;
  --marca: #3a4d4b;
  --sobre-acento-forte: #ffffff;
  --entrada: #2b6e45;
  --perigo: #b42318;
  --serie-1: #00897b;
  --serie-2: #d9642e;
  --serie-base: #898781;
  --bom: #0ca30c;
  --atencao: #fab219;
  --serio: #ec835a;
  --critico: #d03b3b;
  --sombra: 0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 4px 6px -1px rgba(0, 0, 0, 0.06);
  --sombra-destaque: 0 10px 25px -5px rgba(168, 195, 182, 0.45);
  --raio: 12px;
  --toque: 44px;
  --altura-abas: 64px;
  --seguro-baixo: env(safe-area-inset-bottom, 0px);
  --seguro-topo: env(safe-area-inset-top, 0px);
  --fonte: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-synthesis: none;
}

/* Escuro: pelo sistema, a menos que a pessoa tenha escolhido claro em Configurações
   (data-tema na raiz, aplicado por js/tema.js antes de pintar); ou escolhido a mão. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --pagina: #121413;
    --superficie: #1b1e1d;
    --superficie-2: #242827;
    --tinta: #ecefed;
    --tinta-2: #c2c8c5;
    --suave: #98a09c;
    --grade: #2c312f;
    --eixo: #3a403e;
    --borda: rgba(255, 255, 255, 0.12);
    --acento: #a8c3b6;
    --acento-forte: #a8c3b6;
    --acento-texto: #b8d3c6;
    --acento-fraco: #2e3d38;
    --sobre-acento: #16201d;
    --marca: #a8c3b6;
    --sobre-acento-forte: #16201d;
    --entrada: #6cc895;
    --perigo: #f28b82;
    --serie-1: #20a194;
    --serie-2: #e0703f;
    --serie-base: #898781;
    --sombra: none;
    --sombra-destaque: none;
  }
}

:root[data-tema="escuro"] {
  color-scheme: dark;
  --pagina: #121413;
  --superficie: #1b1e1d;
  --superficie-2: #242827;
  --tinta: #ecefed;
  --tinta-2: #c2c8c5;
  --suave: #98a09c;
  --grade: #2c312f;
  --eixo: #3a403e;
  --borda: rgba(255, 255, 255, 0.12);
  --acento: #a8c3b6;
  --acento-forte: #a8c3b6;
  --acento-texto: #b8d3c6;
  --acento-fraco: #2e3d38;
  --sobre-acento: #16201d;
  --marca: #a8c3b6;
  --sobre-acento-forte: #16201d;
  --entrada: #6cc895;
  --perigo: #f28b82;
  --serie-1: #20a194;
  --serie-2: #e0703f;
  --serie-base: #898781;
  --sombra: none;
  --sombra-destaque: none;
}

:root[data-tema="claro"] { color-scheme: light; }

* { box-sizing: border-box; }

/* `hidden` vence qualquer display declarado nas classes (barra de selecao, dica, contador). */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--pagina);
  color: var(--tinta);
  font: 16px/1.5 var(--fonte);
  padding-bottom: calc(var(--altura-abas) + var(--seguro-baixo) + 16px);
}

h1, h2, h3 { margin: 0; line-height: 1.25; }
h2 { font-size: 1.05rem; }
h3 { font-size: 0.98rem; }
p { margin: 0.35rem 0; }
a { color: var(--acento-texto); }
pre { white-space: pre-wrap; word-break: break-word; font-size: 0.8rem; }

.oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.pular { position: absolute; left: 8px; top: -48px; background: var(--acento); color: var(--sobre-acento); padding: 8px 12px; border-radius: 8px; z-index: 50; }
.pular:focus { top: 8px; }
.suave { color: var(--suave); }
.erro { color: var(--perigo); }
.rotulo { display: block; font-size: 0.78rem; color: var(--suave); text-transform: uppercase; letter-spacing: 0.04em; }
.valor, .numero { font-variant-numeric: tabular-nums; white-space: nowrap; }
.valor-entrada { color: var(--entrada); }
.valor-saida { color: var(--tinta); }
.riscado > :first-child { text-decoration: line-through; opacity: 0.6; }

:focus-visible { outline: 3px solid var(--acento-forte); outline-offset: 2px; border-radius: 6px; }

/* ---------- barra do topo e abas ---------- */

.barra-topo {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 10px;
  padding: calc(8px + var(--seguro-topo)) 16px 8px;
  background: color-mix(in srgb, var(--pagina) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borda);
}
.barra-topo h1 { font-size: 1.08rem; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.marca { color: var(--marca); display: grid; place-items: center; min-width: var(--toque); min-height: var(--toque); }
.sino { position: relative; color: var(--tinta); }
.contador {
  position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--critico); color: #fff; font-size: 0.7rem; font-weight: 700;
  display: grid; place-items: center; border: 2px solid var(--pagina);
}

.abas {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(5, 1fr);
  height: calc(var(--altura-abas) + var(--seguro-baixo));
  padding-bottom: var(--seguro-baixo);
  background: var(--superficie);
  border-top: 1px solid var(--borda);
}
.abas a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--suave); text-decoration: none; font-size: 0.72rem; min-height: var(--toque);
}
.abas svg { width: 24px; height: 24px; }
.abas a[aria-current="page"] { color: var(--acento-texto); font-weight: 600; }
.abas a[aria-current="page"] svg { stroke-width: 2.4; }

main.tela { padding: 12px 16px 24px; max-width: 760px; margin: 0 auto; outline: none; }
main.tela > * + * { margin-top: 12px; }

/* ---------- botões e campos ---------- */

button, input, select, textarea { font: inherit; color: inherit; }

.primario, .secundario, .perigo {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--toque); padding: 0 16px; border-radius: 12px;
  font-weight: 600; text-decoration: none; cursor: pointer; border: 1px solid transparent;
}
.primario { background: var(--acento); color: var(--sobre-acento); font-weight: 600; }
.primario:hover:not(:disabled) { filter: brightness(0.95); }
.secundario { background: var(--superficie); color: var(--tinta); border-color: var(--borda); }
.perigo { background: var(--critico); color: #fff; }
.primario:disabled, .secundario:disabled { opacity: 0.55; cursor: default; }
.botao-grande { width: 100%; min-height: 52px; font-size: 1.02rem; }
.botao-pequeno { min-height: 36px; padding: 0 12px; font-size: 0.9rem; }
.botao-icone {
  display: inline-grid; place-items: center; min-width: var(--toque); min-height: var(--toque);
  background: none; border: none; border-radius: 12px; cursor: pointer; color: inherit; text-decoration: none; font-size: 1.2rem;
}
.link-acao { background: none; border: none; padding: 8px 4px; min-height: 36px; color: var(--acento-texto); font-weight: 600; cursor: pointer; text-decoration: none; }
.perigo-texto { color: var(--perigo); }
.botao-flutuante {
  position: fixed; right: 16px; bottom: calc(var(--altura-abas) + var(--seguro-baixo) + 16px); z-index: 15;
  box-shadow: 0 6px 20px rgba(11, 11, 11, 0.25); border-radius: 999px; min-height: 52px; padding: 0 20px;
}

.campo { display: grid; gap: 4px; }
.campo > span { font-size: 0.85rem; color: var(--tinta-2); }
.campo input, .campo select, .campo textarea, .campo-busca input, .campo-valor input {
  width: 100%; min-height: var(--toque); padding: 8px 12px; border-radius: 12px;
  border: 1px solid var(--borda); background: var(--superficie); color: var(--tinta);
}
.campo textarea { resize: vertical; }
.campo-inline { display: inline-grid; grid-auto-flow: column; align-items: center; gap: 8px; }
.campo-inline select { min-width: 110px; }
.campos-lado { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.campo-busca { flex: 1 1 220px; display: block; }
.alternador { display: flex; align-items: center; gap: 10px; min-height: var(--toque); cursor: pointer; }
.alternador input { width: 20px; height: 20px; accent-color: var(--acento-forte); }

.segmentado {
  display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--superficie-2); overflow-x: auto; scrollbar-width: none;
}
.segmentado::-webkit-scrollbar { display: none; }
.segmentado > * {
  flex: 1; min-height: 40px; padding: 0 12px; border: none; border-radius: 10px; background: none;
  color: var(--tinta-2); font-weight: 600; cursor: pointer; text-decoration: none; display: grid; place-items: center; white-space: nowrap;
}
.segmentado > [aria-checked="true"], .segmentado > [aria-selected="true"] { background: var(--superficie); color: var(--tinta); box-shadow: var(--sombra); }
.segmentado-pequeno > * { min-height: 34px; font-size: 0.85rem; }

.chips, .sugestoes-linha { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 4px; scrollbar-width: none; }
.sugestoes-linha { flex-wrap: wrap; overflow: visible; }
.chip {
  flex: none; min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--borda);
  background: var(--superficie); color: var(--tinta); cursor: pointer; white-space: nowrap; font-size: 0.9rem;
}
.chip-ativo { background: var(--acento-fraco); border-color: var(--acento-forte); color: var(--tinta); font-weight: 600; }
.chip-limpar { color: var(--acento-texto); }

.barra-acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ---------- cartões ---------- */

.cartao {
  display: block; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 14px 16px; box-shadow: var(--sombra); color: inherit; text-decoration: none;
}
.cartao > * + * { margin-top: 8px; }
a.cartao:hover { border-color: var(--acento-forte); }
.cartao-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.form-conta { display: flex; align-items: flex-end; gap: 10px; }
.form-conta .campo { flex: 1; min-width: 0; }
.form-conta > button { flex: none; }
.cartao-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cartao-linha > * + * { margin-top: 0; }
.cartao-destaque { display: flex; align-items: baseline; gap: 10px; background: var(--acento); color: var(--sobre-acento); border: none; box-shadow: var(--sombra-destaque); }
.cartao-destaque .cartao-numero { font-size: 2.6rem; font-weight: 700; line-height: 1; }
.cartao-destaque .cartao-texto { flex: 1; font-weight: 600; }
.cartao-seta { font-size: 1.6rem; color: inherit; opacity: 0.7; }
.cartao-alerta { border-color: var(--serio); }
.numero-grande { font-size: 1.7rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.numero-grande .suave { font-size: 0.95rem; font-weight: 500; }
.titulo-secao { margin-top: 20px; font-size: 0.95rem; color: var(--tinta-2); }
.rodape-resumo { text-align: center; font-size: 0.85rem; }
.aviso-inline { background: var(--superficie-2); border-radius: 10px; padding: 8px 10px; font-size: 0.9rem; }

.lista-simples { list-style: none; margin: 0; padding: 0; }
.lista-simples > li + li { border-top: 1px solid var(--borda); }
.linha-link {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: var(--toque); padding: 6px 0; color: inherit; text-decoration: none;
}
.linha-direita { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.linha-botao { flex: 1; display: flex; justify-content: space-between; gap: 10px; background: none; border: none; padding: 6px 0; text-align: left; cursor: pointer; min-height: var(--toque); align-items: center; }
.menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.menu-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px; min-height: 60px;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); color: inherit; text-decoration: none;
}
.menu-item > span:first-child { flex: 1; display: grid; }
.menu-item .suave { font-size: 0.85rem; }
.contador-menu { background: var(--superficie-2); border-radius: 999px; padding: 2px 10px; font-weight: 600; font-size: 0.85rem; }

.estado-vazio { text-align: center; padding: 32px 16px; color: var(--suave); display: grid; gap: 12px; justify-items: center; }
.carregando { color: var(--suave); padding: 24px 0; text-align: center; }

/* ---------- status (cor + ícone + rótulo, nunca só cor) ---------- */

.selo-status { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 600; color: var(--tinta); white-space: nowrap; }
.selo-icone {
  display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  font-size: 0.7rem; font-weight: 800; color: #0b0b0b;
}
.status-no_ritmo .selo-icone { background: var(--bom); color: #fff; }
.status-atencao .selo-icone { background: var(--atencao); }
.status-estouro_projetado .selo-icone { background: var(--serio); }
.status-estourado .selo-icone, .selo-icone.status-estourado { background: var(--critico); color: #fff; }
.selo-alerta { color: var(--perigo); font-weight: 600; }

/* ---------- medidor do orçamento ---------- */

.medidor { position: relative; height: 22px; margin: 6px 0 2px; }
.medidor-trilha { position: absolute; inset: 7px 0; border-radius: 4px; background: var(--acento-fraco); display: flex; gap: 2px; overflow: hidden; }
.medidor-realizado { background: var(--serie-1); border-radius: 4px 0 0 4px; }
.medidor-comprometido { background: color-mix(in srgb, var(--serie-1) 45%, var(--acento-fraco)); }
.medidor-limite, .medidor-estimativa, .medidor-hoje { position: absolute; top: 0; bottom: 0; width: 0; }
.medidor-limite { border-left: 2px solid var(--tinta); }
.medidor-estimativa::before {
  content: ""; position: absolute; left: -5px; top: 0; border: 5px solid transparent; border-top: 7px solid var(--tinta);
}
.medidor-hoje { border-left: 2px dashed var(--suave); top: 3px; bottom: 3px; }
.legenda-medidor { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 0.8rem; align-items: center; }
.chave { display: inline-block; width: 12px; height: 8px; border-radius: 2px; margin-right: 4px; vertical-align: middle; }
.chave-realizado { background: var(--serie-1); }
.chave-comprometido { background: color-mix(in srgb, var(--serie-1) 45%, var(--acento-fraco)); }
.chave-estimativa { width: 0; height: 0; border: 5px solid transparent; border-top: 7px solid var(--tinta); border-radius: 0; }
.chave-hoje { width: 0; height: 12px; border-left: 2px dashed var(--suave); border-radius: 0; }

.lista-orcamento { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.linha-orcamento {
  display: grid; gap: 2px; padding: 12px 14px; background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); color: inherit; text-decoration: none;
}
.linha-orcamento-topo { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.linha-nome { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.linha-orcamento-rodape { font-size: 0.85rem; }
.navegacao-mes { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lista-planejar { list-style: none; margin: 0; padding: 0; }
.linha-planejar { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--borda); }
.linha-planejar-nome { flex: 1; min-width: 0; display: grid; gap: 2px; }
.linha-planejar .linha-nome { font-weight: 600; }
.linha-planejar.recuo { padding-left: 12px; }
.linha-planejar.recuo .linha-nome { font-weight: 400; }
.link-media {
  justify-self: start; background: none; border: none; padding: 2px 0; min-height: 24px; text-align: left;
  color: var(--acento-texto); font: inherit; font-size: 0.82rem; cursor: pointer; white-space: nowrap;
}
.linha-planejar-valor { flex: none; display: flex; align-items: center; gap: 4px; }
.linha-planejar .campo-valor input { width: 96px; }
/* Valor que veio da projecao e ainda nao foi salvo: destacado ate a pessoa revisar. */
.linha-planejar .campo-valor input.campo-da-projecao { border-color: var(--acento-forte); background: color-mix(in srgb, var(--acento-fraco) 35%, var(--superficie)); }
/* Categoria com subcategorias: cabecalho com a soma (so leitura), subs recuadas com guia. */
.grupo-planejar { padding: 14px 0 4px; border-bottom: 1px solid var(--borda); }
.grupo-planejar-topo { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: baseline; }
.grupo-planejar-topo .linha-nome { font-weight: 700; font-size: 1.02rem; }
.grupo-planejar-total { text-align: right; font-variant-numeric: tabular-nums; }
.grupo-planejar-media { grid-column: 1 / -1; font-size: 0.82rem; }
.grupo-planejar .lista-planejar { margin: 6px 0 0 4px; border-left: 2px solid var(--grade); }
.grupo-planejar .linha-planejar:last-child { border-bottom: none; }
.cabecalho-natureza-planejar { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin-top: 20px; }
.cabecalho-natureza-planejar .titulo-secao { margin-top: 0; }
.grupo-orcamento { display: grid; gap: 0; }
.linha-grupo { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.subs-orcamento {
  background: var(--superficie); border: 1px solid var(--borda); border-top: none; border-radius: 0 0 var(--raio) var(--raio); padding: 0 14px 4px;
}
.subs-orcamento > summary { cursor: pointer; min-height: 38px; display: flex; align-items: center; font-size: 0.85rem; color: var(--acento-texto); font-weight: 600; }
.lista-subs-orcamento { list-style: none; margin: 0 0 8px 2px; padding: 0 0 0 12px; border-left: 2px solid var(--grade); display: grid; gap: 4px; }
.sub-orcamento { display: grid; gap: 2px; padding: 8px 0; color: inherit; text-decoration: none; border-bottom: 1px solid var(--borda); }
.lista-subs-orcamento li:last-child .sub-orcamento { border-bottom: none; }
.sub-nome { font-weight: 500; font-size: 0.93rem; }
.sub-orcamento .medidor { transform: scaleY(0.8); transform-origin: left center; }
.seletor-periodo select {
  min-height: var(--toque); padding: 0 6px; border-radius: 12px; border: 1px solid var(--borda);
  background: var(--superficie-2); color: var(--tinta); font: inherit; font-size: 0.85rem;
}
.campo-valor input { text-align: right; }
.composicao { margin: 8px 0; display: grid; gap: 4px; }
.composicao > div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--borda); }
.composicao dt { color: var(--tinta-2); }
.composicao dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.composicao-total dt, .composicao-total dd { font-weight: 700; color: var(--tinta); }

.acoes-fixas {
  position: sticky; bottom: calc(var(--altura-abas) + var(--seguro-baixo) + 8px); z-index: 5;
  display: flex; gap: 8px; justify-content: flex-end; padding: 10px; margin-top: 16px;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra);
}
.acoes-fixas > .primario { flex: 1; }
.folha .acoes-fixas { bottom: 0; }

/* ---------- lista de lançamentos ---------- */

.resumo-fixo {
  position: sticky; top: calc(61px + var(--seguro-topo)); z-index: 10;
  display: flex; gap: 12px; flex-wrap: wrap; font-size: 0.82rem; padding: 8px 12px;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px;
}
.filtros-topo { display: grid; gap: 8px; }
.cabecalho-lista { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 0.88rem; color: var(--tinta-2); }
.grupo-dia + .grupo-dia { margin-top: 14px; }
.grupo-titulo { font-size: 0.82rem; color: var(--suave); font-weight: 600; margin: 0 0 6px 4px; }
.lista-lancamentos { list-style: none; margin: 0; padding: 0; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; }
.lancamento { position: relative; }
.lancamento + .lancamento { border-top: 1px solid var(--borda); }
.lancamento-link {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "desc valor" "meta valor";
  gap: 2px 12px; padding: 10px 14px; min-height: 58px; color: inherit; text-decoration: none;
  -webkit-touch-callout: none; user-select: none;
}
.lancamento-desc { grid-area: desc; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lancamento-meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: 2px 6px; font-size: 0.8rem; color: var(--suave); min-width: 0; }
.lancamento-meta > span:first-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lancamento-valor { grid-area: valor; align-self: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.chip-classificacao { color: var(--tinta-2); }
.chip-pendente { color: var(--acento-texto); font-weight: 600; }
.chip-removido { color: var(--perigo); }
.marca-selecao {
  display: none; position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--borda); place-items: center; font-size: 0.8rem; font-weight: 800;
}
.em-selecao .lancamento-link { padding-left: 46px; }
.em-selecao .marca-selecao { display: grid; color: transparent; }
.lancamento.selecionado { background: var(--acento-fraco); }
.lancamento.selecionado .marca-selecao { background: var(--acento-forte); border-color: var(--acento-forte); color: var(--sobre-acento-forte); }
.sentinela { height: 1px; }
.barra-selecao {
  position: fixed; left: 8px; right: 8px; bottom: calc(var(--altura-abas) + var(--seguro-baixo) + 8px); z-index: 25;
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--raio);
  background: var(--superficie); border: 1px solid var(--borda); box-shadow: 0 8px 24px rgba(11, 11, 11, 0.2);
}
.barra-selecao > span { flex: 1; font-size: 0.9rem; }

/* ---------- detalhe e fila ---------- */

.detalhe { display: grid; gap: 12px; }
.detalhe-cabecalho { padding: 4px 2px; }
.detalhe-descricao { font-size: 1.15rem; word-break: break-word; }
.classificacao-atual strong { font-size: 1.05rem; }
.acoes-linha { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.acoes-cabecalho { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; justify-content: flex-end; }
.separador { border: none; border-top: 1px solid var(--borda); margin: 16px 0; }
.historico-valores, .lista-parcelas { list-style: none; margin: 0; padding: 0; }
.historico-valores li, .lista-parcelas a { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--borda); color: inherit; text-decoration: none; min-height: 40px; align-items: center; }
.lista-parcelas li.atual a { font-weight: 700; }
.dados-crus summary { cursor: pointer; min-height: 32px; font-weight: 600; }

.contador-fila { text-align: center; color: var(--suave); font-weight: 600; }
.cartao-fila {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 20px; padding: 28px 20px;
  text-align: center; box-shadow: var(--sombra); touch-action: pan-y; transition: transform 0.15s ease;
}
.cartao-fila .numero-grande { font-size: 2.2rem; }
.sugestoes-fila { display: grid; gap: 8px; }
.botao-sugestao {
  min-height: 56px; border-radius: 14px; border: 2px solid var(--acento-forte); background: var(--superficie);
  color: var(--tinta); font-weight: 600; font-size: 1rem; cursor: pointer; padding: 8px 14px;
}
.acoes-fila { justify-content: space-between; }
.faixa-regra {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px;
  background: var(--acento-fraco); border: 1px solid var(--acento-forte);
}
.faixa-regra > span { flex: 1; font-size: 0.92rem; }
.fila-concluida { text-align: center; padding: 40px 12px; display: grid; gap: 10px; justify-items: center; }
.lado-a-lado { display: grid; gap: 12px; }

/* ---------- folhas inferiores ---------- */

dialog.folha {
  width: 100%; max-width: 640px; max-height: 92vh; margin: auto auto 0; padding: 0;
  border: none; border-radius: 20px 20px 0 0; background: var(--superficie); color: var(--tinta);
  overflow: hidden; display: flex; flex-direction: column;
}
dialog.folha:not([open]) { display: none; }
dialog.folha::backdrop { background: rgba(0, 0, 0, 0.45); }
dialog.folha-cheia { height: 100vh; max-height: 100vh; border-radius: 0; max-width: 760px; }
.folha-alca { width: 40px; height: 5px; border-radius: 3px; background: var(--eixo); margin: 8px auto 0; flex: none; }
.folha-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px 6px 16px; flex: none; }
/* Coluna flex (nao grid): numa grade com altura limitada, as linhas "auto" de um
   filho rolavel (o segmentado) encolhem ate sumir. */
.folha-corpo { padding: 4px 16px calc(20px + var(--seguro-baixo)); overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.folha-corpo > * { flex: none; }
.segmentado { flex: none; }
.acoes-folha { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.opcoes-verticais { display: grid; gap: 8px; }
.opcao {
  display: grid; gap: 2px; text-align: left; padding: 12px 14px; min-height: 52px; border-radius: 12px;
  border: 1px solid var(--borda); background: var(--superficie); cursor: pointer;
}
.opcao span { color: var(--suave); font-size: 0.88rem; }
.opcao-ativa { border-color: var(--acento-forte); background: var(--acento-fraco); font-weight: 600; }
.lista-opcoes { list-style: none; margin: 0; padding: 0; }
.lista-opcoes li + li { border-top: 1px solid var(--borda); }
.opcao-lista { width: 100%; text-align: left; min-height: 48px; padding: 8px 4px; background: none; border: none; cursor: pointer; }
.opcao-criar { color: var(--acento-texto); font-weight: 600; }
.lista-titulo { font-size: 0.78rem; color: var(--suave); text-transform: uppercase; letter-spacing: 0.04em; padding: 12px 4px 4px; border-top: none !important; }
.lista-opcoes .vazio { color: var(--suave); padding: 12px 4px; }

.formulario, .formulario-regra { display: grid; gap: 12px; }
.bloco { border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px 14px 14px; margin: 0; display: grid; gap: 10px; }
.bloco legend { font-weight: 700; padding: 0 6px; }
.descricao-origem { background: var(--superficie-2); border-radius: 12px; padding: 10px 12px; }
.descricao-selecionavel { font-size: 1.1rem; font-weight: 600; user-select: text; -webkit-user-select: text; word-break: break-word; }
.seletor-categoria {
  display: grid; gap: 2px; width: 100%; text-align: left; padding: 10px 14px; min-height: 56px;
  border-radius: 12px; border: 1px solid var(--borda); background: var(--superficie); cursor: pointer;
}
.mais-opcoes summary { cursor: pointer; min-height: 36px; display: flex; align-items: center; color: var(--acento-texto); font-weight: 600; }
.mais-opcoes[open] { display: grid; gap: 10px; }
.previa-numeros { font-size: 1.02rem; }
.amostra { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; }
.amostra li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--borda); font-size: 0.9rem; }
.passos { margin: 6px 0; padding-left: 20px; }

/* ---------- avisos ---------- */

.avisos {
  position: fixed; left: 8px; right: 8px; bottom: calc(var(--altura-abas) + var(--seguro-baixo) + 8px); z-index: 60;
  display: grid; gap: 8px; pointer-events: none; justify-items: center;
}
.aviso {
  pointer-events: auto; display: flex; align-items: center; gap: 12px; max-width: 560px; width: 100%;
  padding: 10px 12px 10px 16px; border-radius: 12px; background: #1f1f1d; color: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.aviso > span { flex: 1; }
.aviso-erro { background: #7a1c14; }
.aviso-acao { background: none; border: none; color: #b8d3c6; font-weight: 700; min-height: 40px; padding: 0 8px; cursor: pointer; }

/* ---------- regras e categorias ---------- */

.lista-regras, .lista-naturezas, .lista-categorias, .lista-subcategorias { list-style: none; margin: 0; padding: 0; }
.regra {
  display: flex; align-items: center; gap: 4px; background: var(--superficie); border: 1px solid var(--borda);
  border-radius: 12px; padding: 4px 8px 4px 4px;
}
.regra + .regra { margin-top: 8px; }
.regra.inativa { opacity: 0.6; }
.regra-corpo { flex: 1; display: grid; gap: 2px; text-align: left; background: none; border: none; cursor: pointer; padding: 8px 4px; min-width: 0; }
.regra-padrao { font-weight: 700; word-break: break-word; }
.regra-detalhe, .regra-uso { font-size: 0.82rem; color: var(--tinta-2); }
.controles-ordem { display: inline-flex; flex: none; }
.controles-ordem .botao-icone { min-width: 32px; font-size: 0.95rem; color: var(--suave); }
.controles-ordem [data-mover] { display: none; }
.controles-ordem:focus-within [data-mover] { display: inline-grid; }
.alca { cursor: grab; touch-action: none; }
.arrastando { opacity: 0.6; outline: 2px dashed var(--acento-forte); }
.interruptor { display: grid; place-items: center; min-width: var(--toque); min-height: var(--toque); }
.interruptor input { width: 22px; height: 22px; accent-color: var(--acento-forte); }

/* Natureza e cabecalho de secao (na pagina, sem cartao); categoria e o cartao;
   subcategoria fica dentro do cartao, recuada, com uma guia a esquerda. */
.grupo-natureza + .grupo-natureza { margin-top: 28px; }
.grupo-natureza-topo {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding-bottom: 6px; margin-bottom: 10px; border-bottom: 2px solid var(--tinta);
}
.grupo-natureza-topo h2 { flex: 1; display: grid; font-size: 1.3rem; font-weight: 750; letter-spacing: -0.01em; }
.rotulo-natureza { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--suave); }
.vazio-natureza { margin: 0 0 4px; }
.lista-categorias { display: grid; gap: 8px; }
.categoria-item { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 2px 8px 2px 4px; }
.categoria-topo, .subcategoria-item { display: flex; align-items: center; gap: 4px; min-height: var(--toque); }
.categoria-texto { flex: 1; min-width: 0; display: grid; gap: 1px; padding: 6px 0; }
.categoria-nome, .subcategoria-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.categoria-nome { font-weight: 650; font-size: 1rem; }
.categoria-meta { font-size: 0.8rem; color: var(--suave); }
.lista-subcategorias { margin: 0 0 8px 20px; border-left: 2px solid var(--grade); }
.subcategoria-item { padding-left: 6px; font-size: 0.92rem; }
.subcategoria-nome { font-weight: 400; color: var(--tinta); }
.acoes-categoria { flex: none; display: inline-flex; margin-left: auto; }
.acao-icone {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 38px; min-height: 40px; padding: 0 6px;
  background: none; border: none; border-radius: 10px; color: var(--acento-texto); font: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer;
}
.acao-icone:hover { background: var(--superficie-2); }
.acao-icone.perigo-texto { color: var(--perigo); }
.rotulo-acao { display: none; }
.legenda-acoes { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.8rem; color: var(--tinta-2); margin: 4px 0 14px; }
.legenda-acoes span { display: inline-flex; align-items: center; gap: 4px; }
.legenda-acoes svg { width: 16px; height: 16px; color: var(--acento-texto); }
@media (min-width: 700px) {
  .rotulo-acao { display: inline; }
  .legenda-acoes { display: none; }
}

/* ---------- sincronização, alertas, configurações ---------- */

.lista-execucoes, .lista-alertas, .lista-contas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.execucao { background: var(--superficie); border: 1px solid var(--borda); border-left: 4px solid var(--eixo); border-radius: 12px; padding: 10px 14px; }
.status-execucao-sucesso { border-left-color: var(--bom); }
.status-execucao-falha { border-left-color: var(--critico); }
.status-execucao-executando { border-left-color: var(--atencao); }
.execucao-topo { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.alerta {
  width: 100%; display: grid; gap: 2px; text-align: left; padding: 12px 14px; min-height: 56px; cursor: pointer;
  background: var(--superficie); border: 1px solid var(--borda); border-left: 4px solid var(--acento-forte); border-radius: 12px;
}
.alerta.lido { border-left-color: var(--borda); color: var(--tinta-2); }
.conta-item { display: grid; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--borda); }
.conta-item form { align-items: end; grid-template-columns: 1fr 1fr auto; }

/* ---------- gráficos ---------- */

.grafico-caixa { position: relative; width: 100%; }
.grafico { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.grafico-grade { stroke: var(--grade); stroke-width: 1; }
.grafico-zero { stroke: var(--eixo); }
.grafico-eixo { fill: var(--suave); font-size: 11px; font-variant-numeric: tabular-nums; }
.grafico-rotulo { fill: var(--tinta); font-size: 12px; font-weight: 600; paint-order: stroke; stroke: var(--superficie); stroke-width: 4px; stroke-linejoin: round; }
.grafico-linha { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.grafico-linha.serie-1 { stroke: var(--serie-1); }
.grafico-linha.serie-base { stroke: var(--serie-base); }
.grafico-linha.tracejada { stroke-dasharray: 6 5; }
.grafico-ponto { stroke: var(--superficie); stroke-width: 2; }
.grafico-ponto.serie-1 { fill: var(--serie-1); }
.grafico-ponto.serie-base { fill: var(--serie-base); }
.grafico-coluna.serie-1 { fill: var(--serie-1); }
.grafico-coluna.serie-2 { fill: var(--serie-2); }
.grafico-mira { stroke: var(--eixo); stroke-width: 1; }
.grafico-faixa-realizado { fill: var(--superficie-2); }
.grafico-divisa { stroke: var(--eixo); stroke-width: 1; stroke-dasharray: 3 3; }
.grafico-rotulo-faixa { font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; }
.grafico-alvo { fill: transparent; cursor: crosshair; }
.grafico-dica {
  position: absolute; top: 4px; transform: translateX(-50%); pointer-events: none; z-index: 2;
  display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; font-size: 0.8rem; white-space: nowrap;
  background: var(--superficie); border: 1px solid var(--borda); box-shadow: 0 6px 18px rgba(11, 11, 11, 0.16);
}
.grafico-dica span { display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.legenda-grafico { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 0.85rem; color: var(--tinta-2); }
.legenda-grafico span { display: inline-flex; align-items: center; gap: 6px; }
.chave-linha { display: inline-block; width: 18px; height: 0; border-top: 2px solid var(--serie-1); }
.chave-linha.serie-base { border-top-color: var(--serie-base); }
.chave-linha.tracejada { border-top-style: dashed; }
.chave-coluna { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--serie-1); }
.chave-coluna.serie-2 { background: var(--serie-2); }

/* ---------- tabelas ---------- */

.tabela-rolavel { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; }
.tabela-compacta, .tabela-relatorio { border-collapse: collapse; width: 100%; font-size: 0.85rem; }
.tabela-compacta th, .tabela-compacta td, .tabela-relatorio th, .tabela-relatorio td { padding: 8px 10px; border-bottom: 1px solid var(--borda); text-align: left; vertical-align: top; }
.tabela-compacta thead th, .tabela-relatorio thead th { position: sticky; top: 0; background: var(--superficie-2); font-weight: 600; color: var(--tinta-2); white-space: nowrap; }
.tabela-compacta tbody th, .tabela-relatorio tbody th { font-weight: 500; min-width: 160px; }
.tabela-compacta .numero, .tabela-relatorio .numero { text-align: right; }
.tabela-relatorio { background: var(--superficie); }
.linha-natureza th, .linha-natureza td { font-weight: 700; background: var(--superficie-2); }
.nivel-1 th { font-weight: 600; }
.nivel-3 th { font-weight: 400; font-size: 0.82rem; }
.alternar-arvore { background: none; border: none; cursor: pointer; font: inherit; padding: 4px 0; min-height: 32px; text-align: left; }
.linha-subtotal th, .linha-subtotal td, .linha-resultado th, .linha-resultado td { font-weight: 700; border-top: 2px solid var(--eixo); }
.celula-tripla { display: table-cell; }
.celula-tripla span { display: block; font-size: 0.75rem; }
.total-relatorio { font-weight: 700; }
.linha-total th, .linha-total td { font-weight: 700; }
.rotulo-relatorio { display: inline-flex; align-items: center; gap: 2px; }
.alca-relatorio {
  flex: none; min-width: 28px; min-height: 32px; border: none; background: none; color: var(--suave);
  cursor: grab; touch-action: none; border-radius: 8px; font-size: 0.95rem;
}
.alca-relatorio:focus-visible { outline: 2px solid var(--acento-forte); }
.alca-espaco { display: inline-block; width: 28px; flex: none; }
tr.arrastando { opacity: 0.55; outline: none; }
tr.sobre-arraste-cima > * { box-shadow: inset 0 2px 0 var(--acento-forte); }
tr.sobre-arraste-baixo > * { box-shadow: inset 0 -2px 0 var(--acento-forte); }
.botao-download { border: 1px solid var(--borda); background: var(--superficie); color: var(--tinta); margin-left: auto; }
/* Projecao por categoria: a caixa rola nos dois sentidos, com altura de uma tela;
   assim o cabecalho dos meses (topo) e a coluna das categorias (esquerda) ficam
   fixos — com a pagina rolando, o sticky do cabecalho nao teria onde se prender. */
.rolavel-2d { overflow: auto; max-height: calc(100dvh - 60px - var(--altura-abas) - var(--seguro-baixo) - 40px); overscroll-behavior: contain; border: 1px solid var(--borda); }
.rolavel-2d thead th { top: 0; z-index: 2; }
/* Celula fixa (sticky) perde a borda com border-collapse: aqui as bordas sao separadas. */
.tabela-projecao { border-collapse: separate; border-spacing: 0; }
.tabela-projecao th, .tabela-projecao td { vertical-align: middle; }
.tabela-projecao tbody th, .tabela-projecao thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--superficie); }
.tabela-projecao thead th:first-child { z-index: 3; background: var(--superficie-2); }
/* Relatorio: mesma caixa de rolagem; a linha dos meses e a coluna das categorias
   (e dos lancamentos) ficam fixas ao rolar pra baixo ou pra direita. */
.tabela-relatorio { border-collapse: separate; border-spacing: 0; }
.tabela-relatorio tbody th, .tabela-relatorio tfoot th, .tabela-relatorio thead th:first-child {
  position: sticky; left: 0; z-index: 1; background: var(--superficie); max-width: 280px; border-right: 1px solid var(--borda);
}
.tabela-relatorio thead th:first-child { z-index: 3; background: var(--superficie-2); }
.tabela-relatorio .linha-natureza th { background: var(--superficie-2); }
.tabela-projecao .linha-natureza th { background: var(--superficie-2); text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.06em; color: var(--tinta-2); }
.linha-categoria-projecao th, .linha-categoria-projecao td { font-weight: 650; }
.linha-grupo-projecao td { color: var(--tinta); }
.linha-sub-projecao th { font-weight: 400; padding-left: 30px; color: var(--tinta-2); }
.linha-sub-projecao th, .linha-sub-projecao td { font-size: 0.82rem; }
.celula-editavel {
  font: inherit; color: inherit; background: none; border: 1px dashed transparent; border-radius: 6px;
  padding: 2px 4px; margin: -3px -5px; cursor: pointer; min-height: 28px; font-variant-numeric: tabular-nums;
}
.celula-editavel:hover, .celula-editavel:focus-visible { border-color: var(--acento-forte); outline: none; }
.celula-definida { font-weight: 700; color: var(--acento-texto); }
.celula-definida::after { content: " ✎"; font-size: 0.75em; }
.linha-grupo-tabela th, .linha-grupo-tabela td { font-weight: 650; }
.linha-sub-tabela th { font-weight: 400; padding-left: 24px; color: var(--tinta-2); }

/* ---------- login ---------- */

.pagina-entrar { padding: 0; min-height: 100vh; display: grid; place-items: center; }
.entrar { display: grid; gap: 12px; justify-items: center; text-align: center; padding: 32px 24px; max-width: 360px; width: 100%; }
.entrar-marca { color: var(--marca); }
.entrar h1 { font-size: 1.6rem; }
.entrar-servico { margin-top: -8px; color: var(--tinta-2); font-size: 0.92rem; }
.entrar-servico strong { color: var(--marca); }
.entrar .erro { background: var(--superficie); border: 1px solid var(--critico); border-radius: 12px; padding: 10px 12px; }

/* ---------- desktop: mais colunas, mesmo fluxo ---------- */

@media (min-width: 900px) {
  main.tela { max-width: 1100px; padding: 20px 32px 32px; }
  .tela-inicio { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
  .tela-inicio > * + * { margin-top: 0; }
  .tela-inicio .cartao-destaque, .tela-inicio .rodape-resumo { grid-column: 1 / -1; }
  .lancamento-link { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto; grid-template-areas: "desc meta valor"; align-items: center; min-height: 48px; }
  .lancamento-meta { font-size: 0.85rem; flex-wrap: nowrap; overflow: hidden; }
  .lancamento-meta > span { white-space: nowrap; }
  .lancamento-meta > span:first-child { flex: 0 1 auto; min-width: 0; }
  .lado-a-lado { grid-template-columns: 1fr 1fr; }
  .controles-ordem [data-mover] { display: inline-grid; }
  dialog.folha { margin: auto; border-radius: 20px; max-height: 86vh; }
  dialog.folha-cheia { height: 92vh; border-radius: 20px; }
  .botao-flutuante { right: calc(50% - 540px); }
}

@media (forced-colors: active) {
  .selo-icone, .medidor-realizado, .medidor-comprometido, .chave { forced-color-adjust: none; border: 1px solid CanvasText; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}