/* Visual limpo: verde, fundo claro, bordas finas e sombras suaves.
   (--rosa é a cor principal: o nome vem do projeto de origem e ficou para não mexer em todas as regras.) */
:root {
  --rosa: #0A8F4E; --rosa-claro: #F2F5F3; --amarelo: #FFE28A; --verde: #1DB37A;
  --azul: #2F6BED; --vermelho: #D93A2B; --tinta: #14201A; --papel: #FFFFFF; --suave: #5C6B63;
  --borda: 1px solid #D9E0DB; --sombra: 0 1px 2px rgba(20,32,26,.05), 0 6px 18px rgba(20,32,26,.06); --sombra-p: 0 1px 2px rgba(20,32,26,.08);
  --titulo: "Figtree", system-ui, sans-serif;
  color-scheme: light;
}
/* Temas por loja (body data-tema): só trocam as variáveis. A cor principal de cada um também está em TEMAS no worker.mjs. */
[data-tema="doces"] {   /* confeitaria: framboesa, creme rosado, baunilha e tinta cor de chocolate */
  --rosa: #D9417A; --rosa-claro: #FFF3F6; --amarelo: #FFE6B3; --tinta: #3A2430; --suave: #80606C; --borda: 1px solid #F4D7E1;
  --sombra: 0 1px 2px rgba(120,40,70,.05), 0 6px 18px rgba(120,40,70,.08); --sombra-p: 0 1px 2px rgba(120,40,70,.09);
}
[data-tema="lanches"] { --rosa: #E2570F; --rosa-claro: #FFF6EE; --amarelo: #FFE08A; --tinta: #2B1D14; --suave: #7A6558; --borda: 1px solid #F1DDCB; }
[data-tema="acai"] { --rosa: #7A3E9D; --rosa-claro: #F7F2FA; --amarelo: #E9F7C7; --tinta: #251A2E; --suave: #6C5F78; --borda: 1px solid #E4D8EC; }
[data-tema="azul"] { --rosa: #2563EB; --rosa-claro: #F2F5FB; --amarelo: #FFE28A; --tinta: #141B2B; --suave: #5B6577; --borda: 1px solid #D8DFEC; }
* { box-sizing: border-box; }
body { color: var(--tinta); }
html, body { margin: 0; font: 16px/1.4 "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
/* toque duplo nao amplia a tela (o mapa continua com pinça normal) */
html, button, a, label, input, select, textarea, summary { touch-action: manipulation; }
body { background-color: var(--rosa-claro); }
h1, h2, h3 { margin: 0; line-height: 1.1; font-family: var(--titulo); font-weight: 700; }
[hidden] { display: none !important; }
input, textarea { font: inherit; font-size: 16px; width: 100%; padding: .7rem .8rem; border: var(--borda); border-radius: 14px; background: #fff; color: var(--tinta); }
input:focus, textarea:focus { outline: none; border-color: var(--rosa); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rosa) 20%, transparent); }
select { font: inherit; font-size: 16px; width: 100%; margin-top: .3rem; padding: .7rem .8rem; border: var(--borda); border-radius: 14px; background: #fff; color: var(--tinta); }
.cliente[data-tema="doces"] .topo { background: radial-gradient(120% 90% at 50% 0%, #FFD9E6 0%, transparent 70%); }
.cliente[data-tema="doces"] .marca h1 { font-size: 2.1rem; }
label { display: block; font-size: .85rem; font-weight: 700; margin-bottom: .75rem; }
label input, label textarea { margin-top: .3rem; font-weight: 400; }
.linha { display: flex; gap: .6rem; }
.linha > * { flex: 1; }
.dica { font-size: .85rem; color: var(--suave); margin: .3rem 0 .8rem; font-weight: 600; }
.erro { color: var(--vermelho); font-weight: 800; min-height: 1em; padding: 0 16px; }
.aviso { background: var(--vermelho); color: #fff; border: var(--borda); box-shadow: var(--sombra); padding: .8rem 1rem; border-radius: 16px; font-weight: 800; margin-bottom: 1rem; }

/* Botões que parecem botões: contorno, sombra dura e "afundam" ao tocar */
.botao, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem; font: inherit; font-family: var(--titulo); font-weight: 700;
  text-decoration: none; padding: .7rem 1rem; border-radius: 14px; border: var(--borda); background: #fff; color: var(--tinta);
  box-shadow: var(--sombra-p); cursor: pointer; transition: transform .08s, box-shadow .08s; -webkit-tap-highlight-color: transparent;
}
.botao:active, .btn:active { transform: scale(.97); }
.botao.principal { background: var(--rosa); color: #fff; }
.botao.leve { background: transparent; border-color: transparent; box-shadow: none; color: var(--tinta); text-decoration: underline; font-family: inherit; font-weight: 700; }
.botao:disabled { background: #ddd; color: #777; cursor: default; }

/* Título em "figurinha" */
.figurinha { font-family: var(--titulo); font-weight: 800; color: var(--rosa); }

/* ---------- página da cliente ---------- */
.cliente main { max-width: 560px; margin: 0 auto; padding: 8px 16px 130px; }
.topo { position: relative; overflow: hidden; padding: 26px 16px 22px; text-align: center; }
.topo .estrela { position: absolute; width: 46px; }
.topo .e1 { left: 6%; top: 12px; transform: rotate(-12deg); }
.topo .e2 { right: 7%; top: 30px; width: 34px; transform: rotate(14deg); }
.topo .e3 { right: 20%; bottom: 6px; width: 26px; }
.marca h1 { font-size: 2.3rem; }
.marca p { display: inline-block; margin: .9rem 0 0; background: #fff; border: var(--borda); border-radius: 999px; padding: .4rem 1rem; font-weight: 700; font-size: .92rem; box-shadow: var(--sombra-p); }
section { background: var(--papel); border: var(--borda); border-radius: 22px; padding: 16px; margin-bottom: 16px; box-shadow: var(--sombra); }
section h2 { font-size: 1.3rem; margin-bottom: .8rem; }
section h2 span { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--amarelo); border: var(--borda); margin-right: 6px; font-size: 1rem; }
.itens { list-style: none; margin: 0; padding: 0; }
.itens li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-top: 2px dashed #0002; }
.itens li:first-child { border-top: 0; }
.itens li.tem b { color: var(--rosa); }
.itens b { display: block; font-family: var(--titulo); font-size: 1.12rem; }
.itens small { display: block; color: var(--suave); font-weight: 600; }
.itens .preco { color: var(--rosa); display: inline-block; margin-top: 4px; font-family: var(--titulo); font-weight: 800; background: none; border: 0; padding: 0; }
.carregando { color: var(--suave); }
.passo { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.passo button { width: 42px; height: 42px; border-radius: 50%; border: var(--borda); background: #fff; font-size: 1.4rem; font-weight: 800; color: var(--tinta); cursor: pointer; box-shadow: var(--sombra-p); }
.passo button:active { transform: scale(.94); }
.passo button:last-child { background: var(--rosa); color: #fff; }
.passo output { min-width: 24px; text-align: center; font-family: var(--titulo); font-weight: 700; font-size: 1.2rem; }
.gps { width: 100%; background: var(--amarelo); font-size: 1.05rem; padding: .9rem; }
.gps.feito { background: var(--verde); color: #fff; }
.cep { flex: 1.4; } .numero { flex: 1; }
.opcoes { display: flex; gap: 8px; margin-bottom: .8rem; }
.opcoes label { flex: 1; margin: 0; display: flex; align-items: center; justify-content: center; gap: 6px; padding: .7rem .5rem; border: var(--borda); border-radius: 14px; font-family: var(--titulo); font-size: 1rem; background: #fff; cursor: pointer; }
.opcoes label:has(input:checked) { background: var(--rosa); color: #fff; box-shadow: var(--sombra-p); }
.opcoes input { display: none; }
.rodape { position: fixed; left: 0; right: 0; bottom: 0; background: #fff; border-top: var(--borda);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rodape small { display: block; font-weight: 700; font-size: .8rem; }
.rodape strong { font-family: var(--titulo); font-size: 1.5rem; }
.rodape .botao { flex: 0 0 auto; padding: .9rem 1.4rem; font-size: 1.1rem; }
.entrada { background: var(--papel); border: var(--borda); border-radius: 22px; padding: 20px 16px; margin-top: 8px; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 4px; }
.entrada h2 { font-size: 1.6rem; margin: 0; }
.entrada p { margin: 0 0 8px; }
.entrada .botao { width: 100%; margin-top: 8px; padding: .9rem; font-size: 1.1rem; }
.ola { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #fff; border: var(--borda); border-radius: 16px; padding: 10px 12px; margin-bottom: 16px; box-shadow: var(--sombra-p); }
.ola small { display: block; color: var(--suave); font-weight: 700; font-size: .8rem; }
.ola .botao.leve { padding: .3rem .4rem; font-size: .85rem; white-space: nowrap; }
.pronto { text-align: center; padding: 48px 16px; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.pronto h2 { font-size: 1.8rem; }
.ok { width: 84px; height: 84px; border-radius: 50%; background: var(--verde); color: #fff; font-size: 2.8rem; display: grid; place-items: center; border: var(--borda); box-shadow: var(--sombra); }

/* ---------- painel da vendedora ---------- */
.painel { padding-bottom: 40px; }
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login form { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center;
  background: #fff; border: var(--borda); border-radius: 22px; box-shadow: var(--sombra); padding: 24px; }
.login img { border-radius: 16px; border: var(--borda); }
.barra { position: sticky; top: 0; z-index: 1000; display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--rosa); border-bottom: var(--borda); color: #fff; }
.barra b { flex: 1; font-family: var(--titulo); font-size: 1.25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icone { background: #fff; border: var(--borda); border-radius: 50%; width: 42px; height: 42px; font-size: 1.15rem; cursor: pointer; box-shadow: var(--sombra-p); filter: grayscale(1); }
.icone.ligado { filter: none; background: var(--amarelo); }
.interruptor { display: flex; align-items: center; gap: 6px; margin: 0; color: #fff; font-size: .85rem; cursor: pointer; }
.interruptor input { display: none; }
.interruptor span { width: 46px; height: 26px; border-radius: 13px; background: #fff; border: var(--borda); position: relative; transition: .2s; }
.interruptor span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: var(--vermelho); border: 2px solid var(--tinta); transition: .2s; }
.interruptor input:checked + span::after { left: 21px; background: var(--verde); }
.interruptor em { font-style: normal; font-family: var(--titulo); font-weight: 700; }
.abas { display: flex; gap: 8px; padding: 10px 16px; position: sticky; top: 67px; z-index: 999; background: var(--rosa-claro); }
.abas button { flex: 1; padding: .55rem .3rem; border: var(--borda); border-radius: 999px; background: #fff; color: var(--tinta); font-family: var(--titulo); font-weight: 700; font-size: .95rem; cursor: pointer; }
.abas button.ativa { background: var(--tinta); color: #fff; }
.bolha { display: inline-block; min-width: 22px; padding: 0 6px; border-radius: 11px; background: var(--amarelo); color: var(--tinta); border: 2px solid var(--tinta); font-size: .78rem; }
.aba { padding: 6px 16px 16px; max-width: 720px; margin: 0 auto; }
.mapa { position: relative; z-index: 0; height: 38vh; min-height: 230px; border-radius: 20px; overflow: hidden; border: var(--borda); box-shadow: var(--sombra); }
.acoes { display: flex; gap: 10px; margin: 16px 0 10px; }
.acoes .botao { flex: 1; font-size: .95rem; }
#caminho { background: var(--amarelo); }
#rota { background: var(--azul); color: #fff; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 4px 8px; scrollbar-width: none; }
.chips button { flex: 0 0 auto; border: var(--borda); background: #fff; color: var(--tinta); border-radius: 999px; padding: .4rem .85rem; font-family: var(--titulo); font-weight: 700; font-size: .92rem; cursor: pointer; }
.chips button.ativa { background: var(--rosa); color: #fff; box-shadow: var(--sombra-p); }

/* Lista compacta de pedidos */
.pedidos { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.pedido { background: #fff; border: var(--borda); border-radius: 18px; padding: 10px 12px; box-shadow: var(--sombra); }
.pedido.saiu { background: #EEF3FF; }
.pedido.entregue, .pedido.cancelado { opacity: .7; box-shadow: none; }
.topoPedido { display: flex; align-items: center; gap: 10px; }
.num { flex: 0 0 auto; min-width: 34px; height: 34px; padding: 0 6px; border-radius: 999px; background: var(--amarelo); border: var(--borda); display: grid; place-items: center; font-family: var(--titulo); font-weight: 700; font-size: .9rem; }
.pedido.saiu .num { background: var(--azul); color: #fff; }
.quem { flex: 1; min-width: 0; }
.lado { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.hora { color: #b3b3b3; font-size: .7rem; font-weight: 600; line-height: 1; }
.quem b { display: block; font-family: var(--titulo); font-size: 1.08rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quem small { color: var(--suave); font-weight: 700; font-size: .78rem; }
.saiuTag { font-style: normal; color: var(--azul); }
.preco { font-family: var(--titulo); font-size: 1.1rem; background: var(--rosa); color: #fff; border: var(--borda); border-radius: 10px; padding: .1rem .45rem; white-space: nowrap; }
.oque { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 8px 0 4px; font-size: .9rem; font-weight: 700; }
.oque span { background: #F1F5F2; border: 1px solid #0002; border-radius: 8px; padding: 0 .4rem; }
.oque .pag { background: #EAFBF3; }
.onde { font-size: .88rem; font-weight: 700; line-height: 1.3; }
.onde small { color: var(--suave); }
.obs { margin-top: 6px; background: #FFF6D6; border: 1.5px solid #0003; padding: 4px 8px; border-radius: 8px; font-size: .88rem; }
.botoes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.btn { flex-direction: column; gap: 0; padding: .45rem .2rem; font-size: .82rem; border-radius: 14px; }
.btn i { font-style: normal; font-size: 1.25rem; line-height: 1.2; }
.btn.azul { background: var(--azul); color: #fff; }
.btn.verde { background: var(--verde); color: #fff; }
.btn.amarelo { background: var(--amarelo); }
.btn.rosa { background: var(--rosa); color: #fff; }
.maisAcoes { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: .82rem; font-weight: 700; }
.maisAcoes button { background: none; border: 0; padding: 4px 0; font: inherit; color: var(--tinta); text-decoration: underline; cursor: pointer; }
.maisAcoes .cancelar { color: var(--vermelho); }
.vazio { text-align: center; padding: 24px; font-family: var(--titulo); font-size: 1.1rem; background: #fff; border: var(--borda); border-radius: 18px; }

/* Pinos do mapa (pequenos, para não poluir com muitos pedidos) */
.pino { background: none; border: 0; }
.pino span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--rosa); border: 2px solid var(--tinta); box-shadow: 1px 1px 0 var(--tinta); }
.pino i { display: block; transform: rotate(45deg); font-style: normal; color: #fff; font-family: var(--titulo); font-weight: 700; font-size: .62rem; }
.pino.saiu span { background: var(--azul); }
.longe .pino span { width: 14px; height: 14px; border-width: 1.5px; box-shadow: none; transform: translate(5px, 10px) rotate(-45deg); }
.longe .pino i { display: none; }
/* Meu ponto: amarelo com contorno e um anel pulsando */
.eu span { display: block; width: 18px; height: 18px; border-radius: 50%; background: var(--amarelo); border: 3px solid var(--tinta); box-shadow: 0 0 0 3px #fff; position: relative; }
.eu span::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid var(--tinta); opacity: .6; animation: pulso 1.8s ease-out infinite; }
@keyframes pulso { from { transform: scale(.5); opacity: .7; } to { transform: scale(1.4); opacity: 0; } }

/* Editor do cardápio e link */
.aba > label { background: #fff; border: var(--borda); border-radius: 16px; padding: 10px 12px; }
.aba h3 { font-size: 1.3rem; margin: 18px 0 6px; }
.editor { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-direction: column; gap: 12px; }
.editor li { background: #fff; border: var(--borda); border-radius: 18px; padding: 12px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--sombra-p); }
.editor .linha { align-items: center; }
.editor .p { display: flex; align-items: center; gap: 6px; margin: 0; }
.editor .p input { margin: 0; }
.editor .at { display: flex; align-items: center; gap: 6px; margin: 0; }
.editor .at input { width: 20px; height: 20px; margin: 0; accent-color: var(--verde); }
#cardapio > .botao, #link > .botao { width: 100%; margin-top: 10px; }
.editor .ver { display: flex; align-items: center; gap: 10px; }
.editor .ver[hidden], .editor .form[hidden] { display: none; }
.editor .info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.editor .info b { font-family: var(--titulo); font-size: 1.05rem; }
.editor .info small { color: #555; }
.editor .info span:empty { display: none; }
.editor .info span { color: var(--vermelho); font-weight: 800; font-size: .8rem; }
.editor .botao.amarelo { background: var(--amarelo); padding: .45rem .7rem; font-size: .9rem; white-space: nowrap; }
.editor .botao.rosa { background: var(--rosa); color: #fff; flex: 1; }
.editor .form { display: flex; flex-direction: column; gap: 8px; }
.editor .form label { margin: 0; }
.editor .form .linha { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.editor .form .p input { width: 110px; }
.editor li.pausado { opacity: .6; }
.editor li.editando { opacity: 1; background: #FFF6D6; }
.dadosLoja { margin-top: 18px; background: #fff; border: var(--borda); border-radius: 18px; padding: 10px 12px; box-shadow: var(--sombra-p); }
.dadosLoja summary { font-family: var(--titulo); font-weight: 700; cursor: pointer; }
.dadosLoja .botao { width: 100%; margin-top: 10px; }
#cNovo { background: var(--amarelo); color: var(--tinta); text-decoration: none; border: var(--borda); box-shadow: var(--sombra-p); font-family: var(--titulo); }
#link > p { font-weight: 700; }
.linkcaixa { background: #fff; border: var(--borda); border-radius: 16px; padding: 14px; word-break: break-all; font-size: 1.05rem; box-shadow: var(--sombra); }
hr { border: 0; border-top: 2px dashed #0003; margin: 20px 0; }

/* Mapa em tela cheia */
.mapaCaixa { position: relative; }
.telaCheia { position: absolute; top: 10px; right: 10px; z-index: 500; padding: .45rem .8rem; font-size: .9rem; background: #fff; }
.mapaCaixa.cheio { position: fixed; inset: 0; z-index: 3000; background: var(--rosa-claro); }
.mapaCaixa.cheio .mapa { height: 100%; min-height: 0; border: 0; border-radius: 0; box-shadow: none; }
.mapaCaixa.cheio .telaCheia { top: calc(12px + env(safe-area-inset-top)); right: 12px; background: var(--tinta); color: #fff; }
.ondeEstou { position: absolute; top: 56px; right: 10px; z-index: 500; width: 40px; height: 40px; padding: 0; display: grid; place-items: center; background: #fff; color: var(--azul); border: var(--borda); border-radius: 50%; box-shadow: var(--sombra-p); cursor: pointer; }
.ondeEstou:active { transform: translate(2px, 2px); box-shadow: none; }
.ondeEstou.buscando svg { animation: girar 1s linear infinite; }
.mapaCaixa.cheio .ondeEstou { top: calc(62px + env(safe-area-inset-top)); right: 12px; }
.mapaCaixa.cheio .acoes { position: absolute; left: 12px; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom)); margin: 0; z-index: 500; flex-wrap: wrap; }
.mapaCaixa.cheio .situacao { flex-basis: 100%; margin: 0; }
.mapaCaixa.cheio .situacao button { box-shadow: var(--sombra-p); }
body.travado { overflow: hidden; }
body.painel { overscroll-behavior-y: contain; }
.puxar { position: fixed; top: 0; left: 50%; z-index: 2000; width: 40px; height: 40px; display: grid; place-items: center; background: #fff; border: var(--borda); border-radius: 50%; box-shadow: var(--sombra-p); font-size: 1.3rem; font-weight: 800; opacity: 0; transform: translate(-50%, -50px); transition: opacity .15s, background .15s; pointer-events: none; }
.puxar.pronto { background: var(--amarelo); }
.puxar.girando { opacity: 1 !important; background: var(--rosa); color: #fff; animation: girar .7s linear infinite; }
@keyframes girar { from { rotate: 0deg; } to { rotate: 360deg; } }
.avisoNovo { position: fixed; left: 12px; right: 12px; top: calc(env(safe-area-inset-top) + 10px); z-index: 1900; background: var(--amarelo); border: var(--borda); border-radius: 16px; box-shadow: var(--sombra); padding: 10px 14px; display: flex; flex-direction: column; cursor: pointer; transform: translateY(-160%); transition: transform .3s; }
.avisoNovo.mostrar { transform: none; }
.avisoNovo b { font-family: var(--titulo); }
.avisoNovo span { font-size: .85rem; font-weight: 700; }
.ativarAvisos { width: 100%; margin-bottom: 12px; background: var(--amarelo); display: flex; flex-direction: column; align-items: center; }
.ativarAvisos small { font-family: "Figtree", sans-serif; font-weight: 700; font-size: .75rem; }
.pedido.piscar { animation: piscar .5s 4 alternate; }
@keyframes piscar { to { background: var(--amarelo); } }

/* Balão do pino */
.balao .leaflet-popup-content-wrapper { border: var(--borda); border-radius: 18px; box-shadow: var(--sombra); }
.balao .leaflet-popup-content { margin: 12px; font: 14px/1.35 "Figtree", system-ui, sans-serif; }
.balao .leaflet-popup-tip { border: var(--borda); }
.balaoTopo { display: flex; align-items: center; gap: 8px; }
.balaoTopo b { flex: 1; font-family: var(--titulo); font-size: 1.05rem; }
.balaoTopo .num { color: #fff; }
.balaoTxt { margin: 6px 0 2px; font-weight: 700; }
.botoes.tres { grid-template-columns: repeat(3, 1fr); }
.balao .btn.azul, .balao .btn.verde, .balao .btn.rosa { color: #fff; }
.pedido[style*="--cor"] { border-left: 8px solid var(--cor); }

/* Falta entregar / Entregues / Todos */
.situacao { display: grid; grid-template-columns: 1.3fr 1.1fr .8fr; gap: 6px; margin-bottom: 10px; }
.situacao button { border: var(--borda); border-radius: 999px; background: #fff; color: var(--tinta); padding: .45rem .3rem; font-family: var(--titulo); font-weight: 700; font-size: .85rem; cursor: pointer; white-space: nowrap; }
.situacao button b { display: inline-block; min-width: 1.3em; margin-left: 2px; padding: 0 .3em; border-radius: 999px; background: rgba(0,0,0,.08); font-size: .8rem; }
.situacao .falta.ativa { background: var(--rosa); color: #fff; box-shadow: var(--sombra-p); }
.situacao .entregues.ativa { background: var(--verde); color: #fff; box-shadow: var(--sombra-p); }
.situacao .todos.ativa { background: var(--tinta); color: #fff; box-shadow: var(--sombra-p); }
.situacao .ativa b { background: rgba(255,255,255,.3); }
.pino.entregue span { background: var(--verde); }
.pino.entregue i { font-size: .7rem; }
.pedido.entregue { border-color: var(--verde); }

/* ---------- ajustes do visual limpo ---------- */
.botao.principal, .btn.azul, .btn.verde, .btn.rosa, .gps.feito, #rota, .chips button.ativa, .abas button.ativa, .situacao .ativa,
.opcoes label:has(input:checked), .passo button:last-child, .editor .botao.rosa { border-color: transparent; }
.barra { border-bottom: 0; }
.topo { padding: 28px 16px 16px; }
.marca h1 { font-size: 1.9rem; }
.marca p { background: none; border: 0; box-shadow: none; padding: 0; margin-top: .4rem; color: var(--suave); font-weight: 600; }
.naoAchou { text-align: center; padding: 48px 16px; }
.instalar { width: 100%; max-width: 340px; background: #fff; border: var(--borda); border-radius: 16px; padding: 12px 14px; font-size: .9rem; font-weight: 600; color: var(--suave); }
.instalar b { display: block; color: var(--tinta); margin-bottom: 2px; }
.instalar .botao { width: 100%; margin-top: 8px; }
.comeco { background: #fff; border: var(--borda); border-radius: 18px; padding: 14px; margin-top: 10px; box-shadow: var(--sombra-p); }
.comeco b { font-family: var(--titulo); font-size: 1.1rem; }
.comeco p { margin: 4px 0 0; color: var(--suave); font-weight: 600; font-size: .92rem; }

/* ---------- tela de entrada (login e cadastro) ---------- */
body.acesso { background: var(--rosa); color: #fff; min-height: 100dvh; display: grid; place-items: center; padding: 24px 20px; }
.acesso main { width: 100%; max-width: 360px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.acesso img { border-radius: 22px; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.acesso h1 { font-size: 1.9rem; margin-top: 18px; font-weight: 800; }
.acesso main > p { margin: 6px 0 26px; opacity: .92; font-weight: 600; }
.acesso form { width: 100%; text-align: left; }
.acesso label { color: #fff; }
.acesso input { border-color: transparent; padding: .85rem .9rem; }
.acesso input:focus { border-color: transparent; box-shadow: 0 0 0 3px rgba(255,255,255,.5); }
.acesso .erro { color: #fff; border-radius: 10px; padding: 0; margin: 0 0 10px; min-height: 0; text-align: center; font-weight: 700; }
.acesso .erro:not(:empty) { background: rgba(0,0,0,.22); padding: .5rem .8rem; }
.acesso .botao { width: 100%; padding: .95rem; font-size: 1.05rem; background: #fff; color: var(--rosa); border-color: transparent; }
.acesso .botao:disabled { background: #fff; color: var(--rosa); opacity: .7; }
.trocar { margin-top: 18px; background: none; border: 0; color: #fff; font: inherit; cursor: pointer; padding: 8px; }