/* ═══════════════════════════════════════════════════════
   TRIAKORVO — css/sections.css
   Layouts específicos de cada aba do app de criação.
═══════════════════════════════════════════════════════ */

/* ── CLASSE & NÍVEL ─────────────────────────────────── */
.nivel-control {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.nivel-stepper {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nivel-display-box { text-align: center; }
.nivel-display-num {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--gold);
  line-height: 1;
}
.nivel-display-label {
  font-family: var(--font-ui);
  font-size: .6rem;
  color: var(--text-dim);
  letter-spacing: .1em;
}
.nivel-restantes { flex: 1; min-width: 180px; }
.nivel-restantes-label {
  font-family: var(--font-ui);
  font-size: .65rem;
  letter-spacing: .1em;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.nivel-restantes-num {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--gold);
}
.nivel-restantes-num[data-status="ok"]      { color: var(--green); }
.nivel-restantes-num[data-status="over"]    { color: var(--red); }
.nivel-restantes-num[data-status="pending"] { color: var(--gold); }

.nivel-ctrl {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.nivel-btn {
  font-family: var(--font-ui);
  font-size: .8rem;
  padding: 5px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-dim);
  cursor: pointer;
  border-radius: var(--radius);
  line-height: 1;
  transition: border-color .15s, color .15s;
}
.nivel-btn:hover { border-color: var(--gold); color: var(--gold); }
.nivel-btn--lg { padding: 6px 14px; font-size: 1rem; }

/* Cores por classe nos botões − / +. */
.nivel-btn--combatente  { border-color: var(--red);  color: var(--red); }
.nivel-btn--conjurador  { border-color: var(--blue); color: var(--blue); }
.nivel-btn--proficiente { border-color: var(--gold); color: var(--gold); }

.nivel-val {
  font-family: var(--font-display);
  font-size: 1.6rem;
  min-width: 28px;
  text-align: center;
}
.nivel-val--combatente  { color: var(--red); }
.nivel-val--conjurador  { color: var(--blue); }
.nivel-val--proficiente { color: var(--gold); }

.nivel-ctrl-suffix {
  font-family: var(--font-ui);
  font-size: .6rem;
  color: var(--text-dim);
}
.nivel-preview {
  font-family: var(--font-ui);
  font-size: .65rem;
  letter-spacing: .06em;
  margin-top: 6px;
  min-height: 16px;
}
.nivel-preview--combatente  { color: var(--red); }
.nivel-preview--conjurador  { color: var(--blue); }
.nivel-preview--proficiente { color: var(--gold); }

.classe-totais-text[data-status="ok"]      { color: var(--green); }
.classe-totais-text[data-status="over"]    { color: var(--red); }
.classe-totais-text[data-status="pending"] { color: var(--gold); }

/* ── ATRIBUTOS ──────────────────────────────────────── */
.attr-input-grid,
.attr-grid-info {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.attr-input-card,
.attr-card-info {
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 14px;
  border-radius: var(--radius);
}
.attr-card-info { padding: 12px; }
.attr-input-label {
  font-family: var(--font-ui);
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--gold);
  margin-bottom: 8px;
  display: block;
}
.attr-input {
  width: 100%;
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 8px;
  text-align: center;
  border-radius: var(--radius);
}
.attr-input:focus { outline: none; border-color: var(--gold); }
.attr-prof-note {
  font-family: var(--font-ui);
  font-size: .65rem;
  color: var(--gold);
  text-align: center;
  margin-top: 2px;
}
.attr-mod {
  text-align: center;
  font-family: var(--font-ui);
  font-size: .8rem;
  color: var(--text-dim);
  margin-top: 4px;
}
.attr-mod span { color: var(--gold); }

.attr-name-info {
  font-family: var(--font-ui);
  font-size: .75rem;
  letter-spacing: .1em;
  color: var(--gold);
  margin-bottom: 4px;
}
.attr-desc-info {
  font-size: .78rem;
  color: var(--text-dim);
  line-height: 1.5;
}

/* ── BÔNUS DE PROFICIENTE ───────────────────────────── */
.prof-bonus-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.prof-bonus-label {
  font-family: var(--font-ui);
  font-size: .68rem;
  letter-spacing: .08em;
  color: var(--gold);
  min-width: 80px;
}
.prof-attr-select {
  background: var(--surface-3);
  border: 1px solid var(--gold);
  color: var(--gold);
  font-family: var(--font-ui);
  font-size: .65rem;
  padding: 6px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  flex: 1;
  min-width: 120px;
}
.prof-bonus-applied {
  font-family: var(--font-ui);
  font-size: .7rem;
  color: var(--gold);
}

/* ── OCUPAÇÃO ───────────────────────────────────────── */
.ocup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
  max-height: 300px;
  overflow-y: auto;
}
.ocup-btn {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: var(--font-ui);
  font-size: .62rem;
  letter-spacing: .06em;
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius);
  transition: border-color .15s, color .15s, background .15s;
}
.ocup-btn:hover { border-color: var(--gold); color: var(--gold); }
.ocup-btn--selected {
  border-color: var(--gold);
  color: var(--gold);
  background: var(--gold-deep);
}

.ocup-detail {
  background: var(--surface);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 14px;
}
.ocup-detail[hidden] { display: none; }
.ocup-detail-title {
  font-family: var(--font-ui);
  font-size: 1rem;
  color: var(--gold);
  margin-bottom: 10px;
  letter-spacing: .1em;
}
.ocup-legend {
  font-family: var(--font-ui);
  font-size: .7rem;
  letter-spacing: .1em;
  color: var(--gold);
  margin-bottom: 8px;
}
.contador[data-status="ok"]      { color: var(--green); }
.contador[data-status="missing"] { color: var(--red); }
.contador[data-status="partial"] { color: var(--gold); }

/* ── CHIPS DE PERÍCIA (ocupação) ────────────────────── */
.pericias-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.pericia-chip {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: var(--font-ui);
  font-size: .62rem;
  letter-spacing: .06em;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.pericia-chip:hover { border-color: var(--gold); color: var(--gold); }
.pericia-chip--vantagem {
  border-color: var(--green);
  background: var(--green-dim);
  color: var(--green);
}
.pericia-chip--aprendida {
  border-color: var(--gold);
  background: var(--gold-deep);
  color: var(--gold);
}

/* ── PERÍCIAS — POOLS ───────────────────────────────── */
.pool-section {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
}
.pool-section--extra { border-color: #c8a96e55; }
.pool-head {
  font-family: var(--font-ui);
  font-size: .75rem;
  letter-spacing: .1em;
  color: var(--gold);
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px;
}
.pool-head-hint {
  font-size: .65rem;
  color: var(--text-dim);
}
.pool-head--extra { color: var(--gold); }
.pool-prof {
  color: var(--gold);
  font-size: .6rem;
}
.pool-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.pool-chip {
  font-family: var(--font-ui);
  font-size: .6rem;
  letter-spacing: .05em;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color .15s;
  display: flex;
  align-items: center;
  gap: 4px;
}
.pool-chip--p0 {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-dim);
}
.pool-chip--p1,
.pool-chip--p2,
.pool-chip--p3 {
  background: #0a1508;
  border: 1px solid #22aa5580;
  color: var(--green);
}
.pool-chip--locked {
  opacity: .4;
  pointer-events: none;
}
.pool-chip-pts {
  background: #22aa5530;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .55rem;
}
.pool-chip-ocup {
  color: var(--green);
  font-size: .5rem;
}

.extra-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.extra-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.extra-attr-select {
  background: var(--surface-3);
  border: 1px solid #c8a96e55;
  color: var(--gold);
  font-family: var(--font-ui);
  font-size: .6rem;
  padding: 5px 8px;
  border-radius: var(--radius);
  cursor: pointer;
}
.extra-pool-info {
  font-size: .65rem;
  color: var(--text-dim);
}

/* ── PERÍCIA CUSTOMIZADA ────────────────────────────── */
.custom-pericia-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: stretch;
}
.custom-pericia-nome { flex: 1; min-width: 160px; margin-bottom: 0; }
.custom-pericia-attr {
  background: var(--surface-3);
  border: 1px solid var(--gold);
  color: var(--gold);
  font-family: var(--font-ui);
  font-size: .68rem;
  padding: 0 12px;
  border-radius: var(--radius);
  cursor: pointer;
}
.custom-chip-wrap {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.custom-remove {
  font-family: var(--font-ui);
  font-size: .6rem;
  width: 18px;
  height: 18px;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--red);
  color: var(--red);
  border-radius: 50%;
  cursor: pointer;
  line-height: 1;
  transition: background .15s;
}
.custom-remove:hover { background: var(--red-dim); }

/* ── ARMADURA (aba Vida) ────────────────────────────── */
.armadura-head {
  display: grid;
  grid-template-columns: 1fr 90px 60px;
  gap: 10px;
  font-family: var(--font-ui);
  font-size: .58rem;
  letter-spacing: .1em;
  color: var(--text-mute);
  padding: 0 2px 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.armadura-head span:nth-child(2),
.armadura-head span:nth-child(3) { text-align: center; }

.armadura-row {
  display: grid;
  grid-template-columns: 1fr 90px 60px;
  gap: 10px;
  align-items: center;
  padding: 8px 2px;
  border-bottom: 1px solid var(--border-2);
}
.armadura-row:last-child { border-bottom: none; }
.armadura-info { display: flex; flex-direction: column; gap: 2px; }
.armadura-label {
  font-family: var(--font-ui);
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--gold);
}
.armadura-break {
  font-size: .68rem;
  color: var(--text-dim);
}
.armadura-edit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.armadura-edit-label {
  font-family: var(--font-ui);
  font-size: .52rem;
  letter-spacing: .08em;
  color: var(--text-mute);
}
.armadura-input {
  width: 100%;
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: .9rem;
  padding: 6px 4px;
  text-align: center;
  border-radius: var(--radius);
}
.armadura-input:focus { outline: none; border-color: var(--gold); }
.armadura-total {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--gold);
  text-align: center;
}

/* ── RESISTÊNCIAS ───────────────────────────────────── */
.pontos-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 12px 16px;
  border-radius: var(--radius);
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.pontos-label {
  font-family: var(--font-ui);
  font-size: .7rem;
  letter-spacing: .1em;
  color: var(--text-dim);
}
.pontos-valor {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--gold);
}
.pontos-total {
  font-family: var(--font-ui);
  font-size: .7rem;
  color: var(--text-dim);
}

.mode-btns {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.mode-btn {
  font-family: var(--font-ui);
  font-size: .62rem;
  letter-spacing: .08em;
  padding: 7px 14px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-dim);
  cursor: pointer;
  border-radius: var(--radius);
  transition: border-color .15s, color .15s, background .15s;
}
.mode-btn:hover { border-color: var(--gold); color: var(--gold); }
.mode-btn--active {
  border-color: var(--gold);
  background: var(--gold-deep);
  color: var(--gold);
}

.resist-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 16px;
}
.resist-chip {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: var(--font-ui);
  font-size: .62rem;
  letter-spacing: .06em;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.resist-chip:hover { border-color: var(--gold); color: var(--gold); }
.resist-chip--r,
.resist-chip--active {
  border-color: var(--green);
  background: var(--green-dim);
  color: var(--green);
}
.resist-chip--ic {
  border-color: var(--purple);
  background: var(--purple-dim);
  color: var(--purple);
}
.resist-chip--id {
  border-color: var(--red);
  background: var(--red-dim);
  color: var(--red);
}

.resist-selected {
  font-size: .82rem;
  color: var(--text-dim);
  line-height: 1.8;
}
.resist-summary-row { margin-bottom: 2px; }
.resist-summary-label--r  { color: var(--green); }
.resist-summary-label--ic { color: var(--purple); }
.resist-summary-label--id { color: var(--red); }

/* ── SUMÁRIO ────────────────────────────────────────── */
.summary-section {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 14px;
}
.summary-title {
  font-family: var(--font-ui);
  font-size: .75rem;
  letter-spacing: .15em;
  color: var(--gold);
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}
.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 4px 0;
  border-bottom: 1px solid #1a1a2a;
  font-size: .82rem;
  gap: 8px;
}
.summary-row:last-child { border-bottom: none; }
.summary-row--dim { color: var(--text-dim); }
.summary-key { color: var(--text-dim); flex-shrink: 0; }
.summary-val {
  color: var(--text);
  font-family: var(--font-ui);
  font-size: .75rem;
  letter-spacing: .06em;
  text-align: right;
  word-break: break-word;
  max-width: 60%;
}
.summary-val--gold   { color: var(--gold); }
.summary-val--red    { color: var(--red); }
.summary-val--blue   { color: var(--blue); }
.summary-val--green  { color: var(--green); }
.summary-val--purple { color: var(--purple); }
.summary-val--r      { color: var(--green); }
.summary-val--ic     { color: var(--purple); }
.summary-val--id     { color: var(--red); }
.summary-attr-tag {
  color: var(--text-mute);
  font-size: .7rem;
}
.summary-ocup-tag {
  color: var(--green);
  font-size: .65rem;
}
.summary-racial-tag {
  color: #c8a96e;
  font-size: .65rem;
}
.summary-espec-tag {
  color: var(--gold);
  font-size: .65rem;
}

/* ── HAKAS (sumário) ────────────────────────────────── */
.hakas-fields {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.hakas-field { flex: 1; min-width: 120px; }
.credito-display {
  width: 100%;
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--gold);
  font-family: var(--font-ui);
  font-size: 1rem;
  padding: 8px 10px;
  border-radius: var(--radius);
}

/* ── BARRA DE AÇÕES (fichas salvas) ─────────────────── */
.actions-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

/* ── TABELAS DE PROGRESSÃO DE CLASSE ────────────────── */
.classes-tabelas {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 16px;
}

.classe-tabela-wrap {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.classe-tabela-titulo {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mute);
  padding: 8px 12px;
  background: var(--surface-3);
  border-bottom: 1px solid var(--border);
}

.classe-tabela {
  display: flex;
  flex-direction: column;
}

.classe-tabela-header {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 8px;
  padding: 6px 12px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mute);
  border-bottom: 1px solid var(--border);
}

.classe-tabela-row {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 8px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.classe-tabela-row:last-child { border-bottom: none; }

.classe-tabela-row--ativo { opacity: 1; }
.classe-tabela-row--inativo { opacity: 0.35; }

.classe-tabela-nivel {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-mute);
  align-self: center;
}

.classe-tabela-ganhos {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

/* Chips de ganho por tipo */
.classe-ganho {
  font-size: 0.72rem;
  font-family: var(--font-ui);
  padding: 2px 7px;
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.classe-ganho--recurso     { background: var(--surface-3); color: var(--text-mute); border: 1px solid var(--border); }
.classe-ganho--habilidade  { background: #3a1a10; color: var(--red); border: 1px solid var(--red); }
.classe-ganho--magia       { background: #0d1a3a; color: var(--blue); border: 1px solid var(--blue); }
.classe-ganho--truque      { background: #1a1a3a; color: #9988ff; border: 1px solid #9988ff; }
.classe-ganho--passiva     { background: #1a140a; color: var(--gold); border: 1px solid var(--gold); }
.classe-ganho--atributo    { background: #1a2a10; color: #88cc44; border: 1px solid #88cc44; }
.classe-ganho--pericia     { background: #102a2a; color: #44ccaa; border: 1px solid #44ccaa; }
.classe-ganho--resistencia { background: #1a1a1a; color: var(--text-mute); border: 1px solid var(--border); font-style: italic; }

/* Info box de resistência */
.info-box--resist {
  margin-top: 10px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.info-box--resist strong { color: var(--text-mute); }

/* ── BÔNUS RACIAIS DE PERÍCIA ─────────────────────────── */
.pool-section--racial {
  border-color: #c8a96e55;
  background: rgba(200,169,110,.04);
}
.pool-head--racial {
  color: var(--gold);
}
.pool-head-counter {
  font-size: .65rem;
  color: var(--text-dim);
}
.pool-head-counter--done {
  color: var(--green);
}
.pool-chip-racial {
  color: #c8a96e;
  font-size: .5rem;
  background: rgba(200,169,110,.18);
  border-radius: 3px;
  padding: 1px 4px;
}
.pool-chip-racial-espec {
  color: var(--gold);
  font-size: .55rem;
}
.pool-chip--espec-racial {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 1px rgba(200,169,110,.3);
}

/* Chips de escolha racial (Humano +2) */
.racial-choice-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.racial-choice-chip {
  font-family: var(--font-ui);
  font-size: .6rem;
  letter-spacing: .05em;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 4px;
  transition: border-color .15s;
}
.racial-choice-chip:hover {
  border-color: var(--gold);
  color: var(--text);
}
.racial-choice-chip--on {
  background: rgba(200,169,110,.12);
  border-color: var(--gold);
  color: var(--gold);
}
.racial-choice-tag {
  background: rgba(200,169,110,.25);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: .55rem;
}

/* Chips de especialização racial escolhida */
.racial-espec-chip {
  font-family: var(--font-ui);
  font-size: .6rem;
  letter-spacing: .05em;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 3px;
  transition: border-color .15s;
}
.racial-espec-chip:hover {
  border-color: var(--gold);
  color: var(--text);
}
.racial-espec-chip--on {
  background: rgba(200,169,110,.12);
  border-color: var(--gold);
  color: var(--gold);
}
.racial-espec-star {
  color: var(--gold);
}

/* Chips de bônus racial fixo (informativo) */
.pool-section--racial-info { background: rgba(200,169,110,.03); }
.racial-fixed-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.racial-fixed-tag {
  font-family: var(--font-ui);
  font-size: .65rem;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background: rgba(200,169,110,.10);
  border: 1px solid rgba(200,169,110,.4);
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 4px;
}
.racial-fixed-tag--espec {
  border-color: var(--gold);
  background: rgba(200,169,110,.18);
}

/* ── Foco Humano (traço racial com atributo) ── */
.raca-hab-foco {
  margin-top: 6px;
  padding: 6px 10px;
  background: var(--gold-deep);
  border-left: 2px solid var(--gold-dim);
  border-radius: var(--radius);
  font-size: .8rem;
  line-height: 1.4;
}
.raca-hab-foco-label {
  color: var(--gold);
  font-weight: 600;
  letter-spacing: .03em;
}
.raca-hab-foco-sep {
  color: var(--text-dim);
}
.raca-hab-foco-efeito {
  color: var(--text);
}
.raca-hab-foco--vazio {
  color: var(--text-dim);
  font-style: italic;
  border-left-color: var(--border);
}

/* ══════════════════════════════════════════════════════════
   COMENTÁRIOS DE ATRIBUTO — tooltip de humor
══════════════════════════════════════════════════════════ */
.attr-comentario {
  font-size: .72rem;
  line-height: 1.4;
  color: var(--gold);
  font-style: italic;
  padding: 5px 8px 4px;
  margin-top: 5px;
  background: var(--gold-deep);
  border-left: 2px solid var(--gold-dim);
  border-radius: var(--radius);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity .3s ease, max-height .35s ease, padding .3s ease, margin .3s ease;
  pointer-events: none;
}
.attr-comentario--show {
  opacity: 1;
  max-height: 80px;
}
.attr-comentario--hide {
  opacity: 0;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
}

/* Cor varia por faixa — o JS não precisa saber, só a classe muda */
/* faixa baixa (1-5): vermelho suave */
/* Faixa baixa (1-5): classe adicionada via JS pois :has() não funciona no Chrome 74 */
.attr-comentario--baixo {
  color: var(--red) !important;
  background: var(--red-dim) !important;
  border-left-color: var(--red) !important;
}