/* ============================================================
   FR Avança Hub 2.0 — Design Tokens (Sessão 6)
   ============================================================
   Variação C (desktop): tema claro, sidebar branca, fundo cinza
   Variação B (mobile):  tema escuro, menu superior horizontal
   ============================================================ */

:root {
  /* Cores primárias */
  --azul-primario: #1A4DB3;
  --azul-escuro: #143d8f;
  --azul-claro: #2563d4;
  --amarelo: #FFDD57;
  --amarelo-escuro: #f5c842;

  /* Neutros — modo claro */
  --bg-app: #f7f9fc;
  --bg-card: #ffffff;
  --bg-input: #ffffff;
  --border: #e1e6ee;
  --border-strong: #d4dae8;
  --texto-principal: #1a2332;
  --texto-secundario: #4a5468;
  --texto-suave: #6a7488;
  --texto-muito-suave: #8a94a8;

  /* Estados */
  --sucesso: #16a34a;
  --sucesso-bg: #dcfce7;
  --aviso: #92670d;
  --aviso-bg: #fff4d4;
  --erro: #dc2626;
  --erro-bg: #fde8e8;

  /* Sombras */
  --sombra-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
  --sombra-md: 0 2px 8px rgba(0, 0, 0, 0.08);
  --sombra-lg: 0 8px 32px rgba(0, 0, 0, 0.08);
  --sombra-azul: 0 4px 16px rgba(26, 77, 179, 0.18);

  /* Tipografia */
  --fonte: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fonte-tamanho-base: 14px;
  --fonte-tamanho-sm: 12px;
  --fonte-tamanho-lg: 16px;
  --linha: 1.5;

  /* Espaçamento */
  --raio-sm: 6px;
  --raio: 8px;
  --raio-lg: 12px;
  --raio-pill: 100px;

  /* Transições */
  --transicao: 0.15s ease;

  /* ─────────────────────────────────────────────────────────
     TOKENS NOVOS — definições que faltavam no sistema
     Referenciados em comissoes.css / conferencia.css / pedidos.css
     ───────────────────────────────────────────────────────── */
  --azul-hover:  #143d8f;  /* hover de botões azuis (= --azul-escuro) */
  --azul-suave:  #EBF1FF;  /* fundo tênue azul (cards de Conferência) */
  --fundo-hover: #f0f4f8;  /* hover de linhas/botões neutros */
  --fundo-suave: #f8fafc;  /* fundo suave (notificações) */

  /* ─────────────────────────────────────────────────────────
     ALIASES DE COMPATIBILIDADE — nomes em português
     pedidos.css e nfs.css foram escritos com nomenclatura PT.
     Estes aliases evitam refatoração ampla agora.
     DÉBITO TÉCNICO: futuro padronizar uma convenção só.
     ───────────────────────────────────────────────────────── */
  --azul-principal: #1A4DB3;  /* alias → --azul-primario */
  --borda:          #e1e6ee;  /* alias → --border */
  --fundo:          #f7f9fc;  /* alias → --bg-app */
  --fundo-pagina:   #f7f9fc;  /* alias → --bg-app */
  --texto:          #1a2332;  /* alias → --texto-principal */
  --vermelho:       #dc2626;  /* alias → --erro */
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--fonte);
  font-size: var(--fonte-tamanho-base);
  line-height: var(--linha);
  color: var(--texto-principal);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button { font-family: inherit; cursor: pointer; border: 0; background: none; }
input, select, textarea { font-family: inherit; font-size: inherit; }
a { color: var(--azul-primario); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ============================================================
   COMPONENTE: BOTÃO
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--raio);
  font-size: var(--fonte-tamanho-base);
  font-weight: 600;
  transition: var(--transicao);
  border: 1px solid transparent;
  white-space: nowrap;
}

.btn-primario {
  background: var(--azul-primario);
  color: #fff;
}
.btn-primario:hover { background: var(--azul-escuro); }
.btn-primario:active { transform: translateY(1px); }
.btn-primario:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-secundario {
  background: #fff;
  color: var(--texto-principal);
  border-color: var(--border-strong);
}
.btn-secundario:hover { background: var(--bg-app); }

.btn-bloco { width: 100%; padding: 12px 18px; font-size: var(--fonte-tamanho-lg); }

/* ============================================================
   COMPONENTE: INPUT
   ============================================================ */
.input-wrapper {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.input-label {
  font-size: var(--fonte-tamanho-sm);
  font-weight: 600;
  color: var(--texto-secundario);
}

.input-field {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: var(--raio);
  background: var(--bg-input);
  color: var(--texto-principal);
  transition: var(--transicao);
}
.input-field:focus {
  outline: none;
  border-color: var(--azul-primario);
  box-shadow: 0 0 0 3px rgba(26, 77, 179, 0.12);
}
.input-field:disabled { background: var(--bg-app); cursor: not-allowed; }
.input-field.erro {
  border-color: var(--erro);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.input-erro-msg {
  font-size: var(--fonte-tamanho-sm);
  color: var(--erro);
  margin-top: 2px;
}

.input-grupo-senha { position: relative; }
.input-grupo-senha .input-field { padding-right: 44px; }
.btn-mostrar-senha {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--texto-suave);
  border-radius: var(--raio-sm);
}
.btn-mostrar-senha:hover { background: var(--bg-app); color: var(--texto-principal); }

/* ============================================================
   COMPONENTE: ALERT
   ============================================================ */
.alerta {
  padding: 12px 14px;
  border-radius: var(--raio);
  font-size: var(--fonte-tamanho-base);
  margin-bottom: 16px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.alerta-erro { background: var(--erro-bg); color: var(--erro); }
.alerta-aviso { background: var(--aviso-bg); color: var(--aviso); }
.alerta-sucesso { background: var(--sucesso-bg); color: var(--sucesso); }

.alerta-icone { font-weight: 700; flex-shrink: 0; }

/* ============================================================
   UTILITÁRIOS
   ============================================================ */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.itens-centro { align-items: center; }
.justifica-centro { justify-content: center; }
.justifica-entre { justify-content: space-between; }
.gap-sm { gap: 8px; }
.gap { gap: 16px; }
.gap-lg { gap: 24px; }

.texto-centro { text-align: center; }
.texto-suave { color: var(--texto-suave); }
.texto-pequeno { font-size: var(--fonte-tamanho-sm); }

.escondido { display: none !important; }

.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: girar 0.8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }