/* =============================================================
   BreveIA — components.css
   Componentes reutilizáveis: botões, badges, tags, scores,
   toggles, inputs, cards, modais.
   ============================================================= */

/* ---------- BOTÕES ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: 40px;
  padding: 0 var(--sp-5);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn--primary {
  background: var(--azul);
  color: #fff;
}
.btn--primary:hover { background: var(--azul-escuro); color: #fff; }

.btn--gold {
  background: var(--dourado);
  color: var(--azul-escuro);
}
.btn--gold:hover { background: var(--dourado-claro); color: var(--azul-escuro); }

.btn--ghost {
  background: transparent;
  color: var(--azul);
  border-color: var(--borda);
}
.btn--ghost:hover { background: var(--azul-fundo); border-color: var(--azul-claro); }

.btn--danger {
  background: var(--vermelho);
  color: #fff;
}
.btn--danger:hover { background: var(--vermelho-escuro); color: #fff; }

.btn--sm { height: 32px; padding: 0 var(--sp-3); font-size: 13px; }
.btn--lg { height: 48px; padding: 0 var(--sp-6); font-size: 15px; }
.btn--block { width: 100%; }

.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* ---------- BADGES ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  height: 24px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}
.badge--gold     { background: var(--dourado-fundo); color: var(--laranja-escuro); }
.badge--blue     { background: var(--azul-fundo); color: var(--azul); }
.badge--green    { background: var(--verde-claro); color: var(--verde-escuro); }
.badge--orange   { background: var(--laranja-claro); color: var(--laranja-escuro); }
.badge--red      { background: var(--vermelho-claro); color: var(--vermelho-escuro); }
.badge--neutral  { background: var(--borda-leve); color: var(--texto-secundario); }

.badge--lg { height: 28px; font-size: 13px; padding: 0 var(--sp-4); }

/* ---------- TAGS DE EDITAL ---------- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 28px;
  padding: 0 var(--sp-3);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--r-md);
  font-size: 12px;
  font-weight: 500;
  color: var(--texto-secundario);
}
.tag__icon { color: var(--azul-claro); }
.tag--money .tag__icon  { color: var(--verde); }
.tag--time .tag__icon   { color: var(--laranja); }
.tag--type .tag__icon   { color: var(--azul-claro); }

/* ---------- FILTRO PILL ---------- */
.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 36px;
  padding: 0 var(--sp-4);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--texto-secundario);
  cursor: pointer;
  transition: all var(--transition);
}
.filter-pill:hover { border-color: var(--azul-claro); color: var(--azul); }
.filter-pill.active {
  background: var(--azul-fundo);
  border-color: var(--azul-claro);
  color: var(--azul);
  font-weight: 600;
}
.filter-pill__count {
  font-size: 11px;
  font-weight: 700;
  background: var(--azul);
  color: #fff;
  border-radius: var(--r-pill);
  padding: 1px 6px;
  font-variant-numeric: tabular-nums;
}

/* ---------- SCORE BADGE (circular) ---------- */
.score-badge {
  --score-size: 56px;
  --score-thickness: 5px;
  --score-color: var(--verde);

  width: var(--score-size);
  height: var(--score-size);
  border-radius: 50%;
  position: relative;
  /* IMPORTANTE: --score-value chega já com unidade % do inline style.
     Não usar calc(var(...) * 1%) — Firefox falha silenciosamente
     em conic-gradient com calc() de CSS var sem unidade. */
  background: conic-gradient(var(--score-color) var(--score-value, 0%), var(--borda-leve) 0);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.score-badge::before {
  content: '';
  position: absolute;
  inset: var(--score-thickness);
  background: var(--superficie);
  border-radius: 50%;
}
.score-badge__value {
  position: relative;
  font-size: 14px;
  font-weight: 800;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.score-badge--green   { --score-color: var(--verde); }
.score-badge--orange  { --score-color: var(--laranja); }
.score-badge--red     { --score-color: var(--vermelho); }
/* Estado em análise (score 0, IA falhou ou ainda não processou): anel cinza,
   número "—", sem alarmar visualmente. */
.score-badge--neutral { --score-color: var(--borda-leve); }
.score-badge--neutral .score-badge__value { color: var(--texto-secundario); }

.score-badge--lg { --score-size: 88px; --score-thickness: 7px; }
.score-badge--lg .score-badge__value { font-size: 24px; }

.score-badge--locked .score-badge__value { font-size: 18px; color: var(--texto-secundario); }

/* Score com ícone SVG (estrela cheia) — substitui caractere ★ que renderiza
   diferente no Firefox (font-variant-emoji). Ver Nível 1.1 do polimento. */
.score-badge__value--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  color: var(--dourado);
}
.score-badge__value--icon svg {
  display: block;
  width: 22px;
  height: 22px;
}
.score-badge--lg .score-badge__value--icon svg {
  width: 32px;
  height: 32px;
}

.score-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: var(--sp-1);
}
.score-label--green   { color: var(--verde-escuro); }
.score-label--orange  { color: var(--laranja-escuro); }
.score-label--red     { color: var(--vermelho-escuro); }
.score-label--neutral { color: var(--texto-secundario); font-weight: 500; }

/* ---------- TOGGLE ---------- */
.toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  cursor: pointer;
  user-select: none;
}
.toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.toggle__track {
  width: 38px;
  height: 22px;
  background: var(--borda);
  border-radius: var(--r-pill);
  position: relative;
  transition: background var(--transition);
}
.toggle__track::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--transition);
  box-shadow: var(--shadow-sm);
}
.toggle input:checked + .toggle__track { background: var(--verde); }
.toggle input:checked + .toggle__track::after { transform: translateX(16px); }
.toggle__label {
  font-size: 13px;
  color: var(--texto-secundario);
}

/* ---------- INPUTS ---------- */
.input,
.select,
.textarea {
  width: 100%;
  height: 42px;
  padding: 0 var(--sp-4);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--r-md);
  font-size: 14px;
  color: var(--texto);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--azul-claro);
  box-shadow: var(--shadow-focus);
}
.input::placeholder { color: var(--texto-secundario); }

.textarea {
  height: auto;
  min-height: 96px;
  padding: var(--sp-3) var(--sp-4);
  resize: vertical;
  line-height: 1.5;
}

.input--error,
.select--error,
.textarea--error { border-color: var(--vermelho); }

.field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.field__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--texto);
}
.field__hint {
  font-size: 12px;
  color: var(--texto-secundario);
}
.field__error {
  font-size: 12px;
  color: var(--vermelho-escuro);
  font-weight: 500;
}

/* ---------- CARDS GENÉRICOS ---------- */
.card {
  background: var(--superficie);
  border: 1px solid var(--borda-leve);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.card--hover:hover {
  border-color: var(--borda);
  box-shadow: var(--shadow-md);
}

/* ---------- MODAL / DIALOG ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 42, 68, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
}
.modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
.modal {
  background: var(--superficie);
  border-radius: var(--r-xl);
  max-width: 480px;
  width: 100%;
  padding: var(--sp-8);
  box-shadow: var(--shadow-lg);
  transform: translateY(8px);
  transition: transform var(--transition);
}
.modal-overlay.open .modal { transform: translateY(0); }

/* ---------- TOAST / NOTIFICAÇÃO ---------- */
.toast {
  position: fixed;
  bottom: var(--sp-6);
  right: var(--sp-6);
  z-index: 2000;
  background: var(--azul-escuro);
  color: #fff;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-md);
  font-size: 14px;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  animation: toast-in 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
.toast--success { background: var(--verde-escuro); }
.toast--error   { background: var(--vermelho-escuro); }
.toast--warning { background: var(--laranja-escuro); }
@keyframes toast-in {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ---------- SKELETON LOADING ---------- */
.skeleton {
  background: linear-gradient(90deg, var(--borda-leve) 25%, var(--borda) 50%, var(--borda-leve) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--r-sm);
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---------- DIVIDER ---------- */
.divider {
  height: 1px;
  background: var(--borda-leve);
  margin: var(--sp-5) 0;
  border: 0;
}

/* ---------- DROPDOWN MENU (header avatar, etc) ---------- */
.dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-2) 0;
  z-index: 200;

  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}

.dropdown-menu.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.dropdown-menu__item {
  display: block;
  padding: var(--sp-2) var(--sp-4);
  font-size: 14px;
  color: var(--texto);
  text-decoration: none;
  transition: background var(--transition);
}

.dropdown-menu__item:hover {
  background: var(--azul-fundo);
  color: var(--azul);
}

.dropdown-menu__item--danger {
  color: var(--vermelho);
}

.dropdown-menu__item--danger:hover {
  background: var(--vermelho-claro);
  color: var(--vermelho-escuro);
}

.dropdown-menu__divider {
  height: 1px;
  background: var(--borda-leve);
  margin: var(--sp-2) 0;
  border: 0;
}