/* ================================================================
   COMPONENTS.CSS — Componentes reutilizáveis do LNK-SINGUS
   Botões, formulário de encurtamento, resultado, badges,
   demo card, code block com abas, histórico e cards
   ================================================================ */

/* Importa os tokens do design system */
@import './tokens.css';

/* ════════════════════════════════════════════
   BOTÕES
   ════════════════════════════════════════════ */

/* Base comum a todos os botões */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-sm);
  padding: 0.75rem 1.75rem;
  border: none;
  border-radius: var(--raio-md);
  font-family: var(--fonte-ui);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--transicao-media);
  text-decoration: none;
  white-space: nowrap;
}

/* Estado desabilitado */
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Botão primário — fundo dourado ── */
.btn--primario {
  background: var(--cor-acento);
  color: #07070A;
}

.btn--primario:hover {
  background: var(--cor-acento-hover);
  box-shadow: var(--sombra-acento);
  transform: translateY(-1px);
  color: #07070A;
}

.btn--primario:active { transform: translateY(0); }

/* ── Botão fantasma — contorno dourado ── */
.btn--fantasma {
  background: transparent;
  color: var(--cor-acento);
  border: 1px solid var(--cor-acento);
}

.btn--fantasma:hover {
  background: rgba(200, 169, 110, 0.08);
  color: var(--cor-acento-hover);
}

/* ── Botão de texto — sem bordas ── */
.btn--texto {
  background: transparent;
  color: var(--cor-texto-suave);
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
}

.btn--texto:hover { color: var(--cor-acento); }

/* ── Botão de ícone — quadrado compacto ── */
.btn--icone {
  width: 36px;
  height: 36px;
  padding: 0;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--cor-borda);
  color: var(--cor-texto-suave);
  border-radius: var(--raio-md);
}

.btn--icone:hover {
  border-color: var(--cor-acento);
  color: var(--cor-acento);
}

/* ── Modificadores de tamanho ── */
.btn--grande { padding: 1rem 2.25rem; font-size: 0.9rem; }

/* ── Estado de carregamento ── */
.btn--carregando { pointer-events: none; }
.btn--carregando .btn__texto { opacity: 0.7; }

/* ════════════════════════════════════════════
   FORMULÁRIO DE ENCURTAMENTO
   ════════════════════════════════════════════ */

/* Container vertical do formulário */
.form-encurtar {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-md);
}

/* Linha com input + botão lado a lado */
.form-encurtar__grupo {
  display: flex;
  gap: var(--espaco-sm);
  align-items: stretch;
}

/* Campo de URL a encurtar */
.form-encurtar__input {
  flex: 1;
  padding: 0.9rem 1.25rem;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--raio-md);
  color: var(--cor-texto);
  font-family: var(--fonte-ui);
  font-size: 1rem;
  transition: border-color var(--transicao-rapida), box-shadow var(--transicao-rapida);
  outline: none;
}

.form-encurtar__input::placeholder { color: var(--cor-texto-fraco); }

/* Estado de foco com halo dourado */
.form-encurtar__input:focus {
  border-color: var(--input-focus);
  box-shadow: 0 0 0 3px rgba(200, 169, 110, 0.1);
}

/* Estado de erro */
.form-encurtar__input.erro {
  border-color: var(--cor-erro);
  box-shadow: 0 0 0 3px rgba(224, 82, 82, 0.1);
}

/* Estado de sucesso */
.form-encurtar__input.sucesso {
  border-color: var(--cor-sucesso);
}

/* Mensagem de erro abaixo do campo */
.form-encurtar__mensagem-erro {
  font-size: 0.8rem;
  color: var(--cor-erro);
  display: none;
}

.form-encurtar__mensagem-erro.visivel { display: block; }

/* Mensagem de ajuda e ações rápidas abaixo do input */
.form-encurtar__extras {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-md);
  flex-wrap: wrap;
}

.form-encurtar__mensagem-ajuda {
  font-size: 0.78rem;
  color: var(--cor-texto-fraco);
}

.form-encurtar__acoes {
  display: flex;
  align-items: center;
  gap: var(--espaco-xs);
}

.form-encurtar__botao-aux {
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  padding: 0.4rem 0.7rem;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
}

.form-encurtar__botao-aux:hover {
  border-color: rgba(200, 169, 110, 0.35);
}

.form-encurtar__mensagem-status {
  min-height: 1.1rem;
  font-size: 0.78rem;
  color: var(--cor-texto-fraco);
  transition: color var(--transicao-rapida);
}

.form-encurtar__mensagem-status[data-tipo='sucesso'] { color: var(--cor-sucesso); }
.form-encurtar__mensagem-status[data-tipo='erro']    { color: var(--cor-erro); }
.form-encurtar__mensagem-status[data-tipo='aviso']   { color: var(--cor-aviso); }

/* ════════════════════════════════════════════
   CAIXA DE RESULTADO
   ════════════════════════════════════════════ */

/* Container do resultado — oculto por padrão */
.resultado {
  display: none;
  padding: var(--espaco-lg);
  background: rgba(200, 169, 110, 0.06);
  border: 1px solid rgba(200, 169, 110, 0.2);
  border-radius: var(--raio-lg);
  animation: deslizar-cima 0.3s ease;
}

.resultado.visivel { display: block; }

/* Linha com o link gerado + botão de copiar */
.resultado__url {
  display: flex;
  align-items: center;
  gap: var(--espaco-sm);
  margin-bottom: var(--espaco-sm);
}

/* Link encurtado em destaque */
.resultado__link {
  flex: 1;
  font-family: var(--fonte-mono);
  font-size: 1.1rem;
  color: var(--cor-acento);
  word-break: break-all;
}

.resultado__link:hover { color: var(--cor-acento-hover); }

/* Linha de ações secundárias */
.resultado__acoes {
  display: flex;
  gap: var(--espaco-sm);
  align-items: center;
  flex-wrap: wrap;
}

/* URL original truncada */
.resultado__original {
  font-size: 0.8rem;
  color: var(--cor-texto-fraco);
  font-family: var(--fonte-mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Aviso de expiração do link gratuito */
.resultado__expiracao {
  font-size: 0.75rem;
  color: rgba(200, 169, 110, 0.65);
  font-family: var(--fonte-mono);
  margin-top: 0.5rem;
  letter-spacing: 0.02em;
}

/* ════════════════════════════════════════════
   BADGE DE FEEDBACK DE CÓPIA
   ════════════════════════════════════════════ */

/* Pill verde que aparece ao copiar o link */
.badge-copiado {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-xs);
  padding: 0.25rem 0.75rem;
  background: rgba(76, 175, 130, 0.15);
  border: 1px solid rgba(76, 175, 130, 0.3);
  border-radius: 100px;
  font-size: 0.75rem;
  color: var(--cor-sucesso);
  opacity: 0;
  transform: translateY(4px);
  transition: all var(--transicao-rapida);
  pointer-events: none;
}

/* Estado visível — adicionado via JS após copiar */
.badge-copiado.visivel {
  opacity: 1;
  transform: translateY(0);
}

/* ════════════════════════════════════════════
   DEMO CARD — terminal decorativo
   ════════════════════════════════════════════ */

/* Card no estilo janela de terminal */
.demo-card {
  background: var(--cor-fundo-card);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  overflow: hidden;
  font-family: var(--fonte-mono);
  font-size: 0.85rem;
}

/* Barra superior do terminal com "semáforos" */
.demo-card__barra {
  display: flex;
  align-items: center;
  gap: var(--espaco-sm);
  padding: var(--espaco-md) var(--espaco-lg);
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--cor-borda);
}

/* Pontos coloridos de controle da janela */
.demo-card__ponto {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.demo-card__ponto--vermelho { background: #FF5F57; }
.demo-card__ponto--amarelo  { background: #FEBC2E; }
.demo-card__ponto--verde    { background: #28C840; }

/* Título da janela (direita) */
.demo-card__titulo {
  margin-left: auto;
  color: var(--cor-texto-fraco);
  font-size: 0.75rem;
}

/* Corpo do terminal */
.demo-card__corpo {
  padding: var(--espaco-lg);
  min-height: 120px;
}

/* Linhas de código dentro do terminal */
.demo-card__linha    { margin-bottom: 0.3rem; }
.demo-card__comentario { color: var(--cor-texto-fraco); }
.demo-card__chave    { color: #82AAFF; }
.demo-card__valor    { color: #C3E88D; }
.demo-card__url      { color: var(--cor-acento); }

/* ════════════════════════════════════════════
   CODE BLOCK COM ABAS
   ════════════════════════════════════════════ */

/* Container principal do bloco de código */
.codigo-bloco {
  background: var(--cor-fundo-card);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  overflow: hidden;
}

/* Barra de abas horizontal */
.codigo-bloco__abas {
  display: flex;
  border-bottom: 1px solid var(--cor-borda);
  overflow-x: auto;
}

/* Aba individual */
.codigo-bloco__aba {
  padding: 0.75rem 1.25rem;
  font-family: var(--fonte-mono);
  font-size: 0.8rem;
  color: var(--cor-texto-fraco);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all var(--transicao-rapida);
  white-space: nowrap;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
}

.codigo-bloco__aba:hover { color: var(--cor-texto-suave); }

/* Aba ativa com linha dourada inferior */
.codigo-bloco__aba.ativa {
  color: var(--cor-acento);
  border-bottom-color: var(--cor-acento);
}

/* Painéis de conteúdo — ocultos por padrão */
.codigo-bloco__conteudo        { display: none; }
.codigo-bloco__conteudo.ativo  { display: block; }

/* Bloco de código com scroll horizontal */
.codigo-bloco pre {
  padding: var(--espaco-lg);
  overflow-x: auto;
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--cor-texto-suave);
  margin: 0;
}

/* Cabeçalho interno do bloco (método HTTP + botão copiar) */
.codigo-bloco__cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--espaco-sm) var(--espaco-lg);
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--cor-borda);
}

/* Badge de método HTTP */
.codigo-bloco__metodo {
  font-family: var(--fonte-mono);
  font-size: 0.75rem;
  padding: 0.2rem 0.5rem;
  border-radius: var(--raio-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Cores por método HTTP */
.metodo-post { background: rgba(200, 169, 110, 0.15); color: var(--cor-acento); }
.metodo-get  { background: rgba(76, 175, 130, 0.15);  color: var(--cor-sucesso); }

/* ════════════════════════════════════════════
   HISTÓRICO DE LINKS
   ════════════════════════════════════════════ */

/* Container do histórico abaixo do formulário */
.historico { margin-top: var(--espaco-lg); }

/* Cabeçalho com título e ação de limpar */
.historico__cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-sm);
  margin-bottom: var(--espaco-md);
}

/* Rótulo do histórico */
.historico__titulo {
  font-family: var(--fonte-ui);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cor-texto-fraco);
  margin-bottom: 0;
}

.historico__btn-limpar {
  border: 1px solid var(--cor-borda-suave);
  border-radius: var(--raio-md);
  padding: 0.3rem 0.65rem;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}

.historico__btn-limpar:hover { border-color: rgba(224, 82, 82, 0.35); }

/* Lista de itens do histórico */
.historico__lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-sm);
}

/* Item individual do histórico */
.historico__item {
  display: flex;
  align-items: center;
  gap: var(--espaco-md);
  padding: var(--espaco-sm) var(--espaco-md);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--cor-borda-suave);
  border-radius: var(--raio-md);
  transition: border-color var(--transicao-rapida);
  animation: deslizar-cima 0.2s ease;
}

.historico__item:hover { border-color: var(--cor-borda); }

/* Link encurtado dentro do item */
.historico__item-url {
  font-family: var(--fonte-mono);
  font-size: 0.85rem;
  color: var(--cor-acento);
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* URL original truncada */
.historico__item-original {
  flex: 1;
  font-size: 0.78rem;
  color: var(--cor-texto-fraco);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.historico__item-acoes {
  display: flex;
  align-items: center;
  gap: var(--espaco-xs);
}

.btn--historico {
  padding: 0.4rem 0.6rem;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
}

/* ════════════════════════════════════════════
   CARD DE FEATURE (recursos do produto)
   ════════════════════════════════════════════ */

.feature-card {
  padding: var(--espaco-xl);
  background: var(--cor-fundo-card);
  border: 1px solid var(--cor-borda-suave);
  border-radius: var(--raio-lg);
  transition: border-color var(--transicao-media), transform var(--transicao-media);
}

.feature-card:hover {
  border-color: rgba(200, 169, 110, 0.2);
  transform: translateY(-2px);
}

/* Ícone do recurso */
.feature-card__icone {
  font-size: 1.5rem;
  margin-bottom: var(--espaco-md);
  display: block;
}

/* Título em fonte display */
.feature-card__titulo {
  font-family: var(--fonte-display);
  font-size: 1.3rem;
  color: var(--cor-texto);
  margin-bottom: var(--espaco-sm);
}

/* Descrição do recurso */
.feature-card__descricao {
  font-size: 0.9rem;
  color: var(--cor-texto-suave);
  line-height: 1.7;
}

/* ════════════════════════════════════════════
   CARD DE SISTEMA INTEGRADO
   ════════════════════════════════════════════ */

.sistema-card {
  padding: var(--espaco-xl);
  background: var(--cor-fundo-card);
  border: 1px solid var(--cor-borda-suave);
  border-radius: var(--raio-lg);
  text-align: center;
  transition: all var(--transicao-media);
}

.sistema-card:hover {
  border-color: rgba(200, 169, 110, 0.3);
  box-shadow: var(--sombra-acento);
}

/* Sigla do sistema em monospace */
.sistema-card__sigla {
  display: block;
  font-family: var(--fonte-mono);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cor-acento);
  margin-bottom: var(--espaco-sm);
}

/* Nome completo do sistema em display */
.sistema-card__nome {
  font-family: var(--fonte-display);
  font-size: 1.5rem;
  color: var(--cor-texto);
  margin-bottom: var(--espaco-sm);
}

/* Descrição breve do sistema */
.sistema-card__descricao {
  font-size: 0.85rem;
  color: var(--cor-texto-suave);
}

/* ════════════════════════════════════════════
   ESTATÍSTICAS (números de impacto)
   ════════════════════════════════════════════ */

/* Número grande em fonte display */
.stat-numero {
  font-family: var(--fonte-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  color: var(--cor-acento);
  font-weight: 300;
  line-height: 1;
  display: block;
}

/* Rótulo da estatística */
.stat-label {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cor-texto-fraco);
  margin-top: var(--espaco-xs);
}

@media (max-width: 640px) {
  .form-encurtar__extras {
    flex-direction: column;
    align-items: flex-start;
  }

  .historico__item {
    flex-wrap: wrap;
    gap: var(--espaco-sm);
  }

  .historico__item-url,
  .historico__item-original {
    max-width: 100%;
    width: 100%;
  }

  .historico__item-acoes {
    width: 100%;
    justify-content: flex-end;
  }
}