/* =============================================================
   A PRATELEIRA
=============================================================

   O cartão do produto tem uma hierarquia deliberada e ela é o oposto da
   óbvia: o número grande NÃO é o preço.

   Preço todo mundo sabe de cor — quem vende repete dez vezes por dia. O
   que ninguém calcula é quanto sobra depois da plataforma, da
   maquininha, do imposto e do cupom que deu para fechar. É esse o número
   que decide se vale a pena vender aquilo, e é por isso que ele está em
   26px e o preço em 11px, acima dele, como a etiqueta que é.
*/

#prResumo {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 7px;
    font-size: 12.5px;
    color: var(--text-muted);
    margin-bottom: 14px;
}
#prResumo b { color: var(--text); font-variant-numeric: tabular-nums; }
.pr-fraco { color: var(--text-faint); }
.pr-alerta { color: var(--warn); }

.pr-lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 12px;
}

/* -------------------------------------------------------------
   A CAIXA
------------------------------------------------------------- */

.pr-caixa {
    display: flex;
    flex-direction: column;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid var(--border-soft);
    background: rgba(255, 255, 255, .018);
    transition: border-color .16s ease;
}
.pr-caixa:hover { border-color: var(--border); }

/* Fora da prateleira continua legível, só recuado: ele ainda conta
   história no financeiro, e apagar da vista o que ainda existe é como
   se perde o rastro de uma venda antiga. */
.pr-dormindo { opacity: .55; border-style: dashed; }

.pr-topo { display: flex; align-items: flex-start; gap: 8px; }
.pr-nome { flex: 1; min-width: 0; }

.pr-nome h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.35;
    word-break: break-word;
}

.pr-selo {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid var(--border-soft);
    font-size: 10px;
    font-weight: 600;
    color: var(--text-faint);
}
.pr-selo i { font-size: 8.5px; }
.pr-selo-off { border-style: dashed; }

.pr-editar {
    flex: 0 0 auto;
    width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid transparent; border-radius: 8px;
    background: transparent;
    color: var(--text-faint);
    font-size: 11px;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}
.pr-editar:hover { color: var(--accent-hi); border-color: var(--border-soft); }

.pr-descricao {
    margin: 7px 0 0;
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.5;
}

/* -------------------------------------------------------------
   O DINHEIRO
------------------------------------------------------------- */

.pr-dinheiro { margin: 12px 0 9px; }

.pr-preco {
    display: block;
    font-size: 11px;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}

.pr-liquido {
    display: block;
    margin-top: 1px;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
/* Vender no prejuízo não é um detalhe que se descobre no fim do mês. */
.pr-prejuizo { color: var(--danger); }

.pr-liquido-rotulo {
    display: block;
    font-size: 10.5px;
    color: var(--text-faint);
    letter-spacing: .03em;
    text-transform: uppercase;
    margin-top: 2px;
}

/* A barra mostra as três fatias do que o cliente paga: custo, taxas e o
   que sobra. Ver os três lado a lado aponta o dedo em quem está comendo
   o dinheiro — o número sozinho só diz que sumiu. */
.pr-barra {
    display: flex;
    height: 6px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, .06);
}
.pr-fatia { display: block; height: 100%; }

/* Separadas por FORMA além da cor: o custo é liso, a taxa é riscada, a
   sobra é a cor da marca. Em tela ao sol, ou para quem não separa as
   cores, o risco continua dizendo qual é qual. */
.pr-f-custo { background: var(--text-faint); }
.pr-f-taxa {
    background: var(--warn);
    background-image: repeating-linear-gradient(135deg,
        rgba(0, 0, 0, .35) 0 3px, transparent 3px 6px);
}
.pr-f-sobra { background: var(--accent); }

.pr-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 7px;
    font-size: 10.5px;
    color: var(--text-muted);
}
.pr-legenda span { display: inline-flex; align-items: center; gap: 5px; }

.pr-p {
    width: 8px; height: 8px;
    border-radius: 2px;
    display: inline-block;
    flex: 0 0 auto;
}

/* -------------------------------------------------------------
   TAXAS E CUPONS NO CARTÃO
------------------------------------------------------------- */

.pr-linha-itens {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 10px;
}

.pr-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid var(--border-soft);
    font-size: 10.5px;
    color: var(--text-muted);
    white-space: nowrap;
}
.pr-tag b { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.pr-tag i { font-size: 9px; }

.pr-tag-taxa { border-color: rgba(var(--warn-rgb), .28); }
.pr-tag-cupom { border-color: rgba(var(--accent-rgb), .32); color: var(--accent-hi); }
.pr-tag-cupom b { color: var(--accent-hi); }
.pr-vencido { opacity: .45; text-decoration: line-through; }

.pr-aviso, .pr-piso {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-top: 10px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-muted);
}
.pr-aviso i { color: var(--warn); font-size: 10px; margin-top: 2px; flex: 0 0 auto; }
.pr-piso i { color: var(--accent); font-size: 10px; margin-top: 2px; flex: 0 0 auto; }
.pr-piso b { color: var(--text); }

/* -------------------------------------------------------------
   VAZIO
------------------------------------------------------------- */

.pr-nada {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px 24px;
    border: 1px dashed var(--border);
    border-radius: 16px;
}
.pr-nada i { font-size: 30px; color: var(--text-faint); opacity: .6; }
.pr-nada h4 { margin: 12px 0 6px; font-size: 15px; color: var(--text); }
.pr-nada p {
    max-width: 460px;
    margin: 0 auto 16px;
    font-size: 12.5px;
    color: var(--text-muted);
    line-height: 1.6;
}

.pr-vazio, .pr-vazio-item {
    font-size: 12.5px;
    color: var(--text-faint);
    padding: 10px 2px;
    line-height: 1.55;
}

/* =============================================================
   O MODAL
============================================================= */

/* O modal fica ACIMA da navbar do celular.
   -------------------------------------------------------------
   Ele nascia em 4000 e a navbar de baixo mora em 9000. No
   computador ninguem via diferenca: o modal abre no meio da tela e a
   navbar nem existe. No celular a caixa vira uma folha colada na
   borda de baixo -- e e exatamente ali que fica o Salvar. A navbar
   pintava por cima dele e ainda comia o toque, porque e `fixed` e
   estava na frente. Dava para salvar so virando o telefone de lado,
   que e quando a folha encurta e o botao sobe.

   150000 e o mesmo degrau da ficha do Instagram, que resolveu isto
   antes; abaixo dos avisos (200000), que precisam aparecer por cima
   de qualquer coisa, inclusive desta folha. */
.pr-modal { position: fixed; inset: 0; z-index: 150000; display: flex;
            align-items: center; justify-content: center; padding: 16px; }
.pr-modal[hidden] { display: none; }

.pr-modal-fundo {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, .62);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.pr-modal-caixa {
    position: relative;
    width: min(680px, 100%);
    max-height: min(86vh, 860px);
    display: flex;
    flex-direction: column;
    border-radius: 18px;
    border: 1px solid var(--border-strong);
    background: linear-gradient(180deg, var(--pop-1), var(--pop-2));
    box-shadow: var(--sh-lg);
    animation: pr-sobe .2s cubic-bezier(.25, 1.2, .45, 1) both;
}

@keyframes pr-sobe {
    from { opacity: 0; transform: translateY(14px) scale(.985); }
    to   { opacity: 1; transform: none; }
}

.pr-modal-cabeca {
    display: flex; align-items: center; gap: 10px;
    padding: 15px 16px 12px;
    border-bottom: 1px solid var(--border-soft);
}
.pr-modal-cabeca h3 { flex: 1; margin: 0; font-size: 15px; color: var(--text); }

.pr-modal-x {
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 8px; background: transparent;
    color: var(--text-faint); font-size: 13px; cursor: pointer;
}
.pr-modal-x:hover { color: var(--text); background: rgba(255, 255, 255, .06); }

.pr-modal-corpo { flex: 1; overflow-y: auto; padding: 14px 16px; }

.pr-modal-pe {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--border-soft);
}
.pr-pe-direita { margin-left: auto; display: flex; gap: 8px; }
.pr-apagar { color: var(--danger); }

/* -------------------------------------------------------------
   OS CAMPOS
------------------------------------------------------------- */

.pr-campos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px;
}
.pr-campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pr-largo { grid-column: 1 / -1; }
.pr-campo[hidden] { display: none; }

.pr-campo > span {
    font-size: 11.5px;
    color: var(--text-dim);
    font-weight: 500;
}

.pr-switch { flex-direction: row; align-items: center; gap: 10px; }
.pr-switch > span:last-child { font-size: 12px; color: var(--text-dim); }
.pr-switch em { color: var(--text-faint); font-style: normal; }

.pr-depois {
    display: flex; align-items: flex-start; gap: 8px;
    margin-top: 14px; padding: 11px 12px;
    border: 1px dashed var(--border); border-radius: 11px;
    font-size: 12px; color: var(--text-muted); line-height: 1.55;
}
.pr-depois i { color: var(--accent); margin-top: 2px; }

/* -------------------------------------------------------------
   BLOCOS DE TAXA E CUPOM
------------------------------------------------------------- */

.pr-bloco {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--border-soft);
}

.pr-bloco-topo { display: flex; align-items: center; gap: 10px; }
.pr-bloco-topo h5 {
    flex: 1; margin: 0;
    font-size: 12.5px; font-weight: 600; color: var(--text);
    display: flex; align-items: center; gap: 7px;
}
.pr-bloco-topo i { color: var(--accent); font-size: 11px; }

.pr-bloco-conta {
    margin: 7px 0 11px;
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.6;
}

.pr-itens { display: flex; flex-direction: column; gap: 7px; }

/* A linha edita no lugar. Abrir um modal dentro de outro modal para
   trocar um número de taxa seria pedir três cliques por percentual —
   e ninguém cadastra uma taxa só. */
/* Uma linha flexível, e não uma grade de colunas fixas: a linha do
   cupom tem um campo a mais que a da taxa, e com grade isso vira duas
   definições que se desencontram na primeira mudança. */
.pr-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.pr-item-nome  { flex: 1 1 150px; min-width: 0; }
.pr-item-tipo  { flex: 0 0 66px; }
.pr-item-valor { flex: 0 0 88px; }
.pr-item-data  { flex: 0 0 132px; }
/* O X é sempre o último da linha, venha ele antes ou depois no HTML. */
.pr-item-x     { flex: 0 0 30px; margin-left: auto; order: 9; }
.pd-fica, .pr-usos { flex: 0 0 auto; order: 8; }
.pr-off { opacity: .5; }

.pr-item .form-control { height: 32px; font-size: 12px; min-width: 0; }
.pr-codigo { text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }

.pr-item-ok, .pr-item-x {
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border-soft); border-radius: 8px;
    background: transparent;
    font-size: 11px; cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}
.pr-item-ok { color: var(--text-muted); }
.pr-item-ok:hover { color: var(--success); border-color: rgba(var(--success-rgb), .4); }
.pr-item-x { color: var(--text-faint); }
.pr-item-x:hover { color: var(--danger); border-color: rgba(var(--danger-rgb), .4); }

.pr-usos {
    font-size: 10.5px;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------
   A CONTA, NO TOPO DA CAIXA
-------------------------------------------------------------
   Fica em cima, antes dos campos, e refaz a cada tecla: dá para ver a
   margem mudar enquanto se digita a taxa da Cakto. É o único momento em
   que esse número muda uma decisão — depois de salvo, ele já é passado. */

.pd-conta {
    padding: 12px 14px;
    margin-bottom: 14px;
    border-radius: 13px;
    border: 1px solid rgba(var(--accent-rgb), .25);
    background: var(--accent-soft);
}

.pd-conta-fria {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    border-style: dashed;
    border-color: var(--border);
    background: transparent;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.55;
}
.pd-conta-fria i { color: var(--text-faint); margin-top: 2px; }

.pd-conta-linha {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 11.5px;
    color: var(--text-muted);
}
.pd-conta-linha b { color: var(--text-dim); font-variant-numeric: tabular-nums; }

.pd-conta-sobra {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin: 5px 0 9px;
    flex-wrap: wrap;
}
.pd-conta-sobra strong {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.pd-conta-sobra em {
    font-style: normal;
    font-size: 11px;
    color: var(--text-faint);
}

.pd-conta-piso, .pd-conta-alerta {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-top: 9px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-muted);
}
.pd-conta-piso i { color: var(--accent); font-size: 10px; margin-top: 2px; flex: 0 0 auto; }
.pd-conta-piso b { color: var(--text); }
.pd-conta-alerta { color: var(--warn); }
.pd-conta-alerta i { font-size: 10px; margin-top: 2px; flex: 0 0 auto; }

/* O "fica R$" ao lado do cupom, calculado enquanto se digita: é a
   diferença entre cadastrar um desconto e saber o que ele custa. */
.pd-fica {
    font-size: 11px;
    font-weight: 600;
    color: var(--accent-hi);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* =============================================================
   O SELETOR DA CONVERSA
============================================================= */

.pr-escolher { display: flex; flex-direction: column; gap: 7px; }

.pr-opcao {
    display: flex; align-items: center; gap: 10px;
    width: 100%; text-align: left;
    padding: 11px 13px;
    border-radius: 12px;
    border: 1px solid var(--border-soft);
    background: rgba(255, 255, 255, .02);
    color: var(--text);
    font-family: inherit; font-size: 13px;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.pr-opcao:hover { border-color: var(--accent); background: var(--accent-soft); }

.pr-opcao-nome { flex: 1; min-width: 0; font-weight: 600;
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-opcao-preco { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.pr-opcao-cupom {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 7px; border-radius: 999px;
    background: var(--accent-soft); color: var(--accent-hi);
    font-size: 10.5px; font-weight: 600;
}

.pr-mandar { display: flex; flex-direction: column; gap: 9px; }

/* A conta, dentro da conversa. Quem está com o cliente na mão precisa
   saber o que sobra e até onde dá para ceder — sem isso, "quanto
   custa" vira um chute e o desconto também. */
.pd-chat-conta {
    padding: 9px 11px;
    border-radius: 10px;
    border: 1px solid var(--border-soft);
    background: rgba(255, 255, 255, .022);
}
.pd-chat-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    font-size: 11.5px;
    color: var(--text-muted);
}
.pd-chat-linha b { color: var(--text); font-variant-numeric: tabular-nums; }
.pd-chat-aviso {
    display: flex; align-items: flex-start; gap: 6px;
    margin-top: 6px; font-size: 10.5px; color: var(--warn); line-height: 1.5;
}
.pd-chat-aviso i { font-size: 9.5px; margin-top: 2px; flex: 0 0 auto; }

/* Bloco que some quando está vazio faz a pessoa achar que a função não
   existe. Melhor dizer que não há e mostrar onde se cadastra. */
.pd-sem-cupom {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    padding: 9px 11px;
    border-radius: 10px;
    border: 1px dashed var(--border);
    font-size: 11.5px;
    color: var(--text-faint);
    line-height: 1.5;
}
.pd-sem-cupom i { font-size: 11px; }
.pd-sem-cupom button {
    border: 0; background: transparent; padding: 0;
    color: var(--accent-hi); font-family: inherit; font-size: 11.5px;
    font-weight: 600; cursor: pointer; text-decoration: underline;
    text-underline-offset: 2px;
}

.pr-mandar-preco {
    display: flex; flex-direction: column; gap: 3px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-soft);
}
.pr-mandar-preco strong {
    font-size: 24px; font-weight: 700; color: var(--text);
    font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.pr-mandar-preco span { font-size: 12px; color: var(--text-muted); line-height: 1.5; }

.pr-acao {
    display: flex; align-items: center; gap: 11px;
    width: 100%; text-align: left;
    padding: 11px 13px;
    border-radius: 12px;
    border: 1px solid var(--border-soft);
    background: rgba(255, 255, 255, .02);
    color: var(--text);
    font-family: inherit;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.pr-acao:hover { border-color: var(--accent); background: var(--accent-soft); }
.pr-acao > i { color: var(--accent); font-size: 14px; width: 18px; text-align: center; flex: 0 0 auto; }
.pr-acao span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pr-acao b { font-size: 13px; font-weight: 600; }
.pr-acao em {
    font-style: normal; font-size: 11px; color: var(--text-faint);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.pr-piso-chat {
    margin: 2px 0;
    padding: 9px 11px;
    border-radius: 10px;
    border: 1px solid rgba(var(--warn-rgb), .28);
    background: rgba(var(--warn-rgb), .07);
    color: var(--text-dim);
}
.pr-piso-chat i { color: var(--warn); }

.pr-cupom-titulo {
    margin-top: 6px;
    font-size: 10.5px; font-weight: 600;
    letter-spacing: .04em; text-transform: uppercase;
    color: var(--text-faint);
}

.pr-cupons-chat { display: flex; flex-direction: column; gap: 6px; }

.pr-cupom-bt {
    display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
    width: 100%; text-align: left;
    padding: 10px 12px;
    border-radius: 11px;
    border: 1px solid rgba(var(--accent-rgb), .3);
    background: var(--accent-soft);
    color: var(--text);
    font-family: inherit;
    cursor: pointer;
    transition: border-color .15s ease;
}
.pr-cupom-bt:hover { border-color: var(--accent); }

.pr-cupom-cod {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12.5px; font-weight: 700; letter-spacing: .06em;
    color: var(--accent-hi);
}
.pr-cupom-off { font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.pr-cupom-fica {
    margin-left: auto; font-size: 12px; font-weight: 600; color: var(--text);
    font-variant-numeric: tabular-nums;
}
.pr-cupom-val { width: 100%; font-size: 10.5px; color: var(--text-faint); }

/* =============================================================
   CELULAR
============================================================= */

@media (max-width: 780px) {
    .pr-lista { grid-template-columns: 1fr; }

    .pr-campos { grid-template-columns: 1fr; }
    .pr-campo { grid-column: 1 / -1; }

    .pr-modal { padding: 0; align-items: flex-end; }
    .pr-modal-caixa {
        width: 100%;
        max-height: 92vh;

        /* `dvh` porque no iPhone `vh` e medido com a barra do
           navegador ESCONDIDA. Com a barra na tela, o rodape da folha
           cai abaixo do corte -- o mesmo sintoma da navbar, por outro
           motivo. Quem nao conhece `dvh` fica com a linha de cima. */
        max-height: 92dvh;
        border-radius: 18px 18px 0 0;
        border-bottom: 0;
    }
    @keyframes pr-sobe {
        from { opacity: 0; transform: translateY(40px); }
        to   { opacity: 1; transform: none; }
    }

    /* Em 360px tudo numa linha daria campos de quarenta pixels — onde
       não cabe nem "maquininha". O nome sobe sozinho e o resto desce. */
    .pr-item {
        row-gap: 5px;
        padding-bottom: 9px;
        border-bottom: 1px solid var(--border-soft);
    }
    .pr-item-nome { flex: 1 1 100%; }
    .pr-item-valor { flex: 1 1 70px; }
    .pr-item-data { flex: 1 1 100%; }
    .pd-fica { flex: 1 1 auto; }

    .pr-modal-pe { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
    .pr-modal-caixa { animation: none; }
    .pr-caixa, .pr-opcao, .pr-acao, .pr-cupom-bt, .pr-editar { transition: none; }
}