/* =========================================================
   Área do cliente — entrar, cadastrar e acompanhar pedidos

   Folha própria, separada de style.css e de admin.css. São telas de conta:
   quem abre aqui quer uma resposta rápida, não o cardápio inteiro carregado
   junto. --primaria é injetada em linha pelo PHP, a partir da marca da loja.
   ========================================================= */

:root {
    --primaria: #e11d48;
    --primaria-texto: #ffffff;

    --fundo: #f4f6f9;
    --superficie: #ffffff;
    --superficie-2: #eef1f6;
    --borda: #dfe3ea;
    --texto: #16202e;
    --texto-suave: #64748b;
    --sucesso: #15803d;
    --sucesso-fundo: #dcfce7;
    --erro: #b91c1c;
    --erro-fundo: #fee2e2;

    --raio: 12px;
    --raio-lg: 18px;
    --sombra: 0 1px 3px rgba(15, 23, 42, .07);
    --sombra-lg: 0 14px 38px rgba(15, 23, 42, .14);
    --largura: 820px;

    --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --fundo: #0d1117;
        --superficie: #161b22;
        --superficie-2: #1d2330;
        --borda: #2a3140;
        --texto: #e8edf4;
        --texto-suave: #94a3b8;
        --sucesso: #4ade80;
        --sucesso-fundo: #052e1a;
        --erro: #fca5a5;
        --erro-fundo: #3b0d0d;
        --sombra: 0 1px 3px rgba(0, 0, 0, .4);
        --sombra-lg: 0 14px 38px rgba(0, 0, 0, .6);
    }
}

*, *::before, *::after { box-sizing: border-box; }

.cl-corpo {
    margin: 0;
    font-family: var(--fonte);
    background: var(--fundo);
    color: var(--texto);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.cl-corpo img { max-width: 100%; display: block; }
.cl-corpo a { color: var(--primaria); }

:focus-visible { outline: 3px solid color-mix(in srgb, var(--primaria) 55%, transparent); outline-offset: 2px; }

/* ---------------------------------------------------------
   Marca
   --------------------------------------------------------- */

.cl-marca {
    display: inline-flex; align-items: center; gap: 12px;
    text-decoration: none; color: inherit;
}
.cl-marca strong { display: block; font-size: 1rem; letter-spacing: -.01em; }
.cl-marca small { display: block; font-size: .74rem; color: var(--texto-suave); }

.cl-marca__logo {
    width: 44px; height: 44px; border-radius: 13px;
    object-fit: contain; background: var(--superficie-2); padding: 3px;
    flex-shrink: 0;
}
.cl-marca__logo--letra {
    display: grid; place-items: center; padding: 0;
    background: var(--primaria); color: var(--primaria-texto);
    font-weight: 800; font-size: 1.3rem;
}

/* ---------------------------------------------------------
   Botões e campos
   --------------------------------------------------------- */

.cl-botao {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 12px 20px; border: 1px solid var(--borda); border-radius: 999px;
    background: var(--superficie); color: var(--texto);
    font-family: inherit; font-size: .92rem; font-weight: 700;
    text-decoration: none; cursor: pointer;
    transition: border-color .16s ease, filter .16s ease;
}
.cl-botao:hover { border-color: var(--primaria); }

.cl-botao--primario {
    background: var(--primaria); border-color: var(--primaria);
    color: var(--primaria-texto); width: 100%; margin-top: 6px;
}
.cl-botao--primario:hover { filter: brightness(1.07); }

.cl-botao--mini { padding: 8px 14px; font-size: .82rem; }
.cl-botao--sair { color: var(--erro); }

.cl-campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 15px; flex: 1; min-width: 150px; }
.cl-campo--curto { flex: 0 1 130px; }

.cl-campo__rotulo { font-size: .8rem; font-weight: 700; color: var(--texto-suave); }

.cl-campo__entrada {
    width: 100%; padding: 12px 14px;
    border: 1px solid var(--borda); border-radius: var(--raio);
    background: var(--superficie); color: var(--texto);
    font-family: inherit; font-size: 1rem;
}
.cl-campo__entrada:focus { outline: 0; border-color: var(--primaria); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primaria) 18%, transparent); }
.cl-campo__entrada:disabled { opacity: .6; cursor: not-allowed; }

.cl-linha { display: flex; gap: 12px; flex-wrap: wrap; }

.cl-grupo {
    border: 1px solid var(--borda); border-radius: var(--raio);
    padding: 16px 14px 4px; margin: 0 0 16px;
}
.cl-grupo legend { padding: 0 8px; font-size: .8rem; font-weight: 800; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .07em; }

.cl-nota { margin: -6px 0 14px; font-size: .78rem; color: var(--texto-suave); }

/* ---------------- Campo de senha com o olhinho ----------------
   O ícone é desenhado no CSS para não puxar fonte de ícones nem SVG
   externo: a tela de login continua abrindo com uma requisição a menos. */

.cl-senha { position: relative; display: block; }
.cl-senha .cl-campo__entrada { padding-right: 50px; }

.cl-senha__olho {
    position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
    width: 36px; height: 36px; padding: 0;
    border: 0; border-radius: 10px; cursor: pointer;
    background: none; color: var(--texto-suave);
    display: grid; place-items: center;
}
.cl-senha__olho:hover { background: var(--superficie-2); color: var(--texto); }

.cl-senha__olho::before {
    content: ""; width: 20px; height: 13px;
    border: 2px solid currentColor;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
.cl-senha__olho::after {
    content: ""; position: absolute;
    width: 6px; height: 6px; border-radius: 50%;
    background: currentColor;
}
/* Senha visível: a pupila vira a barra diagonal do "ocultar". */
.cl-senha__olho.is-vendo { color: var(--primaria); }
.cl-senha__olho.is-vendo::after {
    width: 2px; height: 23px; border-radius: 0;
    transform: rotate(45deg);
}

.cl-conferencia { margin: -6px 0 14px; font-size: .82rem; font-weight: 700; }
.cl-conferencia.is-ok { color: var(--sucesso); }
.cl-conferencia.is-erro { color: var(--erro); }

/* ---------------------------------------------------------
   Tela de entrada e cadastro
   --------------------------------------------------------- */

.cl-corpo--entrada { display: grid; place-items: center; min-height: 100vh; padding: 28px 16px; }

.cl-entrada { width: 100%; max-width: 520px; }

.cl-entrada .cl-marca { justify-content: center; width: 100%; margin-bottom: 20px; }

.cl-cartao {
    background: var(--superficie); border: 1px solid var(--borda);
    border-radius: var(--raio-lg); box-shadow: var(--sombra);
    padding: 22px; margin-bottom: 18px;
}
.cl-corpo--entrada .cl-cartao { padding: 0 22px 26px; overflow: hidden; }

.cl-abas {
    display: flex; gap: 4px; margin: 0 -22px 22px;
    padding: 6px; background: var(--superficie-2);
    border-bottom: 1px solid var(--borda);
}
.cl-aba {
    flex: 1; padding: 11px 12px; border-radius: 10px;
    text-align: center; text-decoration: none;
    font-size: .92rem; font-weight: 700; color: var(--texto-suave);
}
.cl-aba.is-ativa { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra); }

.cl-titulo { margin: 0 0 6px; font-size: 1.35rem; font-weight: 800; letter-spacing: -.025em; }
.cl-subtitulo { margin: 0 0 16px; font-size: 1.05rem; font-weight: 800; }
.cl-texto { margin: 0 0 20px; font-size: .9rem; color: var(--texto-suave); }

.cl-erro {
    margin: 0 0 18px; padding: 12px 15px; border-radius: var(--raio);
    background: var(--erro-fundo); color: var(--erro);
    font-size: .88rem; font-weight: 600;
}

.cl-rodape-form { margin: 18px 0 0; text-align: center; font-size: .88rem; color: var(--texto-suave); }
.cl-voltar { margin: 18px 0 0; text-align: center; font-size: .86rem; }
.cl-voltar a { color: var(--texto-suave); }

/* ---------------------------------------------------------
   Painel: barra do topo e navegação
   --------------------------------------------------------- */

.cl-topo {
    background: var(--superficie); border-bottom: 1px solid var(--borda);
    position: sticky; top: 0; z-index: 20;
}
.cl-topo__interno {
    max-width: var(--largura); margin: 0 auto; padding: 12px 18px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
}
.cl-topo__acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cl-ola { font-size: .88rem; color: var(--texto-suave); }

.cl-conteudo { max-width: var(--largura); margin: 0 auto; padding: 20px 18px 56px; }

.cl-navegacao {
    display: flex; gap: 4px; margin-bottom: 22px;
    padding: 5px; border-radius: 999px;
    background: var(--superficie-2); border: 1px solid var(--borda);
    overflow-x: auto;
}
.cl-navegacao__item {
    flex: 1; min-width: max-content;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 10px 16px; border-radius: 999px;
    text-decoration: none; white-space: nowrap;
    font-size: .88rem; font-weight: 700; color: var(--texto-suave);
}
.cl-navegacao__item.is-ativa { background: var(--primaria); color: var(--primaria-texto); }

.cl-selo {
    min-width: 20px; padding: 1px 6px; border-radius: 999px;
    background: var(--erro); color: #fff;
    font-size: .7rem; font-weight: 800; line-height: 1.5;
}
.cl-navegacao__item.is-ativa .cl-selo { background: var(--primaria-texto); color: var(--primaria); }

.cl-secao { margin: 0 0 12px; font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-suave); }
.cl-cabecalho-secao { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.cl-cabecalho-secao .cl-secao { margin: 0; }
.cl-inline { margin: 0; }

.cl-recado {
    margin: 0 0 18px; padding: 12px 15px; border-radius: var(--raio);
    font-size: .88rem; font-weight: 600;
}
.cl-recado--sucesso { background: var(--sucesso-fundo); color: var(--sucesso); }
.cl-recado--erro { background: var(--erro-fundo); color: var(--erro); }

.cl-vazio {
    padding: 40px 22px; text-align: center;
    background: var(--superficie); border: 1px dashed var(--borda);
    border-radius: var(--raio-lg); color: var(--texto-suave);
}
.cl-vazio p { margin: 0 0 16px; }
.cl-vazio .cl-botao { width: auto; }

/* ---------------------------------------------------------
   Estados do pedido — mesma paleta do painel do lojista
   --------------------------------------------------------- */

.cl-estado {
    display: inline-block; padding: 3px 11px; border-radius: 999px;
    font-size: .72rem; font-weight: 800; white-space: nowrap;
    background: color-mix(in srgb, var(--tom) 16%, transparent);
    color: var(--tom);
}
.cl-estado--espera  { --tom: #b45309; }
.cl-estado--novo    { --tom: #1d4ed8; }
.cl-estado--preparo { --tom: #7e22ce; }
.cl-estado--rota    { --tom: #0e7490; }
.cl-estado--pronto  { --tom: #15803d; }
.cl-estado--morto   { --tom: #64748b; }

@media (prefers-color-scheme: dark) {
    .cl-estado--espera  { --tom: #fbbf24; }
    .cl-estado--novo    { --tom: #60a5fa; }
    .cl-estado--preparo { --tom: #c084fc; }
    .cl-estado--rota    { --tom: #22d3ee; }
    .cl-estado--pronto  { --tom: #4ade80; }
    .cl-estado--morto   { --tom: #94a3b8; }
}

/* ---------------- Cartão do pedido em andamento ----------------
   É a resposta à pergunta que trouxe o cliente até aqui, então ocupa o topo
   e é grande o bastante para ler de relance, sem clicar em nada. */

.cl-andamento { margin-bottom: 28px; }

.cl-agora {
    display: grid; gap: 4px;
    padding: 18px 20px; margin-bottom: 10px;
    border-radius: var(--raio-lg);
    border: 1px solid color-mix(in srgb, var(--tom) 35%, var(--borda));
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--tom) 12%, transparent), transparent 65%),
        var(--superficie);
    border-left: 5px solid var(--tom);
}
.cl-agora--espera  { --tom: #f59e0b; }
.cl-agora--novo    { --tom: #2563eb; }
.cl-agora--preparo { --tom: #9333ea; }
.cl-agora--rota    { --tom: #0891b2; }
.cl-agora--pronto  { --tom: #16a34a; }
.cl-agora--morto   { --tom: #94a3b8; }

.cl-agora__rotulo { font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave); }
.cl-agora__status { font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; color: var(--tom); }
.cl-agora__texto { font-size: .88rem; color: var(--texto-suave); }

/* ---------------- Lista de pedidos ---------------- */

.cl-pedidos { display: grid; gap: 10px; }

.cl-pedido {
    background: var(--superficie); border: 1px solid var(--borda);
    border-left: 4px solid var(--tom, var(--borda));
    border-radius: var(--raio); overflow: hidden; box-shadow: var(--sombra);
}
.cl-pedido--espera  { --tom: #f59e0b; }
.cl-pedido--novo    { --tom: #2563eb; }
.cl-pedido--preparo { --tom: #9333ea; }
.cl-pedido--rota    { --tom: #0891b2; }
.cl-pedido--pronto  { --tom: #16a34a; }
.cl-pedido--morto   { --tom: #94a3b8; }

.cl-pedido__resumo {
    display: grid; gap: 6px; width: 100%;
    padding: 15px 18px; border: 0; background: none;
    font-family: inherit; color: inherit; text-align: left; cursor: pointer;
}
.cl-pedido__resumo:hover { background: var(--superficie-2); }

.cl-pedido__linha1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cl-pedido__linha2 { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: .86rem; color: var(--texto-suave); }
.cl-pedido__linha2 strong { font-size: 1.05rem; color: var(--texto); }

.cl-pedido__codigo {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: 1rem; font-weight: 800; letter-spacing: .06em;
}
.cl-pedido__abrir { font-size: .78rem; font-weight: 700; color: var(--primaria); }

/* ---------------------------------------------------------
   Pop-up de detalhes
   --------------------------------------------------------- */

.cl-modal {
    width: min(620px, 100%); max-height: 90vh; padding: 0;
    border: 1px solid var(--borda); border-radius: var(--raio-lg);
    background: var(--superficie); color: var(--texto);
    box-shadow: var(--sombra-lg); overflow: hidden;
}
.cl-modal::backdrop { background: rgba(9, 13, 20, .55); backdrop-filter: blur(2px); }
.cl-modal[open] { animation: cl-modal-entra .2s cubic-bezier(.22,1,.36,1) both; }

@keyframes cl-modal-entra { from { opacity: 0; transform: translateY(16px) scale(.98); } }

.cl-modal__topo {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 15px 18px; border-bottom: 1px solid var(--borda);
    background: var(--superficie-2); position: sticky; top: 0; z-index: 2;
}
.cl-modal__titulo { margin: 0; font-size: 1rem; font-weight: 800; }

.cl-modal__fechar {
    width: 36px; height: 36px; flex-shrink: 0;
    border: 1px solid var(--borda); border-radius: 10px;
    background: var(--superficie); color: var(--texto-suave);
    font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.cl-modal__fechar:hover { border-color: var(--erro); color: var(--erro); }

.cl-modal__corpo { padding: 18px; overflow-y: auto; max-height: calc(90vh - 67px); }

/* No celular vira folha que sobe do rodapé: é o gesto que a pessoa já
   espera de um app, e sobra área para o polegar alcançar o fechar. */
@media (max-width: 620px) {
    .cl-modal {
        width: 100%; max-width: 100%; max-height: 92vh;
        margin: auto auto 0; border-radius: var(--raio-lg) var(--raio-lg) 0 0;
    }
    .cl-modal[open] { animation: cl-folha-sobe .24s cubic-bezier(.22,1,.36,1) both; }
    .cl-modal__corpo { padding: 15px; max-height: calc(92vh - 67px); }
}

@keyframes cl-folha-sobe { from { transform: translateY(100%); } }

.cl-detalhe__topo {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 18px;
    padding-bottom: 14px; border-bottom: 1px solid var(--borda);
}
.cl-detalhe__topo > div { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cl-detalhe__topo strong { font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; }
.cl-detalhe__linha { margin: 3px 0; font-size: .9rem; }

.cl-bloco { margin-bottom: 20px; }
.cl-rotulo { margin: 0 0 8px; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-suave); }

/* ---------------- Linha do tempo ---------------- */

.cl-linha-tempo { list-style: none; margin: 0; padding: 0 0 0 22px; position: relative; }
.cl-linha-tempo::before {
    content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px;
    width: 2px; background: var(--borda);
}

.cl-linha-tempo__item { position: relative; padding: 6px 0; }
.cl-linha-tempo__item::before {
    content: ""; position: absolute; left: -22px; top: 12px;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--tom, var(--texto-suave));
    box-shadow: 0 0 0 3px var(--superficie);
}
.cl-linha-tempo__item--espera  { --tom: #f59e0b; }
.cl-linha-tempo__item--novo    { --tom: #2563eb; }
.cl-linha-tempo__item--preparo { --tom: #9333ea; }
.cl-linha-tempo__item--rota    { --tom: #0891b2; }
.cl-linha-tempo__item--pronto  { --tom: #16a34a; }
.cl-linha-tempo__item--morto   { --tom: #94a3b8; }

.cl-linha-tempo__item strong { display: block; font-size: .92rem; }
.cl-linha-tempo__item small { font-size: .78rem; color: var(--texto-suave); }

/* Etapa mais recente em destaque: é onde o pedido está agora. */
.cl-linha-tempo__item:last-child strong { color: var(--tom); }
.cl-linha-tempo__item:last-child::before { box-shadow: 0 0 0 3px var(--superficie), 0 0 0 6px color-mix(in srgb, var(--tom) 25%, transparent); }

/* ---------------------------------------------------------
   Itens e totais
   --------------------------------------------------------- */

.cl-itens { list-style: none; margin: 0; padding: 0; }
.cl-itens li {
    display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px;
    padding: 10px 0; border-bottom: 1px dashed var(--borda); font-size: .9rem;
}
.cl-itens li:last-child { border-bottom: 0; }
.cl-itens__qtd { font-weight: 800; color: var(--primaria); }
.cl-itens__nome small { display: block; font-size: .78rem; color: var(--texto-suave); }
.cl-itens__preco { font-weight: 700; white-space: nowrap; }

.cl-contas { padding: 14px 16px; border-radius: var(--raio); background: var(--superficie-2); }
.cl-contas p { display: flex; justify-content: space-between; gap: 12px; margin: 5px 0; font-size: .9rem; }
.cl-contas__desconto { color: var(--sucesso); font-weight: 700; }
.cl-contas__total {
    margin-top: 10px !important; padding-top: 10px;
    border-top: 1px solid var(--borda);
    font-size: 1.05rem !important; font-weight: 800;
}

/* ---------------------------------------------------------
   Avisos
   --------------------------------------------------------- */

.cl-avisos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.cl-aviso {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 14px 16px; border-radius: var(--raio);
    background: var(--superficie); border: 1px solid var(--borda);
}
/* Não lido ganha fundo e borda na cor do estado: dá para varrer a lista e
   ver só o que chegou depois da última visita. */
.cl-aviso.is-novo {
    border-color: color-mix(in srgb, var(--tom) 40%, var(--borda));
    background: color-mix(in srgb, var(--tom) 7%, var(--superficie));
}

.cl-aviso--espera  { --tom: #f59e0b; }
.cl-aviso--novo    { --tom: #2563eb; }
.cl-aviso--preparo { --tom: #9333ea; }
.cl-aviso--rota    { --tom: #0891b2; }
.cl-aviso--pronto  { --tom: #16a34a; }
.cl-aviso--morto   { --tom: #94a3b8; }

.cl-aviso__ponto {
    width: 10px; height: 10px; margin-top: 6px; border-radius: 50%;
    background: var(--tom); flex-shrink: 0; opacity: .35;
}
.cl-aviso.is-novo .cl-aviso__ponto { opacity: 1; }

.cl-aviso strong { display: block; font-size: .95rem; }
.cl-aviso p { margin: 3px 0; font-size: .88rem; color: var(--texto-suave); }
.cl-aviso small { font-size: .76rem; color: var(--texto-suave); }

/* ---------------------------------------------------------
   Avisos flutuantes (mudança de status com a tela aberta)
   --------------------------------------------------------- */

.cl-toasts {
    position: fixed; right: 16px; bottom: 16px; z-index: 60;
    display: grid; gap: 8px; width: min(340px, calc(100vw - 32px));
    pointer-events: none;
}

.cl-toast {
    padding: 13px 16px; border-radius: var(--raio);
    background: var(--superficie); color: var(--texto);
    border: 1px solid var(--borda); border-left: 4px solid var(--primaria);
    box-shadow: var(--sombra-lg);
    animation: cl-toast-entra .26s cubic-bezier(.22,1,.36,1) both;
}
.cl-toast strong { display: block; font-size: .92rem; }
.cl-toast span { display: block; font-size: .84rem; color: var(--texto-suave); }
.cl-toast.is-saindo { animation: cl-toast-sai .3s ease forwards; }

.cl-toast--preparando   { border-left-color: #9333ea; }
.cl-toast--saiu_entrega { border-left-color: #0891b2; }
.cl-toast--concluido    { border-left-color: #16a34a; }
.cl-toast--pago         { border-left-color: #2563eb; }
.cl-toast--cancelado    { border-left-color: #b91c1c; }

@keyframes cl-toast-entra { from { opacity: 0; transform: translateY(14px); } }
@keyframes cl-toast-sai { to { opacity: 0; transform: translateX(20px); } }

@media (max-width: 620px) {
    .cl-toasts { left: 16px; right: 16px; width: auto; bottom: 12px; }
    .cl-topo__interno { padding: 10px 14px; }
    .cl-ola { display: none; }
    .cl-conteudo { padding: 16px 14px 48px; }
    .cl-cartao { padding: 18px 16px; }
    .cl-corpo--entrada .cl-cartao { padding: 0 16px 22px; }
    .cl-abas { margin: 0 -16px 20px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Espaçamento e alvos de toque para a conta e acompanhamento. */
.cl-botao { min-height:44px; border-radius:10px; }
.cl-campo__entrada { min-height:48px; font-size:1rem; }
.cl-conteudo { padding-top:28px; padding-bottom:calc(56px + env(safe-area-inset-bottom,0px)); }
.cl-cartao,.cl-pedido { border-radius:16px; }
.cl-pedidos { gap:16px; }
.cl-pedido__resumo { padding:20px; }
.cl-pedido__linha2 { flex-wrap:wrap; }
.cl-navegacao { border-radius:14px; }
.cl-navegacao__item { min-height:44px; border-radius:10px; }
@media(max-width:480px) { .cl-campo { min-width:0; } .cl-topo__acoes { width:100%; } .cl-topo__acoes .cl-botao { flex:1; } .cl-pedido__resumo { padding:16px; } }