/**
 * LUOR — Vitrine · As telas do cliente da loja (entrar, pedir acesso, senha, minha conta, carrinho e pedido do site)
 * @modulo   ecommerce
 * @tela     site_portal_css
 * @build    5
 * @data     25/10/2026
 * @tipo     MELHORIA
 * @desc     Build 5 (25/10, noite — F9.2, a compra no site): o *Carrinho* do visitante (`comprar.php`: os campos lado a lado `.cp-dois`,
 *           o endereço com o CEP, o cupom, o resumo com o total e a frase de quem recebe o pagamento — `.cp-*`) e a página do pedido
 *           (`compra.php`: o estado em cor — confirmado, esperando, tentar de novo, cancelado — `.cs-*`). Tokens do modelo da loja.
 *           Parti da b4 de 25/10.
 * @desc     Build 4 (25/10): ⭐ F5.5 — *Meus pedidos* (`pedidos.php`: o pedido em linha com o estado em cor, as peças ao abrir e
 *           *Pedir de novo* — `.mp-*`), o **pedido rápido por lista** no *Meu pedido* (a prévia de cada linha — `.lr-*`) e os
 *           **títulos em aberto** em *Minha conta* (o vencido em destaque e a linha digitável para copiar — `.tt-*`). Tokens do
 *           modelo da loja. Parti da b3 do zip das 09:37 de 25/10.
 */
.pt-wrap{ max-width:460px; margin:10px auto 30px; }
.pt-wrap.largo{ max-width:620px; }
.pt-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px 20px; box-shadow:var(--shadow-sm); }
.pt-card + .pt-card{ margin-top:16px; }
.pt-card h1{ font-family:var(--fdisp); font-size:22px; margin:0 0 6px; color:var(--ink); }
.pt-card h2{ font-family:var(--fdisp); font-size:17px; margin:0 0 10px; color:var(--ink); }
.pt-card p.pt-sub{ margin:0 0 16px; color:var(--muted); font-size:14px; line-height:1.5; }
.pt-campo{ margin-bottom:12px; }
.pt-campo label{ display:block; font-size:13px; font-weight:700; color:var(--ink-soft); margin-bottom:5px; }
.pt-campo input{ width:100%; box-sizing:border-box; padding:11px 13px; border:1.5px solid var(--line-2); border-radius:var(--radius-sm);
                 background:var(--card); color:var(--ink); font:inherit; font-size:15px; outline:0; }
.pt-campo input:focus{ border-color:var(--brand); }
.pt-campo .pt-dica{ font-size:12.5px; color:var(--muted); margin-top:4px; }
.pt-aceite{ display:flex; gap:8px; align-items:flex-start; font-size:12.5px; line-height:1.45; color:var(--ink-soft); margin:6px 0 14px; cursor:pointer; }
.pt-aceite input{ margin-top:2px; flex:0 0 auto; }
.pt-card .btn{ width:100%; }
.pt-msg{ margin-top:12px; font-size:14px; font-weight:600; min-height:1em; color:var(--ink); }
.pt-msg.erro{ color:var(--accent); }
.pt-links{ margin-top:14px; display:flex; flex-direction:column; gap:6px; font-size:14px; }
.pt-links a{ color:var(--brand-text, var(--ink)); text-decoration:underline; }
.pt-feito{ font-size:15px; line-height:1.55; color:var(--ink); }
.pt-hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.pt-dados{ display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:14.5px; color:var(--ink-soft); }
.pt-dados b{ color:var(--ink); }
.pt-sair{ background:transparent; border:1.5px solid var(--line-2); color:var(--ink); border-radius:var(--radius-sm); padding:10px 18px;
          font:inherit; font-weight:700; cursor:pointer; width:100%; }
/* b2: Minha conta (F5.3) */
.pt-libera{ margin:0; padding-left:20px; color:var(--ink-soft); font-size:14.5px; line-height:1.7; }
.pt-dados .pt-disp{ color:#157347; }
.pt-dados .pt-atraso{ color:var(--accent); }
/* b3: Meu pedido (F5.4) */
.pt-wrap.pd-wrap{ max-width:760px; }
.pt-campo textarea{ width:100%; box-sizing:border-box; padding:11px 13px; border:1.5px solid var(--line-2); border-radius:var(--radius-sm);
                    font:inherit; font-size:15px; color:var(--ink); background:var(--card); resize:vertical; outline:none; }
.pt-campo textarea:focus{ border-color:var(--brand); }
.pd-lista{ list-style:none; margin:0; padding:0; }
.pd-item{ display:grid; grid-template-columns:72px minmax(0,1fr) auto; gap:12px; align-items:center; padding:12px 0; border-top:1px solid var(--line); }
.pd-item:first-child{ border-top:0; }
.pd-item.pd-falta{ opacity:.75; }
.pd-foto{ width:72px; height:72px; border:1px solid var(--line); border-radius:10px; background:#fff; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.pd-foto img{ width:100%; height:100%; object-fit:contain; }
.pd-nome{ display:block; font-weight:700; font-size:14.5px; color:var(--ink); text-decoration:none; line-height:1.3; }
.pd-nome:hover{ text-decoration:underline; }
.pd-cod{ font-size:12.5px; color:var(--muted); margin:2px 0 2px; }
.pd-aviso{ font-size:12.5px; color:var(--accent); font-weight:600; margin-top:4px; }
.pd-lado{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.pd-qtd{ display:inline-flex; border:1.5px solid var(--line-2); border-radius:var(--radius-sm); overflow:hidden; background:var(--card); }
.pd-qtd button{ width:34px; border:0; background:transparent; font-size:18px; font-weight:700; color:var(--ink); cursor:pointer; }
.pd-qtd input{ width:54px; border:0; text-align:center; font-size:15px; font-weight:700; color:var(--ink); background:transparent; -moz-appearance:textfield; }
.pd-qtd input::-webkit-outer-spin-button, .pd-qtd input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.pd-preco{ font-size:12.5px; color:var(--muted); text-align:right; }
.pd-preco b{ display:block; font-size:16px; color:var(--ink); }
.pd-tirar{ background:transparent; border:0; color:var(--muted); font-size:12.5px; text-decoration:underline; cursor:pointer; padding:0; }
.pd-opcao{ display:flex; gap:10px; align-items:flex-start; border:1.5px solid var(--line-2); border-radius:var(--radius-sm); padding:11px 13px; cursor:pointer; }
.pd-opcao + .pd-opcao{ margin-top:8px; }
.pd-opcao:has(input:checked){ border-color:var(--brand); background:rgba(255,180,0,.06); }
.pd-opcao input{ margin-top:3px; flex:0 0 auto; }
.pd-opcao b{ display:block; color:var(--ink); font-size:15px; }
.pd-opcao small{ display:block; color:var(--muted); font-size:13px; margin-top:2px; line-height:1.45; }
.pd-total{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; margin:4px 0 14px; }
.pd-total span{ font-size:15px; color:var(--ink-soft); }
.pd-total b{ font-family:var(--fdisp); font-size:24px; color:var(--ink); }
.pd-total small{ flex-basis:100%; font-size:13px; color:var(--muted); }
.pd-total small.pd-min{ color:var(--accent); font-weight:600; }
.pt-card a.btn.pd-voltar{ display:block; text-align:center; text-decoration:none; margin-top:10px; }
@media (max-width:560px){
  .pd-item{ grid-template-columns:56px minmax(0,1fr); }
  .pd-foto{ width:56px; height:56px; }
  .pd-lado{ grid-column:1 / -1; flex-direction:row; align-items:center; justify-content:space-between; }
}

/* b4 — F5.5: Meus pedidos */
.mp-lista{ list-style:none; margin:0; padding:0; }
.mp-ped{ border-top:1px solid var(--line); padding:12px 0; }
.mp-ped:first-child{ border-top:0; }
.mp-topo{ display:flex; gap:10px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; }
.mp-cod{ font-weight:700; color:var(--ink); font-size:15px; }
.mp-sub{ font-size:12.5px; color:var(--muted); margin-top:2px; line-height:1.45; }
.mp-estado{ font-size:12px; font-weight:700; border-radius:999px; padding:3px 10px; white-space:nowrap; border:1.5px solid var(--line-2); color:var(--ink-soft); }
.mp-estado.separando, .mp-estado.esperando{ border-color:var(--brand); color:var(--brand-text, var(--ink)); }
.mp-estado.pronto{ background:var(--brand); border-color:var(--brand); color:var(--brand-ink, #fff); }
.mp-estado.cancelado{ color:var(--muted); text-decoration:line-through; }
.mp-acoes{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:8px; }
.mp-abrir{ background:transparent; border:0; color:var(--ink-soft); font-size:13px; text-decoration:underline; cursor:pointer; padding:0; }
.mp-itens{ margin:8px 0 0; padding:0; list-style:none; font-size:13.5px; color:var(--ink-soft); }
.mp-itens li{ display:flex; gap:8px; justify-content:space-between; padding:4px 0; border-top:1px dashed var(--line); }
.mp-itens li span.fora{ color:var(--muted); font-size:12px; }
.mp-paginas{ display:flex; gap:8px; justify-content:center; margin-top:14px; }
.pt-card .btn.btn-mini{ width:auto; display:inline-block; padding:8px 16px; font-size:13.5px; text-decoration:none; }

/* b4 — F5.5: o pedido rápido por lista */
.lr-linhas{ list-style:none; margin:10px 0 0; padding:0; font-size:13.5px; }
.lr-linhas li{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 10px; padding:8px 0; border-top:1px solid var(--line); align-items:center; }
.lr-linhas li .lr-cod{ color:var(--muted); font-size:12px; }
.lr-linhas li.nao .lr-peca{ color:var(--accent); font-weight:600; }
.lr-linhas select{ max-width:100%; padding:6px 8px; border:1.5px solid var(--line-2); border-radius:var(--radius-sm); background:var(--card); color:var(--ink); font:inherit; font-size:13.5px; }
.lr-qtd{ width:70px; padding:6px 8px; border:1.5px solid var(--line-2); border-radius:var(--radius-sm); background:var(--card); color:var(--ink); font:inherit; text-align:center; }

/* b4 — F5.5: os títulos em aberto */
.tt-lista{ list-style:none; margin:0; padding:0; }
.tt-tit{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 12px; padding:10px 0; border-top:1px solid var(--line); font-size:14px; }
.tt-tit:first-child{ border-top:0; }
.tt-tit b{ color:var(--ink); }
.tt-tit .tt-venc{ color:var(--muted); font-size:12.5px; }
.tt-tit.atraso .tt-venc{ color:var(--accent); font-weight:700; }
.tt-linha{ grid-column:1 / -1; display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-family:ui-monospace, monospace; font-size:12px; color:var(--ink-soft); }
.tt-copiar{ background:transparent; border:1.5px solid var(--line-2); border-radius:var(--radius-sm); padding:4px 10px; font:inherit; font-size:12px; color:var(--ink); cursor:pointer; }

/* b5 — F9.2: o carrinho do visitante */
.cp-dois{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 12px; }
.cp-dois.cp-rua{ grid-template-columns:minmax(0,1fr) 110px; }
.cp-dois.cp-cidade{ grid-template-columns:minmax(0,1fr) 80px; }
.cp-dois.cp-cep{ grid-template-columns:150px minmax(0,1fr); align-items:end; }
.cp-cep-msg .pt-dica{ margin:0 0 12px; }
.cp-opc{ font-weight:400; color:var(--muted); }
.cp-end{ margin-top:14px; padding-top:14px; border-top:1px dashed var(--line); }
.cp-enc{ margin:10px 0 0; font-size:12.5px; line-height:1.5; color:var(--muted); }
.cp-cupom{ display:flex; gap:8px; }
.cp-cupom input{ flex:1 1 auto; min-width:0; padding:10px 13px; border:1.5px solid var(--line-2); border-radius:var(--radius-sm);
                 background:var(--card); color:var(--ink); font:inherit; font-size:15px; outline:0; text-transform:uppercase; }
.cp-cupom input:focus{ border-color:var(--brand); }
.cp-cupom input::placeholder{ text-transform:none; }
.pt-card .cp-cupom .btn.btn-mini{ flex:0 0 auto; }
.cp-cupom-msg{ margin-top:8px; font-size:13px; color:var(--ink-soft); line-height:1.5; }
.cp-cupom-msg.erro{ color:var(--accent); font-weight:600; }
.cp-resumo{ margin-bottom:12px; }
.cp-resumo > div{ display:flex; justify-content:space-between; gap:10px; padding:5px 0; font-size:14.5px; color:var(--ink-soft); }
.cp-resumo > div b{ color:var(--ink); }
.cp-resumo .cp-desc b{ color:#157347; }
.cp-resumo .cp-total{ border-top:1px solid var(--line); margin-top:4px; padding-top:10px; align-items:baseline; }
.cp-resumo .cp-total span{ font-size:15px; }
.cp-resumo .cp-total b{ font-family:var(--fdisp); font-size:24px; }
.cp-seguro{ margin:10px 0 0; font-size:12.5px; line-height:1.5; color:var(--muted); text-align:center; }
.cp-seguro b{ color:var(--ink-soft); }
@media (max-width:560px){
  .cp-dois{ grid-template-columns:minmax(0,1fr); }
  .cp-dois.cp-rua{ grid-template-columns:minmax(0,1fr) 90px; }
  .cp-dois.cp-cidade{ grid-template-columns:minmax(0,1fr) 70px; }
  .cp-dois.cp-cep{ grid-template-columns:130px minmax(0,1fr); }
}

/* b5 — F9.2: o pedido do site */
.cs-estado h1 i{ margin-right:4px; }
.cs-estado.cs-ok h1{ color:#157347; }
.cs-estado.cs-fim h1{ color:var(--muted); }
.cs-estado.cs-tentar h1, .cs-estado.cs-espera h1{ color:var(--ink); }
.cs-estado.cs-espera h1 i{ color:var(--brand-text, var(--brand)); }
.cs-card a.btn{ display:block; text-align:center; text-decoration:none; margin-bottom:16px; }
.cs-h2{ margin-top:18px !important; }
.m-pista .cs-estado.cs-ok h1, .m-pista .cp-resumo .cp-desc b{ color:#7ee2a3; }