/* Design system do painel. CSS puro (sem build step) — complementa o Tailwind. */
:root {
  --cor-primaria: #1e40af;
  --cor-primaria-escura: #1e3a8a;
  --cor-sucesso: #16a34a;
  --cor-alerta: #ca8a04;
  --cor-erro: #dc2626;
  --cor-fundo: #f8fafc;
  --cor-card: #ffffff;
  --cor-borda: #e2e8f0;
  --cor-texto: #0f172a;
  --cor-texto-suave: #64748b;
}

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background-color: var(--cor-fundo);
  color: var(--cor-texto);
}

/* ---- Botoes ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, filter 0.15s ease;
  white-space: nowrap;
}
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-primario { background-color: var(--cor-primaria); color: #fff; }
.btn-primario:hover:not(:disabled) { background-color: var(--cor-primaria-escura); }
.btn-secundario { background-color: #fff; color: var(--cor-texto); border-color: var(--cor-borda); }
.btn-secundario:hover:not(:disabled) { background-color: #f1f5f9; }
.btn-perigo { background-color: var(--cor-erro); color: #fff; }
.btn-perigo:hover:not(:disabled) { filter: brightness(0.92); }
.btn-sm { padding: 0.25rem 0.625rem; font-size: 0.8125rem; }

/* ---- Formularios ---- */
.campo {
  width: 100%;
  border-radius: 0.5rem;
  border: 1px solid var(--cor-borda);
  background: #fff;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.campo:focus {
  border-color: var(--cor-primaria);
  box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.12);
}
.rotulo {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #334155;
}

/* ---- Cartoes e tabelas ---- */
.cartao {
  background: var(--cor-card);
  border: 1px solid var(--cor-borda);
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.tabela-linha:hover { background-color: #f8fafc; }
.tabela-scroll { overflow-x: auto; }

/* ---- Selo de status ---- */
.selo {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 0.125rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}
.selo-novo, .selo-aberta, .selo-agendada, .selo-registrada, .selo-pendente,
.selo-local { background: #dbeafe; color: #1e40af; }
.selo-contactado, .selo-em_analise, .selo-em_andamento, .selo-bairro,
.selo-normal, .selo-planejamento { background: #fef9c3; color: #854d0e; }
.selo-comprometido, .selo-concluida, .selo-ativa, .selo-em_producao,
.selo-cidade, .selo-regional, .selo-estadual { background: #dcfce7; color: #166534; }
.selo-inativo, .selo-cancelada, .selo-inativa, .selo-alta,
.selo-encerrada, .selo-arquivada { background: #fee2e2; color: #991b1b; }

/* ---- Skeleton de carregamento ---- */
.skeleton {
  background: linear-gradient(90deg, #eef2f7 25%, #e2e8f0 37%, #eef2f7 63%);
  background-size: 400% 100%;
  animation: brilho 1.4s ease infinite;
  border-radius: 0.375rem;
  min-height: 1rem;
}
@keyframes brilho {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* ---- Navegacao lateral ---- */
.nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #cbd5e1;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-item:hover { background-color: rgba(255, 255, 255, 0.08); color: #fff; }
.nav-item.ativo { background-color: rgba(255, 255, 255, 0.14); color: #fff; }

/* ---- Toast ---- */
#toasts {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: #fff;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
  min-width: 260px;
  max-width: 380px;
  animation: entrar 0.2s ease-out;
}
@keyframes entrar {
  from { opacity: 0; transform: translateX(16px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ---- Modal ---- */
.modal-fundo {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(15, 23, 42, 0.5);
}
.modal-caixa {
  background: #fff;
  border-radius: 0.75rem;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
}

/* ---- Kanban ---- */
.kanban-coluna.arrastando-sobre {
  outline: 2px dashed var(--cor-primaria);
  outline-offset: -4px;
  background: #eff6ff;
}
.kanban-card { cursor: grab; }
.kanban-card:active { cursor: grabbing; }

/* ---- Calendario ---- */
.dia-calendario {
  min-height: 92px;
  border: 1px solid var(--cor-borda);
  padding: 0.25rem;
  font-size: 0.75rem;
  background: #fff;
}
.dia-calendario.fora-do-mes { background: #f8fafc; color: #94a3b8; }
.dia-calendario.hoje { outline: 2px solid var(--cor-primaria); outline-offset: -2px; }

@media print {
  .sem-impressao { display: none !important; }
}