/* ==========================================================================
   components.css — peças reutilizadas (DS Grupo CoreTI)
   Camada 3 de 4. Botões, campos, selos, status, barras, cartões, avisos.
   ========================================================================== */

/* --- Botões -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  border: 0;
  border-radius: var(--r-sm);
  padding: 0 var(--sp-6);
  height: 46px;
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--fs-16);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out);
}
.btn:active:not(:disabled) { transform: scale(0.98); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

.btn--lg { height: 52px; padding: 0 var(--sp-8); font-size: var(--fs-18); }
.btn--sm { height: 36px; padding: 0 var(--sp-4); font-size: var(--fs-14); border-radius: var(--r-sm); }
.btn--bloco { width: 100%; }

/* Primário — anthracite */
.btn--primario { background: var(--anthracite); color: var(--cloud-dancer); }
.btn--primario:hover:not(:disabled) { background: color-mix(in oklab, var(--anthracite) 88%, #000); color: var(--cloud-dancer); }

/* Espectro — assinatura da marca (CTA principal) */
.btn--spectrum { background: var(--spectrum); color: #fff; box-shadow: var(--shadow-md); }
.btn--spectrum:hover:not(:disabled) { box-shadow: var(--shadow-lg); color: #fff; }

/* Claro — sobre fundo escuro */
.btn--claro { background: var(--cloud-dancer); color: var(--anthracite); }
.btn--claro:hover:not(:disabled) { background: #fff; color: var(--anthracite); }

/* Fantasma — contorno */
.btn--fantasma { background: transparent; border: 1px solid var(--border-strong); color: var(--fg1); font-family: var(--font-body); font-weight: var(--w-medium); }
.btn--fantasma:hover:not(:disabled) { background: var(--surface-2); color: var(--fg1); }

/* Fantasma sobre fundo escuro */
.btn--fantasma-claro { background: transparent; border: 1px solid var(--border-on-dark); color: var(--cloud-dancer); }
.btn--fantasma-claro:hover:not(:disabled) { background: color-mix(in oklab, var(--cloud-dancer) 10%, transparent); color: #fff; }

/* --- Selos --------------------------------------------------------------- */

.selo {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px 12px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: var(--fs-12);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  white-space: nowrap;
}
.selo--gratis   { background: color-mix(in oklab, var(--infra-100) 20%, transparent);   color: #b9e39a; border: 1px solid color-mix(in oklab, var(--infra-100) 45%, transparent); }
.selo--produto  { background: color-mix(in oklab, var(--service-100) 16%, transparent); color: #8fc7f0; border: 1px solid color-mix(in oklab, var(--service-100) 42%, transparent); }
.selo--oferta   { background: color-mix(in oklab, var(--security-100) 18%, transparent);color: #f3b58a; border: 1px solid color-mix(in oklab, var(--security-100) 45%, transparent); }

/* Chip "Parceiro Acronis" no topo escuro */
.chip-parceiro {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 14px 7px 12px;
  border: 1px solid var(--border-on-dark);
  border-radius: var(--r-pill);
}
.chip-parceiro__rotulo { font-size: 10px; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--on-dark-3); }
.chip-parceiro img { height: 13px; width: auto; }

/* --- Status do lead (pílulas, fundo claro) ------------------------------- */

.status {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: var(--fs-12);
  font-weight: var(--w-bold);
  white-space: nowrap;
}
.status--novo        { background: color-mix(in oklab, var(--service-100) 14%, var(--cloud-dancer)); color: var(--service-300); }
.status--contatado   { background: color-mix(in oklab, var(--security-100) 16%, var(--cloud-dancer)); color: var(--security-300); }
.status--qualificado { background: color-mix(in oklab, var(--bridge-100) 20%, var(--cloud-dancer)); color: var(--bridge-300); }
.status--trial_ativo { background: color-mix(in oklab, var(--service-100) 22%, var(--cloud-dancer)); color: var(--service-300); }
.status--convertido  { background: color-mix(in oklab, var(--infra-100) 22%, var(--cloud-dancer)); color: var(--infra-300); }
.status--descartado  { background: var(--surface-3); color: var(--fg3); }

/* --- Campos de formulário ------------------------------------------------ */

.form-grid { display: grid; gap: var(--sp-5); }
.form-grid--2col { grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .form-grid--2col { grid-template-columns: 1fr; } }

.campo { display: block; }
.campo__label {
  display: block; font-size: var(--fs-14); font-weight: var(--w-medium);
  margin-bottom: 7px; color: var(--fg1);
}
.campo__label .req { color: var(--security-200); }

.campo__controle {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: var(--fs-16);
  background: var(--surface);
  color: var(--fg1);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.campo__controle::placeholder { color: var(--fg3); }
.campo__controle:focus { outline: none; border-color: var(--service-200); box-shadow: var(--shadow-focus); }
.campo__controle:disabled { background: var(--surface-2); color: var(--fg3); cursor: not-allowed; }

.campo__erro { display: none; font-size: var(--fs-12); color: var(--danger); margin-top: 6px; font-weight: var(--w-medium); }
.campo.invalido .campo__controle { border-color: var(--danger); background: color-mix(in oklab, var(--security-100) 8%, var(--surface)); }
.campo.invalido .campo__erro { display: block; }

.campo-consent {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  font-size: var(--fs-14); color: var(--fg2); line-height: var(--lh-normal);
}
.campo-consent input { margin-top: 3px; width: 17px; height: 17px; flex: none; accent-color: var(--service-200); }

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Avisos -------------------------------------------------------------- */

.aviso { border-radius: var(--r-sm); padding: 12px 16px; font-size: var(--fs-14); font-weight: var(--w-medium); }
.aviso--erro { background: color-mix(in oklab, var(--security-100) 12%, var(--surface)); color: var(--danger); }
.aviso--ok   { background: color-mix(in oklab, var(--infra-100) 14%, var(--surface)); color: var(--infra-300); }
.aviso--info { background: color-mix(in oklab, var(--service-100) 12%, var(--surface)); color: var(--service-300); }

/* --- Barras de proporção (quebras do painel) ----------------------------- */

.barra { margin-bottom: var(--sp-4); }
.barra__topo { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); margin-bottom: 6px; }
.barra__rotulo { font-size: var(--fs-14); font-weight: var(--w-medium); color: var(--fg1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra__valor { font-size: var(--fs-14); color: var(--fg3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.barra__trilho { height: 6px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.barra__preenchimento { height: 100%; border-radius: var(--r-pill); background: var(--spectrum); transition: width var(--dur-base) var(--ease-out); }

/* --- Cartões ------------------------------------------------------------- */

.cartao { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-6); }

/* --- Estado vazio -------------------------------------------------------- */

.vazio { padding: var(--sp-12) var(--sp-6); text-align: center; color: var(--fg3); font-size: var(--fs-14); }