/*
 * Sistema de Design "Livro-Razão & Selo"
 * ----------------------------------------
 * Identidade visual do sistema VEC. Construída sobre o Tailwind (CDN,
 * configurado em base.html) para os utilitários de layout, e este arquivo
 * para os poucos elementos que não são só utilitários: os "selos" de
 * nível (bronze/prata/ouro), a linha de valor decorativa, e ajustes finos
 * de tipografia.
 *
 * Paleta (ver também o tailwind.config em base.html):
 *   --ink-900 #0F1E33   Navy profundo — estrutura (sidebar, headers)
 *   --ink-700 #1D3557
 *   --brass-600 #A9762F Latão envelhecido — accent/CTA principal
 *   --brass-400 #C9A15C
 *   --paper #F3F1EA     Fundo "papel" das áreas de conteúdo
 *   --success #2F6F4E
 *   --danger #A23B3B
 */

:root {
  --ink-900: #0f1e33;
  --ink-800: #16304f;
  --ink-700: #1d3557;
  --brass-700: #8a611f;
  --brass-600: #a9762f;
  --brass-500: #c08f3e;
  --brass-400: #c9a15c;
  --brass-100: #f3e6cf;
  --paper: #f3f1ea;
  --paper-dark: #e9e5d8;
}

body {
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  background-color: var(--paper);
}

.font-display {
  font-family: "Fraunces", Georgia, serif;
  font-optical-sizing: auto;
}

.font-mono-data {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

/* Linha fina em gradiente dourado — o motivo recorrente que marca cada
   seção do sistema, remetendo à "linha de valor" do Método VEC. */
.value-rule {
  height: 2px;
  background: linear-gradient(90deg, var(--brass-600) 0%, var(--brass-400) 35%, transparent 100%);
}

/* ===================== SELOS (badges de nível) =====================
   Um selo circular em três variações metálicas (bronze/prata/ouro),
   usado para representar o nível de plano do usuário e o tipo de
   relatório (Curto Prazo / Crédito / Criação de Valor). */
.selo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  color: #fff;
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.4),
    inset 0 -2px 3px rgba(0, 0, 0, 0.25),
    0 1px 3px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.selo-sm {
  width: 2rem;
  height: 2rem;
  font-size: 0.7rem;
}

.selo-md {
  width: 3rem;
  height: 3rem;
  font-size: 1rem;
}

.selo-lg {
  width: 4.5rem;
  height: 4.5rem;
  font-size: 1.5rem;
}

.selo-bronze {
  background: radial-gradient(circle at 30% 25%, #d8996b, #9c6b4f 60%, #7a4f38);
}

.selo-prata {
  background: radial-gradient(circle at 30% 25%, #e4e9ee, #8b96a3 60%, #6b7684);
}

.selo-ouro {
  background: radial-gradient(circle at 30% 25%, #f0d090, var(--brass-600) 60%, var(--brass-700));
}

.selo-locked {
  background: radial-gradient(circle at 30% 25%, #d9d9d4, #a9a69a 60%, #8a8779);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* ===================== CARTÕES ===================== */
.card-ledger {
  background: #fff;
  border: 1px solid #e4e0d3;
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px rgba(15, 30, 51, 0.06);
}

/* ===================== TABELAS ESTILO "RAZÃO" =====================
   Sem zebra-striping: hairlines horizontais, números alinhados à
   direita com fonte tabular — como uma folha de razão contábil. */
.table-ledger {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.table-ledger th {
  text-align: right;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b7280;
  padding: 0.6rem 0.9rem;
  border-bottom: 2px solid var(--ink-900);
  white-space: nowrap;
}

.table-ledger th:first-child,
.table-ledger td:first-child {
  text-align: left;
}

.table-ledger td {
  text-align: right;
  padding: 0.55rem 0.9rem;
  border-bottom: 1px solid #e4e0d3;
  font-family: "IBM Plex Mono", monospace;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.table-ledger tbody tr:hover td {
  background-color: #faf9f5;
}

/* ===================== BARRA DE PROGRESSO DA SESSÃO ===================== */
.timer-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--brass-500), #a23b3b);
  transform-origin: left;
  z-index: 10000;
}

#alerta-inatividade {
  animation: slideInRight 0.3s ease-out;
  min-width: 320px;
  z-index: 9999;
}

@keyframes slideInRight {
  from {
    transform: translateX(110%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.modal-content {
  animation: modalFadeIn 0.2s ease-out;
}

/* Respeita preferência de redução de movimento. */
@media (prefers-reduced-motion: reduce) {
  #alerta-inatividade,
  .modal-content {
    animation: none;
  }
}

/* Scrollbar discreta nas áreas com overflow (ex.: termos LGPD) */
.scroll-discreta::-webkit-scrollbar {
  width: 8px;
}
.scroll-discreta::-webkit-scrollbar-thumb {
  background-color: #cfc9b8;
  border-radius: 9999px;
}