/* ============================================================
   DOURA · telas de conta (criar conta, entrar, minha conta)
   ============================================================ */

.auth { padding-block: 40px 72px; }
.auth-container { max-width: 720px; }
.auth-estreito { max-width: 440px; }

.auth-cabecalho { text-align: center; margin-bottom: 24px; }
.auth-cabecalho .eyebrow { justify-content: center; }
.auth-cabecalho .eyebrow .ico { width: 16px; height: 16px; }
.auth-cabecalho h1 { font-size: clamp(26px, 3.4vw, 34px); font-weight: 700; margin: 10px 0 8px; }
.auth-cabecalho p { color: var(--texto-2); max-width: 460px; margin-inline: auto; }

.auth-card { background: #fff; border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra-s); padding: 28px; }

/* ---------- Campos ---------- */
.campo { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.campo:last-child { margin-bottom: 0; }
.campo label { font-size: 13.5px; font-weight: 600; color: var(--texto); }
.campo .opcional { font-weight: 500; color: var(--texto-3); }
.campo input { height: 50px; border: 1px solid var(--borda); border-radius: 12px; background: #fff; padding: 0 15px; font-size: 15px; transition: border-color .2s, box-shadow .2s; }
.campo input::placeholder { color: #b3b0a6; }
.campo input:focus { outline: none; border-color: var(--ouro); box-shadow: 0 0 0 4px rgb(193 145 1 / .15); }
.campo .dica { font-size: 12.5px; color: var(--texto-3); }
.campo .dica a { text-decoration: underline; }
.campo .erro { font-size: 12.5px; font-weight: 500; color: var(--vermelho); }
.erro-solto { display: block; margin: -8px 0 12px; font-size: 12.5px; color: var(--vermelho); }
.campo.tem-erro input { border-color: var(--vermelho); box-shadow: 0 0 0 4px rgb(220 38 38 / .12); }

.campo-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.campo-linha .campo { margin-bottom: 18px; }
.campo-curto { max-width: 160px; }
.cep-linha { display: flex; align-items: center; gap: 12px; }
.cep-linha input { flex: 1; }
.cep-estado { font-size: 13px; font-weight: 600; color: var(--verde); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.cep-estado.carregando { color: var(--texto-3); }
.cep-estado.falhou { color: var(--vermelho); }

/* ---------- Passos ---------- */
.passos-trilha { display: flex; gap: 8px; margin-bottom: 26px; }
.passos-trilha li { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--texto-3); padding-bottom: 12px; border-bottom: 2px solid var(--borda); transition: color .3s, border-color .3s; }
.passos-trilha li span { width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--borda); color: var(--texto-2); display: grid; place-items: center; font-size: 12px; transition: background .3s, color .3s; }
.passos-trilha li.ativo { color: var(--texto); border-color: var(--ouro); }
.passos-trilha li.ativo span { background: var(--grad-ouro); color: #1a1300; }
.passos-trilha li.feito span { background: var(--verde); color: #fff; }

.passo { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.passo[hidden] { display: none; }
.passo-botoes { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; }
.passo-botoes .btn { flex: 1; }
@media (min-width: 560px) { .passo-botoes .btn { flex: 0 1 auto; min-width: 150px; } .passo-botoes { justify-content: flex-end; } .passo-botoes .btn-claro { margin-right: auto; } }

/* ---------- Revisão ---------- */
.revisao-titulo { font-size: 22px; font-weight: 700; }
.revisao-texto { color: var(--texto-2); margin: 6px 0 20px; }
.revisao-bloco { border: 1px solid var(--borda); border-radius: 14px; padding: 18px; margin-bottom: 16px; background: #fdfcf9; }
.revisao-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.revisao-topo h2, .revisao-topo h3 { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; font-family: var(--fonte-titulo); }
.revisao-topo .ico { width: 18px; height: 18px; color: var(--ouro-escuro); }
.link-editar { font-size: 13px; font-weight: 600; color: var(--ouro-escuro); text-decoration: underline; }
.link-editar:hover { color: var(--texto); }
.revisao-lista { display: grid; gap: 12px; margin: 0; }
.revisao-lista div { display: grid; grid-template-columns: 90px 1fr; gap: 12px; align-items: baseline; }
.revisao-lista dt { font-size: 13px; color: var(--texto-3); }
.revisao-lista dd { margin: 0; font-size: 14.5px; font-weight: 600; word-break: break-word; }
.revisao-endereco { font-size: 14.5px; line-height: 1.6; color: var(--texto); }
.revisao-endereco .ref { color: var(--texto-3); font-size: 13px; }

.confirmar { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border: 1px solid var(--borda); border-radius: 14px; background: var(--ouro-suave); cursor: pointer; }
.confirmar.tem-erro { border-color: var(--vermelho); }
.confirmar input { width: 20px; height: 20px; margin-top: 1px; flex: none; accent-color: var(--ouro-escuro); cursor: pointer; }
.confirmar span { font-size: 14px; font-weight: 500; color: #5a4500; }

/* ---------- Avisos ---------- */
.alerta { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 12px; font-size: 14px; font-weight: 500; margin-bottom: 20px; }
.alerta .ico { width: 20px; height: 20px; flex: none; }
.alerta-erro { background: #fdecec; color: #a51f1f; }
.alerta-ok { background: #e8f6ee; color: #14683a; }

.auth-troca { text-align: center; margin-top: 20px; font-size: 14px; color: var(--texto-2); }
.auth-troca a { font-weight: 600; color: var(--ouro-escuro); text-decoration: underline; }
.auth-nota { display: flex; align-items: center; gap: 8px; justify-content: center; margin-top: 22px; font-size: 12.5px; color: var(--texto-3); }
.auth-nota .ico { width: 16px; height: 16px; }

/* ---------- Minha conta ---------- */
.conta-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.conta-bloco { background: #fff; border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra-s); padding: 24px; }
.conta-acoes { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 22px; }
.conta-acoes form { margin: 0; }

/* ---------- Confirmação do pedido ---------- */
.pedido-cartao { background: #fff; border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra-s); padding: 24px; }
.pedido-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--borda); }
.pedido-num { font-family: var(--fonte-titulo); font-size: 18px; font-weight: 700; }
.pedido-itens { display: grid; gap: 10px; margin: 0 0 16px; }
.pedido-itens li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: baseline; font-size: 14.5px; }
.pi-qtd { font-weight: 700; color: var(--ouro-escuro); }
.pi-nome { color: var(--texto); }
.pi-preco { font-weight: 600; white-space: nowrap; }
.pedido-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; border-top: 1px solid var(--borda); }
.pedido-total strong { font-family: var(--fonte-titulo); font-size: 22px; font-weight: 700; }
.pedido-pgto { font-size: 13px; color: var(--texto-3); margin-top: 4px; }
.pedido-sub { padding-top: 6px; font-size: 14px; color: var(--texto-2); }
.pedido-sub span { font-weight: 500; }
.pedido-desc { padding-top: 6px; border-top: 0; font-size: 14px; color: #1a7a4a; }
.pedido-desc span { font-weight: 600; }
.pedido-desc span:first-child { display: inline-flex; align-items: center; gap: 5px; }
.pedido-desc .ico { width: 15px; height: 15px; }
.pedido-cashback-ganho { display: flex; align-items: center; gap: 7px; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: rgb(26 122 74 / .10); color: #1a7a4a; font-size: 13.5px; }
.pedido-cashback-ganho .ico { width: 17px; height: 17px; flex: none; }
.pedido-entrega { margin: 18px 0; padding: 16px; border-radius: 12px; background: #fdfcf9; border: 1px solid var(--borda); }
.pedido-entrega h3 { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.pedido-entrega .ico { width: 18px; height: 18px; color: var(--ouro-escuro); }
.pedido-entrega p { font-size: 14px; line-height: 1.6; color: var(--texto-2); }
.pedido-cartao .btn { margin-top: 10px; }

/* ---------- Selo de status ---------- */
.pedido-status { display: inline-block; font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 999px; background: #eceae4; color: var(--texto-2); white-space: nowrap; }
.pedido-status.status-novo { background: #fde6c8; color: #8a5a00; }
.pedido-status.status-separando { background: #dbeafe; color: #1e40af; }
.pedido-status.status-enviado { background: #e0e7ff; color: #4338ca; }
.pedido-status.status-entregue { background: #dcfce7; color: #15803d; }
.pedido-status.status-cancelado { background: #fee2e2; color: #b91c1c; }

/* ---------- Conteúdo (páginas de ajuda) ---------- */
.conteudo-pagina { background: #fff; border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra-s); padding: 32px; }
.conteudo-pagina h1 { font-size: clamp(24px, 3vw, 32px); font-weight: 700; margin-bottom: 16px; }
.conteudo-pagina p { color: var(--texto-2); font-size: 15.5px; line-height: 1.7; margin-bottom: 14px; }
.conteudo-pagina p:last-child { margin-bottom: 0; }

/* ---------- Tela de entrada do painel ---------- */

/* ---------- Status rápido na lista de pedidos ---------- */
.status-rapido { display: flex; align-items: center; gap: 6px; margin: 0; }
.status-sel { height: 36px; border: 1px solid var(--borda); border-radius: 8px; padding: 0 8px; font-size: 13px; font-weight: 600; background: #fff; }
.link-frenet { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--ouro-escuro); }
.link-frenet .ico { width: 15px; height: 15px; }
.link-frenet:hover { text-decoration: underline; }
.btn-ver-pedido { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 10px; background: var(--preto); color: #fff; font-size: 13.5px; font-weight: 700; white-space: nowrap; transition: background-color .15s, transform .05s; }
.btn-ver-pedido .ico { width: 16px; height: 16px; }
.btn-ver-pedido:hover { background: #2a2722; }
.btn-ver-pedido:active { transform: scale(.97); }
.btn-excluir-x { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; border: 1px solid #f3c9c9; background: #fbeaea; color: var(--vermelho); cursor: pointer; flex: none; transition: background-color .15s, color .15s; }
.btn-excluir-x .ico { width: 15px; height: 15px; }
.btn-excluir-x:hover { background: var(--vermelho); color: #fff; }

/* ---------- Campos copiáveis (detalhe do pedido) ---------- */
.copia-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.copia-item { display: flex; flex-direction: column; gap: 3px; }
.copia-rot { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-3); }
.copia-linha { display: flex; align-items: center; gap: 8px; background: #fbfaf7; border: 1px solid var(--borda); border-radius: 10px; padding: 8px 10px; }
.copia-val { flex: 1; font-size: 14px; font-weight: 600; word-break: break-word; }
.copia-btn { flex: none; display: inline-grid; place-items: center; height: 30px; min-width: 30px; padding: 0 8px; border-radius: 8px; background: var(--preto); color: var(--ouro-claro); font-size: 12px; font-weight: 700; }
.copia-btn .ico { width: 15px; height: 15px; }
.copia-btn:hover { background: var(--grad-ouro); color: #1a1300; }
.copia-btn.copiado { background: var(--verde); color: #fff; }
@media (max-width: 560px) { .copia-grade { grid-template-columns: 1fr; } }

/* ---------- Rastreamento / clientes / histórico ---------- */
.btn-rastreio { background: var(--preto); color: var(--ouro-claro); }
.btn-rastreio:hover { background: #26262a; color: var(--ouro-brilho); }
.cli-zap { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: #11803f; }
.cli-zap .ico { width: 16px; height: 16px; }
.cli-zap:hover { text-decoration: underline; }

.hist-pedidos { display: grid; gap: 8px; }
.hist-pedidos a { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; padding: 12px 14px; border: 1px solid var(--borda); border-radius: 12px; background: #fdfcf9; transition: border-color .2s, background-color .2s; }
.hist-pedidos a:hover { border-color: var(--ouro); background: #fff; }
.hist-num { font-weight: 700; }
.hist-data { font-size: 12.5px; color: var(--texto-3); }
.hist-total { font-family: var(--fonte-titulo); font-weight: 700; }

/* Cabeçalho da conta do cliente */
.conta-hero { display: flex; align-items: center; gap: 18px; background: var(--preto); color: #fff; border-radius: 22px; padding: 24px 26px; margin-bottom: 20px; position: relative; overflow: hidden; isolation: isolate; }
.conta-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(420px circle at 90% -20%, rgb(224 177 46 / .22), transparent 60%); }
.conta-avatar { width: 60px; height: 60px; flex: none; border-radius: 50%; display: grid; place-items: center; font-family: var(--fonte-titulo); font-weight: 800; font-size: 26px; color: #1a1300; background: var(--grad-ouro); box-shadow: 0 8px 20px -8px rgb(224 177 46 / .6); }
.conta-hero .eyebrow { color: var(--ouro-brilho); }
.conta-hero h1 { font-size: 24px; font-weight: 700; margin: 6px 0 2px; }
.conta-hero p { color: #aaa597; font-size: 14px; }
.conta-cashback { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; padding: 3px 10px; border-radius: 999px; background: rgb(26 122 74 / .18); color: #7fe0aa; font-weight: 600; white-space: nowrap; }
.conta-cashback .ico { width: 15px; height: 15px; }
.conta-hero-sair { margin-left: auto; align-self: flex-start; }
.conta-hero-sair .btn { height: 40px; padding: 0 16px; }
@media (max-width: 560px) { .conta-hero { flex-wrap: wrap; } .conta-hero-sair { margin-left: 0; width: 100%; } .conta-hero-sair .btn { width: 100%; } }

.meus-pedidos { margin-top: 16px; }
.pedidos-cliente { display: grid; gap: 12px; }
.pedido-linha { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px 16px; padding: 16px; border: 1px solid var(--borda); border-radius: 14px; background: #fdfcf9; }
.pl-info { display: flex; flex-direction: column; gap: 3px; }
.pl-num { font-family: var(--fonte-titulo); font-weight: 700; font-size: 15px; }
.pl-meta { font-size: 13px; color: var(--texto-3); }
.pl-acoes { grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap; }
.pl-acoes .btn { height: 40px; padding: 0 16px; font-size: 14px; }
@media (min-width: 620px) {
    .pedido-linha { grid-template-columns: 1fr auto auto; }
    .pl-acoes { grid-column: auto; }
}

/* ---------- Confirmação do pedido: revisão da entrega ---------- */
.revisao-entrega-card { margin-top: 4px; padding: 16px 18px; border: 1px solid var(--borda); border-radius: 16px; background: #fdfcf9; }
.revisao-entrega-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.revisao-entrega-topo h3 { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; }
.revisao-entrega-topo .ico { width: 18px; height: 18px; color: var(--ouro-escuro); }
.entrega-dados { display: grid; gap: 10px; margin: 0; }
.entrega-dados > div { display: grid; grid-template-columns: 110px 1fr; gap: 10px; align-items: baseline; }
.entrega-dados dt { font-size: 12.5px; color: var(--texto-3); }
.entrega-dados dd { margin: 0; font-size: 14.5px; font-weight: 600; line-height: 1.5; }
.entrega-form { margin-top: 6px; padding: 18px; border: 1px solid var(--ouro); border-radius: 16px; background: #fff; }
.entrega-form h3 { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; margin-bottom: 14px; }
.entrega-form h3 .ico { width: 18px; height: 18px; color: var(--ouro-escuro); }

.confirmar-entrega { display: flex; align-items: flex-start; gap: 12px; margin: 18px 0 12px; padding: 14px 16px; border-radius: 14px; background: var(--ouro-suave); cursor: pointer; }
.confirmar-entrega input { width: 20px; height: 20px; margin-top: 1px; flex: none; accent-color: var(--ouro-escuro); cursor: pointer; }
.confirmar-entrega span { font-size: 14px; color: #5a4500; line-height: 1.5; }
.btn-finalizar-wa.bloqueado { opacity: .5; filter: grayscale(.4); cursor: not-allowed; box-shadow: none; }

/* ---------- Página de rastreamento (escura) ---------- */
.rastreio-card { position: relative; overflow: hidden; isolation: isolate; margin-top: 14px; background: var(--preto); color: #fff; border-radius: 24px; padding: 32px; box-shadow: var(--sombra-l); }
.rastreio-card::before { content: ''; position: absolute; top: -160px; right: -120px; width: 420px; height: 420px; background: radial-gradient(circle, rgb(224 177 46 / .22), transparent 62%); z-index: -1; }
.rastreio-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.rastreio-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ouro-brilho); }
.rastreio-eyebrow .ico { width: 16px; height: 16px; }
.rastreio-topo h1 { font-size: 26px; font-weight: 700; margin: 10px 0 4px; }
.rastreio-topo p { color: #aaa597; font-size: 14px; }

.rastreio-linha { display: flex; justify-content: space-between; gap: 8px; margin: 8px 0 28px; position: relative; }
.rastreio-linha::before { content: ''; position: absolute; top: 19px; left: 8%; right: 8%; height: 3px; background: rgb(255 255 255 / .12); z-index: 0; }
.rastreio-etapa { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.rastreio-bolinha { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #26262a; color: #75716a; border: 2px solid rgb(255 255 255 / .12); transition: all .3s; }
.rastreio-bolinha .ico { width: 18px; height: 18px; }
.rastreio-rot { font-size: 12.5px; color: #8f8a7d; font-weight: 600; }
.rastreio-etapa.feito .rastreio-bolinha { background: rgb(224 177 46 / .18); border-color: var(--ouro); color: var(--ouro-brilho); }
.rastreio-etapa.atual .rastreio-bolinha { background: var(--grad-ouro); border-color: var(--ouro-brilho); color: #1a1300; box-shadow: 0 0 0 6px rgb(224 177 46 / .18); }
.rastreio-etapa.feito .rastreio-rot, .rastreio-etapa.atual .rastreio-rot { color: #fff; }

.rastreio-cancelado { display: flex; align-items: center; gap: 10px; background: rgb(220 38 38 / .15); color: #fca5a5; padding: 14px 16px; border-radius: 12px; margin-bottom: 20px; }
.rastreio-itens { border-top: 1px solid rgb(255 255 255 / .08); padding-top: 16px; display: grid; gap: 8px; }
.rastreio-item { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: #d8d4c8; }
.rastreio-entrega { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgb(255 255 255 / .08); }
.rastreio-entrega h3 { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #fff; margin-bottom: 6px; }
.rastreio-entrega .ico { width: 18px; height: 18px; color: var(--ouro); }
.rastreio-entrega p { color: #aaa597; font-size: 14px; line-height: 1.6; }
.rastreio-transportadora { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 20px; padding: 18px; border-radius: 16px; background: rgb(255 255 255 / .05); border: 1px solid rgb(224 177 46 / .2); }
.rastreio-transportadora strong { display: block; color: #fff; }
.rastreio-codigo { font-size: 13px; color: #aaa597; }
.rastreio-sem { margin-top: 20px; color: #8f8a7d; font-size: 14px; }

/* Movimentações reais (puxadas da transportadora) */
.rastreio-eventos { margin-top: 22px; padding-top: 20px; border-top: 1px solid rgb(255 255 255 / .08); }
.rastreio-eventos h3 { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #fff; margin-bottom: 16px; }
.rastreio-eventos h3 .ico { width: 18px; height: 18px; color: var(--ouro); }
.rastreio-eventos ul { position: relative; margin: 0; padding-left: 22px; }
.rastreio-eventos ul::before { content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: rgb(255 255 255 / .12); }
.rastreio-eventos li { position: relative; padding: 0 0 18px; }
.rastreio-eventos li:last-child { padding-bottom: 0; }
.ev-ponto { position: absolute; left: -22px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: #3b3b40; border: 2px solid rgb(255 255 255 / .2); }
.rastreio-eventos li.ativo .ev-ponto { background: var(--grad-ouro); border-color: var(--ouro-brilho); box-shadow: 0 0 0 5px rgb(224 177 46 / .18); }
.ev-conteudo { display: flex; flex-direction: column; gap: 2px; }
.ev-conteudo strong { color: #fff; font-size: 14.5px; }
.rastreio-eventos li.ativo .ev-conteudo strong { color: var(--ouro-brilho); }
.ev-data { font-size: 12.5px; color: #aaa597; }
.ev-local { font-size: 13px; color: #8f8a7d; }
@media (max-width: 620px) {
    .rastreio-card { padding: 22px; }
    .rastreio-linha { flex-wrap: wrap; gap: 16px; }
    .rastreio-linha::before { display: none; }
    .rastreio-etapa { flex-direction: row; flex-basis: 100%; justify-content: flex-start; }
    .rastreio-transportadora .btn { width: 100%; }
}

/* ---------- Foto do produto (quando enviada) ---------- */
.produto-foto { width: 100%; height: 100%; object-fit: contain; }

/* ---------- Busca e filtros no painel ---------- */
.admin-filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.admin-busca { position: relative; flex: 1; min-width: 220px; }
.admin-busca .ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--texto-3); pointer-events: none; }
.admin-busca input { width: 100%; height: 46px; border: 1px solid var(--borda); border-radius: 12px; background: #fff; padding: 0 14px 0 42px; font-size: 15px; }
.admin-busca input:focus { outline: none; border-color: var(--ouro); box-shadow: 0 0 0 4px rgb(193 145 1 / .15); }
.admin-filtros select { height: 46px; border: 1px solid var(--borda); border-radius: 12px; background: #fff; padding: 0 14px; font-size: 14px; }
.admin-filtros .btn { height: 46px; }

/* ---------- Prévia da marca / foto ---------- */
.marca-preview { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; }
.marca-amostra { width: 96px; height: 96px; flex: none; border-radius: 16px; background: var(--tom, #f3f1ec); display: grid; place-items: center; padding: 10px; border: 1px solid var(--borda); }
.marca-amostra img, .marca-amostra svg { max-width: 100%; max-height: 100%; object-fit: contain; }
.marca-amostra-escura { background: var(--preto); }
.marca-favicon { width: 64px; height: 64px; }
.marca-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 8px 0; }
.marca-form input[type=file] { flex: 1; min-width: 200px; font-size: 14px; }
.cat-tabela input, .cat-tabela select { height: 42px; border: 1px solid var(--borda); border-radius: 10px; padding: 0 10px; font-size: 14px; background: #fff; width: 100%; }
.cat-ordem { width: 70px !important; text-align: center; }

/* Edição rápida de estoque na lista */
.estoque-rapido { display: flex; align-items: center; gap: 6px; margin: 0; }
.estoque-input { width: 62px; height: 36px; border: 1px solid var(--borda); border-radius: 8px; padding: 0 8px; text-align: center; font-size: 14px; font-weight: 600; }
.estoque-input:focus { outline: none; border-color: var(--ouro); box-shadow: 0 0 0 3px rgb(193 145 1 / .18); }
.estoque-rapido.zerado .estoque-input { border-color: var(--vermelho); color: var(--vermelho); }
.estoque-ok { width: 36px; height: 36px; flex: none; border-radius: 8px; background: var(--preto); color: var(--ouro-claro); display: grid; place-items: center; }
.estoque-ok .ico { width: 16px; height: 16px; }
.estoque-ok:hover { background: var(--grad-ouro); color: #1a1300; }
.estoque-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--vermelho); letter-spacing: .04em; }

/* ---------- Ajustar valores do pedido ---------- */
.ajuste-valores { margin-top: 14px; border: 1px solid var(--borda); border-radius: 12px; padding: 12px 14px; background: #fdfcf9; }
.ajuste-valores summary { cursor: pointer; font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.ajuste-valores summary .ico { width: 18px; height: 18px; color: var(--ouro-escuro); }
.ajuste-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; }
.ajuste-item span { font-size: 14px; }
.ajuste-item input { width: 110px; height: 40px; border: 1px solid var(--borda); border-radius: 10px; padding: 0 10px; text-align: right; font-size: 14px; font-weight: 600; }
.pedido-sub s { color: var(--texto-3); font-weight: 400; }

/* ---------- Frete: contas e regras ---------- */
.conta-frenet { border: 1px solid var(--borda); border-radius: 14px; padding: 16px; margin-bottom: 12px; background: #fdfcf9; }
.conta-frenet-topo { margin-bottom: 8px; }
.conta-frenet .check { font-weight: 600; }
.regras-tabela th, .regras-tabela td { text-align: center; }
.regras-tabela th:first-child, .regras-tabela td:first-child { text-align: left; }
.regras-tabela .col-check input { width: 20px; height: 20px; accent-color: var(--ouro-escuro); }
.admin-tabela .col-check { width: 36px; text-align: center; }
.admin-tabela .col-check input { width: 18px; height: 18px; accent-color: var(--ouro-escuro); cursor: pointer; }
.confirma-cli { margin: 0; }
.confirma-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; white-space: nowrap; cursor: pointer; margin: 0; }
.confirma-label input { width: 17px; height: 17px; accent-color: #1a7a4a; cursor: pointer; }
.regras-tabela { min-width: 420px; }

/* ---------- Painel do administrador ---------- */

/* Abas do painel */
.io-lista { display: grid; gap: 2px; max-height: 360px; overflow-y: auto; border: 1px solid var(--borda); border-radius: 12px; padding: 8px; }
.io-item { padding: 7px 8px; border-radius: 8px; }
.io-item:hover { background: var(--ouro-suave); }
.io-item .col-sku { margin-left: 4px; }

.admin-cabecalho-flex { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.col-mini { width: 60px; }
.col-mini .produto-svg { width: 48px; height: 48px; border-radius: 8px; background: var(--tom, #f3f1ec); }
.col-sku { font-size: 12.5px; color: var(--texto-3); }
.col-acoes { white-space: nowrap; text-align: right; }
.col-acoes a, .col-acoes form { display: inline-flex; align-items: center; vertical-align: middle; margin: 0; }
.col-acoes > * + * { margin-left: 22px; }
.link-excluir { font-size: 13px; font-weight: 600; color: var(--vermelho); }
.link-excluir:hover { text-decoration: underline; }

/* Formulários do painel */
.form-grupo { border: 1px solid var(--borda); border-radius: 14px; padding: 18px; margin: 0 0 18px; min-inline-size: 0; }
.form-grupo legend { padding: 0 8px; font-size: 13px; font-weight: 700; color: var(--ouro-escuro); text-transform: uppercase; letter-spacing: .04em; }
.conta-bloco textarea { width: 100%; border: 1px solid var(--borda); border-radius: 12px; padding: 12px 14px; font: inherit; font-size: 15px; resize: vertical; transition: border-color .2s, box-shadow .2s; }
.conta-bloco textarea:focus { outline: none; border-color: var(--ouro); box-shadow: 0 0 0 4px rgb(193 145 1 / .15); }
.conta-bloco select { height: 50px; width: 100%; border: 1px solid var(--borda); border-radius: 12px; padding: 0 14px; font-size: 15px; background: #fff; }
.input-cor { height: 50px; padding: 4px; cursor: pointer; }
.form-checks { display: grid; gap: 10px; margin: 4px 0 8px; }
.check { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 500; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--ouro-escuro); }
.admin-cabecalho { margin-bottom: 22px; }
.admin-cabecalho h1 { font-size: 28px; font-weight: 700; margin-top: 6px; }
.admin-data { color: var(--texto-3); font-size: 14px; margin-top: 4px; }
.link-voltar { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--ouro-escuro); margin-bottom: 6px; }
.link-voltar .ico { width: 15px; height: 15px; }
.tabela-rolagem { overflow-x: auto; border: 1px solid var(--borda); border-radius: var(--raio); background: #fff; }
.admin-tabela { width: 100%; border-collapse: collapse; min-width: 640px; }
.admin-tabela th, .admin-tabela td { text-align: left; padding: 13px 14px; font-size: 14px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.admin-tabela th { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-3); background: #fbfaf7; }
.admin-tabela tr:last-child td { border-bottom: 0; }
.admin-tabela tbody tr:hover { background: #fdfcf9; }
.col-data { color: var(--texto-3); white-space: nowrap; }
.admin-status { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--borda); }
.admin-status label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.admin-status-linha { display: flex; gap: 10px; }
.admin-status-linha select { flex: 1; height: 46px; border: 1px solid var(--borda); border-radius: 12px; padding: 0 14px; font-size: 14px; background: #fff; }

@media (max-width: 760px) {
    .campo-linha { grid-template-columns: 1fr; gap: 0; }
    .campo-curto { max-width: none; }
    .conta-grade { grid-template-columns: 1fr; }
    .passos-trilha li { font-size: 0; gap: 0; }
    .passos-trilha li span { font-size: 12px; }
}

/* ---------- Foto do mostruário (aba Ajustes) ---------- */
.banner-previa { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; padding: 10px; border: 1px solid #e6e2d8; border-radius: 12px; background: #0b0b0c; }
.banner-previa img { width: 84px; height: 84px; object-fit: contain; flex: none; }
.banner-previa .check { color: #d8d3c7; font-size: 13px; }
.banner-dicas { margin-top: 10px; padding: 12px 14px; border-radius: 10px; background: #fbf7ee; border: 1px solid rgb(193 145 1 / .2); }
.banner-dicas strong { display: block; font-size: 12.5px; margin-bottom: 6px; color: #6b5200; }
.banner-dicas ul { margin: 0; padding-left: 16px; list-style: disc; }
.banner-dicas li { font-size: 12.5px; line-height: 1.55; color: #5c5648; margin-bottom: 3px; }
.banner-dicas b { color: #3d3116; }

/* ---------- Aba Destaques ---------- */
.destaque-conta { float: right; font-weight: 600; font-size: 12.5px; color: var(--ouro-escuro); background: var(--ouro-suave); padding: 3px 10px; border-radius: 999px; }
.destaque-filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.destaque-filtros input[type=search], .destaque-filtros select { height: 40px; border: 1px solid var(--borda); border-radius: 10px; padding: 0 12px; font-size: 14px; }
.destaque-filtros input[type=search] { flex: 1; min-width: 180px; }
.destaque-lista { display: grid; gap: 6px; max-height: 560px; overflow-y: auto; padding: 4px; border: 1px solid var(--borda); border-radius: 14px; background: var(--fundo); }
.destaque-item { display: flex; align-items: center; gap: 11px; padding: 8px 12px 8px 8px; border-radius: 12px; background: #fff; border: 1.5px solid transparent; cursor: pointer; transition: border-color .15s, background-color .15s; }
.destaque-item:hover { border-color: var(--ouro-claro); }
.destaque-item.escolhido { border-color: var(--ouro); background: #fffdf6; }
.destaque-item input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--ouro); flex: none; }
.destaque-ordem { flex: none; width: 24px; text-align: center; font-family: var(--fonte-titulo); font-weight: 800; font-size: 13px; color: var(--ouro-escuro); }
.destaque-foto { flex: none; width: 44px; height: 44px; border-radius: 10px; background: #fff; border: 1px solid var(--borda); display: grid; place-items: center; overflow: hidden; padding: 3px; }
.destaque-foto img, .destaque-foto svg { width: 100%; height: 100%; object-fit: contain; }
.destaque-txt { flex: 1; min-width: 0; }
.destaque-txt strong { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; }
.destaque-txt small { display: block; font-size: 12px; color: var(--texto-3); margin-top: 2px; }

/* ---------- Prévia da busca do mostruário ---------- */
.busca-previa { display: flex; align-items: center; gap: 8px; margin-top: 9px; padding: 9px 12px; border-radius: 10px; background: #eefaf1; border: 1px solid #bfe6cb; font-size: 12.5px; line-height: 1.5; color: #1f6b3a; }
.busca-previa .ico { width: 16px; height: 16px; flex: none; }
.busca-previa a { text-decoration: underline; font-weight: 600; }
.busca-previa.vazia { background: #fdf0ef; border-color: #f2c9c5; color: #9c3229; }

/* ---------- Ordem dos produtos dentro da categoria (aba Categorias) ---------- */
.ordem-titulo { font-family: var(--fonte-titulo); font-size: 19px; margin: 30px 0 6px; padding-top: 24px; border-top: 1px solid var(--borda); }

.ordem-cat { border: 1px solid var(--borda); border-radius: 14px; margin-bottom: 10px; background: #fff; overflow: hidden; }
.ordem-cat > summary { display: flex; align-items: center; gap: 11px; padding: 14px 16px; cursor: pointer; list-style: none; transition: background-color .15s; }
.ordem-cat > summary::-webkit-details-marker { display: none; }
.ordem-cat > summary:hover { background: var(--fundo); }
.ordem-cat-ico { width: 34px; height: 34px; border-radius: 10px; background: var(--preto); color: var(--ouro-claro); display: grid; place-items: center; flex: none; }
.ordem-cat-ico .ico { width: 17px; height: 17px; }
.ordem-cat > summary strong { font-size: 15px; }
.ordem-cat > summary small { flex: 1; font-size: 12.5px; color: var(--texto-3); }
.ordem-cat-mais { width: 17px; height: 17px; color: var(--texto-3); transition: transform .2s; }
.ordem-cat[open] .ordem-cat-mais { transform: rotate(45deg); }

.ordem-lista { list-style: none; margin: 0; padding: 6px 8px 12px; display: grid; gap: 5px; }
.ordem-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px 7px 6px; border-radius: 11px; background: var(--fundo); border: 1.5px solid transparent; }
/* Na mão: continua legível, com fio dourado e sombra de "levantado". */
.ordem-item.arrastando { border-color: var(--ouro); background: #fff; box-shadow: 0 10px 22px -10px rgb(0 0 0 / .45); }
/* Enquanto arrasta, nada de selecionar texto pela página. */
body.arrastando-lista { user-select: none; cursor: grabbing; }
.ordem-item.esgotado { background: #f6f6f4; }
.ordem-item.esgotado .ordem-foto { filter: grayscale(1); opacity: .5; }
/* touch-action: none faz o dedo arrastar o item em vez de rolar a página. */
.ordem-pega { cursor: grab; color: var(--texto-3); font-size: 17px; letter-spacing: -2px; padding: 8px 7px; margin: -8px 0; user-select: none; touch-action: none; flex: none; }
.ordem-pega:active { cursor: grabbing; }
.ordem-num { flex: none; width: 22px; text-align: center; font-family: var(--fonte-titulo); font-weight: 800; font-size: 12.5px; color: var(--ouro-escuro); }
.ordem-foto { flex: none; width: 38px; height: 38px; border-radius: 9px; background: #fff; border: 1px solid var(--borda); display: grid; place-items: center; overflow: hidden; padding: 2px; }
.ordem-foto img, .ordem-foto svg { width: 100%; height: 100%; object-fit: contain; }
.ordem-txt { flex: 1; min-width: 0; }
.ordem-txt strong { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.ordem-txt small { display: block; font-size: 11.5px; color: var(--texto-3); margin-top: 1px; }
.ordem-setas { display: flex; flex-direction: column; gap: 2px; flex: none; }
.ordem-setas button { width: 26px; height: 18px; border-radius: 6px; background: #fff; border: 1px solid var(--borda); color: var(--texto-2); font-size: 9px; line-height: 1; display: grid; place-items: center; }
.ordem-setas button:hover { background: var(--ouro-suave); border-color: var(--ouro-claro); color: var(--ouro-escuro); }

/* ---------- Escolher o ícone vendo o desenho (aba Categorias) ---------- */
.ico-escolha { position: relative; }
.ico-atual { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px; border: 1px solid var(--borda); border-radius: 10px; background: #fff; }
.ico-atual:hover { border-color: var(--ouro-claro); }
.ico-atual .ico { width: 20px; height: 20px; color: var(--ouro-escuro); }
.ico-atual .ico-seta { width: 14px; height: 14px; color: var(--texto-3); transform: rotate(90deg); }
.ico-grade { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-top: 8px; padding: 8px; border: 1px solid var(--borda); border-radius: 12px; background: var(--fundo); min-width: 300px; }
.ico-op input { position: absolute; opacity: 0; pointer-events: none; }
.ico-op > span { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; border-radius: 9px; background: #fff; border: 1.5px solid transparent; cursor: pointer; transition: border-color .15s, background-color .15s; }
.ico-op > span:hover { border-color: var(--ouro-claro); }
.ico-op > span .ico { width: 21px; height: 21px; color: var(--texto-2); }
.ico-op > span small { font-size: 9.5px; color: var(--texto-3); text-align: center; line-height: 1.1; }
.ico-op input:checked + span { border-color: var(--ouro); background: var(--ouro-suave); }
.ico-op input:checked + span .ico, .ico-op input:checked + span small { color: var(--ouro-escuro); }

/* ---------- Campo com sufixo (ex.: "7 segundos") ---------- */
.campo-sufixo { display: flex; align-items: center; gap: 8px; }
.campo-sufixo input { width: 90px; }
.campo-sufixo span { font-size: 13px; color: var(--texto-3); }

/* ============================================================
   Campos sem zoom no celular (mesma regra da loja)
   Abaixo de 16px o iPhone dá zoom ao tocar no campo e não volta sozinho.
   ============================================================ */
@media (max-width: 900px) {
    input, select, textarea { font-size: 16px; }
    .campo input, .conta-bloco select, .conta-bloco textarea { font-size: 16px; }
}

/* ============================================================
   Painel: logotipo em cima, "painel do administrador" embaixo
   Com o logotipo da marca (uma faixa larga), pôr o rótulo ao lado empurrava
   tudo para a direita. Empilhado fica centrado e sobra espaço para os botões.
   ============================================================ */
@media (max-width: 760px) {
}

/* ============================================================
   Entrada do painel — cara de sala de controle
   O logotipo é uma faixa larga e estava espremido num quadrado de 66px: era
   a origem da feiura. Aqui ele ocupa a largura da faixa de cima, inteiro.
   O resto é o vocabulário de um console de operação: grade técnica ao fundo,
   fios dourados separando as três zonas do cartão (marca / entrada / rodapé),
   rótulos em caixa alta espaçada e um rodapé com a identificação do sistema.
   ============================================================ */
.admin-login-body { background: #08080a; }

.admin-login {
    position: relative; min-height: 100vh;
    display: grid; place-items: center;
    padding: 24px; overflow: hidden;
    background: #08080a; isolation: isolate;
}

/* Fundo: brilho dourado + grade fina que some nas bordas. */
.admin-login-brilho { position: absolute; inset: 0; z-index: -1; }
.admin-login-brilho::before {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(760px circle at 50% -6%, rgb(224 177 46 / .22), transparent 62%),
        radial-gradient(560px circle at 88% 112%, rgb(193 145 1 / .12), transparent 60%);
}
.admin-login-brilho::after {
    content: ''; position: absolute; inset: 0;
    background-image:
        linear-gradient(rgb(255 255 255 / .035) 1px, transparent 1px),
        linear-gradient(90deg, rgb(255 255 255 / .035) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(circle at 50% 34%, #000 10%, transparent 70%);
    mask-image: radial-gradient(circle at 50% 34%, #000 10%, transparent 70%);
}

.admin-login-card {
    position: relative; width: 100%; max-width: 460px;
    background: linear-gradient(180deg, rgb(26 24 20 / .96), rgb(14 14 15 / .97));
    border: 1px solid rgb(224 177 46 / .26);
    border-radius: 20px; overflow: hidden;
    box-shadow: 0 40px 90px -30px rgb(0 0 0 / .9), 0 0 0 1px rgb(0 0 0 / .5);
}
/* Fio dourado no alto do cartão, como uma luz acesa. */
.admin-login-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--ouro), var(--ouro-brilho), var(--ouro), transparent);
    opacity: .85;
}

/* ---------- zona 1: a marca ---------- */
.admin-login-topo {
    padding: 30px 30px 22px; text-align: center;
    background: radial-gradient(120% 90% at 50% 0%, rgb(224 177 46 / .09), transparent 70%);
    border-bottom: 1px solid rgb(224 177 46 / .16);
}
.admin-login-logo { margin: 0 auto; }
.admin-login-logo img,
.admin-login-logo .logo-marca {
    display: block; width: auto; height: 68px; max-width: 260px; margin: 0 auto;
    object-fit: contain;
    filter: drop-shadow(0 8px 24px rgb(224 177 46 / .35));
}
.admin-login-marca {
    display: block; margin-top: 10px;
    font-family: var(--fonte-titulo); font-weight: 800;
    letter-spacing: .2em; font-size: 21px; text-transform: uppercase;
    background: var(--grad-ouro); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.admin-login-tag {
    display: inline-flex; align-items: center; gap: 7px; margin-top: 16px;
    padding: 5px 13px; border-radius: 999px;
    border: 1px solid rgb(224 177 46 / .3); background: rgb(224 177 46 / .08);
    color: var(--ouro-brilho);
    font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
}
.admin-login-tag .ico { width: 13px; height: 13px; }

/* ---------- zona 2: a entrada ---------- */
.admin-login-corpo { padding: 26px 30px 28px; }
.admin-login h1 {
    color: #fff; font-size: 22px; font-weight: 700; text-align: center;
    letter-spacing: -.01em; margin-bottom: 4px;
}
.admin-login-sub { color: #8f8a7d; font-size: 13px; text-align: center; margin-bottom: 22px; }
.admin-login .alerta { text-align: left; margin-bottom: 16px; }
.admin-login .campo { text-align: left; margin-bottom: 16px; }
.admin-login .campo label {
    color: #c9c3b2; font-size: 11px; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
}
.admin-login .campo input {
    height: 52px; border-radius: 12px;
    background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .12);
    color: #fff; font-size: 15px; letter-spacing: .02em;
    transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.admin-login .campo input::placeholder { color: #6f6b60; letter-spacing: .1em; }
.admin-login .campo input:focus {
    outline: none; border-color: var(--ouro);
    background: rgb(255 255 255 / .08);
    box-shadow: 0 0 0 4px rgb(193 145 1 / .22);
}
.admin-login .btn-ouro { height: 52px; margin-top: 6px; gap: 9px; font-size: 15px; }
.admin-login .btn-ouro .ico { width: 17px; height: 17px; }
.admin-login-dica {
    font-size: 12px; color: #7d786d; text-align: center;
    margin-top: 14px; line-height: 1.5;
}

/* ---------- zona 3: o rodapé do sistema ---------- */
.admin-login-pe {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 22px;
    border-top: 1px solid rgb(255 255 255 / .07);
    background: rgb(0 0 0 / .35);
    font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
    color: #6f6b60;
}
.admin-login-pe .ponto {
    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: #49c17c; box-shadow: 0 0 8px rgb(73 193 124 / .9);
    margin-right: 5px; vertical-align: middle;
}

@media (max-width: 420px) {
    .admin-login { padding: 14px; }
    .admin-login-topo { padding: 24px 20px 18px; }
    .admin-login-logo img, .admin-login-logo .logo-marca { height: 56px; }
    .admin-login-corpo { padding: 22px 20px 24px; }
    .admin-login-pe { padding: 10px 16px; font-size: 9.5px; letter-spacing: .06em; }
}

/* ============================================================
   PAINEL — barra lateral fixa, barra de cima com relógio e tempo
   A navegação saiu de cima (onde treze abas brigavam por espaço em duas
   fileiras) e foi para a lateral, em lista: cabem todas, em ordem, com o
   grupo escrito. Sobra a largura inteira para o conteúdo, que é onde o
   trabalho acontece.
   ============================================================ */
.admin-quadro { background: #0d0d0f; }

/* ---------- a lateral ---------- */
.admin-lado {
    position: fixed; top: 0; left: 0; bottom: 0; width: 252px; z-index: 60;
    display: flex; flex-direction: column;
    padding: 20px 14px 14px;
    background: linear-gradient(180deg, #131315, #0b0b0c 42%);
    border-right: 1px solid rgb(255 255 255 / .07);
    overflow-y: auto;
}
.admin-lado-marca { display: block; text-align: center; padding: 2px 8px 0; }
.admin-lado-marca .logo-img,
.admin-lado-marca .logo-marca {
    display: block; width: auto; height: 46px; max-width: 100%; margin: 0 auto;
    object-fit: contain; filter: drop-shadow(0 6px 16px rgb(224 177 46 / .3));
}
.admin-lado-marca .logo-texto {
    display: block; margin-top: 8px;
    font-family: var(--fonte-titulo); font-weight: 800; font-size: 18px;
    letter-spacing: .18em; text-transform: uppercase;
    background: var(--grad-ouro); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.admin-lado-tag {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin: 12px 0 18px; padding: 5px 10px; border-radius: 999px;
    border: 1px solid rgb(224 177 46 / .26); background: rgb(224 177 46 / .07);
    color: var(--ouro-brilho);
    font-size: 9.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}
.admin-lado-tag .ico { width: 12px; height: 12px; }

.admin-lado-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.admin-lado-rotulo {
    padding: 16px 10px 7px;
    font-size: 9.5px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
    color: #6c675e;
}
.admin-lado-item {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 11px; border-radius: 11px;
    color: #b9b4a8; font-size: 13.5px; font-weight: 500;
    transition: background-color .18s, color .18s;
}
.admin-lado-item:hover { background: rgb(255 255 255 / .06); color: #fff; }
.admin-lado-ico {
    flex: none; width: 28px; height: 28px; border-radius: 8px;
    display: grid; place-items: center;
    background: rgb(255 255 255 / .05); color: #9a9488;
    transition: background-color .18s, color .18s;
}
.admin-lado-ico .ico { width: 15px; height: 15px; }
.admin-lado-item:hover .admin-lado-ico { color: #fff; }
.admin-lado-item.ativo {
    background: linear-gradient(90deg, rgb(224 177 46 / .18), rgb(224 177 46 / .04));
    color: #fff; font-weight: 600;
    box-shadow: inset 2px 0 0 var(--ouro);
}
.admin-lado-item.ativo .admin-lado-ico { background: var(--grad-ouro); color: #1a1300; }

.admin-lado-pe {
    display: grid; gap: 6px; margin-top: 14px; padding-top: 14px;
    border-top: 1px solid rgb(255 255 255 / .08);
}
.admin-lado-loja, .admin-lado-sair {
    display: flex; align-items: center; gap: 9px; width: 100%;
    padding: 9px 11px; border-radius: 10px; border: 1px solid rgb(255 255 255 / .1);
    background: rgb(255 255 255 / .04); color: #c9c3b6;
    font-size: 13px; font-weight: 600; cursor: pointer;
    transition: background-color .18s, color .18s, border-color .18s;
}
.admin-lado-loja:hover { background: rgb(224 177 46 / .14); border-color: rgb(224 177 46 / .4); color: var(--ouro-brilho); }
.admin-lado-sair:hover { background: rgb(220 38 38 / .14); border-color: rgb(220 38 38 / .4); color: #ff9b9b; }
.admin-lado-loja .ico, .admin-lado-sair .ico { width: 16px; height: 16px; }

/* ---------- a área de trabalho ---------- */
.admin-area { margin-left: 252px; min-height: 100vh; background: var(--fundo); }

.admin-barra {
    position: sticky; top: 0; z-index: 30;
    display: flex; align-items: center; gap: 16px;
    padding: 12px 26px;
    background: rgb(255 255 255 / .88);
    backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid var(--borda);
}
.admin-barra-titulo { flex: 1; min-width: 0; }
.admin-barra-titulo h1 { font-size: 19px; font-weight: 700; line-height: 1.2; }
.admin-barra-titulo span { display: block; font-size: 12px; color: var(--texto-3); }
.admin-barra-info { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.admin-chip {
    display: flex; align-items: center; gap: 9px;
    padding: 7px 13px 7px 10px; border-radius: 12px;
    background: #fff; border: 1px solid var(--borda);
    box-shadow: 0 1px 2px rgb(0 0 0 / .04);
}
.admin-chip .ico { width: 18px; height: 18px; color: var(--ouro-escuro); flex: none; }
.admin-chip strong { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.15; white-space: nowrap; }
.admin-chip strong em { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--texto-3); letter-spacing: .08em; }
.admin-chip small { display: block; font-size: 10.5px; color: var(--texto-3); white-space: nowrap; }
.admin-chip-hora { background: var(--preto); border-color: rgb(255 255 255 / .12); }
.admin-chip-hora .ico { color: var(--ouro-brilho); }
.admin-chip-hora strong { color: #fff; font-family: var(--fonte-titulo); font-size: 16px; letter-spacing: .02em; }
.admin-chip-hora small { color: #8f8a7d; }

.admin-quem {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px; border-radius: 999px;
    background: var(--ouro-suave); color: #5a4500;
    font-size: 12.5px; font-weight: 700;
}
.admin-quem .ico { width: 15px; height: 15px; }

.admin-main { padding: 28px 26px 64px; max-width: 1280px; }

/* ---------- botão e gaveta do celular ---------- */
.admin-menu-btn { display: none; }
.admin-fundo { position: fixed; inset: 0; z-index: 55; background: rgb(0 0 0 / .55); }

@media (max-width: 1000px) {
    .admin-lado {
        transform: translateX(-100%); visibility: hidden;
        transition: transform .3s var(--suave), visibility .3s;
        box-shadow: 0 0 60px rgb(0 0 0 / .6);
    }
    body.admin-lado-aberto .admin-lado { transform: none; visibility: visible; }
    body.admin-lado-aberto { overflow: hidden; }
    .admin-area { margin-left: 0; }

    .admin-menu-btn {
        display: grid; place-items: center; flex: none;
        width: 42px; height: 42px; border-radius: 12px;
        border: 1px solid var(--borda); background: #fff; color: var(--texto);
        cursor: pointer;
    }
    .admin-menu-btn .ico { width: 20px; height: 20px; }
    .admin-barra { padding: 10px 16px; }
    .admin-main { padding: 20px 16px 56px; }
}

@media (max-width: 720px) {
    .admin-barra-titulo h1 { font-size: 17px; }
    .admin-barra-titulo span { display: none; }
    .admin-chip { padding: 6px 10px 6px 8px; gap: 7px; }
    .admin-chip small { display: none; }
    .admin-chip .ico { width: 16px; height: 16px; }
    .admin-quem { display: none; }
}

/* ============================================================
   Medidores da barra: relógio com segundos e estado da rede
   ============================================================ */
.admin-chip-hora strong i { font-style: normal; font-size: 11px; color: var(--ouro); margin-left: 1px; }

.admin-chip-rede strong em { font-style: normal; font-size: 10px; color: var(--texto-3); font-weight: 600; }
.admin-sinal { display: flex; align-items: flex-end; gap: 2px; height: 18px; flex: none; }
.admin-sinal i { width: 3px; border-radius: 2px; background: var(--borda); }
.admin-sinal i:nth-child(1) { height: 5px; }
.admin-sinal i:nth-child(2) { height: 9px; }
.admin-sinal i:nth-child(3) { height: 13px; }
.admin-sinal i:nth-child(4) { height: 17px; }
.admin-sinal.n4 i:nth-child(-n+4) { background: #1a7a4a; }
.admin-sinal.n3 i:nth-child(-n+3) { background: #1a7a4a; }
.admin-sinal.n2 i:nth-child(-n+2) { background: #b45309; }
.admin-sinal.n1 i:nth-child(-n+1) { background: #c2410c; }
.admin-sinal.caiu i { background: var(--vermelho); }

/* ============================================================
   VISÃO GERAL (página inicial do painel)
   ============================================================ */
.painel-ola {
    display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
    padding: 22px 26px; margin-bottom: 20px; border-radius: 18px;
    background: linear-gradient(120deg, #131315, #0b0b0c 62%);
    border: 1px solid rgb(224 177 46 / .22);
    box-shadow: 0 20px 40px -28px rgb(0 0 0 / .8);
    color: #fff;
}
.painel-ola-rot {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: var(--ouro-brilho);
}
.painel-ola-rot .ico { width: 14px; height: 14px; }
.painel-ola h1 { font-size: 24px; font-weight: 700; margin: 6px 0 4px; letter-spacing: -.01em; }
.painel-ola p { color: #b5b0a4; font-size: 14px; margin: 0; }
.painel-ola p b { color: var(--ouro-brilho); }
.painel-ola-nivel {
    display: inline-flex; align-items: center; gap: 7px; flex: none;
    padding: 8px 14px; border-radius: 999px;
    border: 1px solid rgb(255 255 255 / .16); background: rgb(255 255 255 / .06);
    font-size: 12px; font-weight: 700; color: #e8e4d8;
}
.painel-ola-nivel .ico { width: 15px; height: 15px; color: var(--ouro-brilho); }

/* ---------- os quatro números ---------- */
.painel-numeros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.painel-num {
    background: #fff; border: 1px solid var(--borda); border-radius: 16px; padding: 16px 18px;
    box-shadow: 0 1px 2px rgb(0 0 0 / .04);
}
.painel-num-rot {
    display: flex; align-items: center; gap: 7px;
    font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-3);
}
.painel-num-rot .ico { width: 15px; height: 15px; color: var(--ouro-escuro); }
.painel-num strong { display: block; margin: 8px 0 3px; font-family: var(--fonte-titulo); font-size: 25px; font-weight: 700; letter-spacing: -.02em; }
.painel-num small { font-size: 12.5px; color: var(--texto-3); }
.painel-num small i { font-style: normal; font-weight: 700; }
.painel-num small i.sobe { color: #15803d; }
.painel-num small i.desce { color: var(--vermelho); }
.painel-num--destaque {
    background: linear-gradient(160deg, #fffdf7, #f8efdc);
    border-color: rgb(193 145 1 / .3);
}
.painel-num--destaque strong { color: #4a3a05; }

/* ---------- grade dos blocos ---------- */
.painel-grade { display: grid; grid-template-columns: 1.55fr 1fr; gap: 16px; align-items: start; }
.painel-grade .conta-bloco { padding: 20px; }
.painel-bloco-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.painel-bloco-topo h2 { font-size: 16px; font-weight: 700; }
.painel-bloco-topo .admin-data { font-size: 12.5px; margin-top: 2px; }
.painel-link { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--ouro-escuro); white-space: nowrap; }
.painel-link .ico { width: 14px; height: 14px; }
.painel-link:hover { text-decoration: underline; }
.painel-vazio { display: flex; align-items: center; gap: 8px; padding: 18px 4px; color: var(--texto-3); font-size: 13.5px; }
.painel-vazio .ico { width: 17px; height: 17px; }

/* ---------- gráfico de barras ---------- */
.painel-abas { display: flex; gap: 4px; background: var(--fundo); border-radius: 999px; padding: 3px; flex: none; }
.painel-abas a { padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--texto-2); }
.painel-abas a.ativo { background: var(--preto); color: var(--ouro-brilho); }
.painel-barras { display: flex; align-items: flex-end; gap: 3px; height: 190px; padding-top: 6px; }
.painel-barra { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 5px; }
.painel-barra-corpo {
    width: 100%; max-width: 26px; border-radius: 5px 5px 2px 2px;
    background: linear-gradient(180deg, var(--ouro-claro), var(--ouro-escuro));
    transition: filter .15s;
}
.painel-barra:hover .painel-barra-corpo { filter: brightness(1.12); }
.painel-barra.vazia .painel-barra-corpo { background: var(--borda); }
.painel-barra-rot { font-size: 9px; color: var(--texto-3); white-space: nowrap; overflow: hidden; max-width: 100%; }
.painel-legenda { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--borda); font-size: 12.5px; color: var(--texto-3); }
.painel-legenda b { color: var(--texto); font-weight: 700; }

/* ---------- listas ---------- */
.painel-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.painel-lista li > a, .painel-equipe-lista li {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 10px; border-radius: 10px;
    font-size: 13.5px; color: var(--texto);
    transition: background-color .15s;
}
.painel-lista li > a:hover { background: var(--fundo); }
.painel-lista-num { font-weight: 700; font-size: 12.5px; color: var(--texto-2); white-space: nowrap; }
.painel-lista-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.painel-lista-nome small { display: block; font-size: 11px; color: var(--texto-3); }
.painel-lista-valor { font-weight: 700; white-space: nowrap; }
.painel-qtd { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: #fde6c8; color: #8a5a00; white-space: nowrap; }
.painel-qtd.zero { background: #fdecec; color: #a51f1f; }

/* ---------- quem tem acesso ---------- */
.painel-avatar {
    flex: none; width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--preto); color: var(--ouro-brilho);
    font-size: 13px; font-weight: 700;
}
.selo-nivel { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: #eceae4; color: var(--texto-2); white-space: nowrap; }
.selo-nivel.selo-total { background: var(--ouro-suave); color: #5a4500; }

/* ---------- anotações ---------- */
.painel-nota-form { display: grid; gap: 8px; margin-bottom: 14px; }
.painel-nota-form input[type=text] { width: 100%; height: 44px; border: 1px solid var(--borda); border-radius: 11px; padding: 0 14px; font-size: 14px; }
.painel-nota-form input[type=text]:focus { outline: none; border-color: var(--ouro); box-shadow: 0 0 0 4px rgb(193 145 1 / .15); }
.painel-nota-linha { display: flex; gap: 8px; }
.painel-nota-linha input[type=date] { flex: 1; height: 40px; border: 1px solid var(--borda); border-radius: 11px; padding: 0 12px; font-size: 13.5px; color: var(--texto-2); }
.painel-nota-linha .btn { height: 40px; padding: 0 16px; font-size: 13.5px; }

.painel-lista-notas { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.painel-lista-notas li { display: flex; align-items: flex-start; gap: 9px; padding: 9px 6px; border-radius: 10px; }
.painel-lista-notas li:hover { background: var(--fundo); }
.painel-lista-notas form { margin: 0; flex: none; }
.painel-nota-check {
    width: 20px; height: 20px; margin-top: 1px; border-radius: 6px;
    border: 1.5px solid var(--borda); background: #fff; cursor: pointer;
    display: grid; place-items: center; color: #fff;
}
.painel-nota-check .ico { width: 13px; height: 13px; }
.painel-lista-notas li.feita .painel-nota-check { background: #1a7a4a; border-color: #1a7a4a; }
.painel-nota-txt { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.4; }
.painel-lista-notas li.feita .painel-nota-txt span { text-decoration: line-through; color: var(--texto-3); }
.painel-nota-txt small { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; font-size: 11.5px; color: var(--texto-3); }
.painel-nota-txt small .ico { width: 12px; height: 12px; }
.painel-nota-txt small.atrasada { color: var(--vermelho); font-weight: 600; }
.painel-nota-x { width: 26px; height: 26px; border-radius: 8px; border: 0; background: none; color: var(--texto-3); cursor: pointer; display: grid; place-items: center; }
.painel-nota-x:hover { background: #fdecec; color: var(--vermelho); }
.painel-nota-x .ico { width: 14px; height: 14px; }

@media (max-width: 1180px) {
    .painel-numeros { grid-template-columns: repeat(2, 1fr); }
    .painel-grade { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .painel-numeros { grid-template-columns: 1fr; }
    .painel-ola { padding: 18px; }
    .painel-ola h1 { font-size: 20px; }
    .painel-barra-rot { display: none; }
    .painel-barras { height: 150px; }
}

/* ============================================================
   PENDÊNCIAS
   Cartões, não tabela: cada pendência tem um texto que cresce (o dono vai
   acrescentando linhas ao longo dos dias), e texto longo em tabela fica ruim.
   Quem está aberta há 3 dias ou mais ganha a borda vermelha — o objetivo da
   aba é justamente não deixar nada envelhecer esquecido.
   ============================================================ */
.pend-nova { margin-bottom: 18px; }
.pend-nova h2 { font-size: 17px; font-weight: 700; }
.pend-nova .admin-data { margin-bottom: 16px; }
.pend-form-linha { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; }
.pend-form .campo { margin-bottom: 14px; }
.pend-form select { width: 100%; height: 48px; border: 1px solid var(--borda); border-radius: 12px; padding: 0 14px; font-size: 14.5px; background: #fff; }
.pend-form select:focus, .pend-form textarea:focus { outline: none; border-color: var(--ouro); box-shadow: 0 0 0 4px rgb(193 145 1 / .15); }
.pend-form .passo-botoes { margin-top: 4px; }

.pend-lista { display: grid; gap: 12px; }
.pend-card {
    background: #fff; border: 1px solid var(--borda); border-left: 4px solid var(--ouro);
    border-radius: 14px; padding: 16px 18px;
    box-shadow: 0 1px 2px rgb(0 0 0 / .04);
}
.pend-card.urgente { border-left-color: var(--vermelho); }
.pend-card.resolvida { border-left-color: #1a7a4a; background: #fcfcfa; opacity: .82; }

.pend-card-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pend-card-quem { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pend-motivo {
    font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
    padding: 4px 11px; border-radius: 999px;
    background: var(--ouro-suave); color: #5a4500;
}
.pend-card.urgente .pend-motivo { background: #fdecec; color: #a51f1f; }
.pend-card.resolvida .pend-motivo { background: #e8f6ee; color: #14683a; }
.pend-pedido { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--texto); }
.pend-pedido .ico { width: 15px; height: 15px; color: var(--ouro-escuro); }
.pend-pedido:hover { text-decoration: underline; }
.pend-cliente { font-size: 13px; color: var(--texto-2); }
.pend-tempo { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--texto-3); white-space: nowrap; }
.pend-tempo .ico { width: 13px; height: 13px; }
.pend-tempo.urgente { color: var(--vermelho); font-weight: 700; }

.pend-texto { margin: 12px 0 14px; font-size: 14px; line-height: 1.55; color: var(--texto); white-space: normal; }
.pend-card.resolvida .pend-texto { color: var(--texto-2); }

.pend-card-pe { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--borda); }
.pend-autor { font-size: 11.5px; color: var(--texto-3); }
.pend-autor b { color: var(--texto-2); font-weight: 700; }
.pend-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pend-acoes form { margin: 0; }
.pend-acoes .btn { height: 38px; padding: 0 14px; font-size: 13px; }
.pend-anotar { display: flex; gap: 6px; }
.pend-anotar input {
    width: 210px; height: 38px; border: 1px solid var(--borda); border-radius: 10px;
    padding: 0 12px; font-size: 13px;
}
.pend-anotar input:focus { outline: none; border-color: var(--ouro); box-shadow: 0 0 0 3px rgb(193 145 1 / .15); }
.pend-x { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--borda); background: #fff; color: var(--texto-3); cursor: pointer; display: grid; place-items: center; }
.pend-x:hover { background: #fdecec; border-color: #f3c6c6; color: var(--vermelho); }
.pend-x .ico { width: 15px; height: 15px; }

/* Contador de pendências abertas na barra lateral. */
.admin-lado-conta {
    margin-left: auto; flex: none;
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
    background: var(--vermelho); color: #fff;
    font-size: 11px; font-weight: 700; line-height: 20px; text-align: center;
}

@media (max-width: 720px) {
    .pend-form-linha { grid-template-columns: 1fr; }
    .pend-anotar { width: 100%; }
    .pend-anotar input { flex: 1; width: auto; }
    .pend-card-pe { align-items: flex-start; }
}

/* ============================================================
   RITMO DAS PÁGINAS DO PAINEL
   Toda aba passa a ter o mesmo esqueleto, para o olho não ter que reaprender
   a página a cada clique:
      cabeçalho (título + explicação + ações à direita)
      barra de ferramentas (busca e filtros)
      um ou mais blocos brancos
   Os números aqui (espaços, cantos, alturas) são os mesmos em todas elas.
   ============================================================ */

/* ---------- cabeçalho da página ---------- */
.admin-cabecalho { margin-bottom: 18px; }
.admin-cabecalho h1 { font-size: 24px; font-weight: 700; margin-top: 0; letter-spacing: -.015em; }
.admin-cabecalho .admin-data { font-size: 13.5px; margin-top: 3px; }
.admin-cabecalho-flex { align-items: center; }
.admin-cabecalho-flex .btn { height: 44px; }

/* ---------- barra de ferramentas ---------- */
.admin-filtros { gap: 8px; margin-bottom: 16px; align-items: stretch; }
.admin-busca input,
.admin-filtros select,
.admin-filtros .btn { height: 44px; border-radius: 12px; }
.admin-busca input { font-size: 14.5px; }
.admin-filtros .btn { padding-inline: 20px; }

/* ---------- blocos brancos ---------- */
.conta-bloco { border-radius: 16px; padding: 20px; }
.conta-bloco + .conta-bloco,
.tabela-rolagem + .conta-bloco,
.conta-bloco + .tabela-rolagem { margin-top: 16px; }
.conta-bloco > h2:first-child,
.conta-bloco > .admin-cabecalho:first-child h2 { font-size: 17px; font-weight: 700; }

/* ---------- tabelas ---------- */
.tabela-rolagem { border-radius: 16px; box-shadow: 0 1px 2px rgb(0 0 0 / .04); }
.admin-tabela th { padding: 12px 14px; font-size: 11px; letter-spacing: .08em; background: #faf9f6; }
.admin-tabela td { padding: 12px 14px; font-size: 14px; }
.admin-tabela tbody tr:hover { background: #fdfcf9; }
/* Botões dentro da tabela: todos do mesmo tamanho, alinhados à direita. */
.admin-tabela td .btn { height: 36px; padding: 0 14px; font-size: 13px; white-space: nowrap; }
.admin-tabela td:last-child { text-align: right; white-space: nowrap; }

/* ---------- formulários ---------- */
.form-grupo {
    border: 1px solid var(--borda); border-radius: 14px;
    padding: 18px; margin-bottom: 16px; background: #fdfcfa;
}
.form-grupo > legend {
    padding: 0 8px; margin-left: -4px;
    font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--texto-3);
}
.form-grupo:last-of-type { margin-bottom: 0; }

/* Um respiro no fim de cada página, para o conteúdo não colar no rodapé. */
.admin-main > *:last-child { margin-bottom: 0; }

/* ============================================================
   PAINEL CENTRALIZADO
   Num monitor grande o conteúdo ficava esparramado: o título colado na
   esquerda e o relógio lá no canto direito, com um vazio no meio. Agora
   existe UMA coluna de 1360px, centrada no espaço que sobra depois da barra
   lateral — e tanto a barra de cima quanto o conteúdo se alinham a ela.

   O truque é o padding com max(): em tela estreita vale o respiro de 26px;
   em tela larga vale a metade da sobra, que empurra tudo para o meio. Assim
   a barra de cima continua ocupando a largura inteira (o fundo fica bonito
   de ponta a ponta), mas o que está escrito nela nasce e termina exatamente
   onde o conteúdo abaixo nasce e termina.
   ============================================================ */
:root { --admin-coluna: 1360px; }

.admin-barra {
    padding-inline: max(26px, calc((100% - var(--admin-coluna)) / 2));
}

.admin-main {
    width: 100%;
    max-width: none;                       /* a largura agora vem do padding */
    padding: 28px max(26px, calc((100% - var(--admin-coluna)) / 2)) 64px;
}

/* Na visão geral e nas listas, os blocos já preenchem a coluna inteira —
   nada de largura solta aqui, para as bordas de todas as abas baterem. */
.painel-numeros,
.painel-grade,
.pend-lista,
.admin-filtros,
.tabela-rolagem,
.admin-cabecalho { width: 100%; }

@media (max-width: 1000px) {
    .admin-barra { padding-inline: 16px; }
    .admin-main { padding: 20px 16px 56px; }
}

/* ============================================================
   O PAINEL INTEIRO VIRA UM QUADRO CENTRADO
   Centralizar o conteúdo resolveu metade do problema: sobrou a barra lateral
   colada na beirada esquerda do monitor, com um vão enorme até o conteúdo.
   Agora lateral e conteúdo andam juntos dentro de um quadro de 1700px,
   centrado na tela. Em monitor grande o painel fica como uma janela de
   aplicativo no meio, não esparramado de ponta a ponta.

   A lateral deixou de ser `fixed` e virou `sticky` dentro de uma grade de duas
   colunas. Com `fixed` seria preciso calcular a posição com 100vw, e 100vw
   inclui a barra de rolagem — dava uns 15px de diferença entre a lateral e o
   conteúdo. Sticky dentro da grade acerta sozinho, sem conta nenhuma.

   O texto do menu continua alinhado à ESQUERDA de propósito: numa lista, o
   olho varre seguindo uma borda vertical só. Centralizado, cada item começa
   num ponto diferente e obriga a ler um por um.
   ============================================================ */
:root { --admin-quadro: 1700px; --admin-lateral: 252px; }

/* Fora do quadro, um claro quase branco. Preto ali pesava a tela inteira
   num painel que se usa o dia todo. Não é branco puro de propósito: o
   conteúdo já é creme quase branco, e com branco puro a borda do quadro
   sumia — assim ele continua se lendo como uma janela apoiada na mesa. */
html { background: #eceae4; }

@media (min-width: 1001px) {
    body.admin-quadro {
        max-width: var(--admin-quadro);
        margin-inline: auto;
        display: grid;
        grid-template-columns: var(--admin-lateral) minmax(0, 1fr);
        align-items: start;
        box-shadow: 0 0 60px -10px rgb(0 0 0 / .28);
    }

    .admin-lado {
        position: sticky; top: 0; left: auto; right: auto; bottom: auto;
        width: auto; height: 100vh;
    }

    .admin-area { margin-left: 0; min-width: 0; }

    /* A coluna do conteúdo agora vive dentro do quadro: o cálculo do meio
       passa a ser feito sobre a largura da área, não da tela inteira. */
    .admin-barra { padding-inline: max(26px, calc((100% - 1360px) / 2)); }
    .admin-main  { padding: 28px max(26px, calc((100% - 1360px) / 2)) 64px; }
}

/* ============================================================
   A LATERAL PRETA VIRA UMA PEÇA, NÃO UMA PAREDE
   Com o fundo escuro em volta, a lateral preta emendava com ele e ninguém
   estranhava. Com o fundo claro, o mesmo preto passou a parecer um bloco
   cortado, brigando com o resto.
   A correção não é escolher entre claro e escuro: é soltar a lateral das
   bordas. Ela ganha margem, cantos arredondados e sombra — e aí lê-se como um
   componente apoiado sobre a página, do mesmo jeito que os blocos brancos do
   conteúdo. O preto continua sendo a identidade da marca sem pesar a tela.
   ============================================================ */
@media (min-width: 1001px) {
    /* Fora do quadro, um tom um pouco mais fechado que a página: é o que dá o
       efeito de janela apoiada na mesa. */
    html { background: #e4e2dc; }

    body.admin-quadro {
        background: var(--fundo);
        box-shadow: 0 0 60px -14px rgb(0 0 0 / .22);
    }

    .admin-lado {
        margin: 14px 0 14px 14px;
        height: calc(100vh - 28px);
        top: 14px;
        border-radius: 20px;
        border: 1px solid rgb(255 255 255 / .07);
        box-shadow: 0 20px 44px -26px rgb(0 0 0 / .7);
        background: linear-gradient(180deg, #16161a, #0b0b0c 55%);
    }

    .admin-area { background: transparent; }

    /* A barra de cima deixa de ser uma faixa branca colada: fica translúcida,
       com um fio claro embaixo, e o conteúdo passa por trás ao rolar. */
    .admin-barra {
        background: rgb(247 246 242 / .82);
        border-bottom: 1px solid rgb(0 0 0 / .07);
    }
}

/* A marca e o rodapé da lateral acompanham os cantos novos. */
.admin-lado-marca { padding-top: 4px; }
.admin-lado-pe { padding-bottom: 2px; }

/* ============================================================
   VISÃO GERAL EM FILEIRAS (2026-09-13)
   Antes era uma grade só, de duas colunas, com cinco caixas: cada caixa tinha
   a altura do próprio conteúdo, "Anotações" ficava mais baixa que "Movimento
   diário" e "Quem tem acesso" sobrava sozinha numa linha. Agora são fileiras:
   cada fileira estica as caixas até a altura da maior, e o que passar do
   espaço rola por dentro da caixa.

   A caixa da direita também descia 16px: a regra geral ".conta-bloco +
   .conta-bloco" (respiro entre blocos EMPILHADOS) valia dentro da grade, onde
   os blocos ficam LADO A LADO. Zerada aqui.
   ============================================================ */
.painel-grade { align-items: stretch; }
.painel-grade > .conta-bloco { margin-top: 0; display: flex; flex-direction: column; min-width: 0; }
.painel-grade + .painel-grade { margin-top: 16px; }
.painel-grade--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.painel-grade--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Anotações: a lista ocupa a sobra da caixa e rola por dentro. Base zero de
   propósito — assim quem define a altura da fileira é o gráfico, e a caixa de
   anotações acompanha em vez de crescer sem fim a cada lembrete novo. */
.painel-notas .painel-lista-notas,
.painel-notas > .painel-vazio { flex: 1 1 0; min-height: 140px; overflow-y: auto; }
.painel-notas > .painel-vazio { align-items: flex-start; }

/* Segunda fileira: listas com teto; passou disso, rola por dentro. Aqui NÃO
   dá para usar base zero: as três caixas encolheriam até só o título. */
.painel-grade--3 .painel-lista,
.painel-grade--2 .painel-lista { max-height: 340px; overflow-y: auto; }

/* Estoque acabando: a quantidade vem colada no nome, que é o número que se procura. */
.painel-qtd-num {
    flex: none; min-width: 46px; height: 40px; padding: 0 6px; border-radius: 10px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: #fdf1dc; color: #8a5a00;
    font-size: 9.5px; font-weight: 600; line-height: 1;
}
.painel-qtd-num b { font-family: var(--fonte-titulo); font-size: 17px; font-weight: 700; margin-bottom: 2px; }
.painel-qtd-num.zero { background: #fdecec; color: #a51f1f; }
.painel-estoque .painel-lista-nome small { color: #8a5a00; font-weight: 600; }
.painel-estoque .painel-qtd-num.zero + .painel-lista-nome small { color: #a51f1f; }

/* ============================================================
   GRAFITE NO LUGAR DO PRETO (2026-09-13)
   O preto puro (#0b0b0c) na lateral, no "Boa tarde" e no relógio pesava num
   painel que fica aberto o dia inteiro. O grafite mantém a elegância com o
   dourado, mas o olho descansa. Os textos claros foram clareados junto, para
   o contraste continuar confortável sobre o fundo menos escuro.
   A loja (o que o cliente vê) continua preta: isto é só o painel.
   ============================================================ */
.admin-lado {
    background: linear-gradient(180deg, #313338, #27292d 60%);
    border-color: rgb(255 255 255 / .06);
}
@media (min-width: 1001px) {
    .admin-lado { box-shadow: 0 18px 40px -26px rgb(0 0 0 / .4); }
}
.admin-lado-rotulo { color: #938f86; }
.admin-lado-item { color: #d2cdc3; }
.admin-lado-ico { background: rgb(255 255 255 / .07); color: #b0aa9e; }
.admin-lado-pe { border-top-color: rgb(255 255 255 / .09); }

.painel-ola {
    background: linear-gradient(120deg, #36383d, #2b2d31 65%);
    border-color: rgb(224 177 46 / .16);
    box-shadow: 0 18px 36px -30px rgb(0 0 0 / .45);
}
.painel-ola p { color: #d0ccc2; }

.admin-chip-hora { background: #313337; border-color: rgb(255 255 255 / .08); }
.admin-chip-hora small { color: #b0ab9e; }
.painel-abas a.ativo { background: #313337; }
.painel-avatar { background: #313337; }

/* Repetido DEPOIS das regras acima: regra base escrita depois de uma media
   query anula a media query (já mordeu neste projeto). */
@media (max-width: 1180px) {
    .painel-grade,
    .painel-grade--3,
    .painel-grade--2 { grid-template-columns: 1fr; }
    .painel-notas .painel-lista-notas,
    .painel-notas > .painel-vazio { flex: none; min-height: 0; max-height: 360px; }
}

/* Últimos pedidos em duas linhas: nome e número à esquerda, valor e status à direita. */
.painel-pedido-dir { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.painel-pedido-dir .pedido-status { font-size: 11px; padding: 2px 9px; }
.painel-ultimos .painel-lista-nome small { margin-top: 2px; }

/* ============================================================
   USUÁRIOS: PERMISSÃO ABA POR ABA (2026-09-13)
   Cartões com caixinha em vez de uma lista seca: cada área tem ícone, uma
   linha dizendo o que ela deixa fazer e, nas sensíveis (faturamento, dados de
   cliente, senhas da Frenet), um aviso em laranja. O cartão marcado fica
   dourado, para dar para bater o olho e ver o que está liberado.
   ============================================================ */
.perm-bloco { margin-top: 6px; }
.perm-dica { display: block; margin: 0 0 16px; }
.perm-grupo + .perm-grupo { margin-top: 20px; }
.perm-grupo-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.perm-grupo-topo strong { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-2); }
.perm-grupo-topo span { font-size: 12.5px; color: var(--texto-3); white-space: nowrap; }
.perm-atalho { border: 0; background: none; padding: 4px 2px; font: inherit; font-weight: 700; color: var(--ouro-escuro); cursor: pointer; }
.perm-atalho:hover { text-decoration: underline; }

.perm-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 10px; }
.perm-item {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px; border: 1px solid var(--borda); border-radius: 12px; background: #fff;
    cursor: pointer; transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.perm-item:hover { border-color: #d9cfb4; }
.perm-item input { flex: none; width: 18px; height: 18px; margin: 6px 0 0; accent-color: var(--ouro); cursor: pointer; }
.perm-item:has(input:checked) { border-color: var(--ouro); background: #fffbf0; box-shadow: 0 0 0 3px rgb(193 145 1 / .12); }
.perm-ico { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--fundo); color: var(--texto-3); }
.perm-ico .ico { width: 15px; height: 15px; }
.perm-item:has(input:checked) .perm-ico { background: var(--grad-ouro); color: #1a1300; }
.perm-txt { min-width: 0; display: grid; gap: 2px; }
.perm-txt b { font-size: 14px; font-weight: 700; }
.perm-txt small { font-size: 12px; line-height: 1.35; color: var(--texto-3); }
.perm-sens { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; font-style: normal; font-size: 11px; font-weight: 700; color: #9a3412; }
.perm-sens .ico { width: 11px; height: 11px; }
.perm-so-dono { display: flex; align-items: flex-start; gap: 7px; margin: 18px 0 0; font-size: 12.5px; color: var(--texto-3); }
.perm-so-dono .ico { flex: none; width: 14px; height: 14px; margin-top: 2px; }

/* Na lista de usuários: as áreas liberadas como etiquetas. */
.perm-chips { display: flex; flex-wrap: wrap; gap: 4px; max-width: 560px; white-space: normal; }
.perm-chip { font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: #efede7; color: var(--texto-2); white-space: nowrap; }
.perm-chip--tudo { background: var(--ouro-suave); color: #5a4500; }
.perm-chip--nada { background: #fdecec; color: #a51f1f; }

/* Senha mestra: um bloco no topo da aba Usuários e o formulário de troca. */
.mestra-bloco { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mestra-bloco .painel-avatar { width: 40px; height: 40px; font-size: 16px; }
.mestra-txt { flex: 1; min-width: 200px; }
.mestra-txt h2 { font-size: 16px; font-weight: 700; margin: 0; }
.mestra-bloco .btn { height: 42px; }
.mestra-form { max-width: 760px; }
.mestra-avisos {
    margin: 4px 0 18px; padding: 12px 16px 12px 34px; border-radius: 12px;
    background: #fdf6e7; color: #6b4e00; font-size: 13px; line-height: 1.55;
    list-style: disc;
}

/* Acabamento do formulário de usuário. ".form-grupo:last-of-type" zera a
   margem de baixo do último quadro, e aqui ele é seguido pelo campo de senha,
   que ficava grudado. Duas classes para ganhar daquela regra. */
.form-grupo.perm-bloco { margin-bottom: 20px; }
.perm-dica { font-size: 13px; color: var(--texto-3); line-height: 1.5; }

/* ============================================================
   PENDÊNCIAS: RASTREIO E CONTA DA FRENET (2026-09-13)
   Quem abre uma pendência de entrega quer ir direto ao rastreio, sem passar
   pelo pedido. O botão é grafite (a cor do painel) com o caminhão dourado; sem
   link, vira um tracejado que leva ao pedido para colocar o rastreio.
   ============================================================ */
.pend-envio { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; margin: -4px 0 14px; }
.pend-rastrear {
    display: inline-flex; align-items: center; gap: 7px;
    height: 36px; padding: 0 14px; border-radius: 10px;
    background: #313337; color: #fff; font-size: 13px; font-weight: 700;
    transition: background-color .15s;
}
.pend-rastrear .ico { width: 15px; height: 15px; color: var(--ouro-brilho); }
.pend-rastrear:hover { background: #3d3f44; }
.pend-rastrear-sem {
    display: inline-flex; align-items: center; gap: 6px;
    height: 36px; padding: 0 12px; border-radius: 10px;
    border: 1px dashed #d6d2c8; color: var(--texto-3); font-size: 12.5px; font-weight: 600;
}
.pend-rastrear-sem:hover { border-color: var(--ouro); color: var(--ouro-escuro); }
.pend-rastrear-sem .ico, .pend-conta .ico { width: 14px; height: 14px; }
.pend-conta {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px; border-radius: 999px;
    background: #eef3fb; color: #31507e; font-size: 12px; font-weight: 700;
}
.pend-conta.vazia { background: #f1efea; color: var(--texto-3); font-weight: 600; }

/* ============================================================
   EXPEDIÇÃO (2026-09-13)
   Um pedido atravessa três etapas: separar e fotografar → confirmação do
   cliente → rastreio e envio. A tela mostra SEMPRE em que etapa ele está (a
   régua de passos no topo) e só a ação daquela etapa, para ninguém pular nada.
   No topo da aba, os contadores são as filas: clicar filtra a lista.
   ============================================================ */

/* ---------- contadores / filas ---------- */
.exp-contadores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.exp-contador {
    display: flex; align-items: center; gap: 12px; min-width: 0;
    padding: 14px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--borda);
    box-shadow: 0 1px 2px rgb(0 0 0 / .04); color: var(--texto);
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.exp-contador:hover { border-color: #d9cfb4; transform: translateY(-1px); }
.exp-contador.ativo { border-color: var(--ouro); background: #fffbf0; box-shadow: 0 0 0 3px rgb(193 145 1 / .14); }
.exp-contador-ico { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--fundo); color: var(--texto-2); }
.exp-contador-ico .ico { width: 20px; height: 20px; }
.exp-contador.ativo .exp-contador-ico { background: var(--grad-ouro); color: #1a1300; }
.exp-contador-txt { min-width: 0; display: grid; }
.exp-contador-txt small { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exp-contador-txt strong { font-family: var(--fonte-titulo); font-size: 26px; font-weight: 700; line-height: 1.1; }
.exp-contador-txt em { font-style: normal; font-size: 12px; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exp-contador--hoje .exp-contador-txt strong { color: #14683a; }

/* ---------- lista da fila ---------- */
.exp-lista { display: grid; gap: 10px; }
.exp-card {
    display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; align-items: center; gap: 16px;
    padding: 14px 18px; border-radius: 14px; background: #fff; border: 1px solid var(--borda); color: var(--texto);
    box-shadow: 0 1px 2px rgb(0 0 0 / .04); transition: border-color .15s, box-shadow .15s;
}
.exp-card:hover { border-color: var(--ouro); box-shadow: 0 8px 20px -14px rgb(0 0 0 / .3); }
.exp-card-num b { display: block; font-family: var(--fonte-titulo); font-size: 16px; }
.exp-card-num small { font-size: 12px; color: var(--texto-3); }
.exp-card-meio { min-width: 0; display: grid; gap: 3px; }
.exp-card-meio strong { font-size: 14.5px; }
.exp-card-meio > span { font-size: 13px; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exp-obs-chip {
    display: inline-flex; align-items: center; gap: 5px; justify-self: start; max-width: 100%; margin-top: 2px;
    padding: 3px 9px; border-radius: 999px; background: #fdf1dc; color: #7a5200;
    font-style: normal; font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.exp-obs-chip .ico { flex: none; width: 12px; height: 12px; }
.exp-card-dir { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.exp-espera, .exp-fotos-n { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--texto-3); white-space: nowrap; }
.exp-espera .ico, .exp-fotos-n .ico { width: 13px; height: 13px; }
.exp-abrir { display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 14px; border-radius: 10px; background: #313337; color: #fff; font-size: 13px; font-weight: 700; }
.exp-abrir .ico { width: 14px; height: 14px; color: var(--ouro-brilho); }
.exp-vazio { display: flex; align-items: flex-start; gap: 12px; color: var(--texto-2); }
.exp-vazio > .ico { flex: none; width: 22px; height: 22px; margin-top: 2px; color: var(--ouro-escuro); }
.exp-vazio h2 { font-size: 16px; font-weight: 700; margin: 0 0 4px; }
.exp-vazio p { margin: 0 0 12px; font-size: 13.5px; }
.exp-cab-linha { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---------- régua de passos ---------- */
.exp-passos {
    list-style: none; margin: 0 0 18px; padding: 0;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    background: #fff; border: 1px solid var(--borda); border-radius: 16px; overflow: hidden;
}
.exp-passo { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 14px 18px; }
.exp-passo + .exp-passo { border-left: 1px solid var(--borda); }
.exp-passo-bola { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--fundo); color: var(--texto-3); border: 1.5px solid var(--borda); }
.exp-passo-bola .ico { width: 17px; height: 17px; }
.exp-passo-txt { min-width: 0; display: grid; gap: 1px; }
.exp-passo-txt small { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-3); }
.exp-passo-txt b { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exp-passo-txt em { font-style: normal; font-size: 12px; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exp-passo--feito .exp-passo-bola { background: #1a7a4a; border-color: #1a7a4a; color: #fff; }
.exp-passo--feito .exp-passo-txt em { color: #14683a; }
.exp-passo--atual { background: #fffbf0; box-shadow: inset 0 -3px 0 var(--ouro); }
.exp-passo--atual .exp-passo-bola { background: var(--grad-ouro); border-color: transparent; color: #1a1300; }
.exp-passo--atual .exp-passo-txt em { color: var(--ouro-escuro); font-weight: 700; }
.exp-passo--depois .exp-passo-txt b { color: var(--texto-3); }

/* ---------- grade: etapa + resumo ---------- */
.exp-grade { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.exp-lado { position: sticky; top: 90px; }
.exp-etapa-topo { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--borda); }
.exp-etapa-num {
    flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
    background: #313337; color: var(--ouro-brilho); font-family: var(--fonte-titulo); font-size: 20px; font-weight: 700;
}
.exp-etapa-topo h2 { font-size: 19px; font-weight: 700; margin: 0; }
.exp-etapa-topo .admin-data { margin: 2px 0 0; font-size: 13px; }
.exp-sub { display: flex; align-items: center; gap: 8px; margin: 22px 0 10px; font-size: 14px; font-weight: 700; }
.exp-sub .ico { width: 16px; height: 16px; color: var(--ouro-escuro); }
.exp-sub small, .exp-sub span { font-size: 12px; font-weight: 600; color: var(--texto-3); }
.exp-etapa-topo + .exp-sub { margin-top: 0; }
.exp-dica { margin: -4px 0 10px; }
/* Dicas em <p>: sem isto herdam a letra grande do parágrafo (mesmo caso da tela de permissões). */
.exp-etapa p.dica, .exp-dica { font-size: 13px; line-height: 1.5; color: var(--texto-3); }

/* Bloco "Expedição" no detalhe do pedido (aba Pedidos). */
.exp-fotos--pedido { margin-bottom: 12px; }
.exp-linha--pedido { margin-top: 12px; }
.exp-linha--pedido:empty { display: none; }
.revisao-topo .exp-chip .ico { width: 12px; height: 12px; color: inherit; }

/* "Minha conta" do cliente: a foto principal do pacote no cartão do pedido, com o
   selo verde de registrado. Regras depois da media query de .pedido-linha, e a
   versão larga repetida abaixo — senão a base anularia a media query. */
.pedido-linha--foto { grid-template-columns: 76px minmax(0, 1fr) auto; }
.pedido-linha--foto .pl-acoes { grid-column: 1 / -1; }
.pl-foto {
    display: block; width: 76px; height: 76px; border-radius: 12px; overflow: hidden;
    border: 1px solid var(--borda); background: var(--fundo); box-shadow: 0 6px 14px -10px rgb(0 0 0 / .45);
}
.pl-foto img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.pl-foto:hover img { transform: scale(1.06); }
.pl-registro {
    display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; margin-top: 4px;
    padding: 3px 10px; border-radius: 999px; background: #e8f6ee; color: #14683a; font-size: 12px; font-weight: 700;
}
.pl-registro .ico { flex: none; width: 13px; height: 13px; }
.pl-registro { border-radius: 10px; }

/* Blocos LADO A LADO na .conta-grade (Minha conta e detalhe do pedido): a regra
   ".conta-bloco + .conta-bloco" é para blocos empilhados e descia o segundo 16px.
   Mesmo caso já corrigido nas caixas da Visão geral. */
.conta-grade > .conta-bloco + .conta-bloco { margin-top: 0; }

@media (min-width: 620px) {
    .pedido-linha--foto { grid-template-columns: 76px minmax(0, 1fr) auto auto; }
    .pedido-linha--foto .pl-acoes { grid-column: auto; }
}

/* ---------- conferência ---------- */
.exp-conferencia { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.exp-conf-item {
    display: flex; align-items: center; gap: 12px; padding: 11px 14px;
    border: 1px solid var(--borda); border-radius: 12px; background: #fff; cursor: pointer;
    transition: background-color .15s, border-color .15s;
}
.exp-conf-item:hover { border-color: #d9cfb4; }
.exp-conf-item input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: #1a7a4a; cursor: pointer; }
.exp-conf-qtd { flex: none; min-width: 34px; display: inline-flex; align-items: center; font-family: var(--fonte-titulo); font-weight: 700; color: var(--ouro-escuro); }
.exp-conf-qtd .ico { width: 16px; height: 16px; }
.exp-conf-nome { font-size: 14px; }
.exp-conf-obs { background: #fdf6e7; border-color: #f0dcae; }
.exp-conf-item:has(input:checked) { background: #f0f8f3; border-color: #9fd3b4; }
.exp-conf-item:has(input:checked) .exp-conf-nome { color: #14683a; }

/* ---------- fotos ---------- */
.exp-fotos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.exp-foto { position: relative; margin: 0; aspect-ratio: 1; max-width: 100%; border-radius: 12px; overflow: hidden; background: var(--fundo); border: 1px solid var(--borda); }
.exp-foto a, .exp-foto img { display: block; width: 100%; height: 100%; }
.exp-foto img { object-fit: cover; }
.exp-foto figcaption { position: absolute; right: 6px; bottom: 6px; display: flex; gap: 6px; }
.exp-foto figcaption form { margin: 0; }
.exp-foto-btn { width: 34px; height: 34px; border-radius: 9px; border: 0; display: grid; place-items: center; background: rgb(24 24 27 / .72); color: #fff; cursor: pointer; }
.exp-foto-btn .ico { width: 16px; height: 16px; }
.exp-foto-btn:hover { background: rgb(24 24 27 / .9); }
.exp-foto-btn--x:hover { background: var(--vermelho); }
.exp-foto-add { margin: 0; aspect-ratio: 1; max-width: 100%; }
.exp-foto-add label {
    position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    padding: 10px; text-align: center; border: 1.5px dashed #d6cfbd; border-radius: 12px; background: #fdfcf9; color: var(--texto-2);
    cursor: pointer; transition: border-color .15s, background-color .15s;
}
.exp-foto-add label:hover { border-color: var(--ouro); background: #fffbf0; }
.exp-foto-add input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.exp-foto-add-ico { width: 44px; height: 44px; margin-bottom: 4px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-ouro); color: #1a1300; }
.exp-foto-add-ico .ico { width: 22px; height: 22px; }
.exp-foto-add b { font-size: 13.5px; }
.exp-foto-add small { font-size: 11.5px; color: var(--texto-3); }
.exp-foto-add.enviando label { pointer-events: none; opacity: .7; }

/* ---------- dados, confirmação e rodapé ---------- */
.exp-dados { display: grid; gap: 8px; margin: 0; }
.exp-dados > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; font-size: 13.5px; }
.exp-dados dt { color: var(--texto-3); font-weight: 600; }
.exp-dados dd { margin: 0; overflow-wrap: anywhere; }
.exp-wa { margin-top: 18px; }
.exp-check-grande {
    display: flex; align-items: flex-start; gap: 12px; margin: 18px 0 0; padding: 14px 16px;
    border: 1.5px solid var(--borda); border-radius: 14px; background: #fff; cursor: pointer; font-size: 14px; line-height: 1.45;
}
.exp-check-grande input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: #1a7a4a; }
.exp-check-grande:has(input:checked) { border-color: #1a7a4a; background: #f0f8f3; }
.exp-rodape { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--borda); }
.exp-rodape form { margin: 0; }
.exp-rodape .btn { height: 46px; }
.exp-rodape .btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.exp-rodape .dica { flex-basis: 100%; margin: 0; text-align: right; }
.exp-rodape .dica.exp-ok { color: #14683a; font-weight: 600; }

/* ---------- concluída ---------- */
.exp-fim-topo { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; padding: 14px 16px; border-radius: 14px; background: #f0f8f3; border: 1px solid #b9e0c8; }
.exp-fim-selo { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #1a7a4a; color: #fff; }
.exp-fim-selo .ico { width: 22px; height: 22px; }
.exp-fim-topo h2 { margin: 0; font-size: 18px; font-weight: 700; color: #14532d; }
.exp-fim-topo .admin-data { margin: 2px 0 0; color: #2f6b47; }
.exp-fim-envio { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.exp-linha { list-style: none; margin: 0; padding: 0 0 0 4px; display: grid; gap: 14px; }
.exp-linha li { position: relative; padding-left: 24px; font-size: 13.5px; }
.exp-linha li::before { content: ""; position: absolute; left: 0; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: #1a7a4a; box-shadow: 0 0 0 3px #d8efe1; }
.exp-linha li + li::after { content: ""; position: absolute; left: 4px; top: -13px; width: 2px; height: 16px; background: #cfe7d8; }
.exp-linha small { display: block; font-size: 12px; color: var(--texto-3); }

/* ---------- resumo lateral ---------- */
.exp-resumo h2.exp-sub { margin-top: 0; font-size: 15px; }
.exp-resumo-itens { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; font-size: 13.5px; }
.exp-resumo-itens b { margin-right: 4px; color: var(--ouro-escuro); }
.exp-resumo-obs { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: #fdf6e7; color: #6b4e00; font-size: 13px; }
.exp-resumo-obs b { display: flex; align-items: center; gap: 5px; margin-bottom: 2px; }
.exp-resumo-obs .ico { width: 14px; height: 14px; }
.exp-resumo-obs p { margin: 0; white-space: pre-line; }
.exp-dados--curto > div { grid-template-columns: 70px minmax(0, 1fr); font-size: 13px; }
.exp-lado-link { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--fundo); font-size: 13px; font-weight: 600; color: var(--texto); }
.exp-lado-link:hover { background: #efece4; }
.exp-lado-link .ico { width: 16px; height: 16px; color: var(--ouro-escuro); }

/* ---------- etiqueta de etapa na lista de Pedidos ---------- */
.exp-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; background: #efede7; color: var(--texto-2); }
.exp-chip .ico { width: 12px; height: 12px; }
.exp-chip--separar { background: #fdf1dc; color: #8a5a00; }
.exp-chip--cliente { background: #eef3fb; color: #31507e; }
.exp-chip--rastreio { background: #f3ecfb; color: #5b3a8a; }
.exp-chip--concluida { background: #e8f6ee; color: #14683a; }
a.exp-chip:hover { filter: brightness(.96); }

/* ---------- fotos na página do pedido do cliente ---------- */
.pedido-fotos { margin: 18px 0 16px; padding: 16px 18px; border: 1px solid var(--borda); border-radius: 16px; background: #fdfcf9; }
.pedido-fotos h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 15px; font-weight: 700; }
.pedido-fotos h3 .ico { width: 18px; height: 18px; color: var(--ouro-escuro); }
.pedido-fotos p { margin: 0 0 12px; font-size: 13px; color: var(--texto-2); }
.pedido-fotos .exp-fotos { grid-template-columns: repeat(auto-fill, minmax(min(100%, 120px), 1fr)); }

/* Repetido DEPOIS das regras acima: regra base escrita depois de uma media
   query anula a media query (já mordeu neste projeto). */
@media (max-width: 1180px) {
    .exp-contadores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .exp-grade { grid-template-columns: 1fr; }
    .exp-lado { position: static; }
}
@media (max-width: 720px) {
    .exp-contadores { gap: 8px; }
    .exp-contador { gap: 10px; padding: 12px; }
    .exp-contador-ico { width: 34px; height: 34px; }
    .exp-contador-txt strong { font-size: 22px; }
    .exp-contador-txt em { display: none; }
    .exp-card { grid-template-columns: 1fr; gap: 8px; }
    .exp-card-dir { justify-content: flex-start; }
    .exp-passos { grid-template-columns: 1fr; }
    .exp-passo + .exp-passo { border-left: 0; border-top: 1px solid var(--borda); }
    .exp-fotos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .exp-rodape { flex-direction: column-reverse; align-items: stretch; }
    .exp-rodape > span:empty { display: none; }
    .exp-rodape .btn { width: 100%; justify-content: center; }
    .exp-rodape .dica { text-align: left; }
    .exp-dados > div { grid-template-columns: 1fr; gap: 0; }
}

/* Bloco no FIM do arquivo de propósito: escrito no meio, ele ficava ANTES das regras
   base da Expedição, e elas anulavam as regras de celular (a barra de baixo quebrava). */
/* ============================================================
   EXPEDIÇÃO — etapa 3 com leitura da etiqueta (2026-09-13)
   ============================================================ */
.exp-transp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.exp-transp-op {
    display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 10px 12px;
    border: 1.5px solid var(--borda); border-radius: 12px; background: #fff; cursor: pointer;
    transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.exp-transp-op input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--ouro); }
.exp-transp-op b { display: block; font-size: 14.5px; }
.exp-transp-op small { display: block; font-size: 11.5px; color: var(--texto-3); }
.exp-transp-op:has(input:checked) { border-color: var(--ouro); background: #fffbf0; box-shadow: 0 0 0 3px rgb(193 145 1 / .14); }
.exp-dica--transp { margin: 8px 0 0; }

.exp-leitor-botoes { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-bottom: 12px; }
.exp-leitor-botoes .btn { height: 54px; justify-content: center; font-size: 15px; }
.exp-ler-foto { position: relative; overflow: hidden; }
/* Invisível mas clicável: "hidden" de verdade faz o iPhone ignorar o toque no botão. */
.exp-ler-foto input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.exp-leitor { margin-bottom: 12px; padding: 10px; border-radius: 16px; background: #1c1d20; }
.exp-camera { width: 100%; min-height: 220px; border-radius: 10px; overflow: hidden; background: #000; }
.exp-camera video { display: block; width: 100% !important; height: auto !important; }
.exp-leitor-dica { margin: 10px 4px; font-size: 13px; text-align: center; color: #d4d4d8; }
.exp-leitor .btn { height: 46px; }

#exp-codigo { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; letter-spacing: .05em; text-transform: uppercase; }
.exp-aviso { margin: -4px 0 14px; padding: 10px 12px; border-radius: 12px; background: #fdecec; color: #a51f1f; font-size: 13px; font-weight: 600; }
.exp-aviso.ok { background: #f0f8f3; color: #14683a; }
.exp-link-previa { margin: -4px 0 16px; padding: 10px 12px; border-radius: 12px; background: #f0f8f3; border: 1px solid #b9e0c8; }
.exp-link-previa small { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #2f6b47; }
.exp-link-previa a { font-size: 13.5px; font-weight: 600; color: #14532d; text-decoration: underline; overflow-wrap: anywhere; }
.exp-wa--fim { margin: 0 0 12px; }

/* ============================================================
   EXPEDIÇÃO NO CELULAR (é lá que ela acontece)
   - O botão principal de cada etapa fica PRESO embaixo da tela: com a
     conferência comprida, ninguém precisa rolar até o fim para seguir.
   - "Voltar" vira só a seta, para o botão principal ficar largo.
   - Alvos de toque de pelo menos 52px; letra de campo com 16px (senão o
     iPhone dá zoom, e não volta sozinho).
   Escrito DEPOIS das regras de celular anteriores, para ganhar delas.
   ============================================================ */
@media (max-width: 720px) {
    .exp-etapa { padding-bottom: 0; }
    .exp-rodape {
        position: sticky; bottom: 0; z-index: 25;
        flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 10px;
        margin: 18px -20px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        background: rgb(255 255 255 / .97); border-top: 1px solid var(--borda);
        border-radius: 0 0 16px 16px; box-shadow: 0 -12px 24px -20px rgb(0 0 0 / .45);
    }
    /* Grade, e não flex com quebra: no flex o botão largo empurrava a seta de
       "Voltar" para uma segunda linha. Aqui é seta | botão, sempre na mesma linha. */
    .exp-rodape { display: grid; grid-template-columns: auto minmax(0, 1fr); }
    .exp-rodape > span:empty { display: none; }
    .exp-rodape .dica { order: -1; grid-column: 1 / -1; margin: 0; text-align: left; }
    .exp-rodape > #exp-form-separar { grid-column: 1 / -1; }
    .exp-rodape > .btn-ouro { grid-column: 2; }
    .exp-rodape #exp-form-separar .btn,
    .exp-rodape > .btn-ouro { width: 100%; height: 54px; justify-content: center; font-size: 15px; }
    .exp-rodape > form:first-child { flex: none; }
    .exp-rodape > form:first-child .exp-voltar { width: 54px; height: 54px; padding: 0; justify-content: center; }
    .exp-voltar-txt { display: none; }

    .exp-conf-item { min-height: 54px; }
    .exp-conf-item input { width: 24px; height: 24px; }
    .exp-check-grande input { width: 26px; height: 26px; }
    .exp-foto-btn { width: 40px; height: 40px; }
    .exp-transp { gap: 6px; }
    .exp-transp-op { flex-direction: column; justify-content: center; gap: 4px; padding: 10px 6px; text-align: center; }
    .exp-transp-op b { font-size: 14px; }
    .exp-etapa .campo input, .exp-etapa .campo select { font-size: 16px; }
    .exp-wa { width: 100%; justify-content: center; height: 54px; }
    .exp-passo { padding: 10px 14px; }
    .exp-passo-bola { width: 30px; height: 30px; }
}

/* ============================================================
   STATUS "PAGO", RESERVA DE 24H E ABA PAGAMENTOS (2026-09-13)
   No FIM do arquivo de propósito (ver CLAUDE.md, "Bloco novo de CSS").
   A aba Pagamentos reaproveita as peças da Expedição (contadores, cartões,
   régua de rodapé fixa no celular); aqui só o que é dela.
   ============================================================ */
.pedido-status.status-pago { background: #d1fae5; color: #065f46; }
.exp-chip--pagamento { background: #fef3c7; color: #92400e; }

/* Página do pedido do cliente: até quando os produtos ficam reservados. */
.pedido-reserva {
    display: flex; align-items: flex-start; justify-content: center; gap: 6px;
    max-width: 520px; margin: 10px auto 0; padding: 8px 12px; border-radius: 12px;
    background: #fdf6e7; color: #6b4e00; font-size: 13.5px; line-height: 1.45;
}
.pedido-reserva .ico { flex: none; width: 16px; height: 16px; margin-top: 2px; }

.pag-contadores { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pag-prazo {
    display: inline-flex; align-items: center; gap: 5px; justify-self: start; max-width: 100%; margin-top: 2px;
    padding: 3px 9px; border-radius: 999px; background: #eef3fb; color: #31507e;
    font-style: normal; font-size: 11.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pag-prazo .ico { flex: none; width: 12px; height: 12px; }
.pag-prazo.urgente { background: #fdecec; color: #a51f1f; }
.pag-comps-n { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--texto-3); white-space: nowrap; }
.pag-comps-n .ico { width: 13px; height: 13px; }

.pag-valor {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 14px 16px; border-radius: 14px; background: #fdfcf9; border: 1px solid var(--borda);
}
.pag-valor small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-3); }
.pag-valor strong { display: block; font-family: var(--fonte-titulo); font-size: 28px; font-weight: 700; line-height: 1.15; }
.pag-forma { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--texto-2); }
.pag-forma .ico { width: 15px; height: 15px; color: var(--ouro-escuro); }
.pag-valor .pag-prazo { margin: 0; padding: 6px 12px; font-size: 12.5px; }

.pag-comps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pag-comp { display: flex; align-items: center; gap: 12px; padding: 8px; border: 1px solid var(--borda); border-radius: 12px; background: #fff; }
.pag-comp form { flex: none; margin: 0; }
.pag-comp-midia { flex: none; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; background: var(--fundo); color: var(--ouro-escuro); }
.pag-comp-midia img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pag-comp-doc { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; }
.pag-comp-doc .ico { width: 24px; height: 24px; }
.pag-comp-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.pag-comp-txt b { font-size: 14px; }
.pag-comp-txt small { font-size: 12px; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pag-anexar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.pag-anexar form { margin: 0; }
.pag-anexar-btn { position: relative; overflow: hidden; width: 100%; height: 54px; justify-content: center; font-size: 15px; }
/* Invisível mas clicável: "hidden" de verdade faz o iPhone ignorar o toque. */
.pag-anexar-btn input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.pag-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; margin-top: 10px; }
.pag-link .campo { margin: 0; }
.pag-link .btn { height: 48px; }
.pag-link input { font-size: 16px; }
.pag-ir-exp { margin: 0 0 12px 10px; }

.pag-cancelado { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; padding: 14px 16px; border-radius: 14px; background: #fdecec; border: 1px solid #f3c6c6; }
.pag-cancelado > .ico { flex: none; width: 40px; height: 40px; padding: 10px; border-radius: 50%; background: #b91c1c; color: #fff; }
.pag-cancelado h2 { margin: 0; font-size: 18px; font-weight: 700; color: #7f1d1d; }
.pag-cancelado p { margin: 2px 0 0; font-size: 13px; color: #991b1b; }

@media (max-width: 720px) {
    .pag-contadores { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .pag-contadores .exp-contador { padding: 10px 8px; }
    .pag-contadores .exp-contador-ico { display: none; }
    .pag-contadores .exp-contador-txt small { white-space: normal; font-size: 10px; line-height: 1.25; }
    .pag-link { grid-template-columns: 1fr; }
    .pag-link .btn { width: 100%; justify-content: center; }
    .pag-valor strong { font-size: 24px; }
    .pag-ir-exp { width: 100%; margin: 0 0 12px; justify-content: center; height: 54px; }
}

/* ============================================================
   VISÃO GERAL: AVISO DE CANCELADOS PELO PRAZO (2026-09-13)
   No FIM do arquivo de propósito (ver CLAUDE.md, "Bloco novo de CSS").
   ============================================================ */
.painel-aviso-prazo { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; line-height: 1.45; }
.painel-aviso-prazo > .ico { flex: none; width: 18px; height: 18px; }
.painel-aviso-prazo > span { flex: 1; min-width: 220px; }
.painel-aviso-prazo > a {
    display: inline-flex; align-items: center; gap: 4px; flex: none;
    font-weight: 700; color: inherit; text-decoration: underline;
}
.painel-aviso-prazo > a .ico { width: 14px; height: 14px; }

/* ============================================================
   ABA ESTOQUE (2026-09-13) — feita primeiro para o celular
   ============================================================ */
.est-acoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.est-acao { display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 12px 14px; border: 1px solid var(--borda); border-radius: 16px; background: #fff; color: var(--texto); transition: border-color .15s, transform .05s, box-shadow .15s; }
.est-acao:hover { border-color: var(--ouro); box-shadow: 0 8px 20px -14px rgb(0 0 0 / .3); }
.est-acao:active { transform: scale(.98); }
.est-acao > span:last-child { min-width: 0; display: grid; }
.est-acao b { font-size: 15px; }
.est-acao small { font-size: 12px; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.est-acao-ico { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--fundo); color: var(--texto-2); }
.est-acao-ico .ico { width: 20px; height: 20px; }
.est-acao--entrada .est-acao-ico { background: #e7f5ec; color: #14683a; }
.est-acao--saida .est-acao-ico { background: #fdecec; color: #a51f1f; }

.est-numeros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.est-numero { display: grid; gap: 1px; min-width: 0; padding: 12px 14px; border: 1px solid var(--borda); border-radius: 16px; background: #fff; text-align: left; font: inherit; color: var(--texto); }
button.est-numero { cursor: pointer; }
button.est-numero:hover { border-color: var(--ouro); }
.est-numero small { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-3); }
.est-numero strong { font-family: var(--fonte-titulo); font-size: 22px; font-weight: 700; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.est-numero em { font-style: normal; font-size: 12px; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.est-numero--alerta strong { color: #a86a00; }
.est-numero--zero strong { color: #a51f1f; }

.est-painel { scroll-margin-top: 80px; }
.est-filtros { display: grid; gap: 10px; margin-bottom: 12px; }
.est-busca { min-width: 0; }
.est-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.est-chips::-webkit-scrollbar { display: none; }
.est-chip { flex: none; height: 36px; padding: 0 14px; border: 1px solid var(--borda); border-radius: 999px; background: #fff; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--texto-2); cursor: pointer; }
.est-chip.ativo { border-color: var(--preto); background: var(--preto); color: #fff; }

.est-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.est-item { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; padding: 12px; border: 1px solid var(--borda); border-radius: 14px; background: #fff; }
.est-foto { flex: none; width: 52px; height: 52px; border-radius: 12px; overflow: hidden; background: var(--tom, #f3f1ec); display: grid; place-items: center; }
.est-foto .produto-svg { width: 100%; height: 100%; object-fit: cover; }
.est-foto--p { width: 40px; height: 40px; border-radius: 10px; }
.est-item[hidden] { display: none; }
.est-item-qtd { align-self: start; width: 54px; padding: 6px 0; border-radius: 12px; background: var(--fundo); text-align: center; line-height: 1; }
.est-item-qtd b { display: block; font-family: var(--fonte-titulo); font-size: 22px; }
.est-item-qtd small { font-size: 11px; color: var(--texto-3); }
.est-item--acabando .est-item-qtd { background: #fff4dc; color: #8a5a00; }
.est-item--zerado .est-item-qtd { background: #fdecec; color: #a51f1f; }
.est-item-info { min-width: 0; display: grid; gap: 2px; }
.est-item-info strong { font-size: 14.5px; line-height: 1.3; }
.est-item-info > small { font-size: 12px; color: var(--texto-3); }
.est-item-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.est-tag { font-style: normal; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: #f1efea; color: var(--texto-2); }
.est-tag--alerta { background: #fff4dc; color: #8a5a00; }
.est-tag--zero { background: #fdecec; color: #a51f1f; }
.est-tag--custo { background: #eef4ff; color: #274b8f; }
.est-tag--sem { background: transparent; border: 1px dashed var(--borda); color: var(--texto-3); }
.est-tag--leve { background: transparent; color: var(--texto-3); padding-inline: 2px; }
.est-item-botoes { grid-column: 2 / -1; display: flex; gap: 6px; }
.est-mini { width: 40px; height: 36px; border-radius: 10px; border: 1px solid var(--borda); background: #fff; display: grid; place-items: center; color: var(--texto-2); }
.est-mini .ico { width: 17px; height: 17px; }
.est-mini:hover { border-color: var(--ouro); color: var(--texto); }
.est-mini--entrada { color: #14683a; }
.est-mini--saida { color: #a51f1f; }
.est-nada { margin-top: 12px; }

/* formulários de entrada/saída e contagem */
.est-form { padding-bottom: 8px; }
.est-bloco { padding: 16px; }
.est-bloco + .est-bloco { margin-top: 12px; }
.est-bloco-titulo { font-size: 15px; font-weight: 700; margin: 0 0 10px; }
.est-motivos { display: flex; flex-wrap: wrap; gap: 8px; }
.est-motivo { position: relative; }
.est-motivo input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.est-motivo span { display: inline-flex; align-items: center; min-height: 42px; padding: 0 14px; border: 1.5px solid var(--borda); border-radius: 12px; background: #fff; font-size: 14px; font-weight: 600; color: var(--texto-2); }
.est-motivo input:checked + span { border-color: var(--ouro); background: #fffbf0; color: var(--texto); box-shadow: 0 0 0 3px rgb(193 145 1 / .14); }
.est-motivo input:focus-visible + span { outline: 2px solid var(--ouro); outline-offset: 2px; }

.est-linhas { display: grid; gap: 10px; }
.est-linha { padding: 12px; border: 1px solid var(--borda); border-radius: 14px; background: #fdfcf9; }
.est-linha-topo { display: flex; align-items: flex-end; gap: 8px; }
.est-linha-topo .est-campo { flex: 1; min-width: 0; }
.est-remover { flex: none; width: 44px; height: 46px; border: 1px solid #f3c9c9; border-radius: 12px; background: #fbeaea; color: var(--vermelho); display: grid; place-items: center; cursor: pointer; }
.est-remover[hidden] { display: none; }
.est-remover .ico { width: 16px; height: 16px; }
.est-linha-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.est-campo { display: grid; gap: 5px; min-width: 0; }
.est-campo > span { font-size: 12.5px; font-weight: 600; color: var(--texto-2); }
.est-campo > span em { font-style: normal; font-weight: 500; color: var(--texto-3); }
.est-campo input, .est-campo select, .est-campo textarea { width: 100%; min-width: 0; height: 46px; border: 1px solid var(--borda); border-radius: 12px; background: #fff; padding: 0 12px; font: inherit; font-size: 15px; color: var(--texto); }
.est-campo textarea { height: auto; padding: 10px 12px; resize: vertical; }
.est-campo input:focus, .est-campo select:focus, .est-campo textarea:focus { outline: none; border-color: var(--ouro); box-shadow: 0 0 0 3px rgb(193 145 1 / .15); }
.est-passo { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; border: 1px solid var(--borda); border-radius: 12px; background: #fff; overflow: hidden; }
.est-passo button { border: 0; background: var(--fundo); color: var(--texto); display: grid; place-items: center; cursor: pointer; }
.est-passo button .ico { width: 16px; height: 16px; }
.est-campo .est-passo input { height: 44px; border: 0; border-radius: 0; text-align: center; font-weight: 700; padding: 0 4px; -moz-appearance: textfield; }
.est-campo .est-passo input:focus { box-shadow: none; }
.est-passo input::-webkit-outer-spin-button, .est-passo input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.est-linha-rodape { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.est-linha-foto { flex: none; width: 40px; height: 40px; border-radius: 10px; object-fit: cover; background: #fff; border: 1px solid var(--borda); }
.est-linha-foto[hidden] { display: none; }
.est-linha-info { margin: 0; font-size: 12.5px; color: var(--texto-3); }
.est-linha-info.erro { color: #a51f1f; font-weight: 700; }
.est-lote { margin-top: 8px; }
.est-lote summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ouro-escuro); padding: 4px 0; }
.est-lote summary em { font-style: normal; font-weight: 500; color: var(--texto-3); }
.est-adicionar { width: 100%; margin-top: 10px; justify-content: center; }

.est-rodape { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 12px; margin: 14px 0 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border: 1px solid var(--borda); border-radius: 16px 16px 0 0; background: rgb(255 255 255 / .96); box-shadow: 0 -10px 24px -18px rgb(0 0 0 / .35); backdrop-filter: blur(6px); }
.est-rodape-resumo { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--texto-2); }
.est-rodape-btn { flex: none; height: 48px; padding: 0 18px; }

.est-aviso { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin-bottom: 12px; border-radius: 14px; background: #fffbf0; border: 1px solid #efe1b3; font-size: 13.5px; color: var(--texto-2); }
.est-aviso .ico { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--ouro-escuro); }
.est-aviso p { margin: 0; }
.est-cat + .est-cat { margin-top: 14px; }
.est-cat[hidden] { display: none; }
.est-cat-titulo { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-3); margin: 0 0 6px 4px; }
.est-contas { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.est-conta { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 14px; background: #fff; }
.est-conta[hidden] { display: none; }
.est-conta.contado { border-color: #bfe0cb; background: #f6fbf8; }
.est-conta.diferente { border-color: #efcf8a; background: #fffaf0; }
.est-conta-info { flex: 1; min-width: 0; display: grid; gap: 2px; }
.est-conta-info strong { font-size: 14px; line-height: 1.3; }
.est-conta-info small { font-size: 12px; color: var(--texto-3); }
.est-conta-info small b { color: var(--texto); }
.est-conta-campo { flex: none; display: grid; justify-items: center; gap: 2px; }
.est-conta-campo input { width: 72px; height: 46px; border: 1.5px solid var(--borda); border-radius: 12px; background: #fff; text-align: center; font: inherit; font-size: 17px; font-weight: 700; -moz-appearance: textfield; }
.est-conta-campo input::-webkit-outer-spin-button, .est-conta-campo input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.est-conta-campo input:focus { outline: none; border-color: var(--ouro); box-shadow: 0 0 0 3px rgb(193 145 1 / .15); }
.est-dif { font-style: normal; font-size: 11.5px; font-weight: 700; min-height: 14px; color: #14683a; }
.est-conta.diferente .est-dif { color: #8a5a00; }

.est-hist-filtros { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 12px; }
.est-movs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.est-mov { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1px solid var(--borda); border-radius: 14px; background: #fff; }
.est-mov-qtd { flex: none; min-width: 48px; height: 40px; padding: 0 6px; border-radius: 12px; display: grid; place-items: center; font-family: var(--fonte-titulo); font-size: 17px; font-weight: 700; background: var(--fundo); }
.est-mov-qtd--mais { background: #e7f5ec; color: #14683a; }
.est-mov-qtd--menos { background: #fdecec; color: #a51f1f; }
.est-mov-info { flex: 1; min-width: 0; display: grid; gap: 3px; }
.est-mov-linha1 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.est-mov-linha1 strong { font-size: 14px; line-height: 1.3; }
.est-mov-info small { font-size: 12.5px; color: var(--texto-2); overflow-wrap: anywhere; }
.est-mov-info small a { text-decoration: underline; }
.est-mov-obs { font-style: italic; }
.est-mov-info .est-mov-quem { color: var(--texto-3); }
.est-tipo { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: #f1efea; color: var(--texto-2); }
.est-tipo--entrada { background: #e7f5ec; color: #14683a; }
.est-tipo--saida { background: #fdecec; color: #a51f1f; }
.est-tipo--ajuste { background: #fff4dc; color: #8a5a00; }
.est-mais { text-align: center; margin-top: 14px; }

@media (min-width: 720px) {
    .est-acoes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .est-numeros { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .est-filtros { grid-template-columns: minmax(220px, 360px) minmax(0, 1fr); align-items: center; }
    .est-item { grid-template-columns: 52px minmax(0, 1fr) auto auto; }
    .est-item-qtd { align-self: center; }
    .est-item-botoes { grid-column: auto; }
    .est-linha-campos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .est-lote .est-linha-campos { grid-template-columns: repeat(2, minmax(0, 220px)); }
    .est-hist-filtros { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
    .est-rodape { border-radius: 16px; bottom: 12px; }
}

/* ============================================================
   PAINEL NO CELULAR (2026-09-13)
   Revisão de todas as abas numa tela de 390px (pedido do dono: "muita coisa
   ultrapassando, botão grande, aba pedidos gigante"). Fica no FIM do arquivo de
   propósito: regra base escrita depois de uma media query anula a media query.
   ============================================================ */

/* Campo do cashback (e outros soltos numa linha de ações) tinha a cara crua do navegador. */
.admin-status-linha > input { height: 46px; min-width: 0; border: 1px solid var(--borda); border-radius: 12px; padding: 0 14px; font-size: 15px; background: #fff; }

/* Grades de duas colunas: "1fr" deixa a coluna esticar até o conteúdo mais largo
   (era o que empurrava o pedido e a ficha do cliente para fora da tela). */
.conta-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.conta-grade > * { min-width: 0; }
.painel-lista > li { min-width: 0; }

@media (max-width: 1000px) {
    .conta-grade { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
    /* ---------- barra de cima: uma linha só ---------- */
    .admin-barra { gap: 10px; padding-block: 8px; }
    .admin-barra-info { flex-wrap: nowrap; }
    /* O tempo das duas praças fica só no computador; o relógio e a rede ficam. */
    .admin-barra-info .admin-chip[title]:not(.admin-chip-rede) { display: none; }
    .admin-chip-hora strong { font-size: 15px; }
    .admin-main { padding: 16px 12px 48px; }

    /* ---------- títulos ---------- */
    .admin-cabecalho { margin-bottom: 14px; }
    .admin-cabecalho h1,
    .admin-cabeca h1 { font-size: 22px; line-height: 1.2; letter-spacing: -.01em; }
    .admin-cabeca { margin-bottom: 14px; }
    .admin-cabeca p { font-size: 13.5px; line-height: 1.5; color: var(--texto-2); }
    .admin-cabecalho-flex { flex-direction: column; align-items: stretch; gap: 10px; }
    .admin-cabecalho-flex .admin-status-linha { flex-direction: column; gap: 8px; }
    .admin-cabecalho-flex .admin-status-linha form { display: grid; gap: 8px; }
    .admin-cabecalho-flex .admin-status-linha .btn { width: 100%; }

    /* ---------- botões: menores, sem sombra pesada, texto pode quebrar ---------- */
    .pg-admin .btn { height: auto; min-height: 44px; padding: 8px 16px; gap: 8px; font-size: 14px; line-height: 1.2; white-space: normal; text-align: center; }
    .pg-admin .btn .ico { width: 17px; height: 17px; }
    .pg-admin .btn-sm { min-height: 36px; padding: 6px 12px; font-size: 13px; }
    .pg-admin .btn-ouro { box-shadow: 0 6px 16px -12px rgb(193 145 1 / .8); }
    .pg-admin .btn-ouro:hover,
    .pg-admin .btn-wa:hover { transform: none; }
    .admin-status-linha { flex-wrap: wrap; }
    .admin-status-linha > input { flex: 1 1 90px; }

    /* ---------- campos: 16px para o iPhone não dar zoom ao tocar ---------- */
    .pg-admin input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    .pg-admin select,
    .pg-admin textarea { font-size: 16px; }

    /* ---------- blocos ---------- */
    .conta-bloco { padding: 16px; border-radius: 14px; }
    .form-grupo { padding: 12px; border-radius: 12px; }
    .admin-filtros { margin-bottom: 12px; }
    .admin-busca { min-width: 0; flex: 1 1 100%; }
    .admin-filtros > .btn,
    .admin-filtros > select { flex: 1 1 auto; }

    /* ---------- visão geral ---------- */
    .painel-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .painel-num { padding: 14px; min-width: 0; }
    .painel-num strong { font-size: 20px; }
    .painel-num small { font-size: 11.5px; }

    /* ---------- tabelas viram cartões ---------- */
    .tabela-rolagem { overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
    .admin-tabela { min-width: 0; }
    .admin-tabela thead { display: none; }
    .admin-tabela,
    .admin-tabela tbody,
    .admin-tabela tr,
    .admin-tabela td { display: block; width: 100%; }
    .admin-tabela tr { position: relative; margin-bottom: 8px; padding: 8px 14px; border: 1px solid var(--borda); border-radius: 14px; background: #fff; }
    .admin-tabela tbody tr:hover { background: #fff; }
    .admin-tabela td,
    .admin-tabela td:last-child { padding: 5px 0; border: 0; text-align: left; white-space: normal; font-size: 14px; }
    .admin-tabela td:empty { display: none; }
    .admin-tabela td[data-rotulo]::before { content: attr(data-rotulo); display: block; margin-bottom: 2px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-3); }
    .admin-tabela td.col-acoes { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--borda); }
    .admin-tabela td.col-acoes::before { display: none; }
    .admin-tabela td .btn { height: auto; min-height: 36px; }

    /* Pedidos: número e valor em cima, cliente, status e expedição, e as ações embaixo. */
    .ped-tabela tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "num total" "cli cli" "status exp" "check acoes"; column-gap: 12px; align-items: center; }
    .ped-tabela td { width: auto; }
    .ped-tabela .ped-c-num { grid-area: num; }
    .ped-tabela .ped-c-total { grid-area: total; text-align: right; font-weight: 700; font-size: 15px; }
    .ped-tabela .ped-c-cli { grid-area: cli; padding-top: 0; font-weight: 600; }
    .ped-tabela .ped-c-status { grid-area: status; min-width: 0; }
    .ped-tabela .ped-c-exp { grid-area: exp; align-self: end; }
    .ped-tabela td.col-check { grid-area: check; width: auto; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--borda); text-align: left; }
    .ped-tabela td.col-acoes { grid-area: acoes; }
    .ped-tabela .status-rapido { display: flex; gap: 6px; }
    .ped-tabela .status-sel { min-width: 0; max-width: 100%; }

    /* Produtos: foto, nome, categoria e preço; estoque e ações embaixo. */
    .prod-tabela tr { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "foto nome nome" "foto cat preco" "est est acoes"; column-gap: 12px; align-items: center; }
    .prod-tabela td { width: auto; min-width: 0; }
    .prod-tabela td.col-mini { grid-area: foto; align-self: start; }
    .prod-tabela .prod-c-nome { grid-area: nome; }
    .prod-tabela .prod-c-cat { grid-area: cat; }
    .prod-tabela .prod-c-preco { grid-area: preco; text-align: right; font-weight: 700; }
    .prod-tabela .prod-c-est { grid-area: est; }
    .prod-tabela td.col-acoes { grid-area: acoes; margin-top: 0; padding-top: 5px; border-top: 0; align-self: end; }

    /* Clientes: nome e contato em cima; pedidos e total lado a lado. */
    .cli-tabela tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
    .cli-tabela td { width: auto; min-width: 0; overflow-wrap: anywhere; }
    .cli-tabela td:nth-child(1),
    .cli-tabela td:nth-child(2),
    .cli-tabela td.col-acoes { grid-column: 1 / -1; }
}

/* Celular, acertos da segunda passada: status longo não cobre mais a data nos
   últimos pedidos, e o histórico de compras do cliente quebra em duas linhas. */
@media (max-width: 720px) {
    .painel-pedido-dir { max-width: 48%; }
    .painel-pedido-dir .pedido-status { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .hist-pedidos a { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
    .hist-pedidos a > * { min-width: 0; }
}

/* ============================================================
   PERMISSÕES DENTRO DA EXPEDIÇÃO (2026-09-13)
   ============================================================ */
.perm-exp[hidden],
.perm-exp-opcoes[hidden] { display: none; }
.perm-exp-modos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.perm-exp-modo { position: relative; }
.perm-exp-modo input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.perm-exp-modo span { display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border: 1.5px solid var(--borda); border-radius: 12px; background: #fff; font-size: 14px; font-weight: 600; color: var(--texto-2); }
.perm-exp-modo input:checked + span { border-color: var(--ouro); background: #fffbf0; color: var(--texto); box-shadow: 0 0 0 3px rgb(193 145 1 / .14); }
.perm-exp-modo input:focus-visible + span { outline: 2px solid var(--ouro); outline-offset: 2px; }
.perm-exp-opcoes { display: grid; gap: 12px; }
.perm-exp-opcoes .campo { margin-bottom: 0; }
.perm-exp-opcoes select { width: 100%; height: 46px; border: 1px solid var(--borda); border-radius: 12px; background: #fff; padding: 0 12px; font-size: 15px; }
.perm-chip--limitada { background: #fff4dc; color: #8a5a00; }

/* Expedição: o que a pessoa não pode fazer aparece como aviso, não como botão. */
.exp-sem-perm { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; margin: 10px 0; border-radius: 12px; background: #f6f4ef; border: 1px dashed var(--borda); font-size: 13.5px; color: var(--texto-2); }
.exp-sem-perm .ico { flex: none; width: 17px; height: 17px; margin-top: 2px; color: var(--texto-3); }
.exp-sem-perm p { margin: 0; }

/* Celular: listas da visão geral sem rolagem dentro da caixa (rolar dentro de
   rolar é ruim no dedo). */
@media (max-width: 720px) {
    .painel-grade--3 .painel-lista,
    .painel-grade--2 .painel-lista { max-height: none; overflow: visible; }
}

/* Aba Frete: token e senha em bolinhas, com o olho para mostrar (2026-09-13). */
.campo-segredo { position: relative; display: block; }
.campo .campo-segredo input { width: 100%; padding-right: 52px; }
.campo-segredo-btn { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 40px; height: 38px; border: 0; border-radius: 10px; background: transparent; color: var(--texto-3); display: grid; place-items: center; cursor: pointer; }
.campo-segredo-btn .ico { width: 19px; height: 19px; }
.campo-segredo-btn:hover { background: var(--fundo); color: var(--texto); }
.campo-segredo-btn[aria-pressed="true"] { color: var(--ouro-escuro); }

/* ============================================================
   PÁGINA DO PEDIDO: "FALTA SÓ O PAGAMENTO" (2026-09-13)
   Pedido do dono: deixar claro que o pedido só anda depois do contato pelo
   WhatsApp da loja. Cartão logo abaixo do título, com os três passos, o prazo
   da reserva, o número da loja para quem não conseguir abrir pelo botão e um
   aviso contra golpe.
   ============================================================ */
.pedido-passo { max-width: 620px; margin: -4px auto 22px; padding: 18px; border: 1.5px solid #bfe6cc; border-radius: 18px; background: linear-gradient(180deg, #f2fbf5, #fff 70%); box-shadow: 0 14px 30px -24px rgb(20 104 58 / .5); text-align: left; }
.pedido-passo-topo { display: flex; align-items: flex-start; gap: 12px; }
.pedido-passo-ico { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--verde-wa, #25d366); color: #05250e; }
.pedido-passo-ico .ico { width: 24px; height: 24px; }
.pedido-passo h2 { margin: 0 0 4px; font-size: 19px; font-weight: 700; line-height: 1.25; }
.pedido-passo-topo p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--texto-2); }
.pedido-passo-lista { list-style: none; counter-reset: passo; display: grid; gap: 8px; margin: 14px 0 0; padding: 0; }
.pedido-passo-lista li { counter-increment: passo; display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--texto-2); }
.pedido-passo-lista li::before { content: counter(passo); flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #14683a; color: #fff; font-size: 12.5px; font-weight: 700; margin-top: -1px; }
.pedido-passo .pedido-reserva { justify-content: flex-start; max-width: none; margin: 14px 0 0; }
.pedido-passo-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid #dcefe3; }
.pedido-passo-alt p { flex: 1 1 240px; margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--texto-2); }
.pedido-passo-alt a { font-weight: 700; color: #14683a; text-decoration: underline; white-space: nowrap; }
.pedido-num-copiar { display: inline-flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 6px 0 14px; border: 1.5px dashed #9fd3b1; border-radius: 12px; background: #fff; font: inherit; font-size: 14px; color: var(--texto); cursor: pointer; }
.pedido-num-copiar b { font-family: var(--fonte-titulo); font-size: 16px; }
.pedido-num-copiar em { font-style: normal; font-size: 12.5px; font-weight: 700; padding: 6px 10px; border-radius: 9px; background: #e7f5ec; color: #14683a; }
.pedido-num-copiar:hover { border-color: #14683a; }
.pedido-passo-seguro { display: flex; align-items: flex-start; gap: 7px; margin: 12px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--texto-3); }
.pedido-passo-seguro .ico { flex: none; width: 15px; height: 15px; margin-top: 1px; color: #14683a; }

@media (max-width: 560px) {
    .pedido-passo { padding: 16px 14px; margin-top: -8px; }
    .pedido-passo h2 { font-size: 18px; }
    .pedido-num-copiar { width: 100%; justify-content: space-between; }
}

/* ============================================================
   PÁGINA DO PEDIDO MAIS LEVE (2026-09-13)
   O dono achou pesado ("muita gente odeia ler"): saiu o cartão com 3 passos,
   parágrafos e aviso longo. Fica: parabéns, número, reserva, "agora é só
   finalizar", e embaixo do resumo o botão com uma linha de ajuda.
   ============================================================ */
.pedido-ok { text-align: center; margin: 0 auto 22px; max-width: 560px; }
.pedido-ok-selo { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; background: #e3f6ea; color: #14683a; box-shadow: 0 0 0 8px #f2fbf5; }
.pedido-ok-selo .ico { width: 32px; height: 32px; stroke-width: 2.4; }
.pedido-ok h1 { margin: 0 0 8px; font-size: clamp(24px, 3.2vw, 30px); font-weight: 700; line-height: 1.2; }
.pedido-ok p { margin: 0; font-size: 15px; color: var(--texto-2); }
.pedido-ok p b { color: var(--texto); }
.pedido-ok-agora { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px !important; padding: 8px 14px; border-radius: 999px; background: #e7f5ec; color: #14683a !important; font-weight: 600; font-size: 14px !important; }
.pedido-ok-agora .ico { width: 17px; height: 17px; }
.pedido-fim-ajuda { margin: 10px 2px 0; font-size: 12.5px; line-height: 1.5; color: var(--texto-3); text-align: center; }
.pedido-fim-ajuda a { color: #14683a; font-weight: 700; text-decoration: underline; white-space: nowrap; }
.pedido-fim-ajuda b { color: var(--texto-2); }

/* ============================================================
   CHAT DA EQUIPE (2026-09-13)
   Lista de conversas à esquerda e a conversa à direita (no computador); no
   celular, uma de cada vez. Balões: os meus à direita, em dourado claro.
   ============================================================ */
.chat-cabecalho { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.chat-avisos-btn[hidden] { display: none; }

.chat {
    display: grid; grid-template-columns: 320px minmax(0, 1fr);
    height: calc(100vh - 200px); min-height: 520px;
    border: 1px solid var(--borda); border-radius: 18px; background: #fff; overflow: hidden;
    box-shadow: 0 1px 2px rgb(0 0 0 / .04);
}

/* ---------- lista ---------- */
.chat-lista { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--borda); background: #fcfbf8; }
.chat-lista-topo { padding: 14px 16px 10px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-3); }
.chat-itens { flex: 1; min-height: 0; overflow-y: auto; padding: 0 8px 10px; }
.chat-item {
    display: flex; align-items: center; gap: 11px; width: 100%;
    padding: 10px; border: 0; border-radius: 12px; background: none;
    font: inherit; text-align: left; color: var(--texto); cursor: pointer;
}
.chat-item:hover { background: var(--fundo); }
.chat-item.ativo { background: #fff6dd; }
.chat-avatar {
    flex: none; width: 42px; height: 42px; border-radius: 50%;
    display: grid; place-items: center;
    background: #313337; color: #f3d27a; font-family: var(--fonte-titulo); font-size: 16px; font-weight: 700;
}
.chat-avatar .ico { width: 20px; height: 20px; }
.chat-avatar--grupo { background: var(--grad-ouro); color: #1a1300; }
.chat-item-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.chat-item-linha { display: flex; align-items: baseline; gap: 8px; }
.chat-item-linha b { flex: 1; min-width: 0; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-item-linha small { flex: none; font-size: 11.5px; color: var(--texto-3); }
.chat-item-ultima { display: flex; align-items: center; gap: 8px; }
.chat-item-ultima span { flex: 1; min-width: 0; font-size: 13px; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-item.tem-novas .chat-item-ultima span { color: var(--texto); font-weight: 600; }
.chat-contador { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #1f9d55; color: #fff; font-size: 11px; font-weight: 700; line-height: 20px; text-align: center; }

/* ---------- conversa ---------- */
.chat-conversa { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #f7f5f0; position: relative; }
.chat-conversa[hidden] { display: none; }
.chat-vazio { display: grid; place-items: center; align-content: center; gap: 8px; padding: 24px; color: var(--texto-3); text-align: center; background: #f7f5f0; }
.chat-vazio .ico { width: 40px; height: 40px; color: #c9c2b0; }
.chat-vazio[hidden] { display: none; }

.chat-topo { display: flex; align-items: center; gap: 11px; padding: 10px 14px; background: #fff; border-bottom: 1px solid var(--borda); }
.chat-topo-txt { flex: 1; min-width: 0; display: grid; }
.chat-topo-txt b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-topo-txt small { font-size: 12px; color: var(--texto-3); }
.chat-icone-btn { flex: none; width: 40px; height: 40px; border: 0; border-radius: 12px; background: none; color: var(--texto-2); display: grid; place-items: center; cursor: pointer; }
.chat-icone-btn:hover { background: var(--fundo); color: var(--texto); }
.chat-icone-btn .ico { width: 20px; height: 20px; }
.chat-voltar { display: none; }

.chat-fixado { display: flex; align-items: flex-start; gap: 10px; margin: 10px 14px 0; padding: 10px 12px; border-radius: 12px; background: #fff6dd; border: 1px solid #f0dfa6; }
.chat-fixado[hidden] { display: none; }
.chat-fixado > .ico { flex: none; width: 17px; height: 17px; margin-top: 2px; color: var(--ouro-escuro); }
.chat-fixado-txt { flex: 1; min-width: 0; }
.chat-fixado-txt b { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #8a6a00; }
.chat-fixado-txt p { margin: 2px 0; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-fixado-txt small { font-size: 11.5px; color: var(--texto-3); }
.chat-fixado button { flex: none; border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ouro-escuro); cursor: pointer; padding: 2px 4px; }

.chat-fixar-form { margin: 10px 14px 0; padding: 12px; border-radius: 12px; background: #fff; border: 1px solid var(--borda); display: grid; gap: 8px; }
.chat-fixar-form[hidden] { display: none; }
.chat-fixar-form textarea { width: 100%; min-height: 70px; border: 1px solid var(--borda); border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 15px; resize: vertical; }
.chat-fixar-botoes { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.chat-fixar-botoes .btn { height: 38px; padding: 0 14px; font-size: 13.5px; }

.chat-msgs { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 14px 8px; }
.chat-antigas { display: block; margin: 0 auto 10px; border: 1px solid var(--borda); border-radius: 999px; background: #fff; padding: 6px 14px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--texto-2); cursor: pointer; }
.chat-antigas[hidden] { display: none; }
.chat-dia { display: flex; justify-content: center; margin: 12px 0 8px; }
.chat-dia span { padding: 3px 12px; border-radius: 999px; background: #ebe7dc; font-size: 11.5px; font-weight: 700; color: var(--texto-2); }
.chat-msg { display: flex; margin: 2px 0; }
.chat-msg.meu { justify-content: flex-end; }
.chat-balao { max-width: min(78%, 560px); padding: 7px 10px 5px; border-radius: 14px 14px 14px 4px; background: #fff; box-shadow: 0 1px 1px rgb(0 0 0 / .06); }
.chat-msg.meu .chat-balao { border-radius: 14px 14px 4px 14px; background: #fdf0c6; }
.chat-msg.seguida .chat-balao { border-radius: 14px; }
.chat-autor { display: block; margin-bottom: 1px; font-size: 12px; font-weight: 700; color: #9a6b00; }
.chat-texto { font-size: 14.5px; line-height: 1.42; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-texto a { color: #1f5fbf; text-decoration: underline; }
.chat-texto a.chat-pedido { color: #8a5a00; font-weight: 700; text-decoration: none; background: #fff1c9; padding: 0 4px; border-radius: 5px; }
.chat-msg.meu .chat-texto a.chat-pedido { background: #f7dd8e; }
.chat-foto { display: block; margin: 2px 0 4px; border-radius: 10px; overflow: hidden; max-width: 280px; }
.chat-foto img { display: block; width: 100%; height: auto; max-height: 320px; object-fit: cover; }
.chat-hora { display: block; margin-top: 1px; font-size: 10.5px; color: var(--texto-3); text-align: right; }
.chat-msg.enviando .chat-balao { opacity: .6; }

/* ---------- escrever ---------- */
.chat-envio { display: flex; align-items: flex-end; gap: 4px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--borda); }
.chat-envio textarea {
    flex: 1; min-width: 0; min-height: 42px; max-height: 140px; margin: 0 4px;
    border: 1px solid var(--borda); border-radius: 21px; padding: 10px 14px;
    font: inherit; font-size: 15px; line-height: 1.35; resize: none; background: #fbfaf7;
}
.chat-envio textarea:focus { outline: none; border-color: var(--ouro); background: #fff; }
.chat-foto-btn { position: relative; overflow: hidden; }
.chat-foto-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.chat-enviar { flex: none; width: 44px; height: 42px; border: 0; border-radius: 50%; background: var(--grad-ouro); color: #1a1300; display: grid; place-items: center; cursor: pointer; }
.chat-enviar .ico { width: 20px; height: 20px; }
.chat-enviar:disabled { opacity: .5; cursor: default; }
.chat-previa { position: absolute; left: 14px; bottom: 66px; display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 12px; background: #fff; border: 1px solid var(--borda); box-shadow: 0 10px 24px -14px rgb(0 0 0 / .35); }
.chat-previa[hidden] { display: none; }
.chat-previa img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }
.chat-previa button { border: 0; background: #fbeaea; color: var(--vermelho); border-radius: 8px; width: 32px; height: 32px; display: grid; place-items: center; cursor: pointer; }
.chat-previa button .ico { width: 15px; height: 15px; }

.chat-pop { position: absolute; left: 10px; bottom: 62px; z-index: 5; width: min(360px, calc(100% - 20px)); max-height: 300px; overflow-y: auto; padding: 10px; border-radius: 14px; background: #fff; border: 1px solid var(--borda); box-shadow: 0 16px 36px -18px rgb(0 0 0 / .4); }
.chat-pop[hidden] { display: none; }
.chat-emojis { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.chat-emojis button { border: 0; background: none; border-radius: 8px; font-size: 22px; line-height: 1; padding: 6px 0; cursor: pointer; }
.chat-emojis button:hover { background: var(--fundo); }
.chat-textos-titulo { margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-3); }
.chat-texto-item { display: flex; align-items: flex-start; gap: 6px; }
.chat-texto-item button:first-child { flex: 1; min-width: 0; border: 0; background: none; text-align: left; padding: 8px; border-radius: 10px; font: inherit; font-size: 13.5px; white-space: pre-wrap; overflow-wrap: anywhere; cursor: pointer; }
.chat-texto-item button:first-child:hover { background: var(--fundo); }
.chat-texto-item .chat-texto-x { flex: none; border: 0; background: none; color: var(--texto-3); width: 30px; height: 30px; border-radius: 8px; cursor: pointer; display: grid; place-items: center; }
.chat-texto-item .chat-texto-x:hover { background: #fbeaea; color: var(--vermelho); }
.chat-texto-item .chat-texto-x .ico { width: 14px; height: 14px; }
.chat-textos-vazio { margin: 4px 8px 8px; font-size: 13px; color: var(--texto-3); }
.chat-texto-novo { width: 100%; margin-top: 6px; }

/* ---------- aviso no menu ---------- */
.admin-menu-btn { position: relative; }
.admin-menu-ponto { position: absolute; top: 6px; right: 6px; width: 10px; height: 10px; border-radius: 50%; background: #1f9d55; border: 2px solid #fff; }
.admin-menu-ponto[hidden] { display: none; }
.admin-lado-conta--chat { background: #1f9d55; }

/* ---------- celular: uma tela de cada vez ---------- */
@media (max-width: 760px) {
    .chat { grid-template-columns: minmax(0, 1fr); height: calc(100dvh - 150px); min-height: 440px; border-radius: 14px; }
    .chat-lista { border-right: 0; }
    .chat.aberta .chat-lista { display: none; }
    .chat:not(.aberta) .chat-conversa,
    .chat:not(.aberta) .chat-vazio { display: none; }
    .chat-voltar { display: grid; }
    .chat-balao { max-width: 86%; }
    .chat-cabecalho .admin-data { display: none; }
}

.admin-lado-conta[hidden] { display: none; }

/* ============================================================
   ATALHOS RÁPIDOS NA VISÃO GERAL (2026-09-14)
   Pedido do dono: as áreas mais usadas a um toque, dentro do quadro "Bom trabalho",
   com o número do que está esperando (a pagar, na fila, não lidas, abertas).
   ============================================================ */
.painel-atalhos {
    flex: 1 1 100%;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px;
    margin-top: 4px; padding-top: 16px; border-top: 1px solid rgb(255 255 255 / .1);
}
.painel-atalho {
    position: relative; display: flex; align-items: center; gap: 10px; min-width: 0;
    padding: 10px 12px; border-radius: 12px;
    background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .1);
    color: #efeadf; font-size: 13.5px; font-weight: 600;
    transition: background-color .15s, border-color .15s, transform .05s;
}
.painel-atalho:hover { background: rgb(224 177 46 / .14); border-color: rgb(224 177 46 / .45); color: #fff; }
.painel-atalho:active { transform: scale(.98); }
.painel-atalho-ico { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: rgb(224 177 46 / .16); color: var(--ouro-brilho); }
.painel-atalho-ico .ico { width: 17px; height: 17px; }
.painel-atalho-txt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.painel-atalho-num { flex: none; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--grad-ouro); color: #1a1300; font-size: 12px; line-height: 22px; text-align: center; }
@media (max-width: 720px) {
    .painel-atalhos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding-top: 12px; }
    .painel-atalho { padding: 8px 10px; font-size: 13px; gap: 8px; }
    .painel-atalho-ico { width: 28px; height: 28px; }
}

/* ============================================================
   VISÃO GERAL: ESCOLHER ATALHOS E VENDAS AO VIVO (2026-09-14)
   ============================================================ */
.painel-atalho--aovivo .painel-atalho-ico { background: rgb(34 197 94 / .18); color: #4ade80; }
.painel-atalhos-editar { flex: 1 1 100%; margin-top: -4px; }
.painel-atalhos-editar summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 12.5px; font-weight: 600; color: #cfc9bb; list-style: none; }
.painel-atalhos-editar summary::-webkit-details-marker { display: none; }
.painel-atalhos-editar summary .ico { width: 14px; height: 14px; color: var(--ouro-brilho); }
.painel-atalhos-editar summary:hover { color: #fff; }
.painel-atalhos-editar form { margin-top: 12px; padding: 14px; border-radius: 14px; background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .1); }
.painel-atalhos-editar p { margin: 0 0 10px !important; font-size: 13px !important; color: #cfc9bb !important; }
.painel-atalhos-opcoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; margin-bottom: 12px; }
.painel-atalhos-opcoes label { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: rgb(255 255 255 / .04); border: 1px solid rgb(255 255 255 / .08); font-size: 13px; color: #efeadf; cursor: pointer; }
.painel-atalhos-opcoes label:has(input:checked) { background: rgb(224 177 46 / .14); border-color: rgb(224 177 46 / .45); }
.painel-atalhos-opcoes input { width: 16px; height: 16px; accent-color: var(--ouro); flex: none; }
.painel-atalhos-opcoes .ico { width: 15px; height: 15px; color: var(--ouro-brilho); flex: none; }

.painel-aovivo { margin-bottom: 18px; }
.aovivo-titulo { display: flex; align-items: center; gap: 10px; }
.aovivo-titulo em { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #15803d; background: #dcfce7; padding: 3px 9px; border-radius: 999px; }
.aovivo-ponto { position: relative; width: 12px; height: 12px; border-radius: 50%; background: #22c55e; flex: none; }
.aovivo-ponto::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid #22c55e; animation: aovivo-pulso 1.8s ease-out infinite; }
@keyframes aovivo-pulso { from { transform: scale(.5); opacity: .9; } to { transform: scale(1.4); opacity: 0; } }
.aovivo-tela { height: 40px; padding: 0 16px; font-size: 13.5px; }
.aovivo-numeros { display: grid; grid-template-columns: 1.6fr 1fr 1fr .8fr; gap: 10px; margin: 6px 0 14px; }
.aovivo-num { display: grid; gap: 2px; padding: 14px 16px; border-radius: 14px; background: #faf8f3; border: 1px solid var(--borda); min-width: 0; }
.aovivo-num small { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-3); }
.aovivo-num strong { font-family: var(--fonte-titulo); font-size: 26px; font-weight: 700; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aovivo-num span { font-size: 12.5px; color: var(--texto-3); }
.aovivo-num span b { color: var(--texto-2); }
.aovivo-num--grande { background: linear-gradient(135deg, #2b2d31, #1f2023); border-color: transparent; }
.aovivo-num--grande small, .aovivo-num--grande span { color: #b9b3a6; }
.aovivo-num--grande span b { color: #efeadf; }
.aovivo-num--grande strong { font-size: 38px; color: var(--ouro-brilho); }
.aovivo-num--pago strong { color: #15803d; }
.aovivo-num--aguarda strong { color: #a16207; }
.aovivo-num--canc strong { color: #b91c1c; }
.aovivo-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 420px; overflow-y: auto; }
.aovivo-item { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--borda); background: #fff; }
.aovivo-item.novo { animation: aovivo-novo 2.4s ease-out; }
@keyframes aovivo-novo { from { background: #fef3c7; border-color: #f0c34b; } to { background: #fff; border-color: var(--borda); } }
.aovivo-hora { font-family: var(--fonte-titulo); font-weight: 700; font-size: 15px; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.aovivo-quem { display: grid; min-width: 0; }
.aovivo-quem a, .aovivo-quem b { font-weight: 700; font-size: 14px; color: var(--texto); }
.aovivo-quem a:hover { color: var(--ouro-escuro); }
.aovivo-quem small { font-size: 12px; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aovivo-valor { font-family: var(--fonte-titulo); font-size: 16px; white-space: nowrap; }
.aovivo-vazio { display: flex; align-items: center; gap: 8px; padding: 16px; border-radius: 12px; border: 1px dashed var(--borda); color: var(--texto-3); font-size: 14px; }
.aovivo-vazio .ico { width: 17px; height: 17px; }
/* Tela cheia (TV/monitor): tudo maior. */
.painel-aovivo:fullscreen { overflow: auto; padding: 36px 44px; border-radius: 0; background: #f6f4ef; }
.painel-aovivo:fullscreen h2 { font-size: 30px; }
.painel-aovivo:fullscreen .aovivo-num strong { font-size: 40px; }
.painel-aovivo:fullscreen .aovivo-num--grande strong { font-size: 64px; }
.painel-aovivo:fullscreen .aovivo-lista { max-height: none; }
.painel-aovivo:fullscreen .aovivo-item { padding: 14px 18px; font-size: 16px; }
.painel-aovivo:fullscreen .aovivo-valor { font-size: 22px; }
@media (max-width: 900px) {
    .aovivo-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .aovivo-num--grande { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
    .aovivo-tela { display: none; }
    .aovivo-num strong { font-size: 20px; }
    .aovivo-num--grande strong { font-size: 30px; }
    .aovivo-item { grid-template-columns: 44px minmax(0, 1fr) auto; row-gap: 4px; }
    .aovivo-item .pedido-status { grid-column: 2; justify-self: start; font-size: 11px; }
    .aovivo-valor { grid-column: 3; grid-row: 1; }
    .painel-atalhos-opcoes { grid-template-columns: minmax(0, 1fr); }
}

/* Celular: nome do atalho pode ocupar duas linhas (antes cortava "Pagamen…"). */
@media (max-width: 720px) {
    .painel-atalho-txt { white-space: normal; line-height: 1.2; font-size: 12.5px; }
}

/* ============================================================
   CHAT: DIGITANDO, ÁUDIO E PEDIDO/CLIENTE ANEXADO (2026-09-14)
   ============================================================ */
/* "digitando…" embaixo das mensagens, no topo e na lista */
.chat-digitando { display: inline-flex; align-items: center; gap: 8px; margin: 6px 0 2px; padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: #fff; box-shadow: 0 1px 1px rgb(0 0 0 / .06); font-size: 12.5px; color: var(--texto-3); }
.chat-digitando[hidden] { display: none; }
.chat-digitando-bolas { display: inline-flex; gap: 3px; }
.chat-digitando-bolas i { width: 6px; height: 6px; border-radius: 50%; background: #b9b2a2; animation: chat-bola 1.2s infinite ease-in-out; }
.chat-digitando-bolas i:nth-child(2) { animation-delay: .15s; }
.chat-digitando-bolas i:nth-child(3) { animation-delay: .3s; }
@keyframes chat-bola { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.chat-topo-txt small.chat-sub-digitando { color: #15803d; font-weight: 600; }
.chat-item-digitando { color: #15803d; font-weight: 600; font-style: italic; }

/* áudio na conversa */
.chat-audio { display: flex; align-items: center; gap: 8px; margin: 2px 0 4px; }
.chat-audio audio { width: 240px; max-width: 100%; height: 38px; }
.chat-audio small { font-size: 11.5px; color: var(--texto-3); font-variant-numeric: tabular-nums; }

/* barra de gravação (fica no lugar da caixa de escrever) */
.chat-gravando { display: flex; align-items: center; gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--borda); }
.chat-gravando[hidden] { display: none; }
.chat-gravando-ponto { width: 12px; height: 12px; border-radius: 50%; background: #dc2626; flex: none; animation: chat-grava 1s infinite; }
@keyframes chat-grava { 50% { opacity: .3; } }
.chat-gravando b { font-family: var(--fonte-titulo); font-size: 16px; font-variant-numeric: tabular-nums; min-width: 42px; }
.chat-gravando-txt { flex: 1; min-width: 0; font-size: 13.5px; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-gravando .btn { height: 40px; padding: 0 14px; font-size: 13.5px; }
.chat-envio[hidden] { display: none; }

/* enviar pedido ou cliente */
.chat-anexar { display: grid; gap: 8px; width: min(420px, calc(100% - 20px)); }
.chat-anexar-abas { display: flex; gap: 6px; }
.chat-anexar-abas button { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 1px solid var(--borda); border-radius: 999px; background: #fff; font: inherit; font-size: 13px; font-weight: 600; color: var(--texto-2); cursor: pointer; }
.chat-anexar-abas button .ico { width: 15px; height: 15px; }
.chat-anexar-abas button.ativo { border-color: var(--ouro); background: #fff6dd; color: var(--texto); }
.chat-anexar input { height: 42px; border: 1px solid var(--borda); border-radius: 12px; padding: 0 12px; font: inherit; font-size: 15px; }
.chat-anexar input:focus { outline: none; border-color: var(--ouro); }
.chat-anexar-lista { display: grid; gap: 4px; max-height: 230px; overflow-y: auto; }
.chat-anexar-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 0; border-radius: 10px; background: none; font: inherit; text-align: left; cursor: pointer; color: var(--texto); }
.chat-anexar-item:hover { background: var(--fundo); }

/* cartão dentro da mensagem */
.chat-anexo { display: flex; align-items: center; gap: 10px; min-width: 220px; max-width: 320px; margin: 2px 0 4px; padding: 10px; border-radius: 12px; background: rgb(255 255 255 / .75); border: 1px solid rgb(0 0 0 / .08); color: var(--texto); text-decoration: none; }
a.chat-anexo:hover { border-color: var(--ouro); }
.chat-msg.meu .chat-anexo { background: rgb(255 255 255 / .6); }
.chat-anexo-ico { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: #313337; color: #f3d27a; }
.chat-anexo-ico .ico { width: 18px; height: 18px; }
.chat-anexo-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.chat-anexo-txt b { font-size: 14px; }
.chat-anexo-txt small { font-size: 12px; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-anexo-rodape { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.chat-anexo-rodape strong { font-size: 13.5px; }
.chat-anexo-rodape .pedido-status { font-style: normal; font-size: 10.5px; padding: 2px 8px; }
.chat-anexo-abrir { flex: none; color: var(--texto-3); }
.chat-anexo-abrir .ico { width: 16px; height: 16px; }

@media (max-width: 760px) {
    .chat-envio .chat-icone-btn { width: 34px; }
    .chat-gravando-txt { display: none; }
    .chat-audio audio { width: 200px; }
}

/* ============================================================
   WM CHAT: ACABAMENTO (2026-09-14)
   Pedido do dono: nome "WM Chat" e tudo enquadrado no celular, sem rolar a
   página: a conversa ocupa a tela, a caixa de escrever fica numa linha com o
   Enviar e os botões numa fileira embaixo, fáceis de tocar.
   ============================================================ */
.chat-lista-topo { display: flex; align-items: center; gap: 8px; }
.chat-lista-marca { display: none; align-items: center; gap: 8px; font-family: var(--fonte-titulo); font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--texto); text-transform: none; }
.chat-lista-marca-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--grad-ouro); color: #1a1300; }
.chat-lista-marca-ico .ico { width: 17px; height: 17px; }
.chat-lista-rotulo { flex: 1; }
.chat-avisos-mini { display: none; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border: 1px solid var(--borda); border-radius: 999px; background: #fff; font: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--texto-2); cursor: pointer; }
.chat-avisos-mini .ico { width: 14px; height: 14px; }
.chat-avisos-mini[hidden] { display: none !important; }

/* Computador: moldura mais caprichada */
.chat { box-shadow: 0 18px 40px -30px rgb(0 0 0 / .35); }
.chat-topo { min-height: 64px; }
.chat-msgs { background: #f4f1ea radial-gradient(circle at 1px 1px, rgb(0 0 0 / .035) 1px, transparent 0) 0 0 / 18px 18px; }
.chat-envio { align-items: center; }

@media (max-width: 760px) {
    /* A página do chat vira só o chat: sem título grande e sem sobra embaixo. */
    .admin-main:has(> .chat) { padding-bottom: 10px; }
    .chat-cabecalho { display: none; }
    .chat {
        height: calc(100dvh - 86px); min-height: 380px;
        margin: 0 -4px; border-radius: 18px;
    }
    .chat-lista-topo { padding: 12px 14px 8px; }
    .chat-lista-marca { display: inline-flex; flex: 1; }
    .chat-lista-rotulo { display: none; }
    .chat-avisos-mini { display: inline-flex; }
    .chat-item { padding: 12px 10px; }
    .chat-avatar { width: 46px; height: 46px; }

    /* Conversa */
    .chat-topo { min-height: 58px; padding: 8px 10px; gap: 8px; }
    .chat-topo .chat-avatar { width: 40px; height: 40px; font-size: 15px; }
    .chat-fixado { margin: 8px 10px 0; padding: 8px 10px; }
    .chat-fixado-txt p { font-size: 13.5px; }
    .chat-msgs { padding: 10px 10px 6px; }
    .chat-balao { max-width: 88%; padding: 7px 10px 5px; }
    .chat-texto { font-size: 15px; }
    .chat-anexo { min-width: 0; max-width: 100%; }
    .chat-audio audio { width: 190px; }

    /* Caixa de escrever: texto + Enviar na primeira linha, botões na segunda. */
    .chat-envio {
        display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px;
        padding: 8px 8px calc(6px + env(safe-area-inset-bottom));
    }
    .chat-envio textarea { order: -2; flex: 1 1 0; min-width: 0; margin: 0; min-height: 44px; font-size: 16px; }
    .chat-envio .chat-enviar { order: -1; width: 46px; height: 44px; }
    .chat-envio .chat-icone-btn {
        flex: 1 1 0; width: auto; height: 38px; border-radius: 10px;
        background: #f6f4ef; color: var(--texto-2);
    }
    .chat-envio .chat-icone-btn .ico { width: 19px; height: 19px; }
    .chat-envio .chat-icone-btn[data-chat-audio] { background: #fff6dd; color: var(--ouro-escuro); }

    /* Quadrinhos (emoji, textos, pedido/cliente) na largura toda, acima da caixa */
    .chat-pop { left: 8px; right: 8px; width: auto; bottom: 108px; max-height: 46vh; border-radius: 16px; }
    .chat-emojis { grid-template-columns: repeat(8, 1fr); }
    .chat-emojis button { font-size: 24px; padding: 8px 0; }
    .chat-anexar { width: auto; }
    .chat-previa { left: 8px; bottom: 112px; }

    /* Gravando */
    .chat-gravando { padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); gap: 8px; }
    .chat-gravando .btn { height: 44px; flex: 1 1 0; padding: 0 10px; }
    .chat-gravando b { min-width: 40px; }
}

/* WM Chat: tela de boas-vindas (nenhuma conversa aberta), como no WhatsApp Web. */
.chat-vazio { gap: 10px; }
.chat-vazio-selo { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 26px; background: var(--grad-ouro); color: #1a1300; box-shadow: 0 18px 36px -20px rgb(193 145 1 / .8); }
.chat-vazio .chat-vazio-selo .ico { width: 42px; height: 42px; color: #1a1300; }
.chat-vazio h2 { margin: 6px 0 0; font-family: var(--fonte-titulo); font-size: 26px; font-weight: 700; color: var(--texto); }
.chat-vazio p { margin: 0; font-size: 15px; color: var(--texto-2); }
.chat-vazio small { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-size: 12.5px; color: var(--texto-3); }
.chat-vazio small .ico { width: 13px; height: 13px; color: var(--texto-3); }

/* WM Chat no celular: a caixa de escrever e o Enviar ocupam a primeira linha inteira,
   o que empurra os botões para a linha de baixo (antes a caixa ficava espremida). */
@media (max-width: 760px) {
    .chat-envio textarea { flex: 1 1 calc(100% - 60px); }
    .chat-envio .chat-icone-btn { min-width: 0; }
}


/* ============================================================
   WM CHAT NO CELULAR: os 5 botões na segunda linha (2026-09-14)
   Com largura base 0 os botões de emoji e textos cabiam "espremidos" na
   primeira linha e sumiam. Com base de 40px eles descem juntos.
   ============================================================ */
@media (max-width: 760px) {
    .chat-envio .chat-icone-btn { flex: 1 1 40px; }
}

/* ============================================================
   PENDÊNCIAS: QUEM VÊ (2026-09-14)
   ============================================================ */
.pend-para-titulo { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--texto-2); }
.pend-para-opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.pend-para-chip { position: relative; margin: 0; cursor: pointer; }
.pend-para-chip input { position: absolute; opacity: 0; pointer-events: none; }
.pend-para-chip span {
    display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px;
    border: 1px solid var(--borda); border-radius: 999px; background: #fff;
    font-size: 13.5px; font-weight: 600; color: var(--texto-2);
}
.pend-para-chip span .ico { width: 15px; height: 15px; }
.pend-para-chip input:checked + span { background: #fff6dd; border-color: var(--ouro); color: var(--ouro-escuro); }
.pend-para-chip input:focus-visible + span { box-shadow: 0 0 0 3px rgb(193 145 1 / .25); }
.pend-para-dica { display: block; margin-top: 8px; font-size: 12px; color: var(--texto-3); }

.pend-para-linha { margin: -4px 0 12px; font-size: 12.5px; color: var(--texto-3); }
p.pend-para-linha, .pend-para-linha summary { display: flex; align-items: center; gap: 6px; }
.pend-para-linha .ico { width: 14px; height: 14px; }
.pend-para-linha b { color: var(--texto-2); font-weight: 700; }
.pend-para-linha summary { cursor: pointer; list-style: none; width: fit-content; }
.pend-para-linha summary::-webkit-details-marker { display: none; }
.pend-para-linha summary span { color: var(--ouro-escuro); font-weight: 600; text-decoration: underline; }
.pend-para-linha[open] summary span { display: none; }
.pend-para-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.pend-para-form .btn { height: 36px; padding: 0 14px; font-size: 13px; }


/* ============================================================
   VISÃO GERAL: MÊS ATUAL (2026-09-14)
   ============================================================ */
.painel-mes { margin-bottom: 18px; }
.painel-mes h2 { display: flex; align-items: center; gap: 8px; }
.painel-mes h2 .ico { width: 18px; height: 18px; color: var(--ouro-escuro); }
.painel-mes-comp { align-self: flex-start; font-size: 12.5px; font-weight: 700; padding: 6px 12px; border-radius: 999px; background: #f4f1ea; color: var(--texto-2); }
.painel-mes-comp.sobe { background: #dcfce7; color: #15803d; }
.painel-mes-comp.desce { background: #fdecec; color: #b91c1c; }
.painel-mes-grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 6px; }
.painel-mes-item { display: grid; gap: 2px; align-content: start; padding: 14px 16px; border-radius: 14px; background: #faf8f3; border: 1px solid var(--borda); min-width: 0; }
.painel-mes-item small { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-3); }
.painel-mes-item strong { font-family: var(--fonte-titulo); font-size: 22px; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.painel-mes-item span { font-size: 12.5px; color: var(--texto-3); }
.painel-mes-item span b { color: var(--texto-2); }
.painel-mes-item--grande { grid-column: span 2; background: linear-gradient(160deg, #fffdf7, #f8efdc); border-color: rgb(193 145 1 / .3); }
.painel-mes-item--grande strong { font-size: 32px; color: #4a3a05; }
.painel-mes-item--pago strong { color: #15803d; }
.painel-mes-item--aguarda strong { color: #a16207; }
.painel-mes-item--canc strong { color: #b91c1c; }

/* Widget "Vendas de hoje ao vivo" (a tela completa é a aba Vendas ao vivo) */
.painel-aovivo-mini {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 18px;
    margin-bottom: 18px; padding: 14px 20px; border-radius: 16px;
    background: linear-gradient(135deg, #2b2d31, #1f2023); color: #efeadf; text-decoration: none;
    box-shadow: 0 14px 30px -24px rgb(0 0 0 / .6);
}
.painel-aovivo-mini:hover { color: #efeadf; }
.painel-aovivo-mini:hover .painel-aovivo-mini-ir { background: var(--grad-ouro); color: #1a1300; }
.painel-aovivo-mini-rot { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #b9b3a6; white-space: nowrap; }
.painel-aovivo-mini-rot em { font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; color: #15803d; background: #dcfce7; padding: 2px 8px; border-radius: 999px; }
.painel-aovivo-mini-num { display: flex; align-items: baseline; gap: 12px; min-width: 0; flex-wrap: wrap; }
.painel-aovivo-mini-num strong { font-family: var(--fonte-titulo); font-size: 28px; color: var(--ouro-brilho); white-space: nowrap; }
.painel-aovivo-mini-num small { font-size: 13px; color: #b9b3a6; }
.painel-aovivo-mini-num small b { color: #efeadf; }
.painel-aovivo-mini-ult { font-size: 13px; color: #d6d0c3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; }
.painel-aovivo-mini-ir { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 999px; background: rgb(255 255 255 / .08); font-size: 13px; font-weight: 700; white-space: nowrap; transition: background .2s; }
.painel-aovivo-mini-ir .ico { width: 15px; height: 15px; }
.painel-aovivo-mini.pulsou { animation: aovivo-mini-pulso 1.6s ease-out; }
@keyframes aovivo-mini-pulso { from { box-shadow: 0 0 0 0 rgb(240 195 75 / .7); } to { box-shadow: 0 0 0 18px rgb(240 195 75 / 0); } }

/* ============================================================
   ABA VENDAS AO VIVO (2026-09-14)
   ============================================================ */
.aovivo-pagina { display: grid; gap: 14px; }
.aovivo-cab { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.aovivo-cab h1 { margin: 0; font-size: 28px; }
.aovivo-cab-dir { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.aovivo-relogio { font-family: var(--fonte-titulo); font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; padding: 0 6px; }
.aovivo-botao { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; font-size: 13.5px; }
.aovivo-botao .ico { width: 16px; height: 16px; }
.aovivo-som-luz { width: 9px; height: 9px; border-radius: 50%; background: #c9c3b6; flex: none; }
.aovivo-botao[aria-pressed="true"] { background: #dcfce7; border-color: #86efac; color: #15803d; }
.aovivo-botao[aria-pressed="true"] .aovivo-som-luz { background: #22c55e; box-shadow: 0 0 0 3px rgb(34 197 94 / .25); }
.aovivo-botao[hidden] { display: none; }
.aovivo-pagina .aovivo-numeros { margin: 0; }
.aovivo-colunas { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.aovivo-colunas .conta-bloco { padding: 18px; margin: 0; }
.aovivo-lado { display: grid; gap: 14px; }
.aovivo-bloco-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.aovivo-bloco-topo h2 { margin: 0; font-size: 17px; }
.aovivo-bloco-topo span { font-size: 12.5px; color: var(--texto-3); }
.aovivo-pagina .aovivo-lista { max-height: none; }
.aovivo-pagina .aovivo-item.novo { animation: aovivo-entra .5s ease-out, aovivo-novo 8s ease-out; }
@keyframes aovivo-entra { from { transform: translateY(-14px); opacity: 0; } to { transform: none; opacity: 1; } }
.aovivo-item.mudou { animation: aovivo-mudou 4s ease-out; }
@keyframes aovivo-mudou { from { background: #dcfce7; border-color: #86efac; } to { background: #fff; border-color: var(--borda); } }
.sem-conexao [data-av-estado]::after { content: " · sem conexão, tentando de novo…"; color: var(--vermelho); font-weight: 700; }

.aovivo-horas { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 3px; height: 150px; padding-bottom: 18px; }
.aovivo-hora-barra { position: relative; display: flex; align-items: flex-end; height: 100%; }
.aovivo-hora-barra i { display: block; width: 100%; border-radius: 4px 4px 1px 1px; background: linear-gradient(180deg, #e8b923, #b8860b); }
.aovivo-hora-barra::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: #eee9dd; }
.aovivo-hora-barra.agora::before { background: #22c55e; height: 3px; }
.aovivo-hora-barra small { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 4px; font-size: 10px; color: var(--texto-3); white-space: nowrap; }

.aovivo-top { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: top; }
.aovivo-top li { counter-increment: top; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: #faf8f3; font-size: 13.5px; }
.aovivo-top li::before { content: counter(top); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #313337; color: #f3d27a; font-size: 12px; font-weight: 700; }
.aovivo-top li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aovivo-top li b { font-family: var(--fonte-titulo); font-size: 15px; }
.aovivo-top li.aovivo-top-vazio { display: block; padding: 4px 0; background: none; color: var(--texto-3); }
.aovivo-top li.aovivo-top-vazio::before { display: none; }

.aovivo-aviso {
    position: fixed; z-index: 80; top: 18px; left: 50%; transform: translateX(-50%);
    display: grid; gap: 2px; min-width: 260px; max-width: calc(100vw - 32px); padding: 14px 24px;
    border-radius: 16px; border: 1px solid rgb(240 195 75 / .5); background: #1f2023; color: #efeadf;
    box-shadow: 0 20px 40px -18px rgb(0 0 0 / .6); text-align: center;
}
.aovivo-aviso[hidden] { display: none; }
.aovivo-aviso b { font-family: var(--fonte-titulo); font-size: 18px; color: var(--ouro-brilho); }
.aovivo-aviso span { font-size: 14px; }
.aovivo-aviso.entra { animation: aovivo-aviso-entra .45s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes aovivo-aviso-entra { from { opacity: 0; transform: translate(-50%, -20px) scale(.96); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }

.aovivo-pagina:fullscreen { overflow: auto; padding: 28px 36px; background: #f6f4ef; align-content: start; }
.aovivo-pagina:fullscreen .aovivo-num strong { font-size: 38px; }
.aovivo-pagina:fullscreen .aovivo-num--grande strong { font-size: 60px; }
.aovivo-pagina:fullscreen .aovivo-item { padding: 14px 18px; }
.aovivo-pagina:fullscreen .aovivo-valor { font-size: 20px; }

@media (max-width: 1100px) {
    .painel-aovivo-mini { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; }
    .painel-aovivo-mini-rot { grid-column: 1 / -1; }
    .painel-aovivo-mini-ult { grid-column: 1 / -1; grid-row: 3; max-width: none; }
    .painel-aovivo-mini-ir { grid-column: 2; grid-row: 2; }
}
@media (max-width: 960px) {
    .aovivo-colunas { grid-template-columns: minmax(0, 1fr); }
    .painel-mes-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .painel-mes-item { padding: 12px 14px; }
    .painel-mes-item strong { font-size: 19px; }
    .painel-mes-item--grande strong { font-size: 28px; }
    .painel-mes-comp { align-self: auto; }
    .painel-aovivo-mini { padding: 14px 16px; }
    .painel-aovivo-mini-num strong { font-size: 24px; }
    .painel-aovivo-mini-ir { height: 34px; padding: 0 12px; font-size: 12.5px; }
    .aovivo-cab h1 { font-size: 22px; }
    .aovivo-cab-dir { width: 100%; }
    .aovivo-relogio { font-size: 20px; margin-right: auto; }
    .aovivo-botao[data-av-tela] { display: none; }
    .aovivo-horas { height: 120px; }
}

/* Visão geral no celular: valores do mês cabem inteiros, e as abas do gráfico descem
   para baixo do título (antes espremiam o "Movimento diário"). */
@media (max-width: 760px) {
    .painel-mes-item strong { font-size: clamp(15px, 4.3vw, 19px); }
    .painel-mes-item--grande strong { font-size: 26px; }
    .painel-grafico .painel-bloco-topo { flex-direction: column; align-items: stretch; gap: 10px; }
    .painel-grafico .painel-abas { align-self: flex-start; }
}
@media (max-width: 760px) {
    .painel-mes .painel-bloco-topo { flex-direction: column; align-items: stretch; gap: 10px; }
    .painel-mes-comp { align-self: flex-start; }
}


/* Produtos: estoque do Kit Blend é calculado pelas ampolas (não tem campo para editar). */
.estoque-kit { display: inline-flex; align-items: baseline; gap: 4px; font-size: 12.5px; color: var(--texto-3); white-space: nowrap; }
.estoque-kit b { font-size: 15px; color: var(--texto); }

/* ============================================================
   ABA FRETE: CONTAS LADO A LADO, CADA UMA COM A SUA LOJA YAMPI (2026-09-14)
   ============================================================ */
.contas-frenet { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 14px; }
.contas-frenet .conta-frenet { margin-bottom: 0; display: flex; flex-direction: column; }
.contas-frenet .campo-linha { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.conta-frenet-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.conta-frenet-num { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ouro-escuro); }
.conta-yampi { margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--borda); }
.conta-yampi-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.conta-yampi-topo strong { font-size: 14px; }
.selo-yampi { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.selo-yampi--sim { background: #e8f6ee; color: #14683a; }
.selo-yampi--nao { background: #f1efe9; color: var(--texto-3); }
.conta-yampi .dica { display: block; margin-bottom: 12px; }
.yampi-botoes { display: flex; flex-wrap: wrap; gap: 8px; }
.yampi-botoes .btn { flex: 1 1 auto; }
.yampi-resultado { border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; font-size: 14px; line-height: 1.5; }
.yampi-resultado--ok { background: #e8f6ee; color: #14683a; }
.yampi-resultado--erro { background: #fdecec; color: #a51f1f; }
.yampi-resultado ol, .yampi-resultado ul { margin: 6px 0 0 18px; padding: 0; }
.yampi-resultado code { background: rgb(0 0 0 / .06); padding: 1px 6px; border-radius: 6px; }
@media (max-width: 720px) {
    .contas-frenet .campo-linha { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   ABA ETIQUETAS: PEDIDOS PAGOS, CONTA DA FRENET E ENVIO PARA A YAMPI (2026-09-14)
   ============================================================ */
.etq-contas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 10px; margin-bottom: 16px; }
.etq-conta { border: 1px solid var(--borda); border-radius: 14px; padding: 12px 14px; background: #fff; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; }
.etq-conta strong { font-size: 14px; }
.etq-conta small { grid-column: 1; font-size: 13px; color: var(--texto-3); }
.etq-conta small a { text-decoration: underline; color: var(--ouro-escuro); }
.etq-conta b { grid-column: 2; grid-row: 1 / span 2; font-size: 24px; line-height: 1; }
.etq-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.etq-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--borda); background: #fff; font-size: 14px; font-weight: 600; color: var(--texto-2); }
.etq-chip small { font-weight: 700; color: var(--texto-3); }
.etq-chip:hover { border-color: var(--ouro); }
.etq-chip.ativo { background: var(--preto); border-color: var(--preto); color: #fff; }
.etq-chip.ativo small { color: var(--ouro); }
.etq-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0 12px; }
.etq-barra .admin-data { margin: 0; }
.etq-pedido b, .etq-destino strong, .etq-cliente strong { display: block; font-size: 15px; }
.etq-pedido small, .etq-destino small, .etq-cliente small { display: block; font-size: 13px; color: var(--texto-3); }
.etq-uf { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 6px; background: var(--preto); color: var(--ouro); font-size: 12px; font-weight: 800; letter-spacing: .04em; vertical-align: 2px; }
.etq-tabela select { height: 42px; width: 100%; min-width: 180px; border: 1px solid var(--borda); border-radius: 10px; padding: 0 10px; font-size: 14px; background: #fff; }
.etq-dica { display: block; margin-top: 4px; font-size: 12px; color: var(--texto-3); }
.etq-dica--salvo { color: #14683a; font-weight: 600; }
.etq-dica--alerta { color: #a51f1f; font-weight: 600; }
.etq-enviado { display: inline-flex; flex-direction: column; gap: 1px; font-size: 13px; font-weight: 700; color: #14683a; }
.etq-enviado small { font-weight: 400; color: var(--texto-3); }
.etq-tabela .col-check input { width: 20px; height: 20px; accent-color: var(--ouro-escuro); }
.etq-tabela td.etq-acao { white-space: nowrap; }
@media (max-width: 720px) {
    .etq-tabela select { min-width: 0; height: 48px; font-size: 16px; }
    .etq-barra .btn { width: 100%; }
    .etq-tabela td.etq-acao { white-space: normal; }
    .etq-tabela td.etq-acao .btn { width: 100%; }
}
/* Etiquetas: complemento acima do limite (Correios 30, transportadora 100), corrigido na própria linha. */
.etq-complemento { margin-top: 8px; padding: 10px; border-radius: 10px; background: #fdecec; }
.etq-complemento label { display: block; margin-bottom: 6px; font-size: 13px; color: #a51f1f; }
.etq-complemento label .ico { width: 15px; height: 15px; vertical-align: -3px; }
.etq-complemento-linha { display: flex; gap: 6px; }
.etq-complemento-linha input { flex: 1 1 0; min-width: 0; height: 42px; border: 1px solid #e3a3a3; border-radius: 10px; padding: 0 10px; font-size: 14px; background: #fff; }
@media (max-width: 720px) {
    .etq-complemento-linha input { height: 48px; font-size: 16px; }
}
/* Etiquetas: aviso de pedido com muitos itens (amarelo acima de 3; acima de 5 usa o vermelho). */
.etq-dica--atencao { color: #8a5a00; font-weight: 600; }
.etq-dica .ico { width: 14px; height: 14px; vertical-align: -2px; }
/* Etiquetas: produto da Yampi (001 a 010) ao lado do botão Enviar. */
.etq-enviar { display: flex; align-items: center; gap: 6px; }
.etq-tabela .etq-enviar select { width: auto; min-width: 104px; }
@media (max-width: 720px) {
    .etq-tabela .etq-enviar select { flex: 0 0 116px; min-width: 0; }
    .etq-tabela td.etq-acao .etq-enviar .btn { flex: 1 1 0; width: auto; }
}
/* Etiquetas: os cartões das contas são o filtro por conta. */
a.etq-conta { color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
a.etq-conta:hover { border-color: var(--ouro); }
a.etq-conta.ativo { border-color: var(--ouro-escuro); background: #fffaf0; box-shadow: 0 0 0 2px rgb(193 145 1 / .25); }
.etq-filtro-aviso { margin: -6px 0 12px; font-size: 14px; color: var(--texto-2); }
.etq-filtro-aviso a { color: var(--ouro-escuro); text-decoration: underline; }
/* Etiquetas: quantidade (1x a 10x) entre o produto e o botão Enviar. */
.etq-tabela .etq-enviar select[data-etq-qtd] { min-width: 72px; }
@media (max-width: 720px) {
    .etq-enviar { flex-wrap: wrap; }
    .etq-tabela .etq-enviar select[data-etq-qtd] { flex: 0 0 84px; }
}
/* Etiquetas: custo do pedido (referência do dono) e total declarado ao lado da quantidade. */
.etq-pedido small.etq-custo { margin-top: 2px; font-weight: 600; color: var(--texto-2); }
.etq-pedido small.etq-custo b { color: var(--texto); }
.etq-declarado { display: block; margin-top: 6px; font-size: 13px; color: var(--texto-2); }
.etq-declarado b { color: var(--texto); }
/* Etiquetas: peso da caixa (1 a 5 kg) depois da quantidade. */
.etq-tabela .etq-enviar select[data-etq-peso] { min-width: 80px; }
@media (max-width: 720px) {
    .etq-tabela .etq-enviar select[data-etq-peso] { flex: 0 0 92px; }
}

/* ============================================================
   ABA ETIQUETAS: LISTA EM CARTÕES (2026-09-14)
   Um cartão por pedido: pedido e cliente | destino | escolhas e envio. Substitui a tabela,
   que não cabia (a coluna do pedido espremia e o Enviar saía cortado).
   ============================================================ */
.etq-barra { background: #fff; border: 1px solid var(--borda); border-radius: 14px; padding: 10px 14px; }
.etq-todos { font-weight: 600; white-space: nowrap; }
.etq-barra-info { flex: 1 1 auto; font-size: 14px; color: var(--texto-3); }
.etq-lista { display: flex; flex-direction: column; gap: 12px; }
.etq-card { display: grid; grid-template-columns: 24px minmax(0, 1fr) minmax(0, 1.1fr) minmax(300px, 1.15fr); gap: 20px; align-items: start; padding: 16px 18px; background: #fff; border: 1px solid var(--borda); border-radius: 16px; }
.etq-card--enviado { background: #f5fbf7; border-color: #cfe9da; }
.etq-card--alerta { border-color: #efc0c0; }
.etq-card-marca input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ouro-escuro); }
.etq-card-pedido, .etq-card-destino, .etq-card-acoes { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.etq-card small { display: block; font-size: 13px; line-height: 1.45; color: var(--texto-3); overflow-wrap: anywhere; }
.etq-card-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.etq-num { font-size: 16px; }
.etq-frete { padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.etq-frete--sedex, .etq-frete--pac { background: #fff3d1; color: #7a5200; }
.etq-frete--transportadora { background: #e5eeff; color: #1d4a9c; }
.etq-cliente { margin-top: 2px; font-size: 15px; }
.etq-card small.etq-custo { font-weight: 600; color: var(--texto-2); }
.etq-card small.etq-custo b { color: var(--texto); }
.etq-card small.etq-custo span { font-weight: 400; color: var(--texto-3); cursor: help; }
.etq-card .etq-aviso { display: flex; align-items: center; gap: 5px; font-weight: 600; }
.etq-card .etq-aviso .ico { flex: 0 0 auto; width: 14px; height: 14px; }
.etq-card .etq-aviso--atencao { color: #8a5a00; }
.etq-card .etq-aviso--muitos { color: #a51f1f; }
.etq-cidade { font-size: 16px; }
.etq-card .etq-uf { margin-left: 6px; }
.etq-campo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.etq-campo > span { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-3); }
.etq-card select { width: 100%; min-width: 0; height: 40px; padding: 0 8px; border: 1px solid var(--borda); border-radius: 10px; background: #fff; font-size: 14px; }
.etq-escolhas { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 4px; }
.etq-card .etq-enviar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.etq-card .etq-declarado { margin: 0; font-size: 13px; color: var(--texto-2); }
.etq-card .etq-enviar .btn { min-height: 42px; padding: 0 20px; }
.etq-card .etq-dica { margin-top: 0; }
.etq-enviado { display: flex; flex-direction: column; gap: 2px; }
.etq-enviado-titulo { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; color: #14683a; }
.etq-enviado-titulo .ico { width: 18px; height: 18px; }
@media (max-width: 1180px) {
    .etq-card { grid-template-columns: 24px minmax(0, 1fr) minmax(0, 1fr); }
    .etq-card-acoes { grid-column: 2 / -1; padding-top: 12px; border-top: 1px dashed var(--borda); }
    .etq-escolhas { grid-template-columns: repeat(3, minmax(0, 150px)); }
}
@media (max-width: 720px) {
    .etq-barra { flex-wrap: wrap; }
    .etq-barra .btn { width: 100%; }
    .etq-card { grid-template-columns: 22px minmax(0, 1fr); gap: 10px 12px; padding: 14px; }
    .etq-card-destino, .etq-card-acoes { grid-column: 2; }
    .etq-card-destino { padding-top: 10px; border-top: 1px dashed var(--borda); }
    .etq-escolhas { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); }
    .etq-card select { height: 48px; font-size: 16px; }
    .etq-card .etq-enviar .btn { flex: 1 1 100%; min-height: 48px; }
}
/* Etiquetas: seletor de transportadora (Optimus ou J&T) nos pedidos de transportadora. */
.etq-campo-transp { margin-top: 6px; }

/* Etiquetas: abas "A enviar" e "Já na Yampi" (2026-09-14). */
.etq-abas { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.etq-aba { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--borda); border-radius: 12px; background: #fff; font-weight: 600; color: var(--texto-2); text-decoration: none; }
.etq-aba .ico { width: 16px; height: 16px; }
.etq-aba b { min-width: 24px; padding: 1px 8px; border-radius: 999px; background: #eceae4; font-size: 12px; text-align: center; color: var(--texto); }
.etq-aba:hover { border-color: var(--ouro); }
.etq-aba.ativo { background: var(--preto); border-color: var(--preto); color: #fff; }
.etq-aba.ativo b { background: var(--ouro); color: var(--preto); }
@media (max-width: 720px) {
    .etq-aba { flex: 1 1 0; justify-content: center; padding: 0 10px; }
}

/* ============================================================
   Aba Grupos do WhatsApp (2026-09-14)
   Uma linha por grupo: número, nome, link, situação e os botões de
   subir/descer/tirar. O número é contador do CSS, então se ajusta sozinho
   quando a linha muda de lugar. No celular a linha vira cartão.
   ============================================================ */
.grp-resumo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.grp-chip { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 12px; border-radius: 999px; background: #eceae4; font-size: 13px; font-weight: 600; color: var(--texto-2); }
.grp-chip--livre { background: #dcf5e4; color: #11803f; }
.grp-chip--cheio { background: #f3e2e2; color: #9b2c2c; }

.grp-lista { display: grid; gap: 10px; margin: 4px 0 10px; counter-reset: grp; }
.grp-linha {
    display: grid; grid-template-columns: 38px minmax(0, 1fr) minmax(0, 1.6fr) 140px auto; align-items: end; gap: 10px;
    padding: 12px; border: 1px solid var(--borda); border-radius: 14px; background: #fff;
}
.grp-linha.cheio { background: #f6f5f2; }
.grp-linha.cheio .grp-num { background: #a8a49b; color: #fff; }
.grp-num {
    width: 38px; height: 44px; display: grid; place-items: center; border-radius: 10px;
    background: var(--preto); color: var(--ouro); font-weight: 700;
}
.grp-num::before { counter-increment: grp; content: counter(grp); }
.grp-campo { display: grid; gap: 4px; min-width: 0; }
.grp-campo > span { font-size: 12px; font-weight: 600; color: var(--texto-2); }
.grp-campo input, .grp-campo select {
    width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--borda); border-radius: 10px; background: #fff; font-size: 14px;
}
.grp-botoes { display: flex; gap: 6px; }
.grp-botoes button {
    width: 42px; height: 44px; display: grid; place-items: center; border: 1px solid var(--borda); border-radius: 10px;
    background: #fff; color: var(--texto-2); font-size: 13px; cursor: pointer;
}
.grp-botoes button:hover { border-color: var(--ouro); color: var(--texto); }
.grp-botoes .grp-tirar:hover { border-color: var(--vermelho); color: var(--vermelho); }
.grp-aviso { grid-column: 2 / -1; margin: 0; font-size: 12.5px; color: var(--vermelho); }

@media (max-width: 720px) {
    .grp-linha { grid-template-columns: 38px minmax(0, 1fr); }
    .grp-campo-link, .grp-campo-sit, .grp-aviso { grid-column: 1 / -1; }
    .grp-botoes { grid-column: 1 / -1; justify-content: flex-end; }
    .grp-campo input, .grp-campo select { font-size: 16px; }
}

/* Aba Grupos do WhatsApp: campo do aviso do fim da janela. */
.grp-aviso-campo { margin-top: 18px; }
.grp-aviso-campo textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 10px; background: #fff; font: inherit; font-size: 14px; line-height: 1.45; resize: vertical; }
@media (max-width: 720px) { .grp-aviso-campo textarea { font-size: 16px; } }

/* ============================================================
   Aba Avaliações (2026-09-14)
   Formulário (com o quadro "Antes de publicar": autorização, etiqueta
   escondida e regra da Anvisa) e, embaixo, os cartões das avaliações
   com Editar / Esconder / Excluir.
   ============================================================ */
.aval-adm-resumo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.aval-adm-form h2 { margin: 0 0 12px; font-size: 18px; }
.aval-adm-cuidado {
    display: flex; gap: 12px; margin-bottom: 16px; padding: 12px 14px; border-radius: 14px;
    background: #fff8e6; border: 1px solid rgb(193 145 1 / .3); font-size: 13.5px; color: #5c4a1f;
}
.aval-adm-cuidado > .ico { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--ouro-escuro); }
.aval-adm-cuidado ul { display: grid; gap: 2px; margin: 4px 0 0; padding-left: 18px; }

.aval-adm-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.aval-adm-grade .cheio { grid-column: 1 / -1; }
.aval-adm-campo { display: grid; gap: 5px; min-width: 0; }
.aval-adm-campo > span { font-size: 13px; font-weight: 600; color: var(--texto-2); }
.aval-adm-campo input[type=text], .aval-adm-campo input[type=date], .aval-adm-campo select, .aval-adm-campo textarea {
    width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--borda); border-radius: 10px;
    background: #fff; font: inherit; font-size: 14px;
}
.aval-adm-campo textarea { padding: 10px 12px; line-height: 1.5; resize: vertical; }
.aval-adm-conta { justify-self: end; font-size: 12px; color: var(--texto-3); }

.aval-adm-estrelas { display: flex; flex-wrap: wrap; gap: 6px; }
.aval-adm-estrelas label { position: relative; cursor: pointer; }
.aval-adm-estrelas input { position: absolute; opacity: 0; pointer-events: none; }
.aval-adm-estrelas span {
    display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 12px;
    border: 1.5px solid var(--borda); border-radius: 10px; background: #fff; font-weight: 700;
}
.aval-adm-estrelas span svg { width: 16px; height: 16px; fill: #e0b12e; }
.aval-adm-estrelas input:checked + span { border-color: var(--ouro); background: #fdf3d6; }
.aval-adm-estrelas input:focus-visible + span { outline: 2px solid var(--ouro); outline-offset: 2px; }

.aval-adm-fotos { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 6px; }
.aval-adm-foto { width: 96px; }
.aval-adm-foto img { display: block; width: 96px; height: 96px; object-fit: cover; border-radius: 12px; border: 1px solid var(--borda); }
.aval-adm-foto label { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 12.5px; color: var(--vermelho); }
.aval-adm-previa { display: flex; flex-wrap: wrap; gap: 8px; }
.aval-adm-previa img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; }

.aval-adm-checks { display: grid; gap: 8px; margin: 14px 0 4px; }
.aval-adm-checks label { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; }
.aval-adm-checks input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--ouro-escuro); }

.aval-adm-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; margin-top: 16px; }
.aval-adm-card { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; padding: 12px; border-radius: 16px; background: #fff; border: 1px solid var(--borda); }
.aval-adm-card.escondida { background: #f6f5f2; }
.aval-adm-card.escondida .aval-adm-thumb { filter: grayscale(1); opacity: .7; }
.aval-adm-thumb { position: relative; width: 84px; height: 84px; display: grid; place-items: center; overflow: hidden; border-radius: 12px; background: #0b0b0c; color: var(--ouro); }
.aval-adm-thumb img { width: 100%; height: 100%; object-fit: cover; }
.aval-adm-thumb b { position: absolute; right: 4px; bottom: 4px; padding: 1px 6px; border-radius: 999px; background: rgb(0 0 0 / .7); color: #fff; font-size: 11px; }
.aval-adm-info { display: grid; align-content: start; gap: 4px; min-width: 0; }
.aval-adm-info strong { font-size: 14.5px; }
.aval-adm-info small { font-size: 12.5px; color: var(--texto-3); }
.aval-adm-info p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--texto-2); }
.aval-adm-info .aval-estrelas svg { width: 14px; height: 14px; }
.aval-adm-acoes { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 10px; border-top: 1px solid var(--borda); }
.aval-adm-acoes form { margin: 0; }
.aval-adm-acoes .btn { height: 38px; padding: 0 12px; font-size: 13px; }
.aval-adm-acoes .aval-adm-excluir { color: var(--vermelho); }
.aval-adm-status { margin-left: auto; padding: 3px 10px; border-radius: 999px; background: #dcf5e4; color: #11803f; font-size: 12px; font-weight: 700; }
.escondida .aval-adm-status { background: #eceae4; color: var(--texto-2); }

@media (max-width: 720px) {
    .aval-adm-grade { grid-template-columns: 1fr; }
    .aval-adm-campo input, .aval-adm-campo select, .aval-adm-campo textarea { font-size: 16px; }
}

/* ============================================================
   Envio no mesmo dia: alerta do corte das 10h (2026-09-14)
   Pedido do dono: ver na Visão geral e na aba Pedidos quais pedidos pagos
   precisam sair hoje. Quadro escuro na Visão geral (vermelho se houver
   atrasado), faixa na aba Pedidos e uma etiqueta em cada pedido da lista.
   ============================================================ */
.desp-painel {
    margin: 0 0 18px; padding: 16px 18px; border-radius: 18px; color: #fff;
    background: radial-gradient(60% 140% at 0% 0%, rgb(224 177 46 / .14), transparent 60%), linear-gradient(135deg, #171717, #0b0b0c);
    border: 1px solid rgb(224 177 46 / .35); box-shadow: 0 18px 36px -26px rgb(0 0 0 / .6);
}
.desp-painel.desp--atraso {
    border-color: rgb(239 68 68 / .6);
    background: radial-gradient(60% 140% at 0% 0%, rgb(239 68 68 / .16), transparent 60%), linear-gradient(135deg, #171717, #0b0b0c);
}
.desp-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.desp-ico { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--grad-ouro); color: #1a1405; }
.desp-ico .ico { width: 22px; height: 22px; }
.desp--atraso .desp-ico { background: #ef4444; color: #fff; }
.desp-topo-txt { flex: 1; min-width: 220px; display: grid; gap: 2px; }
.desp-topo-txt strong { font-size: 16px; }
.desp-topo-txt span { font-size: 13.5px; line-height: 1.45; color: #cfc8b8; }
.desp-relogio { color: var(--ouro-brilho); }

.desp-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-top: 14px; }
.desp-num { display: grid; gap: 2px; padding: 10px 14px; border-radius: 14px; background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .08); }
.desp-num b { font-family: var(--fonte-titulo); font-size: 26px; line-height: 1.1; }
.desp-num span { font-size: 12.5px; color: #b3aea2; }
.desp-num--hoje { background: rgb(224 177 46 / .1); border-color: rgb(224 177 46 / .5); }
.desp-num--hoje b { color: var(--ouro-brilho); }
.desp-num--atraso { background: rgb(239 68 68 / .12); border-color: rgb(239 68 68 / .55); }
.desp-num--atraso b { color: #fca5a5; }

.desp-lista { display: grid; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.desp-lista a {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 12px; border-radius: 12px;
    background: rgb(255 255 255 / .04); color: #f1eee8; font-size: 13.5px; text-decoration: none;
}
.desp-lista a:hover { background: rgb(255 255 255 / .09); }
.desp-lista small { color: #a39e94; }
.desp-lista .desp-chip { margin: 0 0 0 auto; }
.desp-mais { margin: 8px 0 0 12px; font-size: 13px; color: #a39e94; }

.desp-chip {
    display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding: 2px 8px; border-radius: 999px;
    font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.desp-chip .ico { width: 12px; height: 12px; }
.desp-chip--hoje { background: #fdf0c8; color: #7a5a00; }
.desp-chip--atrasado { background: #fdecec; color: #a51f1f; }
.desp-chip--depois { background: #eceae4; color: var(--texto-2); }
.desp-lista .desp-chip--hoje { background: rgb(224 177 46 / .18); color: var(--ouro-brilho); }
.desp-lista .desp-chip--atrasado { background: rgb(239 68 68 / .22); color: #fca5a5; }

.desp-faixa {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 14px; padding: 12px 16px;
    border-radius: 14px; background: #fff8e6; border: 1px solid rgb(193 145 1 / .35); color: #5c4a1f; font-size: 14px;
}
.desp-faixa > .ico { width: 20px; height: 20px; flex: none; color: var(--ouro-escuro); }
.desp-faixa > span { flex: 1; min-width: 220px; }
.desp-faixa a { font-weight: 700; color: inherit; text-decoration: underline; }
.desp-faixa.desp--atraso { background: #fdecec; border-color: rgb(165 31 31 / .3); color: #7f1d1d; }
.desp-faixa.desp--atraso > .ico { color: #a51f1f; }

@media (max-width: 720px) {
    .desp-topo .btn { width: 100%; }
    .desp-lista .desp-chip { margin-left: 0; }
}

/* Aba Pop-up (2026-09-14): prévia da imagem ao lado dos ajustes; no celular, um embaixo do outro. */
.popup-adm-grade { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 20px; align-items: start; }
.popup-adm-previa { display: grid; gap: 8px; }
.popup-adm-previa img { display: block; width: 100%; border-radius: 14px; border: 1px solid var(--borda); background: #0b0b0c; }
.popup-adm-previa small { font-size: 12.5px; color: var(--texto-3); }
.popup-adm .aval-adm-campo input[type=number] { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--borda); border-radius: 10px; font: inherit; font-size: 14px; }
.popup-adm .aval-adm-campo input[type=file] { font-size: 14px; }
@media (max-width: 720px) {
    .popup-adm-grade { grid-template-columns: 1fr; }
    .popup-adm-previa img { max-width: 260px; }
    .popup-adm .aval-adm-campo input[type=number] { font-size: 16px; }
}

/* ============================================================
   MEU TRATAMENTO (tratamento.php) — 2026-09-14
   Área do cliente: topo escuro com os números grandes, cartões claros
   (registrar a semana, gráfico, medidas, conquistas) e o histórico em
   linha do tempo. Campos com 16px (iPhone não dá zoom). Imprime limpo.
   ============================================================ */
.trat-pagina { padding-block: 22px 64px; }
.trat-voltar { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; font-size: 14px; font-weight: 600; color: var(--texto-2); }
.trat-voltar .ico { width: 16px; height: 16px; }
.trat-pagina .alerta { margin-bottom: 16px; }

.trat-hero {
    position: relative; overflow: hidden; padding: 28px; border-radius: 28px; color: #fff;
    background: radial-gradient(70% 120% at 100% 0%, rgb(224 177 46 / .22), transparent 60%), linear-gradient(135deg, #1a1a1b, #0b0b0c);
    border: 1px solid rgb(224 177 46 / .3); box-shadow: 0 30px 60px -40px rgb(0 0 0 / .7);
}
.trat-hero .eyebrow { display: inline-flex; align-items: center; gap: 6px; color: var(--ouro-brilho); }
.trat-hero .eyebrow .ico { width: 16px; height: 16px; }
.trat-hero h1 { margin-top: 8px; font-family: var(--fonte-titulo); font-size: clamp(24px, 3.2vw, 36px); line-height: 1.15; max-width: 760px; }
.trat-hero p { margin-top: 8px; font-size: 15.5px; color: #b9b4a9; max-width: 640px; }
.trat-hero-topo { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 14px; }

.trat-chip {
    display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: 999px;
    font-size: 14px; font-weight: 600; background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .14); color: #f1eee8; text-decoration: none;
}
.trat-chip .ico { width: 16px; height: 16px; }
.trat-chip--hora { background: var(--grad-ouro); border-color: transparent; color: #1a1405; box-shadow: 0 10px 24px -10px rgb(224 177 46 / .8); animation: trat-chama 2.6s ease-in-out infinite; }
.trat-chip--hora:hover { color: #1a1405; }
@keyframes trat-chama { 0%, 60%, 100% { transform: none; } 30% { transform: scale(1.04); } }

.trat-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.trat-stat { display: grid; align-content: start; gap: 4px; padding: 16px; border-radius: 18px; background: rgb(255 255 255 / .045); border: 1px solid rgb(255 255 255 / .08); min-width: 0; }
.trat-stat small { font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #a39e94; }
.trat-stat b { font-family: var(--fonte-titulo); font-size: 32px; line-height: 1.1; color: #fff; }
.trat-stat b i { margin-left: 4px; font-style: normal; font-size: 15px; font-weight: 600; color: #b9b4a9; -webkit-text-fill-color: #b9b4a9; }
.trat-stat span { font-size: 13px; line-height: 1.4; color: #b9b4a9; overflow-wrap: anywhere; }
.trat-stat--destaque { background: linear-gradient(160deg, rgb(224 177 46 / .2), rgb(224 177 46 / .04)); border-color: rgb(224 177 46 / .5); }
.trat-stat--destaque b { background: var(--grad-ouro); -webkit-background-clip: text; background-clip: text; color: transparent; }

.trat-meta { margin-top: 18px; }
.trat-meta-barra { height: 12px; overflow: hidden; border-radius: 999px; background: rgb(255 255 255 / .08); }
.trat-meta-barra i { display: block; height: 100%; border-radius: inherit; background: var(--grad-ouro); }
.trat-meta-txt { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: 13px; color: #b9b4a9; }
.trat-meta-txt strong { color: var(--ouro-brilho); text-align: center; }

.trat-grade { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 20px; margin-top: 20px; align-items: start; }
.trat-boas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 20px; margin-top: 20px; align-items: start; }
.trat-card { padding: 20px; border-radius: 22px; background: #fff; border: 1px solid var(--borda); box-shadow: 0 18px 40px -34px rgb(0 0 0 / .35); }
.trat-grade > div > .trat-card + .trat-card { margin-top: 20px; }
.trat-historico-card { margin-top: 20px; }
.trat-card h2 { display: flex; align-items: center; gap: 10px; font-family: var(--fonte-titulo); font-size: 19px; }
.trat-card h2 .ico { width: 22px; height: 22px; color: var(--ouro-escuro); }
.trat-card-sub { margin-top: 4px; font-size: 14px; color: var(--texto-2); }
.trat-contagem { margin-left: auto; padding: 2px 10px; border-radius: 999px; background: #fdf3d6; color: #7a5a00; font-size: 13px; font-family: var(--fonte); }
.trat-card--registrar { border-color: rgb(193 145 1 / .45); background: linear-gradient(180deg, #fffaf0, #fff 45%); }
.trat-card--hora { box-shadow: 0 0 0 3px rgb(224 177 46 / .28), 0 18px 40px -30px rgb(193 145 1 / .6); }

.trat-form { display: grid; gap: 14px; margin-top: 14px; }
.trat-linha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.trat-campo { display: grid; gap: 6px; min-width: 0; }
.trat-campo > span:first-child { font-size: 13.5px; font-weight: 600; color: var(--texto-2); }
.trat-campo em { font-style: normal; font-weight: 400; color: var(--texto-3); }
.trat-campo input, .trat-campo select, .trat-campo textarea {
    width: 100%; min-height: 50px; padding: 0 14px; border: 1px solid var(--borda); border-radius: 12px;
    background: #fff; font: inherit; font-size: 16px; color: var(--texto);
}
.trat-campo textarea { min-height: 70px; padding: 10px 14px; line-height: 1.45; resize: vertical; }
.trat-campo input:focus, .trat-campo select:focus, .trat-campo textarea:focus { outline: none; border-color: var(--ouro); box-shadow: 0 0 0 4px rgb(193 145 1 / .14); }
.trat-sufixo { position: relative; display: block; }
.trat-sufixo input { padding-right: 48px; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.trat-sufixo i { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 14px; font-weight: 600; color: var(--texto-3); pointer-events: none; }
.trat-atalhos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: -4px; }
.trat-atalhos button { min-height: 38px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--borda); background: #fff; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.trat-atalhos button:hover { border-color: var(--ouro); }
.trat-atalhos button[aria-pressed="true"] { background: var(--preto); border-color: var(--preto); color: var(--ouro-brilho); }
.trat-calc { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; font-size: 13px; font-weight: 600; color: var(--ouro-escuro); text-decoration: underline; }
.trat-calc .ico { width: 15px; height: 15px; }
.trat-mais { padding: 10px 14px; border: 1px dashed var(--borda); border-radius: 14px; }
.trat-mais summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--texto-2); }
.trat-mais[open] summary { margin-bottom: 10px; }
.trat-medidas-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.trat-botoes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.trat-botoes .btn { min-height: 50px; }

.trat-grafico svg { display: block; width: 100%; height: auto; margin-top: 12px; }
.trat-vazio { display: grid; justify-items: center; gap: 8px; padding: 28px 12px; text-align: center; color: var(--texto-2); font-size: 14.5px; }
.trat-vazio .ico { width: 34px; height: 34px; color: var(--ouro-escuro); }

.trat-medidas { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.trat-medidas th, .trat-medidas td { padding: 10px 4px; border-bottom: 1px solid var(--borda); text-align: right; }
.trat-medidas th:first-child, .trat-medidas td:first-child { text-align: left; font-weight: 600; }
.trat-medidas th { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--texto-3); }
.trat-diff-desce { color: #15803d; font-weight: 700; }
.trat-diff-sobe { color: #9a5b00; font-weight: 700; }

.trat-conquistas { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; margin-top: 14px; }
.trat-conq { display: grid; justify-items: center; align-content: start; gap: 5px; padding: 14px 8px; border-radius: 16px; border: 1px solid var(--borda); background: #faf8f3; text-align: center; }
.trat-conq-ico { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: #eceae4; color: #a8a49b; }
.trat-conq-ico .ico { width: 21px; height: 21px; }
.trat-conq strong { font-size: 13px; line-height: 1.25; color: var(--texto-2); }
.trat-conq small { font-size: 11.5px; line-height: 1.35; color: var(--texto-3); }
.trat-conq.feita { background: linear-gradient(180deg, #fff8e6, #fff); border-color: rgb(193 145 1 / .45); }
.trat-conq.feita strong { color: var(--texto); }
.trat-conq.feita .trat-conq-ico { background: var(--grad-ouro); color: #1a1405; box-shadow: 0 8px 18px -8px rgb(224 177 46 / .8); }

.trat-historico { display: grid; margin: 16px 0 0; padding: 0; list-style: none; }
.trat-reg { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; padding-bottom: 14px; }
.trat-reg::before { content: ""; position: absolute; left: 23px; top: 50px; bottom: 2px; width: 2px; background: linear-gradient(#e3dccb, #f1ece0); }
.trat-reg:last-child::before { display: none; }
.trat-reg-num {
    width: 48px; height: 48px; display: grid; place-items: center; align-content: center; border-radius: 14px;
    background: var(--preto); color: var(--ouro-brilho); font-family: var(--fonte-titulo); font-size: 17px; font-weight: 800; line-height: 1;
}
.trat-reg-num small { font-size: 9px; font-weight: 700; letter-spacing: .08em; color: #a39e94; }
.trat-reg-num .ico { width: 22px; height: 22px; }
.trat-reg--inicio .trat-reg-num { background: var(--grad-ouro); color: #1a1405; }
.trat-reg-corpo { display: grid; gap: 8px; min-width: 0; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--borda); background: #fff; }
.trat-reg-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.trat-reg-topo strong { margin-right: 6px; font-family: var(--fonte-titulo); font-size: 20px; }
.trat-reg-data { font-size: 13px; color: var(--texto-3); }
.trat-delta { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 700; vertical-align: 3px; }
.trat-delta--desce { background: #dcf5e4; color: #11803f; }
.trat-delta--sobe { background: #fdf0d5; color: #9a5b00; }
.trat-delta--igual { background: #eceae4; color: var(--texto-2); }
.trat-reg-info { display: flex; flex-wrap: wrap; gap: 6px; }
.trat-tag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: #f4f1ea; font-size: 12.5px; color: var(--texto-2); }
.trat-tag .ico { width: 13px; height: 13px; color: var(--ouro-escuro); }
.trat-reg-obs { margin: 0; font-size: 14px; font-style: italic; color: var(--texto-2); }
.trat-reg-acoes { display: flex; gap: 16px; }
.trat-reg-acoes form { margin: 0; }
.trat-reg-acoes a, .trat-reg-acoes button { padding: 0; border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ouro-escuro); text-decoration: underline; cursor: pointer; }
.trat-reg-acoes button { color: #a51f1f; }

.trat-passos { display: grid; gap: 14px; margin: 14px 0 0; padding: 0; list-style: none; counter-reset: passo; }
.trat-passos li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; }
.trat-passos li::before { counter-increment: passo; content: counter(passo); width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--preto); color: var(--ouro-brilho); font-weight: 800; }
.trat-passos strong { display: block; font-size: 15px; }
.trat-passos span { font-size: 13.5px; line-height: 1.45; color: var(--texto-2); }

.trat-rodape-acoes { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; margin-top: 20px; }
.trat-editar-inicio { flex: 1 1 100%; }
.trat-editar-inicio > summary { list-style: none; display: inline-flex; }
.trat-editar-inicio > summary::-webkit-details-marker { display: none; }
.trat-editar-inicio[open] > .trat-form { margin-top: 12px; }
.trat-editar-inicio .trat-linha { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.trat-rodape-acoes > .btn { order: -1; }
.trat-privacidade { display: flex; gap: 10px; margin-top: 18px; padding: 14px 16px; border-radius: 16px; background: #f4f1ea; font-size: 13.5px; line-height: 1.5; color: var(--texto-2); }
.trat-privacidade .ico { flex: none; width: 20px; height: 20px; color: var(--ouro-escuro); }
.trat-perigo { margin-top: 16px; }
.trat-perigo summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: #a51f1f; }
.trat-perigo form { display: grid; gap: 10px; margin-top: 10px; justify-items: start; }

/* Convite na Minha conta */
.trat-convite {
    display: flex; align-items: center; gap: 14px; margin: 0 0 20px; padding: 16px 18px; border-radius: 20px; color: #fff; text-decoration: none;
    background: radial-gradient(60% 160% at 0% 0%, rgb(224 177 46 / .24), transparent 60%), linear-gradient(135deg, #1a1a1b, #0b0b0c);
    border: 1px solid rgb(224 177 46 / .4); box-shadow: 0 18px 36px -26px rgb(0 0 0 / .6); transition: transform .2s;
}
.trat-convite:hover { transform: translateY(-2px); color: #fff; }
.trat-convite-ico { width: 54px; height: 54px; flex: none; display: grid; place-items: center; border-radius: 16px; background: var(--grad-ouro); color: #1a1405; }
.trat-convite-ico .ico { width: 27px; height: 27px; }
.trat-convite-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.trat-convite-txt small { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ouro-brilho); }
.trat-convite-txt strong { font-family: var(--fonte-titulo); font-size: 19px; }
.trat-convite-txt span { font-size: 13.5px; line-height: 1.4; color: #b9b4a9; }
.trat-convite-seta { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid rgb(224 177 46 / .6); color: var(--ouro-brilho); }
.trat-convite-seta .ico { width: 18px; height: 18px; }

@media (max-width: 960px) {
    .trat-grade, .trat-boas { grid-template-columns: 1fr; }
    .trat-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .trat-editar-inicio .trat-linha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .trat-hero { padding: 20px 16px; border-radius: 22px; }
    .trat-stats { gap: 8px; }
    .trat-stat { padding: 12px; }
    .trat-stat b { font-size: 25px; }
    .trat-card { padding: 16px; border-radius: 20px; }
    .trat-medidas-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .trat-editar-inicio .trat-linha { grid-template-columns: 1fr 1fr; }
    .trat-calc { margin-left: 0; }
    .trat-botoes .btn { flex: 1 1 auto; }
    .trat-chip { width: 100%; justify-content: center; }
    .trat-conquistas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .trat-convite-seta { display: none; }
}
@media (prefers-reduced-motion: reduce) { .trat-chip--hora { animation: none; } }
@media print {
    .topo, .aviso, .rodape, .menu-lateral, .menu-fundo, .gaveta, .sobreposicao, dialog, .trat-nao-imprimir { display: none !important; }
    .trat-pagina { padding: 0; }
    .trat-hero, .trat-conq.feita .trat-conq-ico, .trat-reg-num { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .trat-card, .trat-reg { break-inside: avoid; box-shadow: none; }
    .trat-grade { grid-template-columns: 1fr 1fr; }
}

/* Meu tratamento: no celular o gráfico não encolhe até as letras sumirem; rola para o lado dentro do cartão. */
.trat-grafico-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 560px) {
    .trat-grafico-rolagem svg { min-width: 600px; }
}
/* Grade de uma coluna com minmax(0, 1fr): "1fr" sozinho estica com o gráfico de 600px e a página inteira passa da tela. */
@media (max-width: 960px) {
    .trat-grade, .trat-boas { grid-template-columns: minmax(0, 1fr); }
}

/* Meu tratamento: "Lançar registros antigos" (várias semanas de uma vez) e o aviso para quem já faz há tempo. */
.trat-dica { font-size: 12.5px; line-height: 1.45; color: var(--texto-3); }
.trat-ja-faz { display: flex; gap: 12px; margin-top: 16px; padding: 14px 16px; border-radius: 16px; background: #fff8e6; border: 1px solid rgb(193 145 1 / .35); }
.trat-ja-faz > .ico { flex: none; width: 22px; height: 22px; margin-top: 2px; color: var(--ouro-escuro); }
.trat-ja-faz strong { display: block; font-size: 15px; }
.trat-ja-faz span { font-size: 13.5px; line-height: 1.45; color: var(--texto-2); }
.trat-grade > div > .trat-lote { margin-top: 20px; }
.trat-lote > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; }
.trat-lote > summary::-webkit-details-marker { display: none; }
.trat-lote-titulo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.trat-lote-titulo > .ico { flex: none; width: 22px; height: 22px; color: var(--ouro-escuro); }
.trat-lote-titulo strong { display: block; font-family: var(--fonte-titulo); font-size: 19px; }
.trat-lote-titulo small { display: block; font-size: 13.5px; color: var(--texto-2); }
.trat-lote-seta { flex: none; width: 34px; height: 34px; padding: 7px; border-radius: 50%; border: 1.5px solid rgb(193 145 1 / .5); color: var(--ouro-escuro); transition: transform .2s; }
.trat-lote[open] .trat-lote-seta { transform: rotate(45deg); }
.trat-lote-cab, .trat-lote-linha { display: grid; grid-template-columns: 34px minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 8px; align-items: center; }
.trat-lote-cab { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--texto-3); }
.trat-lote-cab span:first-child { text-align: center; }
.trat-lote-linhas { display: grid; gap: 8px; counter-reset: lote; }
.trat-lote-linha::before { counter-increment: lote; content: counter(lote); height: 46px; display: grid; place-items: center; border-radius: 10px; background: #f4f1ea; font-size: 13px; font-weight: 700; color: var(--texto-2); }
.trat-lote-linha input { width: 100%; min-width: 0; min-height: 46px; padding: 0 10px; border: 1px solid var(--borda); border-radius: 10px; background: #fff; font: inherit; font-size: 16px; }
.trat-lote-linha input:focus { outline: none; border-color: var(--ouro); box-shadow: 0 0 0 3px rgb(193 145 1 / .14); }
.trat-lote-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 560px) {
    .trat-lote-cab { display: none; }
    .trat-lote-linha { grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); padding: 8px; border: 1px solid var(--borda); border-radius: 14px; }
    .trat-lote-linha::before { grid-row: span 2; height: 100%; }
    .trat-lote-linha input[type=date] { grid-column: 2 / -1; }
    .trat-lote-linha input { padding: 0 8px; }
    .trat-lote-acoes .btn { flex: 1 1 100%; }
    .trat-lote-titulo small { font-size: 12.5px; }
}

/* ============================================================
   Meu tratamento: primeira vez em dois caminhos (2026-09-14)
   Pedido do dono: deixar claro quem está começando agora e quem já faz
   o tratamento, e arrumar o que estava torto (campos com alturas
   diferentes lado a lado; data e produto espremidos no celular).
   ============================================================ */
.trat-linha { align-items: start; }
.trat-boas { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.trat-lado .trat-passos { margin-top: 16px; }

.trat-escolha { margin: 0; padding: 0; border: 0; min-width: 0; }
.trat-escolha legend, .trat-etapa h3 { padding: 0; font-family: var(--fonte-titulo); font-size: 18px; font-weight: 700; color: var(--texto); }
.trat-escolha legend { margin-bottom: 12px; }
.trat-opcoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.trat-opcao {
    position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 16px 44px 16px 16px;
    border: 2px solid var(--borda); border-radius: 18px; background: #fff; cursor: pointer;
    transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.trat-opcao:hover { border-color: rgb(193 145 1 / .5); }
.trat-opcao input { position: absolute; opacity: 0; pointer-events: none; }
.trat-opcao-ico { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 13px; background: #f4f1ea; color: var(--ouro-escuro); transition: background .2s; }
.trat-opcao-ico .ico { width: 23px; height: 23px; }
.trat-opcao-txt { min-width: 0; }
.trat-opcao-txt strong { display: block; font-size: 16px; line-height: 1.25; }
.trat-opcao-txt small { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.4; color: var(--texto-2); }
.trat-opcao-marca { position: absolute; top: 14px; right: 14px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #d6cfbd; background: #fff; }
.trat-opcao:has(input:checked) { border-color: var(--ouro); background: linear-gradient(180deg, #fff6dc, #fff); box-shadow: 0 12px 26px -18px rgb(193 145 1 / .8); }
.trat-opcao:has(input:checked) .trat-opcao-ico { background: var(--grad-ouro); color: #1a1405; }
.trat-opcao:has(input:checked) .trat-opcao-marca { border-color: var(--ouro-escuro); background: radial-gradient(circle, var(--ouro-escuro) 0 5px, #fff 6px); }
.trat-opcao:has(input:focus-visible) { outline: 3px solid var(--ouro); outline-offset: 2px; }

.trat-etapa { display: grid; gap: 14px; padding-top: 18px; border-top: 1px solid rgb(193 145 1 / .22); min-width: 0; }
.trat-etapa h3 { display: flex; align-items: center; gap: 10px; margin: 0; }
.trat-etapa h3 b { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--preto); color: var(--ouro-brilho); font-size: 14px; }
.trat-etapa h3 em { font-family: var(--fonte); font-size: 13.5px; font-style: normal; font-weight: 500; color: var(--texto-3); }
.trat-etapa > .trat-dica { margin-top: -6px; font-size: 13.5px; }
.trat-linha--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.trat-inicio-form > .btn span { display: inline; }

/* Só o caminho escolhido aparece. */
.trat-inicio-form[data-modo="comecando"] [data-so="ja_faco"],
.trat-inicio-form[data-modo="ja_faco"] [data-so="comecando"] { display: none !important; }

@media (max-width: 960px) {
    .trat-boas { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
    .trat-opcoes { grid-template-columns: minmax(0, 1fr); }
    .trat-opcao { padding: 14px 42px 14px 14px; }
    .trat-linha--empilha { grid-template-columns: minmax(0, 1fr); }
    .trat-linha--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .trat-linha--3 > :last-child { grid-column: 1 / -1; }
}

/* ============================================================
   Meu tratamento: seletor de produto com foto (2026-09-14)
   O mesmo jeito da calculadora: toque abre a lista com fotinho, busca por
   nome, tirzepatidas primeiro. Classes próprias (o calculadora.css não é
   carregado aqui). O painel abre por cima do que vem embaixo.
   ============================================================ */
.trat-combo { position: relative; }
.trat-combo-botao {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 8px 14px 8px 8px;
    border: 1.5px solid var(--borda); border-radius: 14px; background: #fff; font: inherit; text-align: left; cursor: pointer;
    transition: border-color .2s, box-shadow .2s;
}
.trat-combo-botao:hover { border-color: var(--ouro-claro); }
.trat-combo-botao.aberto, .trat-combo-botao:focus-visible { outline: none; border-color: var(--ouro); box-shadow: 0 0 0 4px rgb(193 145 1 / .14); }
.trat-combo-botao.vazio { border-style: dashed; border-color: rgb(193 145 1 / .45); background: #fffdf6; }
.trat-combo-foto, .trat-combo-item-foto {
    flex: none; overflow: hidden; border-radius: 10px; background: #f4f1ea; display: grid; place-items: center; color: var(--ouro-escuro);
}
.trat-combo-foto { width: 42px; height: 42px; }
.trat-combo-item-foto { width: 48px; height: 48px; background: #fff; border: 1px solid var(--borda); }
.trat-combo-foto img, .trat-combo-foto svg:not(.ico), .trat-combo-item-foto img, .trat-combo-item-foto svg:not(.ico) { width: 100%; height: 100%; object-fit: contain; display: block; }
.trat-combo-foto .ico, .trat-combo-item-foto .ico { width: 20px; height: 20px; }
.trat-combo-outro { background: #f4f1ea; }
.trat-combo-txt { flex: 1; min-width: 0; font-size: 15.5px; font-weight: 600; line-height: 1.3; color: var(--texto); }
.trat-combo-botao.vazio .trat-combo-txt { font-weight: 500; color: var(--texto-3); }
.trat-combo-seta { flex: none; width: 18px; height: 18px; color: var(--texto-3); transform: rotate(90deg); transition: transform .2s; }
.trat-combo-botao.aberto .trat-combo-seta { transform: rotate(-90deg); }
.trat-combo-painel {
    position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 6px); overflow: hidden;
    background: #fff; border: 1px solid var(--borda); border-radius: 16px; box-shadow: 0 24px 50px -20px rgb(0 0 0 / .35);
}
.trat-combo-busca { position: relative; padding: 10px; border-bottom: 1px solid var(--borda); }
.trat-combo-busca .ico { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--texto-3); pointer-events: none; }
.trat-combo-busca input { width: 100%; height: 44px; padding: 0 12px 0 38px; border: 1px solid var(--borda); border-radius: 10px; background: #faf8f3; font: inherit; font-size: 16px; }
.trat-combo-busca input:focus { outline: none; border-color: var(--ouro); background: #fff; }
.trat-combo-lista { max-height: 340px; overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 6px; list-style: none; }
.trat-combo-grupo { padding: 10px 10px 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ouro-escuro); }
.trat-combo-lista [data-opcao] { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; cursor: pointer; }
.trat-combo-lista [data-opcao]:hover, .trat-combo-lista [data-opcao].ativo { background: #f6f3ec; }
.trat-combo-lista [data-opcao][aria-selected="true"] { background: #fdf3d6; }
.trat-combo-item-txt { flex: 1; min-width: 0; }
.trat-combo-item-txt strong { display: block; font-size: 14.5px; line-height: 1.3; }
.trat-combo-item-txt small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--texto-3); }
.trat-combo-check { flex: none; width: 18px; height: 18px; color: var(--ouro-escuro); opacity: 0; }
.trat-combo-lista [aria-selected="true"] .trat-combo-check { opacity: 1; }
.trat-combo-nada { margin: 0; padding: 18px 14px 22px; text-align: center; font-size: 13.5px; color: var(--texto-3); }

/* ============================================================
   Páginas: editor com formatação e o texto formatado no site (2026-09-14)
   Pedido do dono: negrito, títulos, listas, link e emoji ao editar as
   páginas de ajuda. .pagina-texto vale para o editor e para a página
   pública, então o que se vê editando é o que aparece no site.
   ============================================================ */
.pagina-texto { color: var(--texto-2); font-size: 15.5px; line-height: 1.7; overflow-wrap: anywhere; }
.pagina-texto > * + * { margin-top: 14px; }
.pagina-texto p { margin: 0; }
.pagina-texto h2 { margin-top: 26px; font-family: var(--fonte-titulo); font-size: 22px; font-weight: 700; line-height: 1.25; color: var(--texto); }
.pagina-texto h3 { margin-top: 20px; font-size: 17.5px; font-weight: 700; line-height: 1.3; color: var(--texto); }
.pagina-texto > h2:first-child, .pagina-texto > h3:first-child { margin-top: 0; }
.pagina-texto strong { font-weight: 700; color: var(--texto); }
.pagina-texto ul, .pagina-texto ol { margin-bottom: 0; padding-left: 22px; }
.pagina-texto li + li { margin-top: 6px; }
.pagina-texto ul li::marker { color: var(--ouro-escuro); }
.pagina-texto ol li::marker { font-weight: 700; color: var(--ouro-escuro); }
.pagina-texto a { color: var(--ouro-escuro); font-weight: 600; text-decoration: underline; }
.pagina-texto blockquote { margin: 0; padding: 12px 16px; border-left: 4px solid var(--ouro); border-radius: 0 12px 12px 0; background: #fff8e6; color: var(--texto); }

.editor-rotulo { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; }
.editor { border: 1px solid var(--borda); border-radius: 14px; background: #fff; }
.editor:focus-within { border-color: var(--ouro); box-shadow: 0 0 0 4px rgb(193 145 1 / .12); }
.editor-barra {
    position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 8px;
    border-bottom: 1px solid var(--borda); border-radius: 14px 14px 0 0; background: #faf8f3;
}
.editor-barra button {
    min-width: 38px; height: 38px; padding: 0 10px; border: 1px solid transparent; border-radius: 9px;
    background: transparent; font: inherit; font-size: 14px; color: var(--texto); cursor: pointer;
}
.editor-barra button:hover { background: #fff; border-color: var(--borda); }
.editor-barra button.ativo { background: var(--preto); border-color: var(--preto); color: var(--ouro-brilho); }
.editor-sep { width: 1px; height: 24px; margin: 0 4px; background: var(--borda); }
.editor-emoji { position: relative; }
.editor-emoji-painel {
    position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; width: 292px; display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px;
    padding: 8px; border: 1px solid var(--borda); border-radius: 14px; background: #fff; box-shadow: 0 18px 40px -16px rgb(0 0 0 / .3);
}
.editor-emoji-painel[hidden] { display: none; }
.editor-emoji-painel button { min-width: 0; height: 34px; padding: 0; font-size: 19px; }
.editor-area { min-height: 320px; max-height: 70vh; overflow-y: auto; padding: 18px 20px; outline: none; }
.editor-area:empty::before { content: "Escreva aqui o conteúdo da página…"; color: var(--texto-3); }
@media (max-width: 720px) {
    .editor-barra { gap: 2px; padding: 6px; }
    .editor-barra button { height: 40px; padding: 0 8px; }
    .editor-sep { display: none; }
    .editor-emoji-painel { width: 260px; grid-template-columns: repeat(7, 1fr); }
    .editor-area { min-height: 260px; padding: 14px; font-size: 16px; }
}

/* ============================================================
   Menu lateral do painel em grupos que abrem e fecham (2026-09-14)
   Pedido do dono: organizar a coluna por assunto (Dia a dia, Pedidos e
   envio, Produtos, Clientes, Site, Configurações), cada grupo com uma
   setinha. O título do grupo é o <summary>; fechado, mostra a soma dos
   avisos que ficaram escondidos dentro dele.
   ============================================================ */
.admin-lado-grupo { display: flex; flex-direction: column; gap: 2px; }
.admin-lado-grupo > summary.admin-lado-rotulo {
    list-style: none; display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 10px 10px 8px;
    border-radius: 9px; cursor: pointer; user-select: none; transition: color .18s, background-color .18s;
}
.admin-lado-grupo > summary::-webkit-details-marker { display: none; }
.admin-lado-grupo > summary > span { flex: 1; }
.admin-lado-grupo > summary:hover { color: #e8e3d7; background: rgb(255 255 255 / .04); }
.admin-lado-grupo > summary:focus-visible { outline: 2px solid var(--ouro); outline-offset: 2px; }
.admin-lado-seta { flex: none; width: 13px; height: 13px; transform: rotate(90deg); transition: transform .2s; opacity: .8; }
.admin-lado-grupo:not([open]) .admin-lado-seta { transform: none; }
.admin-lado-grupo-aviso {
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; display: inline-grid; place-items: center;
    background: #e5484d; color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: 0;
}
.admin-lado-grupo[open] .admin-lado-grupo-aviso { display: none; }
.admin-lado-grupo[open] > summary.admin-lado-rotulo { color: #a9a499; }

/* ============================================================
   Entrar: tela em duas partes (2026-09-14)
   Pedido do dono ("ta meio pobrinho"). À esquerda a marca, preta e
   dourada, com o que a conta oferece; à direita o formulário com ícone
   nos campos, "mostrar senha", esqueci a senha junto do campo e o botão
   de criar conta. No celular a parte escura vira uma faixa curta em cima.
   ============================================================ */
.login-pagina { padding-block: 36px 64px; }
.login-caixa {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); max-width: 980px; margin-inline: auto;
    overflow: hidden; border-radius: 28px; background: #fff; border: 1px solid var(--borda);
    box-shadow: 0 40px 80px -50px rgb(0 0 0 / .5);
}
.login-marca {
    position: relative; display: flex; flex-direction: column; justify-content: center; padding: 44px 40px; color: #fff;
    background: radial-gradient(80% 60% at 0% 0%, rgb(224 177 46 / .28), transparent 60%), radial-gradient(70% 50% at 100% 100%, rgb(224 177 46 / .14), transparent 60%), linear-gradient(160deg, #1a1a1b, #0b0b0c);
}
.login-logo { display: inline-block; margin-bottom: 26px; }
.login-logo .logo-img { display: block; height: 62px; width: auto; max-width: 100%; filter: drop-shadow(0 6px 18px rgb(224 177 46 / .3)); }
.login-marca h2 { font-family: var(--fonte-titulo); font-size: clamp(26px, 3vw, 34px); font-weight: 800; line-height: 1.12; }
.login-marca h2 span { background: var(--grad-ouro); -webkit-background-clip: text; background-clip: text; color: transparent; }
.login-marca > p { margin-top: 10px; font-size: 15px; color: #b9b4a9; }
.login-vantagens { display: grid; gap: 12px; margin: 26px 0 0; padding: 0; list-style: none; }
.login-vantagens li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: #e8e3d7; }
.login-vantagens li > span { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 11px; background: rgb(224 177 46 / .14); border: 1px solid rgb(224 177 46 / .35); color: var(--ouro-brilho); }
.login-vantagens .ico { width: 18px; height: 18px; }

.login-form-lado { padding: 44px 44px 36px; }
.login-form-lado .eyebrow { display: inline-flex; align-items: center; gap: 6px; }
.login-form-lado .eyebrow .ico { width: 15px; height: 15px; }
.login-form-lado h1 { margin: 8px 0 4px; font-family: var(--fonte-titulo); font-size: clamp(28px, 3vw, 34px); font-weight: 800; }
.login-sub { margin-bottom: 20px; color: var(--texto-2); font-size: 15px; }
.login-form-lado .alerta { margin-bottom: 16px; }
.login-form { display: grid; gap: 4px; }
.login-rotulo-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.login-rotulo-linha a { margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--ouro-escuro); text-decoration: underline; }
.login-input { position: relative; display: block; }
.login-input > .ico { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--texto-3); pointer-events: none; }
.login-input input { width: 100%; height: 54px; padding-left: 46px; font-size: 16px; border-radius: 14px; }
.login-input input[type=password], .login-input input[name=senha] { padding-right: 52px; }
.login-olho { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: var(--texto-3); cursor: pointer; }
.login-olho:hover, .login-olho[aria-pressed="true"] { background: #f4f1ea; color: var(--ouro-escuro); }
.login-olho .ico { width: 19px; height: 19px; }
.login-entrar { height: 54px; margin-top: 10px; font-size: 16px; gap: 8px; }
.login-entrar .ico { width: 18px; height: 18px; }
.login-divisor { display: flex; align-items: center; gap: 12px; margin: 24px 0 14px; font-size: 13px; color: var(--texto-3); }
.login-divisor::before, .login-divisor::after { content: ""; flex: 1; height: 1px; background: var(--borda); }
.login-criar { height: 50px; gap: 8px; border: 1.5px solid rgb(193 145 1 / .45); }
.login-criar .ico { width: 17px; height: 17px; }
.login-seguro { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; font-size: 12.5px; color: var(--texto-3); text-align: center; }
.login-seguro .ico { width: 15px; height: 15px; flex: none; color: var(--ouro-escuro); }

@media (max-width: 820px) {
    .login-pagina { padding-block: 16px 40px; }
    .login-caixa { grid-template-columns: minmax(0, 1fr); border-radius: 22px; }
    .login-marca { padding: 22px 20px 20px; }
    .login-logo { margin-bottom: 12px; }
    .login-logo .logo-img { height: 44px; }
    .login-marca h2 { font-size: 23px; }
    .login-marca > p { margin-top: 4px; font-size: 14px; }
    .login-vantagens { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 10px; margin-top: 14px; }
    .login-vantagens li { gap: 8px; font-size: 12.5px; line-height: 1.3; }
    .login-vantagens li > span { width: 30px; height: 30px; border-radius: 9px; }
    .login-vantagens .ico { width: 15px; height: 15px; }
    .login-form-lado { padding: 24px 20px 24px; }
}
/* Entrar: WhatsApp e avaliações logo abaixo da caixa, com respiro. */
.login-pagina .faixa { padding-top: 32px; }
/* Entrar: a nota de segurança quebrava em 2 linhas e o escudo ficava sozinho na ponta. Agora o ícone anda junto do texto. */
.login-seguro { display: block; }
.login-seguro .ico { display: inline-block; vertical-align: -2px; margin-right: 4px; }

/* Entrar no celular, 2ª versão (dono: "ficou meio feio"). O topo da loja já mostra o logo, então a faixa escura
   fica sem logo, centralizada, e as 4 vantagens viram chips curtos (Rastreio, Fotos do pacote...) em vez de um
   bloco de 2 colunas com textos de 3 linhas. O cabeçalho do formulário também centraliza. */
.login-vantagens em { font-style: normal; }
.login-v-curto { display: none; }
@media (max-width: 820px) {
    .login-marca { align-items: center; padding: 22px 16px 18px; text-align: center; }
    .login-logo { display: none; }
    .login-marca h2 { font-size: 24px; }
    .login-vantagens { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 14px; }
    .login-vantagens li {
        gap: 6px; padding: 5px 11px 5px 5px; border-radius: 999px; font-size: 12.5px; line-height: 1;
        background: rgb(224 177 46 / .1); border: 1px solid rgb(224 177 46 / .3);
    }
    .login-vantagens li > span { width: 24px; height: 24px; border: 0; border-radius: 50%; background: var(--grad-ouro); color: #1a1405; }
    .login-vantagens .ico { width: 13px; height: 13px; }
    .login-v-longo { display: none; }
    .login-v-curto { display: inline; font-weight: 600; color: #f1eee8; }
    .login-form-lado { padding: 22px 18px 22px; }
    .login-form-lado > .eyebrow { display: none; }
    .login-form-lado h1 { margin-top: 0; text-align: center; font-size: 28px; }
    .login-sub { text-align: center; margin-bottom: 16px; font-size: 14.5px; }
    .login-rotulo-linha a { font-size: 12.5px; }
    .login-divisor { margin: 20px 0 12px; }
}

/* Entrar no computador: foto do casal dando boas-vindas no alto da faixa escura, no lugar do logo (pedido do dono).
   A foto encosta nas bordas do painel e some em degradê embaixo e nos lados, emendando no fundo preto. No celular não aparece. */
.login-foto { position: relative; margin: -44px -40px 4px; }
.login-foto img { display: block; width: 100%; height: auto; }
.login-foto::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(0deg, #111112 2%, transparent 38%), linear-gradient(90deg, rgb(17 17 18 / .55), transparent 18%, transparent 82%, rgb(17 17 18 / .55));
}
.login-marca:has(.login-foto) { justify-content: flex-start; }
@media (max-width: 820px) {
    .login-foto { display: none; }
}

/* Meu tratamento no celular: gráfico estreito próprio no lugar da versão larga com rolagem (no iPhone aparecia cortado:
   o "2,5" solto, sem o último ponto nem a data final). O id do degradê se repete nas duas cópias, mas só uma aparece. */
.trat-graf-compacto { display: none; }
@media (max-width: 560px) {
    .trat-graf-largo { display: none; }
    .trat-graf-compacto { display: block; }
    .trat-grafico { padding-inline: 12px; }
}
/* Entrar: chip "Pedidos" só no celular (no computador o texto longo "Seus pedidos e o rastreio" já fala dos pedidos). */
.login-vantagens li.login-v-so-cel { display: none; }
@media (max-width: 820px) { .login-vantagens li.login-v-so-cel { display: flex; } }
/* Entrar: vão grande entre o cartão das avaliações e o rodapé. Somavam o respiro do cartão (56px, 40 no celular)
   e o fim da página (64px, 40 no celular). O cartão já dá o respiro: a página não precisa de mais. */
.login-pagina { padding-bottom: 0; }

/* ============================================================
   Criar conta: mesmo visual da tela de Entrar (2026-09-14)
   Pedido do dono ("ta bem pobrinha"). Reaproveita .login-caixa/.login-marca;
   aqui só o que é do cadastro: formulário mais largo (tem 2 colunas), trilha
   dos passos em "pílulas" e campos com a mesma altura/borda do Entrar.
   ============================================================ */
.cadastro-caixa { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); max-width: 1080px; }
.cadastro-caixa .login-marca { justify-content: flex-start; }
.cadastro-form-lado { padding: 40px 40px 32px; }
.cadastro-form-lado .form-passos { scroll-margin-top: 170px; }
.cadastro-form-lado .passos-trilha { gap: 8px; margin: 4px 0 22px; padding: 0; list-style: none; }
.cadastro-form-lado .passos-trilha li {
    justify-content: center; padding: 8px 10px; border: 1px solid var(--borda); border-radius: 999px; background: #faf8f3;
}
.cadastro-form-lado .passos-trilha li.ativo { border-color: var(--ouro); background: #fff6dc; }
.cadastro-form-lado .passos-trilha li.feito { border-color: #b7e2c5; background: #eefaf2; color: #11803f; }
.cadastro-form-lado .campo input { height: 52px; border-radius: 14px; font-size: 16px; }
.cadastro-form-lado .passo-botoes { margin-top: 20px; }
.cadastro-form-lado .passo-botoes .btn { height: 52px; }
.cadastro-form-lado .revisao-titulo { font-family: var(--fonte-titulo); }
@media (max-width: 820px) {
    .cadastro-caixa { grid-template-columns: minmax(0, 1fr); }
    .cadastro-form-lado { padding: 22px 18px 22px; }
    .cadastro-form-lado .form-passos { scroll-margin-top: 90px; }
    .cadastro-form-lado .passos-trilha li { padding: 6px; }
}

/* ============================================================
   Minha conta: "Seus dados" e "Endereço de entrega" (2026-09-14)
   Pedido do dono ("ta pobrinho"). Cartões com cabeçalho de ícone dourado,
   uma linha por dado com ícone, endereço destacado com pino e CEP em
   etiqueta, e o link do WhatsApp para pedir alteração.
   ============================================================ */
.conta-cartoes { align-items: stretch; }
.conta-cartao { display: flex; flex-direction: column; gap: 16px; padding: 22px; border-radius: 22px; }
.conta-cartao-topo { display: flex; align-items: center; gap: 12px; }
.conta-cartao-ico { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 13px; background: var(--grad-ouro); color: #1a1405; box-shadow: 0 8px 18px -10px rgb(193 145 1 / .9); }
.conta-cartao-ico .ico { width: 21px; height: 21px; stroke-width: 2; }
.conta-cartao-topo h2 { font-family: var(--fonte-titulo); font-size: 18px; font-weight: 700; line-height: 1.2; }
.conta-cartao-topo small { display: block; margin-top: 2px; font-size: 13px; color: var(--texto-3); }

.conta-dados { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.conta-dados li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: #faf8f3; border: 1px solid #efe9dc; }
.conta-dado-ico { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; background: #fff; border: 1px solid #ece4d0; color: var(--ouro-escuro); }
.conta-dado-ico .ico { width: 16px; height: 16px; }
.conta-dados li > span:last-child { min-width: 0; display: grid; gap: 1px; }
.conta-dados small { font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--texto-3); }
.conta-dados strong { font-size: 15px; font-weight: 600; color: var(--texto); overflow-wrap: anywhere; }

.conta-endereco, .conta-vazio { display: flex; align-items: flex-start; gap: 14px; flex: 1; padding: 16px; border-radius: 16px; background: linear-gradient(180deg, #fffaf0, #fff); border: 1px solid rgb(193 145 1 / .3); }
.conta-endereco-pino { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--preto); color: var(--ouro-brilho); }
.conta-endereco-pino .ico { width: 20px; height: 20px; }
.conta-endereco > div { min-width: 0; display: grid; gap: 3px; font-size: 14.5px; color: var(--texto-2); }
.conta-endereco strong { font-size: 16px; color: var(--texto); }
.conta-cep { justify-self: start; margin-top: 4px; padding: 3px 10px; border-radius: 999px; background: #fdf3d6; color: #7a5a00; font-size: 12.5px; font-weight: 700; }
.conta-ref { display: flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 13px; color: var(--texto-3); }
.conta-ref .ico { width: 14px; height: 14px; }
.conta-vazio p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--texto-2); }
.conta-vazio p strong { display: block; margin-bottom: 2px; font-size: 15px; color: var(--texto); }

.conta-cartao-link { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; margin-top: auto; padding: 0 14px; border-radius: 14px; border: 1.5px solid rgb(37 211 102 / .45); background: #f2fbf5; color: #11803f; font-size: 14px; font-weight: 600; text-align: center; text-decoration: none; }
.conta-cartao-link:hover { background: #e3f6ea; color: #0b6a33; }
.conta-cartao-link .ico { width: 18px; height: 18px; flex: none; }
@media (max-width: 560px) {
    .conta-cartao { padding: 18px 16px; }
    .conta-cartao-link { font-size: 13.5px; }
}

/* ============================================================
   Minha conta: vários endereços (2026-09-14)
   Pedido do dono. Lista com o principal primeiro (selo dourado), apelido
   opcional, ações Principal / Editar / Excluir e o formulário de adicionar
   ou editar dentro de um "abre e fecha", com busca automática pelo CEP.
   ============================================================ */
.conta-enderecos { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.conta-enderecos .conta-endereco { flex-wrap: wrap; background: #fff; border-color: var(--borda); }
.conta-enderecos .conta-endereco.principal { background: linear-gradient(180deg, #fffaf0, #fff); border-color: rgb(193 145 1 / .45); }
.conta-enderecos .conta-endereco > div { flex: 1; }
.conta-end-selos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 2px; }
.conta-end-selo { padding: 2px 9px; border-radius: 999px; background: #f1ede3; color: var(--texto-2); font-size: 11.5px; font-weight: 700; letter-spacing: .03em; }
.conta-end-selo--principal { background: var(--grad-ouro); color: #1a1405; }
.conta-end-acoes { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; margin-top: 2px; border-top: 1px dashed #ece4d0; }
.conta-end-acoes form { margin: 0; }
.conta-end-acoes a, .conta-end-acoes button {
    display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 0 12px; border-radius: 10px;
    border: 1px solid var(--borda); background: #fff; font: inherit; font-size: 13px; font-weight: 600; color: var(--texto-2); cursor: pointer; text-decoration: none;
}
.conta-end-acoes a:hover, .conta-end-acoes button:hover { border-color: var(--ouro); color: var(--texto); }
.conta-end-acoes .ico { width: 14px; height: 14px; }
.conta-end-acoes .conta-end-excluir { color: #a51f1f; }
.conta-end-acoes .conta-end-excluir:hover { border-color: #e7a3a3; color: #a51f1f; }

.conta-end-form { border: 1.5px dashed rgb(193 145 1 / .5); border-radius: 16px; background: #fffdf7; }
.conta-end-form[open] { border-style: solid; background: #fff; }
.conta-end-form > summary { list-style: none; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 14px; cursor: pointer; font-weight: 700; color: var(--ouro-escuro); }
.conta-end-form > summary::-webkit-details-marker { display: none; }
.conta-end-form > summary .ico { width: 18px; height: 18px; }
.conta-end-form form { display: grid; gap: 2px; padding: 4px 16px 16px; }
.conta-end-form .campo input { height: 48px; border-radius: 12px; font-size: 16px; }
.conta-end-form .campo-linha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.conta-end-form .campo-linha--curto { grid-template-columns: minmax(0, 1fr) 90px; }
.conta-end-form .check { display: flex; align-items: center; gap: 8px; margin: 6px 0 4px; font-size: 14px; }
.conta-end-form .check input { width: 18px; height: 18px; accent-color: var(--ouro-escuro); }
.conta-end-form .passo-botoes { margin-top: 10px; }
.conta-end-limite { margin: 0; font-size: 13px; color: var(--texto-3); text-align: center; }
@media (max-width: 560px) {
    .conta-end-form .campo-linha { grid-template-columns: minmax(0, 1fr); }
    .conta-end-form .campo-linha--curto { grid-template-columns: minmax(0, 1fr) 80px; }
}
/* Endereços: as ações (Tornar principal / Editar / Excluir) vão para uma linha própria embaixo do endereço.
   A regra ".conta-endereco > div { flex: 1 }" também pegava a caixa das ações e a deixava espremida ao lado. */
.conta-enderecos .conta-endereco > .conta-end-acoes { flex: 1 1 100%; }
.conta-end-selos:empty { display: none; }

/* ============================================================
   Minha conta: "Meus pedidos" em cartões (2026-09-14)
   Pedido do dono. Número do pedido em destaque, status colorido, fotinhos
   dos produtos, total e a linha das etapas até a entrega.
   ============================================================ */
.meus-pedidos { margin-top: 20px; }
.ped-lista { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ped-card { display: grid; gap: 14px; padding: 16px; border-radius: 18px; background: #fff; border: 1px solid var(--borda); box-shadow: 0 14px 30px -26px rgb(0 0 0 / .4); }
.ped-card-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ped-card-num small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-3); }
.ped-card-num strong { font-family: var(--fonte-titulo); font-size: 22px; font-weight: 800; line-height: 1.1; color: var(--texto); }
.ped-status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; }
.ped-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ped-status--novo { background: #fff4d6; color: #8a5a00; }
.ped-status--pago { background: #e6f0ff; color: #1f4fbf; }
.ped-status--separando { background: #f1e8ff; color: #6a3fb5; }
.ped-status--enviado { background: #e3f4fb; color: #0e6f94; }
.ped-status--entregue { background: #dcf5e4; color: #11803f; }
.ped-status--cancelado { background: #fdecec; color: #a51f1f; }

.ped-card-meio { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: #faf8f3; }
.ped-thumbs { display: flex; flex: none; padding-left: 10px; }
.ped-thumb { width: 46px; height: 46px; margin-left: -10px; display: grid; place-items: center; overflow: hidden; border-radius: 12px; background: #fff; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--borda); }
.ped-thumb img, .ped-thumb svg { width: 100%; height: 100%; object-fit: contain; }
.ped-thumb--mais { font-size: 13px; font-weight: 700; color: var(--texto-2); }
.ped-card-info { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ped-card-info strong { font-size: 14.5px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ped-card-info span { font-size: 13px; color: var(--texto-3); }
.ped-card-total { flex: none; text-align: right; }
.ped-card-total small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-3); }
.ped-card-total strong { font-family: var(--fonte-titulo); font-size: 17px; }

.ped-etapas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.ped-etapas li { position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; }
.ped-etapas li::before { content: ""; position: absolute; top: 8px; left: -50%; width: 100%; height: 3px; background: #ebe6da; }
.ped-etapas li:first-child::before { display: none; }
.ped-etapas li span { position: relative; z-index: 1; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid #ddd6c6; }
.ped-etapas li small { font-size: 11.5px; font-weight: 600; color: var(--texto-3); }
.ped-etapas li.feita::before, .ped-etapas li.atual::before { background: var(--ouro); }
.ped-etapas li.feita span { background: var(--ouro); border-color: var(--ouro); }
.ped-etapas li.atual span { background: var(--preto); border-color: var(--ouro); box-shadow: 0 0 0 4px rgb(224 177 46 / .25); }
.ped-etapas li.feita small, .ped-etapas li.atual small { color: var(--texto); }
.ped-cancelado { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 12px; background: #fdecec; color: #8f1d1d; font-size: 13.5px; }
.ped-cancelado .ico { width: 16px; height: 16px; flex: none; }

.ped-foto { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; border: 1px solid var(--borda); color: var(--texto-2); font-size: 13px; text-decoration: none; }
.ped-foto img { width: 52px; height: 52px; object-fit: cover; border-radius: 9px; }
.ped-foto span { display: flex; align-items: center; gap: 6px; }
.ped-foto .ico { width: 15px; height: 15px; color: var(--ouro-escuro); }
.ped-card-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.ped-card-acoes .btn { flex: 1 1 auto; height: 44px; gap: 6px; }
.ped-card-acoes .ico { width: 16px; height: 16px; }
@media (max-width: 560px) {
    .ped-card { padding: 14px; }
    .ped-card-num strong { font-size: 20px; }
    .ped-card-meio { flex-wrap: wrap; }
    .ped-card-total { flex-basis: 100%; display: flex; align-items: baseline; justify-content: space-between; padding-top: 8px; border-top: 1px dashed #e6dfcf; text-align: left; }
    .ped-etapas li small { font-size: 10px; }
}

/* ============================================================
   Minha conta mais enxuta (2026-09-14)
   Pedido do dono: "no mobile ta bagunçado, grande demais" e "o endereço de
   entrega ta enorme". Atalhos no topo, dados em lista fina, endereço em
   duas linhas com ações em texto e pedidos mais baixos no celular.
   ============================================================ */
#dados, #enderecos, #pedidos { scroll-margin-top: 96px; }

/* Seus dados: lista fina com divisórias, sem uma caixa por linha. */
.conta-cartao { gap: 14px; }
.conta-dados { gap: 0; }
.conta-dados li { padding: 9px 2px; border: 0; border-bottom: 1px solid #f0ebdf; border-radius: 0; background: none; }
.conta-dados li:last-child { border-bottom: 0; }
.conta-dado-ico { width: 30px; height: 30px; border-radius: 9px; background: #faf6ea; border-color: #f0e6cc; }
.conta-dado-ico .ico { width: 15px; height: 15px; }
.conta-dados small { font-size: 10.5px; }
.conta-dados strong { font-size: 14.5px; }
.conta-cartao-link { min-height: 42px; font-size: 13.5px; }

/* Endereços: duas linhas de texto e as ações em texto logo abaixo. */
.conta-enderecos { gap: 8px; }
.conta-enderecos .conta-endereco { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: start; gap: 6px 12px; padding: 12px 14px; border-radius: 14px; }
.conta-enderecos .conta-endereco-pino { width: 30px; height: 30px; margin-top: 1px; }
.conta-enderecos .conta-endereco.principal .conta-endereco-pino { background: var(--grad-ouro); color: #1a1405; }
.conta-enderecos .conta-endereco:not(.principal) .conta-endereco-pino { background: #f3efe5; color: var(--texto-2); }
.conta-enderecos .conta-endereco-pino .ico { width: 15px; height: 15px; }
.conta-enderecos .conta-endereco > .conta-end-txt { display: grid; gap: 2px; flex: none; font-size: 13.5px; line-height: 1.4; color: var(--texto-3); }
.conta-end-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.conta-end-linha strong { font-size: 14.5px; line-height: 1.3; color: var(--texto); }
.conta-end-selo { padding: 1px 8px; font-size: 10.5px; }
.conta-enderecos .conta-ref { margin: 0; font-size: 12.5px; }
.conta-enderecos .conta-endereco > .conta-end-acoes { grid-column: 2; display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; border: 0; }
.conta-end-acoes a, .conta-end-acoes button { min-height: 30px; padding: 0; border: 0; border-radius: 0; background: none; font-size: 13px; color: var(--ouro-escuro); }
.conta-end-acoes a:hover, .conta-end-acoes button:hover { color: var(--texto); text-decoration: underline; }
.conta-end-acoes .ico { width: 13px; height: 13px; }
.conta-end-form > summary { min-height: 42px; font-size: 14px; }

/* Pedidos: número e total mais baixos, botões lado a lado. */
.ped-card { gap: 12px; }
.ped-thumb { width: 40px; height: 40px; border-radius: 10px; }
.ped-thumb svg { width: 100%; height: 100%; }
.ped-card-acoes .btn { flex: 1 1 0; height: 42px; font-size: 14px; }

@media (max-width: 560px) {
    .conta-hero { flex-wrap: nowrap; gap: 12px; padding: 14px 14px 14px 16px; border-radius: 18px; margin-bottom: 12px; }
    .conta-avatar { width: 44px; height: 44px; font-size: 20px; }
    .conta-hero .eyebrow { display: none; }
    .conta-hero h1 { font-size: 19px; margin: 0; }
    .conta-hero p { font-size: 12.5px; }
    .conta-hero-sair { width: auto; margin-left: auto; align-self: center; }
    .conta-hero-sair .btn { width: auto; height: 36px; padding: 0 12px; font-size: 13px; }
    .trat-convite { padding: 12px 14px; gap: 12px; border-radius: 16px; margin-bottom: 12px; }
    .trat-convite-ico { width: 40px; height: 40px; border-radius: 12px; }
    .trat-convite-ico .ico { width: 20px; height: 20px; }
    .trat-convite-txt strong { font-size: 16px; }
    .trat-convite-txt > span { font-size: 12.5px; }
    .conta-cartoes { gap: 12px; }
    .conta-cartao { padding: 14px; border-radius: 18px; gap: 12px; }
    .conta-cartao-ico { width: 36px; height: 36px; border-radius: 11px; }
    .conta-cartao-ico .ico { width: 18px; height: 18px; }
    .conta-cartao-topo h2 { font-size: 16.5px; }
    .conta-cartao-topo small { font-size: 12px; }
    .conta-enderecos .conta-endereco { padding: 10px 12px; }
    .meus-pedidos { margin-top: 12px; }
    .ped-lista { gap: 10px; }
    .ped-card { padding: 12px; gap: 10px; border-radius: 14px; }
    .ped-card-num small { font-size: 10px; }
    .ped-card-num strong { font-size: 17px; }
    .ped-status { padding: 4px 10px; font-size: 11.5px; }
    .ped-card-meio { flex-wrap: nowrap; gap: 10px; padding: 10px; border-radius: 12px; }
    .ped-thumb { width: 36px; height: 36px; }
    .ped-card-info strong { font-size: 13.5px; -webkit-line-clamp: 1; }
    .ped-card-info span { font-size: 12px; }
    .ped-card-total { flex-basis: auto; display: block; padding: 0; border: 0; text-align: right; }
    .ped-card-total small { font-size: 10px; }
    .ped-card-total strong { font-size: 15px; }
    .ped-etapas li span { width: 14px; height: 14px; border-width: 2px; }
    .ped-etapas li::before { top: 6px; height: 2px; }
    .ped-etapas li small { font-size: 9.5px; }
    .ped-card-acoes .btn { height: 40px; font-size: 13.5px; }
    .ped-cancelado { font-size: 12.5px; padding: 8px 10px; }
}

/* Painel > Clientes: histórico da conta (2026-09-14). Linha do tempo com o mais novo em cima;
   mudança feita pela loja ganha o fio dourado, a do cliente o cinza. */
.cli-hist { display: grid; gap: 0; max-height: 460px; overflow-y: auto; margin: 0; padding: 0 4px 0 0; list-style: none; }
.cli-hist li { display: grid; gap: 2px; padding: 9px 0 9px 14px; border-left: 3px solid #e4ddcc; }
.cli-hist li + li { border-top: 1px solid #f1ece0; }
.cli-hist li.cli-hist--loja { border-left-color: var(--ouro); }
.cli-hist-quando { font-size: 12px; color: var(--texto-3); }
.cli-hist strong { font-size: 14px; color: var(--texto); }
.cli-hist-det { font-size: 13px; line-height: 1.45; color: var(--texto-2); overflow-wrap: anywhere; }

/* Minha conta: "Meus pedidos" agora vem primeiro (pedido do dono) e a coluna de endereços é mais larga. */
.meus-pedidos { margin: 0 0 16px; }
.ped-thumb > .ico { width: 18px; height: 18px; color: var(--ouro-escuro); }
@media (max-width: 560px) {
    .meus-pedidos { margin: 0 0 12px; }
}

/* ============================================================
   Minha conta em ABAS (2026-09-14)
   Pedido do dono: "deixa grande bonitão e o endereço escondido, só aparece
   quando clicar em Endereços". Três botões grandes; o escolhido fica preto
   com letra dourada. Cada painel usa a largura toda.
   ============================================================ */
.conta-abas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0 0 16px; padding: 6px; border-radius: 20px; background: #fff; border: 1px solid var(--borda); box-shadow: var(--sombra-s); }
.conta-abas a { position: relative; display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 56px; padding: 0 10px; border-radius: 15px; color: var(--texto-2); font-size: 15.5px; font-weight: 700; text-decoration: none; transition: background .2s, color .2s, box-shadow .2s; }
.conta-abas a:hover { background: #faf6ea; color: var(--texto); }
.conta-abas a.ativa { background: var(--preto); color: var(--ouro-brilho); box-shadow: 0 12px 24px -14px rgb(0 0 0 / .75); }
.conta-abas .ico { width: 20px; height: 20px; flex: none; }
.conta-abas a:not(.ativa) .ico { color: var(--ouro-escuro); }
.conta-abas b { min-width: 22px; height: 22px; padding: 0 7px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--preto); color: var(--ouro-brilho); font-size: 12px; }
.conta-abas a.ativa b { background: var(--grad-ouro); color: #1a1405; }
[data-conta-painel] { margin: 0 0 16px; }

/* Meus dados, largura toda: duas colunas de caixinhas. */
.conta-painel-dados .conta-dados { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.conta-painel-dados .conta-dados li { padding: 14px; border: 1px solid #efe9dc; border-radius: 16px; background: #faf8f3; }
.conta-painel-dados .conta-dados li:last-child { border-bottom: 1px solid #efe9dc; }
.conta-painel-dados .conta-dado-ico { width: 40px; height: 40px; border-radius: 12px; background: #fff; }
.conta-painel-dados .conta-dado-ico .ico { width: 18px; height: 18px; }
.conta-painel-dados .conta-dados small { font-size: 11.5px; }
.conta-painel-dados .conta-dados strong { font-size: 16px; }
.conta-painel-dados .conta-cartao-link { align-self: center; min-width: 320px; min-height: 48px; font-size: 14.5px; }

/* Endereços, largura toda: texto à esquerda, ações à direita. */
.conta-painel-enderecos .conta-enderecos { gap: 10px; }
.conta-painel-enderecos .conta-enderecos .conta-endereco { grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 6px 16px; padding: 16px 18px; border-radius: 16px; }
.conta-painel-enderecos .conta-enderecos .conta-endereco-pino { width: 42px; height: 42px; margin: 0; }
.conta-painel-enderecos .conta-enderecos .conta-endereco-pino .ico { width: 19px; height: 19px; }
.conta-painel-enderecos .conta-enderecos .conta-endereco > .conta-end-txt { font-size: 14.5px; gap: 3px; }
.conta-painel-enderecos .conta-end-linha strong { font-size: 16.5px; }
.conta-painel-enderecos .conta-end-selo { padding: 2px 10px; font-size: 11.5px; }
.conta-painel-enderecos .conta-enderecos .conta-ref { font-size: 13px; }
.conta-painel-enderecos .conta-enderecos .conta-endereco > .conta-end-acoes { grid-column: 3; justify-content: flex-end; gap: 6px; }
.conta-painel-enderecos .conta-end-acoes a, .conta-painel-enderecos .conta-end-acoes button { min-height: 38px; padding: 0 12px; border: 1px solid var(--borda); border-radius: 11px; background: #fff; font-size: 13.5px; }
.conta-painel-enderecos .conta-end-acoes a:hover, .conta-painel-enderecos .conta-end-acoes button:hover { border-color: var(--ouro); text-decoration: none; }
.conta-painel-enderecos .conta-end-acoes .ico { width: 15px; height: 15px; }
.conta-painel-enderecos .conta-end-form > summary { min-height: 52px; font-size: 15px; }

@media (max-width: 700px) {
    .conta-painel-enderecos .conta-enderecos .conta-endereco { grid-template-columns: 38px minmax(0, 1fr); align-items: start; padding: 14px; }
    .conta-painel-enderecos .conta-enderecos .conta-endereco-pino { width: 38px; height: 38px; }
    .conta-painel-enderecos .conta-enderecos .conta-endereco > .conta-end-acoes { grid-column: 1 / -1; justify-content: flex-start; padding-top: 10px; border-top: 1px dashed #ece4d0; }
    .conta-painel-enderecos .conta-end-acoes form { display: flex; flex: 1 1 auto; }
    .conta-painel-enderecos .conta-end-acoes a, .conta-painel-enderecos .conta-end-acoes button { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 560px) {
    .conta-abas { gap: 4px; padding: 5px; border-radius: 18px; margin-bottom: 12px; }
    .conta-abas a { flex-direction: column; gap: 3px; min-height: 60px; padding: 6px 4px; border-radius: 13px; font-size: 13px; }
    .conta-abas .ico { width: 21px; height: 21px; }
    .conta-abas b { position: absolute; top: 5px; right: 8px; min-width: 19px; height: 19px; padding: 0 5px; font-size: 10.5px; }
    [data-conta-painel] { margin-bottom: 12px; }
    .conta-painel-dados .conta-dados { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .conta-painel-dados .conta-dados li { padding: 12px; }
    .conta-painel-dados .conta-dado-ico { width: 36px; height: 36px; }
    .conta-painel-dados .conta-dados strong { font-size: 15px; }
    .conta-painel-dados .conta-cartao-link { align-self: stretch; min-width: 0; }
    .conta-painel-enderecos .conta-end-linha strong { font-size: 15.5px; }
    .conta-painel-enderecos .conta-enderecos .conta-endereco > .conta-end-txt { font-size: 13.5px; }
}

/* Abas da conta, ajustes: ações do endereço sempre numa linha própria (o texto usa a largura toda);
   no celular os botões ficam lado a lado sem ícone; espaço entre "Continuar comprando" e os banners. */
.conta-painel-enderecos .conta-enderecos .conta-endereco { grid-template-columns: 42px minmax(0, 1fr); align-items: start; }
.conta-painel-enderecos .conta-enderecos .conta-endereco > .conta-end-acoes { grid-column: 2; justify-content: flex-start; padding-top: 4px; }
.auth-container > .conta-acoes:last-child { margin-bottom: 28px; }
@media (max-width: 700px) {
    .conta-painel-enderecos .conta-enderecos .conta-endereco { grid-template-columns: 38px minmax(0, 1fr); }
    .conta-painel-enderecos .conta-enderecos .conta-endereco > .conta-end-acoes { grid-column: 1 / -1; flex-wrap: nowrap; padding-top: 10px; }
    .conta-painel-enderecos .conta-end-acoes a, .conta-painel-enderecos .conta-end-acoes button { padding: 0 8px; white-space: nowrap; }
}
@media (max-width: 560px) {
    .conta-painel-enderecos .conta-end-acoes .ico { display: none; }
    .conta-painel-enderecos .conta-end-acoes a, .conta-painel-enderecos .conta-end-acoes button { font-size: 13px; }
}

/* ============================================================
   Página do pedido já pago / em andamento (2026-09-14)
   Pedido do dono ("dentro do pedido ta pobrinho"). Cabeçalho escuro com número,
   status e andamento com datas; itens com foto; endereço com o aviso de que
   fica gravado no pedido.
   ============================================================ */
.pedido-hero { position: relative; overflow: hidden; isolation: isolate; margin-bottom: 16px; padding: 22px 24px 20px; border-radius: 22px; background: var(--preto); color: #fff; }
.pedido-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(460px circle at 92% -30%, rgb(224 177 46 / .24), transparent 62%); }
.pedido-hero-topo { display: flex; align-items: center; gap: 14px; }
.pedido-hero-ico { width: 52px; height: 52px; flex: none; display: grid; place-items: center; border-radius: 16px; background: var(--grad-ouro); color: #1a1405; }
.pedido-hero-ico .ico { width: 26px; height: 26px; stroke-width: 2.2; }
.pedido-hero--cancelado .pedido-hero-ico { background: #3a1f1f; color: #ff9d9d; }
.pedido-hero-txt { flex: 1; min-width: 0; }
.pedido-hero .eyebrow { color: var(--ouro-brilho); }
.pedido-hero h1 { margin: 2px 0 0; font-size: clamp(24px, 3.2vw, 30px); font-weight: 800; line-height: 1.1; color: #fff; }
.pedido-hero-txt p { margin: 3px 0 0; font-size: 13.5px; color: #aaa597; }
.pedido-hero .ped-status { flex: none; align-self: flex-start; }
.pedido-hero-msg { margin: 14px 0 0; padding: 12px 14px; border-radius: 14px; background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .08); font-size: 14.5px; line-height: 1.45; color: #ece7da; }
.pedido-hero-etapas { margin-top: 18px; }
.pedido-hero-etapas li::before { background: #34322c; }
.pedido-hero-etapas li span { background: #1b1a17; border-color: #4a463b; }
.pedido-hero-etapas li.atual span { background: #0b0b0c; border-color: var(--ouro-brilho); }
.pedido-hero-etapas li small { color: #8d887b; }
.pedido-hero-etapas li.feita small, .pedido-hero-etapas li.atual small { color: #fff; }
.pedido-hero-etapas li em { font-style: normal; font-size: 11px; color: var(--ouro-brilho); }

.pedido-secao { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--borda); font-family: var(--fonte-titulo); font-size: 17px; font-weight: 700; }
.pedido-secao .ico { width: 19px; height: 19px; color: var(--ouro-escuro); }
.pedido-secao small { margin-left: auto; font-family: var(--fonte-corpo, inherit); font-size: 13px; font-weight: 600; color: var(--texto-3); }
.pedido-itens--fotos { gap: 8px; }
.pedido-itens--fotos li { grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 10px 8px 8px; border-radius: 14px; background: #faf8f3; }
.pi-foto { width: 48px; height: 48px; display: grid; place-items: center; overflow: hidden; border-radius: 11px; background: #fff; border: 1px solid #efe9dc; }
.pi-foto img { width: 100%; height: 100%; object-fit: contain; }
.pi-foto > .ico { width: 20px; height: 20px; color: var(--ouro-escuro); }
.pedido-itens--fotos .pi-nome { font-size: 14px; line-height: 1.35; }
.pedido-itens--fotos .pi-qtd { margin-right: 4px; }
.pedido-pgto { display: flex; align-items: center; gap: 7px; margin-top: 8px; }
.pedido-pgto .ico { width: 16px; height: 16px; flex: none; color: var(--ouro-escuro); }
.entrega-trava { display: flex; align-items: flex-start; gap: 7px; margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed #ece4d0; font-size: 12.5px; line-height: 1.4; color: var(--texto-3); }
.entrega-trava .ico { width: 14px; height: 14px; flex: none; margin-top: 1px; color: var(--ouro-escuro); }
[data-area-finalizar] .btn .ico { width: 18px; height: 18px; }
@media (max-width: 560px) {
    .pedido-hero { padding: 16px 16px 14px; border-radius: 18px; margin-bottom: 12px; }
    .pedido-hero-topo { flex-wrap: wrap; gap: 12px; }
    .pedido-hero-ico { width: 44px; height: 44px; border-radius: 13px; }
    .pedido-hero-ico .ico { width: 22px; height: 22px; }
    .pedido-hero .ped-status { order: 3; margin-left: 56px; margin-top: -4px; }
    .pedido-hero-msg { font-size: 13.5px; padding: 10px 12px; }
    .pedido-hero-etapas li em { font-size: 9.5px; }
    .pedido-itens--fotos li { grid-template-columns: 42px minmax(0, 1fr); gap: 4px 10px; }
    .pi-foto { width: 42px; height: 42px; grid-row: span 2; }
    .pedido-itens--fotos .pi-preco { grid-column: 2; font-size: 13.5px; }
}

/* Minha conta: rodapé colado nos banners (sem o espaço de baixo da página). Página do pedido no celular:
   ícone e número na primeira linha, o status embaixo do número (o status longo espremia o número). */
.conta-pagina { padding-bottom: 0; }
@media (max-width: 560px) {
    .pedido-hero-topo { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 6px 12px; }
    .pedido-hero .ped-status { grid-column: 2; order: 0; justify-self: start; margin: 0; }
    .pedido-hero .eyebrow { font-size: 10.5px; }
}

/* ============================================================
   Minha conta: foto de perfil na bolinha (2026-09-14)
   Pedido do dono. A bolinha continua com a letra quando não há foto; um
   selinho de câmera avisa que dá para tocar. O campo de arquivo cobre a
   bolinha com opacidade zero (o iPhone ignora campo escondido).
   ============================================================ */
.conta-avatar-form { position: relative; flex: none; margin: 0; }
.conta-avatar { position: relative; overflow: visible; cursor: pointer; }
.conta-avatar.tem-foto { background: #1b1a17; }
.conta-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.conta-avatar-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 0; }
.conta-avatar-cam { position: absolute; right: -3px; bottom: -3px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: #1a1405; border: 2px solid var(--preto); box-shadow: 0 4px 10px -4px rgb(0 0 0 / .6); pointer-events: none; }
.conta-avatar-cam .ico { width: 13px; height: 13px; stroke-width: 2.2; }
.conta-avatar:hover .conta-avatar-cam, .conta-avatar:focus-within .conta-avatar-cam { background: var(--ouro-brilho); }
.conta-avatar:focus-within { outline: 3px solid var(--ouro-brilho); outline-offset: 3px; }
.conta-avatar-form.enviando .conta-avatar { opacity: .55; }
.conta-avatar-form.enviando .conta-avatar-cam { animation: foto-girando 1s linear infinite; }
@keyframes foto-girando { to { transform: rotate(360deg); } }
.conta-foto-tirar { margin: 4px 0 0; }
.conta-foto-tirar button { padding: 0; border: 0; background: none; font: inherit; font-size: 12.5px; color: #aaa597; text-decoration: underline; cursor: pointer; }
.conta-foto-tirar button:hover { color: #fff; }
.cli-titulo { display: flex; align-items: center; gap: 12px; }
.cli-foto { width: 48px; height: 48px; flex: none; border-radius: 50%; object-fit: cover; border: 2px solid var(--ouro); }
@media (max-width: 560px) {
    .conta-avatar-cam { width: 20px; height: 20px; right: -4px; bottom: -4px; }
    .conta-avatar-cam .ico { width: 11px; height: 11px; }
}
@media (prefers-reduced-motion: reduce) {
    .conta-avatar-form.enviando .conta-avatar-cam { animation: none; }
}

/* ============================================================
   Pedido feito (status novo) redesenhado (2026-09-14)
   Pedido do dono ("quando dá parabéns, pedido feito, ta pobrinho"). Mesmo
   cabeçalho escuro do pedido pago + número com Copiar, reserva e 3 passos.
   ============================================================ */
.pedido-hero--novo .pedido-hero-ico { box-shadow: 0 0 0 6px rgb(224 177 46 / .16); }
.pedido-novo-info { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.pedido-num-copiar--escuro { min-height: 46px; padding: 0 6px 0 14px; border: 1.5px dashed rgb(224 177 46 / .55); background: rgb(255 255 255 / .05); color: #fff; }
.pedido-num-copiar--escuro span { font-size: 12px; color: #aaa597; }
.pedido-num-copiar--escuro b { font-size: 18px; color: #fff; }
.pedido-num-copiar--escuro em { background: var(--grad-ouro); color: #1a1405; }
.pedido-reserva { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 14px; border-radius: 12px; background: rgb(224 177 46 / .12); color: #f3dc9a; font-size: 14px; }
.pedido-reserva b { color: #fff; }
.pedido-reserva .ico { width: 18px; height: 18px; flex: none; color: var(--ouro-brilho); }
.pedido-passos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.pedido-passos li { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border-radius: 14px; background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .08); }
.pedido-passos li > span { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 2px solid #4a463b; font-size: 13px; font-weight: 800; color: #cfc8b8; }
.pedido-passos li.atual { border-color: rgb(224 177 46 / .45); background: rgb(224 177 46 / .09); }
.pedido-passos li.atual > span { border-color: transparent; background: var(--grad-ouro); color: #1a1405; }
.pedido-passos strong { display: block; font-size: 14px; color: #fff; }
.pedido-passos small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.35; color: #aaa597; }
@media (max-width: 700px) {
    .pedido-passos { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .pedido-passos li { padding: 10px 12px; }
}
@media (max-width: 560px) {
    .pedido-novo-info { gap: 8px; }
    .pedido-num-copiar--escuro, .pedido-reserva { width: 100%; }
    .pedido-num-copiar--escuro em { margin-left: auto; }
    .pedido-reserva { font-size: 13.5px; }
}
.pedido-novo-info > * { margin: 0; }

/* Pedido feito: passo 2 "Finalize no WhatsApp" pisca de leve e leva ao "Conferi os dados" + botão (pedido do dono). */
.pedido-passos li.passo-ir { padding: 0; border-color: rgb(37 211 102 / .55); background: rgb(37 211 102 / .08); animation: passo-pisca 1.8s ease-in-out infinite; }
.pedido-passos li.passo-ir a { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 12px; border-radius: 14px; color: inherit; text-decoration: none; }
.pedido-passos li.passo-ir a > span { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(180deg, #25d366, #0e8a3e); font-size: 13px; font-weight: 800; color: #fff; }
.pedido-passos li.passo-ir strong { display: flex; align-items: center; gap: 4px; }
.pedido-passos li.passo-ir strong .ico { width: 15px; height: 15px; color: #6ee79a; }
.pedido-passos li.passo-ir small { color: #cfe9d7; }
.pedido-passos li.passo-ir a:hover, .pedido-passos li.passo-ir a:focus-visible { background: rgb(37 211 102 / .12); outline: none; }
@keyframes passo-pisca {
    0%, 100% { box-shadow: 0 0 0 0 rgb(37 211 102 / 0); border-color: rgb(37 211 102 / .45); }
    50% { box-shadow: 0 0 0 5px rgb(37 211 102 / .22), 0 0 22px -4px rgb(37 211 102 / .55); border-color: rgb(110 231 154 / .95); }
}
#finalizar { scroll-margin-top: 110px; }
.confirmar-entrega.acender { animation: conferir-acende 2.2s ease-out; }
@keyframes conferir-acende {
    0%, 40% { box-shadow: 0 0 0 4px rgb(224 177 46 / .55); background: #fff1c9; }
    100% { box-shadow: 0 0 0 0 rgb(224 177 46 / 0); }
}
@media (prefers-reduced-motion: reduce) {
    .pedido-passos li.passo-ir, .confirmar-entrega.acender { animation: none; }
    .confirmar-entrega.acender { box-shadow: 0 0 0 4px rgb(224 177 46 / .55); }
}

/* Pedido feito: botão "Finalizar no WhatsApp" caprichado (pedido do dono). Apagado com borda tracejada até
   marcar "Conferi"; depois verde, com brilho passando e uma "respiração" leve. */
.btn-finalizar-zap {
    position: relative; overflow: hidden; isolation: isolate;
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 66px; margin-top: 12px; padding: 8px 18px 8px 9px;
    border-radius: 18px; border: 1px solid rgb(110 240 150 / .5);
    background: linear-gradient(180deg, #1fb857, #0b6b2e);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), 0 16px 32px -14px rgb(37 211 102 / .8);
    color: #fff; text-decoration: none; transition: transform .2s, box-shadow .2s, background .2s;
    animation: bfz-respira 2.6s ease-in-out infinite;
}
.btn-finalizar-zap::after {
    content: ""; position: absolute; inset: 0 auto 0 -60%; z-index: -1; width: 40%;
    background: linear-gradient(100deg, transparent, rgb(255 255 255 / .28), transparent);
    transform: skewX(-18deg); animation: bfz-brilho 3.2s ease-in-out infinite;
}
.bfz-ico { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 14px; background: rgb(255 255 255 / .18); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .24); }
.bfz-ico .ico { width: 27px; height: 27px; }
.bfz-txt { flex: 1; min-width: 0; display: grid; gap: 2px; text-align: left; }
.bfz-txt strong { font-size: 17.5px; font-weight: 800; line-height: 1.2; }
.bfz-txt small { font-size: 12.5px; line-height: 1.3; color: rgb(255 255 255 / .88); }
.bfz-seta { width: 22px; height: 22px; flex: none; transition: transform .2s; }
.btn-finalizar-zap:hover { transform: translateY(-2px); color: #fff; box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), 0 20px 38px -12px rgb(37 211 102 / .95); }
.btn-finalizar-zap:hover .bfz-seta { transform: translateX(4px); }
.btn-finalizar-zap:focus-visible { outline: 3px solid var(--ouro); outline-offset: 3px; }
.btn-finalizar-zap.bloqueado {
    animation: none; transform: none; cursor: not-allowed;
    background: #f1f5f2; border: 1.5px dashed #b7d6c1; box-shadow: none; color: #4d6b57;
}
.btn-finalizar-zap.bloqueado::after { display: none; }
.btn-finalizar-zap.bloqueado .bfz-ico { background: #fff; box-shadow: inset 0 0 0 1px #d6e8dc; color: #1f9d52; }
.btn-finalizar-zap.bloqueado .bfz-txt small { color: #6b8574; }
.btn-finalizar-zap.bloqueado .bfz-seta { opacity: .35; }
@keyframes bfz-respira { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.018); } }
@keyframes bfz-brilho { 0%, 55% { left: -60%; } 100% { left: 130%; } }
@media (max-width: 560px) {
    .btn-finalizar-zap { min-height: 62px; gap: 10px; padding-right: 14px; }
    .bfz-ico { width: 44px; height: 44px; }
    .bfz-txt strong { font-size: 16.5px; }
}
@media (prefers-reduced-motion: reduce) {
    .btn-finalizar-zap, .btn-finalizar-zap::after { animation: none; }
}

/* ============================================================
   Expedição em 4 etapas (2026-09-14)
   Pedido do dono: 1 separar e fotografar, 2 em separação (botão que muda o
   status do cliente), 3 confirmação do cliente, 4 rastreio. 5 contadores e
   régua de 4 passos; as media queries vêm DEPOIS da regra base.
   ============================================================ */
.exp-contadores { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.exp-passos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.exp-passo { padding: 14px; }
.exp-chip--separacao { background: #fff1dd; color: #9a4d00; }
.exp-status-troca { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 4px 0 8px; padding: 14px 16px; border-radius: 14px; background: #faf8f3; border: 1px solid #efe9dc; }
.exp-status-troca > span { display: grid; gap: 4px; }
.exp-status-troca small { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-3); }
.exp-status-troca b { justify-self: start; }
.exp-status-troca > .ico { width: 20px; height: 20px; color: var(--ouro-escuro); }
@media (max-width: 1180px) {
    .exp-contadores { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .exp-passos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .exp-passo:nth-child(3) { border-left: 0; }
    .exp-passo:nth-child(n+3) { border-top: 1px solid var(--borda); }
}
@media (max-width: 720px) {
    .exp-contadores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .exp-contador--hoje { grid-column: 1 / -1; }
    .exp-passos { grid-template-columns: minmax(0, 1fr); }
    .exp-passo + .exp-passo { border-left: 0; border-top: 1px solid var(--borda); }
    .exp-passo { padding: 10px 14px; }
}

/* ============================================================
   Rastrear caprichado, parabéns na entrega, calculadora no status (2026-09-14)
   Pedido do dono. .btn-rastrear = botão grande (preto e dourado; --ouro no
   cartão escuro do rastreio). .btn-rastreio--top = versão do cartão da Minha conta.
   ============================================================ */
.btn-rastrear {
    position: relative; overflow: hidden; isolation: isolate;
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; margin-top: 10px; padding: 8px 18px 8px 9px;
    border-radius: 18px; border: 1px solid rgb(224 177 46 / .55);
    background: radial-gradient(80% 160% at 0% 0%, rgb(224 177 46 / .22), transparent 60%), linear-gradient(135deg, #1c1c1e, #0b0b0c);
    box-shadow: 0 16px 30px -18px rgb(0 0 0 / .75); color: #fff; text-decoration: none; transition: transform .2s, box-shadow .2s;
}
.btn-rastrear::after {
    content: ""; position: absolute; inset: 0 auto 0 -60%; z-index: -1; width: 40%;
    background: linear-gradient(100deg, transparent, rgb(255 225 140 / .18), transparent); transform: skewX(-18deg);
    animation: bfz-brilho 3.6s ease-in-out infinite;
}
.brs-ico { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 14px; background: var(--grad-ouro); color: #1a1405; box-shadow: 0 8px 18px -10px rgb(224 177 46 / .9); }
.brs-ico .ico { width: 25px; height: 25px; stroke-width: 2; }
.brs-txt { flex: 1; min-width: 0; display: grid; gap: 2px; text-align: left; }
.brs-txt strong { font-size: 17px; font-weight: 800; line-height: 1.2; }
.brs-txt small { font-size: 12.5px; line-height: 1.3; color: #cfc8b8; }
.brs-seta { width: 22px; height: 22px; flex: none; color: var(--ouro-brilho); transition: transform .2s; }
.btn-rastrear:hover { transform: translateY(-2px); color: #fff; box-shadow: 0 20px 36px -16px rgb(0 0 0 / .85); }
.btn-rastrear:hover .brs-seta { transform: translateX(4px); }
.btn-rastrear:focus-visible { outline: 3px solid var(--ouro); outline-offset: 3px; }
.btn-rastrear--ouro { border-color: rgb(255 225 140 / .6); background: var(--grad-ouro); color: #1a1405; }
.btn-rastrear--ouro:hover { color: #1a1405; }
.btn-rastrear--ouro .brs-ico { background: #0b0b0c; color: var(--ouro-brilho); box-shadow: none; }
.btn-rastrear--ouro .brs-txt small { color: rgb(26 20 5 / .75); }
.btn-rastrear--ouro .brs-seta { color: #1a1405; }
.btn-rastrear--ouro::after { background: linear-gradient(100deg, transparent, rgb(255 255 255 / .35), transparent); }
.rastreio-transportadora { flex-direction: column; align-items: stretch; }
.rastreio-transportadora .btn-rastrear { margin-top: 4px; }

.btn-rastreio--top { gap: 8px; border: 1px solid rgb(224 177 46 / .55); background: radial-gradient(80% 160% at 0% 0%, rgb(224 177 46 / .2), transparent 60%), linear-gradient(135deg, #1c1c1e, #0b0b0c); color: var(--ouro-brilho); }
.btn-rastreio--top:hover { color: #fff; border-color: var(--ouro-brilho); }
.brt-ico { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 9px; background: var(--grad-ouro); color: #1a1405; }
.ped-card-acoes .brt-ico .ico { width: 16px; height: 16px; }

.rastreio-parabens { display: flex; align-items: center; gap: 12px; margin: 16px 0 4px; padding: 14px 16px; border-radius: 16px; background: linear-gradient(135deg, rgb(37 211 102 / .16), rgb(224 177 46 / .12)); border: 1px solid rgb(110 231 154 / .45); }
.rastreio-parabens-ico { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(180deg, #25d366, #0e8a3e); color: #fff; box-shadow: 0 0 0 5px rgb(37 211 102 / .18); }
.rastreio-parabens-ico .ico { width: 22px; height: 22px; stroke-width: 2.6; }
.rastreio-parabens strong { display: block; font-size: 15.5px; color: #fff; }
.rastreio-parabens span { font-size: 13px; color: #d9f3e2; }

.rastreio-calc { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 12px 14px; border-radius: 16px; background: rgb(255 255 255 / .06); border: 1px solid rgb(224 177 46 / .35); color: #fff; text-decoration: none; transition: border-color .2s, background .2s; }
.rastreio-calc:hover { color: #fff; border-color: var(--ouro-brilho); background: rgb(255 255 255 / .09); }
.rastreio-calc-ico { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--grad-ouro); color: #1a1405; }
.rastreio-calc-ico .ico { width: 22px; height: 22px; }
.rastreio-calc-txt { flex: 1; min-width: 0; display: grid; gap: 1px; }
.rastreio-calc-txt strong { font-size: 15px; }
.rastreio-calc-txt small { font-size: 12.5px; color: #cfc8b8; }
.rastreio-calc > .ico { width: 18px; height: 18px; flex: none; color: var(--ouro-brilho); }
.pedido-calc { margin-top: 10px; background: #0b0b0c; border-color: rgb(224 177 46 / .45); }
.pedido-calc:hover { background: #1a1a1b; }

.exp-conf-foto { width: 46px; height: 46px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 11px; background: #fff; border: 1px solid var(--borda); }
.exp-conf-foto img, .exp-conf-foto svg { width: 100%; height: 100%; object-fit: contain; }
.exp-conf-foto > .ico { width: 20px; height: 20px; color: var(--ouro-escuro); }
@media (max-width: 560px) {
    .btn-rastrear { min-height: 60px; gap: 10px; padding-right: 14px; }
    .brs-ico { width: 44px; height: 44px; }
    .brs-txt strong { font-size: 16px; }
    .exp-conf-foto { width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
    .btn-rastrear::after { animation: none; }
}

/* Painel > Pedidos: botões de filtro por status, com a contagem (pedido do dono, 2026-09-14). */
.ped-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.ped-filtro { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 8px 0 14px; border-radius: 999px; background: #fff; border: 1px solid var(--borda); color: var(--texto); font-size: 13.5px; font-weight: 600; text-decoration: none; white-space: nowrap; box-shadow: 0 1px 2px rgb(0 0 0 / .04); transition: border-color .15s, background .15s, transform .15s; }
.ped-filtro:hover { border-color: var(--ouro); transform: translateY(-1px); color: var(--texto); }
.ped-filtro .ico { width: 15px; height: 15px; color: var(--ouro-escuro); }
.ped-filtro b { min-width: 26px; height: 26px; padding: 0 8px; display: inline-grid; place-items: center; border-radius: 999px; background: #f1ede3; color: var(--texto-2); font-size: 12px; }
.ped-filtro-ponto { width: 9px; height: 9px; flex: none; border-radius: 50%; background: #b8b2a3; box-shadow: 0 0 0 3px rgb(0 0 0 / .04); }
.ped-filtro--novo .ped-filtro-ponto { background: #d97706; }
.ped-filtro--pago .ped-filtro-ponto { background: #059669; }
.ped-filtro--separando .ped-filtro-ponto { background: #2563eb; }
.ped-filtro--enviado .ped-filtro-ponto { background: #6d28d9; }
.ped-filtro--entregue .ped-filtro-ponto { background: #16a34a; }
.ped-filtro--cancelado .ped-filtro-ponto { background: #dc2626; }
.ped-filtro.ativo { background: var(--preto); border-color: var(--preto); color: var(--ouro-brilho); box-shadow: 0 10px 20px -14px rgb(0 0 0 / .7); }
.ped-filtro.ativo .ico { color: var(--ouro-brilho); }
.ped-filtro.ativo b { background: var(--grad-ouro); color: #1a1405; }
@media (max-width: 720px) {
    .ped-filtros { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 14px; padding: 2px 16px 6px; scrollbar-width: none; }
    .ped-filtros::-webkit-scrollbar { display: none; }
}

/* Chamadas sem a faixa do WhatsApp (página com botão próprio): o cartão das avaliações não sobe por cima do conteúdo. */
.aval-home.aval-home--solo { margin-top: 0; padding-top: 8px; }
/* "Falar sobre este pedido" no mesmo estilo do Finalizar, sem a "respiração" (não é a ação principal). */
.btn-finalizar-zap.btn-falar-zap { margin-top: 10px; animation: none; }
/* Folga entre a caixa do pedido/rastreio e os banners de baixo (pedido do dono: "muito perto"). */
.conta-pagina .pedido-cartao, .conta-pagina .rastreio-card { margin-bottom: 24px; }
.aval-home.aval-home--solo { padding-top: 0; }
@media (max-width: 560px) {
    .conta-pagina .pedido-cartao, .conta-pagina .rastreio-card { margin-bottom: 20px; }
}
/* Pedido entregue: calculadora logo abaixo da frase do cabeçalho escuro (pedido do dono). */
.pedido-hero .pedido-hero-calc { margin-top: 10px; }

/* ============================================================
   Rastreio redesenhado (2026-09-14)
   Pedido do dono ("dá uma melhorada, o botão ver na transportadora tá feio").
   Mesmo cabeçalho escuro da página do pedido + cartões claros: transportadora
   (código com Copiar, botão largo de uma linha, movimentações) e itens/entrega.
   ============================================================ */
.ras-voltar { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0 0 10px; }
.ras-voltar .link-voltar { margin: 0; color: var(--ouro-escuro); }
.ras-grade { display: grid; gap: 14px; margin-bottom: 24px; }
.conta-pagina .ras-grade .pedido-cartao { margin-bottom: 0; }
.ras-transp { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: #faf8f3; border: 1px solid #efe9dc; }
.ras-transp-logo { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 13px; background: var(--preto); color: var(--ouro-brilho); }
.ras-transp-logo .ico { width: 22px; height: 22px; }
.ras-transp-txt { flex: 1; min-width: 120px; display: grid; gap: 1px; }
.ras-transp-txt small, .ras-codigo small { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-3); }
.ras-transp-txt strong { font-size: 16px; color: var(--texto); }
.ras-codigo { display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 6px 6px 6px 12px; border-radius: 12px; border: 1.5px dashed #d8cda9; background: #fff; font: inherit; color: var(--texto); text-align: left; cursor: pointer; }
.ras-codigo:hover { border-color: var(--ouro); }
.ras-codigo span { display: grid; gap: 1px; }
.ras-codigo b { font-family: var(--fonte-titulo); font-size: 15px; letter-spacing: .02em; }
.ras-codigo em { padding: 8px 12px; border-radius: 9px; background: var(--grad-ouro); color: #1a1405; font-size: 12.5px; font-style: normal; font-weight: 700; }
.ras-ver {
    display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; margin-top: 12px; padding: 0 18px;
    border-radius: 14px; border: 1px solid rgb(224 177 46 / .55); background: linear-gradient(135deg, #1c1c1e, #0b0b0c);
    box-shadow: 0 14px 26px -18px rgb(0 0 0 / .8); color: #fff; font-size: 16px; font-weight: 700; white-space: nowrap; text-decoration: none;
    transition: transform .2s, box-shadow .2s;
}
.ras-ver > .ico { width: 21px; height: 21px; color: var(--ouro-brilho); }
.ras-ver-ext { width: 17px; height: 17px; flex: none; color: var(--ouro-brilho); }
.ras-ver:hover { transform: translateY(-2px); color: #fff; box-shadow: 0 18px 30px -16px rgb(0 0 0 / .85); }
.ras-ver:focus-visible { outline: 3px solid var(--ouro); outline-offset: 3px; }
.ras-sub { display: flex; align-items: center; gap: 7px; margin: 20px 0 0; font-size: 15px; font-weight: 700; }
.ras-sub .ico { width: 17px; height: 17px; color: var(--ouro-escuro); }
.ras-eventos { display: grid; margin: 12px 0 0; padding: 0; list-style: none; }
.ras-eventos li { position: relative; display: flex; gap: 12px; padding-bottom: 16px; }
.ras-eventos li::before { content: ""; position: absolute; left: 7px; top: 20px; bottom: 0; width: 2px; background: #ebe6da; }
.ras-eventos li:last-child { padding-bottom: 0; }
.ras-eventos li:last-child::before { display: none; }
.ras-ev-ponto { position: relative; z-index: 1; width: 16px; height: 16px; flex: none; margin-top: 3px; border-radius: 50%; background: #fff; border: 3px solid #d8d1bf; }
.ras-eventos li.atual .ras-ev-ponto { background: var(--preto); border-color: var(--ouro); box-shadow: 0 0 0 4px rgb(224 177 46 / .2); }
.ras-eventos strong { display: block; font-size: 14.5px; line-height: 1.35; color: var(--texto); }
.ras-eventos li:not(.atual) strong { font-weight: 600; color: var(--texto-2); }
.ras-ev-info { display: block; margin-top: 2px; font-size: 12.5px; color: var(--texto-3); }
.ras-vazio { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; padding: 12px; border-radius: 12px; background: #faf8f3; font-size: 13.5px; line-height: 1.45; color: var(--texto-2); }
.ras-vazio .ico { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--ouro-escuro); }
@media (max-width: 560px) {
    .ras-grade { gap: 12px; margin-bottom: 20px; }
    .ras-codigo { width: 100%; }
    .ras-codigo em { margin-left: auto; }
    .ras-ver { min-height: 54px; font-size: 15.5px; }
}
/* Rastreio: foco na linha do tempo (pedido do dono). A última movimentação ganha destaque; transportadora, código e
   o link externo ficam discretos no fim do cartão. */
.ras-cartao .ras-eventos { margin-top: 4px; }
.ras-eventos li.atual > div { flex: 1; margin-top: -8px; padding: 10px 12px; border-radius: 12px; background: #fffaf0; border: 1px solid rgb(193 145 1 / .35); }
.ras-eventos li.atual strong { font-size: 15.5px; }
.ras-eventos li.atual .ras-ev-info { color: var(--ouro-escuro); font-weight: 600; }
.ras-rodape { display: grid; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px dashed #e6dfcf; }
.ras-rodape .ras-transp { padding: 0; border: 0; background: none; }
.ras-rodape .ras-transp-logo { width: 40px; height: 40px; border-radius: 11px; }
.ras-rodape .ras-transp-logo .ico { width: 19px; height: 19px; }
.ras-rodape .ras-transp-txt strong { font-size: 15px; }
.ras-rodape .ras-ver { min-height: 44px; margin-top: 0; background: #fff; border: 1px solid var(--borda); box-shadow: none; color: var(--texto-2); font-size: 14px; font-weight: 600; }
.ras-rodape .ras-ver:hover { border-color: var(--ouro); color: var(--texto); transform: none; box-shadow: none; }
.ras-rodape .ras-ver-ext { color: var(--ouro-escuro); }
/* Fotos do seu pacote: só o título e as fotos (o texto de baixo saiu a pedido do dono). */
.pedido-fotos h3 { margin-bottom: 12px; }
/* Rastreio no celular (iPhone 17 Pro): o evento "entregue" dos Correios traz um link enorme de pesquisa, sem espaços,
   que empurrava a página para os lados. O texto quebra dentro do cartão e o bloco do evento pode encolher. */
.ras-eventos li > div { flex: 1 1 auto; min-width: 0; }
.ras-eventos strong, .ras-ev-info { overflow-wrap: anywhere; word-break: break-word; }
.ras-codigo b, .ras-transp-txt strong { overflow-wrap: anywhere; }
/* Painel no celular: os filtros da aba Pedidos rolam dentro da própria largura (a margem negativa de 16px passava
   da borda do painel, que é menor, e a página ficava 4px mais larga que a tela). */
@media (max-width: 720px) {
    .ped-filtros { margin: 0 0 14px; padding: 2px 0 6px; }
}

/* Painel > Página do produto (2026-09-14): caixinhas de mostrar/esconder e botão de voltar ao original. */
.pp-form .pp-liga { margin: 0 0 14px; padding: 10px 12px; border-radius: 12px; background: #faf8f3; border: 1px solid #efe9dc; font-weight: 600; }
.pp-form .pp-selo { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1.6fr); }
.pp-restaurar { margin: 14px 0 0; text-align: right; }
@media (max-width: 720px) {
    .pp-form .pp-selo { grid-template-columns: minmax(0, 1fr); }
    .pp-restaurar { text-align: center; }
}

/* Página do produto > selos: escolha do ícone pelo desenho (pedido do dono). */
.pp-selo-bloco { margin: 0 0 12px; padding: 14px; border-radius: 14px; border: 1px solid #efe9dc; background: #fdfcf9; }
.pp-selo-num { display: block; margin-bottom: 8px; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ouro-escuro); }
.pp-icones { min-inline-size: 0; margin: 0 0 12px; padding: 0; border: 0; }
.pp-icones legend { margin-bottom: 6px; padding: 0; font-size: 13.5px; font-weight: 600; }
.pp-icones-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; }
.pp-icone { position: relative; display: grid; justify-items: center; gap: 5px; padding: 10px 4px 8px; border-radius: 12px; border: 1.5px solid var(--borda); background: #fff; text-align: center; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; }
.pp-icone input { position: absolute; opacity: 0; pointer-events: none; }
.pp-icone span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; background: #f5f1e6; color: var(--texto-2); }
.pp-icone span .ico { width: 21px; height: 21px; }
.pp-icone small { font-size: 11.5px; line-height: 1.2; color: var(--texto-2); }
.pp-icone:hover { border-color: var(--ouro); }
.pp-icone:has(input:checked) { border-color: var(--ouro); background: #fffaf0; box-shadow: 0 0 0 3px rgb(193 145 1 / .16); }
.pp-icone:has(input:checked) span { background: var(--grad-ouro); color: #1a1405; }
.pp-icone:has(input:checked) small { color: var(--texto); font-weight: 700; }
.pp-icone:has(input:focus-visible) { outline: 3px solid var(--ouro); outline-offset: 2px; }
@media (max-width: 560px) {
    .pp-icones-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
    .pp-icone small { font-size: 10.5px; }
}

/* Ajustes → Rodapé: linhas do Atendimento com ▲ ▼ para trocar de lugar (2026-09-15). */
.atend-linha-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.atend-mover { display: inline-flex; gap: 6px; }
.atend-mover-btn {
    width: 44px; height: 38px; border-radius: 10px; border: 1px solid var(--borda); background: #fff;
    font: inherit; font-size: 14px; color: var(--texto); cursor: pointer; transition: border-color .15s, background .15s;
}
.atend-mover-btn:hover:not(:disabled) { border-color: var(--ouro); background: #fffaf0; }
.atend-mover-btn:disabled { opacity: .35; cursor: default; }
[data-atend-linha] { transition: box-shadow .3s, background .3s; }
.atend-linha--movida { box-shadow: 0 0 0 3px rgb(193 145 1 / .35); background: #fffaf0; }

/* Visão geral: backups (2026-09-15, só o dono). Verde = em dia; amarelo = lembrete da cópia no PC; vermelho = falhou. */
.bk-painel { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; margin: 0 0 18px; }
.bk-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--borda, #e9e6de); background: #fff; }
.bk-ico { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; }
.bk-ico .ico { width: 20px; height: 20px; }
.bk-txt { display: grid; gap: 3px; min-width: 0; }
.bk-txt strong { font-size: 14.5px; color: var(--texto, #18181b); }
.bk-txt > span { font-size: 13px; line-height: 1.45; color: var(--texto-2, #52525b); }
.bk--ok .bk-ico { background: #dcfce7; color: #15803d; }
.bk--lembrete { border-color: #f5c451; background: #fffbeb; }
.bk--lembrete .bk-ico { background: #fde68a; color: #92400e; }
.bk--erro { border-color: #fca5a5; background: #fef2f2; }
.bk--erro .bk-ico { background: #ef4444; color: #fff; }
.bk--erro .bk-txt strong { color: #991b1b; }

/* Revisão geral (2026-09-15): no celular estreito com letra grande o "Continuar" do cadastro vazava do botão. */
@media (max-width: 420px) {
    .passo-botoes .btn { min-width: 0; padding-inline: 12px; gap: 6px; white-space: normal; line-height: 1.15; }
}
/* "Esqueci minha senha" com área de toque maior (tinha 19px de altura). */
.login-form a[href="/esqueci-senha"] { display: inline-block; padding-block: 10px; }

/* ============================================================
   Revisão geral (2026-09-15) — achados do robô na conta e no painel
   ============================================================ */
/* Duas colunas de campos: "1fr" sozinho estica com o conteúdo e o cadastro passava da tela a ~900px.
   Só a partir de 761px (no celular a regra de uma coluna continua valendo). */
@media (min-width: 761px) {
    .campo-linha { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .campo-linha input, .campo-linha select { min-width: 0; }
}
@media (max-width: 760px) {
    /* Área de toque maior para links pequenos (tinham 20–25px de altura), sem mudar o visual. */
    .link-editar, .link-excluir { display: inline-flex; align-items: center; min-height: 40px; }
    .link-voltar, .painel-link, .trat-voltar, .cli-zap { min-height: 40px; }
    .exp-chip { min-height: 32px; }
    /* Painel pelo celular: campos de texto com letra 16px (menor que isso o iPhone dá zoom ao tocar). */
    body.admin-quadro input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]),
    body.admin-quadro select, body.admin-quadro textarea { font-size: 16px; }
}