/* ==========================================================================
   Minha conta — estilo da área

   Só o que é desta área. Cores, tipografia e raios vêm de /comum/tema.css:
   duplicar as variáveis aqui faria a conta envelhecer sozinha no dia em
   que a marca mudar de tom.
   ========================================================================== */

/* ── caminho de volta e capa ──────────────────────────── */
.sub-conta{color:var(--texto-2);font-size:13px;margin:0}

.capa-conta{border-bottom:1px solid var(--linha);margin:0 0 24px}
.pessoa{display:flex;align-items:center;gap:15px;margin-bottom:20px}
.pessoa h2{
  margin:0;font-family:var(--ui);font-weight:600;font-size:23px;letter-spacing:-.015em;
}
.pessoa p{margin:3px 0 0;font-size:12.5px;color:var(--texto-2)}
.inicial{
  width:52px;height:52px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--marca-relevo);color:var(--sobre-marca);font-weight:600;font-size:21px;
}
.sair-conta{
  margin-left:auto;background:transparent;border:1px solid var(--linha-forte);
  color:var(--texto-2);border-radius:999px;padding:8px 15px;font-size:12.5px;
  font-family:var(--ui);cursor:pointer;
}
.sair-conta:hover{border-color:var(--erro-texto);color:var(--erro-texto)}

/* Abas: a navegação da conta fica visível o tempo todo. Elas são
   diferentes dos itens da trilha de propósito — a trilha diz onde você
   está na loja, as abas dizem qual parte da conta está aberta. */
.abas{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.abas::-webkit-scrollbar{display:none}
.aba{
  position:relative;background:transparent;border:0;color:var(--texto-2);
  padding:12px 15px 14px;font-size:14px;font-family:var(--ui);cursor:pointer;
  white-space:nowrap;display:flex;align-items:center;gap:8px;transition:color .16s;
}
.aba:hover{color:var(--texto)}
.aba::after{
  content:"";position:absolute;left:11px;right:11px;bottom:-1px;height:2px;
  background:var(--marca);border-radius:2px 2px 0 0;transform:scaleX(0);transition:transform .18s;
}
.aba.ativo{color:var(--texto)}
.aba.ativo::after{transform:scaleX(1)}
.selo-aba{
  font-size:11px;background:color-mix(in srgb,var(--marca) 14%,transparent);color:var(--marca-texto);
  border-radius:999px;padding:1px 7px;font-variant-numeric:tabular-nums;
}

/* Ponto aceso: tem pedido a caminho. */
.ponto{
  width:6px;height:6px;border-radius:50%;background:var(--marca);flex:none;
  animation:respira-conta 2.2s ease-in-out infinite;
}
@keyframes respira-conta{0%,100%{opacity:1}50%{opacity:.35}}

/* ── blocos ───────────────────────────────────────────── */
.cabecalho-conta{margin:0 0 18px}
.cabecalho-conta h2{
  margin:0;font-family:var(--ui);font-weight:600;font-size:25px;letter-spacing:-.015em;
}
.cabecalho-conta p{margin:5px 0 0;font-size:13px;color:var(--texto-2)}

.bloco{
  background:var(--superficie-alta);background-image:var(--luz);
  border:1px solid var(--linha);border-radius:var(--raio-g);
  padding:20px;margin-bottom:14px;
}
.bloco-topo{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.bloco-topo h3{margin:0;font-size:14px;font-weight:600}
.dica-conta{margin:12px 0 0;font-size:12.5px;color:var(--texto-3);line-height:1.55}

.campos{display:grid;gap:14px}
.linha-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.campo label{
  display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--texto-3);margin-bottom:6px;
}
.campo input{
  width:100%;background:var(--superficie);border:1px solid var(--linha);border-radius:var(--raio);
  padding:11px 13px;color:var(--texto);font-family:var(--ui);font-size:14.5px;
}
.campo input:focus{border-color:var(--marca);outline:none}
.campo input:disabled{color:var(--texto-3);cursor:not-allowed}
.campo .nota{margin:6px 0 0;font-size:12px;color:var(--texto-3)}

.acoes{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.principal-conta{
  background:var(--marca-relevo);color:var(--sobre-marca);border:0;border-radius:var(--raio);
  padding:12px 20px;font-size:14px;font-weight:600;font-family:var(--ui);
  cursor:pointer;text-decoration:none;display:inline-block;
}
.principal-conta:hover{filter:brightness(1.06)}
.principal-conta:disabled{opacity:.45;cursor:not-allowed;filter:none}
.secundario-conta{
  background:transparent;border:1px solid var(--linha-forte);color:var(--texto);
  border-radius:var(--raio);padding:11px 18px;font-size:13.5px;
  font-family:var(--ui);cursor:pointer;
}
.secundario-conta:hover{border-color:var(--marca);color:var(--marca-texto)}
.acao-conta{
  margin-left:auto;background:transparent;border:0;color:var(--marca);
  font-size:12.5px;font-family:var(--ui);cursor:pointer;
}
.acao-conta:hover{color:var(--marca-realce)}
.aviso-erro{margin:12px 0 0;font-size:12.5px;color:var(--erro-texto);min-height:1em}

/* ── acesso ───────────────────────────────────────────── */
.metodo{display:flex;align-items:center;gap:13px;padding:13px 0;border-bottom:1px solid var(--linha)}
.metodo:last-of-type{border-bottom:0;padding-bottom:0}
.metodo-icone{
  width:36px;height:36px;border-radius:var(--raio);flex:none;display:grid;place-items:center;
  background:var(--superficie);border:1px solid var(--linha);
}
.metodo-icone svg{
  width:17px;height:17px;fill:none;stroke:var(--marca);
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.metodo p{margin:0;font-size:14px}
.metodo span{display:block;font-size:12px;color:var(--texto-3);margin-top:2px}

.faixa-equipe{
  display:flex;align-items:center;gap:12px;
  border:1px solid color-mix(in srgb,var(--marca) 34%,transparent);border-radius:var(--raio-g);
  background:color-mix(in srgb,var(--marca) 6%,transparent);padding:14px 16px;margin-bottom:14px;
}
.faixa-equipe p{margin:0;font-size:13px}
.faixa-equipe span{display:block;font-size:12px;color:var(--texto-2);margin-top:2px}
.faixa-equipe a{
  margin-left:auto;color:var(--marca);font-size:12.5px;text-decoration:none;
  border:1px solid color-mix(in srgb,var(--marca) 40%,transparent);border-radius:999px;padding:7px 14px;white-space:nowrap;
}
.faixa-equipe a:hover{background:color-mix(in srgb,var(--marca) 12%,transparent)}

/* ── pedidos ──────────────────────────────────────────── */
.filtros{display:flex;gap:8px;margin-bottom:16px;overflow-x:auto;padding-bottom:2px}
.filtros button{
  background:transparent;border:1px solid var(--linha-forte);color:var(--texto-2);
  border-radius:999px;padding:7px 15px;font-size:12.5px;font-family:var(--ui);
  cursor:pointer;white-space:nowrap;
}
.filtros button:hover{border-color:var(--marca);color:var(--marca-texto)}
.filtros button.on{background:var(--superficie-alta);border-color:var(--marca);color:var(--marca)}

.cartao-pedido{
  background:var(--superficie-alta);background-image:var(--luz);
  border:1px solid var(--linha);border-radius:var(--raio-g);
  padding:17px 19px;margin-bottom:12px;cursor:pointer;
  transition:border-color .18s,transform .18s;
}
.cartao-pedido:hover{border-color:var(--linha-forte);transform:translateY(-1px)}
.pedido-topo{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.pedido-num{margin:0;font-family:var(--ui);font-weight:600;font-size:17px;letter-spacing:-.01em}
.pedido-data{margin:0;font-size:12px;color:var(--texto-3)}
.pedido-itens{margin:0;font-size:13px;color:var(--texto-2);line-height:1.5}
.pedido-base{
  display:flex;align-items:center;gap:12px;margin-top:13px;
  padding-top:13px;border-top:1px solid var(--linha);
}
.pedido-total{margin:0;font-size:16px;font-weight:600}
.pedido-total span{
  display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--texto-3);font-weight:400;
}
.ver-mais{margin-left:auto;font-size:12.5px;color:var(--marca)}

.pill{
  margin-left:auto;font-size:11px;letter-spacing:.06em;border-radius:999px;
  padding:4px 11px;white-space:nowrap;border:1px solid;
}
.pill.andamento{color:var(--marca-texto);border-color:color-mix(in srgb,var(--marca) 42%,transparent);background:color-mix(in srgb,var(--marca) 8%,transparent)}
.pill.entregue{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 34%,transparent);background:color-mix(in srgb,var(--ok) 7%,transparent)}
.pill.cancelado{color:var(--erro-texto);border-color:color-mix(in srgb,var(--erro) 34%,transparent);background:color-mix(in srgb,var(--erro) 7%,transparent)}

.voltar-lista{
  background:transparent;border:0;color:var(--texto-2);font-size:12.5px;font-family:var(--ui);
  cursor:pointer;padding:0;margin-bottom:14px;display:inline-flex;align-items:center;gap:7px;
}
.voltar-lista:hover{color:var(--marca-texto)}
.voltar-lista svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* A trilha é o fio do pedido andando: o ponto aceso é onde ele está agora. */
.trilha-pedido{list-style:none;margin:0;padding:0 0 0 26px;position:relative}
.trilha-pedido::before{
  content:"";position:absolute;left:6px;top:8px;bottom:14px;width:1px;background:var(--linha-forte);
}
.trilha-pedido li{position:relative;padding:0 0 20px}
.trilha-pedido li:last-child{padding-bottom:0}
.trilha-pedido li::before{
  content:"";position:absolute;left:-23px;top:5px;width:9px;height:9px;border-radius:50%;
  background:var(--marca);border:1px solid var(--marca);
}
.trilha-pedido li.agora::before{box-shadow:0 0 0 4px color-mix(in srgb,var(--marca) 18%,transparent)}
.trilha-pedido p{margin:0;font-size:14px}
.trilha-pedido span{display:block;font-size:12px;color:var(--texto-3);margin-top:2px}

.item-linha{
  display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--linha);font-size:14px;
}
.item-linha:last-of-type{border-bottom:0}
.item-qtd{color:var(--marca);flex:none;font-variant-numeric:tabular-nums}
.item-valor{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--texto-2)}
.resumo{margin-top:6px;border-top:1px solid var(--linha);padding-top:13px}
.resumo div{display:flex;justify-content:space-between;font-size:13.5px;color:var(--texto-2);padding:4px 0}
.resumo div.total{
  color:var(--texto);font-size:16px;font-weight:600;
  padding-top:10px;margin-top:6px;border-top:1px solid var(--linha);
}

/* ── estados ──────────────────────────────────────────── */
.vazio-conta{text-align:center;padding:48px 20px}
.vazio-conta svg{
  width:44px;height:44px;fill:none;stroke:var(--texto-3);
  stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;
}
.vazio-conta h3{margin:16px 0 6px;font-family:var(--ui);font-weight:600;font-size:20px}
.vazio-conta p{margin:0 0 20px;font-size:13.5px;color:var(--texto-2)}

.erro-conta{border-color:color-mix(in srgb,var(--erro) 34%,transparent);background:color-mix(in srgb,var(--erro) 6%,transparent);text-align:center}
.erro-conta h3{margin:0 0 6px;font-size:15px}
.erro-conta p{margin:0 0 16px;font-size:13px;color:var(--texto-2)}

.recado{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(14px);
  background:var(--superficie-alta);border:1px solid var(--linha-forte);border-radius:999px;
  padding:11px 20px;font-size:13px;box-shadow:var(--sombra);
  opacity:0;pointer-events:none;transition:opacity .22s,transform .22s;z-index:40;
}
.recado.visivel{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── mobile ───────────────────────────────────────────── */
@media (max-width:900px){
  .pessoa{gap:13px;margin-bottom:18px;flex-wrap:wrap}
  .pessoa h2{font-size:20px}
  .inicial{width:46px;height:46px;font-size:18px}
  .sair-conta{margin-left:0;order:3}
  .abas{margin:0 -20px;padding:0 20px}
  .linha-2{grid-template-columns:1fr}
  .pedido-base{flex-wrap:wrap}
}

/* ── endereços ────────────────────────────────────────── */
.lista-enderecos{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}

.cartao-endereco{
  background:var(--superficie-alta);background-image:var(--luz);
  border:1px solid var(--linha);border-radius:var(--raio-g);
  padding:18px;position:relative;
}
.cartao-endereco.padrao{border-color:color-mix(in srgb,var(--marca) 34%,transparent)}

/* O selo e o botao dividem a linha do titulo, em vez de flutuarem soltos no
   canto. Em posicao absoluta os dois brigavam pelo mesmo ponto, e o titulo
   precisava de um respiro fixo a direita chutado no CSS — que quebrava com
   apelido comprido. */
.topo-cartao{
  display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:7px;
}
.marcas-cartao{display:flex;align-items:center;gap:8px;flex:none}
.selo-padrao{
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--marca);
  border:1px solid color-mix(in srgb,var(--marca) 40%,transparent);border-radius:999px;padding:2px 8px;
}
.cartao-endereco h3{margin:0;font-size:14px;font-weight:600;min-width:0}
.cartao-endereco p{margin:0;font-size:13px;color:var(--texto-2);line-height:1.55}
.cartao-endereco .referencia{color:var(--texto-3)}

.entrega-cartao{margin-top:10px !important;font-size:12.5px;color:var(--texto-3)}
.entrega-cartao.ok{color:var(--ok)}
.entrega-cartao.fora{color:var(--marca-texto)}

/* ── O menu do cartao ──────────────────────────────────────────────────
   As opcoes atras de um botao so. Soltas no rodape elas mudavam de
   QUANTIDADE entre um cartao e outro — "Tornar padrao" some no que ja e
   padrao — e dois cartoes lado a lado ficavam com os rodapes desalinhados.
   E "Remover", que apaga para sempre, ficava do mesmo tamanho e a um dedo
   de "Editar", que nao apaga nada. */
.caixa-menu{position:relative}
.tres-pontos{
  width:30px;height:30px;flex:none;border-radius:8px;border:1px solid transparent;
  background:transparent;color:var(--texto-3);display:grid;place-items:center;cursor:pointer;
  transition:background .16s,color .16s,border-color .16s;
}
.tres-pontos:hover,
.tres-pontos[aria-expanded="true"]{
  background:var(--veu);color:var(--texto);border-color:var(--linha-forte);
}
.tres-pontos svg{width:16px;height:16px;fill:currentColor}

.menu-cartao{
  position:absolute;top:calc(100% + 6px);right:0;z-index:20;min-width:172px;
  background:var(--vidro-forte);backdrop-filter:blur(14px);
  border:1px solid var(--linha-forte);border-radius:var(--raio);padding:5px;
  box-shadow:var(--sombra);
  animation:abre-menu .14s cubic-bezier(.2,.7,.3,1) both;
}
.menu-cartao[hidden]{display:none}
@keyframes abre-menu{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}

.opcao-menu{
  display:flex;align-items:center;gap:10px;width:100%;
  background:none;border:0;color:var(--texto);font-family:var(--ui);font-size:13px;
  padding:10px 11px;border-radius:7px;cursor:pointer;text-align:left;
}
.opcao-menu:hover{background:var(--veu)}
.opcao-menu svg{
  width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;color:var(--texto-3);
}
.opcao-menu:hover svg{color:var(--marca-texto)}

/* Remover fica por ultimo, depois de uma linha, e na cor do erro: e o unico
   caminho sem volta desta tela. */
.separa-menu{height:1px;background:var(--linha);margin:4px 6px}
.opcao-menu.risco{color:var(--erro-texto)}
.opcao-menu.risco svg{color:var(--erro-texto)}
.opcao-menu.risco:hover{background:color-mix(in srgb,var(--erro) 14%,transparent)}

/* Área de toque grande: adicionar endereço é o que a pessoa vem fazer
   aqui na primeira visita, e some sozinho conforme a agenda enche. */
.novo-endereco{
  border:1px dashed var(--linha-forte);border-radius:var(--raio-g);
  background:transparent;color:var(--texto-2);font-family:var(--ui);font-size:13.5px;
  padding:18px;min-height:118px;cursor:pointer;
}
.novo-endereco:hover{border-color:var(--marca);color:var(--marca-texto)}

@media(max-width:760px){
  .lista-enderecos{grid-template-columns:1fr}
}

/* Escolha do endereço padrão: área de toque grande, texto explicando o que
   acontece se ficar desmarcada — a pessoa não deveria precisar adivinhar. */
.escolha-padrao{
  display:flex;gap:11px;align-items:flex-start;cursor:pointer;
  border:1px solid var(--linha);border-radius:var(--raio);
  padding:13px 14px;background:var(--superficie);
}
.escolha-padrao:hover{border-color:var(--linha-forte)}
.escolha-padrao input{width:17px;height:17px;flex:none;margin-top:1px;accent-color:var(--marca)}
.escolha-padrao span{font-size:13.5px;line-height:1.45}
.escolha-padrao small{display:block;font-size:12px;color:var(--texto-3);margin-top:3px}

/* ══════════════════════════════════════════════════════════════════════
   Meus pontos

   O saldo, o catálogo de trocas e o extrato. Reusa `bloco`, `vazio-conta`
   e os botões da conta; o que está aqui é só o que esta aba tem e as
   outras não.
   ══════════════════════════════════════════════════════════════════════ */

/* O saldo é o maior número da tela porque é a única pergunta que a pessoa
   veio fazer. Tudo o mais responde "e daí?". */
.pontos-saldo{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;
  background:var(--luz),var(--superficie);border:1px solid var(--linha);
  border-radius:var(--raio-g);padding:22px 24px;margin-bottom:22px;
}
.pontos-rotulo{font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--apoio)}
.pontos-numero{
  margin:8px 0 0;font-family:var(--ui);font-weight:500;font-size:44px;line-height:1;
  letter-spacing:-.02em;color:var(--texto);
}
.pontos-numero i{
  font-family:var(--ui);font-style:normal;font-size:15px;color:var(--texto-3);margin-left:8px;
}
.pontos-vale{margin:10px 0 0;font-size:13px;color:var(--texto-2)}
.pontos-vale b{color:var(--texto)}
/* Âmbar, e não vermelho: o ponto não venceu ainda, e vermelho pediria uma
   ação urgente que não existe. */
.pontos-vencendo{
  margin:0;font-size:12.5px;color:var(--alerta-texto);
  background:var(--alerta-fundo);border-radius:var(--raio-g);padding:9px 13px;
}

/* ── O catálogo de trocas ──────────────────────────────────────────── */
.recompensas{display:grid;gap:12px}
.recompensa{
  display:flex;align-items:center;gap:14px;padding:14px;
  border:1px solid var(--linha);border-radius:var(--raio-g);background:var(--superficie);
}
/* A borda verde é o único sinal de "já dá" que sobrevive à leitura rápida:
   quem abre a aba procura o que consegue trocar hoje. */
.recompensa.pronta{border-color:color-mix(in srgb,var(--ok) 38%,transparent)}
/* Já no carrinho: a cor da marca, e não o verde de "dá para trocar". São
   estados diferentes — um é possibilidade, o outro é escolha feita — e usar
   a mesma cor faria a pessoa não saber se já pegou. */
.recompensa.escolhida{
  border-color:color-mix(in srgb,var(--marca) 46%,transparent);
  background:color-mix(in srgb,var(--marca) 7%,transparent);
}
.recompensa.escolhida .barra-progresso i{background:var(--marca)}
.recompensa.escolhida .recompensa-falta{color:var(--marca-texto)}
/* Esgotado esmaece, mas NÃO some: sumir faria quem juntou pontos por três
   meses achar que o programa mudou de regra sem avisar. */
.recompensa.acabou{opacity:.6}
.recompensa.acabou .barra-progresso i{background:var(--texto-3)}
.recompensa-foto{
  width:56px;height:56px;flex:none;border-radius:var(--raio);object-fit:cover;
  background:var(--superficie-alta);border:1px solid var(--linha);
}
.recompensa-foto.vazia{
  display:flex;align-items:center;justify-content:center;
  font-family:var(--ui);font-weight:600;font-size:17px;color:var(--texto-3);
}
.recompensa-corpo{flex:1;min-width:0}
.recompensa-corpo h4{margin:0;font-size:14px;font-weight:500;color:var(--texto)}
.recompensa-custo{margin:3px 0 8px;font-size:12.5px;color:var(--apoio)}
.recompensa-falta{margin:6px 0 0;font-size:12px;color:var(--texto-3)}
.recompensa.pronta .recompensa-falta{color:var(--ok)}
.recompensa.acabou .recompensa-falta{color:var(--texto-3)}
.recompensa-falta b{color:var(--texto-2)}
.recompensa button{flex:none}

/* A barra fica na tela mesmo depois de cheia: tirá-la faria o card alcançado
   parecer diferente dos outros por um motivo que não é o certo. */
.barra-progresso{height:4px;border-radius:999px;background:var(--linha);overflow:hidden}
.barra-progresso i{display:block;height:100%;background:var(--marca);border-radius:999px}
.barra-progresso.cheia i{background:var(--ok)}

/* ── O extrato ─────────────────────────────────────────────────────── */
.extrato{display:grid}
.extrato-linha{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 0;border-bottom:1px solid var(--linha);
}
.extrato-linha:last-child{border-bottom:0;padding-bottom:0}
.extrato-linha b{font-size:14px;font-variant-numeric:tabular-nums}
.extrato-linha > div b{font-weight:500}
.extrato-linha span{display:block;font-size:12px;color:var(--texto-3);margin-top:3px}
.extrato-linha .ganho{color:var(--ok)}
/* Cinza, e não vermelho: gastar ponto não é perda, é o programa funcionando.
   Vermelho ali faria a troca parecer um erro. */
.extrato-linha .gasto{color:var(--texto-3)}

@media (max-width:620px){
  .pontos-numero{font-size:36px}
  .recompensa{flex-wrap:wrap}
  .recompensa button{width:100%}
}

/* ── O pedido que espera pagamento ─────────────────────────────────────
   Um pedido pago online nasce esperando o Pix e ficava preso: o cliente nao
   pagava nem desistia, e a tela nao oferecia saida nenhuma. O que sobra para
   quem esta preso e abrir OUTRO pedido — e ai a loja fica com dois, com o
   estoque reservado nos dois.

   A faixa e de ALERTA e nao de erro: nada deu errado, ha uma pendencia com
   prazo. Por isso a borda usa `--alerta` e nao `--erro`. */
.esperando-pagamento{
  background:var(--coluna);border:1px solid var(--alerta);border-radius:14px;
  padding:16px 18px;margin:0 0 18px;
}
.esperando-pagamento h3{margin:0 0 4px;font-size:15px;color:var(--texto)}
.esperando-pagamento p{margin:0;font-size:13px;color:var(--texto-2);line-height:1.6}

.saidas{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.saidas .botao-cheio{flex:1;min-width:180px;margin:0}

/* "Desistir" nao e botao de perigo, e tambem nao se esconde.

   Desistir de um pedido que ainda nao foi pago nao destroi nada: nao houve
   dinheiro nem separacao. Pintar de vermelho sugeriria um risco que nao
   existe. Esconder faria a pessoa abandonar a tela sem resolver — que e o
   pior dos tres para a loja, porque o estoque fica preso ate expirar. */
.saidas .desistir{
  flex:0 0 auto;min-width:0;height:46px;padding:0 20px;
  background:none;border:1px solid var(--linha);border-radius:999px;
  color:var(--texto-2);font:600 14px var(--ui);cursor:pointer;
}
.saidas .desistir:hover{border-color:var(--linha-forte);color:var(--texto)}
.saidas .desistir:disabled{opacity:.6;cursor:default}

/* A confirmacao vive dentro da faixa, e nao numa janela: a pergunta e sobre
   o pedido que esta na tela, e tirar a pessoa de contexto para responder e o
   que faz ela desistir de desistir e deixar o pedido preso. */
.confirmar-desistir{
  background:var(--superficie);border:1px solid var(--linha);border-radius:12px;
  padding:14px 16px;margin-top:14px;
}
.confirmar-desistir p{margin:0 0 12px;font-size:13.5px;color:var(--texto)}