/* ============================================================================
   GRUPO · PASSO 3 "REPRESENTANTES" (spec-selvagem-multi, E2 — DECISOES.md R1–R7b, F3, RP1–RP6).
   Visual aprovado: techterra-online-backend/docs/mock-grupo-representantes.html
   (este arquivo é o bloco "CSS DA PROPOSTA" do mock, mais os estados de carregando/erro).

   Reaproveita do style.css: casca do assistente (.mestre-form-* / .bf-step-*), as opções
   .grp-pol-opt do passo Captura, as linhas da seleção da raid/Jornada (.rrep-linha,
   .rrep-rep, .rrep-pill, .rrep-vazio, .rrep-motivo, .rrep-veredito, .rrep-chip, .rsel-ord,
   .raid-util.rrep-trocar) e o .grp-avatar-ph. Aqui só o que é próprio do passo: .grp-rep-*.
   Quem desenha é engine/core/grupos.js (renderRepresentantes).
   ============================================================================ */

/* Ícone de tipo no tamanho da linha `.rrep-rep` (no style.css ele é escopado por host: `.rrep-bd .tipo-ic`) */
.grupos-wz .tipo-ic { width: 16px; height: 16px; display: inline-block; flex-shrink: 0; object-fit: contain; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .85)); }

/* o passo inteiro: mesma pilha/gap do .mestre-form-body (o .bf-step não é flex) */
.grp-rep-box { display: flex; flex-direction: column; gap: 10px; transition: opacity .15s; }
.grp-rep-box.is-carregando .grp-rep-vagas,
.grp-rep-box.is-carregando .grp-rep-previa,
.grp-rep-box.is-carregando .grp-rep-apoio,
.grp-rep-box.is-carregando .rrep-veredito { opacity: .55; }

.grp-rep-intro { margin: 0; font-size: .8rem; line-height: 1.5; color: rgba(232, 216, 184, .72); }
.grp-rep-intro b { color: #e8d38a; font-weight: 600; }
.grp-rep-modo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.grp-rep-modo .grp-pol-opt.is-on { border-color: var(--gold, #c9a84c); background: rgba(201, 168, 76, .1); }
.grp-rep-auto { font-size: .74rem; font-style: italic; color: rgba(232, 216, 184, .6); }
.grp-rep-auto b { font-style: normal; color: #e8d38a; }
.grp-rep-vagas { display: flex; flex-direction: column; gap: 9px; }
.grp-rep-vaga .rrep-id { flex: 0 0 150px; }
.grp-rep-vaga .rrep-rep,
.grp-rep-vaga .rrep-vazio { flex: 1 1 300px; }
/* vaga vazia não bloqueia (R1/RP5): aviso âmbar, não o vermelho do `.rrep-motivo` */
.grp-rep-aviso { flex: 1 0 100%; padding-left: 4px; font-size: .73rem; line-height: 1.55; color: #f3c77a; }
.grp-rep-aviso b { color: #ffd68a; }
.rrep-veredito.is-aviso { border: 1px solid rgba(230, 192, 123, .5); background: rgba(230, 170, 60, .1); color: #f3dcb0; }
.grp-rep-nota { display: block; margin-top: 4px; font-size: .7rem; opacity: .75; }

/* prévia: quantos entram em campo e quais encontros podem sair (R7/R7b) */
.grp-rep-previa { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 9px 12px; border-radius: 10px; border: 1px solid rgba(201, 168, 76, .22); background: rgba(0, 0, 0, .25); font-size: .78rem; }
.grp-rep-campo { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.grp-rep-campo b { font-family: 'Cinzel', serif; color: #e8d38a; }
.grp-rep-dots { display: inline-flex; gap: 3px; }
.grp-rep-dots i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(201, 168, 76, .55); background: transparent; }
.grp-rep-dots i.on { background: #c9a84c; box-shadow: 0 0 6px rgba(201, 168, 76, .6); }
.grp-rep-sep { width: 1px; align-self: stretch; background: rgba(201, 168, 76, .22); }
.grp-rep-previa .rrep-chip small { font-family: 'Lora', serif; letter-spacing: 0; opacity: .7; margin-left: 3px; }
.grp-rep-previa .grp-rep-leg { font-size: .68rem; font-style: italic; color: rgba(232, 216, 184, .5); }

/* quem apoia: mochila (R2) + Comando/Elo por ficha de jogador (R3) */
.grp-rep-fichas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.grp-rep-ficha { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; border: 1px solid rgba(201, 168, 76, .25); background: rgba(0, 0, 0, .22); font-size: .72rem; line-height: 1.3; max-width: 100%; }
.grp-rep-ficha img,
.grp-rep-ficha .grp-avatar-ph { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: none; display: inline-grid; place-items: center; }
.grp-rep-ficha-txt { min-width: 0; flex: 1 1 auto; overflow: hidden; }
.grp-rep-ficha b { display: block; color: var(--text-light, #f0e6d2); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grp-rep-ficha small { display: block; color: rgba(232, 216, 184, .6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* pílulas da vaga nunca estouram a linha em tela estreita */
.grp-rep-vaga .rrep-rep-info { min-width: 0; }
.grp-rep-vaga .rrep-pill { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grp-rep-vaga .rrep-rep-nome,
.grp-rep-vaga .rrep-nome { overflow-wrap: anywhere; }
.grp-rep-ficha.is-npc { border-color: rgba(110, 170, 255, .45); background: rgba(46, 78, 128, .22); }
.grp-rep-ficha.is-estouro { border-color: rgba(231, 76, 60, .62); background: rgba(192, 57, 43, .15); }
.grp-rep-ficha .ok { color: #8fd6a6; }
.grp-rep-ficha .estouro { color: #ff8d7e; font-weight: 700; }

/* linha do picker: qual monstro entraria nesta vaga */
.grp-rep-pick-sub { display: block; margin-top: 2px; font-size: .72rem; color: rgba(232, 216, 184, .65); }
.grp-rep-pick-sub b { color: #e8d38a; }
.grp-rep-pick-sub .vz { color: #f3c77a; }

/* prévia indisponível: aviso âmbar com "Tentar de novo" — nunca trava o assistente */
.grp-rep-erro { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 9px 12px; border-radius: 10px; border: 1px solid rgba(230, 192, 123, .5); background: rgba(230, 170, 60, .1); color: #f3dcb0; font-size: .76rem; line-height: 1.45; }
.grp-rep-erro span { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.grp-rep-carregando { font-size: .76rem; font-style: italic; color: rgba(232, 216, 184, .6); }

/* Celular: as MESMAS regras em dois gatilhos — largura estreita (janela pequena no PC) e
   o marcador do mobile.css (`html[data-viewport="mobile"]`, aparelho de toque, inclusive
   tablet deitado com mais de 640px). Manter os dois blocos iguais. */
@media (max-width: 640px) {
    .grp-rep-modo { grid-template-columns: 1fr; }
    .grp-rep-vaga { gap: 8px 10px; padding: 9px 10px; }
    .grp-rep-vaga .rsel-ord { width: 28px; height: 28px; font-size: .72rem; }
    .grp-rep-vaga .rrep-retrato,
    .grp-rep-vaga .rrep-retrato-img,
    .grp-rep-vaga .rrep-retrato-ph { width: 40px; height: 40px; }
    .grp-rep-vaga .rrep-id { flex: 1 1 0; }
    .grp-rep-vaga .rrep-rep,
    .grp-rep-vaga .rrep-vazio { order: 5; flex: 1 1 100%; }
    .grp-rep-vaga .grp-rep-aviso,
    .grp-rep-vaga .rrep-motivo { order: 6; }
    .grp-rep-sep { display: none; }
    .grp-rep-ficha { flex: 1 1 100%; border-radius: 12px; }
}
html[data-viewport="mobile"] .grp-rep-modo { grid-template-columns: 1fr; }
html[data-viewport="mobile"] .grp-rep-vaga { gap: 8px 10px; padding: 9px 10px; }
html[data-viewport="mobile"] .grp-rep-vaga .rsel-ord { width: 28px; height: 28px; font-size: .72rem; }
html[data-viewport="mobile"] .grp-rep-vaga .rrep-retrato,
html[data-viewport="mobile"] .grp-rep-vaga .rrep-retrato-img,
html[data-viewport="mobile"] .grp-rep-vaga .rrep-retrato-ph { width: 40px; height: 40px; }
html[data-viewport="mobile"] .grp-rep-vaga .rrep-id { flex: 1 1 0; }
html[data-viewport="mobile"] .grp-rep-vaga .rrep-rep,
html[data-viewport="mobile"] .grp-rep-vaga .rrep-vazio { order: 5; flex: 1 1 100%; }
html[data-viewport="mobile"] .grp-rep-vaga .grp-rep-aviso,
html[data-viewport="mobile"] .grp-rep-vaga .rrep-motivo { order: 6; }
html[data-viewport="mobile"] .grp-rep-sep { display: none; }
html[data-viewport="mobile"] .grp-rep-ficha { flex: 1 1 100%; border-radius: 12px; }