/* ==========================================================================
   INSJCM · Finanças — camada de componentes
   Tokens de marca (verde #007744 / laranja #f49728) e tipografia Nunito vêm
   do preset partilhado @tocoistas/insjcm-common. Aqui ficam apenas os
   componentes repetidos e as animações que o Tailwind não cobre.
   Esta folha é carregada ANTES de tailwind.css: as utilidades do Tailwind
   (hidden, px-7, md:hidden…) têm de poder sobrepor-se aos componentes.
   ========================================================================== */

/* O verde e o laranja institucionais NÃO se declaram aqui: --verde,
   --verde-escuro, --verde-claro, --laranja, --laranja-escuro e --laranja-claro
   são gerados a partir do preset partilhado em tailwind.input.css. Abaixo ficam
   apenas os tons neutros e semânticos, que não fazem parte da paleta da marca. */
:root {
  --tinta: #1c1c1c;
  --tinta-suave: #5c5c5c;
  --linha: #e8ecea;
  --superficie: #f6f8f7;
  --vermelho: #dc2626;
  --vermelho-escuro: #b91c1c;
  --cinza: #94a3b8;
}

body { background: var(--superficie); color: var(--tinta); }

/* --------------------------------------------------------------- Estrutura */

/* Faixa institucional de acento (verde → laranja). */
.faixa-marca { background: linear-gradient(90deg, var(--verde) 0%, var(--verde-claro) 55%, var(--laranja) 100%); }

/* Barra lateral: fixa em ecrã grande, gaveta deslizante em ecrã pequeno. */
.barra-lateral {
  position: fixed; inset: 0 auto 0 0; width: 16rem; z-index: 50;
  background: #ffffff; border-right: 1px solid var(--linha);
  display: flex; flex-direction: column;
  transform: translateX(-100%); transition: transform .28s cubic-bezier(.4,0,.2,1);
}
.barra-lateral.aberta { transform: translateX(0); }
.veu-lateral { position: fixed; inset: 0; z-index: 40; background: rgba(15,23,42,.45); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .25s; }
.veu-lateral.aberta { opacity: 1; pointer-events: auto; }

@media (min-width: 1024px) {
  .barra-lateral { transform: none; }
  .veu-lateral { display: none; }
  .area-conteudo { margin-left: 16rem; }
}

/* Item de navegação da barra lateral. */
.nav-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem .85rem; margin: 0 .75rem; border-radius: .75rem;
  font-weight: 700; font-size: .875rem; color: var(--tinta-suave);
  cursor: pointer; width: calc(100% - 1.5rem); text-align: left;
  transition: background .18s, color .18s;
}
.nav-item:hover { background: rgba(0,119,68,.07); color: var(--verde); }
.nav-item svg { width: 1.2rem; height: 1.2rem; flex-shrink: 0; }
.nav-item.activa { background: var(--verde); color: #fff; box-shadow: 0 6px 16px -8px rgba(0,119,68,.8); }
.nav-item.activa:hover { background: var(--verde-escuro); color: #fff; }

/* --------------------------------------------------------------- Superfícies */

.cartao {
  background: #fff; border: 1px solid var(--linha); border-radius: 1rem;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
.cartao-cab {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 1.25rem; border-bottom: 1px solid var(--linha);
}
.cartao-titulo { font-weight: 800; font-size: 1rem; color: var(--tinta); letter-spacing: -.01em; }
.cartao-sub { font-size: .8rem; color: var(--tinta-suave); margin-top: .15rem; font-weight: 500; }
.cartao-corpo { padding: 1.25rem; }

/* Cartão de indicador (KPI). */
.kpi { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--linha); border-radius: 1rem; padding: 1.15rem 1.25rem; transition: box-shadow .2s, transform .2s; }
.kpi:hover { box-shadow: 0 10px 28px -18px rgba(16,24,40,.45); transform: translateY(-2px); }
.kpi::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--verde); }
.kpi--despesa::before { background: var(--vermelho); }
.kpi--saldo::before { background: var(--laranja); }
.kpi-rotulo { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-suave); }
.kpi-valor { font-size: 1.75rem; font-weight: 900; line-height: 1.15; margin-top: .35rem; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.kpi-moeda { font-size: .8rem; font-weight: 700; color: var(--tinta-suave); margin-left: .25rem; }

/* --------------------------------------------------------------- Formulários */

label { font-weight: 700; color: #475569; font-size: .8rem; }
.campo {
  background: #fff; border: 1px solid #d5dbd8; border-radius: .6rem;
  padding: .6rem .75rem; font-size: .9rem; font-weight: 400; color: var(--tinta);
  transition: border-color .15s, box-shadow .15s; width: 100%;
}
label .campo, label select.campo { margin-top: .3rem; }
.campo:hover { border-color: #b9c2be; }
.campo:focus { outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px rgba(0,119,68,.14); }
.campo::placeholder { color: #9aa5a0; }
.campo:disabled { background: #f1f5f4; cursor: not-allowed; }

.rotulo-seccao { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-suave); }

/* --------------------------------------------------------------- Botões */

.btn-verde, .btn-out, .btn-suave {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  font-weight: 700; font-size: .875rem; border-radius: .65rem; padding: .6rem 1.05rem;
  cursor: pointer; transition: background .18s, color .18s, border-color .18s, box-shadow .18s, transform .12s;
  white-space: nowrap;
}
.btn-verde { background: var(--verde); color: #fff; border: 1px solid var(--verde); box-shadow: 0 6px 16px -10px rgba(0,119,68,.9); }
.btn-verde:hover { background: var(--verde-escuro); border-color: var(--verde-escuro); }
.btn-verde:active { transform: translateY(1px); }
.btn-out { background: #fff; color: var(--verde); border: 1px solid rgba(0,119,68,.35); }
.btn-out:hover { background: rgba(0,119,68,.07); border-color: var(--verde); }
.btn-suave { background: #f1f5f4; color: var(--tinta-suave); border: 1px solid transparent; }
.btn-suave:hover { background: #e6ebe9; color: var(--tinta); }
.btn-verde:disabled, .btn-out:disabled, .btn-suave:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* Botão-ícone das acções de linha. */
.btn-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: .5rem; color: var(--tinta-suave);
  transition: background .15s, color .15s;
}
.btn-ico:hover { background: rgba(0,119,68,.09); color: var(--verde); }
.btn-ico--perigo:hover { background: rgba(220,38,38,.09); color: var(--vermelho); }
.btn-ico svg { width: 1.05rem; height: 1.05rem; }

/* Selector segmentado (tipo de lançamento, âmbito). */
.segmento { display: inline-flex; flex-wrap: wrap; gap: .3rem; padding: .3rem; background: #f1f5f4; border-radius: .8rem; }
.tipo-btn {
  padding: .5rem .95rem; font-weight: 700; font-size: .825rem; border-radius: .6rem;
  border: 1px solid transparent; background: transparent; color: var(--tinta-suave); cursor: pointer;
  transition: background .18s, color .18s, box-shadow .18s;
}
.tipo-btn:hover { color: var(--verde); background: rgba(255,255,255,.75); }
.tipo-btn.activa { background: #fff; color: var(--verde); box-shadow: 0 1px 3px rgba(16,24,40,.12); }
.tipo-btn[data-tipo="despesa"].activa, .tipo-btn.activa.tipo-despesa { color: #dc2626; }

/* --------------------------------------------------------------- Dados */

.linha-resumo {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .65rem 0; border-bottom: 1px solid #f1f5f4; font-size: .875rem;
}
.linha-resumo:last-child { border-bottom: 0; }
.linha-resumo strong { color: var(--tinta); font-variant-numeric: tabular-nums; }

/* Barra de proporção usada nas quebras territoriais. */
.barra-prop { height: .3rem; border-radius: 999px; background: #eef2f0; overflow: hidden; margin-top: .4rem; }
.barra-prop > span { display: block; height: 100%; border-radius: 999px; background: var(--verde); transition: width .5s cubic-bezier(.4,0,.2,1); }
.barra-prop > span.negativa { background: var(--vermelho); }

.tabela { width: 100%; font-size: .875rem; text-align: left; border-collapse: collapse; }
.tabela thead th {
  padding: .7rem 1rem; font-size: .68rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .07em; color: var(--tinta-suave); background: #f8faf9;
  border-bottom: 1px solid var(--linha); white-space: nowrap;
}
.tabela tbody td { padding: .8rem 1rem; border-bottom: 1px solid #f1f5f4; vertical-align: middle; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr { transition: background .15s; }
.tabela tbody tr:hover { background: #f8faf9; }
.num { font-variant-numeric: tabular-nums; }

/* Distintivos de tipo/natureza. */
.selo { display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .55rem; border-radius: 999px; font-size: .7rem; font-weight: 800; letter-spacing: .01em; }
.selo--receita { background: rgba(0,119,68,.1); color: var(--verde); }
.selo--despesa { background: rgba(220,38,38,.1); color: var(--vermelho-escuro); }
.selo--aviso { background: rgba(244,151,40,.14); color: var(--laranja-escuro); }

/* Caixa de sugestões do autocompletar. */
.sugestoes { border: 1px solid var(--linha); border-radius: .7rem; box-shadow: 0 12px 32px -12px rgba(16,24,40,.28); overflow: hidden; }
.sugestoes button { transition: background .12s; }

/* Cartão expansível: o marcador nativo do <summary> dá lugar ao ícone próprio. */
summary { list-style: none; }
summary::-webkit-details-marker, summary::marker { display: none; content: ''; }

/* --------------------------------------------------------------- Estados */

/* Esqueleto de carregamento. */
.esqueleto { background: linear-gradient(90deg, #eef2f0 25%, #f7faf9 37%, #eef2f0 63%); background-size: 400% 100%; animation: brilho 1.3s ease-in-out infinite; border-radius: .5rem; }
@keyframes brilho { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

#overlay:not(.hidden) { display: flex; }

/* Entrada dos painéis ao trocar de separador. Sem `fill-mode`: o estado
   normal do painel é visível, e a animação nunca pode deixá-lo em opacidade 0
   se, por alguma razão, não chegar a correr. */
.painel[data-animar] { animation: subir .28s cubic-bezier(.16,1,.3,1); }
@keyframes subir { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Revelação ao deslocamento (landing page). O estado escondido só se aplica
   quando o script marcou o documento com `js-revelar`; sem JS, o conteúdo
   aparece na mesma. */
.js-revelar .revelar { opacity: 0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); }
.js-revelar .revelar.visivel { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .js-revelar .revelar { opacity: 1; transform: none; }
}

/* Diálogo de confirmação (substitui window.confirm). */
.dialogo-veu { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(15,23,42,.45); backdrop-filter: blur(3px); }
.dialogo { width: 100%; max-width: 26rem; background: #fff; border-radius: 1rem; box-shadow: 0 24px 60px -20px rgba(16,24,40,.5); animation: subir .22s cubic-bezier(.16,1,.3,1) both; overflow: hidden; }

/* --------------------------------------------------------------- Impressão */

@media print {
  .barra-lateral, .veu-lateral, .topo-app, #overlay, .sem-impressao { display: none !important; }
  .area-conteudo { margin-left: 0 !important; }
  .cartao { border: 0; box-shadow: none; }
}