/* ============================================================
   Mita+ — Badge minimalista para a coluna do modelo preditivo
   ============================================================
   Princípios:
   - Pílula compacta, alinhada ao centro
   - Hierarquia visual: Alta destaca (verde), Baixa atenua (cinza)
   - Cores discretas, sem competir com o BIA_mod (que usa cores quentes)
   - Funciona em fundo claro e escuro
============================================================ */

.mita-plus-cell {
  text-align: center;
  padding: 4px 8px !important;
}

.mita-plus-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  font-variant: small-caps;
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: help;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  user-select: none;
}

.mita-plus-badge:hover {
  transform: translateY(-1px);
}

/* === Alta — verde sólido suave (destaque positivo) === */
.mp-alta {
  background: rgba(16, 185, 129, 0.14);
  color: #059669;
  border-color: rgba(16, 185, 129, 0.35);
  box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.08);
}

/* === Média — azul ciano (secundário positivo) === */
.mp-media {
  background: rgba(56, 189, 248, 0.12);
  color: #0284c7;
  border-color: rgba(56, 189, 248, 0.32);
}

/* === Regular — azul-aço dessaturado (neutro, discreto) === */
.mp-regular {
  background: rgba(100, 139, 173, 0.10);
  color: #5b7a99;
  border-color: rgba(100, 139, 173, 0.25);
}

/* === Baixa — cinza sutil (atenua, não pune) === */
.mp-baixa {
  background: rgba(148, 163, 184, 0.14);
  color: #64748b;
  border-color: rgba(148, 163, 184, 0.30);
}

/* === Sem dado (cold start) — quase invisível === */
.mp-none {
  background: transparent;
  color: #94a3b8;
  border-color: transparent;
  font-weight: 400;
  opacity: 0.55;
  min-width: 0;
  padding: 4px 6px;
}

/* === Cabeçalho da coluna — sutilmente destaca o nome do modelo === */
thead th[data-k="MitaPlus"],
thead th:has(.col-label-mita-plus) {
  /* nenhum estilo especial: o badge na célula já carrega o peso visual */
}

/* === Dark mode (se o site tiver — herda variáveis se existirem) === */
@media (prefers-color-scheme: dark) {
  .mp-alta {
    background: rgba(16, 185, 129, 0.20);
    color: #34d399;
  }
  .mp-media {
    background: rgba(56, 189, 248, 0.18);
    color: #38bdf8;
  }
  .mp-regular {
    background: rgba(100, 139, 173, 0.14);
    color: #8fa9c2;
  }
  .mp-baixa {
    background: rgba(148, 163, 184, 0.18);
    color: #cbd5e1;
  }
  .mp-none { color: #64748b; }
}

/* === Mobile — mantém legível em tabela com scroll === */
@media (max-width: 640px) {
  .mita-plus-badge {
    min-width: 56px;
    font-size: 10.5px;
    padding: 3px 8px;
  }
}

/* ============================================================
   FORMA — Badge minimalista do BIA_mod (substitui o antigo bia-pill)
   Mesma família estética do BIA+, mas paleta semântica diferente
   pra cérebro do usuário diferenciar: BIA+ (predição) vs Forma (estado)
============================================================ */

.forma-cell {
  text-align: center !important;
  padding: 4px 8px !important;
}

.forma-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  font-variant: small-caps;
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: help;
  transition: transform 0.12s ease;
  user-select: none;
}

.forma-badge:hover { transform: translateY(-1px); }

/* === FORTE — verde sólido (idem Alta do BIA+) === */
.f-forte {
  background: rgba(16, 185, 129, 0.14);
  color: #059669;
  border-color: rgba(16, 185, 129, 0.35);
}

/* === MÉDIO — azul ciano (idem Média do BIA+) === */
.f-medio {
  background: rgba(56, 189, 248, 0.12);
  color: #0284c7;
  border-color: rgba(56, 189, 248, 0.32);
}

/* === NEUTRO — azul-aço dessaturado (idem Regular do BIA+) === */
.f-neutro {
  background: rgba(100, 139, 173, 0.10);
  color: #5b7a99;
  border-color: rgba(100, 139, 173, 0.25);
}

/* === FRACO — cinza (idem Baixa do BIA+) === */
.f-fraco {
  background: rgba(148, 163, 184, 0.14);
  color: #64748b;
  border-color: rgba(148, 163, 184, 0.30);
}

.f-none {
  background: transparent;
  color: #94a3b8;
  border-color: transparent;
  font-weight: 400;
  opacity: 0.55;
  min-width: 0;
  padding: 4px 6px;
}

/* === Override do legacy bia-cell — neutraliza herdado pra que a pílula
   nova não seja afetada pelo background/cor antigo === */
.page--biaplus #grid td.forma-cell {
  background: transparent !important;
  color: inherit !important;
}

/* === Dark mode (acompanha BIA+) === */
@media (prefers-color-scheme: dark) {
  .f-forte { background: rgba(16,185,129,0.20); color: #34d399; }
  .f-medio { background: rgba(56,189,248,0.18); color: #38bdf8; }
  .f-neutro { background: rgba(100,139,173,0.14); color: #8fa9c2; }
  .f-fraco { background: rgba(148,163,184,0.18); color: #cbd5e1; }
}

@media (max-width: 640px) {
  .forma-badge { min-width: 56px; font-size: 10.5px; padding: 3px 8px; }
}

/* ============================================================
   UI cleanup — esconde botão "Mais colunas" (btn-expand).
   O comportamento sempre fica ON (expandOn=true por default no JS),
   então a tabela já vem cheia e o botão vira ruído visual.
============================================================ */
#btn-expand { display: none !important; }