/* ============================================================================
 * passe_fluxo_avisos.css — avisos de aprovação (core/aprovacao_avisos.js, que nasceu
 * do antigo passe_avisos.js). Mock aprovado: techterra-online-backend/docs/mock-passe-avisos.html
 * (M3, A + C). As peças novas da aprovação comum (grupos por tipo) ficam em aprovacao.css.
 *
 * Reusa do style.css a casca .alternart-modal-overlay / .alternart-modal.is-warning /
 * .alternart-modal-btn (a do aviso de recebimento das transferências), o .nav-btn-badge
 * e, do campeonato.css, o balão de uma linha .cp-balao. Aqui só as peças .pva-*.
 * ========================================================================== */

/* ---------- modal obrigatório: a casca do recebimento, um pouco mais larga, sem ✕ ---------- */
.pva-modal { width: min(480px, 92vw); }
.pva-modal .alternart-modal-footer [hidden] { display: none; }
.pva-item + .pva-item { margin-top: 14px; padding-top: 14px; border-top: 1px dashed rgba(201, 168, 76, 0.25); }
.pva-nota { font-size: .74rem; color: rgba(232, 216, 184, .55); margin: 12px 0 0; font-style: italic; line-height: 1.4; }

/* cartão do pedido */
.pva-ped {
    position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px;
    padding: 10px 12px; border-radius: 8px; background: rgba(60, 42, 22, .45); border: 1px solid rgba(201, 168, 76, .25);
}
.pva-ped-ic {
    width: 44px; height: 44px; border-radius: 8px; display: grid; place-items: center; font-size: 1.4rem;
    background: #000; border: 1px solid rgba(201, 168, 76, .3);
}
.pva-ped-info { min-width: 0; }
.pva-ped-tit { font-family: 'Cinzel', serif; color: #f3da9c; font-size: .95rem; line-height: 1.25; overflow-wrap: anywhere; }
.pva-ped-sub { font-size: .76rem; color: rgba(232, 216, 184, .6); margin-top: 2px; }
.pva-ped-sub b { color: rgba(232, 216, 184, .9); }
.pva-ped-res { font-size: .84rem; color: rgba(232, 216, 184, .9); margin-top: 5px; line-height: 1.4; }
.pva-ped-acao { display: flex; justify-content: flex-end; margin-top: 8px; }
.pva-ped-acao .alternart-modal-btn { padding: 6px 12px; font-size: .78rem; }

/* relógio do prazo */
.pva-rel {
    position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px;
    padding: 10px 12px; border-radius: 8px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(240, 196, 80, .35);
}
.pva-rel-ic { font-size: 1.3rem; line-height: 1; }
.pva-rel-t { flex: 1 1 180px; min-width: 0; font-size: .84rem; line-height: 1.4; }
.pva-rel-t b { color: #fff; }
.pva-rel-t small { display: block; color: rgba(232, 216, 184, .6); font-size: .74rem; margin-top: 2px; }
.pva-rel-c { margin-left: auto; font: 700 1.05rem 'Cinzel', serif; color: #f8d97e; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* criador restrito esperando (paleta do .mestre-passe-trava-aviso) */
.pva-restr {
    position: relative; display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; padding: 10px 12px;
    border-radius: 8px; background: rgba(160, 40, 40, .28); border: 1px solid rgba(230, 110, 90, .55);
    color: #ffe2d6; font-size: .84rem; line-height: 1.45;
}
.pva-restr b { color: #fff; }
.pva-restr .pva-rc { font: 700 .9rem 'Cinzel', serif; color: #ffb4a8; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* celular: o aviso cabe na tela (só neste modal; os outros AlternartModal ficam como estão) */
html[data-viewport="mobile"] .pva-obrig { padding: 12px; }
html[data-viewport="mobile"] .pva-modal .alternart-modal-head { padding: 14px 16px 0; }
html[data-viewport="mobile"] .pva-modal .alternart-modal-body { padding: 12px 14px; }
html[data-viewport="mobile"] .pva-modal .alternart-modal-footer { padding: 12px 14px 14px; }
html[data-viewport="mobile"] .pva-modal .alternart-modal-footer .alternart-modal-btn { flex: 1 1 0; padding: 11px 8px; }
html[data-viewport="mobile"] .pva-rel-c { margin-left: 0; }

/* ---------- número + balão no botão do Painel do Mestre ---------- */
#btn-mestre-painel { position: relative; overflow: visible; }
#btn-mestre-painel > .pva-badge { top: -8px; bottom: auto; right: -6px; }
#btn-mestre-painel > .pva-badge.cp-urgente {
    background: #c0392b; border-color: #ff8a7a; color: #fff;
    box-shadow: 0 0 0 2px var(--bg-dark), 0 0 12px rgba(231, 76, 60, 0.85);
    animation: pva-pulsa 1.2s ease-in-out infinite;
}
@keyframes pva-pulsa { 50% { transform: scale(1.2); } }
/* o balão (.cp-balao) só aparece com o perfil narrador, como o próprio botão */
body.is-jogador #btn-mestre-painel .pva-painel-balao { display: none; }
/* Celular: o botão mora na gaveta "Ajustes"; o número fica no fim da linha */
.mob-drawer #btn-mestre-painel > .pva-badge { position: static; margin-left: auto; }
.mob-burger .pva-burger-dot {
    position: absolute; top: 10px; right: calc(50% - 18px); width: 9px; height: 9px; border-radius: 50%;
    background: var(--gold); box-shadow: 0 0 0 2px var(--bg-dark); pointer-events: none;
}
.mob-burger .pva-burger-dot.urg { background: #e74c3c; }
@media (prefers-reduced-motion: reduce) { #btn-mestre-painel > .pva-badge.cp-urgente { animation: none; } }

/* ---------- balão limpo do perfil jogador: "☆ Entrar como narrador" ---------- */
.pva-balao {
    position: fixed; z-index: 10500; width: 340px; max-width: calc(100vw - 16px);
    padding: 11px 12px 10px; border-radius: 8px; background: var(--bg-medium); border: 1px solid var(--gold-dark);
    color: var(--text-light); font: 400 .8rem/1.45 'Lora', serif; text-align: left; white-space: normal;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .6);
}
.pva-balao::before {
    content: ''; position: absolute; top: -6px; right: 14px; border: 6px solid transparent; border-top: 0;
    border-bottom-color: var(--gold-dark);
}
.pva-balao.urg { border-color: #c0392b; }
.pva-balao.urg::before { border-bottom-color: #c0392b; }
/* sem âncora visível (menu principal): canto de cima, sem a setinha */
.pva-balao.pva-balao-solto { top: 16px; right: 16px; }
.pva-balao.pva-balao-solto::before { display: none; }
/* celular: largura toda, no alto, sem setinha */
.pva-balao.pva-balao-mob { top: calc(8px + env(safe-area-inset-top, 0px)); left: 8px; right: 8px; width: auto; max-width: none; }
.pva-balao.pva-balao-mob::before { display: none; }
.pva-b-t { font-size: .86rem; color: var(--gold-light); }
.pva-b-t b { color: #fff; }
.pva-b-s { color: rgba(232, 216, 184, .75); margin-top: 3px; }
.pva-b-s b { color: #fff; font-variant-numeric: tabular-nums; }
.pva-b-r {
    margin-top: 6px; padding: 5px 8px; border-radius: 6px; background: rgba(160, 40, 40, .3);
    border: 1px solid rgba(230, 110, 90, .5); color: #ffe2d6;
}
.pva-b-r b { color: #ffb4a8; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pva-b-a { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
.pva-b-a .alternart-modal-btn { padding: 6px 11px; font-size: .76rem; white-space: nowrap; }
html[data-pointer="coarse"] .pva-b-a .alternart-modal-btn { min-height: 40px; }