/* Estética das figurinhas: rosa com bolinhas, contorno preto grosso, sombra dura e cores fortes. */
:root {
  --rosa: #FF4FA3; --rosa-claro: #F7B6DD; --lilas: #E9A3D3; --amarelo: #FFD23F; --verde: #1DB37A;
  --azul: #3A6FF2; --vermelho: #F2452E; --tinta: #141414; --papel: #FFFFFF; --suave: #5B5560;
  --borda: 2.5px solid var(--tinta); --sombra: 4px 4px 0 var(--tinta); --sombra-p: 3px 3px 0 var(--tinta);
  --titulo: "Fredoka", "Baloo 2", system-ui, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; color: var(--tinta); font: 16px/1.4 "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
body {
  background-color: var(--rosa-claro);
  background-image: radial-gradient(#ffffff88 1.6px, transparent 1.7px);
  background-size: 16px 16px;
}
h1, h2, h3 { margin: 0; line-height: 1.1; font-family: var(--titulo); font-weight: 700; }
[hidden] { display: none !important; }
input, textarea { font: inherit; width: 100%; padding: .7rem .8rem; border: var(--borda); border-radius: 14px; background: #fff; color: var(--tinta); }
input:focus, textarea:focus { outline: none; box-shadow: var(--sombra-p); }
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: translate(3px, 3px); box-shadow: 0 0 0 var(--tinta); }
.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 { display: inline-block; background: var(--rosa); color: #fff; border: var(--borda); box-shadow: var(--sombra); padding: .15em .45em; border-radius: 6px;
  transform: rotate(-2deg); font-family: var(--titulo); font-weight: 700; text-shadow: 2px 2px 0 var(--tinta); }

/* ---------- 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(--tinta); display: inline-block; margin-top: 4px; font-family: var(--titulo); font-weight: 700; background: var(--amarelo); border: 2px solid var(--tinta); border-radius: 8px; padding: 0 .4rem; }
.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: translate(3px, 3px); box-shadow: none; }
.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; }
.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.35rem; text-shadow: 2px 2px 0 var(--tinta); 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; text-shadow: 1px 1px 0 var(--tinta); }
.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; }
.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: #FFF2F9; border: 1.5px solid #0003; 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 */
.pino { background: none; border: 0; }
.pino span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--rosa); border: 2.5px solid var(--tinta); box-shadow: 2px 2px 0 var(--tinta); }
.pino i { display: block; transform: rotate(45deg); font-style: normal; color: #fff; font-family: var(--titulo); font-weight: 700; font-size: .8rem; }
.pino.saiu span { background: var(--azul); }

/* 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; }
#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; }
.mapaCaixa.cheio .acoes { position: absolute; left: 12px; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom)); margin: 0; z-index: 500; }
body.travado { overflow: hidden; }

/* 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 "Nunito", 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); }