/* Identidade visual — Calculadora de Execução Penal */
:root {
  --brand: #591125;       /* vinho da marca */
  --brand-dark: #400c1b;  /* tom mais escuro para hover/foco */
  --brass: #9C7B3F;       /* latão: acento (filetes, sublinhados) */
  --brass-ink: #7A5E27;   /* latão escurecido para texto (contraste AA sobre branco) */
  --ink: #1F1A1B;         /* texto principal (preto quente) */
  --stone: #6B6360;       /* texto secundário */
  --surface: #FAFAF8;     /* fundo da página (neutro quase-branco) */

  /* Fontes: interface em Plex Sans, títulos em Spectral, números em Plex Mono */
  --bs-body-font-family: 'IBM Plex Sans', system-ui, sans-serif;
  --fonte-titulo: 'Spectral', Georgia, serif;
  --fonte-dados: 'IBM Plex Mono', ui-monospace, monospace;
}

/* Rodapé sempre no pé da janela, mesmo com pouco conteúdo */
body {
  background-color: var(--surface);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.footer {
  margin-top: auto;
}

/* Borda dos cards num tom quente da marca, no lugar do cinza padrão */
.card {
  --bs-card-border-color: rgba(89, 17, 37, 0.10);
}

/* Títulos em Spectral */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.navbar-brand {
  font-family: var(--fonte-titulo);
}

/* Títulos de seção (dentro dos cards) com filete curto de latão */
.card-body h2 {
  color: var(--brand);
}
.card-body h2::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  margin-top: 8px;
  background-color: var(--brass);
  border-radius: 2px;
}

/* Fundo da marca (navbar, rodapé) */
.bg-brand {
  background-color: var(--brand) !important;
}

/* Botão da marca */
.btn-brand {
  background-color: var(--brand);
  color: #fff;
  white-space: nowrap; /* "Calcular" não quebra em duas linhas no mobile */
}

.btn-brand:hover,
.btn-brand:focus {
  background-color: var(--brand-dark);
  color: #fff;
}

/* Foco visível na cor da marca (acessibilidade por teclado) */
.btn-brand:focus-visible {
  outline: 3px solid var(--brand-dark);
  outline-offset: 2px;
  box-shadow: none;
}

/* Anel de foco dos campos na cor da marca (substitui o azul padrão do Bootstrap) */
.form-control:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 0.25rem rgba(89, 17, 37, 0.12);
}

/* Alternador de operação (+/−) do cartão "Datas e dias" */
.op-toggle .btn {
  --bs-btn-color: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-color: var(--brand);
  --bs-btn-hover-bg: rgba(89, 17, 37, 0.08);
  --bs-btn-hover-border-color: var(--brand);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--brand);
  --bs-btn-active-border-color: var(--brand);
  font-family: var(--fonte-dados);
}

.btn-check:focus-visible + .btn {
  outline: 3px solid var(--brand-dark);
  outline-offset: 2px;
  box-shadow: none;
}

/* Campos de data dividem o espaço e quebram linha em telas estreitas */
.input-group > .form-floating {
  flex: 1 1 9rem;
  min-width: 0;
}

/* --- Assinatura: tabelas de frações e porcentagem --- */
/* Faixas listradas num latão bem sutil; hover um pouco mais firme */
#tfr, #tpc {
  --bs-table-striped-bg: rgba(156, 123, 63, .06);
  --bs-table-hover-bg: rgba(156, 123, 63, .14);
}

/* Cabeçalho: rótulo na cor da marca, sublinhado em latão */
#tfr thead th, #tpc thead th {
  color: var(--brand);
  font-weight: 600;
  border-bottom: 2px solid var(--brass);
}

/* Corpo: dados em fonte monoespaçada (alinhamento tabular) */
#tfr tbody td, #tpc tbody td {
  font-family: var(--fonte-dados);
  vertical-align: middle;
}

/* 1ª coluna (fração / porcentagem): destaque em latão legível */
#tfr tbody td:first-child, #tpc tbody td:first-child {
  color: var(--brass-ink);
  font-weight: 500;
  font-size: 1.1rem;
}

/* 2ª coluna (número de dias): alinhada à direita para leitura tabular */
#tfr thead th:last-child, #tpc thead th:last-child,
#tfr tbody td:last-child, #tpc tbody td:last-child {
  text-align: right;
}
#tfr tbody td:last-child, #tpc tbody td:last-child {
  color: var(--ink);
}

/* Estado vazio: travessão discreto até o primeiro cálculo */
#tfr td.sem-valor, #tpc td.sem-valor {
  color: var(--stone);
}