/* Telas do Pix automático e do acompanhar pedido (js/acompanhar.js), fase 3
   do Pix, em tela cheia dentro do modal do carrinho (#visao_acompanhar).
   Visual do mockup de 22/09 (Task 8c): barra na cor da loja no lugar do
   cabeçalho do modal, fundo cinza, cartões brancos arredondados. Tudo
   prefixado por id: o estilo.css de cada pasta de layout ganharia de uma
   regra solta. A fonte é a herdada de cada layout — nenhuma é importada
   aqui; a monoespaçada do copia-e-cola (código, não texto de leitura) é só a
   pilha de fontes do sistema (ui-monospace/Menlo/Consolas), sem baixar nada. */

/* Dois ids (especificidade 2,0,0) de propósito: esta div também tem a classe
   "modal-body", e o #modalSacola .modal-body de cada layout (1,1,0) — o
   pascoa muda até o fundo dela — venceria uma regra que ficasse só em
   #visao_acompanhar (1,0,0). */
#modalSacola #visao_acompanhar {
    padding: 0;
    display: flex;
    flex-direction: column;
    background: #f4f5f7;
}

/* Barra no lugar do cabeçalho do modal: "Pedido #N" à esquerda, um rótulo
   pequeno à direita ("Pagamento" nas telas de Pix, "Acompanhar" nas outras). */
#visao_acompanhar .acp-barra {
    flex: none;
    background: var(--ag-accent);
    color: var(--ag-accent-text, #fff);
    padding: 14px 16px;
    font-weight: 800;
    font-size: .95rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#visao_acompanhar .acp-barra-rotulo {
    font-weight: 600;
    font-size: .8rem;
    opacity: .9;
}

#visao_acompanhar .acp-corpo {
    flex: 1;
    padding: 16px 14px;
    display: flex;
    justify-content: center;
}

#visao_acompanhar .acp-tela {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}

/* O gap do .acp-tela não alcança aqui dentro: #acompanharMiolo é UM filho
   dele, e por dentro a caixa de pagamento e o cartão da linha do tempo são
   dois <div> colados sem nada entre eles. */
#visao_acompanhar #acompanharMiolo {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#visao_acompanhar .acp-titulo-tela { font-weight: 600; font-size: 1rem; margin: 2px 0 0; }
#visao_acompanhar .acp-sub-tela { color: #6c757d; font-size: .8rem; margin: 0; }

/* Caixa cinza (venceu, erro, aguardando, vencido/não gerado). A verde (pago/enviado)
   virou o cartão branco com o selo — .acp-card-selo, mais abaixo. */
#visao_acompanhar .acp-caixa { border-radius: 1rem; padding: 16px; text-align: center; }
#visao_acompanhar .acp-caixa-titulo { font-weight: 800; font-size: .95rem; margin: 0; }
#visao_acompanhar .acp-caixa-sub { font-weight: 600; font-size: .78rem; margin: 4px 0 0; }
#visao_acompanhar .acp-caixa-cinza { background: #f4f4f4; color: #6c757d; }

/* Cartão branco arredondado: o QR, a linha do tempo, ou (variante -centro) um
   spinner/texto simples centralizado (gerando, carregando, sem conexão, concluído). */
#visao_acompanhar .acp-card {
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
    padding: 14px;
}
#visao_acompanhar .acp-card-centro { text-align: center; padding: 28px 16px; }
#visao_acompanhar .acp-card-centro .spinner-border { margin-bottom: 12px; }

/* Selo verde do "v": trocou a caixa verde clarinha pelo cartão branco de sempre +
   esta bolinha, porque o Samuel achou os botões colados demais no topo da tela — o
   halo (dcfce7) e o verde mais vivo (16a34a, não o pastel da caixa antiga) dão mais
   peso ao selo. Tamanho padrão é o da tela de "Pedido enviado!"; .acp-selo-mini é a
   variante menor, usada no topo do QR e na caixa de pagamento confirmado. */
#visao_acompanhar .acp-selo {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: #16a34a;
    box-shadow: 0 0 0 8px #dcfce7;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
}
#visao_acompanhar .acp-selo-mini {
    width: 40px;
    height: 40px;
    box-shadow: 0 0 0 5px #dcfce7;
    margin: 0 auto 8px;
}

/* Cartão de "Pedido enviado!"/"Pix recebido!" — 18px a mais de espaço acima do
   selo (além do gap de 10px entre cartão e botão que o .acp-tela já dá), para
   os botões não ficarem colados no topo da tela. */
#visao_acompanhar .acp-card-enviado {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    padding: 30px 18px 26px;
    margin-top: 18px;
}
#visao_acompanhar .acp-enviado-titulo { font-size: 22px; font-weight: 800; color: #15803d; margin: 0; line-height: 1.2; }
#visao_acompanhar .acp-enviado-pedido { font-size: 15px; font-weight: 600; color: #212529; margin: 0; }
#visao_acompanhar .acp-enviado-linha { font-size: 13px; color: #6c757d; max-width: 26ch; margin: 0; }
/* +8px além do gap padrão do .acp-botoes com o cartão acima. */
#visao_acompanhar .acp-botoes-enviado { margin-top: 8px; }

/* Cartão pequeno do "deu certo": selo mini + título + linha, centralizado. Usado no
   topo do QR (substitui a faixa verde clarinha que ficava ali antes) e na caixa de
   pagamento confirmado do acompanhar — por isso o nome não fala em "QR". */
#visao_acompanhar .acp-card-selo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
    padding: 16px 14px 14px;
}
#visao_acompanhar .acp-selo-titulo { font-size: 17px; font-weight: 800; color: #15803d; margin: 0; line-height: 1.2; }
#visao_acompanhar .acp-selo-texto { font-size: 12.5px; color: #6c757d; margin: 0; line-height: 1.35; }

/* Valor + nome da loja, no alto do cartão do QR e do de "Pix venceu"/erro. */
#visao_acompanhar .acp-valor-loja {
    color: var(--ag-accent);
    font-weight: 800;
    font-size: 26px;
    line-height: 1.1;
    text-align: center;
    margin-bottom: 8px;
}
#visao_acompanhar .acp-valor-loja small {
    display: block;
    color: #6c757d;
    font-weight: 600;
    font-size: .75rem;
    margin-top: 2px;
}

#visao_acompanhar .acp-qr { display: flex; justify-content: center; padding: 8px 0 4px; }
#visao_acompanhar .acp-qr svg {
    width: 180px;
    height: 180px;
    max-width: 100%;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 6px;
    box-sizing: border-box;
}

/* Copia e cola: fonte monoespaçada (é um código, não texto de leitura), até ~3 linhas. */
#visao_acompanhar .acp-copia {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: .68rem;
    color: #6c757d;
    background: #f4f5f7;
    border-radius: .8rem;
    padding: 9px 11px;
    margin: 10px 0;
    word-break: break-all;
    line-height: 1.45;
    /* -webkit-line-clamp é quem corta na linha certa e põe o "…" — um
       max-height sozinho (o que tinha antes) não sabe onde a linha acaba e
       podia cortar no meio dela. Mesmo com o clamp, sobra uma tira fina da
       4ª linha por baixo (testado com várias strings de copia-e-cola nesta
       versão do Chrome); os 18px de padding (9 em cima, 9 embaixo) menos 6px
       de folga fecham essa fresta sem cortar nenhuma letra da 3ª linha
       (testado com descendentes "g/j/p/q/y" bem no fim dela). */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    max-height: calc(3 * 1.45em + 12px);
    overflow: hidden;
}

/* Bolinha piscando enquanto aguarda o pagamento do Pix. */
#visao_acompanhar .acp-espera {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: .8rem;
    color: #6c757d;
    font-weight: 600;
    padding: 4px 0;
}
#visao_acompanhar .acp-bolinha {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--ag-accent);
    animation: acpPulso 1.4s ease-in-out infinite;
}
#visao_acompanhar #acpRelogio { font-variant-numeric: tabular-nums; }
@keyframes acpPulso {
    0%, 100% { opacity: .25; }
    50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    #visao_acompanhar .acp-bolinha { animation: none; opacity: 1; }
}

/* Linha do tempo do acompanhar: um círculo de 22px por etapa. */
#visao_acompanhar .acp-linha {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 9px 0;
    border-bottom: 1px solid #f0f0f0;
}
#visao_acompanhar .acp-linha:last-child { border-bottom: 0; }
#visao_acompanhar .acp-linha b { display: block; font-weight: 700; font-size: .88rem; }
#visao_acompanhar .acp-linha span { color: #6c757d; font-size: .75rem; }
#visao_acompanhar .acp-linha-futura b { color: #aaa; }
#visao_acompanhar .acp-ponto {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    border: 2px solid #ddd;
    color: #bbb;
    background: #fff;
}
#visao_acompanhar .acp-ponto-feito { background: var(--ag-accent); border-color: var(--ag-accent); color: var(--ag-accent-text, #fff); }
#visao_acompanhar .acp-ponto-agora { border-color: var(--ag-accent); color: var(--ag-accent); }

#visao_acompanhar .acp-cancelado { color: #b42318; font-weight: 600; margin: 0; }
#visao_acompanhar .acp-agendado { margin: 0; }

/* Rodapé em texto pequeno cinza, quando a tela tiver um. */
#visao_acompanhar .acp-rodape { font-size: .72rem; color: #9aa0a6; text-align: center; padding: 6px 0 2px; }

/* Botões arredondados (raio .5rem), largura total: principal na cor da loja,
   secundário branco com borda, WhatsApp verde. */
#visao_acompanhar .acp-botoes { display: flex; flex-direction: column; gap: 10px; }
#visao_acompanhar .acp-principal,
#visao_acompanhar .acp-secundario,
#visao_acompanhar .acp-zap {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border-radius: .5rem;
    font-size: .95rem;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    border: 1px solid transparent;
}
#visao_acompanhar .acp-principal {
    background-color: var(--ag-accent);
    color: var(--ag-accent-text, #fff);
    border-color: var(--ag-accent);
}
#visao_acompanhar .acp-secundario {
    background-color: #fff;
    color: #212529;
    border-color: #ddd;
}
#visao_acompanhar .acp-zap {
    background-color: #198754;
    color: #fff;
    border-color: #198754;
}

/* Anel de foco padrão do navegador é azul, o que destoa numa loja
   vermelha/roxa/laranja. Mantém o anel — importante pra quem navega pelo
   teclado — só troca a cor pela da loja. */
#visao_acompanhar .acp-principal:focus,
#visao_acompanhar .acp-principal:focus-visible,
#visao_acompanhar .acp-secundario:focus,
#visao_acompanhar .acp-secundario:focus-visible,
#visao_acompanhar .acp-zap:focus,
#visao_acompanhar .acp-zap:focus-visible {
    outline: 2px solid var(--ag-accent);
    outline-offset: 2px;
}

/* Aviso no cartão Pix da escolha de pagamento, quando o Pix automático está
   ligado (templates/<pasta>/index.php, dentro do #pix). Fica aqui, e não no
   estilo.css de cada pasta, porque este arquivo já entra nas 9 pelo
   template.php. Destacado de propósito: o cliente que não lê escolhe Pix
   esperando a chave e depois estranha o QR. Cor própria no texto porque o
   #pix tem text-muted, que deixaria o aviso cinza. */
#pix .pix-aviso-qr {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #fff8e1;
    border: 1px solid #f5d77a;
    border-left: 4px solid var(--ag-accent);
    border-radius: 10px;
    padding: 12px 14px;
    color: #212529;
    text-align: left;
}
#pix .pix-aviso-qr .bi {
    font-size: 1.8rem;
    line-height: 1;
    color: var(--ag-accent);
    flex: none;
}
#pix .pix-aviso-qr strong {
    display: block;
    font-size: 1rem;
    margin-bottom: 2px;
}
#pix .pix-aviso-qr span {
    display: block;
    font-size: .9rem;
    line-height: 1.35;
}