/* ==========================================================================
   INSJCM · Nomeações — camada de componentes
   Os tokens da marca (--verde, --laranja, …) vêm do preset partilhado, via
   tailwind.input.css. Aqui ficam 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, lg:hidden…) têm de poder sobrepor-se aos componentes.
   ========================================================================== */

:root {
  --tinta: #1c1c1c;
  --tinta-suave: #5c5c5c;
  --linha: #e8ecea;
  --superficie: #f6f8f7;
  --vermelho: #dc2626;
  --vermelho-escuro: #b91c1c;
  --ambar: #b45309;
  --azul: #1d4ed8;
  --cinza: #94a3b8;
}

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

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

.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: #fff; 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. Mantém a classe `.aba` porque o JS a usa para trocar de
   painel; o aspecto é que passou de separador a item de barra lateral. */
.aba {
  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;
  background: transparent; border: 0; white-space: nowrap;
  transition: background .18s, color .18s;
}
.aba:hover { background: rgba(0,119,68,.07); color: var(--verde); }
.aba svg { width: 1.2rem; height: 1.2rem; flex-shrink: 0; }
.aba.activa { background: var(--verde); color: #fff; box-shadow: 0 6px 16px -8px rgba(0,119,68,.8); }
.aba.activa:hover { background: var(--verde-escuro); color: #fff; }
.aba.escondida { display: none; }

/* --------------------------------------------------------------- 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. A cor do número vem de uma variante declarada — nunca
   de uma classe Tailwind construída em JS, que o JIT não consegue detectar. */
.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--azul::before { background: var(--azul); }
.kpi--laranja::before { background: var(--laranja); }
.kpi--vermelho::before { background: var(--vermelho); }
.kpi--cinza::before { background: var(--cinza); }
.kpi-rotulo { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-suave); }
.kpi-valor { font-size: 1.9rem; font-weight: 900; line-height: 1.1; margin-top: .3rem; font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--verde); }
.kpi--azul .kpi-valor { color: var(--azul); }
.kpi--laranja .kpi-valor { color: var(--laranja-escuro); }
.kpi--vermelho .kpi-valor { color: var(--vermelho); }
.kpi--cinza .kpi-valor { color: var(--tinta-suave); }

/* Cartão de registo nas listas. */
.linha-registo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem;
  background: #fff; border: 1px solid var(--linha); border-radius: .9rem; padding: .95rem 1.1rem;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.linha-registo:hover { border-color: rgba(0,119,68,.35); box-shadow: 0 8px 22px -16px rgba(16,24,40,.5); transform: translateY(-1px); }

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

.lbl { display: block; margin-bottom: .35rem; font-size: .78rem; font-weight: 800; color: #475569; }
.inp {
  background: #fff; border: 1px solid #d5dbd8; color: var(--tinta);
  font-size: .875rem; border-radius: .6rem; display: block; width: 100%;
  padding: .6rem .75rem; transition: border-color .15s, box-shadow .15s;
}
.inp:hover { border-color: #b9c2be; }
.inp:focus { outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px rgba(0,119,68,.14); }
.inp::placeholder { color: #9aa5a0; }
.inp:disabled { background: #f1f5f4; cursor: not-allowed; }
textarea.inp { min-height: 4.5rem; }

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

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

.btn-primario, .btn-secundario, .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;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background .18s, color .18s, border-color .18s, box-shadow .18s, transform .12s;
}
.btn-primario { background: var(--verde); color: #fff; border-color: var(--verde); box-shadow: 0 6px 16px -10px rgba(0,119,68,.9); }
.btn-primario:hover { background: var(--verde-escuro); border-color: var(--verde-escuro); }
.btn-primario:active { transform: translateY(1px); }
.btn-secundario { background: #fff; color: var(--verde); border-color: rgba(0,119,68,.35); }
.btn-secundario:hover { background: rgba(0,119,68,.07); border-color: var(--verde); }
.btn-suave { background: #f1f5f4; color: var(--tinta-suave); }
.btn-suave:hover { background: #e6ebe9; color: var(--tinta); }
.btn-perigo { background: #fff; color: var(--vermelho); border-color: rgba(220,38,38,.35); }
.btn-perigo:hover { background: rgba(220,38,38,.07); border-color: var(--vermelho); }
.btn-primario:disabled, .btn-secundario:disabled, .btn-suave:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-mini { padding: .3rem .65rem; font-size: .75rem; border-radius: .5rem; }

.btn-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: .5rem; color: var(--tinta-suave);
  background: transparent; border: 0; cursor: pointer;
  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. */
.segmento { display: inline-flex; flex-wrap: wrap; gap: .3rem; padding: .3rem; background: #f1f5f4; border-radius: .8rem; }
.segmento > button {
  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;
}
.segmento > button:hover { color: var(--verde); background: rgba(255,255,255,.75); }
.segmento > button.activa { background: #fff; color: var(--verde); box-shadow: 0 1px 3px rgba(16,24,40,.12); }

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

/* Distintivos de estado. Classes literais: o JIT do Tailwind não vê classes
   montadas em JS, por isso o estado é um componente e não utilidades. */
.selo { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .6rem; border-radius: 999px; font-size: .7rem; font-weight: 800; }
.selo--neutro { background: #f1f5f4; color: var(--tinta-suave); }
.selo--verde { background: rgba(0,119,68,.1); color: var(--verde); }
.selo--azul { background: rgba(29,78,216,.1); color: var(--azul); }
.selo--laranja { background: rgba(244,151,40,.14); color: var(--ambar); }
.selo--vermelho { background: rgba(220,38,38,.1); color: var(--vermelho-escuro); }

.linha-resumo {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .6rem 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-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); }

.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; }

/* Caixa de sugestões do autocompletar. */
.sug { border-radius: .7rem; box-shadow: 0 12px 32px -12px rgba(16,24,40,.28); }

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

.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%; } }

/* 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: ''; }

/* Entrada dos painéis ao trocar de secção. Sem `fill-mode`: o estado normal do
   painel é visível, e a animação nunca o pode deixar em opacidade 0. */
.painel { 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). O estado escondido só se aplica quando
   o script marcou o documento; 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; }
}

/* Modal genérico e diálogo de confirmação. */
#modal:not(.hidden) { display: flex; }
.modal-painel { animation: subir .22s cubic-bezier(.16,1,.3,1); }
.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: 27rem; 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); overflow: hidden; }

/* Ocultação genérica e suporte ao atributo hidden do HTML. */
[hidden], .escondido { display: none !important; }

.scrollbar-none::-webkit-scrollbar { display: none; }
.scrollbar-none { -ms-overflow-style: none; scrollbar-width: none; }

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

@media print {
  .barra-lateral, .veu-lateral, .topo-app, .sem-impressao { display: none !important; }
  .area-conteudo { margin-left: 0 !important; }
  .cartao, .linha-registo { border: 0; box-shadow: none; }
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  @page { size: A4; margin: 15mm; }
}