/* Calculadora de Calorías — estilo Pico.css */
#calorie-calculator .wrap {
  max-width: 1100px;
  margin: 1.5rem auto;
  padding: 1rem;
}

#calorie-calculator header {
  display: flex;
  gap: .75rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
#calorie-calculator header h2 { margin: 0 }

#calorie-calculator .muted { color: var(--muted-color, #6b7280); }

#calorie-calculator .grid { display: grid; gap: .9rem; }
@media (min-width: 768px) {
  #calorie-calculator .grid.cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  #calorie-calculator .grid.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  #calorie-calculator .grid.cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
}

#calorie-calculator .card {
  border: 1px solid hsl(215 20% 90%);
  border-radius: .75rem;
  padding: 1rem;
}

#calorie-calculator .info-rows {
  border: 1px solid hsl(215 20% 90%);
  border-radius: .6rem;
  overflow: hidden;
}
#calorie-calculator .info-row {
  display: grid;
  grid-template-columns: 1.2fr .6fr .6fr;
  gap: .6rem;
  align-items: center;
  padding: .7rem .9rem;
  border-top: 1px solid hsl(215 20% 92%);
}
#calorie-calculator .info-row:first-child { border-top: none; }
#calorie-calculator .info-row .label { font-weight: 600; }
#calorie-calculator .info-row .val { font-variant-numeric: tabular-nums; font-weight: 600; }

#calorie-calculator .sep { height:1px; background:hsl(215 20% 92%); margin:.75rem 0; }

#calorie-calculator .actions { display:flex; gap:.6rem; flex-wrap:wrap; }
#calorie-calculator .badge {
  display:inline-block; padding:.15rem .5rem; border-radius:.5rem;
  background:hsl(215 40% 96%); border:1px solid hsl(215 20% 90%);
  font-variant-numeric: tabular-nums; font-size:.9rem;
}

#calorie-calculator canvas { max-height: 280px; }