/*
 * prorural.css — Design System Prorural
 * Fonte da verdade visual para todos os projetos da intranet.
 *
 * COMO USAR EM QUALQUER PROJETO:
 *   <link rel="stylesheet" href="https://portal.lojasprorural.com.br/assets/prorural.css">
 *
 * PARA MUDAR O VISUAL DE TODOS OS PROJETOS:
 *   edite este arquivo → faça deploy no portal → todos atualizam automaticamente.
 *
 * Versão: 1.0.0 | Abril 2026
 */

/* ══════════════════════════════════════════════════════════
   FONTE
   ══════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ══════════════════════════════════════════════════════════
   TOKENS DE MARCA (altere aqui para mudar tudo de uma vez)
   ══════════════════════════════════════════════════════════ */
:root {
  /* Cores principais */
  --pr-brand:        #1e3a8a;   /* Azul Prorural */
  --pr-brand-mid:    #2563eb;   /* Azul médio */
  --pr-brand-cyan:   #0ea5e9;   /* Ciano acento */
  --pr-red:          #dc2626;   /* Vermelho Prorural */

  /* Superfícies */
  --pr-bg:           #f0f2f7;   /* Fundo da página */
  --pr-surface:      #ffffff;   /* Cards, inputs */
  --pr-border:       #e4e8ef;   /* Borda suave */
  --pr-border-input: #d1d5db;   /* Borda de input */

  /* Tipografia */
  --pr-text:         #111827;   /* Texto principal */
  --pr-text-muted:   #6b7280;   /* Texto secundário */
  --pr-text-faint:   #9ca3af;   /* Texto muito suave */
}

/* ══════════════════════════════════════════════════════════
   BASE & TIPOGRAFIA
   ══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

body {
  background: var(--pr-bg);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--pr-text);
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

/* ══════════════════════════════════════════════════════════
   HEADER PADRÃO PRORURAL
   (use como referência — implemente no HTML de cada projeto)
   ══════════════════════════════════════════════════════════ */
.pr-header {
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
  position: sticky;
  top: 0;
  z-index: 20;
  padding: .875rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Linha de acento gradiente na base do header */
.pr-header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2.5px;
  background: linear-gradient(90deg, var(--pr-brand) 0%, var(--pr-brand-cyan) 55%, rgba(14,165,233,0) 100%);
}

.pr-header-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}
.pr-header-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--pr-text);
  line-height: 1.2;
}
.pr-header-subtitle {
  font-size: .8rem;
  color: var(--pr-text-muted);
  line-height: 1.2;
}

/* Logo mark quadrado (use com iniciais do projeto dentro) */
.pr-logo-mark {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: linear-gradient(140deg, var(--pr-brand) 0%, var(--pr-brand-cyan) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 13px;
  color: #fff;
  letter-spacing: -.5px;
  box-shadow: 0 4px 14px rgba(30, 58, 138, .28);
  flex-shrink: 0;
  font-family: 'Inter', sans-serif;
  user-select: none;
}

/* ══════════════════════════════════════════════════════════
   CARDS
   ══════════════════════════════════════════════════════════ */
.pr-card, .card {
  background: var(--pr-surface);
  border: 1px solid var(--pr-border);
  box-shadow: 0 1px 4px rgba(15,23,42,.05), 0 8px 24px rgba(15,23,42,.04);
  border-radius: 1rem;
}

.pr-stat-card, .stat-card {
  background: var(--pr-surface);
  border: 1px solid var(--pr-border);
  box-shadow: 0 1px 4px rgba(15,23,42,.05);
  border-radius: 1rem;
  padding: 1.1rem 1.25rem;
}

/* ══════════════════════════════════════════════════════════
   TABELAS
   ══════════════════════════════════════════════════════════ */
table { width: 100%; border-collapse: collapse; font-size: .78rem; }

th {
  background: #eef2ff;
  color: var(--pr-brand);
  padding: .5rem .75rem;
  text-align: left;
  border-bottom: 2px solid #c7d2fe;
  white-space: nowrap;
  font-weight: 700;
  font-size: .67rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

td {
  padding: .44rem .75rem;
  border-bottom: 1px solid #f3f4f6;
  color: #374151;
}

tr:last-child td { border-bottom: none; }
tr:hover td { background: #f9fafb; }

/* ══════════════════════════════════════════════════════════
   FORM FIELDS
   ══════════════════════════════════════════════════════════ */
.pr-field, .field {
  background: var(--pr-surface);
  border: 1.5px solid var(--pr-border-input);
  color: var(--pr-text);
  border-radius: .625rem;
  padding: .6rem 1rem;
  width: 100%;
  font-size: .875rem;
  font-family: inherit;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}

.pr-field:focus, .field:focus {
  border-color: var(--pr-brand-mid);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

/* ══════════════════════════════════════════════════════════
   BOTÕES
   ══════════════════════════════════════════════════════════ */
.pr-btn, .btn {
  border: none;
  border-radius: .625rem;
  padding: .65rem 1.5rem;
  font-weight: 600;
  cursor: pointer;
  font-size: .875rem;
  font-family: inherit;
  transition: all .18s;
  letter-spacing: .01em;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

.pr-btn:disabled, .btn:disabled { opacity: .4; cursor: not-allowed; }

/* Azul (CTA principal) */
.pr-btn-primary, .b-blue {
  background: linear-gradient(135deg, var(--pr-brand) 0%, var(--pr-brand-mid) 100%);
  color: #fff;
  box-shadow: 0 2px 10px rgba(30, 58, 138, .28);
}
.pr-btn-primary:hover:not(:disabled), .b-blue:hover:not(:disabled) {
  box-shadow: 0 4px 16px rgba(30, 58, 138, .38);
  transform: translateY(-1px);
}

/* Neutro (secundário) */
.pr-btn-secondary, .b-slate {
  background: #f3f4f6;
  color: #374151;
  border: 1.5px solid #e5e7eb;
}
.pr-btn-secondary:hover:not(:disabled), .b-slate:hover:not(:disabled) {
  background: #e9ebee;
  border-color: #d1d5db;
}

/* Verde (confirmar / sucesso) */
.pr-btn-success, .b-green {
  background: linear-gradient(135deg, #047857 0%, #059669 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(5, 150, 105, .25);
}
.pr-btn-success:hover:not(:disabled), .b-green:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(5, 150, 105, .3);
}

/* Vermelho (destrutivo) */
.pr-btn-danger {
  background: linear-gradient(135deg, #b91c1c 0%, var(--pr-red) 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(220, 38, 38, .25);
}
.pr-btn-danger:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(220, 38, 38, .3);
}

/* ══════════════════════════════════════════════════════════
   PILLS & TAGS (badges de status)
   ══════════════════════════════════════════════════════════ */
.pr-pill, .pill {
  border-radius: 999px;
  padding: .15rem .65rem;
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .02em;
  display: inline-block;
}

/* Verde = OK / Casado / Ativo */
.pr-pill-green, .pl-g { background: #d1fae5; color: #065f46; }
/* Vermelho = Erro / Divergência */
.pr-pill-red, .pl-r   { background: #fee2e2; color: #991b1b; }
/* Âmbar = Atenção / Parcial */
.pr-pill-amber, .pl-a { background: #fef3c7; color: #92400e; }
/* Azul = Info / Neutro */
.pr-pill-blue, .pl-b  { background: #e0e7ff; color: #3730a3; }
/* Cinza = Desativo */
.pr-pill-gray         { background: #f3f4f6; color: #6b7280; }

/* Tags (bordas retas) */
.pr-tag, .tag { border-radius: .375rem; padding: .15rem .5rem; font-size: .7rem; font-weight: 700; display: inline-block; }
.tg { background: #d1fae5; color: #065f46; }
.tr { background: #fee2e2; color: #991b1b; }
.tb { background: #e0e7ff; color: #3730a3; }
.ta { background: #fef3c7; color: #92400e; }

/* ══════════════════════════════════════════════════════════
   TAB NAV
   ══════════════════════════════════════════════════════════ */
.pr-tab, .tab-btn {
  padding: .65rem 1.4rem;
  font-size: .875rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: transparent;
  border-bottom: 2.5px solid transparent;
  color: var(--pr-text-muted);
  transition: color .15s, border-color .15s;
  white-space: nowrap;
}
.pr-tab.active, .tab-btn.active {
  color: var(--pr-brand);
  border-bottom-color: var(--pr-brand);
}
.pr-tab:hover:not(.active), .tab-btn:hover:not(.active) { color: #1f2937; }

/* ══════════════════════════════════════════════════════════
   DROP ZONE (upload de arquivo)
   ══════════════════════════════════════════════════════════ */
.pr-drop-zone, .drop-zone {
  border: 2px dashed var(--pr-border-input);
  border-radius: .875rem;
  padding: 2rem 1.75rem;
  text-align: center;
  transition: all .2s;
  cursor: pointer;
  background: #fafbfc;
}
.pr-drop-zone.over, .drop-zone.over {
  border-color: var(--pr-brand-mid);
  background: #eff6ff;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .08);
}
.pr-drop-zone:hover, .drop-zone:hover {
  border-color: #94a3b8;
  background: #f8f9fa;
}

/* ══════════════════════════════════════════════════════════
   SPINNER DE LOADING
   ══════════════════════════════════════════════════════════ */
.pr-spin, .spin {
  border: 3px solid #e5e7eb;
  border-top-color: var(--pr-brand-mid);
  border-radius: 50%;
  width: 18px;
  height: 18px;
  animation: pr-spin .7s linear infinite;
  display: inline-block;
  vertical-align: middle;
}
@keyframes pr-spin { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════════════════════
   UTILITÁRIOS GERAIS
   ══════════════════════════════════════════════════════════ */
.pr-text-brand  { color: var(--pr-brand); }
.pr-text-muted  { color: var(--pr-text-muted); }
.pr-text-faint  { color: var(--pr-text-faint); }
.pr-text-red    { color: var(--pr-red); }
.pr-divider     { border: none; border-top: 1px solid var(--pr-border); margin: 0; }