/*
 * Visor de desenho em tela cheia — portal do cliente.
 *
 * Vive FORA do CSS da Montagem porque duas telas o usam: a montagem (conferir
 * a peça antes de comprar) e os projetos do pedido já gravado. O CSS da
 * Montagem só é carregado quando há IA configurada; o visor precisa existir de
 * qualquer jeito.
 *
 * As classes continuam com o prefixo `mo-` para não quebrar o que já existe
 * (marcação, JS e E2E da montagem) — renomear tudo seria risco sem ganho.
 */

body.mo-sem-rolagem { overflow: hidden; }

.mo-visor {
    background: #f8fafc;
    bottom: 0;
    display: flex;
    flex-direction: column;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1090;
}

.mo-visor-barra {
    align-items: center;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    gap: .6rem;
    justify-content: space-between;
    padding: .7rem .9rem;
}

.mo-visor-legenda {
    color: #334155;
    font-size: .86rem;
    font-weight: 600;
}

.mo-visor-fechar {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: #0f172a;
    display: inline-flex;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.mo-visor-fechar * { pointer-events: none; }

.mo-visor-tela {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    justify-content: center;
    overflow: auto;
    padding: 1rem;
}

/* Aqui o desenho ocupa o que tiver: é o ponto da tela cheia. */
.mo-visor-tela svg {
    height: auto;
    max-height: calc(100vh - 6rem);
    max-width: 100%;
    width: auto;
}

/* ---- zoom do visor ---- */

.mo-visor-zoom {
    align-items: center;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 8px 24px rgba(15, 23, 42, .18);
    display: flex;
    gap: .2rem;
    left: 50%;
    padding: .3rem .5rem;
    position: fixed;
    transform: translateX(-50%);
    z-index: 1095;
}

.mo-visor-botao {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: #0f172a;
    display: inline-flex;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.mo-visor-botao * { pointer-events: none; }
.mo-visor-botao:hover { background: #f1f5f9; }

.mo-visor-pct {
    color: #475569;
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    min-width: 48px;
    text-align: center;
}

/* O visor é a área de gesto: sem isto o navegador rola a página ao arrastar. */
.mo-visor-tela { touch-action: none; }

/* Compartilhar/baixar o desenho: mesmo alvo de toque do fechar, à esquerda
   dele. É por aqui que a peça vai para o instalador no mensageiro. */
.mo-visor-compartilhar { color: #1d4ed8; }
.mo-visor-compartilhar:hover { background: #eff6ff; }
.mo-visor-barra { gap: .3rem; }