/* =====================================================================
   MTI Group — Design System
   Tokens de marca + componentes reutilizados em todas as telas do sistema.
   ===================================================================== */

:root {
  /* Cor — paleta oficial MTI */
  --mti-verde: #00A859;
  --mti-verde-escuro: #007A40;
  --mti-verde-secundario: #009245;
  --mti-verde-claro-marca: #7AC143;
  --mti-verde-tint: #EAF8F0;
  --mti-texto: #333333;
  --mti-texto-suave: #6B7280;
  --mti-texto-fraco: #9CA3AF;
  --mti-borda: #E4E7EB;
  --mti-fundo: #F2F2F2;
  --mti-fundo-card: #FFFFFF;
  --mti-vermelho: #C0392B;
  --mti-vermelho-tint: #FDEAEA;
  --mti-amarelo: #A67C00;
  --mti-amarelo-tint: #FFF4D6;

  /* Tipografia */
  --fonte-titulo: 'Sora', 'Segoe UI', sans-serif;
  --fonte-corpo: 'Inter', 'Segoe UI', sans-serif;
  --fonte-dados: 'JetBrains Mono', 'Courier New', monospace;

  /* Espaçamento (escala 4px) */
  --esp-1: 4px;  --esp-2: 8px;  --esp-3: 12px; --esp-4: 16px;
  --esp-5: 20px; --esp-6: 24px; --esp-8: 32px; --esp-10: 40px;

  --raio: 10px;
  --raio-sm: 6px;
  --sombra: 0 1px 3px rgba(17, 24, 39, .06), 0 1px 2px rgba(17, 24, 39, .04);
  --sombra-hover: 0 8px 24px rgba(17, 24, 39, .10);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--fonte-corpo);
  color: var(--mti-texto);
  background: var(--mti-fundo);
  -webkit-font-smoothing: antialiased;
}

/* --- Assinatura: barra de gradiente no topo de toda tela --- */
.mti-topbar-assinatura {
  height: 4px;
  width: 100%;
  background: linear-gradient(90deg, var(--mti-verde) 0%, var(--mti-verde-claro-marca) 100%);
}

/* --- Cabeçalho / navegação --- */
.mti-header {
  background: var(--mti-fundo-card);
  padding: var(--esp-4) var(--esp-8);
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: var(--sombra);
  gap: var(--esp-4);
  flex-wrap: wrap;
}
.mti-marca { display: flex; align-items: center; gap: var(--esp-3); }
.mti-marca img { height: 32px; width: 32px; border-radius: 7px; display: block; }
.mti-marca .mti-titulo-pagina {
  font-family: var(--fonte-titulo);
  font-size: 17px;
  font-weight: 600;
  color: var(--mti-texto);
  line-height: 1.2;
}
.mti-marca .mti-wordmark {
  font-family: var(--fonte-titulo);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mti-texto-fraco);
}
.mti-nav { display: flex; gap: var(--esp-5); margin-top: 2px; }
.mti-nav a {
  font-family: var(--fonte-corpo);
  font-size: 13px;
  font-weight: 500;
  color: var(--mti-texto-suave);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.mti-nav a:hover { color: var(--mti-texto); }
.mti-nav a.ativo { color: var(--mti-verde); border-color: var(--mti-verde); font-weight: 600; }
.mti-acoes { display: flex; gap: var(--esp-2); align-items: center; }

/* --- Botões --- */
.mti-btn {
  font-family: var(--fonte-corpo);
  padding: 9px 18px;
  border: none;
  border-radius: var(--raio-sm);
  background: var(--mti-verde);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, transform .05s;
}
.mti-btn:hover { background: var(--mti-verde-escuro); }
.mti-btn:active { transform: translateY(1px); }
.mti-btn:disabled { opacity: .55; cursor: not-allowed; }
.mti-btn.secundario { background: var(--mti-fundo); color: var(--mti-texto); }
.mti-btn.secundario:hover { background: #E9E9E9; }
.mti-btn.perigo { background: var(--mti-vermelho-tint); color: var(--mti-vermelho); }
.mti-btn.perigo:hover { background: #FBDADA; }
.mti-btn.mini { padding: 5px 11px; font-size: 11.5px; border-radius: 5px; }

/* --- Cards / superfícies --- */
.mti-card {
  background: var(--mti-fundo-card);
  border: 1px solid var(--mti-borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}

/* --- Tabelas --- */
.mti-tabela { width: 100%; border-collapse: collapse; background: var(--mti-fundo-card); border-radius: var(--raio); overflow: hidden; box-shadow: var(--sombra); }
.mti-tabela th, .mti-tabela td { text-align: left; padding: 12px 16px; font-size: 13px; border-bottom: 1px solid var(--mti-borda); }
.mti-tabela th {
  font-family: var(--fonte-corpo);
  color: var(--mti-texto-suave);
  text-transform: uppercase;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .05em;
  background: transparent;
  border-bottom: 1px solid var(--mti-texto);
  border-bottom-color: var(--mti-borda);
  border-bottom-width: 2px;
}
.mti-tabela tbody tr:hover { background: var(--mti-verde-tint); }
.mti-tabela tbody tr:last-child td { border-bottom: none; }

/* --- Badges de status (pill com indicador) --- */
.mti-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 8px; border-radius: 20px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.mti-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; }
.mti-badge.ativo { background: var(--mti-verde-tint); color: var(--mti-verde-escuro); }
.mti-badge.ativo::before { background: var(--mti-verde); }
.mti-badge.inativo { background: var(--mti-vermelho-tint); color: var(--mti-vermelho); }
.mti-badge.inativo::before { background: var(--mti-vermelho); }
.mti-badge.pendente, .mti-badge.prospect { background: var(--mti-amarelo-tint); color: var(--mti-amarelo); }
.mti-badge.pendente::before, .mti-badge.prospect::before { background: var(--mti-amarelo); }

/* --- Dados técnicos (CPF/CNPJ, IDs, códigos) --- */
.mti-dado-tecnico { font-family: var(--fonte-dados); font-size: 12.5px; letter-spacing: -.01em; }

/* --- Formulários --- */
.mti-label { display: block; font-family: var(--fonte-corpo); font-size: 12px; font-weight: 600; color: var(--mti-texto); margin-bottom: 5px; }
.mti-input, select.mti-input, textarea.mti-input {
  width: 100%; padding: 9px 11px; border: 1px solid var(--mti-borda); border-radius: var(--raio-sm);
  font-size: 13px; font-family: var(--fonte-corpo); color: var(--mti-texto); background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.mti-input:focus, select.mti-input:focus, textarea.mti-input:focus {
  outline: none; border-color: var(--mti-verde); box-shadow: 0 0 0 3px var(--mti-verde-tint);
}
.mti-fieldset { border: none; margin-bottom: var(--esp-6); padding: 0; }
.mti-legend { font-family: var(--fonte-titulo); font-size: 12.5px; font-weight: 600; color: var(--mti-verde-escuro); text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--esp-3); }

/* --- Mensagens de status inline --- */
.mti-status-msg { font-size: 13px; padding: 10px 14px; border-radius: var(--raio-sm); margin-bottom: var(--esp-4); display: none; }
.mti-status-msg.ok { background: var(--mti-verde-tint); color: var(--mti-verde-escuro); display: block; }
.mti-status-msg.erro { background: var(--mti-vermelho-tint); color: var(--mti-vermelho); display: block; }
.mti-status-msg.aviso { background: var(--mti-amarelo-tint); color: var(--mti-amarelo); display: block; }

/* --- Toast --- */
#toast {
  position: fixed; bottom: 24px; right: 24px; padding: 12px 18px; border-radius: var(--raio-sm);
  font-family: var(--fonte-corpo); font-size: 13px; font-weight: 600; color: #fff;
  box-shadow: var(--sombra-hover); opacity: 0; transform: translateY(10px);
  transition: opacity .25s, transform .25s; pointer-events: none; max-width: 320px; z-index: 100;
}
#toast.mostrar { opacity: 1; transform: translateY(0); }
#toast.sucesso { background: var(--mti-verde-escuro); }
#toast.erro { background: var(--mti-vermelho); }

/* --- Estado vazio --- */
.mti-vazio { text-align: center; padding: 64px 24px; color: var(--mti-texto-fraco); font-size: 14px; }

main.mti-main { padding: var(--esp-8); max-width: 1200px; margin: 0 auto; }