/* Fluxo do passe — restricao no Painel do Mestre (mestre_painel.js).
   docs/spec-passe-fluxo (CONTRATOS §4b, mock M4 mock-passe-restricao.html).
   A faixa base (.mestre-passe-trava-aviso) e o "Sair da conta" (.mestre-painel-sair)
   moram no style.css; aqui so' o que o fluxo novo acrescenta ou corrige. */

/* Slot da faixa entre o cabecalho e as abas: repintado por dentro (restrito,
   provisorio ou nada). Vazio, nao ocupa espaco. */
.mestre-passe-faixa-slot { flex-shrink: 0; }
.mestre-passe-faixa-slot:empty { display: none; }

/* Restrito, mas enviado ha' menos de 2h: a vez e' do outro narrador (E1). */
.mestre-passe-trava-aviso.is-aguardando {
    background: rgba(150, 105, 25, 0.30);
    border-bottom-color: rgba(240, 190, 90, 0.6);
    color: #ffeccc;
}
.mestre-passe-trava-aviso .mestre-passe-trava-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 10px;
    font-size: 0.86rem;
    opacity: 1;
}
.mestre-passe-trava-relogio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid rgba(240, 190, 90, 0.7);
    background: rgba(0, 0, 0, 0.35);
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    color: #ffd98a;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.mestre-passe-trava-link {
    background: none;
    border: 0;
    padding: 0;
    margin-left: 4px;
    color: #ffd98a;
    text-decoration: underline;
    font: inherit;
    cursor: pointer;
}
.mestre-passe-trava-link:hover { color: #fff1dc; }

/* Liberado so' ate' a resposta (E2): linha discreta, o painel volta inteiro. */
.mestre-passe-libera-aviso {
    padding: 4px 14px;
    font-size: 0.78rem;
    line-height: 1.35;
    text-align: center;
    color: rgba(255, 217, 138, 0.9);
    background: rgba(224, 164, 90, 0.08);
    border-bottom: 1px solid rgba(224, 164, 90, 0.25);
}
.mestre-passe-libera-aviso b { color: #ffd98a; font-weight: 600; }

/* "Sair da conta" no painel preso (R2-16): no toque e em tela estreita o botao
   (absoluto, top: 10px) ficava por cima da faixa, porque sem ✕/⚙ o cabecalho
   encolhe. Aqui ele volta pro fluxo do cabecalho, numa coluna propria. */
html[data-pointer="coarse"] .mestre-painel-header.mestre-painel-header--travado,
html[data-viewport="mobile"] .mestre-painel-header.mestre-painel-header--travado {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}
html[data-pointer="coarse"] .mestre-painel-header.mestre-painel-header--travado::before,
html[data-viewport="mobile"] .mestre-painel-header.mestre-painel-header--travado::before { content: none; }
html[data-pointer="coarse"] .mestre-painel-header--travado .mestre-painel-ornament,
html[data-viewport="mobile"] .mestre-painel-header--travado .mestre-painel-ornament { display: none; }
html[data-pointer="coarse"] .mestre-painel-header--travado .mestre-painel-sair,
html[data-viewport="mobile"] .mestre-painel-header--travado .mestre-painel-sair {
    position: static;
    min-height: var(--mob-tap, 44px);
    white-space: nowrap;
}
@media (max-width: 760px) {
    .mestre-painel-header.mestre-painel-header--travado {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
    }
    .mestre-painel-header.mestre-painel-header--travado::before { content: none; }
    .mestre-painel-header--travado .mestre-painel-ornament { display: none; }
    .mestre-painel-header--travado .mestre-painel-title { text-align: left; }
    .mestre-painel-header--travado .mestre-painel-sair { position: static; white-space: nowrap; }
}

/* Linha do passe: etapa e prazo da vez (M1/M4). */
.mestre-passe-row-fluxo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    margin-top: 4px;
    font-size: 0.78rem;
    color: rgba(232, 216, 184, 0.85);
}
.mestre-passe-etapa-chip {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: 6px;
    background: rgba(201, 168, 76, 0.12);
    border: 1px solid rgba(201, 168, 76, 0.35);
    color: var(--gold-light, #f3da9c);
}
/* Descricao do tema escolhido: linha propria, abaixo do chip. */
.mestre-passe-tema-desc {
    flex-basis: 100%;
    font-style: italic;
    color: rgba(232, 216, 184, 0.7);
}
.mestre-passe-prazo-chip { color: #ffd98a; }
.mestre-passe-prazo-chip.is-ruim { color: #ff9f8f; }

/* Enviar com pendencia (L6): clicavel, com o numero do que falta. */
.mestre-action-btn.mestre-passe-enviar-pendente { opacity: 0.85; }
.mestre-passe-pend-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    margin-left: 4px;
    padding: 0 5px;
    border-radius: 999px;
    background: rgba(200, 50, 60, 0.85);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
}

/* Painel do Mestre aberto com o menu principal na tela (ex.: "Abrir o pedido" logo
   no login): o menu some por baixo ate' o painel fechar (classe posta/tirada pelo
   mestre_painel.js). */
body.painel-sobre-menu #main-menu { visibility: hidden; }

/* Slots dos componentes do mestre_passe_fluxo.js (roda das 30, card do Dashboard). */
.mestre-passe-roda-slot:empty,
.mestre-dash-passe-slot:empty { display: none; }
.mestre-dash-passe-slot { padding: 12px 16px 0; }