/* hub-base.css — o sistema do hub: cartão, campo e selo, em UM lugar.
 *
 * T1.1 do plano 32. A revisão de 30/08 resolveu os BOTÕES; sobraram três
 * famílias sem sistema, e o que a medição de 01/09 mostrou é que elas não eram
 * três escolhas — eram a mesma escolha escrita várias vezes, divergindo em
 * números que ninguém decidiu:
 *
 *   cartão  `.hub-panel` e `.mk-painel` declaravam a MESMA borda, o MESMO raio,
 *           o MESMO gradiente e a MESMA sombra, em dois arquivos;
 *   campo   `.hub-input` (raio 28px, borda 0.5, padding 12/18) e `.mk-input`
 *           (raio 999px, borda 0.42, padding 10/16) — mesma pílula dourada,
 *           três números diferentes;
 *   selo    quatro etiquetas em caixa alta com tamanhos e espaçamentos
 *           distintos (10px/1px, 11px/2px…).
 *
 * ## Como este arquivo fecha o sistema
 *
 * Ele NÃO renomeia classe nenhuma. As classes que já existem passam a APONTAR
 * para uma definição só, agrupadas no mesmo seletor — e os arquivos específicos
 * ficam apenas com a diferença real (o tom do selo, a posição da fita). Trocar
 * nome de classe obrigaria a mexer em cinco arquivos de JS para ganhar o mesmo
 * resultado visual, com muito mais chance de quebrar uma tela em silêncio.
 *
 * ## Tokens em COMENTÁRIO, e por quê
 *
 * `var(--x)` não existe no Chromium 47 do Maxthon — o navegador que roda o
 * Flash e, por decisão do Lucas em 31/08, o alvo de compatibilidade do hub
 * inteiro ("em qualquer navegador, velho ou antigo, deve ser igual para
 * todos"). Uma variável CSS aqui não degradaria: apagaria a cor. Então os
 * tokens são documentação, e o valor vai escrito.
 *
 *   TIPOGRAFIA   10 selo · 11 meta · 13 corpo miúdo · 14 corpo · 16 subtítulo
 *                21 título de seção · 26 número grande
 *   RAIO         10 selo · 14 cartão · 999 pílula (campo e botão)
 *   OURO         #f0c850 traço · rgba(240,200,80,.22) borda · .5 borda de campo
 *   AZUL         #5aa0ff informação · rgba(90,160,255,.36) borda
 *   VERDE        #9fd8b0 resolvido/ok · rgba(159,216,176,.4) borda
 *   FUNDO        linear-gradient(180deg, rgba(11,21,52,.78), rgba(13,23,56,.86))
 *   TEXTO        #eef2ff forte · #cdd8ee corpo · #a8b8d0 apoio · #7a8aa0 fraco
 *
 * Este arquivo carrega ANTES dos outros (ver index.html): ele é o tronco, e o
 * específico depois é que vence.
 */

/* ===========================================================================
   CARTÃO — a superfície onde tudo mora
   =========================================================================== */
.hub-panel,
.mk-painel {
  border: 1px solid rgba(240, 200, 80, 0.22);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(11, 21, 52, 0.78), rgba(13, 23, 56, 0.86));
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* O cartão de MÉTRICA é a variação legítima: borda azulada e fundo chapado,
   para o número saltar sem competir com a moldura dourada dos painéis ao
   redor. Continua no mesmo raio — é o que o faz pertencer à mesma família. */
.mk-numero {
  border: 1px solid rgba(140, 165, 215, 0.16);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.28);
}

/* ===========================================================================
   CAMPO — uma pílula só
   =========================================================================== */
.hub-input,
.mk-input,
.mk-select {
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(240, 200, 80, 0.5);
  border-radius: 999px;
  padding: 12px 18px;
  color: #dfe7ff;
  font-size: 14px;
  font-family: inherit;
}

.hub-input:focus,
.mk-input:focus,
.mk-select:focus {
  outline: none;
  border-color: #f0c850;
  box-shadow: 0 0 0 3px rgba(240, 200, 80, 0.15);
}

.hub-input::placeholder,
.mk-input::placeholder { color: #6b7b96; }

.hub-input[disabled],
.mk-input[disabled],
.mk-select[disabled] { opacity: 0.55; cursor: not-allowed; }

/* `textarea` com raio de pílula fica ridículo: a mesma família, o raio do
   cartão. É a única exceção de forma, e ela é sobre a forma do conteúdo. */
textarea.hub-input,
textarea.mk-input { border-radius: 14px; }

/* ===========================================================================
   SELO — uma etiqueta, vários tons
   =========================================================================== */
.mk-estado,
.mk-selo,
.mk-guardado,
.fo-selo,
.hub-feature-tag,
.hub-pack-flag {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 10px;
  padding: 3px 9px;
  line-height: 1.4;
}