/* ============================================================================
   SIC GESTÃO — tokens e primitivos das ferramentas internas da Sic.

   Fonte da verdade das CORES e da TIPOGRAFIA: o pacote oficial do design system
   (Downloads/sic-imobiliario-lp/_ds/sic-design-system-<id>/tokens/). Os valores
   abaixo foram copiados de lá, não aproximados.

   Fonte da verdade da ESTRUTURA (fundo, raio, cartão): as telas do SIC GESTÃO.
   O pacote manda raio 0 e fundo branco puro ("arquitetura é reta"); o GESTÃO é
   a variante de produto — cinza-claro de fundo, cartão branco, cantos de 16px.

   Este arquivo existe em DOIS lugares, idênticos:
     course-engine/src/estilo/sic-gestao.css
     licitacao-udia/src/app/sic-gestao.css
   Mudou um, copie para o outro. Não há build compartilhado entre os projetos.
   ============================================================================ */

:root {
  /* --- Marca (colors.css do pacote) --- */
  --sg-cyan:        #25e0e4;  /* bioluminescência: raro, preenchimento e seleção */
  --sg-cyan-deep:   #18b9bd;
  --sg-teal:        #0d4647;  /* teal principal: botão, navegação ativa, títulos */
  --sg-teal-deep:   #0a3737;
  --sg-teal-night:  #082c2d;  /* faixa mais escura */
  --sg-teal-mid:    #0c7d79;  /* rótulos e links sobre claro */
  --sg-graphite:    #16201f;  /* títulos grandes */
  --sg-ink:         #2d2d2d;  /* corpo */

  /* --- Superfícies (variante GESTÃO) --- */
  --sg-pagina:      #f4f5f4;
  --sg-card:        #ffffff;
  --sg-card-suave:  #f8f9f8;
  --sg-campo:       #ffffff;

  /* --- Texto. Secundário NUNCA é cinza neutro: é tinta puxada para o teal. --- */
  --sg-texto:       var(--sg-ink);
  --sg-texto-forte: var(--sg-graphite);
  --sg-texto-2:     color-mix(in oklab, var(--sg-ink) 62%, var(--sg-teal) 38%);
  --sg-texto-3:     color-mix(in oklab, var(--sg-ink) 42%, #ffffff 58%);

  /* --- Linhas: cinza neutro. O pacote manda borda puxada para o teal; aplicada,
     ela lia como verde e o dono pediu cinza (11/09/2026). Decisão de produto,
     vale para as duas cópias desta folha. --- */
  --sg-borda:       rgba(0, 0, 0, 0.09);
  --sg-borda-forte: rgba(0, 0, 0, 0.16);
  --sg-teal-06:     color-mix(in oklab, var(--sg-teal) 6%, transparent);
  --sg-teal-10:     color-mix(in oklab, var(--sg-teal) 10%, transparent);

  /* --- Estado (etiquetas de status) --- */
  --sg-ok:          #1f7a4d;
  --sg-ok-fundo:    #e6f3ec;
  --sg-alerta:      #b8492f;
  --sg-alerta-fundo:#f8e9e5;
  --sg-neutro-fundo:#eef0ef;

  /* --- Tipografia (typography.css do pacote) --- */
  --sg-fonte: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --sg-mono:  'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
  --sg-tracking-titulo:  -0.02em;
  --sg-tracking-rotulo:   0.14em;
  --sg-tracking-rotulo-l: 0.22em;

  /* --- Estrutura (dos prints do GESTÃO) --- */
  --sg-raio-card:  16px;
  --sg-raio-campo: 10px;
  --sg-raio-pill:  999px;
  --sg-sombra:     0 1px 2px rgba(13, 70, 71, 0.04), 0 10px 30px rgba(13, 70, 71, 0.05);

  --sg-ease: cubic-bezier(0.25, 1, 0.5, 1);
}

/* ============================================================================
   Primitivos — prefixo sg- para não colidir com o CSS de cada projeto.
   ============================================================================ */

.sg-eyebrow {
  font-family: var(--sg-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--sg-tracking-rotulo-l);
  text-transform: uppercase;
  color: var(--sg-teal-mid);
}

.sg-rotulo {
  font-family: var(--sg-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: var(--sg-tracking-rotulo);
  text-transform: uppercase;
  color: var(--sg-texto-2);
}

.sg-titulo {
  font-family: var(--sg-fonte);
  font-weight: 700;
  letter-spacing: var(--sg-tracking-titulo);
  color: var(--sg-texto-forte);
  line-height: 1.04;
  text-wrap: balance;
}

.sg-numero {
  font-family: var(--sg-fonte);
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--sg-texto-forte);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.sg-card {
  background: var(--sg-card);
  border: 1px solid var(--sg-borda);
  border-radius: var(--sg-raio-card);
  box-shadow: var(--sg-sombra);
}

/* Botão principal: teal cheio, texto branco. É o "Novo lead" e o "Cadastrar". */
.sg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 500 14px/1 var(--sg-fonte);
  padding: 12px 18px;
  border-radius: var(--sg-raio-campo);
  border: 1px solid var(--sg-teal);
  background: var(--sg-teal);
  color: #ffffff;
  cursor: pointer;
  text-decoration: none;
  transition: background 180ms var(--sg-ease), border-color 180ms var(--sg-ease);
}
.sg-btn:hover:not(:disabled) { background: var(--sg-teal-deep); border-color: var(--sg-teal-deep); }
.sg-btn:disabled { opacity: .45; cursor: not-allowed; }

.sg-btn--sec {
  background: var(--sg-card);
  color: var(--sg-texto);
  border-color: var(--sg-borda-forte);
}
.sg-btn--sec:hover:not(:disabled) { background: var(--sg-card-suave); border-color: var(--sg-teal); }

/* Pílula de filtro ("SEMANA · MÊS · ANO"): mono, contorno, ativa com fundo. */
.sg-pill {
  font-family: var(--sg-mono);
  font-size: 11px;
  letter-spacing: var(--sg-tracking-rotulo);
  text-transform: uppercase;
  padding: 7px 13px;
  border-radius: var(--sg-raio-pill);
  border: 1px solid var(--sg-borda-forte);
  background: transparent;
  color: var(--sg-texto-2);
  cursor: pointer;
}
.sg-pill[aria-pressed="true"], .sg-pill.ativo { background: var(--sg-neutro-fundo); color: var(--sg-texto-forte); }

/* Controle segmentado ("Pipeline · Lista · Análise"). */
.sg-seg {
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--sg-card);
  border: 1px solid var(--sg-borda);
  border-radius: 12px;
}
.sg-seg > button {
  font: 500 14px/1 var(--sg-fonte);
  padding: 10px 15px;
  border: 0; border-radius: 9px;
  background: transparent; color: var(--sg-texto);
  cursor: pointer;
}
.sg-seg > button.ativo { background: var(--sg-teal); color: #ffffff; }

/* Etiqueta de status ("NOVO", "NEGOCIAÇÃO", "FECHADO", "PERDIDO"). */
.sg-tag {
  display: inline-flex; align-items: center;
  font-family: var(--sg-mono);
  font-size: 10.5px;
  letter-spacing: var(--sg-tracking-rotulo);
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 6px;
  background: var(--sg-neutro-fundo);
  color: var(--sg-texto-2);
}
.sg-tag--teal   { background: var(--sg-teal-10); color: var(--sg-teal); }
.sg-tag--ok     { background: var(--sg-ok-fundo); color: var(--sg-ok); }
.sg-tag--alerta { background: var(--sg-alerta-fundo); color: var(--sg-alerta); }

.sg-campo {
  font: 400 14px/1.4 var(--sg-fonte);
  color: var(--sg-texto);
  background: var(--sg-campo);
  border: 1px solid var(--sg-borda-forte);
  border-radius: var(--sg-raio-campo);
  padding: 11px 13px;
  width: 100%;
}
.sg-campo:focus { outline: none; border-color: var(--sg-teal); box-shadow: 0 0 0 3px var(--sg-teal-10); }
.sg-campo::placeholder { color: var(--sg-texto-3); }

::selection { background: var(--sg-cyan); color: var(--sg-teal); }