/* Painel do comerciante e telas abertas por link (entregador, avaliação): feitos para o celular.
   Uma decisão por tela, botões grandes, letra legível. Nenhuma cor aqui: só variáveis do tema (theme.css). */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 17px; line-height: 1.4; color: var(--papel-texto); background: var(--papel-fundo); overflow-wrap: anywhere; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
a { color: var(--comp-link-texto); }
h1 { font-size: 1.4rem; margin: 0 0 .75rem; }
h2 { font-size: 1.1rem; margin: 1.25rem 0 .5rem; }
p { margin: 0 0 .75rem; }
.ic { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.18em; }
.top { background: var(--papel-fundo); color: var(--papel-texto); border-bottom: 1px solid var(--papel-linha); padding: .75rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.top strong { font-size: 1.05rem; min-width: 0; }
.top.loja { border-bottom: 3px solid var(--papel-cor-de-loja); }
.top.loja strong { color: var(--papel-cor-de-loja); font-size: 1.15rem; }
.top button { color: var(--comp-botao-neutro-texto); background: var(--comp-botao-neutro-fundo); border: 1.5px solid var(--comp-botao-neutro-contorno); border-radius: 12px; font: inherit; font-size: .95rem; padding: .35rem .8rem; min-height: 48px; white-space: nowrap; cursor: pointer; }
.top button:active { color: var(--comp-botao-neutro-texto); background: var(--comp-botao-neutro-fundo-pressionado); transform: translateY(1px); }
main { flex: 1; width: 100%; max-width: 34rem; margin: 0 auto; padding: 1rem 1rem 1.5rem; }
.card { background: var(--comp-cartao-fundo); border-radius: 14px; padding: 1rem; margin: 0 0 .9rem; border: 1px solid var(--comp-cartao-contorno); }
.muted { color: var(--papel-texto-de-apoio); font-size: .9rem; }
.right { text-align: right; }
.t2 { font-size: 1.5rem; font-weight: 800; line-height: 1.2; }

/* foco do teclado: um anel só, grafite, igual em toda tela */
:focus-visible { outline: 2px solid var(--comp-campo-contorno-foco); outline-offset: 2px; }

/* navegação fixa embaixo: quatro botões grandes, ícone de traço e rótulo */
.nav { position: sticky; bottom: 0; background: var(--papel-superficie); border-top: 1px solid var(--papel-linha); display: grid; grid-template-columns: repeat(4, 1fr); padding-bottom: env(safe-area-inset-bottom); z-index: 5; }
.nav a { text-decoration: none; color: var(--comp-barra-de-navegacao-texto); text-align: center; padding: .45rem .2rem .55rem; font-size: .8rem; min-height: 58px; border-top: 3px solid var(--papel-superficie); }
.nav a .ic { display: block; width: 24px; height: 24px; margin: 0 auto .1rem; }
.nav a.on { color: var(--comp-barra-de-navegacao-texto-escolhido); font-weight: 700; border-top-color: var(--comp-barra-de-navegacao-texto-escolhido); }
.nav a:focus-visible { outline-offset: -3px; }

/* formulários */
label { display: block; font-weight: 600; margin: .9rem 0 .3rem; }
label.check { display: flex; align-items: center; gap: .65rem; font-weight: 500; min-height: 48px; margin: .25rem 0; }
label.check input { width: 26px; height: 26px; flex: none; margin: 0; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--comp-opcao-contorno-escolhido); }
input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="time"], input[type="number"], select, textarea {
  width: 100%; font: inherit; font-size: 17px; padding: .75rem .8rem; border: 1.5px solid var(--comp-campo-contorno); border-radius: 10px; background: var(--comp-campo-fundo); color: var(--comp-campo-texto); min-height: 50px; }
textarea { min-height: 5rem; resize: vertical; }
::placeholder { color: var(--papel-texto-de-apoio); }
/* texto selecionado: cor do tema, nunca o azul do navegador. (O pedaço ativo do campo de hora continua com o azul do
   navegador: as regras de ::-webkit-datetime-edit-*-field:focus foram tentadas e o Chrome do roteiro não as aplica.) */
::selection { background: var(--papel-fundo-de-apoio-pressionado); color: var(--papel-texto); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border: 2px solid var(--comp-mensagem-erro-contorno); }
.hint { font-weight: 400; color: var(--papel-texto-de-apoio); font-size: .9rem; display: block; margin-top: .2rem; }

/* botões. Principal: âmbar, largura inteira, canto de 12 px (nunca pílula), rótulo grafite em negrito. */
.btn { display: block; width: 100%; font: inherit; font-size: 1.05rem; font-weight: 700; text-align: center; text-decoration: none; padding: .9rem 1rem; min-height: 54px; border: 0; border-radius: 12px; background: var(--comp-botao-principal-fundo); color: var(--comp-botao-principal-texto); cursor: pointer; margin: 1rem 0 0; }
.btn:active { background: var(--comp-botao-principal-fundo-pressionado); color: var(--comp-botao-principal-texto); transform: translateY(1px); box-shadow: inset 0 0 0 1px var(--comp-botao-principal-texto); }
/* secundário: contorno, nunca cheio */
.btn.alt { background: var(--comp-botao-secundario-fundo); color: var(--comp-botao-secundario-texto); border: 2px solid var(--comp-botao-secundario-contorno); }
.btn.alt:active { background: var(--papel-fundo-de-apoio); color: var(--comp-botao-secundario-texto); box-shadow: none; }
/* neutro */
.btn.ghost { background: var(--comp-botao-neutro-fundo); color: var(--comp-botao-neutro-texto); border: 1.5px solid var(--comp-botao-neutro-contorno); }
.btn.ghost:active { background: var(--comp-botao-neutro-fundo-pressionado); color: var(--comp-botao-neutro-texto); box-shadow: none; }
/* de perigo: contorno sobre branco; ao pressionar o fundo não muda, o contorno engrossa */
.btn.danger { background: var(--comp-botao-perigo-fundo); color: var(--comp-botao-perigo-texto); border: 2px solid var(--comp-botao-perigo-contorno); }
.btn.danger:active { background: var(--comp-botao-perigo-fundo); color: var(--comp-botao-perigo-texto); box-shadow: inset 0 0 0 1px var(--comp-botao-perigo-contorno); }
.btn.small { width: auto; display: inline-block; min-height: 48px; padding: .6rem .9rem; font-size: .95rem; margin: .5rem .5rem 0 0; }
.btn.on { border: 2px solid var(--comp-opcao-contorno-escolhido); font-weight: 800; }
/* desligado: cinza, sem contorno e sem transparência. Enquanto não dá para tocar, não há amarelo. */
.btn:disabled, .btn.alt:disabled, .btn.ghost:disabled, .btn.danger:disabled { background: var(--comp-botao-desligado-fundo); color: var(--comp-botao-desligado-texto); border: 0; box-shadow: none; transform: none; cursor: default; }

/* mensagens em bloco. O ícone vem do estilo (o script só troca a classe). Sem classe extra: informação. */
.msg { position: relative; padding: 12px 14px 12px 2.75rem; border-radius: 10px; margin: 1rem 0 0; font-weight: 400; background: var(--comp-mensagem-informacao-fundo); color: var(--comp-mensagem-informacao-texto); }
.msg::before { content: ""; position: absolute; left: 14px; top: 12px; width: 1.3em; height: 1.3em; background: var(--comp-mensagem-informacao-icone);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5'/%3E%3Cpath d='M12 7.6v.1'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5'/%3E%3Cpath d='M12 7.6v.1'/%3E%3C/svg%3E") center / contain no-repeat; }
.msg.ok { background: var(--comp-mensagem-sucesso-fundo); color: var(--comp-mensagem-sucesso-texto); }
.msg.ok::before { background: var(--comp-mensagem-sucesso-icone);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.8 2.8L16 9.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.8 2.8L16 9.5'/%3E%3C/svg%3E"); }
.msg.error { background: var(--comp-mensagem-erro-fundo); color: var(--comp-mensagem-erro-texto); border: 2px solid var(--comp-mensagem-erro-contorno); }
.msg.error::before { background: var(--comp-mensagem-erro-icone);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4l9.5 16h-19z'/%3E%3Cpath d='M12 10v4.5'/%3E%3Cpath d='M12 17.4v.1'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4l9.5 16h-19z'/%3E%3Cpath d='M12 10v4.5'/%3E%3Cpath d='M12 17.4v.1'/%3E%3C/svg%3E"); }
.msg a { color: inherit; }
/* o valor a cobrar na porta: dado crítico, na maior letra do bloco */
.msg.cobrar b { display: block; font-size: 1.5rem; font-weight: 800; line-height: 1.2; }

/* selos: fato (só a palavra), espera (1 px e relógio), é com você (2 px, seta, negrito), sucesso (claro, com ✓), erro (cheio, com X) */
.selo { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 3px 10px; border-radius: 6px; font-size: .9rem; font-weight: 400; line-height: 1.25; vertical-align: middle; background: var(--comp-selo-fato-fundo); color: var(--comp-selo-fato-texto); }
.selo .ic { width: 1em; height: 1em; vertical-align: 0; }
.selo b { font-weight: inherit; }
h1 .selo { font-size: 1.15rem; padding: 5px 12px; }
.selo.espera { background: var(--comp-selo-espera-fundo); color: var(--comp-selo-espera-texto); border: 1px solid var(--comp-selo-espera-contorno); }
.selo.voce { background: var(--comp-selo-com-voce-fundo); color: var(--comp-selo-com-voce-texto); border: 2px solid var(--comp-selo-com-voce-contorno); font-weight: 700; }
.selo.sucesso { background: var(--comp-selo-sucesso-fundo); color: var(--comp-selo-sucesso-texto); }
.selo.sucesso .ic { color: var(--comp-selo-sucesso-icone); }
.selo.erro { background: var(--comp-selo-erro-fundo); color: var(--comp-selo-erro-texto); font-weight: 700; }
/* telas de rua (pedido no painel, link do entregador): selo com a letra do corpo */
.order .selo, .alert .selo, .rua .selo { font-size: 1rem; }

.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; align-items: end; }
.row2 > * { min-width: 0; }
.rowline { display: grid; grid-template-columns: 1fr 7rem 48px; gap: .5rem; align-items: center; margin: .45rem 0; }
.rowline.three { grid-template-columns: 1fr 1fr 48px; }
.rowline > * { min-width: 0; }
.x { width: 48px; height: 48px; border: 1.5px solid var(--comp-botao-neutro-contorno); border-radius: 10px; background: var(--comp-botao-neutro-fundo); color: var(--comp-botao-neutro-texto); font-size: 1.2rem; cursor: pointer; }
.x:active { background: var(--comp-botao-neutro-fundo-pressionado); color: var(--comp-botao-neutro-texto); transform: translateY(1px); }
.group { border: 1.5px dashed var(--papel-contorno-de-controle); border-radius: 12px; padding: .75rem; margin: .75rem 0; }
.day { display: grid; grid-template-columns: 1fr; gap: .35rem; padding: .6rem 0; border-bottom: 1px solid var(--papel-linha); }
.day .times { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }

/* tela inicial */
.numbers { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-bottom: .9rem; }
.number { background: var(--comp-resumo-numero-fundo); color: var(--comp-resumo-numero-texto); border-radius: 14px; padding: .8rem; }
.number b { display: block; font-size: 1.5rem; line-height: 1.15; }
.number span { color: var(--papel-texto-de-apoio); font-size: .9rem; }
.steps { list-style: none; margin: 0; padding: 0; }
.steps li { display: flex; align-items: center; gap: .7rem; padding: .5rem 0; border-bottom: 1px solid var(--papel-linha); }
.steps li:last-child { border-bottom: 0; }
.steps a { flex: 1; font-weight: 700; font-size: 1.1rem; text-decoration: none; min-height: 48px; display: flex; align-items: center; color: var(--comp-linha-de-menu-texto); }
.dot { width: 30px; height: 30px; border-radius: 50%; background: var(--papel-fundo-de-apoio); color: var(--papel-texto); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex: none; }
.dot .ic { width: 18px; height: 18px; }
.dot.done { background: var(--comp-passo-fundo); color: var(--comp-passo-icone); }

/* pedidos. A faixa lateral tem um sentido só: grafite = é com você. Sem faixa = todo o resto. */
.order.voce, .alert { border-left: 6px solid var(--comp-cartao-pedido-contorno); }
/* o selo do pedido tem lugar fixo: canto de cima, à direita. Nome comprido quebra a linha; o selo não desce. */
.order header { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: flex-start; gap: .5rem; }
.order header a { font-weight: 800; font-size: 1.15rem; text-decoration: none; color: inherit; flex: 1 1 0; min-width: 0; }
.order header b { font-size: 1.15rem; flex: 1 1 0; min-width: 0; }
.order header .selo { flex: 0 0 auto; max-width: 58%; }
.guide { margin: 0; padding-left: 1.2rem; }
.guide li { margin: 0 0 .6rem; }
.lines { list-style: none; margin: .5rem 0; padding: 0; }
.lines li { padding: .2rem 0; }
.lines small { display: block; color: var(--papel-texto-de-apoio); font-size: .9rem; }
.total { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; font-weight: 800; font-size: 1.1rem; margin-top: .4rem; color: var(--papel-preco); }
.total span:last-child { white-space: nowrap; font-size: 1.5rem; line-height: 1.2; }

/* itens */
.item { display: grid; grid-template-columns: 64px 1fr; gap: .75rem; align-items: center; }
.item img, .item .nophoto { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; background: var(--comp-imagem-de-reserva-fundo); display: block; }
.item a { font-weight: 700; text-decoration: none; color: inherit; }
.photo-preview { display: block; width: 100%; max-height: 240px; object-fit: cover; border-radius: 12px; margin: .5rem 0; }
.terms { max-height: 9rem; overflow: auto; background: var(--papel-fundo); border: 1px solid var(--papel-linha); border-radius: 10px; padding: .7rem; font-size: .92rem; white-space: pre-wrap; }
[hidden] { display: none !important; }
.sep { border-bottom: 1px solid var(--papel-linha); padding: .4rem 0; }
.flat { display: block; text-decoration: none; color: inherit; }
.swatches { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.swatch { display: flex; align-items: center; gap: .6rem; min-height: 50px; font-weight: 500; margin: 0; }
.swatch input { width: 26px; height: 26px; flex: none; margin: 0; }
.swatch i { width: 28px; height: 28px; border-radius: 8px; background: var(--papel-cor-de-loja); flex: none; }
.filepick { position: relative; overflow: hidden; margin-top: .3rem; }
.filepick input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

/* fase 2A: entregadores, fechamento, avisos, avaliação */
.between { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .3rem .6rem; }
.between a { color: inherit; text-decoration: none; }
.totalrow { display: flex; justify-content: space-between; gap: .8rem; padding: .3rem 0; }
.totalrow span:last-child { white-space: nowrap; font-weight: 600; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { padding: .55rem 0; border-bottom: 1px solid var(--papel-linha); color: var(--comp-linha-do-tempo-texto); }
.timeline li:last-child { border-bottom: 0; }
.alert p { margin: .3rem 0 .2rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .8rem; }
.chip { text-decoration: none; background: var(--comp-botao-secundario-fundo); border: 1.5px solid var(--comp-opcao-contorno); border-radius: 12px; padding: .5rem .9rem; min-height: 48px; display: inline-flex; align-items: center; font-weight: 500; color: var(--comp-botao-neutro-texto); }
.chip.on { background: var(--comp-opcao-fundo-escolhido); color: var(--comp-botao-neutro-texto); border: 2px solid var(--comp-opcao-contorno-escolhido); font-weight: 700; }
form.inline { display: flex; align-items: end; gap: .6rem; margin: 0 0 .8rem; }
form.inline label { margin: 0; flex: 1; }
form.inline .btn { margin: 0; }
.qr { display: block; width: 220px; max-width: 100%; height: auto; margin: .6rem auto; color: var(--papel-texto); background: var(--comp-quadro-do-qr-fundo); border: 1px solid var(--papel-linha); }
.code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; word-break: break-all; }
.rating { border: 0; padding: 0; margin: 1rem 0 0; min-width: 0; }
.rating legend { font-weight: 700; padding: 0; margin-bottom: .4rem; }
.rating label { display: inline-block; margin: 0 6px 6px 0; }
.rating input { position: absolute; opacity: 0; }
.rating span { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; background: var(--papel-superficie); color: var(--papel-texto); border: 1.5px solid var(--comp-nota-contorno); border-radius: 12px; font-weight: 400; font-size: 1.2rem; cursor: pointer; }
.rating input:checked + span { border: 2px solid var(--comp-nota-contorno-escolhido); font-weight: 800; }
.rating input:focus-visible + span { outline: 2px solid var(--comp-campo-contorno-foco); outline-offset: 2px; }
.foot { text-align: center; color: var(--papel-texto-de-apoio); font-size: .9rem; padding: 1rem; }
.receipt h1 { margin-bottom: .6rem; }
@media print {
  .top, .nav, .noprint, .foot { display: none !important; }
  main { max-width: none; padding: 0; }
  .card { border: 0; padding: 0; }
}
.timeline li.between { flex-wrap: nowrap; align-items: flex-start; gap: .8rem; }
.timeline li.between b { white-space: nowrap; }
.btn + .card { margin-top: .9rem; }

/* reserva do botão âmbar (06-ux.md 6.3): quando o aparelho pede mais contraste, o botão principal ganha contorno
   grafite e a linha do cartão passa ao contorno de controle. Nunca se escurece o âmbar. */
@media (prefers-contrast: more), (forced-colors: active) {
  .btn { box-shadow: inset 0 0 0 1px var(--comp-botao-principal-texto); }
  .btn:active { box-shadow: inset 0 0 0 2px var(--comp-botao-principal-texto); }
  .card { border-color: var(--papel-contorno-de-controle); }
}