/* =====================================================
   GLOBAL.CSS - MIPRA
   Padronização geral do sistema
===================================================== */

/* ========================= */
/* VARIÁVEIS GERAIS */
/* ========================= */

:root {
  --verde: #008b3a;
  --verde-escuro: #006b2d;
  --verde-claro: #16a34a;

  --laranja: #ff6500;
  --laranja-claro: #ff8a1d;
  --laranja-escuro: #d94f00;

  --vermelho: #dc2626;
  --vermelho-escuro: #b91c1c;

  --preto: #111111;
  --branco: #ffffff;

  --cinza: #6b7280;
  --cinza-escuro: #374151;
  --cinza-claro: #f5f5f5;

  --texto: #111111;
  --texto-suave: #555555;

  --bg: #ffffff;
  --bg-suave: #f7f7f7;
  --bg-card: #ffffff;

  --card: #ffffff;
  --borda: #e7e7e7;

  --sombra: 0 8px 24px rgba(0, 0, 0, .08);
  --sombra-hover: 0 14px 34px rgba(0, 0, 0, .14);

  --radius-pequeno: 8px;
  --radius-medio: 12px;
  --radius-grande: 18px;

  --fonte-padrao: Arial, Helvetica, sans-serif;
}

/* ========================= */
/* RESET */
/* ========================= */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--fonte-padrao);
  background: var(--bg);
  color: var(--texto);
  font-size: 14px;
  line-height: 1.45;
}

a {
  text-decoration: none;
  color: inherit;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  opacity: .65;
  cursor: not-allowed;
}

img {
  max-width: 100%;
  display: block;
}

/* ========================= */
/* CONTAINERS */
/* ========================= */

.container,
.home,
.page-container {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 14px 18px 0;
}

.page-header {
  margin: 24px 0 18px;
}

.page-header h1 {
  margin: 0;
  font-size: 28px;
  font-weight: 900;
  color: var(--texto);
}

.page-header p {
  margin: 6px 0 0;
  color: var(--texto-suave);
}

/* ========================= */
/* TÍTULOS */
/* ========================= */

h1,
h2,
h3,
h4 {
  color: var(--texto);
}

.titulo-pagina {
  font-size: 28px;
  font-weight: 900;
  margin: 0 0 8px;
}

.subtitulo-pagina {
  color: var(--texto-suave);
  margin: 0 0 18px;
}

/* ========================= */
/* CARDS PADRÃO */
/* ========================= */

.card,
.form-card,
.table-card {
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: var(--radius-grande);
  box-shadow: var(--sombra);
}

.card {
  padding: 18px;
}

.form-card {
  width: 100%;
  max-width: 900px;
  margin: 24px auto;
  padding: 24px;
}

.table-card {
  margin-top: 24px;
  padding: 18px;
  overflow-x: auto;
}

/* ========================= */
/* FORMULÁRIOS */
/* ========================= */

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.form-grupo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-grupo.full,
.full {
  grid-column: 1 / -1;
}

label {
  font-size: 13px;
  font-weight: 800;
  color: var(--texto);
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--borda);
  border-radius: var(--radius-medio);
  background: #fff;
  color: var(--texto);
  font-size: 14px;
  outline: none;
  transition: .2s ease;
}

input,
select {
  height: 44px;
  padding: 0 14px;
}

textarea {
  min-height: 95px;
  padding: 12px 14px;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--verde);
  box-shadow: 0 0 0 3px rgba(0, 139, 58, .12);
}

input::placeholder,
textarea::placeholder {
  color: #999;
}

/* ========================= */
/* BOTÕES PADRÃO */
/* ========================= */

.btn {
  min-height: 42px;
  border: 0;
  border-radius: var(--radius-medio);
  padding: 11px 18px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  font-size: 14px;
  font-weight: 900;
  text-align: center;

  transition: .2s ease;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--sombra);
}

.btn-cadastrar,
.btn-salvar {
  background: var(--verde);
  color: #fff;
}

.btn-cadastrar:hover,
.btn-salvar:hover {
  background: var(--verde-escuro);
}

.btn-alterar,
.btn-editar {
  background: var(--laranja);
  color: #fff;
}

.btn-alterar:hover,
.btn-editar:hover {
  background: var(--laranja-escuro);
}

.btn-excluir {
  background: var(--preto);
  color: #fff;
}

.btn-excluir:hover {
  background: #000;
}

.btn-cancelar {
  background: var(--vermelho);
  color: #fff;
}

.btn-cancelar:hover {
  background: var(--vermelho-escuro);
}

.btn-limpar,
.btn-voltar {
  background: #e5e7eb;
  color: #222;
}

.btn-limpar:hover,
.btn-voltar:hover {
  background: #d1d5db;
}

.btn-pesquisar {
  background: var(--verde-escuro);
  color: #fff;
}

.btn-pesquisar:hover {
  background: var(--verde);
}

.btn-pequeno {
  min-height: 34px;
  padding: 8px 12px;
  font-size: 12px;
}

.acoes-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

/* ========================= */
/* TABELAS PADRÃO */
/* ========================= */

.tabela {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}

.tabela th,
.tabela td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--borda);
  text-align: left;
  vertical-align: middle;
}

.tabela th {
  background: var(--bg-suave);
  color: var(--texto);
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.tabela td {
  color: var(--texto-suave);
}

.tabela tr:hover td {
  background: #fafafa;
}

.tabela-acoes {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ========================= */
/* BADGES */
/* ========================= */

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 24px;

  padding: 4px 10px;

  border-radius: 999px;

  font-size: 11px;
  font-weight: 900;

  line-height: 1;
}

.badge-verde,
.badge.ativo {
  background: #dcfce7;
  color: #166534;
}

.badge-laranja {
  background: #ffedd5;
  color: #c2410c;
}

.badge-vermelho,
.badge.inativo {
  background: #fee2e2;
  color: #991b1b;
}

.badge-azul {
  background: rgba(33, 150, 243, .12);
  color: #1565c0;
}

.badge-cinza {
  background: rgba(120, 120, 120, .12);
  color: #666;
}

.badge-preto {
  background: #111;
  color: #fff;
}

/* ========================= */
/* ALERTAS */
/* ========================= */

.alerta {
  border-radius: var(--radius-medio);
  padding: 12px 14px;
  margin: 12px 0;
  font-weight: 700;
}

.alerta-sucesso {
  background: #dcfce7;
  color: #166534;
}

.alerta-erro {
  background: #fee2e2;
  color: #991b1b;
}

.alerta-aviso {
  background: #ffedd5;
  color: #9a3412;
}

/* ========================= */
/* IMAGEM PREVIEW */
/* ========================= */

.preview-img {
  width: 120px;
  height: 90px;
  border: 1px solid var(--borda);
  border-radius: var(--radius-medio);
  object-fit: cover;
  background: var(--bg-suave);
}

/* ========================= */
/* MODAL BASE */
/* ========================= */

.modal {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: none;
  align-items: center;
  justify-content: center;

  background: rgba(0, 0, 0, .45);
  padding: 18px;
}

.modal.ativo {
  display: flex;
}

.modal-content {
  width: 100%;
  max-width: 620px;
  max-height: 92vh;
  overflow-y: auto;

  background: #fff;
  border-radius: var(--radius-grande);
  padding: 24px;
  box-shadow: var(--sombra-hover);
}

/* ========================= */
/* UTILITÁRIOS */
/* ========================= */

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.mt-1 {
  margin-top: 8px;
}

.mt-2 {
  margin-top: 16px;
}

.mt-3 {
  margin-top: 24px;
}

.mb-1 {
  margin-bottom: 8px;
}

.mb-2 {
  margin-bottom: 16px;
}

.hidden {
  display: none !important;
}

/* ========================= */
/* BOTÃO VOLTAR PADRÃO */
/* ========================= */

.area-voltar {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  margin-bottom: 18px;
}

.btn-voltar-sistema {
  min-height: 42px;
  padding: 10px 18px;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  border-radius: var(--radius-medio);

  background: #e5e7eb;
  color: #222;

  font-size: 14px;
  font-weight: 800;

  transition: .2s ease;
}

.btn-voltar-sistema:hover {
  background: #d1d5db;
  transform: translateY(-1px);
}

/* ========================= */
/* RESPONSIVO GLOBAL */
/* ========================= */

@media (max-width: 768px) {

  body {
    padding-bottom: 68px;
  }

  .container,
  .home,
  .page-container {
    padding: 12px;
  }

  .form-card {
    margin: 16px auto;
    padding: 18px;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .acoes-form {
    flex-direction: column;
  }

  .btn {
    width: 100%;
  }

  .page-header h1,
  .titulo-pagina {
    font-size: 23px;
  }

  .table-card {
    padding: 12px;
  }

}

@media (max-width: 480px) {

  .form-card,
  .card,
  .table-card,
  .modal-content {
    border-radius: 14px;
  }

  input,
  select {
    height: 42px;
  }

  .modal {
    padding: 12px;
  }

  .modal-content {
    padding: 18px;
  }

}