/* =============================================================================
   SIMULADOR DE NEGÓCIOS — Tema "Dossiê"
   Paleta, tipografia IBM Plex, wizard 4 etapas, razão contábil, mobile-first
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. IMPORTAÇÃO DE FONTES (IBM Plex)
   --------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,400;0,600;1,400&family=IBM+Plex+Sans:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ---------------------------------------------------------------------------
   2. TOKENS DE DESIGN
   --------------------------------------------------------------------------- */
:root {
  /* Paleta Dossiê */
  --cor-papel:        #EFEAE0;   /* fundo geral */
  --cor-papel-off:    #E8E2D5;   /* fundo alternado, inputs */
  --cor-borda:        #C8BFB0;   /* bordas e separadores */
  --cor-texto:        #1B2B22;   /* verde-escuro — texto primário */
  --cor-texto-suave:  #5C6B60;   /* labels, metadados */
  --cor-acao:         #2F5233;   /* verde floresta — botões primários */
  --cor-acao-hover:   #224027;   /* hover do botão primário */
  --cor-ocre:         #C98A2C;   /* destaques, protocolo, selos */
  --cor-ocre-claro:   #F5EDD8;   /* fundo de badges ocre */
  --cor-alerta:       #B6452C;   /* terracota — erros, alertas */
  --cor-alerta-claro: #FAE8E4;   /* fundo de erros */
  --cor-verde-claro:  #E8F0EA;   /* fundo de sucesso */
  --cor-branco:       #FFFFFF;

  /* Tipografia */
  --fonte-titulo:  'IBM Plex Serif', Georgia, serif;
  --fonte-corpo:   'IBM Plex Sans', system-ui, sans-serif;
  --fonte-mono:    'IBM Plex Mono', 'Courier New', monospace;

  /* Escala de tipos */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-md:   1.125rem;   /* 18px */
  --text-lg:   1.25rem;    /* 20px */
  --text-xl:   1.5rem;     /* 24px */
  --text-2xl:  2rem;       /* 32px */
  --text-3xl:  2.5rem;     /* 40px */

  /* Espaçamento */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Layout */
  --max-width: 820px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;

  /* Sombras */
  --sombra-card: 0 2px 12px rgba(27, 43, 34, 0.10), 0 1px 3px rgba(27, 43, 34, 0.06);
  --sombra-elevado: 0 8px 32px rgba(27, 43, 34, 0.14), 0 2px 8px rgba(27, 43, 34, 0.08);

  /* Transições */
  --trans-rapida: 120ms ease;
  --trans-media:  220ms ease;
}

/* ---------------------------------------------------------------------------
   3. RESET E BASE
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--fonte-corpo);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.6;
  color: var(--cor-texto);
  background-color: var(--cor-papel);
  min-height: 100vh;
}

img { display: block; max-width: 100%; }
a { color: var(--cor-acao); text-decoration: underline; }
a:hover { color: var(--cor-acao-hover); }

/* ---------------------------------------------------------------------------
   4. HEADER
   --------------------------------------------------------------------------- */
.app-header {
  background-color: var(--cor-texto);
  color: var(--cor-papel);
  padding: var(--space-4) var(--space-6);
}

.app-header__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.app-header__logo {
  font-family: var(--fonte-titulo);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--cor-papel);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.app-header__logo span {
  display: block;
  font-family: var(--fonte-corpo);
  font-size: var(--text-xs);
  font-weight: 300;
  color: var(--cor-borda);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: var(--space-1);
}

/* ---------------------------------------------------------------------------
   5. STEPPER (Breadcrumb de Etapas)
   --------------------------------------------------------------------------- */
.stepper {
  background-color: var(--cor-papel-off);
  border-bottom: 1px solid var(--cor-borda);
  padding: var(--space-3) var(--space-6);
}

.stepper__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 0;
}

.stepper__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  position: relative;
  cursor: default;
}

.stepper__item:not(:last-child)::after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--cor-borda);
  margin: 0 var(--space-2);
}

.stepper__num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fonte-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  flex-shrink: 0;
  border: 1.5px solid var(--cor-borda);
  background-color: var(--cor-papel);
  color: var(--cor-texto-suave);
  transition: all var(--trans-rapida);
}

.stepper__label {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--cor-texto-suave);
  white-space: nowrap;
  transition: color var(--trans-rapida);
}

/* Estado: ativo */
.stepper__item--ativo .stepper__num {
  background-color: var(--cor-acao);
  border-color: var(--cor-acao);
  color: var(--cor-branco);
}
.stepper__item--ativo .stepper__label {
  color: var(--cor-texto);
  font-weight: 600;
}

/* Estado: concluído */
.stepper__item--concluido .stepper__num {
  background-color: var(--cor-ocre);
  border-color: var(--cor-ocre);
  color: var(--cor-branco);
}
.stepper__item--concluido .stepper__label {
  color: var(--cor-texto-suave);
}

/* Mobile: simplifica para "N/4" */
@media (max-width: 540px) {
  .stepper__label { display: none; }
  .stepper__item:not(:last-child)::after { margin: 0 var(--space-1); }
}

/* ---------------------------------------------------------------------------
   6. ÁREA PRINCIPAL
   --------------------------------------------------------------------------- */
.app-main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-8) var(--space-6) var(--space-16);
}

/* ---------------------------------------------------------------------------
   7. CARDS DE ETAPA
   --------------------------------------------------------------------------- */
.etapa {
  display: none;
  animation: fadeIn 200ms ease;
}
.etapa--ativa { display: block; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.etapa__titulo {
  font-family: var(--fonte-titulo);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--cor-texto);
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin-bottom: var(--space-2);
}

.etapa__subtitulo {
  font-size: var(--text-sm);
  color: var(--cor-texto-suave);
  margin-bottom: var(--space-8);
  line-height: 1.5;
}

.card {
  background-color: var(--cor-branco);
  border: 1px solid var(--cor-borda);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--sombra-card);
}

/* ---------------------------------------------------------------------------
   8. FORMULÁRIOS
   --------------------------------------------------------------------------- */
.form-grupo {
  margin-bottom: var(--space-6);
}

.form-grupo:last-of-type {
  margin-bottom: 0;
}

.form-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--cor-texto);
  margin-bottom: var(--space-2);
  letter-spacing: 0.01em;
}

.form-label-hint {
  display: block;
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--cor-texto-suave);
  margin-top: var(--space-1);
}

.form-input,
.form-select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--fonte-corpo);
  font-size: var(--text-base);
  color: var(--cor-texto);
  background-color: var(--cor-papel-off);
  border: 1.5px solid var(--cor-borda);
  border-radius: var(--radius-md);
  transition: border-color var(--trans-rapida), box-shadow var(--trans-rapida);
  appearance: none;
  -webkit-appearance: none;
}

.form-input:focus,
.form-select:focus {
  outline: none;
  border-color: var(--cor-acao);
  box-shadow: 0 0 0 3px rgba(47, 82, 51, 0.12);
  background-color: var(--cor-branco);
}

.form-input--erro,
.form-select--erro {
  border-color: var(--cor-alerta);
  background-color: var(--cor-alerta-claro);
}

.form-input--monetario {
  font-family: var(--fonte-mono);
  font-size: var(--text-md);
  letter-spacing: 0.02em;
}

.form-erro-msg {
  display: block;
  font-size: var(--text-xs);
  color: var(--cor-alerta);
  margin-top: var(--space-2);
  font-weight: 500;
}

/* Wrapper de moeda com prefixo R$ */
.input-moeda {
  position: relative;
}

.input-moeda::before {
  content: 'R$';
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--fonte-mono);
  font-size: var(--text-sm);
  color: var(--cor-texto-suave);
  pointer-events: none;
  z-index: 1;
}

.input-moeda .form-input {
  padding-left: calc(var(--space-3) + 24px);
}

/* Wrapper de percentual com sufixo % */
.input-percent {
  position: relative;
}

.input-percent::after {
  content: '%';
  position: absolute;
  right: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--fonte-mono);
  font-size: var(--text-sm);
  color: var(--cor-texto-suave);
  pointer-events: none;
}

.input-percent .form-input {
  padding-right: calc(var(--space-4) + 16px);
}

/* Select estilizado com chevron */
.select-wrapper {
  position: relative;
}

.select-wrapper::after {
  content: '▾';
  position: absolute;
  right: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--cor-texto-suave);
  pointer-events: none;
  font-size: var(--text-sm);
}

.select-wrapper .form-select {
  padding-right: calc(var(--space-4) + 20px);
  cursor: pointer;
}

/* Switch (toggle Sim/Não) */
.switch-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background-color: var(--cor-papel-off);
  border: 1.5px solid var(--cor-borda);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--trans-rapida);
}

.switch-wrapper:hover { border-color: var(--cor-acao); }

.switch-input { position: absolute; opacity: 0; width: 0; height: 0; }

.switch-track {
  width: 40px;
  height: 22px;
  background-color: var(--cor-borda);
  border-radius: 11px;
  flex-shrink: 0;
  position: relative;
  transition: background-color var(--trans-media);
}

.switch-track::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  background: var(--cor-branco);
  border-radius: 50%;
  top: 3px;
  left: 3px;
  transition: transform var(--trans-media);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.switch-input:checked + .switch-track {
  background-color: var(--cor-acao);
}

.switch-input:checked + .switch-track::after {
  transform: translateX(18px);
}

.switch-label-text {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--cor-texto);
  user-select: none;
}

/* Grid de dois campos lado a lado */
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

@media (max-width: 540px) {
  .form-grid-2 { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   9. BOTÕES
   --------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-family: var(--fonte-corpo);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--trans-rapida), box-shadow var(--trans-rapida),
              transform var(--trans-rapida);
  text-decoration: none;
  white-space: nowrap;
}

.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid var(--cor-ocre); outline-offset: 2px; }

/* Primário — verde floresta */
.btn--primario {
  background-color: var(--cor-acao);
  color: var(--cor-branco);
}
.btn--primario:hover {
  background-color: var(--cor-acao-hover);
  box-shadow: 0 2px 8px rgba(47, 82, 51, 0.25);
}

/* Secundário — ghost */
.btn--secundario {
  background-color: transparent;
  color: var(--cor-acao);
  border: 1.5px solid var(--cor-acao);
}
.btn--secundario:hover {
  background-color: var(--cor-verde-claro);
}

/* Ocre — destaque */
.btn--ocre {
  background-color: var(--cor-ocre);
  color: var(--cor-branco);
}
.btn--ocre:hover {
  background-color: #b37a25;
  box-shadow: 0 2px 8px rgba(201, 138, 44, 0.30);
}

/* Perigo */
.btn--perigo {
  background-color: transparent;
  color: var(--cor-alerta);
  border: 1.5px solid var(--cor-alerta);
}
.btn--perigo:hover { background-color: var(--cor-alerta-claro); }

/* Full width */
.btn--bloco { width: 100%; }

/* Desabilitado */
.btn:disabled,
.btn--desabilitado {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Barra de botões de navegação */
.nav-btns {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--cor-borda);
}

.nav-btns--direita { justify-content: flex-end; }

@media (max-width: 480px) {
  .nav-btns { flex-direction: column-reverse; }
  .btn { width: 100%; }
}

/* ---------------------------------------------------------------------------
   10. RAZÃO CONTÁBIL — Estilo de indicadores financeiros
   --------------------------------------------------------------------------- */
.razao {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.razao__item {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--cor-papel-off);
}

.razao__item:last-child { border-bottom: none; }

.razao__rotulo {
  font-size: var(--text-sm);
  color: var(--cor-texto-suave);
  flex-shrink: 0;
  white-space: nowrap;
}

.razao__pontilhado {
  flex: 1;
  border-bottom: 1px dotted var(--cor-borda);
  min-width: var(--space-6);
  margin-bottom: 3px;
}

.razao__valor {
  font-family: var(--fonte-mono);
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--cor-texto);
  text-align: right;
  white-space: nowrap;
}

.razao__valor--destaque {
  color: var(--cor-acao);
  font-weight: 600;
}

.razao__valor--negativo { color: var(--cor-alerta); }
.razao__valor--ocre     { color: var(--cor-ocre); font-weight: 600; }

/* ---------------------------------------------------------------------------
   11. CAIXAS DE RESULTADO / RECOMENDAÇÃO
   --------------------------------------------------------------------------- */
.resultado-card {
  background-color: var(--cor-branco);
  border: 1px solid var(--cor-borda);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--sombra-card);
  margin-bottom: var(--space-6);
}

.resultado-card + .resultado-card { margin-top: 0; }

.resultado-card--acao {
  border-left: 4px solid var(--cor-acao);
}

.resultado-card--ocre {
  border-left: 4px solid var(--cor-ocre);
  background-color: var(--cor-ocre-claro);
}

.resultado-card--alerta {
  border-left: 4px solid var(--cor-alerta);
  background-color: var(--cor-alerta-claro);
}

.resultado-card__titulo {
  font-family: var(--fonte-titulo);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--cor-texto);
  margin-bottom: var(--space-4);
  letter-spacing: -0.01em;
}

.resultado-card__forma-juridica {
  font-family: var(--fonte-titulo);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--cor-acao);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: var(--space-2);
}

.resultado-card__anexo {
  display: inline-block;
  font-family: var(--fonte-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--cor-ocre);
  background-color: var(--cor-ocre-claro);
  border: 1px solid var(--cor-ocre);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-3);
  letter-spacing: 0.04em;
  margin-bottom: var(--space-4);
}

.resultado-card__justificativa {
  font-size: var(--text-sm);
  color: var(--cor-texto);
  line-height: 1.7;
  white-space: pre-wrap;
  font-family: var(--fonte-corpo);
  background-color: var(--cor-papel-off);
  border: 1px solid var(--cor-borda);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-6);
  margin-top: var(--space-4);
  max-height: 380px;
  overflow-y: auto;
}

/* Selo de protocolo */
.protocolo-selo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background-color: var(--cor-papel-off);
  border: 1px solid var(--cor-borda);
  border-radius: var(--radius-sm);
  font-family: var(--fonte-mono);
  font-size: var(--text-xs);
  color: var(--cor-texto-suave);
  letter-spacing: 0.05em;
  margin-bottom: var(--space-6);
}

.protocolo-selo__hash {
  color: var(--cor-ocre);
  font-weight: 500;
  letter-spacing: 0.08em;
}

/* Badge de faixa Simples */
.badge-faixa {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--fonte-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background-color: var(--cor-verde-claro);
  color: var(--cor-acao);
  border: 1px solid rgba(47, 82, 51, 0.2);
}

/* ---------------------------------------------------------------------------
   12. PAINEL DE CENÁRIOS SALVOS (Etapa 4)
   --------------------------------------------------------------------------- */
.cenarios-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.cenario-card {
  background-color: var(--cor-branco);
  border: 1.5px solid var(--cor-borda);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  cursor: pointer;
  transition: border-color var(--trans-rapida), box-shadow var(--trans-rapida);
}

.cenario-card:hover {
  border-color: var(--cor-acao);
  box-shadow: var(--sombra-card);
}

.cenario-card--selecionado {
  border-color: var(--cor-acao);
  background-color: var(--cor-verde-claro);
  box-shadow: 0 0 0 2px rgba(47, 82, 51, 0.15);
}

.cenario-card__check {
  width: 20px;
  height: 20px;
  border: 2px solid var(--cor-borda);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  margin-top: 3px;
  transition: all var(--trans-rapida);
  position: relative;
  background-color: var(--cor-branco);
}

.cenario-card--selecionado .cenario-card__check {
  background-color: var(--cor-acao);
  border-color: var(--cor-acao);
}

.cenario-card--selecionado .cenario-card__check::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--cor-branco);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.cenario-card__body { flex: 1; min-width: 0; }

.cenario-card__nome {
  font-family: var(--fonte-titulo);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--cor-texto);
  margin-bottom: var(--space-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cenario-card__meta {
  font-size: var(--text-xs);
  color: var(--cor-texto-suave);
  margin-bottom: var(--space-3);
}

.cenario-card__indicadores {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
}

.cenario-card__kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cenario-card__kpi-label {
  font-size: var(--text-xs);
  color: var(--cor-texto-suave);
}

.cenario-card__kpi-valor {
  font-family: var(--fonte-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--cor-texto);
}

.cenario-card__acoes {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: flex-end;
}

/* Barra de ações fixas na etapa 4 */
.comparar-barra {
  position: sticky;
  bottom: 0;
  background-color: var(--cor-papel);
  border-top: 1px solid var(--cor-borda);
  padding: var(--space-4) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin: var(--space-6) calc(-1 * var(--space-6)) 0;
  box-shadow: 0 -4px 16px rgba(27, 43, 34, 0.08);
}

.comparar-barra__contador {
  font-size: var(--text-sm);
  color: var(--cor-texto-suave);
}

.comparar-barra__contador strong {
  color: var(--cor-acao);
  font-family: var(--fonte-mono);
}

@media (max-width: 540px) {
  .comparar-barra { flex-direction: column; align-items: stretch; }
}

/* ---------------------------------------------------------------------------
   13. TABELA COMPARATIVA
   --------------------------------------------------------------------------- */
.tabela-comparativa-wrapper {
  overflow-x: auto;
  margin-top: var(--space-6);
  border: 1px solid var(--cor-borda);
  border-radius: var(--radius-lg);
  box-shadow: var(--sombra-card);
}

.tabela-comparativa {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  background-color: var(--cor-branco);
}

.tabela-comparativa th,
.tabela-comparativa td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--cor-borda);
  vertical-align: middle;
}

.tabela-comparativa th:first-child,
.tabela-comparativa td:first-child {
  background-color: var(--cor-papel-off);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--cor-texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  min-width: 160px;
  border-right: 1px solid var(--cor-borda);
}

.tabela-comparativa thead th {
  background-color: var(--cor-texto);
  color: var(--cor-papel);
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: -0.01em;
}

.tabela-comparativa thead th:first-child {
  background-color: var(--cor-texto);
  color: var(--cor-papel);
}

.tabela-comparativa tbody tr:last-child td { border-bottom: none; }

/* Destaque de melhor valor na tabela */
.tabela-comparativa .melhor {
  background-color: var(--cor-verde-claro);
  font-weight: 600;
  color: var(--cor-acao);
  position: relative;
}

.tabela-comparativa .melhor::after {
  content: '★';
  font-size: 10px;
  color: var(--cor-ocre);
  margin-left: var(--space-1);
}

.tabela-comparativa td .mono {
  font-family: var(--fonte-mono);
  font-size: var(--text-sm);
}

/* ---------------------------------------------------------------------------
   14. ESTADOS DE CARREGAMENTO / VAZIO
   --------------------------------------------------------------------------- */
.estado-carregando {
  text-align: center;
  padding: var(--space-16) var(--space-6);
  color: var(--cor-texto-suave);
}

.spinner {
  display: inline-block;
  width: 32px;
  height: 32px;
  border: 3px solid var(--cor-borda);
  border-top-color: var(--cor-acao);
  border-radius: 50%;
  animation: girar 600ms linear infinite;
  margin-bottom: var(--space-4);
}

@keyframes girar { to { transform: rotate(360deg); } }

.estado-vazio {
  text-align: center;
  padding: var(--space-12) var(--space-6);
  color: var(--cor-texto-suave);
}

.estado-vazio__icone {
  font-size: 2.5rem;
  margin-bottom: var(--space-4);
  opacity: 0.4;
}

.estado-vazio__titulo {
  font-family: var(--fonte-titulo);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--cor-texto);
  margin-bottom: var(--space-2);
}

/* ---------------------------------------------------------------------------
   15. MENSAGENS DE ALERTA / SUCESSO
   --------------------------------------------------------------------------- */
.alerta {
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  margin-bottom: var(--space-6);
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  line-height: 1.5;
}

.alerta--erro {
  background-color: var(--cor-alerta-claro);
  border: 1px solid var(--cor-alerta);
  color: var(--cor-alerta);
}

.alerta--sucesso {
  background-color: var(--cor-verde-claro);
  border: 1px solid rgba(47, 82, 51, 0.3);
  color: var(--cor-acao);
}

.alerta--info {
  background-color: var(--cor-ocre-claro);
  border: 1px solid rgba(201, 138, 44, 0.35);
  color: #7a5218;
}

.alerta--oculto { display: none; }

/* ---------------------------------------------------------------------------
   16. FOOTER
   --------------------------------------------------------------------------- */
.app-footer {
  margin-top: var(--space-16);
  border-top: 1px solid var(--cor-borda);
  padding: var(--space-6);
  text-align: center;
}

.app-footer__links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-6);
  list-style: none;
  margin-bottom: var(--space-3);
}

.app-footer__links a {
  font-size: var(--text-xs);
  color: var(--cor-texto-suave);
  text-decoration: none;
  transition: color var(--trans-rapida);
}

.app-footer__links a:hover { color: var(--cor-acao); }

.app-footer__copy {
  font-size: var(--text-xs);
  color: var(--cor-borda);
  font-family: var(--fonte-mono);
}

/* ---------------------------------------------------------------------------
   17. DIVISOR DECORATIVO TIPO DOSSIÊ
   --------------------------------------------------------------------------- */
.divisor-dossie {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-8) 0;
  color: var(--cor-borda);
  font-family: var(--fonte-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.divisor-dossie::before,
.divisor-dossie::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--cor-borda);
}

/* ---------------------------------------------------------------------------
   18. UTILITÁRIOS
   --------------------------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.oculto { display: none !important; }

.text-centro { text-align: center; }
.text-direita { text-align: right; }

.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }

/* Respeita preferência por movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}