/* Mercado · estilos próprios da ferramenta. Só tokens do MAGU Design System. */

.hide-xs{display:none}
@media (min-width:420px){ .hide-xs{display:inline} }

/* ---------- listas ---------- */
.listas{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
.listas-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px;margin:-2px}
.listas-chips::-webkit-scrollbar{display:none}
.listas-chips .choice{flex:none;max-width:240px}
.listas-chips .choice span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.listas-chips .choice .n{color:var(--text-3);font-variant-numeric:tabular-nums}
.listas-chips .choice[aria-pressed="true"] .n{color:inherit;opacity:.75}
.listas-acts{display:flex;gap:6px}
.listas-acts #nova{margin-right:auto}

.mercado{margin-bottom:16px}

/* ---------- adicionar item (mobile-first) ---------- */
.add{display:grid;gap:10px;grid-template-columns:1fr 1fr;padding:14px;border-radius:var(--r);
  background:var(--m1);border:1px solid var(--line);margin-bottom:12px}
.add .f-nome,.add .f-cat,.add .f-acts{grid-column:1 / -1}
.add .f-preco{grid-column:1 / -1}
.f-acts{display:flex;gap:8px}
.f-acts .btn-core{flex:1}
#voz.is-rec{background:var(--danger);color:var(--on-core);border-color:transparent}
@media (min-width:480px){
  .add{grid-template-columns:1fr 1fr 1.3fr}
  .add .f-preco{grid-column:auto}
}
@media (min-width:1081px){
  .add{grid-template-columns:minmax(0,1.6fr) 84px 96px 120px}
  .add .f-nome{grid-column:1 / -1}
  .add .f-cat{grid-column:1 / 2;grid-row:2}
  .add .f-acts{grid-column:1 / -1}
}

.vozstatus{display:flex;align-items:center;gap:10px;font-size:var(--t-sm);color:var(--text);
  padding:10px 14px;border-radius:var(--r);margin-bottom:12px;
  background:var(--core-soft);border:1px solid color-mix(in srgb, var(--core) 30%, transparent)}
.vozstatus.is-erro{background:color-mix(in srgb, var(--danger) 12%, transparent);
  border-color:color-mix(in srgb, var(--danger) 30%, transparent)}

/* ---------- filtros ---------- */
.filtros{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:6px 0 16px}
.filtros-chips{display:flex;gap:6px;flex-wrap:wrap}
.agrupar{display:inline-flex;align-items:center;gap:10px;font-size:var(--t-sm);color:var(--text-2);cursor:pointer;
  min-height:44px}
.busca{flex:1 1 100%}
@media (min-width:641px){ .busca{flex:1 1 180px} }

/* ---------- itens ---------- */
.itens ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.grupo + .grupo{margin-top:18px}
.grupo-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font-size:var(--t-sm);font-weight:600;color:var(--text-2);margin:0 4px 8px;letter-spacing:-.01em}
.grupo-h .n{color:var(--text-3);font-weight:500}
.grupo-h .s{font-variant-numeric:tabular-nums;color:var(--text-2);font-weight:500}

.item{display:flex;align-items:center;gap:14px;padding:12px 10px 12px 16px;border-radius:var(--r);
  background:var(--m1);border:1px solid var(--line);
  transition:background-color var(--dur) var(--ease), border-color var(--dur) var(--ease)}
.item:hover{background:var(--m2)}
.item-info{flex:1;min-width:0}
.item-nome{display:inline;text-align:left;font-weight:600;font-size:var(--t-md);letter-spacing:-.015em;
  color:var(--text);word-break:break-word;border-radius:var(--r-xs);padding:0}
.item-nome:hover{color:var(--core)}
.item .chip{margin-left:6px;vertical-align:2px}
.item-meta{font-size:var(--t-sm);color:var(--text-2);margin-top:3px;font-variant-numeric:tabular-nums}
.item-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.item-sub{flex:none;font-weight:600;font-size:var(--t-sm);color:var(--text);font-variant-numeric:tabular-nums}
.item.is-done .item-sub{color:var(--text-3)}
.item-dicas{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.item-acts{display:flex;gap:4px;flex:none}
.item-acts .btn{background:transparent;border-color:transparent;color:var(--text-3)}
.item-acts .btn:hover{background:var(--m2);color:var(--text)}
.item-acts .btn.is-danger:hover{color:var(--danger)}
.item.is-done{background:transparent}
.item.is-done .item-nome{color:var(--text-3);text-decoration:line-through;text-decoration-thickness:1px}
.item.is-done .item-meta,.item.is-done .item-meta b{color:var(--text-3)}

.empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:36px 12px;color:var(--text-3);
  font-size:var(--t-sm);text-align:center}
.empty .ic{width:32px;height:32px}

/* ---------- resumo ---------- */
.resumo .card-h{margin-bottom:8px}
.tot{display:flex;flex-direction:column;gap:2px;margin-bottom:14px}
.tot-l{font-size:var(--t-sm);color:var(--text-2)}
.tot-v{font-family:var(--f-display);font-size:var(--t-xl);font-weight:700;letter-spacing:-.035em;color:var(--text)}
.linhas{display:flex;flex-direction:column;gap:8px;font-size:var(--t-sm);margin-bottom:14px}
.linhas div{display:flex;justify-content:space-between;align-items:center;gap:12px}
.linhas dt{color:var(--text-2);display:flex;align-items:center;gap:6px}
.linhas dd{color:var(--text);text-align:right}
.linhas dd.is-danger{color:var(--danger)}
.resumo .meter{margin-bottom:20px}
.grupo-acts{display:grid;gap:8px;grid-template-columns:1fr}
.grupo-acts .btn{justify-content:flex-start}
.grupo-acts.duas{grid-template-columns:1fr 1fr}
.rotulo{font-family:var(--f-text);font-size:var(--t-xs);font-weight:600;color:var(--text-3);letter-spacing:0;
  margin:20px 2px 8px}
.sync{display:flex;align-items:flex-start;gap:8px;margin-top:20px;padding-top:14px;border-top:1px solid var(--line);
  font-size:var(--t-xs);color:var(--text-3)}
.sync .ic{margin-top:1px}
.sync.is-ok .ic{color:var(--ok)}
.sync.is-warn .ic{color:var(--warn)}
.sync.is-danger .ic{color:var(--danger)}

/* ---------- barra de total no celular ---------- */
.totbar{position:sticky;bottom:calc(10px + env(safe-area-inset-bottom));z-index:30;margin-top:14px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;border-radius:var(--r);
  font-size:var(--t-sm);color:var(--text-2)}
.totbar strong{font-family:var(--f-display);font-size:var(--t-lg);letter-spacing:-.03em;color:var(--text)}
.totbar b{color:var(--text);font-weight:600}

@media (min-width:1081px){
  .tool-grid{grid-template-columns:minmax(0,1fr) 340px}
  .resumo{position:sticky;top:calc(var(--bar-h) + 16px)}
  .totbar{display:none}
}

.mais .headline{margin-bottom:10px}

/* ---------- modal: conteúdos ---------- */
.overlay--top{z-index:70}
.dlg h2{font-size:var(--t-lg);letter-spacing:-.03em;margin-bottom:8px}
.dlg p{color:var(--text-2);font-size:var(--t-sm);margin-bottom:6px}
.dlg .field{margin-top:12px}

.nota{font-size:var(--t-sm);color:var(--text-2);margin-bottom:12px}
.nota-c{text-align:center}
.nota.is-danger{color:var(--danger)}
.sub-h{font-family:var(--f-text);font-size:var(--t-sm);font-weight:600;color:var(--text-2);letter-spacing:-.01em;
  margin:18px 0 6px}
.hist{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;
  border-bottom:1px solid var(--line);font-size:var(--t-sm)}
.hist:last-child{border-bottom:0}
.hist > span{min-width:0;flex:1}
.hist small{display:block;font-size:var(--t-xs);color:var(--text-3);margin-top:1px}
.hist b{font-variant-numeric:tabular-nums;white-space:nowrap}
.hist .ic{display:inline-block;vertical-align:-3px;margin-right:4px;color:var(--core)}
.resumo-hist{display:grid;grid-template-columns:repeat(2, 1fr);gap:8px;margin-bottom:6px}
.resumo-hist div{padding:10px 12px;border-radius:var(--r-sm);background:var(--m1);border:1px solid var(--line)}
.resumo-hist span{display:block;font-size:var(--t-xs);color:var(--text-3)}
.resumo-hist b{font-variant-numeric:tabular-nums}
@media (min-width:480px){ .resumo-hist{grid-template-columns:repeat(4, 1fr)} }
.up{color:var(--danger)}
.down{color:var(--ok)}

.fedit{display:flex;flex-direction:column;gap:12px}
.fedit-linha{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fedit-linha .field:last-child{grid-column:1 / -1}
@media (min-width:480px){
  .fedit-linha{grid-template-columns:1fr 1fr 1.2fr}
  .fedit-linha .field:last-child{grid-column:auto}
}
.fedit-check{display:flex;align-items:center;gap:12px;font-size:var(--t-sm);color:var(--text);cursor:pointer;min-height:44px}
.subtotal{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--t-sm);color:var(--text-2);
  border-top:1px solid var(--line);padding-top:12px}
.subtotal b{font-family:var(--f-display);font-size:var(--t-lg);color:var(--text);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.fedit .sheet-acts{margin-top:4px}
.centro{align-self:center}

.opcoes{display:flex;flex-direction:column;gap:8px}
.opcao{display:flex;align-items:center;gap:14px;text-align:left;padding:14px;border-radius:var(--r);
  background:var(--m1);border:1px solid var(--line);color:var(--text);min-height:44px;
  transition:background-color var(--dur) var(--ease), border-color var(--dur) var(--ease)}
.opcao:hover{background:var(--m2);border-color:var(--line-2)}
.opcao > .ic{color:var(--core)}
.opcao b{display:block;font-size:var(--t-sm);font-weight:600}
.opcao small{display:block;font-size:var(--t-xs);color:var(--text-3);margin-top:2px}

/* inflação */
.big{font-family:var(--f-display);font-size:var(--t-h2);font-weight:700;letter-spacing:-.045em;text-align:center;
  font-variant-numeric:tabular-nums;margin:4px 0}
.big.sobe{color:var(--danger)}
.big.desce{color:var(--ok)}
.chart-wrap{color:var(--core)}
.chart{width:100%;height:auto;aspect-ratio:440 / 200;margin:12px 0}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .lbl{fill:var(--text-3);font-size:10px;font-family:var(--f-text)}
.chart .linha{fill:none;stroke:currentColor;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.chart .area{fill:url(#grad)}
.chart .pt{fill:var(--bg);stroke:currentColor;stroke-width:2}
.barrinha{height:4px;border-radius:var(--r-pill);background:var(--m3);margin-top:6px;overflow:hidden}
.barrinha i{display:block;height:100%;width:0;border-radius:inherit;background:var(--ok)}
.barrinha i.is-up{background:var(--danger)}

.passos{margin:4px 0 14px 20px;font-size:var(--t-sm);line-height:1.8;color:var(--text)}
.passos li{margin-bottom:4px;padding-left:4px}
.passos .ic{display:inline-block;vertical-align:-3px}
body.travado{overflow:hidden}

@media (max-width:640px){
  .card{padding:16px}
  .add{padding:12px}
  .item{gap:12px;padding:10px 6px 10px 14px}
  .item-acts{gap:0}
  .tool-hero{flex-direction:column;align-items:flex-start;gap:14px;padding:16px 0 20px}
  .tool-hero .app-ic{width:60px;height:60px}
}

/* Design system · alvos de toque: tudo que se toca tem pelo menos 44 px (chips, botões pequenos, links) */
.btn-sm, .choice, .link-btn, .link-more { min-height: 44px; }
.btn-sm.btn-icon { width: 44px; }
.wordmark, .footer nav a { display: inline-flex; align-items: center; min-height: 44px; }
.switch { margin: 9px 0; } /* 26 px de altura visual dentro de 44 px de área */